Skip to content

Commit

Permalink
Fix Clone Button does not work with Tabbedform
Browse files Browse the repository at this point in the history
  • Loading branch information
fzaninotto authored and sdobz committed Feb 20, 2020
1 parent 73ec112 commit 303892c
Show file tree
Hide file tree
Showing 6 changed files with 73 additions and 9 deletions.
26 changes: 25 additions & 1 deletion cypress/integration/edit.js
Original file line number Diff line number Diff line change
@@ -1,12 +1,16 @@
import createPageFactory from '../support/CreatePage';
import editPageFactory from '../support/EditPage';
import listPageFactory from '../support/ListPage';
import loginPageFactory from '../support/LoginPage';

describe('Edit Page', () => {
const EditPostPage = editPageFactory('/#/posts/5');
const ListPagePosts = listPageFactory('/#/posts');
const CreatePostPage = createPageFactory('/#/posts/create');
const EditCommentPage = editPageFactory('/#/comments/5');
const ListPagePosts = listPageFactory('/#/posts');
const LoginPage = loginPageFactory('/#/login');
const EditUserPage = editPageFactory('/#/users/3');
const CreateUserPage = createPageFactory('/#/users/create');

describe('Title', () => {
it('should show the correct title in the appBar', () => {
Expand Down Expand Up @@ -165,6 +169,26 @@ describe('Edit Page', () => {
});
});

it('should not lose the cloned values when switching tabs', () => {
EditPostPage.navigate();
EditPostPage.logout();
LoginPage.navigate();
LoginPage.login('admin', 'password');
EditUserPage.navigate();
cy.get(EditUserPage.elements.input('name')).should(el =>
expect(el).to.have.value('Annamarie Mayer')
);
EditUserPage.clone();
cy.get(CreateUserPage.elements.input('name')).then(el => {
expect(el).to.have.value('Annamarie Mayer');
});
CreateUserPage.gotoTab(2);
CreateUserPage.gotoTab(1);
cy.get(CreateUserPage.elements.input('name')).then(el => {
expect(el).to.have.value('Annamarie Mayer');
});
});

it('should persit emptied inputs', () => {
EditPostPage.navigate();
EditPostPage.gotoTab(3);
Expand Down
7 changes: 7 additions & 0 deletions cypress/support/EditPage.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,8 @@ export default url => ({
cloneButton: '.button-clone',
tab: index => `.form-tab:nth-of-type(${index})`,
title: '#react-admin-title',
userMenu: 'button[title="Profile"]',
logout: '.logout',
},

navigate() {
Expand Down Expand Up @@ -57,4 +59,9 @@ export default url => ({
clone() {
cy.get(this.elements.cloneButton).click();
},

logout() {
cy.get(this.elements.userMenu).click();
cy.get(this.elements.logout).click();
},
});
23 changes: 21 additions & 2 deletions examples/simple/src/users/UserEdit.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,18 @@
import React from 'react';
import PropTypes from 'prop-types';
import {
CloneButton,
DeleteWithConfirmButton,
Edit,
FormTab,
required,
SaveButton,
SelectInput,
ShowButton,
TabbedForm,
TextInput,
Toolbar,
required,
TopToolbar,
} from 'react-admin';
import { makeStyles } from '@material-ui/core/styles';

Expand Down Expand Up @@ -39,8 +42,24 @@ const UserEditToolbar = props => {
);
};

const EditActions = ({ basePath, data, hasShow }) => (
<TopToolbar>
<CloneButton
className="button-clone"
basePath={basePath}
record={data}
/>
<ShowButton basePath={basePath} record={data} />
</TopToolbar>
);

const UserEdit = ({ permissions, ...props }) => (
<Edit title={<UserTitle />} aside={<Aside />} {...props}>
<Edit
title={<UserTitle />}
aside={<Aside />}
actions={<EditActions />}
{...props}
>
<TabbedForm
defaultValue={{ role: 'user' }}
toolbar={<UserEditToolbar />}
Expand Down
15 changes: 12 additions & 3 deletions packages/ra-core/src/sideEffect/useRedirect.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { useDispatch } from 'react-redux';
import { Identifier, Record } from '../types';
import resolveRedirectTo from '../util/resolveRedirectTo';
import { refreshView } from '../actions/uiActions';
import { useHistory } from 'react-router-dom';
import { useHistory, useLocation } from 'react-router-dom';

type RedirectToFunction = (
basePath?: string,
Expand Down Expand Up @@ -32,6 +32,7 @@ export type RedirectionSideEffect = string | boolean | RedirectToFunction;
const useRedirect = () => {
const dispatch = useDispatch();
const history = useHistory();
const location = useLocation();
return useCallback(
(
redirectTo: RedirectionSideEffect,
Expand All @@ -40,13 +41,21 @@ const useRedirect = () => {
data?: Partial<Record>
) => {
if (!redirectTo) {
dispatch(refreshView());
if (location.state || location.search) {
history.replace({
...location,
state: {},
search: undefined,
});
} else {
dispatch(refreshView());
}
return;
}

history.push(resolveRedirectTo(redirectTo, basePath, id, data));
},
[dispatch, history]
[dispatch, history, location]
);
};

Expand Down
5 changes: 3 additions & 2 deletions packages/ra-ui-materialui/src/form/FormTab.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Link } from 'react-router-dom';
import { Link, useLocation } from 'react-router-dom';
import MuiTab from '@material-ui/core/Tab';
import classnames from 'classnames';
import { useTranslate } from 'ra-core';
Expand Down Expand Up @@ -35,6 +35,7 @@ const FormTab = ({
...rest
}) => {
const translate = useTranslate();
const location = useLocation();

const renderHeader = () => (
<MuiTab
Expand All @@ -44,7 +45,7 @@ const FormTab = ({
icon={icon}
className={classnames('form-tab', className)}
component={Link}
to={{ pathname: value }}
to={{ ...location, pathname: value }}
{...sanitizeRestProps(rest)}
/>
);
Expand Down
6 changes: 5 additions & 1 deletion packages/ra-ui-materialui/src/form/TabbedForm.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { Children, isValidElement } from 'react';
import React, { Children, useEffect, isValidElement } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { Route, useRouteMatch, useLocation } from 'react-router-dom';
Expand Down Expand Up @@ -141,6 +141,10 @@ export const TabbedFormView = ({
const classes = useStyles({ classes: classesOverride });
const match = useRouteMatch();
const location = useLocation();
useEffect(() => {
console.log('form mount');
return () => console.log('form unmount');
}, []);

const url = match ? match.url : location.pathname;
return (
Expand Down

0 comments on commit 303892c

Please sign in to comment.