feat: Show share synchronization as a minor action (Part 1)

package.json

@@ -88,7 +88,7 @@
     "cozy-devtools": "^1.2.1",
     "cozy-doctypes": "1.85.4",
     "cozy-flags": "^4.6.1",
-    "cozy-harvest-lib": "^30.0.0",
+    "cozy-harvest-lib": "^30.6.4",
     "cozy-intent": "^2.29.1",
     "cozy-keys-lib": "6.0.0",
     "cozy-logger": "1.9.1",
@@ -97,7 +97,8 @@
     "cozy-scripts": "^8.3.0",
     "cozy-sharing": "^16.0.0",
     "cozy-stack-client": "^49.8.0",
-    "cozy-ui": "^111.21.0",
+    "cozy-ui": "^113.3.0",
+    "cozy-viewer": "^2.8.0",
     "date-fns": "1.30.1",
     "diacritics": "1.3.0",
     "filesize": "10.1.6",

src/locales/fr.json

@@ -58,7 +58,7 @@
     "menu_create_shortcut": "Raccourci",
     "share": "Partager",
     "trash": "Supprimer",
-    "leave": "Quitter le dossier partagé et le supprimer",
+    "leave": "Quitter le partage et supprimer le dossier",
     "menu_add": "Ajouter",
     "menu_add_item": "Ajouter un élément",
     "menu_onlyOffice": {

src/modules/actionmenu/ActionMenuWithHeader.jsx

@@ -26,7 +26,6 @@ export const ActionMenuWithHeader = ({
       actions={actions}
       docs={[file]}
       anchorOrigin={{
-        strategy: 'fixed',
         vertical: 'bottom',
         horizontal: 'right'
       }}

src/modules/actions/index.jsx

@@ -17,6 +17,7 @@ import ListItemIcon from 'cozy-ui/transpiled/react/ListItemIcon'
 import ListItemText from 'cozy-ui/transpiled/react/ListItemText'
 
 import { downloadFiles, restoreFiles } from './utils'
+import { HOME_LINK_HREF } from 'constants/config'
 import { isEncryptedFolder, isEncryptedFile } from 'lib/encryption'
 import { navigateToModal } from 'modules/actions/helpers'
 import DeleteConfirm from 'modules/drive/DeleteConfirm'
@@ -67,13 +68,19 @@ export const hr = () => {
   }
 }
 
-export const trash = ({ t, pushModal, popModal, hasWriteAccess, refresh }) => {
-  const label = t('SelectionBar.trash')
+export const trash = ({
+  t,
+  pushModal,
+  popModal,
+  hasWriteAccess,
+  refresh,
+  byDocId,
+  isOwner
+}) => {
   const icon = TrashIcon
 
   return {
     name: 'trash',
-    label,
     icon,
     displayCondition: () => hasWriteAccess,
     action: files =>
@@ -87,6 +94,12 @@ export const trash = ({ t, pushModal, popModal, hasWriteAccess, refresh }) => {
         />
       ),
     Component: forwardRef(function Trash(props, ref) {
+      const sharedWithMe =
+        byDocId !== undefined &&
+        byDocId[props.docs[0].id] &&
+        !isOwner(props.docs[0].id)
+      const label = sharedWithMe ? t('toolbar.leave') : t('SelectionBar.trash')
+
       return (
         <ActionsMenuItem {...props} ref={ref}>
           <ListItemIcon>
@@ -209,3 +222,35 @@ export const restore = ({ t, refresh, client }) => {
     })
   }
 }
+
+export const openExternalLink = ({ t, isSharingShortcutCreated, link }) => {
+  const label =
+    link === HOME_LINK_HREF
+      ? t('Share.create-cozy')
+      : isSharingShortcutCreated
+      ? t('toolbar.menu_sync_cozy')
+      : t('toolbar.add_to_mine')
+  const icon =
+    !isSharingShortcutCreated || link === HOME_LINK_HREF
+      ? 'to-the-cloud'
+      : 'sync'
+
+  return {
+    name: 'openExternalLink',
+    label,
+    icon,
+    action: () => {
+      openExternalLink(link)
+    },
+    Component: forwardRef(function OpenExternalLink(props, ref) {
+      return (
+        <ActionsMenuItem isListItem {...props} ref={ref}>
+          <ListItemIcon>
+            <Icon icon={icon} />
+          </ListItemIcon>
+          <ListItemText primary={label} />
+        </ActionsMenuItem>
+      )
+    })
+  }
+}

src/modules/breadcrumb/components/DesktopBreadcrumb.jsx

@@ -1,12 +1,12 @@
 import React, { useEffect, useMemo, useState } from 'react'
 
+import ActionsMenu from 'cozy-ui/transpiled/react/ActionsMenu'
+import ActionsMenuItem from 'cozy-ui/transpiled/react/ActionsMenu/ActionsMenuItem'
 import BreadcrumbMui from 'cozy-ui/transpiled/react/Breadcrumbs'
 import Icon from 'cozy-ui/transpiled/react/Icon'
 import FolderIcon from 'cozy-ui/transpiled/react/Icons/Folder'
 import RightIcon from 'cozy-ui/transpiled/react/Icons/Right'
-import ActionMenu, {
-  ActionMenuItem
-} from 'cozy-ui/transpiled/react/deprecated/ActionMenu'
+import ListItemText from 'cozy-ui/transpiled/react/ListItemText'
 import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 
 import IconServer from 'assets/icons/icon-server.svg'
@@ -28,13 +28,15 @@ const DesktopBreadcrumb = ({ onBreadcrumbClick, path }) => {
   )
   const [menuDisplayed, setMenuDisplayed] = useState(false)
 
+  const closeMenu = () => setMenuDisplayed(false)
+
   const handleDropdownTriggerClick = e => {
     e.stopPropagation()
     setMenuDisplayed(true)
   }
 
   useEffect(() => {
-    setMenuDisplayed(false)
+    closeMenu()
     setDropdownTrigger(document.querySelector(`[aria-label="${expandText}"]`))
   }, [path]) // eslint-disable-line react-hooks/exhaustive-deps
 
@@ -43,7 +45,7 @@ const DesktopBreadcrumb = ({ onBreadcrumbClick, path }) => {
     if (trigger) {
       trigger.addEventListener('click', handleDropdownTriggerClick)
       return () => {
-        setMenuDisplayed(false)
+        closeMenu()
         trigger.removeEventListener('click', handleDropdownTriggerClick)
       }
     }
@@ -115,36 +117,29 @@ const DesktopBreadcrumb = ({ onBreadcrumbClick, path }) => {
       </BreadcrumbMui>
 
       {menuDisplayed && (
-        <ActionMenu
-          anchorElRef={anchorElRef}
-          autoclose={true}
-          onClose={() => {
-            setMenuDisplayed(false)
-          }}
-          popperOptions={{
-            placement: 'bottom-end',
-            modifiers: [
-              {
-                name: 'offset',
-                options: {
-                  offset: [0, 10]
-                }
-              }
-            ]
+        <ActionsMenu
+          open
+          ref={anchorElRef}
+          onClose={closeMenu}
+          actions={[]}
+          docs={[]}
+          anchorOrigin={{
+            vertical: 'bottom',
+            horizontal: 'left'
           }}
         >
           {path.slice(1, -2).map(breadcrumbPath => (
-            <ActionMenuItem
+            <ActionsMenuItem
               key={breadcrumbPath.name}
               onClick={e => {
                 e.stopPropagation()
                 onBreadcrumbClick(breadcrumbPath)
               }}
             >
-              {breadcrumbPath.name}
-            </ActionMenuItem>
+              <ListItemText primary={breadcrumbPath.name} />
+            </ActionsMenuItem>
           ))}
-        </ActionMenu>
+        </ActionsMenu>
       )}
     </>
   )

src/modules/breadcrumb/components/DesktopBreadcrumb.spec.jsx

@@ -7,15 +7,15 @@
 import DesktopBreadcrumb from './DesktopBreadcrumb'
 import { dummyBreadcrumbPath } from 'test/dummies/dummyBreadcrumbPath'
 
-jest.mock('cozy-ui/transpiled/react/deprecated/ActionMenu', () => ({
-  __esModule: true,
-  // eslint-disable-next-line react/display-name
-  default: ({ children }) => <div data-testid="action-menu">{children}</div>,
-  // eslint-disable-next-line react/display-name
-  ActionMenuItem: ({ children }) => (
-    <div data-testid="action-menu-item">{children}</div>
-  )
-}))
+jest.mock('cozy-ui/transpiled/react/ActionsMenu', () => ({ children }) => (
+  <div data-testid="action-menu">{children}</div>
+))
+jest.mock(
+  'cozy-ui/transpiled/react/ActionsMenu/ActionsMenuItem',
+  () =>
+    ({ children }) =>
+      <div data-testid="action-menu-item">{children}</div>
+)
 
 jest.mock('cozy-ui/transpiled/react/providers/I18n')
 describe('DesktopBreadcrumb', () => {
@@ -53,6 +53,12 @@
   })
 
   describe('mount', () => {
+    beforeEach(() => {
+      jest.spyOn(console, 'error').mockImplementation(() => {})
+    })
+    afterEach(() => {
+      console.error.mockRestore()
+    })
     it('should hide menu displayed while navigating', async () => {
       // Given
       const { container, queryByTestId, rerender } = await render(

src/modules/drive/AddMenu/AddMenu.jsx

@@ -1,8 +1,10 @@
 import React from 'react'
 
 import flag from 'cozy-flags'
-import Typography from 'cozy-ui/transpiled/react/Typography'
-import ActionMenu from 'cozy-ui/transpiled/react/deprecated/ActionMenu'
+import ActionsMenu from 'cozy-ui/transpiled/react/ActionsMenu'
+import ActionsMenuMobileHeader from 'cozy-ui/transpiled/react/ActionsMenu/ActionsMenuMobileHeader'
+import Divider from 'cozy-ui/transpiled/react/Divider'
+import ListItemText from 'cozy-ui/transpiled/react/ListItemText'
 import useBreakpoints from 'cozy-ui/transpiled/react/providers/Breakpoints'
 import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 
@@ -23,25 +25,27 @@ export const ActionMenuContent = ({
   refreshFolderContent,
   isPublic,
   isEncryptedFolder,
-  displayedFolder
+  displayedFolder,
+  onClick
 }) => {
   const { t } = useI18n()
-  const { isMobile, isDesktop } = useBreakpoints()
+  const { isDesktop } = useBreakpoints()
   const { hasScanner } = useScannerContext()
 
   return (
     <>
-      {isMobile && (
-        <>
-          <Typography variant="h6" className="u-p-1">
-            {t('toolbar.menu_add')}
-          </Typography>
-          <hr />
-        </>
+      <ActionsMenuMobileHeader>
+        <ListItemText
+          primary={t('toolbar.menu_add')}
+          primaryTypographyProps={{ variant: 'h6' }}
+        />
+      </ActionsMenuMobileHeader>
+
+      {canCreateFolder && !isEncryptedFolder && (
+        <AddFolderItem onClick={onClick} />
       )}
-      {canCreateFolder && !isEncryptedFolder && <AddFolderItem />}
       {canCreateFolder && !isPublic && flag('drive.enable-encryption') && (
-        <AddEncryptedFolderItem />
+        <AddEncryptedFolderItem onClick={onClick} />
       )}
       {!isPublic && !isEncryptedFolder && (
         <CreateNoteItem displayedFolder={displayedFolder} />
@@ -54,17 +58,18 @@ export const ActionMenuContent = ({
         </>
       )}
       {!isEncryptedFolder && (
-        <CreateShortcut onCreated={refreshFolderContent} />
+        <CreateShortcut onCreated={refreshFolderContent} onClick={onClick} />
       )}
-      {canUpload && <hr />}
+      {canUpload && <Divider className="u-mv-half" />}
       {canUpload && (
         <UploadItem
           disabled={isDisabled}
           onUploaded={refreshFolderContent}
           displayedFolder={displayedFolder}
+          onClick={onClick}
         />
       )}
-      {hasScanner && <ScannerMenuItem />}
+      {hasScanner && <ScannerMenuItem onClick={onClick} />}
     </>
   )
 }
@@ -82,13 +87,12 @@ const AddMenu = ({
   ...actionMenuProps
 }) => {
   return (
-    <ActionMenu
-      anchorElRef={anchorRef}
+    <ActionsMenu
+      open
+      ref={anchorRef}
       onClose={handleClose}
-      autoclose={true}
-      popperOptions={{
-        strategy: 'fixed'
-      }}
+      docs={[displayedFolder]}
+      actions={[]}
       {...actionMenuProps}
     >
       <ActionMenuContent
@@ -99,8 +103,9 @@ const AddMenu = ({
         isPublic={isPublic}
         isEncryptedFolder={isEncryptedFolder}
         displayedFolder={displayedFolder}
+        onClick={handleClose}
       />
-    </ActionMenu>
+    </ActionsMenu>
   )
 }
 

src/modules/drive/Toolbar/components/AddEncryptedFolderItem.jsx

@@ -2,24 +2,30 @@ import React from 'react'
 import { connect } from 'react-redux'
 
 import { useVaultUnlockContext } from 'cozy-keys-lib'
-import { ActionMenuItem } from 'cozy-ui/transpiled/react/deprecated/ActionMenu'
+import ActionsMenuItem from 'cozy-ui/transpiled/react/ActionsMenu/ActionsMenuItem'
+import ListItemText from 'cozy-ui/transpiled/react/ListItemText'
 import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 
 import { showNewFolderInput, encryptedFolder } from 'modules/filelist/duck'
 import EncryptedFolderIcon from 'modules/views/Folder/EncryptedFolderIcon'
 
-const AddEncryptedFolderItem = ({ addEncryptedFolder }) => {
+const AddEncryptedFolderItem = ({ addEncryptedFolder, onClick }) => {
   const { t } = useI18n()
   const { showUnlockForm } = useVaultUnlockContext()
 
+  const handleClick = () => {
+    showUnlockForm({ onUnlock: addEncryptedFolder })
+    onClick()
+  }
+
   return (
-    <ActionMenuItem
+    <ActionsMenuItem
       data-testid="add-encrypted-folder-link"
-      onClick={() => showUnlockForm({ onUnlock: addEncryptedFolder })}
-      left={<EncryptedFolderIcon width={16} height={16} />}
+      onClick={handleClick}
     >
-      {t('toolbar.menu_new_encrypted_folder')}
-    </ActionMenuItem>
+      <EncryptedFolderIcon width={16} height={16} />
+      <ListItemText primary={t('toolbar.menu_new_encrypted_folder')} />
+    </ActionsMenuItem>
   )
 }