From 4fc6b1a193b575ac201a09cfe4a896c549ce1f6d Mon Sep 17 00:00:00 2001
From: jasquat <2487833+jasquat@users.noreply.github.com>
Date: Thu, 8 Jun 2023 17:26:14 -0400
Subject: [PATCH] use carbon components when adding secrets (#312)

* use carbon components when adding secrets

* docker compose pull before running up w/ burnettk

* use all carbon on script task unit test modal w/ burnettk

* removed remaining references to bootstrap from frontend w/ burnettk

* updated usage of hidden to use the class instead of the bootstrap attribute w/ burnettk

* print out docker version for debugging

* docker pull with docker instead of compose

* added comment for docker pull in check docker start script

---------

Co-authored-by: jasquat <jasquat@users.noreply.github.com>
---
 .../bin/build_and_run_with_docker_compose     |   5 +
 spiffworkflow-frontend/package-lock.json      | 390 ++----------------
 spiffworkflow-frontend/package.json           |   3 -
 .../src/components/NavigationBar.tsx          |  10 -
 .../src/components/ProcessGroupListTiles.tsx  |   2 +-
 .../components/ProcessInstanceListTable.tsx   |   2 -
 .../src/components/TaskListTable.tsx          |  17 +-
 spiffworkflow-frontend/src/index.css          |   4 +
 spiffworkflow-frontend/src/index.tsx          |   1 -
 .../src/routes/HomePageRoutes.tsx             |   1 -
 .../src/routes/ProcessInstanceList.tsx        |   2 -
 .../src/routes/ProcessModelEditDiagram.tsx    | 167 ++++----
 .../src/routes/SecretNew.tsx                  |  85 ++--
 13 files changed, 193 insertions(+), 496 deletions(-)

diff --git a/spiffworkflow-backend/bin/build_and_run_with_docker_compose b/spiffworkflow-backend/bin/build_and_run_with_docker_compose
index 58fd61f04..fbc243835 100755
--- a/spiffworkflow-backend/bin/build_and_run_with_docker_compose
+++ b/spiffworkflow-backend/bin/build_and_run_with_docker_compose
@@ -19,6 +19,8 @@ if [[ "${RUN_WITH_DAEMON:-}" != "false" ]]; then
   additional_args="${additional_args} -d"
 fi
 
+docker --version
+
 docker compose --profile "$SPIFFWORKFLOW_BACKEND_DOCKER_COMPOSE_PROFILE" build
 docker compose --profile "$SPIFFWORKFLOW_BACKEND_DOCKER_COMPOSE_PROFILE" stop
 
@@ -37,4 +39,7 @@ if [[ "${SPIFFWORKFLOW_BACKEND_RECREATE_DATABASE:-}" == "true" ]]; then
   docker volume rm spiffworkflow-backend_spiffworkflow_backend || echo 'docker volume not found'
 fi
 
+# docker compose isn't automatically pulling the image in ci so do it explicitly with docker
+docker pull mysql:8.0.29
+
 docker compose --profile "$SPIFFWORKFLOW_BACKEND_DOCKER_COMPOSE_PROFILE" up --wait $additional_args
diff --git a/spiffworkflow-frontend/package-lock.json b/spiffworkflow-frontend/package-lock.json
index ff61eea42..b910caf5c 100644
--- a/spiffworkflow-frontend/package-lock.json
+++ b/spiffworkflow-frontend/package-lock.json
@@ -35,7 +35,6 @@
         "@uiw/react-md-editor": "^3.20.2",
         "autoprefixer": "10.4.8",
         "axios": "^0.27.2",
-        "bootstrap": "^5.2.0",
         "bpmn-js": "^13.0.0",
         "bpmn-js-properties-panel": "^1.22.0",
         "bpmn-js-spiffworkflow": "github:sartography/bpmn-js-spiffworkflow#main",
@@ -51,8 +50,6 @@
         "keycloak-js": "^18.0.1",
         "prop-types": "^15.8.1",
         "react": "^18.2.0",
-        "react-bootstrap": "^2.5.0",
-        "react-bootstrap-typeahead": "^6.0.0",
         "react-datepicker": "^4.8.0",
         "react-devtools": "^4.27.1",
         "react-dom": "^18.2.0",
@@ -4967,17 +4964,6 @@
         "url": "https://opencollective.com/popperjs"
       }
     },
-    "node_modules/@react-aria/ssr": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.6.0.tgz",
-      "integrity": "sha512-OFiYQdv+Yk7AO7IsQu/fAEPijbeTwrrEYvdNoJ3sblBBedD5j5fBTNWrUPNVlwC4XWWnWTCMaRIVsJujsFiWXg==",
-      "dependencies": {
-        "@swc/helpers": "^0.4.14"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
-      }
-    },
     "node_modules/@react-icons/all-files": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/@react-icons/all-files/-/all-files-4.1.0.tgz",
@@ -4994,37 +4980,6 @@
         "node": ">=14"
       }
     },
-    "node_modules/@restart/hooks": {
-      "version": "0.4.9",
-      "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.4.9.tgz",
-      "integrity": "sha512-3BekqcwB6Umeya+16XPooARn4qEPW6vNvwYnlofIYe6h9qG1/VeD7UvShCWx11eFz5ELYmwIEshz+MkPX3wjcQ==",
-      "dependencies": {
-        "dequal": "^2.0.2"
-      },
-      "peerDependencies": {
-        "react": ">=16.8.0"
-      }
-    },
-    "node_modules/@restart/ui": {
-      "version": "1.6.3",
-      "resolved": "https://registry.npmjs.org/@restart/ui/-/ui-1.6.3.tgz",
-      "integrity": "sha512-7HM5aiSWvJBWr+FghZj/n3PSuH2kUrOPiu/D92aIv1zTL8IBwFoQ3oz/f76svoN5v2PKaP6pQbg6vTcIiSffzg==",
-      "dependencies": {
-        "@babel/runtime": "^7.21.0",
-        "@popperjs/core": "^2.11.6",
-        "@react-aria/ssr": "^3.5.0",
-        "@restart/hooks": "^0.4.9",
-        "@types/warning": "^3.0.0",
-        "dequal": "^2.0.3",
-        "dom-helpers": "^5.2.0",
-        "uncontrollable": "^7.2.1",
-        "warning": "^4.0.3"
-      },
-      "peerDependencies": {
-        "react": ">=16.14.0",
-        "react-dom": ">=16.14.0"
-      }
-    },
     "node_modules/@rjsf/core": {
       "version": "5.0.0-beta.20",
       "resolved": "https://registry.npmjs.org/@rjsf/core/-/core-5.0.0-beta.20.tgz",
@@ -5435,14 +5390,6 @@
         "url": "https://github.com/sponsors/gregberge"
       }
     },
