FWF-5276:[V8Feature] - Form Edit Actions MF

Author: Josephalexantony-aot

forms-flow-components/src/components/CustomComponents/FileUploadArea.tsx

@@ -25,6 +25,7 @@ interface FileUploadAreaProps extends Omit<React.ComponentPropsWithoutRef<"div">
   onDone?: () => void;
   /** Currently selected file */
   file: File | null;
+  primaryButtonText: string;
   /** Upload progress (0-100) */
   progress: number;
   /** Error message if upload fails */
@@ -62,6 +63,7 @@ const FileUploadAreaComponent = forwardRef<HTMLDivElement, FileUploadAreaProps>(
   dataTestId,
   className = "",
   maxFileSizeMB = 20,
+  primaryButtonText = "Done",
   ...restProps
 }, ref) => {
   const { t } = useTranslation();
@@ -172,115 +174,111 @@ const FileUploadAreaComponent = forwardRef<HTMLDivElement, FileUploadAreaProps>(
     </>
   ), [fileInputId, handleChange, fileType, t, maxFileSizeMB]);
 
-  // Memoized upload status component
-  const renderUploadStatus = useCallback(() => {
-    // Map states to config
-    const stateConfig = {
-      uploading: {
-        status: t(`Importing ${file?.name}`),
-        label: t("Cancel"),
-        onClick: () => onCancel?.(),
-      },
-      error: {
-        status: t("There was an error in the upload"),
-        label: t("Try Again"),
-        onClick: () => file && onRetry?.(file),
-      },
-      completed: {
-        status: t("Upload Complete!"),
-        label: t("Done"),
-        onClick: () => onDone?.(),
-      },
-    };
+    const renderUploadStatus = useCallback(() => {
+      return (
+        <div
+          className="upload-progress-section"
+          aria-label={t("File upload progress")}
+          data-testid="file-upload-progress"
+        >
+          <FileUploadIcon aria-hidden="true" />
+
+          <div
+            className="upload-progress-bar"
+            aria-label={t("Upload progress bar")}
+            data-testid="file-upload-progress-bar"
+          >
+            <CustomProgressBar
+              progress={progress}
+              color={uploadState.isError ? "error" : undefined}
+            />
+          </div>
+
+          <p className="upload-status" aria-live="polite">
+            {uploadState.isUploading
+              ? t(`Importing ${file?.name}`)
+              : uploadState.isError
+              ? t("There was an error in the upload")
+              : t("Upload Complete!")}
+          </p>
+        </div>
+      );
+    }, [uploadState, file, progress, t]);
 
-    // Determine current state
-    const current =
-      uploadState.isUploading
-        ? stateConfig.uploading
-        : uploadState.isError && file
-        ? stateConfig.error
-        : uploadState.isCompleted
-        ? stateConfig.completed
-        : null;
+    const containerClassName = useMemo(
+      () =>
+        buildClassNames(
+          "file-upload",
+          uploadState.hasFile && "file-upload-progress",
+          isDragOver && "file-upload-dragover",
+          className
+        ),
+      [uploadState.hasFile, isDragOver, className]
+    );
 
     return (
       <div
-        className="upload-progress"
-        aria-label={t("File upload progress")}
-        data-testid="file-upload-progress"
+        ref={ref}
+        role="button"
+        data-testid={dataTestId || "file-upload-container"}
+        className={containerClassName}
+        tabIndex={0}
+        onDragOver={handleDragOver}
+        onDragLeave={handleDragLeave}
+        onDrop={handleDrop}
+        onClick={handleAreaClick}
+        onKeyDown={handleKeyDown}
+        aria-label={ariaLabel || t("Upload file area")}
+        {...restProps}
       >
-        <FileUploadIcon aria-hidden="true" />
-
-        <div
-          className="upload-progress-bar"
-          aria-label={t("Upload progress bar")}
-          data-testid="file-upload-progress-bar"
-        >
-          <CustomProgressBar 
-            progress={progress} 
-            color={uploadState.isError ? "error" : undefined}
-          />
-        </div>
+        {!uploadState.hasFile ? (
+          renderUploadPrompt()
+        ) : (
+          <div className="upload-status-section">
+            {renderUploadStatus()}
 
-        {/* Status text */}
-        {current?.status && (
-          <p
-            className="upload-status"
-            aria-live="polite"
-            data-testid="file-upload-status"
-          >
-            {current.status}
-          </p>
-        )}
+            {(uploadState.isUploading ||
+              uploadState.isCompleted ||
+              uploadState.isError) && (
+              <div className="upload-action-row">
 
-        {/* Action button */}
-        {current && (
-          <V8CustomButton
-            className="file-upload-action-btn"
-            label={current.label}
-            onClick={current.onClick}
-            ariaLabel={current.label}
-            dataTestId="file-upload-action-btn"
-            variant="secondary"
-          />
+                {uploadState.isError && file && (
+                  <V8CustomButton
+                    className="file-upload-action-btn"
+                    label={t("Try Again")}
+                    onClick={() => onRetry?.(file)}
+                    ariaLabel={t("Try Again")}
+                    dataTestId="file-upload-retry-btn"
+                    variant="primary"
+                  />
+                )}
+                {uploadState.isCompleted && (
+                  <V8CustomButton
+                    className="file-upload-action-btn"
+                    label={t(primaryButtonText)}
+                    onClick={onDone}
+                    ariaLabel={t(primaryButtonText)}
+                    dataTestId="file-upload-action-btn"
+                    variant="primary"
+                  />
+                )}
+               {(uploadState.isUploading || uploadState.isCompleted) && (<V8CustomButton
+                    className="file-upload-action-btn"
+                    label="Cancel"
+                    onClick={onCancel}
+                    ariaLabel="Cancel File Upload"
+                    dataTestId="file-upload-cancel-btn"
+                    variant="secondary"
+                  />)}
+                </div>
+            )}
+          </div>
         )}
       </div>
     );
-  }, [uploadState, file, progress, t, onCancel, onRetry, onDone]);
-
-  // Memoized container className
-  const containerClassName = useMemo(() => buildClassNames(
-    "file-upload",
-    uploadState.hasFile && "file-upload-progress",
-    isDragOver && "file-upload-dragover",
-    className
-  ), [uploadState.hasFile, isDragOver, className]);
-
-  return (
-    <div
-      ref={ref}
-      role="button"
-      data-testid={dataTestId || "file-upload-container"}
-      className={containerClassName}
-      tabIndex={0}
-      onDragOver={handleDragOver}
-      onDragLeave={handleDragLeave}
-      onDrop={handleDrop}
-      onClick={handleAreaClick}
-      onKeyDown={handleKeyDown}
-      aria-label={ariaLabel || t("Upload file area")}
-      {...restProps}
-    >
-      {!uploadState.hasFile ? renderUploadPrompt() : renderUploadStatus()}
-    </div>
-  );
-});
+  }
+);
 
