Merge pull request #4028 from marmelab/fix-ids-with-parentheses

Fix TabbedForm and TabbedShowLayout do not support parenthesis in id
marmelab · Nov 22, 2019 · 0b08e99 · 0b08e99
2 parents 83f2b4e + 0cfa1e6
commit 0b08e99
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 3 deletions.
diff --git a/packages/ra-core/src/util/escapePath.ts b/packages/ra-core/src/util/escapePath.ts
@@ -0,0 +1,10 @@
+/**
+ * Escape special characters in path so that react-router Route does not do any special treatment
+ *
+ * @see https://github.com/ReactTraining/react-router/blob/v3/docs/guides/RouteMatching.md#path-syntax
+ *
+ * @example
+ *
+ * escapePath('/foo(bar)') => 'foo\(bar\)'
+ */
+export default url => url.replace(/(\(|\))/g, '\\$1');
diff --git a/packages/ra-core/src/util/index.ts b/packages/ra-core/src/util/index.ts
@@ -1,4 +1,5 @@
 import downloadCSV from './downloadCSV';
+import escapePath from './escapePath';
 import FieldTitle from './FieldTitle';
 import getFetchedAt from './getFetchedAt';
 import getFieldLabelTranslationArgs from './getFieldLabelTranslationArgs';
@@ -16,6 +17,7 @@ import { useSafeSetState, useTimeout } from './hooks';
 
 export {
     downloadCSV,
+    escapePath,
     FieldTitle,
     getFetchedAt,
     getFieldLabelTranslationArgs,

diff --git a/packages/ra-ui-materialui/src/detail/TabbedShowLayout.js b/packages/ra-ui-materialui/src/detail/TabbedShowLayout.js
@@ -3,9 +3,10 @@ import PropTypes from 'prop-types';
 import Divider from '@material-ui/core/Divider';
 import { Route } from 'react-router-dom';
 import { makeStyles } from '@material-ui/core/styles';
+import { useRouteMatch } from 'react-router-dom';
+import { escapePath } from 'ra-core';
 
 import TabbedShowLayoutTabs, { getTabFullPath } from './TabbedShowLayoutTabs';
-import { useRouteMatch } from 'react-router-dom';
 
 const sanitizeRestProps = ({
     children,
@@ -93,7 +94,9 @@ const TabbedShowLayout = ({
                     tab && isValidElement(tab) ? (
                         <Route
                             exact
-                            path={getTabFullPath(tab, index, match.url)}
+                            path={escapePath(
+                                getTabFullPath(tab, index, match.url)
+                            )}
                             render={() =>
                                 cloneElement(tab, {
                                     context: 'content',

diff --git a/packages/ra-ui-materialui/src/form/TabbedForm.js b/packages/ra-ui-materialui/src/form/TabbedForm.js
@@ -7,6 +7,7 @@ import { Route } from 'react-router-dom';
 import Divider from '@material-ui/core/Divider';
 import { makeStyles } from '@material-ui/core/styles';
 import {
+    escapePath,
     useTranslate,
     useInitializeFormWithRecord,
     sanitizeEmptyValues,
@@ -153,7 +154,12 @@ export const TabbedFormView = ({
                     children,
                     (tab, index) =>
                         tab && (
-                            <Route exact path={getTabFullPath(tab, index, url)}>
+                            <Route
+                                exact
+                                path={escapePath(
+                                    getTabFullPath(tab, index, url)
+                                )}
+                            >
                                 {routeProps =>
                                     isValidElement(tab)
                                         ? React.cloneElement(tab, {