-    "node_modules/@swc/helpers": {
-      "version": "0.4.14",
-      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.4.14.tgz",
-      "integrity": "sha512-4C7nX/dvpzB7za4Ql9K81xK3HPxCpHMgwTZVyf+9JQ6VUbn9jjZVN7/Nkdz/Ugzs2CSjqnL/UPXroiVBVHUWUw==",
-      "dependencies": {
-        "tslib": "^2.4.0"
-      }
-    },
     "node_modules/@szmarczak/http-timer": {
       "version": "4.0.6",
       "resolved": "https://registry.npmjs.org/@szmarczak/http-timer/-/http-timer-4.0.6.tgz",
@@ -6303,11 +6250,6 @@
       "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.6.tgz",
       "integrity": "sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ=="
     },
-    "node_modules/@types/warning": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/@types/warning/-/warning-3.0.0.tgz",
-      "integrity": "sha512-t/Tvs5qR47OLOr+4E9ckN8AmP2Tf16gWq+/qA4iUGS/OOyHVO8wv2vjJuX8SNOUTJyWb+2t7wJm6cXILFnOROA=="
-    },
     "node_modules/@types/webpack": {
       "version": "4.41.33",
       "resolved": "https://registry.npmjs.org/@types/webpack/-/webpack-4.41.33.tgz",
@@ -8233,24 +8175,6 @@
       "integrity": "sha512-d0II/GO9uf9lfUHH2BQsjxzRJZBdsjgsBiW4BvhWk/3qoKwQFjIDVN19PfX8F2D/r9PCMTtLWjYVCFrpeYUzsw==",
       "optional": true
     },
-    "node_modules/bootstrap": {
-      "version": "5.2.3",
-      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.2.3.tgz",
-      "integrity": "sha512-cEKPM+fwb3cT8NzQZYEu4HilJ3anCrWqh3CHAok1p9jXqMPsPTBhU25fBckEJHJ/p+tTxTFTsFQGM+gaHpi3QQ==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/twbs"
-        },
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/bootstrap"
-        }
-      ],
-      "peerDependencies": {
-        "@popperjs/core": "^2.11.6"
-      }
-    },
     "node_modules/boxen": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/boxen/-/boxen-7.0.0.tgz",
@@ -24956,23 +24880,6 @@
         "react-is": "^16.13.1"
       }
     },
-    "node_modules/prop-types-extra": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/prop-types-extra/-/prop-types-extra-1.1.1.tgz",
-      "integrity": "sha512-59+AHNnHYCdiC+vMwY52WmvP5dM3QLeoumYuEyceQDi9aEhtwN9zIQ2ZNo25sMyXnbh32h+P1ezDsUpUH3JAew==",
-      "dependencies": {
-        "react-is": "^16.3.2",
-        "warning": "^4.0.0"
-      },
-      "peerDependencies": {
-        "react": ">=0.14.0"
-      }
-    },
-    "node_modules/prop-types-extra/node_modules/react-is": {
-      "version": "16.13.1",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
-    },
     "node_modules/prop-types/node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -25285,58 +25192,6 @@
         "url": "https://opencollective.com/core-js"
       }
     },
-    "node_modules/react-bootstrap": {
-      "version": "2.7.4",
-      "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-2.7.4.tgz",
-      "integrity": "sha512-EPKPwhfbxsKsNBhJBitJwqul9fvmlYWSft6jWE2EpqhEyjhqIqNihvQo2onE5XtS+QHOavUSNmA+8Lnv5YeAyg==",
-      "dependencies": {
-        "@babel/runtime": "^7.21.0",
-        "@restart/hooks": "^0.4.9",
-        "@restart/ui": "^1.6.3",
-        "@types/react-transition-group": "^4.4.5",
-        "classnames": "^2.3.2",
-        "dom-helpers": "^5.2.1",
-        "invariant": "^2.2.4",
-        "prop-types": "^15.8.1",
-        "prop-types-extra": "^1.1.0",
-        "react-transition-group": "^4.4.5",
-        "uncontrollable": "^7.2.1",
-        "warning": "^4.0.3"
-      },
-      "peerDependencies": {
-        "@types/react": ">=16.14.8",
-        "react": ">=16.14.0",
-        "react-dom": ">=16.14.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/react-bootstrap-typeahead": {
-      "version": "6.1.2",
-      "resolved": "https://registry.npmjs.org/react-bootstrap-typeahead/-/react-bootstrap-typeahead-6.1.2.tgz",
-      "integrity": "sha512-waIWRQ4CUZld69iL+EFiuL/2B+N4LecaAKcRTMQey0NDOM7Sxmtl+iELFzGltt2/DK6yvrxEUCbZI8pTztPFXA==",
-      "dependencies": {
-        "@babel/runtime": "^7.14.6",
-        "@popperjs/core": "^2.10.2",
-        "@restart/hooks": "^0.4.0",
-        "classnames": "^2.2.0",
-        "fast-deep-equal": "^3.1.1",
-        "invariant": "^2.2.1",
-        "lodash.debounce": "^4.0.8",
-        "prop-types": "^15.5.8",
-        "react-overlays": "^5.2.0",
-        "react-popper": "^2.2.5",
-        "scroll-into-view-if-needed": "^2.2.20",
-        "warning": "^4.0.1"
-      },
-      "peerDependencies": {
-        "react": ">=16.8.0",
-        "react-dom": ">=16.8.0"
-      }
-    },
     "node_modules/react-datepicker": {
       "version": "4.11.0",
       "resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-4.11.0.tgz",
@@ -25727,25 +25582,6 @@
         "react-dom": "^15.5.x || ^16.x || ^17.x || ^18.x"
       }
     },
-    "node_modules/react-overlays": {
-      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/react-overlays/-/react-overlays-5.2.1.tgz",
-      "integrity": "sha512-GLLSOLWr21CqtJn8geSwQfoJufdt3mfdsnIiQswouuQ2MMPns+ihZklxvsTDKD3cR2tF8ELbi5xUsvqVhR6WvA==",
-      "dependencies": {
-        "@babel/runtime": "^7.13.8",
-        "@popperjs/core": "^2.11.6",
-        "@restart/hooks": "^0.4.7",
-        "@types/warning": "^3.0.0",
-        "dom-helpers": "^5.2.0",
-        "prop-types": "^15.7.2",
-        "uncontrollable": "^7.2.1",
-        "warning": "^4.0.3"
-      },
-      "peerDependencies": {
-        "react": ">=16.3.0",
-        "react-dom": ">=16.3.0"
-      }
-    },
     "node_modules/react-popper": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.3.0.tgz",
@@ -25990,6 +25826,26 @@
         "node": ">=10"
       }
     },
