🛂(frontend) add access request modal on move modal

If a user tries to move a document for which they
don't have the right to move, we now display a
modal to request access to the owners of the
document.

Author: AntoLC

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

@@ -1,4 +1,10 @@
-import { Button, Modal, ModalSize } from '@gouvfr-lasuite/cunningham-react';
+import {
+  Button,
+  ButtonProps,
+  Modal,
+  ModalProps,
+  ModalSize,
+} from '@gouvfr-lasuite/cunningham-react';
 import { ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -10,10 +16,11 @@ export type AlertModalProps = {
   isOpen: boolean;
   onClose: () => void;
   onConfirm: () => void;
+  themeCTA?: ButtonProps['color'];
   title: string;
   cancelLabel?: string;
   confirmLabel?: string;
-};
+} & Partial<ModalProps>;
 
 export const AlertModal = ({
   cancelLabel,
@@ -23,6 +30,8 @@ export const AlertModal = ({
   onClose,
   onConfirm,
   title,
+  themeCTA,
+  ...props
 }: AlertModalProps) => {
   const { t } = useTranslation();
   return (
@@ -46,7 +55,7 @@ export const AlertModal = ({
         <Box $direction="row-reverse" $gap="small">
           <Button
             aria-label={confirmLabel ?? t('Confirm')}
-            color="error"
+            color={themeCTA ?? 'error'}
             onClick={onConfirm}
           >
             {confirmLabel ?? t('Confirm')}
@@ -61,6 +70,7 @@ export const AlertModal = ({
           </Button>
         </Box>
       }
+      {...props}
     >
       <Box className="--docs--alert-modal">
         <Box>

src/frontend/apps/impress/src/features/docs/doc-share/components/AlertModalRequestAccess.tsx

@@ -0,0 +1,87 @@
+import { Button } from '@gouvfr-lasuite/cunningham-react';
+import { Trans, useTranslation } from 'react-i18next';
+
+import { AlertModal, Box, Icon, Text } from '@/components';
+
+import { useDocAccessRequests } from '../api/useDocAccessRequest';
+
+import { ButtonAccessRequest } from './DocShareAccessRequest';
+
+interface AlertModalRequestAccessProps {
+  docId: string;
+  isOpen: boolean;
+  onClose: () => void;
+  onConfirm: () => void;
+  targetDocumentTitle: string;
+  title: string;
+}
+
+export const AlertModalRequestAccess = ({
+  docId,
+  isOpen,
+  onClose,
+  onConfirm,
+  targetDocumentTitle,
+  title,
+}: AlertModalRequestAccessProps) => {
+  const { t } = useTranslation();
+  const { data: requests } = useDocAccessRequests({
+    docId,
+    page: 1,
+  });
+
+  const hasRequested = !!(
+    requests && requests?.results.find((request) => request.document === docId)
+  );
+
+  return (
+    <AlertModal
+      onClose={onClose}
+      isOpen={isOpen}
+      title={title}
+      description={
+        <>
+          <Text $display="inline">
+            <Trans
+              i18nKey="You don't have permission to move this document to <strong>{{targetDocumentTitle}}</strong>. You need edit access to the destination. Request access, then try again."
+              values={{
+                targetDocumentTitle,
+              }}
+              components={{ strong: <strong /> }}
+            />
+          </Text>
+          {hasRequested && (
+            <Text
+              $weight="bold"
+              $margin={{ top: 'sm' }}
+              $direction="row"
+              $align="center"
+            >
+              <Icon
+                iconName="person_check"
+                $margin={{ right: 'xxs' }}
+                variant="symbols-outlined"
+              />
+              {t('You have already requested access to this document.')}
+            </Text>
+          )}
+        </>
+      }
+      confirmLabel={t('Request access')}
+      onConfirm={onConfirm}
+      rightActions={
+        <Box $direction="row-reverse" $gap="small">
+          <ButtonAccessRequest docId={docId} />
+          <Button
+            aria-label={t('Cancel')}
+            variant="secondary"
+            fullWidth
+            onClick={() => onClose()}
+          >
+            {t('Cancel')}
+          </Button>
+        </Box>
+      }
+    />
+  );
+};

src/frontend/apps/impress/src/features/docs/doc-share/components/index.ts

@@ -1,2 +1,3 @@
+export * from './AlertModalRequestAccess';
 export * from './DocShareModal';
 export * from './DocShareAccessRequest';

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

@@ -16,6 +16,7 @@ import { QuickSearch } from '@/components/quick-search';
 import { Doc, useMoveDoc, useTrans } from '@/docs/doc-management';
 import { DocSearchContent, DocSearchTarget } from '@/docs/doc-search';
 import EmptySearchIcon from '@/docs/doc-search/assets/illustration-docs-empty.png';
+import { AlertModalRequestAccess } from '@/docs/doc-share';
 import { useResponsiveStore } from '@/stores';
 
 import { DocsGridItemDate, DocsGridItemTitle } from './DocsGridItem';
@@ -75,6 +76,7 @@ export const DocMoveModal = ({
   const docTitle = doc.title || untitledDocument;
   const docTargetTitle = docSelected?.title || untitledDocument;
   const modalConfirmation = useModal();
+  const modalRequest = useModal();
   const { mutate: moveDoc } = useMoveDoc(true);
   const [search, setSearch] = useState('');
   const { isDesktop } = useResponsiveStore();
@@ -113,6 +115,11 @@ export const DocMoveModal = ({
               variant="primary"
               fullWidth
               onClick={() => {
+                if (!docSelected?.abilities.move) {
+                  modalRequest.open();
+                  return;
+                }
+
                 if (doc.nb_accesses_direct > 1) {
                   modalConfirmation.open();
                   return;
@@ -210,9 +217,7 @@ export const DocMoveModal = ({
                   <DocSearchContent
                     search={search}
                     filters={{ target: DocSearchTarget.ALL }}
-                    filterResults={(docResults) =>
-                      docResults.id !== doc.id && docResults.abilities.move
-                    }
+                    filterResults={(docResults) => docResults.id !== doc.id}
                     onSelect={handleSelect}
                     onLoadingChange={setLoading}
                     renderSearchElement={(docSearch) => {
@@ -274,6 +279,18 @@ export const DocMoveModal = ({
           targetDocumentTitle={docTargetTitle}
         />
       )}
+      {modalRequest.isOpen && docSelected?.id && (
+        <AlertModalRequestAccess
+          docId={docSelected.id}
+          isOpen={modalRequest.isOpen}
+          onClose={modalRequest.onClose}
+          onConfirm={() => {
+            modalRequest.onClose();
+          }}
+          targetDocumentTitle={docTargetTitle}
+          title={t('Move document')}
+        />
+      )}
     </>
   );
 };