✨(frontend) add AlertModal and enhance document sharing features

- Introduced a new `AlertModal` component for confirmation dialogs.
- Updated `DocToolBoxLicenceAGPL` and `DocToolBoxLicenceMIT` to include
`isRootDoc` prop for better document management.
- Enhanced `DocShareModal` to conditionally render content based on the
root document status.
- Improved `DocInheritedShareContent` to display inherited access
information more effectively.
- Refactored `DocRoleDropdown` to handle access removal actions and
improve role management.
- Updated `DocShareMemberItem` to accommodate new access management
features.

Author: PanchoutNathan

src/frontend/apps/impress/src/components/AlertModal/AlertModal.tsx

@@ -0,0 +1,67 @@
+import { Button, Modal, ModalSize } from '@openfun/cunningham-react';
+import { useTranslation } from 'react-i18next';
+
+import { Box } from '../Box';
+import { Text } from '../Text';
+
+export type AlertModalProps = {
+  isOpen: boolean;
+  onClose: () => void;
+  title: string;
+  description: string | React.ReactNode;
+  onConfirm: () => void;
+  confirmLabel?: string;
+  cancelLabel?: string;
+};
+
+export const AlertModal = ({
+  isOpen,
+  onClose,
+  title,
+  description,
+  onConfirm,
+  confirmLabel,
+  cancelLabel,
+}: AlertModalProps) => {
+  const { t } = useTranslation();
+  return (
+    <Modal
+      isOpen={isOpen}
+      size={ModalSize.MEDIUM}
+      onClose={onClose}
+      title={
+        <Text $size="h6" $align="flex-start" $variation="1000">
+          {title}
+        </Text>
+      }
+      rightActions={
+        <>
+          <Button
+            aria-label={t('Close the modal')}
+            color="secondary"
+            fullWidth
+            onClick={() => onClose()}
+          >
+            {cancelLabel ?? t('Cancel')}
+          </Button>
+          <Button
+            aria-label={confirmLabel ?? t('Confirm')}
+            color="danger"
+            onClick={onConfirm}
+          >
+            {confirmLabel ?? t('Confirm')}
+          </Button>
+        </>
+      }
+    >
+      <Box
+        aria-label={t('Confirmation button')}
+        className="--docs--alert-modal"
+      >
+        <Box>
+          <Text $variation="600">{description}</Text>
+        </Box>
+      </Box>
+    </Modal>
+  );
+};

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