+    "node_modules/react-scripts/node_modules/source-map-loader": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/source-map-loader/-/source-map-loader-3.0.2.tgz",
+      "integrity": "sha512-BokxPoLjyl3iOrgkWaakaxqnelAJSS+0V+De0kKIq6lyWrXuiPgYTGp6z3iHmqljKAaLXwZa+ctD8GccRJeVvg==",
+      "dependencies": {
+        "abab": "^2.0.5",
+        "iconv-lite": "^0.6.3",
+        "source-map-js": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 12.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "webpack": "^5.0.0"
+      }
+    },
     "node_modules/react-scripts/node_modules/yallist": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
@@ -27004,14 +26860,6 @@
         "url": "https://opencollective.com/webpack"
       }
     },
-    "node_modules/scroll-into-view-if-needed": {
-      "version": "2.2.31",
-      "resolved": "https://registry.npmjs.org/scroll-into-view-if-needed/-/scroll-into-view-if-needed-2.2.31.tgz",
-      "integrity": "sha512-dGCXy99wZQivjmjIqihaBQNjryrz5rueJY7eHfTdyWEiR4ttYpsajb14rn9s5d4DY4EcY6+4+U/maARBXJedkA==",
-      "dependencies": {
-        "compute-scroll-into-view": "^1.0.20"
-      }
-    },
     "node_modules/select-hose": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
@@ -27751,26 +27599,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/source-map-loader": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/source-map-loader/-/source-map-loader-3.0.2.tgz",
-      "integrity": "sha512-BokxPoLjyl3iOrgkWaakaxqnelAJSS+0V+De0kKIq6lyWrXuiPgYTGp6z3iHmqljKAaLXwZa+ctD8GccRJeVvg==",
-      "dependencies": {
-        "abab": "^2.0.5",
-        "iconv-lite": "^0.6.3",
-        "source-map-js": "^1.0.1"
-      },
-      "engines": {
-        "node": ">= 12.13.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/webpack"
-      },
-      "peerDependencies": {
-        "webpack": "^5.0.0"
-      }
-    },
     "node_modules/source-map-resolve": {
       "version": "0.5.3",
       "resolved": "https://registry.npmjs.org/source-map-resolve/-/source-map-resolve-0.5.3.tgz",
@@ -30216,20 +30044,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/uncontrollable": {
-      "version": "7.2.1",
-      "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-7.2.1.tgz",
-      "integrity": "sha512-svtcfoTADIB0nT9nltgjujTi7BzVmwjZClOmskKu/E8FW9BXzg9os8OLr4f8Dlnk0rYWJIWr4wv9eKUXiQvQwQ==",
-      "dependencies": {
-        "@babel/runtime": "^7.6.3",
-        "@types/react": ">=16.9.11",
-        "invariant": "^2.2.4",
-        "react-lifecycles-compat": "^3.0.4"
-      },
-      "peerDependencies": {
-        "react": ">=15.0.0"
-      }
-    },
     "node_modules/unicode-canonical-property-names-ecmascript": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.0.tgz",
@@ -35860,14 +35674,6 @@
       "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.7.tgz",
       "integrity": "sha512-Cr4OjIkipTtcXKjAsm8agyleBuDHvxzeBoa1v543lbv1YaIwQjESsVcmjiWiPEbC1FIeHOG/Op9kdCmAmiS3Kw=="
     },
-    "@react-aria/ssr": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.6.0.tgz",
-      "integrity": "sha512-OFiYQdv+Yk7AO7IsQu/fAEPijbeTwrrEYvdNoJ3sblBBedD5j5fBTNWrUPNVlwC4XWWnWTCMaRIVsJujsFiWXg==",
-      "requires": {
-        "@swc/helpers": "^0.4.14"
-      }
-    },
     "@react-icons/all-files": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/@react-icons/all-files/-/all-files-4.1.0.tgz",
@@ -35879,30 +35685,6 @@
       "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.5.0.tgz",
       "integrity": "sha512-bkUDCp8o1MvFO+qxkODcbhSqRa6P2GXgrGZVpt0dCXNW2HCSCqYI0ZoAqEOSAjRWmmlKcYgFvN4B4S+zo/f8kg=="
     },
