✨(frontend) Move doc modal

We can now move a doc to another doc from a search
modal. It will make it easier to move a doc
without having to scroll through the doc grid to
find the destination doc.
We kept most of the logic implemented in the
doc grid dnd.

Author: AntoLC

src/frontend/apps/impress/src/components/quick-search/QuickSearch.tsx

@@ -36,7 +36,6 @@ export const QuickSearch = ({
   onFilter,
   inputContent,
   inputValue,
-  loading,
   showInput = true,
   label,
   placeholder,
@@ -75,7 +74,6 @@ export const QuickSearch = ({
         >
           {showInput && (
             <QuickSearchInput
-              loading={loading}
               withSeparator={hasChildrens(children)}
               inputValue={inputValue}
               onFilter={onFilter}

src/frontend/apps/impress/src/components/quick-search/QuickSearchInput.tsx

@@ -1,6 +1,5 @@
-import { Loader } from '@gouvfr-lasuite/cunningham-react';
 import { Command } from 'cmdk';
-import { ReactNode } from 'react';
+import { PropsWithChildren } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { HorizontalSeparator } from '@/components';
@@ -9,19 +8,16 @@ import { useCunninghamTheme } from '@/cunningham';
 import { Box } from '../Box';
 import { Icon } from '../Icon';
 
-type Props = {
-  loading?: boolean;
+type QuickSearchInputProps = {
   inputValue?: string;
   onFilter?: (str: string) => void;
   placeholder?: string;
-  children?: ReactNode;
   withSeparator?: boolean;
   listId?: string;
   onUserInteract?: () => void;
   isExpanded?: boolean;
 };
 export const QuickSearchInput = ({
-  loading,
   inputValue,
   onFilter,
   placeholder,
@@ -30,7 +26,7 @@ export const QuickSearchInput = ({
   listId,
   onUserInteract,
   isExpanded,
-}: Props) => {
+}: PropsWithChildren<QuickSearchInputProps>) => {
   const { t } = useTranslation();
   const { spacingsTokens } = useCunninghamTheme();
 
@@ -52,14 +48,7 @@ export const QuickSearchInput = ({
         $gap={spacingsTokens['2xs']}
         $padding={{ horizontal: 'base', vertical: 'sm' }}
       >
-        {!loading && (
-          <Icon iconName="search" $variation="secondary" aria-hidden="true" />
-        )}
-        {loading && (
-          <div>
-            <Loader size="small" />
-          </div>
-        )}
+        <Icon iconName="search" $variation="secondary" aria-hidden="true" />
         <Command.Input
           autoFocus={true}
           aria-label={t('Quick search input')}

src/frontend/apps/impress/src/components/quick-search/QuickSearchStyle.tsx

@@ -22,7 +22,7 @@ export const QuickSearchStyle = createGlobalStyle`
       padding: var(--c--globals--spacings--xs);
       background: white;
       outline: none;
-      color: var(--c--globals--colors--gray-1000);
+      color: var(--c--contextuals--content--semantic--neutral--primary);
       border-radius: var(--c--globals--spacings--0);
 
       &::placeholder {

src/frontend/apps/impress/src/features/docs/doc-management/api/index.ts

@@ -7,6 +7,7 @@ export * from './useDocOptions';
 export * from './useDocs';
 export * from './useDocsFavorite';
 export * from './useDuplicateDoc';
+export * from './useMoveDoc';
 export * from './useRestoreDoc';
 export * from './useSubDocs';
 export * from './useUpdateDoc';

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

@@ -0,0 +1,82 @@
+import { TreeViewMoveModeEnum } from '@gouvfr-lasuite/ui-kit';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+
+import { APIError, errorCauses, fetchAPI } from '@/api';
+import {
+  getDocAccesses,
+  getDocInvitations,
+  useDeleteDocAccess,
+  useDeleteDocInvitation,
+} from '@/docs/doc-share';
+
+import { KEY_LIST_DOC } from './useDocs';
+
+export type MoveDocParam = {
+  sourceDocumentId: string;
+  targetDocumentId: string;
+  position: TreeViewMoveModeEnum;
+};
+
+export const moveDoc = async ({
+  sourceDocumentId,
+  targetDocumentId,
+  position,
+}: MoveDocParam): Promise<void> => {
+  const response = await fetchAPI(`documents/${sourceDocumentId}/move/`, {
+    method: 'POST',
+    body: JSON.stringify({
+      target_document_id: targetDocumentId,
+      position,
+    }),
+  });
+
+  if (!response.ok) {
+    throw new APIError('Failed to move the doc', await errorCauses(response));
+  }
+
+  return response.json() as Promise<void>;
+};
+
+export function useMoveDoc(deleteAccessOnMove = false) {
+  const queryClient = useQueryClient();
+  const { mutate: handleDeleteInvitation } = useDeleteDocInvitation();
+  const { mutate: handleDeleteAccess } = useDeleteDocAccess();
+
+  return useMutation<void, APIError, MoveDocParam>({
+    mutationFn: moveDoc,
+    async onSuccess(_data, variables, _onMutateResult, _context) {
+      if (!deleteAccessOnMove) {
+        return;
+      }
+
+      void queryClient.invalidateQueries({
+        queryKey: [KEY_LIST_DOC],
+      });
+      const accesses = await getDocAccesses({
+        docId: variables.sourceDocumentId,
+      });
+
+      const invitationsResponse = await getDocInvitations({
+        docId: variables.sourceDocumentId,
+        page: 1,
+      });
+
+      const invitations = invitationsResponse.results;
+
+      await Promise.all([
+        ...invitations.map((invitation) =>
+          handleDeleteInvitation({
+            docId: variables.sourceDocumentId,
+            invitationId: invitation.id,
+          }),
+        ),
+        ...accesses.map((access) =>
+          handleDeleteAccess({
+            docId: variables.sourceDocumentId,
+            accessId: access.id,
+          }),
+        ),
+      ]);
+    },
+  });
+}

src/frontend/apps/impress/src/features/docs/doc-search/components/DocSearchContent.tsx

@@ -14,13 +14,15 @@ type DocSearchContentProps = {
   filters: DocSearchFiltersValues;
   onSelect: (doc: Doc) => void;
   onLoadingChange?: (loading: boolean) => void;
+  renderSearchElement?: (doc: Doc) => React.ReactNode;
 };
 
 export const DocSearchContent = ({
   search,
   filters,
   onSelect,
   onLoadingChange,
+  renderSearchElement,
 }: DocSearchContentProps) => {
   const {
     data,
@@ -62,7 +64,9 @@ export const DocSearchContent = ({
     <QuickSearchGroup
       onSelect={onSelect}
       group={docsData}
-      renderElement={(doc) => <DocSearchItem doc={doc} />}
+      renderElement={
+        renderSearchElement ?? ((doc) => <DocSearchItem doc={doc} />)
+      }
     />
   );
 };

src/frontend/apps/impress/src/features/docs/doc-search/components/index.ts

@@ -1,3 +1,4 @@
+export * from './DocSearchContent';
 export * from './DocSearchModal';
 export * from './DocSearchFilters';
 export * from './DocSearchSubPageContent';

src/frontend/apps/impress/src/features/docs/doc-tree/api/index.ts

@@ -1,3 +1,2 @@
 export * from './useDocChildren';
 export * from './useDocTree';
-export * from './useMove';

src/frontend/apps/impress/src/features/docs/doc-tree/api/useMove.tsx

@@ -12,10 +12,14 @@ import { css } from 'styled-components';
 
 import { Box, Overlayer, StyledLink } from '@/components';
 import { useCunninghamTheme } from '@/cunningham';
-import { Doc, SimpleDocItem } from '@/docs/doc-management';
+import {
+  Doc,
+  SimpleDocItem,
+  useMoveDoc,
+  useTrans,
+} from '@/docs/doc-management';
 
 import { KEY_DOC_TREE, useDocTree } from '../api/useDocTree';
-import { useMoveDoc } from '../api/useMove';
 import { findIndexInTree } from '../utils';
 
 import { DocSubPageItem } from './DocSubPageItem';
@@ -28,6 +32,7 @@ type DocTreeProps = {
 export const DocTree = ({ currentDoc }: DocTreeProps) => {
   const { spacingsTokens } = useCunninghamTheme();
   const { isDesktop } = useResponsive();
+  const { untitledDocument } = useTrans();
   const [treeRoot, setTreeRoot] = useState<HTMLElement | null>(null);
   const treeContext = useTreeContext<Doc | null>();
   const router = useRouter();
@@ -265,7 +270,7 @@ export const DocTree = ({ currentDoc }: DocTreeProps) => {
           ref={rootItemRef}
           data-testid="doc-tree-root-item"
           role="treeitem"
-          aria-label={`${t('Root document {{title}}', { title: treeContext.root?.title || t('Untitled document') })}`}
+          aria-label={`${t('Root document {{title}}', { title: treeContext.root?.title || untitledDocument })}`}
           aria-selected={rootIsSelected}
           tabIndex={0}
           onFocus={handleRootFocus}
@@ -325,7 +330,7 @@ export const DocTree = ({ currentDoc }: DocTreeProps) => {
               );
               router.push(`/docs/${treeContext?.root?.id}`);
             }}
-            aria-label={`${t('Open root document')}: ${treeContext.root?.title || t('Untitled document')}`}
+            aria-label={`${t('Open root document')}: ${treeContext.root?.title || untitledDocument}`}
             tabIndex={-1} // avoid double tabstop
           >
             <Box $direction="row" $align="center" $width="100%">