[VO-1194] feat: Hide shortcut badge when for some context

src/components/Sections/actions/groupModeAction.tsx

@@ -17,27 +17,19 @@ import {
   computeGroupMode,
   handleSectionAction
 } from 'components/Sections/utils'
-
-const StateSwitch = ({
-  handleClick,
-  checked
-}: {
-  handleClick: () => void
-  checked: boolean
-}): JSX.Element => {
-  return <Switch checked={checked} onChange={handleClick} color="primary" />
-}
+import { useNavigate } from 'react-router-dom'
 
 export const groupModeAction = (): (() => Action) => () => ({
   name: `sectionAction_group`,
   Component: React.forwardRef<{ docs?: Section[] }>(
     function SectionActionComponent(props: { docs?: Section[] }, ref) {
+      const navigate = useNavigate()
       const { t } = useI18n()
       const { isMobile } = useBreakpoints()
       const { values, save } = useSettings('home', ['shortcutsLayout'])
       const section = props.docs?.[0] as SectionViewProps['section']
       const currentGroupMode = computeGroupMode(isMobile, section)
-      const handleClick = (): void =>
+      const handleClick = (): void => {
         handleSectionAction(
           section,
           isMobile,
@@ -47,17 +39,20 @@ export const groupModeAction = (): (() => Action) => () => ({
           values,
           save
         )
+        if (currentGroupMode === GroupMode.GROUPED) {
+          navigate('/connected')
+        }
+      }
 
       return (
-        <ActionsMenuItem {...props} ref={ref}>
+        <ActionsMenuItem {...props} ref={ref} onClick={handleClick}>
           <ListItemText
             className="u-mr-half"
             primary={t(`sections.label_grouped`)}
           />
-
-          <StateSwitch
-            handleClick={handleClick}
+          <Switch
             checked={currentGroupMode === GroupMode.GROUPED}
+            color="primary"
           />
         </ActionsMenuItem>
       )

src/components/ShortcutLink.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import get from 'lodash/get'
 
-import { useClient, useFetchShortcut } from 'cozy-client'
+import { useClient, useFetchShortcut, useInstanceInfo } from 'cozy-client'
 import { CozyFile } from 'cozy-doctypes'
 
 import SquareAppIcon from 'cozy-ui/transpiled/react/SquareAppIcon'
@@ -22,8 +22,9 @@ export const ShortcutLink = ({
   // waiting an http request to resolve.
   const { shortcutInfos } = useFetchShortcut(client, file._id)
   const { isMobile } = useBreakpoints()
-  const computedSize = isMobile ? 32 : desktopSize
+  const instanceInfo = useInstanceInfo()
 
+  const computedSize = isMobile ? 32 : desktopSize
   const { filename } = CozyFile.splitFilename(file)
   const url = get(shortcutInfos, 'data.attributes.url', '#')
 
@@ -34,6 +35,8 @@ export const ShortcutLink = ({
   const icon = get(file, 'attributes.metadata.icon')
   const iconMimeType = get(file, 'attributes.metadata.iconMimeType')
   const description = get(file, 'attributes.metadata.description')
+  const shouldShortcutBadgeHidden =
+    instanceInfo.context.data.hide_shortcut_badge_on_home ?? false
 
   return (
     <Link
@@ -62,13 +65,15 @@ export const ShortcutLink = ({
               alt={filename}
             />
           }
+          hideShortcutBadge={shouldShortcutBadgeHidden}
         />
       ) : (
         <SquareAppIcon
           name={filename}
           variant="shortcut"
           display={display}
           description={description}
+          hideShortcutBadge={shouldShortcutBadgeHidden}
         />
       )}
     </Link>

src/components/Shortcuts/utils.js

@@ -12,10 +12,8 @@ export const formatShortcuts = (folders, shortcuts) => {
   return folders
     .map(folder => ({
       id: folder._id,
-      name: folder.attributes.name,
-      items: shortcuts.filter(
-        shortcut => shortcut.attributes.dir_id === folder._id
-      )
+      name: folder.name,
+      items: shortcuts.filter(shortcut => shortcut.dir_id === folder._id)
     }))
     .filter(folder => folder.items.length > 0)
 }