Web: uploading config and blob from UI (#803)

CERT-Polska · Nov 3, 2023 · a450b83 · a450b83
1 parent f943ccc
commit a450b83
Show file tree

Hide file tree

Showing 21 changed files with 1,164 additions and 370 deletions.
diff --git a/mwdb/web/src/commons/api/index.tsx b/mwdb/web/src/commons/api/index.tsx
@@ -93,11 +93,14 @@ import {
     UpdateUserResponse,
     UploadFileResponse,
     UserRequestPasswordChangeResponse,
+    UploadFileRequest,
+    UploadConfigRequest,
+    UploadConfigResponse,
+    UploadBlobRequest,
+    UploadBlobResponse,
 } from "@mwdb-web/types/api";
 import {
-    Attribute,
     Capability,
-    Comment,
     CreateUser,
     ObjectLegacyType,
     ObjectType,
@@ -587,28 +590,44 @@ async function requestZipFileDownloadLink(id: string): Promise<string> {
     return `${baseURL}/file/${id}/download/zip?token=${response.data.token}`;
 }
 
-function uploadFile(
-    file: File,
-    parent: string,
-    upload_as: string,
-    attributes: Attribute[],
-    fileUploadTimeout: number,
-    share3rdParty: boolean
-): UploadFileResponse {
+function uploadFile(body: UploadFileRequest): UploadFileResponse {
+    const {
+        file,
+        parent,
+        shareWith,
+        attributes,
+        fileUploadTimeout,
+        share3rdParty,
+    } = body;
     let formData = new FormData();
-    formData.append("file", file);
+    formData.append("file", file!);
     formData.append(
         "options",
         JSON.stringify({
             parent: parent || null,
-            upload_as: upload_as,
+            upload_as: shareWith,
             attributes: attributes,
             share_3rd_party: share3rdParty,
         })
     );
     return axios.post(`/file`, formData, { timeout: fileUploadTimeout });
 }
 
+function uploadBlob(body: UploadBlobRequest): UploadBlobResponse {
+    const { name, shareWith, parent, type } = body;
+    return axios.post(`/blob`, {
+        ...body,
+        blob_name: name,
+        blob_type: type,
+        upload_as: shareWith,
+        parent: parent || null,
+    });
+}
+
+function uploadConfig(body: UploadConfigRequest): UploadConfigResponse {
+    return axios.post("/config", body);
+}
+
 function getRemoteNames(): GetRemoteNamesResponse {
     return axios.get("/remote");
 }
@@ -845,6 +864,8 @@ export const api = {
     requestFileDownloadLink,
     requestZipFileDownloadLink,
     uploadFile,
+    uploadBlob,
+    uploadConfig,
     getRemoteNames,
     pushObjectRemote,
     pullObjectRemote,

diff --git a/mwdb/web/src/commons/navigation/AppRoutes.tsx b/mwdb/web/src/commons/navigation/AppRoutes.tsx
@@ -15,8 +15,6 @@ import { RequiresAuth, RequiresCapability } from "../ui";
 import { RecentSamplesView } from "@mwdb-web/components/File/Views/RecentSamplesView";
 import { RecentConfigsView } from "@mwdb-web/components/Config/Views/RecentConfigsView";
 import { RecentBlobsView } from "@mwdb-web/components/Blob/Views/RecentBlobsView";
-import { SearchView } from "@mwdb-web/components/Views/SearchView";
-import { UploadView } from "@mwdb-web/components/Views/UploadView";
 import { ConfigStatsView } from "@mwdb-web/components/Config/Views/ConfigStatsView";
 import { DocsView } from "@mwdb-web/components/Views/DocsView";
 import { ShowSampleView } from "@mwdb-web/components/Views/ShowSampleView";
@@ -60,6 +58,10 @@ import { AttributeView } from "@mwdb-web/components/Settings/Views/AttributeView
 import { AttributeDetailsView } from "@mwdb-web/components/Settings/Views/AttributeDetailsView";
 import { AttributesPermissionsView } from "@mwdb-web/components/Settings/Views/AttributePermissionsView";
 import { AttributeEditTemplateView } from "@mwdb-web/components/Settings/Views/AttributeEditTemplateView";
+import { UploadConfigView } from "@mwdb-web/components/Upload/Views/UploadConfigView";
+import { UploadBlobView } from "@mwdb-web/components/Upload/Views/UploadBlobView";
+import { UploadFileView } from "@mwdb-web/components/Upload/Views/UploadFileView";
+import { SearchView } from "@mwdb-web/components/Views/SearchView";
 
 export function AppRoutes() {
     return (
@@ -81,7 +83,25 @@ export function AppRoutes() {
                     path="upload"
                     element={
                         <RequiresCapability capability={Capability.addingFiles}>
-                            <UploadView />
+                            <UploadFileView />
+                        </RequiresCapability>
+                    }
+                />
+                <Route
+                    path="blob_upload"
+                    element={
+                        <RequiresCapability capability={Capability.addingBlobs}>
+                            <UploadBlobView />
+                        </RequiresCapability>
+                    }
+                />
+                <Route
+                    path="config_upload"
+                    element={
+                        <RequiresCapability
+                            capability={Capability.addingConfigs}
+                        >
+                            <UploadConfigView />
                         </RequiresCapability>
                     }
                 />

diff --git a/mwdb/web/src/commons/ui/Label.tsx b/mwdb/web/src/commons/ui/Label.tsx
@@ -5,10 +5,11 @@ type Props = {
     required?: boolean;
     htmlFor?: string;
     className?: string;
+    children?: React.ReactNode;
 };
 
 export function Label(props: Props) {
-    const { label, required, htmlFor, className } = props;
+    const { label, required, htmlFor, className, children } = props;
 
     const setClassName = useCallback(() => {
         let result = "";
@@ -24,6 +25,7 @@ export function Label(props: Props) {
     return (
         <label className={setClassName()} htmlFor={htmlFor}>
             {label}
+            {children}
         </label>
     );
 }
diff --git a/mwdb/web/src/commons/ui/NavDropdown.tsx b/mwdb/web/src/commons/ui/NavDropdown.tsx
@@ -11,36 +11,32 @@ type Props = {
 export function NavDropdown(props: Props) {
     if (!props.elements.length) return <div />;
     return (
-        <li className="nav-item dropdown">
+        <div className="nav-item dropdown">
             <a
                 className="nav-link dropdown-toggle"
                 href="#dropdown"
                 role="button"
                 data-toggle="dropdown"
             >
-                {props.icon ? (
+                {props.icon && (
                     <FontAwesomeIcon
                         className="navbar-icon"
                         icon={props.icon}
                     />
-                ) : (
-                    []
                 )}
                 {props.title}
-                {props.badge ? (
+                {props.badge && (
                     <span
                         className="badge badge-pill badge-warning"
                         style={{ marginLeft: "8px" }}
                     >
                         {props.badge}
                     </span>
-                ) : (
-                    []
                 )}
             </a>
             <div className="dropdown-menu" aria-labelledby="navbarDropdown">
                 {props.elements}
             </div>
-        </li>
+        </div>
     );
 }
diff --git a/mwdb/web/src/components/DagreD3Plot.tsx b/mwdb/web/src/components/DagreD3Plot.tsx
@@ -60,7 +60,7 @@ export function DagreD3Plot(props: Props) {
             function NodeComponent() {
                 const Node = props.nodeComponent as any;
                 useEffect(() => {
-                    resolve();
+                    resolve(undefined);
                 }, []);
                 return <Node node={node} remotePath={remotePath} />;
             }

diff --git a/mwdb/web/src/components/Navigation.tsx b/mwdb/web/src/components/Navigation.tsx
@@ -14,12 +14,11 @@ import { ConfigContext } from "@mwdb-web/commons/config";
 import { fromPlugins, Extendable } from "@mwdb-web/commons/plugins";
 import { ConfirmationModal, NavDropdown } from "@mwdb-web/commons/ui";
 import { useRemote, useRemotePath } from "@mwdb-web/commons/remotes";
-import { Capability } from "@mwdb-web/types/types";
 
 import logo from "../assets/logo.png";
 import { AdminNav } from "./AdminNav";
 import { RemoteDropdown } from "./RemoteDropdown";
-import { UploadButton } from "./UploadButton";
+import { Upload } from "./Upload/common/Upload";
 
 export function Navigation() {
     const auth = useContext(AuthContext);
@@ -60,7 +59,7 @@ export function Navigation() {
                         </Link>
                     </li>
                     <li className="nav-item">
-                        <UploadButton />
+                        <Upload />
                     </li>
                 </Extendable>
             ) : (

diff --git a/mwdb/web/src/components/ShowObject/common/RelationsTab.tsx b/mwdb/web/src/components/ShowObject/common/RelationsTab.tsx
@@ -3,11 +3,9 @@ import { useContext } from "react";
 import { useSearchParams } from "react-router-dom";
 
 import { faProjectDiagram, faSearch } from "@fortawesome/free-solid-svg-icons";
-
-import { RelationsPlotView } from "../../Views/RelationsPlotView";
-
 import { ObjectContext } from "@mwdb-web/commons/context";
 import { ObjectAction, ObjectTab } from "@mwdb-web/commons/ui";
+import { RelationsPlotView } from "@mwdb-web/components/Views/RelationsPlotView";
 
 export function RelationsTab() {
     const context = useContext(ObjectContext);