cozy · cballevre · Oct 9, 2023 · Oct 5, 2023 · Oct 5, 2023 · Oct 5, 2023
@@ -46,16 +46,6 @@ const AppRouter = ({
                 element={<OnlyOfficePaywallView isPublic={true} />}
               />
             </Route>
-            <Route
-              path="onlyoffice/:fileId/fromCreate"
-              element={
-                <OnlyOfficeView
-                  isPublic={true}
-                  isReadOnly={isReadOnly}
-                  isInSharedFolder={!isFile}
-                />
-              }
-            />
             <Route
               path="onlyoffice/create/:folderId/:fileClass"
               element={<OnlyOfficeCreateView />}

@@ -1,6 +1,7 @@
 import React, { useEffect, useRef } from 'react'
 import Hammer from '@egjs/hammerjs'
 import propagating from 'propagating-hammerjs'
+import { useLocation } from 'react-router-dom'
 
 import { models } from 'cozy-client'
 
@@ -59,6 +60,7 @@ const FileOpener = ({
   children
 }) => {
   const rowRef = useRef()
+  const { pathname } = useLocation()
 
   useEffect(() => {
     if (!rowRef || !rowRef.current) return
@@ -100,7 +102,10 @@ const FileOpener = ({
         className={`${styles['file-opener']} ${styles['file-opener__a']}`}
         ref={rowRef}
         id={file.id}
-        href={makeOnlyOfficeFileRoute(file)}
+        href={makeOnlyOfficeFileRoute(file.id, {
+          withoutRouter: true,
+          fromPathname: pathname
+        })}
         onClick={ev => {
           ev.preventDefault()
         }}

@@ -104,10 +104,6 @@ const AppRoute = () => (
       <Route path="onlyoffice/:fileId" element={<OnlyOfficeView />}>
         <Route path="paywall" element={<OnlyOfficePaywallView />} />
       </Route>
-      <Route
-        path="onlyoffice/:fileId/fromCreate"
-        element={<OnlyOfficeView />}
-      />
       <Route
         path="onlyoffice/create/:folderId/:fileClass"
         element={<OnlyOfficeCreateView />}

@@ -1,7 +1,7 @@
 import React, { useCallback } from 'react'
 import PropTypes from 'prop-types'
 import cx from 'classnames'
-import { useNavigate } from 'react-router-dom'
+import { useLocation, useNavigate } from 'react-router-dom'
 
 import useBreakpoints from 'cozy-ui/transpiled/react/providers/Breakpoints'
 import { SharingBannerPlugin, useSharingInfos } from 'cozy-sharing'
@@ -20,12 +20,17 @@ import styles from 'drive/web/modules/viewer/barviewer.styl'
 const LightFileViewer = ({ files }) => {
   const sharingInfos = useSharingInfos()
   const { isDesktop, isMobile } = useBreakpoints()
-
+  const { pathname } = useLocation()
   const navigate = useNavigate()
 
   const onlyOfficeOpener = useCallback(
-    file => navigate(makeOnlyOfficeFileRoute(file, true)),
-    [navigate]
+    file => {
+      const route = makeOnlyOfficeFileRoute(file.id, {
+        fromPathname: pathname
+      })
+      navigate(route)
+    },
+    [navigate, pathname]
   )
 
   return (

@@ -47,7 +47,7 @@ export const makeNormalizedFile = (client, folders, file) => {
       url = `/n/${file.id}`
       openOn = 'notes'
     } else if (models.file.shouldBeOpenedByOnlyOffice(file)) {
-      url = makeOnlyOfficeFileRoute(file, true)
+      url = makeOnlyOfficeFileRoute(file.id, { fromPathname: urlToFolder })
     } else {
       url = `${urlToFolder}/file/${file._id}`
     }

@@ -86,8 +86,7 @@ export class FileOpener extends Component {
                 componentsProps={{
                   OnlyOfficeViewer: {
                     isEnabled: isOfficeEnabled(isDesktop),
-                    opener: file =>
-                      navigate(makeOnlyOfficeFileRoute(file, true))
+                    opener: file => navigate(makeOnlyOfficeFileRoute(file.id))
                   }
                 }}
               >

@@ -205,7 +205,7 @@ const FilesViewer = ({ filesQuery, files, onClose, onChange }) => {
           componentsProps={{
             OnlyOfficeViewer: {
               isEnabled: isOfficeEnabled(isDesktop),
-              opener: file => navigate(makeOnlyOfficeFileRoute(file, true))
+              opener: file => navigate(makeOnlyOfficeFileRoute(file.id))
             },
             toolbarProps: {
               showFilePath: true

@@ -1,7 +1,7 @@
 import React, { useCallback, useContext, useState, useEffect } from 'react'
 import { useDispatch } from 'react-redux'
 import get from 'lodash/get'
-import { useNavigate } from 'react-router-dom'
+import { useLocation, useNavigate } from 'react-router-dom'
 
 import { useClient, useCapabilities } from 'cozy-client'
 import { useVaultClient, VaultUnlocker } from 'cozy-keys-lib'
@@ -50,6 +50,7 @@ const FolderViewBody = ({
   const { isDesktop } = useBreakpoints()
   const navigate = useNavigate()
   const client = useClient()
+  const { pathname } = useLocation()
   /**
    *  Since we are not able to restore the scroll correctly,
    * and force the scroll to top every time we change the
@@ -102,7 +103,8 @@ const FolderViewBody = ({
         openInNewTab: url => window.open(url, '_blank'),
         routeTo: url => navigate(url),
         isOfficeEnabled: isOfficeEnabled(isDesktop),
-        webviewIntent
+        webviewIntent,
+        pathname
       })({
         event,
         file,
@@ -116,7 +118,8 @@ const FolderViewBody = ({
       isFlatDomain,
       navigate,
       webviewIntent,
-      isDesktop
+      isDesktop,
+      pathname
     ]
   )
 

@@ -17,7 +17,8 @@ const createFileOpeningHandler =
     openInNewTab,
     routeTo,
     isOfficeEnabled,
-    webviewIntent
+    webviewIntent,
+    pathname
   }) =>
   async ({ event, file, isAvailableOffline }) => {
     if (isAvailableOffline) {
@@ -59,9 +60,18 @@ const createFileOpeningHandler =
       }
     } else if (isOnlyOffice && isOfficeEnabled) {
       if (event.ctrlKey || event.metaKey || event.shiftKey) {
-        openInNewTab(makeOnlyOfficeFileRoute(file))
+        openInNewTab(
+          makeOnlyOfficeFileRoute(file.id, {
+            withoutRouter: true,
+            fromPathname: pathname
+          })
+        )
       } else {
-        routeTo(makeOnlyOfficeFileRoute(file, true))
+        routeTo(
+          makeOnlyOfficeFileRoute(file.id, {
+            fromPathname: pathname
+          })
+        )
       }
     } else {
       navigateToFile(file)

@@ -7,23 +7,33 @@ import Spinner from 'cozy-ui/transpiled/react/Spinner'
 import Oops from 'components/Error/Oops'
 
 import useCreateFile from 'drive/web/modules/views/OnlyOffice/useCreateFile'
-import { canWriteOfficeDocument } from 'drive/web/modules/views/OnlyOffice/helpers'
+import {
+  canWriteOfficeDocument,
+  makeOnlyOfficeFileRoute
+} from 'drive/web/modules/views/OnlyOffice/helpers'
 
 const Create = () => {
   const navigate = useNavigate()
   const { folderId, fileClass } = useParams()
   const { status, fileId } = useCreateFile(folderId, fileClass)
+  const folderPath = `/folder/${folderId}`
 
   if (!canWriteOfficeDocument()) {
-    return <Navigate to={`/folder/${folderId}/paywall`} />
+    return <Navigate to={`${folderPath}/paywall`} />
   }
 
   if (status === 'error') {
     return <Oops />
   }
 
   if (status === 'loaded' && fileId) {
-    return navigate(`/onlyoffice/${fileId}/fromCreate`)
+    const url = makeOnlyOfficeFileRoute(fileId, {
+      fromCreate: true,
+      fromPathname: folderPath
+    })
+    return navigate(url, {
+      replace: true
+    })
   }
 
   return (

@@ -37,12 +37,9 @@ jest.mock('cozy-ui/transpiled/react/providers/Breakpoints', () => ({
 jest.mock('cozy-client/dist/hooks/useQuery', () => jest.fn())
 
 jest.mock('cozy-flags')
-jest.mock(
-  'drive/web/modules/views/OnlyOffice/Toolbar/HomeLinker',
-  () =>
-    ({ children }) =>
-      <div>{children}</div>
-)
+jest.mock('drive/web/modules/views/OnlyOffice/Toolbar', () => () => (
+  <div>Toolbar</div>
+))
 
 const client = createMockClient({})
 client.plugins = {

@@ -3,15 +3,19 @@ import React from 'react'
 import IconButton from 'cozy-ui/transpiled/react/IconButton'
 import Icon from 'cozy-ui/transpiled/react/Icon'
 import PreviousIcon from 'cozy-ui/transpiled/react/Icons/Previous'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 
 const BackButton = ({ onClick }) => {
   // TODO: remove u-ml-half-s when https://github.com/cozy/cozy-ui/issues/1808 is fixed
+  const { t } = useI18n()
+
   return (
     <IconButton
       data-testid="onlyoffice-backButton"
       className="u-ml-half-s"
       onClick={onClick}
       size="medium"
+      aria-label={t('button.back')}
     >
       <Icon icon={PreviousIcon} />
     </IconButton>

@@ -1,7 +1,12 @@
-import React, { useContext, useCallback, useMemo } from 'react'
-import { useNavigate } from 'react-router-dom'
+import React, { useContext, useState, useEffect } from 'react'
+import { useSearchParams } from 'react-router-dom'
 
-import { RealTimeQueries } from 'cozy-client'
+import {
+  RealTimeQueries,
+  useClient,
+  generateWebLink,
+  deconstructRedirectLink
+} from 'cozy-client'
 import useBreakpoints from 'cozy-ui/transpiled/react/providers/Breakpoints'
 
 import { DOCTYPE_FILES } from 'drive/lib/doctypes'
@@ -18,37 +23,64 @@ import Sharing from 'drive/web/modules/views/OnlyOffice/Toolbar/Sharing'
 
 const Toolbar = () => {
   const { isMobile } = useBreakpoints()
-  const {
-    fileId,
-    isPublic,
-    isFromSharing,
-    isReadOnly,
-    isEditorReady,
-    isFromCreate
-  } = useContext(OnlyOfficeContext)
+  const { fileId, isPublic, isReadOnly, isEditorReady } =
+    useContext(OnlyOfficeContext)
+  const client = useClient()
+  const [fetchStatus, setFetchStatus] = useState('pending')
+  const [instance, setInstance] = useState(client.getStackClient().uri)
+
+  useEffect(() => {
+    const fetch = async () => {
+      try {
+        setFetchStatus('loading')
+        const permissions = await client
+          .collection('io.cozy.permissions')
+          .fetchOwnPermissions()
+        if (permissions.included.length > 0) {
+          setInstance(permissions.included[0].attributes.instance)
+        }
+        setFetchStatus('loaded')
+      } catch {
+        setFetchStatus('error')
+      }
+    }
+    fetch()
+  }, [client])
+
+  const [searchParams] = useSearchParams()
+  const params = new URLSearchParams(location.search)
+
+  /**
+   * We search for redirectLink using two methods because
+   * the searchParam differs depending on the position in the url :
+   * - for /#hash?searchParam, you need useSearchParams
+   * - for /?searchParam#hash, you need location.search
+   */
+  const redirectLink =
+    searchParams.get('redirectLink') || params.get('redirectLink')
 
   const { data: fileWithPath } = useFileWithPath(fileId)
-  const navigate = useNavigate()
 
-  const hasOnyMoreHistoryEntry = useMemo(
-    () => isFromSharing || isFromCreate,
-    [isFromSharing, isFromCreate]
-  )
-  // The condition is different in the case of a only office file that has been shared with us.
-  // In this case there is a double redirection (one to know that the file is a share, the other
-  // to open it on the host instance), so there is an additional entry in the history.
-  const showBackButton = useMemo(
-    () =>
-      hasOnyMoreHistoryEntry
-        ? window.history.length > 2
-        : window.history.length > 1,
-    [hasOnyMoreHistoryEntry]
-  )
+  let link
+  if (redirectLink) {
+    const { slug, pathname, hash } = deconstructRedirectLink(redirectLink)
+    const { subdomain: subDomainType } = client.getInstanceOptions()
 
-  const handleOnClick = useCallback(
-    () => (hasOnyMoreHistoryEntry ? navigate(-2) : navigate(-1)),
-    [hasOnyMoreHistoryEntry, navigate]
-  )
+    link = generateWebLink({
+      cozyUrl: instance,
+      subDomainType,
+      slug,
+      pathname,
+      hash,
+      searchParams: []
+    })
+  }
+
+  const showBackButton = redirectLink !== null && fetchStatus === 'loaded'
+
+  const handleOnClick = () => {
+    window.location = link
+  }
 
   return (
     <>