feat(OnlyOffice): Disable mobile editing

This feature is behind the flag
cozy · Mar 22, 2023 · aa265ce · aa265ce
1 parent 415e17a
commit aa265ce
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 13 deletions.
diff --git a/src/drive/web/modules/drive/AddMenu/AddMenu.jsx b/src/drive/web/modules/drive/AddMenu/AddMenu.jsx
@@ -13,7 +13,7 @@ import CreateShortcut from 'drive/web/modules/drive/Toolbar/components/CreateSho
 import UploadItem from 'drive/web/modules/drive/Toolbar/components/UploadItem'
 import StartScanner from 'drive/web/modules/drive/Toolbar/components/StartScanner'
 import CreateOnlyOfficeItem from 'drive/web/modules/drive/Toolbar/components/CreateOnlyOfficeItem'
-import { isOfficeEnabled } from 'drive/web/modules/views/OnlyOffice/helpers'
+import { isOfficeEditingEnabled } from 'drive/web/modules/views/OnlyOffice/helpers'
 import flag from 'cozy-flags'
 
 export const ActionMenuContent = ({
@@ -25,7 +25,7 @@ export const ActionMenuContent = ({
   isEncryptedFolder
 }) => {
   const { t } = useI18n()
-  const { isMobile } = useBreakpoints()
+  const { isMobile, isDesktop } = useBreakpoints()
 
   return (
     <>
@@ -42,7 +42,7 @@ export const ActionMenuContent = ({
         <AddEncryptedFolderItem />
       )}
       {!isPublic && !isEncryptedFolder && <CreateNoteItem />}
-      {canUpload && isOfficeEnabled() && !isEncryptedFolder && (
+      {canUpload && isOfficeEditingEnabled(isDesktop) && !isEncryptedFolder && (
         <>
           <CreateOnlyOfficeItem fileClass="text" />
           <CreateOnlyOfficeItem fileClass="spreadsheet" />

diff --git a/src/drive/web/modules/views/OnlyOffice/Editor.spec.jsx b/src/drive/web/modules/views/OnlyOffice/Editor.spec.jsx
@@ -8,7 +8,10 @@ import useBreakpoints from 'cozy-ui/transpiled/react/hooks/useBreakpoints'
 import AppLike from 'test/components/AppLike'
 import { officeDocParam } from 'test/data'
 
-import { isOfficeEnabled } from 'drive/web/modules/views/OnlyOffice/helpers'
+import {
+  isOfficeEnabled,
+  isOfficeEditingEnabled
+} from 'drive/web/modules/views/OnlyOffice/helpers'
 import { OnlyOfficeContext } from 'drive/web/modules/views/OnlyOffice'
 import Editor from 'drive/web/modules/views/OnlyOffice/Editor'
 
@@ -20,7 +23,8 @@ jest.mock('cozy-client/dist/hooks/useFetchJSON', () => ({
 
 jest.mock('drive/web/modules/views/OnlyOffice/helpers', () => ({
   ...jest.requireActual('drive/web/modules/views/OnlyOffice/helpers'),
-  isOfficeEnabled: jest.fn()
+  isOfficeEnabled: jest.fn(),
+  isOfficeEditingEnabled: jest.fn()
 }))
 
 jest.mock('cozy-ui/transpiled/react/hooks/useBreakpoints', () => ({
@@ -217,7 +221,20 @@ describe('Editor', () => {
           data: officeDocParam
         })
         useQuery.mockReturnValue(officeDocParam)
-        isOfficeEnabled.mockReturnValue(true)
+        isOfficeEditingEnabled.mockReturnValue(true)
+
+        setup({ isMobile: true })
+
+        expect(screen.queryByLabelText('Edit')).toBeTruthy()
+      })
+
+      it('should show the readOnlyFab', () => {
+        useFetchJSON.mockReturnValue({
+          fetchStatus: 'loaded',
+          data: officeDocParam
+        })
+        useQuery.mockReturnValue(officeDocParam)
+        isOfficeEditingEnabled.mockReturnValue(true)
 
         setup({ isMobile: true })
 
@@ -232,7 +249,7 @@ describe('Editor', () => {
           data: officeDocParam
         })
         useQuery.mockReturnValue(officeDocParam)
-        isOfficeEnabled.mockReturnValue(true)
+        isOfficeEditingEnabled.mockReturnValue(true)
 
         setup({ isMobile: false })
 
@@ -245,7 +262,7 @@ describe('Editor', () => {
           data: officeDocParam
         })
         useQuery.mockReturnValue(officeDocParam)
-        isOfficeEnabled.mockReturnValue(true)
+        isOfficeEditingEnabled.mockReturnValue(true)
 
         setup({ isMobile: false, isEditorModeView: false })
 
@@ -258,7 +275,7 @@ describe('Editor', () => {
           data: officeDocParam
         })
         useQuery.mockReturnValue(officeDocParam)
-        isOfficeEnabled.mockReturnValue(true)
+        isOfficeEditingEnabled.mockReturnValue(true)
 
         setup({
           isMobile: true,

diff --git a/src/drive/web/modules/views/OnlyOffice/View.jsx b/src/drive/web/modules/views/OnlyOffice/View.jsx
@@ -7,6 +7,7 @@ import Spinner from 'cozy-ui/transpiled/react/Spinner'
 import Error from 'drive/web/modules/views/OnlyOffice/Error'
 import { OnlyOfficeContext } from 'drive/web/modules/views/OnlyOffice'
 import ReadOnlyFab from 'drive/web/modules/views/OnlyOffice/ReadOnlyFab'
+import { isOfficeEditingEnabled } from 'drive/web/modules/views/OnlyOffice/helpers'
 import { FRAME_EDITOR_NAME } from 'drive/web/modules/views/OnlyOffice/config'
 
 const forceIframeHeight = value => {
@@ -19,7 +20,7 @@ const View = ({ id, apiUrl, docEditorConfig }) => {
 
   const { isEditorReady, isReadOnly, isEditorModeView } =
     useContext(OnlyOfficeContext)
-  const { isMobile } = useBreakpoints()
+  const { isMobile, isDesktop } = useBreakpoints()
 
   const initEditor = useCallback(() => {
     new window.DocsAPI.DocEditor('onlyOfficeEditor', docEditorConfig)
@@ -53,7 +54,10 @@ const View = ({ id, apiUrl, docEditorConfig }) => {
   }, [isEditorReady])
 
   const showReadOnlyFab =
-    isEditorReady && !isReadOnly && (isMobile || isEditorModeView)
+    isEditorReady &&
+    !isReadOnly &&
+    isOfficeEditingEnabled(isDesktop) &&
+    (isMobile || isEditorModeView)
 
   if (isError) return <Error />
 

diff --git a/src/drive/web/modules/views/OnlyOffice/helpers.js b/src/drive/web/modules/views/OnlyOffice/helpers.js
@@ -27,14 +27,31 @@ export function redirectToOnlyOfficePaywall(nextState, replace) {
   }
 }
 
-export function onlyOfficeDefaultMode() {
+export function onlyOfficeDefaultMode(isDesktop) {
   const office = flag('drive.office')
+
+  if (!isDesktop && flag('drive.office.disableMobileEditing')) {
+    return 'view'
+  }
+
   if (office && office.write && office.onlyOffice) {
     return office.onlyOffice.defaultMode
   }
   return 'view'
 }
 
+export const isOfficeEditingEnabled = isDesktop => {
+  if (!isOfficeEnabled()) {
+    return false
+  }
+
+  if (!isDesktop && flag('drive.office.disableMobileEditing')) {
+    return false
+  }
+
+  return true
+}
+
 export const makeOnlyOfficeFileRoute = (file, isWithRouter) =>
   isWithRouter ? `/onlyoffice/${file.id}` : `/#/onlyoffice/${file.id}`
 

diff --git a/src/drive/web/modules/views/OnlyOffice/index.jsx b/src/drive/web/modules/views/OnlyOffice/index.jsx
@@ -1,6 +1,7 @@
 import React, { createContext, useState, useMemo, useEffect } from 'react'
 
 import Dialog from 'cozy-ui/transpiled/react/Dialog'
+import useBreakpoints from 'cozy-ui/transpiled/react/hooks/useBreakpoints'
 
 import { useRouter } from 'drive/lib/RouterContext'
 import Editor from 'drive/web/modules/views/OnlyOffice/Editor'
@@ -19,10 +20,11 @@ const OnlyOfficeProvider = ({
   children
 }) => {
   const { router } = useRouter()
+  const { isDesktop } = useBreakpoints()
 
   const [isEditorReady, setIsEditorReady] = useState(false)
 
-  const [editorMode, setEditorMode] = useState(onlyOfficeDefaultMode())
+  const [editorMode, setEditorMode] = useState(onlyOfficeDefaultMode(isDesktop))
   const isEditorModeView = useMemo(() => {
     return editorMode === 'view'
   }, [editorMode])