feat(OO): Add an edit button to the toolbar in place of the FabButton

And no longer display the FabButton in Desktop mode

src/locales/en.json

@@ -663,6 +663,14 @@
     "actions": {
       "edit": "Edit",
       "validate": "Validate"
+    },
+    "tooltip": {
+      "title": "Edit document",
+      "text": "The document is currently read-only. You can modify it by clicking here.",
+      "actions": {
+        "ok": "Ok",
+        "hide": "Do not display"
+      }
     }
   },
   "Migration": {

src/locales/fr.json

@@ -664,6 +664,14 @@
     "actions": {
       "edit": "Modifier",
       "validate": "Valider"
+    },
+    "tooltip": {
+      "title": "Modifier le document",
+      "text": "Le document est actuellement en lecture seule, Vous pouvez le modifier en cliquant ici.",
+      "actions": {
+        "ok": "Ok",
+        "hide": "Ne plus afficher"
+      }
     }
   },
   "Migration": {

src/modules/views/OnlyOffice/Editor.spec.jsx

@@ -271,7 +271,7 @@ describe('Editor', () => {
 
         setup({ isMobile: false })
 
-        expect(screen.queryByText('Edit')).toBeTruthy()
+        expect(screen.queryByText('Edit')).toBeNull()
       })
 
       it('should hide the readOnlyFab when the editor is in edit mode', () => {

src/modules/views/OnlyOffice/Toolbar/EditButton.jsx

@@ -0,0 +1,131 @@
+import React, { useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+
+import { useClient, useQuery, Q, isQueryLoading } from 'cozy-client'
+import Buttons from 'cozy-ui/transpiled/react/Buttons'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import LightbulbIcon from 'cozy-ui/transpiled/react/Icons/Lightbulb'
+import RenameIcon from 'cozy-ui/transpiled/react/Icons/Rename'
+import Tooltip from 'cozy-ui/transpiled/react/Tooltip'
+import Typography from 'cozy-ui/transpiled/react/Typography'
+import useBreakpoints from 'cozy-ui/transpiled/react/providers/Breakpoints'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
+import { makeStyles } from 'cozy-ui/transpiled/react/styles'
+
+import { DOCTYPE_FILES_SETTINGS } from 'lib/doctypes'
+import { useOnlyOfficeContext } from 'modules/views/OnlyOffice/OnlyOfficeProvider'
+import { canWriteOfficeDocument } from 'modules/views/OnlyOffice/helpers'
+import { getAppSettingQuery } from 'queries'
+
+const useStyle = makeStyles({
+  popper: {
+    pointerEvents: 'auto',
+    '& .actions-tooltip': {
+      display: 'flex',
+      justifyContent: 'flex-end',
+      marginTop: '0.5rem',
+      '& > button': {
+        color: 'var(--white)'
+      }
+    }
+  },
+  tooltip: {
+    backgroundColor: 'var(--primaryColor)'
+  },
+  arrow: {
+    color: 'var(--primaryColor)'
+  }
+})
+
+const EditButton = ({ openTooltip }) => {
+  const classes = useStyle()
+  const client = useClient()
+  const { t } = useI18n()
+  const { editorMode, setEditorMode } = useOnlyOfficeContext()
+  const navigate = useNavigate()
+  const [showTooltip, setShowTooltip] = useState(true)
+
+  const handleClick = () => {
+    if (canWriteOfficeDocument()) {
+      setEditorMode(editorMode === 'view' ? 'edit' : 'view')
+    } else {
+      navigate('./paywall')
+    }
+  }
+
+  const closeTooltip = () => {
+    setShowTooltip(false)
+  }
+
+  const handleTooltip = async () => {
+    const { data } = await client.query(Q(DOCTYPE_FILES_SETTINGS))
+    const settings = data?.[0] || {}
+    await client.save({
+      ...settings,
+      _type: DOCTYPE_FILES_SETTINGS,
+      hideOOEditTooltip: true
+    })
+  }
+
+  return (
+    <Tooltip
+      open={showTooltip && openTooltip}
+      classes={classes}
+      title={
+        <>
+          <div className="u-flex u-flex-items-center u-mb-half">
+            <Icon icon={LightbulbIcon} className="u-mr-half" />
+            <Typography variant="h6" color="inherit">
+              {t('OnlyOffice.tooltip.title')}
+            </Typography>
+          </div>
+          <Typography variant="body2" color="inherit">
+            {t('OnlyOffice.tooltip.text')}
+          </Typography>
+          <div className="actions-tooltip">
+            <Buttons
+              onClick={handleTooltip}
+              variant="text"
+              label={t('OnlyOffice.tooltip.actions.hide')}
+            />
+            <Buttons
+              onClick={closeTooltip}
+              variant="text"
+              label={t('OnlyOffice.tooltip.actions.ok')}
+            />
+          </div>
+        </>
+      }
+    >
+      <Buttons
+        className="u-ml-half"
+        onClick={handleClick}
+        disabled={editorMode === 'edit'}
+        startIcon={<Icon icon={RenameIcon} />}
+        label={t('OnlyOffice.actions.edit')}
+      />
+    </Tooltip>
+  )
+}
+
+const EditButtonWrapper = () => {
+  const { isMobile } = useBreakpoints()
+  const { editorMode } = useOnlyOfficeContext()
+
+  const { data: settings, ...appSettingsQueryResult } = useQuery(
+    getAppSettingQuery.definition,
+    getAppSettingQuery.options
+  )
+  const hideOOEditTooltip = settings?.[0]?.hideOOEditTooltip
+  const openTooltip = isQueryLoading(appSettingsQueryResult)
+    ? false
+    : !hideOOEditTooltip && editorMode === 'view' && canWriteOfficeDocument()
+
+  if (isMobile) {
+    return null
+  }
+
+  return <EditButton openTooltip={openTooltip} />
+}
+
+export default EditButtonWrapper

src/modules/views/OnlyOffice/Toolbar/index.jsx

@@ -15,6 +15,7 @@ import { useRedirectLink } from 'hooks/useRedirectLink'
 import PublicToolbarMoreMenu from 'modules/public/PublicToolbarMoreMenu'
 import { useOnlyOfficeContext } from 'modules/views/OnlyOffice/OnlyOfficeProvider'
 import BackButton from 'modules/views/OnlyOffice/Toolbar/BackButton'
+import EditButton from 'modules/views/OnlyOffice/Toolbar/EditButton'
 import FileIcon from 'modules/views/OnlyOffice/Toolbar/FileIcon'
 import FileName from 'modules/views/OnlyOffice/Toolbar/FileName'
 import HomeIcon from 'modules/views/OnlyOffice/Toolbar/HomeIcon'
@@ -98,7 +99,12 @@ const Toolbar = ({ sharingInfos }) => {
         <PublicToolbarMoreMenu files={[fileWithPath]} actions={actions} />
       )}
 
-      {!isPublic && isEditorReady && <Sharing fileWithPath={fileWithPath} />}
+      {!isPublic && isEditorReady && (
+        <>
+          <Sharing fileWithPath={fileWithPath} />
+          <EditButton />
+        </>
+      )}
     </>
   )
 }

src/modules/views/OnlyOffice/View.jsx

@@ -18,8 +18,7 @@ const forceIframeHeight = value => {
 const View = ({ id, apiUrl, docEditorConfig }) => {
   const [isError, setIsError] = useState(false)
 
-  const { isEditorReady, isReadOnly, isTrashed, isEditorModeView } =
-    useOnlyOfficeContext()
+  const { isEditorReady, isReadOnly, isTrashed } = useOnlyOfficeContext()
   const { isMobile, isDesktop } = useBreakpoints()
 
   const initEditor = useCallback(() => {
@@ -54,11 +53,11 @@ const View = ({ id, apiUrl, docEditorConfig }) => {
   }, [isEditorReady])
 
   const showReadOnlyFab =
+    isMobile &&
     isEditorReady &&
     !isReadOnly &&
     !isTrashed &&
-    isOfficeEditingEnabled(isDesktop) &&
-    (isMobile || isEditorModeView)
+    isOfficeEditingEnabled(isDesktop)
 
   if (isError) return <Error />
 

src/queries/index.ts

@@ -2,7 +2,11 @@ import CozyClient, { Q, QueryDefinition } from 'cozy-client'
 import { QueryOptions } from 'cozy-client/types/types'
 
 import { SHARED_DRIVES_DIR_ID, TRASH_DIR_ID } from 'constants/config'
-import { DOCTYPE_FILES_ENCRYPTION, DOCTYPE_ALBUMS } from 'lib/doctypes'
+import {
+  DOCTYPE_FILES_ENCRYPTION,
+  DOCTYPE_ALBUMS,
+  DOCTYPE_FILES_SETTINGS
+} from 'lib/doctypes'
 import { formatFolderQueryId } from 'lib/queries'
 
 export interface QueryConfig {
@@ -532,3 +536,10 @@ export const buildNextcloudTrashFolderQuery: QueryBuilder<
     enabled: !!sourceAccount && !!path
   }
 })
+
+export const getAppSettingQuery: QueryConfig = {
+  definition: () => Q(DOCTYPE_FILES_SETTINGS),
+  options: {
+    as: DOCTYPE_FILES_SETTINGS
+  }
+}