(content-manager): ask for confirmation of d&p tab change (#19912)

* feat(content-manager): ask for confirmation of d&p tab change when form is modified * fix(admin): controlled tabs * chore(admin): types * chore: update design-system to 1.17.0
strapi · Apr 4, 2024 · 66039c1 · 66039c1
1 parent 9d17278
commit 66039c1
Show file tree

Hide file tree

Showing 18 changed files with 158 additions and 78 deletions.
diff --git a/package.json b/package.json
@@ -75,7 +75,7 @@
     "watch": "nx run-many --target=watch --nx-ignore-cycles"
   },
   "resolutions": {
-    "@strapi/design-system": "1.17.0-typescript.0",
+    "@strapi/design-system": "1.18.0-typescript.0",
     "@types/koa": "2.13.4"
   },
   "devDependencies": {

diff --git a/packages/core/admin/admin/src/components/Form.tsx b/packages/core/admin/admin/src/components/Form.tsx
@@ -687,28 +687,46 @@ const isErrorMessageDescriptor = (object?: string | object): object is Translati
   );
 };
 
+/**
+ * Props for the Blocker component.
+ * @param onProceed Function to be called when the user confirms the action that triggered the blocker.
+ * @param onCancel Function to be called when the user cancels the action that triggered the blocker.
+ */
+interface BlockerProps {
+  onProceed?: () => void;
+  onCancel?: () => void;
+}
 /* -------------------------------------------------------------------------------------------------
  * Blocker
  * -----------------------------------------------------------------------------------------------*/
