✨(front) Allow to pick files from drive if set up.

Use the drive-sdk package to allow user to pick a file from its drive workspace
if one drive instance has been set up through envvars.

https://github.com/suitenumerique/drive

Author: jbpenrath

src/frontend/package-lock.json

@@ -23,6 +23,7 @@
     "@blocknote/core": "0.33.0",
     "@blocknote/mantine": "0.33.0",
     "@blocknote/react": "0.33.0",
+    "@gouvfr-lasuite/drive-sdk": "0.0.1",
     "@gouvfr-lasuite/ui-kit": "0.8.2",
     "@hookform/resolvers": "5.1.1",
     "@openfun/cunningham-react": "3.2.0",
@@ -33,8 +34,8 @@
     "@viselect/react": "3.9.0",
     "clsx": "2.1.1",
     "date-fns": "4.1.0",
-    "downshift": "9.0.10",
     "dompurify": "3.2.6",
+    "downshift": "9.0.10",
     "i18next": "25.3.0",
     "next": "15.3.4",
     "posthog-js": "1.257.0",

src/frontend/package.json

@@ -135,4 +135,9 @@
     flex-direction: column;
     box-sizing: border-box;
     position: relative;
-}
+}
+
+.drive-attachment-picker:disabled {
+    cursor: wait;
+    pointer-events: auto;
+}

src/frontend/src/features/forms/components/message-form/_index.scss

@@ -10,9 +10,11 @@ import { useDropzone } from 'react-dropzone';
 import { AttachmentHelper } from '@/features/utils/attachment-helper';
 import { useDebounceCallback } from '@/hooks/use-debounce-callback';
 import { DropZone } from './dropzone';
+import { DriveAttachmentPicker, DriveFile } from './drive-attachment-picker';
+import { Icon } from '@gouvfr-lasuite/ui-kit';
 
 interface AttachmentUploaderProps {
-    initialAttachments?: readonly Attachment[];
+    initialAttachments?: (DriveFile | Attachment)[];
     onChange: () => void;
 }
 