-    "@restart/hooks": {
-      "version": "0.4.9",
-      "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.4.9.tgz",
-      "integrity": "sha512-3BekqcwB6Umeya+16XPooARn4qEPW6vNvwYnlofIYe6h9qG1/VeD7UvShCWx11eFz5ELYmwIEshz+MkPX3wjcQ==",
-      "requires": {
-        "dequal": "^2.0.2"
-      }
-    },
-    "@restart/ui": {
-      "version": "1.6.3",
-      "resolved": "https://registry.npmjs.org/@restart/ui/-/ui-1.6.3.tgz",
-      "integrity": "sha512-7HM5aiSWvJBWr+FghZj/n3PSuH2kUrOPiu/D92aIv1zTL8IBwFoQ3oz/f76svoN5v2PKaP6pQbg6vTcIiSffzg==",
-      "requires": {
-        "@babel/runtime": "^7.21.0",
-        "@popperjs/core": "^2.11.6",
-        "@react-aria/ssr": "^3.5.0",
-        "@restart/hooks": "^0.4.9",
-        "@types/warning": "^3.0.0",
-        "dequal": "^2.0.3",
-        "dom-helpers": "^5.2.0",
-        "uncontrollable": "^7.2.1",
-        "warning": "^4.0.3"
-      }
-    },
     "@rjsf/core": {
       "version": "5.0.0-beta.20",
       "resolved": "https://registry.npmjs.org/@rjsf/core/-/core-5.0.0-beta.20.tgz",
@@ -36149,14 +35931,6 @@
         "loader-utils": "^2.0.0"
       }
     },
-    "@swc/helpers": {
-      "version": "0.4.14",
-      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.4.14.tgz",
-      "integrity": "sha512-4C7nX/dvpzB7za4Ql9K81xK3HPxCpHMgwTZVyf+9JQ6VUbn9jjZVN7/Nkdz/Ugzs2CSjqnL/UPXroiVBVHUWUw==",
-      "requires": {
-        "tslib": "^2.4.0"
-      }
-    },
     "@szmarczak/http-timer": {
       "version": "4.0.6",
       "resolved": "https://registry.npmjs.org/@szmarczak/http-timer/-/http-timer-4.0.6.tgz",
@@ -36897,11 +36671,6 @@
       "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.6.tgz",
       "integrity": "sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ=="
     },
-    "@types/warning": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/@types/warning/-/warning-3.0.0.tgz",
-      "integrity": "sha512-t/Tvs5qR47OLOr+4E9ckN8AmP2Tf16gWq+/qA4iUGS/OOyHVO8wv2vjJuX8SNOUTJyWb+2t7wJm6cXILFnOROA=="
-    },
     "@types/webpack": {
       "version": "4.41.33",
       "resolved": "https://registry.npmjs.org/@types/webpack/-/webpack-4.41.33.tgz",
@@ -38385,12 +38154,6 @@
       "integrity": "sha512-d0II/GO9uf9lfUHH2BQsjxzRJZBdsjgsBiW4BvhWk/3qoKwQFjIDVN19PfX8F2D/r9PCMTtLWjYVCFrpeYUzsw==",
       "optional": true
     },
-    "bootstrap": {
-      "version": "5.2.3",
-      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.2.3.tgz",
-      "integrity": "sha512-cEKPM+fwb3cT8NzQZYEu4HilJ3anCrWqh3CHAok1p9jXqMPsPTBhU25fBckEJHJ/p+tTxTFTsFQGM+gaHpi3QQ==",
-      "requires": {}
-    },
     "boxen": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/boxen/-/boxen-7.0.0.tgz",
@@ -50528,7 +50291,7 @@
         "@csstools/postcss-text-decoration-shorthand": "^1.0.0",
         "@csstools/postcss-trigonometric-functions": "^1.0.2",
         "@csstools/postcss-unset-value": "^1.0.2",
-        "autoprefixer": "^10.4.13",
+        "autoprefixer": "10.4.5",
         "browserslist": "^4.21.4",
         "css-blank-pseudo": "^3.0.3",
         "css-has-pseudo": "^3.0.4",
@@ -50566,7 +50329,8 @@
       },
       "dependencies": {
         "autoprefixer": {
-          "version": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.5.tgz",
+          "version": "10.4.5",
+          "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.5.tgz",
           "integrity": "sha512-Fvd8yCoA7lNX/OUllvS+aS1I7WRBclGXsepbvT8ZaPgrH24rgXpZzF0/6Hh3ZEkwg+0AES/Osd196VZmYoEFtw==",
           "requires": {
             "browserslist": "^4.20.2",
@@ -50830,22 +50594,6 @@
         }
       }
     },
-    "prop-types-extra": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/prop-types-extra/-/prop-types-extra-1.1.1.tgz",
-      "integrity": "sha512-59+AHNnHYCdiC+vMwY52WmvP5dM3QLeoumYuEyceQDi9aEhtwN9zIQ2ZNo25sMyXnbh32h+P1ezDsUpUH3JAew==",
-      "requires": {
-        "react-is": "^16.3.2",
-        "warning": "^4.0.0"
-      },
-      "dependencies": {
-        "react-is": {
-          "version": "16.13.1",
-          "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-          "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
-        }
-      }
-    },
     "property-information": {
       "version": "6.2.0",
       "resolved": "https://registry.npmjs.org/property-information/-/property-information-6.2.0.tgz",
@@ -51089,44 +50837,6 @@
         }
       }
     },
