chore: update awsui to cloudscape-design (#29)

Author: MikeDombo

src/main/js/dashboard-frontend/package.json

@@ -3,9 +3,9 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@awsui/components-react": "^3.0.166",
-    "@awsui/design-tokens": "^3.0.10",
-    "@awsui/global-styles": "^1.0.8",
+    "@cloudscape-design/components": "^3.0.240",
+    "@cloudscape-design/design-tokens": "^3.0.9",
+    "@cloudscape-design/global-styles": "^1.0.8",
     "ace-builds": "^1.4.12",
     "dagre-d3": "^0.6.4",
     "mutationobserver-shim": "^0.3.7",
@@ -38,7 +38,7 @@
     "prebuild": "rm -rf ../../resources/node; mkdir -p ../../resources/node; npm i",
     "build": "react-scripts build",
     "postbuild": "cp -r ./build ./dashboard-frontend; mv ./dashboard-frontend ../../resources/node",
-    "test": "react-scripts test --transformIgnorePatterns \"node_modules/(?!(@awsui/|entity-decode/))\"",
+    "test": "react-scripts test --transformIgnorePatterns \"node_modules/(?!(@cloudscape-design/|entity-decode/))\"",
     "eject": "react-scripts eject"
   },
   "eslintConfig": {

src/main/js/dashboard-frontend/src/__tests__/ComponentTable.test.tsx

@@ -14,7 +14,7 @@ import React from "react";
 
 import wrapper, {
   ElementWrapper,
-} from "@awsui/components-react/test-utils/dom";
+} from "@cloudscape-design/components/test-utils/dom";
 
 import 'mutationobserver-shim';
 import { render } from "@testing-library/react";

src/main/js/dashboard-frontend/src/__tests__/ConfigEditor.test.tsx

@@ -8,7 +8,7 @@ jest.mock("../index");
 
 import React from "react";
 
-import wrapper from "@awsui/components-react/test-utils/dom";
+import wrapper from "@cloudscape-design/components/test-utils/dom";
 
 import 'mutationobserver-shim';
 import { render } from "@testing-library/react";

src/main/js/dashboard-frontend/src/__tests__/DetailHeader.test.tsx

@@ -6,7 +6,7 @@
 import ServerEndpoint from "../communication/ServerEndpoint";
 import React from "react";
 
-import wrapper, {ElementWrapper,} from "@awsui/components-react/test-utils/dom";
+import wrapper, {ElementWrapper,} from "@cloudscape-design/components/test-utils/dom";
 
 import {render} from "@testing-library/react";
 import 'mutationobserver-shim';
