feat: Update file upload

Author: PintoGideon

.env

@@ -2,9 +2,9 @@
 BROWSER="chrome"
 
 # Set CHRIS_UI_URL to the url of the running CUBE API
-VITE_CHRIS_UI_URL="http://localhost:8000/api/v1/"
-VITE_CHRIS_UI_USERS_URL="http://localhost:8000/api/v1/users/"
-VITE_CHRIS_UI_AUTH_URL="http://localhost:8000/api/v1/auth-token/"
+VITE_CHRIS_UI_URL="http://rc-live.tch.harvard.edu:32222/api/v1/"
+VITE_CHRIS_UI_USERS_URL="http://rc-live.tch.harvard.edu:32222/api/v1/users/"
+VITE_CHRIS_UI_AUTH_URL="http://rc-live.tch.harvard.edu:32222/api/v1/auth-token/"
 VITE_ALPHA_FEATURES='production'
 
 # Set PFDCM_URL to the root url of the running pfdcm instance

package-lock.json

@@ -83,7 +83,6 @@
     "react-bootstrap-typeahead": "^6.2.3",
     "react-cookie": "^7.1.4",
     "react-dom": "^18.3.1",
-    "react-dropzone": "^14.2.3",
     "react-error-boundary": "^4.0.13",
     "react-force-graph-2d": "^1.25.3",
     "react-json-view": "^1.21.3",

package.json

@@ -24,7 +24,10 @@ import React, { useCallback, useContext, useEffect, useState } from "react";
 import { useTypedSelector } from "../../store/hooks";
 import GuidedConfig from "../AddNode/GuidedConfig";
 import { AddNodeContext } from "../AddNode/context";
-import { Types as AddNodeTypes, chooseConfigProps } from "../AddNode/types";
+import {
+  Types as AddNodeTypes,
+  type chooseConfigProps,
+} from "../AddNode/types";
 import DragAndUpload from "../DragFileUpload";
 import ChrisFileSelect from "./ChrisFileSelect";
 import DataPacks from "./DataPacks";
