From aa265ceec837f383fc6bc7eba89befa8b217f37e Mon Sep 17 00:00:00 2001 From: cballevre Date: Mon, 20 Mar 2023 17:15:19 +0100 Subject: [PATCH] feat(OnlyOffice): Disable mobile editing This feature is behind the flag --- .../web/modules/drive/AddMenu/AddMenu.jsx | 6 ++-- .../modules/views/OnlyOffice/Editor.spec.jsx | 29 +++++++++++++++---- .../web/modules/views/OnlyOffice/View.jsx | 8 +++-- .../web/modules/views/OnlyOffice/helpers.js | 19 +++++++++++- .../web/modules/views/OnlyOffice/index.jsx | 4 ++- 5 files changed, 53 insertions(+), 13 deletions(-) diff --git a/src/drive/web/modules/drive/AddMenu/AddMenu.jsx b/src/drive/web/modules/drive/AddMenu/AddMenu.jsx index 07605e358a..ef512ecc0a 100644 --- 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 = ({ )} {!isPublic && !isEncryptedFolder && } - {canUpload && isOfficeEnabled() && !isEncryptedFolder && ( + {canUpload && isOfficeEditingEnabled(isDesktop) && !isEncryptedFolder && ( <> diff --git a/src/drive/web/modules/views/OnlyOffice/Editor.spec.jsx b/src/drive/web/modules/views/OnlyOffice/Editor.spec.jsx index ac1fd4c6af..f6f6bc4a94 100644 --- 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 index 0a4fd0a3a3..02809de609 100644 --- 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 diff --git a/src/drive/web/modules/views/OnlyOffice/helpers.js b/src/drive/web/modules/views/OnlyOffice/helpers.js index 11afd836b5..9ba61d6779 100644 --- 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 index a936357049..625d753dfd 100644 --- 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])