@@ -32,43 +32,43 @@ test("Buttons are enabled based on service status", () => {
   SERVER.pushComponentUpdate(0);
   expect(
     // @ts-ignore
-    detailHeader.findButton(".start").getElement()
+    detailHeader.findButton("[data-testid=\"start-button\"]").getElement()
   ).not.toBeDisabled();
   expect(
     // @ts-ignore
-    detailHeader.findButton(".stop").getElement()
+    detailHeader.findButton("[data-testid=\"stop-button\"]").getElement()
   ).not.toBeDisabled();
 
   SERVER.pushComponentUpdate(1);
   expect(
     // @ts-ignore
-    detailHeader.findButton(".start").getElement()
+    detailHeader.findButton("[data-testid=\"start-button\"]").getElement()
   ).toBeDisabled();
   expect(
       // @ts-ignore
-    detailHeader.findButton(".stop").getElement()
+    detailHeader.findButton("[data-testid=\"stop-button\"]").getElement()
   ).not.toBeDisabled();
 
   SERVER.pushComponentUpdate(2);
   expect(
       // @ts-ignore
-    detailHeader.findButton(".start").getElement()
+    detailHeader.findButton("[data-testid=\"start-button\"]").getElement()
   ).not.toBeDisabled();
   expect(
     // @ts-ignore
-    detailHeader.findButton(".stop").getElement()
+    detailHeader.findButton("[data-testid=\"stop-button\"]").getElement()
   ).toBeDisabled();
 });
 
 test("Buttons function properly", (done) => {
   SERVER.pushComponentUpdate(0);
   const reqSpy = jest.spyOn(ServerEndpoint.prototype, "sendRequest");
   // @ts-ignore
-  detailHeader.findButton(".start").click();
+  detailHeader.findButton("[data-testid=\"start-button\"]").click();
   // @ts-ignore
-  detailHeader.findButton(".stop").click();
+  detailHeader.findButton("[data-testid=\"stop-button\"]").click();
   // @ts-ignore
-  detailHeader.findButton(".reinstall").click();
+  detailHeader.findButton("[data-testid=\"reinstall-button\"]").click();
   setTimeout(() => {
     expect(reqSpy).toHaveBeenNthCalledWith(1, {
       call: APICall.startComponent,

src/main/js/dashboard-frontend/src/components/Arch.tsx

@@ -4,7 +4,7 @@
  */
 
 import React, { Component } from "react";
-import {Box, ColumnLayout, Container, SpaceBetween} from "@awsui/components-react";
+import {Box, ColumnLayout, Container, Header, SpaceBetween} from "@cloudscape-design/components";
 import { SERVER } from "../index";
 import { APICall } from "../util/CommUtils";
 
@@ -72,20 +72,22 @@ class Arch extends Component {
     ];
 
     return (
-      <Container header={<h2>Device Details</h2>}>
-        <ColumnLayout columns={4} variant="text-grid">
-          {items.map((group) => (
-              <SpaceBetween size="xs">
-              {group.map((item) => (
-                <div>
-                  <Box margin={{bottom: "xxxs"}} color="text-label">{item.field}</Box>
-                  <div>{item.value}</div>
-                </div>
+        <Box padding={{top: "m"}}>
+          <Container header={<Header variant={"h2"}>Device Details</Header>}>
+            <ColumnLayout columns={4} variant="text-grid">
+              {items.map((group, index) => (
+                  <SpaceBetween size="xs" key={index}>
+                    {group.map((item) => (
+                        <div key={item.field}>
+                          <Box margin={{bottom: "xxxs"}} color="text-label">{item.field}</Box>
+                          <div>{item.value}</div>
+                        </div>
+                    ))}
+                  </SpaceBetween>
               ))}
-              </SpaceBetween>
-          ))}
-        </ColumnLayout>
-      </Container>
+            </ColumnLayout>
+          </Container>
+        </Box>
     );
   }
 }

src/main/js/dashboard-frontend/src/components/ComponentTable.tsx

@@ -16,14 +16,14 @@ import {
   SpaceBetween,
   StatusIndicator,
   Table
-} from "@awsui/components-react";
+} from "@cloudscape-design/components";
 
 import {ComponentItem} from "../util/ComponentItem";
 import {SERVER} from "../index";
 import {APICall} from "../util/CommUtils";
 import {SERVICE_ROUTE_HREF_PREFIX, USER_CREATED} from "../util/constNames";
-import {BoxProps} from "@awsui/components-react/box/interfaces";
-import {TableProps} from "@awsui/components-react/table";
+import {BoxProps} from "@cloudscape-design/components/box/interfaces";
+import {TableProps} from "@cloudscape-design/components/table";
 
 interface ServiceTableProps {
   title: string;

src/main/js/dashboard-frontend/src/components/Overview.tsx

@@ -7,23 +7,17 @@ import React, { Component } from "react";
 import ComponentTable from "./ComponentTable";
 import { ALL_DEP_GRAPH_NODES } from "../util/constNames";
 import DependencyGraph from "./details/DependencyGraph";
-import {Header} from "@awsui/components-react";
+import {Grid, Header} from "@cloudscape-design/components";
 
 class Overview extends Component {
   render() {
     return (
       <>
-        <Header variant={"h1"}>{`Local debug console`}</Header>
-        <div className="awsui-grid">
-          <div className="awsui-row">
-            <div className="col-12 col-l-8 col-xl-6">
-              <ComponentTable title="Components" />
-            </div>
-            <div className="col-12 col-l-8 col-xl-6">
-              <DependencyGraph rootComponent={ALL_DEP_GRAPH_NODES} />
-            </div>
-          </div>
-        </div>
+        <Header variant={"h1"}>Local debug console</Header>
+        <Grid gridDefinition={[{ colspan: {default: 12, l: 8, xl: 6} }, { colspan: {default: 12, l: 8, xl: 6} }]}>
+          <ComponentTable title="Components" />
+          <DependencyGraph rootComponent={ALL_DEP_GRAPH_NODES} />
+        </Grid>
       </>
     );
   }

src/main/js/dashboard-frontend/src/components/details/ComponentDetail.tsx

@@ -10,29 +10,25 @@ import { useHistory, withRouter } from "react-router-dom";
 import { SERVICE_ROUTE_HREF_PREFIX } from "../../util/constNames";
 import DetailHeader from "./DetailHeader";
 import DetailBody from "./DetailBody";
+import {Grid, SpaceBetween} from "@cloudscape-design/components";
 
 function ComponentDetail() {
   let service = useHistory().location.pathname.substring(
     SERVICE_ROUTE_HREF_PREFIX.length - 1
   );
 
   return (
-    <>
-      <DetailHeader service={service} />
-      <div className="awsui-grid">
-        <div className="awsui-row">
-          <div className="col-12 col-l-12 col-xl-12">
-            <DetailBody service={service} />
-          </div>
-          <div className="col-12 col-l-6 col-xl-6">
-            <ConfigEditor dark={false} service={service} />
-          </div>
-          <div className="col-12 col-l-6 col-xl-6">
-            <DependencyGraph rootComponent={service} />
-          </div>
-        </div>
-      </div>
-    </>
+    <SpaceBetween size={"m"}>
+      <DetailHeader service={service}/>
+      <Grid gridDefinition={[{colspan: {default: 12, l: 12, xl: 12}},
+        {colspan: {default: 12, l: 6, xl: 6}}, {
+          colspan: {default: 12, l: 6, xl: 6}
+        }]}>
+          <DetailBody service={service} />
+          <ConfigEditor dark={false} service={service} />
+          <DependencyGraph rootComponent={service} />
+      </Grid>
+    </SpaceBetween>
   );
 }
 

src/main/js/dashboard-frontend/src/components/details/ConfigEditor.tsx

@@ -18,7 +18,7 @@ import {
   FlashbarProps,
   Header,
   Spinner,
-} from "@awsui/components-react";
+} from "@cloudscape-design/components";
 
 interface ConfigEditorProps {
   dark: boolean;

src/main/js/dashboard-frontend/src/components/details/DependencyGraph.tsx

@@ -6,7 +6,7 @@
 import React, { Component, createRef } from "react";
 import { withRouter } from "react-router-dom";
 
-import { Container, Header } from "@awsui/components-react";
+import { Container, Header } from "@cloudscape-design/components";
 import * as d3 from "d3";
 import dagreD3 from "dagre-d3";
 import { ComponentItem } from "../../util/ComponentItem";

src/main/js/dashboard-frontend/src/components/details/DetailBody.tsx

@@ -9,11 +9,11 @@ import {
   ColumnLayout,
   Container,
   Popover, SpaceBetween, StatusIndicator, StatusIndicatorProps
-} from "@awsui/components-react";
+} from "@cloudscape-design/components";
 import { ComponentItem } from "../../util/ComponentItem";
 import { SERVER } from "../../index";
 import { APICall } from "../../util/CommUtils";
-import {BoxProps} from "@awsui/components-react/box/interfaces";
+import {BoxProps} from "@cloudscape-design/components/box/interfaces";
 
 interface DetailBodyProps {
   service: string;

src/main/js/dashboard-frontend/src/components/details/DetailHeader.tsx

@@ -6,7 +6,7 @@
 import React, { Component } from "react";
 import { SERVER } from "../../index";
 import { APICall } from "../../util/CommUtils";
-import {Button, Header, SpaceBetween, StatusIndicatorProps} from "@awsui/components-react";
+import {Button, Header, SpaceBetween, StatusIndicatorProps} from "@cloudscape-design/components";
 import { ComponentItem } from "../../util/ComponentItem";
 
 interface DetailHeaderProps {
@@ -96,23 +96,24 @@ export default class DetailHeader extends Component<
   render() {
     return (
       <Header
+        variant={"h1"}
         actions={
           <SpaceBetween direction={"horizontal"} size={"xs"}>
             <Button
-              className="start"
               disabled={!this.state.service.canStart}
               onClick={this.onStartClick}
+              data-testid={"start-button"}
             >
               Start
             </Button>
             <Button
-              className="stop"
               disabled={!this.state.service.canStop}
               onClick={this.onStopClick}
+              data-testid={"stop-button"}
             >
               Stop
             </Button>
-            <Button className="reinstall" onClick={this.onReinstallClick}>
+            <Button onClick={this.onReinstallClick} data-testid={"reinstall-button"}>
               Reinstall
             </Button>
           </SpaceBetween>

src/main/js/dashboard-frontend/src/index.tsx

@@ -11,8 +11,8 @@ import { HashRouter, Route, Switch, Redirect } from "react-router-dom";
 import { routes } from "./navigation/constRoutes";
 import NavSideBar from "./navigation/NavSideBar";
 
-import '@awsui/global-styles/index.css';
-import {AppLayout, Flashbar, FlashbarProps} from "@awsui/components-react";
+import "@cloudscape-design/global-styles/index.css"
+import {AppLayout, Flashbar, FlashbarProps} from "@cloudscape-design/components";
 import ServerEndpoint from "./communication/ServerEndpoint";
 import Breadcrumbs from "./navigation/Breadcrumbs";
 import { SERVICE_ROUTE_HREF_PREFIX } from "./util/constNames";
@@ -21,6 +21,7 @@ export var SERVER: ServerEndpoint;
 
 interface AppState {
     flashItems: FlashbarProps.MessageDefinition[];
+    navigationOpen: boolean;
 }
 
 class App extends Component<any, AppState> {
@@ -30,7 +31,8 @@ class App extends Component<any, AppState> {
     SERVER = new ServerEndpoint(window.WEBSOCKET_PORT, window.USERNAME, window.PASSWORD, 5, this.websocketError);
 
     this.state = {
-        flashItems: []
+        flashItems: [],
+        navigationOpen: true,
     };
   }
 
@@ -59,11 +61,11 @@ class App extends Component<any, AppState> {
     return (
       <HashRouter>
         <AppLayout
-          className="app"
           navigation={<NavSideBar />}
           breadcrumbs={<Breadcrumbs />}
           notifications={<Flashbar items={this.state.flashItems} />}
-          navigationOpen={true}
+          navigationOpen={this.state.navigationOpen}
+          onNavigationChange={(e) => this.setState({navigationOpen: e.detail.open})}
           toolsHide={true}
           contentType="default"
           content={

src/main/js/dashboard-frontend/src/navigation/Breadcrumbs.tsx

@@ -6,9 +6,9 @@
 import React from "react";
 import { useLocation } from "react-router-dom";
 import { routes } from "./constRoutes";
-import { BreadcrumbGroup } from "@awsui/components-react";
+import { BreadcrumbGroup } from "@cloudscape-design/components";
 import { PROJECT_NAME, SERVICE_ROUTE_HREF_PREFIX } from "../util/constNames";
-import {BreadcrumbGroupProps} from "@awsui/components-react/breadcrumb-group/interfaces";
+import {BreadcrumbGroupProps} from "@cloudscape-design/components/breadcrumb-group/interfaces";
 
 export function findTitle(href: string) {
   if (href.startsWith(SERVICE_ROUTE_HREF_PREFIX))

src/main/js/dashboard-frontend/src/navigation/NavSideBar.tsx

@@ -6,7 +6,7 @@
 import React from "react";
 import { withRouter, useHistory } from "react-router-dom";
 
-import {SideNavigation, SideNavigationProps} from "@awsui/components-react";
+import {SideNavigation, SideNavigationProps} from "@cloudscape-design/components";
 import { routes } from "./constRoutes";
 import { PROJECT_NAME } from "../util/constNames";
 

src/main/js/dashboard-frontend/src/styles/dependency-graph.scss

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-@import '~@awsui/design-tokens/index.scss';
+@import '~@cloudscape-design/design-tokens/index.scss';
 
 .holder {
   overflow-x: scroll;

src/main/js/dashboard-frontend/src/util/ComponentItem.ts

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import {StatusIndicatorProps} from "@awsui/components-react/status-indicator/internal";
+import {StatusIndicatorProps} from "@cloudscape-design/components/status-indicator/internal";
 
 export class ComponentItem {
   name: string;