@@ -117,6 +117,7 @@ export const DocToolBox = ({ doc }: DocToolBoxProps) => {
           doc={doc}
           modalHistory={modalHistory}
           modalShare={modalShare}
+          isRootDoc={treeContext?.root?.id === doc.id}
         />
       </Box>
     </Box>

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

@@ -37,12 +37,14 @@ interface DocToolBoxLicenceProps {
   doc: Doc;
   modalHistory: ModalType;
   modalShare: ModalType;
+  isRootDoc?: boolean;
 }
 
 export const DocToolBoxLicenceAGPL = ({
   doc,
   modalHistory,
   modalShare,
+  isRootDoc = true,
 }: DocToolBoxLicenceProps) => {
   const { t } = useTranslation();
   const queryClient = useQueryClient();
@@ -176,7 +178,11 @@ export const DocToolBoxLicenceAGPL = ({
       </DropdownMenu>
 
       {modalShare.isOpen && (
-        <DocShareModal onClose={() => modalShare.close()} doc={doc} />
+        <DocShareModal
+          onClose={() => modalShare.close()}
+          doc={doc}
+          isRootDoc={isRootDoc}
+        />
       )}
       {isModalExportOpen && (
         <ModalExport onClose={() => setIsModalExportOpen(false)} doc={doc} />

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

@@ -31,12 +31,14 @@ interface DocToolBoxLicenceProps {
   doc: Doc;
   modalHistory: ModalType;
   modalShare: ModalType;
+  isRootDoc?: boolean;
 }
 
 export const DocToolBoxLicenceMIT = ({
   doc,
   modalHistory,
   modalShare,
+  isRootDoc = true,
 }: DocToolBoxLicenceProps) => {
   const { t } = useTranslation();
   const queryClient = useQueryClient();
@@ -152,7 +154,11 @@ export const DocToolBoxLicenceMIT = ({
       </DropdownMenu>
 
       {modalShare.isOpen && (
-        <DocShareModal onClose={() => modalShare.close()} doc={doc} />
+        <DocShareModal
+          onClose={() => modalShare.close()}
+          doc={doc}
+          isRootDoc={isRootDoc}
+        />
       )}
       {isModalRemoveOpen && (
         <ModalRemoveDoc onClose={() => setIsModalRemoveOpen(false)} doc={doc} />

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

@@ -12,7 +12,6 @@ import { useRouter } from 'next/router';
 import { Box, Text, TextErrors } from '@/components';
 
 import { useRemoveDoc } from '../api/useRemoveDoc';
-import { useTrans } from '../hooks';
 import { Doc } from '../types';
 
 interface ModalRemoveDocProps {
@@ -29,7 +28,6 @@ export const ModalRemoveDoc = ({
   const { toast } = useToastProvider();
   const { push } = useRouter();
   const pathname = usePathname();
-  const { untitledDocument } = useTrans(doc);
 
   const {
     mutate: removeDoc,
@@ -82,7 +80,7 @@ export const ModalRemoveDoc = ({
           </Button>
         </>
       }
-      size={ModalSize.SMALL}
+      size={ModalSize.MEDIUM}
       title={
         <Text
           $size="h6"
@@ -100,11 +98,13 @@ export const ModalRemoveDoc = ({
         className="--docs--modal-remove-doc"
       >
         {!isError && (
-          <Text $size="sm" $variation="600">
-            {t('Are you sure you want to delete the document "{{title}}"?', {
-              title: doc.title ?? untitledDocument,
-            })}
-          </Text>
+          <>
+            <Text $size="sm" $variation="600">
+              {t(
+                'This document will be permanently deleted. This action is irreversible.',
+              )}
+            </Text>
+          </>
         )}
 
         {isError && <TextErrors causes={error.cause} />}

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

@@ -74,7 +74,10 @@ export const DocSearchModal = ({
           loading={loading}
           onFilter={handleInputSearch}
         >
-          <Box $height={isDesktop ? '500px' : 'calc(100vh - 68px - 1rem)'}>
+          <Box
+            $padding={{ horizontal: '10px' }}
+            $height={isDesktop ? '500px' : 'calc(100vh - 68px - 1rem)'}
+          >
             {showFilters && (
               <DocSearchFilters
                 values={filters}

src/frontend/apps/impress/src/features/docs/doc-share/api/useDocAccesses.tsx

@@ -1,20 +1,17 @@
 import { UseQueryOptions, useQuery } from '@tanstack/react-query';
 
 import { APIError, errorCauses, fetchAPI } from '@/api';
-
 import { Access } from '@/docs/doc-management';
 
 export type DocAccessesParams = {
   docId: string;
   ordering?: string;
 };
 
-export type DocAccessesAPIParams = DocAccessesParams & {};
-
 export const getDocAccesses = async ({
   docId,
   ordering,
-}: DocAccessesAPIParams): Promise<Access[]> => {
+}: DocAccessesParams): Promise<Access[]> => {
   let url = `documents/${docId}/accesses/`;
 
   if (ordering) {
@@ -36,7 +33,7 @@ export const getDocAccesses = async ({
 export const KEY_LIST_DOC_ACCESSES = 'docs-accesses';
 
 export function useDocAccesses(
-  params: DocAccessesAPIParams,
+  params: DocAccessesParams,
   queryConfig?: UseQueryOptions<Access[], APIError, Access[]>,
 ) {
   return useQuery<Access[], APIError, Access[]>({