Fix override code for page components (#577)

Author: fzaninotto

src/create/CreateGuesser.tsx

@@ -18,20 +18,29 @@ import type {
 } from '../types.js';
 
 const getOverrideCode = (schema: Resource, fields: Field[]) => {
-  let code =
-    'If you want to override at least one input, paste this content in the <CreateGuesser> component of your resource:\n\n';
-
-  code += `const ${schema.title}Create = () => (\n`;
+  let code = `If you want to override at least one input, create a ${schema.title}Create component with this content:\n`;
+  code += `\n`;
+  code += `import { CreateGuesser, InputGuesser } from "@api-platform/admin";\n`;
+  code += `\n`;
+  code += `export const ${schema.title}Create = () => (\n`;
   code += `    <CreateGuesser>\n`;
-
   fields.forEach((field) => {
     code += `        <InputGuesser source="${field.name}" />\n`;
   });
   code += `    </CreateGuesser>\n`;
   code += `);\n`;
   code += `\n`;
-  code += `And don't forget update your <ResourceGuesser> component:\n`;
-  code += `<ResourceGuesser name="${schema.name}" create={${schema.title}Create} />`;
+  code += `Then, update your main admin component:\n`;
+  code += `\n`;
+  code += `import { HydraAdmin, ResourceGuesser } from "@api-platform/admin";\n`;
+  code += `import { ${schema.title}Create } from './${schema.title}Create';\n`;
+  code += `\n`;
+  code += `const App = () => (\n`;
+  code += `    <HydraAdmin entrypoint={...}>\n`;
+  code += `        <ResourceGuesser name="${schema.name}" create={${schema.title}Create} />\n`;
+  code += `        {/* ... */}\n`;
+  code += `    </HydraAdmin>\n`;
+  code += `);\n`;
 
   return code;
 };

src/edit/EditGuesser.tsx

@@ -20,20 +20,29 @@ import type {
 } from '../types.js';
 
 const getOverrideCode = (schema: Resource, fields: Field[]) => {
-  let code =
-    'If you want to override at least one input, paste this content in the <EditGuesser> component of your resource:\n\n';
-
-  code += `const ${schema.title}Edit = () => (\n`;
+  let code = `If you want to override at least one input, create a ${schema.title}Edit component with this content:\n`;
+  code += `\n`;
+  code += `import { EditGuesser, InputGuesser } from "@api-platform/admin";\n`;
+  code += `\n`;
+  code += `export const ${schema.title}Edit = () => (\n`;
   code += `    <EditGuesser>\n`;
-
   fields.forEach((field) => {
     code += `        <InputGuesser source="${field.name}" />\n`;
   });
   code += `    </EditGuesser>\n`;
   code += `);\n`;
   code += `\n`;
-  code += `And don't forget update your <ResourceGuesser> component:\n`;
-  code += `<ResourceGuesser name="${schema.name}" edit={${schema.title}Edit} />`;
+  code += `Then, update your main admin component:\n`;
+  code += `\n`;
+  code += `import { HydraAdmin, ResourceGuesser } from "@api-platform/admin";\n`;
+  code += `import { ${schema.title}Edit } from './${schema.title}Edit';\n`;
+  code += `\n`;
+  code += `const App = () => (\n`;
+  code += `    <HydraAdmin entrypoint={...}>\n`;
+  code += `        <ResourceGuesser name="${schema.name}" edit={${schema.title}Edit} />\n`;
+  code += `        {/* ... */}\n`;
+  code += `    </HydraAdmin>\n`;
+  code += `);\n`;
 
   return code;
 };

src/list/ListGuesser.tsx

@@ -23,20 +23,29 @@ import type {
 } from '../types.js';
 
 const getOverrideCode = (schema: Resource, fields: Field[]) => {
-  let code =
-    'If you want to override at least one field, paste this content in the <ListGuesser> component of your resource:\n\n';
-
-  code += `const ${schema.title}List = () => (\n`;
+  let code = `If you want to override at least one field, create a ${schema.title}List component with this content:\n`;
+  code += `\n`;
+  code += `import { ListGuesser, FieldGuesser } from "@api-platform/admin";\n`;
+  code += `\n`;
+  code += `export const ${schema.title}List = () => (\n`;
   code += `    <ListGuesser>\n`;
-
   fields.forEach((field) => {
     code += `        <FieldGuesser source="${field.name}" />\n`;
   });
   code += `    </ListGuesser>\n`;
   code += `);\n`;
   code += `\n`;
-  code += `And don't forget update your <ResourceGuesser> component:\n`;
-  code += `<ResourceGuesser name="${schema.name}" list={${schema.title}List} />`;
+  code += `Then, update your main admin component:\n`;
+  code += `\n`;
+  code += `import { HydraAdmin, ResourceGuesser } from "@api-platform/admin";\n`;
+  code += `import { ${schema.title}List } from './${schema.title}List';\n`;
+  code += `\n`;
+  code += `const App = () => (\n`;
+  code += `    <HydraAdmin entrypoint={...}>\n`;
+  code += `        <ResourceGuesser name="${schema.name}" list={${schema.title}List} />\n`;
+  code += `        {/* ... */}\n`;
+  code += `    </HydraAdmin>\n`;
+  code += `);\n`;
 
   return code;
 };

src/show/ShowGuesser.tsx

@@ -19,20 +19,29 @@ import type {
 } from '../types.js';
 
 const getOverrideCode = (schema: Resource, fields: Field[]) => {
-  let code =
-    'If you want to override at least one field, paste this content in the <ShowGuesser> component of your resource:\n\n';
-
-  code += `const ${schema.title}Show = () => (\n`;
+  let code = `If you want to override at least one field, create a ${schema.title}Show component with this content:\n`;
+  code += `\n`;
+  code += `import { ShowGuesser, FieldGuesser } from "@api-platform/admin";\n`;
+  code += `\n`;
+  code += `export const ${schema.title}Show = () => (\n`;
   code += `    <ShowGuesser>\n`;
-
   fields.forEach((field) => {
     code += `        <FieldGuesser source="${field.name}" />\n`;
   });
   code += `    </ShowGuesser>\n`;
   code += `);\n`;
   code += `\n`;
-  code += `And don't forget update your <ResourceGuesser> component:\n`;
-  code += `<ResourceGuesser name="${schema.name}" show={${schema.title}Show} />`;
+  code += `Then, update your main admin component:\n`;
+  code += `\n`;
+  code += `import { HydraAdmin, ResourceGuesser } from "@api-platform/admin";\n`;
+  code += `import { ${schema.title}Show } from './${schema.title}Show';\n`;
+  code += `\n`;
+  code += `const App = () => (\n`;
+  code += `    <HydraAdmin entrypoint={...}>\n`;
+  code += `        <ResourceGuesser name="${schema.name}" show={${schema.title}Show} />\n`;
+  code += `        {/* ... */}\n`;
+  code += `    </HydraAdmin>\n`;
+  code += `);\n`;
 
   return code;
 };