feat(web): New asset upload screen

web/package.json

@@ -8,12 +8,10 @@
   },
   "dependencies": {
     "@aws-amplify/ui-react": "^2.1.5",
-    "@awsui/collection-hooks": "^1.0.21",
-    "@awsui/components-react": "^3.0.288",
-    "@awsui/design-tokens": "^3.0.16",
-    "@awsui/global-styles": "^1.0.9",
     "@babylonjs/core": "^4.2.0",
+    "@cloudscape-design/collection-hooks": "^1.0.19",
     "@cloudscape-design/components": "^3.0.196",
+    "@cloudscape-design/design-tokens": "^3.0.8",
     "@types/styled-components": "^5.1.21",
     "arraybuffer-to-buffer": "^0.0.7",
     "aws-amplify": "4.3.39",

web/src/common/apply-mode.js

@@ -3,11 +3,11 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { applyMode, applyDensity } from "@awsui/global-styles";
+import { applyMode, applyDensity } from "@cloudscape-design/global-styles";
 import * as localStorage from "./localStorage";
 import { createPropertyStorage } from "./createPropertyStorage";
 
-import "@awsui/global-styles/index.css";
+import "@cloudscape-design/global-styles/index.css";
 
 export const densityLocalStorageKey = "Awsui-Density-Preference";
 export const densityStorage = createPropertyStorage(

web/src/components/form/FileUploadControl.js

@@ -23,7 +23,7 @@ const generateUUID = () => {
 };
 
 //@link https://stackoverflow.com/questions/10420352/converting-file-size-in-bytes-to-human-readable-string/10420404
-const formatFileSize = (bytes, si = false, dp = 1) => {
+export const formatFileSize = (bytes, si = false, dp = 1) => {
   const thresh = si ? 1000 : 1024;
   if (Math.abs(bytes) < thresh) {
     return bytes + " B";

web/src/components/list/TableList.js

@@ -5,7 +5,7 @@
 
 import React, { useEffect, useRef, useState } from "react";
 import PropTypes from "prop-types";
-import { useCollection } from "@awsui/collection-hooks";
+import { useCollection } from "@cloudscape-design/collection-hooks";
 import {
   Button,
   Grid,

web/src/components/selectors/PipelineSelector.js

@@ -23,7 +23,7 @@ const PipelineSelector = (props) => {
     if (reload) {
       getData();
     }
-  }, [reload]);
+  }, [reload, databaseId]);
 
   const SelectControl = (props) => {
     const { isMulti } = props;

web/src/components/single/Metadata.tsx

@@ -1,12 +1,13 @@
 import React, { useEffect, useState } from "react";
 import { API } from "aws-amplify";
 import { Box, Button, Header, Table, Input } from "@cloudscape-design/components";
+import { PunctuationSyntaxKind } from "typescript";
 
-class MetadataApi {
+export class MetadataApi {
     version!: string;
     metadata!: Metadata;
 }
-class Metadata {
+export class Metadata {
     [key: string]: string;
 }
 
@@ -17,7 +18,7 @@ class TableRow {
     type: string | null | undefined;
 }
 
-const put = async (databaseId: string, assetId: string, record: Metadata) => {
+export const put = async (databaseId: string, assetId: string, record: Metadata) => {
     if(Object.keys(record).length < 1) {
         return;
     }
@@ -35,9 +36,12 @@ const get = async (databaseId: string, assetId: string): Promise<object> => {
 class MetadataInputs {
     assetId!: string;
     databaseId!: string;
+    initialState?: Metadata;
+    store?: ((databaseId: string, assetId: string, record: Metadata) => Promise<any>);
 }
 
-const MetadataTable = ({ assetId, databaseId }: MetadataInputs) => {
+const MetadataTable = ({ assetId, databaseId, store, initialState }: MetadataInputs) => {
+    const _store = store !== undefined ? store : put;
     const tableRowToMeta = (rows: TableRow[]): Metadata => {
         const result: Metadata = {};
         rows.forEach((row) => {
@@ -68,6 +72,12 @@ const MetadataTable = ({ assetId, databaseId }: MetadataInputs) => {
             return;
         }
 
+        if(initialState !== undefined) {
+            setLoading(false);
+            setItems(metaToTableRow(initialState));
+            return;
+        }
+
         get(databaseId, assetId)
             .catch((x) => {
                 // if 404 , then set an initial status to empty
@@ -78,7 +88,7 @@ const MetadataTable = ({ assetId, databaseId }: MetadataInputs) => {
             .then((result) => {
                 setLoading(false);
                 const meta = result as MetadataApi;
-                if (meta.metadata) {
+                if (meta && meta.metadata) {
                     setItems(metaToTableRow(meta.metadata));
                 }
             });
@@ -168,7 +178,7 @@ const MetadataTable = ({ assetId, databaseId }: MetadataInputs) => {
                     }
                     setItems(next);
 
-                    await put(databaseId, assetId, tableRowToMeta(next));
+                    await _store(databaseId, assetId, tableRowToMeta(next));
                 }}
                 items={items}
                 columnDefinitions={[
@@ -187,6 +197,7 @@ const MetadataTable = ({ assetId, databaseId }: MetadataInputs) => {
                                 return (
                                     <Input
                                         autoFocus={true}
+                                        placeholder="Name"
                                         value={currentValue ?? item.name}
                                         onChange={(event) => {
                                             setValue(event.detail.value);
@@ -210,6 +221,7 @@ const MetadataTable = ({ assetId, databaseId }: MetadataInputs) => {
                                     <Input
                                         autoFocus={true}
                                         value={currentValue ?? item.description}
+                                        placeholder="Description"
                                         onChange={(event) => {
                                             const next = [...items];
                                             next[item.idx]["description"] = event.detail.value;

web/src/components/single/ViewAsset.js

@@ -369,8 +369,10 @@ export default function ViewAsset() {
                 <SpaceBetween direction="vertical" size="m">
                   <Container
                     header={
-                      <Grid gridDefinition={[{ colspan: 2 }, { colspan: 10 }]}>
-                        <Header variant="h2">Visualizer</Header>
+                      <Grid gridDefinition={[{ colspan: 3 }, { colspan: 9 }]}>
+                        <Box margin={{ bottom: "m" }}>
+                          <Header variant="h2">Visualizer</Header>
+                        </Box>
                         <SegmentedControl
                           label="Visualizer Control"
                           options={viewerOptions}

web/src/external/RelatedTableComponent/src/RelatedTable/Common/TreeLines.tsx

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import * as awsui from '@awsui/design-tokens';
+import * as awsui from '@cloudscape-design/design-tokens';
 import React from 'react';
 import { ITreeNode } from '../../Model/TreeNode';
 import { TreeLineModes } from '../../Model/TreeLineModes';

web/src/layout/Navigation.js

@@ -22,6 +22,7 @@ let navItems = [
     items: [
       { type: "link", text: "Databases", href: "/databases" },
       { type: "link", text: "Assets", href: "/assets" },
+      { type: "link", text: "Upload Asset", href: "/upload" },
     ],
   },
   {