🚚(frontend) move modal Share directly to concern component

To keep consistency with the other modals, we move
the share modal directly to the
DocsGridActions component. This way, we avoid
having to pass down the openShareModal function
from parent components and keep the logic related
to sharing a doc encapsulated within the
concern component.

Author: AntoLC

src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridActions.tsx

@@ -12,19 +12,18 @@ import {
   useDeleteFavoriteDoc,
   useDuplicateDoc,
 } from '@/docs/doc-management';
+import { DocShareModal } from '@/docs/doc-share';
 
 interface DocsGridActionsProps {
   doc: Doc;
-  openShareModal?: () => void;
 }
 
-export const DocsGridActions = ({
-  doc,
-  openShareModal,
-}: DocsGridActionsProps) => {
+export const DocsGridActions = ({ doc }: DocsGridActionsProps) => {
   const { t } = useTranslation();
 
   const deleteModal = useModal();
+  const shareModal = useModal();
+
   const { mutate: duplicateDoc } = useDuplicateDoc();
 
   const removeFavoriteDoc = useDeleteFavoriteDoc({
@@ -52,7 +51,7 @@ export const DocsGridActions = ({
       label: t('Share'),
       icon: 'group',
       callback: () => {
-        openShareModal?.();
+        shareModal.open();
       },
 
       testId: `docs-grid-actions-share-${doc.id}`,
@@ -114,6 +113,9 @@ export const DocsGridActions = ({
       {deleteModal.isOpen && (
         <ModalRemoveDoc onClose={deleteModal.onClose} doc={doc} />
       )}
+      {shareModal.isOpen && (
+        <DocShareModal doc={doc} onClose={shareModal.close} />
+      )}
     </>
   );
 };

src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridItem.tsx

@@ -1,4 +1,4 @@
-import { Tooltip, useModal } from '@gouvfr-lasuite/cunningham-react';
+import { Tooltip } from '@gouvfr-lasuite/cunningham-react';
 import { useSearchParams } from 'next/navigation';
 import { KeyboardEvent } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -8,7 +8,6 @@ import { Box, Icon, StyledLink, Text } from '@/components';
 import { useConfig } from '@/core';
 import { useCunninghamTheme } from '@/cunningham';
 import { Doc, LinkReach, SimpleDocItem } from '@/docs/doc-management';
-import { DocShareModal } from '@/docs/doc-share';
 import { useDate } from '@/hooks';
 import { useResponsiveStore } from '@/stores';
 
@@ -32,15 +31,10 @@ export const DocsGridItem = ({ doc, dragMode = false }: DocsGridItemProps) => {
   const { isDesktop } = useResponsiveStore();
   const { flexLeft, flexRight } = useResponsiveDocGrid();
   const { spacingsTokens } = useCunninghamTheme();
-  const shareModal = useModal();
   const isPublic = doc.link_reach === LinkReach.PUBLIC;
   const isAuthenticated = doc.link_reach === LinkReach.AUTHENTICATED;
   const isShared = isPublic || isAuthenticated;
 
-  const handleShareClick = () => {
-    shareModal.open();
-  };
-
   const handleKeyDown = (e: KeyboardEvent) => {
     if (e.key === 'Enter' || e.key === ' ') {
       e.preventDefault();
@@ -173,23 +167,16 @@ export const DocsGridItem = ({ doc, dragMode = false }: DocsGridItemProps) => {
 
           <Box $direction="row" $align="center" $gap={spacingsTokens.lg}>
             {isDesktop && (
-              <DocsGridItemSharedButton
-                doc={doc}
-                handleClick={handleShareClick}
-                disabled={isInTrashbin}
-              />
+              <DocsGridItemSharedButton doc={doc} disabled={isInTrashbin} />
             )}
             {isInTrashbin ? (
               <DocsGridTrashbinActions doc={doc} />
             ) : (
-              <DocsGridActions doc={doc} openShareModal={handleShareClick} />
+              <DocsGridActions doc={doc} />
             )}
           </Box>
         </Box>
       </Box>
-      {shareModal.isOpen && (
-        <DocShareModal doc={doc} onClose={shareModal.close} />
-      )}
     </>
   );
 };

src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridItemSharedButton.tsx

@@ -1,65 +1,67 @@
-import { Button, Tooltip } from '@gouvfr-lasuite/cunningham-react';
+import { Button, Tooltip, useModal } from '@gouvfr-lasuite/cunningham-react';
 import { useTranslation } from 'react-i18next';
 
 import { Box, Icon, Text } from '@/components';
 import { Doc } from '@/docs/doc-management';
+import { DocShareModal } from '@/docs/doc-share';
 
 type Props = {
   doc: Doc;
-  handleClick: () => void;
   disabled: boolean;
 };
-export const DocsGridItemSharedButton = ({
-  doc,
-  handleClick,
-  disabled,
-}: Props) => {
+export const DocsGridItemSharedButton = ({ doc, disabled }: Props) => {
   const { t } = useTranslation();
   const sharedCount = doc.nb_accesses_direct;
   const isShared = sharedCount - 1 > 0;
+  const shareModal = useModal();
 
   if (!isShared) {
     return <Box $minWidth="50px">&nbsp;</Box>;
   }
 
   return (
-    <Tooltip
-      content={
-        <Text $textAlign="center">
-          {t('Shared with {{count}} users', { count: sharedCount })}
-        </Text>
-      }
-      placement="top"
-      className="--docs--doc-tooltip-grid-item-shared-button"
-    >
-      <Button
-        className="--docs--doc-grid-item-shared-button"
-        aria-label={t('Open the sharing settings for the document')}
-        data-testid={`docs-grid-item-shared-button-${doc.id}`}
-        style={{
-          padding: `0 var(--c--globals--spacings--xxxs) 0 var(--c--globals--spacings--xxxs)`,
-        }}
-        onClick={(event) => {
-          event.preventDefault();
-          event.stopPropagation();
-          handleClick();
-        }}
-        color="brand"
-        variant="secondary"
-        size="nano"
-        icon={
-          <Icon
-            $theme="brand"
-            $variation="secondary"
-            iconName="group"
-            disabled={disabled}
-            variant="filled"
-          />
+    <>
+      <Tooltip
+        content={
+          <Text $textAlign="center">
+            {t('Shared with {{count}} users', { count: sharedCount })}
+          </Text>
         }
-        disabled={disabled}
+        placement="top"
+        className="--docs--doc-tooltip-grid-item-shared-button"
       >
-        {sharedCount}
-      </Button>
-    </Tooltip>
+        <Button
+          className="--docs--doc-grid-item-shared-button"
+          aria-label={t('Open the sharing settings for the document')}
+          data-testid={`docs-grid-item-shared-button-${doc.id}`}
+          style={{
+            padding: `0 var(--c--globals--spacings--xxxs) 0 var(--c--globals--spacings--xxxs)`,
+          }}
+          onClick={(event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            shareModal.open();
+          }}
+          color="brand"
+          variant="secondary"
+          size="nano"
+          icon={
+            <Icon
+              $theme="brand"
+              $variation="secondary"
+              iconName="group"
+              disabled={disabled}
+              variant="filled"
+            />
+          }
+          disabled={disabled}
+        >
+          {sharedCount}
+        </Button>
+      </Tooltip>
+      {shareModal.isOpen && (
+        <DocShareModal doc={doc} onClose={shareModal.close} />
+      )}
+    </>
   );
 };

src/frontend/apps/impress/src/features/left-panel/components/LeftPanelFavoriteItem.tsx

@@ -1,12 +1,10 @@
-import { useModal } from '@gouvfr-lasuite/cunningham-react';
 import { t } from 'i18next';
 import { DateTime } from 'luxon';
 import { css } from 'styled-components';
 
 import { Box, StyledLink } from '@/components';
 import { useCunninghamTheme } from '@/cunningham';
 import { Doc, SimpleDocItem } from '@/docs/doc-management';
-import { DocShareModal } from '@/docs/doc-share';
 import { DocsGridActions } from '@/docs/docs-grid';
 import { useResponsiveStore } from '@/stores';
 
@@ -15,7 +13,6 @@ type LeftPanelFavoriteItemProps = {
 };
 
 export const LeftPanelFavoriteItem = ({ doc }: LeftPanelFavoriteItemProps) => {
-  const shareModal = useModal();
   const { colorsTokens, spacingsTokens } = useCunninghamTheme();
   const { isDesktop } = useResponsiveStore();
 
@@ -61,11 +58,8 @@ export const LeftPanelFavoriteItem = ({ doc }: LeftPanelFavoriteItemProps) => {
         <SimpleDocItem showAccesses doc={doc} />
       </StyledLink>
       <Box className="pinned-actions" $align="center">
-        <DocsGridActions doc={doc} openShareModal={shareModal.open} />
+        <DocsGridActions doc={doc} />
       </Box>
-      {shareModal.isOpen && (
-        <DocShareModal doc={doc} onClose={shareModal.close} />
-      )}
     </Box>
   );
 };