chore: base modifications for restore action

Author: holaontiveros

src/library-authoring/create-library/CreateLibrary.tsx

@@ -6,11 +6,18 @@ import {
   Button,
   StatefulButton,
   ActionRow,
+  Dropzone,
+  Card,
+  Stack,
+  Icon,
+  Alert,
 } from '@openedx/paragon';
+import { Upload, InsertDriveFile, CheckCircle } from '@openedx/paragon/icons';
 import { Formik } from 'formik';
 import { useNavigate } from 'react-router-dom';
 import * as Yup from 'yup';
 import classNames from 'classnames';
+import { useState, useCallback } from 'react';
 
 import { REGEX_RULES } from '@src/constants';
 import { useOrganizationListData } from '@src/generic/data/apiHooks';
@@ -22,6 +29,9 @@ import FormikErrorFeedback from '@src/generic/FormikErrorFeedback';
 import AlertError from '@src/generic/alert-error';
 
 import { useCreateLibraryV2 } from './data/apiHooks';
+import { CreateContentLibraryArgs } from './data/api';
+import { useCreateLibraryRestore, useGetLibraryRestoreStatus } from './data/restoreHooks';
+import { LibraryRestoreStatus } from './data/restoreConstants';
 import messages from './messages';
 import type { ContentLibrary } from '../data/api';
 
