✨(frontend) Can mask a document from the list view

We can be member of some documents, but sometimes we
want to mask them from the list view because we
don't want to interact with them anymore.
This commit adds the ability to mask a
document from the list view.

Author: AntoLC

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

@@ -4,7 +4,8 @@ export * from './useDeleteFavoriteDoc';
 export * from './useDoc';
 export * from './useDocOptions';
 export * from './useDocs';
-export * from './useSubDocs';
 export * from './useDuplicateDoc';
+export * from './useMaskDoc';
+export * from './useSubDocs';
 export * from './useUpdateDoc';
 export * from './useUpdateDocLink';

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

@@ -16,6 +16,7 @@ export type DocsParams = {
   is_creator_me?: boolean;
   title?: string;
   is_favorite?: boolean;
+  is_masked?: boolean;
 };
 
 export const constructParams = (params: DocsParams): URLSearchParams => {
@@ -36,6 +37,9 @@ export const constructParams = (params: DocsParams): URLSearchParams => {
   if (params.is_favorite !== undefined) {
     searchParams.set('is_favorite', params.is_favorite.toString());
   }
+  if (params.is_masked !== undefined) {
+    searchParams.set('is_masked', params.is_masked.toString());
+  }
 
   return searchParams;
 };

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

@@ -0,0 +1,39 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+
+import { APIError, errorCauses, fetchAPI } from '@/api';
+import { Doc } from '@/docs/doc-management';
+
+export type MaskDocParams = Pick<Doc, 'id'>;
+
+export const maskDoc = async ({ id }: MaskDocParams) => {
+  const response = await fetchAPI(`documents/${id}/mask/`, {
+    method: 'POST',
+  });
+
+  if (!response.ok) {
+    throw new APIError(
+      'Failed to make the doc as masked',
+      await errorCauses(response),
+    );
+  }
+};
+
+interface MaskDocProps {
+  onSuccess?: () => void;
+  listInvalideQueries?: string[];
+}
+
+export function useMaskDoc({ onSuccess, listInvalideQueries }: MaskDocProps) {
+  const queryClient = useQueryClient();
+  return useMutation<void, APIError, MaskDocParams>({
+    mutationFn: maskDoc,
+    onSuccess: () => {
+      listInvalideQueries?.forEach((queryKey) => {
+        void queryClient.invalidateQueries({
+          queryKey: [queryKey],
+        });
+      });
+      onSuccess?.();
+    },
+  });
+}

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

@@ -84,6 +84,7 @@ export interface Doc {
     favorite: boolean;
     invite_owner: boolean;
     link_configuration: boolean;
+    mask: boolean;
     media_auth: boolean;
     move: boolean;
     partial_update: boolean;

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

@@ -32,10 +32,13 @@ export const DocsGrid = ({
     hasNextPage,
   } = useInfiniteDocs({
     page: 1,
-    ...(target &&
-      target !== DocDefaultFilter.ALL_DOCS && {
-        is_creator_me: target === DocDefaultFilter.MY_DOCS,
-      }),
+    is_masked: target === DocDefaultFilter.ALL_DOCS ? false : undefined,
+    is_creator_me:
+      target === DocDefaultFilter.MY_DOCS
+        ? true
+        : target === DocDefaultFilter.SHARED_WITH_ME
+          ? false
+          : undefined,
   });
 
   const docs = data?.pages.flatMap((page) => page.results) ?? [];

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

@@ -9,6 +9,7 @@ import {
   useCreateFavoriteDoc,
   useDeleteFavoriteDoc,
   useDuplicateDoc,
+  useMaskDoc,
 } from '@/docs/doc-management';
 
 interface DocsGridActionsProps {
@@ -31,6 +32,9 @@ export const DocsGridActions = ({
   const makeFavoriteDoc = useCreateFavoriteDoc({
     listInvalideQueries: [KEY_LIST_DOC],
   });
+  const maskDoc = useMaskDoc({
+    listInvalideQueries: [KEY_LIST_DOC],
+  });
 
   const options: DropdownMenuOption[] = [
     {
@@ -44,6 +48,7 @@ export const DocsGridActions = ({
         }
       },
       testId: `docs-grid-actions-${doc.is_favorite ? 'unpin' : 'pin'}-${doc.id}`,
+      showSeparator: true,
     },
     {
       label: t('Share'),
@@ -65,16 +70,32 @@ export const DocsGridActions = ({
           canSave: false,
         });
       },
-    },
-    {
-      label: t('Remove'),
-      icon: 'delete',
-      callback: () => deleteModal.open(),
-      disabled: !doc.abilities.destroy,
-      testId: `docs-grid-actions-remove-${doc.id}`,
+      showSeparator: true,
     },
   ];
 
+  const leaveDocOption: DropdownMenuOption = doc.abilities.destroy
+    ? {
+        label: t('Remove'),
+        icon: 'delete',
+        callback: () => deleteModal.open(),
+        disabled: !doc.abilities.destroy,
+        testId: `docs-grid-actions-remove-${doc.id}`,
+      }
+    : {
+        label: t('Leave doc'),
+        icon: 'logout',
+        callback: () => {
+          maskDoc.mutate({
+            id: doc.id,
+          });
+        },
+        disabled: !doc.abilities.mask,
+        testId: `docs-grid-actions-leave-${doc.id}`,
+      };
+
+  options.push(leaveDocOption);
+
   return (
     <>
       <DropdownMenu options={options}>