♻️(frontend) adapt doc visibility to new api

We updated the way we handle the visibility of a doc
in the backend. Now we use a new api to update
the visibility (documents/{id}/link-configuration/)
of a doc. We adapted the frontend to use this new api.
We changed the types to reflect the new api and
to keep the same logic.

Author: AntoLC

src/frontend/apps/e2e/__tests__/app-impress/common.ts

@@ -164,6 +164,7 @@ export const mockedDocument = async (page: Page, json: object) => {
           accesses: [],
           abilities: {
             destroy: false, // Means not owner
+            link_configuration: false,
             versions_destroy: false,
             versions_list: true,
             versions_retrieve: true,
@@ -172,7 +173,7 @@ export const mockedDocument = async (page: Page, json: object) => {
             partial_update: false, // Means not editor
             retrieve: true,
           },
-          is_public: false,
+          link_reach: 'restricted',
           created_at: '2021-09-01T09:00:00Z',
           ...json,
         },

src/frontend/apps/e2e/__tests__/app-impress/doc-editor.spec.ts

@@ -136,6 +136,7 @@ test.describe('Doc Editor', () => {
     await mockedDocument(page, {
       abilities: {
         destroy: false, // Means not owner
+        link_configuration: false,
         versions_destroy: false,
         versions_list: true,
         versions_retrieve: true,

src/frontend/apps/e2e/__tests__/app-impress/doc-header.spec.ts

@@ -34,6 +34,7 @@ test.describe('Doc Header', () => {
       ],
       abilities: {
         destroy: true, // Means owner
+        link_configuration: true,
         versions_destroy: true,
         versions_list: true,
         versions_retrieve: true,
@@ -42,7 +43,7 @@ test.describe('Doc Header', () => {
         partial_update: true,
         retrieve: true,
       },
-      is_public: true,
+      link_reach: 'public',
       created_at: '2021-09-01T09:00:00Z',
     });
 
@@ -153,6 +154,7 @@ test.describe('Doc Header', () => {
     await mockedDocument(page, {
       abilities: {
         destroy: false, // Means not owner
+        link_configuration: true,
         versions_destroy: true,
         versions_list: true,
         versions_retrieve: true,
@@ -184,6 +186,7 @@ test.describe('Doc Header', () => {
     await mockedDocument(page, {
       abilities: {
         destroy: false, // Means not owner
+        link_configuration: false,
         versions_destroy: true,
         versions_list: true,
         versions_retrieve: true,
@@ -215,6 +218,7 @@ test.describe('Doc Header', () => {
     await mockedDocument(page, {
       abilities: {
         destroy: false, // Means not owner
+        link_configuration: false,
         versions_destroy: false,
         versions_list: true,
         versions_retrieve: true,

src/frontend/apps/impress/src/features/docs/doc-header/components/DocHeader.tsx

@@ -85,7 +85,7 @@ export const DocHeader = ({ doc, versionId }: DocHeaderProps) => {
           $wrap="wrap"
         >
           <Box $direction="row" $align="center" $gap="0.5rem 2rem" $wrap="wrap">
-            <DocTagPublic />
+            <DocTagPublic doc={doc} />
             <Text $size="s" $display="inline">
               {t('Created at')} <strong>{formatDate(doc.created_at)}</strong>
             </Text>

src/frontend/apps/impress/src/features/docs/doc-header/components/DocTagPublic.tsx

@@ -1,26 +1,18 @@
-import { useRouter } from 'next/router';
 import { useTranslation } from 'react-i18next';
 
 import { Text } from '@/components';
 import { useCunninghamTheme } from '@/cunningham';
-import { KEY_DOC_VISIBILITY, useDoc } from '@/features/docs/doc-management';
+import { Doc, LinkReach } from '@/features/docs/doc-management';
 
-export const DocTagPublic = () => {
+interface DocTagPublicProps {
+  doc: Doc;
+}
+
+export const DocTagPublic = ({ doc }: DocTagPublicProps) => {
   const { colorsTokens } = useCunninghamTheme();
   const { t } = useTranslation();
-  const {
-    query: { id },
-  } = useRouter();
-
-  const { data: doc } = useDoc(
-    { id: id as string },
-    {
-      enabled: !!id,
-      queryKey: [KEY_DOC_VISIBILITY, { id }],
-    },
-  );
 
-  if (!doc?.is_public) {
+  if (doc?.link_reach !== LinkReach.PUBLIC) {
     return null;
   }
 

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

@@ -1,3 +1,4 @@
 export * from './useDoc';
 export * from './useDocs';
 export * from './useUpdateDoc';
+export * from './useUpdateDocLink';

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

@@ -4,7 +4,7 @@ import { APIError, errorCauses, fetchAPI } from '@/api';
 import { Doc } from '@/features/docs';
 
 export type UpdateDocParams = Pick<Doc, 'id'> &
-  Partial<Pick<Doc, 'content' | 'title' | 'is_public'>>;
+  Partial<Pick<Doc, 'content' | 'title'>>;
 
 export const updateDoc = async ({
   id,

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

@@ -0,0 +1,51 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+
+import { APIError, errorCauses, fetchAPI } from '@/api';
+import { Doc } from '@/features/docs';
+
+export type UpdateDocLinkParams = Pick<Doc, 'id'> &
+  Partial<Pick<Doc, 'link_role' | 'link_reach'>>;
+
+export const updateDocLink = async ({
+  id,
+  ...params
+}: UpdateDocLinkParams): Promise<Doc> => {
+  const response = await fetchAPI(`documents/${id}/link-configuration/`, {
+    method: 'PUT',
+    body: JSON.stringify({
+      ...params,
+    }),
+  });
+
+  if (!response.ok) {
+    throw new APIError(
+      'Failed to update the doc link',
+      await errorCauses(response),
+    );
+  }
+
+  return response.json() as Promise<Doc>;
+};
+
+interface UpdateDocLinkProps {
+  onSuccess?: (data: Doc) => void;
+  listInvalideQueries?: string[];
+}
+
+export function useUpdateDocLink({
+  onSuccess,
+  listInvalideQueries,
+}: UpdateDocLinkProps = {}) {
+  const queryClient = useQueryClient();
+  return useMutation<Doc, APIError, UpdateDocLinkParams>({
+    mutationFn: updateDocLink,
+    onSuccess: (data) => {
+      listInvalideQueries?.forEach((queryKey) => {
+        void queryClient.resetQueries({
+          queryKey: [queryKey],
+        });
+      });
+      onSuccess?.(data);
+    },
+  });
+}

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

@@ -9,18 +9,20 @@ import { useTranslation } from 'react-i18next';
 
 import { Box, Card, IconBG } from '@/components';
 
-import { KEY_DOC_VISIBILITY, KEY_LIST_DOC, useUpdateDoc } from '../api';
-import { Doc } from '../types';
+import { KEY_DOC, KEY_LIST_DOC, useUpdateDocLink } from '../api';
+import { Doc, LinkReach } from '../types';
 
 interface DocVisibilityProps {
   doc: Doc;
 }
 
 export const DocVisibility = ({ doc }: DocVisibilityProps) => {
   const { t } = useTranslation();
-  const [docPublic, setDocPublic] = useState(doc.is_public);
+  const [docPublic, setDocPublic] = useState(
+    doc.link_reach === LinkReach.PUBLIC,
+  );
   const { toast } = useToastProvider();
-  const api = useUpdateDoc({
+  const api = useUpdateDocLink({
     onSuccess: () => {
       toast(
         t('The document visiblitity has been updated.'),
@@ -30,13 +32,13 @@ export const DocVisibility = ({ doc }: DocVisibilityProps) => {
         },
       );
     },
-    listInvalideQueries: [KEY_LIST_DOC, KEY_DOC_VISIBILITY],
+    listInvalideQueries: [KEY_LIST_DOC, KEY_DOC],
   });
 
   return (
     <Card
       $margin="tiny"
-      $padding="small"
+      $padding={{ horizontal: 'small', vertical: 'tiny' }}
       aria-label={t('Doc visibility card')}
       $direction="row"
       $align="center"
@@ -50,10 +52,12 @@ export const DocVisibility = ({ doc }: DocVisibilityProps) => {
           onChange={() => {
             api.mutate({
               id: doc.id,
-              is_public: !docPublic,
+              link_reach: docPublic ? LinkReach.RESTRICTED : LinkReach.PUBLIC,
+              link_role: 'reader',
             });
             setDocPublic(!docPublic);
           }}
+          disabled={!doc.abilities.link_configuration}
           text={t(
             docPublic
               ? 'Anyone on the internet with the link can view'

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

@@ -78,7 +78,6 @@ export const ModalUpdateDoc = ({ onClose, doc }: ModalUpdateDocProps) => {
         buttonText: t('Validate the modification'),
         onClose,
         initialTitle: doc.title,
-        isPublic: doc.is_public,
         infoText: t('Enter the new name of the selected document.'),
         titleModal: t('Update document "{{documentTitle}}"', {
           documentTitle: doc.title,