feat: Add home shortcuts in apps menu

package.json

@@ -42,7 +42,7 @@
     "babel-plugin-module-resolver": "^4.0.0",
     "babel-plugin-transform-define": "^2.0.0",
     "babel-preset-cozy-app": "^2.8.1",
-    "cozy-client": "^57.7.0",
+    "cozy-client": "^60.12.1",
     "cozy-dataproxy-lib": "^4.1.0",
     "cozy-device-helper": "2.6.0",
     "cozy-flags": "^4.6.1",
@@ -76,7 +76,7 @@
   },
   "peerDependencies": {
     "@cozy/minilog": ">=1.0.0",
-    "cozy-client": ">=57.7.0",
+    "cozy-client": ">=60.12.1",
     "cozy-dataproxy-lib": ">=4.1.0",
     "cozy-device-helper": ">=2.6.0",
     "cozy-flags": ">=4.6.1",

src/components/AppsMenu/AppsMenuContent.jsx

@@ -7,12 +7,19 @@ import Typography from 'cozy-ui/transpiled/react/Typography'
 import { sortApplicationsList } from 'cozy-client/dist/models/applications'
 
 import AppItem from 'components/AppsMenu/components/AppItem'
+import ShortcutItem from 'components/AppsMenu/components/ShortcutItem'
 import AppItemPlaceholder from 'components/AppsMenu/components/AppItemPlaceholder'
 import useI18n from 'components/useI18n'
 import { getApps, getHomeApp, isFetchingApps } from 'lib/reducers'
 import styles from 'styles/apps-menu.styl'
 
-const AppsMenuContent = ({ isFetchingApps, apps, homeApp, closeMenu }) => {
+const AppsMenuContent = ({
+  isFetchingApps,
+  apps,
+  shortcuts,
+  homeApp,
+  closeMenu
+}) => {
   const { t } = useI18n()
 
   if (!isFetchingApps && (!apps || !apps.length)) {
@@ -46,6 +53,9 @@ const AppsMenuContent = ({ isFetchingApps, apps, homeApp, closeMenu }) => {
       {sortedApps.map((app, index) => (
         <AppItem key={index} app={app} onAppSwitch={closeMenu} />
       ))}
+      {shortcuts.map((shortcut, index) => (
+        <ShortcutItem key={index} shortcut={shortcut} />
+      ))}
     </div>
   )
 }

src/components/AppsMenu/components/ShortcutItem.jsx

@@ -0,0 +1,66 @@
+import React from 'react'
+
+import { useClient, useFetchShortcut } from 'cozy-client'
+import { splitFilename, getShortcutImgSrc } from 'cozy-client/dist/models/file'
+
+import { makeStyles } from 'cozy-ui/transpiled/react/styles'
+import Buttons from 'cozy-ui/transpiled/react/Buttons'
+import Typography from 'cozy-ui/transpiled/react/Typography'
+import cx from 'classnames'
+
+import styles from 'styles/apps-menu.styl'
+
+const useStyles = makeStyles(() => {
+  return {
+    text: {
+      lineHeight: '22.5px',
+      fontSize: '12px',
+      fontWeight: 400
+    }
+  }
+})
+
+export const ShortcutItem = ({ shortcut }) => {
+  const client = useClient()
+  const classes = useStyles()
+  const { shortcutInfos, shortcutImg } = useFetchShortcut(client, shortcut._id)
+
+  const { filename } = splitFilename(shortcut)
+  const url = shortcutInfos?.data?.url || '#'
+
+  const shortcutImgSrc = getShortcutImgSrc(shortcut)
+
+  return (
+    <Buttons
+      height="auto"
+      component="a"
+      target="_blank"
+      variant="text"
+      href={url}
+      title={filename}
+      className={cx(styles['apps-menu-grid-item-wrapper'], 'u-bdrs-5')}
+      label={
+        <div className={styles['apps-menu-grid-item']}>
+          <div className={styles['apps-menu-grid-item-icon']}>
+            {shortcutImgSrc ? (
+              <img src={shortcutImgSrc} alt="" width={42} height={42} />
+            ) : (
+              <img
+                className="u-bdrs-5"
+                src={shortcutImg}
+                alt=""
+                width={42}
+                height={42}
+              />
+            )}
+          </div>
+          <Typography noWrap className={classes.text}>
+            {filename}
+          </Typography>
+        </div>
+      }
+    />
+  )
+}
+
+export default ShortcutItem

src/components/AppsMenu/index.jsx

@@ -20,7 +20,7 @@ const useStyles = makeStyles({
   }
 })
 
-const AppsMenu = () => {
+const AppsMenu = ({ shortcuts }) => {
   const [isOpen, setOpen] = useState(false)
   const containerRef = useRef()
   const buttonRef = useRef()
@@ -71,7 +71,7 @@ const AppsMenu = () => {
             paper: 'u-bdrs-7'
           }}
         >
-          <AppsMenuContent closeMenu={toggleMenu} />
+          <AppsMenuContent shortcuts={shortcuts} closeMenu={toggleMenu} />
         </Menu>
       )}
     </nav>

src/components/Bar.jsx

@@ -21,7 +21,7 @@ import {
   fetchContext,
   fetchSettingsData
 } from 'lib/reducers'
-import { useClient } from 'cozy-client'
+import { useClient, useFetchHomeShortcuts } from 'cozy-client'
 import { AssistantDesktop } from 'cozy-search'
 import cx from 'classnames'
 
@@ -45,6 +45,8 @@ export const Bar = ({
 }) => {
   const client = useClient()
   const { isMobile } = useBreakpoints()
+  const shortcuts = useFetchHomeShortcuts()
+
   const isSearchEnabled = searchOptions.enabled && !isPublic
 
   const fetchInitialData = useCallback(() => {
@@ -114,7 +116,7 @@ export const Bar = ({
     return (
       <>
         <HelpLink />
-        <AppsMenu />
+        <AppsMenu shortcuts={shortcuts} />
         <UserMenu onLogOut={onLogOut} />
       </>
     )

yarn.lock

@@ -3388,18 +3388,18 @@ cosmiconfig@^5.0.1:
     js-yaml "^3.13.1"
     parse-json "^4.0.0"
 
-cozy-client@^57.7.0:
-  version "57.7.0"
-  resolved "https://registry.yarnpkg.com/cozy-client/-/cozy-client-57.7.0.tgz#c0d3daadfca7cd117fb0261a51a0e26bc4b6a730"
-  integrity sha512-4pWcbZy/J3l8Fxm7Ytmfp3KJ2N8Acdvx1fi3U0H6irep3fKO/+xTQO1ozgi+zvOmox3J70OvMWoJRw4xbLXqWg==
+cozy-client@^60.12.1:
+  version "60.12.1"
+  resolved "https://registry.yarnpkg.com/cozy-client/-/cozy-client-60.12.1.tgz#30bbd442ed1493fa7d1b8ccf279bc937da34b4e8"
+  integrity sha512-2lS+cwcfZU7ZmcwvWjQ+4K6HG6pyW+hSbIDJyI+PRt9XJicZaQjVqHgNgczrSMVRK5XDI6hQWRxcQhiSv0auKA==
   dependencies:
     "@cozy/minilog" "1.0.0"
     "@fastify/deepmerge" "^2.0.2"
     "@types/jest" "^26.0.20"
     "@types/lodash" "^4.14.170"
     btoa "^1.2.1"
-    cozy-stack-client "^57.2.0"
-    date-fns "2.29.3"
+    cozy-stack-client "^60.6.0"
+    date-fns "^2.30.0"
     fast-deep-equal "^3.1.3"
     json-stable-stringify "^1.0.1"
     lodash "^4.17.13"
@@ -3496,10 +3496,10 @@ cozy-search@^0.4.0:
     react-type-animation "3.2.0"
     rooks "7.14.1"
 
-cozy-stack-client@^57.2.0:
-  version "57.2.0"
-  resolved "https://registry.yarnpkg.com/cozy-stack-client/-/cozy-stack-client-57.2.0.tgz#837176d73561aa1983f6b2c0a9b0cbe1eb0a0d14"
-  integrity sha512-k68fuNdfLXsskdgA0pd04Bk+CDUCqICCm5IZHJZiIEJkovvA6IqI/jU8vyNI7fNrCuRQasCjwatIRoT7Qq9O6g==
+cozy-stack-client@^60.6.0:
+  version "60.6.0"
+  resolved "https://registry.yarnpkg.com/cozy-stack-client/-/cozy-stack-client-60.6.0.tgz#7819415ba8025dde8a3728f489b9f545a0f6d759"
+  integrity sha512-p1AIa7RAh0807moLbzIftnfDRFL5D5w2idopmZZ3peuKkoD1dnCHXppVUVVupM7/CwOg3NIrX2kYvdyvbrxpww==
   dependencies:
     detect-node "^2.0.4"
     mime "^2.4.0"
@@ -3701,12 +3701,7 @@ data-urls@^2.0.0:
     whatwg-mimetype "^2.3.0"
     whatwg-url "^8.0.0"
 
-[email protected]:
-  version "2.29.3"
-  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.29.3.tgz#27402d2fc67eb442b511b70bbdf98e6411cd68a8"
-  integrity sha512-dDCnyH2WnnKusqvZZ6+jA1O51Ibt8ZMRNkDZdyAyK4YfbDwa/cEmuztzG5pk6hqlp9aSBPYcjOlktquahGwGeA==
-
-[email protected]:
+[email protected], date-fns@^2.30.0:
   version "2.30.0"
   resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.30.0.tgz#f367e644839ff57894ec6ac480de40cae4b0f4d0"
   integrity sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==
@@ -5179,7 +5174,7 @@ growly@^1.3.0:
   resolved "https://registry.yarnpkg.com/growly/-/growly-1.3.0.tgz#f10748cbe76af964b7c96c93c6bcc28af120c081"
   integrity sha1-8QdIy+dq+WS3yWyTxrzCivEgwIE=
 
-hammerjs@2.0.8, hammerjs@^2.0.8:
+hammerjs@^2.0.8:
   version "2.0.8"
   resolved "https://registry.yarnpkg.com/hammerjs/-/hammerjs-2.0.8.tgz#04ef77862cff2bb79d30f7692095930222bf60f1"
   integrity sha1-BO93hiz/K7edMPdpIJWTAiK/YPE=
@@ -7175,7 +7170,7 @@ lodash.clonedeep@^4.5.0, lodash.clonedeep@~4.5.0:
   resolved "https://registry.yarnpkg.com/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz#e23f3f9c4f8fbdde872529c1071857a086e5ccef"
   integrity sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8=
 
-lodash.debounce@4.0.8, lodash.debounce@^4.0.8:
+lodash.debounce@^4.0.8:
   version "4.0.8"
   resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
   integrity sha1-gteb/zCmfEAF/9XiUVMArZyk168=
@@ -7641,9 +7636,9 @@ ms@^2.1.3:
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2"
   integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==
 
-"mui-bottom-sheet@git+https://github.com/cozy/mui-bottom-sheet.git#v1.0.9":
+"mui-bottom-sheet@https://github.com/cozy/mui-bottom-sheet.git#v1.0.9":
   version "1.0.8"
-  resolved "git+https://github.com/cozy/mui-bottom-sheet.git#3dc4c2a245ab39079bc2f73546bccf80847be14c"
+  resolved "https://github.com/cozy/mui-bottom-sheet.git#3dc4c2a245ab39079bc2f73546bccf80847be14c"
   dependencies:
     "@juggle/resize-observer" "^3.1.3"
     jest-environment-jsdom-sixteen "^1.0.3"