@@ -49,7 +52,6 @@ const ChooseConfig = ({
   const [currentStep, setCurrentStep] = useState(0);
   const params = useTypedSelector((state) => state.plugin.parameters);
   const [selectedCard, setSelectedCard] = useState("");
-  const [showDragAndDrop, setShowDragAndDrop] = useState(false);
 
   const handleClick = useCallback(
     (event: React.MouseEvent, selectedPluginId = "") => {
@@ -58,8 +60,6 @@ const ChooseConfig = ({
       setSelectedCard(selectedCard);
       if (selectedCard === "swift_storage" || selectedCard === "fs_plugin") {
         setRightDrawerExpand(true);
-      } else if (selectedCard === "local_select") {
-        setShowDragAndDrop(true);
       }
     },
     [],
@@ -81,7 +81,7 @@ const ChooseConfig = ({
         case "ArrowRight":
           if (
             selectedConfig.includes("fs_plugin") &&
-            params?.required.length != Object.keys(requiredInput).length
+            params?.required.length !== Object.keys(requiredInput).length
           ) {
             return;
           }
@@ -318,6 +318,7 @@ const ChooseConfig = ({
   const fileList =
     chrisFiles.length > 0
       ? chrisFiles.map((file: string, index: number) => (
+          // biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
           <React.Fragment key={index}>
             <FileList file={file} index={index} />
           </React.Fragment>
@@ -331,12 +332,6 @@ const ChooseConfig = ({
     };
   }, [handleKeyDown]);
 
-  useEffect(() => {
-    if (localFiles.length === 0) {
-      setShowDragAndDrop(false);
-    }
-  }, [localFiles.length]);
-
   return (
     <Drawer isExpanded={isRightDrawerExpand} position="right">
       <DrawerContent panelContent={panelContent}>
@@ -457,35 +452,7 @@ const ChooseConfig = ({
               <GridItem>
                 <Grid>
                   <GridItem style={{ height: "230px" }}>
-                    {!showDragAndDrop ? (
-                      <Card
-                        id="local_select"
-                        isSelectable={isDataSelected}
-                        style={cardContainerStyle}
-                        onClick={handleClick}
-                        isSelected={selectedConfig.includes("local_select")}
-                      >
-                        <CardHeader style={cardHeaderStyle}>
-                          <Tooltip content="Press the U key to select">
-                            <Chip key="KeyboardShortcut" isReadOnly>
-                              U
-                            </Chip>
-                          </Tooltip>
-                        </CardHeader>
-                        <CardTitle>
-                          <UploadIcon />
-                          <br />
-                          Upload New Data
-                        </CardTitle>
-                        <CardBody>
-                          Upload new files from your local computer
-                        </CardBody>
-                      </Card>
-                    ) : (
-                      <DragAndUpload
-                        handleLocalUploadFiles={handleFileUpload}
-                      />
-                    )}
+                    <DragAndUpload handleLocalUploadFiles={handleFileUpload} />
                   </GridItem>
                   <GridItem>
                     {localFiles.length > 0 ? <LocalFileUpload /> : null}

src/components/CreateFeed/ChooseConfig.tsx

@@ -1,15 +1,15 @@
 import React, { useState, useContext, useCallback, useEffect } from "react";
 import { CreateFeedContext } from "./context";
 import { useWizardContext } from "@patternfly/react-core";
-import { EventDataNode, Key } from "rc-tree/lib/interface";
+import type { EventDataNode, Key } from "rc-tree/lib/interface";
 import { Tree, notification } from "antd";
 
 import {
   Types,
-  Info,
-  DataBreadcrumb,
-  ChrisFileSelectProp,
-  CheckedKeys,
+  type Info,
+  type DataBreadcrumb,
+  type ChrisFileSelectProp,
+  type CheckedKeys,
 } from "./types/feed";
 import { generateTreeNodes, getNewTreeData } from "./utils";
 import { isEmpty } from "lodash";
@@ -119,7 +119,7 @@ const ChrisFileSelect: React.FC<ChrisFileSelectProp> = ({
       if (e.target.closest("INPUT")) return;
       if (chrisFiles.length > 0 && e.code == "ArrowRight") {
         onNext();
-      } else if (e.code == "ArrowLeft") {
+      } else if (e.code === "ArrowLeft") {
         onBack();
       }
     },

src/components/CreateFeed/ChrisFileSelect.tsx

@@ -1,23 +1,23 @@
-import { useEffect, useState, useContext, useRef, useCallback } from "react";
-import { PluginMeta } from "@fnndsc/chrisapi";
+import type { PluginMeta } from "@fnndsc/chrisapi";
 import {
-  Pagination,
-  ToolbarItem,
-  Radio,
   Button,
   ButtonVariant,
   InputGroup,
+  Pagination,
+  Radio,
   TextInput,
+  ToolbarItem,
   useWizardContext,
 } from "@patternfly/react-core";
-import { SearchIcon } from "../Icons";
-import { Types as AddNodeTypes } from "../AddNode/types";
-import { Types } from "./types/feed";
 import { notification } from "antd";
 import debounce from "lodash/debounce";
-import { getPlugins } from "./utils";
+import { useCallback, useContext, useEffect, useRef, useState } from "react";
 import { AddNodeContext } from "../AddNode/context";
+import { Types as AddNodeTypes } from "../AddNode/types";
+import { SearchIcon } from "../Icons";
 import { CreateFeedContext } from "./context";
+import { Types } from "./types/feed";
+import { getPlugins } from "./utils";
 
 interface FilterProps {
   perPage: number;
@@ -101,7 +101,7 @@ const DataPacks = ({ next }: { next: () => any }) => {
       });
 
       notification.info({
-        message: `Plugin Selected`,
+        message: "Plugin Selected",
         description: `${plugin.data.name} plugin unselected`,
         duration: 1,
       });
@@ -127,19 +127,21 @@ const DataPacks = ({ next }: { next: () => any }) => {
     (e: any, plugin: any = null) => {
       if (e.target.closest("INPUT#filter_plugin")) {
         return;
-      } else if (
+      }
+      if (
         e.target.closest("BUTTON") &&
         !e.target.closest("BUTTON.pf-c-button.pf-m-secondary") &&
         !e.target.closest("BUTTON.pf-c-button.pf-m-primary")
       ) {
         return;
-      } else if (e.code == "Enter" && e.target.closest("DIV.pf-c-radio")) {
+      }
+      if (e.code === "Enter" && e.target.closest("DIV.pf-c-radio")) {
         e.preventDefault();
-        if (pluginMeta == undefined) handleOnChange(true, plugin);
+        if (pluginMeta === undefined) handleOnChange(true, plugin);
         onNext();
-      } else if (pluginMeta && e.code == "ArrowRight") {
+      } else if (pluginMeta && e.code === "ArrowRight") {
         onNext();
-      } else if (e.code == "ArrowLeft") {
+      } else if (e.code === "ArrowLeft") {
         onBack();
       }
     },

src/components/CreateFeed/DataPacks.tsx

@@ -64,9 +64,9 @@ const FileUploadComponent = ({
 }: FileUploadProps) => {
   const handleKeyDown = useCallback(
     (e: any) => {
-      if (e.code == "ArrowLeft") {
+      if (e.code === "ArrowLeft") {
         onBack();
-      } else if (e.code == "ArrowRight" && localFiles.length > 0) {
+      } else if (e.code === "ArrowRight" && localFiles.length > 0) {
         onNext();
       }
     },

src/components/CreateFeed/LocalFileUpload.tsx

@@ -1,53 +1,43 @@
 .drag-and-upload-container {
-  position: relative;
-  height: 100%;
-  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  margin: 1rem 0;
 }
 
+/* The label or tag showing the 'U' key hint */
 .tag {
-  position: absolute;
-  top: 10%;
-  right: 8%;
-  background-color: #36b37e;
+  position: relative;
+  margin-bottom: 0.5rem;
+}
+.tag .tag-text {
+  background: #2188ff;
   color: white;
-  padding: 5px 10px;
+  padding: 0.25rem 0.5rem;
   border-radius: 4px;
+  font-weight: 600;
 }
 
-.tag-text {
-  font-weight: bold;
+/* The dashed dropzone area */
+.dropzone-area {
+  width: 350px;
+  height: 150px;
+  margin-bottom: 1rem;
+  text-align: center;
 }
 
-.drag-and-upload-container p {
-  margin-top: 1rem;
+/* Additional text styling inside the dropzone */
+.dropzone-area p {
+  margin: 0.5rem;
 }
-
-.drag-and-upload-container svg {
-  color: #6c757d;
-}
-
-/* Animation Styles */
-@keyframes fadeInUp {
-  from {
-    opacity: 0;
-    transform: translateY(20px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-/* Apply the animation to the drag-and-upload-section */
-.drag-and-upload-section {
-  animation: fadeInUp 0.5s ease-in-out;
-}
-
-/* Additional styling for animations/transitions */
-.tag {
-  transition: background-color 0.3s ease-in-out;
+.dropzone-area .text-subtle {
+  font-size: 0.85rem;
+  color: #666;
 }
 
-.drag-and-upload-container p {
-  transition: color 0.3s ease-in-out;
+/* Container for the two upload buttons */
+.button-container {
+  display: flex;
+  gap: 1rem;
 }