feat: Sharing button with label on large view

src/components/notes/sharing.jsx

@@ -1,70 +1,32 @@
-import React, { useCallback, useState, useMemo, useEffect } from 'react'
+import React, { useCallback, useState } from 'react'
 import SharingProvider, { ShareButton, ShareModal } from 'cozy-sharing'
-import { withClient, models } from 'cozy-client'
 import { withLocales } from 'cozy-sharing'
+import { withClient } from 'cozy-client'
 
-const LocalizedSharingProvider = withLocales(SharingProvider)
+import useFileWithPath from 'hooks/useFileWithPath'
+import styles from 'components/notes/sharing.styl'
 
-function normalizeFileAndPath(id, file, parent) {
-  const withId = { id, ...file }
-  const normalized = models.file.normalize(withId)
-  if (parent && parent.path) {
-    const withPath = models.file.ensureFilePath(normalized, parent)
-    return withPath
-  } else {
-    return normalized
-  }
-}
+const LocalizedSharingProvider = withLocales(SharingProvider)
 
 export default withClient(function SharingWidget(props) {
   const { client } = props
-  const [parent, setParent] = useState(undefined)
-
-  const id = props.file.id || props.file._id
 
-  const file = useMemo(() => normalizeFileAndPath(id, props.file, parent), [
-    id,
-    parent
-  ])
-
-  useEffect(
-    () => {
-      async function getParent(file) {
-        try {
-          const parent = await client.query(
-            client.get('io.cozy.files', file.attributes.dir_id)
-          )
-          setParent(parent.data)
-        } catch (e) {
-          // eslint-disable-next-line no-console
-          console.warn(
-            `Request failed when try to fetch the parent ${
-              file.attributes.dir_id
-            } of io.cozy.files ${file.id || file._id}`
-          )
-          // nothing to do here
-          // @TODO send a sentry event
-        }
-      }
-      getParent(file)
-    },
-    [file.attributes.dir_id]
-  )
+  const file = useFileWithPath({ cozyClient: client, file: props.file })
+  const noteId = file && file.id
 
   const [showModal, setShowModal] = useState(false)
   const onClick = useCallback(() => setShowModal(!showModal), [])
   const onClose = useCallback(() => setShowModal(false), [])
-  const noteId = file.id
+
   return (
-    (parent && (
+    (file && (
       <LocalizedSharingProvider doctype={file.type} documentType="Notes">
         <ShareButton
           theme="primary"
           docId={noteId}
           onClick={onClick}
-          label=""
           extension="narrow"
-          iconOnly
+          className={styles['sharing-button']}
         />
         {showModal && <ShareModal document={file} onClose={onClose} />}
       </LocalizedSharingProvider>

src/components/notes/sharing.styl

@@ -0,0 +1,3 @@
+.sharing-button
+    & > span > svg + span
+        display var(--notes-share-button-label, unset)

src/hooks/useFileWithPath.js

@@ -0,0 +1,41 @@
+import { useEffect, useState } from 'react'
+import { models } from 'cozy-client'
+
+function useFileWithPath({ cozyClient, file }) {
+  const [fileWithPath, setFileWithPath] = useState(undefined)
+
+  useEffect(
+    () => {
+      async function getParent(rawFile) {
+        const file = models.file.normalize(rawFile)
+        try {
+          const parent = await cozyClient.query(
+            cozyClient.get('io.cozy.files', file.attributes.dir_id)
+          )
+          setFileWithPath(models.file.ensureFilePath(file, parent.data))
+        } catch (e) {
+          // eslint-disable-next-line no-console
+          console.warn(
+            `Request failed when try to fetch the parent ${
+              file.attributes.dir_id
+            } of io.cozy.files ${file.id}`
+          )
+          setFileWithPath(null)
+          // nothing to do here
+          // @TODO send a sentry event
+        }
+      }
+
+      getParent(file)
+    },
+    [file.attributes.dir_id]
+  )
+
+  if (fileWithPath && fileWithPath.id == file.id) {
+    return fileWithPath
+  } else {
+    return undefined
+  }
+}
+
+export default useFileWithPath

src/styles/index.css

@@ -31,8 +31,8 @@ html {
     --note-title4-color: var(--coolGrey);
     --note-border-radius: 8px;
     --note-header-height: 3rem;
-    --note-header-margin-left: 5rem;
-    --note-header-margin-right: 5rem;
+    --note-header-margin-left: 7rem;
+    --note-header-margin-right: 10rem;
     color: var(--note-base-color);
 }
 @media (max-width: 800px) {
@@ -99,12 +99,19 @@ html .akEditor > div:first-child > div:first-child > div:first-child > div:first
     max-width: 100%;
     margin: auto;
 }
-@media (max-width: 810px) {
-    html .akEditor > div:first-child > div:first-child > div:first-child > div:first-child {
-        width: 480px; /* condensed view */
-    }
+@media (max-width: 1023px) {
+  html {
+    --useless: auto;
+   /* FIXME : without this block, the next rule is not taken into account */
+  }
+}
+@media (max-width: 1023px) {
+  html {
+    --notes-share-button-label: none; /* do not display the label in sharing button */
+    --note-header-margin-left: 5rem; /* remove margin to leave space for the toolbar */
+    --note-header-margin-right: 5rem;
+  }
 }
-/* FIXME : without this repetition, the rule is not taken into account */
 @media (max-width: 810px) {
     html .akEditor > div:first-child > div:first-child > div:first-child > div:first-child {
         width: 480px; /* condensed view */