-const Blocker = () => {
+const Blocker = ({ onProceed = () => {}, onCancel = () => {} }: BlockerProps) => {
   const { formatMessage } = useIntl();
   const modified = useForm('Blocker', (state) => state.modified);
   const isSubmitting = useForm('Blocker', (state) => state.isSubmitting);
 
-  const blocker = useBlocker(
-    ({ currentLocation, nextLocation }) =>
-      !isSubmitting && modified && currentLocation.pathname !== nextLocation.pathname
-  );
+  const blocker = useBlocker(({ currentLocation, nextLocation }) => {
+    return (
+      !isSubmitting &&
+      modified &&
+      (currentLocation.pathname !== nextLocation.pathname ||
+        currentLocation.search !== nextLocation.search)
+    );
+  });
 
   if (blocker.state === 'blocked') {
+    const handleCancel = () => {
+      onCancel();
+      blocker.reset();
+    };
+
     return (
       <Dialog
         isOpen
         title={formatMessage({
           id: 'app.components.ConfirmDialog.title',
           defaultMessage: 'Confirmation',
         })}
-        onClose={() => blocker.reset()}
+        onClose={handleCancel}
       >
         <DialogBody>
           <Flex direction="column" gap={2}>
@@ -723,15 +741,21 @@ const Blocker = () => {
         </DialogBody>
         <DialogFooter
           startAction={
-            <Button onClick={() => blocker.reset()} variant="tertiary">
+            <Button onClick={handleCancel} variant="tertiary">
               {formatMessage({
                 id: 'app.components.Button.cancel',
                 defaultMessage: 'Cancel',
               })}
             </Button>
           }
           endAction={
-            <Button onClick={() => blocker.proceed()} variant="danger">
+            <Button
+              onClick={() => {
+                onProceed();
+                blocker.proceed();
+              }}
+              variant="danger"
+            >
               {formatMessage({
                 id: 'app.components.Button.confirm',
                 defaultMessage: 'Confirm',

diff --git a/packages/core/admin/package.json b/packages/core/admin/package.json
@@ -78,7 +78,7 @@
     "@radix-ui/react-context": "1.0.1",
     "@radix-ui/react-toolbar": "1.0.4",
     "@reduxjs/toolkit": "1.9.7",
-    "@strapi/design-system": "1.16.0",
+    "@strapi/design-system": "1.17.0",
     "@strapi/icons": "1.16.0",
     "@strapi/permissions": "5.0.0-beta.2",
     "@strapi/provider-audit-logs-local": "5.0.0-beta.2",

diff --git a/packages/core/content-manager/admin/src/pages/EditView/EditViewPage.tsx b/packages/core/content-manager/admin/src/pages/EditView/EditViewPage.tsx
@@ -72,12 +72,6 @@ const EditViewPage = () => {
 
   const hasDraftAndPublished = schema?.options?.draftAndPublish ?? false;
 
-  React.useEffect(() => {
-    if (tabApi.current && hasDraftAndPublished) {
-      tabApi.current._handlers.setSelectedTabIndex(!status || status === 'draft' ? 0 : 1);
-    }
-  }, [hasDraftAndPublished, status]);
-
   useOnce(() => {
     /**
      * We only ever want to fire the notification once otherwise
@@ -147,13 +141,11 @@ const EditViewPage = () => {
     return <Page.Error />;
   }
 
-  const handleTabChange = (index: number, { resetForm }: Pick<FormHelpers, 'resetForm'>) => {
+  const handleTabChange = (index: number) => {
     if (index === 0) {
       setQuery({ status: 'draft' }, 'push', true);
     } else {
       setQuery({ status: 'published' }, 'push', true);
-      // We reset the form to the published version to avoid errors like – https://strapi-inc.atlassian.net/browse/CONTENT-2284
-      resetForm();
     }
   };
 
@@ -188,10 +180,10 @@ const EditViewPage = () => {
                 id: getTranslation('containers.edit.tabs.label'),
                 defaultMessage: 'Document status',
               })}
-              initialSelectedTabIndex={hasDraftAndPublished && status === 'published' ? 1 : 0}
+              selectedTabIndex={hasDraftAndPublished && status === 'published' ? 1 : 0}
               onTabChange={(index) => {
                 // TODO: remove this hack when the tabs in the DS are implemented well and we can actually use callbacks.
-                handleTabChange(index, { resetForm });
+                handleTabChange(index);
               }}
             >
               {hasDraftAndPublished ? (
@@ -226,7 +218,10 @@ const EditViewPage = () => {
                 </GridItem>
               </Grid>
             </TabGroup>
-            <Blocker />
+            <Blocker
+              // We reset the form to the published version to avoid errors like – https://strapi-inc.atlassian.net/browse/CONTENT-2284
+              onProceed={resetForm}
+            />
           </>
         )}
       </Form>

diff --git a/packages/core/content-manager/package.json b/packages/core/content-manager/package.json
@@ -60,7 +60,7 @@
     "@radix-ui/react-toolbar": "1.0.4",
     "@reduxjs/toolkit": "1.9.7",
     "@sindresorhus/slugify": "1.1.0",
-    "@strapi/design-system": "1.16.0",
+    "@strapi/design-system": "1.17.0",
     "@strapi/icons": "1.16.0",
     "@strapi/types": "5.0.0-beta.2",
     "@strapi/utils": "5.0.0-beta.2",

diff --git a/packages/core/content-releases/package.json b/packages/core/content-releases/package.json
@@ -55,7 +55,7 @@
   },
   "dependencies": {
     "@reduxjs/toolkit": "1.9.7",
-    "@strapi/design-system": "1.16.0",
+    "@strapi/design-system": "1.17.0",
     "@strapi/icons": "1.16.0",
     "@strapi/types": "workspace:*",
     "@strapi/utils": "5.0.0-beta.2",

diff --git a/packages/core/content-type-builder/package.json b/packages/core/content-type-builder/package.json
@@ -58,7 +58,7 @@
   "dependencies": {
     "@reduxjs/toolkit": "1.9.7",
     "@sindresorhus/slugify": "1.1.0",
-    "@strapi/design-system": "1.16.0",
+    "@strapi/design-system": "1.17.0",
     "@strapi/generators": "5.0.0-beta.2",
     "@strapi/icons": "1.16.0",
     "@strapi/utils": "5.0.0-beta.2",

diff --git a/packages/core/email/package.json b/packages/core/email/package.json
@@ -52,7 +52,7 @@
     "watch": "pack-up watch"
   },
   "dependencies": {
-    "@strapi/design-system": "1.16.0",
+    "@strapi/design-system": "1.17.0",
     "@strapi/icons": "1.16.0",
     "@strapi/provider-email-sendmail": "5.0.0-beta.2",
     "@strapi/utils": "5.0.0-beta.2",

diff --git a/packages/core/review-workflows/package.json b/packages/core/review-workflows/package.json
@@ -46,7 +46,7 @@
   },
   "dependencies": {
     "@reduxjs/toolkit": "1.9.7",
-    "@strapi/design-system": "1.16.0",
+    "@strapi/design-system": "1.17.0",
     "@strapi/icons": "1.16.0",
     "axios": "1.6.8",
     "react-helmet": "^6.1.0",

diff --git a/packages/core/upload/package.json b/packages/core/upload/package.json
@@ -48,7 +48,7 @@
     "watch": "pack-up watch"
   },
   "dependencies": {
-    "@strapi/design-system": "1.16.0",
+    "@strapi/design-system": "1.17.0",
     "@strapi/icons": "1.16.0",
     "@strapi/provider-upload-local": "5.0.0-beta.2",
     "@strapi/utils": "5.0.0-beta.2",

diff --git a/packages/plugins/cloud/package.json b/packages/plugins/cloud/package.json
@@ -36,7 +36,7 @@
     "test:ts:front": "run -T tsc -p admin/tsconfig.json"
   },
   "dependencies": {
-    "@strapi/design-system": "1.16.0",
+    "@strapi/design-system": "1.17.0",
     "@strapi/icons": "1.16.0",
     "react-intl": "6.6.2"
   },

diff --git a/packages/plugins/color-picker/package.json b/packages/plugins/color-picker/package.json
@@ -53,7 +53,7 @@
     "watch": "strapi plugin:watch"
   },
   "dependencies": {
-    "@strapi/design-system": "1.16.0",
+    "@strapi/design-system": "1.17.0",
     "@strapi/icons": "1.16.0",
     "react-colorful": "5.6.1",
     "react-intl": "6.6.2"

diff --git a/packages/plugins/documentation/package.json b/packages/plugins/documentation/package.json
@@ -54,7 +54,7 @@
   "dependencies": {
     "@reduxjs/toolkit": "1.9.7",
     "@strapi/admin": "5.0.0-beta.2",
-    "@strapi/design-system": "1.16.0",
+    "@strapi/design-system": "1.17.0",
     "@strapi/icons": "1.16.0",
     "@strapi/utils": "5.0.0-beta.2",
     "axios": "1.6.8",

diff --git a/packages/plugins/graphql/package.json b/packages/plugins/graphql/package.json
@@ -53,7 +53,7 @@
     "@graphql-tools/schema": "8.5.1",
     "@graphql-tools/utils": "^8.13.1",
     "@koa/cors": "5.0.0",
-    "@strapi/design-system": "1.16.0",
+    "@strapi/design-system": "1.17.0",
     "@strapi/icons": "1.16.0",
     "@strapi/utils": "5.0.0-beta.2",
     "graphql": "^16.8.1",

diff --git a/packages/plugins/i18n/package.json b/packages/plugins/i18n/package.json
@@ -53,7 +53,7 @@
   },
   "dependencies": {
     "@reduxjs/toolkit": "1.9.7",
-    "@strapi/design-system": "1.16.0",
+    "@strapi/design-system": "1.17.0",
     "@strapi/icons": "1.16.0",
     "@strapi/utils": "5.0.0-beta.2",
     "axios": "1.6.8",

diff --git a/packages/plugins/sentry/package.json b/packages/plugins/sentry/package.json
@@ -51,7 +51,7 @@
   },
   "dependencies": {
     "@sentry/node": "6.19.7",
-    "@strapi/design-system": "1.16.0",
+    "@strapi/design-system": "1.17.0",
     "@strapi/icons": "1.16.0"
   },
   "devDependencies": {

diff --git a/packages/plugins/users-permissions/package.json b/packages/plugins/users-permissions/package.json
@@ -46,7 +46,7 @@
     "watch": "pack-up watch"
   },
   "dependencies": {
-    "@strapi/design-system": "1.16.0",
+    "@strapi/design-system": "1.17.0",
     "@strapi/icons": "1.16.0",
     "@strapi/utils": "5.0.0-beta.2",
     "bcryptjs": "2.4.3",