-    "react-bootstrap": {
-      "version": "2.7.4",
-      "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-2.7.4.tgz",
-      "integrity": "sha512-EPKPwhfbxsKsNBhJBitJwqul9fvmlYWSft6jWE2EpqhEyjhqIqNihvQo2onE5XtS+QHOavUSNmA+8Lnv5YeAyg==",
-      "requires": {
-        "@babel/runtime": "^7.21.0",
-        "@restart/hooks": "^0.4.9",
-        "@restart/ui": "^1.6.3",
-        "@types/react-transition-group": "^4.4.5",
-        "classnames": "^2.3.2",
-        "dom-helpers": "^5.2.1",
-        "invariant": "^2.2.4",
-        "prop-types": "^15.8.1",
-        "prop-types-extra": "^1.1.0",
-        "react-transition-group": "^4.4.5",
-        "uncontrollable": "^7.2.1",
-        "warning": "^4.0.3"
-      }
-    },
-    "react-bootstrap-typeahead": {
-      "version": "6.1.2",
-      "resolved": "https://registry.npmjs.org/react-bootstrap-typeahead/-/react-bootstrap-typeahead-6.1.2.tgz",
-      "integrity": "sha512-waIWRQ4CUZld69iL+EFiuL/2B+N4LecaAKcRTMQey0NDOM7Sxmtl+iELFzGltt2/DK6yvrxEUCbZI8pTztPFXA==",
-      "requires": {
-        "@babel/runtime": "^7.14.6",
-        "@popperjs/core": "^2.10.2",
-        "@restart/hooks": "^0.4.0",
-        "classnames": "^2.2.0",
-        "fast-deep-equal": "^3.1.1",
-        "invariant": "^2.2.1",
-        "lodash.debounce": "^4.0.8",
-        "prop-types": "^15.5.8",
-        "react-overlays": "^5.2.0",
-        "react-popper": "^2.2.5",
-        "scroll-into-view-if-needed": "^2.2.20",
-        "warning": "^4.0.1"
-      }
-    },
     "react-datepicker": {
       "version": "4.11.0",
       "resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-4.11.0.tgz",
@@ -51424,21 +51134,6 @@
       "integrity": "sha512-ty8So6tcUpIb+ZE+1HAhbLROvAIJYyJe/1vRrrcmW+jLsaM+/powDRqxzo6hSh9CuRZGSL1Q8mvcF5WRD93a0A==",
       "requires": {}
     },
-    "react-overlays": {
-      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/react-overlays/-/react-overlays-5.2.1.tgz",
-      "integrity": "sha512-GLLSOLWr21CqtJn8geSwQfoJufdt3mfdsnIiQswouuQ2MMPns+ihZklxvsTDKD3cR2tF8ELbi5xUsvqVhR6WvA==",
-      "requires": {
-        "@babel/runtime": "^7.13.8",
-        "@popperjs/core": "^2.11.6",
-        "@restart/hooks": "^0.4.7",
-        "@types/warning": "^3.0.0",
-        "dom-helpers": "^5.2.0",
-        "prop-types": "^15.7.2",
-        "uncontrollable": "^7.2.1",
-        "warning": "^4.0.3"
-      }
-    },
     "react-popper": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.3.0.tgz",
@@ -51609,6 +51304,16 @@
             "lru-cache": "^6.0.0"
           }
         },
+        "source-map-loader": {
+          "version": "3.0.2",
+          "resolved": "https://registry.npmjs.org/source-map-loader/-/source-map-loader-3.0.2.tgz",
+          "integrity": "sha512-BokxPoLjyl3iOrgkWaakaxqnelAJSS+0V+De0kKIq6lyWrXuiPgYTGp6z3iHmqljKAaLXwZa+ctD8GccRJeVvg==",
+          "requires": {
+            "abab": "^2.0.5",
+            "iconv-lite": "^0.6.3",
+            "source-map-js": "^1.0.1"
+          }
+        },
         "yallist": {
           "version": "4.0.0",
           "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
@@ -52355,14 +52060,6 @@
         "ajv-keywords": "^5.1.0"
       }
     },
-    "scroll-into-view-if-needed": {
-      "version": "2.2.31",
-      "resolved": "https://registry.npmjs.org/scroll-into-view-if-needed/-/scroll-into-view-if-needed-2.2.31.tgz",
-      "integrity": "sha512-dGCXy99wZQivjmjIqihaBQNjryrz5rueJY7eHfTdyWEiR4ttYpsajb14rn9s5d4DY4EcY6+4+U/maARBXJedkA==",
-      "requires": {
-        "compute-scroll-into-view": "^1.0.20"
-      }
-    },
     "select-hose": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
@@ -52974,16 +52671,6 @@
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
       "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw=="
     },
-    "source-map-loader": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/source-map-loader/-/source-map-loader-3.0.2.tgz",
-      "integrity": "sha512-BokxPoLjyl3iOrgkWaakaxqnelAJSS+0V+De0kKIq6lyWrXuiPgYTGp6z3iHmqljKAaLXwZa+ctD8GccRJeVvg==",
-      "requires": {
-        "abab": "^2.0.5",
-        "iconv-lite": "^0.6.3",
-        "source-map-js": "^1.0.1"
-      }
-    },
     "source-map-resolve": {
       "version": "0.5.3",
       "resolved": "https://registry.npmjs.org/source-map-resolve/-/source-map-resolve-0.5.3.tgz",
@@ -54914,17 +54601,6 @@
         "which-boxed-primitive": "^1.0.2"
       }
     },
-    "uncontrollable": {
-      "version": "7.2.1",
-      "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-7.2.1.tgz",
-      "integrity": "sha512-svtcfoTADIB0nT9nltgjujTi7BzVmwjZClOmskKu/E8FW9BXzg9os8OLr4f8Dlnk0rYWJIWr4wv9eKUXiQvQwQ==",
-      "requires": {
-        "@babel/runtime": "^7.6.3",
-        "@types/react": ">=16.9.11",
-        "invariant": "^2.2.4",
-        "react-lifecycles-compat": "^3.0.4"
-      }
-    },
     "unicode-canonical-property-names-ecmascript": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.0.tgz",
diff --git a/spiffworkflow-frontend/package.json b/spiffworkflow-frontend/package.json
index 5b85e25cf..da06a92d0 100644
--- a/spiffworkflow-frontend/package.json
+++ b/spiffworkflow-frontend/package.json
@@ -30,7 +30,6 @@
     "@uiw/react-md-editor": "^3.20.2",
     "autoprefixer": "10.4.8",
     "axios": "^0.27.2",
-    "bootstrap": "^5.2.0",
     "bpmn-js": "^13.0.0",
     "bpmn-js-properties-panel": "^1.22.0",
     "bpmn-js-spiffworkflow": "github:sartography/bpmn-js-spiffworkflow#main",
@@ -46,8 +45,6 @@
     "keycloak-js": "^18.0.1",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
