From 53985f77f340063bb2a5658a6eb7276a573cb345 Mon Sep 17 00:00:00 2001 From: Anthony LC Date: Thu, 12 Feb 2026 17:19:54 +0100 Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=9A(frontend)=20move=20modal=20Share?= =?UTF-8?q?=20directly=20to=20concern=20component?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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. --- .../docs-grid/components/DocsGridActions.tsx | 14 +-- .../docs-grid/components/DocsGridItem.tsx | 19 +--- .../components/DocsGridItemSharedButton.tsx | 88 ++++++++++--------- .../components/LeftPanelFavoriteItem.tsx | 8 +- 4 files changed, 57 insertions(+), 72 deletions(-) diff --git a/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridActions.tsx b/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridActions.tsx index 2758cd3b..ef90c61d 100644 --- a/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridActions.tsx +++ b/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 && ( )} + {shareModal.isOpen && ( + + )} ); }; diff --git a/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridItem.tsx b/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridItem.tsx index b0105836..f6790679 100644 --- a/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridItem.tsx +++ b/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) => { {isDesktop && ( - + )} {isInTrashbin ? ( ) : ( - + )} - {shareModal.isOpen && ( - - )} ); }; diff --git a/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridItemSharedButton.tsx b/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridItemSharedButton.tsx index 0fd0c75a..9270d205 100644 --- a/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridItemSharedButton.tsx +++ b/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  ; } return ( - - {t('Shared with {{count}} users', { count: sharedCount })} - - } - placement="top" - className="--docs--doc-tooltip-grid-item-shared-button" - > - - + + + {shareModal.isOpen && ( + + )} + ); }; diff --git a/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelFavoriteItem.tsx b/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelFavoriteItem.tsx index 21f0c974..b2d3cc7d 100644 --- a/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelFavoriteItem.tsx +++ b/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelFavoriteItem.tsx @@ -1,4 +1,3 @@ -import { useModal } from '@gouvfr-lasuite/cunningham-react'; import { t } from 'i18next'; import { DateTime } from 'luxon'; import { css } from 'styled-components'; @@ -6,7 +5,6 @@ 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) => { - + - {shareModal.isOpen && ( - - )} ); };