feat: generate enclave manager ui in build process and check prettier (…

…#1717)

## Description:
This pr includes the new enclave manager in the build process -
specifically in the `engine` build process. This removes the need to
commit the built emui to the codebase.

Additionally `yarn prettier` is added as a build step to the emui, which
will fail the build if prettier has not been run (as is currently the
case in main).

This change also includes a fix to all linting warnings, so that there
are no warnings in the production build.

## Is this change user facing?
NO

## References (if applicable):
* devconnect burndown

.circleci/config.yml

@@ -186,6 +186,9 @@ parameters:
   file-artifacts-expander-image-filename:
     type: string
     default: "file-artifacts-expander-image.tgz"
+  enclave-manager-yarn-cache-key-prefix:
+    type: string
+    default: "enclave-manager_yarn"
   engine-server-image-filename:
     type: string
     default: "engine-server-image.tgz"
@@ -394,6 +397,33 @@ jobs:
           paths:
             - "<< pipeline.parameters.core-server-image-filename >>"
 
+  build_enclave_manager_webapp:
+    executor: ubuntu_vm
+    steps:
+      - checkout
+
+      - <<: *abort_job_if_only_docs_changes
+
+      # Cache our dependencies
+      - restore_cache:
+          keys:
+            - << pipeline.parameters.enclave-manager-yarn-cache-key-prefix>>-{{ checksum "enclave-manager/api/typescript/yarn.lock" }}-{{ checksum "enclave-manager/web/yarn.lock" }}
+
+      - run: npm install -g yarn
+
+      - run: |
+          enclave-manager/scripts/build.sh
+
+      - save_cache:
+          key: << pipeline.parameters.enclave-manager-yarn-cache-key-prefix>>-{{ checksum "enclave-manager/api/typescript/yarn.lock" }}-{{ checksum "enclave-manager/web/yarn.lock" }}
+          paths:
+            - "/home/circleci/.cache/yarn"
+
+      - persist_to_workspace:
+          root: engine/server
+          paths:
+            - webapp
+
   build_engine_launcher:
     docker:
       - image: "cimg/go:<< pipeline.parameters.go-version >>"
@@ -416,6 +446,11 @@ jobs:
 
       - <<: *abort_job_if_only_docs_changes
 
+      - attach_workspace:
+          at: "<< pipeline.parameters.workspace-with-cli-binary-and-images-mountpoint >>"
+
+      - run: cp -R << pipeline.parameters.workspace-with-cli-binary-and-images-mountpoint >>/webapp engine/server/webapp
+
       # Generate Kurtosis Version
       - run: "<<pipeline.parameters.generate-kurtosis-version-script-path>>"
 
@@ -1235,6 +1270,11 @@ workflows:
               ignore:
                 - main
 
+      - build_enclave_manager_webapp:
+          filters:
+            branches:
+              ignore:
+                - main
       - build_engine_launcher:
           filters:
             branches:
@@ -1243,6 +1283,8 @@ workflows:
       - build_engine_server:
           context:
             - docker-user
+          requires:
+            - build_enclave_manager_webapp
           filters:
             branches:
               ignore:

enclave-manager/scripts/build.sh

@@ -0,0 +1,28 @@
+#!/usr/bin/env bash
+# 2021-07-08 WATERMARK, DO NOT REMOVE - This script was generated from the Kurtosis Bash script template
+
+set -euo pipefail   # Bash "strict mode"
+script_dirpath="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
+root_dirpath="$(dirname "${script_dirpath}")"
+
+
+
+# ==================================================================================================
+#                                             Constants
+# ==================================================================================================
+BUILD_SCRIPT_RELATIVE_FILEPATHS=(
+    "api/scripts/build.sh"
+    "web/scripts/build.sh"
+)
+
+
+# ==================================================================================================
+#                                             Main Logic
+# ==================================================================================================
+for build_script_rel_filepath in "${BUILD_SCRIPT_RELATIVE_FILEPATHS[@]}"; do
+    build_script_abs_filepath="${root_dirpath}/${build_script_rel_filepath}"
+    if ! bash "${build_script_abs_filepath}"; then
+        echo "Error: Build script '${build_script_abs_filepath}' failed" >&2
+        exit 1
+    fi
+done

enclave-manager/web/README.md

@@ -42,6 +42,18 @@ Your app is ready to be deployed!
 
 See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
 
+### `yarn prettier`
+
+Runs `prettier --check` to check that the code matches the formatting that [`prettier`](https://prettier.io/) would apply.
+
+### `yarn prettier:fix`
+
+Applies any formatting changes prettier wants to apply to this application. For ease of use you can use IDE integrations
+to auto apply prettier changes on file save, see instructions:
+
+- [Here](https://plugins.jetbrains.com/plugin/10456-prettier) for Intellij
+- [Here](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) for vscode
+
 ### `yarn eject`
 
 **Note: this is a one-way operation. Once you `eject`, you can’t go back!**

enclave-manager/web/package.json

@@ -45,11 +45,11 @@
   },
   "scripts": {
     "analyze": "source-map-explorer 'build/static/js/*.js'",
-    "prebuild": "rm -rf ../../engine/server/webapp",
     "clean": "rm -rf build",
     "cleanInstall": "rm -rf node_modules; yarn install",
     "start": "react-scripts start",
     "start:prod": "serve -s build",
+    "prebuild": "rm -rf ../../engine/server/webapp",
     "build": "react-scripts build",
     "postbuild": "cp -r build/ ../../engine/server/webapp",
     "prettier": "prettier . --check",

enclave-manager/web/scripts/build.sh

@@ -11,6 +11,7 @@ lang_root_dirpath="$(dirname "${script_dirpath}")"
 # ==================================================================================================
 cd "${lang_root_dirpath}"
 yarn install --frozen-lockfile
+yarn prettier
 # There are no unit tests currently
 # CGO_ENABLED=0 yarn test
 yarn clean

enclave-manager/web/src/components/LocationListener.tsx

@@ -5,13 +5,14 @@ import { useKurtosisClient } from "../client/enclaveManager/KurtosisClientContex
 export const LocationListener = () => {
   const client = useKurtosisClient();
   const navigate = useNavigate();
+  const cloudUrl = client.getCloudUrl();
 
   useEffect(() => {
-    if (client.getCloudUrl()) {
+    if (cloudUrl) {
       const route = client.getParentRequestedRoute();
       if (route) navigate(route);
     }
-  }, [client.getCloudUrl()]);
+  }, [cloudUrl, client, navigate]);
 
   return <></>;
 };

enclave-manager/web/src/components/enclaves/modals/ConfigureEnclaveModal.tsx

@@ -10,7 +10,8 @@ import {
   ModalHeader,
   ModalOverlay,
   Text,
-  Tooltip, useToast,
+  Tooltip,
+  useToast,
 } from "@chakra-ui/react";
 import { EnclaveMode } from "enclave-manager-sdk/build/engine_service_pb";
 import { useMemo, useRef, useState } from "react";
@@ -80,8 +81,6 @@ export const ConfigureEnclaveModal = ({
               return isDefined(value) ? `${value}` : "";
             case ArgumentValueType.STRING:
               return value || "";
-            case ArgumentValueType.JSON:
-              return isDefined(value) ? JSON.stringify(value) : "{}";
             case ArgumentValueType.LIST:
               assertDefined(innerType1, `Cannot parse a list argument type without knowing innerType1`);
               return isDefined(value) ? value.map((v: any) => convertArgValue(innerType1, v)) : [];
@@ -167,7 +166,9 @@ export const ConfigureEnclaveModal = ({
       }
     } catch (err) {
       toast({
-        title: `An error occurred while preparing data for running package. The package arguments were not proper JSON: ${stringifyError(err)}`,
+        title: `An error occurred while preparing data for running package. The package arguments were not proper JSON: ${stringifyError(
+          err,
+        )}`,
         colorScheme: "red",
       });
       return;

engine/server/.gitignore

@@ -0,0 +1,2 @@
+# The webapp is generated by the enclave-manager/web build process
+webapp/

scripts/build.sh

@@ -27,6 +27,7 @@ BUILD_SCRIPT_RELATIVE_FILEPATHS=(
     "api/scripts/build.sh"
     "metrics-library/scripts/build.sh"
     "core/scripts/build.sh"
+    "enclave-manager/scripts/build.sh"
     "engine/scripts/build.sh"
     "cli/scripts/build.sh"
 )