@@ -47,6 +57,11 @@ export const CreateLibrary = ({
   const { noSpaceRule, specialCharsRule } = REGEX_RULES;
   const validSlugIdRegex = /^[a-zA-Z\d]+(?:[\w-]*[a-zA-Z\d]+)*$/;
 
+  // State for archive creation
+  const [isFromArchive, setIsFromArchive] = useState(false);
+  const [uploadedFile, setUploadedFile] = useState<File | null>(null);
+  const [restoreTaskId, setRestoreTaskId] = useState<string>('');
+
   const {
     mutate,
     data,
@@ -55,6 +70,11 @@ export const CreateLibrary = ({
     error,
   } = useCreateLibraryV2();
 
+  const restoreMutation = useCreateLibraryRestore();
+  const {
+    data: restoreStatus,
+  } = useGetLibraryRestoreStatus(restoreTaskId);
+
   const {
     data: allOrganizations,
     isLoading: isOrganizationListLoading,
@@ -81,6 +101,45 @@ export const CreateLibrary = ({
     }
   };
 
+  // Handle toggling create from archive mode
+  const handleCreateFromArchive = useCallback(() => {
+    setIsFromArchive(true);
+  }, []);
+
+  // Handle file upload
+  const handleFileUpload = useCallback(({
+    fileData,
+    handleError,
+  }: {
+    fileData: FormData;
+    requestConfig: any;
+    handleError: any;
+  }) => {
+    const file = fileData.get('file') as File;
+    if (file) {
+      // Validate file type
+      const validExtensions = ['.zip', '.tar.gz', '.tar'];
+      const fileName = file.name.toLowerCase();
+      const isValidFile = validExtensions.some(ext => fileName.endsWith(ext));
+      
+      if (isValidFile) {
+        setUploadedFile(file);
+        // Immediately start the restore process
+        restoreMutation.mutate(file, {
+          onSuccess: (response) => {
+            setRestoreTaskId(response.task_id);
+          },
+          onError: (restoreError) => {
+            handleError(restoreError);
+          },
+        });
+      } else {
+        // Call handleError for invalid file types
+        handleError(new Error('Invalid file type. Please upload a .zip, .tar.gz, or .tar file.'));
+      }
+    }
+  }, [restoreMutation]);
+
   if (data) {
     if (handlePostCreate) {
       handlePostCreate(data);
@@ -96,8 +155,116 @@ export const CreateLibrary = ({
         {!showInModal && (
           <SubHeader
             title={intl.formatMessage(messages.createLibrary)}
+            headerActions={!isFromArchive ? (
+              <Button
+                variant="outline-primary"
+                onClick={handleCreateFromArchive}
+              >
+                {intl.formatMessage(messages.createFromArchiveButton)}
+              </Button>
+            ) : null}
           />
         )}
+        
+        {/* Archive upload section - shown above form when in archive mode */}
+        {isFromArchive && (
+          <div className="mb-4">
+            {!uploadedFile && (
+              <Dropzone
+                data-testid="library-archive-dropzone"
+                accept={{
+                  'application/zip': ['.zip'],
+                  'application/gzip': ['.tar.gz'],
+                  'application/x-tar': ['.tar'],
+                }}
+                onProcessUpload={handleFileUpload}
+                maxSize={5 * 1024 * 1024 * 1024} // 5GB
+                style={{ height: '300px' }}
+                errorMessages={{
+                  invalidSize: intl.formatMessage(messages.dropzoneSubtitle),
+                  multipleDragged: 'Please upload only one archive file.',
+                }}
+              >
+                <Stack direction="vertical" gap={3} className="text-center">
+                  <Icon src={Upload} style={{ height: '64px', width: '64px' }} />
+                  <div>
+                    <h4>{intl.formatMessage(messages.dropzoneTitle)}</h4>
+                    <p className="text-muted">{intl.formatMessage(messages.dropzoneSubtitle)}</p>
+                  </div>
+                </Stack>
+              </Dropzone>
+            )}
+
+            {uploadedFile && restoreStatus?.state === LibraryRestoreStatus.Succeeded && restoreStatus.result && (
+              // Show restore result data when succeeded
+              <Card className="mb-4">
+                <Card.Body>
+                  <Stack direction="horizontal" gap={3} className="align-items-center">
+                    <Icon src={CheckCircle} style={{ height: '40px', width: '40px', color: 'green' }} />
+                    <div className="flex-grow-1">
+                      <h5 className="mb-1">{restoreStatus.result.title}</h5>
+                      <p className="text-muted mb-1">
+                        {restoreStatus.result.org} / {restoreStatus.result.slug}
+                      </p>
+                      <p className="text-muted mb-0 small">
+                        Contains {restoreStatus.result.components} Components •
+                        Backed up {new Date(restoreStatus.result.created_at).toLocaleDateString()} at{' '}
+                        {new Date(restoreStatus.result.created_at).toLocaleTimeString()}
+                      </p>
+                    </div>
+                  </Stack>
+                </Card.Body>
+              </Card>
+            )}
+
+            {uploadedFile && restoreStatus?.state !== LibraryRestoreStatus.Succeeded && (
+              // Show uploaded file info during processing
+              <Card className="mb-4">
+                <Card.Body>
+                  <Stack direction="horizontal" gap={3} className="align-items-center">
+                    <Icon src={InsertDriveFile} style={{ height: '40px', width: '40px' }} />
+                    <div className="flex-grow-1">
+                      <h5 className="mb-1">{uploadedFile.name}</h5>
+                      <p className="text-muted mb-0">
+                        {(uploadedFile.size / (1024 * 1024)).toFixed(2)} MB
+                      </p>
+                    </div>
+                    {restoreMutation.isPending && (
+                      <div className="spinner-border spinner-border-sm text-primary" role="status">
+                        <span className="sr-only">Processing...</span>
+                      </div>
+                    )}
+                  </Stack>
+                </Card.Body>
+              </Card>
+            )}
+
+            {/* Archive restore status */}
+            {restoreTaskId && (
+              <div className="mb-4">
+                {restoreStatus?.state === LibraryRestoreStatus.Pending && (
+                  <Alert variant="info">
+                    {intl.formatMessage(messages.restoreInProgress)}
+                  </Alert>
+                )}
+                {restoreStatus?.state === LibraryRestoreStatus.Failed && (
+                  <Alert variant="danger">
+                    {intl.formatMessage(messages.restoreError)}
+                    {restoreStatus.error_log && (
+                      <div>
+                        <a href={restoreStatus.error_log} target="_blank" rel="noopener noreferrer">
+                          View error log
+                        </a>
+                      </div>
+                    )}
+                  </Alert>
+                )}
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* Regular form - always shown */}
         <Formik
           initialValues={{
             title: '',
@@ -123,7 +290,16 @@ export const CreateLibrary = ({
                 ),
             })
           }
-          onSubmit={(values) => mutate(values)}
+          onSubmit={(values) => {
+            const submitData = { ...values } as CreateContentLibraryArgs;
+            
+            // If we're creating from archive and have a successful restore, include the learning_package_id
+            if (isFromArchive && restoreStatus?.state === LibraryRestoreStatus.Succeeded && restoreStatus.result) {
+              submitData.learning_package = restoreStatus.result.learning_package_id;
+            }
+            
+            mutate(submitData);
+          }}
         >
           {(formikProps) => (
             <Form onSubmit={formikProps.handleSubmit}>
@@ -196,7 +372,9 @@ export const CreateLibrary = ({
             </Form>
           )}
         </Formik>
-        {isError && (<AlertError error={error} />)}
+        {(isError || restoreMutation.isError) && (
+          <AlertError error={error || restoreMutation.error} />
+        )}
       </Container>
       {!showInModal && (<StudioFooterSlot />)}
     </>

src/library-authoring/create-library/data/api.ts

@@ -14,6 +14,7 @@ export interface CreateContentLibraryArgs {
   title: string,
   org: string,
   slug: string,
+  learning_package?: number,
 }
 
 /**

src/library-authoring/create-library/data/restoreApi.ts

@@ -0,0 +1,20 @@
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import { CreateLibraryRestoreResponse, GetLibraryRestoreStatusResponse } from './restoreConstants';
+import { getLibraryRestoreApiUrl, getLibraryRestoreStatusApiUrl } from '../../data/api';
+
+export const createLibraryRestore = async (archiveFile: File): Promise<CreateLibraryRestoreResponse> => {
+  const formData = new FormData();
+  formData.append('file', archiveFile);
+
+  const { data } = await getAuthenticatedHttpClient().post(getLibraryRestoreApiUrl(), formData, {
+    headers: {
+      'Content-Type': 'multipart/form-data',
+    },
+  });
+  return data;
+};
+
+export const getLibraryRestoreStatus = async (taskId: string): Promise<GetLibraryRestoreStatusResponse> => {
+  const { data } = await getAuthenticatedHttpClient().get(getLibraryRestoreStatusApiUrl(taskId));
+  return data;
+};

src/library-authoring/create-library/data/restoreConstants.ts

@@ -0,0 +1,43 @@
+export interface CreateLibraryRestoreResponse {
+  task_id: string;
+}
+
+export interface LibraryRestoreResult {
+  learning_package_id: number;
+  title: string;
+  org: string;
+  slug: string;
+  key: string;
+  archive_key: string;
+  containers: number;
+  components: number;
+  collections: number;
+  sections: number;
+  subsections: number;
+  units: number;
+  created_on_server: string;
+  created_at: string;
+  created_by: {
+    username: string;
+    email: string;
+  };
+}
+
+export interface GetLibraryRestoreStatusResponse {
+  state: LibraryRestoreStatus;
+  result: LibraryRestoreResult | null;
+  error: string | null;
+  error_log: string | null;
+}
+
+export enum LibraryRestoreStatus {
+  Pending = 'Pending',
+  Succeeded = 'Succeeded',
+  Failed = 'Failed',
+}
+
+export const libraryRestoreQueryKeys = {
+  all: ['library-v2-restore'],
+  restoreStatus: (taskId: string) => [...libraryRestoreQueryKeys.all, 'status', taskId],
+  restoreMutation: () => [...libraryRestoreQueryKeys.all, 'create-restore'],
+};

src/library-authoring/create-library/data/restoreHooks.ts

@@ -0,0 +1,30 @@
+import { useMutation, useQuery } from '@tanstack/react-query';
+import { createLibraryRestore, getLibraryRestoreStatus } from './restoreApi';
+import {
+  CreateLibraryRestoreResponse,
+  GetLibraryRestoreStatusResponse,
+  libraryRestoreQueryKeys,
+  LibraryRestoreStatus,
+} from './restoreConstants';
+
+/**
+ * React Query hook to fetch restore status for a specific task
+ *
+ * @param taskId - The unique identifier of the restore task
+ *
+ * @example
+ * ```tsx
+ * const { data, isLoading, isError } = useGetLibraryRestoreStatus('task:456abc');
+ * ```
+ */
+export const useGetLibraryRestoreStatus = (taskId: string) => useQuery<GetLibraryRestoreStatusResponse, Error>({
+  queryKey: libraryRestoreQueryKeys.restoreStatus(taskId),
+  queryFn: () => getLibraryRestoreStatus(taskId),
+  enabled: !!taskId, // Only run the query if taskId is provided
+  refetchInterval: (query) => (query.state.data?.state === LibraryRestoreStatus.Pending ? 2000 : false),
+});
+
+export const useCreateLibraryRestore = () => useMutation<CreateLibraryRestoreResponse, Error, File>({
+  mutationKey: libraryRestoreQueryKeys.restoreMutation(),
+  mutationFn: createLibraryRestore,
+});

src/library-authoring/create-library/index.ts

@@ -1,2 +1,5 @@
 export { CreateLibrary } from './CreateLibrary';
 export { CreateLibraryModal } from './CreateLibraryModal';
+export { useCreateLibraryRestore, useGetLibraryRestoreStatus } from './data/restoreHooks';
+export { LibraryRestoreStatus } from './data/restoreConstants';
+export type { LibraryRestoreResult, GetLibraryRestoreStatusResponse } from './data/restoreConstants';