✨(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.tsx

@@ -0,0 +1,68 @@
+import { Button, Modal, ModalSize } from '@openfun/cunningham-react';
+import { ReactNode } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { Box } from './Box';
+import { Text } from './Text';
+
+export type AlertModalProps = {
+  description: ReactNode;
+  isOpen: boolean;
+  onClose: () => void;
+  onConfirm: () => void;
+  title: string;
+  cancelLabel?: string;
+  confirmLabel?: string;
+};
+
+export const AlertModal = ({
+  cancelLabel,
+  confirmLabel,
+  description,
+  isOpen,
+  onClose,
+  onConfirm,
+  title,
+}: 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/components/index.ts

@@ -1,3 +1,4 @@
+export * from './AlertModal';
 export * from './Box';
 export * from './BoxButton';
 export * from './Card';

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

@@ -277,7 +277,11 @@ export const DocToolBox = ({ doc }: DocToolBoxProps) => {
       </Box>
 
       {modalShare.isOpen && (
-        <DocShareModal onClose={() => modalShare.close()} doc={doc} />
+        <DocShareModal
+          onClose={() => modalShare.close()}
+          doc={doc}
+          isRootDoc={treeContext?.root?.id === doc.id}
+        />
       )}
       {isModalExportOpen && ModalExport && (
         <ModalExport onClose={() => setIsModalExportOpen(false)} doc={doc} />

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

@@ -5,14 +5,13 @@ import {
   VariantType,
   useToastProvider,
 } from '@openfun/cunningham-react';
-import { t } from 'i18next';
 import { usePathname } from 'next/navigation';
 import { useRouter } from 'next/router';
+import { Trans, useTranslation } from 'react-i18next';
 
 import { Box, Text, TextErrors } from '@/components';
 
 import { useRemoveDoc } from '../api/useRemoveDoc';
-import { useTrans } from '../hooks';
 import { Doc } from '../types';
 
 interface ModalRemoveDocProps {
@@ -27,10 +26,9 @@ export const ModalRemoveDoc = ({
   afterDelete,
 }: ModalRemoveDocProps) => {
   const { toast } = useToastProvider();
+  const { t } = useTranslation();
   const { push } = useRouter();
   const pathname = usePathname();
-  const { untitledDocument } = useTrans();
-
   const {
     mutate: removeDoc,
     isError,
@@ -82,7 +80,7 @@ export const ModalRemoveDoc = ({
           </Button>
         </>
       }
-      size={ModalSize.SMALL}
+      size={ModalSize.MEDIUM}
       title={
         <Text
           $size="h6"
@@ -100,11 +98,14 @@ 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" $display="inline-block">
+              <Trans t={t} i18nKey="modal-remove-doc">
+                This document and <strong>any sub-documents</strong> will be
+                permanently deleted. This action is irreversible.
+              </Trans>
+            </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[]>({