🚚(frontend) add doc move to doc options

CHANGELOG.md

@@ -18,6 +18,7 @@ and this project adheres to
 - ✨(frontend) reset side panel state between documents #2583
 - ♿️(frontend) announce search loading state for screen readers #2526
 - ♻️(frontend) change favorite to star #2539
+- 🚚(frontend) add doc move to doc options #2555
 
 ### Fixed
 

src/frontend/apps/impress/src/features/docs/doc-management/api/useMoveDoc.tsx

@@ -2,7 +2,9 @@ import { TreeViewMoveModeEnum } from '@gouvfr-lasuite/ui-components';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 
 import { APIError, errorCauses, fetchAPI } from '@/api';
+import { KEY_DOC_TREE } from '@/docs/doc-tree/api/useDocTree';
 
+import { KEY_DOC } from './useDoc';
 import { KEY_LIST_DOC } from './useDocs';
 
 export type MoveDocParam = {
@@ -37,9 +39,9 @@ export function useMoveDoc() {
   return useMutation<void, APIError, MoveDocParam>({
     mutationFn: moveDoc,
     onSuccess() {
-      void queryClient.invalidateQueries({
-        queryKey: [KEY_LIST_DOC],
-      });
+      void queryClient.invalidateQueries({ queryKey: [KEY_LIST_DOC] });
+      void queryClient.invalidateQueries({ queryKey: [KEY_DOC] });
+      void queryClient.invalidateQueries({ queryKey: [KEY_DOC_TREE] });
     },
   });
 }

src/frontend/apps/impress/src/features/docs/docs-grid/components/DocMoveModal.tsx → src/frontend/apps/impress/src/features/docs/doc-management/components/DocMoveModal.tsx

@@ -17,10 +17,12 @@ import { Box, ButtonCloseModal, Text } from '@/components';
 import { QuickSearch } from '@/components/quick-search';
 import { Doc, useMoveDoc, useTrans } from '@/docs/doc-management';
 import { DocSearchContent } from '@/docs/doc-search';
+import {
+  DocsGridItemDate,
+  DocsGridItemTitle,
+} from '@/docs/docs-grid/components/DocsGridItem';
 import { useResponsiveStore } from '@/stores';
 
-import { DocsGridItemDate, DocsGridItemTitle } from './DocsGridItem';
-
 const AlertModalRequestAccess = dynamic(
   () =>
     import('@/docs/doc-share/components/AlertModalRequestAccess').then(
@@ -83,12 +85,14 @@ type DocMoveModalGlobalProps = {
   doc: Doc;
   isOpen: boolean;
   onClose: () => void;
+  onAfterMove?: () => void;
 };
 
 export const DocMoveModal = ({
   doc,
   isOpen,
   onClose,
+  onAfterMove,
 }: DocMoveModalGlobalProps) => {
   const { t } = useTranslation();
   const [loading, setLoading] = useState(false);
@@ -120,10 +124,8 @@ export const DocMoveModal = ({
       position: TreeViewMoveModeEnum.FIRST_CHILD,
     })
       .then(() => {
-        toast(
-          t(`The document has been moved successfully.`),
-          VariantType.SUCCESS,
-        );
+        onClose();
+        onAfterMove?.();
       })
       .catch(() => {
         toast(

src/frontend/apps/impress/src/features/docs/doc-management/components/DocToolBox.tsx

@@ -16,8 +16,11 @@ import { useEditorStore } from '@/docs/doc-editor/stores/useEditorStore';
 import { getWordCount } from '@/docs/doc-editor/utils';
 import { printDocumentWithStyles } from '@/docs/doc-export/utils_print';
 import { usePresenterStore } from '@/docs/doc-presenter/stores';
+import { useDetachDoc } from '@/docs/doc-tree/api/useDetach';
 import { useAuth } from '@/features/auth';
 import ContentCopyIcon from '@/icons/copy.svg';
+import DocMoveInIcon from '@/icons/doc-move-in.svg';
+import DocMoveOutIcon from '@/icons/doc-move-out.svg';
 import DownloadSVG from '@/icons/download.svg';
 import HistorySVG from '@/icons/history.svg';
 import LeaveSVG from '@/icons/leave.svg';
@@ -39,7 +42,15 @@ import {
   useDuplicateDoc,
 } from '../api';
 import { useCopyDocLink } from '../hooks';
-import { Doc } from '../types';
+import { Doc, Role } from '../types';
+
+const DocMoveModal = dynamic(
+  () =>
+    import('@/docs/doc-management/components/DocMoveModal').then((mod) => ({
+      default: mod.DocMoveModal,
+    })),
+  { ssr: false },
+);
 
 const ModalRemoveDoc = dynamic(
   () =>
@@ -89,7 +100,7 @@ interface DocToolBoxProps {
 
 export const DocToolBox = ({ doc }: DocToolBoxProps) => {
   const { t } = useTranslation();
-  const treeContext = useTreeContext<Doc>();
+  const treeContext = useTreeContext<Doc | null>();
   const router = useRouter();
   const isTopParent = doc.id === treeContext?.root?.id; // it can be a child but not for the current user
   const { authenticated } = useAuth();
@@ -99,6 +110,7 @@ export const DocToolBox = ({ doc }: DocToolBoxProps) => {
   const [isModalShareOpen, setIsModalShareOpen] = useState(false);
   const [isModalHistoryOpen, setIsModalHistoryOpen] = useState(false);
   const [isModalLeaveOpen, setIsModalLeaveOpen] = useState(false);
+  const [isModalMoveOpen, setIsModalMoveOpen] = useState(false);
 
   const { editor } = useEditorStore();
   const wordCountLabel = useMemo(() => {
@@ -117,6 +129,8 @@ export const DocToolBox = ({ doc }: DocToolBoxProps) => {
     }
   }, [wordCountLabel]);
 
+  const { mutate: detachDoc } = useDetachDoc();
+
   const { restoreFocus, addLastFocus } = useFocusStore();
   const { isMobile } = useResponsiveStore();
   const copyDocLink = useCopyDocLink(doc.id);
@@ -217,6 +231,40 @@ export const DocToolBox = ({ doc }: DocToolBoxProps) => {
       },
       isHidden: !doc.abilities.duplicate,
     },
+    {
+      label: t('Move to my docs'),
+      isHidden: isTopParent || doc.user_role !== Role.OWNER,
+      icon: <DocMoveOutIcon width={18} height={18} aria-hidden="true" />,
+      callback: () => {
+        if (!treeContext?.root) {
+          return;
+        }
+
+        detachDoc(
+          { documentId: doc.id, rootId: treeContext.root.id },
+          {
+            onSuccess: () => {
+              if (treeContext.root) {
+                treeContext.treeData.setSelectedNode(treeContext.root);
+                void router.push(`/docs/${treeContext.root.id}`).then(() => {
+                  setTimeout(() => {
+                    treeContext?.treeData.deleteNode(doc.id);
+                  }, 100);
+                });
+              }
+            },
+          },
+        );
+      },
+    },
+    {
+      label: t('Move into a doc'),
+      icon: <DocMoveInIcon width={18} height={18} aria-hidden="true" />,
+      callback: () => {
+        setIsModalMoveOpen(true);
+      },
+      isHidden: !doc.abilities.move,
+    },
     { type: 'separator' },
     {
       label: t('History', {
@@ -347,6 +395,17 @@ export const DocToolBox = ({ doc }: DocToolBoxProps) => {
           doc={doc}
         />
       )}
+      {isModalMoveOpen && (
+        <DocMoveModal
+          doc={doc}
+          onClose={() => {
+            setIsModalMoveOpen(false);
+            restoreFocus();
+          }}
+          isOpen={isModalMoveOpen}
+          onAfterMove={() => treeContext?.setRoot(null)}
+        />
+      )}
     </>
   );
 };

src/frontend/apps/impress/src/features/docs/doc-tree/components/DocSubPageItem.tsx

@@ -11,7 +11,7 @@ import { useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { css } from 'styled-components';
 
-import { Box, Icon, StyledLink, Text } from '@/components';
+import { Box, StyledLink, Text } from '@/components';
 import {
   Doc,
   DocIcon,
@@ -294,14 +294,6 @@ const DocSubPageItemContent = (props: TreeViewNodeProps<Doc>) => {
           <Text $css={ItemTextCss} $size="sm">
             {displayTitle}
           </Text>
-          {doc.nb_accesses_direct >= 1 && (
-            <Icon
-              variant="filled"
-              iconName="group"
-              $size="md"
-              aria-label={t('Shared with others')}
-            />
-          )}
         </Box>
         <Box
           $direction="row"

src/frontend/apps/impress/src/features/docs/doc-tree/components/DocTreeItemActions.tsx

@@ -25,9 +25,9 @@ import {
   useDocTitleUpdate,
 } from '@/docs/doc-management';
 import { useDuplicateDoc } from '@/docs/doc-management/api';
+import DocMoveOutIcon from '@/icons/doc-move-out.svg';
 
 import { useDetachDoc } from '../api/useDetach';
-import MoveDocIcon from '../assets/doc-extract-bold.svg';
 
 type DocTreeItemActionsProps = {
   doc: Doc;
@@ -122,13 +122,12 @@ export const DocTreeItemActions = ({
             label: t('Move to my docs'),
             isDisabled: doc.user_role !== Role.OWNER,
             icon: (
-              <Box
-                $css={css`
-                  transform: scale(0.8);
-                `}
-              >
-                <MoveDocIcon />
-              </Box>
+              <DocMoveOutIcon
+                width={24}
+                height={24}
+                aria-hidden="true"
+                color="var(--c--contextuals--content--semantic--neutral--primary)"
+              />
             ),
             callback: handleDetachDoc,
           },

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

@@ -24,9 +24,11 @@ import { DocsGridItem } from './DocsGridItem';
 
 const ModalConfirmationMoveDoc = dynamic(
   () =>
-    import('./ModalConfimationMoveDoc').then((mod) => ({
-      default: mod.ModalConfirmationMoveDoc,
-    })),
+    import('@/docs/doc-management/components/ModalConfimationMoveDoc').then(
+      (mod) => ({
+        default: mod.ModalConfirmationMoveDoc,
+      }),
+    ),
   { ssr: false },
 );
 

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

@@ -11,7 +11,7 @@ import { useTranslation } from 'react-i18next';
 
 import { Icon } from '@/components/Icon';
 import {
-  Doc,
+  type Doc,
   KEY_LIST_DOC,
   KEY_LIST_FAVORITE_DOC,
   useCreateFavoriteDoc,
@@ -31,9 +31,15 @@ import StarIcon from '@/icons/star.svg';
 import { focusMainContentStart } from '@/layouts/utils';
 import { useFocusStore } from '@/stores';
 
-import { KEY_LIST_DOC_TRASHBIN } from '../api/useDocsTrashbin';
+import { KEY_LIST_DOC_TRASHBIN } from '../api';
 
-import { DocMoveModal } from './DocMoveModal';
+const DocMoveModal = dynamic(
+  () =>
+    import('@/docs/doc-management/components/DocMoveModal').then((mod) => ({
+      default: mod.DocMoveModal,
+    })),
+  { ssr: false },
+);
 
 const DocShareModal = dynamic(
   () =>