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

@@ -0,0 +1,198 @@
+import { Button, useModal } from '@openfun/cunningham-react';
+import { useQueryClient } from '@tanstack/react-query';
+import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { css } from 'styled-components';
+
+import {
+  DropdownMenu,
+  DropdownMenuOption,
+  Icon,
+  IconOptions,
+} from '@/components';
+import { useCunninghamTheme } from '@/cunningham';
+import { ModalExport } from '@/docs/doc-export/';
+import {
+  Doc,
+  KEY_DOC,
+  KEY_LIST_DOC,
+  ModalRemoveDoc,
+  useCopyDocLink,
+  useCreateFavoriteDoc,
+  useDeleteFavoriteDoc,
+} from '@/docs/doc-management';
+import {
+  KEY_LIST_DOC_VERSIONS,
+  ModalSelectVersion,
+} from '@/docs/doc-versioning';
+import { useAnalytics } from '@/libs';
+import { useResponsiveStore } from '@/stores';
+
+import { DocShareModal } from '../../doc-share';
+import { useCopyCurrentEditorToClipboard } from '../hooks/useCopyCurrentEditorToClipboard';
+
+type ModalType = ReturnType<typeof useModal>;
+
+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();
+
+  const { colorsTokens } = useCunninghamTheme();
+
+  const [isModalRemoveOpen, setIsModalRemoveOpen] = useState(false);
+  const [isModalExportOpen, setIsModalExportOpen] = useState(false);
+
+  const { isSmallMobile, isDesktop } = useResponsiveStore();
+  const copyDocLink = useCopyDocLink(doc.id);
+  const { isFeatureFlagActivated } = useAnalytics();
+  const removeFavoriteDoc = useDeleteFavoriteDoc({
+    listInvalideQueries: [KEY_LIST_DOC, KEY_DOC],
+  });
+  const makeFavoriteDoc = useCreateFavoriteDoc({
+    listInvalideQueries: [KEY_LIST_DOC, KEY_DOC],
+  });
+  const copyCurrentEditorToClipboard = useCopyCurrentEditorToClipboard();
+
+  const options: DropdownMenuOption[] = [
+    ...(isSmallMobile
+      ? [
+          {
+            label: t('Share'),
+            icon: 'group',
+            callback: modalShare.open,
+          },
+          {
+            label: t('Export'),
+            icon: 'download',
+            callback: () => {
+              setIsModalExportOpen(true);
+            },
+          },
+          {
+            label: t('Copy link'),
+            icon: 'add_link',
+            callback: copyDocLink,
+          },
+        ]
+      : []),
+    {
+      label: doc.is_favorite ? t('Unpin') : t('Pin'),
+      icon: 'push_pin',
+      callback: () => {
+        if (doc.is_favorite) {
+          removeFavoriteDoc.mutate({ id: doc.id });
+        } else {
+          makeFavoriteDoc.mutate({ id: doc.id });
+        }
+      },
+      testId: `docs-actions-${doc.is_favorite ? 'unpin' : 'pin'}-${doc.id}`,
+    },
+    {
+      label: t('Version history'),
+      icon: 'history',
+      disabled: !doc.abilities.versions_list,
+      callback: () => {
+        modalHistory.open();
+      },
+      show: isDesktop,
+    },
+
+    {
+      label: t('Copy as {{format}}', { format: 'Markdown' }),
+      icon: 'content_copy',
+      callback: () => {
+        void copyCurrentEditorToClipboard('markdown');
+      },
+    },
+    {
+      label: t('Copy as {{format}}', { format: 'HTML' }),
+      icon: 'content_copy',
+      callback: () => {
+        void copyCurrentEditorToClipboard('html');
+      },
+      show: isFeatureFlagActivated('CopyAsHTML'),
+    },
+    {
+      label: t('Delete document'),
+      icon: 'delete',
+      disabled: !doc.abilities.destroy,
+      callback: () => {
+        setIsModalRemoveOpen(true);
+      },
+    },
+  ];
+
+  useEffect(() => {
+    if (modalHistory.isOpen) {
+      return;
+    }
+
+    void queryClient.resetQueries({
+      queryKey: [KEY_LIST_DOC_VERSIONS],
+    });
+  }, [modalHistory.isOpen, queryClient]);
+
+  return (
+    <>
+      {!isSmallMobile && (
+        <Button
+          color="tertiary-text"
+          icon={<Icon iconName="download" $theme="primary" $variation="800" />}
+          onClick={() => {
+            setIsModalExportOpen(true);
+          }}
+          size={isSmallMobile ? 'small' : 'medium'}
+        />
+      )}
+      <DropdownMenu options={options}>
+        <IconOptions
+          isHorizontal
+          $theme="primary"
+          $padding={{ all: 'xs' }}
+          $css={css`
+            border-radius: 4px;
+            &:hover {
+              background-color: ${colorsTokens['greyscale-100']};
+            }
+            ${isSmallMobile
+              ? css`
+                  padding: 10px;
+                  border: 1px solid ${colorsTokens['greyscale-300']};
+                `
+              : ''}
+          `}
+          aria-label={t('Open the document options')}
+        />
+      </DropdownMenu>
+
+      {modalShare.isOpen && (
+        <DocShareModal
+          onClose={() => modalShare.close()}
+          doc={doc}
+          isRootDoc={isRootDoc}
+        />
+      )}
+      {isModalExportOpen && (
+        <ModalExport onClose={() => setIsModalExportOpen(false)} doc={doc} />
+      )}
+      {isModalRemoveOpen && (
+        <ModalRemoveDoc onClose={() => setIsModalRemoveOpen(false)} doc={doc} />
+      )}
+      {modalHistory.isOpen && (
+        <ModalSelectVersion onClose={() => modalHistory.close()} doc={doc} />
+      )}
+    </>
+  );
+};