-    "react-bootstrap": "^2.5.0",
-    "react-bootstrap-typeahead": "^6.0.0",
     "react-datepicker": "^4.8.0",
     "react-devtools": "^4.27.1",
     "react-dom": "^18.2.0",
diff --git a/spiffworkflow-frontend/src/components/NavigationBar.tsx b/spiffworkflow-frontend/src/components/NavigationBar.tsx
index e032f6ecd..26a75b3ba 100644
--- a/spiffworkflow-frontend/src/components/NavigationBar.tsx
+++ b/spiffworkflow-frontend/src/components/NavigationBar.tsx
@@ -15,9 +15,7 @@ import {
   HeaderMenuItem,
   HeaderGlobalAction,
   HeaderGlobalBar,
-  // @ts-ignore
 } from '@carbon/react';
-// @ts-ignore
 import { Logout, Login } from '@carbon/icons-react';
 import { useEffect, useState } from 'react';
 import { useLocation } from 'react-router-dom';
@@ -32,7 +30,6 @@ import { UnauthenticatedError } from '../services/HttpService';
 import { DOCUMENTATION_URL, SPIFF_ENVIRONMENT } from '../config';
 import appVersionInfo from '../helpers/appVersionInfo';
 
-// for ref: https://react-bootstrap.github.io/components/navbar/
 export default function NavigationBar() {
   const handleLogout = () => {
     UserService.doLogout();
@@ -232,13 +229,6 @@ export default function NavigationBar() {
           </HeaderMenuItem>
         </Can>
         {configurationElement()}
-        <HeaderMenuItem
-          hidden
-          href="/admin/process-instances/reports"
-          isCurrentPage={isActivePage('/admin/process-instances/reports')}
-        >
-          Perspectives
-        </HeaderMenuItem>
       </>
     );
   };
diff --git a/spiffworkflow-frontend/src/components/ProcessGroupListTiles.tsx b/spiffworkflow-frontend/src/components/ProcessGroupListTiles.tsx
index ae3cb81f3..7ca73c903 100644
--- a/spiffworkflow-frontend/src/components/ProcessGroupListTiles.tsx
+++ b/spiffworkflow-frontend/src/components/ProcessGroupListTiles.tsx
@@ -97,7 +97,7 @@ export default function ProcessGroupListTiles({
     return (
       <>
         {/* so we can check if the groups have loaded in cypress tests */}
-        <div data-qa="process-groups-loaded" hidden />
+        <div data-qa="process-groups-loaded" className="hidden" />
         {processGroupArea()}
       </>
     );
diff --git a/spiffworkflow-frontend/src/components/ProcessInstanceListTable.tsx b/spiffworkflow-frontend/src/components/ProcessInstanceListTable.tsx
index d2230bd96..bb2d09b4b 100644
--- a/spiffworkflow-frontend/src/components/ProcessInstanceListTable.tsx
+++ b/spiffworkflow-frontend/src/components/ProcessInstanceListTable.tsx
@@ -56,8 +56,6 @@ import 'react-datepicker/dist/react-datepicker.css';
 
 import HttpService from '../services/HttpService';
 
-import 'react-bootstrap-typeahead/css/Typeahead.css';
-import 'react-bootstrap-typeahead/css/Typeahead.bs5.css';
 import {
   PaginationObject,
   ProcessModel,
diff --git a/spiffworkflow-frontend/src/components/TaskListTable.tsx b/spiffworkflow-frontend/src/components/TaskListTable.tsx
index b6901f73e..ab1cdaf48 100644
--- a/spiffworkflow-frontend/src/components/TaskListTable.tsx
+++ b/spiffworkflow-frontend/src/components/TaskListTable.tsx
@@ -203,14 +203,15 @@ export default function TaskListTable({
     }
     rowElements.push(
       <td>
-        <Button
-          variant="primary"
-          href={taskUrl}
-          hidden={processInstanceTask.process_instance_status === 'suspended'}
-          disabled={!hasAccessToCompleteTask}
-        >
-          Go
-        </Button>
+        {processInstanceTask.process_instance_status === 'suspended' ? null : (
+          <Button
+            variant="primary"
+            href={taskUrl}
+            disabled={!hasAccessToCompleteTask}
+          >
+            Go
+          </Button>
+        )}
       </td>
     );
     return <tr key={processInstanceTask.id}>{rowElements}</tr>;
diff --git a/spiffworkflow-frontend/src/index.css b/spiffworkflow-frontend/src/index.css
index a36ab97e2..523a6cc17 100644
--- a/spiffworkflow-frontend/src/index.css
+++ b/spiffworkflow-frontend/src/index.css
@@ -260,6 +260,10 @@ h1.with-icons {
   margin-top: 4px;
 }
 
+.with-top-margin-for-unit-test-name {
+  margin-top: 11px;
+}
+
 .with-large-bottom-margin {
   margin-bottom: 3em;
 }
diff --git a/spiffworkflow-frontend/src/index.tsx b/spiffworkflow-frontend/src/index.tsx
index 42eddc027..0c28d84e2 100644
--- a/spiffworkflow-frontend/src/index.tsx
+++ b/spiffworkflow-frontend/src/index.tsx
@@ -2,7 +2,6 @@ import React from 'react';
 import * as ReactDOMClient from 'react-dom/client';
 import App from './App';
 
-import 'bootstrap/dist/css/bootstrap.css';
 import './index.scss';
 import './index.css';
 
diff --git a/spiffworkflow-frontend/src/routes/HomePageRoutes.tsx b/spiffworkflow-frontend/src/routes/HomePageRoutes.tsx
index e425c1258..bba58de87 100644
--- a/spiffworkflow-frontend/src/routes/HomePageRoutes.tsx
+++ b/spiffworkflow-frontend/src/routes/HomePageRoutes.tsx
@@ -1,6 +1,5 @@
 import { useEffect, useState } from 'react';
 import { Route, Routes, useLocation, useNavigate } from 'react-router-dom';
-// @ts-ignore
 import { Tabs, TabList, Tab } from '@carbon/react';
 import TaskShow from './TaskShow';
 import MyTasks from './MyTasks';
diff --git a/spiffworkflow-frontend/src/routes/ProcessInstanceList.tsx b/spiffworkflow-frontend/src/routes/ProcessInstanceList.tsx
index d46778434..45bcd6ac2 100644
--- a/spiffworkflow-frontend/src/routes/ProcessInstanceList.tsx
+++ b/spiffworkflow-frontend/src/routes/ProcessInstanceList.tsx
@@ -2,8 +2,6 @@ import { useSearchParams } from 'react-router-dom';
 
 import 'react-datepicker/dist/react-datepicker.css';
 
-import 'react-bootstrap-typeahead/css/Typeahead.css';
-import 'react-bootstrap-typeahead/css/Typeahead.bs5.css';
 import ProcessBreadcrumb from '../components/ProcessBreadcrumb';
 import ProcessInstanceListTable from '../components/ProcessInstanceListTable';
 import { getProcessModelFullIdentifierFromSearchParams } from '../helpers';
diff --git a/spiffworkflow-frontend/src/routes/ProcessModelEditDiagram.tsx b/spiffworkflow-frontend/src/routes/ProcessModelEditDiagram.tsx
index 0ba15f14d..a9942c25d 100644
--- a/spiffworkflow-frontend/src/routes/ProcessModelEditDiagram.tsx
+++ b/spiffworkflow-frontend/src/routes/ProcessModelEditDiagram.tsx
@@ -7,8 +7,8 @@ import {
 } from 'react-router-dom';
 import {
   Button,
+  ButtonSet,
   Modal,
-  Content,
   Tabs,
   TabList,
   Tab,
@@ -17,10 +17,14 @@ import {
   TextInput,
   Grid,
   Column,
-  // @ts-ignore
 } from '@carbon/react';
-import Row from 'react-bootstrap/Row';
-import Col from 'react-bootstrap/Col';
+import {
+  SkipForward,
+  SkipBack,
+  PlayOutline,
+  Close,
+  Checkmark,
+} from '@carbon/icons-react';
 
 import Editor, { DiffEditor } from '@monaco-editor/react';
 
@@ -576,7 +580,10 @@ export default function ProcessModelEditDiagram() {
 
       if (scriptUnitTestResult.context) {
         errorStringElement = (
-          <span>Unexpected result. Please see the comparison below.</span>
+          <span>
+            Unexpected result. Please see the expected / actual comparison
+            below.
+          </span>
         );
         let outputJson = '{}';
         if (currentScriptUnitTest) {
@@ -634,14 +641,28 @@ export default function ProcessModelEditDiagram() {
       let scriptUnitTestResultBoolElement = null;
       if (scriptUnitTestResult) {
         scriptUnitTestResultBoolElement = (
-          <Col xs={1}>
+          <>
             {scriptUnitTestResult.result === true && (
-              <span style={{ color: 'green', fontSize: '3em' }}>✓</span>
+              <Button
+                kind="ghost"
+                className="green-icon"
+                renderIcon={Checkmark}
+                iconDescription="Unit tests passed"
+                hasIconOnly
+                size="lg"
+              />
             )}
             {scriptUnitTestResult.result === false && (
-              <span style={{ color: 'red', fontSize: '3em' }}>✘</span>
+              <Button
+                kind="ghost"
+                className="red-icon"
+                renderIcon={Close}
+                iconDescription="Unit tests failed"
+                hasIconOnly
+                size="lg"
+              />
             )}
-          </Col>
+          </>
         );
       }
       let inputJson = currentScriptUnitTest.inputJson.value;
@@ -663,78 +684,80 @@ export default function ProcessModelEditDiagram() {
 
       return (
         <main>
-          <Content>
-            <Row>
-              <Col xs={8}>
-                <Button variant="link" disabled>
-                  Unit Test: {currentScriptUnitTest.id}
-                </Button>
-              </Col>
-              <Col xs={1}>
+          <Grid condensed fullWidth>
+            <Column md={4} lg={8} sm={2}>
+              <p className="with-top-margin-for-unit-test-name">
+                Unit Test: {currentScriptUnitTest.id}
+              </p>
+            </Column>
+            <Column md={4} lg={8} sm={2}>
+              <ButtonSet>
                 <Button
+                  kind="ghost"
                   data-qa="unit-test-previous-button"
-                  onClick={setPreviousScriptUnitTest}
-                  variant="link"
+                  renderIcon={SkipBack}
+                  iconDescription="Previous Unit Test"
+                  hasIconOnly
+                  size="lg"
                   disabled={previousButtonDisable}
-                >
-                  &laquo;
-                </Button>
-              </Col>
-              <Col xs={1}>
+                  onClick={setPreviousScriptUnitTest}
+                />
                 <Button
+                  kind="ghost"
                   data-qa="unit-test-next-button"
-                  style={{ fontSize: '1.5em' }}
-                  onClick={setNextScriptUnitTest}
-                  variant="link"
+                  renderIcon={SkipForward}
+                  iconDescription="Next Unit Test"
+                  hasIconOnly
+                  size="lg"
                   disabled={nextButtonDisable}
-                >
-                  &raquo;
-                </Button>
-              </Col>
-              <Col xs={1}>
+                  onClick={setNextScriptUnitTest}
+                />
                 <Button
-                  className="justify-content-end"
+                  kind="ghost"
                   data-qa="unit-test-run"
-                  style={{ fontSize: '1.5em' }}
+                  renderIcon={PlayOutline}
+                  iconDescription="Run Unit Test"
+                  hasIconOnly
+                  size="lg"
                   onClick={runCurrentUnitTest}
-                >
-                  Run
-                </Button>
-              </Col>
-              <Col xs={1}>{scriptUnitTestResultBoolElement}</Col>
-            </Row>
-            <Row>
-              <Col>{unitTestFailureElement()}</Col>
-            </Row>
-            <Row>
-              <Col>
-                <div>Input Json:</div>
-                <div>
-                  <Editor
-                    height={500}
-                    width="auto"
-                    defaultLanguage="json"
-                    options={Object.assign(jsonEditorOptions(), {})}
-                    value={inputJson}
-                    onChange={handleEditorScriptTestUnitInputChange}
-                  />
-                </div>
-              </Col>
-              <Col>
-                <div>Expected Output Json:</div>
-                <div>
-                  <Editor
-                    height={500}
-                    width="auto"
-                    defaultLanguage="json"
-                    options={Object.assign(jsonEditorOptions(), {})}
-                    value={outputJson}
-                    onChange={handleEditorScriptTestUnitOutputChange}
-                  />
-                </div>
-              </Col>
-            </Row>
-          </Content>
+                />
+                {scriptUnitTestResultBoolElement}
+              </ButtonSet>
+            </Column>
+          </Grid>
+          <Grid condensed fullWidth>
+            <Column md={8} lg={16} sm={4}>
+              {unitTestFailureElement()}
+            </Column>
+          </Grid>
+          <Grid condensed fullWidth>
+            <Column md={4} lg={8} sm={2}>
+              <div>Input Json:</div>
+              <div>
+                <Editor
+                  height={500}
+                  width="auto"
+                  defaultLanguage="json"
+                  options={Object.assign(jsonEditorOptions(), {})}
+                  value={inputJson}
+                  onChange={handleEditorScriptTestUnitInputChange}
+                />
+              </div>
+            </Column>
+            <Column md={4} lg={8} sm={2}>
+              <div>Expected Output Json:</div>
+              <div>
+                <Editor
+                  height={500}
+                  width="auto"
+                  defaultLanguage="json"
+                  options={Object.assign(jsonEditorOptions(), {})}
+                  value={outputJson}
+                  onChange={handleEditorScriptTestUnitOutputChange}
+                />
+              </div>
+            </Column>
+          </Grid>
         </main>
       );
     }
diff --git a/spiffworkflow-frontend/src/routes/SecretNew.tsx b/spiffworkflow-frontend/src/routes/SecretNew.tsx
index 02bc88c9a..96116e7b2 100644
--- a/spiffworkflow-frontend/src/routes/SecretNew.tsx
+++ b/spiffworkflow-frontend/src/routes/SecretNew.tsx
@@ -1,14 +1,13 @@
 import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
-// @ts-ignore
-import { Stack } from '@carbon/react';
-import Button from 'react-bootstrap/Button';
-import Form from 'react-bootstrap/Form';
+import { Form, TextInput, Button, ButtonSet, Stack } from '@carbon/react';
 import HttpService from '../services/HttpService';
 
 export default function SecretNew() {
-  const [value, setValue] = useState('');
-  const [key, setKey] = useState('');
+  const [value, setValue] = useState<string>('');
+  const [key, setKey] = useState<string>('');
+  const [keyIsInvalid, setKeyIsInvalid] = useState<boolean>(false);
+  const [valueIsInvalid, setValueIsInvalid] = useState<boolean>(false);
   const navigate = useNavigate();
 
   const navigateToSecret = (_result: any) => {
@@ -19,16 +18,24 @@ export default function SecretNew() {
     navigate(`/admin/configuration/secrets`);
   };
 
-  const changeSpacesToDash = (someString: string) => {
-    // change spaces to `-`
-    let s1 = someString.replace(' ', '-');
-    // remove any trailing `-`
-    s1 = s1.replace(/-$/, '');
-    return s1;
-  };
-
   const addSecret = (event: any) => {
     event.preventDefault();
+
+    let hasErrors = false;
+    setKeyIsInvalid(false);
+    if (!key.match(/^[\w-]+$/)) {
+      setKeyIsInvalid(true);
+      hasErrors = true;
+    }
+    setValueIsInvalid(false);
+    if (value.trim().length < 1) {
+      setValueIsInvalid(true);
+      hasErrors = true;
+    }
+    if (hasErrors) {
+      return;
+    }
+
     HttpService.makeCallToBackend({
       path: `/secrets`,
       successCallback: navigateToSecret,
@@ -40,41 +47,41 @@ export default function SecretNew() {
     });
   };
 
-  const warningStyle = {
-    color: 'red',
-  };
-
   return (
     <main style={{ padding: '1rem 0' }}>
       <h1>Add Secret</h1>
       <Form onSubmit={addSecret}>
-        <Form.Group className="mb-3" controlId="formDisplayName">
-          <Form.Label>
-            Key: <span style={warningStyle}>No Spaces</span>
-          </Form.Label>
-          <Form.Control
-            type="text"
+        <Stack gap={5}>
+          <TextInput
+            id="secret-key"
+            labelText="Key*"
             value={key}
-            onChange={(e) => setKey(changeSpacesToDash(e.target.value))}
+            invalid={keyIsInvalid}
+            invalidText="The key must be alphanumeric characters and underscores"
+            onChange={(e: any) => setKey(e.target.value)}
           />
-        </Form.Group>
-        <Form.Group className="mb-3" controlId="formIdentifier">
-          <Form.Label>Value:</Form.Label>
-          <Form.Control
-            type="text"
+          <TextInput
+            id="secret-value"
+            labelText="Value*"
             value={value}
-            onChange={(e) => {
+            invalid={valueIsInvalid}
+            invalidText="The value must be set"
+            onChange={(e: any) => {
               setValue(e.target.value);
             }}
           />
-        </Form.Group>
-        <Stack orientation="horizontal" gap={3}>
-          <Button variant="primary" type="submit">
-            Submit
-          </Button>
-          <Button variant="danger" type="button" onClick={navigateToSecrets}>
-            Cancel
-          </Button>
+          <ButtonSet>
+            <Button kind="primary" type="submit">
+              Submit
+            </Button>
+            <Button
+              kind=""
+              className="button-white-background"
+              onClick={navigateToSecrets}
+            >
+              Cancel
+            </Button>
+          </ButtonSet>
         </Stack>
       </Form>
     </main>