Migrate Dashboard components to React components library

README.md

@@ -30,8 +30,18 @@ npm run bootstrap
 
 Now you are ready to develop one of the packages!
 
+### Build packages
+
+To build all packages, run:
+
+```bash
+npm run build
+```
+
 ### Run development mode
 
+> **NOTE:** It is recommended to [build packages](#build-packages) first to make sure all Dashboard dependencies are built.
+
 To run Dashboard with all related packages, run:
 
 ```bash
@@ -40,6 +50,8 @@ npm start
 
 This command watches for changes to Dashboard of any related packages to build them and live reload the page.
 
+> **NOTE:** As this command builds dependant packages and the Dashboard at the same time, the build result may be unpredictable because of some occasional race conditions. You may need to trigger rebuild to ensure the latest subpackages are taken into account during Dashboard build. To have a predictable setup, develop the subpackages and Dashboard in isolation.
+
 ### Test packages
 
 Runs tests in all packages, run:
@@ -56,14 +68,6 @@ To lint the source code of all packages, run:
 npm run lint
 ```
 
-### Build packages
-
-To build all packages, run:
-
-```bash
-npm run build
-```
-
 ### Publish packages
 
 To publish all public packages, on run:
@@ -72,6 +76,15 @@ To publish all public packages, on run:
 npm run publish
 ```
 
+### Update packages
+
+This repository uses [Lerna hoisting](https://github.com/lerna/lerna/blob/main/doc/hoist.md), which results in all dependencies installed on the root.
+
+To update packages, follow these steps:
+1. Adjust `package.json` files in the subdirectories if necessary.
+1. Delete root `package-lock.json` file,
+1. Run `npm run bootstrap`.
+
 ### Other commands
 
 #### `npm run setup-hooks`

dashboard/README.md

@@ -41,24 +41,6 @@ Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
 The page will reload if you make edits.
 You will also see any lint errors in the console.
 
-#### `npm run generate-graphql-hooks`
-
-Introspects schema of the Capact Gateway GraphQL endpoint and generates TypeScript types and React hooks for the operations defined in `*.graphql` files under `src` directory.
-
-Before you run this command, create the `.env` file for your environment. For local Capact with default user basic auth, use:
-
-```bash
-cat > .env << ENDOFFILE
-REACT_APP_CAPACT_GATEWAY_ENDPOINT="https://gateway.capact.local/graphql"
-REACT_APP_CAPACT_GATEWAY_ENDPOINT_AUTH_HEADER="Basic Z3JhcGhxbDp0MHBfczNjcjN0"
-ENDOFFILE
-```
-
-where:
-
-- `REACT_APP_CAPACT_GATEWAY_ENDPOINT` is the Capact Gateway endpoint URL,
-- `REACT_APP_CAPACT_GATEWAY_ENDPOINT_AUTH_HEADER` is the authorization header used for any request to Capact Gateway.
-
 ### `npm test`
 
 Runs tests in the directory.

dashboard/package.json

@@ -1,14 +1,12 @@
 {
   "name": "@capactio/dashboard-ui",
-  "version": "0.1.0",
+  "version": "0.0.1",
+  "private": true,
   "license": "Apache 2.0",
   "private": true,
   "dependencies": {
     "@ant-design/icons": "^4.7.0",
-    "@capactio/react-components": "^0.1.0",
-    "@graphql-codegen/typescript-react-query": "^3.2.1",
-    "@rjsf/antd": "^3.2.1",
-    "@rjsf/core": "^3.2.1",
+    "@capactio/react-components": "^0.0.1",
     "@testing-library/jest-dom": "^5.15.1",
     "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "^13.5.0",
@@ -17,24 +15,24 @@
     "@types/react": "^17.0.39",
     "@types/react-dom": "^17.0.11",
     "antd": "^4.18.5",
-    "graphql": "^16.2.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-query": "^3.33.7",
     "react-router-dom": "^6.0.0",
     "react-scripts": "5.0.0",
     "styled-components": "^5.3.3",
     "typescript": "^4.5.5",
+    "web-vitals": "^2.1.2",
+    "@rjsf/antd": "^3.2.1",
+    "@rjsf/core": "^3.2.1",
     "unique-names-generator": "^4.6.0",
-    "web-vitals": "^2.1.2"
+    "react-query": "^3.33.7"
   },
   "scripts": {
     "start": "react-scripts --max_old_space_size=4096 start",
     "build": "react-scripts --max_old_space_size=4096 build",
     "test": "CI=true react-scripts test --passWithNoTests",
     "test:watch": "react-scripts test",
     "eject": "react-scripts eject",
-    "generate-graphql": "set -o allexport;. .env; set +o allexport; graphql-codegen --config codegen.yml; prettier --write 'src/generated/**/*.{js,jsx,ts,tsx,json,css,scss,md,graphql}' 'graphql.schema.json'",
     "docker:build": "./scripts/build-image.sh",
     "docker:push": "./scripts/push-image.sh",
     "docker:save": "./scripts/save-image.sh",
@@ -53,10 +51,6 @@
     ]
   },
   "devDependencies": {
-    "@graphql-codegen/cli": "^2.3.0",
-    "@graphql-codegen/introspection": "^2.1.0",
-    "@graphql-codegen/typescript": "^2.4.1",
-    "@graphql-codegen/typescript-operations": "^2.2.1",
     "@types/styled-components": "^5.1.22",
     "@typescript-eslint/parser": "^5.8.0",
     "eslint-config-react-app": "^7.0.0"

dashboard/src/App.tsx

@@ -5,26 +5,35 @@ import NewAction from "./routes/new-action";
 import Actions from "./routes/actions";
 import Action from "./routes/action";
 import { Navigate, Route, Routes } from "react-router-dom";
-import NewInterfaceGroupCatalog from "./routes/hub-interface-groups";
-import NewInterfacesCatalog from "./routes/hub-interfaces";
+import InterfaceGroupCatalog from "./routes/hub-interface-groups";
+import InterfacesCatalog from "./routes/hub-interfaces";
 import { Layout } from "antd";
 import Menu from "./layout/Menu";
 import NotFoundPage from "./layout/NotFound";
-import { RequireAuthContainer } from "./auth/RequireAuth.container";
+import { RequireAuthContainer, LoginDetails } from "@capactio/react-components";
 import Header from "./layout/Header";
+import { loadRuntimeConfig } from "./config/runtime";
 
 function App() {
+
+  const { defaultGatewayEndpoint } = loadRuntimeConfig();
+  const defaultLoginDetails: LoginDetails = {
+    endpoint: defaultGatewayEndpoint,
+    username: "",
+    password: "",
+  }
+
   return (
-    <RequireAuthContainer>
+    <RequireAuthContainer defaultLoginDetails={defaultLoginDetails}>
       <Layout>
         <Header />
         <Layout>
           <Menu />
           <Routes>
             <Route path="/" element={<Navigate to="/hub/interface-groups" />} />
             <Route path="/hub/interface-groups">
-              <Route index element={<NewInterfaceGroupCatalog />} />
-              <Route path=":name" element={<NewInterfacesCatalog />} />
+              <Route index element={<InterfaceGroupCatalog />} />
+              <Route path=":name" element={<InterfacesCatalog />} />
             </Route>
             <Route path="actions">
               <Route index element={<Actions />} />

dashboard/src/index.tsx

@@ -1,14 +1,12 @@
 import React from "react";
 import ReactDOM from "react-dom";
 import { BrowserRouter } from "react-router-dom";
-import { QueryClient, QueryClientProvider } from "react-query";
 
 import "./index.css";
 import App from "./App";
 import reportWebVitals from "./reportWebVitals";
 import { ConfigProvider } from "antd";
-
-const queryClient = new QueryClient({});
+import { GraphQLClientProvider } from "@capactio/react-components";
 
 ConfigProvider.config({
   theme: {
@@ -19,9 +17,9 @@ ConfigProvider.config({
 ReactDOM.render(
   <React.StrictMode>
     <BrowserRouter>
-      <QueryClientProvider client={queryClient}>
+      <GraphQLClientProvider>
         <App />
-      </QueryClientProvider>
+      </GraphQLClientProvider>
     </BrowserRouter>
   </React.StrictMode>,
   document.getElementById("root")

dashboard/src/layout/Header.css

@@ -1,9 +1,3 @@
-.header {
-  width: 100%;
-  z-index: 100;
-  padding: 0 24px;
-}
-
 .header-logo {
   float: left;
   align-items: center;

dashboard/src/layout/Header.tsx

@@ -2,15 +2,15 @@ import React, { useContext } from "react";
 import "./Header.css";
 
 import { Layout, Menu } from "antd";
-import { AuthContext } from "../auth/AuthContext";
+import { AuthContext } from "@capactio/react-components";
 import {
   LogoutOutlined,
   QuestionCircleOutlined,
   UserOutlined,
 } from "@ant-design/icons";
-import SubMenu from "antd/lib/menu/SubMenu";
 import { Link } from "react-router-dom";
 
+const { SubMenu } = Menu;
 const { Header: AntHeader } = Layout;
 
 function Header() {

dashboard/src/routes/action.tsx

@@ -1,11 +1,13 @@
 import React from "react";
-import Page from "../layout/Page";
-
 import { Link, useParams } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 import { Breadcrumb } from "antd";
-import ActionContainer from "../actions/Action.container";
+import { ActionDetailsContainer } from "@capactio/react-components";
+import Page from "../layout/Page";
+import { loadRuntimeConfig } from "../config/runtime";
 
 function Action() {
+  const navigate = useNavigate();
   const { name } = useParams();
 
   const actionName = name ?? "";
@@ -22,9 +24,20 @@ function Action() {
     </Breadcrumb>
   );
 
+  const { queryRefetchIntervalMS, argoWorkflowsUIBaseURL } = loadRuntimeConfig();
+
+  const onDeleteAction = (_: string) => {
+    navigate("/actions");
+  }
+
   return (
     <Page breadcrumb={breadcrumb} title="Action details">
-      <ActionContainer name={actionName} />
+      <ActionDetailsContainer
+        name={actionName}
+        refetchInterval={queryRefetchIntervalMS}
+        argoWorkflowsUIBaseURL={argoWorkflowsUIBaseURL}
+        onDeleteAction={onDeleteAction}
+      />
     </Page>
   );
 }