From a0e77fabe8114e2a5357f21d8fb98e223c300faf Mon Sep 17 00:00:00 2001
From: David Vail <dcvail17@gmail.com>
Date: Mon, 24 Feb 2025 12:06:37 -0500
Subject: [PATCH 01/25] Update from PF5 -> PF6

---
 ui/package.json                               |  6 +-
 ui/src/components/AppHeaderLayout.tsx         | 27 +++++++--
 ui/src/components/Countdown.tsx               | 12 ++--
 ui/src/components/Modal.tsx                   |  5 +-
 ui/src/components/RHACSLogo.tsx               |  3 +-
 .../components/forms/FileUploadFormField.tsx  |  2 +-
 ui/src/components/forms/TextFormField.tsx     |  2 +-
 ui/src/containers/AppHeader/AppHeader.tsx     | 10 ++--
 .../containers/AppHeader/ProductLogoTile.tsx  | 18 +-----
 ui/src/containers/AppHeader/UserInfo.tsx      |  2 +-
 ui/src/infra.css                              |  2 +-
 ui/yarn.lock                                  | 58 +++++++++----------
 12 files changed, 73 insertions(+), 74 deletions(-)

diff --git a/ui/package.json b/ui/package.json
index a9c41dc57..5ad031b1d 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -22,9 +22,9 @@
     "gen:src": "./scripts/generate-client.sh"
   },
   "dependencies": {
-    "@patternfly/patternfly": "^5.4.2",
-    "@patternfly/react-core": "^5.4.8",
-    "@patternfly/react-icons": "^5.4.2",
+    "@patternfly/patternfly": "^6.1.1",
+    "@patternfly/react-core": "^6.0.0",
+    "@patternfly/react-icons": "^6.0.0",
     "axios": "^0.21.4",
     "formik": "^2.4.2",
     "history": "^5.0.1",
diff --git a/ui/src/components/AppHeaderLayout.tsx b/ui/src/components/AppHeaderLayout.tsx
index 588dc7415..520ccc59d 100644
--- a/ui/src/components/AppHeaderLayout.tsx
+++ b/ui/src/components/AppHeaderLayout.tsx
@@ -2,10 +2,13 @@ import React, { ReactElement, ReactNode } from 'react';
 import {
   Masthead,
   MastheadMain,
+  MastheadLogo,
   MastheadBrand,
   MastheadContent,
   ToolbarItem,
+  Flex,
 } from '@patternfly/react-core';
+import Version from 'containers/AppHeader/Version';
 
 type Props = {
   logo: ReactNode;
@@ -17,14 +20,26 @@ export default function AppHeaderLayout({ logo, main, ending }: Props): ReactEle
   return (
     <Masthead>
       <MastheadMain>
-        <MastheadBrand component="a" className="pf-v5-u-mr-xl">
-          {logo}
+        <MastheadBrand>
+          <MastheadLogo component="a" className="pf-v6-u-mr-xl">
+            {logo}
+          </MastheadLogo>
         </MastheadBrand>
-        <ToolbarItem variant="separator" />
-        {main}
       </MastheadMain>
-      <MastheadContent className="pf-v5-u-flex-direction-row-reverse">
-        <div>{ending}</div>
+      <MastheadContent>
+        <Flex direction={{ default: 'column' }} spaceItems={{ default: 'spaceItemsNone' }}>
+          <span className="pf-v6-u-font-family-heading pf-v6-u-font-size-lg">Infra</span>
+          <Version />
+        </Flex>
+        <ToolbarItem variant="separator" />
+        <Flex
+          className="pf-v6-u-flex-grow-1"
+          alignItems={{ default: 'alignItemsCenter' }}
+          justifyContent={{ default: 'justifyContentSpaceBetween' }}
+        >
+          {main}
+          <div>{ending}</div>
+        </Flex>
       </MastheadContent>
     </Masthead>
   );
diff --git a/ui/src/components/Countdown.tsx b/ui/src/components/Countdown.tsx
index c1f955b7e..3c3aa8def 100644
--- a/ui/src/components/Countdown.tsx
+++ b/ui/src/components/Countdown.tsx
@@ -31,26 +31,22 @@ function ModifiableTimeUnit({
         {notation}
       </span>
       <span className="pf-v5-u-display-inline-flex">
-        <Button
+        <Button icon={<PlusCircle size={12} />}
           variant="plain"
           className="pf-v5-u-mr-sm pf-v5-u-p-0"
           aria-label="Increment"
           onClick={(): void => {
             onChange(notation, 'inc');
           }}
-        >
-          <PlusCircle size={12} />
-        </Button>
-        <Button
+         />
+        <Button icon={<MinusCircle size={12} />}
           variant="plain"
           className="pf-v5-u-p-0"
           aria-label="Decrement"
           onClick={(): void => {
             onChange(notation, 'dec');
           }}
-        >
-          <MinusCircle size={12} />
-        </Button>
+         />
       </span>
     </span>
   );
diff --git a/ui/src/components/Modal.tsx b/ui/src/components/Modal.tsx
index a24050fbc..4253da3b2 100644
--- a/ui/src/components/Modal.tsx
+++ b/ui/src/components/Modal.tsx
@@ -1,5 +1,8 @@
 import React, { ReactElement, ReactNode } from 'react';
-import { Modal, ModalVariant } from '@patternfly/react-core';
+import {
+	Modal,
+	ModalVariant
+} from '@patternfly/react-core/deprecated';
 
 type Props = {
   isOpen: boolean;
diff --git a/ui/src/components/RHACSLogo.tsx b/ui/src/components/RHACSLogo.tsx
index 69135c89c..765ec4f0a 100644
--- a/ui/src/components/RHACSLogo.tsx
+++ b/ui/src/components/RHACSLogo.tsx
@@ -3,8 +3,7 @@ import React, { forwardRef } from 'react';
 const RHACSLogo = forwardRef<SVGSVGElement, never>((_, ref) => (
   <svg
     id="RHACS-Logo"
-    width="254px"
-    height="60px"
+    height="50px"
     viewBox="0 0 1482.9 350"
     xmlns="http://www.w3.org/2000/svg"
     ref={ref}
diff --git a/ui/src/components/forms/FileUploadFormField.tsx b/ui/src/components/forms/FileUploadFormField.tsx
index 880160e90..62ace28d6 100644
--- a/ui/src/components/forms/FileUploadFormField.tsx
+++ b/ui/src/components/forms/FileUploadFormField.tsx
@@ -58,7 +58,7 @@ export default function FileUploadFormField({
       label={label}
       fieldId={id}
       isRequired={required}
-      labelIcon={
+      labelHelp={
         helper ? (
           <Popover bodyContent={helper}>
             <button
diff --git a/ui/src/components/forms/TextFormField.tsx b/ui/src/components/forms/TextFormField.tsx
index d69e2b638..65fae6adc 100644
--- a/ui/src/components/forms/TextFormField.tsx
+++ b/ui/src/components/forms/TextFormField.tsx
@@ -42,7 +42,7 @@ export default function TextFormField({
       label={label}
       fieldId={id}
       isRequired={required}
-      labelIcon={
+      labelHelp={
         helper ? (
           <Popover bodyContent={helper} className="form-help">
             <button
diff --git a/ui/src/containers/AppHeader/AppHeader.tsx b/ui/src/containers/AppHeader/AppHeader.tsx
index 66ef5bd09..6b834049d 100644
--- a/ui/src/containers/AppHeader/AppHeader.tsx
+++ b/ui/src/containers/AppHeader/AppHeader.tsx
@@ -8,12 +8,10 @@ import UserInfo from './UserInfo';
 
 export default function AppHeader(): ReactElement {
   const mainArea = (
-    <div className="flex h-full items-center ml-4">
-      <Link to="/downloads" className="btn btn-base">
-        <Terminal size={16} className="mr-2" />
-        infractl
-      </Link>
-    </div>
+    <Link to="/downloads" className="btn btn-base">
+      <Terminal size={16} className="mr-2" />
+      infractl
+    </Link>
   );
 
   return <AppHeaderLayout logo={<ProductLogoTile />} main={mainArea} ending={<UserInfo />} />;
diff --git a/ui/src/containers/AppHeader/ProductLogoTile.tsx b/ui/src/containers/AppHeader/ProductLogoTile.tsx
index 481c5bb04..4edf24e60 100644
--- a/ui/src/containers/AppHeader/ProductLogoTile.tsx
+++ b/ui/src/containers/AppHeader/ProductLogoTile.tsx
@@ -1,24 +1,12 @@
 import React, { ReactElement } from 'react';
 import { Link } from 'react-router-dom';
-import { Flex, FlexItem } from '@patternfly/react-core';
 
 import RHACSLogo from 'components/RHACSLogo';
-import Version from './Version';
 
 export default function ProductLogoTile(): ReactElement {
   return (
-    <Flex alignItems={{ default: 'alignItemsCenter' }}>
-      <FlexItem>
-        <Link to="/">
-          <RHACSLogo />
-        </Link>
-      </FlexItem>
-      <FlexItem>
-        <span className="pf-v5-u-font-family-redhatVF-heading-sans-serif pf-v5-u-font-size-lg">
-          Infra
-        </span>
-        <Version />
-      </FlexItem>
-    </Flex>
+    <Link to="/">
+      <RHACSLogo />
+    </Link>
   );
 }
diff --git a/ui/src/containers/AppHeader/UserInfo.tsx b/ui/src/containers/AppHeader/UserInfo.tsx
index 5c480ab37..43761e1da 100644
--- a/ui/src/containers/AppHeader/UserInfo.tsx
+++ b/ui/src/containers/AppHeader/UserInfo.tsx
@@ -13,7 +13,7 @@ export default function UserInfo(): ReactElement {
           alt={user?.Name || 'anonymous'}
           src={user.Picture}
           size="md"
-          border="dark"
+          isBordered
           className="flex justify-center items-center mr-2"
         />
       ) : (
diff --git a/ui/src/infra.css b/ui/src/infra.css
index 4e69c336f..e4c402f78 100644
--- a/ui/src/infra.css
+++ b/ui/src/infra.css
@@ -29,7 +29,7 @@
 }
 
 .rhacs-logo-text {
-  fill: #ffffff;
+  fill: #000000;
 }
 
 /* LinkCard */
diff --git a/ui/yarn.lock b/ui/yarn.lock
index a7ba7e1ad..0fc968911 100644
--- a/ui/yarn.lock
+++ b/ui/yarn.lock
@@ -1757,37 +1757,37 @@
   dependencies:
     mkdirp "^1.0.4"
 
-"@patternfly/patternfly@^5.4.2":
-  version "5.4.2"
-  resolved "https://registry.yarnpkg.com/@patternfly/patternfly/-/patternfly-5.4.2.tgz#4a87d6a5fb2ffd526b4b9597b651f13ecf8ddd4f"
-  integrity sha512-+BaokNR8/AmTYMESxby9UtQXPGACg449BXQd0KejAvW/uGxlgO6mY1X1205DeBEHoK3e/vXkYXjvZPpv/tcxSA==
-
-"@patternfly/react-core@^5.4.8":
-  version "5.4.14"
-  resolved "https://registry.yarnpkg.com/@patternfly/react-core/-/react-core-5.4.14.tgz#d41d28c81884f6a45dc3c364dc5ae2c933c72e89"
-  integrity sha512-oXVMzLs9Pa+xmdc39L2u05zbXfY3mWuOFi4GDv44GPdDexZUFy5W69+Nv5P8cwfMim55Nf5kKYpcqmatD2bBXw==
-  dependencies:
-    "@patternfly/react-icons" "^5.4.2"
-    "@patternfly/react-styles" "^5.4.1"
-    "@patternfly/react-tokens" "^5.4.1"
+"@patternfly/patternfly@^6.1.1":
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/@patternfly/patternfly/-/patternfly-6.1.0.tgz#bd2374bf293b1c2abdde071700b3d9532ec2dfe6"
+  integrity sha512-w+QazL8NHKkg5j01eotblsswKxQQSYB0CN3yBXQL9ScpHdp/fK8M6TqWbKZNRpf+NqhMxcH/om8eR0N/fDCJqw==
+
+"@patternfly/react-core@^6.0.0":
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/@patternfly/react-core/-/react-core-6.1.0.tgz#58d35b523c019a33f03b652b065d11cf60921734"
+  integrity sha512-zj0lJPZxQanXKD8ae2kYnweT0kpp1CzpHYAkaBjTrw2k6ZMfr/UPlp0/ugCjWEokBqh79RUADLkKJJPce/yoSQ==
+  dependencies:
+    "@patternfly/react-icons" "^6.1.0"
+    "@patternfly/react-styles" "^6.1.0"
+    "@patternfly/react-tokens" "^6.1.0"
     focus-trap "7.6.2"
-    react-dropzone "^14.2.3"
-    tslib "^2.7.0"
+    react-dropzone "^14.3.5"
+    tslib "^2.8.1"
 
-"@patternfly/react-icons@^5.4.2":
-  version "5.4.2"
-  resolved "https://registry.yarnpkg.com/@patternfly/react-icons/-/react-icons-5.4.2.tgz#8937a7167a0b3abdc3c179524f456b4cbd8f0c39"
-  integrity sha512-CMQ5oHYzW6TPVTs2jpNJmP2vGCAKR/YeTPwHGO9dLkAUej1IcIxtCCWK2Fdo2UJsnBjuZihasyw2b6ehvbUm9Q==
+"@patternfly/react-icons@^6.0.0", "@patternfly/react-icons@^6.1.0":
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/@patternfly/react-icons/-/react-icons-6.1.0.tgz#4f982f2b8dc0b9366acca1170fcd52fa8c16b85f"
+  integrity sha512-V1w/j19YmOgvh72IRRf1p07k+u4M5+9P+o/IxunlF0fWzLDX4Hf+utBI11A8cRfUzpQN7eLw/vZIS3BLM8Ge3Q==
 
-"@patternfly/react-styles@^5.4.1":
-  version "5.4.1"
-  resolved "https://registry.yarnpkg.com/@patternfly/react-styles/-/react-styles-5.4.1.tgz#c101419917bcf309dfa7469820cd7320dd0c5120"
-  integrity sha512-XA8PXksD8uiA3RTwxdUwJXOCf+V6sVd+2HKapWAdRLvtSV+Sdk7NgCvalb4IAQncsddLopjPQD8gAHA298+N8w==
+"@patternfly/react-styles@^6.1.0":
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/@patternfly/react-styles/-/react-styles-6.1.0.tgz#e8aa12c6b1417ba1a739ea435bc02f7f8d516132"
+  integrity sha512-JQ3zIl5SFiSB0YWVYibcUwgZdsp6Wn8hkfZ7KhtCjHFccSDdJexPOXVV1O9f2h4PfxTlY3YntZ81ZsguBx/Q7A==
 
-"@patternfly/react-tokens@^5.4.1":
-  version "5.4.1"
-  resolved "https://registry.yarnpkg.com/@patternfly/react-tokens/-/react-tokens-5.4.1.tgz#03104c5b73ef438076141f897a53d16507d8a115"
-  integrity sha512-eygdHE7Krta1mijAv/E8RHiKIgysD0eeNTo8EXUYC8/M4e5K6sqpr2p6rQBF8QiRMN8FnbXvZT3K2OQ28pYt9Q==
+"@patternfly/react-tokens@^6.1.0":
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/@patternfly/react-tokens/-/react-tokens-6.1.0.tgz#c2a64e68568bde81e56f4b5a8f9ac3ad8cd06e8a"
+  integrity sha512-t1UcHbOa4txczTR5UlnG4XcAAdnDSfSlCaOddw/HTqRF59pn2ks2JUu9sfnFRZ8SiAAxKRiYdX5bT7Mf4R24+w==
 
 "@pmmmwh/react-refresh-webpack-plugin@0.4.2":
   version "0.4.2"
@@ -10533,7 +10533,7 @@ react-dom@^17.0.1:
     object-assign "^4.1.1"
     scheduler "^0.20.1"
 
-react-dropzone@^14.2.3:
+react-dropzone@^14.3.5:
   version "14.3.8"
   resolved "https://registry.yarnpkg.com/react-dropzone/-/react-dropzone-14.3.8.tgz#a7eab118f8a452fe3f8b162d64454e81ba830582"
   integrity sha512-sBgODnq+lcA4P296DY4wacOZz3JFpD99fp+hb//iBO2HHnyeZU3FwWyXJ6salNpqQdsZrgMrotuko/BdJMV8Ug==
@@ -12384,7 +12384,7 @@ tslib@^2.0.0, tslib@^2.1.0:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.0.tgz#b295854684dbda164e181d259a22cd779dcd7bc3"
   integrity sha512-7At1WUettjcSRHXCyYtTselblcHl9PJFFVKiCAy/bY97+BPZXSQ2wbq0P9s8tK2G7dFQfNnlJnPAiArVBVBsfA==
 
-tslib@^2.7.0:
+tslib@^2.7.0, tslib@^2.8.1:
   version "2.8.1"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.8.1.tgz#612efe4ed235d567e8aba5f2a5fab70280ade83f"
   integrity sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==

From a1ab339bb799af024c672946a48f817c207cafbb Mon Sep 17 00:00:00 2001
From: David Vail <dcvail17@gmail.com>
Date: Mon, 24 Feb 2025 13:39:36 -0500
Subject: [PATCH 02/25] Tweaks for basic UX cleanup

---
 ui/src/components/Countdown.tsx               | 20 ++++++++------
 ui/src/components/FullPageError.tsx           |  6 ++---
 ui/src/components/FullPageSpinner.tsx         |  4 +--
 .../components/forms/FileUploadFormField.tsx  |  2 +-
 ui/src/components/forms/TextFormField.tsx     |  2 +-
 ui/src/containers/App.tsx                     |  9 +++++--
 .../ClusterInfoPage/DeleteClusterModal.tsx    |  6 ++---
 .../DownloadArtifactsModal.tsx                |  2 +-
 .../ClusterInfoPage/MutableLifespan.tsx       |  2 +-
 ui/src/containers/HomePage/HomePage.tsx       |  2 +-
 .../LaunchClusterPage/ClusterForm.tsx         |  3 ++-
 ui/src/infra.css                              | 26 +++----------------
 12 files changed, 38 insertions(+), 46 deletions(-)

diff --git a/ui/src/components/Countdown.tsx b/ui/src/components/Countdown.tsx
index 3c3aa8def..e9552d086 100644
--- a/ui/src/components/Countdown.tsx
+++ b/ui/src/components/Countdown.tsx
@@ -25,28 +25,32 @@ function ModifiableTimeUnit({
   onChange = (): void => {},
 }: ModifiableTimeUnitProps): ReactElement {
   return (
-    <span className="pf-v5-u-display-inline-flex pf-v5-u-flex-direction-column pf-v5-u-align-items-center">
+    <span className="pf-v6-u-display-inline-flex pf-v6-u-flex-direction-column pf-v6-u-align-items-center">
       <span>
         {`${value}`.padStart(2, '0')}
         {notation}
       </span>
-      <span className="pf-v5-u-display-inline-flex">
-        <Button icon={<PlusCircle size={12} />}
+      <span className="pf-v6-u-display-inline-flex">
+        <Button
+          icon={<PlusCircle size={16} />}
+          size="sm"
           variant="plain"
-          className="pf-v5-u-mr-sm pf-v5-u-p-0"
+          className="pf-v6-u-p-0"
           aria-label="Increment"
           onClick={(): void => {
             onChange(notation, 'inc');
           }}
-         />
-        <Button icon={<MinusCircle size={12} />}
+        />
+        <Button
+          icon={<MinusCircle size={16} />}
+          size="sm"
           variant="plain"
-          className="pf-v5-u-p-0"
+          className="pf-v6-u-p-0"
           aria-label="Decrement"
           onClick={(): void => {
             onChange(notation, 'dec');
           }}
-         />
+        />
       </span>
     </span>
   );
diff --git a/ui/src/components/FullPageError.tsx b/ui/src/components/FullPageError.tsx
index 5b6cecc2c..89556c65c 100644
--- a/ui/src/components/FullPageError.tsx
+++ b/ui/src/components/FullPageError.tsx
@@ -11,9 +11,9 @@ export default function FullPageError({
   IconComponent = AlertCircle,
 }: Props): ReactElement {
   return (
-    <div className="pf-v5-u-display-flex pf-v5-u-align-items-center pf-v5-u-justify-content-center pf-v5-u-h-100">
-      <IconComponent className="pf-v5-u-mr-md" size={64} />
-      <span className="pf-v5-u-font-size-4xl">{message}</span>
+    <div className="pf-v6-u-display-flex pf-v6-u-align-items-center pf-v6-u-justify-content-center pf-v6-u-h-100">
+      <IconComponent className="pf-v6-u-mr-md" size={64} />
+      <span className="pf-v6-u-font-size-4xl">{message}</span>
     </div>
   );
 }
diff --git a/ui/src/components/FullPageSpinner.tsx b/ui/src/components/FullPageSpinner.tsx
index 322ea32f8..7b01bfa14 100644
--- a/ui/src/components/FullPageSpinner.tsx
+++ b/ui/src/components/FullPageSpinner.tsx
@@ -3,9 +3,9 @@ import { RingLoader } from 'react-spinners';
 
 export default function FullPageSpinner(): ReactElement {
   return (
-    <div className="pf-v5-u-display-flex pf-v5-u-flex-direction-column pf-v5-u-align-items-center pf-v5-u-justify-content-center pf-v5-u-h-100">
+    <div className="pf-v6-u-display-flex pf-v6-u-flex-direction-column pf-v6-u-align-items-center pf-v6-u-justify-content-center pf-v6-u-h-100">
       <RingLoader loading size={128} color="currentColor" />
-      <span className="pf-v5-u-font-size-4xl">Loading...</span>
+      <span className="pf-v6-u-font-size-4xl">Loading...</span>
     </div>
   );
 }
diff --git a/ui/src/components/forms/FileUploadFormField.tsx b/ui/src/components/forms/FileUploadFormField.tsx
index 62ace28d6..78a45b3f9 100644
--- a/ui/src/components/forms/FileUploadFormField.tsx
+++ b/ui/src/components/forms/FileUploadFormField.tsx
@@ -66,7 +66,7 @@ export default function FileUploadFormField({
               aria-label={`Help for ${name}`}
               onClick={(e) => e.preventDefault()}
               aria-describedby={id}
-              className="pf-v5-c-form__group-label-help"
+              className="pf-v6-c-form__group-label-help"
             >
               <Icon>
                 <HelpIcon />
diff --git a/ui/src/components/forms/TextFormField.tsx b/ui/src/components/forms/TextFormField.tsx
index 65fae6adc..1e5c1852b 100644
--- a/ui/src/components/forms/TextFormField.tsx
+++ b/ui/src/components/forms/TextFormField.tsx
@@ -50,7 +50,7 @@ export default function TextFormField({
               aria-label={`Help for ${name}`}
               onClick={(e) => e.preventDefault()}
               aria-describedby={id}
-              className="pf-v5-c-form__group-label-help"
+              className="pf-v6-c-form__group-label-help"
             >
               <Icon>
                 <HelpIcon />
diff --git a/ui/src/containers/App.tsx b/ui/src/containers/App.tsx
index 451a6094c..595f53af8 100644
--- a/ui/src/containers/App.tsx
+++ b/ui/src/containers/App.tsx
@@ -8,6 +8,7 @@ import DownloadsPage from 'containers/DownloadsPage';
 import LaunchClusterPage from 'containers/LaunchClusterPage';
 import ClusterInfoPage from 'containers/ClusterInfoPage';
 import FullPageError from 'components/FullPageError';
+import { Flex } from '@patternfly/react-core';
 
 function AppRoutes(): ReactElement {
   return (
@@ -25,10 +26,14 @@ export default function App(): ReactElement {
   return (
     <Router>
       <UserAuthProvider>
-        <div className="flex flex-col h-full bg-base-0">
+        <Flex
+          direction={{ default: 'column' }}
+          flexWrap={{ default: 'nowrap' }}
+          className="pf-v6-u-h-100 pf-v6-u-w-100"
+        >
           <AppHeader />
           <AppRoutes />
-        </div>
+        </Flex>
       </UserAuthProvider>
     </Router>
   );
diff --git a/ui/src/containers/ClusterInfoPage/DeleteClusterModal.tsx b/ui/src/containers/ClusterInfoPage/DeleteClusterModal.tsx
index 65385e42f..31c48a70a 100644
--- a/ui/src/containers/ClusterInfoPage/DeleteClusterModal.tsx
+++ b/ui/src/containers/ClusterInfoPage/DeleteClusterModal.tsx
@@ -43,7 +43,7 @@ export default function DeleteClusterModal({ cluster, onCancel, onDeleted }: Pro
         header={`Are you sure you want to delete ${cluster.ID}?`}
         buttons={buttons}
       >
-        <span className="pf-v5-u-danger-color-100 pf-v5-u-font-size-2xl">
+        <span className="pf-v6-u-danger-color-100 pf-v6-u-font-size-2xl">
           This action cannot be undone.
         </span>
       </Modal>
@@ -64,7 +64,7 @@ export default function DeleteClusterModal({ cluster, onCancel, onDeleted }: Pro
     const message = `Cannot delete cluster. Server error occurred: "${error.message}".`;
     return (
       <InformationalModal header={`Failed to delete ${cluster.ID}!`} onAcknowledged={onCancel}>
-        <span className="pf-v5-u-danger-color-100 pf-v5-u-font-size-2xl">{message}</span>
+        <span className="pf-v6-u-danger-color-100 pf-v6-u-font-size-2xl">{message}</span>
       </InformationalModal>
     );
   }
@@ -73,7 +73,7 @@ export default function DeleteClusterModal({ cluster, onCancel, onDeleted }: Pro
   const message = `Cluster ${cluster.ID} is being destroyed now.`;
   return (
     <InformationalModal header={`Successfully deleted ${cluster.ID}!`} onAcknowledged={onDeleted}>
-      <span className="pf-v5-u-success-color-100 pf-v5-u-font-size-2xl">{message}</span>
+      <span className="pf-v6-u-success-color-100 pf-v6-u-font-size-2xl">{message}</span>
     </InformationalModal>
   );
 }
diff --git a/ui/src/containers/ClusterInfoPage/DownloadArtifactsModal.tsx b/ui/src/containers/ClusterInfoPage/DownloadArtifactsModal.tsx
index 6cb9daabd..7929f5b38 100644
--- a/ui/src/containers/ClusterInfoPage/DownloadArtifactsModal.tsx
+++ b/ui/src/containers/ClusterInfoPage/DownloadArtifactsModal.tsx
@@ -15,7 +15,7 @@ type ArtifactsListProps = {
 
 function ArtifactsList({ artifacts }: ArtifactsListProps): ReactElement {
   return (
-    <List className="pf-v5-u-mb-md">
+    <List className="pf-v6-u-mb-md">
       {artifacts
         .sort((a, b) => {
           if (a.Description && !b.Description) {
diff --git a/ui/src/containers/ClusterInfoPage/MutableLifespan.tsx b/ui/src/containers/ClusterInfoPage/MutableLifespan.tsx
index 906304f7e..5fa73dfcc 100644
--- a/ui/src/containers/ClusterInfoPage/MutableLifespan.tsx
+++ b/ui/src/containers/ClusterInfoPage/MutableLifespan.tsx
@@ -26,7 +26,7 @@ export default function MutableLifespan({ cluster }: Props): ReactElement {
         header="Cannot change the cluster lifespan"
         onAcknowledged={(): void => setError(null)}
       >
-        <span className="pf-v5-u-danger-color-100 pf-v5-u-font-size-2xl">{message}</span>
+        <span className="pf-v6-u-danger-color-100 pf-v6-u-font-size-2xl">{message}</span>
       </InformationalModal>
     );
   }
diff --git a/ui/src/containers/HomePage/HomePage.tsx b/ui/src/containers/HomePage/HomePage.tsx
index 5cd03ab8a..b8c921ea3 100644
--- a/ui/src/containers/HomePage/HomePage.tsx
+++ b/ui/src/containers/HomePage/HomePage.tsx
@@ -12,7 +12,7 @@ import MyClustersPageSection from './MyClustersPageSection';
 
 export default function HomePage(): ReactElement {
   return (
-    <Drawer isExpanded isInline position="bottom" className="home-page">
+    <Drawer isExpanded isInline position="bottom">
       <DrawerContent
         panelContent={
           <DrawerPanelContent isResizable defaultSize="50%" minSize="150px">
diff --git a/ui/src/containers/LaunchClusterPage/ClusterForm.tsx b/ui/src/containers/LaunchClusterPage/ClusterForm.tsx
index 8925891b5..9e1edae30 100644
--- a/ui/src/containers/LaunchClusterPage/ClusterForm.tsx
+++ b/ui/src/containers/LaunchClusterPage/ClusterForm.tsx
@@ -8,7 +8,7 @@
  */
 
 import React, { useState, ReactElement } from 'react';
-import { Formik, Form, FormikValues, FormikHelpers, useFormikContext } from 'formik';
+import { Formik, FormikValues, FormikHelpers, useFormikContext } from 'formik';
 import * as yup from 'yup';
 import { mapValues } from 'lodash';
 import { ClipLoader } from 'react-spinners';
@@ -23,6 +23,7 @@ import NumberFormField from 'components/forms/NumberFormField';
 import { useUserAuth } from 'containers/UserAuthProvider';
 import assertDefined from 'utils/assertDefined';
 import { generateClusterName } from 'utils/cluster.utils';
+import { Form } from '@patternfly/react-core';
 
 const clusterService = new ClusterServiceApi(configuration);
 
diff --git a/ui/src/infra.css b/ui/src/infra.css
index e4c402f78..dad73f96a 100644
--- a/ui/src/infra.css
+++ b/ui/src/infra.css
@@ -1,22 +1,4 @@
-.pf-v5-c-form__group-label {
-  /* Some more padding for the form field label help icon */
-  --pf-v5-c-form__group-label-help--MarginLeft: var(--pf-v5-global--spacer--sm);
-}
-
-.pf-v5-c-form__group {
-  /* Some separation for form fields */
-  margin-bottom: var(--pf-v5-global--spacer--md);
-}
-
-/* Remove padding from homepage bottom panel */
-.home-page .pf-v5-c-drawer__body {
-  --pf-v5-c-drawer--child--PaddingTop: 0;
-  --pf-v5-c-drawer--child--PaddingLeft: 0;
-  --pf-v5-c-drawer--child--PaddingBottom: 0;
-  --pf-v5-c-drawer--child--PaddingRight: 0;
-}
-
-.pf-v5-c-form__label-text {
+.pf-v6-c-form__label-text {
   text-transform: capitalize;
 }
 
@@ -35,17 +17,17 @@
 /* LinkCard */
 
 /* appear to be clickable */
-a:hover>.pf-v5-c-panel {
+a:hover>.pf-v6-c-panel {
   background-color: var(--pf-v5-global--BackgroundColor--200);
 }
 
 /* reset to regular font for LinkCard content */
-a>.pf-v5-c-panel {
+a>.pf-v6-c-panel {
   font-weight: var(--pf-v5-global--FontWeight--normal);
 }
 
 /* LinkCard title */
-a>.pf-v5-c-panel>.pf-v5-c-panel__header {
+a>.pf-v6-c-panel>.pf-v6-c-panel__header {
   font-weight: var(--pf-v5-global--FontWeight--bold);
   font-size: var(--pf-v5-global--FontSize--lg);
 }

From e4eed8a945a956de25b848d6113eaf9772ad6ab1 Mon Sep 17 00:00:00 2001
From: David Vail <dcvail17@gmail.com>
Date: Mon, 24 Feb 2025 16:00:27 -0500
Subject: [PATCH 03/25] Switch to cards (broken - needs react 18)

---
 ui/public/index.html                          |  2 +-
 ui/src/components/LinkCard.tsx                | 26 +++-----
 ui/src/containers/App.tsx                     |  7 +-
 ui/src/containers/HomePage/HomePage.tsx       | 28 ++------
 .../containers/HomePage/LaunchPageSection.tsx | 65 +++++++++++++------
 .../HomePage/MyClustersPageSection.tsx        | 40 ++++++------
 6 files changed, 85 insertions(+), 83 deletions(-)

diff --git a/ui/public/index.html b/ui/public/index.html
index 51b2c337c..d9ae652dd 100644
--- a/ui/public/index.html
+++ b/ui/public/index.html
@@ -25,7 +25,7 @@
     -->
     <title>StackRox Infra</title>
   </head>
-  <body class="flex font-sans h-full overflow-hidden text-base-600 text-base font-600 theme-light">
+  <body class="flex h-full overflow-hidden theme-light">
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root" class="w-full"></div>
     <!--
diff --git a/ui/src/components/LinkCard.tsx b/ui/src/components/LinkCard.tsx
index 9d1c14821..4329ff74b 100644
--- a/ui/src/components/LinkCard.tsx
+++ b/ui/src/components/LinkCard.tsx
@@ -1,17 +1,10 @@
 import React, { ReactElement, ReactNode } from 'react';
 import { Link } from 'react-router-dom';
-import {
-  Panel,
-  PanelMain,
-  PanelMainBody,
-  PanelHeader,
-  Divider,
-  PanelFooter,
-} from '@patternfly/react-core';
+import { Card, CardBody, CardFooter, CardHeader, CardTitle } from '@patternfly/react-core';
 
 type Props = {
   to: string;
-  header: string;
+  header: ReactNode;
   children: ReactNode;
   footer?: ReactNode;
   className?: string;
@@ -26,14 +19,13 @@ export default function LinkCard({
 }: Props): ReactElement {
   return (
     <Link className={className} to={to}>
-      <Panel isScrollable variant="raised">
-        <PanelHeader>{header}</PanelHeader>
-        <Divider />
-        <PanelMain>
-          <PanelMainBody>{children}</PanelMainBody>
-        </PanelMain>
-        {!!footer && <PanelFooter>{footer}</PanelFooter>}
-      </Panel>
+      <Card isClickable>
+        <CardHeader selectableActions={{ to }}>
+          <CardTitle>{header}</CardTitle>
+        </CardHeader>
+        <CardBody>{children}</CardBody>
+        {!!footer && <CardFooter>{footer}</CardFooter>}
+      </Card>
     </Link>
   );
 }
diff --git a/ui/src/containers/App.tsx b/ui/src/containers/App.tsx
index 595f53af8..d147d2b9b 100644
--- a/ui/src/containers/App.tsx
+++ b/ui/src/containers/App.tsx
@@ -8,7 +8,7 @@ import DownloadsPage from 'containers/DownloadsPage';
 import LaunchClusterPage from 'containers/LaunchClusterPage';
 import ClusterInfoPage from 'containers/ClusterInfoPage';
 import FullPageError from 'components/FullPageError';
-import { Flex } from '@patternfly/react-core';
+import { Flex, Page } from '@patternfly/react-core';
 
 function AppRoutes(): ReactElement {
   return (
@@ -31,8 +31,9 @@ export default function App(): ReactElement {
           flexWrap={{ default: 'nowrap' }}
           className="pf-v6-u-h-100 pf-v6-u-w-100"
         >
-          <AppHeader />
-          <AppRoutes />
+          <Page masthead={<AppHeader />}>
+            <AppRoutes />
+          </Page>
         </Flex>
       </UserAuthProvider>
     </Router>
diff --git a/ui/src/containers/HomePage/HomePage.tsx b/ui/src/containers/HomePage/HomePage.tsx
index b8c921ea3..20edcc4eb 100644
--- a/ui/src/containers/HomePage/HomePage.tsx
+++ b/ui/src/containers/HomePage/HomePage.tsx
@@ -1,31 +1,15 @@
 import React, { ReactElement } from 'react';
-import {
-  Drawer,
-  DrawerContent,
-  DrawerContentBody,
-  DrawerPanelContent,
-  DrawerHead,
-} from '@patternfly/react-core';
 
+import { Divider } from '@patternfly/react-core';
 import LaunchPageSection from './LaunchPageSection';
 import MyClustersPageSection from './MyClustersPageSection';
 
 export default function HomePage(): ReactElement {
   return (
-    <Drawer isExpanded isInline position="bottom">
-      <DrawerContent
-        panelContent={
-          <DrawerPanelContent isResizable defaultSize="50%" minSize="150px">
-            <DrawerHead>
-              <MyClustersPageSection />
-            </DrawerHead>
-          </DrawerPanelContent>
-        }
-      >
-        <DrawerContentBody>
-          <LaunchPageSection />
-        </DrawerContentBody>
-      </DrawerContent>
-    </Drawer>
+    <>
+      <LaunchPageSection />
+      <Divider component="div" />
+      <MyClustersPageSection />
+    </>
   );
 }
diff --git a/ui/src/containers/HomePage/LaunchPageSection.tsx b/ui/src/containers/HomePage/LaunchPageSection.tsx
index eb3631dc8..509f4aea0 100644
--- a/ui/src/containers/HomePage/LaunchPageSection.tsx
+++ b/ui/src/containers/HomePage/LaunchPageSection.tsx
@@ -1,13 +1,13 @@
+/* eslint-disable no-nested-ternary */
 /* eslint-disable jsx-a11y/label-has-associated-control */
 import React, { ReactElement } from 'react';
 import { useSearchParams } from 'react-router-dom';
 import { AxiosPromise } from 'axios';
-import { Gallery, GalleryItem } from '@patternfly/react-core';
+import { Flex, Gallery, GalleryItem, Label, PageSection, Title } from '@patternfly/react-core';
 
 import { V1FlavorListResponse, FlavorServiceApi } from 'generated/client';
 import useApiQuery from 'client/useApiQuery';
 import configuration from 'client/configuration';
-import PageSection from 'components/PageSection';
 import LinkCard from 'components/LinkCard';
 import FullPageSpinner from 'components/FullPageSpinner';
 import FullPageError from 'components/FullPageError';
@@ -40,8 +40,27 @@ function FlavorCards({ showAllFlavors = false }: FlavorCardsProps): ReactElement
         <LinkCard
           key={flavor.ID}
           to={`launch/${flavor.ID}`}
-          header={flavor.Name || 'Unnamed'}
-          footer={<span className="capitalize">{flavor.Availability || 'Alpha'}</span>}
+          header={
+            <Flex
+              alignItems={{ default: 'alignItemsCenter' }}
+              justifyContent={{ default: 'justifyContentSpaceBetween' }}
+            >
+              <span>{flavor.Name || 'Unnamed'}</span>
+              <Label
+                color={
+                  flavor.Availability === 'default'
+                    ? 'blue'
+                    : flavor.Availability === 'stable'
+                    ? 'green'
+                    : flavor.Availability === 'beta'
+                    ? 'orange'
+                    : 'orangered'
+                }
+              >
+                {flavor.Availability || 'Alpha'}
+              </Label>
+            </Flex>
+          }
         >
           <p>{flavor.Description}</p>
         </LinkCard>
@@ -79,28 +98,32 @@ export default function LaunchPageSection(): ReactElement {
 
   const header = (
     <div className="flex justify-between items-center ">
-      <span>{headerText}</span>
+      <Title headingLevel="h2">{headerText}</Title>
       {flavorFilterToggle}
     </div>
   );
   return (
-    <PageSection header={header}>
-      <Gallery
-        hasGutter
-        minWidths={{
-          default: '100%',
-          md: '100px',
-          xl: '300px',
-        }}
-        maxWidths={{
-          md: '200px',
-          xl: '1fr',
-        }}
-      >
-        <FlavorCards showAllFlavors={showAllFlavors} />
-      </Gallery>
-    </PageSection>
+    <>
+      <PageSection>{header}</PageSection>
+      <PageSection>
+        <Gallery
+          hasGutter
+          minWidths={{
+            default: '100%',
+            md: '100px',
+            xl: '300px',
+          }}
+          maxWidths={{
+            md: '200px',
+            xl: '1fr',
+          }}
+        >
+          <FlavorCards showAllFlavors={showAllFlavors} />
+        </Gallery>
+      </PageSection>
+    </>
   );
 }
 
 /* eslint-enable jsx-a11y/label-has-associated-control */
+/* eslint-enable no-nested-ternary */
diff --git a/ui/src/containers/HomePage/MyClustersPageSection.tsx b/ui/src/containers/HomePage/MyClustersPageSection.tsx
index b9565d95b..8e50326e7 100644
--- a/ui/src/containers/HomePage/MyClustersPageSection.tsx
+++ b/ui/src/containers/HomePage/MyClustersPageSection.tsx
@@ -3,13 +3,12 @@ import React, { ReactElement } from 'react';
 import { useSearchParams } from 'react-router-dom';
 import { AxiosPromise } from 'axios';
 import moment from 'moment';
-import { Gallery, GalleryItem } from '@patternfly/react-core';
+import { Gallery, GalleryItem, PageSection, Title } from '@patternfly/react-core';
 
 import { V1ClusterListResponse, ClusterServiceApi } from 'generated/client';
 import useApiQuery from 'client/useApiQuery';
 import configuration from 'client/configuration';
 import { useUserAuth } from 'containers/UserAuthProvider';
-import PageSection from 'components/PageSection';
 import LinkCard from 'components/LinkCard';
 import Lifespan from 'components/Lifespan';
 import FullPageSpinner from 'components/FullPageSpinner';
@@ -114,27 +113,30 @@ export default function MyClustersPageSection(): ReactElement {
 
   const header = (
     <div className="flex justify-between items-center ">
-      <span>{headerText}</span>
+      <Title headingLevel="h2">{headerText}</Title>
       {clusterFilterToggle}
     </div>
   );
   return (
-    <PageSection header={header}>
-      <Gallery
-        hasGutter
-        minWidths={{
-          default: '100%',
-          md: '100px',
-          xl: '300px',
-        }}
-        maxWidths={{
-          md: '200px',
-          xl: '1fr',
-        }}
-      >
-        <ClusterCards showAllClusters={showAllClusters} />
-      </Gallery>
-    </PageSection>
+    <>
+      <PageSection>{header}</PageSection>
+      <PageSection>
+        <Gallery
+          hasGutter
+          minWidths={{
+            default: '100%',
+            md: '100px',
+            xl: '300px',
+          }}
+          maxWidths={{
+            md: '200px',
+            xl: '1fr',
+          }}
+        >
+          <ClusterCards showAllClusters={showAllClusters} />
+        </Gallery>
+      </PageSection>
+    </>
   );
 }
 

From bd595b8dbea383ffa695dce80f886d0a4677039c Mon Sep 17 00:00:00 2001
From: David Vail <dcvail17@gmail.com>
Date: Mon, 24 Feb 2025 16:10:46 -0500
Subject: [PATCH 04/25] Update to React 18

---
 ui/package.json                               | 10 ++--
 ui/src/components/LinkCard.tsx                |  7 ++-
 ui/src/components/RHACSLogo.tsx               |  2 +-
 .../containers/HomePage/LaunchPageSection.tsx |  3 +-
 ui/src/index.tsx                              | 10 ++--
 ui/yarn.lock                                  | 55 ++++++++-----------
 6 files changed, 41 insertions(+), 46 deletions(-)

diff --git a/ui/package.json b/ui/package.json
index 5ad031b1d..8f2de436d 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -22,7 +22,7 @@
     "gen:src": "./scripts/generate-client.sh"
   },
   "dependencies": {
-    "@patternfly/patternfly": "^6.1.1",
+    "@patternfly/patternfly": "^6.1.0",
     "@patternfly/react-core": "^6.0.0",
     "@patternfly/react-icons": "^6.0.0",
     "axios": "^0.21.4",
@@ -32,8 +32,8 @@
     "moment": "^2.29.4",
     "namor": "^2.0.3",
     "prop-types": "^15.8.1",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-feather": "^2.0.9",
     "react-markdown": "^8.0.0",
     "react-router-dom": "^6.14.1",
@@ -49,8 +49,8 @@
     "@types/jest": "^27.0.2",
     "@types/lodash": "^4.14.195",
     "@types/node": "^20.5.4",
-    "@types/react": "^17.0.20",
-    "@types/react-dom": "^17.0.9",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
     "autoprefixer": "^10.4.14",
     "eslint-config-airbnb-typescript": "^12.0.0",
     "eslint-config-prettier": "^7.2.0",
diff --git a/ui/src/components/LinkCard.tsx b/ui/src/components/LinkCard.tsx
index 4329ff74b..b5c8f07bb 100644
--- a/ui/src/components/LinkCard.tsx
+++ b/ui/src/components/LinkCard.tsx
@@ -20,7 +20,12 @@ export default function LinkCard({
   return (
     <Link className={className} to={to}>
       <Card isClickable>
-        <CardHeader selectableActions={{ to }}>
+        <CardHeader
+          selectableActions={{
+            to,
+            selectableActionAriaLabel: `Navigate to ${to}`,
+          }}
+        >
           <CardTitle>{header}</CardTitle>
         </CardHeader>
         <CardBody>{children}</CardBody>
diff --git a/ui/src/components/RHACSLogo.tsx b/ui/src/components/RHACSLogo.tsx
index 765ec4f0a..73a8289a0 100644
--- a/ui/src/components/RHACSLogo.tsx
+++ b/ui/src/components/RHACSLogo.tsx
@@ -1,6 +1,6 @@
 import React, { forwardRef } from 'react';
 
-const RHACSLogo = forwardRef<SVGSVGElement, never>((_, ref) => (
+const RHACSLogo = forwardRef<SVGSVGElement, unknown>((_, ref) => (
   <svg
     id="RHACS-Logo"
     height="50px"
diff --git a/ui/src/containers/HomePage/LaunchPageSection.tsx b/ui/src/containers/HomePage/LaunchPageSection.tsx
index 509f4aea0..86721bf58 100644
--- a/ui/src/containers/HomePage/LaunchPageSection.tsx
+++ b/ui/src/containers/HomePage/LaunchPageSection.tsx
@@ -36,9 +36,8 @@ function FlavorCards({ showAllFlavors = false }: FlavorCardsProps): ReactElement
   const cards = data.Flavors.map((flavor) => {
     assertDefined(flavor.ID); // swagger definitions are too permitting
     return (
-      <GalleryItem>
+      <GalleryItem key={flavor.ID}>
         <LinkCard
-          key={flavor.ID}
           to={`launch/${flavor.ID}`}
           header={
             <Flex
diff --git a/ui/src/index.tsx b/ui/src/index.tsx
index a6ed57a15..d8e0c5847 100644
--- a/ui/src/index.tsx
+++ b/ui/src/index.tsx
@@ -1,12 +1,14 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 
 import './index.css';
 import App from 'containers/App';
 
-ReactDOM.render(
+const container = document.getElementById('root') as HTMLElement;
+const root = createRoot(container);
+
+root.render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>,
-  document.getElementById('root')
+  </React.StrictMode>
 );
diff --git a/ui/yarn.lock b/ui/yarn.lock
index 0fc968911..79194a9e0 100644
--- a/ui/yarn.lock
+++ b/ui/yarn.lock
@@ -1757,7 +1757,7 @@
   dependencies:
     mkdirp "^1.0.4"
 
-"@patternfly/patternfly@^6.1.1":
+"@patternfly/patternfly@^6.1.0":
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/@patternfly/patternfly/-/patternfly-6.1.0.tgz#bd2374bf293b1c2abdde071700b3d9532ec2dfe6"
   integrity sha512-w+QazL8NHKkg5j01eotblsswKxQQSYB0CN3yBXQL9ScpHdp/fK8M6TqWbKZNRpf+NqhMxcH/om8eR0N/fDCJqw==
@@ -2263,20 +2263,17 @@
   resolved "https://registry.yarnpkg.com/@types/q/-/q-1.5.2.tgz#690a1475b84f2a884fd07cd797c00f5f31356ea8"
   integrity sha512-ce5d3q03Ex0sy4R14722Rmt6MT07Ua+k4FwDfdcToYJcMKNtRVQvJ6JCAPdAmAnbRb6CsX6aYb9m96NGod9uTw==
 
-"@types/react-dom@^17.0.9":
-  version "17.0.9"
-  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-17.0.9.tgz#441a981da9d7be117042e1a6fd3dac4b30f55add"
-  integrity sha512-wIvGxLfgpVDSAMH5utdL9Ngm5Owu0VsGmldro3ORLXV8CShrL8awVj06NuEXFQ5xyaYfdca7Sgbk/50Ri1GdPg==
-  dependencies:
-    "@types/react" "*"
+"@types/react-dom@^18.3.1":
+  version "18.3.5"
+  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.3.5.tgz#45f9f87398c5dcea085b715c58ddcf1faf65f716"
+  integrity sha512-P4t6saawp+b/dFrUr2cvkVsfvPguwsxtH6dNIYRllMsefqFzkZk5UIjzyDOv5g1dXIPdG4Sp1yCR4Z6RCUsG/Q==
 
-"@types/react@*", "@types/react@^17.0.20":
-  version "17.0.20"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.20.tgz#a4284b184d47975c71658cd69e759b6bd37c3b8c"
-  integrity sha512-wWZrPlihslrPpcKyCSlmIlruakxr57/buQN1RjlIeaaTWDLtJkTtRW429MoQJergvVKc4IWBpRhWw7YNh/7GVA==
+"@types/react@^18.3.12":
+  version "18.3.18"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.3.18.tgz#9b382c4cd32e13e463f97df07c2ee3bbcd26904b"
+  integrity sha512-t4yC+vtgnkYjNSKlFx1jkAhH8LgTo2N/7Qvi83kdEaUtMDiwpbLAktKDaAMlRcJ5eSxZkH74eEGt1ky31d7kfQ==
   dependencies:
     "@types/prop-types" "*"
-    "@types/scheduler" "*"
     csstype "^3.0.2"
 
 "@types/resolve@0.0.8":
@@ -2286,11 +2283,6 @@
   dependencies:
     "@types/node" "*"
 
-"@types/scheduler@*":
-  version "0.16.1"
-  resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.1.tgz#18845205e86ff0038517aab7a18a62a6b9f71275"
-  integrity sha512-EaCxbanVeyxDRTQBkdLb3Bvl/HK7PBK6UJjsSixB0iHKoWxE5uu2Q/DgtpOhPIojN0Zl1whvOd7PoHs2P0s5eA==
-
 "@types/source-list-map@*":
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/@types/source-list-map/-/source-list-map-0.1.2.tgz#0078836063ffaf17412349bba364087e0ac02ec9"
@@ -10524,14 +10516,13 @@ react-dev-utils@^11.0.1:
     strip-ansi "6.0.0"
     text-table "0.2.0"
 
-react-dom@^17.0.1:
-  version "17.0.1"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.1.tgz#1de2560474ec9f0e334285662ede52dbc5426fc6"
-  integrity sha512-6eV150oJZ9U2t9svnsspTMrWNyHc6chX0KzDeAOXftRa8bNeOKTTfCJ7KorIwenkHd2xqVTBTCZd79yk/lx/Ug==
+react-dom@^18.3.1:
+  version "18.3.1"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.3.1.tgz#c2265d79511b57d479b3dd3fdfa51536494c5cb4"
+  integrity sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==
   dependencies:
     loose-envify "^1.1.0"
-    object-assign "^4.1.1"
-    scheduler "^0.20.1"
+    scheduler "^0.23.2"
 
 react-dropzone@^14.3.5:
   version "14.3.8"
@@ -10686,13 +10677,12 @@ react-spinners@^0.13.8:
   resolved "https://registry.yarnpkg.com/react-spinners/-/react-spinners-0.13.8.tgz#5262571be0f745d86bbd49a1e6b49f9f9cb19acc"
   integrity sha512-3e+k56lUkPj0vb5NDXPVFAOkPC//XyhKPJjvcGjyMNPWsBKpplfeyialP74G7H7+It7KzhtET+MvGqbKgAqpZA==
 
-react@^17.0.1:
-  version "17.0.1"
-  resolved "https://registry.yarnpkg.com/react/-/react-17.0.1.tgz#6e0600416bd57574e3f86d92edba3d9008726127"
-  integrity sha512-lG9c9UuMHdcAexXtigOZLX8exLWkW0Ku29qPRU8uhF2R9BN96dLCt0psvzPLlHc5OWkgymP3qwTRgbnw5BKx3w==
+react@^18.3.1:
+  version "18.3.1"
+  resolved "https://registry.yarnpkg.com/react/-/react-18.3.1.tgz#49ab892009c53933625bd16b2533fc754cab2891"
+  integrity sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==
   dependencies:
     loose-envify "^1.1.0"
-    object-assign "^4.1.1"
 
 read-cache@^1.0.0:
   version "1.0.0"
@@ -11249,13 +11239,12 @@ saxes@^5.0.1:
   dependencies:
     xmlchars "^2.2.0"
 
-scheduler@^0.20.1:
-  version "0.20.1"
-  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.20.1.tgz#da0b907e24026b01181ecbc75efdc7f27b5a000c"
-  integrity sha512-LKTe+2xNJBNxu/QhHvDR14wUXHRQbVY5ZOYpOGWRzhydZUqrLb2JBvLPY7cAqFmqrWuDED0Mjk7013SZiOz6Bw==
+scheduler@^0.23.2:
+  version "0.23.2"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.23.2.tgz#414ba64a3b282892e944cf2108ecc078d115cdc3"
+  integrity sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==
   dependencies:
     loose-envify "^1.1.0"
-    object-assign "^4.1.1"
 
 schema-utils@^1.0.0:
   version "1.0.0"

From a1a0751588656520d48e09c6805a9ed91be6bd04 Mon Sep 17 00:00:00 2001
From: David Vail <dcvail17@gmail.com>
Date: Mon, 24 Feb 2025 16:44:40 -0500
Subject: [PATCH 05/25] Remove most of tailwind from landing page

---
 ui/src/components/LinkCard.tsx                |  2 +-
 .../containers/HomePage/LaunchPageSection.tsx | 49 ++++++-------
 .../HomePage/MyClustersPageSection.tsx        | 72 +++++++++++--------
 3 files changed, 68 insertions(+), 55 deletions(-)

diff --git a/ui/src/components/LinkCard.tsx b/ui/src/components/LinkCard.tsx
index b5c8f07bb..b596a2e7a 100644
--- a/ui/src/components/LinkCard.tsx
+++ b/ui/src/components/LinkCard.tsx
@@ -19,7 +19,7 @@ export default function LinkCard({
 }: Props): ReactElement {
   return (
     <Link className={className} to={to}>
-      <Card isClickable>
+      <Card isClickable isCompact>
         <CardHeader
           selectableActions={{
             to,
diff --git a/ui/src/containers/HomePage/LaunchPageSection.tsx b/ui/src/containers/HomePage/LaunchPageSection.tsx
index 86721bf58..4209837d1 100644
--- a/ui/src/containers/HomePage/LaunchPageSection.tsx
+++ b/ui/src/containers/HomePage/LaunchPageSection.tsx
@@ -3,7 +3,15 @@
 import React, { ReactElement } from 'react';
 import { useSearchParams } from 'react-router-dom';
 import { AxiosPromise } from 'axios';
-import { Flex, Gallery, GalleryItem, Label, PageSection, Title } from '@patternfly/react-core';
+import {
+  Checkbox,
+  Flex,
+  Gallery,
+  GalleryItem,
+  Label,
+  PageSection,
+  Title,
+} from '@patternfly/react-core';
 
 import { V1FlavorListResponse, FlavorServiceApi } from 'generated/client';
 import useApiQuery from 'client/useApiQuery';
@@ -79,31 +87,24 @@ export default function LaunchPageSection(): ReactElement {
     setSearchParams(newSearchParams);
   }
 
-  const headerText = showAllFlavors ? 'All Flavors' : 'My Flavors';
-  const flavorFilterToggle = (
-    <span className="flex items-center">
-      <label htmlFor="flavor-filter-toggle" className="mr-2 text-lg">
-        Show All Flavors
-      </label>
-      <input
-        type="checkbox"
-        id="flavor-filter-toggle"
-        checked={showAllFlavors}
-        onChange={toggleFlavorFilter}
-        className="w-4 h-4 rounded-sm"
-      />
-    </span>
-  );
-
-  const header = (
-    <div className="flex justify-between items-center ">
-      <Title headingLevel="h2">{headerText}</Title>
-      {flavorFilterToggle}
-    </div>
-  );
   return (
     <>
-      <PageSection>{header}</PageSection>
+      <PageSection>
+        <Flex
+          justifyContent={{ default: 'justifyContentSpaceBetween' }}
+          alignItems={{ default: 'alignItemsCenter' }}
+        >
+          <Title headingLevel="h2">{showAllFlavors ? 'All Flavors' : 'My Flavors'}</Title>
+          <Checkbox
+            labelPosition="start"
+            label="Show All Flavors"
+            id="flavor-filter-toggle"
+            name="flavor-filter-toggle"
+            isChecked={showAllFlavors}
+            onChange={toggleFlavorFilter}
+          />
+        </Flex>
+      </PageSection>
       <PageSection>
         <Gallery
           hasGutter
diff --git a/ui/src/containers/HomePage/MyClustersPageSection.tsx b/ui/src/containers/HomePage/MyClustersPageSection.tsx
index 8e50326e7..efcf8c3ff 100644
--- a/ui/src/containers/HomePage/MyClustersPageSection.tsx
+++ b/ui/src/containers/HomePage/MyClustersPageSection.tsx
@@ -3,7 +3,17 @@ import React, { ReactElement } from 'react';
 import { useSearchParams } from 'react-router-dom';
 import { AxiosPromise } from 'axios';
 import moment from 'moment';
-import { Gallery, GalleryItem, PageSection, Title } from '@patternfly/react-core';
+import {
+  Bullseye,
+  Checkbox,
+  Flex,
+  Gallery,
+  GalleryItem,
+  Icon,
+  PageSection,
+  Title,
+} from '@patternfly/react-core';
+import { StarIcon } from '@patternfly/react-icons';
 
 import { V1ClusterListResponse, ClusterServiceApi } from 'generated/client';
 import useApiQuery from 'client/useApiQuery';
@@ -23,9 +33,9 @@ const fetchClusters = (): AxiosPromise<V1ClusterListResponse> =>
 
 function NoClustersMessage(): ReactElement {
   return (
-    <div className="m-6 flex w-full justify-center">
-      <span className="text-4xl">You haven‘t created any clusters recently.</span>
-    </div>
+    <Bullseye className="pf-v6-u-w-100 pf-v6-u-h-100">
+      <Title headingLevel="h3">You haven‘t created any clusters recently</Title>
+    </Bullseye>
   );
 }
 
@@ -66,15 +76,23 @@ function ClusterCards({ showAllClusters = false }: ClusterCardsProps): ReactElem
   const cards = sortedClusters.map((cluster) => {
     assertDefined(cluster.ID);
 
-    const extraCardClass = showAllClusters && cluster.Owner === user?.Email ? 'bg-base-200' : '';
+    const isMyCluster = cluster.Owner === user?.Email;
     return (
       <GalleryItem>
         <LinkCard
           key={cluster.ID}
           to={`cluster/${cluster.ID}`}
-          header={cluster.ID || 'No ID'}
+          header={
+            <Flex justifyContent={{ default: 'justifyContentSpaceBetween' }}>
+              <span>{cluster.ID || 'No ID'}</span>
+              {isMyCluster && (
+                <Icon>
+                  <StarIcon className="pf-v6-u-icon-color-favorite" />
+                </Icon>
+              )}
+            </Flex>
+          }
           footer={cluster.Status && <Lifespan cluster={cluster} />}
-          className={extraCardClass}
         >
           {cluster.Description && <p>Description: {cluster.Description}</p>}
           <p>Status: {cluster.Status || 'FAILED'}</p>
@@ -89,37 +107,31 @@ function ClusterCards({ showAllClusters = false }: ClusterCardsProps): ReactElem
 export default function MyClustersPageSection(): ReactElement {
   const [searchParams, setSearchParams] = useSearchParams();
   const showAllClusters = searchParams.get('showAllClusters') === 'true';
+
   function toggleClusterFilter() {
     const newSearchParams = new URLSearchParams(searchParams);
     newSearchParams.set('showAllClusters', (!showAllClusters).toString());
     setSearchParams(newSearchParams);
   }
 
-  const headerText = showAllClusters ? 'All Clusters' : 'My Clusters';
-  const clusterFilterToggle = (
-    <span className="flex items-center">
-      <label htmlFor="cluster-filter-toggle" className="mr-2 text-lg">
-        Show All Clusters
-      </label>
-      <input
-        type="checkbox"
-        id="cluster-filter-toggle"
-        checked={showAllClusters}
-        onChange={toggleClusterFilter}
-        className="w-4 h-4 rounded-sm"
-      />
-    </span>
-  );
-
-  const header = (
-    <div className="flex justify-between items-center ">
-      <Title headingLevel="h2">{headerText}</Title>
-      {clusterFilterToggle}
-    </div>
-  );
   return (
     <>
-      <PageSection>{header}</PageSection>
+      <PageSection>
+        <Flex
+          justifyContent={{ default: 'justifyContentSpaceBetween' }}
+          alignItems={{ default: 'alignItemsCenter' }}
+        >
+          <Title headingLevel="h2">{showAllClusters ? 'All Clusters' : 'My Clusters'}</Title>
+          <Checkbox
+            labelPosition="start"
+            label="Show All Clusters"
+            id="cluster-filter-toggle"
+            name="cluster-filter-toggle"
+            isChecked={showAllClusters}
+            onChange={toggleClusterFilter}
+          />
+        </Flex>
+      </PageSection>
       <PageSection>
         <Gallery
           hasGutter

From ae5bf93a14f59c45fb73285fd5ece3cff8ad5eeb Mon Sep 17 00:00:00 2001
From: David Vail <dcvail17@gmail.com>
Date: Tue, 25 Feb 2025 11:17:02 -0500
Subject: [PATCH 06/25] Cleanup cluster detail view

---
 .../ClusterInfoPage/ClusterInfoPage.tsx       | 108 +++++++++---------
 .../ClusterInfoPage/ClusterLogs.tsx           |   7 +-
 2 files changed, 57 insertions(+), 58 deletions(-)

diff --git a/ui/src/containers/ClusterInfoPage/ClusterInfoPage.tsx b/ui/src/containers/ClusterInfoPage/ClusterInfoPage.tsx
index b17e25967..a2e9f8482 100644
--- a/ui/src/containers/ClusterInfoPage/ClusterInfoPage.tsx
+++ b/ui/src/containers/ClusterInfoPage/ClusterInfoPage.tsx
@@ -1,13 +1,14 @@
 import React, { useState, useCallback, ReactElement } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
-import { Download, Trash2 } from 'react-feather';
+import { Button, Flex, PageSection, Title } from '@patternfly/react-core';
+import { DownloadIcon, TrashIcon } from '@patternfly/react-icons';
 
 import { ClusterServiceApi, V1Status } from 'generated/client';
 import useApiQuery from 'client/useApiQuery';
 import configuration from 'client/configuration';
-import PageSection from 'components/PageSection';
 import FullPageSpinner from 'components/FullPageSpinner';
 import FullPageError from 'components/FullPageError';
+
 import ClusterLogs from './ClusterLogs';
 import ClusterConnect from './ClusterConnect';
 import DeleteClusterModal from './DeleteClusterModal';
@@ -32,66 +33,63 @@ export default function ClusterInfoPage(): ReactElement {
     return <FullPageError message={error?.message || 'Unexpected server response'} />;
   }
 
-  const sectionHeader = (
-    <div className="flex flex-col space-y-2">
-      <div className="flex justify-between">
-        <div>
-          <span className="lowercase">{cluster.ID}</span>
-          <span>
-            {cluster.Description && ` (${cluster.Description})`} -{' '}
-            {cluster.Status || V1Status.Failed}
-          </span>
-        </div>
-        {!!cluster && <MutableLifespan cluster={cluster} />}
-      </div>
-      {cluster.Connect && <ClusterConnect connect={cluster.Connect} />}
-      {cluster.URL && (
-        <span className="text-base normal-case">
-          URL:{' '}
-          <a
-            href={cluster.URL}
-            className="underline text-blue-500"
-            target="_blank"
-            rel="noreferrer"
-          >
-            {cluster.URL}
-          </a>
-        </span>
-      )}
-    </div>
-  );
-
   const clusterIsReady = cluster.Status === V1Status.Ready;
 
   return (
     <>
-      <PageSection header={sectionHeader}>
-        <div className="flex flex-col">
+      <div style={{ overflow: 'auto' }}>
+        <PageSection className="pf-v6-u-h-100" style={{ overflow: 'auto' }}>
+          <Flex direction={{ default: 'column' }}>
+            <Flex justifyContent={{ default: 'justifyContentSpaceBetween' }}>
+              <Title headingLevel="h1">
+                {cluster.ID}
+                {cluster.Description && ` (${cluster.Description})`} -{' '}
+                {cluster.Status || V1Status.Failed}
+              </Title>
+              {!!cluster && <MutableLifespan cluster={cluster} />}
+            </Flex>
+            {cluster.Connect && <ClusterConnect connect={cluster.Connect} />}
+            {cluster.URL && (
+              <span className="text-base normal-case">
+                URL:{' '}
+                <a
+                  href={cluster.URL}
+                  className="underline text-blue-500"
+                  target="_blank"
+                  rel="noreferrer"
+                >
+                  {cluster.URL}
+                </a>
+              </span>
+            )}
+          </Flex>
+        </PageSection>
+
+        <PageSection>
           <ClusterLogs clusterId={clusterId} />
-        </div>
-      </PageSection>
+        </PageSection>
+      </div>
 
-      <div className=" flex border-base-400 border-t p-4">
-        <button
-          className="btn btn-base"
-          type="button"
-          onClick={(): void => setDownloadArtifactsOpen(true)}
-          disabled={!clusterIsReady}
-        >
-          <Download size={16} className="mr-2" />
-          Artifacts
-        </button>
+      <PageSection>
+        <Flex justifyContent={{ default: 'justifyContentSpaceBetween' }}>
+          <Button
+            onClick={(): void => setDownloadArtifactsOpen(true)}
+            isDisabled={!clusterIsReady}
+            icon={<DownloadIcon />}
+          >
+            Artifacts
+          </Button>
 
-        <button
-          className="btn btn-base ml-auto"
-          type="button"
-          onClick={(): void => setDeletionModalOpen(true)}
-          disabled={!clusterIsReady}
-        >
-          <Trash2 size={16} className="mr-2" />
-          Delete
-        </button>
-      </div>
+          <Button
+            onClick={(): void => setDeletionModalOpen(true)}
+            isDisabled={!clusterIsReady}
+            icon={<TrashIcon />}
+            variant="danger"
+          >
+            Delete
+          </Button>
+        </Flex>
+      </PageSection>
 
       {deletionModalOpen && (
         <DeleteClusterModal
diff --git a/ui/src/containers/ClusterInfoPage/ClusterLogs.tsx b/ui/src/containers/ClusterInfoPage/ClusterLogs.tsx
index e88e9e0e5..26ede6d4e 100644
--- a/ui/src/containers/ClusterInfoPage/ClusterLogs.tsx
+++ b/ui/src/containers/ClusterInfoPage/ClusterLogs.tsx
@@ -5,6 +5,7 @@ import useApiQuery from 'client/useApiQuery';
 import configuration from 'client/configuration';
 import FullPageSpinner from 'components/FullPageSpinner';
 import FullPageError from 'components/FullPageError';
+import { CodeBlock, CodeBlockCode } from '@patternfly/react-core';
 
 const clusterService = new ClusterServiceApi(configuration);
 
@@ -34,8 +35,8 @@ export default function ClusterLogs({ clusterId }: Props): ReactElement {
   }).join('\n\n');
 
   return (
-    <pre className="font-300 whitespace-pre-wrap">
-      <code className="h-full pb-5">{logs}</code>
-    </pre>
+    <CodeBlock>
+      <CodeBlockCode>{logs}</CodeBlockCode>
+    </CodeBlock>
   );
 }

From 7c1ff9a39731b2b142871ce646e896fd6f0f3b27 Mon Sep 17 00:00:00 2001
From: David Vail <dcvail17@gmail.com>
Date: Tue, 25 Feb 2025 11:33:20 -0500
Subject: [PATCH 07/25] Cleanup of downloads page happy-case

---
 .../DownloadsPage/InfractlPageSection.tsx     | 23 ++++--
 .../DownloadsPage/UserServiceAccountToken.tsx | 81 +++++++++----------
 2 files changed, 54 insertions(+), 50 deletions(-)

diff --git a/ui/src/containers/DownloadsPage/InfractlPageSection.tsx b/ui/src/containers/DownloadsPage/InfractlPageSection.tsx
index ac1bc6c66..ae1375696 100644
--- a/ui/src/containers/DownloadsPage/InfractlPageSection.tsx
+++ b/ui/src/containers/DownloadsPage/InfractlPageSection.tsx
@@ -1,6 +1,7 @@
 import React, { ReactElement } from 'react';
+import { Button, Flex, PageSection, Title } from '@patternfly/react-core';
 
-import PageSection from 'components/PageSection';
+import { DownloadIcon } from '@patternfly/react-icons';
 import UserServiceAccountToken from './UserServiceAccountToken';
 
 export default function InfractlPageSection(): ReactElement {
@@ -10,17 +11,25 @@ export default function InfractlPageSection(): ReactElement {
     'Download for Linux': '/downloads/infractl-linux-amd64',
   };
   const infractlLinks = Object.entries(infractlDownloads).map(([label, value]) => (
-    <a key={value} href={value} download className="btn btn-base mr-2">
+    <Button
+      component="a"
+      variant="secondary"
+      key={value}
+      href={value}
+      icon={<DownloadIcon />}
+      download
+    >
       {label}
-    </a>
+    </Button>
   ));
 
   return (
-    <PageSection header="infractl (CLI)">
-      <div className="mb-4 mx-2">{infractlLinks}</div>
-      <div className="md:w-1/2 mx-2">
+    <PageSection>
+      <Flex direction={{ default: 'column' }} spaceItems={{ default: 'spaceItemsMd' }}>
+        <Title headingLevel="h1">Infractl (CLI)</Title>
+        <Flex spaceItems={{ default: 'spaceItemsMd' }}>{infractlLinks}</Flex>
         <UserServiceAccountToken />
-      </div>
+      </Flex>
     </PageSection>
   );
 }
diff --git a/ui/src/containers/DownloadsPage/UserServiceAccountToken.tsx b/ui/src/containers/DownloadsPage/UserServiceAccountToken.tsx
index 2643d0e7a..8c7ccf793 100644
--- a/ui/src/containers/DownloadsPage/UserServiceAccountToken.tsx
+++ b/ui/src/containers/DownloadsPage/UserServiceAccountToken.tsx
@@ -1,12 +1,20 @@
 import React, { ReactElement } from 'react';
+import {
+  ClipboardCopy,
+  ClipboardCopyVariant,
+  CodeBlock,
+  CodeBlockCode,
+  Divider,
+  Flex,
+  Title,
+} from '@patternfly/react-core';
 import { AxiosPromise } from 'axios';
-import { useClipboard } from 'use-clipboard-copy';
+import { AlertCircle } from 'react-feather';
+import { ClipLoader } from 'react-spinners';
 
 import { V1TokenResponse, UserServiceApi } from 'generated/client';
 import useApiQuery from 'client/useApiQuery';
 import configuration from 'client/configuration';
-import { AlertCircle, Clipboard } from 'react-feather';
-import { ClipLoader } from 'react-spinners';
 
 const userService = new UserServiceApi(configuration);
 
@@ -14,9 +22,6 @@ const fetchToken = (): AxiosPromise<V1TokenResponse> => userService.token({});
 
 export default function UserServiceAccountToken(): ReactElement {
   const { loading, error, data } = useApiQuery(fetchToken);
-  const clipboard = useClipboard({
-    copiedTimeout: 800, // duration in milliseconds to show 'successfully copied' feedback
-  });
 
   if (loading) {
     return (
@@ -39,47 +44,37 @@ export default function UserServiceAccountToken(): ReactElement {
   const exportCommand = `export INFRA_TOKEN="${data.Token}"`;
 
   return (
-    <div>
-      <div className="text-xl mb-8">
-        <p className="my-2">
-          After downloading the file, you can install it anywhere in your <code>$PATH</code>. For
-          example, you may put it in your Go executable directory.
-        </p>
-        <p className="my-2">
-          Here are the commands to move the file, allow it to execute on an Intel-based Mac, confirm
-          its location, and help you learn about its features.
-        </p>
-        <pre className="border border-base-400 p-4 text-lg whitespace-pre-wrap">
+    <Flex direction={{ default: 'column' }} spaceItems={{ default: 'spaceItemsMd' }}>
+      <p>
+        After downloading the file, you can install it anywhere in your <code>$PATH</code>. For
+        example, you may put it in your Go executable directory.
+      </p>
+      <p>
+        Here are the commands to move the file, allow it to execute on an Intel-based Mac, confirm
+        its location, and help you learn about its features.
+      </p>
+      <CodeBlock className="pf-v6-u-w-50-on-xl">
+        <CodeBlockCode>
           $ install ~/Downloads/infractl-darwin-amd64 $GOPATH/bin/infractl
           <br />$ xattr -c $GOPATH/bin/infractl
           <br />$ which infractl
           <br />$ infractl help
-        </pre>
-      </div>
+        </CodeBlockCode>
+      </CodeBlock>
 
-      <h3 className="text-3xl mb-2">Authenticating with infractl</h3>
-      <div className="flex items-center">
-        <p className="text-xl">Run the following in a terminal to authenticate infractl for use:</p>
-        <button
-          type="button"
-          title="Copy to clipboard"
-          aria-label="Copy to clipboard"
-          onClick={clipboard.copy}
-          className="ml-2"
-        >
-          <div className="flex items-center">
-            <Clipboard size={16} />
-            {clipboard.copied && <span className="ml-2 text-success-700">Copied!</span>}
-          </div>
-        </button>
-      </div>
-      <textarea
-        rows={6}
-        value={exportCommand}
-        className="mt-4 w-full bg-base-100 p-1 rounded border-2 border-base-300 hover:border-base-400 font-600 leading-normal outline-none"
-        readOnly
-        ref={clipboard.target}
-      />
-    </div>
+      <Divider component="div" />
+
+      <Title headingLevel="h3">Authenticating with infractl</Title>
+      <p>Run the following in a terminal to authenticate infractl for use:</p>
+      <ClipboardCopy
+        className="pf-v6-u-w-50-on-xl"
+        isReadOnly
+        hoverTip="Copy"
+        clickTip="Copied"
+        variant={ClipboardCopyVariant.expansion}
+      >
+        {exportCommand}
+      </ClipboardCopy>
+    </Flex>
   );
 }

From 756b781ebd497531eb3e024e00d38015d54248c0 Mon Sep 17 00:00:00 2001
From: David Vail <dcvail17@gmail.com>
Date: Tue, 25 Feb 2025 11:54:34 -0500
Subject: [PATCH 08/25] Some form happy path cleanup

---
 ui/src/components/forms/TextFormField.tsx     | 13 ++++-----
 .../LaunchClusterPage/ClusterForm.tsx         | 27 +++++++++----------
 .../LaunchClusterPage/LaunchClusterPage.tsx   |  7 +++--
 3 files changed, 23 insertions(+), 24 deletions(-)

diff --git a/ui/src/components/forms/TextFormField.tsx b/ui/src/components/forms/TextFormField.tsx
index 1e5c1852b..52c7feb41 100644
--- a/ui/src/components/forms/TextFormField.tsx
+++ b/ui/src/components/forms/TextFormField.tsx
@@ -1,11 +1,11 @@
 import React, { ReactElement, ReactNode } from 'react';
 import { useField } from 'formik';
 import {
+  Button,
   FormGroup,
   FormHelperText,
   HelperText,
   HelperTextItem,
-  Icon,
   Popover,
   TextInput,
   ValidatedOptions,
@@ -45,17 +45,14 @@ export default function TextFormField({
       labelHelp={
         helper ? (
           <Popover bodyContent={helper} className="form-help">
-            <button
-              type="button"
+            <Button
               aria-label={`Help for ${name}`}
               onClick={(e) => e.preventDefault()}
               aria-describedby={id}
               className="pf-v6-c-form__group-label-help"
-            >
-              <Icon>
-                <HelpIcon />
-              </Icon>
-            </button>
+              icon={<HelpIcon />}
+              variant="plain"
+            />
           </Popover>
         ) : undefined
       }
diff --git a/ui/src/containers/LaunchClusterPage/ClusterForm.tsx b/ui/src/containers/LaunchClusterPage/ClusterForm.tsx
index 9e1edae30..750334ad6 100644
--- a/ui/src/containers/LaunchClusterPage/ClusterForm.tsx
+++ b/ui/src/containers/LaunchClusterPage/ClusterForm.tsx
@@ -11,8 +11,7 @@ import React, { useState, ReactElement } from 'react';
 import { Formik, FormikValues, FormikHelpers, useFormikContext } from 'formik';
 import * as yup from 'yup';
 import { mapValues } from 'lodash';
-import { ClipLoader } from 'react-spinners';
-import { UploadCloud } from 'react-feather';
+import { Button, Form } from '@patternfly/react-core';
 import Markdown from 'react-markdown';
 
 import { ClusterServiceApi, V1Parameter } from 'generated/client';
@@ -23,7 +22,7 @@ import NumberFormField from 'components/forms/NumberFormField';
 import { useUserAuth } from 'containers/UserAuthProvider';
 import assertDefined from 'utils/assertDefined';
 import { generateClusterName } from 'utils/cluster.utils';
-import { Form } from '@patternfly/react-core';
+import { UploadCloud } from 'react-feather';
 
 const clusterService = new ClusterServiceApi(configuration);
 
@@ -194,22 +193,22 @@ function FormContent(props: {
       />
     ));
 
-  const launchBtnContent = (
-    <>
-      <UploadCloud size={16} className="mr-2" />
-      Launch
-    </>
-  );
-
   return (
     <>
       {parameterFields}
 
       <TextFormField name="Description" label="Description" />
 
-      <button type="submit" className="btn btn-base" disabled={isSubmitting}>
-        {isSubmitting ? <ClipLoader size={16} color="currentColor" /> : launchBtnContent}
-      </button>
+      <Button
+        type="submit"
+        isDisabled={isSubmitting}
+        icon={isSubmitting ? undefined : <UploadCloud size={16} />}
+        spinnerAriaValueText="Launching cluster"
+        spinnerAriaLabel="Launching cluster"
+        isLoading={isSubmitting}
+      >
+        {isSubmitting ? 'Launching cluster' : 'Launch'}
+      </Button>
     </>
   );
 }
@@ -275,7 +274,7 @@ export default function ClusterForm({
 
   return (
     <Formik initialValues={initialValues} validationSchema={schema} onSubmit={onSubmit}>
-      <Form className="md:w-1/3">
+      <Form className="pf-v6-u-w-25-on-xl pf-v6-u-w-50-on-md">
         {error && (
           <div className="p-2 mb-2 bg-alert-200">
             {`[Server Error] ${error.message || 'Cluster creation request failed'}`}
diff --git a/ui/src/containers/LaunchClusterPage/LaunchClusterPage.tsx b/ui/src/containers/LaunchClusterPage/LaunchClusterPage.tsx
index 969cd1d4d..f16e0be23 100644
--- a/ui/src/containers/LaunchClusterPage/LaunchClusterPage.tsx
+++ b/ui/src/containers/LaunchClusterPage/LaunchClusterPage.tsx
@@ -1,10 +1,10 @@
 import React, { useCallback, ReactElement } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
+import { PageSection, Title } from '@patternfly/react-core';
 
 import { FlavorServiceApi } from 'generated/client';
 import useApiQuery from 'client/useApiQuery';
 import configuration from 'client/configuration';
-import PageSection from 'components/PageSection';
 import FullPageSpinner from 'components/FullPageSpinner';
 import FullPageError from 'components/FullPageError';
 import ClusterForm from './ClusterForm';
@@ -26,7 +26,10 @@ export default function LaunchClusterPage(): ReactElement {
   }
 
   return (
-    <PageSection header={`Launch "${data.Name}" Cluster (${data?.Availability || 'Alpha'})`}>
+    <PageSection>
+      <Title headingLevel="h1" className="pf-v6-u-mb-xl">
+        {`Launch "${data.Name}" Cluster (${data?.Availability || 'Alpha'})`}
+      </Title>
       <ClusterForm
         flavorId={flavorId}
         flavorParameters={data.Parameters}

From 694899bb82965e719cbd5d1a313d57ee4634d7f5 Mon Sep 17 00:00:00 2001
From: David Vail <dcvail17@gmail.com>
Date: Tue, 25 Feb 2025 12:11:49 -0500
Subject: [PATCH 09/25] Update header controls

---
 ui/src/containers/AppHeader/AppHeader.tsx | 27 ++++++++++++++++-------
 ui/src/containers/AppHeader/UserInfo.tsx  | 21 ++++++------------
 2 files changed, 26 insertions(+), 22 deletions(-)

diff --git a/ui/src/containers/AppHeader/AppHeader.tsx b/ui/src/containers/AppHeader/AppHeader.tsx
index 6b834049d..a640dad61 100644
--- a/ui/src/containers/AppHeader/AppHeader.tsx
+++ b/ui/src/containers/AppHeader/AppHeader.tsx
@@ -1,18 +1,29 @@
+/* eslint-disable react/jsx-props-no-spreading */
 import React, { ReactElement } from 'react';
 import { Link } from 'react-router-dom';
-import { Terminal } from 'react-feather';
+import { Button } from '@patternfly/react-core';
+import { TerminalIcon } from '@patternfly/react-icons';
 
 import AppHeaderLayout from 'components/AppHeaderLayout';
 import ProductLogoTile from './ProductLogoTile';
 import UserInfo from './UserInfo';
 
 export default function AppHeader(): ReactElement {
-  const mainArea = (
-    <Link to="/downloads" className="btn btn-base">
-      <Terminal size={16} className="mr-2" />
-      infractl
-    </Link>
+  return (
+    <AppHeaderLayout
+      logo={<ProductLogoTile />}
+      main={
+        <Button
+          component={(props) => <Link {...props} to="/downloads" />}
+          variant="control"
+          icon={<TerminalIcon />}
+        >
+          infractl
+        </Button>
+      }
+      ending={<UserInfo />}
+    />
   );
-
-  return <AppHeaderLayout logo={<ProductLogoTile />} main={mainArea} ending={<UserInfo />} />;
 }
+
+/* eslint-enable react/jsx-props-no-spreading */
diff --git a/ui/src/containers/AppHeader/UserInfo.tsx b/ui/src/containers/AppHeader/UserInfo.tsx
index 43761e1da..c30751b7a 100644
--- a/ui/src/containers/AppHeader/UserInfo.tsx
+++ b/ui/src/containers/AppHeader/UserInfo.tsx
@@ -1,28 +1,21 @@
 import React, { ReactElement } from 'react';
 
-import { Avatar } from '@patternfly/react-core';
+import { Avatar, Button, Flex } from '@patternfly/react-core';
 import { useUserAuth } from 'containers/UserAuthProvider';
 import { LogOut } from 'react-feather';
 
 export default function UserInfo(): ReactElement {
   const { user, logout } = useUserAuth();
   return (
-    <div className="flex flex-row h-full w-full items-center mr-2">
+    <Flex alignItems={{ default: 'alignItemsCenter' }}>
       {user?.Picture ? (
-        <Avatar
-          alt={user?.Name || 'anonymous'}
-          src={user.Picture}
-          size="md"
-          isBordered
-          className="flex justify-center items-center mr-2"
-        />
+        <Avatar alt={user?.Name || 'anonymous'} src={user.Picture} size="md" isBordered />
       ) : (
-        <p className="flex justify-center items-center mr-2">{user?.Name || 'anonymous'}</p>
+        <p>{user?.Name || 'anonymous'}</p>
       )}
-      <button onClick={logout} type="button" className="btn btn-base">
-        <LogOut size={16} className="mr-2" />
+      <Button onClick={logout} variant="control" icon={<LogOut size={16} />}>
         Logout
-      </button>
-    </div>
+      </Button>
+    </Flex>
   );
 }

From f5be3006d288e789b462547823267fcff288f1f7 Mon Sep 17 00:00:00 2001
From: David Vail <dcvail17@gmail.com>
Date: Tue, 25 Feb 2025 12:17:21 -0500
Subject: [PATCH 10/25] Collapse excessive file nesting in header

---
 ui/src/containers/AppHeader/AppHeader.tsx     | 27 +++++++++++++++----
 .../containers/AppHeader/ProductLogoTile.tsx  | 12 ---------
 ui/src/containers/AppHeader/UserInfo.tsx      | 21 ---------------
 ui/src/containers/AppHeader/Version.tsx       |  2 +-
 4 files changed, 23 insertions(+), 39 deletions(-)
 delete mode 100644 ui/src/containers/AppHeader/ProductLogoTile.tsx
 delete mode 100644 ui/src/containers/AppHeader/UserInfo.tsx

diff --git a/ui/src/containers/AppHeader/AppHeader.tsx b/ui/src/containers/AppHeader/AppHeader.tsx
index a640dad61..1d3bb33dd 100644
--- a/ui/src/containers/AppHeader/AppHeader.tsx
+++ b/ui/src/containers/AppHeader/AppHeader.tsx
@@ -1,17 +1,23 @@
 /* eslint-disable react/jsx-props-no-spreading */
 import React, { ReactElement } from 'react';
 import { Link } from 'react-router-dom';
-import { Button } from '@patternfly/react-core';
+import { Avatar, Button, Flex } from '@patternfly/react-core';
 import { TerminalIcon } from '@patternfly/react-icons';
+import { LogOut } from 'react-feather';
 
 import AppHeaderLayout from 'components/AppHeaderLayout';
-import ProductLogoTile from './ProductLogoTile';
-import UserInfo from './UserInfo';
+import RHACSLogo from 'components/RHACSLogo';
+import { useUserAuth } from 'containers/UserAuthProvider';
 
 export default function AppHeader(): ReactElement {
+  const { user, logout } = useUserAuth();
   return (
     <AppHeaderLayout
-      logo={<ProductLogoTile />}
+      logo={
+        <Link to="/">
+          <RHACSLogo />
+        </Link>
+      }
       main={
         <Button
           component={(props) => <Link {...props} to="/downloads" />}
@@ -21,7 +27,18 @@ export default function AppHeader(): ReactElement {
           infractl
         </Button>
       }
-      ending={<UserInfo />}
+      ending={
+        <Flex alignItems={{ default: 'alignItemsCenter' }}>
+          {user?.Picture ? (
+            <Avatar alt={user?.Name || 'anonymous'} src={user.Picture} size="md" isBordered />
+          ) : (
+            <p>{user?.Name || 'anonymous'}</p>
+          )}
+          <Button onClick={logout} variant="control" icon={<LogOut size={16} />}>
+            Logout
+          </Button>
+        </Flex>
+      }
     />
   );
 }
diff --git a/ui/src/containers/AppHeader/ProductLogoTile.tsx b/ui/src/containers/AppHeader/ProductLogoTile.tsx
deleted file mode 100644
index 4edf24e60..000000000
--- a/ui/src/containers/AppHeader/ProductLogoTile.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React, { ReactElement } from 'react';
-import { Link } from 'react-router-dom';
-
-import RHACSLogo from 'components/RHACSLogo';
-
-export default function ProductLogoTile(): ReactElement {
-  return (
-    <Link to="/">
-      <RHACSLogo />
-    </Link>
-  );
-}
diff --git a/ui/src/containers/AppHeader/UserInfo.tsx b/ui/src/containers/AppHeader/UserInfo.tsx
deleted file mode 100644
index c30751b7a..000000000
--- a/ui/src/containers/AppHeader/UserInfo.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import React, { ReactElement } from 'react';
-
-import { Avatar, Button, Flex } from '@patternfly/react-core';
-import { useUserAuth } from 'containers/UserAuthProvider';
-import { LogOut } from 'react-feather';
-
-export default function UserInfo(): ReactElement {
-  const { user, logout } = useUserAuth();
-  return (
-    <Flex alignItems={{ default: 'alignItemsCenter' }}>
-      {user?.Picture ? (
-        <Avatar alt={user?.Name || 'anonymous'} src={user.Picture} size="md" isBordered />
-      ) : (
-        <p>{user?.Name || 'anonymous'}</p>
-      )}
-      <Button onClick={logout} variant="control" icon={<LogOut size={16} />}>
-        Logout
-      </Button>
-    </Flex>
-  );
-}
diff --git a/ui/src/containers/AppHeader/Version.tsx b/ui/src/containers/AppHeader/Version.tsx
index 9620b2c67..9985abd4a 100644
--- a/ui/src/containers/AppHeader/Version.tsx
+++ b/ui/src/containers/AppHeader/Version.tsx
@@ -27,7 +27,7 @@ export default function Version(): ReactElement {
   if (loading)
     return (
       <VersionContent
-        icon={<Spinner  size="md" aria-label="Loading version information" />}
+        icon={<Spinner size="md" aria-label="Loading version information" />}
         text="Loading..."
       />
     );

From f993bccc35024e9c16e41d9b512dcdcf2a99bc59 Mon Sep 17 00:00:00 2001
From: David Vail <dcvail17@gmail.com>
Date: Tue, 25 Feb 2025 12:36:33 -0500
Subject: [PATCH 11/25] Remove TailwindCSS from dependency chain

---
 ui/.eslintignore                  |   4 -
 ui/.eslintrc.js                   |   2 -
 ui/.postcssrc.js                  |   8 -
 ui/.prettierignore                |   2 +-
 ui/Makefile                       |   2 +-
 ui/README.md                      |  13 -
 ui/package.json                   |  17 +-
 ui/src/.gitignore                 |   3 -
 ui/src/app.tw.css                 | 119 ------
 ui/src/components/Modal.tsx       |   5 +-
 ui/src/components/PageSection.tsx |  22 --
 ui/src/index.tsx                  |   5 +-
 ui/tailwind.config.js             |  10 -
 ui/tsconfig.eslint.json           |   2 +-
 ui/yarn.lock                      | 584 ++----------------------------
 15 files changed, 32 insertions(+), 766 deletions(-)
 delete mode 100644 ui/.postcssrc.js
 delete mode 100644 ui/src/app.tw.css
 delete mode 100644 ui/src/components/PageSection.tsx
 delete mode 100644 ui/tailwind.config.js

diff --git a/ui/.eslintignore b/ui/.eslintignore
index 07a1d39f6..6d8bc7a10 100644
--- a/ui/.eslintignore
+++ b/ui/.eslintignore
@@ -8,10 +8,6 @@
 # generated sources
 /src/generated
 
-# disabling for copy-pasted tailwind plugins
-/tailwind-plugins
-
 # hidden configuration files
 !.eslintrc.js
 !.prettierrc.js
-!.postcssrc.js
diff --git a/ui/.eslintrc.js b/ui/.eslintrc.js
index cea5aad82..c040e34a4 100644
--- a/ui/.eslintrc.js
+++ b/ui/.eslintrc.js
@@ -29,9 +29,7 @@ module.exports = {
       {
         devDependencies: [
           '**/.eslintrc.js',
-          'tailwind.config.js',
           '.prettierrc.js',
-          '.postcssrc.js',
           'src/setupProxy.js',
           'src/setupTests.ts',
           '**/*.test.tsx',
diff --git a/ui/.postcssrc.js b/ui/.postcssrc.js
deleted file mode 100644
index f67d7c756..000000000
--- a/ui/.postcssrc.js
+++ /dev/null
@@ -1,8 +0,0 @@
-/* eslint @typescript-eslint/no-var-requires: 0 */
-
-// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-const tailwindcss = require('tailwindcss');
-
-module.exports = {
-  plugins: [tailwindcss],
-};
diff --git a/ui/.prettierignore b/ui/.prettierignore
index 487b96b07..e1478a2fd 100644
--- a/ui/.prettierignore
+++ b/ui/.prettierignore
@@ -7,4 +7,4 @@
 
 # generated sources
 /src/generated
-/src/index.css
+/src/infra.css
diff --git a/ui/Makefile b/ui/Makefile
index e785ee854..b46ced268 100644
--- a/ui/Makefile
+++ b/ui/Makefile
@@ -9,7 +9,7 @@ all: deps lint-check test build
 deps: package.json
 	yarn install --frozen-lockfile
 
-SOURCES := $(shell ls *.json) tailwind.config.js yarn.lock
+SOURCES := $(shell ls *.json) yarn.lock
 SOURCES += $(shell find public)
 SOURCES += $(shell find src -name '*.ts' -print)
 SOURCES += $(shell find src -name '*.tsx' -print)
diff --git a/ui/README.md b/ui/README.md
index 09284adf0..2b349ccc6 100644
--- a/ui/README.md
+++ b/ui/README.md
@@ -21,19 +21,6 @@ https://github.com/stackrox/stackrox-env.
   machine, consider using [nvm](https://github.com/creationix/nvm))
 - [Yarn](https://yarnpkg.com/en/)
 
-### GitHub Packages NPM Registry
-
-This project depends on packages with `@stackrox` scope accessible from GitHub
-Packages NPM registry. Get access with:
-
-```
-npm login --auth-type=legacy --registry=https://npm.pkg.github.com
-```
-
-Use your github username and a token with `repo` and `read:packages` rights.
-More details can be found
-[here](https://docs.engineering.redhat.com/display/StackRox/Using+GitHub+Packages+with+NPM).
-
 ### UI Dev Server
 
 To avoid a connection error with node v1.17+ set:
diff --git a/ui/package.json b/ui/package.json
index 8f2de436d..01bfd4db1 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -3,14 +3,8 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "clean": "npm-run-all clean:*",
-    "clean:tailwind": "rm -f src/index.css",
-    "start": "npm-run-all clean -p start:*",
-    "start:tailwind": "NODE_ENV=development postcss ./src/app.tw.css -o ./src/index.css -w",
-    "start:cra": "wait-on src/index.css && PORT=3001 HTTPS=true NODE_OPTIONS=--openssl-legacy-provider EXTEND_ESLINT=true react-scripts start",
-    "build": "npm-run-all build:tailwind build:cra",
-    "build:tailwind": "NODE_ENV=production postcss ./src/app.tw.css -o ./src/index.css",
-    "build:cra": "NODE_OPTIONS=--openssl-legacy-provider EXTEND_ESLINT=true react-scripts build",
+    "start": "PORT=3001 HTTPS=true NODE_OPTIONS=--openssl-legacy-provider EXTEND_ESLINT=true react-scripts start",
+    "build": "NODE_OPTIONS=--openssl-legacy-provider EXTEND_ESLINT=true react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
     "lint-check": "npm-run-all lint-check:*",
@@ -42,7 +36,6 @@
     "yup": "^1.3.3"
   },
   "devDependencies": {
-    "@stackrox/tailwind-config": "^0.2.0",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^12.1.1",
     "@testing-library/user-event": "^13.2.1",
@@ -58,13 +51,9 @@
     "eslint-plugin-prettier": "^3.4.1",
     "http-proxy-middleware": "^2.0.6",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.4.31",
-    "postcss-cli": "^10.1.0",
     "prettier": "^2.2.1",
     "react-scripts": "^4.0.1",
-    "tailwindcss": "^2.2.9",
-    "typescript": "~5.1.6",
-    "wait-on": "^7.0.1"
+    "typescript": "~5.1.6"
   },
   "browserslist": {
     "production": [
diff --git a/ui/src/.gitignore b/ui/src/.gitignore
index 976789a05..24f352ff4 100644
--- a/ui/src/.gitignore
+++ b/ui/src/.gitignore
@@ -2,6 +2,3 @@
 
 # include generated sources 
 !/generated
-
-# exclude tailwind generated styles
-/index.css
diff --git a/ui/src/app.tw.css b/ui/src/app.tw.css
deleted file mode 100644
index 07d224cdc..000000000
--- a/ui/src/app.tw.css
+++ /dev/null
@@ -1,119 +0,0 @@
-@import '~@stackrox/tailwind-config/light.theme.css';
-
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@import '~@patternfly/react-core/dist/styles/base.css';
-@import '~@patternfly/patternfly/patternfly-addons.css';
-@import './infra.css';
-
-/* reset the unthinking hardcoded resets of Tailwind Forms in v2 plugin,
-   https://github.com/tailwindlabs/tailwindcss-forms/blob/master/src/index.js */
-
-[type='text'],
-[type='email'],
-[type='url'],
-[type='password'],
-[type='number'],
-[type='date'],
-[type='datetime-local'],
-[type='month'],
-[type='search'],
-[type='tel'],
-[type='time'],
-[type='week'],
-[multiple],
-textarea,
-select {
-  font-size: 100%;
-}
-
-[type='checkbox'],
-[type='checkbox'] {
-  @apply w-3 h-3 rounded-sm;
-}
-
-/* end reset of the Tailwind forms reset */
-
-.sticky {
-  position: sticky !important;
-}
-
-.logo {
-  width: 48px;
-  height: 48px;
-  position: relative;
-  top: 1px;
-  padding: 4px;
-}
-
-/**
- * Button styles
- */
-.btn-class {
-  @apply inline-flex px-2 rounded-sm font-600 uppercase text-center items-center min-w-16 justify-center border-2 !important;
-  line-height: 14px; /* required because we were relying on the Chrome browser default of 14px earlier */
-}
-
-.btn-sm {
-  @apply btn-class py-1 text-xs !important;
-}
-
-.btn {
-  @apply btn-class py-2 text-sm !important;
-}
-
-.btn-icon {
-  @apply flex py-2 px-2 rounded-sm font-600 uppercase text-center text-sm items-center justify-center bg-base-200 border !important;
-}
-
-.btn-success {
-  @apply text-success-700 border-success-500 bg-success-200 !important;
-}
-
-.btn-success:hover {
-  @apply border-success-500 bg-success-300 text-success-800 !important;
-}
-
-.btn-alert {
-  @apply text-alert-100 border-alert-600 bg-alert-600 !important;
-}
-
-.btn-alert:hover {
-  @apply text-alert-100 border-alert-700 bg-alert-700 !important;
-}
-
-.btn-primary {
-  @apply border-primary-300 text-primary-600 !important;
-}
-
-.btn-primary:hover {
-  @apply text-primary-600 bg-primary-100 bg-base-200 border-primary-400 !important;
-}
-
-.btn-tertiary {
-  @apply border-tertiary-700 text-tertiary-700 !important;
-}
-
-.btn-tertiary:hover {
-  @apply text-tertiary-700 bg-tertiary-700 bg-base-200 border-tertiary-600 !important;
-}
-
-.btn-base {
-  @apply text-base-600 border-base-400 bg-base-100 !important;
-}
-
-.btn-base:hover {
-  @apply border-base-400 bg-base-200 text-base-700 !important;
-}
-/** End of Button styles */
-
-.top-navigation {
-  box-shadow: inset 0px -1px 0 0 var(--base-400);
-}
-
-.react-modal-overlay {
-  @apply fixed top-0 left-0 w-full h-full z-60 !important;
-  background-color: hsla(225, 41%, 32%, 0.82);
-}
diff --git a/ui/src/components/Modal.tsx b/ui/src/components/Modal.tsx
index 4253da3b2..01c451829 100644
--- a/ui/src/components/Modal.tsx
+++ b/ui/src/components/Modal.tsx
@@ -1,8 +1,5 @@
 import React, { ReactElement, ReactNode } from 'react';
-import {
-	Modal,
-	ModalVariant
-} from '@patternfly/react-core/deprecated';
+import { Modal, ModalVariant } from '@patternfly/react-core/deprecated';
 
 type Props = {
   isOpen: boolean;
diff --git a/ui/src/components/PageSection.tsx b/ui/src/components/PageSection.tsx
deleted file mode 100644
index c1e160645..000000000
--- a/ui/src/components/PageSection.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import React, { ReactElement, ReactNode } from 'react';
-
-type Props = {
-  header: ReactNode;
-  className?: string;
-  children: ReactNode;
-};
-
-export default function PageSection({ header, className = '', children }: Props): ReactElement {
-  return (
-    <div className="border-t-3 border-base-400 flex flex-col h-full min-h-0">
-      <div className={`h-full overflow-auto ${className}`}>
-        <header className="border-b-2 border-base-400 px-4 py-2">
-          <h2 className="bg-base-0 capitalize font-600 sticky text-4xl text-base-600 top-0">
-            {header}
-          </h2>
-        </header>
-        <div className="flex flex-col p-4">{children}</div>
-      </div>
-    </div>
-  );
-}
diff --git a/ui/src/index.tsx b/ui/src/index.tsx
index d8e0c5847..ab9546f87 100644
--- a/ui/src/index.tsx
+++ b/ui/src/index.tsx
@@ -1,9 +1,12 @@
 import React from 'react';
 import { createRoot } from 'react-dom/client';
 
-import './index.css';
 import App from 'containers/App';
 
+import '@patternfly/react-core/dist/styles/base.css';
+import '@patternfly/patternfly/patternfly-addons.css';
+import './infra.css';
+
 const container = document.getElementById('root') as HTMLElement;
 const root = createRoot(container);
 
diff --git a/ui/tailwind.config.js b/ui/tailwind.config.js
deleted file mode 100644
index 50154bff4..000000000
--- a/ui/tailwind.config.js
+++ /dev/null
@@ -1,10 +0,0 @@
-/* eslint @typescript-eslint/no-var-requires: 0 */
-
-// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-const baseConfig = require('@stackrox/tailwind-config');
-
-// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-module.exports = {
-  ...baseConfig,
-  purge: ['./public/index.html', './src/**/*.tsx', './src/**/*.tw.css'],
-};
diff --git a/ui/tsconfig.eslint.json b/ui/tsconfig.eslint.json
index b2b0a1b40..20bb7024a 100644
--- a/ui/tsconfig.eslint.json
+++ b/ui/tsconfig.eslint.json
@@ -1,7 +1,7 @@
 /* This file is only used by ESLint, that derives TS project config from it */
 {
   "extends": "./tsconfig.json",
-  "include": [".", "**/.eslintrc.js", ".prettierrc.js", ".postcssrc.js", "tailwind.config.js"],
+  "include": [".", "**/.eslintrc.js", ".prettierrc.js"],
   "compilerOptions": {
     "allowJs": true,
     "checkJs": true
diff --git a/ui/yarn.lock b/ui/yarn.lock
index 79194a9e0..4df38ea0f 100644
--- a/ui/yarn.lock
+++ b/ui/yarn.lock
@@ -1470,11 +1470,6 @@
   resolved "https://registry.yarnpkg.com/@hapi/hoek/-/hoek-8.5.1.tgz#fde96064ca446dec8c55a8c2f130957b070c6e06"
   integrity sha512-yN7kbciD87WzLGc5539Tn0sApjyiGHAJgKvG9W8C7O+6c7qmoQMfVs0W4bX17eqz6C78QJqqFrtgdK5EWf6Qow==
 
-"@hapi/hoek@^9.0.0":
-  version "9.0.4"
-  resolved "https://registry.yarnpkg.com/@hapi/hoek/-/hoek-9.0.4.tgz#e80ad4e8e8d2adc6c77d985f698447e8628b6010"
-  integrity sha512-EwaJS7RjoXUZ2cXXKZZxZqieGtc7RbvQhUy8FwDoMQtxWVi14tFjeFCYPZAM1mBCpOpiBpyaZbb9NeHc7eGKgw==
-
 "@hapi/joi@^15.1.0":
   version "15.1.1"
   resolved "https://registry.yarnpkg.com/@hapi/joi/-/joi-15.1.1.tgz#c675b8a71296f02833f8d6d243b34c57b8ce19d7"
@@ -1492,13 +1487,6 @@
   dependencies:
     "@hapi/hoek" "^8.3.0"
 
-"@hapi/topo@^5.0.0":
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/@hapi/topo/-/topo-5.0.0.tgz#c19af8577fa393a06e9c77b60995af959be721e7"
-  integrity sha512-tFJlT47db0kMqVm3H4nQYgn6Pwg10GTZHb1pwmSiv1K4ks6drQOtfEF5ZnPjkvC+y4/bUPHK+bc87QvLcL+WMw==
-  dependencies:
-    "@hapi/hoek" "^9.0.0"
-
 "@istanbuljs/load-nyc-config@^1.0.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz#fd3db1d59ecf7cf121e80650bb86712f9b55eced"
@@ -1834,23 +1822,6 @@
     estree-walker "^1.0.1"
     picomatch "^2.2.2"
 
-"@sideway/address@^4.1.3":
-  version "4.1.4"
-  resolved "https://registry.yarnpkg.com/@sideway/address/-/address-4.1.4.tgz#03dccebc6ea47fdc226f7d3d1ad512955d4783f0"
-  integrity sha512-7vwq+rOHVWjyXxVlR76Agnvhy8I9rpzjosTESvmhNeXOXdZZB15Fl+TI9x1SiHZH5Jv2wTGduSxFDIaq0m3DUw==
-  dependencies:
-    "@hapi/hoek" "^9.0.0"
-
-"@sideway/formula@^3.0.1":
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/@sideway/formula/-/formula-3.0.1.tgz#80fcbcbaf7ce031e0ef2dd29b1bfc7c3f583611f"
-  integrity sha512-/poHZJJVjx3L+zVD6g9KgHfYnb443oi7wLu/XKojDviHy6HOEOA6z1Trk5aR1dGcmPenJEgb2sK2I80LeS3MIg==
-
-"@sideway/pinpoint@^2.0.0":
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/@sideway/pinpoint/-/pinpoint-2.0.0.tgz#cff8ffadc372ad29fd3f78277aeb29e632cc70df"
-  integrity sha512-RNiOoTPkptFtSVzQevY/yWtZwf/RxyVnPy/OcA9HBM3MlGDnBEYL5B41H0MTn0Uec8Hi+2qUtTfG2WWZBmMejQ==
-
 "@sinonjs/commons@^1.7.0":
   version "1.8.1"
   resolved "https://registry.yarnpkg.com/@sinonjs/commons/-/commons-1.8.1.tgz#e7df00f98a203324f6dc7cc606cad9d4a8ab2217"
@@ -1865,13 +1836,6 @@
   dependencies:
     "@sinonjs/commons" "^1.7.0"
 
-"@stackrox/tailwind-config@^0.2.0":
-  version "0.2.0"
-  resolved "https://npm.pkg.github.com/download/@stackrox/tailwind-config/0.2.0/0a531486128241736a2360cdfa3b1564a5828edb628e86aab1b375fce2897fef#2a0588d986b442fd529e4146070052f0b65340a7"
-  integrity sha512-UdvcuGf/MKryLH7f0VG5pxcITVBpfMJsxKxxhVFR3M8hivyLheNP2SFjNbaFKDTpy/rGVrnNwHhbltOSY8MoIA==
-  dependencies:
-    "@tailwindcss/forms" "^0.2.1"
-
 "@surma/rollup-plugin-off-main-thread@^1.1.1":
   version "1.4.2"
   resolved "https://registry.yarnpkg.com/@surma/rollup-plugin-off-main-thread/-/rollup-plugin-off-main-thread-1.4.2.tgz#e6786b6af5799f82f7ab3a82e53f6182d2b91a58"
@@ -1983,13 +1947,6 @@
     "@svgr/plugin-svgo" "^5.4.0"
     loader-utils "^2.0.0"
 
-"@tailwindcss/forms@^0.2.1":
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/@tailwindcss/forms/-/forms-0.2.1.tgz#3244b185854fae1a7cbe8d2456314d8b2d98cf43"
-  integrity sha512-czfvEdY+J2Ogfd6RUSr/ZSUmDxTujr34M++YLnp2cCPC3oJ4kFvFMaRXA6cEXKw7F1hJuapdjXRjsXIEXGgORg==
-  dependencies:
-    mini-svg-data-uri "^1.2.3"
-
 "@testing-library/dom@^8.0.0":
   version "8.0.0"
   resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-8.0.0.tgz#2bb994393c566aae021db86dd263ba06e8b71b38"
@@ -2703,20 +2660,6 @@ acorn-jsx@^5.2.0:
   resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.2.0.tgz#4c66069173d6fdd68ed85239fc256226182b2ebe"
   integrity sha512-HiUX/+K2YpkpJ+SzBffkM/AQ2YE03S0U1kjTLVpoJdhZMOWy8qvXVN9JdLqv2QsaQ6MPYQIuNmwD8zOiYUofLQ==
 
-acorn-node@^1.6.1:
-  version "1.8.2"
-  resolved "https://registry.yarnpkg.com/acorn-node/-/acorn-node-1.8.2.tgz#114c95d64539e53dede23de8b9d96df7c7ae2af8"
-  integrity sha512-8mt+fslDufLYntIoPAaIMUe/lrbrehIiwmR3t2k9LljIzoigEPF27eLk2hy8zSGzmR/ogr7zbRKINMo1u0yh5A==
-  dependencies:
-    acorn "^7.0.0"
-    acorn-walk "^7.0.0"
-    xtend "^4.0.2"
-
-acorn-walk@^7.0.0:
-  version "7.1.1"
-  resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-7.1.1.tgz#345f0dffad5c735e7373d2fec9a1023e6a44b83e"
-  integrity sha512-wdlPY2tm/9XBr7QkKlq0WQVgiuGTX6YWPyRyBviSoScBuLfTVQhvwg6wJ369GJ/1nPfTLMfnrFIfjqVg6d+jQQ==
-
 acorn-walk@^7.1.1:
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-7.2.0.tgz#0de889a601203909b0fbe07b8938dc21d2e967bc"
@@ -2727,16 +2670,16 @@ acorn@^6.4.1:
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-6.4.2.tgz#35866fd710528e92de10cf06016498e47e39e1e6"
   integrity sha512-XtGIhXwF8YM8bJhGxG5kXgjkEuNGLTkoYqVE+KMR+aspr4KGYmKYg7yUe3KghyQ9yheNwLnjmzh/7+gfDBmHCQ==
 
-acorn@^7.0.0, acorn@^7.1.1:
-  version "7.1.1"
-  resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.1.1.tgz#e35668de0b402f359de515c5482a1ab9f89a69bf"
-  integrity sha512-add7dgA5ppRPxCFJoAGfMDi7PIBXq1RtGo7BhbLaxwrXPOmw8gq48Y9ozT01hUKy9byMjlR20EJhu5zlkErEkg==
-
 acorn@^7.1.0, acorn@^7.4.0:
   version "7.4.1"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.4.1.tgz#feaed255973d2e77555b83dbc08851a6c63520fa"
   integrity sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==
 
+acorn@^7.1.1:
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.1.1.tgz#e35668de0b402f359de515c5482a1ab9f89a69bf"
+  integrity sha512-add7dgA5ppRPxCFJoAGfMDi7PIBXq1RtGo7BhbLaxwrXPOmw8gq48Y9ozT01hUKy9byMjlR20EJhu5zlkErEkg==
+
 acorn@^8.2.4:
   version "8.10.0"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.10.0.tgz#8be5b3907a67221a81ab23c7889c4c5526b62ec5"
@@ -2837,11 +2780,6 @@ ansi-regex@^5.0.0:
   resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-5.0.0.tgz#388539f55179bf39339c81af30a654d69f87cb75"
   integrity sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==
 
-ansi-regex@^5.0.1:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-5.0.1.tgz#082cb2c89c9fe8659a311a53bd6a4dc5301db304"
-  integrity sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==
-
 ansi-styles@^3.2.0, ansi-styles@^3.2.1:
   version "3.2.1"
   resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-3.2.1.tgz#41fbb20243e50b12be0f04b8dedbf07520ce841d"
@@ -2891,11 +2829,6 @@ aproba@^1.1.1:
   resolved "https://registry.yarnpkg.com/aproba/-/aproba-1.2.0.tgz#6802e6264efd18c790a1b0d517f0f2627bf2c94a"
   integrity sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw==
 
-arg@^5.0.1:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/arg/-/arg-5.0.1.tgz#eb0c9a8f77786cad2af8ff2b862899842d7b6adb"
-  integrity sha512-e0hDa9H2Z9AwFkk2qDlwhoMYE4eToKarchkQHovNdLTCYMHZHeRjI71crOh+dio4K6u1IcwubQqo79Ga4CyAQA==
-
 argparse@^1.0.7:
   version "1.0.10"
   resolved "https://registry.yarnpkg.com/argparse/-/argparse-1.0.10.tgz#bcd6791ea5ae09725e17e5ad988134cd40b3d911"
@@ -3124,14 +3057,6 @@ axios@^0.21.4:
   dependencies:
     follow-redirects "^1.14.0"
 
-axios@^0.27.2:
-  version "0.27.2"
-  resolved "https://registry.yarnpkg.com/axios/-/axios-0.27.2.tgz#207658cc8621606e586c85db4b41a750e756d972"
-  integrity sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==
-  dependencies:
-    follow-redirects "^1.14.9"
-    form-data "^4.0.0"
-
 axobject-query@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-2.2.0.tgz#943d47e10c0b704aa42275e20edf3722648989be"
@@ -3597,11 +3522,6 @@ bytes@3.1.2:
   resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.1.2.tgz#8b0beeb98605adf1b128fa4386403c009e0221a5"
   integrity sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==
 
-bytes@^3.0.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.1.0.tgz#f6cf7933a360e0588fa9fde85651cdc7f805d1f6"
-  integrity sha512-zauLjrfCG+xvoyaqLoV8bLVXXNGC4JqlxFCutSDWA6fJrTo2ZuvLYTqZ7aHBLZSMOopbzwv8f+wZcVzfVTI2Dg==
-
 cacache@^12.0.2:
   version "12.0.3"
   resolved "https://registry.yarnpkg.com/cacache/-/cacache-12.0.3.tgz#be99abba4e1bf5df461cd5a2c1071fc432573390"
@@ -3701,11 +3621,6 @@ camel-case@^4.1.1:
     pascal-case "^3.1.1"
     tslib "^1.10.0"
 
-camelcase-css@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/camelcase-css/-/camelcase-css-2.0.1.tgz#ee978f6947914cc30c6b44741b6ed1df7f043fd5"
-  integrity sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==
-
 camelcase@5.3.1, camelcase@^5.0.0, camelcase@^5.3.1:
   version "5.3.1"
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-5.3.1.tgz#e3c9b31569e106811df242f715725a1f4c494320"
@@ -3760,7 +3675,7 @@ chalk@^3.0.0:
     ansi-styles "^4.1.0"
     supports-color "^7.1.0"
 
-chalk@^4.0.0, chalk@^4.1.0, chalk@^4.1.2:
+chalk@^4.0.0, chalk@^4.1.0:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.2.tgz#aac4e2b7734a740867aeb16bf02aad556a1e7a01"
   integrity sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==
@@ -3802,7 +3717,7 @@ chokidar@^2.1.8:
   optionalDependencies:
     fsevents "^1.2.7"
 
-chokidar@^3.3.0, chokidar@^3.4.1, chokidar@^3.5.2:
+chokidar@^3.4.1:
   version "3.5.2"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.2.tgz#dba3976fcadb016f66fd365021d91600d01c1e75"
   integrity sha512-ekGhOnNVPgT77r4K/U3GDhu+FQ2S8TnK/s2KbIGXi0SZWuwkZ2QNyfWdZW+TVfn84DpEP7rLeCt2UI6bJ8GwbQ==
@@ -3897,15 +3812,6 @@ cliui@^6.0.0:
     strip-ansi "^6.0.0"
     wrap-ansi "^6.2.0"
 
-cliui@^8.0.1:
-  version "8.0.1"
-  resolved "https://registry.yarnpkg.com/cliui/-/cliui-8.0.1.tgz#0c04b075db02cbfe60dc8e6cf2f5486b1a3608aa"
-  integrity sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==
-  dependencies:
-    string-width "^4.2.0"
-    strip-ansi "^6.0.1"
-    wrap-ansi "^7.0.0"
-
 clone-deep@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/clone-deep/-/clone-deep-4.0.1.tgz#c19fd9bdbbf85942b4fd979c84dcf7d5f07c2387"
@@ -3974,14 +3880,6 @@ color-string@^1.5.4:
     color-name "^1.0.0"
     simple-swizzle "^0.2.2"
 
-color-string@^1.6.0:
-  version "1.6.0"
-  resolved "https://registry.yarnpkg.com/color-string/-/color-string-1.6.0.tgz#c3915f61fe267672cb7e1e064c9d692219f6c312"
-  integrity sha512-c/hGS+kRWJutUBEngKKmk4iH3sD59MBkoxVapS/0wgpCz2u7XsNloxknyvBhzwEs1IbV36D9PwqLPJ2DTu3vMA==
-  dependencies:
-    color-name "^1.0.0"
-    simple-swizzle "^0.2.2"
-
 color@^3.0.0:
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/color/-/color-3.1.3.tgz#ca67fb4e7b97d611dcde39eceed422067d91596e"
@@ -3990,19 +3888,6 @@ color@^3.0.0:
     color-convert "^1.9.1"
     color-string "^1.5.4"
 
-color@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/color/-/color-4.0.1.tgz#21df44cd10245a91b1ccf5ba031609b0e10e7d67"
-  integrity sha512-rpZjOKN5O7naJxkH2Rx1sZzzBgaiWECc6BYXjeCE6kF0kcASJYbUq02u7JqIHwCb/j3NhV+QhRL2683aICeGZA==
-  dependencies:
-    color-convert "^2.0.1"
-    color-string "^1.6.0"
-
-colorette@^1.2.1:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/colorette/-/colorette-1.3.0.tgz#ff45d2f0edb244069d3b772adeb04fed38d0a0af"
-  integrity sha512-ecORCqbSFP7Wm8Y6lyqMJjexBQqXSF7SSeaTyGGphogUjBlFP9m9o08wy86HL2uB7fMTxtOUzLMk7ogKcxMg1w==
-
 combined-stream@^1.0.8:
   version "1.0.8"
   resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.8.tgz#c3d45a8b34fd730631a110a8a2520682b31d5a7f"
@@ -4025,11 +3910,6 @@ commander@^4.1.1:
   resolved "https://registry.yarnpkg.com/commander/-/commander-4.1.1.tgz#9fd602bd936294e9e9ef46a3f4d6964044b18068"
   integrity sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==
 
-commander@^6.0.0:
-  version "6.2.1"
-  resolved "https://registry.yarnpkg.com/commander/-/commander-6.2.1.tgz#0792eb682dfbc325999bb2b84fddddba110ac73c"
-  integrity sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA==
-
 common-tags@^1.8.0:
   version "1.8.0"
   resolved "https://registry.yarnpkg.com/common-tags/-/common-tags-1.8.0.tgz#8e3153e542d4a39e9b10554434afaaf98956a937"
@@ -4225,7 +4105,7 @@ cosmiconfig@^6.0.0:
     path-type "^4.0.0"
     yaml "^1.7.2"
 
-cosmiconfig@^7.0.0, cosmiconfig@^7.0.1:
+cosmiconfig@^7.0.0:
   version "7.0.1"
   resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-7.0.1.tgz#714d756522cace867867ccb4474c5d01bbae5d6d"
   integrity sha512-a1YWNUV2HwGimB7dU2s1wUMurNKjpx60HxBB6xUM8Re+2s1g1IIfJvFR0/iCF+XHdE0GMTKTuLR32UQff4TEyQ==
@@ -4400,11 +4280,6 @@ css-tree@1.0.0-alpha.37:
     mdn-data "2.0.4"
     source-map "^0.6.1"
 
-css-unit-converter@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/css-unit-converter/-/css-unit-converter-1.1.1.tgz#d9b9281adcfd8ced935bdbaba83786897f64e996"
-  integrity sha1-2bkoGtz9jO2TW9urqDeGiX9k6ZY=
-
 css-what@2.1:
   version "2.1.3"
   resolved "https://registry.yarnpkg.com/css-what/-/css-what-2.1.3.tgz#a6d7604573365fe74686c3f311c56513d88285f2"
@@ -4688,11 +4563,6 @@ define-property@^2.0.2:
     is-descriptor "^1.0.2"
     isobject "^3.0.1"
 
-defined@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/defined/-/defined-1.0.0.tgz#c98d9bcef75674188e110969151199e39b1fa693"
-  integrity sha1-yY2bzvdWdBiOEQlpFRGZ45sfppM=
-
 del@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/del/-/del-4.1.1.tgz#9e8f117222ea44a31ff3a156c049b99052a9f0b4"
@@ -4721,11 +4591,6 @@ depd@~1.1.2:
   resolved "https://registry.yarnpkg.com/depd/-/depd-1.1.2.tgz#9bcd52e14c097763e749b274c4346ed2e560b5a9"
   integrity sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak=
 
-dependency-graph@^0.11.0:
-  version "0.11.0"
-  resolved "https://registry.yarnpkg.com/dependency-graph/-/dependency-graph-0.11.0.tgz#ac0ce7ed68a54da22165a85e97a01d53f5eb2e27"
-  integrity sha512-JeMq7fEshyepOWDfcfHK06N3MhyPhz++vtqWhMT5O9A3K42rdsEDpfdVqjaqaAhsw6a+ZqeDvQVtD0hFHQWrzg==
-
 dequal@^2.0.0, dequal@^2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/dequal/-/dequal-2.0.3.tgz#2644214f1997d39ed0ee0ece72335490a7ac67be"
@@ -4762,20 +4627,6 @@ detect-port-alt@1.1.6:
     address "^1.0.1"
     debug "^2.6.0"
 
-detective@^5.2.0:
-  version "5.2.0"
-  resolved "https://registry.yarnpkg.com/detective/-/detective-5.2.0.tgz#feb2a77e85b904ecdea459ad897cc90a99bd2a7b"
-  integrity sha512-6SsIx+nUUbuK0EthKjv0zrdnajCCXVYGmbYYiYjFVpzcjwEs/JMDZ8tPRG29J/HhN56t3GJp2cGSWDRjjot8Pg==
-  dependencies:
-    acorn-node "^1.6.1"
-    defined "^1.0.0"
-    minimist "^1.1.1"
-
-didyoumean@^1.2.2:
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/didyoumean/-/didyoumean-1.2.2.tgz#989346ffe9e839b4555ecf5666edea0d3e8ad037"
-  integrity sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==
-
 diff-sequences@^26.6.2:
   version "26.6.2"
   resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-26.6.2.tgz#48ba99157de1923412eed41db6b6d4aa9ca7c0b1"
@@ -4807,11 +4658,6 @@ dir-glob@^3.0.1:
   dependencies:
     path-type "^4.0.0"
 
-dlv@^1.1.3:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/dlv/-/dlv-1.1.3.tgz#5c198a8a11453596e751494d49874bc7732f2e79"
-  integrity sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==
-
 dns-equal@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/dns-equal/-/dns-equal-1.0.0.tgz#b39e7f1da6eb0a75ba9c17324b34753c47e0654d"
@@ -5689,7 +5535,7 @@ fast-diff@^1.1.2:
   resolved "https://registry.yarnpkg.com/fast-diff/-/fast-diff-1.2.0.tgz#73ee11982d86caaf7959828d519cfe927fac5f03"
   integrity sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==
 
-fast-glob@^3.1.1, fast-glob@^3.2.7:
+fast-glob@^3.1.1:
   version "3.2.7"
   resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.7.tgz#fd6cb7a2d7e9aa7a7846111e85a196d6b2f766a1"
   integrity sha512-rYGMRwip6lUMvYD3BTScMwT1HtAs2d71SMv66Vrxs0IekGZEjhM0pcMfjQPnknBt2zeCwQMEupiN02ZP4DiT1Q==
@@ -5700,17 +5546,6 @@ fast-glob@^3.1.1, fast-glob@^3.2.7:
     merge2 "^1.3.0"
     micromatch "^4.0.4"
 
-fast-glob@^3.3.0:
-  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.3.0.tgz#7c40cb491e1e2ed5664749e87bfb516dbe8727c0"
-  integrity sha512-ChDuvbOypPuNjO8yIDf36x7BlZX1smcUMTTcyoIjycexOxd6DFsKsg21qVBzEmr3G7fUKIRy2/psii+CIUt7FA==
-  dependencies:
-    "@nodelib/fs.stat" "^2.0.2"
-    "@nodelib/fs.walk" "^1.2.3"
-    glob-parent "^5.1.2"
-    merge2 "^1.3.0"
-    micromatch "^4.0.4"
-
 fast-json-stable-stringify@^2.0.0, fast-json-stable-stringify@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz#874bf69c6f404c2b5d99c481341399fd55892633"
@@ -5890,7 +5725,7 @@ focus-trap@7.6.2:
   dependencies:
     tabbable "^6.2.0"
 
-follow-redirects@^1.0.0, follow-redirects@^1.14.0, follow-redirects@^1.14.9:
+follow-redirects@^1.0.0, follow-redirects@^1.14.0:
   version "1.15.4"
   resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.4.tgz#cdc7d308bf6493126b17ea2191ea0ccf3e535adf"
   integrity sha512-Cr4D/5wlrb0z9dgERpUL3LrmPKVDsETIJhaCMeDfuFYcqa5bldGV6wBsAN6X/vxlXQtFBMrXdXxdL8CbDTGniw==
@@ -5922,15 +5757,6 @@ form-data@^3.0.0:
     combined-stream "^1.0.8"
     mime-types "^2.1.12"
 
-form-data@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/form-data/-/form-data-4.0.0.tgz#93919daeaf361ee529584b9b31664dc12c9fa452"
-  integrity sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==
-  dependencies:
-    asynckit "^0.4.0"
-    combined-stream "^1.0.8"
-    mime-types "^2.1.12"
-
 formik@^2.4.2:
   version "2.4.2"
   resolved "https://registry.yarnpkg.com/formik/-/formik-2.4.2.tgz#a1115457cfb012a5c782cea3ad4b40b2fe36fa18"
@@ -5974,24 +5800,6 @@ from2@^2.1.0:
     inherits "^2.0.1"
     readable-stream "^2.0.0"
 
-fs-extra@^10.0.0:
-  version "10.0.0"
-  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-10.0.0.tgz#9ff61b655dde53fb34a82df84bb214ce802e17c1"
-  integrity sha512-C5owb14u9eJwizKGdchcDUQeFtlSHHthBk8pbX9Vc1PFZrLombudjDnNns88aYslCyF6IY5SUw3Roz6xShcEIQ==
-  dependencies:
-    graceful-fs "^4.2.0"
-    jsonfile "^6.0.1"
-    universalify "^2.0.0"
-
-fs-extra@^11.0.0:
-  version "11.1.1"
-  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-11.1.1.tgz#da69f7c39f3b002378b0954bb6ae7efdc0876e2d"
-  integrity sha512-MGIE4HOvQCeUCzmlHs0vXpih4ysz4wg9qiSAu6cd42lVwPbTM1TjV7RusoyQqMmk/95gdQZX72u+YW+c3eEpFQ==
-  dependencies:
-    graceful-fs "^4.2.0"
-    jsonfile "^6.0.1"
-    universalify "^2.0.0"
-
 fs-extra@^7.0.0:
   version "7.0.1"
   resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-7.0.1.tgz#4f189c44aa123b895f722804f55ea23eadc348e9"
@@ -6075,7 +5883,7 @@ gensync@^1.0.0-beta.1:
   resolved "https://registry.yarnpkg.com/gensync/-/gensync-1.0.0-beta.1.tgz#58f4361ff987e5ff6e1e7a210827aa371eaac269"
   integrity sha512-r8EC6NO1sngH/zdD9fiRDLdcgnbayXah+mLgManTaIZJqEC1MZstmnox8KpnI2/fxQwrp5OpCOYWLp4rBl4Jcg==
 
-get-caller-file@^2.0.1, get-caller-file@^2.0.5:
+get-caller-file@^2.0.1:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-2.0.5.tgz#4f94412a82db32f36e3b0b9741f8a97feb031f7e"
   integrity sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==
@@ -6109,11 +5917,6 @@ get-package-type@^0.1.0:
   resolved "https://registry.yarnpkg.com/get-package-type/-/get-package-type-0.1.0.tgz#8de2d803cff44df3bc6c456e6668b36c3926e11a"
   integrity sha512-pjzuKtY64GYfWizNAJ0fr9VqttZkNiK2iS430LtIHzjBEr6bX8Am2zm4sW4Ro5wjWW5cAlRL1qAMTcXbjNAO2Q==
 
-get-stdin@^9.0.0:
-  version "9.0.0"
-  resolved "https://registry.yarnpkg.com/get-stdin/-/get-stdin-9.0.0.tgz#3983ff82e03d56f1b2ea0d3e60325f39d703a575"
-  integrity sha512-dVKBjfWisLAicarI2Sf+JuBE/DghV4UzNAVe9yhEJuzeREd3JhOTE9cUaJTeSa77fsbQUK3pcOpJfM59+VKZaA==
-
 get-stream@^4.0.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-4.1.0.tgz#c1b255575f3dc21d59bfc79cd3d2b46b1c3a54b5"
@@ -6148,14 +5951,7 @@ glob-parent@^5.0.0, glob-parent@^5.1.2, glob-parent@~5.1.2:
   dependencies:
     is-glob "^4.0.1"
 
-glob-parent@^6.0.1:
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-6.0.1.tgz#42054f685eb6a44e7a7d189a96efa40a54971aa7"
-  integrity sha512-kEVjS71mQazDBHKcsq4E9u/vUzaLcw1A8EtUeydawvIWQCJM0qQ08G1H7/XTjFUulla6XQiDOG6MXSaG0HDKog==
-  dependencies:
-    is-glob "^4.0.1"
-
-glob@^7.0.0, glob@^7.0.3, glob@^7.1.1, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4, glob@^7.1.6:
+glob@^7.0.3, glob@^7.1.1, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4, glob@^7.1.6:
   version "7.1.6"
   resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.6.tgz#141f33b81a7c2492e125594307480c46679278a6"
   integrity sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==
@@ -6207,17 +6003,6 @@ globby@11.0.1, globby@^11.0.1:
     merge2 "^1.3.0"
     slash "^3.0.0"
 
-globby@^13.0.0:
-  version "13.2.2"
-  resolved "https://registry.yarnpkg.com/globby/-/globby-13.2.2.tgz#63b90b1bf68619c2135475cbd4e71e66aa090592"
-  integrity sha512-Y1zNGV+pzQdh7H39l9zgB4PJqjRNqydvdYCDG4HFXM4XuvSaQQlEc91IU1yALL8gUTDomgBAfz3XJdmUS+oo0w==
-  dependencies:
-    dir-glob "^3.0.1"
-    fast-glob "^3.3.0"
-    ignore "^5.2.4"
-    merge2 "^1.4.1"
-    slash "^4.0.0"
-
 globby@^6.1.0:
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/globby/-/globby-6.1.0.tgz#f5a6d70e8395e21c858fb0489d64df02424d506c"
@@ -6444,11 +6229,6 @@ html-minifier-terser@^5.0.1:
     relateurl "^0.2.7"
     terser "^4.6.3"
 
-html-tags@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/html-tags/-/html-tags-3.1.0.tgz#7b5e6f7e665e9fb41f30007ed9e0d41e97fb2140"
-  integrity sha512-1qYz89hW3lFDEazhjW0yVAV87lw8lVkrJocr72XmBkMKsoSVJCQx3W8BXsC7hO2qAt8BoVjYjtAcZ9perqGnNg==
-
 html-webpack-plugin@4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/html-webpack-plugin/-/html-webpack-plugin-4.5.0.tgz#625097650886b97ea5dae331c320e3238f6c121c"
@@ -6610,11 +6390,6 @@ ignore@^5.1.4:
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.1.8.tgz#f150a8b50a34289b33e22f5889abd4d8016f0e57"
   integrity sha512-BMpfD7PpiETpBl/A6S498BaIJ6Y/ABT93ETbby2fP00v4EbvPBXWEoaR1UBPKs3iR53pJY7EtZk5KACI57i1Uw==
 
-ignore@^5.2.4:
-  version "5.2.4"
-  resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.2.4.tgz#a291c0c6178ff1b960befe47fcdec301674a6324"
-  integrity sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ==
-
 immer@8.0.1:
   version "8.0.1"
   resolved "https://registry.yarnpkg.com/immer/-/immer-8.0.1.tgz#9c73db683e2b3975c424fb0572af5889877ae656"
@@ -6627,13 +6402,6 @@ import-cwd@^2.0.0:
   dependencies:
     import-from "^2.1.0"
 
-import-cwd@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/import-cwd/-/import-cwd-3.0.0.tgz#20845547718015126ea9b3676b7592fb8bd4cf92"
-  integrity sha512-4pnzH16plW+hgvRECbDWpQl3cqtvSofHWh44met7ESfZ8UZOWWddm8hEyDTqREJ9RbYHY8gi8DqmaelApoOGMg==
-  dependencies:
-    import-from "^3.0.0"
-
 import-fresh@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-2.0.0.tgz#d81355c15612d386c61f9ddd3922d4304822a546"
@@ -6657,13 +6425,6 @@ import-from@^2.1.0:
   dependencies:
     resolve-from "^3.0.0"
 
-import-from@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/import-from/-/import-from-3.0.0.tgz#055cfec38cd5a27d8057ca51376d7d3bf0891966"
-  integrity sha512-CiuXOFFSzkU5x/CR0+z7T91Iht4CXgfCxVOFRhh2Zyhg5wOpWvvDLQUsWl+gcN+QscYBjez8hDCt85O7RLDttQ==
-  dependencies:
-    resolve-from "^5.0.0"
-
 import-local@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/import-local/-/import-local-2.0.0.tgz#55070be38a5993cf18ef6db7e961f5bee5c5a09d"
@@ -7628,17 +7389,6 @@ jest@26.6.0:
     import-local "^3.0.2"
     jest-cli "^26.6.0"
 
-joi@^17.7.0:
-  version "17.9.2"
-  resolved "https://registry.yarnpkg.com/joi/-/joi-17.9.2.tgz#8b2e4724188369f55451aebd1d0b1d9482470690"
-  integrity sha512-Itk/r+V4Dx0V3c7RLFdRh12IOjySm2/WGPMubBT92cQvRfYZhPM2W0hZlctjj72iES8jsRCwp7S/cRmWBnJ4nw==
-  dependencies:
-    "@hapi/hoek" "^9.0.0"
-    "@hapi/topo" "^5.0.0"
-    "@sideway/address" "^4.1.3"
-    "@sideway/formula" "^3.0.1"
-    "@sideway/pinpoint" "^2.0.0"
-
 "js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
@@ -7823,16 +7573,6 @@ levn@^0.4.1:
     prelude-ls "^1.2.1"
     type-check "~0.4.0"
 
-lilconfig@^2.0.3:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/lilconfig/-/lilconfig-2.0.3.tgz#68f3005e921dafbd2a2afb48379986aa6d2579fd"
-  integrity sha512-EHKqr/+ZvdKCifpNrJCKxBTgk5XupZA3y/aCPY9mxfgBzmgh93Mt/WqjjQ38oMxXuvDokaKiM3lAgvSH2sjtHg==
-
-lilconfig@^2.0.5:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/lilconfig/-/lilconfig-2.1.0.tgz#78e23ac89ebb7e1bfbf25b18043de756548e7f52"
-  integrity sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==
-
 lines-and-columns@^1.1.6:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.1.6.tgz#1c00c743b433cd0a4e80758f7b64a57440d9ff00"
@@ -7923,26 +7663,6 @@ lodash._reinterpolate@^3.0.0:
   resolved "https://registry.yarnpkg.com/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz#0ccf2d89166af03b3663c796538b75ac6e114d9d"
   integrity sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0=
 
-lodash.difference@^4.5.0:
-  version "4.5.0"
-  resolved "https://registry.yarnpkg.com/lodash.difference/-/lodash.difference-4.5.0.tgz#9ccb4e505d486b91651345772885a2df27fd017c"
-  integrity sha1-nMtOUF1Ia5FlE0V3KIWi3yf9AXw=
-
-lodash.forown@^4.4.0:
-  version "4.4.0"
-  resolved "https://registry.yarnpkg.com/lodash.forown/-/lodash.forown-4.4.0.tgz#85115cf04f73ef966eced52511d3893cc46683af"
-  integrity sha1-hRFc8E9z75ZuztUlEdOJPMRmg68=
-
-lodash.get@^4.4.2:
-  version "4.4.2"
-  resolved "https://registry.yarnpkg.com/lodash.get/-/lodash.get-4.4.2.tgz#2d177f652fa31e939b4438d5341499dfa3825e99"
-  integrity sha1-LRd/ZS+jHpObRDjVNBSZ36OCXpk=
-
-lodash.groupby@^4.6.0:
-  version "4.6.0"
-  resolved "https://registry.yarnpkg.com/lodash.groupby/-/lodash.groupby-4.6.0.tgz#0b08a1dcf68397c397855c3239783832df7403d1"
-  integrity sha1-Cwih3PaDl8OXhVwyOXg4Mt90A9E=
-
 lodash.memoize@^4.1.2:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
@@ -7968,11 +7688,6 @@ lodash.templatesettings@^4.0.0:
   dependencies:
     lodash._reinterpolate "^3.0.0"
 
-lodash.topath@^4.5.2:
-  version "4.5.2"
-  resolved "https://registry.yarnpkg.com/lodash.topath/-/lodash.topath-4.5.2.tgz#3616351f3bba61994a0931989660bd03254fd009"
-  integrity sha1-NhY1Hzu6YZlKCTGYlmC9AyVP0Ak=
-
 lodash.uniq@^4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
@@ -7983,13 +7698,6 @@ lodash.uniq@^4.5.0:
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
 
-log-symbols@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-4.0.0.tgz#69b3cc46d20f448eccdb75ea1fa733d9e821c920"
-  integrity sha512-FN8JBzLx6CzeMrB0tg6pqlGU1wCrXW+ZXGH481kfsBqer0hToTIiHdjH4Mq8xJUbvATujKCvaREGWpGUionraA==
-  dependencies:
-    chalk "^4.0.0"
-
 loglevel@^1.6.8:
   version "1.6.8"
   resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.6.8.tgz#8a25fb75d092230ecd4457270d80b54e28011171"
@@ -8174,7 +7882,7 @@ merge-stream@^2.0.0:
   resolved "https://registry.yarnpkg.com/merge-stream/-/merge-stream-2.0.0.tgz#52823629a14dd00c9770fb6ad47dc6310f2c1f60"
   integrity sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==
 
-merge2@^1.3.0, merge2@^1.4.1:
+merge2@^1.3.0:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/merge2/-/merge2-1.4.1.tgz#4368892f885e907455a6fd7dc55c0c9d404990ae"
   integrity sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==
@@ -8484,11 +8192,6 @@ mini-css-extract-plugin@0.11.3:
     schema-utils "^1.0.0"
     webpack-sources "^1.1.0"
 
-mini-svg-data-uri@^1.2.3:
-  version "1.2.3"
-  resolved "https://registry.yarnpkg.com/mini-svg-data-uri/-/mini-svg-data-uri-1.2.3.tgz#e16baa92ad55ddaa1c2c135759129f41910bc39f"
-  integrity sha512-zd6KCAyXgmq6FV1mR10oKXYtvmA9vRoB6xPSTUJTbFApCtkefDnYueVR1gkof3KcdLZo1Y8mjF2DFmQMIxsHNQ==
-
 minimalistic-assert@^1.0.0, minimalistic-assert@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz#2e194de044626d4a10e7f7fbc00ce73e83e4d5c7"
@@ -8506,7 +8209,7 @@ minimatch@3.0.4, minimatch@^3.0.4:
   dependencies:
     brace-expansion "^1.1.7"
 
-minimist@^1.1.1, minimist@^1.2.0, minimist@^1.2.5, minimist@^1.2.7:
+minimist@^1.1.1, minimist@^1.2.0, minimist@^1.2.5:
   version "1.2.8"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.8.tgz#c1a464e7693302e082a075cee0c057741ac4772c"
   integrity sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==
@@ -8588,11 +8291,6 @@ mkdirp@^1.0.3, mkdirp@^1.0.4:
   resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-1.0.4.tgz#3eb5ed62622756d79a5f0e2a221dfebad75c2f7e"
   integrity sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==
 
-modern-normalize@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/modern-normalize/-/modern-normalize-1.1.0.tgz#da8e80140d9221426bd4f725c6e11283d34f90b7"
-  integrity sha512-2lMlY1Yc1+CUy0gw4H95uNN7vjbpoED7NNRSBHE25nWfLBdmMzFCsPshlzbxHz+gYMcBEUN8V4pU16prcdPSgA==
-
 moment@^2.29.4:
   version "2.29.4"
   resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.4.tgz#3dbe052889fe7c1b2ed966fcb3a77328964ef108"
@@ -8722,13 +8420,6 @@ no-case@^3.0.3:
     lower-case "^2.0.1"
     tslib "^1.10.0"
 
-node-emoji@^1.11.0:
-  version "1.11.0"
-  resolved "https://registry.yarnpkg.com/node-emoji/-/node-emoji-1.11.0.tgz#69a0150e6946e2f115e9d7ea4df7971e2628301c"
-  integrity sha512-wo2DpQkQp7Sjm2A0cq+sN7EHKO6Sl0ctXeBdFZrL9T9+UywORbufTcTZxom8YqpLQt/FqNMUkOpkZrJVYSKD3A==
-  dependencies:
-    lodash "^4.17.21"
-
 node-forge@0.9.0:
   version "0.9.0"
   resolved "https://registry.yarnpkg.com/node-forge/-/node-forge-0.9.0.tgz#d624050edbb44874adca12bb9a52ec63cb782579"
@@ -8897,11 +8588,6 @@ object-copy@^0.1.0:
     define-property "^0.2.5"
     kind-of "^3.0.3"
 
-object-hash@^2.2.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/object-hash/-/object-hash-2.2.0.tgz#5ad518581eefc443bd763472b8ff2e9c2c0d54a5"
-  integrity sha512-gScRMn0bS5fH+IuwyIFgnh9zBdo4DV+6GhygmWM9HyNJSgS0hScp1f5vjtm7oIIOiT9trXrShAkLFSc2IqKNgw==
-
 object-inspect@^1.7.0:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.7.0.tgz#f4f6bd181ad77f006b5ece60bd0b6f398ff74a67"
@@ -9378,7 +9064,7 @@ pidtree@^0.3.0:
   resolved "https://registry.yarnpkg.com/pidtree/-/pidtree-0.3.1.tgz#ef09ac2cc0533df1f3250ccf2c4d366b0d12114a"
   integrity sha512-qQbW94hLHEqCg7nhby4yRC7G2+jYHY4Rguc2bjw7Uug4GIJuu1tvf2uHaZv5Q8zdt+WKJ6qK1FOI6amaWUo5FA==
 
-pify@^2.0.0, pify@^2.3.0:
+pify@^2.0.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
   integrity sha1-7RQaasBDqEnqWISY59yosVMw6Qw=
@@ -9485,24 +9171,6 @@ postcss-calc@^7.0.1:
     postcss-selector-parser "^6.0.2"
     postcss-value-parser "^4.0.2"
 
-postcss-cli@^10.1.0:
-  version "10.1.0"
-  resolved "https://registry.yarnpkg.com/postcss-cli/-/postcss-cli-10.1.0.tgz#f6658c4998a1c35bd66cd71009132b2d12e04f80"
-  integrity sha512-Zu7PLORkE9YwNdvOeOVKPmWghprOtjFQU3srMUGbdz3pHJiFh7yZ4geiZFMkjMfB0mtTFR3h8RemR62rPkbOPA==
-  dependencies:
-    chokidar "^3.3.0"
-    dependency-graph "^0.11.0"
-    fs-extra "^11.0.0"
-    get-stdin "^9.0.0"
-    globby "^13.0.0"
-    picocolors "^1.0.0"
-    postcss-load-config "^4.0.0"
-    postcss-reporter "^7.0.0"
-    pretty-hrtime "^1.0.3"
-    read-cache "^1.0.0"
-    slash "^5.0.0"
-    yargs "^17.0.0"
-
 postcss-color-functional-notation@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/postcss-color-functional-notation/-/postcss-color-functional-notation-2.0.1.tgz#5efd37a88fbabeb00a2966d1e53d98ced93f74e0"
@@ -9690,14 +9358,6 @@ postcss-initial@^3.0.0:
     lodash.template "^4.5.0"
     postcss "^7.0.2"
 
-postcss-js@^3.0.3:
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/postcss-js/-/postcss-js-3.0.3.tgz#2f0bd370a2e8599d45439f6970403b5873abda33"
-  integrity sha512-gWnoWQXKFw65Hk/mi2+WTQTHdPD5UJdDXZmX073EY/B3BWnYjO4F4t0VneTCnCGQ5E5GsCdMkzPaTXwl3r5dJw==
-  dependencies:
-    camelcase-css "^2.0.1"
-    postcss "^8.1.6"
-
 postcss-lab-function@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/postcss-lab-function/-/postcss-lab-function-2.0.1.tgz#bb51a6856cd12289ab4ae20db1e3821ef13d7d2e"
@@ -9715,23 +9375,6 @@ postcss-load-config@^2.0.0:
     cosmiconfig "^5.0.0"
     import-cwd "^2.0.0"
 
-postcss-load-config@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-3.1.0.tgz#d39c47091c4aec37f50272373a6a648ef5e97829"
-  integrity sha512-ipM8Ds01ZUophjDTQYSVP70slFSYg3T0/zyfII5vzhN6V57YSxMgG5syXuwi5VtS8wSf3iL30v0uBdoIVx4Q0g==
-  dependencies:
-    import-cwd "^3.0.0"
-    lilconfig "^2.0.3"
-    yaml "^1.10.2"
-
-postcss-load-config@^4.0.0:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-4.0.1.tgz#152383f481c2758274404e4962743191d73875bd"
-  integrity sha512-vEJIc8RdiBRu3oRAI0ymerOn+7rPuMvRXslTvZUKZonDHFIczxztIyJ1urxM1x9JXEikvpWWTUUqal5j/8QgvA==
-  dependencies:
-    lilconfig "^2.0.5"
-    yaml "^2.1.1"
-
 postcss-loader@3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/postcss-loader/-/postcss-loader-3.0.0.tgz#6b97943e47c72d845fa9e03f273773d4e8dd6c2d"
@@ -9851,13 +9494,6 @@ postcss-modules-values@^3.0.0:
     icss-utils "^4.0.0"
     postcss "^7.0.6"
 
-postcss-nested@5.0.6:
-  version "5.0.6"
-  resolved "https://registry.yarnpkg.com/postcss-nested/-/postcss-nested-5.0.6.tgz#466343f7fc8d3d46af3e7dba3fcd47d052a945bc"
-  integrity sha512-rKqm2Fk0KbA8Vt3AdGN0FB9OBOMDVajMG6ZCf/GoHgdxUJ4sBFp0A/uMIRm+MJUdo33YXEtjqIz8u7DAp8B7DA==
-  dependencies:
-    postcss-selector-parser "^6.0.6"
-
 postcss-nesting@^7.0.0:
   version "7.0.1"
   resolved "https://registry.yarnpkg.com/postcss-nesting/-/postcss-nesting-7.0.1.tgz#b50ad7b7f0173e5b5e3880c3501344703e04c052"
@@ -10066,19 +9702,6 @@ postcss-replace-overflow-wrap@^3.0.0:
   dependencies:
     postcss "^7.0.2"
 
-postcss-reporter@^7.0.0:
-  version "7.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-reporter/-/postcss-reporter-7.0.1.tgz#463780d0d8d64f356403eba901fdeae71d988f2b"
-  integrity sha512-R9AK80KIqqMb+lwGRBcRkXS7r96VCTxrZvvrfibyA/dWjqctwx7leHMCC05A9HbW8PnChwOWwrmISwp5HQu5wg==
-  dependencies:
-    colorette "^1.2.1"
-    lodash.difference "^4.5.0"
-    lodash.forown "^4.4.0"
-    lodash.get "^4.4.2"
-    lodash.groupby "^4.6.0"
-    lodash.sortby "^4.7.0"
-    log-symbols "^4.0.0"
-
 postcss-safe-parser@5.0.2:
   version "5.0.2"
   resolved "https://registry.yarnpkg.com/postcss-safe-parser/-/postcss-safe-parser-5.0.2.tgz#459dd27df6bc2ba64608824ba39e45dacf5e852d"
@@ -10120,7 +9743,7 @@ postcss-selector-parser@^5.0.0-rc.3, postcss-selector-parser@^5.0.0-rc.4:
     indexes-of "^1.0.1"
     uniq "^1.0.1"
 
-postcss-selector-parser@^6.0.0, postcss-selector-parser@^6.0.2, postcss-selector-parser@^6.0.6:
+postcss-selector-parser@^6.0.0, postcss-selector-parser@^6.0.2:
   version "6.0.6"
   resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.6.tgz#2c5bba8174ac2f6981ab631a42ab0ee54af332ea"
   integrity sha512-9LXrvaaX3+mcv5xkg5kFwqSzSH1JIObIx51PrndZwlmznwXRfxMddDvo9gve3gVR8ZTKgoFDdWkbRFmEhT4PMg==
@@ -10147,7 +9770,7 @@ postcss-unique-selectors@^4.0.1:
     postcss "^7.0.0"
     uniqs "^2.0.0"
 
-postcss-value-parser@^3.0.0, postcss-value-parser@^3.3.0:
+postcss-value-parser@^3.0.0:
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz#9ff822547e2893213cf1c30efa51ac5fd1ba8281"
   integrity sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==
@@ -10184,7 +9807,7 @@ postcss@^7, postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.14, postcss@^7.0.17, po
     source-map "^0.6.1"
     supports-color "^6.1.0"
 
-postcss@^8.1.0, postcss@^8.1.6, postcss@^8.2.1, postcss@^8.4.31:
+postcss@^8.1.0:
   version "8.4.31"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.31.tgz#92b451050a9f914da6755af352bdc0192508656d"
   integrity sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==
@@ -10248,11 +9871,6 @@ pretty-format@^27.0.0, pretty-format@^27.0.2, pretty-format@^27.0.6:
     ansi-styles "^5.0.0"
     react-is "^17.0.1"
 
-pretty-hrtime@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz#b7e3ea42435a4c9b2759d99e0f201eb195802ee1"
-  integrity sha1-t+PqQkNaTJsnWdmeDyAesZWALuE=
-
 private@^0.1.8:
   version "0.1.8"
   resolved "https://registry.yarnpkg.com/private/-/private-0.1.8.tgz#2381edb3689f7a53d653190060fcf822d2f368ff"
@@ -10382,16 +10000,6 @@ punycode@^2.1.0, punycode@^2.1.1:
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec"
   integrity sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==
 
-purgecss@^4.0.3:
-  version "4.0.3"
-  resolved "https://registry.yarnpkg.com/purgecss/-/purgecss-4.0.3.tgz#8147b429f9c09db719e05d64908ea8b672913742"
-  integrity sha512-PYOIn5ibRIP34PBU9zohUcCI09c7drPJJtTDAc0Q6QlRz2/CHQ8ywGLdE7ZhxU2VTqB7p5wkvj5Qcm05Rz3Jmw==
-  dependencies:
-    commander "^6.0.0"
-    glob "^7.0.0"
-    postcss "^8.2.1"
-    postcss-selector-parser "^6.0.2"
-
 q@^1.1.2:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7"
@@ -10432,11 +10040,6 @@ queue-microtask@^1.2.2:
   resolved "https://registry.yarnpkg.com/queue-microtask/-/queue-microtask-1.2.2.tgz#abf64491e6ecf0f38a6502403d4cda04f372dfd3"
   integrity sha512-dB15eXv3p2jDlbOiNLyMabYg1/sXvppd8DP2J3EOCQ0AkuSXCW2tP7mnVouVLJKgUMY6yP0kcQDVpLCN13h4Xg==
 
-quick-lru@^5.1.1:
-  version "5.1.1"
-  resolved "https://registry.yarnpkg.com/quick-lru/-/quick-lru-5.1.1.tgz#366493e6b3e42a3a6885e2e99d18f80fb7a8c932"
-  integrity sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==
-
 raf@^3.4.1:
   version "3.4.1"
   resolved "https://registry.yarnpkg.com/raf/-/raf-3.4.1.tgz#0742e99a4a6552f445d73e3ee0328af0ff1ede39"
@@ -10684,13 +10287,6 @@ react@^18.3.1:
   dependencies:
     loose-envify "^1.1.0"
 
-read-cache@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/read-cache/-/read-cache-1.0.0.tgz#e664ef31161166c9751cdbe8dbcf86b5fb58f774"
-  integrity sha1-5mTvMRYRZsl1HNvo28+GtftY93Q=
-  dependencies:
-    pify "^2.3.0"
-
 read-pkg-up@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-2.0.0.tgz#6b72a8048984e0c41e79510fd5e9fa99b3b549be"
@@ -10798,14 +10394,6 @@ redent@^3.0.0:
     indent-string "^4.0.0"
     strip-indent "^3.0.0"
 
-reduce-css-calc@^2.1.8:
-  version "2.1.8"
-  resolved "https://registry.yarnpkg.com/reduce-css-calc/-/reduce-css-calc-2.1.8.tgz#7ef8761a28d614980dc0c982f772c93f7a99de03"
-  integrity sha512-8liAVezDmUcH+tdzoEGrhfbGcP7nOV4NkGE3a74+qqvE7nt9i4sKLGBuZNOnpI4WiGksiNPklZxva80061QiPg==
-  dependencies:
-    css-unit-converter "^1.1.1"
-    postcss-value-parser "^3.3.0"
-
 regenerate-unicode-properties@^8.2.0:
   version "8.2.0"
   resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-8.2.0.tgz#e5de7111d655e7ba60c057dbe9ff37c87e65cdec"
@@ -11031,7 +10619,7 @@ resolve@1.18.1:
     is-core-module "^2.0.0"
     path-parse "^1.0.6"
 
-resolve@^1.10.0, resolve@^1.12.0, resolve@^1.13.1, resolve@^1.14.2, resolve@^1.17.0, resolve@^1.18.1, resolve@^1.20.0, resolve@^1.3.2, resolve@^1.8.1:
+resolve@^1.10.0, resolve@^1.12.0, resolve@^1.13.1, resolve@^1.14.2, resolve@^1.17.0, resolve@^1.18.1, resolve@^1.3.2, resolve@^1.8.1:
   version "1.20.0"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.20.0.tgz#629a013fb3f70755d6f0b7935cc1c2c5378b1975"
   integrity sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==
@@ -11160,13 +10748,6 @@ run-queue@^1.0.0, run-queue@^1.0.3:
   dependencies:
     aproba "^1.1.1"
 
-rxjs@^7.8.0:
-  version "7.8.1"
-  resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-7.8.1.tgz#6f6f3d99ea8044291efd92e7c7fcf562c4057543"
-  integrity sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==
-  dependencies:
-    tslib "^2.1.0"
-
 sade@^1.7.3:
   version "1.8.1"
   resolved "https://registry.yarnpkg.com/sade/-/sade-1.8.1.tgz#0a78e81d658d394887be57d2a409bf703a3b2701"
@@ -11499,16 +11080,6 @@ slash@^3.0.0:
   resolved "https://registry.yarnpkg.com/slash/-/slash-3.0.0.tgz#6539be870c165adbd5240220dbe361f1bc4d4634"
   integrity sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==
 
-slash@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/slash/-/slash-4.0.0.tgz#2422372176c4c6c5addb5e2ada885af984b396a7"
-  integrity sha512-3dOsAHXXUkQTpOYcoAxLIorMTp4gIQr5IW3iVb7A7lFIp0VHhnynm9izx6TssdrIcVIESAlVjtnO2K8bg+Coew==
-
-slash@^5.0.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/slash/-/slash-5.1.0.tgz#be3adddcdf09ac38eebe8dcdc7b1a57a75b095ce"
-  integrity sha512-ZA6oR3T/pEyuqwMgAKT0/hAv8oAXckzbkmR0UkUosQ+Mc4RxGoJkRmwHgHufaenlyAgE1Mxgpdcrf75y6XcnDg==
-
 slice-ansi@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/slice-ansi/-/slice-ansi-2.1.0.tgz#cacd7693461a637a5788d92a7dd4fba068e81636"
@@ -11813,15 +11384,6 @@ string-width@^4.1.0, string-width@^4.2.0:
     is-fullwidth-code-point "^3.0.0"
     strip-ansi "^6.0.0"
 
-string-width@^4.2.3:
-  version "4.2.3"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
-  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
-  dependencies:
-    emoji-regex "^8.0.0"
-    is-fullwidth-code-point "^3.0.0"
-    strip-ansi "^6.0.1"
-
 string.prototype.matchall@^4.0.2:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/string.prototype.matchall/-/string.prototype.matchall-4.0.2.tgz#48bb510326fb9fdeb6a33ceaa81a6ea04ef7648e"
@@ -11918,13 +11480,6 @@ strip-ansi@^5.0.0, strip-ansi@^5.1.0, strip-ansi@^5.2.0:
   dependencies:
     ansi-regex "^4.1.0"
 
-strip-ansi@^6.0.1:
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
-  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
-  dependencies:
-    ansi-regex "^5.0.1"
-
 strip-bom@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-3.0.0.tgz#2334c18e9c759f7bdd56fdef7e9ae3d588e68ed3"
@@ -12062,43 +11617,6 @@ table@^5.2.3:
     slice-ansi "^2.1.0"
     string-width "^3.0.0"
 
-tailwindcss@^2.2.9:
-  version "2.2.9"
-  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-2.2.9.tgz#1484bd45a4a9f9f5de7faabf74c11bf0aeb5ad98"
-  integrity sha512-P8zCKFkEthfUvqcnun8DqGGXw4QqyDw971NAM23e8QQ+m5HW1agp4upq50rFGwGNtphVYvr+0zvVLSXo5/I9Qg==
-  dependencies:
-    arg "^5.0.1"
-    bytes "^3.0.0"
-    chalk "^4.1.2"
-    chokidar "^3.5.2"
-    color "^4.0.1"
-    cosmiconfig "^7.0.1"
-    detective "^5.2.0"
-    didyoumean "^1.2.2"
-    dlv "^1.1.3"
-    fast-glob "^3.2.7"
-    fs-extra "^10.0.0"
-    glob-parent "^6.0.1"
-    html-tags "^3.1.0"
-    is-glob "^4.0.1"
-    lodash "^4.17.21"
-    lodash.topath "^4.5.2"
-    modern-normalize "^1.1.0"
-    node-emoji "^1.11.0"
-    normalize-path "^3.0.0"
-    object-hash "^2.2.0"
-    postcss-js "^3.0.3"
-    postcss-load-config "^3.1.0"
-    postcss-nested "5.0.6"
-    postcss-selector-parser "^6.0.6"
-    postcss-value-parser "^4.1.0"
-    pretty-hrtime "^1.0.3"
-    purgecss "^4.0.3"
-    quick-lru "^5.1.1"
-    reduce-css-calc "^2.1.8"
-    resolve "^1.20.0"
-    tmp "^0.2.1"
-
 tapable@^1.0.0, tapable@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/tapable/-/tapable-1.1.3.tgz#a1fccc06b58db61fd7a45da2da44f5f3a3e67ba2"
@@ -12240,13 +11758,6 @@ tiny-warning@^1.0.2:
   resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754"
   integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==
 
-tmp@^0.2.1:
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.2.1.tgz#8457fc3037dcf4719c251367a1af6500ee1ccf14"
-  integrity sha512-76SUhtfqR2Ijn+xllcI5P1oyannHNHByD80W1q447gU3mp9G9PSpGdWmjUOHRDPiHYacIk66W7ubDTuPF3BEtQ==
-  dependencies:
-    rimraf "^3.0.0"
-
 tmpl@1.0.x:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/tmpl/-/tmpl-1.0.5.tgz#8683e0b902bb9c20c4f726e3c0b69f36518c07cc"
@@ -12368,7 +11879,7 @@ tslib@^1.10.0, tslib@^1.8.1, tslib@^1.9.0:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.11.1.tgz#eb15d128827fbee2841549e171f45ed338ac7e35"
   integrity sha512-aZW88SY8kQbU7gpV19lN24LtXh/yD4ZZg6qieAJDDg+YBsJcSmLGK9QpnUjAKVG/xefmvJGd1WUmfpT/g6AJGA==
 
-tslib@^2.0.0, tslib@^2.1.0:
+tslib@^2.0.0:
   version "2.6.0"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.0.tgz#b295854684dbda164e181d259a22cd779dcd7bc3"
   integrity sha512-7At1WUettjcSRHXCyYtTselblcHl9PJFFVKiCAy/bY97+BPZXSQ2wbq0P9s8tK2G7dFQfNnlJnPAiArVBVBsfA==
@@ -12818,17 +12329,6 @@ w3c-xmlserializer@^2.0.0:
   dependencies:
     xml-name-validator "^3.0.0"
 
-wait-on@^7.0.1:
-  version "7.0.1"
-  resolved "https://registry.yarnpkg.com/wait-on/-/wait-on-7.0.1.tgz#5cff9f8427e94f4deacbc2762e6b0a489b19eae9"
-  integrity sha512-9AnJE9qTjRQOlTZIldAaf/da2eW0eSRSgcqq85mXQja/DW3MriHxkpODDSUEg+Gri/rKEcXUZHe+cevvYItaog==
-  dependencies:
-    axios "^0.27.2"
-    joi "^17.7.0"
-    lodash "^4.17.21"
-    minimist "^1.2.7"
-    rxjs "^7.8.0"
-
 walker@^1.0.7, walker@~1.0.5:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/walker/-/walker-1.0.7.tgz#2f7f9b8fd10d677262b18a884e28d19618e028fb"
@@ -13241,15 +12741,6 @@ wrap-ansi@^6.2.0:
     string-width "^4.1.0"
     strip-ansi "^6.0.0"
 
-wrap-ansi@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
-  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
-  dependencies:
-    ansi-styles "^4.0.0"
-    string-width "^4.1.0"
-    strip-ansi "^6.0.0"
-
 wrappy@1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
@@ -13294,7 +12785,7 @@ xmlchars@^2.2.0:
   resolved "https://registry.yarnpkg.com/xmlchars/-/xmlchars-2.2.0.tgz#060fe1bcb7f9c76fe2a17db86a9bc3ab894210cb"
   integrity sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==
 
-xtend@^4.0.0, xtend@^4.0.2, xtend@~4.0.1:
+xtend@^4.0.0, xtend@~4.0.1:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54"
   integrity sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==
@@ -13304,11 +12795,6 @@ y18n@^4.0.0:
   resolved "https://registry.yarnpkg.com/y18n/-/y18n-4.0.0.tgz#95ef94f85ecc81d007c264e190a120f0a3c8566b"
   integrity sha512-r9S/ZyXu/Xu9q1tYlpsLIsa3EeLXXk0VwlxqTcFRfg9EhMW+17kbt9G0NrgCmhGb5vT2hyhJZLfDGx+7+5Uj/w==
 
-y18n@^5.0.5:
-  version "5.0.8"
-  resolved "https://registry.yarnpkg.com/y18n/-/y18n-5.0.8.tgz#7f4934d0f7ca8c56f95314939ddcd2dd91ce1d55"
-  integrity sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==
-
 yallist@^3.0.2:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/yallist/-/yallist-3.1.1.tgz#dbb7daf9bfd8bac9ab45ebf602b8cbad0d5d08fd"
@@ -13324,11 +12810,6 @@ yaml@^1.10.0:
   resolved "https://registry.yarnpkg.com/yaml/-/yaml-1.10.0.tgz#3b593add944876077d4d683fee01081bd9fff31e"
   integrity sha512-yr2icI4glYaNG+KWONODapy2/jDdMSDnrONSjblABjD9B4Z5LgiircSt8m8sRZFNi08kG9Sm0uSHtEmP3zaEGg==
 
-yaml@^1.10.2:
-  version "1.10.2"
-  resolved "https://registry.yarnpkg.com/yaml/-/yaml-1.10.2.tgz#2301c5ffbf12b467de8da2333a459e29e7920e4b"
-  integrity sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==
-
 yaml@^1.7.2:
   version "1.8.2"
   resolved "https://registry.yarnpkg.com/yaml/-/yaml-1.8.2.tgz#a29c03f578faafd57dcb27055f9a5d569cb0c3d9"
@@ -13336,11 +12817,6 @@ yaml@^1.7.2:
   dependencies:
     "@babel/runtime" "^7.8.7"
 
-yaml@^2.1.1:
-  version "2.3.1"
-  resolved "https://registry.yarnpkg.com/yaml/-/yaml-2.3.1.tgz#02fe0975d23cd441242aa7204e09fc28ac2ac33b"
-  integrity sha512-2eHWfjaoXgTBC2jNM1LRef62VQa0umtvRiDSk6HSzW7RvS5YtkabJrwYLLEKWBc8a5U2PTSCs+dJjUTJdlHsWQ==
-
 yargs-parser@^13.1.2:
   version "13.1.2"
   resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-13.1.2.tgz#130f09702ebaeef2650d54ce6e3e5706f7a4fb38"
@@ -13357,11 +12833,6 @@ yargs-parser@^18.1.2:
     camelcase "^5.0.0"
     decamelize "^1.2.0"
 
-yargs-parser@^21.1.1:
-  version "21.1.1"
-  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-21.1.1.tgz#9096bceebf990d21bb31fa9516e0ede294a77d35"
-  integrity sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==
-
 yargs@^13.3.2:
   version "13.3.2"
   resolved "https://registry.yarnpkg.com/yargs/-/yargs-13.3.2.tgz#ad7ffefec1aa59565ac915f82dccb38a9c31a2dd"
@@ -13395,19 +12866,6 @@ yargs@^15.4.1:
     y18n "^4.0.0"
     yargs-parser "^18.1.2"
 
-yargs@^17.0.0:
-  version "17.7.2"
-  resolved "https://registry.yarnpkg.com/yargs/-/yargs-17.7.2.tgz#991df39aca675a192b816e1e0363f9d75d2aa269"
-  integrity sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==
-  dependencies:
-    cliui "^8.0.1"
-    escalade "^3.1.1"
-    get-caller-file "^2.0.5"
-    require-directory "^2.1.1"
-    string-width "^4.2.3"
-    y18n "^5.0.5"
-    yargs-parser "^21.1.1"
-
 yocto-queue@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"

From 3d0cd09f03ec90a52b8ef8d97c6fd3c22cf8d9e6 Mon Sep 17 00:00:00 2001
From: David Vail <dcvail17@gmail.com>
Date: Tue, 25 Feb 2025 12:56:42 -0500
Subject: [PATCH 12/25] Clean up loading state on home page

---
 ui/src/components/FullPageSpinner.tsx         | 15 +++++---
 ui/src/components/LinkCard.tsx                | 38 ++++++++-----------
 .../containers/HomePage/LaunchPageSection.tsx | 34 +++++++++--------
 .../HomePage/MyClustersPageSection.tsx        | 34 +++++++++--------
 ui/src/infra.css                              | 18 ---------
 5 files changed, 60 insertions(+), 79 deletions(-)

diff --git a/ui/src/components/FullPageSpinner.tsx b/ui/src/components/FullPageSpinner.tsx
index 7b01bfa14..3ba258574 100644
--- a/ui/src/components/FullPageSpinner.tsx
+++ b/ui/src/components/FullPageSpinner.tsx
@@ -1,11 +1,14 @@
 import React, { ReactElement } from 'react';
-import { RingLoader } from 'react-spinners';
+import { Bullseye, EmptyState, Spinner } from '@patternfly/react-core';
 
-export default function FullPageSpinner(): ReactElement {
+export type FullPageSpinnerProps = {
+  title?: string;
+};
+
+export default function FullPageSpinner({ title = 'Loading' }: FullPageSpinnerProps): ReactElement {
   return (
-    <div className="pf-v6-u-display-flex pf-v6-u-flex-direction-column pf-v6-u-align-items-center pf-v6-u-justify-content-center pf-v6-u-h-100">
-      <RingLoader loading size={128} color="currentColor" />
-      <span className="pf-v6-u-font-size-4xl">Loading...</span>
-    </div>
+    <Bullseye>
+      <EmptyState titleText={title} headingLevel="h4" icon={Spinner} />
+    </Bullseye>
   );
 }
diff --git a/ui/src/components/LinkCard.tsx b/ui/src/components/LinkCard.tsx
index b596a2e7a..9c754c4fc 100644
--- a/ui/src/components/LinkCard.tsx
+++ b/ui/src/components/LinkCard.tsx
@@ -1,5 +1,5 @@
 import React, { ReactElement, ReactNode } from 'react';
-import { Link } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 import { Card, CardBody, CardFooter, CardHeader, CardTitle } from '@patternfly/react-core';
 
 type Props = {
@@ -7,30 +7,22 @@ type Props = {
   header: ReactNode;
   children: ReactNode;
   footer?: ReactNode;
-  className?: string;
 };
 
-export default function LinkCard({
-  to,
-  header,
-  children,
-  footer,
-  className = '',
-}: Props): ReactElement {
+export default function LinkCard({ to, header, children, footer }: Props): ReactElement {
+  const navigate = useNavigate();
   return (
-    <Link className={className} to={to}>
-      <Card isClickable isCompact>
-        <CardHeader
-          selectableActions={{
-            to,
-            selectableActionAriaLabel: `Navigate to ${to}`,
-          }}
-        >
-          <CardTitle>{header}</CardTitle>
-        </CardHeader>
-        <CardBody>{children}</CardBody>
-        {!!footer && <CardFooter>{footer}</CardFooter>}
-      </Card>
-    </Link>
+    <Card isClickable isCompact>
+      <CardHeader
+        selectableActions={{
+          onClickAction: () => navigate(to),
+          selectableActionAriaLabel: `Navigate to ${to}`,
+        }}
+      >
+        <CardTitle>{header}</CardTitle>
+      </CardHeader>
+      <CardBody>{children}</CardBody>
+      {!!footer && <CardFooter>{footer}</CardFooter>}
+    </Card>
   );
 }
diff --git a/ui/src/containers/HomePage/LaunchPageSection.tsx b/ui/src/containers/HomePage/LaunchPageSection.tsx
index 4209837d1..c9e6852d7 100644
--- a/ui/src/containers/HomePage/LaunchPageSection.tsx
+++ b/ui/src/containers/HomePage/LaunchPageSection.tsx
@@ -34,7 +34,7 @@ function FlavorCards({ showAllFlavors = false }: FlavorCardsProps): ReactElement
   const { loading, error, data } = useApiQuery(showAllFlavors ? fetchAllFlavors : fetchFlavors);
 
   if (loading) {
-    return <FullPageSpinner />;
+    return <FullPageSpinner title="Loading available cluster flavors" />;
   }
 
   if (error || !data?.Flavors) {
@@ -74,7 +74,22 @@ function FlavorCards({ showAllFlavors = false }: FlavorCardsProps): ReactElement
       </GalleryItem>
     );
   });
-  return <>{cards}</>;
+  return (
+    <Gallery
+      hasGutter
+      minWidths={{
+        default: '100%',
+        md: '100px',
+        xl: '300px',
+      }}
+      maxWidths={{
+        md: '200px',
+        xl: '1fr',
+      }}
+    >
+      {cards}
+    </Gallery>
+  );
 }
 
 export default function LaunchPageSection(): ReactElement {
@@ -106,20 +121,7 @@ export default function LaunchPageSection(): ReactElement {
         </Flex>
       </PageSection>
       <PageSection>
-        <Gallery
-          hasGutter
-          minWidths={{
-            default: '100%',
-            md: '100px',
-            xl: '300px',
-          }}
-          maxWidths={{
-            md: '200px',
-            xl: '1fr',
-          }}
-        >
-          <FlavorCards showAllFlavors={showAllFlavors} />
-        </Gallery>
+        <FlavorCards showAllFlavors={showAllFlavors} />
       </PageSection>
     </>
   );
diff --git a/ui/src/containers/HomePage/MyClustersPageSection.tsx b/ui/src/containers/HomePage/MyClustersPageSection.tsx
index efcf8c3ff..e9652837c 100644
--- a/ui/src/containers/HomePage/MyClustersPageSection.tsx
+++ b/ui/src/containers/HomePage/MyClustersPageSection.tsx
@@ -49,7 +49,7 @@ function ClusterCards({ showAllClusters = false }: ClusterCardsProps): ReactElem
   const { loading, error, data } = useApiQuery(fetchClusters);
 
   if (loading) {
-    return <FullPageSpinner />;
+    return <FullPageSpinner title="Loading infra clusters" />;
   }
 
   if (error || !data) {
@@ -101,7 +101,22 @@ function ClusterCards({ showAllClusters = false }: ClusterCardsProps): ReactElem
       </GalleryItem>
     );
   });
-  return <>{cards}</>;
+  return (
+    <Gallery
+      hasGutter
+      minWidths={{
+        default: '100%',
+        md: '100px',
+        xl: '300px',
+      }}
+      maxWidths={{
+        md: '200px',
+        xl: '1fr',
+      }}
+    >
+      {cards}
+    </Gallery>
+  );
 }
 
 export default function MyClustersPageSection(): ReactElement {
@@ -133,20 +148,7 @@ export default function MyClustersPageSection(): ReactElement {
         </Flex>
       </PageSection>
       <PageSection>
-        <Gallery
-          hasGutter
-          minWidths={{
-            default: '100%',
-            md: '100px',
-            xl: '300px',
-          }}
-          maxWidths={{
-            md: '200px',
-            xl: '1fr',
-          }}
-        >
-          <ClusterCards showAllClusters={showAllClusters} />
-        </Gallery>
+        <ClusterCards showAllClusters={showAllClusters} />
       </PageSection>
     </>
   );
diff --git a/ui/src/infra.css b/ui/src/infra.css
index dad73f96a..2448605d6 100644
--- a/ui/src/infra.css
+++ b/ui/src/infra.css
@@ -14,24 +14,6 @@
   fill: #000000;
 }
 
-/* LinkCard */
-
-/* appear to be clickable */
-a:hover>.pf-v6-c-panel {
-  background-color: var(--pf-v5-global--BackgroundColor--200);
-}
-
-/* reset to regular font for LinkCard content */
-a>.pf-v6-c-panel {
-  font-weight: var(--pf-v5-global--FontWeight--normal);
-}
-
-/* LinkCard title */
-a>.pf-v6-c-panel>.pf-v6-c-panel__header {
-  font-weight: var(--pf-v5-global--FontWeight--bold);
-  font-size: var(--pf-v5-global--FontSize--lg);
-}
-
 /* Form help popovers - rendered with react-markdown */
 
 /* #, ##, ### */

From 92229adb3cfd217150245fb696cbe6673cd100fb Mon Sep 17 00:00:00 2001
From: David Vail <dcvail17@gmail.com>
Date: Tue, 25 Feb 2025 13:01:49 -0500
Subject: [PATCH 13/25] Clean up error state

---
 ui/src/components/FullPageError.tsx | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/ui/src/components/FullPageError.tsx b/ui/src/components/FullPageError.tsx
index 89556c65c..1d618f95e 100644
--- a/ui/src/components/FullPageError.tsx
+++ b/ui/src/components/FullPageError.tsx
@@ -1,19 +1,19 @@
 import React, { ReactElement } from 'react';
-import { AlertCircle, Icon } from 'react-feather';
+import { EmptyState, EmptyStateBody } from '@patternfly/react-core';
 
 type Props = {
   message: string;
-  IconComponent?: Icon;
 };
 
-export default function FullPageError({
-  message,
-  IconComponent = AlertCircle,
-}: Props): ReactElement {
+export default function FullPageError({ message }: Props): ReactElement {
   return (
-    <div className="pf-v6-u-display-flex pf-v6-u-align-items-center pf-v6-u-justify-content-center pf-v6-u-h-100">
-      <IconComponent className="pf-v6-u-mr-md" size={64} />
-      <span className="pf-v6-u-font-size-4xl">{message}</span>
-    </div>
+    <EmptyState
+      status="danger"
+      variant="lg"
+      titleText="There was an unexpected error!"
+      headingLevel="h4"
+    >
+      <EmptyStateBody>{message}</EmptyStateBody>
+    </EmptyState>
   );
 }

From 4033bf0bbddec74d43bebc1c16534e5e47a6697a Mon Sep 17 00:00:00 2001
From: David Vail <dcvail17@gmail.com>
Date: Tue, 25 Feb 2025 13:12:07 -0500
Subject: [PATCH 14/25] Cleanup and better API handling on the downloads page

---
 ui/.eslintrc.js                               |  2 +
 ui/src/components/FullPageError.tsx           | 13 ++---
 .../DownloadsPage/DownloadsPage.tsx           | 33 ++++++++++-
 .../DownloadsPage/InfractlPageSection.tsx     | 35 ------------
 .../DownloadsPage/UserServiceAccountToken.tsx | 57 ++++++++-----------
 .../containers/HomePage/LaunchPageSection.tsx |  2 -
 6 files changed, 63 insertions(+), 79 deletions(-)
 delete mode 100644 ui/src/containers/DownloadsPage/InfractlPageSection.tsx

diff --git a/ui/.eslintrc.js b/ui/.eslintrc.js
index c040e34a4..f5db34973 100644
--- a/ui/.eslintrc.js
+++ b/ui/.eslintrc.js
@@ -22,6 +22,8 @@ module.exports = {
     'react/prop-types': 'off',
     'react/require-default-props': 'off',
 
+    'no-nested-ternary': 'off',
+
     '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
 
     'import/no-extraneous-dependencies': [
diff --git a/ui/src/components/FullPageError.tsx b/ui/src/components/FullPageError.tsx
index 1d618f95e..6977bc128 100644
--- a/ui/src/components/FullPageError.tsx
+++ b/ui/src/components/FullPageError.tsx
@@ -2,17 +2,16 @@ import React, { ReactElement } from 'react';
 import { EmptyState, EmptyStateBody } from '@patternfly/react-core';
 
 type Props = {
+  title?: string;
   message: string;
 };
 
-export default function FullPageError({ message }: Props): ReactElement {
+export default function FullPageError({
+  title = 'There was an unexpected error!',
+  message,
+}: Props): ReactElement {
   return (
-    <EmptyState
-      status="danger"
-      variant="lg"
-      titleText="There was an unexpected error!"
-      headingLevel="h4"
-    >
+    <EmptyState status="danger" variant="lg" titleText={title} headingLevel="h4">
       <EmptyStateBody>{message}</EmptyStateBody>
     </EmptyState>
   );
diff --git a/ui/src/containers/DownloadsPage/DownloadsPage.tsx b/ui/src/containers/DownloadsPage/DownloadsPage.tsx
index 844670aba..8879a5f4a 100644
--- a/ui/src/containers/DownloadsPage/DownloadsPage.tsx
+++ b/ui/src/containers/DownloadsPage/DownloadsPage.tsx
@@ -1,7 +1,36 @@
 import React, { ReactElement } from 'react';
+import { Button, Flex, PageSection, Title } from '@patternfly/react-core';
 
-import InfractlPageSection from './InfractlPageSection';
+import { DownloadIcon } from '@patternfly/react-icons';
+import UserServiceAccountToken from './UserServiceAccountToken';
 
 export default function DownloadsPage(): ReactElement {
-  return <InfractlPageSection />;
+  const infractlDownloads = {
+    'Download for Intel Mac': '/downloads/infractl-darwin-amd64',
+    'Download for M1 Mac': '/downloads/infractl-darwin-arm64',
+    'Download for Linux': '/downloads/infractl-linux-amd64',
+  };
+
+  const infractlLinks = Object.entries(infractlDownloads).map(([label, value]) => (
+    <Button
+      component="a"
+      variant="secondary"
+      key={value}
+      href={value}
+      icon={<DownloadIcon />}
+      download
+    >
+      {label}
+    </Button>
+  ));
+
+  return (
+    <PageSection>
+      <Flex direction={{ default: 'column' }} spaceItems={{ default: 'spaceItemsMd' }}>
+        <Title headingLevel="h1">Infractl (CLI)</Title>
+        <Flex spaceItems={{ default: 'spaceItemsMd' }}>{infractlLinks}</Flex>
+        <UserServiceAccountToken />
+      </Flex>
+    </PageSection>
+  );
 }
diff --git a/ui/src/containers/DownloadsPage/InfractlPageSection.tsx b/ui/src/containers/DownloadsPage/InfractlPageSection.tsx
deleted file mode 100644
index ae1375696..000000000
--- a/ui/src/containers/DownloadsPage/InfractlPageSection.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import React, { ReactElement } from 'react';
-import { Button, Flex, PageSection, Title } from '@patternfly/react-core';
-
-import { DownloadIcon } from '@patternfly/react-icons';
-import UserServiceAccountToken from './UserServiceAccountToken';
-
-export default function InfractlPageSection(): ReactElement {
-  const infractlDownloads = {
-    'Download for Intel Mac': '/downloads/infractl-darwin-amd64',
-    'Download for M1 Mac': '/downloads/infractl-darwin-arm64',
-    'Download for Linux': '/downloads/infractl-linux-amd64',
-  };
-  const infractlLinks = Object.entries(infractlDownloads).map(([label, value]) => (
-    <Button
-      component="a"
-      variant="secondary"
-      key={value}
-      href={value}
-      icon={<DownloadIcon />}
-      download
-    >
-      {label}
-    </Button>
-  ));
-
-  return (
-    <PageSection>
-      <Flex direction={{ default: 'column' }} spaceItems={{ default: 'spaceItemsMd' }}>
-        <Title headingLevel="h1">Infractl (CLI)</Title>
-        <Flex spaceItems={{ default: 'spaceItemsMd' }}>{infractlLinks}</Flex>
-        <UserServiceAccountToken />
-      </Flex>
-    </PageSection>
-  );
-}
diff --git a/ui/src/containers/DownloadsPage/UserServiceAccountToken.tsx b/ui/src/containers/DownloadsPage/UserServiceAccountToken.tsx
index 8c7ccf793..a6a4b2e5a 100644
--- a/ui/src/containers/DownloadsPage/UserServiceAccountToken.tsx
+++ b/ui/src/containers/DownloadsPage/UserServiceAccountToken.tsx
@@ -9,12 +9,12 @@ import {
   Title,
 } from '@patternfly/react-core';
 import { AxiosPromise } from 'axios';
-import { AlertCircle } from 'react-feather';
-import { ClipLoader } from 'react-spinners';
 
 import { V1TokenResponse, UserServiceApi } from 'generated/client';
 import useApiQuery from 'client/useApiQuery';
 import configuration from 'client/configuration';
+import FullPageSpinner from 'components/FullPageSpinner';
+import FullPageError from 'components/FullPageError';
 
 const userService = new UserServiceApi(configuration);
 
@@ -23,26 +23,6 @@ const fetchToken = (): AxiosPromise<V1TokenResponse> => userService.token({});
 export default function UserServiceAccountToken(): ReactElement {
   const { loading, error, data } = useApiQuery(fetchToken);
 
-  if (loading) {
-    return (
-      <div className="inline-flex items-center">
-        <ClipLoader size={16} color="currentColor" />
-        <span className="ml-2">Loading service account token...</span>
-      </div>
-    );
-  }
-
-  if (error || !data?.Token) {
-    return (
-      <div className="inline-flex items-center">
-        <AlertCircle size={16} />
-        <span className="ml-2">Unexpected error occurred while loading service account token</span>
-      </div>
-    );
-  }
-
-  const exportCommand = `export INFRA_TOKEN="${data.Token}"`;
-
   return (
     <Flex direction={{ default: 'column' }} spaceItems={{ default: 'spaceItemsMd' }}>
       <p>
@@ -64,17 +44,28 @@ export default function UserServiceAccountToken(): ReactElement {
 
       <Divider component="div" />
 
-      <Title headingLevel="h3">Authenticating with infractl</Title>
-      <p>Run the following in a terminal to authenticate infractl for use:</p>
-      <ClipboardCopy
-        className="pf-v6-u-w-50-on-xl"
-        isReadOnly
-        hoverTip="Copy"
-        clickTip="Copied"
-        variant={ClipboardCopyVariant.expansion}
-      >
-        {exportCommand}
-      </ClipboardCopy>
+      {loading ? (
+        <FullPageSpinner title="Loading service account token..." />
+      ) : error || !data?.Token ? (
+        <FullPageError
+          title="There was an error loading the service account token, or the token was not returned by the server"
+          message={error?.message ?? ''}
+        />
+      ) : (
+        <>
+          <Title headingLevel="h3">Authenticating with infractl</Title>
+          <p>Run the following in a terminal to authenticate infractl for use:</p>
+          <ClipboardCopy
+            className="pf-v6-u-w-50-on-xl"
+            isReadOnly
+            hoverTip="Copy"
+            clickTip="Command copied!"
+            variant={ClipboardCopyVariant.expansion}
+          >
+            {`export INFRA_TOKEN="${data.Token}"`}
+          </ClipboardCopy>
+        </>
+      )}
     </Flex>
   );
 }
diff --git a/ui/src/containers/HomePage/LaunchPageSection.tsx b/ui/src/containers/HomePage/LaunchPageSection.tsx
index c9e6852d7..8aca5a56f 100644
--- a/ui/src/containers/HomePage/LaunchPageSection.tsx
+++ b/ui/src/containers/HomePage/LaunchPageSection.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable no-nested-ternary */
 /* eslint-disable jsx-a11y/label-has-associated-control */
 import React, { ReactElement } from 'react';
 import { useSearchParams } from 'react-router-dom';
@@ -128,4 +127,3 @@ export default function LaunchPageSection(): ReactElement {
 }
 
 /* eslint-enable jsx-a11y/label-has-associated-control */
-/* eslint-enable no-nested-ternary */

From 08ea8f7d80534dee6a8c29d60f42cd92e8bb7537 Mon Sep 17 00:00:00 2001
From: David Vail <dcvail17@gmail.com>
Date: Tue, 25 Feb 2025 13:26:54 -0500
Subject: [PATCH 15/25] Clean up 404 page

---
 ui/src/components/FourOhFour.tsx    | 26 ++++++++++++++++++++++++++
 ui/src/components/FullPageError.tsx |  4 ++--
 ui/src/containers/App.tsx           |  6 +++---
 3 files changed, 31 insertions(+), 5 deletions(-)
 create mode 100644 ui/src/components/FourOhFour.tsx

diff --git a/ui/src/components/FourOhFour.tsx b/ui/src/components/FourOhFour.tsx
new file mode 100644
index 000000000..40387d593
--- /dev/null
+++ b/ui/src/components/FourOhFour.tsx
@@ -0,0 +1,26 @@
+/* eslint-disable react/jsx-props-no-spreading */
+import React, { ReactElement } from 'react';
+import { EmptyState, EmptyStateActions, Button, EmptyStateBody } from '@patternfly/react-core';
+import { OutlinedFlushedIcon } from '@patternfly/react-icons';
+import { Link } from 'react-router-dom';
+
+export default function FourOhFour(): ReactElement {
+  return (
+    <EmptyState
+      className="pf-v6-u-my-2xl"
+      icon={OutlinedFlushedIcon}
+      variant="lg"
+      titleText="You have found a page that does not seem to exist!"
+      headingLevel="h4"
+    >
+      <EmptyStateBody>
+        <EmptyStateActions>
+          <Button variant="primary" component={(props) => <Link {...props} to="/" />}>
+            Back to home
+          </Button>
+        </EmptyStateActions>
+      </EmptyStateBody>
+    </EmptyState>
+  );
+}
+/* eslint-enable react/jsx-props-no-spreading */
diff --git a/ui/src/components/FullPageError.tsx b/ui/src/components/FullPageError.tsx
index 6977bc128..6c240feb8 100644
--- a/ui/src/components/FullPageError.tsx
+++ b/ui/src/components/FullPageError.tsx
@@ -3,12 +3,12 @@ import { EmptyState, EmptyStateBody } from '@patternfly/react-core';
 
 type Props = {
   title?: string;
-  message: string;
+  message?: string;
 };
 
 export default function FullPageError({
   title = 'There was an unexpected error!',
-  message,
+  message = '',
 }: Props): ReactElement {
   return (
     <EmptyState status="danger" variant="lg" titleText={title} headingLevel="h4">
diff --git a/ui/src/containers/App.tsx b/ui/src/containers/App.tsx
index d147d2b9b..16ef43d88 100644
--- a/ui/src/containers/App.tsx
+++ b/ui/src/containers/App.tsx
@@ -1,5 +1,6 @@
 import React, { ReactElement } from 'react';
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
+import { Flex, Page } from '@patternfly/react-core';
 
 import UserAuthProvider from 'containers/UserAuthProvider';
 import AppHeader from 'containers/AppHeader';
@@ -7,8 +8,7 @@ import HomePage from 'containers/HomePage';
 import DownloadsPage from 'containers/DownloadsPage';
 import LaunchClusterPage from 'containers/LaunchClusterPage';
 import ClusterInfoPage from 'containers/ClusterInfoPage';
-import FullPageError from 'components/FullPageError';
-import { Flex, Page } from '@patternfly/react-core';
+import FourOhFour from 'components/FourOhFour';
 
 function AppRoutes(): ReactElement {
   return (
@@ -17,7 +17,7 @@ function AppRoutes(): ReactElement {
       <Route path="/downloads" element={<DownloadsPage />} />
       <Route path="/launch/:flavorId" element={<LaunchClusterPage />} />
       <Route path="/cluster/:clusterId" element={<ClusterInfoPage />} />
-      <Route path="*" element={<FullPageError message="This page doesn't seem to exist." />} />
+      <Route path="*" element={<FourOhFour />} />
     </Routes>
   );
 }

From 36baa14c45217c83384e8d1cc5418e8c1fccd4c9 Mon Sep 17 00:00:00 2001
From: David Vail <dcvail17@gmail.com>
Date: Tue, 25 Feb 2025 13:30:46 -0500
Subject: [PATCH 16/25] Fix disabled button bug

---
 ui/src/components/forms/NumberFormField.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/src/components/forms/NumberFormField.tsx b/ui/src/components/forms/NumberFormField.tsx
index 77d35eef5..08fdaffdf 100644
--- a/ui/src/components/forms/NumberFormField.tsx
+++ b/ui/src/components/forms/NumberFormField.tsx
@@ -54,7 +54,7 @@ export default function NumberFormField({
         onChange={onChange}
         onPlus={onPlus}
         type="text"
-        value={field.value} // eslint-disable-line @typescript-eslint/no-unsafe-assignment
+        value={typeof field.value === 'number' ? field.value : parseInt(field.value, 10)}
         min={min}
         max={max}
         isDisabled={disabled}

From 1bf3e941c0da3d549adb67a9583769440ba0f645 Mon Sep 17 00:00:00 2001
From: David Vail <dcvail17@gmail.com>
Date: Tue, 25 Feb 2025 13:37:57 -0500
Subject: [PATCH 17/25] Tweaks to artifacts download modal

---
 .../ClusterInfoPage/DownloadArtifactsModal.tsx    | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/ui/src/containers/ClusterInfoPage/DownloadArtifactsModal.tsx b/ui/src/containers/ClusterInfoPage/DownloadArtifactsModal.tsx
index 7929f5b38..d86fbf619 100644
--- a/ui/src/containers/ClusterInfoPage/DownloadArtifactsModal.tsx
+++ b/ui/src/containers/ClusterInfoPage/DownloadArtifactsModal.tsx
@@ -1,5 +1,5 @@
 import React, { ReactElement, useCallback } from 'react';
-import { Button, List, ListItem } from '@patternfly/react-core';
+import { Button, ClipboardCopy, Flex, List, ListItem } from '@patternfly/react-core';
 
 import { V1Cluster, ClusterServiceApi, V1Artifact } from 'generated/client';
 import configuration from 'client/configuration';
@@ -27,7 +27,7 @@ function ArtifactsList({ artifacts }: ArtifactsListProps): ReactElement {
           return 0;
         })
         .map((artifact) => (
-          <ListItem key={artifact.Name}>
+          <ListItem key={artifact.URL}>
             <a href={artifact.URL}>{artifact.Name}</a> - {artifact.Description}
           </ListItem>
         ))}
@@ -57,11 +57,12 @@ function Artifacts({ cluster }: ArtifactsProps): ReactElement {
     return (
       <div>
         <ArtifactsList artifacts={artifacts.Artifacts} />
-        <p>
-          Note: You can download all artifacts at the command line with:
-          <br />
-          <code>infractl artifacts --download-dir=&lt;some dir&gt; {cluster.ID}</code>
-        </p>
+        <Flex direction={{ default: 'column' }} spaceItems={{ default: 'spaceItemsSm' }}>
+          <p>Note: You can download all artifacts at the command line with:</p>
+          <ClipboardCopy isReadOnly hoverTip="Copy command" clickTip="Command copied!">
+            {`infractl artifacts --download-dir=<some dir> ${cluster.ID ?? ''}`}
+          </ClipboardCopy>
+        </Flex>
       </div>
     );
   }

From bbff7a48686544049d6294f7b85ee5a81ba13f29 Mon Sep 17 00:00:00 2001
From: David Vail <dcvail17@gmail.com>
Date: Tue, 25 Feb 2025 13:50:46 -0500
Subject: [PATCH 18/25] Clean up "connect" text and code on cluster detail page

---
 .../ClusterInfoPage/ClusterConnect.tsx        | 31 +++++++------------
 .../ClusterInfoPage/ClusterInfoPage.tsx       | 29 +++++++++--------
 2 files changed, 27 insertions(+), 33 deletions(-)

diff --git a/ui/src/containers/ClusterInfoPage/ClusterConnect.tsx b/ui/src/containers/ClusterInfoPage/ClusterConnect.tsx
index f06cb0a5f..c2b560187 100644
--- a/ui/src/containers/ClusterInfoPage/ClusterConnect.tsx
+++ b/ui/src/containers/ClusterInfoPage/ClusterConnect.tsx
@@ -1,36 +1,27 @@
 import React, { ReactElement } from 'react';
-import { useClipboard } from 'use-clipboard-copy';
-import { Clipboard } from 'react-feather';
+import { ClipboardCopy, Flex } from '@patternfly/react-core';
 
 type Props = {
   connect: string;
 };
 
 export default function ClusterConnect({ connect }: Props): ReactElement {
-  const clipboard = useClipboard({
-    copiedTimeout: 800, // duration in milliseconds to show 'successfully copied' feedback
-  });
-
   const stripComments = connect
     .split('\n')
     .filter((line) => !/^#/.test(line))
     .join('\n');
 
   return (
-    <span className="flex content-start text-base normal-case">
-      Connect: <span className="ml-2 font-mono">{stripComments}</span>{' '}
-      <button
-        type="button"
-        title="Copy to clipboard"
-        aria-label="Copy to clipboard"
-        onClick={() => clipboard.copy(stripComments)}
-        className="ml-2"
+    <Flex alignItems={{ default: 'alignItemsCenter' }}>
+      <span>Connect:</span>
+      <ClipboardCopy
+        className="pf-v6-u-flex-grow-1"
+        isReadOnly
+        hoverTip="Copy command"
+        clickTip="Command copied!"
       >
-        <div className="flex items-center">
-          <Clipboard size={16} />
-          {clipboard.copied && <span className="ml-2 text-success-700">Copied!</span>}
-        </div>
-      </button>
-    </span>
+        {stripComments}
+      </ClipboardCopy>
+    </Flex>
   );
 }
diff --git a/ui/src/containers/ClusterInfoPage/ClusterInfoPage.tsx b/ui/src/containers/ClusterInfoPage/ClusterInfoPage.tsx
index a2e9f8482..012994823 100644
--- a/ui/src/containers/ClusterInfoPage/ClusterInfoPage.tsx
+++ b/ui/src/containers/ClusterInfoPage/ClusterInfoPage.tsx
@@ -1,6 +1,6 @@
 import React, { useState, useCallback, ReactElement } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
-import { Button, Flex, PageSection, Title } from '@patternfly/react-core';
+import { Button, Divider, Flex, PageSection, Title } from '@patternfly/react-core';
 import { DownloadIcon, TrashIcon } from '@patternfly/react-icons';
 
 import { ClusterServiceApi, V1Status } from 'generated/client';
@@ -48,19 +48,22 @@ export default function ClusterInfoPage(): ReactElement {
               </Title>
               {!!cluster && <MutableLifespan cluster={cluster} />}
             </Flex>
-            {cluster.Connect && <ClusterConnect connect={cluster.Connect} />}
+            {cluster.Connect && (
+              <>
+                <Divider component="div" />
+                <ClusterConnect connect={cluster.Connect} />
+              </>
+            )}
             {cluster.URL && (
-              <span className="text-base normal-case">
-                URL:{' '}
-                <a
-                  href={cluster.URL}
-                  className="underline text-blue-500"
-                  target="_blank"
-                  rel="noreferrer"
-                >
-                  {cluster.URL}
-                </a>
-              </span>
+              <>
+                <Divider component="div" />
+                <span>
+                  URL:{' '}
+                  <a href={cluster.URL} target="_blank" rel="noreferrer">
+                    {cluster.URL}
+                  </a>
+                </span>
+              </>
             )}
           </Flex>
         </PageSection>

From ce0ea1bed62603dacc403eafc33a61af3d5e52f5 Mon Sep 17 00:00:00 2001
From: David Vail <dcvail17@gmail.com>
Date: Tue, 25 Feb 2025 15:04:16 -0500
Subject: [PATCH 19/25] Remove use-clipboard-copy dep

---
 ui/package.json |  1 -
 ui/yarn.lock    | 12 ------------
 2 files changed, 13 deletions(-)

diff --git a/ui/package.json b/ui/package.json
index 01bfd4db1..27ee4585e 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -32,7 +32,6 @@
     "react-markdown": "^8.0.0",
     "react-router-dom": "^6.14.1",
     "react-spinners": "^0.13.8",
-    "use-clipboard-copy": "^0.2.0",
     "yup": "^1.3.3"
   },
   "devDependencies": {
diff --git a/ui/yarn.lock b/ui/yarn.lock
index 4df38ea0f..46641ea1c 100644
--- a/ui/yarn.lock
+++ b/ui/yarn.lock
@@ -3789,11 +3789,6 @@ clean-stack@^2.0.0:
   resolved "https://registry.yarnpkg.com/clean-stack/-/clean-stack-2.2.0.tgz#ee8472dbb129e727b31e8a10a427dee9dfe4008b"
   integrity sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A==
 
-clipboard-copy@^3.0.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/clipboard-copy/-/clipboard-copy-3.1.0.tgz#4c59030a43d4988990564a664baeafba99f78ca4"
-  integrity sha512-Xsu1NddBXB89IUauda5BIq3Zq73UWkjkaQlPQbLNvNsd5WBMnTWPNKYR6HGaySOxGYZ+BKxP2E9X4ElnI3yiPA==
-
 cliui@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/cliui/-/cliui-5.0.0.tgz#deefcfdb2e800784aa34f46fa08e06851c7bbbc5"
@@ -12181,13 +12176,6 @@ url@^0.11.0:
     punycode "1.3.2"
     querystring "0.2.0"
 
-use-clipboard-copy@^0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/use-clipboard-copy/-/use-clipboard-copy-0.2.0.tgz#e1f31f2b21e369bc79b5d7b358e2c8aece6ef264"
-  integrity sha512-f0PMMwZ2/Hh9/54L12capx4s6ASdd6edNJxg2OcqWVNM8BPvtOSmNFIN1Dg/q//fPp8MpUZceHfr7cnWOS0RxA==
-  dependencies:
-    clipboard-copy "^3.0.0"
-
 use@^3.1.0:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f"

From a38ac860b5df4a1d1b6e82e783df84ed3e4ab358 Mon Sep 17 00:00:00 2001
From: David Vail <dcvail17@gmail.com>
Date: Tue, 25 Feb 2025 15:24:40 -0500
Subject: [PATCH 20/25] Tweak lifecycle layout

---
 ui/src/components/Countdown.tsx               | 29 +++++++++----------
 .../ClusterInfoPage/DeleteClusterModal.tsx    |  6 ++--
 2 files changed, 16 insertions(+), 19 deletions(-)

diff --git a/ui/src/components/Countdown.tsx b/ui/src/components/Countdown.tsx
index e9552d086..5af33f78a 100644
--- a/ui/src/components/Countdown.tsx
+++ b/ui/src/components/Countdown.tsx
@@ -1,18 +1,12 @@
 import React, { ReactElement } from 'react';
 import { Button } from '@patternfly/react-core';
+import { MinusCircleIcon, PlusCircleIcon } from '@patternfly/react-icons';
 import moment from 'moment';
-import { PlusCircle, MinusCircle } from 'react-feather';
 
 function calcDuration(targetDate: Date): moment.Duration {
   return moment.duration(moment(targetDate).diff(moment()));
 }
 
-type Props = {
-  targetDate: Date;
-  className?: string;
-  onModify?: (notation: string, incOrDec: string) => void;
-};
-
 type ModifiableTimeUnitProps = {
   notation: string;
   value: number;
@@ -26,25 +20,25 @@ function ModifiableTimeUnit({
 }: ModifiableTimeUnitProps): ReactElement {
   return (
     <span className="pf-v6-u-display-inline-flex pf-v6-u-flex-direction-column pf-v6-u-align-items-center">
-      <span>
+      <span className="pf-v6-u-font-weight-bold">
         {`${value}`.padStart(2, '0')}
         {notation}
       </span>
       <span className="pf-v6-u-display-inline-flex">
         <Button
-          icon={<PlusCircle size={16} />}
+          icon={<PlusCircleIcon />}
           size="sm"
-          variant="plain"
-          className="pf-v6-u-p-0"
+          variant="control"
+          className="pf-v6-u-p-0 pf-v6-u-mr-xs"
           aria-label="Increment"
           onClick={(): void => {
             onChange(notation, 'inc');
           }}
         />
         <Button
-          icon={<MinusCircle size={16} />}
+          icon={<MinusCircleIcon />}
           size="sm"
-          variant="plain"
+          variant="control"
           className="pf-v6-u-p-0"
           aria-label="Decrement"
           onClick={(): void => {
@@ -93,11 +87,16 @@ function FormatDuration({ duration, onModify }: FormatDurationProps): ReactEleme
   );
 }
 
-export default function Countdown({ targetDate, className = '', onModify }: Props): ReactElement {
+type CountdownProps = {
+  targetDate: Date;
+  onModify?: (notation: string, incOrDec: string) => void;
+};
+
+export default function Countdown({ targetDate, onModify }: CountdownProps): ReactElement {
   const duration = calcDuration(targetDate);
 
   return (
-    <div className={className}>
+    <div className="pf-v6-u-font-size-xl">
       {`Expiration: ${moment(targetDate).format('LLL')}`}
       <span>&nbsp;-&nbsp;</span>
       <FormatDuration duration={duration} onModify={onModify} />
diff --git a/ui/src/containers/ClusterInfoPage/DeleteClusterModal.tsx b/ui/src/containers/ClusterInfoPage/DeleteClusterModal.tsx
index 31c48a70a..24fb5a8c5 100644
--- a/ui/src/containers/ClusterInfoPage/DeleteClusterModal.tsx
+++ b/ui/src/containers/ClusterInfoPage/DeleteClusterModal.tsx
@@ -1,5 +1,5 @@
 import React, { ReactElement } from 'react';
-import { Button } from '@patternfly/react-core';
+import { Alert, Button } from '@patternfly/react-core';
 import { ClipLoader } from 'react-spinners';
 
 import { V1Cluster, ClusterServiceApi } from 'generated/client';
@@ -43,9 +43,7 @@ export default function DeleteClusterModal({ cluster, onCancel, onDeleted }: Pro
         header={`Are you sure you want to delete ${cluster.ID}?`}
         buttons={buttons}
       >
-        <span className="pf-v6-u-danger-color-100 pf-v6-u-font-size-2xl">
-          This action cannot be undone.
-        </span>
+        <Alert isInline variant="danger" title="This will permanently delete the cluster" />
       </Modal>
     );
   }

From e5889998344760a01aecb7a29f1b7edbf034a705 Mon Sep 17 00:00:00 2001
From: David Vail <dcvail17@gmail.com>
Date: Tue, 25 Feb 2025 15:29:48 -0500
Subject: [PATCH 21/25] Checkbox -> Switch

---
 ui/src/components/Countdown.tsx                       | 2 +-
 ui/src/containers/ClusterInfoPage/MutableLifespan.tsx | 6 +++++-
 ui/src/containers/HomePage/LaunchPageSection.tsx      | 7 +++----
 ui/src/containers/HomePage/MyClustersPageSection.tsx  | 5 ++---
 4 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/ui/src/components/Countdown.tsx b/ui/src/components/Countdown.tsx
index 5af33f78a..77c8f247b 100644
--- a/ui/src/components/Countdown.tsx
+++ b/ui/src/components/Countdown.tsx
@@ -96,7 +96,7 @@ export default function Countdown({ targetDate, onModify }: CountdownProps): Rea
   const duration = calcDuration(targetDate);
 
   return (
-    <div className="pf-v6-u-font-size-xl">
+    <div>
       {`Expiration: ${moment(targetDate).format('LLL')}`}
       <span>&nbsp;-&nbsp;</span>
       <FormatDuration duration={duration} onModify={onModify} />
diff --git a/ui/src/containers/ClusterInfoPage/MutableLifespan.tsx b/ui/src/containers/ClusterInfoPage/MutableLifespan.tsx
index 5fa73dfcc..09147a3a3 100644
--- a/ui/src/containers/ClusterInfoPage/MutableLifespan.tsx
+++ b/ui/src/containers/ClusterInfoPage/MutableLifespan.tsx
@@ -74,5 +74,9 @@ export default function MutableLifespan({ cluster }: Props): ReactElement {
       });
   };
 
-  return <Lifespan cluster={modifiedCluster} onModify={onModify} />;
+  return (
+    <div className="pf-v6-u-font-size-lg">
+      <Lifespan cluster={modifiedCluster} onModify={onModify} />
+    </div>
+  );
 }
diff --git a/ui/src/containers/HomePage/LaunchPageSection.tsx b/ui/src/containers/HomePage/LaunchPageSection.tsx
index 8aca5a56f..3834c9860 100644
--- a/ui/src/containers/HomePage/LaunchPageSection.tsx
+++ b/ui/src/containers/HomePage/LaunchPageSection.tsx
@@ -3,12 +3,12 @@ import React, { ReactElement } from 'react';
 import { useSearchParams } from 'react-router-dom';
 import { AxiosPromise } from 'axios';
 import {
-  Checkbox,
   Flex,
   Gallery,
   GalleryItem,
   Label,
   PageSection,
+  Switch,
   Title,
 } from '@patternfly/react-core';
 
@@ -109,11 +109,10 @@ export default function LaunchPageSection(): ReactElement {
           alignItems={{ default: 'alignItemsCenter' }}
         >
           <Title headingLevel="h2">{showAllFlavors ? 'All Flavors' : 'My Flavors'}</Title>
-          <Checkbox
-            labelPosition="start"
+          <Switch
+            name="flavor-filter-toggle"
             label="Show All Flavors"
             id="flavor-filter-toggle"
-            name="flavor-filter-toggle"
             isChecked={showAllFlavors}
             onChange={toggleFlavorFilter}
           />
diff --git a/ui/src/containers/HomePage/MyClustersPageSection.tsx b/ui/src/containers/HomePage/MyClustersPageSection.tsx
index e9652837c..9d76842d5 100644
--- a/ui/src/containers/HomePage/MyClustersPageSection.tsx
+++ b/ui/src/containers/HomePage/MyClustersPageSection.tsx
@@ -5,12 +5,12 @@ import { AxiosPromise } from 'axios';
 import moment from 'moment';
 import {
   Bullseye,
-  Checkbox,
   Flex,
   Gallery,
   GalleryItem,
   Icon,
   PageSection,
+  Switch,
   Title,
 } from '@patternfly/react-core';
 import { StarIcon } from '@patternfly/react-icons';
@@ -137,8 +137,7 @@ export default function MyClustersPageSection(): ReactElement {
           alignItems={{ default: 'alignItemsCenter' }}
         >
           <Title headingLevel="h2">{showAllClusters ? 'All Clusters' : 'My Clusters'}</Title>
-          <Checkbox
-            labelPosition="start"
+          <Switch
             label="Show All Clusters"
             id="cluster-filter-toggle"
             name="cluster-filter-toggle"

From 9dbb149e26c3b8a0b8b9c4a3c7639470f7cab2f3 Mon Sep 17 00:00:00 2001
From: David Vail <dcvail17@gmail.com>
Date: Tue, 25 Feb 2025 15:45:04 -0500
Subject: [PATCH 22/25] Fix react-feather button layout

---
 ui/src/containers/AppHeader/AppHeader.tsx           |  6 +++++-
 ui/src/containers/AppHeader/Version.tsx             | 11 ++++++++---
 ui/src/containers/LaunchClusterPage/ClusterForm.tsx |  2 +-
 3 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/ui/src/containers/AppHeader/AppHeader.tsx b/ui/src/containers/AppHeader/AppHeader.tsx
index 1d3bb33dd..a86e2b63a 100644
--- a/ui/src/containers/AppHeader/AppHeader.tsx
+++ b/ui/src/containers/AppHeader/AppHeader.tsx
@@ -34,7 +34,11 @@ export default function AppHeader(): ReactElement {
           ) : (
             <p>{user?.Name || 'anonymous'}</p>
           )}
-          <Button onClick={logout} variant="control" icon={<LogOut size={16} />}>
+          <Button
+            onClick={logout}
+            variant="control"
+            icon={<LogOut className="pf-v6-svg" size={16} />}
+          >
             Logout
           </Button>
         </Flex>
diff --git a/ui/src/containers/AppHeader/Version.tsx b/ui/src/containers/AppHeader/Version.tsx
index 9985abd4a..80ab62e4c 100644
--- a/ui/src/containers/AppHeader/Version.tsx
+++ b/ui/src/containers/AppHeader/Version.tsx
@@ -1,7 +1,7 @@
 import React, { ReactElement } from 'react';
 import { AxiosPromise } from 'axios';
-import { Info, AlertCircle } from 'react-feather';
 import { Flex, FlexItem, Spinner } from '@patternfly/react-core';
+import { InfoAltIcon, InfoCircleIcon } from '@patternfly/react-icons';
 
 import { VersionServiceApi, V1Version } from 'generated/client';
 import configuration from 'client/configuration';
@@ -33,7 +33,12 @@ export default function Version(): ReactElement {
     );
 
   if (error || !data?.Version)
-    return <VersionContent icon={<AlertCircle size={16} />} text="Error occurred" />;
+    return (
+      <VersionContent
+        icon={<InfoCircleIcon color="var(--pf-t--global--icon--color--status--danger--default)" />}
+        text="Could not load server version"
+      />
+    );
 
-  return <VersionContent icon={<Info size={16} />} text={data.Version} />;
+  return <VersionContent icon={<InfoAltIcon />} text={data.Version} />;
 }
diff --git a/ui/src/containers/LaunchClusterPage/ClusterForm.tsx b/ui/src/containers/LaunchClusterPage/ClusterForm.tsx
index 750334ad6..d8e2caf73 100644
--- a/ui/src/containers/LaunchClusterPage/ClusterForm.tsx
+++ b/ui/src/containers/LaunchClusterPage/ClusterForm.tsx
@@ -202,7 +202,7 @@ function FormContent(props: {
       <Button
         type="submit"
         isDisabled={isSubmitting}
-        icon={isSubmitting ? undefined : <UploadCloud size={16} />}
+        icon={isSubmitting ? undefined : <UploadCloud className="pf-v6-svg" size={16} />}
         spinnerAriaValueText="Launching cluster"
         spinnerAriaLabel="Launching cluster"
         isLoading={isSubmitting}

From 6d5a8b866b97efd62c44421da1655006d39a4c9c Mon Sep 17 00:00:00 2001
From: David Vail <dcvail17@gmail.com>
Date: Tue, 25 Feb 2025 15:50:18 -0500
Subject: [PATCH 23/25] Remove react-feather

---
 ui/package.json                                     | 1 -
 ui/src/containers/AppHeader/AppHeader.tsx           | 9 ++-------
 ui/src/containers/LaunchClusterPage/ClusterForm.tsx | 4 ++--
 ui/yarn.lock                                        | 7 -------
 4 files changed, 4 insertions(+), 17 deletions(-)

diff --git a/ui/package.json b/ui/package.json
index 27ee4585e..00a6a7a6a 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -28,7 +28,6 @@
     "prop-types": "^15.8.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-feather": "^2.0.9",
     "react-markdown": "^8.0.0",
     "react-router-dom": "^6.14.1",
     "react-spinners": "^0.13.8",
diff --git a/ui/src/containers/AppHeader/AppHeader.tsx b/ui/src/containers/AppHeader/AppHeader.tsx
index a86e2b63a..8aad49fca 100644
--- a/ui/src/containers/AppHeader/AppHeader.tsx
+++ b/ui/src/containers/AppHeader/AppHeader.tsx
@@ -2,8 +2,7 @@
 import React, { ReactElement } from 'react';
 import { Link } from 'react-router-dom';
 import { Avatar, Button, Flex } from '@patternfly/react-core';
-import { TerminalIcon } from '@patternfly/react-icons';
-import { LogOut } from 'react-feather';
+import { OutlinedHandPointRightIcon, TerminalIcon } from '@patternfly/react-icons';
 
 import AppHeaderLayout from 'components/AppHeaderLayout';
 import RHACSLogo from 'components/RHACSLogo';
@@ -34,11 +33,7 @@ export default function AppHeader(): ReactElement {
           ) : (
             <p>{user?.Name || 'anonymous'}</p>
           )}
-          <Button
-            onClick={logout}
-            variant="control"
-            icon={<LogOut className="pf-v6-svg" size={16} />}
-          >
+          <Button onClick={logout} variant="control" icon={<OutlinedHandPointRightIcon />}>
             Logout
           </Button>
         </Flex>
diff --git a/ui/src/containers/LaunchClusterPage/ClusterForm.tsx b/ui/src/containers/LaunchClusterPage/ClusterForm.tsx
index d8e2caf73..4d6c2226d 100644
--- a/ui/src/containers/LaunchClusterPage/ClusterForm.tsx
+++ b/ui/src/containers/LaunchClusterPage/ClusterForm.tsx
@@ -22,7 +22,7 @@ import NumberFormField from 'components/forms/NumberFormField';
 import { useUserAuth } from 'containers/UserAuthProvider';
 import assertDefined from 'utils/assertDefined';
 import { generateClusterName } from 'utils/cluster.utils';
-import { UploadCloud } from 'react-feather';
+import { CloudUploadAltIcon } from '@patternfly/react-icons';
 
 const clusterService = new ClusterServiceApi(configuration);
 
@@ -202,7 +202,7 @@ function FormContent(props: {
       <Button
         type="submit"
         isDisabled={isSubmitting}
-        icon={isSubmitting ? undefined : <UploadCloud className="pf-v6-svg" size={16} />}
+        icon={isSubmitting ? undefined : <CloudUploadAltIcon />}
         spinnerAriaValueText="Launching cluster"
         spinnerAriaLabel="Launching cluster"
         isLoading={isSubmitting}
diff --git a/ui/yarn.lock b/ui/yarn.lock
index 46641ea1c..8e462328e 100644
--- a/ui/yarn.lock
+++ b/ui/yarn.lock
@@ -10141,13 +10141,6 @@ react-fast-compare@^2.0.1:
   resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-2.0.4.tgz#e84b4d455b0fec113e0402c329352715196f81f9"
   integrity sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==
 
-react-feather@^2.0.9:
-  version "2.0.9"
-  resolved "https://registry.yarnpkg.com/react-feather/-/react-feather-2.0.9.tgz#6e42072130d2fa9a09d4476b0e61b0ed17814480"
-  integrity sha512-yMfCGRkZdXwIs23Zw/zIWCJO3m3tlaUvtHiXlW+3FH7cIT6fiK1iJ7RJWugXq7Fso8ZaQyUm92/GOOHXvkiVUw==
-  dependencies:
-    prop-types "^15.7.2"
-
 react-is@^16.13.1, react-is@^16.7.0:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"

From 28a2fbd87e4ff25b90bb77ab7be0494318fcb538 Mon Sep 17 00:00:00 2001
From: David Vail <dcvail17@gmail.com>
Date: Tue, 25 Feb 2025 16:15:12 -0500
Subject: [PATCH 24/25] Remove react-spinners

---
 ui/package.json                                       |  2 --
 .../containers/ClusterInfoPage/DeleteClusterModal.tsx | 11 +++++------
 ui/yarn.lock                                          |  5 -----
 3 files changed, 5 insertions(+), 13 deletions(-)

diff --git a/ui/package.json b/ui/package.json
index 00a6a7a6a..b3eb81453 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -25,12 +25,10 @@
     "lodash": "^4.17.21",
     "moment": "^2.29.4",
     "namor": "^2.0.3",
-    "prop-types": "^15.8.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-markdown": "^8.0.0",
     "react-router-dom": "^6.14.1",
-    "react-spinners": "^0.13.8",
     "yup": "^1.3.3"
   },
   "devDependencies": {
diff --git a/ui/src/containers/ClusterInfoPage/DeleteClusterModal.tsx b/ui/src/containers/ClusterInfoPage/DeleteClusterModal.tsx
index 24fb5a8c5..595a2e552 100644
--- a/ui/src/containers/ClusterInfoPage/DeleteClusterModal.tsx
+++ b/ui/src/containers/ClusterInfoPage/DeleteClusterModal.tsx
@@ -1,6 +1,5 @@
 import React, { ReactElement } from 'react';
 import { Alert, Button } from '@patternfly/react-core';
-import { ClipLoader } from 'react-spinners';
 
 import { V1Cluster, ClusterServiceApi } from 'generated/client';
 import configuration from 'client/configuration';
@@ -49,29 +48,29 @@ export default function DeleteClusterModal({ cluster, onCancel, onDeleted }: Pro
   }
 
   if (loading) {
+    const message = `Cluster ${cluster.ID} is being destroyed now.`;
     // waiting for server response
     return (
       <Modal isOpen onRequestClose={(): void => {}} header={`Deleting ${cluster.ID}...`}>
-        <ClipLoader size={32} color="currentColor" />
+        <Alert isInline variant="info" title={message} />
       </Modal>
     );
   }
 
   if (error) {
     // operation failed
-    const message = `Cannot delete cluster. Server error occurred: "${error.message}".`;
+    const message = `Could not delete cluster. Server error occurred: "${error.message}".`;
     return (
       <InformationalModal header={`Failed to delete ${cluster.ID}!`} onAcknowledged={onCancel}>
-        <span className="pf-v6-u-danger-color-100 pf-v6-u-font-size-2xl">{message}</span>
+        <Alert isInline variant="warning" title={message} />
       </InformationalModal>
     );
   }
 
   // no need to check for data response from the server, "no error happened" means operation was successful
-  const message = `Cluster ${cluster.ID} is being destroyed now.`;
   return (
     <InformationalModal header={`Successfully deleted ${cluster.ID}!`} onAcknowledged={onDeleted}>
-      <span className="pf-v6-u-success-color-100 pf-v6-u-font-size-2xl">{message}</span>
+      <Alert isInline variant="success" title="The cluster was deleted" />
     </InformationalModal>
   );
 }
diff --git a/ui/yarn.lock b/ui/yarn.lock
index 8e462328e..696404ce9 100644
--- a/ui/yarn.lock
+++ b/ui/yarn.lock
@@ -10263,11 +10263,6 @@ react-scripts@^4.0.1:
   optionalDependencies:
     fsevents "^2.1.3"
 
-react-spinners@^0.13.8:
-  version "0.13.8"
-  resolved "https://registry.yarnpkg.com/react-spinners/-/react-spinners-0.13.8.tgz#5262571be0f745d86bbd49a1e6b49f9f9cb19acc"
-  integrity sha512-3e+k56lUkPj0vb5NDXPVFAOkPC//XyhKPJjvcGjyMNPWsBKpplfeyialP74G7H7+It7KzhtET+MvGqbKgAqpZA==
-
 react@^18.3.1:
   version "18.3.1"
   resolved "https://registry.yarnpkg.com/react/-/react-18.3.1.tgz#49ab892009c53933625bd16b2533fc754cab2891"

From 7f27566c8415c93d6c3365e1f497683b73d432e3 Mon Sep 17 00:00:00 2001
From: David Vail <dcvail17@gmail.com>
Date: Wed, 26 Feb 2025 13:44:12 -0500
Subject: [PATCH 25/25] Fix form submit

---
 .../containers/LaunchClusterPage/ClusterForm.tsx | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/ui/src/containers/LaunchClusterPage/ClusterForm.tsx b/ui/src/containers/LaunchClusterPage/ClusterForm.tsx
index 4d6c2226d..cd305c691 100644
--- a/ui/src/containers/LaunchClusterPage/ClusterForm.tsx
+++ b/ui/src/containers/LaunchClusterPage/ClusterForm.tsx
@@ -8,7 +8,7 @@
  */
 
 import React, { useState, ReactElement } from 'react';
-import { Formik, FormikValues, FormikHelpers, useFormikContext } from 'formik';
+import { FormikValues, FormikHelpers, useFormikContext, useFormik, FormikProvider } from 'formik';
 import * as yup from 'yup';
 import { mapValues } from 'lodash';
 import { Button, Form } from '@patternfly/react-core';
@@ -181,7 +181,7 @@ function FormContent(props: {
   flavorParameters: FlavorParameters;
   parameterSchemas: ParameterSchemas;
 }): ReactElement {
-  const { isSubmitting } = useFormikContext();
+  const { isSubmitting, submitForm } = useFormikContext();
   const { flavorParameters, parameterSchemas } = props;
   const parameterFields = Object.values(flavorParameters)
     .sort((a: V1Parameter, b: V1Parameter) => getOrderFromParameter(a) - getOrderFromParameter(b))
@@ -200,7 +200,7 @@ function FormContent(props: {
       <TextFormField name="Description" label="Description" />
 
       <Button
-        type="submit"
+        onClick={submitForm}
         isDisabled={isSubmitting}
         icon={isSubmitting ? undefined : <CloudUploadAltIcon />}
         spinnerAriaValueText="Launching cluster"
@@ -272,8 +272,14 @@ export default function ClusterForm({
     }
   };
 
+  const formik = useFormik({
+    initialValues,
+    validationSchema: schema,
+    onSubmit,
+  });
+
   return (
-    <Formik initialValues={initialValues} validationSchema={schema} onSubmit={onSubmit}>
+    <FormikProvider value={formik}>
       <Form className="pf-v6-u-w-25-on-xl pf-v6-u-w-50-on-md">
         {error && (
           <div className="p-2 mb-2 bg-alert-200">
@@ -283,6 +289,6 @@ export default function ClusterForm({
         )}
         <FormContent flavorParameters={flavorParameters} parameterSchemas={parameterSchemas} />
       </Form>
-    </Formik>
+    </FormikProvider>
   );
 }