feat: Implement new alert

remove old api use new api add new button to go to folder
cozy · Apr 24, 2024 · 72c797c · 72c797c
1 parent b90d6a4
commit 72c797c
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 13 deletions.
diff --git a/src/locales/en.json b/src/locales/en.json
@@ -575,6 +575,7 @@
   },
   "Move": {
     "to": "Move to:",
+    "go_to_dir": "Open directory",
     "action": "Move",
     "cancel": "Cancel",
     "modalTitle": "Move",

diff --git a/src/locales/fr.json b/src/locales/fr.json
@@ -576,6 +576,7 @@
   },
   "Move": {
     "to": "Déplacer vers:",
+    "go_to_dir": "Ouvrir le dossier",
     "action": "Déplacer",
     "cancel": "Annuler",
     "modalTitle": "Déplacer",

diff --git a/src/modules/move/MoveModal.jsx b/src/modules/move/MoveModal.jsx
@@ -2,12 +2,15 @@ import { useDisplayedFolder } from 'hooks'
 import { CozyFile } from 'models'
 import PropTypes from 'prop-types'
 import React, { useEffect, useState } from 'react'
+import { useNavigate } from 'react-router-dom'
 
 import { cancelable, Q, useClient } from 'cozy-client'
 import { useSharingContext } from 'cozy-sharing'
 import { useBreakpoints } from 'cozy-ui/transpiled/react'
+import Button from 'cozy-ui/transpiled/react/Buttons'
 import { FixedDialog } from 'cozy-ui/transpiled/react/CozyDialogs'
 import Alerter from 'cozy-ui/transpiled/react/deprecated/Alerter'
+import { useAlert } from 'cozy-ui/transpiled/react/providers/Alert'
 import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import { withStyles } from 'cozy-ui/transpiled/react/styles'
 
@@ -53,6 +56,8 @@ const MoveModal = ({ onClose, entries, classes }) => {
     byDocId,
     allLoaded
   } = useSharingContext()
+  const navigate = useNavigate()
+  const { showAlert } = useAlert()
 
   const [folderId, setFolderId] = useState(
     displayedFolder ? displayedFolder._id : ROOT_DIR_ID
@@ -146,19 +151,42 @@ const MoveModal = ({ onClose, entries, classes }) => {
         client.query(Q('io.cozy.files').getById(folderId))
       )
       const targetName = response.data?.name || t('breadcrumb.title_drive')
-      Alerter.info('Move.success', {
-        subject: entries.length === 1 ? entries[0].name : '',
-        target: targetName,
-        smart_count: entries.length,
-        buttonText: t('Move.cancel'),
-        buttonAction: () =>
-          cancelMove({
-            entries,
-            trashedFiles,
-            client,
-            registerCancelable,
-            refreshSharing
-          })
+      const targetDir = response.data?.id
+
+      showAlert({
+        action: (
+          <>
+            <Button
+              color="success"
+              label={t('Move.cancel')}
+              onClick={() =>
+                cancelMove({
+                  entries,
+                  trashedFiles,
+                  client,
+                  registerCancelable,
+                  refreshSharing
+                })
+              }
+              size="small"
+              variant="text"
+            />
+
+            <Button
+              color="success"
+              label={t('Move.go_to_dir')}
+              onClick={() => navigate(`/folder/${targetDir}`)}
+              size="small"
+              variant="text"
+            />
+          </>
+        ),
+        message: t('Move.success', {
+          smart_count: entries.length,
+          subject: entries.length === 1 ? entries[0].name : '',
+          target: targetName
+        }),
+        severity: 'success'
       })
       if (refreshSharing) refreshSharing()
     } catch (e) {