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

Add ability to omit basePath in buttons #6041

Merged
merged 5 commits into from
Mar 18, 2021
Merged

Add ability to omit basePath in buttons #6041

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
3daf496
Remove the need to pass basePath in buttons
fzaninotto Mar 15, 2021
8f7847f
Remove the need to pass resource in ReferenceField
fzaninotto Mar 15, 2021
ece6188
Fix typo in jsDoc
fzaninotto Mar 15, 2021
ad8743e
Fix tests
fzaninotto Mar 15, 2021
80b6161
Fix warning
fzaninotto Mar 16, 2021
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
15 changes: 3 additions & 12 deletions examples/simple/src/comments/CommentList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -128,7 +128,7 @@ const useListStyles = makeStyles(theme => ({
}));

const CommentGrid = () => {
const { ids, data, basePath } = useListContext();
const { ids, data } = useListContext();
const translate = useTranslate();
const classes = useListStyles();

Expand Down Expand Up @@ -165,7 +165,6 @@ const CommentGrid = () => {
{translate('comment.list.about')} 
</Typography>
<ReferenceField
resource="comments"
record={data[id]}
source="post_id"
reference="posts"
Expand All @@ -177,16 +176,8 @@ const CommentGrid = () => {
</ReferenceField>
</CardContent>
<CardActions className={classes.cardActions}>
<EditButton
resource="posts"
basePath={basePath}
record={data[id]}
/>
<ShowButton
resource="posts"
basePath={basePath}
record={data[id]}
/>
<EditButton record={data[id]} />
<ShowButton record={data[id]} />
</CardActions>
</Card>
</Grid>
Expand Down
2 changes: 1 addition & 1 deletion packages/ra-core/src/controller/button/useDeleteWithConfirmController.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,7 @@ const useDeleteWithConfirmController = (
setOpen(false);
if (onSuccess === undefined) {
notify('ra.notification.deleted', 'info', { smart_count: 1 });
redirect(redirectTo, basePath);
redirect(redirectTo, basePath || `/${resource}`);
refresh();
} else {
onSuccess(response);
Expand Down
2 changes: 1 addition & 1 deletion packages/ra-core/src/controller/button/useDeleteWithUndoController.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@ const useDeleteWithUndoController = (
{ smart_count: 1 },
true
);
redirect(redirectTo, basePath);
redirect(redirectTo, basePath || `/${resource}`);
refresh();
},
onFailure:
Expand Down
6 changes: 4 additions & 2 deletions packages/ra-core/src/controller/field/getResourceLinkPath.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ const getResourceLinkPath = ({
reference,
link = 'edit',
record = { id: '' },
basePath = `/${resource}`,
basePath = '',
linkType,
}: Option): string | false => {
if (linkType !== undefined) {
Expand All @@ -62,7 +62,9 @@ const getResourceLinkPath = ({
);
}
const sourceId = get(record, source);
const rootPath = basePath.replace(resource, reference);
const rootPath = basePath
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this is a change I wanted to push in the previous PR, but @djhi was too fast to merge it

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It was RFR! 😂

? basePath.replace(resource, reference)
: `/${reference}`;
const linkTo: LinkToType = linkType !== undefined ? linkType : link;

// Backward compatibility: keep linkType but with warning
Expand Down
2 changes: 1 addition & 1 deletion packages/ra-core/src/core/useResourceContext.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import { ResourceContext, ResourceContextValue } from './ResourceContext';
* @example
*
* const ResourceName = (props) => {
* const { resource } = useResourceContext(props);
* const resource = useResourceContext(props);
* const resourceName = translate(`resources.${resource}.name`, {
* smart_count: 1,
* _: inflection.humanize(inflection.singularize(resource)),
Expand Down
11 changes: 7 additions & 4 deletions packages/ra-ui-materialui/src/button/CloneButton.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import { TestContext } from 'ra-test';
const theme = createMuiTheme();

const invalidButtonDomProps = {
basePath: '',
basePath: '/posts',
handleSubmit: jest.fn(),
handleSubmitWithRedirect: jest.fn(),
invalid: false,
Expand All @@ -32,14 +32,17 @@ describe('<CloneButton />', () => {
const { getByRole } = render(
<Router history={history}>
<ThemeProvider theme={theme}>
<CloneButton record={{ id: 123, foo: 'bar' }} basePath="" />
<CloneButton
record={{ id: 123, foo: 'bar' }}
basePath="/posts"
/>
</ThemeProvider>
</Router>
);

const button = getByRole('button');
expect(button.getAttribute('href')).toEqual(
'/create?source=%7B%22foo%22%3A%22bar%22%7D'
'/posts/create?source=%7B%22foo%22%3A%22bar%22%7D'
);
});

Expand All @@ -56,7 +59,7 @@ describe('<CloneButton />', () => {

expect(spy).not.toHaveBeenCalled();
expect(getByRole('button').getAttribute('href')).toEqual(
'/create?source=%7B%22foo%22%3A%22bar%22%7D'
'/posts/create?source=%7B%22foo%22%3A%22bar%22%7D'
);

spy.mockRestore();
Expand Down
49 changes: 28 additions & 21 deletions packages/ra-ui-materialui/src/button/CloneButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,36 +4,42 @@ import PropTypes from 'prop-types';
import Queue from '@material-ui/icons/Queue';
import { Link } from 'react-router-dom';
import { stringify } from 'query-string';
import { Record } from 'ra-core';
import { Record, useResourceContext } from 'ra-core';

import Button, { ButtonProps } from './Button';

export const CloneButton: FC<CloneButtonProps> = ({
basePath = '',
label = 'ra.action.clone',
scrollToTop = true,
record,
icon = defaultIcon,
...rest
}) => (
<Button
component={Link}
to={
record
? {
pathname: `${basePath}/create`,
search: stringify({
source: JSON.stringify(omitId(record)),
}),
}
: `${basePath}/create`
}
label={label}
onClick={stopPropagation}
{...rest}
>
{icon}
</Button>
);
}) => {
const resource = useResourceContext();
const pathname = basePath ? `${basePath}/create` : `/${resource}/create`;
return (
<Button
component={Link}
to={
record
? {
pathname,
search: stringify({
source: JSON.stringify(omitId(record)),
}),
state: { _scrollToTop: scrollToTop },
}
: pathname
}
label={label}
onClick={stopPropagation}
{...rest}
>
{icon}
</Button>
);
};

const defaultIcon = <Queue />;

Expand All @@ -46,6 +52,7 @@ interface Props {
basePath?: string;
record?: Record;
icon?: ReactElement;
scrollToTop?: boolean;
}

export type CloneButtonProps = Props & ButtonProps;
Expand Down
7 changes: 4 additions & 3 deletions packages/ra-ui-materialui/src/button/CreateButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { makeStyles } from '@material-ui/core/styles';
import ContentAdd from '@material-ui/icons/Add';
import classnames from 'classnames';
import { Link } from 'react-router-dom';
import { useTranslate } from 'ra-core';
import { useTranslate, useResourceContext } from 'ra-core';

import Button, { ButtonProps, sanitizeButtonRestProps } from './Button';

Expand Down Expand Up @@ -39,12 +39,13 @@ const CreateButton: FC<CreateButtonProps> = props => {
const isSmall = useMediaQuery((theme: Theme) =>
theme.breakpoints.down('sm')
);
const resource = useResourceContext();
const location = useMemo(
() => ({
pathname: `${basePath}/create`,
pathname: basePath ? `${basePath}/create` : `/${resource}/create`,
state: { _scrollToTop: scrollToTop },
}),
[basePath, scrollToTop]
[basePath, resource, scrollToTop]
);
return isSmall ? (
<Fab
Expand Down
41 changes: 23 additions & 18 deletions packages/ra-ui-materialui/src/button/EditButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
import ContentCreate from '@material-ui/icons/Create';
import { ButtonProps as MuiButtonProps } from '@material-ui/core/Button';
import { Link } from 'react-router-dom';
import { linkToRecord, Record } from 'ra-core';
import { linkToRecord, Record, useResourceContext } from 'ra-core';

import Button, { ButtonProps } from './Button';

Expand All @@ -25,23 +25,28 @@ const EditButton: FC<EditButtonProps> = ({
record,
scrollToTop = true,
...rest
}) => (
<Button
component={Link}
to={useMemo(
() => ({
pathname: record ? linkToRecord(basePath, record.id) : '',
state: { _scrollToTop: scrollToTop },
}),
[basePath, record, scrollToTop]
)}
label={label}
onClick={stopPropagation}
{...(rest as any)}
>
{icon}
</Button>
);
}) => {
const resource = useResourceContext();
return (
<Button
component={Link}
to={useMemo(
() => ({
pathname: record
? linkToRecord(basePath || `/${resource}`, record.id)
: '',
state: { _scrollToTop: scrollToTop },
}),
[basePath, record, resource, scrollToTop]
)}
label={label}
onClick={stopPropagation}
{...(rest as any)}
>
{icon}
</Button>
);
};

const defaultIcon = <ContentCreate />;

Expand Down
19 changes: 14 additions & 5 deletions packages/ra-ui-materialui/src/button/ListButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { FC, ReactElement } from 'react';
import PropTypes from 'prop-types';
import ActionList from '@material-ui/icons/List';
import { Link } from 'react-router-dom';
import { useResourceContext } from 'ra-core';

import Button, { ButtonProps } from './Button';

Expand Down Expand Up @@ -37,11 +38,19 @@ const ListButton: FC<ListButtonProps> = ({
icon = defaultIcon,
label = 'ra.action.list',
...rest
}) => (
<Button component={Link} to={basePath} label={label} {...(rest as any)}>
{icon}
</Button>
);
}) => {
const resource = useResourceContext();
return (
<Button
component={Link}
to={basePath || `/${resource}`}
label={label}
{...(rest as any)}
>
{icon}
</Button>
);
};

const defaultIcon = <ActionList />;

Expand Down
46 changes: 26 additions & 20 deletions packages/ra-ui-materialui/src/button/ShowButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { FC, memo, useMemo, ReactElement } from 'react';
import PropTypes from 'prop-types';
import ImageEye from '@material-ui/icons/RemoveRedEye';
import { Link } from 'react-router-dom';
import { linkToRecord, Record } from 'ra-core';
import { linkToRecord, Record, useResourceContext } from 'ra-core';

import Button, { ButtonProps } from './Button';

Expand All @@ -24,25 +24,31 @@ const ShowButton: FC<ShowButtonProps> = ({
record,
scrollToTop = true,
...rest
}) => (
<Button
component={Link}
to={useMemo(
() => ({
pathname: record
? `${linkToRecord(basePath, record.id)}/show`
: '',
state: { _scrollToTop: scrollToTop },
}),
[basePath, record, scrollToTop]
)}
label={label}
onClick={stopPropagation}
{...(rest as any)}
>
{icon}
</Button>
);
}) => {
const resource = useResourceContext();
return (
<Button
component={Link}
to={useMemo(
() => ({
pathname: record
? `${linkToRecord(
basePath || `/${resource}`,
record.id
)}/show`
: '',
state: { _scrollToTop: scrollToTop },
}),
[basePath, record, resource, scrollToTop]
)}
label={label}
onClick={stopPropagation}
{...(rest as any)}
>
{icon}
</Button>
);
};

const defaultIcon = <ImageEye />;

Expand Down