Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add imports to guesser output #7699

Merged
merged 5 commits into from
May 18, 2022
Merged

Add imports to guesser output #7699

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
09e9bf6
Add imports to guesser output
fzaninotto May 16, 2022
2141939
Fix order
fzaninotto May 16, 2022
650a15e
Change syntax
fzaninotto May 16, 2022
d4fc498
Fix missing resource change effect
fzaninotto May 16, 2022
9d36311
Fix linter warnings
fzaninotto May 17, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
54 changes: 54 additions & 0 deletions packages/ra-ui-materialui/src/detail/EditGuesser.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
import * as React from 'react';
import expect from 'expect';
import { render, screen, waitFor } from '@testing-library/react';
import { CoreAdminContext } from 'ra-core';

import { EditGuesser } from './EditGuesser';
import { ThemeProvider } from '../layout';

describe('<EditGuesser />', () => {
it('should log the guessed Edit view based on the fetched record', async () => {
const logSpy = jest.spyOn(console, 'log').mockImplementation(() => {});
const dataProvider = {
getOne: () =>
Promise.resolve({
data: {
id: 123,
author: 'john doe',
post_id: 6,
score: 3,
body:
"Queen, tossing her head through the wood. 'If it had lost something; and she felt sure it.",
created_at: new Date('2012-08-02'),
},
}),
getMany: () => Promise.resolve({ data: [] }),
};
render(
<ThemeProvider theme={{}}>
<CoreAdminContext dataProvider={dataProvider as any}>
<EditGuesser resource="comments" id={123} />
</CoreAdminContext>
</ThemeProvider>
);
await waitFor(() => {
screen.getByDisplayValue('john doe');
});
expect(logSpy).toHaveBeenCalledWith(`Guessed Edit:

import { DateInput, Edit, NumberInput, ReferenceInput, SelectInput, SimpleForm, TextInput } from 'react-admin';

export const CommentEdit = () => (
<Edit>
<SimpleForm>
<TextInput source="id" />
<TextInput source="author" />
<ReferenceInput source="post_id" reference="posts"><SelectInput optionText="id" /></ReferenceInput>
<NumberInput source="score" />
<TextInput source="body" />
<DateInput source="created_at" />
</SimpleForm>
</Edit>
);`);
});
});
88 changes: 64 additions & 24 deletions packages/ra-ui-materialui/src/detail/EditGuesser.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,7 @@ import * as React from 'react';
import { useEffect, useState } from 'react';
import inflection from 'inflection';
import {
useEditController,
EditContextProvider,
EditBase,
InferredElement,
useResourceContext,
useEditContext,
Expand All @@ -14,12 +13,45 @@ import { EditProps } from '../types';
import { EditView } from './EditView';
import { editFieldTypes } from './editFieldTypes';

export const EditGuesser = (props: EditProps) => {
const {
resource,
id,
mutationMode,
mutationOptions,
queryOptions,
redirect,
transform,
disableAuthentication,
...rest
} = props;
return (
<EditBase
resource={resource}
id={id}
mutationMode={mutationMode}
mutationOptions={mutationOptions}
queryOptions={queryOptions}
redirect={redirect}
transform={transform}
disableAuthentication={disableAuthentication}
>
<EditViewGuesser {...rest} />
</EditBase>
);
};

const EditViewGuesser = props => {
const resource = useResourceContext(props);
const { record } = useEditContext();
const [inferredChild, setInferredChild] = useState(null);
const [child, setChild] = useState(null);

useEffect(() => {
setChild(null);
}, [resource]);

useEffect(() => {
if (record && !inferredChild) {
if (record && !child) {
const inferredElements = getElementsFromRecords(
[record],
editFieldTypes
Expand All @@ -29,34 +61,42 @@ const EditViewGuesser = props => {
null,
inferredElements
);
setChild(inferredChild.getElement());

if (process.env.NODE_ENV === 'production') return;

process.env.NODE_ENV !== 'production' &&
// eslint-disable-next-line no-console
console.log(
`Guessed Edit:
const representation = inferredChild.getRepresentation();

const components = ['Edit']
.concat(
Array.from(
new Set(
Array.from(representation.matchAll(/<([^/\s>]+)/g))
.map(match => match[1])
.filter(component => component !== 'span')
)
)
)
.sort();

// eslint-disable-next-line no-console
console.log(
`Guessed Edit:

import { ${components.join(', ')} } from 'react-admin';

export const ${inflection.capitalize(
inflection.singularize(resource)
)}Edit = () => (
inflection.singularize(resource)
)}Edit = () => (
<Edit>
${inferredChild.getRepresentation()}
${representation}
</Edit>
);`
);
setInferredChild(inferredChild.getElement());
);
}
}, [record, inferredChild, resource]);
}, [record, child, resource]);

return <EditView {...props}>{inferredChild}</EditView>;
return <EditView {...props}>{child}</EditView>;
};

EditViewGuesser.propTypes = EditView.propTypes;

export const EditGuesser = (props: EditProps) => {
const controllerProps = useEditController(props);
return (
<EditContextProvider value={controllerProps}>
<EditViewGuesser {...props} />
</EditContextProvider>
);
};
53 changes: 53 additions & 0 deletions packages/ra-ui-materialui/src/detail/ShowGuesser.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
import * as React from 'react';
import expect from 'expect';
import { render, screen, waitFor } from '@testing-library/react';
import { CoreAdminContext } from 'ra-core';

import { ShowGuesser } from './ShowGuesser';
import { ThemeProvider } from '../layout';

describe('<ShowGuesser />', () => {
it('should log the guessed Show view based on the fetched record', async () => {
const logSpy = jest.spyOn(console, 'log').mockImplementation(() => {});
const dataProvider = {
getOne: () =>
Promise.resolve({
data: {
id: 123,
author: 'john doe',
post_id: 6,
score: 3,
body:
"Queen, tossing her head through the wood. 'If it had lost something; and she felt sure it.",
created_at: new Date('2012-08-02'),
},
}),
};
render(
<ThemeProvider theme={{}}>
<CoreAdminContext dataProvider={dataProvider as any}>
<ShowGuesser resource="comments" id={123} />
</CoreAdminContext>
</ThemeProvider>
);
await waitFor(() => {
screen.getByText('john doe');
});
expect(logSpy).toHaveBeenCalledWith(`Guessed Show:

import { DateField, NumberField, ReferenceField, Show, SimpleShowLayout, TextField } from 'react-admin';

export const CommentShow = () => (
<Show>
<SimpleShowLayout>
<TextField source="id" />
<TextField source="author" />
<ReferenceField source="post_id" reference="posts"><TextField source="id" /></ReferenceField>
<NumberField source="score" />
<TextField source="body" />
<DateField source="created_at" />
</SimpleShowLayout>
</Show>
);`);
});
});
64 changes: 44 additions & 20 deletions packages/ra-ui-materialui/src/detail/ShowGuesser.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,12 +13,28 @@ import { ShowProps } from '../types';
import { ShowView } from './ShowView';
import { showFieldTypes } from './showFieldTypes';

export const ShowGuesser = ({
id,
queryOptions,
resource,
...rest
}: Omit<ShowProps, 'children'>) => (
<ShowBase id={id} resource={resource} queryOptions={queryOptions}>
<ShowViewGuesser {...rest} />
</ShowBase>
);

const ShowViewGuesser = props => {
const resource = useResourceContext(props);
const { record } = useShowContext();
const [inferredChild, setInferredChild] = useState(null);
const [child, setChild] = useState(null);

useEffect(() => {
setChild(null);
}, [resource]);

useEffect(() => {
if (record && !inferredChild) {
if (record && !child) {
const inferredElements = getElementsFromRecords(
[record],
showFieldTypes
Expand All @@ -28,33 +44,41 @@ const ShowViewGuesser = props => {
null,
inferredElements
);
setChild(inferredChild.getElement());

if (process.env.NODE_ENV === 'production') return;

process.env.NODE_ENV !== 'production' &&
// eslint-disable-next-line no-console
console.log(
`Guessed Show:
const representation = inferredChild.getRepresentation();
const components = ['Show']
.concat(
Array.from(
new Set(
Array.from(representation.matchAll(/<([^/\s>]+)/g))
.map(match => match[1])
.filter(component => component !== 'span')
)
)
)
.sort();

// eslint-disable-next-line no-console
console.log(
`Guessed Show:

import { ${components.join(', ')} } from 'react-admin';

export const ${inflection.capitalize(
inflection.singularize(resource)
)}Show = () => (
inflection.singularize(resource)
)}Show = () => (
<Show>
${inferredChild.getRepresentation()}
</Show>
);`
);
setInferredChild(inferredChild.getElement());
);
}
}, [record, inferredChild, resource]);
}, [record, child, resource]);

return <ShowView {...props}>{inferredChild}</ShowView>;
return <ShowView {...props}>{child}</ShowView>;
};