-// Set display name for better debugging
 FileUploadAreaComponent.displayName = "FileUploadArea";
-
-// Export memoized component for performance optimization
 export const FileUploadArea = memo(FileUploadAreaComponent);
-
-// Export types for consumers
 export type { FileUploadAreaProps };

forms-flow-components/src/components/CustomComponents/FileUploadPanel.tsx

@@ -0,0 +1,152 @@
+import React, { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { FileUploadArea } from "./FileUploadArea";
+
+interface FileItem {
+  form?: {
+    majorVersion: number;
+    minorVersion: number;
+  };
+  workflow?: {
+    majorVersion: number;
+    minorVersion: number;
+  };
+}
+
+interface CustomProgressBarProps {
+  progress: number;
+  color: string;
+}
+
+interface ProcessVersion {
+  majorVersion: number;
+  minorVersion: number;
+  type: string;
+}
+
+interface FileUploadPanelProps {
+  onClose: () => void;
+  uploadActionType: {
+    IMPORT: string;
+    VALIDATE: string;
+  };
+  importError: string | null;
+  importLoader: boolean;
+  formName: string;
+  description: string;
+  handleImport: (
+    file: File,
+    uploadActionType: string,
+    layoutVersion: string | null,
+    flowVersion: string | null
+  ) => void;
+  fileItems: FileItem | null;
+  fileType: string;
+  primaryButtonText: string;
+  headerText: string;
+  processVersion: ProcessVersion | null;
+  CustomProgressBarProps?: CustomProgressBarProps | null;
+}
+
+const FileUploadPanel: React.FC<FileUploadPanelProps> = React.memo(
+  ({
+    uploadActionType,
+    importError,
+    handleImport,
+    fileItems,
+    fileType,
+    primaryButtonText,
+  }) => {
+    const { t } = useTranslation();
+    const [selectedFile, setSelectedFile] = useState<File | null>(null);
+    const [uploadProgress, setUploadProgress] = useState(0);
+
+    const selectedLayoutVersion =       {
+      value: "minor",
+      label: t(
+        `import as version ${fileItems?.form?.majorVersion}.${
+          fileItems?.form?.minorVersion + 1
+        }  (impacts previous and new submissions)`
+      ),
+    };
+
+    const selectedFlowVersion = { value: "true", label: t("Skip, do not import") };
+    const resetState = () => {
+      setSelectedFile(null);
+      setUploadProgress(0);
+    };
+
+    const onImport = () => {
+      if (selectedFile) {
+        handleImport(
+          selectedFile,
+          uploadActionType.IMPORT,
+          selectedLayoutVersion?.value,
+          selectedFlowVersion?.value
+        );
+      }
+    };
+
+    const handleRetry = () => {
+      if (selectedFile) {
+        handleImport(
+          selectedFile,
+          uploadActionType.VALIDATE,
+          selectedLayoutVersion?.value ?? null,
+          selectedFlowVersion?.value ?? null
+        );
+      }
+    };
+
+    useEffect(() => {
+      let isMounted = true;
+      if (selectedFile) {
+        handleRetry();
+        let start: number | null = null;
+        const duration = 2000;
+        const maxProgress = importError ? 50 : 100;
+
+        const animateProgress = (timestamp: number) => {
+          if (!isMounted) return;
+          if (!start) start = timestamp;
+          const progress = Math.min(
+            ((timestamp - start) / duration) * maxProgress,
+            maxProgress
+          );
+          setUploadProgress(progress);
+          if (progress < maxProgress) {
+            requestAnimationFrame(animateProgress);
+          }
+        };
+
+        const animation = requestAnimationFrame(animateProgress);
+        return () => {
+          isMounted = false;
+          cancelAnimationFrame(animation);
+        };
+      }
+    }, [selectedFile, importError]);
+    return (
+      <div className="import-section-container p-4">
+
+        <div className="import-section-body">
+          <div className="d-flex justify-content-center mb-3">
+            <FileUploadArea
+              primaryButtonText={primaryButtonText}
+              fileType={fileType}
+              onFileSelect={setSelectedFile}
+              file={selectedFile}
+              progress={uploadProgress}
+              error={importError}
+              onRetry={handleRetry}
+              onCancel={resetState}
+              onDone={onImport}
+            />
+          </div>
+        </div>
+      </div>
+    );
+  }
+);
+
+export default FileUploadPanel;

forms-flow-components/src/components/CustomComponents/ImportModal.tsx

@@ -461,6 +461,7 @@ export const ImportModal: React.FC<ImportModalProps> = React.memo(
         <Modal.Body className="p-5">
           <div className="d-flex justify-content-center">
           <FileUploadArea
+            primaryButtonText={primaryButtonText}
             fileType={fileType}
             onFileSelect={setSelectedFile}
             file={selectedFile}