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 2758cd3b1..ef90c61d5 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 b01058365..f67906797 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 0fd0c75ad..9270d2056 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 21f0c974d..b2d3cc7d7 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 && ( - - )} ); };