feat: Rework sharing actions in public viewer

package.json

@@ -95,10 +95,10 @@
     "cozy-minilog": "3.3.1",
     "cozy-realtime": "4.6.0",
     "cozy-scripts": "^8.3.0",
-    "cozy-sharing": "^16.11.0",
+    "cozy-sharing": "^16.17.0",
     "cozy-stack-client": "^49.8.0",
     "cozy-ui": "^113.8.0",
-    "cozy-viewer": "^8.0.0",
+    "cozy-viewer": "^8.1.0",
     "date-fns": "1.30.1",
     "diacritics": "1.3.0",
     "filesize": "10.1.6",

src/modules/actions/index.js

@@ -6,6 +6,5 @@ export { rename } from './rename'
 export { qualify } from './qualify'
 export { versions } from './versions'
 export { restore } from './restore'
-export { openExternalLink } from './openExternalLink'
 export { select } from './select'
 export { addItems } from './addItems'

src/modules/public/LightFileViewer.jsx

@@ -4,12 +4,17 @@ import React, { useCallback } from 'react'
 import { useLocation, useNavigate } from 'react-router-dom'
 
 import { BarCenter } from 'cozy-bar'
-import { SharingBannerPlugin, useSharingInfos } from 'cozy-sharing'
+import {
+  SharingBannerPlugin,
+  useSharingInfos,
+  OpenSharingLinkButton
+} from 'cozy-sharing'
 import MidEllipsis from 'cozy-ui/transpiled/react/MidEllipsis'
 import Typography from 'cozy-ui/transpiled/react/Typography'
 import useBreakpoints from 'cozy-ui/transpiled/react/providers/Breakpoints'
 import { FooterActionButtons, ForwardOrDownloadButton } from 'cozy-viewer'
 
+import { FilesViewerLoading } from 'components/FilesViewerLoading'
 import PublicToolbar from 'modules/public/PublicToolbar'
 import PublicViewer from 'modules/viewer/PublicViewer'
 import {
@@ -24,6 +29,7 @@ const LightFileViewer = ({ files, isPublic }) => {
   const { isDesktop, isMobile } = useBreakpoints()
   const { pathname } = useLocation()
   const navigate = useNavigate()
+  const { loading, isSharingShortcutCreated, discoveryLink } = sharingInfos
 
   const onlyOfficeOpener = useCallback(
     file => {
@@ -35,6 +41,13 @@ const LightFileViewer = ({ files, isPublic }) => {
     [navigate, pathname]
   )
 
+  const isCozySharing = window.location.pathname === '/preview'
+  const isShareNotAdded = !loading && !isSharingShortcutCreated
+  const isSharingBannerPluginDisplayed = isShareNotAdded || !isCozySharing
+  const isAddToMyCozyDisplayed = isShareNotAdded && isCozySharing
+
+  if (loading) return <FilesViewerLoading />
+
   return (
     <div className={styles['viewer-wrapper-with-bar']}>
       {isMobile && (
@@ -44,8 +57,8 @@ const LightFileViewer = ({ files, isPublic }) => {
           </Typography>
         </BarCenter>
       )}
-      <SharingBannerPlugin />
-      {!isDesktop && (
+      {isSharingBannerPluginDisplayed && <SharingBannerPlugin />}
+      {isMobile && (
         <PublicToolbar
           className={cx({ 'u-mt-1 u-mr-1': !isMobile })}
           files={files}
@@ -67,7 +80,18 @@ const LightFileViewer = ({ files, isPublic }) => {
           }}
         >
           <FooterActionButtons>
-            <ForwardOrDownloadButton />
+            {isAddToMyCozyDisplayed && (
+              <OpenSharingLinkButton
+                link={discoveryLink}
+                isSharingShortcutCreated={isSharingShortcutCreated}
+                isShortLabel
+                fullWidth
+                variant="secondary"
+              />
+            )}
+            <ForwardOrDownloadButton
+              {...(isAddToMyCozyDisplayed ? { variant: 'buttonIcon' } : {})}
+            />
           </FooterActionButtons>
         </PublicViewer>
       </div>

src/modules/public/LightFileViewer.spec.jsx

@@ -24,7 +24,8 @@ jest.mock('cozy-ui/transpiled/react/providers/Breakpoints', () => ({
 
 const client = new createMockClient({})
 
-const setup = () => {
+const setup = ({ isDesktop = false, isMobile = false } = {}) => {
+  useBreakpoints.mockReturnValue({ isDesktop, isMobile })
   const root = render(
     <AppLike client={client}>
       <LightFileViewer
@@ -38,15 +39,11 @@ const setup = () => {
 
 describe('LightFileViewer', () => {
   describe('on Mobile and Tablet', () => {
-    beforeAll(() => {
-      useBreakpoints.mockReturnValue({ isDesktop: false })
-    })
-
     it('should have the sharing banner and public toolbar but no viewer toolbar', () => {
       jest.spyOn(console, 'error').mockImplementation() // TODO: to be removed with https://github.com/cozy/cozy-libs/pull/1457
       jest.spyOn(console, 'warn').mockImplementation()
 
-      const { root } = setup()
+      const { root } = setup({ isMobile: true })
       const { queryByTestId, queryAllByRole } = root
 
       expect(queryAllByRole('link')[0].getAttribute('href')).toBe(
@@ -58,21 +55,15 @@ describe('LightFileViewer', () => {
   })
 
   describe('on Desktop', () => {
-    beforeAll(() => {
-      useBreakpoints.mockReturnValue({ isDesktop: true })
-    })
-
     it('should have the sharing banner and viewer toolbar but no public toolbar', () => {
-      const { root } = setup()
-      const { container, queryByTestId, queryAllByRole } = root
+      const { root } = setup({ isDesktop: true })
+      const { queryByTestId, queryAllByRole } = root
 
       expect(queryAllByRole('link')[0].getAttribute('href')).toBe(
         'https://cozy.io'
       ) // This is the sharing banner
       expect(queryByTestId('public-toolbar')).toBeFalsy()
-      expect(
-        container.querySelector('[data-testid="viewer-toolbar"]')
-      ).toBeTruthy()
+      expect(queryByTestId('viewer-toolbar')).toBeTruthy()
     })
   })
 })

src/modules/public/PublicToolbarByLink.jsx

@@ -3,20 +3,15 @@ import React from 'react'
 
 import { useClient } from 'cozy-client'
 import { useVaultClient } from 'cozy-keys-lib'
+import { openSharingLink } from 'cozy-sharing'
 import { makeActions } from 'cozy-ui/transpiled/react/ActionsMenu/Actions'
 import { useAlert } from 'cozy-ui/transpiled/react/providers/Alert'
 import useBreakpoints from 'cozy-ui/transpiled/react/providers/Breakpoints'
 import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 
 import { BarRightOnMobile } from 'components/Bar'
 import { HOME_LINK_HREF } from 'constants/config'
-import {
-  addItems,
-  download,
-  hr,
-  openExternalLink,
-  select
-} from 'modules/actions'
+import { addItems, download, hr, select } from 'modules/actions'
 import AddMenuProvider from 'modules/drive/AddMenu/AddMenuProvider'
 import AddButton from 'modules/drive/Toolbar/components/AddButton'
 import { DownloadFilesButton } from 'modules/public/DownloadFilesButton'
@@ -44,7 +39,7 @@ const PublicToolbarByLink = ({
       files.length > 1 && select,
       addItems,
       isMobile && (files.length > 1 || hasWriteAccess) && hr,
-      isMobile && openExternalLink
+      isMobile && openSharingLink
     ],
     {
       t,