@@ -25,7 +27,7 @@ export const AttachmentUploader = ({
     const form = useFormContext();
     const { t, i18n } = useTranslation();
     const { selectedMailbox } = useMailboxContext();
-    const [attachments, setAttachments] = useState<Attachment[]>(initialAttachments.map((a) => ({ ...a, state: 'idle' })));
+    const [attachments, setAttachments] = useState<(DriveFile | Attachment)[]>(initialAttachments.map((a) => ({ ...a, state: 'idle' })));
     const [uploadingQueue, setUploadingQueue] = useState<File[]>([]);
     const [failedQueue, setFailedQueue] = useState<File[]>([]);
     const { mutateAsync: uploadBlob } = useBlobUploadCreate();
@@ -46,14 +48,18 @@ export const AttachmentUploader = ({
     }
     const removeToUploadingQueue = (attachments: File[]) => setUploadingQueue(uploadingQueue => removeToQueue(uploadingQueue, attachments));
     const removeToFailedQueue = (attachments: File[]) => setFailedQueue(failedQueue => removeToQueue(failedQueue, attachments));
-    const appendToAttachments = (newAttachments: Attachment[]) => {
+    const appendToAttachments = (newAttachments: (DriveFile | Attachment)[]) => {
         // Append attachments to the end of the list and sort by descending created_at
         setAttachments(
             attachments => [...attachments, ...newAttachments].sort((a, b) => Number(new Date(b.created_at)) - Number(new Date(a.created_at)))
         );
     }
-    const removeToAttachments = (entries: Attachment[]) => {
-        setAttachments(attachments => attachments.filter((a) => !entries.some(e => e.blobId === a.blobId)));
+
+    const removeToAttachments = (entries: (DriveFile | Attachment)[]) => {
+        setAttachments(attachments => attachments.filter((a) => !entries.some(e => {
+            if ('blobId' in a && 'blobId' in e) return e.blobId === a.blobId;
+            return e.id === a.id;
+        })));
     }
 
     /**
@@ -94,18 +100,24 @@ export const AttachmentUploader = ({
         if (!hasClickInBucketList) {
             getRootProps().onClick?.(event);
         }
+    }
 
+    const handleDriveAttachmentPick = (attachments: DriveFile[]) => {
+        appendToAttachments(attachments);
     }
 
     /**
-     * Update the form value when the attachments change
-     * Trigger the onChange callback to update the form each 1s
+     * Update the form value when the attachments change.
      */
     useEffect(() => {
-        form.setValue('attachments', attachments.map((attachment) => ({
+        // Only keep local attachments
+        const localAttachments = attachments.filter(attachment => 'blobId' in attachment);
+        const driveAttachments = attachments.filter(attachment => 'url' in attachment);
+        form.setValue('attachments', localAttachments.map((attachment) => ({
             blobId: attachment.blobId,
             name: attachment.name
         })), { shouldDirty: true });
+        form.setValue('driveAttachments', driveAttachments, { shouldDirty: true });
         if (form.formState.dirtyFields.attachments) {
             debouncedOnChange();
         }
@@ -122,11 +134,12 @@ export const AttachmentUploader = ({
             <div className="attachment-uploader__input">
                 <Button
                     color="tertiary"
-                    icon={<span className="material-icons">attach_file</span>}
+                    icon={<Icon name="attach_file" />}
                     type="button"
                 >
                     {t("message_form.attachments_uploader.input_label")}
                 </Button>
+                <DriveAttachmentPicker onPick={handleDriveAttachmentPick} />
                 <p className="attachment-uploader__input__helper-text">
                     {t("message_form.attachments_uploader.or_drag_and_drop")}
                 </p>
@@ -154,7 +167,11 @@ export const AttachmentUploader = ({
                             <AttachmentItem key={`uploading-${entry.name}-${entry.size}-${entry.lastModified}`} attachment={entry} isLoading />
                         ))}
                         {attachments.map((entry) => (
-                            <AttachmentItem key={entry.blobId} attachment={entry} onDelete={() => removeToAttachments([entry])} />
+                            <AttachmentItem
+                                key={'blobId' in entry ? entry.blobId : entry.id}
+                                attachment={entry}
+                                onDelete={() => removeToAttachments([entry])}
+                            />
                         ))}
                     </div>
                 </div>

src/frontend/src/features/forms/components/message-form/attachment-uploader.tsx

@@ -0,0 +1,76 @@
+import { useCallback, useState } from "react"
+import { Button, Tooltip } from "@openfun/cunningham-react"
+import { openPicker, type Item, type PickerResult } from "@gouvfr-lasuite/drive-sdk";
+import { useTranslation } from "react-i18next";
+import { Spinner } from "@gouvfr-lasuite/ui-kit";
+import { useConfig } from "@/features/providers/config";
+import { FEATURE_KEYS, useFeatureFlag } from "@/hooks/use-feature";
+import { DriveIcon } from "./drive-icon";
+import { Attachment } from "@/features/api/gen/models/attachment";
+
+export type DriveFile = { url: string } & Omit<Attachment, 'sha256' | 'blobId'>;
+
+type DriveAttachmentPickerProps = {
+    onPick: (attachments: DriveFile[]) => void;
+}
+
+/**
+ * DriveAttachmentPicker is a component that allows the user to pick files
+ * from a Drive instance if one is configured otherwise it will return null.
+ *
+ * Drive Config is retrieved from the backend. Take a look at the `DRIVE_CONFIG`
+ * in the `settings.py` file in the backend.
+ *
+ * https://github.com/suitenumerique/drive
+ */
+export const DriveAttachmentPicker = ({ onPick }: DriveAttachmentPickerProps) => {
+    const { t } = useTranslation();
+    const [isLoading, setIsLoading] = useState(false);
+    const config = useConfig();
+    const isDriveDisabled = !useFeatureFlag(FEATURE_KEYS.DRIVE);
+    const serializeToDriveFile = (item: Item): DriveFile => ({
+        id: item.id,
+        name: item.title,
+        url: item.url,
+        type: item.type,
+        size: item.size,
+        created_at: new Date().toISOString(),
+    });
+
+    const pick = useCallback(async () => {
+        if (isDriveDisabled) return;
+        setIsLoading(true);
+        let result: PickerResult | null = null;
+
+        try {
+            result = await openPicker({
+                url: config.DRIVE!.sdk_url,
+                apiUrl: config.DRIVE!.api_url,
+            });
+        } catch (error) {
+            console.error(error);
+        } finally {
+            setIsLoading(false);
+        }
+
+        if (result?.type === "picked" && result.items) {
+            onPick(result.items.map(serializeToDriveFile));
+        }
+    }, [isDriveDisabled]);
+
+    if (isDriveDisabled) return null;
+
+    return (
+        <Tooltip content={t('tooltips.add_attachment_from_drive')}>
+            <Button
+                color="tertiary"
+                icon={isLoading ? <Spinner size="sm" /> : <DriveIcon />}
+                type="button"
+                disabled={isLoading}
+                aria-busy={isLoading}
+                onClick={pick}
+                className="drive-attachment-picker"
+            />
+        </Tooltip>
+    )
+}

src/frontend/src/features/forms/components/message-form/drive-attachment-picker.tsx

@@ -0,0 +1,15 @@
+import { SVGProps } from "react"
+
+export const DriveIcon = ({ size = 'small', ...props }: { size?: 'small' | 'medium' | 'large' } & SVGProps<SVGSVGElement>) => {
+    const sizeMap = {
+        small: 21,
+        medium: 32,
+        large: 48,
+    }
+    return (
+        <svg width={sizeMap[size]} height={sizeMap[size]} viewBox="0 0 64 65" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+            <path d="M55.3531 19.9525H16.8394C12.465 19.9525 8.06606 23.3947 7.01421 27.6408L4 39.8087V16.1976C4 13.6559 4.58282 11.7415 5.74845 10.4546C6.92902 9.15152 8.56539 8.5 10.6575 8.5H17.0013C17.7783 8.5 18.4508 8.5563 19.0187 8.66891C19.5866 8.78152 20.1096 8.97457 20.5878 9.24805C21.066 9.50544 21.5666 9.8674 22.0897 10.3339L23.3674 11.4681C23.995 11.9989 24.5853 12.377 25.1383 12.6022C25.6912 12.8274 26.3711 12.94 27.1781 12.94H48.025C50.4309 12.94 52.2541 13.6076 53.4945 14.9428C54.607 16.1262 55.2265 17.7961 55.3531 19.9525Z" fill="currentColor"/>
+            <path d="M11.3531 54.5C8.93219 54.5 7.27319 53.8071 6.37613 52.4213C5.47493 51.0522 5.3552 49.032 6.01696 46.3606L10.6542 27.6409C11.2228 25.3457 13.6005 23.4851 15.9651 23.4851H58.7796C61.1442 23.4851 62.6002 25.3457 62.0316 27.6409L57.3944 46.3606C56.7326 49.032 55.6344 51.0522 54.0997 52.4213C52.5609 53.8071 50.723 54.5 48.586 54.5H11.3531Z" fill="currentColor"/>
+        </svg>
+    )
+}