ShowViewGuesser.propTypes = ShowView.propTypes;

export const ShowGuesser = ({ id, queryOptions, ...rest }: ShowProps) => (
<ShowBase id={id} queryOptions={queryOptions}>
<ShowViewGuesser {...rest} />
</ShowBase>
);

export default ShowGuesser;
56 changes: 56 additions & 0 deletions packages/ra-ui-materialui/src/list/ListGuesser.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
import * as React from 'react';
import expect from 'expect';
import { render, screen, waitFor } from '@testing-library/react';
import { CoreAdminContext } from 'ra-core';

import { ListGuesser } from './ListGuesser';
import { ThemeProvider } from '../layout';

describe('<ListGuesser />', () => {
it('should log the guessed List view based on the fetched records', async () => {
const logSpy = jest.spyOn(console, 'log').mockImplementation(() => {});
const dataProvider = {
getList: () =>
Promise.resolve({
data: [
{
id: 123,
author: 'john doe',
post_id: 6,
score: 3,
body:
"Queen, tossing her head through the wood. 'If it had lost something; and she felt sure it.",
created_at: new Date('2012-08-02'),
},
],
total: 1,
}),
};
render(
<ThemeProvider theme={{}}>
<CoreAdminContext dataProvider={dataProvider as any}>
<ListGuesser resource="comments" />
</CoreAdminContext>
</ThemeProvider>
);
await waitFor(() => {
screen.getByText('john doe');
});
expect(logSpy).toHaveBeenCalledWith(`Guessed List:

import { Datagrid, DateField, List, NumberField, ReferenceField, TextField } from 'react-admin';

export const CommentList = () => (
<List>
<Datagrid rowClick="edit">
<TextField source="id" />
<TextField source="author" />
<ReferenceField source="post_id" reference="posts"><TextField source="id" /></ReferenceField>
<NumberField source="score" />
<TextField source="body" />
<DateField source="created_at" />
</Datagrid>
</List>
);`);
});
});
Loading