From dc891f342c6e64a95dcc63a735a7b371a489463e Mon Sep 17 00:00:00 2001
From: Hussain Khalil <hkhalil@akamai.com>
Date: Wed, 11 Sep 2024 15:26:58 -0400
Subject: [PATCH 01/62] Fix misaligned banner text

---
 packages/manager/src/features/Domains/DomainBanner.tsx | 10 ++--------
 1 file changed, 2 insertions(+), 8 deletions(-)

diff --git a/packages/manager/src/features/Domains/DomainBanner.tsx b/packages/manager/src/features/Domains/DomainBanner.tsx
index 911be5f9f45..42442193e73 100644
--- a/packages/manager/src/features/Domains/DomainBanner.tsx
+++ b/packages/manager/src/features/Domains/DomainBanner.tsx
@@ -30,9 +30,9 @@ export const DomainBanner = React.memo((props: DomainBannerProps) => {
       variant="warning"
     >
       <>
-        <StyledTypography>
+        <Typography>
           <strong>Your DNS zones are not being served.</strong>
-        </StyledTypography>
+        </Typography>
         <Typography>
           Your domains will not be served by Linode&rsquo;s nameservers unless
           you have at least one active Linode on your account.{` `}
@@ -43,12 +43,6 @@ export const DomainBanner = React.memo((props: DomainBannerProps) => {
   );
 });
 
-const StyledTypography = styled(Typography, { label: 'StyledTypography' })(
-  ({ theme }) => ({
-    marginBottom: theme.spacing(),
-  })
-);
-
 const StyledDismissibleBanner = styled(DismissibleBanner, {
   label: 'StyledDismissableBanner',
 })(({ theme }) => ({

From 4896dcddb0fa5664ceef2c6d5a4c985befbaad37 Mon Sep 17 00:00:00 2001
From: Hussain Khalil <hkhalil@akamai.com>
Date: Wed, 11 Sep 2024 16:05:39 -0400
Subject: [PATCH 02/62] Added changeset: Misaligned DNS banner text

---
 packages/manager/.changeset/pr-10924-fixed-1726085139068.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 packages/manager/.changeset/pr-10924-fixed-1726085139068.md

diff --git a/packages/manager/.changeset/pr-10924-fixed-1726085139068.md b/packages/manager/.changeset/pr-10924-fixed-1726085139068.md
new file mode 100644
index 00000000000..9d3eb10136a
--- /dev/null
+++ b/packages/manager/.changeset/pr-10924-fixed-1726085139068.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Fixed
+---
+
+Misaligned DNS banner text ([#10924](https://github.com/linode/manager/pull/10924))

From fc524ff99a08c545b1122ea4c0255aa2e66bead0 Mon Sep 17 00:00:00 2001
From: Hussain Khalil <hkhalil@akamai.com>
Date: Thu, 12 Sep 2024 13:44:52 -0400
Subject: [PATCH 03/62] Use <Stack> to ensure spacing between elements

---
 packages/manager/src/features/Domains/DomainBanner.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/manager/src/features/Domains/DomainBanner.tsx b/packages/manager/src/features/Domains/DomainBanner.tsx
index 42442193e73..44160e35d1b 100644
--- a/packages/manager/src/features/Domains/DomainBanner.tsx
+++ b/packages/manager/src/features/Domains/DomainBanner.tsx
@@ -4,6 +4,7 @@ import * as React from 'react';
 
 import { DismissibleBanner } from 'src/components/DismissibleBanner/DismissibleBanner';
 import { Link } from 'src/components/Link';
+import { Stack } from 'src/components/Stack';
 import { Typography } from 'src/components/Typography';
 
 interface DomainBannerProps {
@@ -29,7 +30,7 @@ export const DomainBanner = React.memo((props: DomainBannerProps) => {
       preferenceKey={KEY}
       variant="warning"
     >
-      <>
+      <Stack>
         <Typography>
           <strong>Your DNS zones are not being served.</strong>
         </Typography>
@@ -38,7 +39,7 @@ export const DomainBanner = React.memo((props: DomainBannerProps) => {
           you have at least one active Linode on your account.{` `}
           <Link to="/linodes/create">You can create one here.</Link>
         </Typography>
-      </>
+      </Stack>
     </StyledDismissibleBanner>
   );
 });
@@ -47,6 +48,6 @@ const StyledDismissibleBanner = styled(DismissibleBanner, {
   label: 'StyledDismissableBanner',
 })(({ theme }) => ({
   '& h3:first-of-type': {
-    marginBottom: theme.spacing(1),
+    margin: theme.spacing(1),
   },
 }));

From 67b686beaefb46c2a4488036dfb888c6e9e830d9 Mon Sep 17 00:00:00 2001
From: Azure-akamai <azsh@akamai.com>
Date: Fri, 13 Sep 2024 09:58:17 -0400
Subject: [PATCH 04/62] test: [M3-8316,M3-8317] - Tag cypress tests by adding
 the "method:e2e" and "purpose:dcTesting" (#10915)

* tag cypress tests

* Added changeset: Tag cypress tests by adding the method:e2e and purpose:dcTesting

* Update cy.tag
---
 .../pr-10915-tests-1725992312603.md           |  5 +++
 .../e2e/core/account/account-logout.spec.ts   |  2 +-
 .../e2e/core/account/service-transfer.spec.ts |  2 +
 .../core/domains/smoke-clone-domain.spec.ts   |  3 ++
 .../smoke-create-domain-records.spec.ts       |  3 ++
 .../core/domains/smoke-create-domain.spec.ts  |  1 +
 .../core/domains/smoke-delete-domain.spec.ts  |  3 ++
 .../core/firewalls/create-firewall.spec.ts    |  3 ++
 .../core/firewalls/delete-firewall.spec.ts    |  3 ++
 .../migrate-linode-with-firewall.spec.ts      |  1 +
 .../core/firewalls/update-firewall.spec.ts    |  3 ++
 .../core/general/account-activation.spec.ts   |  3 ++
 .../e2e/core/general/smoke-deep-link.spec.ts  |  4 +-
 .../e2e/core/images/create-image.spec.ts      |  1 +
 .../e2e/core/images/search-images.spec.ts     |  3 ++
 .../e2e/core/kubernetes/lke-create.spec.ts    |  1 +
 .../e2e/core/linodes/backup-linode.spec.ts    |  2 +
 .../e2e/core/linodes/clone-linode.spec.ts     |  1 +
 .../e2e/core/linodes/linode-config.spec.ts    |  3 ++
 .../e2e/core/linodes/linode-storage.spec.ts   | 39 ++++++----------
 .../e2e/core/linodes/rebuild-linode.spec.ts   |  3 ++
 .../e2e/core/linodes/rescue-linode.spec.ts    |  1 +
 .../e2e/core/linodes/resize-linode.spec.ts    |  1 +
 .../core/linodes/smoke-delete-linode.spec.ts  |  3 ++
 .../core/linodes/switch-linode-state.spec.ts  |  1 +
 .../core/linodes/update-linode-labels.spec.ts |  1 +
 .../smoke-create-nodebal.spec.ts              |  3 ++
 .../core/objectStorage/access-key.e2e.spec.ts |  3 ++
 .../objectStorage/object-storage.e2e.spec.ts  |  3 ++
 .../core/oneClickApps/one-click-apps.spec.ts  |  1 +
 .../stackscripts/create-stackscripts.spec.ts  |  3 ++
 .../smoke-community-stackscripts.spec.ts      |  2 +
 .../e2e/core/volumes/attach-volume.spec.ts    |  3 ++
 .../e2e/core/volumes/clone-volume.spec.ts     |  3 ++
 .../e2e/core/volumes/create-volume.spec.ts    |  4 +-
 .../e2e/core/volumes/delete-volume.spec.ts    |  3 ++
 .../e2e/core/volumes/resize-volume.spec.ts    |  3 ++
 .../e2e/core/volumes/search-volumes.spec.ts   |  4 +-
 .../e2e/core/volumes/update-volume.spec.ts    |  3 ++
 .../cypress/support/intercepts/linodes.ts     | 45 +++++++++++++++++++
 40 files changed, 150 insertions(+), 29 deletions(-)
 create mode 100644 packages/manager/.changeset/pr-10915-tests-1725992312603.md

diff --git a/packages/manager/.changeset/pr-10915-tests-1725992312603.md b/packages/manager/.changeset/pr-10915-tests-1725992312603.md
new file mode 100644
index 00000000000..6d7703fd558
--- /dev/null
+++ b/packages/manager/.changeset/pr-10915-tests-1725992312603.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Tests
+---
+
+Tag cypress tests by adding the "method:e2e" and "purpose:dcTesting" ([#10915](https://github.com/linode/manager/pull/10915))
diff --git a/packages/manager/cypress/e2e/core/account/account-logout.spec.ts b/packages/manager/cypress/e2e/core/account/account-logout.spec.ts
index bb72c9795b4..550c4b39c98 100644
--- a/packages/manager/cypress/e2e/core/account/account-logout.spec.ts
+++ b/packages/manager/cypress/e2e/core/account/account-logout.spec.ts
@@ -4,7 +4,7 @@ import { ui } from 'support/ui';
 
 describe('Logout Test', () => {
   beforeEach(() => {
-    cy.tag('purpose:syntheticTesting');
+    cy.tag('purpose:syntheticTesting', 'method:e2e');
   });
 
   /*
diff --git a/packages/manager/cypress/e2e/core/account/service-transfer.spec.ts b/packages/manager/cypress/e2e/core/account/service-transfer.spec.ts
index 71428f889ea..51c3059d59f 100644
--- a/packages/manager/cypress/e2e/core/account/service-transfer.spec.ts
+++ b/packages/manager/cypress/e2e/core/account/service-transfer.spec.ts
@@ -121,6 +121,7 @@ describe('Account service transfers', () => {
    * - Confirms user can navigate to service transfer page via user menu.
    */
   it('can navigate to service transfers landing page', () => {
+    cy.tag('method:e2e');
     cy.visitWithLogin('/');
     cy.findByLabelText('Profile & Account').should('be.visible').click();
 
@@ -244,6 +245,7 @@ describe('Account service transfers', () => {
    * - Confirms that users can cancel a service transfer
    */
   it('can initiate and cancel a service transfer', () => {
+    cy.tag('method:e2e');
     // Create a Linode to transfer.
     const setupLinode = async (): Promise<Linode> => {
       const payload = createLinodeRequestFactory.build({
diff --git a/packages/manager/cypress/e2e/core/domains/smoke-clone-domain.spec.ts b/packages/manager/cypress/e2e/core/domains/smoke-clone-domain.spec.ts
index d45a2bf886d..4e9b28fb0b9 100644
--- a/packages/manager/cypress/e2e/core/domains/smoke-clone-domain.spec.ts
+++ b/packages/manager/cypress/e2e/core/domains/smoke-clone-domain.spec.ts
@@ -14,6 +14,9 @@ describe('Clone a Domain', () => {
   before(() => {
     cleanUp('domains');
   });
+  beforeEach(() => {
+    cy.tag('method:e2e');
+  });
 
   /*
    * - Clicks "Clone" action menu item for domain but cancels operation.
diff --git a/packages/manager/cypress/e2e/core/domains/smoke-create-domain-records.spec.ts b/packages/manager/cypress/e2e/core/domains/smoke-create-domain-records.spec.ts
index 3b1cb74e422..950719ce399 100644
--- a/packages/manager/cypress/e2e/core/domains/smoke-create-domain-records.spec.ts
+++ b/packages/manager/cypress/e2e/core/domains/smoke-create-domain-records.spec.ts
@@ -4,6 +4,9 @@ import { interceptCreateDomainRecord } from 'support/intercepts/domains';
 import { createDomainRecords } from 'support/constants/domains';
 
 authenticate();
+beforeEach(() => {
+  cy.tag('method:e2e');
+});
 
 describe('Creates Domains records with Form', () => {
   it('Adds domain records to a newly created Domain', () => {
diff --git a/packages/manager/cypress/e2e/core/domains/smoke-create-domain.spec.ts b/packages/manager/cypress/e2e/core/domains/smoke-create-domain.spec.ts
index 04d206a0bc8..e3d8d513de1 100644
--- a/packages/manager/cypress/e2e/core/domains/smoke-create-domain.spec.ts
+++ b/packages/manager/cypress/e2e/core/domains/smoke-create-domain.spec.ts
@@ -16,6 +16,7 @@ describe('Create a Domain', () => {
   });
 
   it('Creates first Domain', () => {
+    cy.tag('method:e2e');
     // Mock Domains to modify incoming response.
     const mockDomains = new Array(2).fill(null).map(
       (_item: null, index: number): Domain => {
diff --git a/packages/manager/cypress/e2e/core/domains/smoke-delete-domain.spec.ts b/packages/manager/cypress/e2e/core/domains/smoke-delete-domain.spec.ts
index 80d9b632aa2..4e9223cca14 100644
--- a/packages/manager/cypress/e2e/core/domains/smoke-delete-domain.spec.ts
+++ b/packages/manager/cypress/e2e/core/domains/smoke-delete-domain.spec.ts
@@ -7,6 +7,9 @@ import { createDomain } from '@linode/api-v4/lib/domains';
 import { ui } from 'support/ui';
 
 authenticate();
+beforeEach(() => {
+  cy.tag('method:e2e');
+});
 describe('Delete a Domain', () => {
   /*
    * - Clicks "Delete" action menu item for domain but cancels operation.
diff --git a/packages/manager/cypress/e2e/core/firewalls/create-firewall.spec.ts b/packages/manager/cypress/e2e/core/firewalls/create-firewall.spec.ts
index 4da8d8c2dab..3007167215a 100644
--- a/packages/manager/cypress/e2e/core/firewalls/create-firewall.spec.ts
+++ b/packages/manager/cypress/e2e/core/firewalls/create-firewall.spec.ts
@@ -12,6 +12,9 @@ describe('create firewall', () => {
   before(() => {
     cleanUp(['lke-clusters', 'linodes', 'firewalls']);
   });
+  beforeEach(() => {
+    cy.tag('method:e2e');
+  });
 
   /*
    * - Creates a firewall that is not assigned to a Linode.
diff --git a/packages/manager/cypress/e2e/core/firewalls/delete-firewall.spec.ts b/packages/manager/cypress/e2e/core/firewalls/delete-firewall.spec.ts
index 2cbedb29e5f..7be2db7cd11 100644
--- a/packages/manager/cypress/e2e/core/firewalls/delete-firewall.spec.ts
+++ b/packages/manager/cypress/e2e/core/firewalls/delete-firewall.spec.ts
@@ -11,6 +11,9 @@ describe('delete firewall', () => {
   before(() => {
     cleanUp('firewalls');
   });
+  beforeEach(() => {
+    cy.tag('method:e2e');
+  });
 
   /*
    * - Clicks "Delete" action menu item for firewall but cancels operation.
diff --git a/packages/manager/cypress/e2e/core/firewalls/migrate-linode-with-firewall.spec.ts b/packages/manager/cypress/e2e/core/firewalls/migrate-linode-with-firewall.spec.ts
index f8feabaf6db..2074a0785db 100644
--- a/packages/manager/cypress/e2e/core/firewalls/migrate-linode-with-firewall.spec.ts
+++ b/packages/manager/cypress/e2e/core/firewalls/migrate-linode-with-firewall.spec.ts
@@ -144,6 +144,7 @@ describe('Migrate Linode With Firewall', () => {
    * - Uses real API data to create a Firewall, attach a Linode to it, then migrate the Linode.
    */
   it('migrates linode with firewall - real data', () => {
+    cy.tag('method:e2e', 'purpose:dcTesting');
     const [migrationRegionStart, migrationRegionEnd] = chooseRegions(2);
     const firewallLabel = randomLabel();
     const linodePayload = createLinodeRequestFactory.build({
diff --git a/packages/manager/cypress/e2e/core/firewalls/update-firewall.spec.ts b/packages/manager/cypress/e2e/core/firewalls/update-firewall.spec.ts
index d67ac52fd3a..7269f369631 100644
--- a/packages/manager/cypress/e2e/core/firewalls/update-firewall.spec.ts
+++ b/packages/manager/cypress/e2e/core/firewalls/update-firewall.spec.ts
@@ -170,6 +170,9 @@ describe('update firewall', () => {
   before(() => {
     cleanUp('firewalls');
   });
+  beforeEach(() => {
+    cy.tag('method:e2e');
+  });
 
   /*
    * - Confirms that a linode can be added and removed from a firewall.
diff --git a/packages/manager/cypress/e2e/core/general/account-activation.spec.ts b/packages/manager/cypress/e2e/core/general/account-activation.spec.ts
index c6ab1764182..1c5273e999b 100644
--- a/packages/manager/cypress/e2e/core/general/account-activation.spec.ts
+++ b/packages/manager/cypress/e2e/core/general/account-activation.spec.ts
@@ -1,5 +1,8 @@
 import { apiMatcher } from 'support/util/intercepts';
 
+beforeEach(() => {
+  cy.tag('method:e2e');
+});
 describe('account activation', () => {
   /**
    * The API will return 403 with the body below for most endpoint except `/v4/profile`.
diff --git a/packages/manager/cypress/e2e/core/general/smoke-deep-link.spec.ts b/packages/manager/cypress/e2e/core/general/smoke-deep-link.spec.ts
index bc9f2af2951..e11f5707ae6 100644
--- a/packages/manager/cypress/e2e/core/general/smoke-deep-link.spec.ts
+++ b/packages/manager/cypress/e2e/core/general/smoke-deep-link.spec.ts
@@ -1,7 +1,9 @@
 import { pages } from 'support/ui/constants';
-
 import type { Page } from 'support/ui/constants';
 
+beforeEach(() => {
+  cy.tag('method:e2e');
+});
 describe('smoke - deep links', () => {
   beforeEach(() => {
     cy.visitWithLogin('/null');
diff --git a/packages/manager/cypress/e2e/core/images/create-image.spec.ts b/packages/manager/cypress/e2e/core/images/create-image.spec.ts
index b118a4cad41..8ea89934bab 100644
--- a/packages/manager/cypress/e2e/core/images/create-image.spec.ts
+++ b/packages/manager/cypress/e2e/core/images/create-image.spec.ts
@@ -49,6 +49,7 @@ describe('create image (e2e)', () => {
   });
 
   it('create image from a linode', () => {
+    cy.tag('method:e2e');
     const label = randomLabel();
     const description = randomPhrase();
 
diff --git a/packages/manager/cypress/e2e/core/images/search-images.spec.ts b/packages/manager/cypress/e2e/core/images/search-images.spec.ts
index 9620a2312e7..8da716b8d33 100644
--- a/packages/manager/cypress/e2e/core/images/search-images.spec.ts
+++ b/packages/manager/cypress/e2e/core/images/search-images.spec.ts
@@ -13,6 +13,9 @@ describe('Search Images', () => {
   before(() => {
     cleanUp(['linodes', 'images']);
   });
+  beforeEach(() => {
+    cy.tag('method:e2e');
+  });
 
   /*
    * - Confirm that images are API searchable and filtered in the UI.
diff --git a/packages/manager/cypress/e2e/core/kubernetes/lke-create.spec.ts b/packages/manager/cypress/e2e/core/kubernetes/lke-create.spec.ts
index bff073133a9..f354607d4a0 100644
--- a/packages/manager/cypress/e2e/core/kubernetes/lke-create.spec.ts
+++ b/packages/manager/cypress/e2e/core/kubernetes/lke-create.spec.ts
@@ -81,6 +81,7 @@ describe('LKE Cluster Creation', () => {
    * - Confirms that correct information is shown on the LKE cluster summary page
    */
   it('can create an LKE cluster', () => {
+    cy.tag('method:e2e', 'purpose:dcTesting');
     const clusterLabel = randomLabel();
     const clusterRegion = chooseRegion();
     const clusterVersion = '1.27';
diff --git a/packages/manager/cypress/e2e/core/linodes/backup-linode.spec.ts b/packages/manager/cypress/e2e/core/linodes/backup-linode.spec.ts
index f973a37651d..54eaf02e5b6 100644
--- a/packages/manager/cypress/e2e/core/linodes/backup-linode.spec.ts
+++ b/packages/manager/cypress/e2e/core/linodes/backup-linode.spec.ts
@@ -41,6 +41,7 @@ describe('linode backups', () => {
    * - Confirms that Linode details page updates to reflect that backups are enabled.
    */
   it('can enable backups', () => {
+    cy.tag('method:e2e');
     // Skip or optionally fail if test account has Managed enabled.
     // This is necessary because Managed accounts have backups enabled implicitly.
     expectManagedDisabled();
@@ -107,6 +108,7 @@ describe('linode backups', () => {
    * - Confirms that backups page content updates to reflect new snapshot.
    */
   it('can capture a manual snapshot', () => {
+    cy.tag('method:e2e');
     // Create a Linode that is not booted and which has backups enabled.
     const createLinodeRequest = createLinodeRequestFactory.build({
       label: randomLabel(),
diff --git a/packages/manager/cypress/e2e/core/linodes/clone-linode.spec.ts b/packages/manager/cypress/e2e/core/linodes/clone-linode.spec.ts
index c64e43abba6..55a1ce53a76 100644
--- a/packages/manager/cypress/e2e/core/linodes/clone-linode.spec.ts
+++ b/packages/manager/cypress/e2e/core/linodes/clone-linode.spec.ts
@@ -47,6 +47,7 @@ describe('clone linode', () => {
    * - Confirms that Linode can be cloned successfully.
    */
   it('can clone a Linode from Linode details page', () => {
+    cy.tag('method:e2e', 'purpose:dcTesting');
     const linodeRegion = chooseRegion({ capabilities: ['Vlans'] });
     const linodePayload = createLinodeRequestFactory.build({
       label: randomLabel(),
diff --git a/packages/manager/cypress/e2e/core/linodes/linode-config.spec.ts b/packages/manager/cypress/e2e/core/linodes/linode-config.spec.ts
index 2e73ca80de0..68ec28b9701 100644
--- a/packages/manager/cypress/e2e/core/linodes/linode-config.spec.ts
+++ b/packages/manager/cypress/e2e/core/linodes/linode-config.spec.ts
@@ -91,6 +91,9 @@ describe('Linode Config management', () => {
         }
       );
     });
+    beforeEach(() => {
+      cy.tag('method:e2e');
+    });
 
     /*
      * - Tests Linode config creation end-to-end using real API requests.
diff --git a/packages/manager/cypress/e2e/core/linodes/linode-storage.spec.ts b/packages/manager/cypress/e2e/core/linodes/linode-storage.spec.ts
index 0e256bbbb41..9403d258e72 100644
--- a/packages/manager/cypress/e2e/core/linodes/linode-storage.spec.ts
+++ b/packages/manager/cypress/e2e/core/linodes/linode-storage.spec.ts
@@ -5,7 +5,11 @@ import { createTestLinode } from 'support/util/linodes';
 import { containsVisible, fbtClick, fbtVisible } from 'support/helpers';
 import { ui } from 'support/ui';
 import { cleanUp } from 'support/util/cleanup';
-import { apiMatcher } from 'support/util/intercepts';
+import {
+  interceptDeleteDisks,
+  interceptAddDisks,
+  interceptResizeDisks,
+} from 'support/intercepts/linodes';
 
 // 3 minutes.
 const LINODE_PROVISION_TIMEOUT = 180_000;
@@ -97,6 +101,9 @@ const addDisk = (diskName: string) => {
 };
 
 authenticate();
+beforeEach(() => {
+  cy.tag('method:e2e');
+});
 describe('linode storage tab', () => {
   before(() => {
     cleanUp(['linodes', 'lke-clusters']);
@@ -105,10 +112,7 @@ describe('linode storage tab', () => {
   it('try to delete in use disk', () => {
     const diskName = 'Debian 11 Disk';
     cy.defer(() => createTestLinode({ booted: true })).then((linode) => {
-      cy.intercept(
-        'DELETE',
-        apiMatcher(`linode/instances/${linode.id}/disks/*`)
-      ).as('deleteDisk');
+      interceptDeleteDisks(linode.id).as('deleteDisk');
       cy.visitWithLogin(`linodes/${linode.id}/storage`);
       containsVisible('RUNNING');
       fbtVisible(diskName);
@@ -128,14 +132,8 @@ describe('linode storage tab', () => {
   it('delete disk', () => {
     const diskName = 'cy-test-disk';
     cy.defer(() => createTestLinode({ image: null })).then((linode) => {
-      cy.intercept(
-        'DELETE',
-        apiMatcher(`linode/instances/${linode.id}/disks/*`)
-      ).as('deleteDisk');
-      cy.intercept(
-        'POST',
-        apiMatcher(`linode/instances/${linode.id}/disks`)
-      ).as('addDisk');
+      interceptDeleteDisks(linode.id).as('deleteDisk');
+      interceptAddDisks(linode.id).as('addDisk');
       cy.visitWithLogin(`/linodes/${linode.id}/storage`);
       addDisk(diskName);
       fbtVisible(diskName);
@@ -160,10 +158,7 @@ describe('linode storage tab', () => {
   it('add a disk', () => {
     const diskName = 'cy-test-disk';
     cy.defer(() => createTestLinode({ image: null })).then((linode: Linode) => {
-      cy.intercept(
-        'POST',
-        apiMatcher(`/linode/instances/${linode.id}/disks`)
-      ).as('addDisk');
+      interceptAddDisks(linode.id).as('addDisk');
       cy.visitWithLogin(`/linodes/${linode.id}/storage`);
       addDisk(diskName);
       fbtVisible(diskName);
@@ -174,14 +169,8 @@ describe('linode storage tab', () => {
   it('resize disk', () => {
     const diskName = 'Debian 10 Disk';
     cy.defer(() => createTestLinode({ image: null })).then((linode: Linode) => {
-      cy.intercept(
-        'POST',
-        apiMatcher(`linode/instances/${linode.id}/disks`)
-      ).as('addDisk');
-      cy.intercept(
-        'POST',
-        apiMatcher(`linode/instances/${linode.id}/disks/*/resize`)
-      ).as('resizeDisk');
+      interceptAddDisks(linode.id).as('addDisk');
+      interceptResizeDisks(linode.id).as('resizeDisk');
       cy.visitWithLogin(`/linodes/${linode.id}/storage`);
       addDisk(diskName);
       fbtVisible(diskName);
diff --git a/packages/manager/cypress/e2e/core/linodes/rebuild-linode.spec.ts b/packages/manager/cypress/e2e/core/linodes/rebuild-linode.spec.ts
index 2c2c98ce89b..dd0314af1b0 100644
--- a/packages/manager/cypress/e2e/core/linodes/rebuild-linode.spec.ts
+++ b/packages/manager/cypress/e2e/core/linodes/rebuild-linode.spec.ts
@@ -110,6 +110,7 @@ describe('rebuild linode', () => {
    * - Confirms that password complexity
    */
   it('rebuilds a linode from Image', () => {
+    cy.tag('method:e2e');
     const weakPassword = 'abc123';
     const fairPassword = 'Akamai123';
 
@@ -164,6 +165,7 @@ describe('rebuild linode', () => {
    * - Confirms that a Linode can be rebuilt using a Community StackScript.
    */
   it('rebuilds a linode from Community StackScript', () => {
+    cy.tag('method:e2e');
     const stackScriptId = '443929';
     const stackScriptName = 'OpenLiteSpeed-WordPress';
     const image = 'AlmaLinux 9';
@@ -226,6 +228,7 @@ describe('rebuild linode', () => {
    * - Confirms that a Linode can be rebuilt using an Account StackScript.
    */
   it('rebuilds a linode from Account StackScript', () => {
+    cy.tag('method:e2e');
     const image = 'Alpine';
     const region = 'us-east';
 
diff --git a/packages/manager/cypress/e2e/core/linodes/rescue-linode.spec.ts b/packages/manager/cypress/e2e/core/linodes/rescue-linode.spec.ts
index 533eac2535f..07e1c262ff0 100644
--- a/packages/manager/cypress/e2e/core/linodes/rescue-linode.spec.ts
+++ b/packages/manager/cypress/e2e/core/linodes/rescue-linode.spec.ts
@@ -38,6 +38,7 @@ describe('Rescue Linodes', () => {
    * - Confirms that toast appears confirming successful reboot into rescue mode.
    */
   it('Can reboot a Linode into rescue mode', () => {
+    cy.tag('method:e2e');
     const linodePayload = createLinodeRequestFactory.build({
       label: randomLabel(),
       region: chooseRegion().id,
diff --git a/packages/manager/cypress/e2e/core/linodes/resize-linode.spec.ts b/packages/manager/cypress/e2e/core/linodes/resize-linode.spec.ts
index 02e2cfc7e17..d3ab5c2bd09 100644
--- a/packages/manager/cypress/e2e/core/linodes/resize-linode.spec.ts
+++ b/packages/manager/cypress/e2e/core/linodes/resize-linode.spec.ts
@@ -9,6 +9,7 @@ authenticate();
 describe('resize linode', () => {
   beforeEach(() => {
     cleanUp(['linodes']);
+    cy.tag('method:e2e');
   });
 
   it('resizes a linode by increasing size: warm migration', () => {
diff --git a/packages/manager/cypress/e2e/core/linodes/smoke-delete-linode.spec.ts b/packages/manager/cypress/e2e/core/linodes/smoke-delete-linode.spec.ts
index 13ad0efaf4b..5520041418f 100644
--- a/packages/manager/cypress/e2e/core/linodes/smoke-delete-linode.spec.ts
+++ b/packages/manager/cypress/e2e/core/linodes/smoke-delete-linode.spec.ts
@@ -67,6 +67,9 @@ describe('delete linode', () => {
   before(() => {
     cleanUp(['linodes', 'lke-clusters']);
   });
+  beforeEach(() => {
+    cy.tag('method:e2e');
+  });
 
   it('deletes linode from linode details page', () => {
     const linodeCreatePayload = createLinodeRequestFactory.build({
diff --git a/packages/manager/cypress/e2e/core/linodes/switch-linode-state.spec.ts b/packages/manager/cypress/e2e/core/linodes/switch-linode-state.spec.ts
index 7375e3e1e27..c0e03a30ea6 100644
--- a/packages/manager/cypress/e2e/core/linodes/switch-linode-state.spec.ts
+++ b/packages/manager/cypress/e2e/core/linodes/switch-linode-state.spec.ts
@@ -8,6 +8,7 @@ authenticate();
 describe('switch linode state', () => {
   beforeEach(() => {
     cleanUp(['linodes']);
+    cy.tag('method:e2e');
   });
 
   /*
diff --git a/packages/manager/cypress/e2e/core/linodes/update-linode-labels.spec.ts b/packages/manager/cypress/e2e/core/linodes/update-linode-labels.spec.ts
index 4e87aa948a2..08c14da2a33 100644
--- a/packages/manager/cypress/e2e/core/linodes/update-linode-labels.spec.ts
+++ b/packages/manager/cypress/e2e/core/linodes/update-linode-labels.spec.ts
@@ -8,6 +8,7 @@ authenticate();
 describe('update linode label', () => {
   beforeEach(() => {
     cleanUp(['linodes']);
+    cy.tag('method:e2e');
   });
 
   it('updates a linode label from details page', () => {
diff --git a/packages/manager/cypress/e2e/core/nodebalancers/smoke-create-nodebal.spec.ts b/packages/manager/cypress/e2e/core/nodebalancers/smoke-create-nodebal.spec.ts
index 3155ecc1d53..63c1e8080cf 100644
--- a/packages/manager/cypress/e2e/core/nodebalancers/smoke-create-nodebal.spec.ts
+++ b/packages/manager/cypress/e2e/core/nodebalancers/smoke-create-nodebal.spec.ts
@@ -78,6 +78,9 @@ const createNodeBalancerWithUI = (
 };
 
 authenticate();
+beforeEach(() => {
+  cy.tag('method:e2e', 'purpose:dcTesting');
+});
 describe('create NodeBalancer', () => {
   before(() => {
     cleanUp(['tags', 'node-balancers', 'linodes']);
diff --git a/packages/manager/cypress/e2e/core/objectStorage/access-key.e2e.spec.ts b/packages/manager/cypress/e2e/core/objectStorage/access-key.e2e.spec.ts
index 85688840e98..17fda30faa9 100644
--- a/packages/manager/cypress/e2e/core/objectStorage/access-key.e2e.spec.ts
+++ b/packages/manager/cypress/e2e/core/objectStorage/access-key.e2e.spec.ts
@@ -21,6 +21,9 @@ describe('object storage access key end-to-end tests', () => {
   before(() => {
     cleanUp(['obj-buckets', 'obj-access-keys']);
   });
+  beforeEach(() => {
+    cy.tag('method:e2e');
+  });
 
   /*
    * - Creates an access key with unlimited access
diff --git a/packages/manager/cypress/e2e/core/objectStorage/object-storage.e2e.spec.ts b/packages/manager/cypress/e2e/core/objectStorage/object-storage.e2e.spec.ts
index 1c17e3e7596..8599f4a1621 100644
--- a/packages/manager/cypress/e2e/core/objectStorage/object-storage.e2e.spec.ts
+++ b/packages/manager/cypress/e2e/core/objectStorage/object-storage.e2e.spec.ts
@@ -155,6 +155,9 @@ const assertStatusForUrlAtAlias = (
 };
 
 authenticate();
+beforeEach(() => {
+  cy.tag('method:e2e');
+});
 describe('object storage end-to-end tests', () => {
   before(() => {
     cleanUp('obj-buckets');
diff --git a/packages/manager/cypress/e2e/core/oneClickApps/one-click-apps.spec.ts b/packages/manager/cypress/e2e/core/oneClickApps/one-click-apps.spec.ts
index f453f6b7153..a6961e86709 100644
--- a/packages/manager/cypress/e2e/core/oneClickApps/one-click-apps.spec.ts
+++ b/packages/manager/cypress/e2e/core/oneClickApps/one-click-apps.spec.ts
@@ -23,6 +23,7 @@ import { mockGetAllImages } from 'support/intercepts/images';
 
 describe('OneClick Apps (OCA)', () => {
   it('Lists all the OneClick Apps', () => {
+    cy.tag('method:e2e');
     interceptGetStackScripts().as('getStackScripts');
 
     cy.visitWithLogin(`/linodes/create?type=One-Click`);
diff --git a/packages/manager/cypress/e2e/core/stackscripts/create-stackscripts.spec.ts b/packages/manager/cypress/e2e/core/stackscripts/create-stackscripts.spec.ts
index 7619780800d..c2fa9e65557 100644
--- a/packages/manager/cypress/e2e/core/stackscripts/create-stackscripts.spec.ts
+++ b/packages/manager/cypress/e2e/core/stackscripts/create-stackscripts.spec.ts
@@ -172,6 +172,9 @@ describe('Create stackscripts', () => {
   before(() => {
     cleanUp(['linodes', 'images', 'stackscripts']);
   });
+  beforeEach(() => {
+    cy.tag('method:e2e', 'purpose:dcTesting');
+  });
 
   /*
    * - Creates a StackScript with user-defined fields.
diff --git a/packages/manager/cypress/e2e/core/stackscripts/smoke-community-stackscripts.spec.ts b/packages/manager/cypress/e2e/core/stackscripts/smoke-community-stackscripts.spec.ts
index 43ae5fa6dc0..26453578d7b 100644
--- a/packages/manager/cypress/e2e/core/stackscripts/smoke-community-stackscripts.spec.ts
+++ b/packages/manager/cypress/e2e/core/stackscripts/smoke-community-stackscripts.spec.ts
@@ -190,6 +190,7 @@ describe('Community Stackscripts integration tests', () => {
    * - Confirms that pagination works as expected.
    */
   it('pagination works with infinite scrolling', () => {
+    cy.tag('method:e2e');
     interceptGetStackScripts().as('getStackScripts');
 
     // Fetch all public Images to later use while filtering StackScripts.
@@ -263,6 +264,7 @@ describe('Community Stackscripts integration tests', () => {
    * - Confirms that search can filter the expected results.
    */
   it('search function filters results correctly', () => {
+    cy.tag('method:e2e');
     const stackScript = mockStackScripts[0];
 
     interceptGetStackScripts().as('getStackScripts');
diff --git a/packages/manager/cypress/e2e/core/volumes/attach-volume.spec.ts b/packages/manager/cypress/e2e/core/volumes/attach-volume.spec.ts
index 76c2ec63a0f..41c53259a98 100644
--- a/packages/manager/cypress/e2e/core/volumes/attach-volume.spec.ts
+++ b/packages/manager/cypress/e2e/core/volumes/attach-volume.spec.ts
@@ -50,6 +50,9 @@ describe('volume attach and detach flows', () => {
   before(() => {
     cleanUp(['volumes', 'linodes']);
   });
+  beforeEach(() => {
+    cy.tag('method:e2e');
+  });
 
   /*
    * - Clicks "Attach" action menu item for volume, selects Linode with common region, and submits form.
diff --git a/packages/manager/cypress/e2e/core/volumes/clone-volume.spec.ts b/packages/manager/cypress/e2e/core/volumes/clone-volume.spec.ts
index f589c9b979b..e65a582243b 100644
--- a/packages/manager/cypress/e2e/core/volumes/clone-volume.spec.ts
+++ b/packages/manager/cypress/e2e/core/volumes/clone-volume.spec.ts
@@ -35,6 +35,9 @@ describe('volume clone flow', () => {
   before(() => {
     cleanUp('volumes');
   });
+  beforeEach(() => {
+    cy.tag('method:e2e');
+  });
 
   /*
    * - Clicks "Clone" action menu item for volume, enters new label, and submits form.
diff --git a/packages/manager/cypress/e2e/core/volumes/create-volume.spec.ts b/packages/manager/cypress/e2e/core/volumes/create-volume.spec.ts
index ff4d3deb0dd..eea86e8d44e 100644
--- a/packages/manager/cypress/e2e/core/volumes/create-volume.spec.ts
+++ b/packages/manager/cypress/e2e/core/volumes/create-volume.spec.ts
@@ -53,7 +53,7 @@ describe('volume create flow', () => {
    * - Confirms that volume is listed correctly on volumes landing page.
    */
   it('creates an unattached volume', () => {
-    cy.tag('purpose:syntheticTesting');
+    cy.tag('purpose:syntheticTesting', 'method:e2e', 'purpose:dcTesting');
 
     const region = chooseRegion();
     const volume = {
@@ -98,6 +98,7 @@ describe('volume create flow', () => {
    * - Confirms that volume is listed correctly on Linode 'Storage' details page.
    */
   it('creates an attached volume', () => {
+    cy.tag('method:e2e', 'purpose:dcTesting');
     const region = chooseRegion();
 
     const linodeRequest = createLinodeRequestFactory.build({
@@ -352,6 +353,7 @@ describe('volume create flow', () => {
    * - Confirms that volume is listed correctly on Volumes landing page.
    */
   it('creates a volume from an existing Linode', () => {
+    cy.tag('method:e2e');
     const linodeRequest = createLinodeRequestFactory.build({
       label: randomLabel(),
       root_pass: randomString(16),
diff --git a/packages/manager/cypress/e2e/core/volumes/delete-volume.spec.ts b/packages/manager/cypress/e2e/core/volumes/delete-volume.spec.ts
index 7897d0c7f2c..6828618fb70 100644
--- a/packages/manager/cypress/e2e/core/volumes/delete-volume.spec.ts
+++ b/packages/manager/cypress/e2e/core/volumes/delete-volume.spec.ts
@@ -20,6 +20,9 @@ describe('volume delete flow', () => {
   before(() => {
     cleanUp('volumes');
   });
+  beforeEach(() => {
+    cy.tag('method:e2e');
+  });
 
   /*
    * - Clicks "Delete" action menu item for volume but cancels operation.
diff --git a/packages/manager/cypress/e2e/core/volumes/resize-volume.spec.ts b/packages/manager/cypress/e2e/core/volumes/resize-volume.spec.ts
index f1ef8a5ddb7..74b9955ea76 100644
--- a/packages/manager/cypress/e2e/core/volumes/resize-volume.spec.ts
+++ b/packages/manager/cypress/e2e/core/volumes/resize-volume.spec.ts
@@ -35,6 +35,9 @@ describe('volume resize flow', () => {
   before(() => {
     cleanUp('volumes');
   });
+  beforeEach(() => {
+    cy.tag('method:e2e');
+  });
 
   /*
    * - Clicks "Resize" action menu item for volume, enters new size, and submits form.
diff --git a/packages/manager/cypress/e2e/core/volumes/search-volumes.spec.ts b/packages/manager/cypress/e2e/core/volumes/search-volumes.spec.ts
index e6fc05b38b0..4b95b1a407f 100644
--- a/packages/manager/cypress/e2e/core/volumes/search-volumes.spec.ts
+++ b/packages/manager/cypress/e2e/core/volumes/search-volumes.spec.ts
@@ -1,7 +1,6 @@
 import { createVolume } from '@linode/api-v4/lib/volumes';
 import { Volume } from '@linode/api-v4';
 import { ui } from 'support/ui';
-
 import { authenticate } from 'support/api/authentication';
 import { randomLabel } from 'support/util/random';
 import { cleanUp } from 'support/util/cleanup';
@@ -11,6 +10,9 @@ describe('Search Volumes', () => {
   before(() => {
     cleanUp(['volumes']);
   });
+  beforeEach(() => {
+    cy.tag('method:e2e');
+  });
 
   /*
    * - Confirm that volumes are API searchable and filtered in the UI.
diff --git a/packages/manager/cypress/e2e/core/volumes/update-volume.spec.ts b/packages/manager/cypress/e2e/core/volumes/update-volume.spec.ts
index e5a3d9f5de0..70f4840bbad 100644
--- a/packages/manager/cypress/e2e/core/volumes/update-volume.spec.ts
+++ b/packages/manager/cypress/e2e/core/volumes/update-volume.spec.ts
@@ -11,6 +11,9 @@ describe('volume update flow', () => {
   before(() => {
     cleanUp(['tags', 'volumes']);
   });
+  beforeEach(() => {
+    cy.tag('method:e2e');
+  });
 
   /*
    * - Confirms that volume label and tags can be changed from the Volumes landing page.
diff --git a/packages/manager/cypress/support/intercepts/linodes.ts b/packages/manager/cypress/support/intercepts/linodes.ts
index 00b2e4c3f1b..2a665ac49bc 100644
--- a/packages/manager/cypress/support/intercepts/linodes.ts
+++ b/packages/manager/cypress/support/intercepts/linodes.ts
@@ -295,6 +295,51 @@ export const mockGetLinodeDisks = (
   );
 };
 
+/**
+ * Intercepts DELETE request to delete a Linode's Disks
+ *
+ * @param linodeId - ID of Linode for intercepted request.
+ *
+ * @returns Cypress chainable.
+ */
+export const interceptDeleteDisks = (
+  linodeId: number
+): Cypress.Chainable<null> => {
+  return cy.intercept(
+    'DELETE',
+    apiMatcher(`linode/instances/${linodeId}/disks/*`)
+  );
+};
+
+/**
+ * Intercepts POST request to add a Linode's Disks
+ *
+ * @param linodeId - ID of Linode for intercepted request.
+ *
+ * @returns Cypress chainable.
+ */
+export const interceptAddDisks = (
+  linodeId: number
+): Cypress.Chainable<null> => {
+  return cy.intercept('POST', apiMatcher(`linode/instances/${linodeId}/disks`));
+};
+
+/**
+ * Intercepts POST request to resize a Linode's Disks
+ *
+ * @param linodeId - ID of Linode for intercepted request.
+ *
+ * @returns Cypress chainable.
+ */
+export const interceptResizeDisks = (
+  linodeId: number
+): Cypress.Chainable<null> => {
+  return cy.intercept(
+    'POST',
+    apiMatcher(`linode/instances/${linodeId}/disks/*/resize`)
+  );
+};
+
 /**
  * Intercepts DELETE request to delete linode and mocks response.
  *

From a85f327837534c1a28ad73465ae22ad17fff839e Mon Sep 17 00:00:00 2001
From: Dajahi Wiley <114682940+dwiley-akamai@users.noreply.github.com>
Date: Fri, 13 Sep 2024 10:09:32 -0400
Subject: [PATCH 05/62] =?UTF-8?q?upcoming:=20[M3-8576]=20=E2=80=93=20Fix?=
 =?UTF-8?q?=20"Create=20Volume"=20button=20state=20when=20"Encrypt=20Volum?=
 =?UTF-8?q?e"=20checkbox=20is=20checked=20(#10929)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...r-10929-upcoming-features-1726156754302.md |  5 ++++
 .../e2e/core/volumes/create-volume.spec.ts    | 27 ++++++++++++++++---
 .../src/features/Volumes/VolumeCreate.tsx     |  5 ++--
 3 files changed, 31 insertions(+), 6 deletions(-)
 create mode 100644 packages/manager/.changeset/pr-10929-upcoming-features-1726156754302.md

diff --git a/packages/manager/.changeset/pr-10929-upcoming-features-1726156754302.md b/packages/manager/.changeset/pr-10929-upcoming-features-1726156754302.md
new file mode 100644
index 00000000000..70e24c98b29
--- /dev/null
+++ b/packages/manager/.changeset/pr-10929-upcoming-features-1726156754302.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Fix 'Create Volume' button state on Volume Create page when 'Encrypt Volume' checkbox is checked ([#10929](https://github.com/linode/manager/pull/10929))
diff --git a/packages/manager/cypress/e2e/core/volumes/create-volume.spec.ts b/packages/manager/cypress/e2e/core/volumes/create-volume.spec.ts
index eea86e8d44e..ceac6fc7cf1 100644
--- a/packages/manager/cypress/e2e/core/volumes/create-volume.spec.ts
+++ b/packages/manager/cypress/e2e/core/volumes/create-volume.spec.ts
@@ -220,8 +220,12 @@ describe('volume create flow', () => {
         cy.get('[data-qa-checked]').should('be.visible').click();
         // });
 
-        // Ensure warning notice is displayed
+        // Ensure warning notice is displayed and "Create Volume" button is disabled
         cy.findByText(CLIENT_LIBRARY_UPDATE_COPY).should('be.visible');
+        ui.button
+          .findByTitle('Create Volume')
+          .should('be.visible')
+          .should('be.disabled');
       }
     );
   });
@@ -274,15 +278,19 @@ describe('volume create flow', () => {
     cy.get('[data-qa-checked]').should('be.visible').click();
     // });
 
-    // Ensure warning notice is not displayed
+    // Ensure warning notice is not displayed and "Create Volume" button is enabled
     cy.findByText(CLIENT_LIBRARY_UPDATE_COPY).should('not.exist');
+    ui.button
+      .findByTitle('Create Volume')
+      .should('be.visible')
+      .should('be.enabled');
   });
 
   /*
    * - Checks for Block Storage Encryption client library update notice in the Create/Attach Volume drawer from the
        'Storage' details page of an existing Linode.
    */
-  it('displays a warning notice re: rebooting for client library updates under the appropriate conditions', () => {
+  it('displays a warning notice re: rebooting for client library updates under the appropriate conditions in Create/Attach Volume drawer', () => {
     // Conditions: Block Storage encryption feature flag is on; user has Block Storage Encryption capability; Linode does not support Block Storage Encryption and the user is trying to attach an encrypted volume
 
     // Mock feature flag -- @TODO BSE: Remove feature flag once BSE is fully rolled out
@@ -321,18 +329,25 @@ describe('volume create flow', () => {
         // Click "Add Volume" button
         cy.findByText('Add Volume').click();
 
+        // Check "Encrypt Volume" checkbox
         cy.get('[data-qa-drawer="true"]').within(() => {
           cy.get('[data-qa-checked]').should('be.visible').click();
         });
 
+        // Ensure client library update notice is displayed and the "Create Volume" button is disabled
         cy.findByText(CLIENT_LIBRARY_UPDATE_COPY).should('be.visible');
+        ui.button.findByTitle('Create Volume').should('be.disabled');
 
         // Ensure notice is cleared when switching views in drawer
         cy.get('[data-qa-radio="Attach Existing Volume"]').click();
         cy.wait(['@getVolumes']);
         cy.findByText(CLIENT_LIBRARY_UPDATE_COPY).should('not.exist');
+        ui.button
+          .findByTitle('Attach Volume')
+          .should('be.visible')
+          .should('be.enabled');
 
-        // Ensure notice is displayed in "Attach Existing Volume" view when an encrypted volume is selected
+        // Ensure notice is displayed in "Attach Existing Volume" view when an encrypted volume is selected, & that the "Attach Volume" button is disabled
         cy.findByPlaceholderText('Select a Volume')
           .should('be.visible')
           .click()
@@ -343,6 +358,10 @@ describe('volume create flow', () => {
           .click();
 
         cy.findByText(CLIENT_LIBRARY_UPDATE_COPY).should('be.visible');
+        ui.button
+          .findByTitle('Attach Volume')
+          .should('be.visible')
+          .should('be.disabled');
       }
     );
   });
diff --git a/packages/manager/src/features/Volumes/VolumeCreate.tsx b/packages/manager/src/features/Volumes/VolumeCreate.tsx
index aadec8974d9..a9c9ec96df3 100644
--- a/packages/manager/src/features/Volumes/VolumeCreate.tsx
+++ b/packages/manager/src/features/Volumes/VolumeCreate.tsx
@@ -297,7 +297,7 @@ export const VolumeCreate = () => {
 
   const shouldDisplayClientLibraryCopy =
     isBlockStorageEncryptionFeatureEnabled &&
-    values.linode_id !== null &&
+    linode_id !== null &&
     !linodeSupportsBlockStorageEncryption;
 
   return (
@@ -502,7 +502,8 @@ export const VolumeCreate = () => {
             <Button
               disabled={
                 disabled ||
-                (isBlockStorageEncryptionFeatureEnabled &&
+                (isBlockStorageEncryptionFeatureEnabled && // @TODO BSE: Once BSE is fully rolled out, remove feature enabled check/condition
+                  linode_id !== null &&
                   !linodeSupportsBlockStorageEncryption &&
                   values.encryption === 'enabled')
               }

From 8a540c3a6e316beb854f20e64a65a51d3321c40e Mon Sep 17 00:00:00 2001
From: jdamore-linode <97627410+jdamore-linode@users.noreply.github.com>
Date: Fri, 13 Sep 2024 10:20:27 -0400
Subject: [PATCH 06/62] Remove committed Cypress screenshots, simplify
 .gitignore rules (#10932)

---
 .gitignore                                       |   9 ++-------
 .../record-Docs-View-1440-900.png                | Bin 2890 -> 0 bytes
 .../record-Running-Total-1440-900.png            | Bin 3053 -> 0 bytes
 .../record-linode-offline-1440-900.png           | Bin 2883 -> 0 bytes
 .../record-linode-running-1440-900.png           | Bin 3297 -> 0 bytes
 5 files changed, 2 insertions(+), 7 deletions(-)
 delete mode 100644 packages/manager/cypress/screenshots/smoke-visual-icons.spec.ts/record-Docs-View-1440-900.png
 delete mode 100644 packages/manager/cypress/screenshots/smoke-visual-icons.spec.ts/record-Running-Total-1440-900.png
 delete mode 100644 packages/manager/cypress/screenshots/smoke-visual-icons.spec.ts/record-linode-offline-1440-900.png
 delete mode 100644 packages/manager/cypress/screenshots/smoke-visual-icons.spec.ts/record-linode-running-1440-900.png

diff --git a/.gitignore b/.gitignore
index 734136b05e8..9b96da463da 100644
--- a/.gitignore
+++ b/.gitignore
@@ -127,12 +127,7 @@ packages/manager/test-report.xml
 **/manager/cypress/videos/
 **/manager/cypress/downloads/
 **/manager/cypress/results/
-
-# ignore all screenshots except records
-# we ignore the png files, not the whole folder recursively
-# or the record files are ignored too
-**/manager/cypress/screenshots/**/*.png
-!**/manager/cypress/screenshots/**/record*.png
+**/manager/cypress/screenshots/
 
 packages/manager/cypress/fixtures/example.json
 
@@ -142,4 +137,4 @@ packages/manager/bundle_analyzer_report.html
 **/manager/src/dev-tools/*.local.*
 
 # vitepress
-docs/.vitepress/cache
\ No newline at end of file
+docs/.vitepress/cache
diff --git a/packages/manager/cypress/screenshots/smoke-visual-icons.spec.ts/record-Docs-View-1440-900.png b/packages/manager/cypress/screenshots/smoke-visual-icons.spec.ts/record-Docs-View-1440-900.png
deleted file mode 100644
index 4b9d2ca3b2bda30fad7d4fc1e5835b6e736ec3aa..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 2890
zcmcguS6GwV5=D^%2LjRwMPfsd9(t(KRJs&_NbgFAPz6Csz=S4ES^`D{6fqbODWXWE
zNbe=|5Fqrb6lwQA-@T9b@qYJV@BOg9nc1^uX6=Q#Z*-TLk&lsvhK5=9p0+7)5`g8v
z@E5R~>Sq|!&@i#-YHOH>o?CAUOUm4T`kmZ+yoe1CcHeVw<KYf=w5mYWC83~~pWlKy
zbXMAs{MnJk>@D5`6Q&EF7Yj?uip#hz$f;hZjQdkOidxw!(;eo(G3){Y>>~?Occn(9
z!<*Ki;UGleu;;Sjs3(hW<$BMTh{87Z)HZ#=RQfAjdROAwZ^cQ$kgPXKS&8$UnmHIv
zh72<X#{kAF21ftm%R%95+kt72&v#+Nxh`dN5q!N~Z`)SQpYN2I+_4)U>?Yx_FU*Sh
z{nEr-`d}Cr!=imSAk1-7nFF(~_xh+KkFR7rbs|C64ejO2R8>@sy5AQqY|Q8SsB@gg
z%sVJCm1lx@T}J0~4U*J9t}VQDI}?Je#og~~>KVCV!=fW?<`Qn5)A^KF`_SZhJ|o?w
zH7{@C!u@|+)J<k<Wb!ck>*HR<Vm}x*jB(${y;b>DyennohNcF+8TohN{`Lln&8NlD
z^1#;Od?deqzDoHc{N<%8sO{s-x}Wz_uJPbA?(yV+E{gA&QEQ-V|J~Es%s?GGDlpAj
z_e~<GWhd~L>p}OSVuj!m1@%DA%T9(if0!6pWU^=nW5t~~VcK^b6`Szlh6d)sOAhXy
z9Fm`rK>lmv6F)XewG4_&o?+>jeOmdA=IaIualVQPc&ixIMs&b@L=ul6wmk;!Q^Juf
zT~k>c6I%b>1x_+;-xTEx{8&|uqBag{xJSLr!2bPG{z;BVr>5QK6O$MDx>UVS_Vqm*
zCv0~(=$_Ccju-f`UT2it2r@#ggb8rvk19;oKh8`9u!k#pbB{>8b<r(Khzg^MG{PWv
zYr>--or@Ot$)*PMjL`MNNsH6HcG9P=09>LFQ^QV`rvVS6e_N=VGwTmYqc%l0BR}P3
z8x-Q}t!Wsv3pbN8AeU2Y<wP_kvAfr2tSQTP9YI=Z<uOIg>%UoCVF6?%^*;{Ji?ZiH
z%>hZJCX3TbO3nKhFTUvFJk+YYgl^lYZ~}TE<n@;o+j493b|6IG$^4kqzI<41+B8n=
z?9-+QwcaereNarLp&b2T_57F|Q_VnsA$h`gKLD2QsFG?%2zvS~A=?5vU3@QZivB8Q
z)d*^5Tb)dmAFlGk(_>$EVK)qbc)6f<gETYp^^nRVO*;@Io`X|AqT?IoM+Bvsr6;IV
zYG`z9E3AAe;E+9hA|Z6+H;d9AnaQr{Gr>8@Qwn4DHC|Aahj&*w0SCX5Cb8qIj@lY1
z@M&FH>fIvpI|2^+<c7xKYBO4hue9ABSEMs3zNhaKwHhz!09l`|5a2c|`cU{vMDT`7
zmFF6mefjE15p3mH9#r}zqv3dvL8;q=oNK5dc#MH$PsR8M7f`EX*`}4lu?0<HQD+tk
z6{n;KS<ynjW4##5y?tDj$k^Wf7tD$8{Yc_V=_K}}6de-cddJR-Y(ns9Z9)Vt&ai5$
z`zF7Y;EvPt(!_?RVjTcH^m(HFk27HvW`s}uu{i?F!$z%qx{L32C;GVbKORkaf=~T-
z1vVc0$yiidIv-J(YXwF__YWA-a00%UF3oqo_keQhZ;dxG#Akn#PH;u2CM|rn4)t&q
zw|@vvM4riEehv;7>g@Nit9NSIweBc!+1skd5;*5l<|?hX>N(>>%bt<9>P(0y@WB1<
zeLv&a{CrY_+h2KEsVB3Ru`atppv@>*J@+W?sewA5m)*bpWVqEHE1G<N(ZPKnCfi}7
zVmlvTpZAWFQE6L=YfwYp{%V1U)0QGveB$T;SYG_YoJHAJzRtz4$Bp2dSn+<DOjo<_
z(Hlk6vhjCcK7g_%SF^~9&NFRIlfb(%5`t$DauzLy02A1ThXWSwB2zPK3!4Rb-GP08
zrC6c$k3NoWr?(ZA2<4y$@*vfI+1>LjfvWwW_}pQZ8^p5N_6KqeVTyVLh6>1<b8ni)
z$h28|-WO50Vp}rOct9AD$ft_g&`a;&%w?2Fa55=MSblvouXVQ4n&HnH_({Ap*v)*r
z7R#F@51NXFgTDTNgM!rfIjX}9X_&b81W@Ucna_oo){Y!<o<cwzTb?SBQOv306?fnV
zId^iyopj`k%irEHNXZ~yk8d#)EJx1};NsvN<keTTSwQ)lO5jpsAGkpzO*REI>OS`)
zTjf{)1^=xfhE41xp~*s>QT24{Fzr(TH6G`-(Y(I$SF9mPJxyZtMoA81AK#z}Zlj7)
zzfu=#vC&q7KQIq(#>ex~#{;Z6W0`D80eT_qaGA9t%2~}AU#3y@un)Uxv>khmb_pmq
zA^c1ZEu^-0J25*eB#iexZX^YVkovJ6$m}B3g(o;adP{Jw9Vm2^9<n5j)k}O=kML%R
zH^b@%^11q)C0r9wk?S!3Gv@^1&pv>@55zY&o{16P`LSa=aiPIxsuXdbUt5c0;rg%Z
zT3%LbR5v0mZ%?35|FF3S;14=EIQ!S@rN~g(j*{X?F@qFj)zpx=hqiNA<srLLvh@Dy
z?kH>`%S9wi01eP$jv?U!B>2X`Xb65l0n@fsx=K3~D%WZ~zC=EClU(Pa0CYbV;+1oE
z^Sx68@Dx${tKfoDCmL6B$jgKVF$`tVz%m^e(eOyspJt+-ycJe4g#}<YyFP%)B|vFu
z0@Ymdz}T|ubMdB7`;jY{CE1S2QH3GG+ifM3LBYFO|3~FM?_LRD*Y&oiv`&%~(tjd~
zB@L;!U)p?&!_^Zzc2m1tS|TJBcBvPK{TnFKhnlGDnPk6P>2pm;HBAj3RA97z8t06%
z%56(vZiq0S5s5A6^r*tf_Hl@kaMo;c;YHSs-jB=EB6+JeZxD16Hu}4ZN3obqL$bff
zbSR!TRm-3J5Y6+Azof*JVmv~3Ks*nzXlc884Hmq<UTk%t*nwgS0f4il)@(PUJ(^3g
zn}+`16k6N~%XaD$BlP~toHeHQt`uu)zQd7eJNzAlfFi6TI-_XvXDpLw7*H?;Y025y
zeEYoan*HAas_^-~TyR29GuRmJ&>4G9g$3zz`DNR>IVfq7^t<T&@$Q6WF1aSHJqwIp
zfO^?N-qiIVjkFAugY)Sc+w{DV$>G!|R=~H|@GQ2s%(Wyjy9RkMO+J@mpE4+yBV;d(
z+pXtB&>9Ka+O+_~SeHeg_jN5&so9hM8fMvuEqMVNYK!je-QO7=miea-t)@(yUc<VN
zsW>&GI1cUj0Gq_cJ~-Fp)U4aY9~yBPTd-{0JC!el6n6m9sBS#`pN1U?I)@foLb(CC
zS99@kn5++vorcoZ_q#+#Tczk_XN~LecMzE$)N}T#+oVchMf>G)T30`rQfrFDBGB=y
zH8?S;(vcoW2lewD!aA3sw3}%ATf#@D2vmI%KyyV+G+7#|zVv#e6snj<JxZXz6;iF1
ze5k?WwDLIfZ-BfJ2oCSYwNl^fcVSF_yg%WYXM;qVhXAP-6v-cTGA0(6!|;C*hyT%>
b8&Nda3xv?#<B9WtMyAo#G1A6sI>h`7YlxPT

diff --git a/packages/manager/cypress/screenshots/smoke-visual-icons.spec.ts/record-Running-Total-1440-900.png b/packages/manager/cypress/screenshots/smoke-visual-icons.spec.ts/record-Running-Total-1440-900.png
deleted file mode 100644
index a6c99b9dea2ef1359be39c655c901087073bc67d..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 3053
zcmbVOc{r5)8Wv)Zj3s2rZm1zKm_`g^oiI$6iG&D~EfEuA`A7yCTXvBpgbyKYmXeUI
zLDooS>^?@8EF+w^^Ig}uu5-?R-ygr_dfw}OpZ9nF?&p5)I7^H%H>U_E6B83R+Qi@r
zu)YAsB@i1hQ<RfQOiWxa&<1+e_l~W$2K!kDM!jEO+Yc;zbeDi2&3g0s^H!Uj;GgA7
zH@)eh>-@)6Fo%g?q)5C?*^vEc#kZW2%N`zLd5RUP@z2?qPaG5YSWpm~4dTcGeaepZ
z%i8zk%YsRLI~X~f84fCeBRupe`=PRX9?z^DQN+J&+0PEQ>89>xN6Vs3Qln)f!OT*u
zoJwbh^-&pn*$L2|Uq~$s3Ir43wzocee%cT22NweYJ88@ErdZvQ4Qb}|?uY*%fL|)9
zi@)rxp@l)mt>YU+LMqx_3d_e)I8-VK1d^1M1xZv160B`T2Ynlggmb_oS@fi-O`y`M
z?Ya0ujyu4wR#q(Af3328VXt&YzbHkPgOFxpT@)J+>cqpQE53P_RJ;{LNA>I72XVrv
ziSrqPIoGOZo_<-1C7(9KDG73!_X!HjKLecz(XIx*Qc>ZRA`23S#TMxD)A7Ey3g65j
zFo?Xwv8>j+r1rtffj;8g+~i#b!v!W1d)iwb4o}YSAJo^#&8wOqVDC1uwoe=#NU$Ey
zSuA%olnc#>NG4v$W;RJkavkX{H{eO6`5wL`o}ZgbSI}tM(GVejY+hm9MG7gW74L3J
zj23^{oAz9wH>aiJXj`-VGj@-4BnVCW;TrLobs4ESsR_T&Iu(W#g+xRk9U}sjc&UYx
zlv*0!_JYKRF7L$IDow}I%D)qX+i%;}NCwZUIM~>XZqWC~;d}f0>x@dTI1tZVc;czd
z=g1>4#yvpxcJsRGPC(%b-xCSA0f4M+Wx7^e!ij})h`h=z+RQG#;k9W$i{{b5=Y3I~
zr;GPESgNX4*-9W5^@n*oV@-3nKh-6a2?z+Tf2-x+Qm_0eI4+8uw>4(ZcW#)HCeCzD
zE-x0GZ+LZWyiO@;=WqkpeeP_nebuD7kB_$2hR)o(k)ud28+9Ou`A=^1rp?ZGmX26-
zgsEAqN3Ux!I&1~Y$467iX7;lQZHhjB@=V90mutVGD@QAqyaEHcXJ_ZBihr*IxC*c3
zUCPgh=|)$`VmBTJmJoV4E*4i)a}sB6uCziy#x}mVt8dpXSBIQL5s6wXRHyvBj!#s5
zEL`kld}3x@;J&ihNp{S>4)PQKqYi#&*ffVmF8N(}THCvKFHaWhSvZ|Npu(KQm7N(w
zkoD+63C!j&mATX+EOjc`En8_~1Mk%si7MN?L0_>;K#QAO7H~ZHMlblYDD}QmSlb@g
z+~Qq?;O8gz8(+L$!Vm1s(#L?u@6lzOQtETqc#AYu%V@Bf*b}2LeHo`S3^s^e#$I_v
zOiCMxrl_POs1epgZm7gbqWQvZQKmv&TzX~Y<fl1^+w=VVuJVc(BJ&xHTvWBg0f(W1
zfpF!K`lBDuE#D5}S!H76R9&u0XVx4>*I<kn3&4|depc77YX>#5lob@{I$nPjgOwps
zInet2el|E<QdypsQ%4JhXK)liLsav2n}72u3!vP+C!4r?e%gk7aJl97eZh%#R!t@k
zNI{4An!vCr)Vrkj=9Iqhj0@$(=rih%HNzV-q%OGMwCmva{oX=8_oyoxVkVp!(<Sf+
z?R}<Gz;b86)`M)d(gFaqR(1)WcHdWOmhPXkqKW`^Nrb*Q)%XoVNO!83-CmtgkWa9X
z0kRwzPRo;x+Pa0*cKa%XIDmpiLoA-O4<`$&<xj7z8INqpfut;dt!0SAU>aYpsg-KC
zf8s?eC_BBmJe5xoR`{R5V)b$k!l8s5oNy?6FLum3=%m;sv-Nd8fm^OuK;m1Ve90bF
zK$UtU=$Q(Cj$FHW`&U-t#H*z$AvGa>KE4E+Nh=nhjf$mXuY;M1iAuc8abrb<BZ^=>
zIz&6GDxGlnbne*pF!i>gqIO)H)EAdpORH-XvZyB3AevO`eCU12hcVRU&=NvU9khZE
z4-M4@PAJ<#ubJHz<_@uSQ<~dZ^L_7LPfcrd<(YqGQp9dN@I8S|yRt50W1pbuTtDvD
z{jHWgz*=_TezBi%pt(3_9>&<uQj+k+<qgKe19BamDhb`<oh+O?7DNv{O^`<Oy)zN-
z+vHjR#Oodydc7$*=PSa~>#sWqtbgk3G2v331J-6<ejoQcj8K1n0&Qq~9KGEkHWlh4
z9@30FP?G=JOWWF;ouz*)udjc!LcZ9v_Z6`f5<%}A#gRVvzM}fU`|+^JF817){&U^x
zZ#OnK=bDf9#OdHm(St&leqWC;neB`~OA7)xUOR;%)K0h9vBCyFn970ckh>mr6ykk-
zZ&-Z}x@qSw2~<MIEPBQgrupi*qK8%;Gyr+O538^e#LjKrw*_fsfqDhAt^FDC@Ow*B
z48UW7VB+?jrHxZ`Ik*A{SLNd~X>o0WTOg$QOx|Y_9mK;Wr#2HT5Y%{|N7JXIp@Cb9
zwK=85S-Dof2>bXVG4j{>79$x}7OAjS2N#k-F+5<KdCw`7Yy_gqx%&xJFE5L{&V@k8
z5Oulip|qPt(rrr|tt@6WJCJ?>U6)X3wy9v@^9gb9&*OT=oj&vqvD1;2j2L;kVTPNC
zXfD>k(5RokT(LOoqAO?o$cTo{*yD#uNj%Mk!=6{)(2ge<vBV#+pTq)CL>ByCh<G8l
z*w5zPi>$_M04AUnY+M<+(vf6Z3}NMo<833U-uiG=0Fb!Qy7NyO<KpAr+hEssCQZ9|
z%9d7E3~nTHmX+o251YmCm>S$!8gxS-5Q|mG(~@-=9)Or&0ARN#4cRW6_<`+u)RJX6
z0NuGrq)YFl!eIHaKU4%fDA#96RvwGzqe!1>77pTnV{Oct=zr*PoRA9EWGx=}qiEMa
z5t-loDeo$@YGph(sWNS#Yby;Lb*d)=EGA~)B$}W0zUgB9k2ETpqc>NLi?D}pfc9Ml
zyoN&1Y*=^u#%0F+X{n-}9S?wd4s!s*Jev)10O`0EC>_HwD@kK-h!R3Q=WYR7G3+%Q
zy17dDMPEe@47%v0Y(MN2z8I>|%<Bw$?%&P@cnHQ<wJ%TP)#XlG1iLf7JS~--sootE
zb~ht(8hUw&Mlb?2CJ5mupw$I6ia&t%JbrhzwOoQSz;FMSI{CmKlh5Ea1SGgxXPm&~
zl*fai-Y7K7Rn2bEKm@ZUC5gAK^OwNwprc(A^+_eBf&;^^Yh4v|u-$Jq-4sqrD9-*!
zLD4&$`|I(C-VD@aGJa5~SBB83%&>PiLZ}D+92(W6ab%xf8X6k5a{3;t<$knr+IO<4
ztF~wj8@j*a`g`DEQT_dTW2-^X3|nsvQEj=!n2Kc)PR@r43ecj0=dlmnGXLEUqdrIj
zL3r4_*n!(X&4RP)@dCL0mUbEC@dC!S#-XELtyD64I^2jX){$FtBr0#k6y~<^v@;ua
z0~*#xp=8?FW$!YUf3PBvPPT4tw7)9b#C7bI04lF{zqN@bk!an%1WVkguB)q>MlLsQ
z{Z4IDT6$a~E00vM9wjHeCzedsOKEh~1k3>j2fP`u&`bM?8&#DLgi)!5fH#v?>Hi2Q
zFq9~j2ed9QA3z0S_`szrMoFktS;m!{2EqX4R7AM%q5iXdeNOR0{;R2b4;F+zyG@Q=
z08A6Aa<~YLQo&n-lH`+|S973_L^p1rtI?FZJe%b<ElL43is^7?W-$kZ(>j07503Zt
zG)iSniUzm|3c1{al#-B;=*99rJ97dB`p|}2;`)bf^}h`6ZzC)jty?_sBO=3hQ%1;Y
RehIMgOlU)lK{d)b>R%CmyMzD$

diff --git a/packages/manager/cypress/screenshots/smoke-visual-icons.spec.ts/record-linode-offline-1440-900.png b/packages/manager/cypress/screenshots/smoke-visual-icons.spec.ts/record-linode-offline-1440-900.png
deleted file mode 100644
index 442e3c5c04e3fd7768b2ab8f5b8465878fd2bb85..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 2883
zcmcguiC5Cw7Pf0CSJAM@(1#joC1uX371`A=wVbt_XT`Z3Fu-ug2|>kDLsOH&)GUXq
z<vgGfntDl%Cc_CShwjUX%nXP3>%M>Ct+&=*XPsfMea`yMxA*?Y_O=!>Qi@VyVq!8@
zmS{&Yv0d`O+z})JjJJiNn_^<pQdVeFXZ)_Oy@aUJwS*r2@b>q&bxouz>w_Qf$o!tC
zYal@{l@&Oq?kzGV{|g-b@tJaViD9Td7s-YA7TwYd%-9~?cQGFVvKVidP%-{6owhp<
z>o}B0d?`t~Y1whSHt=s>+~M%`iS@|IbB5*ZdI2T$XM;aQC@m2VVg|~Ant>kNH3K0G
zoIr>)j1(em#2S$XDMqG2%=FVCW+9b;6X$>8gwf%+(b)3~y07ob{Z(r9%0QQcl4V6X
zVPLQziCxUxRR!+?M-YNC<Xf!AK~+hREGzU%b3$hUw^C)bJA>08iLE!zm;GT^(;#d=
z9gZuF-7~Foo`uvxAG?FNGidL1fT0IPBhw-NVaQ6kp~lR^d0?5UAFUD+B=X@rSK5CM
z$PE$Hz3nrBPfuY7FtNmu1Hqal=Rvx0P;PRN+l&2OuC$!1w4nWV-~8R=%`&SWXz2YD
z$(6<lY|t!mRV4?xfe=UNrnhClviY3ZqKL5w>H|LX?PWwIC6cF}pAdNALMB@AE`Mz`
zI-5%MA2Up(=aPZzX2`o6@F|{Jr1yXOW#A;d>kqbgICyxR_li8RXM<R_6{+NW`SR=6
zL<O^Xe|vQ0-QW;owzC2ZUa1P}(HXa<<sY?c5WVff#>H`!vhq0?<fHm00q<%wvgEaV
z2WHYsvxp|ccGsDG+LQSF2M_$<F2f?IkLZh!gD=mpWBuPjJZj;<oUoMhwWW6EDZMQx
zrHW3V?rd{R;OpaCg`Q6X<;>=N?a@^d8AV~h0DAvkM`02#blIGv9Xxf`un+z7r)c5t
zrQjqF$yyQb$I~^O99ZIq#?I=GeE1?NMGdm-<l)3RYC=E?64s}>EpGIi!d<+hPjNVf
za#HCpKgR_2H%26cp4m^BdvOEWDO~)$&aDxI!0Kr18)~$y(6?@KJ`I3z;35(`@Hqyx
z{bJpCoUohZ2OGz;;ymLAA}}Y-S2hw}`2XJC9`LMr@#rY`l80#5Wa6AxcjLm<*=Gj&
zx8F5im&GafHhhl_cWv`OrB#@<a#|M7=n@>FYS%LJgN#mmw${GNyBW!A_1six(PZ9L
zxi*<HwItwPy7mXi3rq>bVzd1fl$2OY+7^ZPI<CjI3PIEmgXeuRK1URDbi9Gj64saX
zKRz%t_Vcyu_w8?Sj@1TJJH7g-&05JK{#r~Wi*z~~t(H^cPLSSD*qUSZjK1EqqD?$2
z5Jn3dOIo)-9>$}T$FCZh%`-Ieu$VM|tKbVGhex?XWiIP8nHLlZ)7>}77t~5^+}sp!
zlMS>p-OB{Hcxr0IR6`b7Jw86#;H3Gf5`3qm#idKq2N|86@D^SU<TR4<!oY^YHn71G
z7B@JbgakOQPUHk;O?z$*sAvaZ&WlsK&L!MibS>2n(o=vZGIPmAl>;NoI@IDX$6mQ$
z0@Hvaz=)Inoq;~*x(3t*GP1IxlhL=PHtmj2G#GDmvfKWQESa2C7rFE1Q8C$k{$9BX
z&V9?6N~?xXC#01CAg*<7$x;dQ_Pn;jVZLYE1f_}Y!(t|`TSf3Hy98o3qo8W%VoBwA
zSU*XnGOBZ9$cNj`ytmUoyWSj;K>m6L=kRCP=UPoBK|!UWYfH>-XPyAhO_-xUdi?m|
zw4~ix7I}R#nA<1wS7_*Le@V-q%r0?WGZJ8GL#RLkGhD_-YYzF()w$r;n&`TQhJE;0
z?Q8s@r0%lzkM8IN2Pipo7D<aRB*_Aam_nmrUcE1+4QXWd?>8oP$CyMf94@$X$HCXb
z@I$i9FY^s>@^$-X5yE}<uD7LoOQSaO>zlXlVkVj{wGwTmsQ^;B#5uZxqVlZuUF!@B
z<%H~e+RT*DS=UB9BHSeQ%rA;r3aqJ0NhKl`Vo}{9jPVVYDJ`FSRHJANGE3YbnxyoK
z0jS_nH(6h=3*Ry)(*!C@H*NuurDuKEXa8jsRq3hKf7WNi1OCLNcDng;3&SJa<IGxI
z9O_$-QAilYaRm6Je)<nw<CtbgVk2n{H_?j+NIn37RmD(!IhC{(jxLvzTHP34-IOjN
z2nw0A7Q@{=M$DDHt)5!w1$!vjuN5huTLo5{Sux(jk1CSZeTv8~HyR^_7F!$fqt31;
z3B8Mp8QCqq+n1d)%#5ijNm(oH9RZyyv-MHLg)H2@oC~nwuUBe10!}=jNKNicw*V!9
zqH%(viqr>F*tJl1Am7R&V-cD|ef*fVB5GLp;}sFn`qN`VQd&84N4+`HX(W0X(i|xe
zZWJZ0p^nU~#fOG=gDo`WEehmQRdvDQuyPof^#>`$z|7Q6&niG*{mSK<9=ROhnd=AJ
zL{vX{!n&<*6VnD)&Xu&VV@Q&CwfHX!!KX@GQB<{2ZmPx!3G;o+BB0Pf&-W~yCxtw`
zodS?~?s)#dE!*HIv}#TP1pu8oI?BafSN>eSTYT5C<HzMH*!L|5hq|CyQ$AGL+kF?L
zs7g1o-X6d9nFv3-Ex+fsrCNn5^l^_a&Q{uIr-NzgNraj+3RGds`fpQqoonCyTVh?O
zzZSK;pBlSte{^opz^3`?1eNvmil%#Ovg7E;NHXxatX5+r<xypOUiB3xFS705%vP!%
zt7k>Uqd6u%B0F|vu<ZT(Il{hvibo;W_~}hY-B^q`)k$3Z+mZattXxJWm}L`pIkVc)
z>%eoJ@p))neZbn6JH~kfCd$NlUgwROv#&7NZwBXxKi!&_KBSk|HPd)5^^5{d@782{
z^F7p^kL@|Rc^r&fMgRSm$IhDq4Z3j*o<AT!mg_+S^=jN3O3|vl-R}&4itJWjmghF$
zM}Pa3Z8en|CiGlalqn9E{hcZf27_lF)z!_Eb?p3>Tb1qT=xvhP6#jns&0czipa)Tg
zUlr9b!<7ykFoicqatWU_&iEvzmz8-hGMBuc^W)JAIvRQv(9u2}6)YQQwFCDHvO)r2
z70~=%9k5~Kc+c}aLc(G?=OI_&dsA~meN)a;w|K!?jp(`i;83tVrH=VsF+M(itSeYs
z#5?_A>Yb@g+({FkQ(Id{f%cW5rkFFmf`?SFeHHC5%7sQ8Dw}6FMqnKW%^x=G0xpSM
zVeA3w3TA0I(H4g@@|w`i$jFGsqk_<Casc-=-HqwT>x(WSW7|Ayw#F6fy2F%t%}bwJ
zymW14z)@jho>~VB|0-kW7<u+r6;3Am!7^XZG$xTkpEqjylhwx}WR*~5dW;;u0!Qej
zWA`xX`eq3UN<f3k8tdsf)aFUG56V>V)@EQ8tko_e0l$n4Coou6813wm{s_Fs;i7|e
z?;pv&hmw=Od^z@l-RoNnYypZ#6*m2*2U3mA5XymnR9Dx%&>06b6bsN$U?cud#V=t`
zU`k4A_Y`^!Y*uOJh9xZiN&)|h6iWy6BcY)1hQmcfnub<ts4X%bAUI%<nZ2q17diNk
nu*|kTk_s`KfA~veZXcY2y%wt9bUF!$V=*gpTXdb7Z_0lFh^A>U

diff --git a/packages/manager/cypress/screenshots/smoke-visual-icons.spec.ts/record-linode-running-1440-900.png b/packages/manager/cypress/screenshots/smoke-visual-icons.spec.ts/record-linode-running-1440-900.png
deleted file mode 100644
index 22b7c4d71fd1da6be13e3af8e7ba11a06339da2a..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 3297
zcmcInS5#9A(?taZL`p&logkn{4G?;f&>?_S3%vzFigf9U0fSWO5Q@@7su1c$MG%OT
zfHVcEH$ei57YH#_;XB@!|M7qMzL&GkT4&CzHM95Z*^_+3!srq+A2S^t-6a!aeQP?p
zGkn0iHRE~UnKI7LMn}g|W1_EX`{2ya-i!CA6HDIjY@O^bi*;ksnVS-s(jp?6+q1?G
zu4O%Ec*RgzToSCkEq#?ZGeN6W4b#+YEgfF0S*b8>t7#K0XSCCel&oO~ft79=BS2<(
zZ&X@_0$Q+}C)th>0pUq*2^C+Car_6d+DS`2dW_J}N)a@>x(z#mu|$#)iXP)cvm?Bj
z5sWVs8KCG-g$eA4b)+s3R{dWK6CaLD&}Me}CeSF?JF|1C;T`vJoC;K8>P8m9-Y?IV
zq7Yo@Ga@>4*N~CJ$+q0q-{>NCB;5MD^a=uqi|fHA1zwX3<7Ov9)UY#iIs*aCqG$~3
zHLF1|b*FF0N#K?C`%|M=xQE@v4361t1z5b3Ue-h^yJ!n%Ip)ebsZ@_&)jIZJ{PYrK
zuZ#TYyr!-&0`t)t1G?f+Qon%X?s%DZLZnT%1drdbXjkVz=%*t%x9MZ+HQt;t|54fF
zbLYwr*1-2*Din=jNo3rmk6j44d#>nnva?b{b~LO1zh58^m^o-i*&0F7z7yDan~}0>
zI^{h+MM=wB_^mzC-qFs{@BQC#O6DZ@`$SJQg8^|Wl`7JoSfhUfDAuTsP2mPDH~#&k
zRY<c#JvIMvnZO#sKX59)zn|XP#u}m>1KEua<*Jb59bg-JStjT<Qr84lkc*e?Sco}?
zpc+6El=I(?T%UKO$(|ed;ZF`t%dTKZ)TFF~{bJT4&pr~-;k27^0f*PNFhgba#SuUU
zs>VE6TCK@2O*NHgo=Q{8agk)-!Hk}qOjmi#{NnHi-<2bpVCCF5V%=m9<&ZzHh4Pu}
zn0=K{@_}bSoc`<?Zf8Z|e{%t_>YKi(D?Z@uqN-#|miD9R`>c~#y*3LbR-GalGPG$f
zs^im?IkM5g#LO-P9!&puaTZoFx4(K`$^5dmwh)j7ieUZ11D1U9BZb%4u;N+#op3?7
zm-mW~Z`9P9#>8kMV)%0zgTji%tsMoudG8h$@}l8zIJnw}?^2pM`j(B2d?Aur)!dx?
zyxI+hH8J5ez2$(tknzQAaQpB6{;TNF@Gz^}w-fO{#I<D7IA};Bk+^PVgG*Uj5=yFi
z30@2Dpma>Zfua-?6+c3>iwhu$yFNvRdLCftD@i>VmVj<+i`;(j){{lp0-1_1_P)uJ
zn``&rjq~KxB*bl8Ojb5MaB6<uELQJwTADe4v$c&4L<7ar+-%st@&W_}_%2$dxbFSD
zt-YNC)m9Dqys$}p@hbyFX}TBSec1Yn`fbB}d}=c|XkfE&q5ZpkA5Cz-U@=;oSQ{C+
z@cP($Gb&K!h$bw?&dAO!%!8Ma3h<=W^A>Ma<-5E%{L#~l`gKhrRT$6juuM$JB2j5H
zP+lp@gYexhl@Fd3(zV#2*?MAy2yh9L${#N^nSFOo7#BTm<Or9`;Lkfvb=vxgT0VIU
z)Za%W5j(vG(nd?+kKYxm-X3iKsZrC=KypOkc=4+yHNGrvX8E!baB&8X5?j&!tq8DW
zfThg2hR#*9K3PGHq!W8PJAw^=Sw;Pu1b_zuHWDuw;KNcD6LT{IYx(W$!oqkjHP%CG
z$C%=d_N|rrdGjK|;B0e6P`86*ld1s#30_%qh;-Ujx(e0X*RHLtjr1jj<mBGWEXaK5
zF)Y^l+%R%LQoZ}H+2cuWB8k)~jqmNUu(RKp9we`CY(QbqM+*xh#ugUUot@~fe?>7f
zr!ews`$2-5gD~q=qM;G1>oD!F-DR1#6<;a_qf1W0tJ~9OXK(%UhNN6=iGAAZD$+kQ
z*>`9pgeULrjHNp{=8>Mu0n=JJ=U4BtM|at9mPtzOglk;;RP@pHhkH8vnb<(bvAv-G
zKh26`(>t1XR8-W*F~0G@xLB2^<?Jn?Lzc50ry>p=Z_Ph~Gqh3(z6Sa#xs0&FB;sCo
zGJ3TVNxfko$K2FW!XEE^g+P!U9+s+k6$HwHy9uZ)z827eu$&h<{uw*_v#@vs)kZAP
zOit(%{r;VQJ8IqpiCl@<*znQZe}6|BrAQtwDbk~4LR;J0tel;D_q^mG54Jn@+&a92
zWwA3)Jt$&8vuf%B-~aHx0)suuq|sRU_^^ya*l6*m<@Xz<$c|(4Tbp7vKB^^cv-S4+
zp*G2xo;a?aWplBDR1|f)_aC+mv#6r9t`PF;`@J#l?wr);SI=+KkcY(k$m-{>F`3nC
zC=eK|S_X$Rq|6~*f(5eGs2k)?M;U;x?(&fRM$UnUi=`$m0_j7XoZK9f(+fy<_p{JP
zt`A?sD&+o-k;qPV`!K0y<6snRbV2m+l|F`$h4`SNk0xX#2uYZaN<@BSKl_O8%JA^c
zL5!G$#Qm+FMLl0%=4V+b9B6I#VE>(;GCx$;{4#_E#LsUQZ;ZRmw0jVPu3`~1Eg~4=
zMh1o`%oKn7v6-)*4LyL__mJgH#KbXkWaY!sjE6=Fl7t$6@0_)7c$28{Wnu7ZbbO+f
z-A>eeBxS>!iT*5ROIGL96ww~ItgGwB0kEUARLIx2SaWytB0c;PKF0(A3A6qZ1Xc9E
ztv`I6>PS@v82C-6r}WG6ETA=)<ChM(d-n6O9Lt2Zi#(qe7eAy&L^L0;IWQ(CC%@?K
z#%6BTGcB}J>{-sA`%}I#u;V;drA<rl5aaY`ILOtTF1h2$*<J#tEjgAt8i;TjJ!-tT
zH<3D-vaeHA9dt<bara0Y9U1@d<5xKYd~(v?(;PBhnLLN-)e}#!_m(5cl40j3zi)c6
zROWUxt}LIDB3j$qcfOXjE1;-<MgT1?Ar1;(LkcQZe-m{jyDYt2-M@Jpx&dl*h>>x>
zZ-Wu(9vDujH(<$OxSjIap`Jx7WuQ;6qp9Cj{?pvt&_%g-$cP9Pw`3-!emov*edkbz
z`pwo0-r(==i1hUxW2X%83>^Q`=M~C$0yM9Gr4r;OH7HYAb7FQ!D{Ng-O){H{#0_Es
z4`z7mlnd`J9Yw1;kvxwyG!DpRE|$0cnHESF&`R1x$|M>Lj26SvGSkyp(>XaQpJ{@j
z5fLG<LUs5P@RgC8hB`8^MWNDwZquhQ)WLIuNU~mI-*Cp3mU@5Y&rG3cE+<|`YOmg4
zN`2yS?I2F_G%hO@CF-@2Wss9=cf;;CJbF*i)t&Z7;=nC_8z58Dca^xh6dvWC(a-+#
z%>{&M6(vycFS~;WTFy_Onswe9EeTP>r*l~WzkZ&!{i-PhP}RxFDKso>hcJh;Ew1(4
zdUtLi_6wf`${SjqZ^~(`P!y>eC<9oJ>r?6*mbHB2A0qFWC=?}&8Cc!IMRCdf-r*XS
zx)!;S(L~wSW6LVmL{Cq13f<YGb8wDK8?J5gxwrdiX{oo$11}%wEOc|Ubck$pald?3
zmFICaipMfACXcl&qiyfxDH93LF}b*?XJm9CpaV;JYPxjf%BEeGu^3HLfN5Ohc+2uO
z-Y5rfL<_O&OaKzpCx9?1e_OW9nizHEV5ARfYt2OA+?DvcAa8fp!fC?$1>!03eJxcf
zU72iq|BxGgY8dmX=bSEWUlom#)PE*cQD}a!hZDKSaascqWfo|)iJ{_S6TkXrqp5#G
z(hOzof%S?O6T7vq>^)v8?zuTTfmyExc>xf_sRi+x84<if=DKs#Gj?KC4aeNWXbPL$
zQttQpbm9cyV~U%HBNqTq@G%IfYsJ}jd}5(}vMPUpRjBW-Qp<MH!JkZ3Ks=jekD%q4
zIp<%)YK|_cbtLJN=Na~vg3uw8LO{^`@;E69)v&2N17OM^3ym(}f`H{HuB~4yBs=%J
zH@o7h-4zPAA80D6bTj($p|X>6dpZ*VozevebT!{oNm1u=K46J3DSCc>(tE$xzT^m;
zW?8bvn#RVS1FQ|Y0J-CdLdkm#dveQm^5N!EF>%)r`Y!<M!8;XF2-C`EH=kN(rhi>P
z!1Nj!V05qB+1c6|uvq+0efs~oehqbX;6Bj$_dYn`(Ps%uB<h&D0H+I`iGhWFBf>S|
EKUuFgk^lez


From f04dfcb47acd20ca6d918ccadb50bbca63d22f2f Mon Sep 17 00:00:00 2001
From: Connie Liu <139280159+coliu-akamai@users.noreply.github.com>
Date: Fri, 13 Sep 2024 11:26:56 -0400
Subject: [PATCH 07/62] tech story: [M3-8386] - Update storybook to take care
 of tar vulnerability (#10934)

* update storybook to take care of tar vulnerability

* Added changeset: Update storybook to take care of tar vulnerability
---
 .../pr-10934-tech-stories-1726237837582.md    |    5 +
 packages/manager/package.json                 |   28 +-
 yarn.lock                                     | 2047 ++---------------
 3 files changed, 230 insertions(+), 1850 deletions(-)
 create mode 100644 packages/manager/.changeset/pr-10934-tech-stories-1726237837582.md

diff --git a/packages/manager/.changeset/pr-10934-tech-stories-1726237837582.md b/packages/manager/.changeset/pr-10934-tech-stories-1726237837582.md
new file mode 100644
index 00000000000..30a569b9508
--- /dev/null
+++ b/packages/manager/.changeset/pr-10934-tech-stories-1726237837582.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Tech Stories
+---
+
+Update storybook to take care of tar vulnerability ([#10934](https://github.com/linode/manager/pull/10934))
diff --git a/packages/manager/package.json b/packages/manager/package.json
index df8b2d070d0..407c3c24825 100644
--- a/packages/manager/package.json
+++ b/packages/manager/package.json
@@ -114,19 +114,19 @@
   },
   "devDependencies": {
     "@linode/eslint-plugin-cloud-manager": "^0.0.3",
-    "@storybook/addon-actions": "^8.2.9",
-    "@storybook/addon-controls": "^8.2.9",
-    "@storybook/addon-docs": "^8.2.9",
-    "@storybook/addon-mdx-gfm": "^8.2.9",
-    "@storybook/addon-measure": "^8.2.9",
-    "@storybook/addon-storysource": "^8.2.9",
-    "@storybook/addon-viewport": "^8.2.9",
-    "@storybook/blocks": "^8.2.9",
-    "@storybook/manager-api": "^8.2.9",
-    "@storybook/preview-api": "^8.2.9",
-    "@storybook/react": "^8.2.9",
-    "@storybook/react-vite": "^8.2.9",
-    "@storybook/theming": "^8.2.9",
+    "@storybook/addon-actions": "^8.3.0",
+    "@storybook/addon-controls": "^8.3.0",
+    "@storybook/addon-docs": "^8.3.0",
+    "@storybook/addon-mdx-gfm": "^8.3.0",
+    "@storybook/addon-measure": "^8.3.0",
+    "@storybook/addon-storysource": "^8.3.0",
+    "@storybook/addon-viewport": "^8.3.0",
+    "@storybook/blocks": "^8.3.0",
+    "@storybook/manager-api": "^8.3.0",
+    "@storybook/preview-api": "^8.3.0",
+    "@storybook/react": "^8.3.0",
+    "@storybook/react-vite": "^8.3.0",
+    "@storybook/theming": "^8.3.0",
     "@swc/core": "^1.3.1",
     "@testing-library/cypress": "^10.0.2",
     "@testing-library/dom": "^10.1.0",
@@ -208,7 +208,7 @@
     "reselect-tools": "^0.0.7",
     "serve": "^14.0.1",
     "simple-git": "^3.19.0",
-    "storybook": "^8.2.9",
+    "storybook": "^8.3.0",
     "storybook-dark-mode": "^4.0.1",
     "ts-node": "^10.9.2",
     "vite": "^5.1.7",
diff --git a/yarn.lock b/yarn.lock
index 18ac5e1751a..6cdf3057e09 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -147,14 +147,6 @@
     "@babel/highlight" "^7.23.4"
     chalk "^2.4.2"
 
-"@babel/code-frame@^7.24.2":
-  version "7.24.2"
-  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.24.2.tgz#718b4b19841809a58b29b68cde80bc5e1aa6d9ae"
-  integrity sha512-y5+tLQyV8pg3fsiln67BVLD1P13Eg4lh5RW9mF0zUuvLrv9uIQ4MCL+CRT+FTsBlBjcIan6PGsLcBN0m3ClUyQ==
-  dependencies:
-    "@babel/highlight" "^7.24.2"
-    picocolors "^1.0.0"
-
 "@babel/code-frame@^7.24.7":
   version "7.24.7"
   resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.24.7.tgz#882fd9e09e8ee324e496bd040401c6f046ef4465"
@@ -163,17 +155,12 @@
     "@babel/highlight" "^7.24.7"
     picocolors "^1.0.0"
 
-"@babel/compat-data@^7.22.6", "@babel/compat-data@^7.23.5":
+"@babel/compat-data@^7.23.5":
   version "7.23.5"
   resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.23.5.tgz#ffb878728bb6bdcb6f4510aa51b1be9afb8cfd98"
   integrity sha512-uU27kfDRlhfKl+w1U6vp16IuvSLtjAxdArVXPa9BvLkrr7CYIsxH5adpHObeAGY/41+syctUWOZ140a2Rvkgjw==
 
-"@babel/compat-data@^7.24.4":
-  version "7.24.4"
-  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.24.4.tgz#6f102372e9094f25d908ca0d34fc74c74606059a"
-  integrity sha512-vg8Gih2MLK+kOkHJp4gBEIkyaIi00jgWot2D9QOmmfLC8jINSOzmCLta6Bvz/JSBCqnegV0L80jhxkol5GWNfQ==
-
-"@babel/core@^7.18.9", "@babel/core@^7.21.3", "@babel/core@^7.23.0":
+"@babel/core@^7.18.9", "@babel/core@^7.21.3":
   version "7.23.9"
   resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.23.9.tgz#b028820718000f267870822fec434820e9b1e4d1"
   integrity sha512-5q0175NOjddqpvvzU+kDiSOAk4PfdO6FvwCWoQ6RO7rTzEe8vlo+4HVfcnAREhD4npMs0e9uZypjTwzZPCf/cw==
@@ -194,27 +181,6 @@
     json5 "^2.2.3"
     semver "^6.3.1"
 
-"@babel/core@^7.24.4":
-  version "7.24.5"
-  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.24.5.tgz#15ab5b98e101972d171aeef92ac70d8d6718f06a"
-  integrity sha512-tVQRucExLQ02Boi4vdPp49svNGcfL2GhdTCT9aldhXgCJVAI21EtRfBettiuLUwce/7r6bFdgs6JFkcdTiFttA==
-  dependencies:
-    "@ampproject/remapping" "^2.2.0"
-    "@babel/code-frame" "^7.24.2"
-    "@babel/generator" "^7.24.5"
-    "@babel/helper-compilation-targets" "^7.23.6"
-    "@babel/helper-module-transforms" "^7.24.5"
-    "@babel/helpers" "^7.24.5"
-    "@babel/parser" "^7.24.5"
-    "@babel/template" "^7.24.0"
-    "@babel/traverse" "^7.24.5"
-    "@babel/types" "^7.24.5"
-    convert-source-map "^2.0.0"
-    debug "^4.1.0"
-    gensync "^1.0.0-beta.2"
-    json5 "^2.2.3"
-    semver "^6.3.1"
-
 "@babel/generator@^7.23.6":
   version "7.23.6"
   resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.23.6.tgz#9e1fca4811c77a10580d17d26b57b036133f3c2e"
@@ -225,16 +191,6 @@
     "@jridgewell/trace-mapping" "^0.3.17"
     jsesc "^2.5.1"
 
-"@babel/generator@^7.24.5":
-  version "7.24.5"
-  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.24.5.tgz#e5afc068f932f05616b66713e28d0f04e99daeb3"
-  integrity sha512-x32i4hEXvr+iI0NEoEfDKzlemF8AmtOP8CcrRaEcpzysWuoEb1KknpcvMsHKPONoKZiDuItklgWhB18xEhr9PA==
-  dependencies:
-    "@babel/types" "^7.24.5"
-    "@jridgewell/gen-mapping" "^0.3.5"
-    "@jridgewell/trace-mapping" "^0.3.25"
-    jsesc "^2.5.1"
-
 "@babel/generator@^7.25.0":
   version "7.25.0"
   resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.25.0.tgz#f858ddfa984350bc3d3b7f125073c9af6988f18e"
@@ -245,21 +201,7 @@
     "@jridgewell/trace-mapping" "^0.3.25"
     jsesc "^2.5.1"
 
-"@babel/helper-annotate-as-pure@^7.22.5":
-  version "7.22.5"
-  resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.22.5.tgz#e7f06737b197d580a01edf75d97e2c8be99d3882"
-  integrity sha512-LvBTxu8bQSQkcyKOU+a1btnNFQ1dMAd0R6PyW3arXes06F6QLWLIrd681bxRPIXlrMGR3XYnW9JyML7dP3qgxg==
-  dependencies:
-    "@babel/types" "^7.22.5"
-
-"@babel/helper-builder-binary-assignment-operator-visitor@^7.22.15":
-  version "7.22.15"
-  resolved "https://registry.yarnpkg.com/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.22.15.tgz#5426b109cf3ad47b91120f8328d8ab1be8b0b956"
-  integrity sha512-QkBXwGgaoC2GtGZRoma6kv7Szfv06khvhFav67ZExau2RaXzy8MpHSMO2PNoP2XtmQphJQRHFfg77Bq731Yizw==
-  dependencies:
-    "@babel/types" "^7.22.15"
-
-"@babel/helper-compilation-targets@^7.22.6", "@babel/helper-compilation-targets@^7.23.6":
+"@babel/helper-compilation-targets@^7.23.6":
   version "7.23.6"
   resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.23.6.tgz#4d79069b16cbcf1461289eccfbbd81501ae39991"
   integrity sha512-9JB548GZoQVmzrFgp8o7KxdgkTGm6xs9DW0o/Pim72UDjzr5ObUQ6ZzYPqA+g9OTS2bBQoctLJrky0RDCAWRgQ==
@@ -270,90 +212,11 @@
     lru-cache "^5.1.1"
     semver "^6.3.1"
 
-"@babel/helper-create-class-features-plugin@^7.22.15", "@babel/helper-create-class-features-plugin@^7.23.6":
-  version "7.23.10"
-  resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.23.10.tgz#25d55fafbaea31fd0e723820bb6cc3df72edf7ea"
-  integrity sha512-2XpP2XhkXzgxecPNEEK8Vz8Asj9aRxt08oKOqtiZoqV2UGZ5T+EkyP9sXQ9nwMxBIG34a7jmasVqoMop7VdPUw==
-  dependencies:
-    "@babel/helper-annotate-as-pure" "^7.22.5"
-    "@babel/helper-environment-visitor" "^7.22.20"
-    "@babel/helper-function-name" "^7.23.0"
-    "@babel/helper-member-expression-to-functions" "^7.23.0"
-    "@babel/helper-optimise-call-expression" "^7.22.5"
-    "@babel/helper-replace-supers" "^7.22.20"
-    "@babel/helper-skip-transparent-expression-wrappers" "^7.22.5"
-    "@babel/helper-split-export-declaration" "^7.22.6"
-    semver "^6.3.1"
-
-"@babel/helper-create-class-features-plugin@^7.24.1", "@babel/helper-create-class-features-plugin@^7.24.4", "@babel/helper-create-class-features-plugin@^7.24.5":
-  version "7.24.5"
-  resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.24.5.tgz#7d19da92c7e0cd8d11c09af2ce1b8e7512a6e723"
-  integrity sha512-uRc4Cv8UQWnE4NXlYTIIdM7wfFkOqlFztcC/gVXDKohKoVB3OyonfelUBaJzSwpBntZ2KYGF/9S7asCHsXwW6g==
-  dependencies:
-    "@babel/helper-annotate-as-pure" "^7.22.5"
-    "@babel/helper-environment-visitor" "^7.22.20"
-    "@babel/helper-function-name" "^7.23.0"
-    "@babel/helper-member-expression-to-functions" "^7.24.5"
-    "@babel/helper-optimise-call-expression" "^7.22.5"
-    "@babel/helper-replace-supers" "^7.24.1"
-    "@babel/helper-skip-transparent-expression-wrappers" "^7.22.5"
-    "@babel/helper-split-export-declaration" "^7.24.5"
-    semver "^6.3.1"
-
-"@babel/helper-create-regexp-features-plugin@^7.18.6", "@babel/helper-create-regexp-features-plugin@^7.22.15", "@babel/helper-create-regexp-features-plugin@^7.22.5":
-  version "7.22.15"
-  resolved "https://registry.yarnpkg.com/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.22.15.tgz#5ee90093914ea09639b01c711db0d6775e558be1"
-  integrity sha512-29FkPLFjn4TPEa3RE7GpW+qbE8tlsu3jntNYNfcGsc49LphF1PQIiD+vMZ1z1xVOKt+93khA9tc2JBs3kBjA7w==
-  dependencies:
-    "@babel/helper-annotate-as-pure" "^7.22.5"
-    regexpu-core "^5.3.1"
-    semver "^6.3.1"
-
-"@babel/helper-define-polyfill-provider@^0.6.1", "@babel/helper-define-polyfill-provider@^0.6.2":
-  version "0.6.2"
-  resolved "https://registry.yarnpkg.com/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.6.2.tgz#18594f789c3594acb24cfdb4a7f7b7d2e8bd912d"
-  integrity sha512-LV76g+C502biUK6AyZ3LK10vDpDyCzZnhZFXkH1L75zHPj68+qc8Zfpx2th+gzwA2MzyK+1g/3EPl62yFnVttQ==
-  dependencies:
-    "@babel/helper-compilation-targets" "^7.22.6"
-    "@babel/helper-plugin-utils" "^7.22.5"
-    debug "^4.1.1"
-    lodash.debounce "^4.0.8"
-    resolve "^1.14.2"
-
 "@babel/helper-environment-visitor@^7.22.20":
   version "7.22.20"
   resolved "https://registry.yarnpkg.com/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.20.tgz#96159db61d34a29dba454c959f5ae4a649ba9167"
   integrity sha512-zfedSIzFhat/gFhWfHtgWvlec0nqB9YEIVrpuwjruLlXfUSnA8cJB0miHKwqDnQ7d32aKo2xt88/xZptwxbfhA==
 
-"@babel/helper-function-name@^7.22.5", "@babel/helper-function-name@^7.23.0":
-  version "7.23.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.23.0.tgz#1f9a3cdbd5b2698a670c30d2735f9af95ed52759"
-  integrity sha512-OErEqsrxjZTJciZ4Oo+eoZqeW9UIiOcuYKRJA4ZAgV9myA+pOXhhmpfNCKjEH/auVfEYVFJ6y1Tc4r0eIApqiw==
-  dependencies:
-    "@babel/template" "^7.22.15"
-    "@babel/types" "^7.23.0"
-
-"@babel/helper-hoist-variables@^7.22.5":
-  version "7.22.5"
-  resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.22.5.tgz#c01a007dac05c085914e8fb652b339db50d823bb"
-  integrity sha512-wGjk9QZVzvknA6yKIUURb8zY3grXCcOZt+/7Wcy8O2uctxhplmUPkOdlgoNhmdVee2c92JXbf1xpMtVNbfoxRw==
-  dependencies:
-    "@babel/types" "^7.22.5"
-
-"@babel/helper-member-expression-to-functions@^7.22.15", "@babel/helper-member-expression-to-functions@^7.23.0":
-  version "7.23.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.23.0.tgz#9263e88cc5e41d39ec18c9a3e0eced59a3e7d366"
-  integrity sha512-6gfrPwh7OuT6gZyJZvd6WbTfrqAo7vm4xCzAXOusKqq/vWdKXphTpj5klHKNmRUU6/QRGlBsyU9mAIPaWHlqJA==
-  dependencies:
-    "@babel/types" "^7.23.0"
-
-"@babel/helper-member-expression-to-functions@^7.24.5":
-  version "7.24.5"
-  resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.24.5.tgz#5981e131d5c7003c7d1fa1ad49e86c9b097ec475"
-  integrity sha512-4owRteeihKWKamtqg4JmWSsEZU445xpFRXPEwp44HbgbxdWlUV1b4Agg4lkA806Lil5XM/e+FJyS0vj5T6vmcA==
-  dependencies:
-    "@babel/types" "^7.24.5"
-
 "@babel/helper-module-imports@^7.0.0", "@babel/helper-module-imports@^7.16.7", "@babel/helper-module-imports@^7.22.15":
   version "7.22.15"
   resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.22.15.tgz#16146307acdc40cc00c3b2c647713076464bdbf0"
@@ -361,13 +224,6 @@
   dependencies:
     "@babel/types" "^7.22.15"
 
-"@babel/helper-module-imports@^7.24.1", "@babel/helper-module-imports@^7.24.3":
-  version "7.24.3"
-  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.24.3.tgz#6ac476e6d168c7c23ff3ba3cf4f7841d46ac8128"
-  integrity sha512-viKb0F9f2s0BCS22QSF308z/+1YWKV/76mwt61NBzS5izMzDPwdq1pTrzf+Li3npBWX9KdQbkeCt1jSAM7lZqg==
-  dependencies:
-    "@babel/types" "^7.24.0"
-
 "@babel/helper-module-transforms@^7.23.3":
   version "7.23.3"
   resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.23.3.tgz#d7d12c3c5d30af5b3c0fcab2a6d5217773e2d0f1"
@@ -379,61 +235,6 @@
     "@babel/helper-split-export-declaration" "^7.22.6"
     "@babel/helper-validator-identifier" "^7.22.20"
 
-"@babel/helper-module-transforms@^7.24.5":
-  version "7.24.5"
-  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.24.5.tgz#ea6c5e33f7b262a0ae762fd5986355c45f54a545"
-  integrity sha512-9GxeY8c2d2mdQUP1Dye0ks3VDyIMS98kt/llQ2nUId8IsWqTF0l1LkSX0/uP7l7MCDrzXS009Hyhe2gzTiGW8A==
-  dependencies:
-    "@babel/helper-environment-visitor" "^7.22.20"
-    "@babel/helper-module-imports" "^7.24.3"
-    "@babel/helper-simple-access" "^7.24.5"
-    "@babel/helper-split-export-declaration" "^7.24.5"
-    "@babel/helper-validator-identifier" "^7.24.5"
-
-"@babel/helper-optimise-call-expression@^7.22.5":
-  version "7.22.5"
-  resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.22.5.tgz#f21531a9ccbff644fdd156b4077c16ff0c3f609e"
-  integrity sha512-HBwaojN0xFRx4yIvpwGqxiV2tUfl7401jlok564NgB9EHS1y6QT17FmKWm4ztqjeVdXLuC4fSvHc5ePpQjoTbw==
-  dependencies:
-    "@babel/types" "^7.22.5"
-
-"@babel/helper-plugin-utils@^7.0.0", "@babel/helper-plugin-utils@^7.10.4", "@babel/helper-plugin-utils@^7.12.13", "@babel/helper-plugin-utils@^7.14.5", "@babel/helper-plugin-utils@^7.18.6", "@babel/helper-plugin-utils@^7.22.5", "@babel/helper-plugin-utils@^7.8.0", "@babel/helper-plugin-utils@^7.8.3":
-  version "7.22.5"
-  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz#dd7ee3735e8a313b9f7b05a773d892e88e6d7295"
-  integrity sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==
-
-"@babel/helper-plugin-utils@^7.24.0", "@babel/helper-plugin-utils@^7.24.5":
-  version "7.24.5"
-  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.24.5.tgz#a924607dd254a65695e5bd209b98b902b3b2f11a"
-  integrity sha512-xjNLDopRzW2o6ba0gKbkZq5YWEBaK3PCyTOY1K2P/O07LGMhMqlMXPxwN4S5/RhWuCobT8z0jrlKGlYmeR1OhQ==
-
-"@babel/helper-remap-async-to-generator@^7.22.20":
-  version "7.22.20"
-  resolved "https://registry.yarnpkg.com/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.22.20.tgz#7b68e1cb4fa964d2996fd063723fb48eca8498e0"
-  integrity sha512-pBGyV4uBqOns+0UvhsTO8qgl8hO89PmiDYv+/COyp1aeMcmfrfruz+/nCMFiYyFF/Knn0yfrC85ZzNFjembFTw==
-  dependencies:
-    "@babel/helper-annotate-as-pure" "^7.22.5"
-    "@babel/helper-environment-visitor" "^7.22.20"
-    "@babel/helper-wrap-function" "^7.22.20"
-
-"@babel/helper-replace-supers@^7.22.20":
-  version "7.22.20"
-  resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.22.20.tgz#e37d367123ca98fe455a9887734ed2e16eb7a793"
-  integrity sha512-qsW0In3dbwQUbK8kejJ4R7IHVGwHJlV6lpG6UA7a9hSa2YEiAib+N1T2kr6PEeUT+Fl7najmSOS6SmAwCHK6Tw==
-  dependencies:
-    "@babel/helper-environment-visitor" "^7.22.20"
-    "@babel/helper-member-expression-to-functions" "^7.22.15"
-    "@babel/helper-optimise-call-expression" "^7.22.5"
-
-"@babel/helper-replace-supers@^7.24.1":
-  version "7.24.1"
-  resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.24.1.tgz#7085bd19d4a0b7ed8f405c1ed73ccb70f323abc1"
-  integrity sha512-QCR1UqC9BzG5vZl8BMicmZ28RuUBnHhAMddD8yHFHDRH9lLTZ9uUPehX8ctVPT8l0TKblJidqcgUUKGVrePleQ==
-  dependencies:
-    "@babel/helper-environment-visitor" "^7.22.20"
-    "@babel/helper-member-expression-to-functions" "^7.23.0"
-    "@babel/helper-optimise-call-expression" "^7.22.5"
-
 "@babel/helper-simple-access@^7.22.5":
   version "7.22.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.22.5.tgz#4938357dc7d782b80ed6dbb03a0fba3d22b1d5de"
@@ -441,20 +242,6 @@
   dependencies:
     "@babel/types" "^7.22.5"
 
-"@babel/helper-simple-access@^7.24.5":
-  version "7.24.5"
-  resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.24.5.tgz#50da5b72f58c16b07fbd992810be6049478e85ba"
-  integrity sha512-uH3Hmf5q5n7n8mz7arjUlDOCbttY/DW4DYhE6FUsjKJ/oYC1kQQUvwEQWxRwUpX9qQKRXeqLwWxrqilMrf32sQ==
-  dependencies:
-    "@babel/types" "^7.24.5"
-
-"@babel/helper-skip-transparent-expression-wrappers@^7.22.5":
-  version "7.22.5"
-  resolved "https://registry.yarnpkg.com/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.22.5.tgz#007f15240b5751c537c40e77abb4e89eeaaa8847"
-  integrity sha512-tK14r66JZKiC43p8Ki33yLBVJKlQDFoA8GYN67lWCDCqoL6EMMSuM9b+Iff2jHaM/RRFYl7K+iiru7hbRqNx8Q==
-  dependencies:
-    "@babel/types" "^7.22.5"
-
 "@babel/helper-split-export-declaration@^7.22.6":
   version "7.22.6"
   resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.22.6.tgz#322c61b7310c0997fe4c323955667f18fcefb91c"
@@ -462,23 +249,11 @@
   dependencies:
     "@babel/types" "^7.22.5"
 
-"@babel/helper-split-export-declaration@^7.24.5":
-  version "7.24.5"
-  resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.24.5.tgz#b9a67f06a46b0b339323617c8c6213b9055a78b6"
-  integrity sha512-5CHncttXohrHk8GWOFCcCl4oRD9fKosWlIRgWm4ql9VYioKm52Mk2xsmoohvm7f3JoiLSM5ZgJuRaf5QZZYd3Q==
-  dependencies:
-    "@babel/types" "^7.24.5"
-
 "@babel/helper-string-parser@^7.23.4":
   version "7.23.4"
   resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.23.4.tgz#9478c707febcbbe1ddb38a3d91a2e054ae622d83"
   integrity sha512-803gmbQdqwdf4olxrX4AJyFBV/RTr3rSmOj0rKwesmzlfhYNDEs+/iOcznzpNWlJlIlTJC2QfPFcHB6DlzdVLQ==
 
-"@babel/helper-string-parser@^7.24.1":
-  version "7.24.1"
-  resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.24.1.tgz#f99c36d3593db9540705d0739a1f10b5e20c696e"
-  integrity sha512-2ofRCjnnA9y+wk8b9IAREroeUP02KHp431N2mhKniy2yKIDKpbrHv9eXwm8cBeWQYcJmzv5qKCu65P47eCF7CQ==
-
 "@babel/helper-string-parser@^7.24.8":
   version "7.24.8"
   resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.24.8.tgz#5b3329c9a58803d5df425e5785865881a81ca48d"
@@ -489,30 +264,16 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.20.tgz#c4ae002c61d2879e724581d96665583dbc1dc0e0"
   integrity sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==
 
-"@babel/helper-validator-identifier@^7.24.5":
-  version "7.24.5"
-  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.24.5.tgz#918b1a7fa23056603506370089bd990d8720db62"
-  integrity sha512-3q93SSKX2TWCG30M2G2kwaKeTYgEUp5Snjuj8qm729SObL6nbtUldAi37qbxkD5gg3xnBio+f9nqpSepGZMvxA==
-
 "@babel/helper-validator-identifier@^7.24.7":
   version "7.24.7"
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.24.7.tgz#75b889cfaf9e35c2aaf42cf0d72c8e91719251db"
   integrity sha512-rR+PBcQ1SMQDDyF6X0wxtG8QyLCgUB0eRAGguqRLfkCA87l7yAP7ehq8SNj96OOGTO8OBV70KhuFYcIkHXOg0w==
 
-"@babel/helper-validator-option@^7.22.15", "@babel/helper-validator-option@^7.23.5":
+"@babel/helper-validator-option@^7.23.5":
   version "7.23.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.23.5.tgz#907a3fbd4523426285365d1206c423c4c5520307"
   integrity sha512-85ttAOMLsr53VgXkTbkx8oA6YTfT4q7/HzXSLEYmjcSTJPMPQtvq1BD79Byep5xMUYbGRzEpDsjUf3dyp54IKw==
 
-"@babel/helper-wrap-function@^7.22.20":
-  version "7.22.20"
-  resolved "https://registry.yarnpkg.com/@babel/helper-wrap-function/-/helper-wrap-function-7.22.20.tgz#15352b0b9bfb10fc9c76f79f6342c00e3411a569"
-  integrity sha512-pms/UwkOpnQe/PDAEdV/d7dVCoBbB+R4FvYoHGZz+4VPcg7RtYy2KP7S2lbuWM6FCSgob5wshfGESbC/hzNXZw==
-  dependencies:
-    "@babel/helper-function-name" "^7.22.5"
-    "@babel/template" "^7.22.15"
-    "@babel/types" "^7.22.19"
-
 "@babel/helpers@^7.23.9":
   version "7.23.9"
   resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.23.9.tgz#c3e20bbe7f7a7e10cb9b178384b4affdf5995c7d"
@@ -522,15 +283,6 @@
     "@babel/traverse" "^7.23.9"
     "@babel/types" "^7.23.9"
 
-"@babel/helpers@^7.24.5":
-  version "7.24.5"
-  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.24.5.tgz#fedeb87eeafa62b621160402181ad8585a22a40a"
-  integrity sha512-CiQmBMMpMQHwM5m01YnrM6imUG1ebgYJ+fAIW4FZe6m4qHTPaRHti+R8cggAwkdz4oXhtO4/K9JWlh+8hIfR2Q==
-  dependencies:
-    "@babel/template" "^7.24.0"
-    "@babel/traverse" "^7.24.5"
-    "@babel/types" "^7.24.5"
-
 "@babel/highlight@^7.10.4", "@babel/highlight@^7.24.7":
   version "7.24.7"
   resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.24.7.tgz#a05ab1df134b286558aae0ed41e6c5f731bf409d"
@@ -550,31 +302,11 @@
     chalk "^2.4.2"
     js-tokens "^4.0.0"
 
-"@babel/highlight@^7.24.2":
-  version "7.24.2"
-  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.24.2.tgz#3f539503efc83d3c59080a10e6634306e0370d26"
-  integrity sha512-Yac1ao4flkTxTteCDZLEvdxg2fZfz1v8M4QpaGypq/WPDqg3ijHYbDfs+LG5hvzSoqaSZ9/Z9lKSP3CjZjv+pA==
-  dependencies:
-    "@babel/helper-validator-identifier" "^7.22.20"
-    chalk "^2.4.2"
-    js-tokens "^4.0.0"
-    picocolors "^1.0.0"
-
-"@babel/parser@^7.1.0", "@babel/parser@^7.20.7", "@babel/parser@^7.23.0", "@babel/parser@^7.23.9", "@babel/parser@^7.7.0":
+"@babel/parser@^7.1.0", "@babel/parser@^7.20.7", "@babel/parser@^7.23.9", "@babel/parser@^7.7.0":
   version "7.23.9"
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.23.9.tgz#7b903b6149b0f8fa7ad564af646c4c38a77fc44b"
   integrity sha512-9tcKgqKbs3xGJ+NtKF2ndOBBLVwPjl1SHxPQkd36r3Dlirw3xWUeGaTbqr7uGZcTaxkVNwc+03SVP7aCdWrTlA==
 
-"@babel/parser@^7.24.0":
-  version "7.24.0"
-  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.24.0.tgz#26a3d1ff49031c53a97d03b604375f028746a9ac"
-  integrity sha512-QuP/FxEAzMSjXygs8v4N9dvdXzEHN4W1oF3PxuWAtPo08UdM17u89RDMgjLn/mlc56iM0HlLmVkO/wgR+rDgHg==
-
-"@babel/parser@^7.24.5":
-  version "7.24.5"
-  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.24.5.tgz#4a4d5ab4315579e5398a82dcf636ca80c3392790"
-  integrity sha512-EOv5IK8arwh3LI47dz1b0tKUb/1uhHAnHJOrjgtQMIpu1uXd9mlFrJg9IUgGUgZ41Ch0K8REPTYpO7B76b4vJg==
-
 "@babel/parser@^7.25.0", "@babel/parser@^7.25.3":
   version "7.25.3"
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.25.3.tgz#91fb126768d944966263f0657ab222a642b82065"
@@ -589,778 +321,14 @@
   dependencies:
     "@babel/types" "^7.25.4"
 
-"@babel/plugin-bugfix-firefox-class-in-computed-class-key@^7.24.5":
-  version "7.24.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-firefox-class-in-computed-class-key/-/plugin-bugfix-firefox-class-in-computed-class-key-7.24.5.tgz#4c3685eb9cd790bcad2843900fe0250c91ccf895"
-  integrity sha512-LdXRi1wEMTrHVR4Zc9F8OewC3vdm5h4QB6L71zy6StmYeqGi1b3ttIO8UC+BfZKcH9jdr4aI249rBkm+3+YvHw==
-  dependencies:
-    "@babel/helper-environment-visitor" "^7.22.20"
-    "@babel/helper-plugin-utils" "^7.24.5"
-
-"@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@^7.24.1":
-  version "7.24.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.24.1.tgz#b645d9ba8c2bc5b7af50f0fe949f9edbeb07c8cf"
-  integrity sha512-y4HqEnkelJIOQGd+3g1bTeKsA5c6qM7eOn7VggGVbBc0y8MLSKHacwcIE2PplNlQSj0PqS9rrXL/nkPVK+kUNg==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.24.0"
-
-"@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@^7.24.1":
-  version "7.24.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/-/plugin-bugfix-v8-spread-parameters-in-optional-chaining-7.24.1.tgz#da8261f2697f0f41b0855b91d3a20a1fbfd271d3"
-  integrity sha512-Hj791Ii4ci8HqnaKHAlLNs+zaLXb0EzSDhiAWp5VNlyvCNymYfacs64pxTxbH1znW/NcArSmwpmG9IKE/TUVVQ==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.24.0"
-    "@babel/helper-skip-transparent-expression-wrappers" "^7.22.5"
-    "@babel/plugin-transform-optional-chaining" "^7.24.1"
-
-"@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@^7.24.1":
-  version "7.24.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly/-/plugin-bugfix-v8-static-class-fields-redefine-readonly-7.24.1.tgz#1181d9685984c91d657b8ddf14f0487a6bab2988"
-  integrity sha512-m9m/fXsXLiHfwdgydIFnpk+7jlVbnvlK5B2EKiPdLUb6WX654ZaaEWJUjk8TftRbZpK0XibovlLWX4KIZhV6jw==
-  dependencies:
-    "@babel/helper-environment-visitor" "^7.22.20"
-    "@babel/helper-plugin-utils" "^7.24.0"
-
-"@babel/plugin-proposal-private-property-in-object@7.21.0-placeholder-for-preset-env.2":
-  version "7.21.0-placeholder-for-preset-env.2"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0-placeholder-for-preset-env.2.tgz#7844f9289546efa9febac2de4cfe358a050bd703"
-  integrity sha512-SOSkfJDddaM7mak6cPEpswyTRnuRltl429hMraQEglW+OkovnCzsiszTmsrlY//qLFjCpQDFRvjdm2wA5pPm9w==
-
-"@babel/plugin-syntax-async-generators@^7.8.4":
-  version "7.8.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-async-generators/-/plugin-syntax-async-generators-7.8.4.tgz#a983fb1aeb2ec3f6ed042a210f640e90e786fe0d"
-  integrity sha512-tycmZxkGfZaxhMRbXlPXuVFpdWlXpir2W4AMhSJgRKzk/eDlIXOhb2LHWoLpDF7TEHylV5zNhykX6KAgHJmTNw==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.8.0"
-
-"@babel/plugin-syntax-class-properties@^7.12.13":
-  version "7.12.13"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-class-properties/-/plugin-syntax-class-properties-7.12.13.tgz#b5c987274c4a3a82b89714796931a6b53544ae10"
-  integrity sha512-fm4idjKla0YahUNgFNLCB0qySdsoPiZP3iQE3rky0mBUtMZ23yDJ9SJdg6dXTSDnulOVqiF3Hgr9nbXvXTQZYA==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.12.13"
-
-"@babel/plugin-syntax-class-static-block@^7.14.5":
-  version "7.14.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-class-static-block/-/plugin-syntax-class-static-block-7.14.5.tgz#195df89b146b4b78b3bf897fd7a257c84659d406"
-  integrity sha512-b+YyPmr6ldyNnM6sqYeMWE+bgJcJpO6yS4QD7ymxgH34GBPNDM/THBh8iunyvKIZztiwLH4CJZ0RxTk9emgpjw==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.14.5"
-
-"@babel/plugin-syntax-dynamic-import@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-dynamic-import/-/plugin-syntax-dynamic-import-7.8.3.tgz#62bf98b2da3cd21d626154fc96ee5b3cb68eacb3"
-  integrity sha512-5gdGbFon+PszYzqs83S3E5mpi7/y/8M9eC90MRTZfduQOYW76ig6SOSPNe41IG5LoP3FGBn2N0RjVDSQiS94kQ==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.8.0"
-
-"@babel/plugin-syntax-export-namespace-from@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-export-namespace-from/-/plugin-syntax-export-namespace-from-7.8.3.tgz#028964a9ba80dbc094c915c487ad7c4e7a66465a"
-  integrity sha512-MXf5laXo6c1IbEbegDmzGPwGNTsHZmEy6QGznu5Sh2UCWvueywb2ee+CCE4zQiZstxU9BMoQO9i6zUFSY0Kj0Q==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.8.3"
-
-"@babel/plugin-syntax-flow@^7.23.3":
-  version "7.23.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-flow/-/plugin-syntax-flow-7.23.3.tgz#084564e0f3cc21ea6c70c44cff984a1c0509729a"
-  integrity sha512-YZiAIpkJAwQXBJLIQbRFayR5c+gJ35Vcz3bg954k7cd73zqjvhacJuL9RbrzPz8qPmZdgqP6EUKwy0PCNhaaPA==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.22.5"
-
-"@babel/plugin-syntax-import-assertions@^7.24.1":
-  version "7.24.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-import-assertions/-/plugin-syntax-import-assertions-7.24.1.tgz#db3aad724153a00eaac115a3fb898de544e34971"
-  integrity sha512-IuwnI5XnuF189t91XbxmXeCDz3qs6iDRO7GJ++wcfgeXNs/8FmIlKcpDSXNVyuLQxlwvskmI3Ct73wUODkJBlQ==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.24.0"
-
-"@babel/plugin-syntax-import-attributes@^7.24.1":
-  version "7.24.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-import-attributes/-/plugin-syntax-import-attributes-7.24.1.tgz#c66b966c63b714c4eec508fcf5763b1f2d381093"
-  integrity sha512-zhQTMH0X2nVLnb04tz+s7AMuasX8U0FnpE+nHTOhSOINjWMnopoZTxtIKsd45n4GQ/HIZLyfIpoul8e2m0DnRA==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.24.0"
-
-"@babel/plugin-syntax-import-meta@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-import-meta/-/plugin-syntax-import-meta-7.10.4.tgz#ee601348c370fa334d2207be158777496521fd51"
-  integrity sha512-Yqfm+XDx0+Prh3VSeEQCPU81yC+JWZ2pDPFSS4ZdpfZhp4MkFMaDC1UqseovEKwSUpnIL7+vK+Clp7bfh0iD7g==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.10.4"
-
-"@babel/plugin-syntax-json-strings@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-json-strings/-/plugin-syntax-json-strings-7.8.3.tgz#01ca21b668cd8218c9e640cb6dd88c5412b2c96a"
-  integrity sha512-lY6kdGpWHvjoe2vk4WrAapEuBR69EMxZl+RoGRhrFGNYVK8mOPAW8VfbT/ZgrFbXlDNiiaxQnAtgVCZ6jv30EA==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.8.0"
-
-"@babel/plugin-syntax-jsx@^7.23.3":
-  version "7.23.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.23.3.tgz#8f2e4f8a9b5f9aa16067e142c1ac9cd9f810f473"
-  integrity sha512-EB2MELswq55OHUoRZLGg/zC7QWUKfNLpE57m/S2yr1uEneIgsTgrSzXP3NXEsMkVn76OlaVVnzN+ugObuYGwhg==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.22.5"
-
-"@babel/plugin-syntax-logical-assignment-operators@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-logical-assignment-operators/-/plugin-syntax-logical-assignment-operators-7.10.4.tgz#ca91ef46303530448b906652bac2e9fe9941f699"
-  integrity sha512-d8waShlpFDinQ5MtvGU9xDAOzKH47+FFoney2baFIoMr952hKOLp1HR7VszoZvOsV/4+RRszNY7D17ba0te0ig==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.10.4"
-
-"@babel/plugin-syntax-nullish-coalescing-operator@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-nullish-coalescing-operator/-/plugin-syntax-nullish-coalescing-operator-7.8.3.tgz#167ed70368886081f74b5c36c65a88c03b66d1a9"
-  integrity sha512-aSff4zPII1u2QD7y+F8oDsz19ew4IGEJg9SVW+bqwpwtfFleiQDMdzA/R+UlWDzfnHFCxxleFT0PMIrR36XLNQ==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.8.0"
-
-"@babel/plugin-syntax-numeric-separator@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-numeric-separator/-/plugin-syntax-numeric-separator-7.10.4.tgz#b9b070b3e33570cd9fd07ba7fa91c0dd37b9af97"
-  integrity sha512-9H6YdfkcK/uOnY/K7/aA2xpzaAgkQn37yzWUMRK7OaPOqOpGS1+n0H5hxT9AUw9EsSjPW8SVyMJwYRtWs3X3ug==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.10.4"
-
-"@babel/plugin-syntax-object-rest-spread@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-object-rest-spread/-/plugin-syntax-object-rest-spread-7.8.3.tgz#60e225edcbd98a640332a2e72dd3e66f1af55871"
-  integrity sha512-XoqMijGZb9y3y2XskN+P1wUGiVwWZ5JmoDRwx5+3GmEplNyVM2s2Dg8ILFQm8rWM48orGy5YpI5Bl8U1y7ydlA==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.8.0"
-
-"@babel/plugin-syntax-optional-catch-binding@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-optional-catch-binding/-/plugin-syntax-optional-catch-binding-7.8.3.tgz#6111a265bcfb020eb9efd0fdfd7d26402b9ed6c1"
-  integrity sha512-6VPD0Pc1lpTqw0aKoeRTMiB+kWhAoT24PA+ksWSBrFtl5SIRVpZlwN3NNPQjehA2E/91FV3RjLWoVTglWcSV3Q==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.8.0"
-
-"@babel/plugin-syntax-optional-chaining@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-optional-chaining/-/plugin-syntax-optional-chaining-7.8.3.tgz#4f69c2ab95167e0180cd5336613f8c5788f7d48a"
-  integrity sha512-KoK9ErH1MBlCPxV0VANkXW2/dw4vlbGDrFgz8bmUsBGYkFRcbRwMh6cIJubdPrkxRwuGdtCk0v/wPTKbQgBjkg==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.8.0"
-
-"@babel/plugin-syntax-private-property-in-object@^7.14.5":
-  version "7.14.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-private-property-in-object/-/plugin-syntax-private-property-in-object-7.14.5.tgz#0dc6671ec0ea22b6e94a1114f857970cd39de1ad"
-  integrity sha512-0wVnp9dxJ72ZUJDV27ZfbSj6iHLoytYZmh3rFcxNnvsJF3ktkzLDZPy/mA17HGsaQT3/DQsWYX1f1QGWkCoVUg==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.14.5"
-
-"@babel/plugin-syntax-top-level-await@^7.14.5":
-  version "7.14.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-top-level-await/-/plugin-syntax-top-level-await-7.14.5.tgz#c1cfdadc35a646240001f06138247b741c34d94c"
-  integrity sha512-hx++upLv5U1rgYfwe1xBQUhRmU41NEvpUvrp8jkrSCdvGSnM5/qdRMtylJ6PG5OFkBaHkbTAKTnd3/YyESRHFw==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.14.5"
-
-"@babel/plugin-syntax-typescript@^7.23.3":
-  version "7.23.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.23.3.tgz#24f460c85dbbc983cd2b9c4994178bcc01df958f"
-  integrity sha512-9EiNjVJOMwCO+43TqoTrgQ8jMwcAd0sWyXi9RPfIsLTj4R2MADDDQXELhffaUx/uJv2AYcxBgPwH6j4TIA4ytQ==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.22.5"
-
-"@babel/plugin-syntax-unicode-sets-regex@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-unicode-sets-regex/-/plugin-syntax-unicode-sets-regex-7.18.6.tgz#d49a3b3e6b52e5be6740022317580234a6a47357"
-  integrity sha512-727YkEAPwSIQTv5im8QHz3upqp92JTWhidIC81Tdx4VJYIte/VndKf1qKrfnnhPLiPghStWfvC/iFaMCQu7Nqg==
-  dependencies:
-    "@babel/helper-create-regexp-features-plugin" "^7.18.6"
-    "@babel/helper-plugin-utils" "^7.18.6"
-
-"@babel/plugin-transform-arrow-functions@^7.24.1":
-  version "7.24.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.24.1.tgz#2bf263617060c9cc45bcdbf492b8cc805082bf27"
-  integrity sha512-ngT/3NkRhsaep9ck9uj2Xhv9+xB1zShY3tM3g6om4xxCELwCDN4g4Aq5dRn48+0hasAql7s2hdBOysCfNpr4fw==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.24.0"
-
-"@babel/plugin-transform-async-generator-functions@^7.24.3":
-  version "7.24.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-async-generator-functions/-/plugin-transform-async-generator-functions-7.24.3.tgz#8fa7ae481b100768cc9842c8617808c5352b8b89"
-  integrity sha512-Qe26CMYVjpQxJ8zxM1340JFNjZaF+ISWpr1Kt/jGo+ZTUzKkfw/pphEWbRCb+lmSM6k/TOgfYLvmbHkUQ0asIg==
-  dependencies:
-    "@babel/helper-environment-visitor" "^7.22.20"
-    "@babel/helper-plugin-utils" "^7.24.0"
-    "@babel/helper-remap-async-to-generator" "^7.22.20"
-    "@babel/plugin-syntax-async-generators" "^7.8.4"
-
-"@babel/plugin-transform-async-to-generator@^7.24.1":
-  version "7.24.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.24.1.tgz#0e220703b89f2216800ce7b1c53cb0cf521c37f4"
-  integrity sha512-AawPptitRXp1y0n4ilKcGbRYWfbbzFWz2NqNu7dacYDtFtz0CMjG64b3LQsb3KIgnf4/obcUL78hfaOS7iCUfw==
-  dependencies:
-    "@babel/helper-module-imports" "^7.24.1"
-    "@babel/helper-plugin-utils" "^7.24.0"
-    "@babel/helper-remap-async-to-generator" "^7.22.20"
-
-"@babel/plugin-transform-block-scoped-functions@^7.24.1":
-  version "7.24.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.24.1.tgz#1c94799e20fcd5c4d4589523bbc57b7692979380"
-  integrity sha512-TWWC18OShZutrv9C6mye1xwtam+uNi2bnTOCBUd5sZxyHOiWbU6ztSROofIMrK84uweEZC219POICK/sTYwfgg==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.24.0"
-
-"@babel/plugin-transform-block-scoping@^7.24.5":
-  version "7.24.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.24.5.tgz#89574191397f85661d6f748d4b89ee4d9ee69a2a"
-  integrity sha512-sMfBc3OxghjC95BkYrYocHL3NaOplrcaunblzwXhGmlPwpmfsxr4vK+mBBt49r+S240vahmv+kUxkeKgs+haCw==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.24.5"
-
-"@babel/plugin-transform-class-properties@^7.22.5":
-  version "7.23.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-class-properties/-/plugin-transform-class-properties-7.23.3.tgz#35c377db11ca92a785a718b6aa4e3ed1eb65dc48"
-  integrity sha512-uM+AN8yCIjDPccsKGlw271xjJtGii+xQIF/uMPS8H15L12jZTsLfF4o5vNO7d/oUguOyfdikHGc/yi9ge4SGIg==
-  dependencies:
-    "@babel/helper-create-class-features-plugin" "^7.22.15"
-    "@babel/helper-plugin-utils" "^7.22.5"
-
-"@babel/plugin-transform-class-properties@^7.24.1":
-  version "7.24.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-class-properties/-/plugin-transform-class-properties-7.24.1.tgz#bcbf1aef6ba6085cfddec9fc8d58871cf011fc29"
-  integrity sha512-OMLCXi0NqvJfORTaPQBwqLXHhb93wkBKZ4aNwMl6WtehO7ar+cmp+89iPEQPqxAnxsOKTaMcs3POz3rKayJ72g==
-  dependencies:
-    "@babel/helper-create-class-features-plugin" "^7.24.1"
-    "@babel/helper-plugin-utils" "^7.24.0"
-
-"@babel/plugin-transform-class-static-block@^7.24.4":
-  version "7.24.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-class-static-block/-/plugin-transform-class-static-block-7.24.4.tgz#1a4653c0cf8ac46441ec406dece6e9bc590356a4"
-  integrity sha512-B8q7Pz870Hz/q9UgP8InNpY01CSLDSCyqX7zcRuv3FcPl87A2G17lASroHWaCtbdIcbYzOZ7kWmXFKbijMSmFg==
-  dependencies:
-    "@babel/helper-create-class-features-plugin" "^7.24.4"
-    "@babel/helper-plugin-utils" "^7.24.0"
-    "@babel/plugin-syntax-class-static-block" "^7.14.5"
-
-"@babel/plugin-transform-classes@^7.24.5":
-  version "7.24.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-classes/-/plugin-transform-classes-7.24.5.tgz#05e04a09df49a46348299a0e24bfd7e901129339"
-  integrity sha512-gWkLP25DFj2dwe9Ck8uwMOpko4YsqyfZJrOmqqcegeDYEbp7rmn4U6UQZNj08UF6MaX39XenSpKRCvpDRBtZ7Q==
-  dependencies:
-    "@babel/helper-annotate-as-pure" "^7.22.5"
-    "@babel/helper-compilation-targets" "^7.23.6"
-    "@babel/helper-environment-visitor" "^7.22.20"
-    "@babel/helper-function-name" "^7.23.0"
-    "@babel/helper-plugin-utils" "^7.24.5"
-    "@babel/helper-replace-supers" "^7.24.1"
-    "@babel/helper-split-export-declaration" "^7.24.5"
-    globals "^11.1.0"
-
-"@babel/plugin-transform-computed-properties@^7.24.1":
-  version "7.24.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.24.1.tgz#bc7e787f8e021eccfb677af5f13c29a9934ed8a7"
-  integrity sha512-5pJGVIUfJpOS+pAqBQd+QMaTD2vCL/HcePooON6pDpHgRp4gNRmzyHTPIkXntwKsq3ayUFVfJaIKPw2pOkOcTw==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.24.0"
-    "@babel/template" "^7.24.0"
-
-"@babel/plugin-transform-destructuring@^7.24.5":
-  version "7.24.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.24.5.tgz#80843ee6a520f7362686d1a97a7b53544ede453c"
-  integrity sha512-SZuuLyfxvsm+Ah57I/i1HVjveBENYK9ue8MJ7qkc7ndoNjqquJiElzA7f5yaAXjyW2hKojosOTAQQRX50bPSVg==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.24.5"
-
-"@babel/plugin-transform-dotall-regex@^7.24.1":
-  version "7.24.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.24.1.tgz#d56913d2f12795cc9930801b84c6f8c47513ac13"
-  integrity sha512-p7uUxgSoZwZ2lPNMzUkqCts3xlp8n+o05ikjy7gbtFJSt9gdU88jAmtfmOxHM14noQXBxfgzf2yRWECiNVhTCw==
-  dependencies:
-    "@babel/helper-create-regexp-features-plugin" "^7.22.15"
-    "@babel/helper-plugin-utils" "^7.24.0"
-
-"@babel/plugin-transform-duplicate-keys@^7.24.1":
-  version "7.24.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.24.1.tgz#5347a797fe82b8d09749d10e9f5b83665adbca88"
-  integrity sha512-msyzuUnvsjsaSaocV6L7ErfNsa5nDWL1XKNnDePLgmz+WdU4w/J8+AxBMrWfi9m4IxfL5sZQKUPQKDQeeAT6lA==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.24.0"
-
-"@babel/plugin-transform-dynamic-import@^7.24.1":
-  version "7.24.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-dynamic-import/-/plugin-transform-dynamic-import-7.24.1.tgz#2a5a49959201970dd09a5fca856cb651e44439dd"
-  integrity sha512-av2gdSTyXcJVdI+8aFZsCAtR29xJt0S5tas+Ef8NvBNmD1a+N/3ecMLeMBgfcK+xzsjdLDT6oHt+DFPyeqUbDA==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.24.0"
-    "@babel/plugin-syntax-dynamic-import" "^7.8.3"
-
-"@babel/plugin-transform-exponentiation-operator@^7.24.1":
-  version "7.24.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.24.1.tgz#6650ebeb5bd5c012d5f5f90a26613a08162e8ba4"
-  integrity sha512-U1yX13dVBSwS23DEAqU+Z/PkwE9/m7QQy8Y9/+Tdb8UWYaGNDYwTLi19wqIAiROr8sXVum9A/rtiH5H0boUcTw==
-  dependencies:
-    "@babel/helper-builder-binary-assignment-operator-visitor" "^7.22.15"
-    "@babel/helper-plugin-utils" "^7.24.0"
-
-"@babel/plugin-transform-export-namespace-from@^7.24.1":
-  version "7.24.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-export-namespace-from/-/plugin-transform-export-namespace-from-7.24.1.tgz#f033541fc036e3efb2dcb58eedafd4f6b8078acd"
-  integrity sha512-Ft38m/KFOyzKw2UaJFkWG9QnHPG/Q/2SkOrRk4pNBPg5IPZ+dOxcmkK5IyuBcxiNPyyYowPGUReyBvrvZs7IlQ==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.24.0"
-    "@babel/plugin-syntax-export-namespace-from" "^7.8.3"
-
-"@babel/plugin-transform-flow-strip-types@^7.23.3":
-  version "7.23.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-flow-strip-types/-/plugin-transform-flow-strip-types-7.23.3.tgz#cfa7ca159cc3306fab526fc67091556b51af26ff"
-  integrity sha512-26/pQTf9nQSNVJCrLB1IkHUKyPxR+lMrH2QDPG89+Znu9rAMbtrybdbWeE9bb7gzjmE5iXHEY+e0HUwM6Co93Q==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.22.5"
-    "@babel/plugin-syntax-flow" "^7.23.3"
-
-"@babel/plugin-transform-for-of@^7.24.1":
-  version "7.24.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.24.1.tgz#67448446b67ab6c091360ce3717e7d3a59e202fd"
-  integrity sha512-OxBdcnF04bpdQdR3i4giHZNZQn7cm8RQKcSwA17wAAqEELo1ZOwp5FFgeptWUQXFyT9kwHo10aqqauYkRZPCAg==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.24.0"
-    "@babel/helper-skip-transparent-expression-wrappers" "^7.22.5"
-
-"@babel/plugin-transform-function-name@^7.24.1":
-  version "7.24.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.24.1.tgz#8cba6f7730626cc4dfe4ca2fa516215a0592b361"
-  integrity sha512-BXmDZpPlh7jwicKArQASrj8n22/w6iymRnvHYYd2zO30DbE277JO20/7yXJT3QxDPtiQiOxQBbZH4TpivNXIxA==
-  dependencies:
-    "@babel/helper-compilation-targets" "^7.23.6"
-    "@babel/helper-function-name" "^7.23.0"
-    "@babel/helper-plugin-utils" "^7.24.0"
-
-"@babel/plugin-transform-json-strings@^7.24.1":
-  version "7.24.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-json-strings/-/plugin-transform-json-strings-7.24.1.tgz#08e6369b62ab3e8a7b61089151b161180c8299f7"
-  integrity sha512-U7RMFmRvoasscrIFy5xA4gIp8iWnWubnKkKuUGJjsuOH7GfbMkB+XZzeslx2kLdEGdOJDamEmCqOks6e8nv8DQ==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.24.0"
-    "@babel/plugin-syntax-json-strings" "^7.8.3"
-
-"@babel/plugin-transform-literals@^7.24.1":
-  version "7.24.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-literals/-/plugin-transform-literals-7.24.1.tgz#0a1982297af83e6b3c94972686067df588c5c096"
-  integrity sha512-zn9pwz8U7nCqOYIiBaOxoQOtYmMODXTJnkxG4AtX8fPmnCRYWBOHD0qcpwS9e2VDSp1zNJYpdnFMIKb8jmwu6g==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.24.0"
-
-"@babel/plugin-transform-logical-assignment-operators@^7.24.1":
-  version "7.24.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-logical-assignment-operators/-/plugin-transform-logical-assignment-operators-7.24.1.tgz#719d8aded1aa94b8fb34e3a785ae8518e24cfa40"
-  integrity sha512-OhN6J4Bpz+hIBqItTeWJujDOfNP+unqv/NJgyhlpSqgBTPm37KkMmZV6SYcOj+pnDbdcl1qRGV/ZiIjX9Iy34w==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.24.0"
-    "@babel/plugin-syntax-logical-assignment-operators" "^7.10.4"
-
-"@babel/plugin-transform-member-expression-literals@^7.24.1":
-  version "7.24.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.24.1.tgz#896d23601c92f437af8b01371ad34beb75df4489"
-  integrity sha512-4ojai0KysTWXzHseJKa1XPNXKRbuUrhkOPY4rEGeR+7ChlJVKxFa3H3Bz+7tWaGKgJAXUWKOGmltN+u9B3+CVg==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.24.0"
-
-"@babel/plugin-transform-modules-amd@^7.24.1":
-  version "7.24.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.24.1.tgz#b6d829ed15258536977e9c7cc6437814871ffa39"
-  integrity sha512-lAxNHi4HVtjnHd5Rxg3D5t99Xm6H7b04hUS7EHIXcUl2EV4yl1gWdqZrNzXnSrHveL9qMdbODlLF55mvgjAfaQ==
-  dependencies:
-    "@babel/helper-module-transforms" "^7.23.3"
-    "@babel/helper-plugin-utils" "^7.24.0"
-
-"@babel/plugin-transform-modules-commonjs@^7.23.0", "@babel/plugin-transform-modules-commonjs@^7.23.3":
-  version "7.23.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.23.3.tgz#661ae831b9577e52be57dd8356b734f9700b53b4"
-  integrity sha512-aVS0F65LKsdNOtcz6FRCpE4OgsP2OFnW46qNxNIX9h3wuzaNcSQsJysuMwqSibC98HPrf2vCgtxKNwS0DAlgcA==
-  dependencies:
-    "@babel/helper-module-transforms" "^7.23.3"
-    "@babel/helper-plugin-utils" "^7.22.5"
-    "@babel/helper-simple-access" "^7.22.5"
-
-"@babel/plugin-transform-modules-commonjs@^7.24.1":
-  version "7.24.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.24.1.tgz#e71ba1d0d69e049a22bf90b3867e263823d3f1b9"
-  integrity sha512-szog8fFTUxBfw0b98gEWPaEqF42ZUD/T3bkynW/wtgx2p/XCP55WEsb+VosKceRSd6njipdZvNogqdtI4Q0chw==
-  dependencies:
-    "@babel/helper-module-transforms" "^7.23.3"
-    "@babel/helper-plugin-utils" "^7.24.0"
-    "@babel/helper-simple-access" "^7.22.5"
-
-"@babel/plugin-transform-modules-systemjs@^7.24.1":
-  version "7.24.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.24.1.tgz#2b9625a3d4e445babac9788daec39094e6b11e3e"
-  integrity sha512-mqQ3Zh9vFO1Tpmlt8QPnbwGHzNz3lpNEMxQb1kAemn/erstyqw1r9KeOlOfo3y6xAnFEcOv2tSyrXfmMk+/YZA==
-  dependencies:
-    "@babel/helper-hoist-variables" "^7.22.5"
-    "@babel/helper-module-transforms" "^7.23.3"
-    "@babel/helper-plugin-utils" "^7.24.0"
-    "@babel/helper-validator-identifier" "^7.22.20"
-
-"@babel/plugin-transform-modules-umd@^7.24.1":
-  version "7.24.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.24.1.tgz#69220c66653a19cf2c0872b9c762b9a48b8bebef"
-  integrity sha512-tuA3lpPj+5ITfcCluy6nWonSL7RvaG0AOTeAuvXqEKS34lnLzXpDb0dcP6K8jD0zWZFNDVly90AGFJPnm4fOYg==
-  dependencies:
-    "@babel/helper-module-transforms" "^7.23.3"
-    "@babel/helper-plugin-utils" "^7.24.0"
-
-"@babel/plugin-transform-named-capturing-groups-regex@^7.22.5":
-  version "7.22.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.22.5.tgz#67fe18ee8ce02d57c855185e27e3dc959b2e991f"
-  integrity sha512-YgLLKmS3aUBhHaxp5hi1WJTgOUb/NCuDHzGT9z9WTt3YG+CPRhJs6nprbStx6DnWM4dh6gt7SU3sZodbZ08adQ==
-  dependencies:
-    "@babel/helper-create-regexp-features-plugin" "^7.22.5"
-    "@babel/helper-plugin-utils" "^7.22.5"
-
-"@babel/plugin-transform-new-target@^7.24.1":
-  version "7.24.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.24.1.tgz#29c59988fa3d0157de1c871a28cd83096363cc34"
-  integrity sha512-/rurytBM34hYy0HKZQyA0nHbQgQNFm4Q/BOc9Hflxi2X3twRof7NaE5W46j4kQitm7SvACVRXsa6N/tSZxvPug==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.24.0"
-
-"@babel/plugin-transform-nullish-coalescing-operator@^7.22.11":
-  version "7.23.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-nullish-coalescing-operator/-/plugin-transform-nullish-coalescing-operator-7.23.4.tgz#45556aad123fc6e52189ea749e33ce090637346e"
-  integrity sha512-jHE9EVVqHKAQx+VePv5LLGHjmHSJR76vawFPTdlxR/LVJPfOEGxREQwQfjuZEOPTwG92X3LINSh3M40Rv4zpVA==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.22.5"
-    "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.3"
-
-"@babel/plugin-transform-nullish-coalescing-operator@^7.24.1":
-  version "7.24.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-nullish-coalescing-operator/-/plugin-transform-nullish-coalescing-operator-7.24.1.tgz#0cd494bb97cb07d428bd651632cb9d4140513988"
-  integrity sha512-iQ+caew8wRrhCikO5DrUYx0mrmdhkaELgFa+7baMcVuhxIkN7oxt06CZ51D65ugIb1UWRQ8oQe+HXAVM6qHFjw==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.24.0"
-    "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.3"
-
-"@babel/plugin-transform-numeric-separator@^7.24.1":
-  version "7.24.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-numeric-separator/-/plugin-transform-numeric-separator-7.24.1.tgz#5bc019ce5b3435c1cadf37215e55e433d674d4e8"
-  integrity sha512-7GAsGlK4cNL2OExJH1DzmDeKnRv/LXq0eLUSvudrehVA5Rgg4bIrqEUW29FbKMBRT0ztSqisv7kjP+XIC4ZMNw==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.24.0"
-    "@babel/plugin-syntax-numeric-separator" "^7.10.4"
-
-"@babel/plugin-transform-object-rest-spread@^7.24.5":
-  version "7.24.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-rest-spread/-/plugin-transform-object-rest-spread-7.24.5.tgz#f91bbcb092ff957c54b4091c86bda8372f0b10ef"
-  integrity sha512-7EauQHszLGM3ay7a161tTQH7fj+3vVM/gThlz5HpFtnygTxjrlvoeq7MPVA1Vy9Q555OB8SnAOsMkLShNkkrHA==
-  dependencies:
-    "@babel/helper-compilation-targets" "^7.23.6"
-    "@babel/helper-plugin-utils" "^7.24.5"
-    "@babel/plugin-syntax-object-rest-spread" "^7.8.3"
-    "@babel/plugin-transform-parameters" "^7.24.5"
-
-"@babel/plugin-transform-object-super@^7.24.1":
-  version "7.24.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.24.1.tgz#e71d6ab13483cca89ed95a474f542bbfc20a0520"
-  integrity sha512-oKJqR3TeI5hSLRxudMjFQ9re9fBVUU0GICqM3J1mi8MqlhVr6hC/ZN4ttAyMuQR6EZZIY6h/exe5swqGNNIkWQ==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.24.0"
-    "@babel/helper-replace-supers" "^7.24.1"
-
-"@babel/plugin-transform-optional-catch-binding@^7.24.1":
-  version "7.24.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-optional-catch-binding/-/plugin-transform-optional-catch-binding-7.24.1.tgz#92a3d0efe847ba722f1a4508669b23134669e2da"
-  integrity sha512-oBTH7oURV4Y+3EUrf6cWn1OHio3qG/PVwO5J03iSJmBg6m2EhKjkAu/xuaXaYwWW9miYtvbWv4LNf0AmR43LUA==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.24.0"
-    "@babel/plugin-syntax-optional-catch-binding" "^7.8.3"
-
-"@babel/plugin-transform-optional-chaining@^7.23.0":
-  version "7.23.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-optional-chaining/-/plugin-transform-optional-chaining-7.23.4.tgz#6acf61203bdfc4de9d4e52e64490aeb3e52bd017"
-  integrity sha512-ZU8y5zWOfjM5vZ+asjgAPwDaBjJzgufjES89Rs4Lpq63O300R/kOz30WCLo6BxxX6QVEilwSlpClnG5cZaikTA==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.22.5"
-    "@babel/helper-skip-transparent-expression-wrappers" "^7.22.5"
-    "@babel/plugin-syntax-optional-chaining" "^7.8.3"
-
-"@babel/plugin-transform-optional-chaining@^7.24.1", "@babel/plugin-transform-optional-chaining@^7.24.5":
-  version "7.24.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-optional-chaining/-/plugin-transform-optional-chaining-7.24.5.tgz#a6334bebd7f9dd3df37447880d0bd64b778e600f"
-  integrity sha512-xWCkmwKT+ihmA6l7SSTpk8e4qQl/274iNbSKRRS8mpqFR32ksy36+a+LWY8OXCCEefF8WFlnOHVsaDI2231wBg==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.24.5"
-    "@babel/helper-skip-transparent-expression-wrappers" "^7.22.5"
-    "@babel/plugin-syntax-optional-chaining" "^7.8.3"
-
-"@babel/plugin-transform-parameters@^7.24.5":
-  version "7.24.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.24.5.tgz#5c3b23f3a6b8fed090f9b98f2926896d3153cc62"
-  integrity sha512-9Co00MqZ2aoky+4j2jhofErthm6QVLKbpQrvz20c3CH9KQCLHyNB+t2ya4/UrRpQGR+Wrwjg9foopoeSdnHOkA==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.24.5"
-
-"@babel/plugin-transform-private-methods@^7.22.5":
-  version "7.23.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-private-methods/-/plugin-transform-private-methods-7.23.3.tgz#b2d7a3c97e278bfe59137a978d53b2c2e038c0e4"
-  integrity sha512-UzqRcRtWsDMTLrRWFvUBDwmw06tCQH9Rl1uAjfh6ijMSmGYQ+fpdB+cnqRC8EMh5tuuxSv0/TejGL+7vyj+50g==
-  dependencies:
-    "@babel/helper-create-class-features-plugin" "^7.22.15"
-    "@babel/helper-plugin-utils" "^7.22.5"
-
-"@babel/plugin-transform-private-methods@^7.24.1":
-  version "7.24.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-private-methods/-/plugin-transform-private-methods-7.24.1.tgz#a0faa1ae87eff077e1e47a5ec81c3aef383dc15a"
-  integrity sha512-tGvisebwBO5em4PaYNqt4fkw56K2VALsAbAakY0FjTYqJp7gfdrgr7YX76Or8/cpik0W6+tj3rZ0uHU9Oil4tw==
-  dependencies:
-    "@babel/helper-create-class-features-plugin" "^7.24.1"
-    "@babel/helper-plugin-utils" "^7.24.0"
-
-"@babel/plugin-transform-private-property-in-object@^7.24.5":
-  version "7.24.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-private-property-in-object/-/plugin-transform-private-property-in-object-7.24.5.tgz#f5d1fcad36e30c960134cb479f1ca98a5b06eda5"
-  integrity sha512-JM4MHZqnWR04jPMujQDTBVRnqxpLLpx2tkn7iPn+Hmsc0Gnb79yvRWOkvqFOx3Z7P7VxiRIR22c4eGSNj87OBQ==
-  dependencies:
-    "@babel/helper-annotate-as-pure" "^7.22.5"
-    "@babel/helper-create-class-features-plugin" "^7.24.5"
-    "@babel/helper-plugin-utils" "^7.24.5"
-    "@babel/plugin-syntax-private-property-in-object" "^7.14.5"
-
-"@babel/plugin-transform-property-literals@^7.24.1":
-  version "7.24.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.24.1.tgz#d6a9aeab96f03749f4eebeb0b6ea8e90ec958825"
-  integrity sha512-LetvD7CrHmEx0G442gOomRr66d7q8HzzGGr4PMHGr+5YIm6++Yke+jxj246rpvsbyhJwCLxcTn6zW1P1BSenqA==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.24.0"
-
-"@babel/plugin-transform-regenerator@^7.24.1":
-  version "7.24.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.24.1.tgz#625b7545bae52363bdc1fbbdc7252b5046409c8c"
-  integrity sha512-sJwZBCzIBE4t+5Q4IGLaaun5ExVMRY0lYwos/jNecjMrVCygCdph3IKv0tkP5Fc87e/1+bebAmEAGBfnRD+cnw==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.24.0"
-    regenerator-transform "^0.15.2"
-
-"@babel/plugin-transform-reserved-words@^7.24.1":
-  version "7.24.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.24.1.tgz#8de729f5ecbaaf5cf83b67de13bad38a21be57c1"
-  integrity sha512-JAclqStUfIwKN15HrsQADFgeZt+wexNQ0uLhuqvqAUFoqPMjEcFCYZBhq0LUdz6dZK/mD+rErhW71fbx8RYElg==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.24.0"
-
-"@babel/plugin-transform-shorthand-properties@^7.24.1":
-  version "7.24.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.24.1.tgz#ba9a09144cf55d35ec6b93a32253becad8ee5b55"
-  integrity sha512-LyjVB1nsJ6gTTUKRjRWx9C1s9hE7dLfP/knKdrfeH9UPtAGjYGgxIbFfx7xyLIEWs7Xe1Gnf8EWiUqfjLhInZA==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.24.0"
-
-"@babel/plugin-transform-spread@^7.24.1":
-  version "7.24.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-spread/-/plugin-transform-spread-7.24.1.tgz#a1acf9152cbf690e4da0ba10790b3ac7d2b2b391"
-  integrity sha512-KjmcIM+fxgY+KxPVbjelJC6hrH1CgtPmTvdXAfn3/a9CnWGSTY7nH4zm5+cjmWJybdcPSsD0++QssDsjcpe47g==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.24.0"
-    "@babel/helper-skip-transparent-expression-wrappers" "^7.22.5"
-
-"@babel/plugin-transform-sticky-regex@^7.24.1":
-  version "7.24.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.24.1.tgz#f03e672912c6e203ed8d6e0271d9c2113dc031b9"
-  integrity sha512-9v0f1bRXgPVcPrngOQvLXeGNNVLc8UjMVfebo9ka0WF3/7+aVUHmaJVT3sa0XCzEFioPfPHZiOcYG9qOsH63cw==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.24.0"
-
-"@babel/plugin-transform-template-literals@^7.24.1":
-  version "7.24.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.24.1.tgz#15e2166873a30d8617e3e2ccadb86643d327aab7"
-  integrity sha512-WRkhROsNzriarqECASCNu/nojeXCDTE/F2HmRgOzi7NGvyfYGq1NEjKBK3ckLfRgGc6/lPAqP0vDOSw3YtG34g==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.24.0"
-
-"@babel/plugin-transform-typeof-symbol@^7.24.5":
-  version "7.24.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.24.5.tgz#703cace5ef74155fb5eecab63cbfc39bdd25fe12"
-  integrity sha512-UTGnhYVZtTAjdwOTzT+sCyXmTn8AhaxOS/MjG9REclZ6ULHWF9KoCZur0HSGU7hk8PdBFKKbYe6+gqdXWz84Jg==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.24.5"
-
-"@babel/plugin-transform-typescript@^7.23.3":
-  version "7.23.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.23.6.tgz#aa36a94e5da8d94339ae3a4e22d40ed287feb34c"
-  integrity sha512-6cBG5mBvUu4VUD04OHKnYzbuHNP8huDsD3EDqqpIpsswTDoqHCjLoHb6+QgsV1WsT2nipRqCPgxD3LXnEO7XfA==
-  dependencies:
-    "@babel/helper-annotate-as-pure" "^7.22.5"
-    "@babel/helper-create-class-features-plugin" "^7.23.6"
-    "@babel/helper-plugin-utils" "^7.22.5"
-    "@babel/plugin-syntax-typescript" "^7.23.3"
-
-"@babel/plugin-transform-unicode-escapes@^7.24.1":
-  version "7.24.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.24.1.tgz#fb3fa16676549ac7c7449db9b342614985c2a3a4"
-  integrity sha512-RlkVIcWT4TLI96zM660S877E7beKlQw7Ig+wqkKBiWfj0zH5Q4h50q6er4wzZKRNSYpfo6ILJ+hrJAGSX2qcNw==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.24.0"
-
-"@babel/plugin-transform-unicode-property-regex@^7.24.1":
-  version "7.24.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-property-regex/-/plugin-transform-unicode-property-regex-7.24.1.tgz#56704fd4d99da81e5e9f0c0c93cabd91dbc4889e"
-  integrity sha512-Ss4VvlfYV5huWApFsF8/Sq0oXnGO+jB+rijFEFugTd3cwSObUSnUi88djgR5528Csl0uKlrI331kRqe56Ov2Ng==
-  dependencies:
-    "@babel/helper-create-regexp-features-plugin" "^7.22.15"
-    "@babel/helper-plugin-utils" "^7.24.0"
-
-"@babel/plugin-transform-unicode-regex@^7.24.1":
-  version "7.24.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.24.1.tgz#57c3c191d68f998ac46b708380c1ce4d13536385"
-  integrity sha512-2A/94wgZgxfTsiLaQ2E36XAOdcZmGAaEEgVmxQWwZXWkGhvoHbaqXcKnU8zny4ycpu3vNqg0L/PcCiYtHtA13g==
-  dependencies:
-    "@babel/helper-create-regexp-features-plugin" "^7.22.15"
-    "@babel/helper-plugin-utils" "^7.24.0"
-
-"@babel/plugin-transform-unicode-sets-regex@^7.24.1":
-  version "7.24.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-sets-regex/-/plugin-transform-unicode-sets-regex-7.24.1.tgz#c1ea175b02afcffc9cf57a9c4658326625165b7f"
-  integrity sha512-fqj4WuzzS+ukpgerpAoOnMfQXwUHFxXUZUE84oL2Kao2N8uSlvcpnAidKASgsNgzZHBsHWvcm8s9FPWUhAb8fA==
-  dependencies:
-    "@babel/helper-create-regexp-features-plugin" "^7.22.15"
-    "@babel/helper-plugin-utils" "^7.24.0"
-
-"@babel/preset-env@^7.24.4":
-  version "7.24.5"
-  resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.24.5.tgz#6a9ac90bd5a5a9dae502af60dfc58c190551bbcd"
-  integrity sha512-UGK2ifKtcC8i5AI4cH+sbLLuLc2ktYSFJgBAXorKAsHUZmrQ1q6aQ6i3BvU24wWs2AAKqQB6kq3N9V9Gw1HiMQ==
-  dependencies:
-    "@babel/compat-data" "^7.24.4"
-    "@babel/helper-compilation-targets" "^7.23.6"
-    "@babel/helper-plugin-utils" "^7.24.5"
-    "@babel/helper-validator-option" "^7.23.5"
-    "@babel/plugin-bugfix-firefox-class-in-computed-class-key" "^7.24.5"
-    "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression" "^7.24.1"
-    "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining" "^7.24.1"
-    "@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly" "^7.24.1"
-    "@babel/plugin-proposal-private-property-in-object" "7.21.0-placeholder-for-preset-env.2"
-    "@babel/plugin-syntax-async-generators" "^7.8.4"
-    "@babel/plugin-syntax-class-properties" "^7.12.13"
-    "@babel/plugin-syntax-class-static-block" "^7.14.5"
-    "@babel/plugin-syntax-dynamic-import" "^7.8.3"
-    "@babel/plugin-syntax-export-namespace-from" "^7.8.3"
-    "@babel/plugin-syntax-import-assertions" "^7.24.1"
-    "@babel/plugin-syntax-import-attributes" "^7.24.1"
-    "@babel/plugin-syntax-import-meta" "^7.10.4"
-    "@babel/plugin-syntax-json-strings" "^7.8.3"
-    "@babel/plugin-syntax-logical-assignment-operators" "^7.10.4"
-    "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.3"
-    "@babel/plugin-syntax-numeric-separator" "^7.10.4"
-    "@babel/plugin-syntax-object-rest-spread" "^7.8.3"
-    "@babel/plugin-syntax-optional-catch-binding" "^7.8.3"
-    "@babel/plugin-syntax-optional-chaining" "^7.8.3"
-    "@babel/plugin-syntax-private-property-in-object" "^7.14.5"
-    "@babel/plugin-syntax-top-level-await" "^7.14.5"
-    "@babel/plugin-syntax-unicode-sets-regex" "^7.18.6"
-    "@babel/plugin-transform-arrow-functions" "^7.24.1"
-    "@babel/plugin-transform-async-generator-functions" "^7.24.3"
-    "@babel/plugin-transform-async-to-generator" "^7.24.1"
-    "@babel/plugin-transform-block-scoped-functions" "^7.24.1"
-    "@babel/plugin-transform-block-scoping" "^7.24.5"
-    "@babel/plugin-transform-class-properties" "^7.24.1"
-    "@babel/plugin-transform-class-static-block" "^7.24.4"
-    "@babel/plugin-transform-classes" "^7.24.5"
-    "@babel/plugin-transform-computed-properties" "^7.24.1"
-    "@babel/plugin-transform-destructuring" "^7.24.5"
-    "@babel/plugin-transform-dotall-regex" "^7.24.1"
-    "@babel/plugin-transform-duplicate-keys" "^7.24.1"
-    "@babel/plugin-transform-dynamic-import" "^7.24.1"
-    "@babel/plugin-transform-exponentiation-operator" "^7.24.1"
-    "@babel/plugin-transform-export-namespace-from" "^7.24.1"
-    "@babel/plugin-transform-for-of" "^7.24.1"
-    "@babel/plugin-transform-function-name" "^7.24.1"
-    "@babel/plugin-transform-json-strings" "^7.24.1"
-    "@babel/plugin-transform-literals" "^7.24.1"
-    "@babel/plugin-transform-logical-assignment-operators" "^7.24.1"
-    "@babel/plugin-transform-member-expression-literals" "^7.24.1"
-    "@babel/plugin-transform-modules-amd" "^7.24.1"
-    "@babel/plugin-transform-modules-commonjs" "^7.24.1"
-    "@babel/plugin-transform-modules-systemjs" "^7.24.1"
-    "@babel/plugin-transform-modules-umd" "^7.24.1"
-    "@babel/plugin-transform-named-capturing-groups-regex" "^7.22.5"
-    "@babel/plugin-transform-new-target" "^7.24.1"
-    "@babel/plugin-transform-nullish-coalescing-operator" "^7.24.1"
-    "@babel/plugin-transform-numeric-separator" "^7.24.1"
-    "@babel/plugin-transform-object-rest-spread" "^7.24.5"
-    "@babel/plugin-transform-object-super" "^7.24.1"
-    "@babel/plugin-transform-optional-catch-binding" "^7.24.1"
-    "@babel/plugin-transform-optional-chaining" "^7.24.5"
-    "@babel/plugin-transform-parameters" "^7.24.5"
-    "@babel/plugin-transform-private-methods" "^7.24.1"
-    "@babel/plugin-transform-private-property-in-object" "^7.24.5"
-    "@babel/plugin-transform-property-literals" "^7.24.1"
-    "@babel/plugin-transform-regenerator" "^7.24.1"
-    "@babel/plugin-transform-reserved-words" "^7.24.1"
-    "@babel/plugin-transform-shorthand-properties" "^7.24.1"
-    "@babel/plugin-transform-spread" "^7.24.1"
-    "@babel/plugin-transform-sticky-regex" "^7.24.1"
-    "@babel/plugin-transform-template-literals" "^7.24.1"
-    "@babel/plugin-transform-typeof-symbol" "^7.24.5"
-    "@babel/plugin-transform-unicode-escapes" "^7.24.1"
-    "@babel/plugin-transform-unicode-property-regex" "^7.24.1"
-    "@babel/plugin-transform-unicode-regex" "^7.24.1"
-    "@babel/plugin-transform-unicode-sets-regex" "^7.24.1"
-    "@babel/preset-modules" "0.1.6-no-external-plugins"
-    babel-plugin-polyfill-corejs2 "^0.4.10"
-    babel-plugin-polyfill-corejs3 "^0.10.4"
-    babel-plugin-polyfill-regenerator "^0.6.1"
-    core-js-compat "^3.31.0"
-    semver "^6.3.1"
-
-"@babel/preset-flow@^7.22.15":
-  version "7.23.3"
-  resolved "https://registry.yarnpkg.com/@babel/preset-flow/-/preset-flow-7.23.3.tgz#8084e08b9ccec287bd077ab288b286fab96ffab1"
-  integrity sha512-7yn6hl8RIv+KNk6iIrGZ+D06VhVY35wLVf23Cz/mMu1zOr7u4MMP4j0nZ9tLf8+4ZFpnib8cFYgB/oYg9hfswA==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.22.5"
-    "@babel/helper-validator-option" "^7.22.15"
-    "@babel/plugin-transform-flow-strip-types" "^7.23.3"
-
-"@babel/preset-modules@0.1.6-no-external-plugins":
-  version "0.1.6-no-external-plugins"
-  resolved "https://registry.yarnpkg.com/@babel/preset-modules/-/preset-modules-0.1.6-no-external-plugins.tgz#ccb88a2c49c817236861fee7826080573b8a923a"
-  integrity sha512-HrcgcIESLm9aIR842yhJ5RWan/gebQUJ6E/E5+rf0y9o6oj7w0Br+sWuL6kEQ/o/AdfvR1Je9jG18/gnpwjEyA==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
-    "@babel/types" "^7.4.4"
-    esutils "^2.0.2"
-
-"@babel/preset-typescript@^7.23.0":
-  version "7.23.3"
-  resolved "https://registry.yarnpkg.com/@babel/preset-typescript/-/preset-typescript-7.23.3.tgz#14534b34ed5b6d435aa05f1ae1c5e7adcc01d913"
-  integrity sha512-17oIGVlqz6CchO9RFYn5U6ZpWRZIngayYCtrPRSgANSwC2V1Jb+iP74nVxzzXJte8b8BYxrL1yY96xfhTBrNNQ==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.22.5"
-    "@babel/helper-validator-option" "^7.22.15"
-    "@babel/plugin-syntax-jsx" "^7.23.3"
-    "@babel/plugin-transform-modules-commonjs" "^7.23.3"
-    "@babel/plugin-transform-typescript" "^7.23.3"
-
-"@babel/register@^7.22.15":
-  version "7.23.7"
-  resolved "https://registry.yarnpkg.com/@babel/register/-/register-7.23.7.tgz#485a5e7951939d21304cae4af1719fdb887bc038"
-  integrity sha512-EjJeB6+kvpk+Y5DAkEAmbOBEFkh9OASx0huoEkqYTFxAZHzOAX2Oh5uwAUuL2rUddqfM0SA+KPXV2TbzoZ2kvQ==
-  dependencies:
-    clone-deep "^4.0.1"
-    find-cache-dir "^2.0.0"
-    make-dir "^2.1.0"
-    pirates "^4.0.6"
-    source-map-support "^0.5.16"
-
-"@babel/regjsgen@^0.8.0":
-  version "0.8.0"
-  resolved "https://registry.yarnpkg.com/@babel/regjsgen/-/regjsgen-0.8.0.tgz#f0ba69b075e1f05fb2825b7fad991e7adbb18310"
-  integrity sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA==
-
-"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.10", "@babel/runtime@^7.14.0", "@babel/runtime@^7.14.6", "@babel/runtime@^7.15.4", "@babel/runtime@^7.17.8", "@babel/runtime@^7.18.3", "@babel/runtime@^7.23.2", "@babel/runtime@^7.23.9", "@babel/runtime@^7.4.4", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
+"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.10", "@babel/runtime@^7.14.0", "@babel/runtime@^7.14.6", "@babel/runtime@^7.15.4", "@babel/runtime@^7.17.8", "@babel/runtime@^7.18.3", "@babel/runtime@^7.23.2", "@babel/runtime@^7.23.9", "@babel/runtime@^7.4.4", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
   version "7.23.9"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.9.tgz#47791a15e4603bb5f905bc0753801cf21d6345f7"
   integrity sha512-0CX6F+BI2s9dkUqr08KFrAIZgNFj75rdBU/DjCyYLIaV/quFjkk6T+EJ2LkZHyZTbEV4L5p97mNkUsHl2wLFAw==
   dependencies:
     regenerator-runtime "^0.14.0"
 
-"@babel/template@^7.22.15", "@babel/template@^7.23.9":
+"@babel/template@^7.23.9":
   version "7.23.9"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.23.9.tgz#f881d0487cba2828d3259dcb9ef5005a9731011a"
   integrity sha512-+xrD2BWLpvHKNmX2QbpdpsBaWnRxahMwJjO+KZk2JOElj5nSmKezyS1B4u+QbHMTX69t4ukm6hh9lsYQ7GHCKA==
@@ -1369,15 +337,6 @@
     "@babel/parser" "^7.23.9"
     "@babel/types" "^7.23.9"
 
-"@babel/template@^7.24.0":
-  version "7.24.0"
-  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.24.0.tgz#c6a524aa93a4a05d66aaf31654258fae69d87d50"
-  integrity sha512-Bkf2q8lMB0AFpX0NFEqSbx1OkTHf0f+0j82mkw+ZpzBnkk7e9Ql0891vlfgi+kHwOk8tQjiQHpqh4LaSa0fKEA==
-  dependencies:
-    "@babel/code-frame" "^7.23.5"
-    "@babel/parser" "^7.24.0"
-    "@babel/types" "^7.24.0"
-
 "@babel/template@^7.25.0":
   version "7.25.0"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.25.0.tgz#e733dc3134b4fede528c15bc95e89cb98c52592a"
@@ -1387,7 +346,7 @@
     "@babel/parser" "^7.25.0"
     "@babel/types" "^7.25.0"
 
-"@babel/traverse@^7.18.9", "@babel/traverse@^7.23.3", "@babel/traverse@^7.23.9", "@babel/traverse@^7.24.5", "@babel/traverse@^7.7.0":
+"@babel/traverse@^7.18.9", "@babel/traverse@^7.23.3", "@babel/traverse@^7.23.9", "@babel/traverse@^7.7.0":
   version "7.25.3"
   resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.25.3.tgz#f1b901951c83eda2f3e29450ce92743783373490"
   integrity sha512-HefgyP1x754oGCsKmV5reSmtV7IXj/kpaE1XYY+D9G5PvKKoFfSbiS4M77MdjuwlZKDIKFCffq9rPU+H/s3ZdQ==
@@ -1400,7 +359,7 @@
     debug "^4.3.1"
     globals "^11.1.0"
 
-"@babel/types@^7.0.0", "@babel/types@^7.18.9", "@babel/types@^7.20.7", "@babel/types@^7.21.3", "@babel/types@^7.22.15", "@babel/types@^7.22.19", "@babel/types@^7.22.5", "@babel/types@^7.23.0", "@babel/types@^7.23.6", "@babel/types@^7.23.9", "@babel/types@^7.4.4", "@babel/types@^7.7.0":
+"@babel/types@^7.0.0", "@babel/types@^7.18.9", "@babel/types@^7.20.7", "@babel/types@^7.21.3", "@babel/types@^7.22.15", "@babel/types@^7.22.5", "@babel/types@^7.23.6", "@babel/types@^7.23.9", "@babel/types@^7.7.0":
   version "7.23.9"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.23.9.tgz#1dd7b59a9a2b5c87f8b41e52770b5ecbf492e002"
   integrity sha512-dQjSq/7HaSjRM43FFGnv5keM2HsxpmyV1PfaSVm0nzzjwwTmjOe6J4bC8e3+pTEIgHaHj+1ZlLThRJ2auc/w1Q==
@@ -1409,24 +368,6 @@
     "@babel/helper-validator-identifier" "^7.22.20"
     to-fast-properties "^2.0.0"
 
-"@babel/types@^7.24.0":
-  version "7.24.0"
-  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.24.0.tgz#3b951f435a92e7333eba05b7566fd297960ea1bf"
-  integrity sha512-+j7a5c253RfKh8iABBhywc8NSfP5LURe7Uh4qpsh6jc+aLJguvmIUBdjSdEMQv2bENrCR5MfRdjGo7vzS/ob7w==
-  dependencies:
-    "@babel/helper-string-parser" "^7.23.4"
-    "@babel/helper-validator-identifier" "^7.22.20"
-    to-fast-properties "^2.0.0"
-
-"@babel/types@^7.24.5":
-  version "7.24.5"
-  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.24.5.tgz#7661930afc638a5383eb0c4aee59b74f38db84d7"
-  integrity sha512-6mQNsaLeXTw0nxYUYu+NSa4Hx4BlF1x1x8/PMFbiR+GBSr+2DkECc69b8hgy2frEodNcvPffeH8YfWd3LI6jhQ==
-  dependencies:
-    "@babel/helper-string-parser" "^7.24.1"
-    "@babel/helper-validator-identifier" "^7.24.5"
-    to-fast-properties "^2.0.0"
-
 "@babel/types@^7.25.0", "@babel/types@^7.25.2":
   version "7.25.2"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.25.2.tgz#55fb231f7dc958cd69ea141a4c2997e819646125"
@@ -2985,15 +1926,10 @@
   dependencies:
     "@sentry/types" "7.100.1"
 
-"@sindresorhus/merge-streams@^2.1.0":
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/@sindresorhus/merge-streams/-/merge-streams-2.3.0.tgz#719df7fb41766bc143369eaa0dd56d8dc87c9958"
-  integrity sha512-LtoMMhxAlorcGhmFYI+LhPgbPZCkgP6ra1YL604EeF6U98pLlQ3iWIGMdWSC+vWmPBWBNgmDBAhnAobLROJmwg==
-
-"@storybook/addon-actions@^8.2.9":
-  version "8.2.9"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-actions/-/addon-actions-8.2.9.tgz#5a27f07f276ec776fb768f5da9bfe2c43fe3e851"
-  integrity sha512-eh2teOqjga7aoClDVV+/b1gHJqsPwjiU1t+Hg/l4i2CkaBUNdYMEL90nR6fgReOdvvL5YhcPwJ8w38f9TrQcoQ==
+"@storybook/addon-actions@^8.3.0":
+  version "8.3.0"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-actions/-/addon-actions-8.3.0.tgz#0a5c2d7776ae201fa331bcdc48230fc866e854ac"
+  integrity sha512-HvAc3fW979JVw8CSKXZMouvgrJ2BNLNWaUB8jNokQb3Us00P6igVKLwg/pBV8GBgDr5Ng4pHYqi/ZH+xzEYFFw==
   dependencies:
     "@storybook/global" "^5.0.0"
     "@types/uuid" "^9.0.1"
@@ -3001,26 +1937,26 @@
     polished "^4.2.2"
     uuid "^9.0.0"
 
-"@storybook/addon-controls@^8.2.9":
-  version "8.2.9"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-controls/-/addon-controls-8.2.9.tgz#43f9ca53e2a709feee0c1fe6db3daee8953d2ddd"
-  integrity sha512-vaSE78KOE7SO0GrW4e+mdQphSNpvCX/FGybIRxyaKX9h8smoyUwRNHVyCS3ROHTwH324QWu7GDzsOVrnyXOv0A==
+"@storybook/addon-controls@^8.3.0":
+  version "8.3.0"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-controls/-/addon-controls-8.3.0.tgz#692bcdddd1db438a9cc7434ff947ebf215191542"
+  integrity sha512-Id4j6Neimkdq0OyfQ3qkHpKLisbN08M8pXHDI/A0VeF91xEGBdc1bJgS/EU+ifa24tr5SRYwlAlcBDAWJbZMfA==
   dependencies:
+    "@storybook/global" "^5.0.0"
     dequal "^2.0.2"
     lodash "^4.17.21"
     ts-dedent "^2.0.0"
 
-"@storybook/addon-docs@^8.2.9":
-  version "8.2.9"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-docs/-/addon-docs-8.2.9.tgz#bc6737cab5b3620b9291de7c14f92ad92b5a90db"
-  integrity sha512-flDOxFIGmXg+6lVdwTLMOKsGob1WrT7rG98mn1SNW0Nxhg3Wg+9pQuq1GLxEzKtAgSflmu+xcBRfYhsogyDXkw==
+"@storybook/addon-docs@^8.3.0":
+  version "8.3.0"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-docs/-/addon-docs-8.3.0.tgz#76469c7c24d932296d027407424c8876b06d658a"
+  integrity sha512-LrvWBDX5Vi//82Q78QRbTsG+9rJU9JJFAVPk1NnLp2Yn0F4FueVzIw8AabAkZFy0LHPMGV+EHpkPtYz4Czkhgw==
   dependencies:
-    "@babel/core" "^7.24.4"
     "@mdx-js/react" "^3.0.0"
-    "@storybook/blocks" "8.2.9"
-    "@storybook/csf-plugin" "8.2.9"
+    "@storybook/blocks" "8.3.0"
+    "@storybook/csf-plugin" "8.3.0"
     "@storybook/global" "^5.0.0"
-    "@storybook/react-dom-shim" "8.2.9"
+    "@storybook/react-dom-shim" "8.3.0"
     "@types/react" "^16.8.0 || ^17.0.0 || ^18.0.0"
     fs-extra "^11.1.0"
     react "^16.8.0 || ^17.0.0 || ^18.0.0"
@@ -3029,46 +1965,46 @@
     rehype-slug "^6.0.0"
     ts-dedent "^2.0.0"
 
-"@storybook/addon-mdx-gfm@^8.2.9":
-  version "8.2.9"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-mdx-gfm/-/addon-mdx-gfm-8.2.9.tgz#b86826d833dd2e4fd00e5f21520fcd7a924368aa"
-  integrity sha512-qpv3oVBVStXKcYmhmsEDVlWvdOpG4bHGOchCe2iU/wlcT5zFQSpQj2IoCNbj5MxhwAw2VobrAvRjNQjv95fYAg==
+"@storybook/addon-mdx-gfm@^8.3.0":
+  version "8.3.0"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-mdx-gfm/-/addon-mdx-gfm-8.3.0.tgz#2a6dadfa76b5f834a2a0f984ddcac0741f2495c8"
+  integrity sha512-qGaO5/3jd2mcxKiV4Gfloxgw4yvzCsj/ZwqysDIGVJtliguscWYbWE2JMz7zluUyt6nVMhQhDYkF9GnNU4yaoA==
   dependencies:
     remark-gfm "^4.0.0"
     ts-dedent "^2.0.0"
 
-"@storybook/addon-measure@^8.2.9":
-  version "8.2.9"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-measure/-/addon-measure-8.2.9.tgz#998995c31980d635132c42a8d621095e73adb9b6"
-  integrity sha512-XUfQtYRKWB2dfbPRmHuos816wt1JrLbtRld5ZC8J8ljeqZ4hFBPTQcgI5GAzZqjQuclLC0KuhlA/0bKxdxMMGA==
+"@storybook/addon-measure@^8.3.0":
+  version "8.3.0"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-measure/-/addon-measure-8.3.0.tgz#3a79b36ff08259c675ddaf099d14fdee06099484"
+  integrity sha512-0TZ2ihzX0mRr1rNrFDieDsIKASZ2qUg3eHDkskLKOhxwoUHqsLzXlvS/scKZ+zb8pgjrvsBAsjyPstlrK+z0Zg==
   dependencies:
     "@storybook/global" "^5.0.0"
     tiny-invariant "^1.3.1"
 
-"@storybook/addon-storysource@^8.2.9":
-  version "8.2.9"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-storysource/-/addon-storysource-8.2.9.tgz#c9e3e169d4b8ca646bdcd43cc5f6250fc21cc710"
-  integrity sha512-zSfw4FNjzSGdWvNhrjJgiqabQAklCXR3Xa0Hp5/5omG9Wl/JdiAKw9ysycQXovAv4VuubxS1x0pOTo6Wg40M3A==
+"@storybook/addon-storysource@^8.3.0":
+  version "8.3.0"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-storysource/-/addon-storysource-8.3.0.tgz#da8087d763fa93fb4ec5a6519786e00515be289d"
+  integrity sha512-+owWKfUebwccrdboIkCNsqXT25LVwha8XT5UbnHbclKqBkMwtWIyl3HMOkXZ8MGLgDF0dm00iLbO59jVRlhDyQ==
   dependencies:
-    "@storybook/source-loader" "8.2.9"
+    "@storybook/source-loader" "8.3.0"
     estraverse "^5.2.0"
     tiny-invariant "^1.3.1"
 
-"@storybook/addon-viewport@^8.2.9":
-  version "8.2.9"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-viewport/-/addon-viewport-8.2.9.tgz#56f7273450b72384bb79e9ddeab2f633f869be73"
-  integrity sha512-lyM24+DJEt8R0YZkJKee34NQWv0REACU6lYDalqJNdKS1sEwzLGWxg1hZXnw2JFdBID9NGVvyYU2w6LDozOB0g==
+"@storybook/addon-viewport@^8.3.0":
+  version "8.3.0"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-viewport/-/addon-viewport-8.3.0.tgz#30ec8e38ebbe22dfb0886f2b853ea90fa365309e"
+  integrity sha512-6h/0mKipUG6w2o5IOzyhvC/2ifJlSNIA60hLkJ291g42+ilzkydpby9TBN7FcnrVL3Bv+oLgkDLBWVCqma/fyw==
   dependencies:
     memoizerific "^1.11.3"
 
-"@storybook/blocks@8.2.9", "@storybook/blocks@^8.2.9":
-  version "8.2.9"
-  resolved "https://registry.yarnpkg.com/@storybook/blocks/-/blocks-8.2.9.tgz#3c9018619704cee23c9e69ff263e3c0aaa9a7ccc"
-  integrity sha512-5276q/s/UL8arwftuBXovUNHqYo/HPQFMGXEmjVVAMXUyFjzEAfKj3+xU897J6AuL+7XVZG32WnqA+X6LJMrcQ==
+"@storybook/blocks@8.3.0", "@storybook/blocks@^8.3.0":
+  version "8.3.0"
+  resolved "https://registry.yarnpkg.com/@storybook/blocks/-/blocks-8.3.0.tgz#afb6af3457a8772b3e9b5163f5e591985c1ef179"
+  integrity sha512-V7D5lv5R+GJya9cCZOCjmOVjhvP5J3KIaclQuuGGJda/ZD/SpwHcFOGSpo6sNR2UKHXXvb61oM8gRQQWDvqPlg==
   dependencies:
-    "@storybook/csf" "0.1.11"
+    "@storybook/csf" "^0.1.11"
     "@storybook/global" "^5.0.0"
-    "@storybook/icons" "^1.2.5"
+    "@storybook/icons" "^1.2.10"
     "@types/lodash" "^4.14.167"
     color-convert "^2.0.1"
     dequal "^2.0.2"
@@ -3081,12 +2017,12 @@
     ts-dedent "^2.0.0"
     util-deprecate "^1.0.2"
 
-"@storybook/builder-vite@8.2.9":
-  version "8.2.9"
-  resolved "https://registry.yarnpkg.com/@storybook/builder-vite/-/builder-vite-8.2.9.tgz#f140a8a8c5cf745c847d2f37841e0f2f98926fcc"
-  integrity sha512-MHD3ezRjKkJkOl0u7CRQoQD/LKd28YMWIcaz4YrV6ygokc0c3RFTlOefICQFgboc+1RwIUowxN1CJ2kJ7p4SWw==
+"@storybook/builder-vite@8.3.0":
+  version "8.3.0"
+  resolved "https://registry.yarnpkg.com/@storybook/builder-vite/-/builder-vite-8.3.0.tgz#39118813f6938b6544cb635e26c362b35f307c57"
+  integrity sha512-9qo3zcZkEpy69E7cx9OHHexBe9+25vH0p+4sWZSjl2sjqjhaxLN5eXnODQbDsOKZNRVrLVTGmKxfFJzAJFnY0w==
   dependencies:
-    "@storybook/csf-plugin" "8.2.9"
+    "@storybook/csf-plugin" "8.3.0"
     "@types/find-cache-dir" "^3.2.1"
     browser-assert "^1.2.1"
     es-module-lexer "^1.5.0"
@@ -3114,25 +2050,6 @@
   dependencies:
     "@storybook/global" "^5.0.0"
 
-"@storybook/codemod@8.2.9":
-  version "8.2.9"
-  resolved "https://registry.yarnpkg.com/@storybook/codemod/-/codemod-8.2.9.tgz#f6c7f43a5aa326b64544ad6f10038edc32293827"
-  integrity sha512-3yRx1lFMm1FXWVv+CKDiYM4gOQPEfpcZAQrjfcumxSDUrB091pnU1PeI92Prj3vCdi4+0oPNuN4yDGNUYTMP/A==
-  dependencies:
-    "@babel/core" "^7.24.4"
-    "@babel/preset-env" "^7.24.4"
-    "@babel/types" "^7.24.0"
-    "@storybook/core" "8.2.9"
-    "@storybook/csf" "0.1.11"
-    "@types/cross-spawn" "^6.0.2"
-    cross-spawn "^7.0.3"
-    globby "^14.0.1"
-    jscodeshift "^0.15.1"
-    lodash "^4.17.21"
-    prettier "^3.1.1"
-    recast "^0.23.5"
-    tiny-invariant "^1.3.1"
-
 "@storybook/components@^8.0.0":
   version "8.0.5"
   resolved "https://registry.yarnpkg.com/@storybook/components/-/components-8.0.5.tgz#e526b4600b4b8049108a1b63e71fee8d75ff8d3d"
@@ -3148,10 +2065,10 @@
     memoizerific "^1.11.3"
     util-deprecate "^1.0.2"
 
-"@storybook/components@^8.2.9":
-  version "8.2.9"
-  resolved "https://registry.yarnpkg.com/@storybook/components/-/components-8.2.9.tgz#a2394749d52940b7a224d1d4801d756b2750b488"
-  integrity sha512-OkkcZ/f/6o3GdFEEK9ZHKIGHWUHmavZUYs5xaSgU64bOrA2aqEFtfeWWitZYTv3Euhk8MVLWfyEMDfez0AlvDg==
+"@storybook/components@^8.3.0":
+  version "8.3.0"
+  resolved "https://registry.yarnpkg.com/@storybook/components/-/components-8.3.0.tgz#45c39e5b6768efafe8e7dfd946c01617da59ae1a"
+  integrity sha512-SO/iTkmWp3aYCIy8DEhRMoOn6K7lcKTPNC/YjTvOFFzwq/CLq86WNqz6aX+wV5n6MvWTs7evSwMoz7lp4Lc4sw==
 
 "@storybook/core-events@8.0.5", "@storybook/core-events@^8.0.0":
   version "8.0.5"
@@ -3160,37 +2077,30 @@
   dependencies:
     ts-dedent "^2.0.0"
 
-"@storybook/core@8.2.9":
-  version "8.2.9"
-  resolved "https://registry.yarnpkg.com/@storybook/core/-/core-8.2.9.tgz#68f8659014e06f4f65f6dbdf1dd10850f31d23b3"
-  integrity sha512-wSER8FpA6Il/jPyDfKm3yohxDtuhisNPTonMVzd3ulNWR4zERLddyO3HrHJJwdqYHLNk4SBFzwMGpQZVws1y0w==
+"@storybook/core@8.3.0":
+  version "8.3.0"
+  resolved "https://registry.yarnpkg.com/@storybook/core/-/core-8.3.0.tgz#c08ff10405fa935044678c8ae92c7be14dd01bdb"
+  integrity sha512-UeErpD0xRIP2nFA2TjPYxtEyv24O6VRfq2XXU5ki2QPYnxOxAPBbrMHCADjgBwNS4S2NUWTaVBYxybISVbrj+w==
   dependencies:
-    "@storybook/csf" "0.1.11"
+    "@storybook/csf" "^0.1.11"
     "@types/express" "^4.17.21"
-    "@types/node" "^18.0.0"
     browser-assert "^1.2.1"
-    esbuild "^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0"
+    esbuild "^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0 || ^0.22.0 || ^0.23.0"
     esbuild-register "^3.5.0"
     express "^4.19.2"
     process "^0.11.10"
     recast "^0.23.5"
-    util "^0.12.4"
+    semver "^7.6.2"
+    util "^0.12.5"
     ws "^8.2.3"
 
-"@storybook/csf-plugin@8.2.9":
-  version "8.2.9"
-  resolved "https://registry.yarnpkg.com/@storybook/csf-plugin/-/csf-plugin-8.2.9.tgz#1ef4a4f4bf6a601ffae110dc9722ded834e422fa"
-  integrity sha512-QQCFb3g12VQQEraDV1UfCmniGhQZKyT6oEt1Im6dzzPJj9NQk+6BjWoDep33CZhBHWoLryrMQd2fjuHxnFRNEA==
+"@storybook/csf-plugin@8.3.0":
+  version "8.3.0"
+  resolved "https://registry.yarnpkg.com/@storybook/csf-plugin/-/csf-plugin-8.3.0.tgz#33fbc6799e7e9cdcfbb41219ef2bf863b14096fc"
+  integrity sha512-sCmeN/OVYj95TKkMqJqxbaztIbdv5jCrtrXuNg4oJaGzNucmMNAbmv2jK2tCNE6Uz2X9IMRcseFX/h9TgjyJ9A==
   dependencies:
     unplugin "^1.3.1"
 
-"@storybook/csf@0.1.11":
-  version "0.1.11"
-  resolved "https://registry.yarnpkg.com/@storybook/csf/-/csf-0.1.11.tgz#ad685a4fe564a47a6b73571c2e7c07b526f4f71b"
-  integrity sha512-dHYFQH3mA+EtnCkHXzicbLgsvzYjcDJ1JWsogbItZogkPHgSJM/Wr71uMkcvw8v9mmCyP4NpXJuu6bPoVsOnzg==
-  dependencies:
-    type-fest "^2.19.0"
-
 "@storybook/csf@^0.0.1":
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/@storybook/csf/-/csf-0.0.1.tgz#95901507dc02f0bc6f9ac8ee1983e2fc5bb98ce6"
@@ -3198,6 +2108,13 @@
   dependencies:
     lodash "^4.17.15"
 
+"@storybook/csf@^0.1.11":
+  version "0.1.11"
+  resolved "https://registry.yarnpkg.com/@storybook/csf/-/csf-0.1.11.tgz#ad685a4fe564a47a6b73571c2e7c07b526f4f71b"
+  integrity sha512-dHYFQH3mA+EtnCkHXzicbLgsvzYjcDJ1JWsogbItZogkPHgSJM/Wr71uMkcvw8v9mmCyP4NpXJuu6bPoVsOnzg==
+  dependencies:
+    type-fest "^2.19.0"
+
 "@storybook/csf@^0.1.2":
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/@storybook/csf/-/csf-0.1.2.tgz#8e7452f0097507f5841b5ade3f5da1525bc9afb2"
@@ -3210,6 +2127,11 @@
   resolved "https://registry.yarnpkg.com/@storybook/global/-/global-5.0.0.tgz#b793d34b94f572c1d7d9e0f44fac4e0dbc9572ed"
   integrity sha512-FcOqPAXACP0I3oJ/ws6/rrPT9WGhu915Cg8D02a9YxLo0DE9zI+a9A5gRGvmQ09fiWPukqI8ZAEoQEdWUKMQdQ==
 
+"@storybook/icons@^1.2.10":
+  version "1.2.10"
+  resolved "https://registry.yarnpkg.com/@storybook/icons/-/icons-1.2.10.tgz#d3d44912a3a88f3f04f77ce2c23a7e47e796f766"
+  integrity sha512-310apKdDcjbbX2VSLWPwhEwAgjxTzVagrwucVZIdGPErwiAppX8KvBuWZgPo+rQLVrtH8S+pw1dbUwjcE6d7og==
+
 "@storybook/icons@^1.2.5":
   version "1.2.9"
   resolved "https://registry.yarnpkg.com/@storybook/icons/-/icons-1.2.9.tgz#bb4a51a79e186b62e2dd0e04928b8617ac573838"
@@ -3236,56 +2158,55 @@
     telejson "^7.2.0"
     ts-dedent "^2.0.0"
 
-"@storybook/manager-api@^8.2.9":
-  version "8.2.9"
-  resolved "https://registry.yarnpkg.com/@storybook/manager-api/-/manager-api-8.2.9.tgz#f09a83fce286bc48783c75e7d7184dd8a5381527"
-  integrity sha512-mkYvUlfqDw+0WbxIynh5TcrotmoXlumEsOA4+45zuNea8XpEgj5cNBUCnmfEO6yQ85swqkS8YYbMpg1cZyu/Vw==
+"@storybook/manager-api@^8.3.0":
+  version "8.3.0"
+  resolved "https://registry.yarnpkg.com/@storybook/manager-api/-/manager-api-8.3.0.tgz#0c3e33e3091be2122670b61ba601893c19d5dd47"
+  integrity sha512-5WBLEFHpe4H+9vZZLjNh7msIkyl9MPt4/C2nI+MXKZyU55xBBgiAy4fcD9aj02PcbhyR4JhLqbqmdeBe5Xafeg==
 
-"@storybook/preview-api@^8.2.9":
-  version "8.2.9"
-  resolved "https://registry.yarnpkg.com/@storybook/preview-api/-/preview-api-8.2.9.tgz#e35ca783a1d98174e73223856397a9767766a737"
-  integrity sha512-D8/t+a78OJqQAcT/ABa1C4YM/OaLGQ9IvCsp3Q9ruUqDCwuZBj8bG3D4477dlY4owX2ycC0rWYu3VvuK0EmJjA==
+"@storybook/preview-api@^8.3.0":
+  version "8.3.0"
+  resolved "https://registry.yarnpkg.com/@storybook/preview-api/-/preview-api-8.3.0.tgz#763126866e9dc8cc2ba6a9506bf84c020987b048"
+  integrity sha512-pHq/T7oWBfzc9TCIPYyJQUXuiUiFfmdrcYvuZE1kf46i7wXh9Q2/Kd3BUJWSCpBXUMoYfAxg9YysGljMII8LWA==
 
-"@storybook/react-dom-shim@8.2.9":
-  version "8.2.9"
-  resolved "https://registry.yarnpkg.com/@storybook/react-dom-shim/-/react-dom-shim-8.2.9.tgz#db31bdab3a995759a9e45b2dc2ca0888a75fc89d"
-  integrity sha512-uCAjSQEsNk8somVn1j/I1G9G/uUax5byHseIIV0Eq3gVXttGd7gaWcP+TDHtqIaenWHx4l+hCSuCesxiLWmx4Q==
+"@storybook/react-dom-shim@8.3.0":
+  version "8.3.0"
+  resolved "https://registry.yarnpkg.com/@storybook/react-dom-shim/-/react-dom-shim-8.3.0.tgz#e6c8c75ff725a9a096fb63b46dc4108e51428857"
+  integrity sha512-87X4cvgwFT1ll5SzXgQq6iGbkVCgxLBpBm58akF/hzpeRkwfJDncGi/A5hElOJrBg63IkznmSJE7tf9RkrboqQ==
 
-"@storybook/react-vite@^8.2.9":
-  version "8.2.9"
-  resolved "https://registry.yarnpkg.com/@storybook/react-vite/-/react-vite-8.2.9.tgz#4b836a7140d4c17796a57bbddebfc09185317294"
-  integrity sha512-Lw6FzcAaL7jX8Y8EsDzg32Lp0NdeNJZpj0LVwX5sLOQQA6w4i3PqlFINXDY28qCGo6wqKT+w44zhgwUcU5V0Ow==
+"@storybook/react-vite@^8.3.0":
+  version "8.3.0"
+  resolved "https://registry.yarnpkg.com/@storybook/react-vite/-/react-vite-8.3.0.tgz#95efa85132b540beeffce15d46a4c2bd6bab4080"
+  integrity sha512-VcKp/mpO8M+JsyprTGLLvAzwx7PChdWFDBasyQ0MO+YVwci78gPAZnfWNZaaEB2mdDgPPGuoSTwBgzZmP3FsPg==
   dependencies:
     "@joshwooding/vite-plugin-react-docgen-typescript" "0.3.1"
     "@rollup/pluginutils" "^5.0.2"
-    "@storybook/builder-vite" "8.2.9"
-    "@storybook/react" "8.2.9"
+    "@storybook/builder-vite" "8.3.0"
+    "@storybook/react" "8.3.0"
     find-up "^5.0.0"
     magic-string "^0.30.0"
     react-docgen "^7.0.0"
     resolve "^1.22.8"
     tsconfig-paths "^4.2.0"
 
-"@storybook/react@8.2.9", "@storybook/react@^8.2.9":
-  version "8.2.9"
-  resolved "https://registry.yarnpkg.com/@storybook/react/-/react-8.2.9.tgz#91348ab82e699a2d2f48b9721fe781782badc9ac"
-  integrity sha512-F2xZcTDxxjpbqt7eP8rEHmlksiKmE/qtPusEWEY4N4jK01kN+ncxSl8gkJpUohMEmAnVC5t/1v/sU57xv1DYpg==
+"@storybook/react@8.3.0", "@storybook/react@^8.3.0":
+  version "8.3.0"
+  resolved "https://registry.yarnpkg.com/@storybook/react/-/react-8.3.0.tgz#2619341ece6613f81eb1e6e056929525fbcdcf85"
+  integrity sha512-qd8IKXqaOG9m0VK0QukFMmKpjmm7sy1R3T681dLet8s+AEAimLH/RiBzd+0dxWng2H/Ng6ldUmCtd3Cs6w/EFQ==
   dependencies:
-    "@storybook/components" "^8.2.9"
+    "@storybook/components" "^8.3.0"
     "@storybook/global" "^5.0.0"
-    "@storybook/manager-api" "^8.2.9"
-    "@storybook/preview-api" "^8.2.9"
-    "@storybook/react-dom-shim" "8.2.9"
-    "@storybook/theming" "^8.2.9"
+    "@storybook/manager-api" "^8.3.0"
+    "@storybook/preview-api" "^8.3.0"
+    "@storybook/react-dom-shim" "8.3.0"
+    "@storybook/theming" "^8.3.0"
     "@types/escodegen" "^0.0.6"
     "@types/estree" "^0.0.51"
-    "@types/node" "^18.0.0"
+    "@types/node" "^22.0.0"
     acorn "^7.4.1"
     acorn-jsx "^5.3.1"
     acorn-walk "^7.2.0"
     escodegen "^2.1.0"
     html-tags "^3.1.0"
-    lodash "^4.17.21"
     prop-types "^15.7.2"
     react-element-to-jsx-string "^15.0.0"
     semver "^7.3.7"
@@ -3302,12 +2223,12 @@
     memoizerific "^1.11.3"
     qs "^6.10.0"
 
-"@storybook/source-loader@8.2.9":
-  version "8.2.9"
-  resolved "https://registry.yarnpkg.com/@storybook/source-loader/-/source-loader-8.2.9.tgz#d67e805ed673afb9c3db6f5c4214d50d16bb8c54"
-  integrity sha512-M2A6oo1DmcQXaSDKAXik9watCUZFGxSGPnPI3H/7O3Zt1S+9TLpCWdDpOm9itYRijLEQY7u3IvPTZqlbgSl17A==
+"@storybook/source-loader@8.3.0":
+  version "8.3.0"
+  resolved "https://registry.yarnpkg.com/@storybook/source-loader/-/source-loader-8.3.0.tgz#eb885c0db12cd851440ef7734a050f763ad211ee"
+  integrity sha512-WzFTUAuOQfaSYtbj69SG+YfKQkJPqajzL4oHSj653MCQF3V6VGOzE/tW4xBjqK/BiMAclY7bWyl44JWSQO5AjQ==
   dependencies:
-    "@storybook/csf" "0.1.11"
+    "@storybook/csf" "^0.1.11"
     estraverse "^5.2.0"
     lodash "^4.17.21"
     prettier "^3.1.1"
@@ -3322,10 +2243,10 @@
     "@storybook/global" "^5.0.0"
     memoizerific "^1.11.3"
 
-"@storybook/theming@^8.2.9":
-  version "8.2.9"
-  resolved "https://registry.yarnpkg.com/@storybook/theming/-/theming-8.2.9.tgz#6eb066f8957272c0bcb0078a8a9bc378ca9311d3"
-  integrity sha512-OL0NFvowPX85N5zIYdgeKKaFm7V4Vgtci093vL3cDZT13LGH6GuEzJKkUFGuUGNPFlJc+EgTj0o6PYKrOLyQ6w==
+"@storybook/theming@^8.3.0":
+  version "8.3.0"
+  resolved "https://registry.yarnpkg.com/@storybook/theming/-/theming-8.3.0.tgz#96edd021c1cffd030974747a5a645bc9ef0f8dbd"
+  integrity sha512-lJCarAzswZvUgBt/o1LMJp+07Io5G2VI1+Fw+bgn+92kRD8otCFwuMZIy0u7cEjHiEGqGnpzThlIki6vFjEXeA==
 
 "@storybook/types@8.0.5":
   version "8.0.5"
@@ -3692,13 +2613,6 @@
   resolved "https://registry.yarnpkg.com/@types/cookie/-/cookie-0.6.0.tgz#eac397f28bf1d6ae0ae081363eca2f425bedf0d5"
   integrity sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==
 
-"@types/cross-spawn@^6.0.2":
-  version "6.0.6"
-  resolved "https://registry.yarnpkg.com/@types/cross-spawn/-/cross-spawn-6.0.6.tgz#0163d0b79a6f85409e0decb8dcca17147f81fd22"
-  integrity sha512-fXRhhUkG4H3TQk5dBhQ7m/JDdSNHKwR2BBia62lhwEIq9xGiQKLxd6LymNhn47SjXhsUEPmxi+PKw2OkW4LLjA==
-  dependencies:
-    "@types/node" "*"
-
 "@types/css-mediaquery@^0.1.1":
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/@types/css-mediaquery/-/css-mediaquery-0.1.4.tgz#8efbebbc0cebaf34c77db2b63892711e19143c63"
@@ -3774,11 +2688,6 @@
   dependencies:
     "@types/trusted-types" "*"
 
-"@types/emscripten@^1.39.6":
-  version "1.39.10"
-  resolved "https://registry.yarnpkg.com/@types/emscripten/-/emscripten-1.39.10.tgz#da6e58a6171b46a41d3694f812d845d515c77e18"
-  integrity sha512-TB/6hBkYQJxsZHSqyeuO1Jt0AB/bW6G7rHt9g7lML7SOF6lbgcHvw/Lr+69iqN0qxgXLhWKScAon73JNnptuDw==
-
 "@types/escodegen@^0.0.6":
   version "0.0.6"
   resolved "https://registry.yarnpkg.com/@types/escodegen/-/escodegen-0.0.6.tgz#5230a9ce796e042cda6f086dbf19f22ea330659c"
@@ -4003,13 +2912,6 @@
   resolved "https://registry.yarnpkg.com/@types/node/-/node-12.20.55.tgz#c329cbd434c42164f846b909bd6f85b5537f6240"
   integrity sha512-J8xLz7q2OFulZ2cyGTLE1TbbZcjpno7FaN6zdJNrgAdrJ+DZzh/uFR6YrTb4C+nXakvud8Q4+rbhoIWlYQbUFQ==
 
-"@types/node@^18.0.0":
-  version "18.19.15"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-18.19.15.tgz#313a9d75435669a57fc28dc8694e7f4c4319f419"
-  integrity sha512-AMZ2UWx+woHNfM11PyAEQmfSxi05jm9OlkxczuHeEqmvwPkYj6MWv44gbzDPefYOLysTOFyI3ziiy2ONmUZfpA==
-  dependencies:
-    undici-types "~5.26.4"
-
 "@types/node@^20.11.26":
   version "20.11.27"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-20.11.27.tgz#debe5cfc8a507dd60fe2a3b4875b1604f215c2ac"
@@ -4017,6 +2919,13 @@
   dependencies:
     undici-types "~5.26.4"
 
+"@types/node@^22.0.0":
+  version "22.5.4"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-22.5.4.tgz#83f7d1f65bc2ed223bdbf57c7884f1d5a4fa84e8"
+  integrity sha512-FDuKUJQm/ju9fT/SeX/6+gBzoPzlVCzfzmGkwKvRHQVxi4BntVbyIwf6a4Xn62mrvndLiml6z/UBXIdEVjQLXg==
+  dependencies:
+    undici-types "~6.19.2"
+
 "@types/normalize-package-data@^2.4.0":
   version "2.4.4"
   resolved "https://registry.yarnpkg.com/@types/normalize-package-data/-/normalize-package-data-2.4.4.tgz#56e2cc26c397c038fab0e3a917a12d5c5909e901"
@@ -4177,7 +3086,7 @@
   resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.8.tgz#ce5ace04cfeabe7ef87c0091e50752e36707deff"
   integrity sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A==
 
-"@types/semver@^7.3.12", "@types/semver@^7.3.4":
+"@types/semver@^7.3.12":
   version "7.5.6"
   resolved "https://registry.yarnpkg.com/@types/semver/-/semver-7.5.6.tgz#c65b2bfce1bec346582c07724e3f8c1017a20339"
   integrity sha512-dn1l8LaMea/IjDoHNd9J52uBbInB796CDffS6VdIxvqYCPSG0V0DzHp76GpaWnlhg88uYyPbXCDIowa86ybd5A==
@@ -4553,22 +3462,6 @@
   resolved "https://registry.yarnpkg.com/@xterm/xterm/-/xterm-5.5.0.tgz#275fb8f6e14afa6e8a0c05d4ebc94523ff775396"
   integrity sha512-hqJHYaQb5OptNunnyAnkHyM8aCjZ1MEIDTQu1iIbbTD/xops91NB5yq1ZK/dC2JDbVWtF23zUtl9JE2NqwT87A==
 
-"@yarnpkg/fslib@2.10.3":
-  version "2.10.3"
-  resolved "https://registry.yarnpkg.com/@yarnpkg/fslib/-/fslib-2.10.3.tgz#a8c9893df5d183cf6362680b9f1c6d7504dd5717"
-  integrity sha512-41H+Ga78xT9sHvWLlFOZLIhtU6mTGZ20pZ29EiZa97vnxdohJD2AF42rCoAoWfqUz486xY6fhjMH+DYEM9r14A==
-  dependencies:
-    "@yarnpkg/libzip" "^2.3.0"
-    tslib "^1.13.0"
-
-"@yarnpkg/libzip@2.3.0", "@yarnpkg/libzip@^2.3.0":
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/@yarnpkg/libzip/-/libzip-2.3.0.tgz#fe1e762e47669f6e2c960fc118436608d834e3be"
-  integrity sha512-6xm38yGVIa6mKm/DUCF2zFFJhERh/QWp1ufm4cNUvxsONBmfPg8uZ9pZBdOmF6qFGr/HlT6ABBkCSx/dlEtvWg==
-  dependencies:
-    "@types/emscripten" "^1.39.6"
-    tslib "^1.13.0"
-
 "@yarnpkg/lockfile@^1.1.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@yarnpkg/lockfile/-/lockfile-1.1.0.tgz#e77a97fbd345b76d83245edcd17d393b1b41fb31"
@@ -5009,11 +3902,6 @@ axobject-query@^3.2.1:
   dependencies:
     dequal "^2.0.3"
 
-babel-core@^7.0.0-bridge.0:
-  version "7.0.0-bridge.0"
-  resolved "https://registry.yarnpkg.com/babel-core/-/babel-core-7.0.0-bridge.0.tgz#95a492ddd90f9b4e9a4a1da14eb335b87b634ece"
-  integrity sha512-poPX9mZH/5CSanm50Q+1toVci6pv5KSRv/5TWCwtzQS5XEwn40BcCrgIeMFWP9CKKIniKXNxoIOnOq4VVlGXhg==
-
 babel-eslint@>=4.1.1:
   version "10.1.0"
   resolved "https://registry.yarnpkg.com/babel-eslint/-/babel-eslint-10.1.0.tgz#6968e568a910b78fb3779cdd8b6ac2f479943232"
@@ -5060,30 +3948,6 @@ babel-plugin-macros@^3.1.0:
     cosmiconfig "^7.0.0"
     resolve "^1.19.0"
 
-babel-plugin-polyfill-corejs2@^0.4.10:
-  version "0.4.11"
-  resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.4.11.tgz#30320dfe3ffe1a336c15afdcdafd6fd615b25e33"
-  integrity sha512-sMEJ27L0gRHShOh5G54uAAPaiCOygY/5ratXuiyb2G46FmlSpc9eFCzYVyDiPxfNbwzA7mYahmjQc5q+CZQ09Q==
-  dependencies:
-    "@babel/compat-data" "^7.22.6"
-    "@babel/helper-define-polyfill-provider" "^0.6.2"
-    semver "^6.3.1"
-
-babel-plugin-polyfill-corejs3@^0.10.4:
-  version "0.10.4"
-  resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.10.4.tgz#789ac82405ad664c20476d0233b485281deb9c77"
-  integrity sha512-25J6I8NGfa5YkCDogHRID3fVCadIR8/pGl1/spvCkzb6lVn6SR3ojpx9nOn9iEBcUsjY24AmdKm5khcfKdylcg==
-  dependencies:
-    "@babel/helper-define-polyfill-provider" "^0.6.1"
-    core-js-compat "^3.36.1"
-
-babel-plugin-polyfill-regenerator@^0.6.1:
-  version "0.6.2"
-  resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.6.2.tgz#addc47e240edd1da1058ebda03021f382bba785e"
-  integrity sha512-2R25rQZWP63nGwaAswvDazbPXfrM3HwVoBXK6HcqeKrSrL/JqcC/rDcf95l4r7LXLyxDXc8uQDa064GubtCABg==
-  dependencies:
-    "@babel/helper-define-polyfill-provider" "^0.6.2"
-
 babel-plugin-syntax-jsx@^6.18.0:
   version "6.18.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946"
@@ -5121,15 +3985,6 @@ binary-extensions@^2.0.0:
   resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.2.0.tgz#75f502eeaf9ffde42fc98829645be4ea76bd9e2d"
   integrity sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==
 
-bl@^4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/bl/-/bl-4.1.0.tgz#451535264182bec2fbbc83a62ab98cf11d9f7b3a"
-  integrity sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==
-  dependencies:
-    buffer "^5.5.0"
-    inherits "^2.0.4"
-    readable-stream "^3.4.0"
-
 blob-util@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/blob-util/-/blob-util-2.0.2.tgz#3b4e3c281111bb7f11128518006cdc60b403a1eb"
@@ -5229,16 +4084,6 @@ browserslist@^4.22.2:
     node-releases "^2.0.14"
     update-browserslist-db "^1.0.13"
 
-browserslist@^4.23.0:
-  version "4.23.0"
-  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.23.0.tgz#8f3acc2bbe73af7213399430890f86c63a5674ab"
-  integrity sha512-QW8HiM1shhT2GuzkvklfjcKDiWFXHOeFCIA/huJPwHsslwcydgk7X+z2zXpEijP98UCY7HbubZt5J2Zgvf0CaQ==
-  dependencies:
-    caniuse-lite "^1.0.30001587"
-    electron-to-chromium "^1.4.668"
-    node-releases "^2.0.14"
-    update-browserslist-db "^1.0.13"
-
 btoa@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/btoa/-/btoa-1.2.1.tgz#01a9909f8b2c93f6bf680ba26131eb30f7fa3d73"
@@ -5254,7 +4099,7 @@ buffer-from@^1.0.0:
   resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.1.2.tgz#2b146a6fd72e80b4f55d255f35ed59a3a9a41bd5"
   integrity sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==
 
-buffer@^5.5.0, buffer@^5.7.1:
+buffer@^5.7.1:
   version "5.7.1"
   resolved "https://registry.yarnpkg.com/buffer/-/buffer-5.7.1.tgz#ba62e7c13133053582197160851a8f648e99eed0"
   integrity sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==
@@ -5352,7 +4197,7 @@ camelcase@^7.0.0:
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-7.0.1.tgz#f02e50af9fd7782bc8b88a3558c32fd3a388f048"
   integrity sha512-xlx1yCK2Oc1APsPXDL2LdlNP6+uu8OCDdhOBSVT279M/S+y75O30C2VuD8T2ogdePBBl7PfPF4504tnLgX3zfw==
 
-caniuse-lite@^1.0.30001580, caniuse-lite@^1.0.30001587:
+caniuse-lite@^1.0.30001580:
   version "1.0.30001653"
   resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001653.tgz"
   integrity sha512-XGWQVB8wFQ2+9NZwZ10GxTYC5hk0Fa+q8cSkr0tgvMhYhMHP/QC+WTgrePMDBWiWc/pV+1ik82Al20XOK25Gcw==
@@ -5519,11 +4364,6 @@ chokidar@^3.5.3, chokidar@^3.6.0:
   optionalDependencies:
     fsevents "~2.3.2"
 
-chownr@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/chownr/-/chownr-2.0.0.tgz#15bfbe53d2eab4cf70f18a8cd68ebe5b3cb1dece"
-  integrity sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==
-
 ci-info@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-2.0.0.tgz#67a9e964be31a51e15e5010d58e6f12834002f46"
@@ -5534,13 +4374,6 @@ ci-info@^3.2.0, ci-info@^3.7.0:
   resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-3.9.0.tgz#4279a62028a7b1f262f3473fc9605f5e218c59b4"
   integrity sha512-NIxF55hv4nSqQswkAeiOi1r83xy8JldOFDTWiug55KBu9Jnblncd2U6ViHmYgHf01TPZS77NJBhBMKdWj9HQMQ==
 
-citty@^0.1.5:
-  version "0.1.5"
-  resolved "https://registry.yarnpkg.com/citty/-/citty-0.1.5.tgz#fe37ceae5dc764af75eb2fece99d2bf527ea4e50"
-  integrity sha512-AS7n5NSc0OQVMV9v6wt3ByujNIrne0/cTjiC2MYqhvao57VNfiuVksTSr2p17nVOhEr2KtqiAkGwHcgMC/qUuQ==
-  dependencies:
-    consola "^3.2.3"
-
 clean-stack@^2.0.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/clean-stack/-/clean-stack-2.2.0.tgz#ee8472dbb129e727b31e8a10a427dee9dfe4008b"
@@ -5565,7 +4398,7 @@ cli-cursor@^5.0.0:
   dependencies:
     restore-cursor "^5.0.0"
 
-cli-spinners@^2.5.0, cli-spinners@^2.9.2:
+cli-spinners@^2.9.2:
   version "2.9.2"
   resolved "https://registry.yarnpkg.com/cli-spinners/-/cli-spinners-2.9.2.tgz#1773a8f4b9c4d6ac31563df53b3fc1d79462fe41"
   integrity sha512-ywqV+5MmyL4E7ybXgKys4DugZbX0FC6LnwrhjuykIjnK9k8OQacQ7axGKnjDXWNhns0xot3bZI5h55H8yo9cJg==
@@ -5641,11 +4474,6 @@ clone-deep@^4.0.1:
     kind-of "^6.0.2"
     shallow-clone "^3.0.0"
 
-clone@^1.0.2:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e"
-  integrity sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg==
-
 clsx@^1.1.0:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.2.1.tgz#0ddc4a20a549b59c93a4116bb26f5294ca17dc12"
@@ -5836,20 +4664,6 @@ copy-to-clipboard@^3.0.8, copy-to-clipboard@^3.3.1:
   dependencies:
     toggle-selection "^1.0.6"
 
-core-js-compat@^3.31.0:
-  version "3.35.1"
-  resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.35.1.tgz#215247d7edb9e830efa4218ff719beb2803555e2"
-  integrity sha512-sftHa5qUJY3rs9Zht1WEnmkvXputCyDBczPnr7QDgL8n3qrF3CMXY4VPSYtOLLiOUJcah2WNXREd48iOl6mQIw==
-  dependencies:
-    browserslist "^4.22.2"
-
-core-js-compat@^3.36.1:
-  version "3.37.1"
-  resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.37.1.tgz#c844310c7852f4bdf49b8d339730b97e17ff09ee"
-  integrity sha512-9TNiImhKvQqSUkOvk/mMRZzOANTiEVC7WaBNhHcKM7x+/5E1l5NvsysR19zuDQScE8k+kfQXWRN3AtS/eOSHpg==
-  dependencies:
-    browserslist "^4.23.0"
-
 core-js@^1.0.0:
   version "1.2.7"
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-1.2.7.tgz#652294c14651db28fa93bd2d5ff2983a4f08c636"
@@ -5954,13 +4768,6 @@ crypt@0.0.2:
   resolved "https://registry.yarnpkg.com/crypt/-/crypt-0.0.2.tgz#88d7ff7ec0dfb86f713dc87bbb42d044d3e6c41b"
   integrity sha512-mCxBlsHFYh9C+HVpiEacem8FEBnMXgU9gy4zmNC+SXAZNB/1idgp/aulFJ4FgCi7GPEVbfyng092GqL2k2rmow==
 
-crypto-random-string@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/crypto-random-string/-/crypto-random-string-4.0.0.tgz#5a3cc53d7dd86183df5da0312816ceeeb5bb1fc2"
-  integrity sha512-x8dy3RnvYdlUcPOjkEHqozhiwzKNSq7GcPuXFbnyMOCHxX8V3OgIg/pYuabl2sbUPfIJaeAQB7PMOK8DFIdoRA==
-  dependencies:
-    type-fest "^1.0.1"
-
 css-box-model@^1.2.0:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/css-box-model/-/css-box-model-1.2.1.tgz#59951d3b81fd6b2074a62d49444415b0d2b4d7c1"
@@ -6249,13 +5056,6 @@ deepmerge@^4.3.1:
   resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.3.1.tgz#44b5f2147cd3b00d4b56137685966f26fd25dd4a"
   integrity sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==
 
-defaults@^1.0.3:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/defaults/-/defaults-1.0.4.tgz#b0b02062c1e2aa62ff5d9528f0f98baa90978d7a"
-  integrity sha512-eFuaLoy/Rxalv2kr+lqMlUnrDWV+3j4pljOIJgLIhI058IQfWJ7vXhyEIHu+HtC738klGALYxOKDO0bQP3tg8A==
-  dependencies:
-    clone "^1.0.2"
-
 define-data-property@^1.0.1, define-data-property@^1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/define-data-property/-/define-data-property-1.1.2.tgz#f3c33b4f0102360cd7c0f5f28700f5678510b63a"
@@ -6284,11 +5084,6 @@ define-properties@^1.1.3, define-properties@^1.2.0, define-properties@^1.2.1:
     has-property-descriptors "^1.0.0"
     object-keys "^1.1.1"
 
-defu@^6.1.3:
-  version "6.1.4"
-  resolved "https://registry.yarnpkg.com/defu/-/defu-6.1.4.tgz#4e0c9cf9ff68fe5f3d7f2765cc1a012dfdcb0479"
-  integrity sha512-mEQCMmwJu317oSz8CwdIOdwf3xMif1ttiM8LTufzc3g6kR+9Pe236twL8j3IYT1F7GfRgGcW6MWxzZjLIkuHIg==
-
 delayed-stream@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
@@ -6309,11 +5104,6 @@ destroy@1.2.0:
   resolved "https://registry.yarnpkg.com/destroy/-/destroy-1.2.0.tgz#4803735509ad8be552934c67df614f94e66fa015"
   integrity sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==
 
-detect-indent@^6.1.0:
-  version "6.1.0"
-  resolved "https://registry.yarnpkg.com/detect-indent/-/detect-indent-6.1.0.tgz#592485ebbbf6b3b1ab2be175c8393d04ca0d57e6"
-  integrity sha512-reYkTUJAZb9gUuZ2RvVCNhVHdg62RHnJ7WJl8ftMi4diZ6NWlciOzQN88pUhSELEwflJht4oQDv0F0BMlwaYtA==
-
 devlop@^1.0.0, devlop@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/devlop/-/devlop-1.1.0.tgz#4db7c2ca4dc6e0e834c30be70c94bbc976dc7018"
@@ -6411,11 +5201,6 @@ electron-to-chromium@^1.4.648:
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.665.tgz#681700bd590b0e5a3be66e3e2874ce62abcf5da5"
   integrity sha512-UpyCWObBoD+nSZgOC2ToaIdZB0r9GhqT2WahPKiSki6ckkSuKhQNso8V2PrFcHBMleI/eqbKgVQgVC4Wni4ilw==
 
-electron-to-chromium@^1.4.668:
-  version "1.4.767"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.767.tgz#b885cfefda5a2e7a7ee356c567602012294ed260"
-  integrity sha512-nzzHfmQqBss7CE3apQHkHjXW77+8w3ubGCIoEijKCJebPufREaFETgGXWTkh32t259F3Kcq+R8MZdFdOJROgYw==
-
 emoji-regex@^10.3.0:
   version "10.3.0"
   resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-10.3.0.tgz#76998b9268409eb3dae3de989254d456e70cfe23"
@@ -6466,11 +5251,6 @@ entities@~2.1.0:
   resolved "https://registry.yarnpkg.com/entities/-/entities-2.1.0.tgz#992d3129cf7df6870b96c57858c249a120f8b8b5"
   integrity sha512-hCx1oky9PFrJ611mf0ifBLBRW8lUUVRlFolb5gWRfIELabBlbp9xZvrqZLZAs+NxFnbfQoeGd8wDkygjg7U85w==
 
-envinfo@^7.7.3:
-  version "7.11.1"
-  resolved "https://registry.yarnpkg.com/envinfo/-/envinfo-7.11.1.tgz#2ffef77591057081b0129a8fd8cf6118da1b94e1"
-  integrity sha512-8PiZgZNIB4q/Lw4AhOvAfB/ityHAd2bli3lESSWmWSzSsl5dKpy5N1d1Rfkd2teq/g9xN90lc6o98DOjMeYHpg==
-
 environment@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/environment/-/environment-1.1.0.tgz#8e86c66b180f363c7ab311787e0259665f45a9f1"
@@ -6596,35 +5376,36 @@ esbuild-register@^3.5.0:
   integrity sha512-+4G/XmakeBAsvJuDugJvtyF1x+XJT4FMocynNpxrvEBViirpfUn2PgNpCHedfWhF4WokNsO/OvMKrmJOIJsI5A==
   dependencies:
     debug "^4.3.4"
-
-"esbuild@^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0", esbuild@^0.21.3:
-  version "0.21.5"
-  resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.21.5.tgz#9ca301b120922959b766360d8ac830da0d02997d"
-  integrity sha512-mg3OPMV4hXywwpoDxu3Qda5xCKQi+vCTZq8S9J/EpkhB2HzKXq4SNFZE3+NK93JYxc8VMSep+lOUSC/RVKaBqw==
+
+"esbuild@^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0 || ^0.22.0 || ^0.23.0", esbuild@^0.23.0:
+  version "0.23.1"
+  resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.23.1.tgz#40fdc3f9265ec0beae6f59824ade1bd3d3d2dab8"
+  integrity sha512-VVNz/9Sa0bs5SELtn3f7qhJCDPCF5oMEl5cO9/SSinpE9hbPVvxbd572HH5AKiP7WD8INO53GgfDDhRjkylHEg==
   optionalDependencies:
-    "@esbuild/aix-ppc64" "0.21.5"
-    "@esbuild/android-arm" "0.21.5"
-    "@esbuild/android-arm64" "0.21.5"
-    "@esbuild/android-x64" "0.21.5"
-    "@esbuild/darwin-arm64" "0.21.5"
-    "@esbuild/darwin-x64" "0.21.5"
-    "@esbuild/freebsd-arm64" "0.21.5"
-    "@esbuild/freebsd-x64" "0.21.5"
-    "@esbuild/linux-arm" "0.21.5"
-    "@esbuild/linux-arm64" "0.21.5"
-    "@esbuild/linux-ia32" "0.21.5"
-    "@esbuild/linux-loong64" "0.21.5"
-    "@esbuild/linux-mips64el" "0.21.5"
-    "@esbuild/linux-ppc64" "0.21.5"
-    "@esbuild/linux-riscv64" "0.21.5"
-    "@esbuild/linux-s390x" "0.21.5"
-    "@esbuild/linux-x64" "0.21.5"
-    "@esbuild/netbsd-x64" "0.21.5"
-    "@esbuild/openbsd-x64" "0.21.5"
-    "@esbuild/sunos-x64" "0.21.5"
-    "@esbuild/win32-arm64" "0.21.5"
-    "@esbuild/win32-ia32" "0.21.5"
-    "@esbuild/win32-x64" "0.21.5"
+    "@esbuild/aix-ppc64" "0.23.1"
+    "@esbuild/android-arm" "0.23.1"
+    "@esbuild/android-arm64" "0.23.1"
+    "@esbuild/android-x64" "0.23.1"
+    "@esbuild/darwin-arm64" "0.23.1"
+    "@esbuild/darwin-x64" "0.23.1"
+    "@esbuild/freebsd-arm64" "0.23.1"
+    "@esbuild/freebsd-x64" "0.23.1"
+    "@esbuild/linux-arm" "0.23.1"
+    "@esbuild/linux-arm64" "0.23.1"
+    "@esbuild/linux-ia32" "0.23.1"
+    "@esbuild/linux-loong64" "0.23.1"
+    "@esbuild/linux-mips64el" "0.23.1"
+    "@esbuild/linux-ppc64" "0.23.1"
+    "@esbuild/linux-riscv64" "0.23.1"
+    "@esbuild/linux-s390x" "0.23.1"
+    "@esbuild/linux-x64" "0.23.1"
+    "@esbuild/netbsd-x64" "0.23.1"
+    "@esbuild/openbsd-arm64" "0.23.1"
+    "@esbuild/openbsd-x64" "0.23.1"
+    "@esbuild/sunos-x64" "0.23.1"
+    "@esbuild/win32-arm64" "0.23.1"
+    "@esbuild/win32-ia32" "0.23.1"
+    "@esbuild/win32-x64" "0.23.1"
 
 esbuild@^0.19.3:
   version "0.19.12"
@@ -6655,35 +5436,34 @@ esbuild@^0.19.3:
     "@esbuild/win32-ia32" "0.19.12"
     "@esbuild/win32-x64" "0.19.12"
 
-esbuild@^0.23.0:
-  version "0.23.1"
-  resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.23.1.tgz#40fdc3f9265ec0beae6f59824ade1bd3d3d2dab8"
-  integrity sha512-VVNz/9Sa0bs5SELtn3f7qhJCDPCF5oMEl5cO9/SSinpE9hbPVvxbd572HH5AKiP7WD8INO53GgfDDhRjkylHEg==
+esbuild@^0.21.3:
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.21.5.tgz#9ca301b120922959b766360d8ac830da0d02997d"
+  integrity sha512-mg3OPMV4hXywwpoDxu3Qda5xCKQi+vCTZq8S9J/EpkhB2HzKXq4SNFZE3+NK93JYxc8VMSep+lOUSC/RVKaBqw==
   optionalDependencies:
-    "@esbuild/aix-ppc64" "0.23.1"
-    "@esbuild/android-arm" "0.23.1"
-    "@esbuild/android-arm64" "0.23.1"
-    "@esbuild/android-x64" "0.23.1"
-    "@esbuild/darwin-arm64" "0.23.1"
-    "@esbuild/darwin-x64" "0.23.1"
-    "@esbuild/freebsd-arm64" "0.23.1"
-    "@esbuild/freebsd-x64" "0.23.1"
-    "@esbuild/linux-arm" "0.23.1"
-    "@esbuild/linux-arm64" "0.23.1"
-    "@esbuild/linux-ia32" "0.23.1"
-    "@esbuild/linux-loong64" "0.23.1"
-    "@esbuild/linux-mips64el" "0.23.1"
-    "@esbuild/linux-ppc64" "0.23.1"
-    "@esbuild/linux-riscv64" "0.23.1"
-    "@esbuild/linux-s390x" "0.23.1"
-    "@esbuild/linux-x64" "0.23.1"
-    "@esbuild/netbsd-x64" "0.23.1"
-    "@esbuild/openbsd-arm64" "0.23.1"
-    "@esbuild/openbsd-x64" "0.23.1"
-    "@esbuild/sunos-x64" "0.23.1"
-    "@esbuild/win32-arm64" "0.23.1"
-    "@esbuild/win32-ia32" "0.23.1"
-    "@esbuild/win32-x64" "0.23.1"
+    "@esbuild/aix-ppc64" "0.21.5"
+    "@esbuild/android-arm" "0.21.5"
+    "@esbuild/android-arm64" "0.21.5"
+    "@esbuild/android-x64" "0.21.5"
+    "@esbuild/darwin-arm64" "0.21.5"
+    "@esbuild/darwin-x64" "0.21.5"
+    "@esbuild/freebsd-arm64" "0.21.5"
+    "@esbuild/freebsd-x64" "0.21.5"
+    "@esbuild/linux-arm" "0.21.5"
+    "@esbuild/linux-arm64" "0.21.5"
+    "@esbuild/linux-ia32" "0.21.5"
+    "@esbuild/linux-loong64" "0.21.5"
+    "@esbuild/linux-mips64el" "0.21.5"
+    "@esbuild/linux-ppc64" "0.21.5"
+    "@esbuild/linux-riscv64" "0.21.5"
+    "@esbuild/linux-s390x" "0.21.5"
+    "@esbuild/linux-x64" "0.21.5"
+    "@esbuild/netbsd-x64" "0.21.5"
+    "@esbuild/openbsd-x64" "0.21.5"
+    "@esbuild/sunos-x64" "0.21.5"
+    "@esbuild/win32-arm64" "0.21.5"
+    "@esbuild/win32-ia32" "0.21.5"
+    "@esbuild/win32-x64" "0.21.5"
 
 escalade@^3.1.1:
   version "3.1.2"
@@ -7171,7 +5951,7 @@ execa@^1.0.0:
     signal-exit "^3.0.0"
     strip-eof "^1.0.0"
 
-execa@^5.0.0, execa@^5.1.1:
+execa@^5.1.1:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/execa/-/execa-5.1.1.tgz#f80ad9cbf4298f7bd1d4c9555c21e93741c411dd"
   integrity sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==
@@ -7361,13 +6141,6 @@ fbjs@^0.8.1:
     setimmediate "^1.0.5"
     ua-parser-js "^0.7.30"
 
-fd-package-json@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/fd-package-json/-/fd-package-json-1.2.0.tgz#4f218bb8ff65c21011d1f4f17cb3d0c9e72f8da7"
-  integrity sha512-45LSPmWf+gC5tdCQMNH4s9Sr00bIkiD9aN7dc5hqkrEw1geRYyDQS1v1oMHAW3ysfxfndqGsrDREHHjNNbKUfA==
-  dependencies:
-    walk-up-path "^3.0.1"
-
 fd-slicer@~1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/fd-slicer/-/fd-slicer-1.1.0.tgz#25c7c89cb1f9077f8891bbe61d8f390eae256f1e"
@@ -7441,15 +6214,6 @@ finalhandler@1.2.0:
     statuses "2.0.1"
     unpipe "~1.0.0"
 
-find-cache-dir@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/find-cache-dir/-/find-cache-dir-2.1.0.tgz#8d0f94cd13fe43c6c7c261a0d86115ca918c05f7"
-  integrity sha512-Tq6PixE0w/VMFfCgbONnkiQIVol/JJL7nRMi20fqzA4NRs9AfeqMGeRdPi3wIhYkxjeBaWh2rxwapn5Tu3IqOQ==
-  dependencies:
-    commondir "^1.0.1"
-    make-dir "^2.0.0"
-    pkg-dir "^3.0.0"
-
 find-cache-dir@^3.0.0:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/find-cache-dir/-/find-cache-dir-3.3.2.tgz#b30c5b6eff0730731aea9bbd9dbecbd80256d64b"
@@ -7532,11 +6296,6 @@ flatted@^3.3.1:
   resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.3.1.tgz#21db470729a6734d4997002f439cb308987f567a"
   integrity sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==
 
-flow-parser@0.*:
-  version "0.228.0"
-  resolved "https://registry.yarnpkg.com/flow-parser/-/flow-parser-0.228.0.tgz#0b801507c8cf44257338596b49bd0904caea2026"
-  integrity sha512-xPWkzCO07AnS8X+fQFpWm+tJ+C7aeaiVzJ+rSepbkCXUvUJ6l6squEl63axoMcixyH4wLjmypOzq/+zTD0O93w==
-
 follow-redirects@^1.15.6:
   version "1.15.6"
   resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.6.tgz#7f815c0cda4249c74ff09e95ef97c23b5fd0399b"
@@ -7644,13 +6403,6 @@ fs-extra@^9.0.0, fs-extra@^9.1.0:
     jsonfile "^6.0.1"
     universalify "^2.0.0"
 
-fs-minipass@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/fs-minipass/-/fs-minipass-2.1.0.tgz#7f5036fdbf12c63c169190cbe4199c852271f9fb"
-  integrity sha512-V/JgOLFCS+R6Vcq0slCuaeWEdNC3ouDlJMNIsacH2VtALiu9mV4LPrHc5cDl8k5aw6J8jwgWWpiTo5RYhmIzvg==
-  dependencies:
-    minipass "^3.0.0"
-
 fs.realpath@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
@@ -7774,20 +6526,6 @@ getpass@^0.1.1:
   dependencies:
     assert-plus "^1.0.0"
 
-giget@^1.0.0:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/giget/-/giget-1.2.1.tgz#4f42779aae57a5f664a1c4d50401b008e9810f4c"
-  integrity sha512-4VG22mopWtIeHwogGSy1FViXVo0YT+m6BrqZfz0JJFwbSsePsCdOzdLIIli5BtMp7Xe8f/o2OmBpQX2NBOC24g==
-  dependencies:
-    citty "^0.1.5"
-    consola "^3.2.3"
-    defu "^6.1.3"
-    node-fetch-native "^1.6.1"
-    nypm "^0.3.3"
-    ohash "^1.1.3"
-    pathe "^1.1.1"
-    tar "^6.2.0"
-
 github-slugger@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/github-slugger/-/github-slugger-2.0.0.tgz#52cf2f9279a21eb6c59dd385b410f0c0adda8f1a"
@@ -7887,18 +6625,6 @@ globby@^11.1.0:
     merge2 "^1.4.1"
     slash "^3.0.0"
 
-globby@^14.0.1:
-  version "14.0.1"
-  resolved "https://registry.yarnpkg.com/globby/-/globby-14.0.1.tgz#a1b44841aa7f4c6d8af2bc39951109d77301959b"
-  integrity sha512-jOMLD2Z7MAhyG8aJpNOpmziMOP4rPLcc95oQPKXBazW82z+CEgPFBQvEpRUa1KeIMUJo4Wsm+q6uzO/Q/4BksQ==
-  dependencies:
-    "@sindresorhus/merge-streams" "^2.1.0"
-    fast-glob "^3.3.2"
-    ignore "^5.2.4"
-    path-type "^5.0.0"
-    slash "^5.1.0"
-    unicorn-magic "^0.1.0"
-
 goober@^2.0.33:
   version "2.1.14"
   resolved "https://registry.yarnpkg.com/goober/-/goober-2.1.14.tgz#4a5c94fc34dc086a8e6035360ae1800005135acd"
@@ -7911,7 +6637,7 @@ gopd@^1.0.1:
   dependencies:
     get-intrinsic "^1.1.3"
 
-graceful-fs@^4.1.11, graceful-fs@^4.1.6, graceful-fs@^4.2.0, graceful-fs@^4.2.4:
+graceful-fs@^4.1.11, graceful-fs@^4.1.6, graceful-fs@^4.2.0:
   version "4.2.11"
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.11.tgz#4183e4e8bf08bb6e05bbb2f7d2e0c8f712ca40e3"
   integrity sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==
@@ -8232,7 +6958,7 @@ inflight@^1.0.4:
     once "^1.3.0"
     wrappy "1"
 
-inherits@2, inherits@2.0.4, inherits@^2.0.3, inherits@^2.0.4:
+inherits@2, inherits@2.0.4, inherits@^2.0.3:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
   integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
@@ -8476,11 +7202,6 @@ is-installed-globally@~0.4.0:
     global-dirs "^3.0.0"
     is-path-inside "^3.0.2"
 
-is-interactive@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/is-interactive/-/is-interactive-1.0.0.tgz#cea6e6ae5c870a7b0a0004070b7b587e0252912e"
-  integrity sha512-2HvIEKRoqS62guEC+qBjpvRubdX910WCMuJTZ+I9yvqKU2/12eSL549HMwtabb4oupdj2sMP50k+XJfB/8JE6w==
-
 is-map@^2.0.1:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/is-map/-/is-map-2.0.2.tgz#00922db8c9bf73e81b7a335827bc2a43f2b91127"
@@ -8760,32 +7481,6 @@ jsbn@~0.1.0:
   resolved "https://registry.yarnpkg.com/jsbn/-/jsbn-0.1.1.tgz#a5e654c2e5a2deb5f201d96cefbca80c0ef2f513"
   integrity sha512-UVU9dibq2JcFWxQPA6KCqj5O42VOmAY3zQUfEKxU0KpTGXwNoCjkX1e13eHNvw/xPynt6pU0rZ1htjWTNTSXsg==
 
-jscodeshift@^0.15.1:
-  version "0.15.1"
-  resolved "https://registry.yarnpkg.com/jscodeshift/-/jscodeshift-0.15.1.tgz#6c7a9572acdfa4f54098e958f71a05716a4e546b"
-  integrity sha512-hIJfxUy8Rt4HkJn/zZPU9ChKfKZM1342waJ1QC2e2YsPcWhM+3BJ4dcfQCzArTrk1jJeNLB341H+qOcEHRxJZg==
-  dependencies:
-    "@babel/core" "^7.23.0"
-    "@babel/parser" "^7.23.0"
-    "@babel/plugin-transform-class-properties" "^7.22.5"
-    "@babel/plugin-transform-modules-commonjs" "^7.23.0"
-    "@babel/plugin-transform-nullish-coalescing-operator" "^7.22.11"
-    "@babel/plugin-transform-optional-chaining" "^7.23.0"
-    "@babel/plugin-transform-private-methods" "^7.22.5"
-    "@babel/preset-flow" "^7.22.15"
-    "@babel/preset-typescript" "^7.23.0"
-    "@babel/register" "^7.22.15"
-    babel-core "^7.0.0-bridge.0"
-    chalk "^4.1.2"
-    flow-parser "0.*"
-    graceful-fs "^4.2.4"
-    micromatch "^4.0.4"
-    neo-async "^2.5.0"
-    node-dir "^0.1.17"
-    recast "^0.23.3"
-    temp "^0.8.4"
-    write-file-atomic "^2.3.0"
-
 jsdom@^24.1.1:
   version "24.1.1"
   resolved "https://registry.yarnpkg.com/jsdom/-/jsdom-24.1.1.tgz#f41df8f4f3b2fbfa7e1bdc5df62c9804fd14a9d0"
@@ -8818,11 +7513,6 @@ jsesc@^2.5.1:
   resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-2.5.2.tgz#80564d2e483dacf6e8ef209650a67df3f0c283a4"
   integrity sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==
 
-jsesc@~0.5.0:
-  version "0.5.0"
-  resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-0.5.0.tgz#e7dee66e35d6fc16f710fe91d5cf69f70f08911d"
-  integrity sha512-uZz5UnB7u4T9LvwmFqXii7pZSouaRPorGs5who1Ip7VO0wxanFvBL7GkM6dTHlgX+jhBApRetaWpnDabOeTcnA==
-
 json-buffer@3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/json-buffer/-/json-buffer-3.0.1.tgz#9338802a30d3b6605fbe0613e094008ca8c05a13"
@@ -8960,11 +7650,6 @@ klaw-sync@^6.0.0:
   dependencies:
     graceful-fs "^4.1.11"
 
-kleur@^3.0.3:
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/kleur/-/kleur-3.0.3.tgz#a79c9ecc86ee1ce3fa6206d1216c501f147fc07e"
-  integrity sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==
-
 language-subtag-registry@^0.3.20:
   version "0.3.22"
   resolved "https://registry.yarnpkg.com/language-subtag-registry/-/language-subtag-registry-0.3.22.tgz#2e1500861b2e457eba7e7ae86877cbd08fa1fd1d"
@@ -9015,11 +7700,6 @@ lcid@^2.0.0:
   dependencies:
     invert-kv "^2.0.0"
 
-leven@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/leven/-/leven-3.1.0.tgz#77891de834064cccba82ae7842bb6b14a13ed7f2"
-  integrity sha512-qsda+H8jTaUaN/x5vzW2rzc+8Rw4TAQ/4KjB46IwK5VH+IlVeeeje/EoZRpiXvIqjFgK84QffqPztGI3VBLG1A==
-
 levn@^0.3.0, levn@~0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/levn/-/levn-0.3.0.tgz#3b09924edf9f083c0490fdd4c0bc4421e04764ee"
@@ -9147,11 +7827,6 @@ lodash.curry@^4.1.1:
   resolved "https://registry.yarnpkg.com/lodash.curry/-/lodash.curry-4.1.1.tgz#248e36072ede906501d75966200a86dab8b23170"
   integrity sha512-/u14pXGviLaweY5JI0IUzgzF2J6Ne8INyzAZjImcryjgkZ+ebruBxy2/JaOOkTqScddcYtakjhSaeemV8lR0tA==
 
-lodash.debounce@^4.0.8:
-  version "4.0.8"
-  resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
-  integrity sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==
-
 lodash.get@^4.3.0:
   version "4.4.2"
   resolved "https://registry.yarnpkg.com/lodash.get/-/lodash.get-4.4.2.tgz#2d177f652fa31e939b4438d5341499dfa3825e99"
@@ -9187,7 +7862,7 @@ lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.21:
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
 
-log-symbols@^4.0.0, log-symbols@^4.1.0:
+log-symbols@^4.0.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-4.1.0.tgz#3fbdbb95b4683ac9fc785111e792e558d4abd503"
   integrity sha512-8XPvpAA8uyhfteu8pIvQxpJZ7SYYdpUivZpGy6sFsBuKRY/7rQGavedeB8aK+Zkyq6upMFVL/9AW6vOYzfRyLg==
@@ -9309,14 +7984,6 @@ magicast@^0.3.4:
     "@babel/types" "^7.25.4"
     source-map-js "^1.2.0"
 
-make-dir@^2.0.0, make-dir@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-2.1.0.tgz#5f0310e18b8be898cc07009295a30ae41e91e6f5"
-  integrity sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==
-  dependencies:
-    pify "^4.0.1"
-    semver "^5.6.0"
-
 make-dir@^3.0.2:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-3.1.0.tgz#415e967046b3a7f1d185277d84aa58203726a13f"
@@ -9899,7 +8566,7 @@ min-indent@^1.0.0, min-indent@^1.0.1:
   resolved "https://registry.yarnpkg.com/min-indent/-/min-indent-1.0.1.tgz#a63f681673b30571fbe8bc25686ae746eefa9869"
   integrity sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==
 
-minimatch@3.1.2, minimatch@^3.0.2, minimatch@^3.0.4, minimatch@^3.0.5, minimatch@^3.1.1, minimatch@^3.1.2:
+minimatch@3.1.2, minimatch@^3.0.4, minimatch@^3.0.5, minimatch@^3.1.1, minimatch@^3.1.2:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.1.2.tgz#19cd194bfd3e428f049a70817c038d89ab4be35b"
   integrity sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==
@@ -9925,18 +8592,6 @@ minimist@^1.2.0, minimist@^1.2.3, minimist@^1.2.6, minimist@^1.2.8:
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.8.tgz#c1a464e7693302e082a075cee0c057741ac4772c"
   integrity sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==
 
-minipass@^3.0.0:
-  version "3.3.6"
-  resolved "https://registry.yarnpkg.com/minipass/-/minipass-3.3.6.tgz#7bba384db3a1520d18c9c0e5251c3444e95dd94a"
-  integrity sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==
-  dependencies:
-    yallist "^4.0.0"
-
-minipass@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/minipass/-/minipass-5.0.0.tgz#3e9788ffb90b694a5d0ec94479a45b5d8738133d"
-  integrity sha512-3FnjYuehv9k6ovOEbyOswadCDPX1piCfhV8ncmYtHOjuPwylVWsghTLo7rabjC3Rx5xD4HDx8Wm1xnMF7S5qFQ==
-
 "minipass@^5.0.0 || ^6.0.2 || ^7.0.0":
   version "7.0.4"
   resolved "https://registry.yarnpkg.com/minipass/-/minipass-7.0.4.tgz#dbce03740f50a4786ba994c1fb908844d27b038c"
@@ -9947,14 +8602,6 @@ minipass@^7.1.2:
   resolved "https://registry.yarnpkg.com/minipass/-/minipass-7.1.2.tgz#93a9626ce5e5e66bd4db86849e7515e92340a707"
   integrity sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==
 
-minizlib@^2.1.1:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/minizlib/-/minizlib-2.1.2.tgz#e90d3466ba209b932451508a11ce3d3632145931"
-  integrity sha512-bAxsR8BVfj60DWXHE3u30oHzfl4G7khkSuPW+qvpd7jFRHm7dLxOjUk1EHACJ/hxLY8phGJ0YhYHZo7jil7Qdg==
-  dependencies:
-    minipass "^3.0.0"
-    yallist "^4.0.0"
-
 mkdirp@^0.5.1:
   version "0.5.6"
   resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.6.tgz#7def03d2432dcae4ba1d611445c48396062255f6"
@@ -9962,11 +8609,6 @@ mkdirp@^0.5.1:
   dependencies:
     minimist "^1.2.6"
 
-mkdirp@^1.0.3:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-1.0.4.tgz#3eb5ed62622756d79a5f0e2a221dfebad75c2f7e"
-  integrity sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==
-
 mkdirp@^3.0.0:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-3.0.1.tgz#e44e4c5607fb279c168241713cc6e0fea9adcb50"
@@ -10075,11 +8717,6 @@ negotiator@0.6.3:
   resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.3.tgz#58e323a72fedc0d6f9cd4d31fe49f51479590ccd"
   integrity sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==
 
-neo-async@^2.5.0:
-  version "2.6.2"
-  resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.2.tgz#b4aafb93e3aeb2d8174ca53cf163ab7d7308305f"
-  integrity sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==
-
 nice-try@^1.0.4:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/nice-try/-/nice-try-1.0.5.tgz#a3378a7696ce7d223e88fc9b764bd7ef1089e366"
@@ -10093,18 +8730,6 @@ no-case@^3.0.4:
     lower-case "^2.0.2"
     tslib "^2.0.3"
 
-node-dir@^0.1.17:
-  version "0.1.17"
-  resolved "https://registry.yarnpkg.com/node-dir/-/node-dir-0.1.17.tgz#5f5665d93351335caabef8f1c554516cf5f1e4e5"
-  integrity sha512-tmPX422rYgofd4epzrNoOXiE8XFZYOcCq1vD7MAXCDO+O+zndlA2ztdKKMa+EeuBG5tHETpr4ml4RGgpqDCCAg==
-  dependencies:
-    minimatch "^3.0.2"
-
-node-fetch-native@^1.6.1:
-  version "1.6.2"
-  resolved "https://registry.yarnpkg.com/node-fetch-native/-/node-fetch-native-1.6.2.tgz#f439000d972eb0c8a741b65dcda412322955e1c6"
-  integrity sha512-69mtXOFZ6hSkYiXAVB5SqaRvrbITC/NPyqv7yuu/qw0nmgPyYbIMYYNIDhNtwPrzk0ptrimrLz/hhjvm4w5Z+w==
-
 node-fetch@^1.0.1, node-fetch@^2.6.7:
   version "2.7.0"
   resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.7.0.tgz#d0f0fa6e3e2dc1d27efcd8ad99d550bda94d187d"
@@ -10171,16 +8796,6 @@ nwsapi@^2.2.12:
   resolved "https://registry.yarnpkg.com/nwsapi/-/nwsapi-2.2.12.tgz#fb6af5c0ec35b27b4581eb3bbad34ec9e5c696f8"
   integrity sha512-qXDmcVlZV4XRtKFzddidpfVP4oMSGhga+xdMc25mv8kaLUHtgzCDhUxkrN8exkGdTlLNaXj7CV3GtON7zuGZ+w==
 
-nypm@^0.3.3:
-  version "0.3.6"
-  resolved "https://registry.yarnpkg.com/nypm/-/nypm-0.3.6.tgz#940b558e6e56c2ed5dc43adf6dcf2c16577a80ff"
-  integrity sha512-2CATJh3pd6CyNfU5VZM7qSwFu0ieyabkEdnogE30Obn1czrmOYiZ8DOZLe1yBdLKWoyD3Mcy2maUs+0MR3yVjQ==
-  dependencies:
-    citty "^0.1.5"
-    execa "^8.0.1"
-    pathe "^1.1.2"
-    ufo "^1.3.2"
-
 object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
@@ -10249,11 +8864,6 @@ object.values@^1.1.6:
     define-properties "^1.2.0"
     es-abstract "^1.22.1"
 
-ohash@^1.1.3:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/ohash/-/ohash-1.1.3.tgz#f12c3c50bfe7271ce3fd1097d42568122ccdcf07"
-  integrity sha512-zuHHiGTYTA1sYJ/wZN+t5HKZaH23i4yI1HMwbuXm24Nid7Dv0KcuRlKoNKS9UNfAVSBlnGLcuQrnOKWOZoEGaw==
-
 on-finished@2.4.1:
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/on-finished/-/on-finished-2.4.1.tgz#58c8c44116e54845ad57f14ab10b03533184ac3f"
@@ -10343,21 +8953,6 @@ optionator@^0.9.3:
     prelude-ls "^1.2.1"
     type-check "^0.4.0"
 
-ora@^5.4.1:
-  version "5.4.1"
-  resolved "https://registry.yarnpkg.com/ora/-/ora-5.4.1.tgz#1b2678426af4ac4a509008e5e4ac9e9959db9e18"
-  integrity sha512-5b6Y85tPxZZ7QytO+BQzysW31HJku27cRIlkbAXaNx+BdcVi+LlRFmVXzeF6a7JCwJpyw5c4b+YSVImQIrBpuQ==
-  dependencies:
-    bl "^4.1.0"
-    chalk "^4.1.0"
-    cli-cursor "^3.1.0"
-    cli-spinners "^2.5.0"
-    is-interactive "^1.0.0"
-    is-unicode-supported "^0.1.0"
-    log-symbols "^4.1.0"
-    strip-ansi "^6.0.0"
-    wcwidth "^1.0.1"
-
 os-locale@^3.0.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/os-locale/-/os-locale-3.1.0.tgz#a802a6ee17f24c10483ab9935719cef4ed16bf1a"
@@ -10590,11 +9185,6 @@ path-type@^4.0.0:
   resolved "https://registry.yarnpkg.com/path-type/-/path-type-4.0.0.tgz#84ed01c0a7ba380afe09d90a8c180dcd9d03043b"
   integrity sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==
 
-path-type@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/path-type/-/path-type-5.0.0.tgz#14b01ed7aea7ddf9c7c3f46181d4d04f9c785bb8"
-  integrity sha512-5HviZNaZcfqP95rwpv+1HDgUamezbqdSYTyzjTvwtJSnIH+3vnbmWsItli8OFEndS984VT55M3jduxZbX351gg==
-
 path-unified@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/path-unified/-/path-unified-0.1.0.tgz#fd751e787ab019a88cdf5cecbd7e5e4711c66c7d"
@@ -10608,7 +9198,7 @@ path@^0.12.7:
     process "^0.11.1"
     util "^0.10.3"
 
-pathe@^1.1.1, pathe@^1.1.2:
+pathe@^1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/pathe/-/pathe-1.1.2.tgz#6c4cb47a945692e48a1ddd6e4094d170516437ec"
   integrity sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ==
@@ -10667,23 +9257,11 @@ pify@^3.0.0:
   resolved "https://registry.yarnpkg.com/pify/-/pify-3.0.0.tgz#e5a4acd2c101fdf3d9a4d07f0dbc4db49dd28176"
   integrity sha512-C3FsVNH1udSEX48gGX1xfvwTWfsYWj5U+8/uK15BGzIGrKoUpghX8hWZwa/OFnakBiiVNmBvemTJR5mcy7iPcg==
 
-pify@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/pify/-/pify-4.0.1.tgz#4b2cd25c50d598735c50292224fd8c6df41e3231"
-  integrity sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==
-
-pirates@^4.0.1, pirates@^4.0.6:
+pirates@^4.0.1:
   version "4.0.6"
   resolved "https://registry.yarnpkg.com/pirates/-/pirates-4.0.6.tgz#3018ae32ecfcff6c29ba2267cbf21166ac1f36b9"
   integrity sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==
 
-pkg-dir@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-3.0.0.tgz#2749020f239ed990881b1f71210d51eb6523bea3"
-  integrity sha512-/E57AYkoeQ25qkxMj5PBOVgF8Kiu/h7cYS30Z5+R7WaiCCBfLq58ZI/dSeaEKb9WVJV5n/03QwrN3IeWIFllvw==
-  dependencies:
-    find-up "^3.0.0"
-
 pkg-dir@^4.1.0, pkg-dir@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-4.2.0.tgz#f099133df7ede422e81d1d8448270eeb3e4261f3"
@@ -10810,14 +9388,6 @@ promise@^7.1.1:
   dependencies:
     asap "~2.0.3"
 
-prompts@^2.4.0:
-  version "2.4.2"
-  resolved "https://registry.yarnpkg.com/prompts/-/prompts-2.4.2.tgz#7b57e73b3a48029ad10ebd44f74b01722a4cb069"
-  integrity sha512-NxNv/kLguCA7p3jE8oL2aEBsrJWgAakBpgmgK6lpPWV+WuOmY6r2/zbAVnP+T8bQlA0nzHXSJSJW0Hq7ylaD2Q==
-  dependencies:
-    kleur "^3.0.3"
-    sisteransi "^1.0.5"
-
 prop-types@^15.0.0, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
@@ -11263,15 +9833,6 @@ read-pkg@^5.2.0:
     parse-json "^5.0.0"
     type-fest "^0.6.0"
 
-readable-stream@^3.4.0:
-  version "3.6.2"
-  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-3.6.2.tgz#56a9b36ea965c00c5a93ef31eb111a0f11056967"
-  integrity sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==
-  dependencies:
-    inherits "^2.0.3"
-    string_decoder "^1.1.1"
-    util-deprecate "^1.0.1"
-
 readdirp@~3.6.0:
   version "3.6.0"
   resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.6.0.tgz#74a370bd857116e245b29cc97340cd431a02a6c7"
@@ -11279,17 +9840,6 @@ readdirp@~3.6.0:
   dependencies:
     picomatch "^2.2.1"
 
-recast@^0.23.3:
-  version "0.23.4"
-  resolved "https://registry.yarnpkg.com/recast/-/recast-0.23.4.tgz#ca1bac7bfd3011ea5a28dfecb5df678559fb1ddf"
-  integrity sha512-qtEDqIZGVcSZCHniWwZWbRy79Dc6Wp3kT/UmDA2RJKBPg7+7k51aQBZirHmUGn5uvHf2rg8DkjizrN26k61ATw==
-  dependencies:
-    assert "^2.0.0"
-    ast-types "^0.16.1"
-    esprima "~4.0.0"
-    source-map "~0.6.1"
-    tslib "^2.0.1"
-
 recast@^0.23.5:
   version "0.23.6"
   resolved "https://registry.yarnpkg.com/recast/-/recast-0.23.6.tgz#198fba74f66143a30acc81929302d214ce4e3bfa"
@@ -11374,18 +9924,6 @@ reflect.getprototypeof@^1.0.4:
     globalthis "^1.0.3"
     which-builtin-type "^1.1.3"
 
-regenerate-unicode-properties@^10.1.0:
-  version "10.1.1"
-  resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-10.1.1.tgz#6b0e05489d9076b04c436f318d9b067bba459480"
-  integrity sha512-X007RyZLsCJVVrjgEFVpLUTZwyOZk3oiL75ZcuYjlIWd6rNJtOjkBwQc5AsRrpbKVkxN6sklw/k/9m2jJYOf8Q==
-  dependencies:
-    regenerate "^1.4.2"
-
-regenerate@^1.4.2:
-  version "1.4.2"
-  resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.4.2.tgz#b9346d8827e8f5a32f7ba29637d398b69014848a"
-  integrity sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A==
-
 regenerator-runtime@^0.13.7:
   version "0.13.11"
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz#f6dca3e7ceec20590d07ada785636a90cdca17f9"
@@ -11396,13 +9934,6 @@ regenerator-runtime@^0.14.0:
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz#356ade10263f685dda125100cd862c1db895327f"
   integrity sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==
 
-regenerator-transform@^0.15.2:
-  version "0.15.2"
-  resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.15.2.tgz#5bbae58b522098ebdf09bca2f83838929001c7a4"
-  integrity sha512-hfMp2BoF0qOk3uc5V20ALGDS2ddjQaLrdl7xrGXvAIow7qeWRM2VA2HuCHkUKk9slq3VwEwLNK3DFBqDfPGYtg==
-  dependencies:
-    "@babel/runtime" "^7.8.4"
-
 regexp.prototype.flags@^1.5.0, regexp.prototype.flags@^1.5.1:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.5.1.tgz#90ce989138db209f81492edd734183ce99f9677e"
@@ -11422,18 +9953,6 @@ regexpp@^3.0.0, regexpp@^3.1.0:
   resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-3.2.0.tgz#0425a2768d8f23bad70ca4b90461fa2f1213e1b2"
   integrity sha512-pq2bWo9mVD43nbts2wGv17XLiNLya+GklZ8kaDLV2Z08gDCsGpnKn9BFMepvWuHCbyVvY7J5o5+BVvoQbmlJLg==
 
-regexpu-core@^5.3.1:
-  version "5.3.2"
-  resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-5.3.2.tgz#11a2b06884f3527aec3e93dbbf4a3b958a95546b"
-  integrity sha512-RAM5FlZz+Lhmo7db9L298p2vHP5ZywrVXmVXpmAD9GuL5MPH6t9ROw1iA/wfHkQ76Qe7AaPF0nGuim96/IrQMQ==
-  dependencies:
-    "@babel/regjsgen" "^0.8.0"
-    regenerate "^1.4.2"
-    regenerate-unicode-properties "^10.1.0"
-    regjsparser "^0.9.1"
-    unicode-match-property-ecmascript "^2.0.0"
-    unicode-match-property-value-ecmascript "^2.1.0"
-
 registry-auth-token@3.3.2:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/registry-auth-token/-/registry-auth-token-3.3.2.tgz#851fd49038eecb586911115af845260eec983f20"
@@ -11449,13 +9968,6 @@ registry-url@3.1.0:
   dependencies:
     rc "^1.0.1"
 
-regjsparser@^0.9.1:
-  version "0.9.1"
-  resolved "https://registry.yarnpkg.com/regjsparser/-/regjsparser-0.9.1.tgz#272d05aa10c7c1f67095b1ff0addae8442fc5709"
-  integrity sha512-dQUtn90WanSNl+7mQKcXAgZxvUe7Z0SqXlgzv0za4LwiUhyzBC58yQO3liFoUgu8GiJVInAhJjkj1N0EtQ5nkQ==
-  dependencies:
-    jsesc "~0.5.0"
-
 rehype-external-links@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/rehype-external-links/-/rehype-external-links-3.0.0.tgz#2b28b5cda1932f83f045b6f80a3e1b15f168c6f6"
@@ -11589,7 +10101,7 @@ resolve-pathname@^3.0.0:
   resolved "https://registry.yarnpkg.com/resolve-pathname/-/resolve-pathname-3.0.0.tgz#99d02224d3cf263689becbb393bc560313025dcd"
   integrity sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng==
 
-resolve@^1.10.0, resolve@^1.10.1, resolve@^1.12.0, resolve@^1.14.2, resolve@^1.19.0, resolve@^1.22.1, resolve@^1.22.8:
+resolve@^1.10.0, resolve@^1.10.1, resolve@^1.12.0, resolve@^1.19.0, resolve@^1.22.1, resolve@^1.22.8:
   version "1.22.8"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.8.tgz#b6c87a9f2aa06dfab52e3d70ac8cde321fa5a48d"
   integrity sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==
@@ -11650,7 +10162,7 @@ rgbcolor@^1.0.1:
   resolved "https://registry.yarnpkg.com/rgbcolor/-/rgbcolor-1.0.1.tgz#d6505ecdb304a6595da26fa4b43307306775945d"
   integrity sha512-9aZLIrhRaD97sgVhtJOW6ckOEh6/GnvQtdVNfdZ6s67+3/XwLS9lBcQYzEEhYVeUowN7pRzMLsyGhK2i/xvWbw==
 
-rimraf@2.6.3, rimraf@~2.6.2:
+rimraf@2.6.3:
   version "2.6.3"
   resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.6.3.tgz#b2d104fe0d8fb27cf9e0a1cda8262dd3833c6cab"
   integrity sha512-mwqeW5XsA2qAejG46gYdENaxXjx9onRNCfn7L0duuP4hCuTIi/QO7PDK07KJfp1d+izWPrzEJDcSqBa0OZQriA==
@@ -11876,7 +10388,7 @@ semver-compare@^1.0.0:
   resolved "https://registry.yarnpkg.com/semver-compare/-/semver-compare-1.0.0.tgz#0dee216a1c941ab37e9efb1788f6afc5ff5537fc"
   integrity sha512-YM3/ITh2MJ5MtzaM429anh+x2jiLVjqILF4m4oyQB18W7Ggea7BfqdH/wGMK7dDiMghv/6WG7znWMwUDzJiXow==
 
-"semver@2 || 3 || 4 || 5", semver@7.6.0, semver@^5.5.0, semver@^5.6.0, semver@^6.0.0, semver@^6.1.0, semver@^6.1.2, semver@^6.3.1, semver@^7.2.1, semver@^7.3.2, semver@^7.3.7, semver@^7.5.2, semver@^7.5.3, semver@^7.5.4:
+"semver@2 || 3 || 4 || 5", semver@7.6.0, semver@^5.5.0, semver@^6.0.0, semver@^6.1.0, semver@^6.1.2, semver@^6.3.1, semver@^7.2.1, semver@^7.3.2, semver@^7.3.7, semver@^7.5.2, semver@^7.5.3, semver@^7.5.4, semver@^7.6.2:
   version "7.6.3"
   resolved "https://registry.yarnpkg.com/semver/-/semver-7.6.3.tgz#980f7b5550bc175fb4dc09403085627f9eb33143"
   integrity sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==
@@ -12073,11 +10585,6 @@ sirv@^2.0.4:
     mrmime "^2.0.0"
     totalist "^3.0.0"
 
-sisteransi@^1.0.5:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/sisteransi/-/sisteransi-1.0.5.tgz#134d681297756437cc05ca01370d3a7a571075ed"
-  integrity sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==
-
 slash@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/slash/-/slash-2.0.0.tgz#de552851a1759df3a8f206535442f5ec4ddeab44"
@@ -12088,11 +10595,6 @@ slash@^3.0.0:
   resolved "https://registry.yarnpkg.com/slash/-/slash-3.0.0.tgz#6539be870c165adbd5240220dbe361f1bc4d4634"
   integrity sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==
 
-slash@^5.1.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"
@@ -12159,7 +10661,7 @@ source-map-js@^1.2.0:
   resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.2.0.tgz#16b809c162517b5b8c3e7dcd315a2a5c2612b2af"
   integrity sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==
 
-source-map-support@^0.5.16, source-map-support@^0.5.19:
+source-map-support@^0.5.19:
   version "0.5.21"
   resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.21.tgz#04fe7c7f9e1ed2d662233c28cb2b35b9f63f6e4f"
   integrity sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==
@@ -12279,39 +10781,12 @@ storybook-dark-mode@^4.0.1:
     fast-deep-equal "^3.1.3"
     memoizerific "^1.11.3"
 
-storybook@^8.2.9:
-  version "8.2.9"
-  resolved "https://registry.yarnpkg.com/storybook/-/storybook-8.2.9.tgz#35a670cb72367709b6ad3627dfb77c5e25a339f0"
-  integrity sha512-S7Q/Yt4A+nu1O23rg39lQvBqL2Vg+PKXbserDWUR4LFJtfmoZ2xGO8oFIhJmvvhjUBvolw1q7QDeswPq2i0sGw==
-  dependencies:
-    "@babel/core" "^7.24.4"
-    "@babel/types" "^7.24.0"
-    "@storybook/codemod" "8.2.9"
-    "@storybook/core" "8.2.9"
-    "@types/semver" "^7.3.4"
-    "@yarnpkg/fslib" "2.10.3"
-    "@yarnpkg/libzip" "2.3.0"
-    chalk "^4.1.0"
-    commander "^6.2.1"
-    cross-spawn "^7.0.3"
-    detect-indent "^6.1.0"
-    envinfo "^7.7.3"
-    execa "^5.0.0"
-    fd-package-json "^1.2.0"
-    find-up "^5.0.0"
-    fs-extra "^11.1.0"
-    giget "^1.0.0"
-    globby "^14.0.1"
-    jscodeshift "^0.15.1"
-    leven "^3.1.0"
-    ora "^5.4.1"
-    prettier "^3.1.1"
-    prompts "^2.4.0"
-    semver "^7.3.7"
-    strip-json-comments "^3.0.1"
-    tempy "^3.1.0"
-    tiny-invariant "^1.3.1"
-    ts-dedent "^2.0.0"
+storybook@^8.3.0:
+  version "8.3.0"
+  resolved "https://registry.yarnpkg.com/storybook/-/storybook-8.3.0.tgz#172a5d5e415b83bcb08a3a670a2e6f34383dfea1"
+  integrity sha512-XKU+nem9OKX/juvJPwka1Q7DTpSbOe0IMp8ZyLQWorhFKpquJdUjryl7Z9GiFZyyTykCqH4ItQ7h8PaOmqVMOw==
+  dependencies:
+    "@storybook/core" "8.3.0"
 
 stream@^0.0.3:
   version "0.0.3"
@@ -12425,7 +10900,7 @@ string.prototype.trimstart@^1.0.7:
     define-properties "^1.2.0"
     es-abstract "^1.22.1"
 
-string_decoder@^1.1.1, string_decoder@^1.3.0:
+string_decoder@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.3.0.tgz#42f114594a46cf1a8e30b0a84f56c78c3edac21e"
   integrity sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==
@@ -12621,18 +11096,6 @@ table@^6.0.9:
     string-width "^4.2.3"
     strip-ansi "^6.0.1"
 
-tar@^6.2.0:
-  version "6.2.0"
-  resolved "https://registry.yarnpkg.com/tar/-/tar-6.2.0.tgz#b14ce49a79cb1cd23bc9b016302dea5474493f73"
-  integrity sha512-/Wo7DcT0u5HUV486xg675HtjNd3BXZ6xDbzsCUZPt5iw8bTQ63bP0Raut3mvro9u+CUyq7YQd8Cx55fsZXxqLQ==
-  dependencies:
-    chownr "^2.0.0"
-    fs-minipass "^2.0.0"
-    minipass "^5.0.0"
-    minizlib "^2.1.1"
-    mkdirp "^1.0.3"
-    yallist "^4.0.0"
-
 telejson@^7.2.0:
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/telejson/-/telejson-7.2.0.tgz#3994f6c9a8f8d7f2dba9be2c7c5bbb447e876f32"
@@ -12640,28 +11103,6 @@ telejson@^7.2.0:
   dependencies:
     memoizerific "^1.11.3"
 
-temp-dir@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/temp-dir/-/temp-dir-3.0.0.tgz#7f147b42ee41234cc6ba3138cd8e8aa2302acffa"
-  integrity sha512-nHc6S/bwIilKHNRgK/3jlhDoIHcp45YgyiwcAk46Tr0LfEqGBVpmiAyuiuxeVE44m3mXnEeVhaipLOEWmH+Njw==
-
-temp@^0.8.4:
-  version "0.8.4"
-  resolved "https://registry.yarnpkg.com/temp/-/temp-0.8.4.tgz#8c97a33a4770072e0a05f919396c7665a7dd59f2"
-  integrity sha512-s0ZZzd0BzYv5tLSptZooSjK8oj6C+c19p7Vqta9+6NPOf7r+fxq0cJe6/oN4LTC79sy5NY8ucOJNgwsKCSbfqg==
-  dependencies:
-    rimraf "~2.6.2"
-
-tempy@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/tempy/-/tempy-3.1.0.tgz#00958b6df85db8589cb595465e691852aac038e9"
-  integrity sha512-7jDLIdD2Zp0bDe5r3D2qtkd1QOCacylBuL7oa4udvN6v2pqr4+LcCr67C8DR1zkpaZ8XosF5m1yQSabKAW6f2g==
-  dependencies:
-    is-stream "^3.0.0"
-    temp-dir "^3.0.0"
-    type-fest "^2.12.2"
-    unique-string "^3.0.0"
-
 test-exclude@^7.0.1:
   version "7.0.1"
   resolved "https://registry.yarnpkg.com/test-exclude/-/test-exclude-7.0.1.tgz#20b3ba4906ac20994e275bbcafd68d510264c2a2"
@@ -12890,7 +11331,7 @@ tsconfig-paths@^4.2.0:
     minimist "^1.2.6"
     strip-bom "^3.0.0"
 
-tslib@^1.10.0, tslib@^1.13.0, tslib@^1.8.1, tslib@^1.9.0:
+tslib@^1.10.0, tslib@^1.8.1, tslib@^1.9.0:
   version "1.14.1"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
@@ -12984,12 +11425,7 @@ type-fest@^0.8.1:
   resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.8.1.tgz#09e249ebde851d3b1e48d27c105444667f17b83d"
   integrity sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==
 
-type-fest@^1.0.1:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-1.4.0.tgz#e9fb813fe3bf1744ec359d55d1affefa76f14be1"
-  integrity sha512-yGSza74xk0UG8k+pLh5oeoYirvIiWo5t0/o3zHHAO2tRDiZcxWP7fywNlXhqb6/r6sWvwi+RsyQMWhVLe4BVuA==
-
-type-fest@^2.12.2, type-fest@^2.13.0, type-fest@^2.19.0, type-fest@~2.19:
+type-fest@^2.13.0, type-fest@^2.19.0, type-fest@~2.19:
   version "2.19.0"
   resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-2.19.0.tgz#88068015bb33036a598b952e55e9311a60fd3a9b"
   integrity sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==
@@ -13071,11 +11507,6 @@ uc.micro@^1.0.1, uc.micro@^1.0.5:
   resolved "https://registry.yarnpkg.com/uc.micro/-/uc.micro-1.0.6.tgz#9c411a802a409a91fc6cf74081baba34b24499ac"
   integrity sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==
 
-ufo@^1.3.2:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/ufo/-/ufo-1.4.0.tgz#39845b31be81b4f319ab1d99fd20c56cac528d32"
-  integrity sha512-Hhy+BhRBleFjpJ2vchUNN40qgkh0366FWJGqVLYBHev0vpHTrXSA0ryT+74UiW6KWsldNurQMKGqCm1M2zBciQ==
-
 unbox-primitive@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/unbox-primitive/-/unbox-primitive-1.0.2.tgz#29032021057d5e6cdbd08c5129c226dff8ed6f9e"
@@ -13091,33 +11522,10 @@ undici-types@~5.26.4:
   resolved "https://registry.yarnpkg.com/undici-types/-/undici-types-5.26.5.tgz#bcd539893d00b56e964fd2657a4866b221a65617"
   integrity sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==
 
-unicode-canonical-property-names-ecmascript@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.0.tgz#301acdc525631670d39f6146e0e77ff6bbdebddc"
-  integrity sha512-yY5PpDlfVIU5+y/BSCxAJRBIS1Zc2dDG3Ujq+sR0U+JjUevW2JhocOF+soROYDSaAezOzOKuyyixhD6mBknSmQ==
-
-unicode-match-property-ecmascript@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/unicode-match-property-ecmascript/-/unicode-match-property-ecmascript-2.0.0.tgz#54fd16e0ecb167cf04cf1f756bdcc92eba7976c3"
-  integrity sha512-5kaZCrbp5mmbz5ulBkDkbY0SsPOjKqVS35VpL9ulMPfSl0J0Xsm+9Evphv9CoIZFwre7aJoa94AY6seMKGVN5Q==
-  dependencies:
-    unicode-canonical-property-names-ecmascript "^2.0.0"
-    unicode-property-aliases-ecmascript "^2.0.0"
-
-unicode-match-property-value-ecmascript@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-2.1.0.tgz#cb5fffdcd16a05124f5a4b0bf7c3770208acbbe0"
-  integrity sha512-qxkjQt6qjg/mYscYMC0XKRn3Rh0wFPlfxB0xkt9CfyTvpX1Ra0+rAmdX2QyAobptSEvuy4RtpPRui6XkV+8wjA==
-
-unicode-property-aliases-ecmascript@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-2.1.0.tgz#43d41e3be698bd493ef911077c9b131f827e8ccd"
-  integrity sha512-6t3foTQI9qne+OZoVQB/8x8rk2k1eVy1gRXhV3oFQ5T6R1dqQ1xtin3XqSlx3+ATBkliTaR/hHyJBm+LVPNM8w==
-
-unicorn-magic@^0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/unicorn-magic/-/unicorn-magic-0.1.0.tgz#1bb9a51c823aaf9d73a8bfcd3d1a23dde94b0ce4"
-  integrity sha512-lRfVq8fE8gz6QMBuDM6a+LO3IAzTi05H6gCVaUpir2E1Rwpo4ZUog45KpNXKC/Mn3Yb9UDuHumeFTo9iV/D9FQ==
+undici-types@~6.19.2:
+  version "6.19.8"
+  resolved "https://registry.yarnpkg.com/undici-types/-/undici-types-6.19.8.tgz#35111c9d1437ab83a7cdc0abae2f26d88eda0a02"
+  integrity sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==
 
 unified@^11.0.0:
   version "11.0.4"
@@ -13132,13 +11540,6 @@ unified@^11.0.0:
     trough "^2.0.0"
     vfile "^6.0.0"
 
-unique-string@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/unique-string/-/unique-string-3.0.0.tgz#84a1c377aff5fd7a8bc6b55d8244b2bd90d75b9a"
-  integrity sha512-VGXBUVwxKMBUznyffQweQABPRRW1vHZAbadFZud4pLFAqRGvv/96vafgjWFqzourzr8YonlQiPgH0YCJfawoGQ==
-  dependencies:
-    crypto-random-string "^4.0.0"
-
 unist-util-is@^6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/unist-util-is/-/unist-util-is-6.0.0.tgz#b775956486aff107a9ded971d996c173374be424"
@@ -13244,7 +11645,7 @@ use-memo-one@^1.1.1:
   resolved "https://registry.yarnpkg.com/use-memo-one/-/use-memo-one-1.1.3.tgz#2fd2e43a2169eabc7496960ace8c79efef975e99"
   integrity sha512-g66/K7ZQGYrI6dy8GLpVcMsBp4s17xNkYJVSMvTEevGy3nDxHOfE6z8BVE22+5G5x7t3+bhzrlTDB7ObrEE0cQ==
 
-util-deprecate@^1.0.1, util-deprecate@^1.0.2:
+util-deprecate@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
   integrity sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==
@@ -13256,7 +11657,7 @@ util@^0.10.3:
   dependencies:
     inherits "2.0.3"
 
-util@^0.12.4, util@^0.12.5:
+util@^0.12.5:
   version "0.12.5"
   resolved "https://registry.yarnpkg.com/util/-/util-0.12.5.tgz#5f17a6059b73db61a875668781a1c2b136bd6fbc"
   integrity sha512-kZf/K6hEIrWHI6XqOFUiiMa+79wE/D8Q+NCNAWclkyg3b4d2k7s0QGepNjiABc+aR3N1PAyHL7p6UcLY6LmrnA==
@@ -13437,11 +11838,6 @@ w3c-xmlserializer@^5.0.0:
   dependencies:
     xml-name-validator "^5.0.0"
 
-walk-up-path@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/walk-up-path/-/walk-up-path-3.0.1.tgz#c8d78d5375b4966c717eb17ada73dbd41490e886"
-  integrity sha512-9YlCL/ynK3CTlrSRrDxZvUauLzAswPCrsaCgilqFevUYpeEW0/3ScEjaa3kbW/T0ghhkEr7mv+fpjqn1Y1YuTA==
-
 warning@^4.0.3:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3"
@@ -13449,13 +11845,6 @@ warning@^4.0.3:
   dependencies:
     loose-envify "^1.0.0"
 
-wcwidth@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/wcwidth/-/wcwidth-1.0.1.tgz#f0b0dcf915bc5ff1528afadb2c0e17b532da2fe8"
-  integrity sha512-XHPEwS0q6TaxcvG85+8EYkbiCux2XtWG2mkc47Ng2A77BQu9+DqIOJldST4HgPkuea7dvKSj5VgX3P1d4rW8Tg==
-  dependencies:
-    defaults "^1.0.3"
-
 webidl-conversions@^3.0.0:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-3.0.1.tgz#24534275e2a7bc6be7bc86611cc16ae0a5654871"
@@ -13661,15 +12050,6 @@ wrappy@1:
   resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
   integrity sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==
 
-write-file-atomic@^2.3.0:
-  version "2.4.3"
-  resolved "https://registry.yarnpkg.com/write-file-atomic/-/write-file-atomic-2.4.3.tgz#1fd2e9ae1df3e75b8d8c367443c692d4ca81f481"
-  integrity sha512-GaETH5wwsX+GcnzhPgKcKjJ6M2Cq3/iZp1WyY/X1CSqrW+jVNM9Y7D8EC2sM4ZG/V8wZlSniJnCKWPmBYAucRQ==
-  dependencies:
-    graceful-fs "^4.1.11"
-    imurmurhash "^0.1.4"
-    signal-exit "^3.0.2"
-
 write@1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/write/-/write-1.0.3.tgz#0800e14523b923a387e415123c865616aae0f5c3"
@@ -13730,11 +12110,6 @@ yallist@^3.0.2:
   resolved "https://registry.yarnpkg.com/yallist/-/yallist-3.1.1.tgz#dbb7daf9bfd8bac9ab45ebf602b8cbad0d5d08fd"
   integrity sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==
 
-yallist@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/yallist/-/yallist-4.0.0.tgz#9bb92790d9c0effec63be73519e11a35019a3a72"
-  integrity sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==
-
 yaml@^1.10.0, yaml@^1.7.2, yaml@^2.2.2, yaml@^2.3.0, yaml@~2.5.0:
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/yaml/-/yaml-2.5.0.tgz#c6165a721cf8000e91c36490a41d7be25176cf5d"

From 38a0d2e08dde7d040422519e3b9274d3101b567d Mon Sep 17 00:00:00 2001
From: carrillo-erik <119514965+carrillo-erik@users.noreply.github.com>
Date: Fri, 13 Sep 2024 08:34:56 -0700
Subject: [PATCH 08/62] refactor: [M3-6908] - Replace react-select in Profile
 (#10780)

* refactor: [M3-6908] - Replace react-select in Profile

* Update PhoneVerification styles

* Comment out styles

* Updates to Autocomplete to allow custom styles for PopperComponent

* Reapply updates to CreateAPITokenDrawer

* Add changeset

* Revert changes to TimezoneForm

* Fix more styling issues and mobile view

* Fix broken unit tests in CreateAPITokenDrawer

* Fix broken unit test in TimezoneForm

* Fix e2e test in Billing

* Fix failing e2e and console errors mentioned in PR review

* Fix styling issues from PR review

* Fix selected option highlight in Question Component

* Fix failing test, ui bug, and 3rd party auth bug
---
 .../pr-10780-tech-stories-1724255560445.md    |  5 ++
 .../core/account/security-questions.spec.ts   |  4 +-
 packages/manager/src/MainContent.tsx          |  6 +-
 .../Autocomplete/Autocomplete.styles.tsx      |  4 +-
 .../components/Autocomplete/Autocomplete.tsx  | 12 ++-
 .../APITokens/CreateAPITokenDrawer.test.tsx   | 18 ++--
 .../APITokens/CreateAPITokenDrawer.tsx        | 32 ++++---
 .../PhoneVerification.styles.ts               | 73 ++++++++--------
 .../PhoneVerification/PhoneVerification.tsx   | 87 +++++++++++--------
 .../SecurityQuestions/Question.tsx            | 36 ++++----
 .../QuestionAndAnswerPair.tsx                 |  7 +-
 .../DisplaySettings/TimezoneForm.test.tsx     |  6 +-
 .../Profile/DisplaySettings/TimezoneForm.tsx  | 81 +++++++++--------
 .../Profile/LishSettings/LishSettings.tsx     | 51 +++++++----
 .../manager/src/features/Profile/Profile.tsx  |  8 +-
 15 files changed, 255 insertions(+), 175 deletions(-)
 create mode 100644 packages/manager/.changeset/pr-10780-tech-stories-1724255560445.md

diff --git a/packages/manager/.changeset/pr-10780-tech-stories-1724255560445.md b/packages/manager/.changeset/pr-10780-tech-stories-1724255560445.md
new file mode 100644
index 00000000000..e4311cecf31
--- /dev/null
+++ b/packages/manager/.changeset/pr-10780-tech-stories-1724255560445.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Tech Stories
+---
+
+Replace 'react-select' with Autocomplete in Profile ([#10780](https://github.com/linode/manager/pull/10780))
diff --git a/packages/manager/cypress/e2e/core/account/security-questions.spec.ts b/packages/manager/cypress/e2e/core/account/security-questions.spec.ts
index aab84a220d3..bc280f36e5a 100644
--- a/packages/manager/cypress/e2e/core/account/security-questions.spec.ts
+++ b/packages/manager/cypress/e2e/core/account/security-questions.spec.ts
@@ -93,14 +93,14 @@ const setSecurityQuestionAnswer = (
   answer: string
 ) => {
   getSecurityQuestion(questionNumber).within(() => {
-    cy.get('[data-qa-enhanced-select]')
+    cy.findByLabelText(`Question ${questionNumber}`)
       .should('be.visible')
       .click()
       .type(`${question}{enter}`);
   });
 
   getSecurityQuestionAnswer(questionNumber).within(() => {
-    cy.get('[data-testid="textfield-input"]')
+    cy.findByLabelText(`Answer ${questionNumber}`)
       .should('be.visible')
       .should('be.enabled')
       .click()
diff --git a/packages/manager/src/MainContent.tsx b/packages/manager/src/MainContent.tsx
index 9172bf218c4..faf51f6d9c5 100644
--- a/packages/manager/src/MainContent.tsx
+++ b/packages/manager/src/MainContent.tsx
@@ -141,7 +141,11 @@ const Kubernetes = React.lazy(() =>
   }))
 );
 const ObjectStorage = React.lazy(() => import('src/features/ObjectStorage'));
-const Profile = React.lazy(() => import('src/features/Profile/Profile'));
+const Profile = React.lazy(() =>
+  import('src/features/Profile/Profile').then((module) => ({
+    default: module.Profile,
+  }))
+);
 const NodeBalancers = React.lazy(
   () => import('src/features/NodeBalancers/NodeBalancers')
 );
diff --git a/packages/manager/src/components/Autocomplete/Autocomplete.styles.tsx b/packages/manager/src/components/Autocomplete/Autocomplete.styles.tsx
index d87e298ea51..9f31b39af99 100644
--- a/packages/manager/src/components/Autocomplete/Autocomplete.styles.tsx
+++ b/packages/manager/src/components/Autocomplete/Autocomplete.styles.tsx
@@ -1,10 +1,12 @@
 import DoneIcon from '@mui/icons-material/Done';
-import Popper, { PopperProps } from '@mui/material/Popper';
+import Popper from '@mui/material/Popper';
 import { styled } from '@mui/material/styles';
 import React from 'react';
 
 import { omittedProps } from 'src/utilities/omittedProps';
 
+import type { PopperProps } from '@mui/material/Popper';
+
 export const StyledListItem = styled('li', {
   label: 'StyledListItem',
   shouldForwardProp: omittedProps(['selectAllOption']),
diff --git a/packages/manager/src/components/Autocomplete/Autocomplete.tsx b/packages/manager/src/components/Autocomplete/Autocomplete.tsx
index de989e277c0..e6fbc02dd21 100644
--- a/packages/manager/src/components/Autocomplete/Autocomplete.tsx
+++ b/packages/manager/src/components/Autocomplete/Autocomplete.tsx
@@ -15,6 +15,7 @@ import {
 } from './Autocomplete.styles';
 
 import type { AutocompleteProps } from '@mui/material/Autocomplete';
+import type { SxProps } from '@mui/system';
 import type { TextFieldProps } from 'src/components/TextField';
 
 export interface EnhancedAutocompleteProps<
@@ -26,7 +27,7 @@ export interface EnhancedAutocompleteProps<
     AutocompleteProps<T, Multiple, DisableClearable, FreeSolo>,
     'renderInput'
   > {
-  /** Removes "select all" option for multiselect */
+  /** Removes "select all" option for mutliselect */
   disableSelectAll?: boolean;
   /** Provides a hint with error styling to assist users. */
   errorText?: string;
@@ -41,6 +42,10 @@ export interface EnhancedAutocompleteProps<
   placeholder?: string;
   /** Label for the "select all" option. */
   selectAllLabel?: string;
+  /**
+   * The prop that allows defining CSS style overrides for the PopperComponent.
+   */
+  sxPopperComponent?: SxProps;
   textFieldProps?: Partial<TextFieldProps>;
 }
 
@@ -88,6 +93,7 @@ export const Autocomplete = <
     placeholder,
     renderOption,
     selectAllLabel = '',
+    sxPopperComponent,
     textFieldProps,
     value,
     ...rest
@@ -104,6 +110,9 @@ export const Autocomplete = <
 
   return (
     <MuiAutocomplete
+      PopperComponent={(props) => {
+        return <CustomPopper {...props} sx={sxPopperComponent} />;
+      }}
       options={
         multiple && !disableSelectAll && options.length > 0
           ? optionsWithSelectAll
@@ -163,7 +172,6 @@ export const Autocomplete = <
         );
       }}
       ChipProps={{ deleteIcon: <CloseIcon /> }}
-      PopperComponent={CustomPopper}
       clearOnBlur={clearOnBlur}
       data-qa-autocomplete
       defaultValue={defaultValue}
diff --git a/packages/manager/src/features/Profile/APITokens/CreateAPITokenDrawer.test.tsx b/packages/manager/src/features/Profile/APITokens/CreateAPITokenDrawer.test.tsx
index 124ffd92732..96de8bb2306 100644
--- a/packages/manager/src/features/Profile/APITokens/CreateAPITokenDrawer.test.tsx
+++ b/packages/manager/src/features/Profile/APITokens/CreateAPITokenDrawer.test.tsx
@@ -32,16 +32,16 @@ const props = {
 
 describe('Create API Token Drawer', () => {
   it('checks API Token Drawer rendering', () => {
-    const { getByTestId, getByText } = renderWithTheme(
+    const { getAllByTestId, getByTestId, getByText } = renderWithTheme(
       <CreateAPITokenDrawer {...props} />
     );
     const drawerTitle = getByText('Add Personal Access Token');
     expect(drawerTitle).toBeVisible();
 
     const labelTitle = getByText(/Label/);
-    const labelField = getByTestId('textfield-input');
+    const labelField = getAllByTestId('textfield-input');
     expect(labelTitle).toBeVisible();
-    expect(labelField).toBeEnabled();
+    expect(labelField[0]).toBeEnabled();
 
     const expiry = getByText(/Expiry/);
     expect(expiry).toBeVisible();
@@ -67,12 +67,12 @@ describe('Create API Token Drawer', () => {
         })
       );
 
-      const { getByLabelText, getByTestId, getByText } = renderWithTheme(
+      const { getAllByTestId, getByLabelText, getByText } = renderWithTheme(
         <CreateAPITokenDrawer {...props} />
       );
 
-      const labelField = getByTestId('textfield-input');
-      await userEvent.type(labelField, 'my-test-token');
+      const labelField = getAllByTestId('textfield-input');
+      await userEvent.type(labelField[0], 'my-test-token');
 
       const selectAllNoAccessPermRadioButton = getByLabelText(
         'Select no access for all'
@@ -110,8 +110,10 @@ describe('Create API Token Drawer', () => {
   });
 
   it('Should default to 6 months for expiration', () => {
-    const { getByText } = renderWithTheme(<CreateAPITokenDrawer {...props} />);
-    getByText('In 6 months');
+    const { getAllByRole } = renderWithTheme(
+      <CreateAPITokenDrawer {...props} />
+    );
+    expect(getAllByRole('combobox')[0]).toHaveDisplayValue('In 6 months');
   });
 
   it('Should show the Child Account Access scope for a parent user account with the parent/child feature flag on', () => {
diff --git a/packages/manager/src/features/Profile/APITokens/CreateAPITokenDrawer.tsx b/packages/manager/src/features/Profile/APITokens/CreateAPITokenDrawer.tsx
index bf6eab61363..b5df3b5d57c 100644
--- a/packages/manager/src/features/Profile/APITokens/CreateAPITokenDrawer.tsx
+++ b/packages/manager/src/features/Profile/APITokens/CreateAPITokenDrawer.tsx
@@ -3,8 +3,8 @@ import { DateTime } from 'luxon';
 import * as React from 'react';
 
 import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel';
+import { Autocomplete } from 'src/components/Autocomplete/Autocomplete';
 import { Drawer } from 'src/components/Drawer';
-import Select, { Item } from 'src/components/EnhancedSelect/Select';
 import { FormControl } from 'src/components/FormControl';
 import { FormHelperText } from 'src/components/FormHelperText';
 import { Notice } from 'src/components/Notice/Notice';
@@ -30,7 +30,6 @@ import {
   StyledSelectCell,
 } from './APITokenDrawer.styles';
 import {
-  Permission,
   allScopesAreTheSame,
   basePermNameMap,
   hasAccessBeenSelectedForAllScopes,
@@ -38,6 +37,8 @@ import {
   scopeStringToPermTuples,
 } from './utils';
 
+import type { Permission } from './utils';
+
 type Expiry = [string, string];
 
 export const genExpiryTups = (): Expiry[] => {
@@ -172,10 +173,6 @@ export const CreateAPITokenDrawer = (props: Props) => {
     form.setFieldValue('scopes', newScopes);
   };
 
-  const handleExpiryChange = (e: Item<string>) => {
-    form.setFieldValue('expiry', e.value);
-  };
-
   // Permission scopes with a different default when Selecting All for the specified access level.
   const excludedScopesFromSelectAll: ExcludedScope[] = [
     {
@@ -214,11 +211,26 @@ export const CreateAPITokenDrawer = (props: Props) => {
         value={form.values.label}
       />
       <FormControl data-testid="expiry-select">
-        <Select
-          isClearable={false}
+        <Autocomplete
+          onChange={(_, selected) =>
+            form.setFieldValue('expiry', selected.value)
+          }
+          sx={{
+            '&& .MuiAutocomplete-inputRoot': {
+              paddingLeft: 1,
+              paddingRight: 0,
+            },
+            '&& .MuiInput-input': {
+              padding: '0px 2px',
+            },
+          }}
+          sxPopperComponent={{
+            '&& .MuiAutocomplete-listbox': {
+              padding: 0,
+            },
+          }}
+          disableClearable
           label="Expiry"
-          name="expiry"
-          onChange={handleExpiryChange}
           options={expiryList}
           value={expiryList.find((item) => item.value === form.values.expiry)}
         />
diff --git a/packages/manager/src/features/Profile/AuthenticationSettings/PhoneVerification/PhoneVerification.styles.ts b/packages/manager/src/features/Profile/AuthenticationSettings/PhoneVerification/PhoneVerification.styles.ts
index 4a05ca75936..d6caaa14b50 100644
--- a/packages/manager/src/features/Profile/AuthenticationSettings/PhoneVerification/PhoneVerification.styles.ts
+++ b/packages/manager/src/features/Profile/AuthenticationSettings/PhoneVerification/PhoneVerification.styles.ts
@@ -1,10 +1,11 @@
 import { styled } from '@mui/material/styles';
 
+import { Autocomplete } from 'src/components/Autocomplete/Autocomplete';
 import { Box } from 'src/components/Box';
-import Select from 'src/components/EnhancedSelect/Select';
+import { FormHelperText } from 'src/components/FormHelperText';
 import { TextField } from 'src/components/TextField';
 import { Typography } from 'src/components/Typography';
-import { FormHelperText } from 'src/components/FormHelperText';
+import { omittedProps } from 'src/utilities/omittedProps';
 
 export const StyledCodeSentMessageBox = styled(Box, {
   label: 'StyledCodeSentMessageBox',
@@ -19,18 +20,22 @@ export const StyledPhoneNumberTitle = styled(Typography, {
   marginTop: theme.spacing(1.5),
 }));
 
-export const StyledButtonContainer = styled(Box, {
-  label: 'StyledButtonContainer',
+export const StyledLabel = styled(Typography, {
+  label: 'StyledLabel',
 })(({ theme }) => ({
-  gap: theme.spacing(),
-  [theme.breakpoints.down('md')]: {
-    marginTop: theme.spacing(2),
-  },
+  color: theme.name === 'light' ? '#555' : '#c9cacb',
+  fontSize: '.875rem',
+  lineHeight: '1',
+  marginBottom: '8px',
+  marginTop: theme.spacing(2),
+  padding: 0,
 }));
 
 export const StyledInputContainer = styled(Box, {
   label: 'StyledInputContainer',
+  shouldForwardProp: omittedProps(['isPhoneInputFocused']),
 })<{ isPhoneInputFocused: boolean }>(({ isPhoneInputFocused, theme }) => ({
+  backgroundColor: theme.name === 'dark' ? '#343438' : undefined,
   border: theme.name === 'light' ? '1px solid #ccc' : '1px solid #222',
   transition: 'border-color 225ms ease-in-out',
   width: 'fit-content',
@@ -46,28 +51,31 @@ export const StyledInputContainer = styled(Box, {
         })),
 }));
 
-export const StyledPhoneNumberInput = styled(TextField, {
-  label: 'StyledPhoneNumberInput',
-})(() => ({
-  '&.Mui-focused': {
+export const StyledISOCodeSelect = styled(Autocomplete, {
+  label: 'StyledISOCodeSelect',
+})(({ theme }) => ({
+  '& div.Mui-focused': {
     borderColor: 'unset',
     boxShadow: 'none',
   },
+  '& div.MuiAutocomplete-inputRoot': {
+    border: 'unset',
+  },
+  '&& .MuiInputBase-root svg': {
+    color: `${theme.palette.primary.main}`,
+    opacity: '1',
+  },
   '&:focus': {
     borderColor: 'unset',
     boxShadow: 'unset',
   },
-  border: 'unset',
-  minWidth: '300px',
+  height: '34px',
+  width: '70px !important',
 }));
 
-export const StyledSelect = styled(Select, {
-  label: 'StyledSelect',
-})(({ theme }) => ({
-  '& .MuiInputBase-input .react-select__indicators svg': {
-    color: `${theme.palette.primary.main} !important`,
-    opacity: '1 !important',
-  },
+export const StyledPhoneNumberInput = styled(TextField, {
+  label: 'StyledPhoneNumberInput',
+})(() => ({
   '&.Mui-focused': {
     borderColor: 'unset',
     boxShadow: 'none',
@@ -77,19 +85,7 @@ export const StyledSelect = styled(Select, {
     boxShadow: 'unset',
   },
   border: 'unset',
-  height: '34px',
-  width: '70px !important',
-}));
-
-export const StyledLabel = styled(Typography, {
-  label: 'StyledLabel',
-})(({ theme }) => ({
-  color: theme.name === 'light' ? '#555' : '#c9cacb',
-  fontSize: '.875rem',
-  lineHeight: '1',
-  marginBottom: '8px',
-  marginTop: theme.spacing(2),
-  padding: 0,
+  minWidth: '300px',
 }));
 
 export const StyledFormHelperText = styled(FormHelperText, {
@@ -102,3 +98,12 @@ export const StyledFormHelperText = styled(FormHelperText, {
   top: 42,
   width: '100%',
 }));
+
+export const StyledButtonContainer = styled(Box, {
+  label: 'StyledButtonContainer',
+})(({ theme }) => ({
+  gap: theme.spacing(),
+  [theme.breakpoints.down('md')]: {
+    marginTop: theme.spacing(2),
+  },
+}));
diff --git a/packages/manager/src/features/Profile/AuthenticationSettings/PhoneVerification/PhoneVerification.tsx b/packages/manager/src/features/Profile/AuthenticationSettings/PhoneVerification/PhoneVerification.tsx
index c22efc95617..d6aa0d7bc31 100644
--- a/packages/manager/src/features/Profile/AuthenticationSettings/PhoneVerification/PhoneVerification.tsx
+++ b/packages/manager/src/features/Profile/AuthenticationSettings/PhoneVerification/PhoneVerification.tsx
@@ -1,9 +1,8 @@
-import { APIError } from '@linode/api-v4/lib/types';
+import { useQueryClient } from '@tanstack/react-query';
 import { useFormik } from 'formik';
-import { CountryCode, parsePhoneNumber } from 'libphonenumber-js';
+import { parsePhoneNumber } from 'libphonenumber-js';
 import { useSnackbar } from 'notistack';
 import * as React from 'react';
-import { useQueryClient } from '@tanstack/react-query';
 
 import { Box } from 'src/components/Box';
 import { Button } from 'src/components/Button/Button';
@@ -19,24 +18,30 @@ import {
   useVerifyPhoneVerificationCodeMutation,
 } from 'src/queries/profile/profile';
 
+import { countries } from './countries';
+import { getCountryFlag, getCountryName, getFormattedNumber } from './helpers';
 import {
   StyledButtonContainer,
   StyledCodeSentMessageBox,
   StyledFormHelperText,
+  StyledISOCodeSelect,
   StyledInputContainer,
   StyledLabel,
   StyledPhoneNumberInput,
   StyledPhoneNumberTitle,
-  StyledSelect,
 } from './PhoneVerification.styles';
-import { countries } from './countries';
-import { getCountryFlag, getCountryName, getFormattedNumber } from './helpers';
 
 import type {
   SendPhoneVerificationCodePayload,
   VerifyVerificationCodePayload,
 } from '@linode/api-v4/lib/profile/types';
-import type { Item } from 'src/components/EnhancedSelect/Select';
+import type { APIError } from '@linode/api-v4/lib/types';
+import type { CountryCode } from 'libphonenumber-js';
+
+export interface SelectPhoneVerificationOption {
+  label: string;
+  value: string;
+}
 
 export const PhoneVerification = ({
   phoneNumberRef,
@@ -67,18 +72,22 @@ export const PhoneVerification = ({
     mutateAsync: sendPhoneVerificationCode,
     reset: resetSendCodeMutation,
   } = useSendPhoneVerificationCodeMutation();
+
   const {
     error: verifyError,
     mutateAsync: sendVerificationCode,
     reset: resetCodeMutation,
   } = useVerifyPhoneVerificationCodeMutation();
+
   const isCodeSent = data !== undefined;
+
   const onSubmitPhoneNumber = async (
     values: SendPhoneVerificationCodePayload
   ) => {
     resetCodeMutation();
     return await sendPhoneVerificationCode(values);
   };
+
   const onSubmitVerificationCode = async (
     values: VerifyVerificationCodePayload
   ) => {
@@ -166,22 +175,10 @@ export const PhoneVerification = ({
       );
   };
 
-  const customStyles = {
-    menu: () => ({
-      marginLeft: '-1px !important',
-      marginTop: '0px !important',
-      width: '500px',
-    }),
-    singleValue: (provided: React.CSSProperties) =>
-      ({
-        ...provided,
-        fontSize: '20px',
-        textAlign: 'center',
-      } as const),
-  };
   const selectedCountry = countries.find(
     (country) => country.code === sendCodeForm.values.iso_code
   );
+
   const isFormSubmitting = isCodeSent
     ? verifyCodeForm.isSubmitting
     : sendCodeForm.isSubmitting;
@@ -204,6 +201,7 @@ export const PhoneVerification = ({
           </Typography>
         </StyledCodeSentMessageBox>
       ) : null}
+
       <Box>
         <form
           onSubmit={
@@ -259,33 +257,46 @@ export const PhoneVerification = ({
                 display="flex"
                 isPhoneInputFocused={isPhoneInputFocused}
               >
-                <StyledSelect
-                  isOptionSelected={(option) =>
-                    sendCodeForm.values.iso_code === option.value
-                  }
-                  onChange={(item: Item) =>
-                    sendCodeForm.setFieldValue('iso_code', item.value)
+                <StyledISOCodeSelect
+                  isOptionEqualToValue={(option, value) =>
+                    option.label === value.label
                   }
-                  options={countries.map((counrty) => ({
-                    label: `${getCountryName(counrty.name)} ${
-                      counrty.dialingCode
-                    } ${getCountryFlag(counrty.code)}`,
-                    value: counrty.code,
+                  onChange={(_, item: SelectPhoneVerificationOption) => {
+                    sendCodeForm.setFieldValue('iso_code', item.value);
+                  }}
+                  options={countries.map((country) => ({
+                    label: `${getCountryName(country.name)} ${
+                      country.dialingCode
+                    } ${getCountryFlag(country.code)}`,
+                    value: country.code,
                   }))}
+                  sxPopperComponent={{
+                    '& .MuiPaper-root.MuiAutocomplete-paper': {
+                      border: '1px solid #3683dc',
+                      maxHeight: '285px',
+                      overflow: 'hidden',
+                      textWrap: 'nowrap',
+                      width: 'fit-content',
+                    },
+                  }}
+                  textFieldProps={{
+                    hideLabel: true,
+                    style: {
+                      border: 'none',
+                      minWidth: '72px',
+                    },
+                  }}
                   value={{
                     label: getCountryFlag(sendCodeForm.values.iso_code),
-                    value: sendCodeForm.values.iso_code,
                   }}
-                  hideLabel
+                  autoHighlight
+                  disableClearable
+                  disablePortal={true}
                   id="iso_code"
-                  isClearable={false}
                   label="ISO Code"
-                  menuPlacement="bottom"
-                  name="iso_code"
-                  noMarginTop
                   onBlur={() => setIsPhoneInputFocused(false)}
                   onFocus={() => setIsPhoneInputFocused(true)}
-                  styles={customStyles}
+                  placeholder=""
                 />
                 <StyledPhoneNumberInput
                   InputProps={{
diff --git a/packages/manager/src/features/Profile/AuthenticationSettings/SecurityQuestions/Question.tsx b/packages/manager/src/features/Profile/AuthenticationSettings/SecurityQuestions/Question.tsx
index 32e575e3cf7..a77e0e8b22d 100644
--- a/packages/manager/src/features/Profile/AuthenticationSettings/SecurityQuestions/Question.tsx
+++ b/packages/manager/src/features/Profile/AuthenticationSettings/SecurityQuestions/Question.tsx
@@ -1,16 +1,22 @@
-import { SecurityQuestion } from '@linode/api-v4/lib/profile';
 import * as React from 'react';
 
-import Select, { Item } from 'src/components/EnhancedSelect';
+import { Autocomplete } from 'src/components/Autocomplete/Autocomplete';
 import { InputLabel } from 'src/components/InputLabel';
 import { LinkButton } from 'src/components/LinkButton';
 import { Typography } from 'src/components/Typography';
 
+import type { SecurityQuestion } from '@linode/api-v4/lib/profile';
+
+export interface SelectQuestionOption {
+  label: string;
+  value: number;
+}
+
 interface Props {
   index: number;
   isReadOnly?: boolean;
   onClickEdit: () => void;
-  options: Item<number>[];
+  options: SelectQuestionOption[];
   questionResponse: SecurityQuestion | undefined;
   setFieldValue: (field: string, value: SecurityQuestion) => void;
 }
@@ -32,15 +38,8 @@ export const Question = (props: Props) => {
       }
     : undefined;
 
-  const name = `security_questions[${index}].id`;
   const label = `Question ${index + 1}`;
-  const onChange = (item: Item<number>) => {
-    setFieldValue(`security_questions[${index}]`, {
-      id: item.value,
-      question: item.label,
-      response: '',
-    });
-  };
+
   if (isReadOnly) {
     return (
       <>
@@ -55,14 +54,21 @@ export const Question = (props: Props) => {
     );
   }
   return (
-    <Select
+    <Autocomplete
+      onChange={(_, item) => {
+        setFieldValue(`security_questions[${index}]`, {
+          id: item.value,
+          question: item.label,
+          response: '',
+        });
+      }}
+      autoHighlight
       defaultValue={currentOption}
-      isClearable={false}
+      disableClearable
       label={label}
-      name={name}
-      onChange={onChange}
       options={options}
       placeholder="Select a question"
+      value={options.find((option) => option.value === questionResponse?.id)}
     />
   );
 };
diff --git a/packages/manager/src/features/Profile/AuthenticationSettings/SecurityQuestions/QuestionAndAnswerPair.tsx b/packages/manager/src/features/Profile/AuthenticationSettings/SecurityQuestions/QuestionAndAnswerPair.tsx
index 42ed09b940f..cab647664d9 100644
--- a/packages/manager/src/features/Profile/AuthenticationSettings/SecurityQuestions/QuestionAndAnswerPair.tsx
+++ b/packages/manager/src/features/Profile/AuthenticationSettings/SecurityQuestions/QuestionAndAnswerPair.tsx
@@ -1,19 +1,20 @@
-import { SecurityQuestion } from '@linode/api-v4/lib/profile';
 import { styled } from '@mui/material/styles';
 import * as React from 'react';
 
 import { Box } from 'src/components/Box';
-import { Item } from 'src/components/EnhancedSelect';
 
 import { Answer } from './Answer';
 import { Question } from './Question';
 
+import type { SelectQuestionOption } from './Question';
+import type { SecurityQuestion } from '@linode/api-v4/lib/profile';
+
 interface Props {
   edit: boolean;
   handleChange: any;
   index: number;
   onEdit: () => void;
-  options: Item<number>[];
+  options: SelectQuestionOption[];
   questionResponse: SecurityQuestion | undefined;
   securityQuestionRef?: React.RefObject<HTMLInputElement>;
   setFieldValue: (field: string, value: SecurityQuestion | number) => void;
diff --git a/packages/manager/src/features/Profile/DisplaySettings/TimezoneForm.test.tsx b/packages/manager/src/features/Profile/DisplaySettings/TimezoneForm.test.tsx
index e3e94fe5e58..d011a5ce24d 100644
--- a/packages/manager/src/features/Profile/DisplaySettings/TimezoneForm.test.tsx
+++ b/packages/manager/src/features/Profile/DisplaySettings/TimezoneForm.test.tsx
@@ -53,13 +53,11 @@ describe('Timezone change form', () => {
   });
 
   it("should include text with the user's current time zone", async () => {
-    const { getByText } = renderWithTheme(
+    const { queryByTestId } = renderWithTheme(
       <TimezoneForm loggedInAsCustomer={true} />,
       { queryClient }
     );
-
-    expect(getByText('New York', { exact: false })).toBeInTheDocument();
-    expect(getByText('Eastern Time', { exact: false })).toBeInTheDocument();
+    expect(queryByTestId('admin-notice')).toHaveTextContent('America/New_York');
   });
 });
 
diff --git a/packages/manager/src/features/Profile/DisplaySettings/TimezoneForm.tsx b/packages/manager/src/features/Profile/DisplaySettings/TimezoneForm.tsx
index 3e871764f68..884fea18900 100644
--- a/packages/manager/src/features/Profile/DisplaySettings/TimezoneForm.tsx
+++ b/packages/manager/src/features/Profile/DisplaySettings/TimezoneForm.tsx
@@ -5,14 +5,12 @@ import * as React from 'react';
 
 import timezones from 'src/assets/timezones/timezones';
 import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel';
-import { Box } from 'src/components/Box';
+import { Autocomplete } from 'src/components/Autocomplete/Autocomplete';
 import { CircleProgress } from 'src/components/CircleProgress';
-import Select from 'src/components/EnhancedSelect/Select';
+import { Stack } from 'src/components/Stack';
 import { Typography } from 'src/components/Typography';
 import { useMutateProfile, useProfile } from 'src/queries/profile/profile';
 
-import type { Item } from 'src/components/EnhancedSelect/Select';
-
 interface Props {
   loggedInAsCustomer: boolean;
 }
@@ -23,6 +21,11 @@ interface Timezone {
   offset: number;
 }
 
+export interface TimezoneOption<T = string, L = string> {
+  label: L;
+  value: T;
+}
+
 export const formatOffset = ({ label, offset }: Timezone) => {
   const minutes = (Math.abs(offset) % 60).toLocaleString(undefined, {
     minimumIntegerDigits: 2,
@@ -34,7 +37,7 @@ export const formatOffset = ({ label, offset }: Timezone) => {
   return `\(GMT ${isPositive}${hours}:${minutes}\) ${label}`;
 };
 
-const renderTimeZonesList = (): Item<string>[] => {
+const renderTimezonesList = (): TimezoneOption<string>[] => {
   return timezones
     .map((tz) => ({ ...tz, offset: DateTime.now().setZone(tz.name).offset }))
     .sort((a, b) => a.offset - b.offset)
@@ -44,35 +47,38 @@ const renderTimeZonesList = (): Item<string>[] => {
     });
 };
 
-const timezoneList = renderTimeZonesList();
+const timezoneList = renderTimezonesList();
 
 export const TimezoneForm = (props: Props) => {
   const { loggedInAsCustomer } = props;
   const { enqueueSnackbar } = useSnackbar();
   const { data: profile } = useProfile();
+  const [timezoneValue, setTimezoneValue] = React.useState<
+    TimezoneOption<string> | string
+  >('');
   const { error, isPending, mutateAsync: updateProfile } = useMutateProfile();
-  const [value, setValue] = React.useState<Item<string> | null>(null);
   const timezone = profile?.timezone ?? '';
 
-  const handleTimezoneChange = (timezone: Item<string>) => {
-    setValue(timezone);
+  const handleTimezoneChange = (timezone: TimezoneOption<string>) => {
+    setTimezoneValue(timezone);
   };
 
   const onSubmit = () => {
-    if (value === null) {
+    if (timezoneValue === '') {
       return;
     }
 
-    updateProfile({ timezone: String(value.value) }).then(() => {
+    updateProfile({ timezone: String(timezoneValue) }).then(() => {
       enqueueSnackbar('Successfully updated timezone', { variant: 'success' });
     });
   };
 
-  const defaultTimeZone = timezoneList.find((eachZone) => {
+  const defaultTimezone = timezoneList.find((eachZone) => {
     return eachZone.value === timezone;
   });
 
-  const disabled = value === null || defaultTimeZone?.value === value?.value;
+  const disabled =
+    timezoneValue === '' || defaultTimezone?.value === timezoneValue;
 
   if (!profile) {
     return <CircleProgress />;
@@ -88,27 +94,28 @@ export const TimezoneForm = (props: Props) => {
           </Typography>
         </StyledLoggedInAsCustomerNotice>
       ) : null}
-      <StyledRootContainer
-        sx={(theme) => ({
-          [theme.breakpoints.down('md')]: {
-            alignItems: 'flex-start',
-            flexDirection: 'column',
-          },
-        })}
-        alignItems="flex-end"
-        display="flex"
-        justifyContent="space-between"
-      >
-        <Select
-          data-qa-tz-select
-          defaultValue={defaultTimeZone}
-          errorText={error?.[0].reason}
-          isClearable={false}
-          label="Timezone"
-          onChange={handleTimezoneChange}
-          options={timezoneList}
-          placeholder={'Choose a Timezone'}
-        />
+      <StyledRootContainer>
+        <Stack>
+          <Autocomplete
+            sxPopperComponent={{
+              maxHeight: '285px',
+              overflow: 'hidden',
+            }}
+            value={timezoneList.find(
+              (option) => option.value === timezoneValue
+            )}
+            autoHighlight
+            data-qa-tz-select
+            defaultValue={defaultTimezone}
+            disableClearable
+            errorText={error?.[0].reason}
+            label="Timezone"
+            onChange={(_, option) => handleTimezoneChange(option)}
+            options={timezoneList}
+            placeholder="Choose a Timezone"
+            sx={{ width: '416px' }}
+          />
+        </Stack>
         <ActionsPanel
           primaryButtonProps={{
             disabled,
@@ -129,10 +136,14 @@ export const TimezoneForm = (props: Props) => {
   );
 };
 
-const StyledRootContainer = styled(Box, {
+const StyledRootContainer = styled('div', {
   label: 'StyledRootContainer',
 })(({ theme }) => ({
+  alignItems: 'flex-end',
+  display: 'flex',
+  justifyContent: 'space-between',
   [theme.breakpoints.down('md')]: {
+    alignItems: 'flex-start',
     flexDirection: 'column',
   },
 }));
diff --git a/packages/manager/src/features/Profile/LishSettings/LishSettings.tsx b/packages/manager/src/features/Profile/LishSettings/LishSettings.tsx
index 1aa5aaa06d5..6cfcc2c5e13 100644
--- a/packages/manager/src/features/Profile/LishSettings/LishSettings.tsx
+++ b/packages/manager/src/features/Profile/LishSettings/LishSettings.tsx
@@ -1,44 +1,55 @@
-import { Profile } from '@linode/api-v4/lib/profile';
-import { APIError } from '@linode/api-v4/lib/types';
 import { useTheme } from '@mui/material/styles';
 import { equals, lensPath, remove, set } from 'ramda';
 import * as React from 'react';
 
 import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel';
+import { Autocomplete } from 'src/components/Autocomplete/Autocomplete';
 import { Box } from 'src/components/Box';
 import { Button } from 'src/components/Button/Button';
 import { DocumentTitleSegment } from 'src/components/DocumentTitle';
-import Select, { Item } from 'src/components/EnhancedSelect/Select';
+import { FormControl } from 'src/components/FormControl';
 import { Notice } from 'src/components/Notice/Notice';
 import { Paper } from 'src/components/Paper';
 import { TextField } from 'src/components/TextField';
 import { Typography } from 'src/components/Typography';
-import { FormControl } from 'src/components/FormControl';
 import { useMutateProfile, useProfile } from 'src/queries/profile/profile';
 import { getAPIErrorOrDefault } from 'src/utilities/errorUtils';
 import { getAPIErrorFor } from 'src/utilities/getAPIErrorFor';
 import { scrollErrorIntoView } from 'src/utilities/scrollErrorIntoView';
 
+import type { Profile } from '@linode/api-v4/lib/profile';
+import type { APIError } from '@linode/api-v4/lib/types';
+
+export interface LishAuthOption<T = string, L = string> {
+  label: L;
+  value: T;
+}
+
 export const LishSettings = () => {
   const theme = useTheme();
   const { data: profile, isLoading } = useProfile();
   const { mutateAsync: updateProfile } = useMutateProfile();
   const [submitting, setSubmitting] = React.useState<boolean>(false);
+  const [errors, setErrors] = React.useState<APIError[]>([]);
+  const [success, setSuccess] = React.useState<string>();
+  const thirdPartyEnabled = profile?.authentication_type !== 'password';
+
   const [lishAuthMethod, setLishAuthMethod] = React.useState<
     Profile['lish_auth_method'] | undefined
   >(profile?.lish_auth_method || 'password_keys');
+
   const [authorizedKeys, setAuthorizedKeys] = React.useState<string[]>(
     profile?.authorized_keys || []
   );
+
   const [authorizedKeysCount, setAuthorizedKeysCount] = React.useState<number>(
     profile?.authorized_keys ? profile!.authorized_keys.length : 1
   );
-  const [errors, setErrors] = React.useState<APIError[]>([]);
-  const [success, setSuccess] = React.useState<string>();
-  const thirdPartyEnabled = profile?.authentication_type !== 'password';
+
   const tooltipText = thirdPartyEnabled
     ? 'Password is disabled because Third-Party Authentication has been enabled.'
     : '';
+
   const hasErrorFor = getAPIErrorFor(
     {
       authorized_keys: 'ssh public keys',
@@ -46,13 +57,14 @@ export const LishSettings = () => {
     },
     errors
   );
+
   const generalError = hasErrorFor('none');
   const authMethodError = hasErrorFor('lish_auth_method');
   const authorizedKeysError = hasErrorFor('authorized_keys');
 
   const modeOptions = [
     {
-      isDisabled: profile?.authentication_type !== 'password',
+      disabled: profile?.authentication_type !== 'password',
       label: 'Allow both password and key authentication',
       value: 'password_keys',
     },
@@ -68,9 +80,9 @@ export const LishSettings = () => {
 
   const defaultMode = modeOptions.find((eachMode) => {
     if (profile?.authentication_type !== 'password') {
-      return (eachMode.value as any) === 'keys_only';
+      return (eachMode.value as Profile['lish_auth_method']) === 'keys_only';
     } else {
-      return (eachMode.value as any) === lishAuthMethod;
+      return (eachMode.value as Profile['lish_auth_method']) === lishAuthMethod;
     }
   });
 
@@ -85,7 +97,7 @@ export const LishSettings = () => {
 
     updateProfile({
       authorized_keys: keys,
-      lish_auth_method: lishAuthMethod as any,
+      lish_auth_method: lishAuthMethod as Profile['lish_auth_method'],
     })
       .then((profileData) => {
         setSubmitting(false);
@@ -103,9 +115,6 @@ export const LishSettings = () => {
       });
   };
 
-  const onListAuthMethodChange = (e: Item<Profile['lish_auth_method']>) =>
-    setLishAuthMethod(e.value);
-
   const onPublicKeyChange = (idx: number) => (
     e: React.ChangeEvent<HTMLInputElement>
   ) => {
@@ -133,20 +142,26 @@ export const LishSettings = () => {
         {isLoading ? null : (
           <>
             <FormControl sx={{ display: 'flex' }}>
-              <Select
+              <Autocomplete
+                onChange={(
+                  _,
+                  item: LishAuthOption<Profile['lish_auth_method']>
+                ) => setLishAuthMethod(item.value)}
                 textFieldProps={{
                   dataAttrs: {
                     'data-qa-mode-select': true,
                   },
                   tooltipText,
                 }}
+                value={modeOptions.find(
+                  (option) => option.value === lishAuthMethod
+                )}
                 defaultValue={defaultMode}
+                disableClearable
                 errorText={authMethodError}
+                getOptionDisabled={(option) => option.disabled === true}
                 id="mode-select"
-                isClearable={false}
                 label="Authentication Mode"
-                name="mode-select"
-                onChange={onListAuthMethodChange as any}
                 options={modeOptions}
               />
             </FormControl>
diff --git a/packages/manager/src/features/Profile/Profile.tsx b/packages/manager/src/features/Profile/Profile.tsx
index 39351969629..3e618aae6d3 100644
--- a/packages/manager/src/features/Profile/Profile.tsx
+++ b/packages/manager/src/features/Profile/Profile.tsx
@@ -3,7 +3,9 @@ import { useRouteMatch } from 'react-router-dom';
 
 import { DocumentTitleSegment } from 'src/components/DocumentTitle';
 import { LandingHeader } from 'src/components/LandingHeader';
-import { NavTab, NavTabs } from 'src/components/NavTabs/NavTabs';
+import { NavTabs } from 'src/components/NavTabs/NavTabs';
+
+import type { NavTab } from 'src/components/NavTabs/NavTabs';
 
 const SSHKeys = React.lazy(() =>
   import('./SSHKeys/SSHKeys').then((module) => ({
@@ -42,7 +44,7 @@ const APITokens = React.lazy(() =>
   }))
 );
 
-const Profile = () => {
+export const Profile = () => {
   const { url } = useRouteMatch();
 
   const tabs: NavTab[] = [
@@ -96,5 +98,3 @@ const Profile = () => {
     </React.Fragment>
   );
 };
-
-export default Profile;

From 7c105de3ba87fab60ffec4645b8938175e384852 Mon Sep 17 00:00:00 2001
From: cpathipa <119517080+cpathipa@users.noreply.github.com>
Date: Fri, 13 Sep 2024 11:05:19 -0500
Subject: [PATCH 09/62] feat:  [M3-8326],  [M3-8055] - Create Linode - Create
 Using Command Line A/B Test (#10906)

* unit test coverage for HostNameTableCell

* Revert "unit test coverage for HostNameTableCell"

This reverts commit b274baf67e27d79fd4e764607ded7c5aa755ee8b.

* Create feature flag for DX tools A/B testing

* Add data attributes for DX tools for tracking

* Update Actions.test.tsx

* Test flag

* Add classname

* Add event emitters to the LD from DX tools

* update with correct keys

* Destructure tabs

* code cleanup

* Add event emitter to Integration and SDK tab resources.

* Add go and python code snippets

* Add Linode CLI Tab Selection

* Remove old ab test code

* Cleanup conditionals

* Add changeset

* Revert "Merge branch 'linode:develop' into develop"

This reverts commit bfed239a5f383c949bc33004ed59f1700de18b64, reversing
changes made to 342fd96f5370f11ff3467e0c5340a9bbd1127da4.

* Reapply "Merge branch 'linode:develop' into develop"

This reverts commit 9e54b5540de7388c6863dcac7e92d8777c90e5c1.

---------

Co-authored-by: Jaalah Ramos <jaalah.ramos@gmail.com>
---
 .../pr-10906-added-1726196972242.md           |  5 +++
 .../ResourcesLinks.tsx                        |  7 +++-
 .../ResourcesLinksTypes.ts                    |  1 +
 packages/manager/src/constants.ts             | 31 ++++++++++++++
 .../manager/src/dev-tools/FeatureFlagTool.tsx |  1 +
 packages/manager/src/featureFlags.ts          |  2 +
 .../Linodes/LinodeCreatev2/Actions.test.tsx   |  2 +-
 .../Linodes/LinodeCreatev2/Actions.tsx        | 15 ++++++-
 .../AnsibleIntegrationResources.tsx           | 17 ++++++++
 .../ApiAwarenessModal/ApiAwarenessModal.tsx   | 25 ++++++++++-
 .../ApiAwarenessModal/CurlTabPanel.tsx        | 42 ++++++++++++++-----
 .../ApiAwarenessModal/GoSDKResources.tsx      | 14 +++++++
 .../IntegrationsTabPanel.tsx                  | 10 ++++-
 .../ApiAwarenessModal/LinodeCLIPanel.tsx      | 37 ++++++++++++----
 .../ApiAwarenessModal/PythonSDKResources.tsx  | 14 +++++++
 .../ApiAwarenessModal/SDKTabPanel.tsx         |  6 +++
 .../TerraformIntegrationResources.tsx         | 17 ++++++++
 .../CodeBlock/CodeBlock.styles.ts             |  3 +-
 .../LinodesCreate/CodeBlock/CodeBlock.tsx     | 16 ++++++-
 .../Linodes/LinodesCreate/LinodeCreate.tsx    | 18 +++++---
 20 files changed, 251 insertions(+), 32 deletions(-)
 create mode 100644 packages/manager/.changeset/pr-10906-added-1726196972242.md

diff --git a/packages/manager/.changeset/pr-10906-added-1726196972242.md b/packages/manager/.changeset/pr-10906-added-1726196972242.md
new file mode 100644
index 00000000000..8838687b742
--- /dev/null
+++ b/packages/manager/.changeset/pr-10906-added-1726196972242.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Added
+---
+
+Tracking metrics for LD DX Tools AB Test ([#10906](https://github.com/linode/manager/pull/10906))
diff --git a/packages/manager/src/components/EmptyLandingPageResources/ResourcesLinks.tsx b/packages/manager/src/components/EmptyLandingPageResources/ResourcesLinks.tsx
index 6d3a479f0d2..8e1bdd87c3d 100644
--- a/packages/manager/src/components/EmptyLandingPageResources/ResourcesLinks.tsx
+++ b/packages/manager/src/components/EmptyLandingPageResources/ResourcesLinks.tsx
@@ -8,15 +8,18 @@ import { getLinkOnClick } from 'src/utilities/emptyStateLandingUtils';
 import type { ResourcesLinks } from './ResourcesLinksTypes';
 
 export const ResourceLinks = (props: ResourcesLinks) => {
-  const { linkAnalyticsEvent, links } = props;
+  const { linkAnalyticsEvent, links, onClick } = props;
 
   return (
     <List>
       {links.map((linkData) => (
         <ListItem key={linkData.to}>
           <Link
+            onClick={() => {
+              getLinkOnClick(linkAnalyticsEvent, linkData.text);
+              onClick?.();
+            }}
             external={linkData.external}
-            onClick={getLinkOnClick(linkAnalyticsEvent, linkData.text)}
             to={linkData.to}
           >
             {linkData.text}
diff --git a/packages/manager/src/components/EmptyLandingPageResources/ResourcesLinksTypes.ts b/packages/manager/src/components/EmptyLandingPageResources/ResourcesLinksTypes.ts
index 487a34e6ea8..942ff3d8a31 100644
--- a/packages/manager/src/components/EmptyLandingPageResources/ResourcesLinksTypes.ts
+++ b/packages/manager/src/components/EmptyLandingPageResources/ResourcesLinksTypes.ts
@@ -18,6 +18,7 @@ export interface ResourcesHeaders {
 export interface ResourcesLinks {
   linkAnalyticsEvent: linkAnalyticsEvent;
   links: ResourcesLink[];
+  onClick?: () => void;
 }
 
 export interface ResourcesLinkSection {
diff --git a/packages/manager/src/constants.ts b/packages/manager/src/constants.ts
index 1d01abb8eaa..8fce53ff611 100644
--- a/packages/manager/src/constants.ts
+++ b/packages/manager/src/constants.ts
@@ -294,3 +294,34 @@ export const FIREWALL_GET_STARTED_LINK =
   'https://www.linode.com/docs/products/networking/cloud-firewall/get-started/';
 export const FIREWALL_LIMITS_CONSIDERATIONS_LINK =
   'https://www.linode.com/docs/products/networking/cloud-firewall/#limits-and-considerations';
+
+// A/B Testing LD metrics keys for DX Tools
+export const LD_DX_TOOLS_METRICS_KEYS = {
+  CURL_CODE_SNIPPET: 'A/B Test: Step 2 : cURL copy code snippet (copy icon)',
+  CURL_RESOURCE_LINKS: 'A/B Test: Step 2 : DX Tools cURL resources links',
+  CURL_TAB_SELECTION: 'A/B Test: Step 2 : DX Tools cURL tab selection',
+  INTEGRATION_ANSIBLE_CODE_SNIPPET:
+    'A/B Test: Step 2 : Integrations: Ansible copy code snippet (copy icon)',
+  INTEGRATION_ANSIBLE_RESOURCE_LINKS:
+    'a-b-test-step-2-dx-tools-integrations-ansible-resources-links',
+  INTEGRATION_TAB_SELECTION:
+    'A/B Test: Step 2 : DX Tools Integrations tab selection',
+  INTEGRATION_TERRAFORM_CODE_SNIPPET:
+    'A/B Test: Step 2 : Integrations: Terraform copy code snippet (copy icon)',
+  INTEGRATION_TERRAFORM_RESOURCE_LINKS:
+    'A/B Test: Step 2 : DX Tools integrations terraform resources links',
+  LINODE_CLI_CODE_SNIPPET:
+    'A/B Test: Step 2 : Linode CLI Tab selection and copy code snippet (copy icon)',
+  LINODE_CLI_RESOURCE_LINKS:
+    'A/B Test: Step 2 : DX Tools Linode CLI resources links',
+  LINODE_CLI_TAB_SELECTION: 'A/B Test: Step 2 : Linode CLI Tab Selection',
+  OPEN_MODAL: 'A/B Test: Step 1 : DX Tools Open Modal',
+  SDK_GO_CODE_SNIPPET:
+    'A/B Test: Step 2 : SDK: GO copy code snippet (copy icon)',
+  SDK_GO_RESOURCE_LINKS: 'A/B Test: Step 2 : DX Tools SDK GO resources links',
+  SDK_PYTHON_CODE_SNIPPET:
+    'A/B Test: Step 2 : SDK: Python copy code snippet (copy icon)',
+  SDK_PYTHON_RESOURCE_LINKS:
+    'A/B Test: Step 2 : DX Tools SDK Python resources links',
+  SDK_TAB_SELECTION: 'A/B Test: Step 2 : DX Tools SDK tab selection',
+};
diff --git a/packages/manager/src/dev-tools/FeatureFlagTool.tsx b/packages/manager/src/dev-tools/FeatureFlagTool.tsx
index 074b41dacfc..5ee12154822 100644
--- a/packages/manager/src/dev-tools/FeatureFlagTool.tsx
+++ b/packages/manager/src/dev-tools/FeatureFlagTool.tsx
@@ -32,6 +32,7 @@ const options: { flag: keyof Flags; label: string }[] = [
   { flag: 'dbaasV2', label: 'Databases V2 Beta' },
   { flag: 'databaseResize', label: 'Database Resize' },
   { flag: 'apicliDxToolsAdditions', label: 'APICLI DX Tools Additions' },
+  { flag: 'apicliButtonCopy', label: 'APICLI Button Copy' },
 ];
 
 const renderFlagItems = (
diff --git a/packages/manager/src/featureFlags.ts b/packages/manager/src/featureFlags.ts
index ea9403c2919..09a3c167af7 100644
--- a/packages/manager/src/featureFlags.ts
+++ b/packages/manager/src/featureFlags.ts
@@ -81,10 +81,12 @@ interface DesignUpdatesBannerFlag extends BaseFeatureFlag {
 }
 
 export interface Flags {
+  testdxtoolabexperiment: string;
   aclp: AclpFlag;
   aclpReadEndpoint: string;
   aclpResourceTypeMap: CloudPulseResourceTypeMapFlag[];
   apiMaintenance: APIMaintenance;
+  apicliButtonCopy: string;
   apicliDxToolsAdditions: boolean;
   blockStorageEncryption: boolean;
   cloudManagerDesignUpdatesBanner: DesignUpdatesBannerFlag;
diff --git a/packages/manager/src/features/Linodes/LinodeCreatev2/Actions.test.tsx b/packages/manager/src/features/Linodes/LinodeCreatev2/Actions.test.tsx
index cef64a36e12..ba5d303d69c 100644
--- a/packages/manager/src/features/Linodes/LinodeCreatev2/Actions.test.tsx
+++ b/packages/manager/src/features/Linodes/LinodeCreatev2/Actions.test.tsx
@@ -21,7 +21,7 @@ describe('Actions', () => {
       component: <Actions />,
     });
 
-    const button = getByText('Create using command line').closest('button');
+    const button = getByText('Create Using Command Line').closest('button');
 
     expect(button).toBeVisible();
     expect(button).toBeEnabled();
diff --git a/packages/manager/src/features/Linodes/LinodeCreatev2/Actions.tsx b/packages/manager/src/features/Linodes/LinodeCreatev2/Actions.tsx
index f066241553d..546e945c4bb 100644
--- a/packages/manager/src/features/Linodes/LinodeCreatev2/Actions.tsx
+++ b/packages/manager/src/features/Linodes/LinodeCreatev2/Actions.tsx
@@ -1,8 +1,11 @@
+import { useLDClient } from 'launchdarkly-react-client-sdk';
 import React, { useState } from 'react';
 import { useFormContext } from 'react-hook-form';
 
 import { Box } from 'src/components/Box';
 import { Button } from 'src/components/Button/Button';
+import { LD_DX_TOOLS_METRICS_KEYS } from 'src/constants';
+import { useFlags } from 'src/hooks/useFlags';
 import { useRestrictedGlobalGrantCheck } from 'src/hooks/useRestrictedGlobalGrantCheck';
 import { sendApiAwarenessClickEvent } from 'src/utilities/analytics/customEventAnalytics';
 import { sendLinodeCreateFormInputEvent } from 'src/utilities/analytics/formEventAnalytics';
@@ -17,10 +20,14 @@ import {
 import type { LinodeCreateFormValues } from './utilities';
 
 export const Actions = () => {
+  const flags = useFlags();
+  const ldClient = useLDClient();
   const { params } = useLinodeCreateQueryParams();
 
   const [isAPIAwarenessModalOpen, setIsAPIAwarenessModalOpen] = useState(false);
 
+  const apicliButtonCopy = flags?.testdxtoolabexperiment;
+
   const {
     formState,
     getValues,
@@ -39,11 +46,15 @@ export const Actions = () => {
     sendLinodeCreateFormInputEvent({
       createType: params.type ?? 'OS',
       interaction: 'click',
-      label: 'Create Using Command Line',
+      label: apicliButtonCopy ?? 'Create Using Command Line',
     });
     if (await trigger()) {
       // If validation is successful, we open the dialog.
       setIsAPIAwarenessModalOpen(true);
+
+      ldClient?.track(LD_DX_TOOLS_METRICS_KEYS.OPEN_MODAL, {
+        variation: apicliButtonCopy,
+      });
     } else {
       scrollErrorIntoView(undefined, { behavior: 'smooth' });
     }
@@ -52,7 +63,7 @@ export const Actions = () => {
   return (
     <Box sx={{ display: 'flex', gap: 1, justifyContent: 'flex-end' }}>
       <Button buttonType="outlined" onClick={onOpenAPIAwareness}>
-        Create using command line
+        {apicliButtonCopy ?? 'Create Using Command Line'}
       </Button>
       <Button
         buttonType="primary"
diff --git a/packages/manager/src/features/Linodes/LinodesCreate/ApiAwarenessModal/AnsibleIntegrationResources.tsx b/packages/manager/src/features/Linodes/LinodesCreate/ApiAwarenessModal/AnsibleIntegrationResources.tsx
index 1deec18f58c..f5aec249f9a 100644
--- a/packages/manager/src/features/Linodes/LinodesCreate/ApiAwarenessModal/AnsibleIntegrationResources.tsx
+++ b/packages/manager/src/features/Linodes/LinodesCreate/ApiAwarenessModal/AnsibleIntegrationResources.tsx
@@ -1,7 +1,10 @@
+import { useLDClient } from 'launchdarkly-react-client-sdk';
 import React from 'react';
 
 import { ResourceLinks } from 'src/components/EmptyLandingPageResources/ResourcesLinks';
 import { Typography } from 'src/components/Typography';
+import { LD_DX_TOOLS_METRICS_KEYS } from 'src/constants';
+import { useFlags } from 'src/hooks/useFlags';
 
 import type { ResourcesLinks } from 'src/components/EmptyLandingPageResources/ResourcesLinksTypes';
 
@@ -37,6 +40,19 @@ export const gettingStartedGuides: ResourcesLinks['links'] = [
 ];
 
 export const AnsibleIntegrationResources = () => {
+  const ldClient = useLDClient();
+  const flags = useFlags();
+
+  const apicliButtonCopy = flags?.testdxtoolabexperiment;
+
+  const handleClick = () => {
+    ldClient?.track(
+      LD_DX_TOOLS_METRICS_KEYS.INTEGRATION_ANSIBLE_RESOURCE_LINKS,
+      {
+        variation: apicliButtonCopy,
+      }
+    );
+  };
   return (
     <>
       <Typography sx={(theme) => ({ mt: theme.spacing(2) })} variant="h3">
@@ -45,6 +61,7 @@ export const AnsibleIntegrationResources = () => {
       <ResourceLinks
         linkAnalyticsEvent={linkAnalyticsEvent}
         links={gettingStartedGuides}
+        onClick={handleClick}
       />
     </>
   );
diff --git a/packages/manager/src/features/Linodes/LinodesCreate/ApiAwarenessModal/ApiAwarenessModal.tsx b/packages/manager/src/features/Linodes/LinodesCreate/ApiAwarenessModal/ApiAwarenessModal.tsx
index e5aac10e1b9..31c0a390c37 100644
--- a/packages/manager/src/features/Linodes/LinodesCreate/ApiAwarenessModal/ApiAwarenessModal.tsx
+++ b/packages/manager/src/features/Linodes/LinodesCreate/ApiAwarenessModal/ApiAwarenessModal.tsx
@@ -1,4 +1,5 @@
 import { styled } from '@mui/material/styles';
+import { useLDClient } from 'launchdarkly-react-client-sdk';
 import React, { useEffect } from 'react';
 import { useHistory } from 'react-router-dom';
 
@@ -11,6 +12,7 @@ import { TabList } from 'src/components/Tabs/TabList';
 import { TabPanels } from 'src/components/Tabs/TabPanels';
 import { Tabs } from 'src/components/Tabs/Tabs';
 import { Typography } from 'src/components/Typography';
+import { LD_DX_TOOLS_METRICS_KEYS } from 'src/constants';
 import { useFlags } from 'src/hooks/useFlags';
 import { useInProgressEvents } from 'src/queries/events/events';
 import { sendApiAwarenessClickEvent } from 'src/utilities/analytics/customEventAnalytics';
@@ -58,6 +60,7 @@ export const ApiAwarenessModal = (props: ApiAwarenessModalProps) => {
   const { isOpen, onClose, payLoad } = props;
 
   const flags = useFlags();
+  const ldClient = useLDClient();
   const history = useHistory();
   const { data: events } = useInProgressEvents();
 
@@ -71,13 +74,33 @@ export const ApiAwarenessModal = (props: ApiAwarenessModalProps) => {
   const isLinodeCreated = linodeCreationEvent !== undefined;
 
   const isDxAdditionsFeatureEnabled = flags?.apicliDxToolsAdditions;
+  const apicliButtonCopy = flags?.testdxtoolabexperiment;
 
   const tabs = isDxAdditionsFeatureEnabled
     ? [baseTabs[1], baseTabs[0], ...additionalTabs]
     : baseTabs;
 
   const handleTabChange = (index: number) => {
-    sendApiAwarenessClickEvent(`${tabs[index].type} Tab`, tabs[index].type);
+    const { title, type } = tabs[index];
+
+    sendApiAwarenessClickEvent(`${type} Tab`, type);
+
+    const trackingKey =
+      type === 'INTEGRATIONS' && title !== "SDK's"
+        ? LD_DX_TOOLS_METRICS_KEYS.INTEGRATION_TAB_SELECTION
+        : type === 'API'
+        ? LD_DX_TOOLS_METRICS_KEYS.CURL_TAB_SELECTION
+        : title === "SDK's"
+        ? LD_DX_TOOLS_METRICS_KEYS.SDK_TAB_SELECTION
+        : title === 'Linode CLI'
+        ? LD_DX_TOOLS_METRICS_KEYS.LINODE_CLI_TAB_SELECTION
+        : undefined;
+
+    if (trackingKey) {
+      ldClient?.track(trackingKey, {
+        variation: apicliButtonCopy,
+      });
+    }
   };
 
   useEffect(() => {
diff --git a/packages/manager/src/features/Linodes/LinodesCreate/ApiAwarenessModal/CurlTabPanel.tsx b/packages/manager/src/features/Linodes/LinodesCreate/ApiAwarenessModal/CurlTabPanel.tsx
index 35854082daa..4de1f1d4366 100644
--- a/packages/manager/src/features/Linodes/LinodesCreate/ApiAwarenessModal/CurlTabPanel.tsx
+++ b/packages/manager/src/features/Linodes/LinodesCreate/ApiAwarenessModal/CurlTabPanel.tsx
@@ -1,9 +1,12 @@
 import { useTheme } from '@mui/material/styles';
+import { useLDClient } from 'launchdarkly-react-client-sdk';
 import React, { useMemo } from 'react';
 
 import { Link } from 'src/components/Link';
 import { SafeTabPanel } from 'src/components/Tabs/SafeTabPanel';
 import { Typography } from 'src/components/Typography';
+import { LD_DX_TOOLS_METRICS_KEYS } from 'src/constants';
+import { useFlags } from 'src/hooks/useFlags';
 import { sendApiAwarenessClickEvent } from 'src/utilities/analytics/customEventAnalytics';
 import { generateCurlCommand } from 'src/utilities/codesnippets/generate-cURL';
 
@@ -18,19 +21,25 @@ export interface CurlTabPanelProps {
 }
 
 export const CurlTabPanel = ({ index, payLoad, title }: CurlTabPanelProps) => {
+  const flags = useFlags();
+  const ldClient = useLDClient();
   const theme = useTheme();
   const curlCommand = useMemo(
     () => generateCurlCommand(payLoad, '/linode/instances'),
     [payLoad]
   );
+  const apicliButtonCopy = flags?.testdxtoolabexperiment;
   return (
     <SafeTabPanel index={index}>
       <Typography sx={{ marginTop: theme.spacing(2) }} variant="body1">
         Most Linode API requests need to be authenticated with a valid{' '}
         <Link
-          onClick={() =>
-            sendApiAwarenessClickEvent('link', 'personal access token')
-          }
+          onClick={() => {
+            sendApiAwarenessClickEvent('link', 'personal access token');
+            ldClient?.track(LD_DX_TOOLS_METRICS_KEYS.CURL_RESOURCE_LINKS, {
+              variation: apicliButtonCopy,
+            });
+          }}
           to="/profile/tokens"
         >
           personal access token
@@ -38,28 +47,41 @@ export const CurlTabPanel = ({ index, payLoad, title }: CurlTabPanelProps) => {
         . The command below assumes that your personal access token has been
         stored within the TOKEN shell variable. For more information, see{' '}
         <Link
-          onClick={() =>
+          onClick={() => {
             sendApiAwarenessClickEvent(
               'link',
               'Get Started with the Linode API'
-            )
-          }
+            );
+
+            ldClient?.track(LD_DX_TOOLS_METRICS_KEYS.CURL_RESOURCE_LINKS, {
+              variation: apicliButtonCopy,
+            });
+          }}
           to="https://www.linode.com/docs/products/tools/api/get-started/"
         >
           Get Started with the Linode API
         </Link>{' '}
         and{' '}
         <Link
-          onClick={() =>
-            sendApiAwarenessClickEvent('link', 'Linode API Guides')
-          }
+          onClick={() => {
+            sendApiAwarenessClickEvent('link', 'Linode API Guides');
+
+            ldClient?.track(LD_DX_TOOLS_METRICS_KEYS.CURL_RESOURCE_LINKS, {
+              variation: apicliButtonCopy,
+            });
+          }}
           to="https://www.linode.com/docs/products/tools/api/guides/"
         >
           Linode API Guides
         </Link>
         .
       </Typography>
-      <CodeBlock command={curlCommand} commandType={title} language={'bash'} />
+      <CodeBlock
+        command={curlCommand}
+        commandType={title}
+        language={'bash'}
+        ldTrackingKey={LD_DX_TOOLS_METRICS_KEYS.CURL_CODE_SNIPPET}
+      />
     </SafeTabPanel>
   );
 };
diff --git a/packages/manager/src/features/Linodes/LinodesCreate/ApiAwarenessModal/GoSDKResources.tsx b/packages/manager/src/features/Linodes/LinodesCreate/ApiAwarenessModal/GoSDKResources.tsx
index cd0a6854912..23a78d1c7cb 100644
--- a/packages/manager/src/features/Linodes/LinodesCreate/ApiAwarenessModal/GoSDKResources.tsx
+++ b/packages/manager/src/features/Linodes/LinodesCreate/ApiAwarenessModal/GoSDKResources.tsx
@@ -1,7 +1,10 @@
+import { useLDClient } from 'launchdarkly-react-client-sdk';
 import React from 'react';
 
 import { ResourceLinks } from 'src/components/EmptyLandingPageResources/ResourcesLinks';
 import { Typography } from 'src/components/Typography';
+import { LD_DX_TOOLS_METRICS_KEYS } from 'src/constants';
+import { useFlags } from 'src/hooks/useFlags';
 
 import type { ResourcesLinks } from 'src/components/EmptyLandingPageResources/ResourcesLinksTypes';
 
@@ -22,6 +25,16 @@ export const gettingStartedGuides: ResourcesLinks['links'] = [
 ];
 
 export const GoSDKResources = () => {
+  const ldClient = useLDClient();
+  const flags = useFlags();
+
+  const apicliButtonCopy = flags?.testdxtoolabexperiment;
+
+  const handleClick = () => {
+    ldClient?.track(LD_DX_TOOLS_METRICS_KEYS.SDK_GO_RESOURCE_LINKS, {
+      variation: apicliButtonCopy,
+    });
+  };
   return (
     <>
       <Typography sx={(theme) => ({ mt: theme.spacing(2) })} variant="h3">
@@ -30,6 +43,7 @@ export const GoSDKResources = () => {
       <ResourceLinks
         linkAnalyticsEvent={linkAnalyticsEvent}
         links={gettingStartedGuides}
+        onClick={handleClick}
       />
     </>
   );
diff --git a/packages/manager/src/features/Linodes/LinodesCreate/ApiAwarenessModal/IntegrationsTabPanel.tsx b/packages/manager/src/features/Linodes/LinodesCreate/ApiAwarenessModal/IntegrationsTabPanel.tsx
index 541135dae56..9162467f966 100644
--- a/packages/manager/src/features/Linodes/LinodesCreate/ApiAwarenessModal/IntegrationsTabPanel.tsx
+++ b/packages/manager/src/features/Linodes/LinodesCreate/ApiAwarenessModal/IntegrationsTabPanel.tsx
@@ -3,6 +3,7 @@ import React, { useMemo, useState } from 'react';
 import { Autocomplete } from 'src/components/Autocomplete/Autocomplete';
 import { SafeTabPanel } from 'src/components/Tabs/SafeTabPanel';
 import { Typography } from 'src/components/Typography';
+import { LD_DX_TOOLS_METRICS_KEYS } from 'src/constants';
 import { generateAnsibleConfig } from 'src/utilities/codesnippets/generate-ansibleConfig';
 import { generateTerraformConfig } from 'src/utilities/codesnippets/generate-terraformConfig';
 
@@ -28,7 +29,6 @@ const integrationsOptions: OptionType[] = [
 
 export const IntegrationsTabPanel = ({
   payLoad,
-  title,
 }: IntegrationsTabPanelProps) => {
   const [selectedIntegration, setSelectedIntegration] = useState<
     OptionType | undefined
@@ -45,6 +45,7 @@ export const IntegrationsTabPanel = ({
   const handleIntegrationChange = (option: OptionType) => {
     setSelectedIntegration(option);
   };
+
   return (
     <SafeTabPanel index={2}>
       <Typography variant="body1">
@@ -72,7 +73,12 @@ export const IntegrationsTabPanel = ({
                 ? ansibleConfig
                 : terraformConfig
             }
-            commandType={title}
+            ldTrackingKey={
+              selectedIntegration.value === 'ansible'
+                ? LD_DX_TOOLS_METRICS_KEYS.INTEGRATION_ANSIBLE_CODE_SNIPPET
+                : LD_DX_TOOLS_METRICS_KEYS.INTEGRATION_TERRAFORM_CODE_SNIPPET
+            }
+            commandType={selectedIntegration.value}
             language={'bash'}
           />
         </>
diff --git a/packages/manager/src/features/Linodes/LinodesCreate/ApiAwarenessModal/LinodeCLIPanel.tsx b/packages/manager/src/features/Linodes/LinodesCreate/ApiAwarenessModal/LinodeCLIPanel.tsx
index 8da588629d5..f9226012f30 100644
--- a/packages/manager/src/features/Linodes/LinodesCreate/ApiAwarenessModal/LinodeCLIPanel.tsx
+++ b/packages/manager/src/features/Linodes/LinodesCreate/ApiAwarenessModal/LinodeCLIPanel.tsx
@@ -1,8 +1,11 @@
+import { useLDClient } from 'launchdarkly-react-client-sdk';
 import React, { useMemo } from 'react';
 
 import { Link } from 'src/components/Link';
 import { SafeTabPanel } from 'src/components/Tabs/SafeTabPanel';
 import { Typography } from 'src/components/Typography';
+import { LD_DX_TOOLS_METRICS_KEYS } from 'src/constants';
+import { useFlags } from 'src/hooks/useFlags';
 import { sendApiAwarenessClickEvent } from 'src/utilities/analytics/customEventAnalytics';
 import { generateCLICommand } from 'src/utilities/codesnippets/generate-cli';
 
@@ -21,7 +24,10 @@ export const LinodeCLIPanel = ({
   payLoad,
   title,
 }: LinodeCLIPanelProps) => {
+  const ldClient = useLDClient();
+  const flags = useFlags();
   const cliCommand = useMemo(() => generateCLICommand(payLoad), [payLoad]);
+  const apicliButtonCopy = flags?.testdxtoolabexperiment;
 
   return (
     <SafeTabPanel index={index}>
@@ -29,12 +35,18 @@ export const LinodeCLIPanel = ({
         Before running the command below, the Linode CLI needs to be installed
         and configured on your system. See the{' '}
         <Link
-          onClick={() =>
+          onClick={() => {
             sendApiAwarenessClickEvent(
               'link',
               'Install and Configure the Linode CLI'
-            )
-          }
+            );
+            ldClient?.track(
+              LD_DX_TOOLS_METRICS_KEYS.LINODE_CLI_RESOURCE_LINKS,
+              {
+                variation: apicliButtonCopy,
+              }
+            );
+          }}
           to="https://www.linode.com/docs/products/tools/cli/guides/install/"
         >
           Install and Configure the Linode CLI
@@ -42,16 +54,27 @@ export const LinodeCLIPanel = ({
         guide for instructions. To learn more and to use the Linode CLI for
         tasks, review additional{' '}
         <Link
-          onClick={() =>
-            sendApiAwarenessClickEvent('link', 'Linode CLI Guides')
-          }
+          onClick={() => {
+            sendApiAwarenessClickEvent('link', 'Linode CLI Guides');
+            ldClient?.track(
+              LD_DX_TOOLS_METRICS_KEYS.LINODE_CLI_RESOURCE_LINKS,
+              {
+                variation: apicliButtonCopy,
+              }
+            );
+          }}
           to="https://www.linode.com/docs/products/tools/cli/guides/"
         >
           Linode CLI Guides
         </Link>
         .
       </Typography>
-      <CodeBlock command={cliCommand} commandType={title} language={'bash'} />
+      <CodeBlock
+        command={cliCommand}
+        commandType={title}
+        language={'bash'}
+        ldTrackingKey={LD_DX_TOOLS_METRICS_KEYS.LINODE_CLI_CODE_SNIPPET}
+      />
     </SafeTabPanel>
   );
 };
diff --git a/packages/manager/src/features/Linodes/LinodesCreate/ApiAwarenessModal/PythonSDKResources.tsx b/packages/manager/src/features/Linodes/LinodesCreate/ApiAwarenessModal/PythonSDKResources.tsx
index a9f3ac2898f..9ca71c799f7 100644
--- a/packages/manager/src/features/Linodes/LinodesCreate/ApiAwarenessModal/PythonSDKResources.tsx
+++ b/packages/manager/src/features/Linodes/LinodesCreate/ApiAwarenessModal/PythonSDKResources.tsx
@@ -1,7 +1,10 @@
+import { useLDClient } from 'launchdarkly-react-client-sdk';
 import React from 'react';
 
 import { ResourceLinks } from 'src/components/EmptyLandingPageResources/ResourcesLinks';
 import { Typography } from 'src/components/Typography';
+import { LD_DX_TOOLS_METRICS_KEYS } from 'src/constants';
+import { useFlags } from 'src/hooks/useFlags';
 
 import type { ResourcesLinks } from 'src/components/EmptyLandingPageResources/ResourcesLinksTypes';
 
@@ -22,6 +25,16 @@ export const gettingStartedGuides: ResourcesLinks['links'] = [
 ];
 
 export const PythonSDKResources = () => {
+  const ldClient = useLDClient();
+  const flags = useFlags();
+
+  const apicliButtonCopy = flags?.testdxtoolabexperiment;
+
+  const handleClick = () => {
+    ldClient?.track(LD_DX_TOOLS_METRICS_KEYS.SDK_PYTHON_RESOURCE_LINKS, {
+      variation: apicliButtonCopy,
+    });
+  };
   return (
     <>
       <Typography sx={(theme) => ({ mt: theme.spacing(2) })} variant="h3">
@@ -30,6 +43,7 @@ export const PythonSDKResources = () => {
       <ResourceLinks
         linkAnalyticsEvent={linkAnalyticsEvent}
         links={gettingStartedGuides}
+        onClick={handleClick}
       />
     </>
   );
diff --git a/packages/manager/src/features/Linodes/LinodesCreate/ApiAwarenessModal/SDKTabPanel.tsx b/packages/manager/src/features/Linodes/LinodesCreate/ApiAwarenessModal/SDKTabPanel.tsx
index 2424c373077..ca85aaf367e 100644
--- a/packages/manager/src/features/Linodes/LinodesCreate/ApiAwarenessModal/SDKTabPanel.tsx
+++ b/packages/manager/src/features/Linodes/LinodesCreate/ApiAwarenessModal/SDKTabPanel.tsx
@@ -3,6 +3,7 @@ import React, { useMemo, useState } from 'react';
 import { Autocomplete } from 'src/components/Autocomplete/Autocomplete';
 import { SafeTabPanel } from 'src/components/Tabs/SafeTabPanel';
 import { Typography } from 'src/components/Typography';
+import { LD_DX_TOOLS_METRICS_KEYS } from 'src/constants';
 import { generateGoLinodeSnippet } from 'src/utilities/codesnippets/generate-goSDKSnippet';
 import { generatePythonLinodeSnippet } from 'src/utilities/codesnippets/generate-pythonSDKSnippet';
 
@@ -65,6 +66,11 @@ export const SDKTabPanel = ({ payLoad, title }: SDKTabPanelProps) => {
             command={
               selectedSDK.value === 'go' ? linodegoSnippet : pythonLinodeSnippet
             }
+            ldTrackingKey={
+              selectedSDK.value === 'go'
+                ? LD_DX_TOOLS_METRICS_KEYS.SDK_GO_CODE_SNIPPET
+                : LD_DX_TOOLS_METRICS_KEYS.SDK_PYTHON_CODE_SNIPPET
+            }
             commandType={title}
             language={'bash'}
           />
diff --git a/packages/manager/src/features/Linodes/LinodesCreate/ApiAwarenessModal/TerraformIntegrationResources.tsx b/packages/manager/src/features/Linodes/LinodesCreate/ApiAwarenessModal/TerraformIntegrationResources.tsx
index 713a2dea71b..59d507fefff 100644
--- a/packages/manager/src/features/Linodes/LinodesCreate/ApiAwarenessModal/TerraformIntegrationResources.tsx
+++ b/packages/manager/src/features/Linodes/LinodesCreate/ApiAwarenessModal/TerraformIntegrationResources.tsx
@@ -1,7 +1,10 @@
+import { useLDClient } from 'launchdarkly-react-client-sdk';
 import React from 'react';
 
 import { ResourceLinks } from 'src/components/EmptyLandingPageResources/ResourcesLinks';
 import { Typography } from 'src/components/Typography';
+import { LD_DX_TOOLS_METRICS_KEYS } from 'src/constants';
+import { useFlags } from 'src/hooks/useFlags';
 
 import type { ResourcesLinks } from 'src/components/EmptyLandingPageResources/ResourcesLinksTypes';
 
@@ -43,6 +46,19 @@ export const gettingStartedGuides: ResourcesLinks['links'] = [
 ];
 
 export const TerraformIntegrationResources = () => {
+  const ldClient = useLDClient();
+  const flags = useFlags();
+
+  const apicliButtonCopy = flags?.testdxtoolabexperiment;
+
+  const handleClick = () => {
+    ldClient?.track(
+      LD_DX_TOOLS_METRICS_KEYS.INTEGRATION_TERRAFORM_RESOURCE_LINKS,
+      {
+        variation: apicliButtonCopy,
+      }
+    );
+  };
   return (
     <>
       <Typography sx={(theme) => ({ mt: theme.spacing(2) })} variant="h3">
@@ -51,6 +67,7 @@ export const TerraformIntegrationResources = () => {
       <ResourceLinks
         linkAnalyticsEvent={linkAnalyticsEvent}
         links={gettingStartedGuides}
+        onClick={handleClick}
       />
     </>
   );
diff --git a/packages/manager/src/features/Linodes/LinodesCreate/CodeBlock/CodeBlock.styles.ts b/packages/manager/src/features/Linodes/LinodesCreate/CodeBlock/CodeBlock.styles.ts
index a6c18b11e8d..2308b4c5abf 100644
--- a/packages/manager/src/features/Linodes/LinodesCreate/CodeBlock/CodeBlock.styles.ts
+++ b/packages/manager/src/features/Linodes/LinodesCreate/CodeBlock/CodeBlock.styles.ts
@@ -1,6 +1,7 @@
 import { styled } from '@mui/material/styles';
-import { HighlightedMarkdown } from 'src/components/HighlightedMarkdown/HighlightedMarkdown';
+
 import { CopyTooltip } from 'src/components/CopyTooltip/CopyTooltip';
+import { HighlightedMarkdown } from 'src/components/HighlightedMarkdown/HighlightedMarkdown';
 
 export const StyledCommandDiv = styled('div', { label: 'StyledCommandDiv' })(
   ({ theme }) => ({
diff --git a/packages/manager/src/features/Linodes/LinodesCreate/CodeBlock/CodeBlock.tsx b/packages/manager/src/features/Linodes/LinodesCreate/CodeBlock/CodeBlock.tsx
index a06e23eed77..c47dccec905 100644
--- a/packages/manager/src/features/Linodes/LinodesCreate/CodeBlock/CodeBlock.tsx
+++ b/packages/manager/src/features/Linodes/LinodesCreate/CodeBlock/CodeBlock.tsx
@@ -1,6 +1,9 @@
+import { useLDClient } from 'launchdarkly-react-client-sdk';
 import React from 'react';
 
+import { useFlags } from 'src/hooks/useFlags';
 import { sendApiAwarenessClickEvent } from 'src/utilities/analytics/customEventAnalytics';
+
 import {
   StyledCommandDiv,
   StyledCopyTooltip,
@@ -11,13 +14,24 @@ export interface CodeBlockProps {
   command: string;
   commandType: string;
   language: 'bash';
+  ldTrackingKey?: string;
 }
 
 export const CodeBlock = (props: CodeBlockProps) => {
-  const { command, commandType, language } = props;
+  const flags = useFlags();
+  const ldClient = useLDClient();
+
+  const { command, commandType, language, ldTrackingKey } = props;
+
+  const apicliButtonCopy = flags?.testdxtoolabexperiment;
 
   const handleCopyIconClick = () => {
     sendApiAwarenessClickEvent('Copy Icon', commandType);
+    if (ldTrackingKey) {
+      ldClient?.track(ldTrackingKey, {
+        variation: apicliButtonCopy,
+      });
+    }
   };
 
   return (
diff --git a/packages/manager/src/features/Linodes/LinodesCreate/LinodeCreate.tsx b/packages/manager/src/features/Linodes/LinodesCreate/LinodeCreate.tsx
index 8d0e572e6e5..c305ec6ccc6 100644
--- a/packages/manager/src/features/Linodes/LinodesCreate/LinodeCreate.tsx
+++ b/packages/manager/src/features/Linodes/LinodesCreate/LinodeCreate.tsx
@@ -419,7 +419,9 @@ export class LinodeCreate extends React.PureComponent<
     sendLinodeCreateFormErrorEvent(errorString, selectedTabName ?? 'OS');
   };
 
-  handleClickCreateUsingCommandLine = () => {
+  handleClickCreateUsingCommandLine = (
+    apicliButtonCopy: string | undefined
+  ) => {
     const payload = {
       authorized_users: this.props.authorized_users,
       backup_id: this.props.selectedBackupID,
@@ -442,9 +444,12 @@ export class LinodeCreate extends React.PureComponent<
     sendLinodeCreateFormInputEvent({
       createType: 'OS',
       interaction: 'click',
-      label: 'Create Using Command Line',
+      label: apicliButtonCopy ?? 'Create Using Command Line',
     });
-    sendApiAwarenessClickEvent('Button', 'Create Using Command Line');
+    sendApiAwarenessClickEvent(
+      'Button',
+      apicliButtonCopy ?? 'Create Using Command Line'
+    );
     this.props.checkValidation(payload);
   };
 
@@ -632,6 +637,7 @@ export class LinodeCreate extends React.PureComponent<
 
     const hasErrorFor = getErrorMap(errorMap, errors);
     const generalError = getErrorMap(errorMap, errors).none;
+    const apicliButtonCopy = this.props.flags?.apicliButtonCopy;
 
     if (regionsLoading || imagesLoading || linodesLoading || typesLoading) {
       return <CircleProgress />;
@@ -1194,11 +1200,13 @@ export class LinodeCreate extends React.PureComponent<
                 (showGDPRCheckbox && !signedAgreement) ||
                 secureVMViolation
               }
+              onClick={() =>
+                this.handleClickCreateUsingCommandLine(apicliButtonCopy)
+              }
               buttonType="outlined"
               data-qa-api-cli-linode
-              onClick={() => this.handleClickCreateUsingCommandLine()}
             >
-              Create using command line
+              {apicliButtonCopy ?? ' Create using command line'}
             </StyledCreateButton>
             <StyledCreateButton
               disabled={

From 46da3e1eec7d0e1546478cf481c1819136d72084 Mon Sep 17 00:00:00 2001
From: carrillo-erik <119514965+carrillo-erik@users.noreply.github.com>
Date: Fri, 13 Sep 2024 09:09:44 -0700
Subject: [PATCH 10/62] fix: [M3-7574] - Fix missing labels for User Permission
 radio buttons (#10908)

* fix: [M3-7574] - Fix missing label for user permission radio btns

* Add changeset
---
 .../pr-10908-fixed-1726091771498.md           |   5 +
 .../src/features/Users/UserPermissions.tsx    |  85 +++++----
 .../Users/UserPermissionsEntitySection.tsx    | 163 +++++++++++-------
 3 files changed, 142 insertions(+), 111 deletions(-)
 create mode 100644 packages/manager/.changeset/pr-10908-fixed-1726091771498.md

diff --git a/packages/manager/.changeset/pr-10908-fixed-1726091771498.md b/packages/manager/.changeset/pr-10908-fixed-1726091771498.md
new file mode 100644
index 00000000000..26fa286a532
--- /dev/null
+++ b/packages/manager/.changeset/pr-10908-fixed-1726091771498.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Fixed
+---
+
+Fix missing radio button labels for User Permissions ([#10908](https://github.com/linode/manager/pull/10908))
diff --git a/packages/manager/src/features/Users/UserPermissions.tsx b/packages/manager/src/features/Users/UserPermissions.tsx
index ab193e1d5ca..e4433f6cdee 100644
--- a/packages/manager/src/features/Users/UserPermissions.tsx
+++ b/packages/manager/src/features/Users/UserPermissions.tsx
@@ -1,19 +1,11 @@
 import {
-  GlobalGrantTypes,
-  Grant,
-  GrantLevel,
-  GrantType,
-  Grants,
-  User,
   getGrants,
   getUser,
   updateGrants,
   updateUser,
 } from '@linode/api-v4/lib/account';
-import { APIError } from '@linode/api-v4/lib/types';
 import { Paper } from '@mui/material';
 import Grid from '@mui/material/Unstable_Grid2';
-import { QueryClient } from '@tanstack/react-query';
 import { enqueueSnackbar } from 'notistack';
 import { compose, flatten, lensPath, omit, set } from 'ramda';
 import * as React from 'react';
@@ -21,9 +13,7 @@ import * as React from 'react';
 import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel';
 import { Box } from 'src/components/Box';
 import { CircleProgress } from 'src/components/CircleProgress';
-// import { Button } from 'src/components/Button/Button';
 import { DocumentTitleSegment } from 'src/components/DocumentTitle';
-import { Item } from 'src/components/EnhancedSelect/Select';
 import { FormControlLabel } from 'src/components/FormControlLabel';
 import { Notice } from 'src/components/Notice/Notice';
 import { SelectionCard } from 'src/components/SelectionCard/SelectionCard';
@@ -34,14 +24,8 @@ import { TabPanels } from 'src/components/Tabs/TabPanels';
 import { Tabs } from 'src/components/Tabs/Tabs';
 import { Toggle } from 'src/components/Toggle/Toggle';
 import { Typography } from 'src/components/Typography';
-import {
-  WithFeatureFlagProps,
-  withFeatureFlags,
-} from 'src/containers/flags.container';
-import {
-  WithQueryClientProps,
-  withQueryClient,
-} from 'src/containers/withQueryClient.container';
+import { withFeatureFlags } from 'src/containers/flags.container';
+import { withQueryClient } from 'src/containers/withQueryClient.container';
 import { PARENT_USER, grantTypeMap } from 'src/features/Account/constants';
 import { accountQueries } from 'src/queries/account/queries';
 import { getAPIErrorOrDefault } from 'src/utilities/errorUtils';
@@ -59,6 +43,20 @@ import {
   StyledUnrestrictedGrid,
 } from './UserPermissions.styles';
 import { UserPermissionsEntitySection } from './UserPermissionsEntitySection';
+
+import type {
+  GlobalGrantTypes,
+  Grant,
+  GrantLevel,
+  GrantType,
+  Grants,
+  User,
+} from '@linode/api-v4/lib/account';
+import type { APIError } from '@linode/api-v4/lib/types';
+import type { QueryClient } from '@tanstack/react-query';
+import type { Item } from 'src/components/EnhancedSelect/Select';
+import type { WithFeatureFlagProps } from 'src/containers/flags.container';
+import type { WithQueryClientProps } from 'src/containers/withQueryClient.container';
 interface Props {
   accountUsername?: string;
   currentUsername?: string;
@@ -91,30 +89,6 @@ interface State {
 type CombinedProps = Props & WithQueryClientProps & WithFeatureFlagProps;
 
 class UserPermissions extends React.Component<CombinedProps, State> {
-  componentDidMount() {
-    this.getUserGrants();
-    this.getUserType();
-  }
-
-  componentDidUpdate(prevProps: CombinedProps) {
-    if (prevProps.currentUsername !== this.props.currentUsername) {
-      this.getUserGrants();
-      this.getUserType();
-    }
-  }
-
-  render() {
-    const { loading } = this.state;
-    const { currentUsername } = this.props;
-
-    return (
-      <div ref={this.formContainerRef}>
-        <DocumentTitleSegment segment={`${currentUsername} - Permissions`} />
-        {loading ? <CircleProgress /> : this.renderBody()}
-      </div>
-    );
-  }
-
   billingPermOnClick = (value: null | string) => () => {
     const lp = lensPath(['grants', 'global', 'account_access']);
     this.setState(set(lp, value));
@@ -679,9 +653,6 @@ class UserPermissions extends React.Component<CombinedProps, State> {
           <Typography data-qa-unrestricted-msg>
             This user has unrestricted access to the account.
           </Typography>
-          {/* <Button buttonType="primary" onClick={this.onChangeRestricted}>
-          Save
-        </Button> */}
         </StyledUnrestrictedGrid>
       </Paper>
     );
@@ -823,6 +794,30 @@ class UserPermissions extends React.Component<CombinedProps, State> {
     setAllPerm: 'null',
     userType: null,
   };
+
+  componentDidMount() {
+    this.getUserGrants();
+    this.getUserType();
+  }
+
+  componentDidUpdate(prevProps: CombinedProps) {
+    if (prevProps.currentUsername !== this.props.currentUsername) {
+      this.getUserGrants();
+      this.getUserType();
+    }
+  }
+
+  render() {
+    const { loading } = this.state;
+    const { currentUsername } = this.props;
+
+    return (
+      <div ref={this.formContainerRef}>
+        <DocumentTitleSegment segment={`${currentUsername} - Permissions`} />
+        {loading ? <CircleProgress /> : this.renderBody()}
+      </div>
+    );
+  }
 }
 
 export default withQueryClient(withFeatureFlags(UserPermissions));
diff --git a/packages/manager/src/features/Users/UserPermissionsEntitySection.tsx b/packages/manager/src/features/Users/UserPermissionsEntitySection.tsx
index 78d66dc3c3e..7876e6cdec7 100644
--- a/packages/manager/src/features/Users/UserPermissionsEntitySection.tsx
+++ b/packages/manager/src/features/Users/UserPermissionsEntitySection.tsx
@@ -6,33 +6,37 @@
  * I'll create a tech debt ticket in jira to keep track of this issue.
  */
 
+import { useTheme } from '@mui/material/styles';
 import React from 'react';
-import { Grant, GrantLevel, GrantType } from '@linode/api-v4/lib/account';
+
 import { Box } from 'src/components/Box';
-import { Theme } from '@mui/material/styles';
-import { TableHead } from 'src/components/TableHead';
-import { TableRow } from 'src/components/TableRow';
-import { TableCell } from 'src/components/TableCell';
+import { FormControlLabel } from 'src/components/FormControlLabel';
+import { createDisplayPage } from 'src/components/Paginate';
+import { PaginationFooter } from 'src/components/PaginationFooter/PaginationFooter';
 import { Radio } from 'src/components/Radio/Radio';
 import { TableBody } from 'src/components/TableBody';
-import { PaginationFooter } from 'src/components/PaginationFooter/PaginationFooter';
-import { usePagination } from 'src/hooks/usePagination';
-import { createDisplayPage } from 'src/components/Paginate';
+import { TableCell } from 'src/components/TableCell';
+import { TableHead } from 'src/components/TableHead';
+import { TableRow } from 'src/components/TableRow';
 import { Typography } from 'src/components/Typography';
-import { useTheme } from '@mui/material/styles';
-import { StyledGrantsTable } from './UserPermissionsEntitySection.styles';
 import { grantTypeMap } from 'src/features/Account/constants';
+import { usePagination } from 'src/hooks/usePagination';
+
+import { StyledGrantsTable } from './UserPermissionsEntitySection.styles';
+
+import type { Grant, GrantLevel, GrantType } from '@linode/api-v4/lib/account';
+import type { Theme } from '@mui/material/styles';
 
 interface Props {
   entity: GrantType;
+  entitySetAllTo: (entity: GrantType, value: GrantLevel) => () => void;
   grants: Grant[] | undefined;
   setGrantTo: (entity: string, idx: number, value: GrantLevel) => () => void;
-  entitySetAllTo: (entity: GrantType, value: GrantLevel) => () => void;
   showHeading?: boolean;
 }
 
 export const UserPermissionsEntitySection = React.memo(
-  ({ entity, grants, setGrantTo, entitySetAllTo, showHeading }: Props) => {
+  ({ entity, entitySetAllTo, grants, setGrantTo, showHeading }: Props) => {
     const theme: Theme = useTheme();
     const pagination = usePagination(1);
 
@@ -54,61 +58,79 @@ export const UserPermissionsEntitySection = React.memo(
     };
 
     return (
-      <Box key={entity} paddingBottom="0" marginTop={`${theme.spacing(2)}`}>
+      <Box key={entity} marginTop={`${theme.spacing(2)}`} paddingBottom="0">
         {showHeading && (
           <Typography
-            variant="h3"
             sx={{
-              marginTop: theme.spacing(3),
               marginBottom: theme.spacing(2),
+              marginTop: theme.spacing(3),
             }}
             data-qa-permissions-header={entity}
+            variant="h3"
           >
             {grantTypeMap[entity]}
           </Typography>
         )}
         <StyledGrantsTable aria-label="User Permissions" noBorder>
           <TableHead data-qa-table-head>
-            <TableRow>
+            <TableRow
+              sx={(theme) => ({
+                'span.MuiFormControlLabel-label': {
+                  fontFamily: theme.font.bold,
+                },
+              })}
+            >
               <TableCell>Label</TableCell>
               <TableCell padding="checkbox">
-                {/* eslint-disable-next-line */}
-                <label style={{ marginLeft: -35, cursor: 'pointer' }}>
-                  None
-                  <Radio
-                    name={`${entity}-select-all`}
-                    checked={entityIsAll(null)}
-                    value="null"
-                    onChange={entitySetAllTo(entity, null)}
-                    data-qa-permission-header="None"
-                  />
-                </label>
+                <FormControlLabel
+                  control={
+                    <Radio
+                      inputProps={{
+                        'aria-label': `${entity}s, set-all-permissions-to-none`,
+                      }}
+                      checked={entityIsAll(null)}
+                      data-qa-permission-header="None"
+                      name={`${entity}-select-all`}
+                      onChange={entitySetAllTo(entity, null)}
+                      value="null"
+                    />
+                  }
+                  label="None"
+                />
               </TableCell>
               <TableCell padding="checkbox">
-                {/* eslint-disable-next-line */}
-                <label style={{ marginLeft: -65, cursor: 'pointer' }}>
-                  Read Only
-                  <Radio
-                    name={`${entity}-select-all`}
-                    checked={entityIsAll('read_only')}
-                    value="read_only"
-                    onChange={entitySetAllTo(entity, 'read_only')}
-                    data-qa-permission-header="Read Only"
-                  />
-                </label>
+                <FormControlLabel
+                  control={
+                    <Radio
+                      inputProps={{
+                        'aria-label': `${entity}s, set-all-permissions-to-read-only`,
+                      }}
+                      checked={entityIsAll('read_only')}
+                      data-qa-permission-header="Read Only"
+                      name={`${entity}-select-all`}
+                      onChange={entitySetAllTo(entity, 'read_only')}
+                      value="read_only"
+                    />
+                  }
+                  label="Read Only"
+                />
               </TableCell>
               <TableCell padding="checkbox">
-                {/* eslint-disable-next-line */}
-                <label style={{ marginLeft: -73, cursor: 'pointer' }}>
-                  Read-Write
-                  <Radio
-                    name={`${entity}-select-all`}
-                    checked={entityIsAll('read_write')}
-                    value="read_write"
-                    onChange={entitySetAllTo(entity, 'read_write')}
-                    data-qa-permission-header="Read-Write"
-                  />
-                </label>
+                <FormControlLabel
+                  control={
+                    <Radio
+                      inputProps={{
+                        'aria-label': `${entity}s, set-all-permissions-to-read-write`,
+                      }}
+                      checked={entityIsAll('read_write')}
+                      data-qa-permission-header="Read-Write"
+                      name={`${entity}-select-all`}
+                      onChange={entitySetAllTo(entity, 'read_write')}
+                      value="read_write"
+                    />
+                  }
+                  label="Read-Write"
+                />
               </TableCell>
             </TableRow>
           </TableHead>
@@ -117,7 +139,7 @@ export const UserPermissionsEntitySection = React.memo(
               // Index must be corrected to account for pagination
               const idx = (pagination.page - 1) * pagination.pageSize + _idx;
               return (
-                <TableRow key={grant.id} data-qa-specific-grant={grant.label}>
+                <TableRow data-qa-specific-grant={grant.label} key={grant.id}>
                   <TableCell
                     sx={{
                       '& div': {
@@ -130,34 +152,43 @@ export const UserPermissionsEntitySection = React.memo(
                   >
                     {grant.label}
                   </TableCell>
-                  <TableCell parentColumn="None" padding="checkbox">
+                  <TableCell padding="checkbox" parentColumn="None">
                     <Radio
-                      aria-label={`Disallow access for ${grant.label}`}
-                      name={`${grant.id}-perms`}
+                      inputProps={{
+                        'aria-label': `Disallow access for ${grant.label}`,
+                        name: `${grant.label}-permissions`,
+                      }}
                       checked={grant.permissions === null}
-                      value="null"
-                      onChange={setGrantTo(entity, idx, null)}
                       data-qa-permission="None"
+                      edge="start"
+                      onChange={setGrantTo(entity, idx, null)}
+                      value="null"
                     />
                   </TableCell>
-                  <TableCell parentColumn="Read Only" padding="checkbox">
+                  <TableCell padding="checkbox" parentColumn="Read Only">
                     <Radio
-                      aria-label={`Allow read-only access for ${grant.label}`}
-                      name={`${grant.id}-perms`}
+                      inputProps={{
+                        'aria-label': `Allow read-only access for ${grant.label}`,
+                        name: `${grant.label}-permissions`,
+                      }}
                       checked={grant.permissions === 'read_only'}
-                      value="read_only"
-                      onChange={setGrantTo(entity, idx, 'read_only')}
                       data-qa-permission="Read Only"
+                      edge="start"
+                      onChange={setGrantTo(entity, idx, 'read_only')}
+                      value="read_only"
                     />
                   </TableCell>
-                  <TableCell parentColumn="Read-Write" padding="checkbox">
+                  <TableCell padding="checkbox" parentColumn="Read-Write">
                     <Radio
-                      aria-label={`Allow read-write access for ${grant.label}`}
-                      name={`${grant.id}-perms`}
+                      inputProps={{
+                        'aria-label': `Allow read-write access for ${grant.label}`,
+                        name: `${grant.label}-permissions`,
+                      }}
                       checked={grant.permissions === 'read_write'}
-                      value="read_write"
-                      onChange={setGrantTo(entity, idx, 'read_write')}
                       data-qa-permission="Read-Write"
+                      edge="start"
+                      onChange={setGrantTo(entity, idx, 'read_write')}
+                      value="read_write"
                     />
                   </TableCell>
                 </TableRow>
@@ -167,11 +198,11 @@ export const UserPermissionsEntitySection = React.memo(
         </StyledGrantsTable>
         <PaginationFooter
           count={grants.length}
+          eventCategory={`User Permissions for ${entity}`}
           handlePageChange={pagination.handlePageChange}
           handleSizeChange={pagination.handlePageSizeChange}
           page={pagination.page}
           pageSize={pagination.pageSize}
-          eventCategory={`User Permissions for ${entity}`}
         />
       </Box>
     );

From f0d9765ce2c30a2e64ef8ea32704a482d479e565 Mon Sep 17 00:00:00 2001
From: mpolotsk-akamai <157619599+mpolotsk-akamai@users.noreply.github.com>
Date: Fri, 13 Sep 2024 19:31:57 +0200
Subject: [PATCH 11/62] feat: [UIE-8002] - DBaaS 2.0 Landing Page (#10823)

* feat: [UIE-8054] - DBaaS enhancements 1

* UIE-8002 feat(DBaaS): New/Existing Customer Landing Page

* UIE-8002 feat(DBaaS): Landing Page with feature flag

* Added changeset: Add Landing Page for V2

* Added changeset: Add Landing Page and update Empty-State Landing page for DBaaS V2

* feat: [UIE-8002] - Review fix: refactoring and variable renaming

* feat: [UIE-8002] - Review fix: change capability for region select

---------

Co-authored-by: Conal Ryan <corya@akamai.com>
---
 packages/api-v4/src/account/types.ts          |   2 +-
 packages/api-v4/src/databases/types.ts        |   1 +
 packages/api-v4/src/regions/types.ts          |   2 +-
 ...r-10823-upcoming-features-1724867496417.md |   5 +
 packages/manager/src/__data__/regionsData.ts  |   5 -
 .../src/assets/icons/db-logo-white.svg        |  23 ++
 .../ResourcesLinksTypes.ts                    |   1 +
 .../ResourcesSection.tsx                      |   3 +-
 .../components/PrimaryNav/PrimaryNav.test.tsx |   6 +-
 packages/manager/src/factories/account.ts     |   1 +
 packages/manager/src/factories/databases.ts   |   6 +-
 .../DatabaseCreate/DatabaseCreate.test.tsx    |   4 +-
 .../DatabaseCreate/DatabaseCreate.tsx         |  13 +-
 .../DatabaseResize/DatabaseResize.test.tsx    |   2 +-
 .../DatabaseDetail/DatabaseStatusDisplay.tsx  |  27 ++-
 .../DatabaseLanding/DatabaseLanding.test.tsx  | 146 ++++++++++-
 .../DatabaseLanding/DatabaseLanding.tsx       | 226 ++++++++++--------
 ...a.ts => DatabaseLandingEmptyStateData.tsx} |   4 +
 .../DatabaseLanding/DatabaseLandingTable.tsx  | 140 +++++++++++
 .../DatabaseLanding/DatabaseLogo.tsx          |  53 ++--
 .../Databases/DatabaseLanding/DatabaseRow.tsx |  26 +-
 .../src/features/Databases/utilities.test.ts  |   4 +-
 .../src/features/Databases/utilities.ts       |   2 +-
 .../DatabaseClusterInfoBanner.tsx             |  46 ++++
 packages/manager/src/mocks/serverHandlers.ts  |   2 +-
 25 files changed, 573 insertions(+), 177 deletions(-)
 create mode 100644 packages/manager/.changeset/pr-10823-upcoming-features-1724867496417.md
 create mode 100644 packages/manager/src/assets/icons/db-logo-white.svg
 rename packages/manager/src/features/Databases/DatabaseLanding/{DatabaseLandingEmptyStateData.ts => DatabaseLandingEmptyStateData.tsx} (91%)
 create mode 100644 packages/manager/src/features/Databases/DatabaseLanding/DatabaseLandingTable.tsx
 create mode 100644 packages/manager/src/features/GlobalNotifications/DatabaseClusterInfoBanner.tsx

diff --git a/packages/api-v4/src/account/types.ts b/packages/api-v4/src/account/types.ts
index c11000ff945..6cec39f8f4d 100644
--- a/packages/api-v4/src/account/types.ts
+++ b/packages/api-v4/src/account/types.ts
@@ -72,7 +72,7 @@ export type AccountCapability =
   | 'LKE HA Control Planes'
   | 'Machine Images'
   | 'Managed Databases'
-  | 'Managed Databases V2'
+  | 'Managed Databases Beta'
   | 'NodeBalancers'
   | 'Object Storage Access Key Regions'
   | 'Object Storage Endpoint Types'
diff --git a/packages/api-v4/src/databases/types.ts b/packages/api-v4/src/databases/types.ts
index 933f1978c86..5d9650c6eab 100644
--- a/packages/api-v4/src/databases/types.ts
+++ b/packages/api-v4/src/databases/types.ts
@@ -151,6 +151,7 @@ export interface BaseDatabase {
    * A key/value object where the key is an IP address and the value is a member type.
    */
   members: Record<string, MemberType>;
+  platform?: string;
 }
 
 export interface MySQLDatabase extends BaseDatabase {
diff --git a/packages/api-v4/src/regions/types.ts b/packages/api-v4/src/regions/types.ts
index e95c7dc3f13..c3db5ec700e 100644
--- a/packages/api-v4/src/regions/types.ts
+++ b/packages/api-v4/src/regions/types.ts
@@ -13,7 +13,7 @@ export type Capabilities =
   | 'Kubernetes'
   | 'Linodes'
   | 'Managed Databases'
-  | 'Managed Databases V2'
+  | 'Managed Databases Beta'
   | 'Metadata'
   | 'NodeBalancers'
   | 'Object Storage'
diff --git a/packages/manager/.changeset/pr-10823-upcoming-features-1724867496417.md b/packages/manager/.changeset/pr-10823-upcoming-features-1724867496417.md
new file mode 100644
index 00000000000..be33c99dea2
--- /dev/null
+++ b/packages/manager/.changeset/pr-10823-upcoming-features-1724867496417.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Add Landing Page and update Empty-State Landing page for DBaaS V2 ([#10823](https://github.com/linode/manager/pull/10823))
diff --git a/packages/manager/src/__data__/regionsData.ts b/packages/manager/src/__data__/regionsData.ts
index 836fbcafea7..0a3ab6eaf2e 100644
--- a/packages/manager/src/__data__/regionsData.ts
+++ b/packages/manager/src/__data__/regionsData.ts
@@ -98,7 +98,6 @@ export const regions: Region[] = [
       'Vlans',
       'VPCs',
       'Managed Databases',
-      'Managed Databases V2',
       'Metadata',
       'Premium Plans',
       'Placement Group',
@@ -130,7 +129,6 @@ export const regions: Region[] = [
       'Vlans',
       'VPCs',
       'Managed Databases',
-      'Managed Databases V2',
       'Metadata',
       'Premium Plans',
     ],
@@ -486,7 +484,6 @@ export const regions: Region[] = [
       'VPCs',
       'Block Storage Migrations',
       'Managed Databases',
-      'Managed Databases V2',
       'Placement Group',
     ],
     country: 'us',
@@ -514,7 +511,6 @@ export const regions: Region[] = [
       'Cloud Firewall',
       'Block Storage Migrations',
       'Managed Databases',
-      'Managed Databases V2',
       'Placement Group',
     ],
     country: 'us',
@@ -546,7 +542,6 @@ export const regions: Region[] = [
       'VPCs',
       'Block Storage Migrations',
       'Managed Databases',
-      'Managed Databases V2',
       'Placement Group',
     ],
     country: 'us',
diff --git a/packages/manager/src/assets/icons/db-logo-white.svg b/packages/manager/src/assets/icons/db-logo-white.svg
new file mode 100644
index 00000000000..0cf1495fd94
--- /dev/null
+++ b/packages/manager/src/assets/icons/db-logo-white.svg
@@ -0,0 +1,23 @@
+<svg width="59" height="17" viewBox="0 0 59 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1_776)">
+<path d="M13.6502 10.7692C13.9607 10.7692 14.2601 10.8246 14.5373 10.9244C14.9809 10.4143 15.2137 9.85989 15.2137 9.28328C15.2137 8.34074 14.5706 7.43147 13.4174 6.72179C12.1754 5.96776 10.5121 5.54639 8.74902 5.54639C6.97483 5.54639 5.31152 5.96776 4.08067 6.72179C2.91636 7.43147 2.2843 8.34074 2.2843 9.28328C2.2843 9.85989 2.51716 10.4143 2.96071 10.9244C3.23793 10.8246 3.53733 10.7692 3.84781 10.7692C4.5464 10.7692 5.20063 11.0353 5.68854 11.5343C6.03229 11.878 6.26515 12.2994 6.37604 12.7651C7.11898 12.9426 7.91737 13.0313 8.74902 13.0313C9.58067 13.0313 10.368 12.9426 11.122 12.7651C11.2329 12.3105 11.4658 11.878 11.8095 11.5343C12.2974 11.0464 12.9516 10.7692 13.6502 10.7692ZM8.74902 8.59578C7.95063 8.59578 7.2964 7.94155 7.2964 7.14316H10.2016C10.2016 7.94155 9.54741 8.59578 8.74902 8.59578Z" fill="white"/>
+<path d="M3.71473 6.04535C3.85889 5.95664 4.00304 5.87902 4.14719 5.8014H4.13611C3.77018 5.52418 3.33772 5.39111 2.90526 5.39111C2.28429 5.39111 1.67441 5.66833 1.27522 6.20059L1.10889 6.43345L2.26211 7.29837C2.62804 6.83265 3.11594 6.41127 3.71473 6.04535Z" fill="white"/>
+<path d="M2.28427 11.2904C1.89617 10.7914 1.65222 10.248 1.58569 9.68249C1.56351 9.54942 1.55242 9.41636 1.55242 9.28329C1.55242 8.61797 1.77419 7.98591 2.18448 7.4093H2.04032C0.909274 7.4093 0 8.32966 0 9.44962V9.73793H1.51915C1.11996 10.0706 0.86492 10.5252 0.798387 11.0353C0.720766 11.5787 0.864919 12.1109 1.19758 12.5434L1.31956 12.7097C1.43044 12.2662 1.66331 11.867 1.99597 11.5343C2.08468 11.4456 2.18448 11.368 2.28427 11.2904Z" fill="white"/>
+<path d="M15.2248 7.29837L16.378 6.43345L16.2117 6.20059C15.8125 5.66833 15.2026 5.39111 14.5817 5.39111C14.1492 5.39111 13.7278 5.52418 13.3508 5.8014H13.3397C13.4839 5.87902 13.6391 5.95664 13.7722 6.04535C14.3821 6.41127 14.87 6.83265 15.2248 7.29837Z" fill="white"/>
+<path d="M17.498 9.44962C17.498 8.31858 16.5776 7.4093 15.4577 7.4093H15.3024C15.7238 7.98591 15.9345 8.62906 15.9345 9.28329C15.9345 9.41636 15.9234 9.54942 15.9012 9.68249C15.8236 10.248 15.5797 10.7914 15.2026 11.2904C15.3024 11.368 15.4022 11.4456 15.4909 11.5343C15.8236 11.867 16.0565 12.2662 16.1674 12.7097L16.2893 12.5434C16.622 12.1109 16.7661 11.5676 16.6885 11.0353C16.622 10.5252 16.367 10.0595 15.9678 9.73793H17.4869V9.44962H17.498Z" fill="white"/>
+<path d="M6.28727 5.08065C7.41832 5.08065 8.32759 4.16028 8.32759 3.04032C8.32759 1.90927 7.40723 1 6.28727 1C5.15622 1 4.24695 1.92036 4.24695 3.04032C4.24695 4.16028 5.16731 5.08065 6.28727 5.08065ZM6.28727 1.92036C6.15421 2.06452 6.0655 2.26411 6.0655 2.48589C6.0655 2.91835 6.42034 3.27319 6.8528 3.27319C7.07457 3.27319 7.27417 3.18448 7.41832 3.04032V3.05141C7.41832 3.67238 6.91933 4.17137 6.29836 4.17137C5.67739 4.17137 5.1784 3.67238 5.1784 3.05141C5.16731 2.41935 5.6663 1.92036 6.28727 1.92036Z" fill="white"/>
+<path d="M11.1996 5.08065C12.3307 5.08065 13.2399 4.16028 13.2399 3.04032C13.2399 1.90927 12.3196 1 11.1996 1C10.0686 1 9.1593 1.92036 9.1593 3.04032C9.1593 4.16028 10.0797 5.08065 11.1996 5.08065ZM11.1996 1.92036C11.2107 1.92036 11.2107 1.92036 11.1996 1.92036C11.0666 2.06452 10.9779 2.26411 10.9779 2.48589C10.9779 2.91835 11.3327 3.27319 11.7651 3.27319C11.9869 3.27319 12.1865 3.18448 12.3307 3.04032V3.05141C12.3307 3.67238 11.8317 4.17137 11.2107 4.17137C10.5897 4.17137 10.0908 3.67238 10.0908 3.05141C10.0797 2.41935 10.5897 1.92036 11.1996 1.92036Z" fill="white"/>
+<path d="M3.84782 11.3347C2.71677 11.3347 1.8075 12.2439 1.8075 13.375C1.8075 14.506 2.71677 15.4153 3.84782 15.4153C4.08068 15.4153 4.31354 15.3709 4.52423 15.2933C4.50205 15.2711 4.47987 15.2601 4.46879 15.2379C3.88108 14.6502 3.6704 13.8851 4.02524 13.5413C4.36899 13.1976 5.13411 13.3972 5.72181 13.9849C5.74399 14.007 5.75508 14.0292 5.77725 14.0403C5.85487 13.8296 5.89923 13.6078 5.89923 13.3639C5.88814 12.255 4.96778 11.3347 3.84782 11.3347Z" fill="white"/>
+<path d="M13.6502 11.3347C12.5191 11.3347 11.6099 12.2439 11.6099 13.375C11.6099 13.6078 11.6542 13.8407 11.7318 14.0514C11.754 14.0292 11.7651 14.007 11.7873 13.9959C12.375 13.4082 13.1401 13.1976 13.4839 13.5524C13.8276 13.8961 13.628 14.6613 13.0403 15.249C13.0181 15.2711 13.007 15.2822 12.9849 15.3044C13.1955 15.382 13.4173 15.4264 13.6613 15.4264C14.7923 15.4264 15.7016 14.5171 15.7016 13.3861C15.6905 12.255 14.7812 11.3347 13.6502 11.3347Z" fill="white"/>
+<path d="M25.8136 5.58521C26.4456 5.58521 26.9779 5.66283 27.3993 5.81807C27.8317 5.97331 28.1755 6.19508 28.4305 6.48339C28.6855 6.7717 28.8741 7.11545 28.9849 7.51464C29.0958 7.91383 29.1513 8.35738 29.1513 8.84529V13.8352C28.863 13.9017 28.4194 13.9794 27.8206 14.0681C27.2329 14.1568 26.5565 14.2011 25.8136 14.2011C25.3257 14.2011 24.871 14.1568 24.4607 14.057C24.0505 13.9683 23.7067 13.813 23.4184 13.6023C23.1301 13.3917 22.9083 13.1144 22.742 12.7818C22.5757 12.4491 22.498 12.0277 22.498 11.5398C22.498 11.063 22.5868 10.6749 22.7753 10.3423C22.9638 10.0207 23.2077 9.75456 23.5182 9.54387C23.8287 9.34428 24.1946 9.18904 24.616 9.10033C25.0263 9.01162 25.4587 8.96726 25.9134 8.96726C26.1241 8.96726 26.3458 8.97835 26.5787 9.01162C26.8116 9.03379 27.0555 9.07815 27.3216 9.14468V8.8342C27.3216 8.61242 27.2995 8.40174 27.244 8.20214C27.1886 8.00254 27.0999 7.82512 26.9668 7.66988C26.8337 7.51464 26.6674 7.40375 26.4456 7.31504C26.2349 7.22633 25.9577 7.19307 25.6362 7.19307C25.1926 7.19307 24.7934 7.22633 24.4275 7.29287C24.0616 7.3594 23.7622 7.42593 23.5293 7.51464L23.2964 5.97331C23.5404 5.8846 23.8841 5.80698 24.3499 5.71827C24.7934 5.62956 25.2813 5.58521 25.8136 5.58521ZM25.9688 12.682C26.5565 12.682 27.0001 12.6487 27.3105 12.5933V10.4864C27.2107 10.4531 27.0555 10.4199 26.8559 10.3977C26.6563 10.3644 26.4345 10.3534 26.1906 10.3534C25.9799 10.3534 25.7692 10.3644 25.5585 10.3977C25.3478 10.431 25.1482 10.4864 24.9819 10.5751C24.8045 10.6638 24.6714 10.7747 24.5605 10.93C24.4607 11.0852 24.4053 11.2737 24.4053 11.5066C24.4053 11.9612 24.5495 12.2717 24.8267 12.438C25.1039 12.5933 25.4809 12.682 25.9688 12.682Z" fill="white"/>
+<path d="M33.2874 3.38964C33.2874 3.74448 33.1765 4.03278 32.9436 4.24347C32.7107 4.45415 32.4446 4.55395 32.123 4.55395C31.8015 4.55395 31.5242 4.45415 31.2914 4.24347C31.0585 4.03278 30.9476 3.75556 30.9476 3.38964C30.9476 3.02371 31.0585 2.7354 31.2914 2.52472C31.5242 2.31403 31.8015 2.21423 32.123 2.21423C32.4335 2.21423 32.7107 2.31403 32.9436 2.52472C33.1654 2.7354 33.2874 3.02371 33.2874 3.38964ZM33.0767 14.0237H31.1694V5.79589H33.0767V14.0237Z" fill="white"/>
+<path d="M37.623 14.0237C37.1018 12.9481 36.5585 11.7062 36.004 10.2979C35.4496 8.90074 34.9506 7.39267 34.496 5.7959H36.5252C36.6361 6.26162 36.7802 6.74953 36.9244 7.28178C37.0796 7.81404 37.2349 8.3463 37.4123 8.86747C37.5897 9.39973 37.7671 9.90981 37.9446 10.4088C38.1331 10.9078 38.2994 11.3513 38.4546 11.7505C38.6099 11.3513 38.7762 10.9078 38.9647 10.4088C39.1421 9.90981 39.3196 9.39973 39.497 8.86747C39.6744 8.33521 39.8407 7.80295 39.996 7.28178C40.1512 6.74953 40.2954 6.26162 40.4063 5.7959H42.369C41.9143 7.40376 41.4153 8.90074 40.8609 10.2979C40.3065 11.6951 39.7631 12.937 39.2419 14.0237H37.623Z" fill="white"/>
+<path d="M42.8126 9.94305C42.8126 9.22228 42.9235 8.59023 43.1342 8.03579C43.3449 7.49244 43.6332 7.03781 43.988 6.67188C44.3429 6.30595 44.7531 6.03982 45.2189 5.85131C45.6846 5.66281 46.1503 5.5741 46.6382 5.5741C47.7693 5.5741 48.6564 5.92894 49.2884 6.62752C49.9205 7.32611 50.2421 8.37954 50.2421 9.77672C50.2421 9.87652 50.2421 9.99849 50.231 10.1316C50.231 10.2646 50.2199 10.3755 50.2088 10.4864H44.7864C44.8419 11.1517 45.0747 11.6618 45.485 12.0166C45.8953 12.3826 46.5052 12.56 47.2814 12.56C47.7471 12.56 48.1685 12.5156 48.5455 12.438C48.9336 12.3493 49.233 12.2606 49.4548 12.1719L49.7098 13.7243C49.61 13.7797 49.4658 13.8352 49.2773 13.8906C49.0888 13.9461 48.8892 14.0015 48.6453 14.0459C48.4124 14.0902 48.1574 14.1346 47.8802 14.1678C47.6029 14.2011 47.3257 14.2122 47.0485 14.2122C46.3277 14.2122 45.6957 14.1013 45.1634 13.8906C44.6312 13.6799 44.1876 13.3805 43.8439 12.9924C43.5001 12.6043 43.2451 12.1608 43.0677 11.6396C42.9013 11.1295 42.8126 10.564 42.8126 9.94305ZM48.3348 9.10031C48.3348 8.83418 48.3015 8.59023 48.2239 8.35736C48.1463 8.1245 48.0465 7.91381 47.9023 7.74748C47.7582 7.57006 47.5919 7.437 47.3812 7.3372C47.1816 7.2374 46.9376 7.19305 46.6493 7.19305C46.361 7.19305 46.0949 7.24849 45.8731 7.35938C45.6513 7.47027 45.4628 7.61442 45.3187 7.79184C45.1634 7.96926 45.0525 8.17994 44.9638 8.40172C44.8751 8.63458 44.8197 8.86744 44.7864 9.11139H48.3348V9.10031Z" fill="white"/>
+<path d="M51.9386 6.06202C52.3045 5.96222 52.7813 5.86242 53.369 5.76262C53.9567 5.66282 54.611 5.61847 55.3207 5.61847C55.9971 5.61847 56.5515 5.70718 57.0061 5.89569C57.4608 6.0842 57.8156 6.33924 58.0817 6.6719C58.3479 7.00456 58.5364 7.40375 58.6473 7.86948C58.7582 8.3352 58.8136 8.84528 58.8136 9.39972V14.0237H56.9063V9.69911C56.9063 9.25557 56.8731 8.87855 56.8176 8.57916C56.7622 8.26867 56.6624 8.01363 56.5293 7.82512C56.3963 7.63661 56.2188 7.49246 55.9971 7.40375C55.7753 7.31504 55.4981 7.27069 55.1765 7.27069C54.9326 7.27069 54.6886 7.28178 54.4225 7.31504C54.1563 7.34831 53.9678 7.37049 53.8459 7.39266V14.0237H51.9386V6.06202Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_1_776">
+<rect width="58.8135" height="16.4264" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/manager/src/components/EmptyLandingPageResources/ResourcesLinksTypes.ts b/packages/manager/src/components/EmptyLandingPageResources/ResourcesLinksTypes.ts
index 942ff3d8a31..c94d2a6f6a1 100644
--- a/packages/manager/src/components/EmptyLandingPageResources/ResourcesLinksTypes.ts
+++ b/packages/manager/src/components/EmptyLandingPageResources/ResourcesLinksTypes.ts
@@ -11,6 +11,7 @@ export interface linkAnalyticsEvent {
 
 export interface ResourcesHeaders {
   description: string;
+  logo?: React.ReactNode;
   subtitle: string;
   title: string;
 }
diff --git a/packages/manager/src/components/EmptyLandingPageResources/ResourcesSection.tsx b/packages/manager/src/components/EmptyLandingPageResources/ResourcesSection.tsx
index 33386afde6b..6e57fa458d9 100644
--- a/packages/manager/src/components/EmptyLandingPageResources/ResourcesSection.tsx
+++ b/packages/manager/src/components/EmptyLandingPageResources/ResourcesSection.tsx
@@ -111,7 +111,7 @@ export const ResourcesSection = (props: ResourcesSectionProps) => {
     wide = false,
     youtubeLinkData,
   } = props;
-  const { description, subtitle, title } = headers;
+  const { description, logo, subtitle, title } = headers;
 
   return (
     <Placeholder
@@ -171,6 +171,7 @@ export const ResourcesSection = (props: ResourcesSectionProps) => {
       subtitle={subtitle}
       title={title}
     >
+      {logo}
       <Typography variant="subtitle1">{description}</Typography>
     </Placeholder>
   );
diff --git a/packages/manager/src/components/PrimaryNav/PrimaryNav.test.tsx b/packages/manager/src/components/PrimaryNav/PrimaryNav.test.tsx
index 565b4c33451..80714ff7e42 100644
--- a/packages/manager/src/components/PrimaryNav/PrimaryNav.test.tsx
+++ b/packages/manager/src/components/PrimaryNav/PrimaryNav.test.tsx
@@ -89,7 +89,7 @@ describe('PrimaryNav', () => {
 
   it('should show Databases menu item if the user has the account capability V2 Beta', async () => {
     const account = accountFactory.build({
-      capabilities: ['Managed Databases V2'],
+      capabilities: ['Managed Databases Beta'],
     });
 
     server.use(
@@ -121,7 +121,7 @@ describe('PrimaryNav', () => {
 
   it('should show Databases menu item if the user has the account capability V2', async () => {
     const account = accountFactory.build({
-      capabilities: ['Managed Databases V2'],
+      capabilities: ['Managed Databases Beta'],
     });
 
     server.use(
@@ -152,7 +152,7 @@ describe('PrimaryNav', () => {
 
   it('should show Databases menu item if the user has the account capability V2', async () => {
     const account = accountFactory.build({
-      capabilities: ['Managed Databases V2'],
+      capabilities: ['Managed Databases Beta'],
     });
 
     server.use(
diff --git a/packages/manager/src/factories/account.ts b/packages/manager/src/factories/account.ts
index eff241f37d5..c056cf9ac56 100644
--- a/packages/manager/src/factories/account.ts
+++ b/packages/manager/src/factories/account.ts
@@ -46,6 +46,7 @@ export const accountFactory = Factory.Sync.makeFactory<Account>({
     'LKE HA Control Planes',
     'Machine Images',
     'Managed Databases',
+    'Managed Databases Beta',
     'NodeBalancers',
     'Object Storage Access Key Regions',
     'Object Storage Endpoint Types',
diff --git a/packages/manager/src/factories/databases.ts b/packages/manager/src/factories/databases.ts
index 657a262d804..14fe03d22f0 100644
--- a/packages/manager/src/factories/databases.ts
+++ b/packages/manager/src/factories/databases.ts
@@ -163,7 +163,7 @@ export const databaseTypeFactory = Factory.Sync.makeFactory<DatabaseType>({
       },
     ],
   },
-  id: Factory.each((i) => `g6-standard-${i}`),
+  id: Factory.each((i) => possibleTypes[i % possibleTypes.length]),
   label: Factory.each((i) => `Linode ${i} GB`),
   memory: Factory.each((i) => i * 2048),
   vcpus: Factory.each((i) => i * 2),
@@ -190,7 +190,9 @@ export const databaseInstanceFactory = Factory.Sync.makeFactory<DatabaseInstance
     members: {
       '2.2.2.2': 'primary',
     },
-    platform: Factory.each((i) => (adb10(i) ? 'adb10' : 'adb20')),
+    platform: Factory.each((i) =>
+      adb10(i) ? 'rdbms-legacy' : 'rdbms-default'
+    ),
     region: Factory.each((i) => possibleRegions[i % possibleRegions.length]),
     status: Factory.each((i) => possibleStatuses[i % possibleStatuses.length]),
     type: Factory.each((i) => possibleTypes[i % possibleTypes.length]),
diff --git a/packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreate.test.tsx b/packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreate.test.tsx
index 0faa8c693c9..40b0bf1c6ce 100644
--- a/packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreate.test.tsx
+++ b/packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreate.test.tsx
@@ -39,7 +39,7 @@ describe('Database Create', () => {
     const standardTypes = [
       databaseTypeFactory.build({
         class: 'nanode',
-        id: 'g6-standard-0',
+        id: 'g6-nanode-1',
         label: `Nanode 1 GB`,
         memory: 1024,
       }),
@@ -117,7 +117,7 @@ describe('Database Create', () => {
     server.use(
       http.get('*/account', () => {
         const account = accountFactory.build({
-          capabilities: ['Managed Databases V2'],
+          capabilities: ['Managed Databases Beta'],
         });
         return HttpResponse.json(account);
       })
diff --git a/packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreate.tsx b/packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreate.tsx
index 20fadc053c9..716a4d46a36 100644
--- a/packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreate.tsx
+++ b/packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreate.tsx
@@ -64,9 +64,6 @@ import type { Item } from 'src/components/EnhancedSelect/Select';
 import type { PlanSelectionType } from 'src/features/components/PlansPanel/types';
 import type { ExtendedIP } from 'src/utilities/ipUtils';
 
-const V1 = 'Managed Databases';
-const V2 = `Managed Databases V2`;
-
 const useStyles = makeStyles()((theme: Theme) => ({
   btnCtn: {
     alignItems: 'center',
@@ -342,7 +339,7 @@ const DatabaseCreate = () => {
     return dbtypes.map((type) => {
       const { label } = type;
       const formattedLabel = formatStorageUnits(label);
-      const singleNodePricing = type.engines[selectedEngine].find(
+      const singleNodePricing = type.engines[selectedEngine]?.find(
         (cluster) => cluster.quantity === 1
       );
       const price = singleNodePricing?.price ?? {
@@ -448,13 +445,13 @@ const DatabaseCreate = () => {
     const engineType = values.engine.split('/')[0] as Engine;
 
     setNodePricing({
-      double: type.engines[engineType].find(
+      double: type.engines[engineType]?.find(
         (cluster: DatabaseClusterSizeObject) => cluster.quantity === 2
       )?.price,
-      multi: type.engines[engineType].find(
+      multi: type.engines[engineType]?.find(
         (cluster: DatabaseClusterSizeObject) => cluster.quantity === 3
       )?.price,
-      single: type.engines[engineType].find(
+      single: type.engines[engineType]?.find(
         (cluster: DatabaseClusterSizeObject) => cluster.quantity === 1
       )?.price,
     });
@@ -544,7 +541,7 @@ const DatabaseCreate = () => {
         </Grid>
         <Grid>
           <RegionSelect
-            currentCapability={isDatabasesV2Enabled ? V2 : V1}
+            currentCapability="Managed Databases"
             disableClearable
             errorText={errors.region}
             onChange={(e, region) => setFieldValue('region', region.id)}
diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseResize/DatabaseResize.test.tsx b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseResize/DatabaseResize.test.tsx
index a2e8aef8909..46841b41615 100644
--- a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseResize/DatabaseResize.test.tsx
+++ b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseResize/DatabaseResize.test.tsx
@@ -65,7 +65,7 @@ describe('database resize', () => {
   });
 
   describe('On rendering of page', () => {
-    const examplePlanType = 'g6-standard-60';
+    const examplePlanType = 'g6-dedicated-50';
     const dedicatedTypes = databaseTypeFactory.buildList(7, {
       class: 'dedicated',
     });
diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseStatusDisplay.tsx b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseStatusDisplay.tsx
index f35942adede..5ee8c9f33f7 100644
--- a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseStatusDisplay.tsx
+++ b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseStatusDisplay.tsx
@@ -1,50 +1,51 @@
 import React from 'react';
+
+import { StatusIcon } from 'src/components/StatusIcon/StatusIcon';
 import { Typography } from 'src/components/Typography';
 import { capitalize } from 'src/utilities/capitalize';
-import { Event } from '@linode/api-v4';
-import {
+
+import type { Event } from '@linode/api-v4';
+import type {
   Database,
   DatabaseInstance,
   DatabaseStatus,
 } from '@linode/api-v4/lib/databases/types';
-import { Status, StatusIcon } from 'src/components/StatusIcon/StatusIcon';
+import type { Status } from 'src/components/StatusIcon/StatusIcon';
 
 export const databaseStatusMap: Record<DatabaseStatus, Status> = {
   active: 'active',
   degraded: 'inactive',
   failed: 'error',
   provisioning: 'other',
+  resizing: 'other',
   restoring: 'other',
   resuming: 'other',
   suspended: 'error',
   suspending: 'other',
-  resizing: 'other',
 };
 interface Props {
-  events: Event[] | undefined;
   database: Database | DatabaseInstance;
+  events: Event[] | undefined;
 }
 export const DatabaseStatusDisplay = (props: Props) => {
-  const { events, database } = props;
+  const { database, events } = props;
   const recentEvent = events?.find(
     (event: Event) =>
       event.entity?.id === database.id && event.entity?.type === 'database'
   );
 
   let progress: number | undefined;
-  if (recentEvent?.action === 'database_resize') {
-    progress = recentEvent?.percent_complete ?? 0;
-  }
-
   let displayedStatus;
+
   if (
-    recentEvent?.status === 'started' ||
-    recentEvent?.status === 'scheduled'
+    recentEvent?.action === 'database_resize' &&
+    (recentEvent?.status === 'started' || recentEvent?.status === 'scheduled')
   ) {
+    progress = recentEvent?.percent_complete ?? 0;
     displayedStatus = (
       <>
         <StatusIcon status="other" />
-        <Typography variant="body1" sx={{ display: 'inline-block' }}>
+        <Typography sx={{ display: 'inline-block' }} variant="body1">
           {`Resizing ${progress ? `(${progress}%)` : '(0%)'}`}
         </Typography>
       </>
diff --git a/packages/manager/src/features/Databases/DatabaseLanding/DatabaseLanding.test.tsx b/packages/manager/src/features/Databases/DatabaseLanding/DatabaseLanding.test.tsx
index d23e132ec4b..fa5710561da 100644
--- a/packages/manager/src/features/Databases/DatabaseLanding/DatabaseLanding.test.tsx
+++ b/packages/manager/src/features/Databases/DatabaseLanding/DatabaseLanding.test.tsx
@@ -1,10 +1,14 @@
+import { screen, within } from '@testing-library/react';
+import { fireEvent } from '@testing-library/react';
 import { waitForElementToBeRemoved } from '@testing-library/react';
 import { DateTime } from 'luxon';
 import * as React from 'react';
 
-import { databaseInstanceFactory } from 'src/factories';
+import { accountFactory, databaseInstanceFactory } from 'src/factories';
+import DatabaseLanding from 'src/features/Databases/DatabaseLanding/DatabaseLanding';
+import DatabaseRow from 'src/features/Databases/DatabaseLanding/DatabaseRow';
 import { makeResourcePage } from 'src/mocks/serverHandlers';
-import { http, HttpResponse, server } from 'src/mocks/testServer';
+import { HttpResponse, http, server } from 'src/mocks/testServer';
 import { capitalize } from 'src/utilities/capitalize';
 import { formatDate } from 'src/utilities/formatDate';
 import {
@@ -13,9 +17,6 @@ import {
   wrapWithTableBody,
 } from 'src/utilities/testHelpers';
 
-import DatabaseLanding from './DatabaseLanding';
-import DatabaseRow from './DatabaseRow';
-
 const queryMocks = vi.hoisted(() => ({
   useProfile: vi.fn().mockReturnValue({ data: { restricted: false } }),
 }));
@@ -93,13 +94,22 @@ describe('Database Table', () => {
   });
 
   it('should render database landing with empty state', async () => {
+    const mockAccount = accountFactory.build({
+      capabilities: ['Managed Databases Beta'],
+    });
+    server.use(
+      http.get('*/account', () => {
+        return HttpResponse.json(mockAccount);
+      })
+    );
     server.use(
       http.get('*/databases/instances', () => {
         return HttpResponse.json(makeResourcePage([]));
       })
     );
-
-    const { getByTestId, getByText } = renderWithTheme(<DatabaseLanding />);
+    const { getByTestId, getByText } = renderWithTheme(<DatabaseLanding />, {
+      flags: { dbaasV2: { beta: true, enabled: true } },
+    });
 
     await waitForElementToBeRemoved(getByTestId(loadingTestId));
 
@@ -109,6 +119,128 @@ describe('Database Table', () => {
       )
     ).toBeInTheDocument();
   });
+
+  it('should render tabs with legacy and new databases ', async () => {
+    server.use(
+      http.get('*/databases/instances', () => {
+        const databases = databaseInstanceFactory.buildList(5, {
+          status: 'active',
+        });
+
+        return HttpResponse.json(makeResourcePage(databases));
+      })
+    );
+
+    const { getByTestId } = renderWithTheme(<DatabaseLanding />, {
+      flags: { dbaasV2: { beta: true, enabled: true } },
+    });
+
+    // Loading state should render
+    expect(getByTestId(loadingTestId)).toBeInTheDocument();
+
+    await waitForElementToBeRemoved(getByTestId(loadingTestId));
+
+    const newDatabasesTab = screen.getByText('New Database Clusters');
+    const legacyDatabasesTab = screen.getByText('Legacy Database Clusters');
+
+    expect(newDatabasesTab).toBeInTheDocument();
+    expect(legacyDatabasesTab).toBeInTheDocument();
+  });
+
+  it('should render logo in new databases tab ', async () => {
+    server.use(
+      http.get('*/databases/instances', () => {
+        const databases = databaseInstanceFactory.buildList(5, {
+          status: 'active',
+        });
+        return HttpResponse.json(makeResourcePage(databases));
+      })
+    );
+
+    const { getByTestId } = renderWithTheme(<DatabaseLanding />, {
+      flags: { dbaasV2: { beta: true, enabled: true } },
+    });
+
+    // Loading state should render
+    expect(getByTestId(loadingTestId)).toBeInTheDocument();
+
+    await waitForElementToBeRemoved(getByTestId(loadingTestId));
+
+    const newDatabaseTab = screen.getByText('New Database Clusters');
+    fireEvent.click(newDatabaseTab);
+
+    expect(screen.getByText('Powered by')).toBeInTheDocument();
+  });
+
+  it('should render a single legacy database table without logo ', async () => {
+    server.use(
+      http.get('*/databases/instances', () => {
+        const databases = databaseInstanceFactory.buildList(5, {
+          status: 'active',
+        });
+        return HttpResponse.json(makeResourcePage(databases));
+      })
+    );
+
+    const { getByTestId } = renderWithTheme(<DatabaseLanding />, {
+      flags: { dbaasV2: { beta: false, enabled: false } },
+    });
+
+    expect(getByTestId(loadingTestId)).toBeInTheDocument();
+
+    await waitForElementToBeRemoved(getByTestId(loadingTestId));
+
+    const tables = screen.getAllByRole('table');
+    expect(tables).toHaveLength(1);
+
+    const table = tables[0];
+
+    const headers = within(table).getAllByRole('columnheader');
+    expect(
+      headers.some((header) => header.textContent === 'Configuration')
+    ).toBe(true);
+    expect(headers.some((header) => header.textContent === 'Nodes')).toBe(
+      false
+    );
+
+    expect(screen.queryByText('Legacy Database Clusters')).toBeNull();
+    expect(screen.queryByText('New Database Clusters')).toBeNull();
+    expect(screen.queryByText('Powered by')).toBeNull();
+  });
+});
+
+describe('Database Landing', () => {
+  it('should have the "Create Database Cluster" button disabled for restricted users', async () => {
+    queryMocks.useProfile.mockReturnValue({ data: { restricted: true } });
+
+    const { container, getByTestId } = renderWithTheme(<DatabaseLanding />);
+
+    expect(getByTestId(loadingTestId)).toBeInTheDocument();
+
+    await waitForElementToBeRemoved(getByTestId(loadingTestId));
+
+    const createClusterButton = container.querySelector('button');
+
+    expect(createClusterButton).toBeInTheDocument();
+    expect(createClusterButton).toHaveTextContent('Create Database Cluster');
+    expect(createClusterButton).toBeDisabled();
+  });
+
+  it('should have the "Create Database Cluster" button enabled for users with full access', async () => {
+    queryMocks.useProfile.mockReturnValue({ data: { restricted: false } });
+
+    const { container, getByTestId } = renderWithTheme(<DatabaseLanding />);
+
+    expect(getByTestId(loadingTestId)).toBeInTheDocument();
+
+    await waitForElementToBeRemoved(getByTestId(loadingTestId));
+
+    const createClusterButton = container.querySelector('button');
+
+    expect(createClusterButton).toBeInTheDocument();
+    expect(createClusterButton).toHaveTextContent('Create Database Cluster');
+    expect(createClusterButton).not.toBeDisabled();
+  });
 });
 
 describe('Database Landing', () => {
diff --git a/packages/manager/src/features/Databases/DatabaseLanding/DatabaseLanding.tsx b/packages/manager/src/features/Databases/DatabaseLanding/DatabaseLanding.tsx
index 99363528efe..d5e2845e668 100644
--- a/packages/manager/src/features/Databases/DatabaseLanding/DatabaseLanding.tsx
+++ b/packages/manager/src/features/Databases/DatabaseLanding/DatabaseLanding.tsx
@@ -1,62 +1,110 @@
+import { Box } from '@mui/material';
 import * as React from 'react';
 import { useHistory } from 'react-router-dom';
 
 import { CircleProgress } from 'src/components/CircleProgress';
 import { ErrorState } from 'src/components/ErrorState/ErrorState';
-import { Hidden } from 'src/components/Hidden';
 import { LandingHeader } from 'src/components/LandingHeader';
-import { PaginationFooter } from 'src/components/PaginationFooter/PaginationFooter';
-import { Table } from 'src/components/Table';
-import { TableBody } from 'src/components/TableBody';
-import { TableCell } from 'src/components/TableCell';
-import { TableHead } from 'src/components/TableHead';
-import { TableRow } from 'src/components/TableRow';
-import { TableSortCell } from 'src/components/TableSortCell';
+import { SafeTabPanel } from 'src/components/Tabs/SafeTabPanel';
+import { Tab } from 'src/components/Tabs/Tab';
+import { TabList } from 'src/components/Tabs/TabList';
+import { TabPanels } from 'src/components/Tabs/TabPanels';
+import { Tabs } from 'src/components/Tabs/Tabs';
+import { getRestrictedResourceText } from 'src/features/Account/utils';
+import DatabaseLandingTable from 'src/features/Databases/DatabaseLanding/DatabaseLandingTable';
+import { useIsDatabasesEnabled } from 'src/features/Databases/utilities';
+import { DatabaseClusterInfoBanner } from 'src/features/GlobalNotifications/DatabaseClusterInfoBanner';
 import { useOrder } from 'src/hooks/useOrder';
 import { usePagination } from 'src/hooks/usePagination';
 import { useRestrictedGlobalGrantCheck } from 'src/hooks/useRestrictedGlobalGrantCheck';
-import { useDatabasesQuery } from 'src/queries/databases/databases';
-import { useInProgressEvents } from 'src/queries/events/events';
+import {
+  useDatabaseTypesQuery,
+  useDatabasesQuery,
+} from 'src/queries/databases/databases';
 import { getAPIErrorOrDefault } from 'src/utilities/errorUtils';
 
 import { DatabaseEmptyState } from './DatabaseEmptyState';
-import { DatabaseRow } from './DatabaseRow';
-
-import type { DatabaseInstance } from '@linode/api-v4/lib/databases';
-import { getRestrictedResourceText } from 'src/features/Account/utils';
 
 const preferenceKey = 'databases';
 
 const DatabaseLanding = () => {
   const history = useHistory();
-  const pagination = usePagination(1, preferenceKey);
+  const newDatabasesPagination = usePagination(1, preferenceKey, 'new');
+  const legacyDatabasesPagination = usePagination(1, preferenceKey, 'legacy');
   const isRestricted = useRestrictedGlobalGrantCheck({
     globalGrantType: 'add_databases',
   });
 
-  const { data: events } = useInProgressEvents();
+  const { isLoading: isTypeLoading } = useDatabaseTypesQuery();
+  const { isDatabasesV2Enabled } = useIsDatabasesEnabled();
+
+  const {
+    handleOrderChange: newDatabaseHandleOrderChange,
+    order: newDatabaseOrder,
+    orderBy: newDatabaseOrderBy,
+  } = useOrder(
+    {
+      order: 'desc',
+      orderBy: 'label',
+    },
+    `new-${preferenceKey}-order`
+  );
+
+  const newDatabasesFilter: Record<string, string> = {
+    ['+order']: newDatabaseOrder,
+    ['+order_by']: newDatabaseOrderBy,
+  };
+
+  if (isDatabasesV2Enabled) {
+    newDatabasesFilter['platform'] = 'rdbms-default';
+  }
+
+  const {
+    data: newDatabases,
+    error: newDatabasesError,
+    isLoading: newDatabasesIsLoading,
+  } = useDatabasesQuery(
+    {
+      page: newDatabasesPagination.page,
+      page_size: newDatabasesPagination.pageSize,
+    },
+    newDatabasesFilter
+  );
 
-  const { handleOrderChange, order, orderBy } = useOrder(
+  const {
+    handleOrderChange: legacyDatabaseHandleOrderChange,
+    order: legacyDatabaseOrder,
+    orderBy: legacyDatabaseOrderBy,
+  } = useOrder(
     {
       order: 'desc',
       orderBy: 'label',
     },
-    `${preferenceKey}-order`
+    `legacy-${preferenceKey}-order`
   );
 
-  const filter = {
-    ['+order']: order,
-    ['+order_by']: orderBy,
+  const legacyDatabasesFilter: Record<string, string> = {
+    ['+order']: legacyDatabaseOrder,
+    ['+order_by']: legacyDatabaseOrderBy,
   };
 
-  const { data, error, isLoading } = useDatabasesQuery(
+  if (isDatabasesV2Enabled) {
+    legacyDatabasesFilter['platform'] = 'rdbms-legacy';
+  }
+
+  const {
+    data: legacyDatabases,
+    error: legacyDatabasesError,
+    isLoading: legacyDatabasesIsLoading,
+  } = useDatabasesQuery(
     {
-      page: pagination.page,
-      page_size: pagination.pageSize,
+      page: legacyDatabasesPagination.page,
+      page_size: legacyDatabasesPagination.pageSize,
     },
-    filter
+    legacyDatabasesFilter
   );
 
+  const error = newDatabasesError || legacyDatabasesError;
   if (error) {
     return (
       <ErrorState
@@ -67,11 +115,16 @@ const DatabaseLanding = () => {
     );
   }
 
-  if (isLoading) {
+  if (newDatabasesIsLoading || legacyDatabasesIsLoading || isTypeLoading) {
     return <CircleProgress />;
   }
 
-  if (data?.results === 0) {
+  const showTabs = isDatabasesV2Enabled && legacyDatabases?.data.length !== 0;
+
+  const showEmpty =
+    newDatabases?.data.length === 0 && legacyDatabases?.data.length === 0;
+
+  if (showEmpty) {
     return <DatabaseEmptyState />;
   }
 
@@ -91,77 +144,54 @@ const DatabaseLanding = () => {
         onButtonClick={() => history.push('/databases/create')}
         title="Database Clusters"
       />
-      <Table>
-        <TableHead>
-          <TableRow>
-            <TableSortCell
-              active={orderBy === 'label'}
-              direction={order}
-              handleClick={handleOrderChange}
-              label="label"
-            >
-              Cluster Label
-            </TableSortCell>
-            <TableSortCell
-              active={orderBy === 'status'}
-              direction={order}
-              handleClick={handleOrderChange}
-              label="status"
-            >
-              Status
-            </TableSortCell>
-            <Hidden smDown>
-              <TableSortCell
-                active={orderBy === 'cluster_size'}
-                direction={order}
-                handleClick={handleOrderChange}
-                label="cluster_size"
-              >
-                Configuration
-              </TableSortCell>
-            </Hidden>
-            <TableSortCell
-              active={orderBy === 'engine'}
-              direction={order}
-              handleClick={handleOrderChange}
-              label="engine"
-            >
-              Engine
-            </TableSortCell>
-            <Hidden mdDown>
-              {/* TODO add back TableSortCell once API is updated to support sort by Region */}
-              <TableCell>Region</TableCell>
-            </Hidden>
-            <Hidden lgDown>
-              <TableSortCell
-                active={orderBy === 'created'}
-                direction={order}
-                handleClick={handleOrderChange}
-                label="created"
-              >
-                Created
-              </TableSortCell>
-            </Hidden>
-          </TableRow>
-        </TableHead>
-        <TableBody>
-          {data?.data.map((database: DatabaseInstance) => (
-            <DatabaseRow
-              database={database}
-              key={database.id}
-              events={events}
-            />
-          ))}
-        </TableBody>
-      </Table>
-      <PaginationFooter
-        count={data?.results || 0}
-        eventCategory="Databases Table"
-        handlePageChange={pagination.handlePageChange}
-        handleSizeChange={pagination.handlePageSizeChange}
-        page={pagination.page}
-        pageSize={pagination.pageSize}
-      />
+      {showTabs && <DatabaseClusterInfoBanner />}
+      <Box>
+        {showTabs ? (
+          <Tabs>
+            <TabList>
+              <Tab>Legacy Database Clusters</Tab>
+              <Tab>New Database Clusters</Tab>
+            </TabList>
+            <TabPanels>
+              <SafeTabPanel index={0}>
+                <DatabaseLandingTable
+                  data={legacyDatabases?.data}
+                  handleOrderChange={legacyDatabaseHandleOrderChange}
+                  order={legacyDatabaseOrder}
+                  orderBy={legacyDatabaseOrderBy}
+                />
+              </SafeTabPanel>
+              <SafeTabPanel index={1}>
+                <DatabaseLandingTable
+                  data={newDatabases?.data}
+                  handleOrderChange={newDatabaseHandleOrderChange}
+                  isNewDatabase={true}
+                  order={newDatabaseOrder}
+                  orderBy={newDatabaseOrderBy}
+                />
+              </SafeTabPanel>
+            </TabPanels>
+          </Tabs>
+        ) : (
+          <DatabaseLandingTable
+            data={
+              isDatabasesV2Enabled ? newDatabases?.data : legacyDatabases?.data
+            }
+            handleOrderChange={
+              isDatabasesV2Enabled
+                ? newDatabaseHandleOrderChange
+                : legacyDatabaseHandleOrderChange
+            }
+            order={
+              isDatabasesV2Enabled ? newDatabaseOrder : legacyDatabaseOrder
+            }
+            orderBy={
+              isDatabasesV2Enabled ? newDatabaseOrderBy : legacyDatabaseOrderBy
+            }
+            isNewDatabase={isDatabasesV2Enabled}
+          />
+        )}
+      </Box>
     </React.Fragment>
   );
 };
diff --git a/packages/manager/src/features/Databases/DatabaseLanding/DatabaseLandingEmptyStateData.ts b/packages/manager/src/features/Databases/DatabaseLanding/DatabaseLandingEmptyStateData.tsx
similarity index 91%
rename from packages/manager/src/features/Databases/DatabaseLanding/DatabaseLandingEmptyStateData.ts
rename to packages/manager/src/features/Databases/DatabaseLanding/DatabaseLandingEmptyStateData.tsx
index 22334152b16..648b0380c1b 100644
--- a/packages/manager/src/features/Databases/DatabaseLanding/DatabaseLandingEmptyStateData.ts
+++ b/packages/manager/src/features/Databases/DatabaseLanding/DatabaseLandingEmptyStateData.tsx
@@ -1,3 +1,6 @@
+import React from 'react';
+
+import DatabaseLogo from 'src/features/Databases/DatabaseLanding/DatabaseLogo';
 import {
   docsLink,
   guidesMoreLinkText,
@@ -14,6 +17,7 @@ import type {
 export const headers: ResourcesHeaders = {
   description:
     "Deploy popular database engines such as MySQL and PostgreSQL using Linode's performant, reliable, and fully managed database solution.",
+  logo: <DatabaseLogo sx={{ marginBottom: '20px', marginTop: '-10px' }} />,
   subtitle: 'Fully managed cloud database clusters',
   title: 'Databases',
 };
diff --git a/packages/manager/src/features/Databases/DatabaseLanding/DatabaseLandingTable.tsx b/packages/manager/src/features/Databases/DatabaseLanding/DatabaseLandingTable.tsx
new file mode 100644
index 00000000000..9f4ea829697
--- /dev/null
+++ b/packages/manager/src/features/Databases/DatabaseLanding/DatabaseLandingTable.tsx
@@ -0,0 +1,140 @@
+import { TableCell } from '@mui/material';
+import React from 'react';
+
+import { Hidden } from 'src/components/Hidden';
+import { PaginationFooter } from 'src/components/PaginationFooter/PaginationFooter';
+import { Table } from 'src/components/Table';
+import { TableBody } from 'src/components/TableBody';
+import { TableHead } from 'src/components/TableHead';
+import { TableRow } from 'src/components/TableRow/TableRow';
+import { TableRowEmpty } from 'src/components/TableRowEmpty/TableRowEmpty';
+import { TableSortCell } from 'src/components/TableSortCell';
+import DatabaseLogo from 'src/features/Databases/DatabaseLanding/DatabaseLogo';
+import DatabaseRow from 'src/features/Databases/DatabaseLanding/DatabaseRow';
+import { usePagination } from 'src/hooks/usePagination';
+import { useInProgressEvents } from 'src/queries/events/events';
+
+import type { DatabaseInstance } from '@linode/api-v4/lib/databases';
+import type { Order } from 'src/hooks/useOrder';
+
+const preferenceKey = 'databases';
+
+interface Props {
+  data: DatabaseInstance[] | undefined;
+  handleOrderChange: (newOrderBy: string, newOrder: Order) => void;
+  isNewDatabase?: boolean;
+  order: 'asc' | 'desc';
+  orderBy: string;
+}
+const DatabaseLandingTable = ({
+  data,
+  handleOrderChange,
+  isNewDatabase,
+  order,
+  orderBy,
+}: Props) => {
+  const { data: events } = useInProgressEvents();
+
+  const dbPlatformType = isNewDatabase ? 'new' : 'legacy';
+  const pagination = usePagination(1, preferenceKey, dbPlatformType);
+
+  return (
+    <>
+      <Table sx={{ marginTop: '10px' }}>
+        <TableHead>
+          <TableRow>
+            <TableSortCell
+              active={orderBy === 'label'}
+              direction={order}
+              handleClick={handleOrderChange}
+              label="label"
+            >
+              Cluster Label
+            </TableSortCell>
+            <TableSortCell
+              active={orderBy === 'status'}
+              direction={order}
+              handleClick={handleOrderChange}
+              label="status"
+            >
+              Status
+            </TableSortCell>
+            {isNewDatabase && (
+              /* TODO add back TableSortCell once API is updated to support sort by Plan */
+              <TableCell>Plan</TableCell>
+            )}
+            <Hidden smDown>
+              <TableSortCell
+                active={orderBy === 'cluster_size'}
+                direction={order}
+                handleClick={handleOrderChange}
+                label="cluster_size"
+              >
+                {isNewDatabase ? 'Nodes' : 'Configuration'}
+              </TableSortCell>
+            </Hidden>
+            <TableSortCell
+              active={orderBy === 'engine'}
+              direction={order}
+              handleClick={handleOrderChange}
+              label="engine"
+            >
+              Engine
+            </TableSortCell>
+            <Hidden mdDown>
+              <TableSortCell
+                active={orderBy === 'region'}
+                direction={order}
+                handleClick={handleOrderChange}
+                label="region"
+              >
+                Region
+              </TableSortCell>
+            </Hidden>
+            <Hidden lgDown>
+              <TableSortCell
+                active={orderBy === 'created'}
+                direction={order}
+                handleClick={handleOrderChange}
+                label="created"
+              >
+                Created
+              </TableSortCell>
+            </Hidden>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {data?.map((database: DatabaseInstance) => (
+            <DatabaseRow
+              database={database}
+              events={events}
+              isNewDatabase={isNewDatabase}
+              key={database.id}
+            />
+          ))}
+          {data?.length === 0 && (
+            <TableRowEmpty
+              message={
+                isNewDatabase
+                  ? 'You don’t have any Aiven Database Clusters created yet. Click Create Database Cluster to create one.'
+                  : ''
+              }
+              colSpan={7}
+            ></TableRowEmpty>
+          )}
+        </TableBody>
+      </Table>
+      <PaginationFooter
+        count={data?.length || 0}
+        eventCategory="Databases Table"
+        handlePageChange={pagination.handlePageChange}
+        handleSizeChange={pagination.handlePageSizeChange}
+        page={pagination.page}
+        pageSize={pagination.pageSize}
+      />
+      {isNewDatabase && <DatabaseLogo />}
+    </>
+  );
+};
+
+export default DatabaseLandingTable;
diff --git a/packages/manager/src/features/Databases/DatabaseLanding/DatabaseLogo.tsx b/packages/manager/src/features/Databases/DatabaseLanding/DatabaseLogo.tsx
index bce0caa0a2b..71c7dd23b1e 100644
--- a/packages/manager/src/features/Databases/DatabaseLanding/DatabaseLogo.tsx
+++ b/packages/manager/src/features/Databases/DatabaseLanding/DatabaseLogo.tsx
@@ -1,43 +1,52 @@
+import { useTheme } from '@mui/material/styles';
 import * as React from 'react';
-import { makeStyles } from 'tss-react/mui';
 
+import LogoWhite from 'src/assets/icons/db-logo-white.svg';
 import Logo from 'src/assets/icons/db-logo.svg';
 import { BetaChip } from 'src/components/BetaChip/BetaChip';
 import { Box } from 'src/components/Box';
 import { Typography } from 'src/components/Typography';
 
-import type { Theme } from '@mui/material/styles';
+import type { SxProps } from '@mui/material/styles';
 
 interface Props {
-  style?: React.CSSProperties;
+  sx?: SxProps;
 }
 
-const useStyles = makeStyles()((theme: Theme) => ({
-  betaChip: {
-    backgroundColor: '#727272',
-    color: theme.color.white,
-  },
-  logo: {
-    color: '#32363C',
-    display: 'flex',
-    marginTop: '8px',
-  },
-}));
-
-export const DatabaseLogo = ({ style }: Props) => {
-  const { classes } = useStyles();
+export const DatabaseLogo = ({ sx }: Props) => {
+  const theme = useTheme();
   return (
     <Box
       display="flex"
       justifyContent="center"
-      sx={style ? style : { margin: '20px' }}
+      sx={sx ? sx : { margin: '20px' }}
     >
       <Typography sx={{ display: 'inline-block', textAlign: 'center' }}>
-        <BetaChip className={classes.betaChip} component="span" />
-        <span className={classes.logo}>
-          Powered by <Logo />
-        </span>
+        <BetaChip
+          sx={{
+            backgroundColor:
+              theme.palette.mode === 'light'
+                ? theme.color.label
+                : theme.color.grey7,
+            color:
+              theme.palette.mode === 'light' ? theme.color.white : 'primary',
+          }}
+          component="span"
+        />
+        <Typography
+          sx={{
+            color: theme.palette.mode === 'light' ? theme.color.headline : '',
+            display: 'flex',
+            marginTop: '8px',
+          }}
+          component="span"
+        >
+          Powered by &nbsp;
+          {theme.palette.mode === 'light' ? <Logo /> : <LogoWhite />}
+        </Typography>
       </Typography>
     </Box>
   );
 };
+
+export default DatabaseLogo;
diff --git a/packages/manager/src/features/Databases/DatabaseLanding/DatabaseRow.tsx b/packages/manager/src/features/Databases/DatabaseLanding/DatabaseRow.tsx
index 5646cb54753..f471fa9e7b0 100644
--- a/packages/manager/src/features/Databases/DatabaseLanding/DatabaseRow.tsx
+++ b/packages/manager/src/features/Databases/DatabaseLanding/DatabaseRow.tsx
@@ -1,9 +1,3 @@
-import { Event } from '@linode/api-v4';
-import {
-  Database,
-  DatabaseInstance,
-  Engine,
-} from '@linode/api-v4/lib/databases/types';
 import * as React from 'react';
 import { Link } from 'react-router-dom';
 
@@ -11,12 +5,21 @@ import { Chip } from 'src/components/Chip';
 import { Hidden } from 'src/components/Hidden';
 import { TableCell } from 'src/components/TableCell';
 import { TableRow } from 'src/components/TableRow';
+import { DatabaseStatusDisplay } from 'src/features/Databases/DatabaseDetail/DatabaseStatusDisplay';
+import { useDatabaseTypesQuery } from 'src/queries/databases/databases';
 import { useProfile } from 'src/queries/profile/profile';
 import { useRegionsQuery } from 'src/queries/regions/regions';
 import { isWithinDays, parseAPIDate } from 'src/utilities/date';
 import { formatDate } from 'src/utilities/formatDate';
+import { formatStorageUnits } from 'src/utilities/formatStorageUnits';
 
-import { DatabaseStatusDisplay } from '../DatabaseDetail/DatabaseStatusDisplay';
+import type { Event } from '@linode/api-v4';
+import type {
+  Database,
+  DatabaseInstance,
+  DatabaseType,
+  Engine,
+} from '@linode/api-v4/lib/databases/types';
 
 export const databaseEngineMap: Record<Engine, string> = {
   mongodb: 'MongoDB',
@@ -28,9 +31,10 @@ export const databaseEngineMap: Record<Engine, string> = {
 interface Props {
   database: Database | DatabaseInstance;
   events?: Event[];
+  isNewDatabase?: boolean;
 }
 
-export const DatabaseRow = ({ database, events }: Props) => {
+export const DatabaseRow = ({ database, events, isNewDatabase }: Props) => {
   const {
     cluster_size,
     created,
@@ -38,12 +42,15 @@ export const DatabaseRow = ({ database, events }: Props) => {
     id,
     label,
     region,
+    type,
     version,
   } = database;
 
   const { data: regions } = useRegionsQuery();
   const { data: profile } = useProfile();
-
+  const { data: types } = useDatabaseTypesQuery();
+  const plan = types?.find((t: DatabaseType) => t.id === type);
+  const formattedPlan = plan && formatStorageUnits(plan.label);
   const actualRegion = regions?.find((r) => r.id === region);
 
   const configuration =
@@ -69,6 +76,7 @@ export const DatabaseRow = ({ database, events }: Props) => {
       <TableCell statusCell>
         <DatabaseStatusDisplay database={database} events={events} />
       </TableCell>
+      {isNewDatabase && <TableCell>{formattedPlan}</TableCell>}
       <Hidden smDown>
         <TableCell>{configuration}</TableCell>
       </Hidden>
diff --git a/packages/manager/src/features/Databases/utilities.test.ts b/packages/manager/src/features/Databases/utilities.test.ts
index 51c367ac709..11447244793 100644
--- a/packages/manager/src/features/Databases/utilities.test.ts
+++ b/packages/manager/src/features/Databases/utilities.test.ts
@@ -34,9 +34,9 @@ describe('useIsDatabasesEnabled', () => {
     });
   });
 
-  it('should return true for an unrestricted user with the account capability V2', async () => {
+  it('should return true for an unrestricted user with the account capability Beta', async () => {
     const account = accountFactory.build({
-      capabilities: ['Managed Databases V2'],
+      capabilities: ['Managed Databases Beta'],
     });
 
     server.use(
diff --git a/packages/manager/src/features/Databases/utilities.ts b/packages/manager/src/features/Databases/utilities.ts
index 8e1e203235c..c044026a989 100644
--- a/packages/manager/src/features/Databases/utilities.ts
+++ b/packages/manager/src/features/Databases/utilities.ts
@@ -33,7 +33,7 @@ export const useIsDatabasesEnabled = () => {
     );
 
     const isDatabasesV2Enabled =
-      account.capabilities.includes('Managed Databases V2') &&
+      account.capabilities.includes('Managed Databases Beta') &&
       flags.dbaasV2?.enabled;
 
     return {
diff --git a/packages/manager/src/features/GlobalNotifications/DatabaseClusterInfoBanner.tsx b/packages/manager/src/features/GlobalNotifications/DatabaseClusterInfoBanner.tsx
new file mode 100644
index 00000000000..256a2b8dee6
--- /dev/null
+++ b/packages/manager/src/features/GlobalNotifications/DatabaseClusterInfoBanner.tsx
@@ -0,0 +1,46 @@
+import { Box } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import * as React from 'react';
+
+import { Notice } from 'src/components/Notice/Notice';
+import { Typography } from 'src/components/Typography';
+
+import { useIsDatabasesEnabled } from '../Databases/utilities';
+
+const StyledNotice = styled(Notice, { label: 'StyledNotice' })(({ theme }) => ({
+  background: theme.bg.bgPaper,
+  marginTop: '15px',
+}));
+
+export const DatabaseClusterInfoBanner = () => {
+  const { isDatabasesV2Enabled } = useIsDatabasesEnabled();
+
+  if (!isDatabasesV2Enabled) {
+    return null;
+  }
+
+  return (
+    <StyledNotice variant="info">
+      <Box>
+        <Typography variant="h3">
+          Important Database Cluster Beta Information
+        </Typography>
+        <ul style={{ margin: '10px 0' }}>
+          <li>
+            <Typography variant="body2">
+              As a Beta customer you can only create Aiven Database clusters.
+            </Typography>
+          </li>
+          <li>
+            <Typography variant="body2">
+              You won’t be charged for Aiven database clusters created during
+              duration of the Beta phase. If you decide to keep the new clusters
+              later on, you’ll be charged according to the new payment. You can
+              always remove unwanted clusters.
+            </Typography>
+          </li>
+        </ul>
+      </Box>
+    </StyledNotice>
+  );
+};
diff --git a/packages/manager/src/mocks/serverHandlers.ts b/packages/manager/src/mocks/serverHandlers.ts
index 06edff43466..062b1c9796b 100644
--- a/packages/manager/src/mocks/serverHandlers.ts
+++ b/packages/manager/src/mocks/serverHandlers.ts
@@ -206,7 +206,7 @@ const databases = [
     const standardTypes = [
       databaseTypeFactory.build({
         class: 'nanode',
-        id: 'g6-standard-0',
+        id: 'g6-nanode-1',
         label: `Nanode 1 GB`,
         memory: 1024,
       }),

From 0ac8742d2e4c0b6dc333198f3fa0a6c870c2dbbe Mon Sep 17 00:00:00 2001
From: Banks Nussman <115251059+bnussman-akamai@users.noreply.github.com>
Date: Mon, 16 Sep 2024 09:14:46 -0400
Subject: [PATCH 12/62] fix: [M3-8572] - Scrollbar showing briefly on Splash
 Screen (#10922)

* add missing `srSpeak` utility

* Added changeset: Scrollbar showing briefly on Splash Screen

---------

Co-authored-by: Banks Nussman <banks@nussman.us>
---
 .../.changeset/pr-10922-fixed-1726078413547.md      |  5 +++++
 packages/manager/src/components/SplashScreen.tsx    |  1 -
 packages/manager/src/index.css                      | 13 +++++++++++++
 packages/manager/src/utilities/accessibility.ts     |  6 ++++--
 4 files changed, 22 insertions(+), 3 deletions(-)
 create mode 100644 packages/manager/.changeset/pr-10922-fixed-1726078413547.md

diff --git a/packages/manager/.changeset/pr-10922-fixed-1726078413547.md b/packages/manager/.changeset/pr-10922-fixed-1726078413547.md
new file mode 100644
index 00000000000..c05ef12b040
--- /dev/null
+++ b/packages/manager/.changeset/pr-10922-fixed-1726078413547.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Fixed
+---
+
+Scrollbar showing briefly on Splash Screen ([#10922](https://github.com/linode/manager/pull/10922))
diff --git a/packages/manager/src/components/SplashScreen.tsx b/packages/manager/src/components/SplashScreen.tsx
index af0b993c47d..5b5836a5d3c 100644
--- a/packages/manager/src/components/SplashScreen.tsx
+++ b/packages/manager/src/components/SplashScreen.tsx
@@ -7,7 +7,6 @@ import { Box } from './Box';
 
 export const SplashScreen = () => {
   React.useEffect(() => {
-    // @TODO: The utilility cases a scrollbar to show in the browser, fix it.
     srSpeak('Loading Linode Cloud Manager', 'polite');
   }, []);
 
diff --git a/packages/manager/src/index.css b/packages/manager/src/index.css
index e4be4eae756..96ad3e87a85 100644
--- a/packages/manager/src/index.css
+++ b/packages/manager/src/index.css
@@ -346,3 +346,16 @@ See: https://blog.chromium.org/2020/09/giving-users-and-developers-more.html
 :focus:not(:focus-visible) {
   outline: none;
 }
+
+/* Used by `srSpeak` in `accessibility.ts` */
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
\ No newline at end of file
diff --git a/packages/manager/src/utilities/accessibility.ts b/packages/manager/src/utilities/accessibility.ts
index a1c229a5a2c..1d7aa78c282 100644
--- a/packages/manager/src/utilities/accessibility.ts
+++ b/packages/manager/src/utilities/accessibility.ts
@@ -1,5 +1,7 @@
-// Function to send aria-live messages
-// Fo instance, when page is loading
+/**
+ * Function to send aria-live messages
+ * For instance, when page is loading
+ */
 export const srSpeak = (text: string, priority: 'assertive' | 'polite') => {
   const el = document.createElement('div');
   const id = 'speak-' + Math.random().toString(36).substr(2, 9);

From 3ce07216f5159c0747939a21b2963ebb11a6ea76 Mon Sep 17 00:00:00 2001
From: Purvesh Makode <pmakode@akamai.com>
Date: Tue, 17 Sep 2024 19:29:27 +0530
Subject: [PATCH 13/62] test: [M3-8544, M3-8545] - Add unit tests for Dialog
 and DeletionDialog components (#10917)

* Add unit tests for dialog and deletiondialog components

* Added changeset: Add unit tests for Dialog and DeletionDialog components

* Clean up...

* Fix typo
---
 .../pr-10917-tests-1726061618551.md           |   5 +
 .../DeletionDialog/DeletionDialog.test.tsx    | 148 ++++++++++++++++++
 .../DeletionDialog/DeletionDialog.tsx         |   4 +-
 .../src/components/Dialog/Dialog.test.tsx     |  69 ++++++++
 4 files changed, 224 insertions(+), 2 deletions(-)
 create mode 100644 packages/manager/.changeset/pr-10917-tests-1726061618551.md
 create mode 100644 packages/manager/src/components/DeletionDialog/DeletionDialog.test.tsx
 create mode 100644 packages/manager/src/components/Dialog/Dialog.test.tsx

diff --git a/packages/manager/.changeset/pr-10917-tests-1726061618551.md b/packages/manager/.changeset/pr-10917-tests-1726061618551.md
new file mode 100644
index 00000000000..40ad85e0440
--- /dev/null
+++ b/packages/manager/.changeset/pr-10917-tests-1726061618551.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Tests
+---
+
+Add unit tests for Dialog and DeletionDialog components ([#10917](https://github.com/linode/manager/pull/10917))
diff --git a/packages/manager/src/components/DeletionDialog/DeletionDialog.test.tsx b/packages/manager/src/components/DeletionDialog/DeletionDialog.test.tsx
new file mode 100644
index 00000000000..c1385003852
--- /dev/null
+++ b/packages/manager/src/components/DeletionDialog/DeletionDialog.test.tsx
@@ -0,0 +1,148 @@
+import { fireEvent } from '@testing-library/react';
+import * as React from 'react';
+
+import { renderWithTheme } from 'src/utilities/testHelpers';
+
+import { DeletionDialog } from './DeletionDialog';
+
+import type { DeletionDialogProps } from './DeletionDialog';
+
+describe('DeletionDialog', () => {
+  const defaultArgs: DeletionDialogProps = {
+    entity: 'Linode',
+    label: 'my-linode-0',
+    loading: false,
+    onClose: vi.fn(),
+    onDelete: vi.fn(),
+    open: false,
+  };
+
+  it.each([
+    ['not render', false],
+    ['render', true],
+  ])(
+    'should %s a DeletionDialog with the correct title, close button, and action buttons when open is %s',
+    (_, isOpen) => {
+      const { queryByRole, queryByTestId, queryByText } = renderWithTheme(
+        <DeletionDialog {...defaultArgs} open={isOpen} />
+      );
+      const title = queryByText(
+        `Delete ${defaultArgs.entity} ${defaultArgs.label}?`
+      );
+      const dialog = queryByTestId('drawer');
+      const closeButton = queryByRole('button', { name: 'Close' });
+      const cancelButton = queryByTestId('cancel');
+      const deleteButton = queryByTestId('confirm');
+
+      if (isOpen) {
+        expect(title).toBeInTheDocument();
+        expect(dialog).toBeInTheDocument();
+        expect(closeButton).toBeInTheDocument();
+        expect(cancelButton).toBeInTheDocument();
+        expect(deleteButton).toBeInTheDocument();
+        expect(deleteButton).toHaveTextContent(`Delete ${defaultArgs.entity}`);
+      } else {
+        expect(title).not.toBeInTheDocument();
+        expect(dialog).not.toBeInTheDocument();
+        expect(closeButton).not.toBeInTheDocument();
+        expect(cancelButton).not.toBeInTheDocument();
+        expect(deleteButton).not.toBeInTheDocument();
+      }
+    }
+  );
+
+  it('should call onClose when the DeletionDialog close button or Action cancel button is clicked', () => {
+    const { getByRole, getByTestId } = renderWithTheme(
+      <DeletionDialog {...defaultArgs} open={true} />
+    );
+
+    // For close icon button
+    const closeButton = getByRole('button', { name: 'Close' });
+    expect(closeButton).not.toBeDisabled();
+    fireEvent.click(closeButton);
+
+    expect(defaultArgs.onClose).toHaveBeenCalled();
+
+    // For action cancel button
+    const cancelButton = getByTestId('cancel');
+    expect(cancelButton).not.toBeDisabled();
+    fireEvent.click(cancelButton);
+
+    expect(defaultArgs.onClose).toHaveBeenCalled();
+  });
+
+  it('should call onDelete when the DeletionDialog delete button is clicked', () => {
+    const { getByTestId } = renderWithTheme(
+      <DeletionDialog {...defaultArgs} open={true} />
+    );
+
+    const deleteButton = getByTestId('confirm');
+    expect(deleteButton).not.toBeDisabled();
+    fireEvent.click(deleteButton);
+
+    expect(defaultArgs.onDelete).toHaveBeenCalled();
+  });
+
+  it('should render a DeletionDialog with an error message if provided', () => {
+    const { getByText } = renderWithTheme(
+      <DeletionDialog
+        {...defaultArgs}
+        error="Error that will be shown in the dialog."
+        open={true}
+      />
+    );
+
+    expect(getByText('Error that will be shown in the dialog.')).toBeVisible();
+  });
+
+  it('should disable delete button and show loading icon if loading is true', () => {
+    const { getByTestId } = renderWithTheme(
+      <DeletionDialog {...defaultArgs} loading={true} open={true} />
+    );
+
+    const deleteButton = getByTestId('confirm');
+    expect(deleteButton).toBeInTheDocument();
+    expect(deleteButton).toBeDisabled();
+
+    const loadingSvgIcon = deleteButton.querySelector(
+      '[data-test-id="ReloadIcon"]'
+    );
+
+    expect(loadingSvgIcon).toBeInTheDocument();
+  });
+
+  it('should display the correct warning text in the DeletionDialog', () => {
+    const { getByTestId } = renderWithTheme(
+      <DeletionDialog {...defaultArgs} open={true} />
+    );
+
+    const dialog = getByTestId('drawer');
+    const warningText = `Warning: Deleting this ${defaultArgs.entity} is permanent and can\u2019t be undone.`;
+
+    expect(dialog).toHaveTextContent(warningText);
+  });
+
+  it.each([
+    ['not render', false],
+    ['render', true],
+  ])(
+    'should %s input field with label when typeToConfirm is %s',
+    (_, typeToConfirm) => {
+      const { queryByTestId } = renderWithTheme(
+        <DeletionDialog
+          {...defaultArgs}
+          open={true}
+          typeToConfirm={typeToConfirm}
+        />
+      );
+
+      if (typeToConfirm) {
+        expect(queryByTestId('inputLabelWrapper')).toBeInTheDocument();
+        expect(queryByTestId('textfield-input')).toBeInTheDocument();
+      } else {
+        expect(queryByTestId('inputLabelWrapper')).not.toBeInTheDocument();
+        expect(queryByTestId('textfield-input')).not.toBeInTheDocument();
+      }
+    }
+  );
+});
diff --git a/packages/manager/src/components/DeletionDialog/DeletionDialog.tsx b/packages/manager/src/components/DeletionDialog/DeletionDialog.tsx
index b33df97103d..bce1c53ad8d 100644
--- a/packages/manager/src/components/DeletionDialog/DeletionDialog.tsx
+++ b/packages/manager/src/components/DeletionDialog/DeletionDialog.tsx
@@ -10,9 +10,9 @@ import { titlecase } from 'src/features/Linodes/presentation';
 import { usePreferences } from 'src/queries/profile/preferences';
 import { capitalize } from 'src/utilities/capitalize';
 
-import { DialogProps } from '../Dialog/Dialog';
+import type { DialogProps } from '../Dialog/Dialog';
 
-interface DeletionDialogProps extends Omit<DialogProps, 'title'> {
+export interface DeletionDialogProps extends Omit<DialogProps, 'title'> {
   entity: string;
   error?: string;
   label: string;
diff --git a/packages/manager/src/components/Dialog/Dialog.test.tsx b/packages/manager/src/components/Dialog/Dialog.test.tsx
new file mode 100644
index 00000000000..1e20c5c22ef
--- /dev/null
+++ b/packages/manager/src/components/Dialog/Dialog.test.tsx
@@ -0,0 +1,69 @@
+import { fireEvent } from '@testing-library/react';
+import * as React from 'react';
+
+import { renderWithTheme } from 'src/utilities/testHelpers';
+
+import { Dialog } from './Dialog';
+
+import type { DialogProps } from './Dialog';
+
+describe('Dialog', () => {
+  const defaultArgs: DialogProps = {
+    onClose: vi.fn(),
+    open: false,
+    title: 'This is a Dialog',
+  };
+
+  it.each([
+    ['not render', false],
+    ['render', true],
+  ])('should %s a Dialog with title when open is %s', (_, isOpen) => {
+    const { queryByTestId, queryByText } = renderWithTheme(
+      <Dialog {...defaultArgs} open={isOpen} />
+    );
+
+    const title = queryByText('This is a Dialog');
+    const dialog = queryByTestId('drawer');
+
+    if (isOpen) {
+      expect(title).toBeInTheDocument();
+      expect(dialog).toBeInTheDocument();
+    } else {
+      expect(title).not.toBeInTheDocument();
+      expect(dialog).not.toBeInTheDocument();
+    }
+  });
+
+  it('should render a Dialog with children if provided', () => {
+    const { getByText } = renderWithTheme(
+      <Dialog {...defaultArgs} open={true}>
+        <p>Child items can go here!</p>
+      </Dialog>
+    );
+
+    expect(getByText('Child items can go here!')).toBeInTheDocument();
+  });
+
+  it('should call onClose when the Dialog close button is clicked', () => {
+    const { getByRole } = renderWithTheme(
+      <Dialog {...defaultArgs} open={true} />
+    );
+
+    const closeButton = getByRole('button', { name: 'Close' });
+    fireEvent.click(closeButton);
+
+    expect(defaultArgs.onClose).toHaveBeenCalled();
+  });
+
+  it('should render a Dialog with an error message if provided', () => {
+    const { getByText } = renderWithTheme(
+      <Dialog
+        {...defaultArgs}
+        error="Error that will be shown in the dialog."
+        open={true}
+      />
+    );
+
+    expect(getByText('Error that will be shown in the dialog.')).toBeVisible();
+  });
+});

From 3758ec1864321da401624cb80e11300f7b4606a9 Mon Sep 17 00:00:00 2001
From: Hussain Khalil <122488130+hkhalil-akamai@users.noreply.github.com>
Date: Tue, 17 Sep 2024 10:15:29 -0400
Subject: [PATCH 14/62] fix: [M3-7149] - Fix textfield tooltip icon focus area
 (#10938)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Description 📝
Fixes the focus area for tooltips to be a circle rather than an oval as before.

## How to test 🧪
Verify textfield tooltips' focus areas render as a circle and otherwise work as before.
---
 .../.changeset/pr-10938-fixed-1726262803311.md    |  5 +++++
 packages/manager/src/components/TextField.tsx     | 15 ++++++++-------
 2 files changed, 13 insertions(+), 7 deletions(-)
 create mode 100644 packages/manager/.changeset/pr-10938-fixed-1726262803311.md

diff --git a/packages/manager/.changeset/pr-10938-fixed-1726262803311.md b/packages/manager/.changeset/pr-10938-fixed-1726262803311.md
new file mode 100644
index 00000000000..407b55e45ec
--- /dev/null
+++ b/packages/manager/.changeset/pr-10938-fixed-1726262803311.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Fixed
+---
+
+Textarea tooltip icon focus area ([#10938](https://github.com/linode/manager/pull/10938))
diff --git a/packages/manager/src/components/TextField.tsx b/packages/manager/src/components/TextField.tsx
index a0c1a9240fa..824ec03748b 100644
--- a/packages/manager/src/components/TextField.tsx
+++ b/packages/manager/src/components/TextField.tsx
@@ -1,9 +1,6 @@
 import KeyboardArrowDown from '@mui/icons-material/KeyboardArrowDown';
-import { Theme, useTheme } from '@mui/material/styles';
-import {
-  default as _TextField,
-  StandardTextFieldProps,
-} from '@mui/material/TextField';
+import { useTheme } from '@mui/material/styles';
+import { default as _TextField } from '@mui/material/TextField';
 import { clamp } from 'ramda';
 import * as React from 'react';
 import { makeStyles } from 'tss-react/mui';
@@ -13,11 +10,13 @@ import { CircleProgress } from 'src/components/CircleProgress';
 import { FormHelperText } from 'src/components/FormHelperText';
 import { InputAdornment } from 'src/components/InputAdornment';
 import { InputLabel } from 'src/components/InputLabel';
-import { TooltipProps } from 'src/components/Tooltip';
 import { TooltipIcon } from 'src/components/TooltipIcon';
 import { convertToKebabCase } from 'src/utilities/convertToKebobCase';
 
+import type { Theme } from '@mui/material/styles';
+import type { StandardTextFieldProps } from '@mui/material/TextField';
 import type { BoxProps } from 'src/components/Box';
+import type { TooltipProps } from 'src/components/Tooltip';
 
 const useStyles = makeStyles()((theme: Theme) => ({
   absolute: {
@@ -480,8 +479,10 @@ export const TextField = (props: TextFieldProps) => {
         {tooltipText && (
           <TooltipIcon
             sxTooltipIcon={{
+              height: '34px',
               margin: '0px 0px 0px 4px',
-              padding: '6px',
+              padding: '17px',
+              width: '34px',
             }}
             classes={{ popper: tooltipClasses }}
             onMouseEnter={tooltipOnMouseEnter}

From 44763ea74468efa0584d39dfb9cf1be83d091313 Mon Sep 17 00:00:00 2001
From: venkatmano-akamai <chk-Venkatesh@outlook.com>
Date: Tue, 17 Sep 2024 20:44:33 +0530
Subject: [PATCH 15/62] upcoming: [DI-20709] - CSS updates for widget level
 filters for ACLP (#10903)

* upcoming: [DI-20709] - CSS updates for widget level filters

* upcoming: [DI-20709] - ES lint fixes

* upcoming: [DI-20709] - Added comments

* upcoming: [DI-20709] - Added changeset

* upcoming: [DI-20709] - Color updates for zoomer component with use them hook

* upcoming: [DI-20585] - CSS changes

* upcoming: [DI-20585] - Removed unused values and imports

* upcoming: [DI-20585] - Removed unused values and imports

* upcoming: [DI-20585] - Use common utils

* upcoming: [DI-20585] - Comment updates

* upcoming: [DI-20585] - Remove any

* upcoming: [DI-20585] - Removing height and adjusting width. Removed divider in widget

* upcoming: [DI-20585] - Removed placeholder on selection and UT updates

* upcoming: [DI-20585] - UT updates

* upcoming: [DI-20585] - Using form control for width of filters

* upcoming: [DI-20585] - Alignment fix

* upcoming: [DI-20585] - PR comments

* upcoming: [DI-20585] - PR comments

* upcoming: [DI-20585] - Updated code syntax for handling small size screens

* upcoming: [DI-20585] - CamelCase for properties

* upcoming: [DI-20585] - Style to sx

---------

Co-authored-by: vmangalr <vmangalr@akamai.com>
---
 ...r-10903-upcoming-features-1725857694589.md |  5 ++
 .../Dashboard/CloudPulseDashboard.tsx         |  4 +-
 .../CloudPulseDashboardWithFilters.test.tsx   |  4 +-
 .../CloudPulse/Utils/CloudPulseWidgetUtils.ts | 18 +++++++
 .../CloudPulse/Widget/CloudPulseWidget.tsx    | 14 ++----
 .../CloudPulseAggregateFunction.tsx           |  4 +-
 .../CloudPulseIntervalSelect.test.tsx         |  6 +--
 .../components/CloudPulseIntervalSelect.tsx   | 50 ++++++++++++-------
 .../CloudPulse/Widget/components/Zoomer.tsx   | 15 +++++-
 .../shared/CloudPulseCustomSelect.test.tsx    | 18 ++++---
 .../shared/CloudPulseCustomSelect.tsx         |  8 ++-
 .../shared/CloudPulseResourcesSelect.tsx      |  4 +-
 12 files changed, 100 insertions(+), 50 deletions(-)
 create mode 100644 packages/manager/.changeset/pr-10903-upcoming-features-1725857694589.md

diff --git a/packages/manager/.changeset/pr-10903-upcoming-features-1725857694589.md b/packages/manager/.changeset/pr-10903-upcoming-features-1725857694589.md
new file mode 100644
index 00000000000..66017bb7ed9
--- /dev/null
+++ b/packages/manager/.changeset/pr-10903-upcoming-features-1725857694589.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Update CSS for widget level filters and widget heading title for ACLP ([#10903](https://github.com/linode/manager/pull/10903))
diff --git a/packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboard.tsx b/packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboard.tsx
index 3d010993877..a019a829a70 100644
--- a/packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboard.tsx
+++ b/packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboard.tsx
@@ -16,7 +16,7 @@ import { getUserPreferenceObject } from '../Utils/UserPreference';
 import { createObjectCopy } from '../Utils/utils';
 import { CloudPulseWidget } from '../Widget/CloudPulseWidget';
 import {
-  all_interval_options,
+  allIntervalOptions,
   getInSeconds,
   getIntervalIndex,
 } from '../Widget/components/CloudPulseIntervalSelect';
@@ -124,7 +124,7 @@ export const CloudPulseDashboard = (props: DashboardProperties) => {
   const getTimeGranularity = (scrapeInterval: string) => {
     const scrapeIntervalValue = getInSeconds(scrapeInterval);
     const index = getIntervalIndex(scrapeIntervalValue);
-    return index < 0 ? all_interval_options[0] : all_interval_options[index];
+    return index < 0 ? allIntervalOptions[0] : allIntervalOptions[index];
   };
 
   const {
diff --git a/packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboardWithFilters.test.tsx b/packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboardWithFilters.test.tsx
index 5cdd820736c..b2382979830 100644
--- a/packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboardWithFilters.test.tsx
+++ b/packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboardWithFilters.test.tsx
@@ -13,7 +13,6 @@ const queryMocks = vi.hoisted(() => ({
 const selectTimeDurationPlaceholder = 'Select Time Duration';
 const circleProgress = 'circle-progress';
 const mandatoryFiltersError = 'Mandatory Filters not Selected';
-const customNodeTypePlaceholder = 'Select Node Type';
 
 vi.mock('src/queries/cloudpulse/dashboards', async () => {
   const actual = await vi.importActual('src/queries/cloudpulse/dashboards');
@@ -98,8 +97,7 @@ describe('CloudPulseDashboardWithFilters component tests', () => {
 
     expect(screen.getByTestId('CloseIcon')).toBeDefined();
 
-    const inputBox = screen.getByPlaceholderText(customNodeTypePlaceholder);
-    fireEvent.change(inputBox, { target: { value: '' } }); // clear the value
+    fireEvent.click(screen.getByTitle('Clear')); // clear the value
     expect(screen.getByText(mandatoryFiltersError)).toBeDefined();
   });
 
diff --git a/packages/manager/src/features/CloudPulse/Utils/CloudPulseWidgetUtils.ts b/packages/manager/src/features/CloudPulse/Utils/CloudPulseWidgetUtils.ts
index 40d5d2d480b..29eabd3a7a9 100644
--- a/packages/manager/src/features/CloudPulse/Utils/CloudPulseWidgetUtils.ts
+++ b/packages/manager/src/features/CloudPulse/Utils/CloudPulseWidgetUtils.ts
@@ -1,3 +1,6 @@
+import { styled } from '@mui/material';
+
+import { Autocomplete } from 'src/components/Autocomplete/Autocomplete';
 import { isToday } from 'src/utilities/isToday';
 import { getMetrics } from 'src/utilities/statMetrics';
 
@@ -331,3 +334,18 @@ export const isDataEmpty = (data: DataSet[]): boolean => {
       thisSeries.data.every((thisPoint) => thisPoint[1] === null)
   );
 };
+
+/**
+ * Returns an autocomplete with updated styles according to UX, this will be used at widget level
+ */
+export const StyledWidgetAutocomplete = styled(Autocomplete, {
+  label: 'StyledAutocomplete',
+})(({ theme }) => ({
+  '&& .MuiFormControl-root': {
+    minWidth: '90px',
+    [theme.breakpoints.down('sm')]: {
+      width: '100%', // 100% width for xs and small screens
+    },
+    width: '90px',
+  },
+}));
diff --git a/packages/manager/src/features/CloudPulse/Widget/CloudPulseWidget.tsx b/packages/manager/src/features/CloudPulse/Widget/CloudPulseWidget.tsx
index 06847a0573e..feff3f8e0cd 100644
--- a/packages/manager/src/features/CloudPulse/Widget/CloudPulseWidget.tsx
+++ b/packages/manager/src/features/CloudPulse/Widget/CloudPulseWidget.tsx
@@ -2,7 +2,6 @@ import { Box, Grid, Paper, Stack, Typography } from '@mui/material';
 import { DateTime } from 'luxon';
 import React from 'react';
 
-import { Divider } from 'src/components/Divider';
 import { useFlags } from 'src/hooks/useFlags';
 import { useCloudPulseMetricsQuery } from 'src/queries/cloudpulse/metrics';
 import { useProfile } from 'src/queries/profile/profile';
@@ -298,11 +297,7 @@ export const CloudPulseWidget = (props: CloudPulseWidgetProperties) => {
             justifyContent={{ sm: 'space-between' }}
             padding={1}
           >
-            <Typography
-              fontSize={{ sm: '1.5rem', xs: '2rem' }}
-              marginLeft={1}
-              variant="h1"
-            >
+            <Typography marginLeft={1} variant="h2">
               {convertStringToCamelCasesWithSpaces(widget.label)}{' '}
               {!isLoading &&
                 `(${currentUnit}${unit.endsWith('ps') ? '/s' : ''})`}
@@ -310,14 +305,14 @@ export const CloudPulseWidget = (props: CloudPulseWidgetProperties) => {
             <Stack
               alignItems={'center'}
               direction={{ sm: 'row' }}
-              gap={1}
+              gap={{ md: 2, xs: 1 }}
               width={{ sm: 'inherit', xs: '100%' }}
             >
               {availableMetrics?.scrape_interval && (
                 <CloudPulseIntervalSelect
-                  default_interval={widget?.time_granularity}
+                  defaultInterval={widget?.time_granularity}
                   onIntervalChange={handleIntervalChange}
-                  scrape_interval={availableMetrics.scrape_interval}
+                  scrapeInterval={availableMetrics.scrape_interval}
                 />
               )}
               {Boolean(
@@ -339,7 +334,6 @@ export const CloudPulseWidget = (props: CloudPulseWidgetProperties) => {
               </Box>
             </Stack>
           </Stack>
-          <Divider />
 
           <CloudPulseLineGraph
             error={
diff --git a/packages/manager/src/features/CloudPulse/Widget/components/CloudPulseAggregateFunction.tsx b/packages/manager/src/features/CloudPulse/Widget/components/CloudPulseAggregateFunction.tsx
index 0c4836abfac..3f881d67b32 100644
--- a/packages/manager/src/features/CloudPulse/Widget/components/CloudPulseAggregateFunction.tsx
+++ b/packages/manager/src/features/CloudPulse/Widget/components/CloudPulseAggregateFunction.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Autocomplete } from 'src/components/Autocomplete/Autocomplete';
+import { StyledWidgetAutocomplete } from '../../Utils/CloudPulseWidgetUtils';
 
 export interface AggregateFunctionProperties {
   /**
@@ -37,7 +37,7 @@ export const CloudPulseAggregateFunction = React.memo(
       ) || props.availableAggregateFunctions[0];
 
     return (
-      <Autocomplete
+      <StyledWidgetAutocomplete
         isOptionEqualToValue={(option, value) => {
           return option.label == value.label;
         }}
diff --git a/packages/manager/src/features/CloudPulse/Widget/components/CloudPulseIntervalSelect.test.tsx b/packages/manager/src/features/CloudPulse/Widget/components/CloudPulseIntervalSelect.test.tsx
index 96023a33da8..f2ae44b21ac 100644
--- a/packages/manager/src/features/CloudPulse/Widget/components/CloudPulseIntervalSelect.test.tsx
+++ b/packages/manager/src/features/CloudPulse/Widget/components/CloudPulseIntervalSelect.test.tsx
@@ -7,7 +7,7 @@ import { CloudPulseIntervalSelect } from './CloudPulseIntervalSelect';
 import type { TimeGranularity } from '@linode/api-v4';
 
 describe('Interval select component', () => {
-  const intervalSelectionChange = (_selectedInterval: TimeGranularity) => {};
+  const intervalSelectionChange = (_selectedInterval: TimeGranularity) => { };
 
   it('should check for the selected value in interval select dropdown', () => {
     const scrape_interval = '30s';
@@ -15,9 +15,9 @@ describe('Interval select component', () => {
 
     const { getByRole } = renderWithTheme(
       <CloudPulseIntervalSelect
-        default_interval={default_interval}
+        defaultInterval={default_interval}
         onIntervalChange={intervalSelectionChange}
-        scrape_interval={scrape_interval}
+        scrapeInterval={scrape_interval}
       />
     );
 
diff --git a/packages/manager/src/features/CloudPulse/Widget/components/CloudPulseIntervalSelect.tsx b/packages/manager/src/features/CloudPulse/Widget/components/CloudPulseIntervalSelect.tsx
index fe0bfed6a9d..7370937f1e3 100644
--- a/packages/manager/src/features/CloudPulse/Widget/components/CloudPulseIntervalSelect.tsx
+++ b/packages/manager/src/features/CloudPulse/Widget/components/CloudPulseIntervalSelect.tsx
@@ -1,14 +1,20 @@
 import React from 'react';
 
-import { Autocomplete } from 'src/components/Autocomplete/Autocomplete';
+import { StyledWidgetAutocomplete } from '../../Utils/CloudPulseWidgetUtils';
 
 import type { TimeGranularity } from '@linode/api-v4';
 
+interface IntervalOptions {
+  label: string;
+  unit: string;
+  value: number;
+}
+
 export interface IntervalSelectProperties {
   /**
    * Default time granularity to be selected
    */
-  default_interval?: TimeGranularity | undefined;
+  defaultInterval?: TimeGranularity | undefined;
 
   /**
    * Function to be triggered on aggregate function changed from dropdown
@@ -18,7 +24,7 @@ export interface IntervalSelectProperties {
   /**
    * scrape intervalto filter out minimum time granularity
    */
-  scrape_interval: string;
+  scrapeInterval: string;
 }
 
 export const getInSeconds = (interval: string) => {
@@ -39,7 +45,7 @@ export const getInSeconds = (interval: string) => {
 };
 
 // Intervals must be in ascending order here
-export const all_interval_options = [
+export const allIntervalOptions: IntervalOptions[] = [
   {
     label: '1 min',
     unit: 'min',
@@ -62,14 +68,14 @@ export const all_interval_options = [
   },
 ];
 
-const autoIntervalOption = {
+const autoIntervalOption: IntervalOptions = {
   label: 'Auto',
   unit: 'Auto',
   value: -1,
 };
 
 export const getIntervalIndex = (scrapeIntervalValue: number) => {
-  return all_interval_options.findIndex(
+  return allIntervalOptions.findIndex(
     (interval) =>
       scrapeIntervalValue <=
       getInSeconds(String(interval.value) + interval.unit.slice(0, 1))
@@ -78,26 +84,26 @@ export const getIntervalIndex = (scrapeIntervalValue: number) => {
 
 export const CloudPulseIntervalSelect = React.memo(
   (props: IntervalSelectProperties) => {
-    const scrapeIntervalValue = getInSeconds(props.scrape_interval);
+    const scrapeIntervalValue = getInSeconds(props.scrapeInterval);
 
     const firstIntervalIndex = getIntervalIndex(scrapeIntervalValue);
 
     // all intervals displayed if srape interval > highest available interval. Error handling done by api
-    const available_interval_options =
+    const availableIntervalOptions =
       firstIntervalIndex < 0
-        ? all_interval_options.slice()
-        : all_interval_options.slice(
+        ? allIntervalOptions.slice()
+        : allIntervalOptions.slice(
             firstIntervalIndex,
-            all_interval_options.length
+            allIntervalOptions.length
           );
 
     let default_interval =
-      props.default_interval?.unit === 'Auto'
+      props.defaultInterval?.unit === 'Auto'
         ? autoIntervalOption
-        : available_interval_options.find(
+        : availableIntervalOptions.find(
             (obj) =>
-              obj.value === props.default_interval?.value &&
-              obj.unit === props.default_interval?.unit
+              obj.value === props.defaultInterval?.value &&
+              obj.unit === props.defaultInterval?.unit
           );
 
     if (!default_interval) {
@@ -109,11 +115,17 @@ export const CloudPulseIntervalSelect = React.memo(
     }
 
     return (
-      <Autocomplete
-        isOptionEqualToValue={(option, value) => {
+      <StyledWidgetAutocomplete
+        isOptionEqualToValue={(
+          option: IntervalOptions,
+          value: IntervalOptions
+        ) => {
           return option?.value === value?.value && option?.unit === value?.unit;
         }}
-        onChange={(_: any, selectedInterval: any) => {
+        onChange={(
+          _: React.SyntheticEvent,
+          selectedInterval: IntervalOptions
+        ) => {
           props.onIntervalChange({
             unit: selectedInterval?.unit,
             value: selectedInterval?.value,
@@ -127,7 +139,7 @@ export const CloudPulseIntervalSelect = React.memo(
         fullWidth={false}
         label="Select an Interval"
         noMarginTop={true}
-        options={[autoIntervalOption, ...available_interval_options]}
+        options={[autoIntervalOption, ...availableIntervalOptions]}
         sx={{ width: { xs: '100%' } }}
       />
     );
diff --git a/packages/manager/src/features/CloudPulse/Widget/components/Zoomer.tsx b/packages/manager/src/features/CloudPulse/Widget/components/Zoomer.tsx
index 6ed093ed513..7b439274d2f 100644
--- a/packages/manager/src/features/CloudPulse/Widget/components/Zoomer.tsx
+++ b/packages/manager/src/features/CloudPulse/Widget/components/Zoomer.tsx
@@ -1,5 +1,6 @@
 import ZoomInMap from '@mui/icons-material/ZoomInMap';
 import ZoomOutMap from '@mui/icons-material/ZoomOutMap';
+import { useTheme } from '@mui/material/styles';
 import * as React from 'react';
 
 export interface ZoomIconProperties {
@@ -9,6 +10,8 @@ export interface ZoomIconProperties {
 }
 
 export const ZoomIcon = React.memo((props: ZoomIconProperties) => {
+  const theme = useTheme();
+
   const handleClick = (needZoomIn: boolean) => {
     props.handleZoomToggle(needZoomIn);
   };
@@ -17,18 +20,26 @@ export const ZoomIcon = React.memo((props: ZoomIconProperties) => {
     if (props.zoomIn) {
       return (
         <ZoomInMap
+          sx={{
+            color: theme.color.grey1,
+            fontSize: 'x-large',
+            height: '34px',
+          }}
           data-testid="zoom-in"
           onClick={() => handleClick(false)}
-          style={{ color: 'grey', fontSize: 'x-large' }}
         />
       );
     }
 
     return (
       <ZoomOutMap
+        sx={{
+          color: theme.color.grey1,
+          fontSize: 'x-large',
+          height: '34px',
+        }}
         data-testid="zoom-out"
         onClick={() => handleClick(true)}
-        style={{ color: 'grey', fontSize: 'x-large' }}
       />
     );
   };
diff --git a/packages/manager/src/features/CloudPulse/shared/CloudPulseCustomSelect.test.tsx b/packages/manager/src/features/CloudPulse/shared/CloudPulseCustomSelect.test.tsx
index d4a401825ca..78ae7c77efe 100644
--- a/packages/manager/src/features/CloudPulse/shared/CloudPulseCustomSelect.test.tsx
+++ b/packages/manager/src/features/CloudPulse/shared/CloudPulseCustomSelect.test.tsx
@@ -61,8 +61,7 @@ describe('CloudPulseCustomSelect component tests', () => {
         type={CloudPulseSelectTypes.static}
       />
     );
-
-    expect(screen.getByPlaceholderText(testFilter)).toBeDefined();
+    expect(screen.queryByPlaceholderText(testFilter)).toBeNull();
     const keyDown = screen.getByTestId(keyboardArrowDownIcon);
     fireEvent.click(keyDown);
     fireEvent.click(screen.getByText('Test1'));
@@ -82,8 +81,7 @@ describe('CloudPulseCustomSelect component tests', () => {
         type={CloudPulseSelectTypes.static}
       />
     );
-
-    expect(screen.getByPlaceholderText(testFilter)).toBeDefined();
+    expect(screen.queryByPlaceholderText(testFilter)).toBeNull();
     const keyDown = screen.getByTestId(keyboardArrowDownIcon);
     fireEvent.click(keyDown);
     expect(screen.getAllByText('Test1').length).toEqual(2); // here it should be 2
@@ -111,13 +109,17 @@ describe('CloudPulseCustomSelect component tests', () => {
         type={CloudPulseSelectTypes.dynamic}
       />
     );
-    expect(screen.getByPlaceholderText(testFilter)).toBeDefined();
+    expect(screen.queryByPlaceholderText(testFilter)).toBeNull();
     const keyDown = screen.getByTestId(keyboardArrowDownIcon);
     fireEvent.click(keyDown);
     fireEvent.click(screen.getByText('Test1'));
     const textField = screen.getByTestId('textfield-input');
     expect(textField.getAttribute('value')).toEqual('Test1');
     expect(selectionChnage).toHaveBeenCalledTimes(1);
+
+    // if we click on clear icon , placeholder should appear for single select
+    fireEvent.click(screen.getByTitle('Clear'));
+    expect(screen.getByPlaceholderText(testFilter)).toBeDefined();
   });
 
   it('should render a component successfully with required props dynamic multi select', () => {
@@ -133,7 +135,7 @@ describe('CloudPulseCustomSelect component tests', () => {
         type={CloudPulseSelectTypes.dynamic}
       />
     );
-    expect(screen.getByPlaceholderText(testFilter)).toBeDefined();
+    expect(screen.queryByPlaceholderText(testFilter)).toBeNull();
     const keyDown = screen.getByTestId(keyboardArrowDownIcon);
     fireEvent.click(keyDown);
     expect(screen.getAllByText('Test1').length).toEqual(2); // here it should be 2
@@ -148,5 +150,9 @@ describe('CloudPulseCustomSelect component tests', () => {
     expect(screen.getAllByText('Test1').length).toEqual(1);
     expect(screen.getAllByText('Test2').length).toEqual(1);
     expect(selectionChnage).toHaveBeenCalledTimes(2); // check if selection change is called twice as we selected two options
+
+    // if we click on clear icon , placeholder should appear
+    fireEvent.click(screen.getByTitle('Clear'));
+    expect(screen.getByPlaceholderText(testFilter)).toBeDefined();
   });
 });
diff --git a/packages/manager/src/features/CloudPulse/shared/CloudPulseCustomSelect.tsx b/packages/manager/src/features/CloudPulse/shared/CloudPulseCustomSelect.tsx
index 098d3a301e7..6209063e228 100644
--- a/packages/manager/src/features/CloudPulse/shared/CloudPulseCustomSelect.tsx
+++ b/packages/manager/src/features/CloudPulse/shared/CloudPulseCustomSelect.tsx
@@ -175,7 +175,6 @@ export const CloudPulseCustomSelect = React.memo(
     };
 
     let staticErrorText = '';
-
     // check for input prop errors
     if (
       (CloudPulseSelectTypes.static === type &&
@@ -205,6 +204,12 @@ export const CloudPulseCustomSelect = React.memo(
             ? options ?? []
             : queriedResources ?? []
         }
+        placeholder={
+          selectedResource &&
+          (!Array.isArray(selectedResource) || selectedResource.length)
+            ? ''
+            : placeholder || 'Select a Value'
+        }
         textFieldProps={{
           hideLabel: true,
         }}
@@ -214,7 +219,6 @@ export const CloudPulseCustomSelect = React.memo(
         label="Select a Value"
         multiple={isMultiSelect}
         onChange={handleChange}
-        placeholder={placeholder ?? 'Select a Value'}
         value={selectedResource ?? (isMultiSelect ? [] : null)}
       />
     );
diff --git a/packages/manager/src/features/CloudPulse/shared/CloudPulseResourcesSelect.tsx b/packages/manager/src/features/CloudPulse/shared/CloudPulseResourcesSelect.tsx
index fa0595d6c81..c7ec0850ac6 100644
--- a/packages/manager/src/features/CloudPulse/shared/CloudPulseResourcesSelect.tsx
+++ b/packages/manager/src/features/CloudPulse/shared/CloudPulseResourcesSelect.tsx
@@ -90,6 +90,9 @@ export const CloudPulseResourcesSelect = React.memo(
           setSelectedResources(resourceSelections);
           handleResourcesSelection(resourceSelections);
         }}
+        placeholder={
+          selectedResources?.length ? '' : placeholder || 'Select Resources'
+        }
         textFieldProps={{
           InputProps: {
             sx: {
@@ -111,7 +114,6 @@ export const CloudPulseResourcesSelect = React.memo(
         limitTags={2}
         multiple
         options={getResourcesList()}
-        placeholder={placeholder ? placeholder : 'Select Resources'}
         value={selectedResources}
       />
     );

From 63ae19a74915cb83b5b8359c55bf72a3253c8758 Mon Sep 17 00:00:00 2001
From: Banks Nussman <115251059+bnussman-akamai@users.noreply.github.com>
Date: Tue, 17 Sep 2024 11:49:52 -0400
Subject: [PATCH 16/62] fix: [M3-8589] - Flickering on the user profile page
 when updating the currently signed in user's username (#10947)

* update the profile cache manually rather than doing an invalidation

* Added changeset: Flickering on the user profile page when updating the currently signed in user's username

---------

Co-authored-by: Banks Nussman <banks@nussman.us>
---
 .../.changeset/pr-10947-fixed-1726507951785.md |  5 +++++
 packages/manager/src/queries/account/users.ts  | 18 ++++++++++++++----
 2 files changed, 19 insertions(+), 4 deletions(-)
 create mode 100644 packages/manager/.changeset/pr-10947-fixed-1726507951785.md

diff --git a/packages/manager/.changeset/pr-10947-fixed-1726507951785.md b/packages/manager/.changeset/pr-10947-fixed-1726507951785.md
new file mode 100644
index 00000000000..8f9cc90912a
--- /dev/null
+++ b/packages/manager/.changeset/pr-10947-fixed-1726507951785.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Fixed
+---
+
+Flickering on the user profile page when updating the currently signed in user's username ([#10947](https://github.com/linode/manager/pull/10947))
diff --git a/packages/manager/src/queries/account/users.ts b/packages/manager/src/queries/account/users.ts
index ac819e4bde3..ae720f52cb7 100644
--- a/packages/manager/src/queries/account/users.ts
+++ b/packages/manager/src/queries/account/users.ts
@@ -15,6 +15,7 @@ import type {
   Filter,
   Grants,
   Params,
+  Profile,
   ResourcePage,
   User,
 } from '@linode/api-v4';
@@ -65,11 +66,20 @@ export const useUpdateUserMutation = (username: string) => {
         accountQueries.users._ctx.user(user.username).queryKey,
         user
       );
-      // If the currently logged in user updates their user
+
+      // If the currently logged in user updates their user, we need to update the profile
+      // query to reflect the latest data.
       if (username === profile?.username) {
-        queryClient.invalidateQueries({
-          queryKey: profileQueries.profile().queryKey,
-        });
+        queryClient.setQueryData<Profile>(
+          profileQueries.profile().queryKey,
+          (oldProfile) => {
+            if (!oldProfile) {
+              return;
+            }
+
+            return { ...oldProfile, ...user };
+          }
+        );
       }
     },
   });

From 83654e1b7ffc320ffa54b621cb7e05d51b220b1e Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Tue, 17 Sep 2024 12:04:55 -0400
Subject: [PATCH 17/62] chore(deps): bump dompurify from 3.1.0 to 3.1.3
 (#10949)

Bumps [dompurify](https://github.com/cure53/DOMPurify) from 3.1.0 to 3.1.3.
- [Release notes](https://github.com/cure53/DOMPurify/releases)
- [Commits](https://github.com/cure53/DOMPurify/compare/3.1.0...3.1.3)

---
updated-dependencies:
- dependency-name: dompurify
  dependency-type: direct:production
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 packages/manager/package.json |  2 +-
 yarn.lock                     | 60 ++++++++++++++++++++++-------------
 2 files changed, 39 insertions(+), 23 deletions(-)

diff --git a/packages/manager/package.json b/packages/manager/package.json
index 143749c053c..cafb84d1524 100644
--- a/packages/manager/package.json
+++ b/packages/manager/package.json
@@ -35,7 +35,7 @@
     "chart.js": "~2.9.4",
     "copy-to-clipboard": "^3.0.8",
     "country-region-data": "^3.0.0",
-    "dompurify": "^3.1.0",
+    "dompurify": "^3.1.3",
     "flag-icons": "^6.6.5",
     "font-logos": "^0.18.0",
     "formik": "~2.1.3",
diff --git a/yarn.lock b/yarn.lock
index 6cdf3057e09..a0b7c36fa09 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -191,12 +191,12 @@
     "@jridgewell/trace-mapping" "^0.3.17"
     jsesc "^2.5.1"
 
-"@babel/generator@^7.25.0":
-  version "7.25.0"
-  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.25.0.tgz#f858ddfa984350bc3d3b7f125073c9af6988f18e"
-  integrity sha512-3LEEcj3PVW8pW2R1SR1M89g/qrYk/m/mB/tLqn7dn4sbBUQyTqnlod+II2U4dqiGtUmkcnAmkMDralTFZttRiw==
+"@babel/generator@^7.25.6":
+  version "7.25.6"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.25.6.tgz#0df1ad8cb32fe4d2b01d8bf437f153d19342a87c"
+  integrity sha512-VPC82gr1seXOpkjAAKoLhP50vx4vGNlF4msF64dSFq1P8RfB+QAuJWGHPXXPc8QyfVWwwB/TNNU4+ayZmHNbZw==
   dependencies:
-    "@babel/types" "^7.25.0"
+    "@babel/types" "^7.25.6"
     "@jridgewell/gen-mapping" "^0.3.5"
     "@jridgewell/trace-mapping" "^0.3.25"
     jsesc "^2.5.1"
@@ -307,7 +307,7 @@
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.23.9.tgz#7b903b6149b0f8fa7ad564af646c4c38a77fc44b"
   integrity sha512-9tcKgqKbs3xGJ+NtKF2ndOBBLVwPjl1SHxPQkd36r3Dlirw3xWUeGaTbqr7uGZcTaxkVNwc+03SVP7aCdWrTlA==
 
-"@babel/parser@^7.25.0", "@babel/parser@^7.25.3":
+"@babel/parser@^7.25.0":
   version "7.25.3"
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.25.3.tgz#91fb126768d944966263f0657ab222a642b82065"
   integrity sha512-iLTJKDbJ4hMvFPgQwwsVoxtHyWpKKPBrxkANrSYewDPaPpT5py5yeVkgPIJ7XYXhndxJpaA3PyALSXQ7u8e/Dw==
@@ -321,6 +321,13 @@
   dependencies:
     "@babel/types" "^7.25.4"
 
+"@babel/parser@^7.25.6":
+  version "7.25.6"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.25.6.tgz#85660c5ef388cbbf6e3d2a694ee97a38f18afe2f"
+  integrity sha512-trGdfBdbD0l1ZPmcJ83eNxB9rbEax4ALFTF7fN386TMYbeCQbyme5cOEXQhbGXKebwGaB/J52w1mrklMcbgy6Q==
+  dependencies:
+    "@babel/types" "^7.25.6"
+
 "@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.10", "@babel/runtime@^7.14.0", "@babel/runtime@^7.14.6", "@babel/runtime@^7.15.4", "@babel/runtime@^7.17.8", "@babel/runtime@^7.18.3", "@babel/runtime@^7.23.2", "@babel/runtime@^7.23.9", "@babel/runtime@^7.4.4", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
   version "7.23.9"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.9.tgz#47791a15e4603bb5f905bc0753801cf21d6345f7"
@@ -347,15 +354,15 @@
     "@babel/types" "^7.25.0"
 
 "@babel/traverse@^7.18.9", "@babel/traverse@^7.23.3", "@babel/traverse@^7.23.9", "@babel/traverse@^7.7.0":
-  version "7.25.3"
-  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.25.3.tgz#f1b901951c83eda2f3e29450ce92743783373490"
-  integrity sha512-HefgyP1x754oGCsKmV5reSmtV7IXj/kpaE1XYY+D9G5PvKKoFfSbiS4M77MdjuwlZKDIKFCffq9rPU+H/s3ZdQ==
+  version "7.25.6"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.25.6.tgz#04fad980e444f182ecf1520504941940a90fea41"
+  integrity sha512-9Vrcx5ZW6UwK5tvqsj0nGpp/XzqthkT0dqIc9g1AdtygFToNtTF67XzYS//dm+SAK9cp3B9R4ZO/46p63SCjlQ==
   dependencies:
     "@babel/code-frame" "^7.24.7"
-    "@babel/generator" "^7.25.0"
-    "@babel/parser" "^7.25.3"
+    "@babel/generator" "^7.25.6"
+    "@babel/parser" "^7.25.6"
     "@babel/template" "^7.25.0"
-    "@babel/types" "^7.25.2"
+    "@babel/types" "^7.25.6"
     debug "^4.3.1"
     globals "^11.1.0"
 
@@ -386,6 +393,15 @@
     "@babel/helper-validator-identifier" "^7.24.7"
     to-fast-properties "^2.0.0"
 
+"@babel/types@^7.25.6":
+  version "7.25.6"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.25.6.tgz#893942ddb858f32ae7a004ec9d3a76b3463ef8e6"
+  integrity sha512-/l42B1qxpG6RdfYf343Uw1vmDjeNhneUXtzhojE7pDgfpEypmRhI6j1kr17XCVv4Cgl9HdAiQY2x0GwKm7rWCw==
+  dependencies:
+    "@babel/helper-string-parser" "^7.24.8"
+    "@babel/helper-validator-identifier" "^7.24.7"
+    to-fast-properties "^2.0.0"
+
 "@base2/pretty-print-object@1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@base2/pretty-print-object/-/pretty-print-object-1.0.1.tgz#371ba8be66d556812dc7fb169ebc3c08378f69d4"
@@ -5160,10 +5176,10 @@ dompurify@^2.2.0:
   resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-2.4.7.tgz#277adeb40a2c84be2d42a8bcd45f582bfa4d0cfc"
   integrity sha512-kxxKlPEDa6Nc5WJi+qRgPbOAbgTpSULL+vI3NUXsZMlkJxTqYI9wg5ZTay2sFrdZRWHPWNi+EdAhcJf81WtoMQ==
 
-dompurify@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-3.1.0.tgz#8c6b9fe986969a33aa4686bd829cbe8e14dd9445"
-  integrity sha512-yoU4rhgPKCo+p5UrWWWNKiIq+ToGqmVVhk0PmMYBK4kRsR3/qhemNFL8f6CFmBd4gMwm3F4T7HBoydP5uY07fA==
+dompurify@^3.1.3:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-3.1.3.tgz#cfe3ce4232c216d923832f68f2aa18b2fb9bd223"
+  integrity sha512-5sOWYSNPaxz6o2MUPvtyxTTqR4D3L77pr5rUQoWgD5ROQtVIZQgJkXbo1DLlK3vj11YGw5+LnF4SYti4gZmwng==
 
 dot-case@^3.0.4:
   version "3.0.4"
@@ -11498,9 +11514,9 @@ typescript@^5.5.4:
   integrity sha512-Mtq29sKDAEYP7aljRgtPOpTvOfbwRWlS6dPRzwjdE+C0R4brX/GUyhHSecbHMFLNBLcJIPt9nl9yG5TZ1weH+Q==
 
 ua-parser-js@^0.7.30, ua-parser-js@^0.7.33:
-  version "0.7.38"
-  resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.38.tgz#f497d8a4dc1fec6e854e5caa4b2f9913422ef054"
-  integrity sha512-fYmIy7fKTSFAhG3fuPlubeGaMoAd6r0rSnfEsO5nEY55i26KSLt9EH7PLQiiqPUhNqYIJvSkTy1oArIcXAbPbA==
+  version "0.7.39"
+  resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.39.tgz#c71efb46ebeabc461c4612d22d54f88880fabe7e"
+  integrity sha512-IZ6acm6RhQHNibSt7+c09hhvsKy9WUr4DVbeq9U8o71qxyYtJpQeDxQnMrVqnIFMLcQjHO0I9wgfO2vIahht4w==
 
 uc.micro@^1.0.1, uc.micro@^1.0.5:
   version "1.0.6"
@@ -12111,9 +12127,9 @@ yallist@^3.0.2:
   integrity sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==
 
 yaml@^1.10.0, yaml@^1.7.2, yaml@^2.2.2, yaml@^2.3.0, yaml@~2.5.0:
-  version "2.5.0"
-  resolved "https://registry.yarnpkg.com/yaml/-/yaml-2.5.0.tgz#c6165a721cf8000e91c36490a41d7be25176cf5d"
-  integrity sha512-2wWLbGbYDiSqqIKoPjar3MPgB94ErzCtrNE1FdqGuaO0pi2JGjmE8aW8TDZwzU7vuxcGRdL/4gPQwQ7hD5AMSw==
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/yaml/-/yaml-2.5.1.tgz#c9772aacf62cb7494a95b0c4f1fb065b563db130"
+  integrity sha512-bLQOjaX/ADgQ20isPJRvF0iRUHIxVhYvr53Of7wGcWlO2jvtUlH5m87DsmulFVxRpNLOnI4tB6p/oh8D7kpn9Q==
 
 yargs-parser@^11.1.1, yargs-parser@^21.1.1:
   version "21.1.1"

From 451d63a0f1d0c2e5189993369a2d2418343940e8 Mon Sep 17 00:00:00 2001
From: Mariah Jacobs <114685994+mjac0bs@users.noreply.github.com>
Date: Tue, 17 Sep 2024 09:18:23 -0700
Subject: [PATCH 18/62] feat: [M3-8570] - Finish sunsetting Gravatar (#10930)

* Clean up, clean up

* Remove missed clean up on Profile Details page

* Add changeset

* Use 'Akamai' instead of 'Linode' username for sys events

* Update unit tests
---
 .../pr-10930-removed-1726159393499.md         |  5 ++
 .../AccessPanel/UserSSHKeyPanel.tsx           | 43 ++-------
 .../src/components/Avatar/Avatar.test.tsx     |  2 +-
 .../manager/src/components/Avatar/Avatar.tsx  |  2 +-
 .../src/components/GravatarByEmail.tsx        | 36 --------
 .../src/components/GravatarByUsername.tsx     | 36 --------
 .../src/components/GravatarOrAvatar.tsx       | 33 -------
 .../src/features/Events/EventRow.styles.ts    | 14 ---
 .../manager/src/features/Events/EventRow.tsx  | 25 ++----
 .../src/features/Events/utils.test.tsx        |  6 +-
 .../manager/src/features/Events/utils.tsx     |  2 +-
 .../GlobalNotifications.tsx                   |  2 -
 .../GravatarSunsetBanner.tsx                  | 27 ------
 .../Events/NotificationCenterEvent.tsx        | 22 ++---
 .../NotificationCenter.styles.ts              | 12 ---
 .../DisplaySettings/DisplaySettings.tsx       | 88 +++----------------
 .../Support/ExpandableTicketPanel.tsx         | 38 +++-----
 .../features/TopMenu/UserMenu/UserMenu.tsx    | 13 +--
 .../manager/src/features/Users/UserRow.tsx    | 19 ++--
 packages/manager/src/hooks/useGravatar.ts     | 45 ----------
 packages/manager/src/utilities/gravatar.ts    | 29 ------
 21 files changed, 62 insertions(+), 437 deletions(-)
 create mode 100644 packages/manager/.changeset/pr-10930-removed-1726159393499.md
 delete mode 100644 packages/manager/src/components/GravatarByEmail.tsx
 delete mode 100644 packages/manager/src/components/GravatarByUsername.tsx
 delete mode 100644 packages/manager/src/components/GravatarOrAvatar.tsx
 delete mode 100644 packages/manager/src/features/Events/EventRow.styles.ts
 delete mode 100644 packages/manager/src/features/GlobalNotifications/GravatarSunsetBanner.tsx
 delete mode 100644 packages/manager/src/hooks/useGravatar.ts
 delete mode 100644 packages/manager/src/utilities/gravatar.ts

diff --git a/packages/manager/.changeset/pr-10930-removed-1726159393499.md b/packages/manager/.changeset/pr-10930-removed-1726159393499.md
new file mode 100644
index 00000000000..d6e275ef800
--- /dev/null
+++ b/packages/manager/.changeset/pr-10930-removed-1726159393499.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Removed
+---
+
+Support for Gravatar as user profile avatars ([#10930](https://github.com/linode/manager/pull/10930))
diff --git a/packages/manager/src/components/AccessPanel/UserSSHKeyPanel.tsx b/packages/manager/src/components/AccessPanel/UserSSHKeyPanel.tsx
index fa9ed19f713..e9d6e75da35 100644
--- a/packages/manager/src/components/AccessPanel/UserSSHKeyPanel.tsx
+++ b/packages/manager/src/components/AccessPanel/UserSSHKeyPanel.tsx
@@ -19,8 +19,6 @@ import { useProfile, useSSHKeysQuery } from 'src/queries/profile/profile';
 import { truncateAndJoinList } from 'src/utilities/stringUtils';
 
 import { Avatar } from '../Avatar/Avatar';
-import { GravatarByEmail } from '../GravatarByEmail';
-import { GravatarOrAvatar } from '../GravatarOrAvatar';
 import { PaginationFooter } from '../PaginationFooter/PaginationFooter';
 import { TableRowLoading } from '../TableRowLoading/TableRowLoading';
 
@@ -37,12 +35,6 @@ const useStyles = makeStyles()((theme: Theme) => ({
   cellUser: {
     width: '30%',
   },
-  gravatar: {
-    borderRadius: '50%',
-    height: 24,
-    marginRight: theme.spacing(1),
-    width: 24,
-  },
   title: {
     marginBottom: theme.spacing(2),
   },
@@ -150,15 +142,7 @@ const UserSSHKeyPanel = (props: Props) => {
           </TableCell>
           <TableCell className={classes.cellUser}>
             <div className={classes.userWrapper}>
-              <GravatarOrAvatar
-                gravatar={
-                  <GravatarByEmail
-                    className={classes.gravatar}
-                    email={profile.email}
-                  />
-                }
-                avatar={<Avatar sx={{ borderRadius: '50%', marginRight: 1 }} />}
-              />
+              <Avatar sx={{ borderRadius: '50%', marginRight: 1 }} />
               {profile.username}
             </div>
           </TableCell>
@@ -187,25 +171,16 @@ const UserSSHKeyPanel = (props: Props) => {
         </TableCell>
         <TableCell className={classes.cellUser}>
           <div className={classes.userWrapper}>
-            <GravatarOrAvatar
-              avatar={
-                <Avatar
-                  color={
-                    user.username !== profile?.username
-                      ? theme.palette.primary.dark
-                      : undefined
-                  }
-                  sx={{ borderRadius: '50%', marginRight: 1 }}
-                  username={user.username}
-                />
-              }
-              gravatar={
-                <GravatarByEmail
-                  className={classes.gravatar}
-                  email={user.email}
-                />
+            <Avatar
+              color={
+                user.username !== profile?.username
+                  ? theme.palette.primary.dark
+                  : undefined
               }
+              sx={{ borderRadius: '50%', marginRight: 1 }}
+              username={user.username}
             />
+
             {user.username}
           </div>
         </TableCell>
diff --git a/packages/manager/src/components/Avatar/Avatar.test.tsx b/packages/manager/src/components/Avatar/Avatar.test.tsx
index e1c553d2c15..65e4ab1baa0 100644
--- a/packages/manager/src/components/Avatar/Avatar.test.tsx
+++ b/packages/manager/src/components/Avatar/Avatar.test.tsx
@@ -61,7 +61,7 @@ describe('Avatar', () => {
   });
 
   it('should render an svg instead of first letter for system users', async () => {
-    const systemUsernames = ['Linode', 'lke-service-account-123'];
+    const systemUsernames = ['Akamai', 'lke-service-account-123'];
 
     systemUsernames.forEach((username, i) => {
       const { getAllByRole, queryByTestId } = renderWithTheme(
diff --git a/packages/manager/src/components/Avatar/Avatar.tsx b/packages/manager/src/components/Avatar/Avatar.tsx
index 968ec8b5834..e50bf8bf4fa 100644
--- a/packages/manager/src/components/Avatar/Avatar.tsx
+++ b/packages/manager/src/components/Avatar/Avatar.tsx
@@ -55,7 +55,7 @@ export const Avatar = (props: AvatarProps) => {
 
   const _username = username ?? profile?.username ?? '';
   const isAkamai =
-    _username === 'Linode' || _username.startsWith('lke-service-account');
+    _username === 'Akamai' || _username.startsWith('lke-service-account');
 
   const savedAvatarColor =
     isAkamai || !preferences?.avatarColor
diff --git a/packages/manager/src/components/GravatarByEmail.tsx b/packages/manager/src/components/GravatarByEmail.tsx
deleted file mode 100644
index 4ff64876d93..00000000000
--- a/packages/manager/src/components/GravatarByEmail.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import Avatar from '@mui/material/Avatar';
-import * as React from 'react';
-
-import UserIcon from 'src/assets/icons/account.svg';
-import { getGravatarUrl } from 'src/utilities/gravatar';
-
-export const DEFAULT_AVATAR_SIZE = 28;
-
-export interface GravatarByEmailProps {
-  className?: string;
-  email: string;
-  height?: number;
-  width?: number;
-}
-
-export const GravatarByEmail = (props: GravatarByEmailProps) => {
-  const {
-    className,
-    email,
-    height = DEFAULT_AVATAR_SIZE,
-    width = DEFAULT_AVATAR_SIZE,
-  } = props;
-
-  const url = getGravatarUrl(email);
-
-  return (
-    <Avatar
-      alt={`Avatar for user ${email}`}
-      className={className}
-      src={url}
-      sx={{ height, width }}
-    >
-      <UserIcon />
-    </Avatar>
-  );
-};
diff --git a/packages/manager/src/components/GravatarByUsername.tsx b/packages/manager/src/components/GravatarByUsername.tsx
deleted file mode 100644
index 3adb2262aa3..00000000000
--- a/packages/manager/src/components/GravatarByUsername.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import Avatar from '@mui/material/Avatar';
-import * as React from 'react';
-
-import UserIcon from 'src/assets/icons/account.svg';
-import { useAccountUser } from 'src/queries/account/users';
-import { getGravatarUrl } from 'src/utilities/gravatar';
-
-import { Box } from './Box';
-import { DEFAULT_AVATAR_SIZE } from './GravatarByEmail';
-
-export interface GravatarByUsernameProps {
-  className?: string;
-  username: null | string;
-}
-
-export const GravatarByUsername = (props: GravatarByUsernameProps) => {
-  const { className, username } = props;
-  const { data: user, isLoading } = useAccountUser(username ?? '');
-  const url = user?.email ? getGravatarUrl(user.email) : undefined;
-
-  // Render placeholder instead of flashing default user icon briefly
-  if (isLoading) {
-    return <Box height={DEFAULT_AVATAR_SIZE} width={DEFAULT_AVATAR_SIZE} />;
-  }
-
-  return (
-    <Avatar
-      alt={`Avatar for user ${username}`}
-      className={className}
-      src={url}
-      sx={{ height: DEFAULT_AVATAR_SIZE, width: DEFAULT_AVATAR_SIZE }}
-    >
-      <UserIcon className={className} />
-    </Avatar>
-  );
-};
diff --git a/packages/manager/src/components/GravatarOrAvatar.tsx b/packages/manager/src/components/GravatarOrAvatar.tsx
deleted file mode 100644
index 6a9ab209775..00000000000
--- a/packages/manager/src/components/GravatarOrAvatar.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import React from 'react';
-
-import { useGravatar } from 'src/hooks/useGravatar';
-import { useProfile } from 'src/queries/profile/profile';
-
-import { DEFAULT_AVATAR_SIZE } from './Avatar/Avatar';
-import { Box } from './Box';
-
-interface Props {
-  avatar: JSX.Element;
-  gravatar: JSX.Element;
-  height?: number;
-  width?: number;
-}
-
-export const GravatarOrAvatar = (props: Props) => {
-  const {
-    avatar,
-    gravatar,
-    height = DEFAULT_AVATAR_SIZE,
-    width = DEFAULT_AVATAR_SIZE,
-  } = props;
-  const { data: profile } = useProfile();
-  const { hasGravatar, isLoadingGravatar } = useGravatar(profile?.email);
-
-  return isLoadingGravatar ? (
-    <Box height={height} width={width} />
-  ) : hasGravatar ? (
-    gravatar
-  ) : (
-    avatar
-  );
-};
diff --git a/packages/manager/src/features/Events/EventRow.styles.ts b/packages/manager/src/features/Events/EventRow.styles.ts
deleted file mode 100644
index cf2743a97ed..00000000000
--- a/packages/manager/src/features/Events/EventRow.styles.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-// @TODO: delete file once Gravatar is sunset
-import { styled } from '@mui/material/styles';
-
-import { fadeIn } from 'src/styles/keyframes';
-
-import { GravatarByUsername } from '../../components/GravatarByUsername';
-
-export const StyledGravatar = styled(GravatarByUsername, {
-  label: 'StyledGravatar',
-})(({ theme }) => ({
-  animation: `${fadeIn} .2s ease-in-out forwards`,
-  height: theme.spacing(3),
-  width: theme.spacing(3),
-}));
diff --git a/packages/manager/src/features/Events/EventRow.tsx b/packages/manager/src/features/Events/EventRow.tsx
index 40acfd1a063..e28aead3b4c 100644
--- a/packages/manager/src/features/Events/EventRow.tsx
+++ b/packages/manager/src/features/Events/EventRow.tsx
@@ -5,14 +5,12 @@ import { Avatar } from 'src/components/Avatar/Avatar';
 import { BarPercent } from 'src/components/BarPercent';
 import { Box } from 'src/components/Box';
 import { DateTimeDisplay } from 'src/components/DateTimeDisplay';
-import { GravatarOrAvatar } from 'src/components/GravatarOrAvatar';
 import { Hidden } from 'src/components/Hidden';
 import { TableCell } from 'src/components/TableCell';
 import { TableRow } from 'src/components/TableRow';
 import { useProfile } from 'src/queries/profile/profile';
 import { getEventTimestamp } from 'src/utilities/eventUtils';
 
-import { StyledGravatar } from './EventRow.styles';
 import {
   formatProgressEvent,
   getEventMessage,
@@ -60,25 +58,14 @@ export const EventRow = (props: EventRowProps) => {
       <Hidden smDown>
         <TableCell data-qa-event-username-cell parentColumn="Username">
           <Box alignItems="center" display="flex" gap={1}>
-            <GravatarOrAvatar
-              avatar={
-                <Avatar
-                  color={
-                    username !== profile?.username
-                      ? theme.palette.primary.dark
-                      : undefined
-                  }
-                  height={24}
-                  username={username}
-                  width={24}
-                />
-              }
-              gravatar={
-                <StyledGravatar
-                  username={username === 'Linode' ? '' : username}
-                />
+            <Avatar
+              color={
+                username !== profile?.username
+                  ? theme.palette.primary.dark
+                  : undefined
               }
               height={24}
+              username={username}
               width={24}
             />
             {username}
diff --git a/packages/manager/src/features/Events/utils.test.tsx b/packages/manager/src/features/Events/utils.test.tsx
index 7cb5c5bddc8..792fb81e0be 100644
--- a/packages/manager/src/features/Events/utils.test.tsx
+++ b/packages/manager/src/features/Events/utils.test.tsx
@@ -116,7 +116,7 @@ describe('getEventUsername', () => {
       username: 'test-user',
     });
 
-    expect(getEventUsername(mockEvent)).toBe('Linode');
+    expect(getEventUsername(mockEvent)).toBe('Akamai');
   });
 
   it('returns "Linode" if the username does not exist', () => {
@@ -125,7 +125,7 @@ describe('getEventUsername', () => {
       username: null,
     });
 
-    expect(getEventUsername(mockEvent)).toBe('Linode');
+    expect(getEventUsername(mockEvent)).toBe('Akamai');
   });
 
   it('returns "Linode" if the username does not exist and action is in ACTIONS_WITHOUT_USERNAMES', () => {
@@ -140,7 +140,7 @@ describe('getEventUsername', () => {
       username: null,
     });
 
-    expect(getEventUsername(mockEvent)).toBe('Linode');
+    expect(getEventUsername(mockEvent)).toBe('Akamai');
   });
 });
 
diff --git a/packages/manager/src/features/Events/utils.tsx b/packages/manager/src/features/Events/utils.tsx
index d9546fe31db..74349332247 100644
--- a/packages/manager/src/features/Events/utils.tsx
+++ b/packages/manager/src/features/Events/utils.tsx
@@ -55,7 +55,7 @@ export const getEventUsername = (event: Event) => {
     return event.username;
   }
 
-  return 'Linode';
+  return 'Akamai';
 };
 
 /**
diff --git a/packages/manager/src/features/GlobalNotifications/GlobalNotifications.tsx b/packages/manager/src/features/GlobalNotifications/GlobalNotifications.tsx
index 8654d0858ad..2d600740b1b 100644
--- a/packages/manager/src/features/GlobalNotifications/GlobalNotifications.tsx
+++ b/packages/manager/src/features/GlobalNotifications/GlobalNotifications.tsx
@@ -15,7 +15,6 @@ import { APIMaintenanceBanner } from './APIMaintenanceBanner';
 import { ComplianceBanner } from './ComplianceBanner';
 import { ComplianceUpdateModal } from './ComplianceUpdateModal';
 import { EmailBounceNotificationSection } from './EmailBounce';
-import { GravatarSunsetBanner } from './GravatarSunsetBanner';
 import { RegionStatusBanner } from './RegionStatusBanner';
 import { TaxCollectionBanner } from './TaxCollectionBanner';
 import { DesignUpdateBanner } from './TokensUpdateBanner';
@@ -87,7 +86,6 @@ export const GlobalNotifications = () => {
       Object.keys(flags.taxCollectionBanner).length > 0 ? (
         <TaxCollectionBanner />
       ) : null}
-      <GravatarSunsetBanner email={profile?.email ?? ''} />
     </>
   );
 };
diff --git a/packages/manager/src/features/GlobalNotifications/GravatarSunsetBanner.tsx b/packages/manager/src/features/GlobalNotifications/GravatarSunsetBanner.tsx
deleted file mode 100644
index efbc1d2ef71..00000000000
--- a/packages/manager/src/features/GlobalNotifications/GravatarSunsetBanner.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import React from 'react';
-
-import { DismissibleBanner } from 'src/components/DismissibleBanner/DismissibleBanner';
-import { Typography } from 'src/components/Typography';
-import { useGravatar } from 'src/hooks/useGravatar';
-
-interface Props {
-  email: string;
-}
-
-export const GravatarSunsetBanner = (props: Props) => {
-  const { email } = props;
-  const GRAVATAR_DEPRECATION_DATE = 'September 30th, 2024';
-
-  const { hasGravatar, isLoadingGravatar } = useGravatar(email);
-
-  if (isLoadingGravatar || !hasGravatar) {
-    return;
-  }
-  return (
-    <DismissibleBanner preferenceKey="gravatar-sunset" variant="info">
-      <Typography variant="body1">
-        {`Support for using Gravatar as your profile photo will be deprecated on ${GRAVATAR_DEPRECATION_DATE}. Your profile photo will automatically be changed to your username initial.`}
-      </Typography>
-    </DismissibleBanner>
-  );
-};
diff --git a/packages/manager/src/features/NotificationCenter/Events/NotificationCenterEvent.tsx b/packages/manager/src/features/NotificationCenter/Events/NotificationCenterEvent.tsx
index fd0a62cdb70..9940a8527d7 100644
--- a/packages/manager/src/features/NotificationCenter/Events/NotificationCenterEvent.tsx
+++ b/packages/manager/src/features/NotificationCenter/Events/NotificationCenterEvent.tsx
@@ -3,7 +3,6 @@ import * as React from 'react';
 
 import { BarPercent } from 'src/components/BarPercent';
 import { Box } from 'src/components/Box';
-import { GravatarOrAvatar } from 'src/components/GravatarOrAvatar';
 import { Typography } from 'src/components/Typography';
 import {
   formatProgressEvent,
@@ -14,7 +13,6 @@ import { useProfile } from 'src/queries/profile/profile';
 
 import {
   NotificationEventAvatar,
-  NotificationEventGravatar,
   NotificationEventStyledBox,
   notificationEventStyles,
 } from '../NotificationCenter.styles';
@@ -55,21 +53,15 @@ export const NotificationCenterEvent = React.memo(
         data-qa-event-seen={event.seen}
         data-testid={event.action}
       >
-        <GravatarOrAvatar
-          avatar={
-            <NotificationEventAvatar
-              color={
-                username !== profile?.username
-                  ? theme.palette.primary.dark
-                  : undefined
-              }
-              username={username}
-            />
+        <NotificationEventAvatar
+          color={
+            username !== profile?.username
+              ? theme.palette.primary.dark
+              : undefined
           }
-          gravatar={<NotificationEventGravatar username={username} />}
-          height={32}
-          width={32}
+          username={username}
         />
+
         <Box sx={{ marginTop: '-2px', paddingRight: 1, width: '100%' }}>
           {message}
           {showProgress && (
diff --git a/packages/manager/src/features/NotificationCenter/NotificationCenter.styles.ts b/packages/manager/src/features/NotificationCenter/NotificationCenter.styles.ts
index 620151a4769..6820ce92683 100644
--- a/packages/manager/src/features/NotificationCenter/NotificationCenter.styles.ts
+++ b/packages/manager/src/features/NotificationCenter/NotificationCenter.styles.ts
@@ -4,10 +4,8 @@ import { makeStyles } from 'tss-react/mui';
 
 import { Avatar } from 'src/components/Avatar/Avatar';
 import { Box } from 'src/components/Box';
-import { GravatarByUsername } from 'src/components/GravatarByUsername';
 import { Link } from 'src/components/Link';
 import { Typography } from 'src/components/Typography';
-import { fadeIn } from 'src/styles/keyframes';
 import { omittedProps } from 'src/utilities/omittedProps';
 
 import type { NotificationCenterNotificationMessageProps } from './types';
@@ -120,16 +118,6 @@ export const NotificationEventStyledBox = styled(Box, {
   width: '100%',
 }));
 
-export const NotificationEventGravatar = styled(GravatarByUsername, {
-  label: 'StyledGravatarByUsername',
-})(() => ({
-  animation: `${fadeIn} .2s ease-in-out forwards`,
-  height: 32,
-  marginTop: 2,
-  minWidth: 32,
-  width: 32,
-}));
-
 export const NotificationEventAvatar = styled(Avatar, {
   label: 'StyledAvatar',
 })(() => ({
diff --git a/packages/manager/src/features/Profile/DisplaySettings/DisplaySettings.tsx b/packages/manager/src/features/Profile/DisplaySettings/DisplaySettings.tsx
index 6c003f183c2..f4305fd948c 100644
--- a/packages/manager/src/features/Profile/DisplaySettings/DisplaySettings.tsx
+++ b/packages/manager/src/features/Profile/DisplaySettings/DisplaySettings.tsx
@@ -9,14 +9,10 @@ import { Avatar } from 'src/components/Avatar/Avatar';
 import { Box } from 'src/components/Box';
 import { Button } from 'src/components/Button/Button';
 import { Divider } from 'src/components/Divider';
-import { GravatarOrAvatar } from 'src/components/GravatarOrAvatar';
-import { Link } from 'src/components/Link';
 import { Paper } from 'src/components/Paper';
 import { SingleTextFieldForm } from 'src/components/SingleTextFieldForm/SingleTextFieldForm';
-import { TooltipIcon } from 'src/components/TooltipIcon';
 import { Typography } from 'src/components/Typography';
 import { RESTRICTED_FIELD_TOOLTIP } from 'src/features/Account/constants';
-import { useGravatar } from 'src/hooks/useGravatar';
 import { useNotificationsQuery } from 'src/queries/account/notifications';
 import { useMutateProfile, useProfile } from 'src/queries/profile/profile';
 
@@ -24,7 +20,6 @@ import { AvatarColorPickerDialog } from './AvatarColorPickerDialog';
 import { TimezoneForm } from './TimezoneForm';
 
 import type { ApplicationState } from 'src/store';
-import { GravatarByEmail } from 'src/components/GravatarByEmail';
 
 export const DisplaySettings = () => {
   const theme = useTheme();
@@ -39,8 +34,6 @@ export const DisplaySettings = () => {
 
   const isProxyUser = profile?.user_type === 'proxy';
 
-  const { hasGravatar } = useGravatar(profile?.email);
-
   const [
     isColorPickerDialogOpen,
     setAvatarColorPickerDialogOpen,
@@ -70,15 +63,6 @@ export const DisplaySettings = () => {
     return updateProfile({ email: newEmail });
   };
 
-  const tooltipIconText = (
-    <>
-      Go to <Link to="https://en.gravatar.com/">gravatar.com</Link> and register
-      an account using the same email address as your Cloud Manager account.
-      Upload your desired profile image to your Gravatar account and it will be
-      automatically linked.
-    </>
-  );
-
   const tooltipForDisabledUsernameField = profile?.restricted
     ? 'Restricted users cannot update their username. Please contact an account administrator.'
     : isProxyUser
@@ -101,50 +85,22 @@ export const DisplaySettings = () => {
             }}
             display="flex"
           >
-            <GravatarOrAvatar
-              gravatar={
-                <GravatarByEmail
-                  email={profile?.email ?? ''}
-                  height={88}
-                  width={88}
-                />
-              }
-              avatar={<Avatar height={88} width={88} />}
-              height={88}
-              width={88}
-            />
+            <Avatar height={88} width={88} />
             <div>
               <Typography sx={{ fontSize: '1rem' }} variant="h2">
-                {hasGravatar ? 'Profile photo' : 'Avatar'}
-                {hasGravatar && (
-                  <StyledTooltipIcon
-                    sxTooltipIcon={{
-                      marginLeft: '6px',
-                      marginTop: '-2px',
-                      padding: 0,
-                    }}
-                    status="help"
-                    text={tooltipIconText}
-                  />
-                )}
+                Avatar
               </Typography>
               <StyledProfileCopy variant="body1">
-                {hasGravatar
-                  ? 'Create, upload, and manage your globally recognized avatar from a single place with Gravatar.'
-                  : 'Your avatar is automatically generated using the first character of your username.'}
+                Your avatar is automatically generated using the first character
+                of your username.
               </StyledProfileCopy>
-              {hasGravatar ? (
-                <StyledAddImageLink external to="https://en.gravatar.com/">
-                  Manage photo
-                </StyledAddImageLink>
-              ) : (
-                <Button
-                  buttonType="outlined"
-                  onClick={() => setAvatarColorPickerDialogOpen(true)}
-                >
-                  Change Avatar Color
-                </Button>
-              )}
+
+              <Button
+                buttonType="outlined"
+                onClick={() => setAvatarColorPickerDialogOpen(true)}
+              >
+                Change Avatar Color
+              </Button>
             </div>
           </Box>
           <Divider />
@@ -194,20 +150,6 @@ export const DisplaySettings = () => {
   );
 };
 
-const StyledAddImageLink = styled(Link, {
-  label: 'StyledAddImageLink',
-})(({ theme }) => ({
-  '& svg': {
-    height: '1rem',
-    left: 6,
-    position: 'relative',
-    top: 3,
-    width: '1rem',
-  },
-  fontFamily: theme.font.bold,
-  fontSize: '1rem',
-}));
-
 const StyledProfileCopy = styled(Typography, {
   label: 'StyledProfileCopy',
 })(({ theme }) => ({
@@ -215,11 +157,3 @@ const StyledProfileCopy = styled(Typography, {
   marginTop: 4,
   maxWidth: 360,
 }));
-
-const StyledTooltipIcon = styled(TooltipIcon, {
-  label: 'StyledTooltip',
-})(() => ({
-  '& .MuiTooltip-tooltip': {
-    minWidth: 350,
-  },
-}));
diff --git a/packages/manager/src/features/Support/ExpandableTicketPanel.tsx b/packages/manager/src/features/Support/ExpandableTicketPanel.tsx
index 80d5ab5cd5a..5c6efcea93d 100644
--- a/packages/manager/src/features/Support/ExpandableTicketPanel.tsx
+++ b/packages/manager/src/features/Support/ExpandableTicketPanel.tsx
@@ -1,13 +1,10 @@
-import Avatar from '@mui/material/Avatar';
 import { useTheme } from '@mui/material/styles';
 import Grid from '@mui/material/Unstable_Grid2';
 import * as React from 'react';
 import { makeStyles } from 'tss-react/mui';
 
-import UserIcon from 'src/assets/icons/account.svg';
-import { Avatar as NewAvatar } from 'src/components/Avatar/Avatar';
+import { Avatar } from 'src/components/Avatar/Avatar';
 import { DateTimeDisplay } from 'src/components/DateTimeDisplay';
-import { GravatarOrAvatar } from 'src/components/GravatarOrAvatar';
 import { Typography } from 'src/components/Typography';
 import { useProfile } from 'src/queries/profile/profile';
 
@@ -143,30 +140,17 @@ export const ExpandableTicketPanel = React.memo((props: Props) => {
     }
   }, [parentTicket, reply, ticket, ticketUpdated]);
 
-  const renderAvatar = (id: string) => {
+  const renderAvatar = () => {
     return (
       <div className={classes.userWrapper}>
-        <GravatarOrAvatar
-          avatar={
-            <NewAvatar
-              color={
-                data?.username !== profile?.username
-                  ? theme.palette.primary.dark
-                  : undefined
-              }
-              sx={{ marginTop: 1 }}
-              username={data?.username}
-            />
-          }
-          gravatar={
-            <Avatar
-              alt="Gravatar"
-              className={classes.leftIcon}
-              src={`https://gravatar.com/avatar/${id}?d=404`}
-            >
-              <UserIcon />
-            </Avatar>
+        <Avatar
+          color={
+            data?.username !== profile?.username
+              ? theme.palette.primary.dark
+              : undefined
           }
+          sx={{ marginTop: 1 }}
+          username={data?.username === 'Linode' ? 'Akamai' : data?.username}
         />
       </div>
     );
@@ -182,12 +166,12 @@ export const ExpandableTicketPanel = React.memo((props: Props) => {
 
   return (
     <Grid container wrap="nowrap">
-      <Grid>{renderAvatar(data.gravatar_id)}</Grid>
+      <Grid>{renderAvatar()}</Grid>
       <Grid className={classes.content}>
         <Grid className={classes.header} container>
           <Grid className={classes.headerInner}>
             <Typography className={classes.userName} component="span">
-              {data.friendly_name}
+              {data.friendly_name === 'Linode' ? 'Akamai' : data.friendly_name}
             </Typography>
             {data.from_linode && !OFFICIAL_USERNAMES.includes(data.username) ? (
               <Typography
diff --git a/packages/manager/src/features/TopMenu/UserMenu/UserMenu.tsx b/packages/manager/src/features/TopMenu/UserMenu/UserMenu.tsx
index c1470ebbaaf..1867fdaf3f1 100644
--- a/packages/manager/src/features/TopMenu/UserMenu/UserMenu.tsx
+++ b/packages/manager/src/features/TopMenu/UserMenu/UserMenu.tsx
@@ -11,8 +11,6 @@ import { AvatarForProxy } from 'src/components/AvatarForProxy';
 import { Box } from 'src/components/Box';
 import { Button } from 'src/components/Button/Button';
 import { Divider } from 'src/components/Divider';
-import { GravatarByEmail } from 'src/components/GravatarByEmail';
-import { GravatarOrAvatar } from 'src/components/GravatarOrAvatar';
 import { Hidden } from 'src/components/Hidden';
 import { Link } from 'src/components/Link';
 import { Stack } from 'src/components/Stack';
@@ -209,16 +207,6 @@ export const UserMenu = React.memo(() => {
         title="Profile & Account"
       >
         <Button
-          startIcon={
-            isProxyUser ? (
-              <AvatarForProxy />
-            ) : (
-              <GravatarOrAvatar
-                avatar={<Avatar />}
-                gravatar={<GravatarByEmail email={profile?.email ?? ''} />}
-              />
-            )
-          }
           sx={(theme) => ({
             backgroundColor: open ? theme.bg.app : undefined,
             height: '50px',
@@ -230,6 +218,7 @@ export const UserMenu = React.memo(() => {
           disableRipple
           endIcon={getEndIcon()}
           onClick={handleClick}
+          startIcon={isProxyUser ? <AvatarForProxy /> : <Avatar />}
         >
           <Hidden mdDown>
             <Stack alignItems={'flex-start'}>
diff --git a/packages/manager/src/features/Users/UserRow.tsx b/packages/manager/src/features/Users/UserRow.tsx
index abe6616ddde..9b580c3714a 100644
--- a/packages/manager/src/features/Users/UserRow.tsx
+++ b/packages/manager/src/features/Users/UserRow.tsx
@@ -5,8 +5,6 @@ import { Avatar } from 'src/components/Avatar/Avatar';
 import { Box } from 'src/components/Box';
 import { Chip } from 'src/components/Chip';
 import { DateTimeDisplay } from 'src/components/DateTimeDisplay';
-import { GravatarByEmail } from 'src/components/GravatarByEmail';
-import { GravatarOrAvatar } from 'src/components/GravatarOrAvatar';
 import { Hidden } from 'src/components/Hidden';
 import { Stack } from 'src/components/Stack';
 import { StatusIcon } from 'src/components/StatusIcon/StatusIcon';
@@ -38,18 +36,13 @@ export const UserRow = ({ onDelete, user }: Props) => {
     <TableRow data-qa-table-row={user.username} key={user.username}>
       <TableCell>
         <Stack alignItems="center" direction="row" spacing={1.5}>
-          <GravatarOrAvatar
-            avatar={
-              <Avatar
-                color={
-                  user.username !== profile?.username
-                    ? theme.palette.primary.dark
-                    : undefined
-                }
-                username={user.username}
-              />
+          <Avatar
+            color={
+              user.username !== profile?.username
+                ? theme.palette.primary.dark
+                : undefined
             }
-            gravatar={<GravatarByEmail email={user.email} />}
+            username={user.username}
           />
           <Typography>{user.username}</Typography>
           <Box display="flex" flexGrow={1} />
diff --git a/packages/manager/src/hooks/useGravatar.ts b/packages/manager/src/hooks/useGravatar.ts
deleted file mode 100644
index b2b99cae853..00000000000
--- a/packages/manager/src/hooks/useGravatar.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-import { useEffect, useState } from 'react';
-
-import { checkForGravatar, getGravatarUrl } from 'src/utilities/gravatar';
-
-// set a cache to prevent duplicate requests
-const gravatarCache = new Map<string, boolean>();
-
-/**
- * useGravatar
- *
- * @description
- * This hook checks if a user has a Gravatar associated with their email.
- * It uses a cache to prevent duplicate requests.
- *
- * @param email - The email address to check for a Gravatar.
- * @returns - A boolean indicating whether the user has a Gravatar.
- */
-
-export const useGravatar = (email: string | undefined) => {
-  const [hasGravatar, setHasGravatar] = useState(
-    email && gravatarCache.has(email) ? gravatarCache.get(email) : false
-  );
-  const [isLoadingGravatar, setIsLoadingGravatar] = useState<boolean>(true);
-
-  useEffect(() => {
-    if (!email) {
-      setHasGravatar(false);
-      setIsLoadingGravatar(false);
-      return;
-    }
-
-    if (gravatarCache.has(email)) {
-      setHasGravatar(gravatarCache.get(email));
-      setIsLoadingGravatar(false);
-    } else {
-      checkForGravatar(getGravatarUrl(email)).then((result) => {
-        gravatarCache.set(email, result);
-        setHasGravatar(result);
-        setIsLoadingGravatar(false);
-      });
-    }
-  }, [email]);
-
-  return { hasGravatar, isLoadingGravatar };
-};
diff --git a/packages/manager/src/utilities/gravatar.ts b/packages/manager/src/utilities/gravatar.ts
deleted file mode 100644
index 989631cc7fd..00000000000
--- a/packages/manager/src/utilities/gravatar.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import md5 from 'md5';
-
-export const getEmailHash = (email: string) => {
-  return email && md5(email.trim().toLowerCase());
-};
-
-export const getGravatarUrlFromHash = (hash: string): string => {
-  return `https://gravatar.com/avatar/${hash}?d=404`;
-};
-
-export const getGravatarUrl = (email: string): string => {
-  return getGravatarUrlFromHash(getEmailHash(email));
-};
-
-export const checkForGravatar = async (url: string) => {
-  try {
-    const response = await fetch(url);
-
-    if (response.status === 200) {
-      return true;
-    }
-    if (response.status === 404) {
-      return false;
-    }
-  } catch (error) {
-    // The fetch to Gravatar failed. Event won't be logged.
-  }
-  return false;
-};

From df32f28b0eb220b60b9e5e7c6612e7b392ec1ec2 Mon Sep 17 00:00:00 2001
From: Alban Bailly <130582365+abailly-akamai@users.noreply.github.com>
Date: Tue, 17 Sep 2024 13:36:45 -0400
Subject: [PATCH 19/62] change: [M3-8552] - eslint - mark formik as deprecated
 (#10944)

* initial commit: eslintrc rule

* use eslint-plugin-cloud-manager

* Documentation

* Added changeset: Mark formik as deprecated

* feedback @coliu-akamai
---
 docs/development-guide/05-fetching-data.md    |  2 +-
 docs/development-guide/15-composition.md      | 54 +++++++++++++++++++
 .../pr-10944-changed-1726505494539.md         |  5 ++
 packages/manager/.eslintrc.cjs                |  3 +-
 packages/manager/package.json                 |  2 +-
 yarn.lock                                     |  8 +--
 6 files changed, 67 insertions(+), 7 deletions(-)
 create mode 100644 docs/development-guide/15-composition.md
 create mode 100644 packages/manager/.changeset/pr-10944-changed-1726505494539.md

diff --git a/docs/development-guide/05-fetching-data.md b/docs/development-guide/05-fetching-data.md
index e1313ed83c4..e6fcd59fc95 100644
--- a/docs/development-guide/05-fetching-data.md
+++ b/docs/development-guide/05-fetching-data.md
@@ -253,7 +253,7 @@ Note: the legacy `scrollErrorIntoView` is deprecated in favor of `scrollErrorInt
 
 Since Cloud Manager uses different ways of handling forms and validation, the `scrollErrorIntoViewV2` util should be implemented using the following patterns to ensure consistency.
 
-##### Formik
+##### Formik (deprecated)
 ```Typescript
 import * as React from 'react';
 
diff --git a/docs/development-guide/15-composition.md b/docs/development-guide/15-composition.md
new file mode 100644
index 00000000000..26a405c9ea5
--- /dev/null
+++ b/docs/development-guide/15-composition.md
@@ -0,0 +1,54 @@
+# Composition
+
+## Page Composition
+Composing pages in Cloud Manager is a multi-step process that involves several components and patterns. It usually involves using a combination of components already available to the developer, and organized according to the desired layout.
+
+It is best to avoid one off components for pages, or an excessive amount of custom CSS. It is likely that a component already exists to handle the desired layout or styling. It is often a good idea to spend some time looking through the codebase, at [storybook](https://design.linode.com/) or an existing feature of Cloud Manager before making certain composition decisions. It is also important to compose with markup semanticity in mind, and keep an eye on the render tree to avoid bloating the layout with unnecessary containers, wrappers etc, as well as ensuring that the page is accessible, performant, and has good test coverage. When in doubt, one can also check with the product or UX team to ensure that a component exists for the desired layout or styling.
+
+### Responsive Design
+
+While Cloud Manager layout and components are responsive out of the box, some extra handling may be needed for pages that have unique responsive requirements, or because the features has a more complex layout.
+A wide array of tools are available to help with responsive design, including media queries, CSS Grid & Flexbox, as well as the `<Hidden />` component, which can be used to hide elements at specific breakpoints.
+
+Some designs may not feature a mobile layout, and for those cases it is recommended to gather existing examples from the codebase, or from other pages that have a similar layout.
+
+## Form Composition
+
+### Formik
+Formik is now deprecated. Please use react-hook-form.
+
+### React Hook Form
+The preferred library for building forms in Cloud Manager is [react-hook-form](https://react-hook-form.com/). It is a complete set of tools for building complex forms, and is well documented.
+The general way to get started is to use the `useForm` hook, which returns a form context and a set of methods to interact with the form.
+
+```Typescript
+const methods = useForm<LinodeCreateFormValues>({
+  defaultValues,
+  mode: 'onBlur',
+  resolver: myResolvers,
+  // other methods
+});
+```
+
+`methods` is an object that contains the form context and a set of methods to interact with the form.
+It is passed to the `FormProvider` component, which is a wrapper that provides the form context to the form.
+
+```Typescript
+<FormProvider {...methods}>
+  <form onSubmit={methods.handleSubmit(onSubmit)}>
+    {/* form fields */}
+    <button type="submit">Submit</button>
+  </form>
+</FormProvider>
+```
+
+It is important to note that react-hook-form does not provide any UI components. It is the responsibility of the developer to provide the form fields and validation, as well as employing semantic markup for accessibility purposes.
+ex: a `<form>` element should have a corresponding `<button type="submit">` element to submit the form so that it is obvious to assistive technologies that the form can be submitted via keyboard.
+
+It is also important to remember to manage the form state through comprehensive context in order to avoid unnecessary rerenders.
+
+The Linode Create Page is a good example of a complex form that is built using react-hook-form, using the best practices mentioned above.
+
+### Uncontrolled Forms
+Uncontrolled forms are a type of form that does not have a state for its values. It is often used for simple forms that do not need to be controlled, such as forms with a single input field or call to action.
+
diff --git a/packages/manager/.changeset/pr-10944-changed-1726505494539.md b/packages/manager/.changeset/pr-10944-changed-1726505494539.md
new file mode 100644
index 00000000000..c54de69a88e
--- /dev/null
+++ b/packages/manager/.changeset/pr-10944-changed-1726505494539.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Changed
+---
+
+Mark formik as deprecated ([#10944](https://github.com/linode/manager/pull/10944))
diff --git a/packages/manager/.eslintrc.cjs b/packages/manager/.eslintrc.cjs
index d28ee97f89f..075f9e7f314 100644
--- a/packages/manager/.eslintrc.cjs
+++ b/packages/manager/.eslintrc.cjs
@@ -113,9 +113,10 @@ module.exports = {
     '@linode/eslint-plugin-cloud-manager',
   ],
   rules: {
+    '@linode/cloud-manager/deprecate-formik': 'warn',
     '@linode/cloud-manager/no-custom-fontWeight': 'error',
     '@typescript-eslint/camelcase': 'off',
-    "@typescript-eslint/consistent-type-imports": "warn",
+    '@typescript-eslint/consistent-type-imports': 'warn',
     '@typescript-eslint/explicit-function-return-type': 'off',
     '@typescript-eslint/explicit-module-boundary-types': 'off',
     '@typescript-eslint/interface-name-prefix': 'off',
diff --git a/packages/manager/package.json b/packages/manager/package.json
index cafb84d1524..bc96cdcedcb 100644
--- a/packages/manager/package.json
+++ b/packages/manager/package.json
@@ -113,7 +113,7 @@
     ]
   },
   "devDependencies": {
-    "@linode/eslint-plugin-cloud-manager": "^0.0.3",
+    "@linode/eslint-plugin-cloud-manager": "^0.0.5",
     "@storybook/addon-actions": "^8.3.0",
     "@storybook/addon-controls": "^8.3.0",
     "@storybook/addon-docs": "^8.3.0",
diff --git a/yarn.lock b/yarn.lock
index a0b7c36fa09..d77a20ca264 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1367,10 +1367,10 @@
     react-dom "^17.0.2"
     style-dictionary "4.0.1"
 
-"@linode/eslint-plugin-cloud-manager@^0.0.3":
-  version "0.0.3"
-  resolved "https://registry.yarnpkg.com/@linode/eslint-plugin-cloud-manager/-/eslint-plugin-cloud-manager-0.0.3.tgz#dcb78ab36065bf0fb71106a586c1f3f88dbf840a"
-  integrity sha512-tW0CVkou/UzsAfvVbyxsvdwgXspcKMuJZPnGJJnlAGzFa7CVSURJiefYRbWjn2EFeoehgGvW4mGt30JNhhY+3g==
+"@linode/eslint-plugin-cloud-manager@^0.0.5":
+  version "0.0.5"
+  resolved "https://registry.yarnpkg.com/@linode/eslint-plugin-cloud-manager/-/eslint-plugin-cloud-manager-0.0.5.tgz#d35a80870e301ff43c4a2ade7d53d866c6a87bb8"
+  integrity sha512-zOT3iFnFTG5h4ylczvA3fUk8xiJPKzmzNTVsszjfyTDqFr6FiCDhGzUgj7znToW6J3Mr3CATobid2GCR2Ls19Q==
 
 "@lukemorales/query-key-factory@^1.3.4":
   version "1.3.4"

From 75c59862211bb9ed7289a7aa8763e1275b5a3181 Mon Sep 17 00:00:00 2001
From: Connie Liu <139280159+coliu-akamai@users.noreply.github.com>
Date: Wed, 18 Sep 2024 09:09:49 -0400
Subject: [PATCH 20/62] test: [M3-8565] - Add unit tests for rest of
 NodeBalancers package (#10945)

* quick eslint fixes

* unit tests for nb passive check and delete dialog

* starting tests for NodeBalancerConfigNode

* nodebalancerconfignode tests

* update tests in config panel to account for active check component

* unit test for NodeBalancerCreate to confirm it renders

* Added changeset: Add unit tests for rest of NodeBalancers package

* Update packages/manager/src/features/NodeBalancers/NodeBalancerConfigNode.test.tsx

Co-authored-by: Dajahi Wiley <114682940+dwiley-akamai@users.noreply.github.com>

* Update packages/manager/src/features/NodeBalancers/NodeBalancerCreate.test.tsx

Co-authored-by: Dajahi Wiley <114682940+dwiley-akamai@users.noreply.github.com>

---------

Co-authored-by: Dajahi Wiley <114682940+dwiley-akamai@users.noreply.github.com>
---
 .../pr-10945-tests-1726507532580.md           |   5 +
 .../NodeBalancers/ConfigNodeIPSelect.tsx      |   2 +-
 .../NodeBalancerConfigNode.test.tsx           |  76 ++++++++++
 .../NodeBalancers/NodeBalancerConfigNode.tsx  |   4 +-
 .../NodeBalancerConfigPanel.test.tsx          | 137 +++++++++++++-----
 .../NodeBalancers/NodeBalancerCreate.test.tsx |  41 ++++++
 .../NodeBalancerDeleteDialog.test.tsx         |  43 ++++++
 .../NodeBalancerPassiveCheck.test.tsx         |  36 +++++
 .../NodeBalancers/NodeBalancerSelect.test.tsx |   3 +-
 9 files changed, 303 insertions(+), 44 deletions(-)
 create mode 100644 packages/manager/.changeset/pr-10945-tests-1726507532580.md
 create mode 100644 packages/manager/src/features/NodeBalancers/NodeBalancerConfigNode.test.tsx
 create mode 100644 packages/manager/src/features/NodeBalancers/NodeBalancerCreate.test.tsx
 create mode 100644 packages/manager/src/features/NodeBalancers/NodeBalancerDeleteDialog.test.tsx
 create mode 100644 packages/manager/src/features/NodeBalancers/NodeBalancerPassiveCheck.test.tsx

diff --git a/packages/manager/.changeset/pr-10945-tests-1726507532580.md b/packages/manager/.changeset/pr-10945-tests-1726507532580.md
new file mode 100644
index 00000000000..f3b7edd947e
--- /dev/null
+++ b/packages/manager/.changeset/pr-10945-tests-1726507532580.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Tests
+---
+
+Add unit tests for rest of NodeBalancers package ([#10945](https://github.com/linode/manager/pull/10945))
diff --git a/packages/manager/src/features/NodeBalancers/ConfigNodeIPSelect.tsx b/packages/manager/src/features/NodeBalancers/ConfigNodeIPSelect.tsx
index 1c971babe18..6630b7509c9 100644
--- a/packages/manager/src/features/NodeBalancers/ConfigNodeIPSelect.tsx
+++ b/packages/manager/src/features/NodeBalancers/ConfigNodeIPSelect.tsx
@@ -1,4 +1,3 @@
-import { Linode } from '@linode/api-v4/lib/linodes';
 import { Box } from '@mui/material';
 import * as React from 'react';
 
@@ -6,6 +5,7 @@ import { SelectedIcon } from 'src/components/Autocomplete/Autocomplete.styles';
 import { LinodeSelect } from 'src/features/Linodes/LinodeSelect/LinodeSelect';
 import { privateIPRegex } from 'src/utilities/ipUtils';
 
+import type { Linode } from '@linode/api-v4/lib/linodes';
 import type { TextFieldProps } from 'src/components/TextField';
 
 interface ConfigNodeIPSelectProps {
diff --git a/packages/manager/src/features/NodeBalancers/NodeBalancerConfigNode.test.tsx b/packages/manager/src/features/NodeBalancers/NodeBalancerConfigNode.test.tsx
new file mode 100644
index 00000000000..6bbd8e2248f
--- /dev/null
+++ b/packages/manager/src/features/NodeBalancers/NodeBalancerConfigNode.test.tsx
@@ -0,0 +1,76 @@
+import { fireEvent } from '@testing-library/react';
+import * as React from 'react';
+
+import { renderWithTheme } from 'src/utilities/testHelpers';
+
+import { NodeBalancerConfigNode } from './NodeBalancerConfigNode';
+
+import type { NodeBalancerConfigNodeProps } from './NodeBalancerConfigNode';
+
+const node = {
+  address: 'some address',
+  label: 'some label',
+};
+
+const props: NodeBalancerConfigNodeProps = {
+  configIdx: 1,
+  disabled: false,
+  forEdit: true,
+  idx: 1,
+  node,
+  onNodeAddressChange: vi.fn(),
+  onNodeLabelChange: vi.fn(),
+  onNodeModeChange: vi.fn(),
+  onNodePortChange: vi.fn(),
+  onNodeWeightChange: vi.fn(),
+  removeNode: vi.fn(),
+};
+
+describe('NodeBalancerConfigNode', () => {
+  it('renders the NodeBalancerConfigNode', () => {
+    const { getByLabelText, getByText, queryByText } = renderWithTheme(
+      <NodeBalancerConfigNode {...props} />
+    );
+
+    expect(getByLabelText('Label')).toBeVisible();
+    expect(getByLabelText('Port')).toBeVisible();
+    expect(getByLabelText('Weight')).toBeVisible();
+    expect(getByText('Mode')).toBeVisible();
+    expect(getByText('Remove')).toBeVisible();
+    expect(queryByText('Status')).not.toBeInTheDocument();
+  });
+
+  it('renders the node status', () => {
+    const { getByText } = renderWithTheme(
+      <NodeBalancerConfigNode {...props} node={{ ...node, status: 'DOWN' }} />
+    );
+
+    expect(getByText('Status')).toBeVisible();
+    expect(getByText('DOWN')).toBeVisible();
+  });
+
+  it('cannot change the mode if the node is not for edit', () => {
+    const { queryByText } = renderWithTheme(
+      <NodeBalancerConfigNode {...props} forEdit={false} />
+    );
+
+    expect(queryByText('Mode')).not.toBeInTheDocument();
+  });
+
+  it('cannot remove the node if the node is not for edit or is the first node', () => {
+    const { queryByText } = renderWithTheme(
+      <NodeBalancerConfigNode {...props} forEdit={false} idx={0} />
+    );
+
+    expect(queryByText('Remove')).not.toBeInTheDocument();
+  });
+
+  it('removes the node', () => {
+    const { getByText } = renderWithTheme(
+      <NodeBalancerConfigNode {...props} />
+    );
+
+    fireEvent.click(getByText('Remove'));
+    expect(props.removeNode).toHaveBeenCalled();
+  });
+});
diff --git a/packages/manager/src/features/NodeBalancers/NodeBalancerConfigNode.tsx b/packages/manager/src/features/NodeBalancers/NodeBalancerConfigNode.tsx
index af6e03a1118..05f47659c98 100644
--- a/packages/manager/src/features/NodeBalancers/NodeBalancerConfigNode.tsx
+++ b/packages/manager/src/features/NodeBalancers/NodeBalancerConfigNode.tsx
@@ -1,5 +1,5 @@
-import Grid from '@mui/material/Unstable_Grid2';
 import { styled } from '@mui/material/styles';
+import Grid from '@mui/material/Unstable_Grid2';
 import * as React from 'react';
 
 import { Autocomplete } from 'src/components/Autocomplete/Autocomplete';
@@ -13,8 +13,8 @@ import { Typography } from 'src/components/Typography';
 import { getErrorMap } from 'src/utilities/errorUtils';
 
 import { ConfigNodeIPSelect } from './ConfigNodeIPSelect';
-import { NodeBalancerConfigNodeFields } from './types';
 
+import type { NodeBalancerConfigNodeFields } from './types';
 import type { NodeBalancerConfigNodeMode } from '@linode/api-v4';
 
 export interface NodeBalancerConfigNodeProps {
diff --git a/packages/manager/src/features/NodeBalancers/NodeBalancerConfigPanel.test.tsx b/packages/manager/src/features/NodeBalancers/NodeBalancerConfigPanel.test.tsx
index 7f2716c6f78..13c7bdfcd36 100644
--- a/packages/manager/src/features/NodeBalancers/NodeBalancerConfigPanel.test.tsx
+++ b/packages/manager/src/features/NodeBalancers/NodeBalancerConfigPanel.test.tsx
@@ -28,7 +28,7 @@ const node: NodeBalancerConfigNodeFields = {
   weight: 100,
 };
 
-const props: NodeBalancerConfigPanelProps = {
+export const nbConfigPanelMockPropsForTest: NodeBalancerConfigPanelProps = {
   addNode: vi.fn(),
   algorithm: 'roundrobin',
   checkBody: '',
@@ -70,7 +70,17 @@ const props: NodeBalancerConfigPanelProps = {
   sslCertificate: '',
 };
 
-const activeHealthChecks = ['Interval', 'Timeout', 'Attempts'];
+const activeHealthChecksFormInputs = ['Interval', 'Timeout', 'Attempts'];
+
+const activeHealthChecksHelperText = [
+  'Seconds between health check probes',
+  'Seconds to wait before considering the probe a failure. 1-30. Must be less than check_interval.',
+  'Number of failed probes before taking a node out of rotation. 1-30',
+];
+
+const sslCertificate = 'ssl-certificate';
+const privateKey = 'private-key';
+const proxyProtocol = 'Proxy Protocol';
 
 describe('NodeBalancerConfigPanel', () => {
   it('renders the NodeBalancerConfigPanel', () => {
@@ -79,7 +89,10 @@ describe('NodeBalancerConfigPanel', () => {
       getByText,
       queryByLabelText,
       queryByTestId,
-    } = renderWithTheme(<NodeBalancerConfigPanel {...props} />);
+      queryByText,
+    } = renderWithTheme(
+      <NodeBalancerConfigPanel {...nbConfigPanelMockPropsForTest} />
+    );
 
     expect(getByLabelText('Protocol')).toBeVisible();
     expect(getByLabelText('Algorithm')).toBeVisible();
@@ -109,67 +122,99 @@ describe('NodeBalancerConfigPanel', () => {
     expect(getByText('Add a Node')).toBeVisible();
     expect(getByText('Backend Nodes')).toBeVisible();
 
-    activeHealthChecks.forEach((type) => {
-      expect(queryByLabelText(type)).not.toBeInTheDocument();
+    activeHealthChecksFormInputs.forEach((formLabel) => {
+      expect(queryByLabelText(formLabel)).not.toBeInTheDocument();
     });
-    expect(queryByTestId('ssl-certificate')).not.toBeInTheDocument();
-    expect(queryByTestId('private-key')).not.toBeInTheDocument();
+    activeHealthChecksHelperText.forEach((helperText) => {
+      expect(queryByText(helperText)).not.toBeInTheDocument();
+    });
+    expect(queryByTestId(sslCertificate)).not.toBeInTheDocument();
+    expect(queryByTestId(privateKey)).not.toBeInTheDocument();
     expect(queryByTestId('http-path')).not.toBeInTheDocument();
     expect(queryByTestId('http-body')).not.toBeInTheDocument();
-    expect(queryByLabelText('Proxy Protocol')).not.toBeInTheDocument();
+    expect(queryByLabelText(proxyProtocol)).not.toBeInTheDocument();
   });
 
   it('renders form fields specific to the HTTPS protocol', () => {
     const { getByTestId, queryByLabelText } = renderWithTheme(
-      <NodeBalancerConfigPanel {...props} protocol="https" />
+      <NodeBalancerConfigPanel
+        {...nbConfigPanelMockPropsForTest}
+        protocol="https"
+      />
     );
 
-    expect(getByTestId('ssl-certificate')).toBeVisible();
-    expect(getByTestId('private-key')).toBeVisible();
-    expect(queryByLabelText('Proxy Protocol')).not.toBeInTheDocument();
+    expect(getByTestId(sslCertificate)).toBeVisible();
+    expect(getByTestId(privateKey)).toBeVisible();
+    expect(queryByLabelText(proxyProtocol)).not.toBeInTheDocument();
   });
 
   it('renders form fields specific to the TCP protocol', () => {
     const { getByLabelText, queryByTestId } = renderWithTheme(
-      <NodeBalancerConfigPanel {...props} protocol="tcp" />
+      <NodeBalancerConfigPanel
+        {...nbConfigPanelMockPropsForTest}
+        protocol="tcp"
+      />
     );
 
-    expect(getByLabelText('Proxy Protocol')).toBeVisible();
-    expect(queryByTestId('ssl-certificate')).not.toBeInTheDocument();
-    expect(queryByTestId('private-key')).not.toBeInTheDocument();
+    expect(getByLabelText(proxyProtocol)).toBeVisible();
+    expect(queryByTestId(sslCertificate)).not.toBeInTheDocument();
+    expect(queryByTestId(privateKey)).not.toBeInTheDocument();
   });
 
   it('renders fields specific to the Active Health Check type of TCP Connection', () => {
-    const { getByLabelText, queryByTestId } = renderWithTheme(
-      <NodeBalancerConfigPanel {...props} healthCheckType="connection" />
+    const { getByLabelText, getByText, queryByTestId } = renderWithTheme(
+      <NodeBalancerConfigPanel
+        {...nbConfigPanelMockPropsForTest}
+        healthCheckType="connection"
+      />
     );
 
-    activeHealthChecks.forEach((type) => {
-      expect(getByLabelText(type)).toBeVisible();
+    activeHealthChecksFormInputs.forEach((formLabel) => {
+      expect(getByLabelText(formLabel)).toBeVisible();
+    });
+    activeHealthChecksHelperText.forEach((helperText) => {
+      expect(getByText(helperText)).toBeVisible();
     });
     expect(queryByTestId('http-path')).not.toBeInTheDocument();
     expect(queryByTestId('http-body')).not.toBeInTheDocument();
   });
 
   it('renders fields specific to the Active Health Check type of HTTP Status', () => {
-    const { getByLabelText, getByTestId, queryByTestId } = renderWithTheme(
-      <NodeBalancerConfigPanel {...props} healthCheckType="http" />
+    const {
+      getByLabelText,
+      getByTestId,
+      getByText,
+      queryByTestId,
+    } = renderWithTheme(
+      <NodeBalancerConfigPanel
+        {...nbConfigPanelMockPropsForTest}
+        healthCheckType="http"
+      />
     );
 
-    activeHealthChecks.forEach((type) => {
-      expect(getByLabelText(type)).toBeVisible();
+    activeHealthChecksFormInputs.forEach((formLabel) => {
+      expect(getByLabelText(formLabel)).toBeVisible();
+    });
+    activeHealthChecksHelperText.forEach((helperText) => {
+      expect(getByText(helperText)).toBeVisible();
     });
     expect(getByTestId('http-path')).toBeVisible();
     expect(queryByTestId('http-body')).not.toBeInTheDocument();
   });
 
   it('renders fields specific to the Active Health Check type of HTTP Body', () => {
-    const { getByLabelText, getByTestId } = renderWithTheme(
-      <NodeBalancerConfigPanel {...props} healthCheckType="http_body" />
+    const { getByLabelText, getByTestId, getByText } = renderWithTheme(
+      <NodeBalancerConfigPanel
+        {...nbConfigPanelMockPropsForTest}
+        healthCheckType="http_body"
+      />
     );
 
-    activeHealthChecks.forEach((type) => {
-      expect(getByLabelText(type)).toBeVisible();
+    activeHealthChecksFormInputs.forEach((formLabel) => {
+      expect(getByLabelText(formLabel)).toBeVisible();
+    });
+    activeHealthChecksHelperText.forEach((helperText) => {
+      expect(getByText(helperText)).toBeVisible();
     });
     expect(getByTestId('http-path')).toBeVisible();
     expect(getByTestId('http-body')).toBeVisible();
@@ -177,7 +222,7 @@ describe('NodeBalancerConfigPanel', () => {
 
   it('renders the relevant helper text for the Round Robin algorithm', () => {
     const { getByText, queryByText } = renderWithTheme(
-      <NodeBalancerConfigPanel {...props} />
+      <NodeBalancerConfigPanel {...nbConfigPanelMockPropsForTest} />
     );
 
     expect(getByText(ROUND_ROBIN_ALGORITHM_HELPER_TEXT)).toBeVisible();
@@ -189,7 +234,10 @@ describe('NodeBalancerConfigPanel', () => {
 
   it('renders the relevant helper text for the Least Connections algorithm', () => {
     const { getByText, queryByText } = renderWithTheme(
-      <NodeBalancerConfigPanel {...props} algorithm={'leastconn'} />
+      <NodeBalancerConfigPanel
+        {...nbConfigPanelMockPropsForTest}
+        algorithm={'leastconn'}
+      />
     );
 
     expect(getByText(LEAST_CONNECTIONS_ALGORITHM_HELPER_TEXT)).toBeVisible();
@@ -201,7 +249,10 @@ describe('NodeBalancerConfigPanel', () => {
 
   it('renders the relevant helper text for the Source algorithm', () => {
     const { getByText, queryByText } = renderWithTheme(
-      <NodeBalancerConfigPanel {...props} algorithm={'source'} />
+      <NodeBalancerConfigPanel
+        {...nbConfigPanelMockPropsForTest}
+        algorithm={'source'}
+      />
     );
 
     expect(getByText(SOURCE_ALGORITHM_HELPER_TEXT)).toBeVisible();
@@ -215,17 +266,17 @@ describe('NodeBalancerConfigPanel', () => {
 
   it('adds another backend node', () => {
     const { getByText } = renderWithTheme(
-      <NodeBalancerConfigPanel {...props} />
+      <NodeBalancerConfigPanel {...nbConfigPanelMockPropsForTest} />
     );
 
     const addNodeButton = getByText('Add a Node');
     fireEvent.click(addNodeButton);
-    expect(props.addNode).toHaveBeenCalled();
+    expect(nbConfigPanelMockPropsForTest.addNode).toHaveBeenCalled();
   });
 
   it('cannot remove a backend node if there is only one node', () => {
     const { queryByText } = renderWithTheme(
-      <NodeBalancerConfigPanel {...props} />
+      <NodeBalancerConfigPanel {...nbConfigPanelMockPropsForTest} />
     );
 
     expect(queryByText('Remove')).not.toBeInTheDocument();
@@ -233,31 +284,37 @@ describe('NodeBalancerConfigPanel', () => {
 
   it('removes a backend node', () => {
     const { getByText } = renderWithTheme(
-      <NodeBalancerConfigPanel {...props} nodes={[{ ...node }, node]} />
+      <NodeBalancerConfigPanel
+        {...nbConfigPanelMockPropsForTest}
+        nodes={[{ ...node }, node]}
+      />
     );
 
     const removeNodeButton = getByText('Remove');
     fireEvent.click(removeNodeButton);
-    expect(props.removeNode).toHaveBeenCalled();
+    expect(nbConfigPanelMockPropsForTest.removeNode).toHaveBeenCalled();
   });
 
   it('deletes the configuration panel', () => {
     const { getByText } = renderWithTheme(
-      <NodeBalancerConfigPanel {...props} />
+      <NodeBalancerConfigPanel {...nbConfigPanelMockPropsForTest} />
     );
 
     const deleteConfigButton = getByText('Delete');
     fireEvent.click(deleteConfigButton);
-    expect(props.onDelete).toHaveBeenCalled();
+    expect(nbConfigPanelMockPropsForTest.onDelete).toHaveBeenCalled();
   });
 
   it('saves the input after editing the configuration', () => {
     const { getByText } = renderWithTheme(
-      <NodeBalancerConfigPanel {...props} forEdit={true} />
+      <NodeBalancerConfigPanel
+        {...nbConfigPanelMockPropsForTest}
+        forEdit={true}
+      />
     );
 
     const editConfigButton = getByText('Save');
     fireEvent.click(editConfigButton);
-    expect(props.onSave).toHaveBeenCalled();
+    expect(nbConfigPanelMockPropsForTest.onSave).toHaveBeenCalled();
   });
 });
diff --git a/packages/manager/src/features/NodeBalancers/NodeBalancerCreate.test.tsx b/packages/manager/src/features/NodeBalancers/NodeBalancerCreate.test.tsx
new file mode 100644
index 00000000000..3a2f0a171aa
--- /dev/null
+++ b/packages/manager/src/features/NodeBalancers/NodeBalancerCreate.test.tsx
@@ -0,0 +1,41 @@
+import * as React from 'react';
+
+import { renderWithTheme } from 'src/utilities/testHelpers';
+
+import NodeBalancerCreate from './NodeBalancerCreate';
+
+// Note: see nodeblaancers-create-in-complex-form.spec.ts for an e2e test of this flow
+describe('NodeBalancerCreate', () => {
+  it('renders all parts of the NodeBalancerCreate page', () => {
+    const { getAllByText, getByLabelText, getByText } = renderWithTheme(
+      <NodeBalancerCreate />
+    );
+
+    // confirm nodebalancer fields render
+    expect(getByLabelText('NodeBalancer Label')).toBeVisible();
+    expect(getByLabelText('Add Tags')).toBeVisible();
+    expect(getByLabelText('Region')).toBeVisible();
+
+    // confirm Firewall panel renders
+    expect(getByLabelText('Assign Firewall')).toBeVisible();
+    expect(getByText('Create Firewall')).toBeVisible();
+    expect(
+      getByText(
+        /Assign an existing Firewall to this NodeBalancer to control inbound network traffic./
+      )
+    ).toBeVisible();
+
+    // confirm default configuration renders - only confirming headers, as we have additional
+    // unit tests to check the functionality of the NodeBalancerConfigPanel
+    expect(getByText('Configuration - Port 80')).toBeVisible();
+    expect(getByText('Active Health Checks')).toBeVisible();
+    expect(getAllByText('Passive Checks')).toHaveLength(2);
+    expect(getByText('Backend Nodes')).toBeVisible();
+
+    // confirm summary renders
+    expect(getByText('Summary')).toBeVisible();
+    expect(getByText('Configs')).toBeVisible();
+    expect(getByText('Nodes')).toBeVisible();
+    expect(getByText('Create NodeBalancer')).toBeVisible();
+  });
+});
diff --git a/packages/manager/src/features/NodeBalancers/NodeBalancerDeleteDialog.test.tsx b/packages/manager/src/features/NodeBalancers/NodeBalancerDeleteDialog.test.tsx
new file mode 100644
index 00000000000..8d23ec37771
--- /dev/null
+++ b/packages/manager/src/features/NodeBalancers/NodeBalancerDeleteDialog.test.tsx
@@ -0,0 +1,43 @@
+import { fireEvent } from '@testing-library/react';
+import * as React from 'react';
+
+import { renderWithTheme } from 'src/utilities/testHelpers';
+
+import { NodeBalancerDeleteDialog } from './NodeBalancerDeleteDialog';
+
+const props = {
+  id: 1,
+  label: 'nb-1',
+  onClose: vi.fn(),
+  open: true,
+};
+
+describe('NodeBalancerDeleteDialog', () => {
+  it('renders the NodeBalancerDeleteDialog', () => {
+    const { getByText } = renderWithTheme(
+      <NodeBalancerDeleteDialog {...props} />
+    );
+
+    expect(
+      getByText('Deleting this NodeBalancer is permanent and can’t be undone.')
+    ).toBeVisible();
+    expect(
+      getByText(
+        'Traffic will no longer be routed through this NodeBalancer. Please check your DNS settings and either provide the IP address of another active NodeBalancer, or route traffic directly to your Linode.'
+      )
+    ).toBeVisible();
+    expect(getByText('Delete nb-1?')).toBeVisible();
+    expect(getByText('NodeBalancer Label')).toBeVisible();
+    expect(getByText('Cancel')).toBeVisible();
+    expect(getByText('Delete')).toBeVisible();
+  });
+
+  it('calls the onClose function of the dialog', () => {
+    const { getByText } = renderWithTheme(
+      <NodeBalancerDeleteDialog {...props} />
+    );
+
+    fireEvent.click(getByText('Cancel'));
+    expect(props.onClose).toHaveBeenCalled();
+  });
+});
diff --git a/packages/manager/src/features/NodeBalancers/NodeBalancerPassiveCheck.test.tsx b/packages/manager/src/features/NodeBalancers/NodeBalancerPassiveCheck.test.tsx
new file mode 100644
index 00000000000..50a111b7f85
--- /dev/null
+++ b/packages/manager/src/features/NodeBalancers/NodeBalancerPassiveCheck.test.tsx
@@ -0,0 +1,36 @@
+import { fireEvent } from '@testing-library/react';
+import * as React from 'react';
+
+import { renderWithTheme } from 'src/utilities/testHelpers';
+
+import { nbConfigPanelMockPropsForTest } from './NodeBalancerConfigPanel.test';
+import { PassiveCheck } from './NodeBalancerPassiveCheck';
+
+describe('NodeBalancer PassiveCheck', () => {
+  it('renders the passive check', () => {
+    const { getAllByText, getByText } = renderWithTheme(
+      <PassiveCheck {...nbConfigPanelMockPropsForTest} />
+    );
+
+    expect(getAllByText('Passive Checks')).toHaveLength(2);
+    expect(
+      getByText(
+        'Enable passive checks based on observing communication with back-end nodes.'
+      )
+    ).toBeVisible();
+  });
+
+  it('calls onCheckPassiveChange when the check is toggled', () => {
+    const { getByLabelText } = renderWithTheme(
+      <PassiveCheck {...nbConfigPanelMockPropsForTest} />
+    );
+
+    const passiveChecksToggle = getByLabelText('Passive Checks');
+    expect(passiveChecksToggle).toBeInTheDocument();
+
+    fireEvent.click(passiveChecksToggle);
+    expect(
+      nbConfigPanelMockPropsForTest.onCheckPassiveChange
+    ).toHaveBeenCalled();
+  });
+});
diff --git a/packages/manager/src/features/NodeBalancers/NodeBalancerSelect.test.tsx b/packages/manager/src/features/NodeBalancers/NodeBalancerSelect.test.tsx
index 1c55588a837..4a3d494c358 100644
--- a/packages/manager/src/features/NodeBalancers/NodeBalancerSelect.test.tsx
+++ b/packages/manager/src/features/NodeBalancers/NodeBalancerSelect.test.tsx
@@ -1,4 +1,3 @@
-import { NodeBalancer } from '@linode/api-v4';
 import { screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import React from 'react';
@@ -8,6 +7,8 @@ import { renderWithTheme } from 'src/utilities/testHelpers';
 
 import { NodeBalancerSelect } from './NodeBalancerSelect';
 
+import type { NodeBalancer } from '@linode/api-v4';
+
 const fakeNodeBalancerData = nodeBalancerFactory.build({
   id: 1,
   label: 'metadata-test-region',

From d07788da2c4822031a7ee8cddc4e428ac79eee2a Mon Sep 17 00:00:00 2001
From: Connie Liu <139280159+coliu-akamai@users.noreply.github.com>
Date: Wed, 18 Sep 2024 11:38:35 -0400
Subject: [PATCH 21/62] tech story: Update dompurify and jsPDF to fix
 dependabot alert (#10955)

* updates dompurify to get rid of the dependabot alert

* Added changeset: Update dompurify package to resolve dependabot security alerts

* oh jspdf update just came out

* update changeset
---
 .../pr-10955-tech-stories-1726591613226.md    |  5 +++
 packages/manager/package.json                 |  4 +-
 yarn.lock                                     | 39 ++++++++-----------
 3 files changed, 24 insertions(+), 24 deletions(-)
 create mode 100644 packages/manager/.changeset/pr-10955-tech-stories-1726591613226.md

diff --git a/packages/manager/.changeset/pr-10955-tech-stories-1726591613226.md b/packages/manager/.changeset/pr-10955-tech-stories-1726591613226.md
new file mode 100644
index 00000000000..92d98a87901
--- /dev/null
+++ b/packages/manager/.changeset/pr-10955-tech-stories-1726591613226.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Tech Stories
+---
+
+Update dompurify and jsPDF packages to resolve dependabot security alerts ([#10955](https://github.com/linode/manager/pull/10955))
diff --git a/packages/manager/package.json b/packages/manager/package.json
index bc96cdcedcb..5d9b8542b43 100644
--- a/packages/manager/package.json
+++ b/packages/manager/package.json
@@ -35,7 +35,7 @@
     "chart.js": "~2.9.4",
     "copy-to-clipboard": "^3.0.8",
     "country-region-data": "^3.0.0",
-    "dompurify": "^3.1.3",
+    "dompurify": "^3.1.6",
     "flag-icons": "^6.6.5",
     "font-logos": "^0.18.0",
     "formik": "~2.1.3",
@@ -43,7 +43,7 @@
     "highlight.js": "~10.4.1",
     "immer": "^9.0.6",
     "ipaddr.js": "^1.9.1",
-    "jspdf": "^2.3.1",
+    "jspdf": "^2.5.2",
     "jspdf-autotable": "^3.5.14",
     "launchdarkly-react-client-sdk": "3.0.10",
     "libphonenumber-js": "^1.10.6",
diff --git a/yarn.lock b/yarn.lock
index d77a20ca264..bef73602735 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -328,7 +328,7 @@
   dependencies:
     "@babel/types" "^7.25.6"
 
-"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.10", "@babel/runtime@^7.14.0", "@babel/runtime@^7.14.6", "@babel/runtime@^7.15.4", "@babel/runtime@^7.17.8", "@babel/runtime@^7.18.3", "@babel/runtime@^7.23.2", "@babel/runtime@^7.23.9", "@babel/runtime@^7.4.4", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
+"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.10", "@babel/runtime@^7.14.6", "@babel/runtime@^7.15.4", "@babel/runtime@^7.17.8", "@babel/runtime@^7.18.3", "@babel/runtime@^7.23.2", "@babel/runtime@^7.23.9", "@babel/runtime@^7.4.4", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
   version "7.23.9"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.9.tgz#47791a15e4603bb5f905bc0753801cf21d6345f7"
   integrity sha512-0CX6F+BI2s9dkUqr08KFrAIZgNFj75rdBU/DjCyYLIaV/quFjkk6T+EJ2LkZHyZTbEV4L5p97mNkUsHl2wLFAw==
@@ -5171,15 +5171,15 @@ dom-helpers@^5.0.1:
     "@babel/runtime" "^7.8.7"
     csstype "^3.0.2"
 
-dompurify@^2.2.0:
-  version "2.4.7"
-  resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-2.4.7.tgz#277adeb40a2c84be2d42a8bcd45f582bfa4d0cfc"
-  integrity sha512-kxxKlPEDa6Nc5WJi+qRgPbOAbgTpSULL+vI3NUXsZMlkJxTqYI9wg5ZTay2sFrdZRWHPWNi+EdAhcJf81WtoMQ==
+dompurify@^2.5.4:
+  version "2.5.6"
+  resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-2.5.6.tgz#8402b501611eaa7fb3786072297fcbe2787f8592"
+  integrity sha512-zUTaUBO8pY4+iJMPE1B9XlO2tXVYIcEA4SNGtvDELzTSCQO7RzH+j7S180BmhmJId78lqGU2z19vgVx2Sxs/PQ==
 
-dompurify@^3.1.3:
-  version "3.1.3"
-  resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-3.1.3.tgz#cfe3ce4232c216d923832f68f2aa18b2fb9bd223"
-  integrity sha512-5sOWYSNPaxz6o2MUPvtyxTTqR4D3L77pr5rUQoWgD5ROQtVIZQgJkXbo1DLlK3vj11YGw5+LnF4SYti4gZmwng==
+dompurify@^3.1.6:
+  version "3.1.6"
+  resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-3.1.6.tgz#43c714a94c6a7b8801850f82e756685300a027e2"
+  integrity sha512-cTOAhc36AalkjtBpfG6O8JimdTMWNXjiePT2xQH/ppBGi/4uIpmj8eKyIkMJErXWARyINV/sB38yf8JCLF5pbQ==
 
 dot-case@^3.0.4:
   version "3.0.4"
@@ -6164,12 +6164,7 @@ fd-slicer@~1.1.0:
   dependencies:
     pend "~1.2.0"
 
-fflate@^0.4.8:
-  version "0.4.8"
-  resolved "https://registry.yarnpkg.com/fflate/-/fflate-0.4.8.tgz#f90b82aefbd8ac174213abb338bd7ef848f0f5ae"
-  integrity sha512-FJqqoDBR00Mdj9ppamLa/Y7vxm+PRmNWA67N846RvsoYVMKB4q3y/de5PA7gUmRMYK/8CMz2GDZQmCRN1wBcWA==
-
-fflate@^0.8.2:
+fflate@^0.8.1, fflate@^0.8.2:
   version "0.8.2"
   resolved "https://registry.yarnpkg.com/fflate/-/fflate-0.8.2.tgz#fc8631f5347812ad6028bbe4a2308b2792aa1dea"
   integrity sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A==
@@ -7603,19 +7598,19 @@ jspdf-autotable@^3.5.14:
   resolved "https://registry.yarnpkg.com/jspdf-autotable/-/jspdf-autotable-3.8.1.tgz#e4d9b62356a412024e8f08e84fdeb5b85e1383b5"
   integrity sha512-UjJqo80Z3/WUzDi4JipTGp0pAvNvR3Gsm38inJ5ZnwsJH0Lw4pEbssRSH6zMWAhR1ZkTrsDpQo5p6rZk987/AQ==
 
-jspdf@^2.3.1:
-  version "2.5.1"
-  resolved "https://registry.yarnpkg.com/jspdf/-/jspdf-2.5.1.tgz#00c85250abf5447a05f3b32ab9935ab4a56592cc"
-  integrity sha512-hXObxz7ZqoyhxET78+XR34Xu2qFGrJJ2I2bE5w4SM8eFaFEkW2xcGRVUss360fYelwRSid/jT078kbNvmoW0QA==
+jspdf@^2.5.2:
+  version "2.5.2"
+  resolved "https://registry.yarnpkg.com/jspdf/-/jspdf-2.5.2.tgz#3c35bb1063ee3ad9428e6353852b0d685d1f923a"
+  integrity sha512-myeX9c+p7znDWPk0eTrujCzNjT+CXdXyk7YmJq5nD5V7uLLKmSXnlQ/Jn/kuo3X09Op70Apm0rQSnFWyGK8uEQ==
   dependencies:
-    "@babel/runtime" "^7.14.0"
+    "@babel/runtime" "^7.23.2"
     atob "^2.1.2"
     btoa "^1.2.1"
-    fflate "^0.4.8"
+    fflate "^0.8.1"
   optionalDependencies:
     canvg "^3.0.6"
     core-js "^3.6.0"
-    dompurify "^2.2.0"
+    dompurify "^2.5.4"
     html2canvas "^1.0.0-rc.5"
 
 jsprim@^2.0.2:

From 1a3b0f2fedd3b680442d0a55af493f40ebc62d7a Mon Sep 17 00:00:00 2001
From: Banks Nussman <115251059+bnussman-akamai@users.noreply.github.com>
Date: Wed, 18 Sep 2024 11:40:36 -0400
Subject: [PATCH 22/62] fix: [M3-8422] - Linode IPv6 rDNS typo (#10948)

* remove extra 2

* use `<LinkButton />`

* fix imports

* make `<LinkButton />` focusable by keyboard

* Added changeset: Linode IPv6 Range rDNS typo

* clean up

---------

Co-authored-by: Banks Nussman <banks@nussman.us>
---
 .../.changeset/pr-10948-fixed-1726517375013.md |  5 +++++
 packages/manager/src/components/LinkButton.tsx |  1 +
 .../LinodeNetworking/LinodeIPAddressRow.tsx    | 18 ++++--------------
 3 files changed, 10 insertions(+), 14 deletions(-)
 create mode 100644 packages/manager/.changeset/pr-10948-fixed-1726517375013.md

diff --git a/packages/manager/.changeset/pr-10948-fixed-1726517375013.md b/packages/manager/.changeset/pr-10948-fixed-1726517375013.md
new file mode 100644
index 00000000000..3d205599b99
--- /dev/null
+++ b/packages/manager/.changeset/pr-10948-fixed-1726517375013.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Fixed
+---
+
+Linode IPv6 Range rDNS typo ([#10948](https://github.com/linode/manager/pull/10948))
diff --git a/packages/manager/src/components/LinkButton.tsx b/packages/manager/src/components/LinkButton.tsx
index 4d4c21c25f9..bcb5a83c521 100644
--- a/packages/manager/src/components/LinkButton.tsx
+++ b/packages/manager/src/components/LinkButton.tsx
@@ -46,6 +46,7 @@ export const LinkButton = (props: Props) => {
       disabled={isDisabled}
       onClick={onClick}
       style={style}
+      tabIndex={0}
       type="button"
     >
       {children}
diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeIPAddressRow.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeIPAddressRow.tsx
index f6005ec0024..0a465f16b24 100644
--- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeIPAddressRow.tsx
+++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeIPAddressRow.tsx
@@ -1,10 +1,10 @@
-import { useTheme } from '@mui/material/styles';
 import { styled } from '@mui/material/styles';
 import { parse as parseIP } from 'ipaddr.js';
 import * as React from 'react';
 
 import { CircleProgress } from 'src/components/CircleProgress';
 import { CopyTooltip } from 'src/components/CopyTooltip/CopyTooltip';
+import { LinkButton } from 'src/components/LinkButton';
 import { TableCell } from 'src/components/TableCell';
 import { Typography } from 'src/components/Typography';
 import { StyledTableRow } from 'src/features/Linodes/LinodeEntityDetail.styles';
@@ -136,7 +136,6 @@ const RangeRDNSCell = (props: {
   range: IPRange;
 }) => {
   const { linodeId, onViewDetails, range } = props;
-  const theme = useTheme();
 
   const { data: linode } = useLinodeQuery(linodeId);
 
@@ -169,21 +168,12 @@ const RangeRDNSCell = (props: {
   }
 
   return (
-    <button
+    <LinkButton
       aria-label={`View the ${ipsWithRDNS.length} RDNS Addresses`}
       onClick={onViewDetails}
     >
-      <Typography
-        sx={{
-          '&:hover': {
-            color: theme.palette.primary.light,
-          },
-          color: theme.palette.primary.main,
-        }}
-      >
-        {ipsWithRDNS.length} Addresses2
-      </Typography>
-    </button>
+      {ipsWithRDNS.length} Addresses
+    </LinkButton>
   );
 };
 

From 9734976903f8f29b067acb51edf9c85b3debdcae Mon Sep 17 00:00:00 2001
From: corya-akamai <136115382+corya-akamai@users.noreply.github.com>
Date: Wed, 18 Sep 2024 12:10:59 -0400
Subject: [PATCH 23/62] feat: [UIE-8007] - DBaaS enhancements summary and
 settings (#10939)

---
 ...r-10939-upcoming-features-1726263534115.md |  5 +
 packages/api-v4/src/regions/types.ts          |  1 -
 ...r-10939-upcoming-features-1726263444178.md |  5 +
 packages/manager/src/factories/databases.ts   |  5 +-
 .../DatabaseSettings.test.tsx                 | 26 ++++++
 .../DatabaseSettings/DatabaseSettings.tsx     | 12 ++-
 .../DatabaseSettings/MaintenanceWindow.tsx    | 92 ++++++++++---------
 .../DatabaseSummaryConnectionDetails.tsx      |  7 +-
 .../Databases/DatabaseDetail/index.tsx        |  2 +
 .../DatabaseLanding/DatabaseLandingTable.tsx  | 11 ++-
 packages/manager/src/mocks/serverHandlers.ts  |  6 ++
 packages/validation/src/databases.schema.ts   |  2 +-
 12 files changed, 120 insertions(+), 54 deletions(-)
 create mode 100644 packages/api-v4/.changeset/pr-10939-upcoming-features-1726263534115.md
 create mode 100644 packages/manager/.changeset/pr-10939-upcoming-features-1726263444178.md

diff --git a/packages/api-v4/.changeset/pr-10939-upcoming-features-1726263534115.md b/packages/api-v4/.changeset/pr-10939-upcoming-features-1726263534115.md
new file mode 100644
index 00000000000..dee797b1597
--- /dev/null
+++ b/packages/api-v4/.changeset/pr-10939-upcoming-features-1726263534115.md
@@ -0,0 +1,5 @@
+---
+"@linode/api-v4": Upcoming Features
+---
+
+DBaaS V2 readonly hosts ([#10939](https://github.com/linode/manager/pull/10939))
diff --git a/packages/api-v4/src/regions/types.ts b/packages/api-v4/src/regions/types.ts
index c3db5ec700e..46fcdf2278f 100644
--- a/packages/api-v4/src/regions/types.ts
+++ b/packages/api-v4/src/regions/types.ts
@@ -13,7 +13,6 @@ export type Capabilities =
   | 'Kubernetes'
   | 'Linodes'
   | 'Managed Databases'
-  | 'Managed Databases Beta'
   | 'Metadata'
   | 'NodeBalancers'
   | 'Object Storage'
diff --git a/packages/manager/.changeset/pr-10939-upcoming-features-1726263444178.md b/packages/manager/.changeset/pr-10939-upcoming-features-1726263444178.md
new file mode 100644
index 00000000000..0a3622d74ba
--- /dev/null
+++ b/packages/manager/.changeset/pr-10939-upcoming-features-1726263444178.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+DBaaS V2 enhancements to the Summary and Settings tabs ([#10939](https://github.com/linode/manager/pull/10939))
diff --git a/packages/manager/src/factories/databases.ts b/packages/manager/src/factories/databases.ts
index 14fe03d22f0..c0af060c17a 100644
--- a/packages/manager/src/factories/databases.ts
+++ b/packages/manager/src/factories/databases.ts
@@ -181,8 +181,8 @@ export const databaseInstanceFactory = Factory.Sync.makeFactory<DatabaseInstance
     created: '2021-12-09T17:15:12',
     engine: Factory.each((i) => ['mysql', 'postgresql'][i % 2] as Engine),
     hosts: {
-      primary: 'db-primary-0.b.linodeb.net',
-      secondary: 'db-secondary-0.b.linodeb.net',
+      primary: 'db-mysql-primary-0.b.linodeb.net',
+      secondary: 'db-mysql-secondary-0.b.linodeb.net',
     },
     id: Factory.each((i) => i),
     instance_uri: '',
@@ -222,6 +222,7 @@ export const databaseFactory = Factory.Sync.makeFactory<Database>({
   members: {
     '2.2.2.2': 'primary',
   },
+  platform: pickRandom(['rdbms-legacy', 'rdbms-default']),
   port: 3306,
   region: 'us-east',
   ssl_connection: false,
diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettings.test.tsx b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettings.test.tsx
index d310fbfc8ae..6b908d78728 100644
--- a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettings.test.tsx
+++ b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettings.test.tsx
@@ -51,4 +51,30 @@ describe('DatabaseSettings Component', () => {
       expect(button).toBeEnabled();
     }
   });
+
+  it('Should render Maintenance Window with radio buttons', () => {
+    const database = databaseFactory.build({
+      platform: 'rdbms-legacy',
+    });
+    const { getByRole, queryByText } = renderWithTheme(
+      <DatabaseSettings database={database} />
+    );
+    const radioInput = getByRole('radiogroup');
+    expect(radioInput).toHaveTextContent('Monthly');
+    expect(radioInput).toHaveTextContent('Weekly');
+    expect(queryByText('Maintenance Window')).toBeTruthy();
+  });
+
+  it('Should render Weekly Maintenance Window', () => {
+    const database = databaseFactory.build({
+      platform: 'rdbms-default',
+    });
+    const { queryByText } = renderWithTheme(
+      <DatabaseSettings database={database} />
+    );
+
+    expect(queryByText('Monthly')).toBeNull();
+    expect(queryByText('Weekly')).toBeNull();
+    expect(queryByText('Set a Weekly Maintenance Window')).toBeTruthy();
+  });
 });
diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettings.tsx b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettings.tsx
index f7bead67c5c..c8df3291a1c 100644
--- a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettings.tsx
+++ b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettings.tsx
@@ -28,11 +28,15 @@ export const DatabaseSettings: React.FC<Props> = (props) => {
     </Typography>
   );
 
-  const resetRootPasswordCopy =
-    'Resetting your root password will automatically generate a new password. You can view the updated password on your database cluster summary page. ';
+  const isLegacy = database.platform === 'rdbms-legacy';
 
-  const deleteClusterCopy =
-    'Deleting a database cluster is permanent and cannot be undone.';
+  const resetRootPasswordCopy = isLegacy
+    ? 'Resetting your root password will automatically generate a new password. You can view the updated password on your database cluster summary page. '
+    : 'Reset your root password if someone should no longer have access to the root user or if you believe your password may have been compromised. This will automatically generate a new password that you’ll be able to see on your database cluster summary page.';
+
+  const deleteClusterCopy = isLegacy
+    ? 'Deleting a database cluster is permanent and cannot be undone.'
+    : 'Permanently remove an unused database cluster.';
 
   const [isDeleteDialogOpen, setIsDeleteDialogOpen] = React.useState(false);
   const [
diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/MaintenanceWindow.tsx b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/MaintenanceWindow.tsx
index 5989e725b93..ce32afc346e 100644
--- a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/MaintenanceWindow.tsx
+++ b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/MaintenanceWindow.tsx
@@ -19,8 +19,6 @@ import { FormControlLabel } from 'src/components/FormControlLabel';
 import { RadioGroup } from 'src/components/RadioGroup';
 import { useDatabaseMutation } from 'src/queries/databases/databases';
 
-// import { updateDatabaseSchema } from '@linode/validation/src/databases.schema';
-
 const useStyles = makeStyles()((theme: Theme) => ({
   formControlDropdown: {
     '& label': {
@@ -173,12 +171,22 @@ export const MaintenanceWindow = (props: Props) => {
     onSubmit: handleSaveMaintenanceWindow,
   });
 
+  const isLegacy = database.platform === 'rdbms-legacy';
+
+  const typographyDatabase =
+    'Select when you want the required OS and DB engine updates to take place. The maintenance may cause downtime on clusters with less than 3 nodes (non high-availability clusters).';
+
+  const typographyLegacyDatabase =
+    "OS and DB engine updates will be performed on the schedule below. Select the frequency, day, and time you'd prefer maintenance to occur.";
+
   return (
     <form onSubmit={handleSubmit}>
       <div className={classes.topSection}>
         <div className={classes.sectionTitleAndText}>
           <Typography className={classes.sectionTitle} variant="h3">
-            Maintenance Window
+            {isLegacy
+              ? 'Maintenance Window'
+              : 'Set a Weekly Maintenance Window'}
           </Typography>
           {maintenanceUpdateError ? (
             <Notice spacingTop={8} variant="error">
@@ -186,9 +194,7 @@ export const MaintenanceWindow = (props: Props) => {
             </Notice>
           ) : null}
           <Typography className={classes.sectionText}>
-            OS and DB engine updates will be performed on the schedule below.
-            Select the frequency, day, and time you&rsquo;d prefer maintenance
-            to occur.{' '}
+            {isLegacy ? typographyLegacyDatabase : typographyDatabase}
             {database.cluster_size !== 3
               ? 'For non-HA plans, expect downtime during this window.'
               : null}
@@ -261,7 +267,7 @@ export const MaintenanceWindow = (props: Props) => {
                 />
                 <TooltipIcon
                   sxTooltipIcon={{
-                    marginTop: '1.25rem',
+                    marginTop: '1.75rem',
                     padding: '0px 8px',
                   }}
                   text={
@@ -277,44 +283,46 @@ export const MaintenanceWindow = (props: Props) => {
               </div>
             </FormControl>
           </div>
-          <FormControl
-            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-              setFormTouched(true);
-              setFieldValue('frequency', e.target.value);
-              if (e.target.value === 'weekly') {
-                // If the frequency is weekly, set the 'week_of_month' field to null since that should only be specified for a monthly frequency.
-                setFieldValue('week_of_month', null);
-              }
+          {isLegacy && (
+            <FormControl
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                setFormTouched(true);
+                setFieldValue('frequency', e.target.value);
+                if (e.target.value === 'weekly') {
+                  // If the frequency is weekly, set the 'week_of_month' field to null since that should only be specified for a monthly frequency.
+                  setFieldValue('week_of_month', null);
+                }
 
-              if (e.target.value === 'monthly') {
-                const dayOfWeek =
-                  daySelectionMap.find(
-                    (option) => option.value === values.day_of_week
-                  ) ?? daySelectionMap[0];
+                if (e.target.value === 'monthly') {
+                  const dayOfWeek =
+                    daySelectionMap.find(
+                      (option) => option.value === values.day_of_week
+                    ) ?? daySelectionMap[0];
 
-                weekSelectionModifier(dayOfWeek.label, weekSelectionMap);
-                setFieldValue(
-                  'week_of_month',
-                  modifiedWeekSelectionMap[0].value
-                );
-              }
-            }}
-            disabled={disabled}
-          >
-            <RadioGroup
-              style={{ marginBottom: 0, marginTop: 0 }}
-              value={values.frequency}
+                  weekSelectionModifier(dayOfWeek.label, weekSelectionMap);
+                  setFieldValue(
+                    'week_of_month',
+                    modifiedWeekSelectionMap[0].value
+                  );
+                }
+              }}
+              disabled={disabled}
             >
-              {maintenanceFrequencyMap.map((option) => (
-                <FormControlLabel
-                  control={<Radio />}
-                  key={option.value}
-                  label={option.key}
-                  value={option.value}
-                />
-              ))}
-            </RadioGroup>
-          </FormControl>
+              <RadioGroup
+                style={{ marginBottom: 0, marginTop: 0 }}
+                value={values.frequency}
+              >
+                {maintenanceFrequencyMap.map((option) => (
+                  <FormControlLabel
+                    control={<Radio />}
+                    key={option.value}
+                    label={option.key}
+                    value={option.value}
+                  />
+                ))}
+              </RadioGroup>
+            </FormControl>
+          )}
           <div>
             {values.frequency === 'monthly' ? (
               <FormControl
diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSummary/DatabaseSummaryConnectionDetails.tsx b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSummary/DatabaseSummaryConnectionDetails.tsx
index a313fe32b60..1bb6300fc95 100644
--- a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSummary/DatabaseSummaryConnectionDetails.tsx
+++ b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSummary/DatabaseSummaryConnectionDetails.tsx
@@ -359,7 +359,12 @@ export const DatabaseSummaryConnectionDetails = (props: Props) => {
         {database.hosts.secondary ? (
           <Box alignItems="center" display="flex" flexDirection="row">
             <Typography>
-              <span>private network host</span> = {database.hosts.secondary}
+              {database.platform === 'rdbms-default' ? (
+                <span>read-only host</span>
+              ) : (
+                <span>private network host</span>
+              )}
+              = {database.hosts.secondary}
             </Typography>
             <CopyTooltip
               className={classes.inlineCopyToolTip}
diff --git a/packages/manager/src/features/Databases/DatabaseDetail/index.tsx b/packages/manager/src/features/Databases/DatabaseDetail/index.tsx
index fb48868cbb0..b94efbcc771 100644
--- a/packages/manager/src/features/Databases/DatabaseDetail/index.tsx
+++ b/packages/manager/src/features/Databases/DatabaseDetail/index.tsx
@@ -12,6 +12,7 @@ import { SafeTabPanel } from 'src/components/Tabs/SafeTabPanel';
 import { TabLinkList } from 'src/components/Tabs/TabLinkList';
 import { TabPanels } from 'src/components/Tabs/TabPanels';
 import { Tabs } from 'src/components/Tabs/Tabs';
+import DatabaseLogo from 'src/features/Databases/DatabaseLanding/DatabaseLogo';
 import { useEditableLabelState } from 'src/hooks/useEditableLabelState';
 import { useFlags } from 'src/hooks/useFlags';
 import { useIsResourceRestricted } from 'src/hooks/useIsResourceRestricted';
@@ -199,6 +200,7 @@ export const DatabaseDetail = () => {
           </SafeTabPanel>
         </TabPanels>
       </Tabs>
+      {database.platform === 'rdbms-default' && <DatabaseLogo />}
     </>
   );
 };
diff --git a/packages/manager/src/features/Databases/DatabaseLanding/DatabaseLandingTable.tsx b/packages/manager/src/features/Databases/DatabaseLanding/DatabaseLandingTable.tsx
index 9f4ea829697..3837b6e835a 100644
--- a/packages/manager/src/features/Databases/DatabaseLanding/DatabaseLandingTable.tsx
+++ b/packages/manager/src/features/Databases/DatabaseLanding/DatabaseLandingTable.tsx
@@ -1,4 +1,3 @@
-import { TableCell } from '@mui/material';
 import React from 'react';
 
 import { Hidden } from 'src/components/Hidden';
@@ -60,8 +59,14 @@ const DatabaseLandingTable = ({
               Status
             </TableSortCell>
             {isNewDatabase && (
-              /* TODO add back TableSortCell once API is updated to support sort by Plan */
-              <TableCell>Plan</TableCell>
+              <TableSortCell
+                active={orderBy === 'plan'}
+                direction={order}
+                handleClick={handleOrderChange}
+                label="plan"
+              >
+                Plan
+              </TableSortCell>
             )}
             <Hidden smDown>
               <TableSortCell
diff --git a/packages/manager/src/mocks/serverHandlers.ts b/packages/manager/src/mocks/serverHandlers.ts
index 062b1c9796b..28282349697 100644
--- a/packages/manager/src/mocks/serverHandlers.ts
+++ b/packages/manager/src/mocks/serverHandlers.ts
@@ -210,6 +210,12 @@ const databases = [
         label: `Nanode 1 GB`,
         memory: 1024,
       }),
+      databaseTypeFactory.build({
+        class: 'nanode',
+        id: 'g6-standard-1',
+        label: `Linode 2 GB`,
+        memory: 2048,
+      }),
       ...databaseTypeFactory.buildList(7, { class: 'standard' }),
     ];
     const dedicatedTypes = databaseTypeFactory.buildList(7, {
diff --git a/packages/validation/src/databases.schema.ts b/packages/validation/src/databases.schema.ts
index 1fc6d8684f7..61d3009008c 100644
--- a/packages/validation/src/databases.schema.ts
+++ b/packages/validation/src/databases.schema.ts
@@ -12,7 +12,7 @@ export const createDatabaseSchema = object({
   region: string().required('Region is required'),
   type: string().required('Type is required'),
   cluster_size: number()
-    .oneOf([1, 3], 'Nodes are required')
+    .oneOf([1, 2, 3], 'Nodes are required')
     .required('Nodes are required'),
   replication_type: string().when('engine', {
     is: (engine: string) => Boolean(engine.match(/mysql|postgres/g)),

From 518a6634373ab35b359435dc0ff741d1a23857c3 Mon Sep 17 00:00:00 2001
From: Joseph Cardillo <jocardil@akamai.com>
Date: Wed, 18 Sep 2024 17:44:29 -0400
Subject: [PATCH 24/62] fix: Marketplace Apache Spark Cluster URL Slug (#10965)

* fix apache spark slug

* Added changeset: Fix Marketplace Apache Spark Cluster URL slug to point to correct documentation

* revise changeset
---
 packages/manager/.changeset/pr-10965-fixed-1726675687897.md  | 5 +++++
 packages/manager/src/features/OneClickApps/oneClickAppsv2.ts | 2 +-
 2 files changed, 6 insertions(+), 1 deletion(-)
 create mode 100644 packages/manager/.changeset/pr-10965-fixed-1726675687897.md

diff --git a/packages/manager/.changeset/pr-10965-fixed-1726675687897.md b/packages/manager/.changeset/pr-10965-fixed-1726675687897.md
new file mode 100644
index 00000000000..86badc03d5d
--- /dev/null
+++ b/packages/manager/.changeset/pr-10965-fixed-1726675687897.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Fixed
+---
+
+Incorrect URL slug for Apache Spark Cluster Marketplace documentation ([#10965](https://github.com/linode/manager/pull/10965))
diff --git a/packages/manager/src/features/OneClickApps/oneClickAppsv2.ts b/packages/manager/src/features/OneClickApps/oneClickAppsv2.ts
index 4dbb5d87fc9..dd4e8fba445 100644
--- a/packages/manager/src/features/OneClickApps/oneClickAppsv2.ts
+++ b/packages/manager/src/features/OneClickApps/oneClickAppsv2.ts
@@ -2606,7 +2606,7 @@ export const oneClickApps: Record<number, OCA> = {
     related_guides: [
       {
         href:
-          'https://www.linode.com/docs/marketplace-docs/guides/apache-spark/',
+          'https://www.linode.com/docs/marketplace-docs/guides/apache-spark-cluster/',
         title: 'Deploy Apache Spark through the Linode Marketplace',
       },
     ],

From 2556a99105abc8e82e009e7e1a9dbb392c2cad81 Mon Sep 17 00:00:00 2001
From: Alban Bailly <130582365+abailly-akamai@users.noreply.github.com>
Date: Thu, 19 Sep 2024 09:22:50 -0400
Subject: [PATCH 25/62] chore: bump vite to 5.4.6 (#10960)

* bump vite and vite related packages

* update other packages

* changeset

* update yarn.lock
---
 packages/api-v4/package.json                  |   2 +-
 .../pr-10960-tech-stories-1726671382649.md    |   5 +
 packages/manager/package.json                 |  10 +-
 packages/search/package.json                  |   2 +-
 yarn.lock                                     | 301 ++++++++++++------
 5 files changed, 224 insertions(+), 96 deletions(-)
 create mode 100644 packages/manager/.changeset/pr-10960-tech-stories-1726671382649.md

diff --git a/packages/api-v4/package.json b/packages/api-v4/package.json
index ea692180f5e..31e59148235 100644
--- a/packages/api-v4/package.json
+++ b/packages/api-v4/package.json
@@ -67,7 +67,7 @@
     "lint-staged": "^15.2.9",
     "prettier": "~2.2.1",
     "tsup": "^8.2.4",
-    "vitest": "^2.0.5"
+    "vitest": "^2.1.1"
   },
   "lint-staged": {
     "*.{ts,tsx,js}": [
diff --git a/packages/manager/.changeset/pr-10960-tech-stories-1726671382649.md b/packages/manager/.changeset/pr-10960-tech-stories-1726671382649.md
new file mode 100644
index 00000000000..6afcb97dc1b
--- /dev/null
+++ b/packages/manager/.changeset/pr-10960-tech-stories-1726671382649.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Tech Stories
+---
+
+Update vite and related packages to latest versions ([#10960](https://github.com/linode/manager/pull/10960))
diff --git a/packages/manager/package.json b/packages/manager/package.json
index 5d9b8542b43..3455307a4f1 100644
--- a/packages/manager/package.json
+++ b/packages/manager/package.json
@@ -167,9 +167,9 @@
     "@types/zxcvbn": "^4.4.0",
     "@typescript-eslint/eslint-plugin": "^6.21.0",
     "@typescript-eslint/parser": "^6.21.0",
-    "@vitejs/plugin-react-swc": "^3.5.0",
-    "@vitest/coverage-v8": "^2.0.5",
-    "@vitest/ui": "^2.0.5",
+    "@vitejs/plugin-react-swc": "^3.7.0",
+    "@vitest/coverage-v8": "^2.1.1",
+    "@vitest/ui": "^2.1.1",
     "chai-string": "^1.5.0",
     "chalk": "^5.2.0",
     "commander": "^6.2.1",
@@ -211,9 +211,9 @@
     "storybook": "^8.3.0",
     "storybook-dark-mode": "^4.0.1",
     "ts-node": "^10.9.2",
-    "vite": "^5.1.7",
+    "vite": "^5.4.6",
     "vite-plugin-svgr": "^3.2.0",
-    "vitest": "^2.0.5"
+    "vitest": "^2.1.1"
   },
   "browserslist": [
     ">1%",
diff --git a/packages/search/package.json b/packages/search/package.json
index 9d06a976423..7d29bf499e8 100644
--- a/packages/search/package.json
+++ b/packages/search/package.json
@@ -20,6 +20,6 @@
     "vite": "*"
   },
   "devDependencies": {
-    "vitest": "^2.0.5"
+    "vitest": "^2.1.1"
   }
 }
diff --git a/yarn.lock b/yarn.lock
index bef73602735..eedc9ceaa23 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2361,52 +2361,102 @@
   resolved "https://registry.yarnpkg.com/@swc/core-darwin-arm64/-/core-darwin-arm64-1.4.0.tgz#11abf23b884929a467ba270cf6789b9c50c4248b"
   integrity sha512-UTJ/Vz+s7Pagef6HmufWt6Rs0aUu+EJF4Pzuwvr7JQQ5b1DZeAAUeUtkUTFx/PvCbM8Xfw4XdKBUZfrIKCfW8A==
 
+"@swc/core-darwin-arm64@1.7.26":
+  version "1.7.26"
+  resolved "https://registry.yarnpkg.com/@swc/core-darwin-arm64/-/core-darwin-arm64-1.7.26.tgz#5f4096c00e71771ca1b18c824f0c92a052c70760"
+  integrity sha512-FF3CRYTg6a7ZVW4yT9mesxoVVZTrcSWtmZhxKCYJX9brH4CS/7PRPjAKNk6kzWgWuRoglP7hkjQcd6EpMcZEAw==
+
 "@swc/core-darwin-x64@1.4.0":
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/@swc/core-darwin-x64/-/core-darwin-x64-1.4.0.tgz#f044ddaca60c5081e907b148721ad7461f6f6dfe"
   integrity sha512-f8v58u2GsGak8EtZFN9guXqE0Ep10Suny6xriaW2d8FGqESPyNrnBzli3aqkSeQk5gGqu2zJ7WiiKp3XoUOidA==
 
+"@swc/core-darwin-x64@1.7.26":
+  version "1.7.26"
+  resolved "https://registry.yarnpkg.com/@swc/core-darwin-x64/-/core-darwin-x64-1.7.26.tgz#867b7a4f094e6b64201090ca5fcbf3da7d0f3e22"
+  integrity sha512-az3cibZdsay2HNKmc4bjf62QVukuiMRh5sfM5kHR/JMTrLyS6vSw7Ihs3UTkZjUxkLTT8ro54LI6sV6sUQUbLQ==
+
 "@swc/core-linux-arm-gnueabihf@1.4.0":
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/@swc/core-linux-arm-gnueabihf/-/core-linux-arm-gnueabihf-1.4.0.tgz#52ceea673fc76692c0bd6d58e1863125c3e6173b"
   integrity sha512-q2KAkBzmPcTnRij/Y1fgHCKAGevUX/H4uUESrw1J5gmUg9Qip6onKV80lTumA1/aooGJ18LOsB31qdbwmZk9OA==
 
+"@swc/core-linux-arm-gnueabihf@1.7.26":
+  version "1.7.26"
+  resolved "https://registry.yarnpkg.com/@swc/core-linux-arm-gnueabihf/-/core-linux-arm-gnueabihf-1.7.26.tgz#35bb43894def296d92aaa2cc9372d48042f37777"
+  integrity sha512-VYPFVJDO5zT5U3RpCdHE5v1gz4mmR8BfHecUZTmD2v1JeFY6fv9KArJUpjrHEEsjK/ucXkQFmJ0jaiWXmpOV9Q==
+
 "@swc/core-linux-arm64-gnu@1.4.0":
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/@swc/core-linux-arm64-gnu/-/core-linux-arm64-gnu-1.4.0.tgz#7f3ff1ab824ec48acdb39d231cbcb4096a4f9dd0"
   integrity sha512-SknGu96W0mzHtLHWm+62fk5+Omp9fMPFO7AWyGFmz2tr8EgRRXtTSrBUnWhAbgcalnhen48GsvtMdxf1KNputg==
 
+"@swc/core-linux-arm64-gnu@1.7.26":
+  version "1.7.26"
+  resolved "https://registry.yarnpkg.com/@swc/core-linux-arm64-gnu/-/core-linux-arm64-gnu-1.7.26.tgz#8e2321cc4ec84cbfed8f8e16ff1ed7b854450443"
+  integrity sha512-YKevOV7abpjcAzXrhsl+W48Z9mZvgoVs2eP5nY+uoMAdP2b3GxC0Df1Co0I90o2lkzO4jYBpTMcZlmUXLdXn+Q==
+
 "@swc/core-linux-arm64-musl@1.4.0":
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/@swc/core-linux-arm64-musl/-/core-linux-arm64-musl-1.4.0.tgz#26c3b1f7947c19ef725997af716f230957d586f8"
   integrity sha512-/k3TDvpBRMDNskHooNN1KqwUhcwkfBlIYxRTnJvsfT2C7My4pffR+4KXmt0IKynlTTbCdlU/4jgX4801FSuliw==
 
+"@swc/core-linux-arm64-musl@1.7.26":
+  version "1.7.26"
+  resolved "https://registry.yarnpkg.com/@swc/core-linux-arm64-musl/-/core-linux-arm64-musl-1.7.26.tgz#b1c16e4b23ffa9ff19973eda6ffee35d2a7de7b0"
+  integrity sha512-3w8iZICMkQQON0uIcvz7+Q1MPOW6hJ4O5ETjA0LSP/tuKqx30hIniCGOgPDnv3UTMruLUnQbtBwVCZTBKR3Rkg==
+
 "@swc/core-linux-x64-gnu@1.4.0":
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/@swc/core-linux-x64-gnu/-/core-linux-x64-gnu-1.4.0.tgz#2c7d03a04a7d045394cfed7d46419ff8816ec22e"
   integrity sha512-GYsTMvNt5+WTVlwwQzOOWsPMw6P/F41u5PGHWmfev8Nd4QJ1h3rWPySKk4mV42IJwH9MgQCVSl3ygwNqwl6kFg==
 
+"@swc/core-linux-x64-gnu@1.7.26":
+  version "1.7.26"
+  resolved "https://registry.yarnpkg.com/@swc/core-linux-x64-gnu/-/core-linux-x64-gnu-1.7.26.tgz#388e2cc13a010cd28787aead2cecf31eb491836d"
+  integrity sha512-c+pp9Zkk2lqb06bNGkR2Looxrs7FtGDMA4/aHjZcCqATgp348hOKH5WPvNLBl+yPrISuWjbKDVn3NgAvfvpH4w==
+
 "@swc/core-linux-x64-musl@1.4.0":
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/@swc/core-linux-x64-musl/-/core-linux-x64-musl-1.4.0.tgz#0e76442dfb6d5026d8d6e7db6b2f4922b7692d0f"
   integrity sha512-jGVPdM/VwF7kK/uYRW5N6FwzKf/FnDjGIR3RPvQokjYJy7Auk+3Oj21C0Jev7sIT9RYnO/TrFEoEozKeD/z2Qw==
 
+"@swc/core-linux-x64-musl@1.7.26":
+  version "1.7.26"
+  resolved "https://registry.yarnpkg.com/@swc/core-linux-x64-musl/-/core-linux-x64-musl-1.7.26.tgz#51e0ff30981f26d7a5b97a7a7b5b291bad050d1a"
+  integrity sha512-PgtyfHBF6xG87dUSSdTJHwZ3/8vWZfNIXQV2GlwEpslrOkGqy+WaiiyE7Of7z9AvDILfBBBcJvJ/r8u980wAfQ==
+
 "@swc/core-win32-arm64-msvc@1.4.0":
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/@swc/core-win32-arm64-msvc/-/core-win32-arm64-msvc-1.4.0.tgz#0177bebf312eb251d6749ab76259c0e08088e837"
   integrity sha512-biHYm1AronEKlt47O/H8sSOBM2BKXMmWT+ApvlxUw50m1RGNnVnE0bgY7tylFuuSiWyXsQPJbmUV708JqORXVg==
 
+"@swc/core-win32-arm64-msvc@1.7.26":
+  version "1.7.26"
+  resolved "https://registry.yarnpkg.com/@swc/core-win32-arm64-msvc/-/core-win32-arm64-msvc-1.7.26.tgz#a7fdcc4074c34ee6a026506b594d00323383c11f"
+  integrity sha512-9TNXPIJqFynlAOrRD6tUQjMq7KApSklK3R/tXgIxc7Qx+lWu8hlDQ/kVPLpU7PWvMMwC/3hKBW+p5f+Tms1hmA==
+
 "@swc/core-win32-ia32-msvc@1.4.0":
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/@swc/core-win32-ia32-msvc/-/core-win32-ia32-msvc-1.4.0.tgz#27fa650280e5651aa42129eaf03e02787b866417"
   integrity sha512-TL5L2tFQb19kJwv6+elToGBj74QXCn9j+hZfwQatvZEJRA5rDK16eH6oAE751dGUArhnWlW3Vj65hViPvTuycw==
 
+"@swc/core-win32-ia32-msvc@1.7.26":
+  version "1.7.26"
+  resolved "https://registry.yarnpkg.com/@swc/core-win32-ia32-msvc/-/core-win32-ia32-msvc-1.7.26.tgz#ae7be6dde798eebee2000b8fd84e01a439b5bd6a"
+  integrity sha512-9YngxNcG3177GYdsTum4V98Re+TlCeJEP4kEwEg9EagT5s3YejYdKwVAkAsJszzkXuyRDdnHUpYbTrPG6FiXrQ==
+
 "@swc/core-win32-x64-msvc@1.4.0":
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/@swc/core-win32-x64-msvc/-/core-win32-x64-msvc-1.4.0.tgz#bd575c599bd6847bddc4863a3babd85e3db5e11e"
   integrity sha512-e2xVezU7XZ2Stzn4i7TOQe2Kn84oYdG0M3A7XI7oTdcpsKCcKwgiMoroiAhqCv+iN20KNqhnWwJiUiTj/qN5AA==
 
-"@swc/core@^1.3.1", "@swc/core@^1.3.107":
+"@swc/core-win32-x64-msvc@1.7.26":
+  version "1.7.26"
+  resolved "https://registry.yarnpkg.com/@swc/core-win32-x64-msvc/-/core-win32-x64-msvc-1.7.26.tgz#310d607004d7319085a4dec20c0c38c3405cc05b"
+  integrity sha512-VR+hzg9XqucgLjXxA13MtV5O3C0bK0ywtLIBw/+a+O+Oc6mxFWHtdUeXDbIi5AiPbn0fjgVJMqYnyjGyyX8u0w==
+
+"@swc/core@^1.3.1":
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/@swc/core/-/core-1.4.0.tgz#3a0ceeea5b889173f4592955fe1da4d071d86a76"
   integrity sha512-wc5DMI5BJftnK0Fyx9SNJKkA0+BZSJQx8430yutWmsILkHMBD3Yd9GhlMaxasab9RhgKqZp7Ht30hUYO5ZDvQg==
@@ -2425,11 +2475,37 @@
     "@swc/core-win32-ia32-msvc" "1.4.0"
     "@swc/core-win32-x64-msvc" "1.4.0"
 
-"@swc/counter@^0.1.1":
+"@swc/core@^1.5.7":
+  version "1.7.26"
+  resolved "https://registry.yarnpkg.com/@swc/core/-/core-1.7.26.tgz#beda9b82063fcec7b56c958804a4d175aecf9a9d"
+  integrity sha512-f5uYFf+TmMQyYIoxkn/evWhNGuUzC730dFwAKGwBVHHVoPyak1/GvJUm6i1SKl+2Hrj9oN0i3WSoWWZ4pgI8lw==
+  dependencies:
+    "@swc/counter" "^0.1.3"
+    "@swc/types" "^0.1.12"
+  optionalDependencies:
+    "@swc/core-darwin-arm64" "1.7.26"
+    "@swc/core-darwin-x64" "1.7.26"
+    "@swc/core-linux-arm-gnueabihf" "1.7.26"
+    "@swc/core-linux-arm64-gnu" "1.7.26"
+    "@swc/core-linux-arm64-musl" "1.7.26"
+    "@swc/core-linux-x64-gnu" "1.7.26"
+    "@swc/core-linux-x64-musl" "1.7.26"
+    "@swc/core-win32-arm64-msvc" "1.7.26"
+    "@swc/core-win32-ia32-msvc" "1.7.26"
+    "@swc/core-win32-x64-msvc" "1.7.26"
+
+"@swc/counter@^0.1.1", "@swc/counter@^0.1.3":
   version "0.1.3"
   resolved "https://registry.yarnpkg.com/@swc/counter/-/counter-0.1.3.tgz#cc7463bd02949611c6329596fccd2b0ec782b0e9"
   integrity sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ==
 
+"@swc/types@^0.1.12":
+  version "0.1.12"
+  resolved "https://registry.yarnpkg.com/@swc/types/-/types-0.1.12.tgz#7f632c06ab4092ce0ebd046ed77ff7557442282f"
+  integrity sha512-wBJA+SdtkbFhHjTMYH+dEH1y4VpfGdAc2Kw/LK09i9bXd/K6j6PkDcFCEzb6iVfZMkPRrl/q0e3toqTAJdkIVA==
+  dependencies:
+    "@swc/counter" "^0.1.3"
+
 "@swc/types@^0.1.5":
   version "0.1.5"
   resolved "https://registry.yarnpkg.com/@swc/types/-/types-0.1.5.tgz#043b731d4f56a79b4897a3de1af35e75d56bc63a"
@@ -3384,92 +3460,100 @@
   resolved "https://registry.yarnpkg.com/@ungap/structured-clone/-/structured-clone-1.2.0.tgz#756641adb587851b5ccb3e095daf27ae581c8406"
   integrity sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==
 
-"@vitejs/plugin-react-swc@^3.5.0":
-  version "3.6.0"
-  resolved "https://registry.yarnpkg.com/@vitejs/plugin-react-swc/-/plugin-react-swc-3.6.0.tgz#dc9cd1363baf3780f3ad3e0a12a46a3ffe0c7526"
-  integrity sha512-XFRbsGgpGxGzEV5i5+vRiro1bwcIaZDIdBRP16qwm+jP68ue/S8FJTBEgOeojtVDYrbSua3XFp71kC8VJE6v+g==
+"@vitejs/plugin-react-swc@^3.7.0":
+  version "3.7.0"
+  resolved "https://registry.yarnpkg.com/@vitejs/plugin-react-swc/-/plugin-react-swc-3.7.0.tgz#e456c0a6d7f562268e1d231af9ac46b86ef47d88"
+  integrity sha512-yrknSb3Dci6svCd/qhHqhFPDSw0QtjumcqdKMoNNzmOl5lMXTTiqzjWtG4Qask2HdvvzaNgSunbQGet8/GrKdA==
   dependencies:
-    "@swc/core" "^1.3.107"
+    "@swc/core" "^1.5.7"
 
-"@vitest/coverage-v8@^2.0.5":
-  version "2.0.5"
-  resolved "https://registry.yarnpkg.com/@vitest/coverage-v8/-/coverage-v8-2.0.5.tgz#411961ce4fd1177a32b4dd74ab576ed3b859155e"
-  integrity sha512-qeFcySCg5FLO2bHHSa0tAZAOnAUbp4L6/A5JDuj9+bt53JREl8hpLjLHEWF0e/gWc8INVpJaqA7+Ene2rclpZg==
+"@vitest/coverage-v8@^2.1.1":
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/@vitest/coverage-v8/-/coverage-v8-2.1.1.tgz#a1f58cafe7d4306ec751c1054b58f1b60327693a"
+  integrity sha512-md/A7A3c42oTT8JUHSqjP5uKTWJejzUW4jalpvs+rZ27gsURsMU8DEb+8Jf8C6Kj2gwfSHJqobDNBuoqlm0cFw==
   dependencies:
     "@ampproject/remapping" "^2.3.0"
     "@bcoe/v8-coverage" "^0.2.3"
-    debug "^4.3.5"
+    debug "^4.3.6"
     istanbul-lib-coverage "^3.2.2"
     istanbul-lib-report "^3.0.1"
     istanbul-lib-source-maps "^5.0.6"
     istanbul-reports "^3.1.7"
-    magic-string "^0.30.10"
+    magic-string "^0.30.11"
     magicast "^0.3.4"
     std-env "^3.7.0"
     test-exclude "^7.0.1"
     tinyrainbow "^1.2.0"
 
-"@vitest/expect@2.0.5":
-  version "2.0.5"
-  resolved "https://registry.yarnpkg.com/@vitest/expect/-/expect-2.0.5.tgz#f3745a6a2c18acbea4d39f5935e913f40d26fa86"
-  integrity sha512-yHZtwuP7JZivj65Gxoi8upUN2OzHTi3zVfjwdpu2WrvCZPLwsJ2Ey5ILIPccoW23dd/zQBlJ4/dhi7DWNyXCpA==
+"@vitest/expect@2.1.1":
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/@vitest/expect/-/expect-2.1.1.tgz#907137a86246c5328929d796d741c4e95d1ee19d"
+  integrity sha512-YeueunS0HiHiQxk+KEOnq/QMzlUuOzbU1Go+PgAsHvvv3tUkJPm9xWt+6ITNTlzsMXUjmgm5T+U7KBPK2qQV6w==
   dependencies:
-    "@vitest/spy" "2.0.5"
-    "@vitest/utils" "2.0.5"
+    "@vitest/spy" "2.1.1"
+    "@vitest/utils" "2.1.1"
     chai "^5.1.1"
     tinyrainbow "^1.2.0"
 
-"@vitest/pretty-format@2.0.5", "@vitest/pretty-format@^2.0.5":
-  version "2.0.5"
-  resolved "https://registry.yarnpkg.com/@vitest/pretty-format/-/pretty-format-2.0.5.tgz#91d2e6d3a7235c742e1a6cc50e7786e2f2979b1e"
-  integrity sha512-h8k+1oWHfwTkyTkb9egzwNMfJAEx4veaPSnMeKbVSjp4euqGSbQlm5+6VHwTr7u4FJslVVsUG5nopCaAYdOmSQ==
+"@vitest/mocker@2.1.1":
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/@vitest/mocker/-/mocker-2.1.1.tgz#3e37c80ac267318d4aa03c5073a017d148dc8e67"
+  integrity sha512-LNN5VwOEdJqCmJ/2XJBywB11DLlkbY0ooDJW3uRX5cZyYCrc4PI/ePX0iQhE3BiEGiQmK4GE7Q/PqCkkaiPnrA==
+  dependencies:
+    "@vitest/spy" "^2.1.0-beta.1"
+    estree-walker "^3.0.3"
+    magic-string "^0.30.11"
+
+"@vitest/pretty-format@2.1.1", "@vitest/pretty-format@^2.1.1":
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/@vitest/pretty-format/-/pretty-format-2.1.1.tgz#fea25dd4e88c3c1329fbccd1d16b1d607eb40067"
+  integrity sha512-SjxPFOtuINDUW8/UkElJYQSFtnWX7tMksSGW0vfjxMneFqxVr8YJ979QpMbDW7g+BIiq88RAGDjf7en6rvLPPQ==
   dependencies:
     tinyrainbow "^1.2.0"
 
-"@vitest/runner@2.0.5":
-  version "2.0.5"
-  resolved "https://registry.yarnpkg.com/@vitest/runner/-/runner-2.0.5.tgz#89197e712bb93513537d6876995a4843392b2a84"
-  integrity sha512-TfRfZa6Bkk9ky4tW0z20WKXFEwwvWhRY+84CnSEtq4+3ZvDlJyY32oNTJtM7AW9ihW90tX/1Q78cb6FjoAs+ig==
+"@vitest/runner@2.1.1":
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/@vitest/runner/-/runner-2.1.1.tgz#f3b1fbc3c109fc44e2cceecc881344453f275559"
+  integrity sha512-uTPuY6PWOYitIkLPidaY5L3t0JJITdGTSwBtwMjKzo5O6RCOEncz9PUN+0pDidX8kTHYjO0EwUIvhlGpnGpxmA==
   dependencies:
-    "@vitest/utils" "2.0.5"
+    "@vitest/utils" "2.1.1"
     pathe "^1.1.2"
 
-"@vitest/snapshot@2.0.5":
-  version "2.0.5"
-  resolved "https://registry.yarnpkg.com/@vitest/snapshot/-/snapshot-2.0.5.tgz#a2346bc5013b73c44670c277c430e0334690a162"
-  integrity sha512-SgCPUeDFLaM0mIUHfaArq8fD2WbaXG/zVXjRupthYfYGzc8ztbFbu6dUNOblBG7XLMR1kEhS/DNnfCZ2IhdDew==
+"@vitest/snapshot@2.1.1":
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/@vitest/snapshot/-/snapshot-2.1.1.tgz#38ef23104e90231fea5540754a19d8468afbba66"
+  integrity sha512-BnSku1WFy7r4mm96ha2FzN99AZJgpZOWrAhtQfoxjUU5YMRpq1zmHRq7a5K9/NjqonebO7iVDla+VvZS8BOWMw==
   dependencies:
-    "@vitest/pretty-format" "2.0.5"
-    magic-string "^0.30.10"
+    "@vitest/pretty-format" "2.1.1"
+    magic-string "^0.30.11"
     pathe "^1.1.2"
 
-"@vitest/spy@2.0.5":
-  version "2.0.5"
-  resolved "https://registry.yarnpkg.com/@vitest/spy/-/spy-2.0.5.tgz#590fc07df84a78b8e9dd976ec2090920084a2b9f"
-  integrity sha512-c/jdthAhvJdpfVuaexSrnawxZz6pywlTPe84LUB2m/4t3rl2fTo9NFGBG4oWgaD+FTgDDV8hJ/nibT7IfH3JfA==
+"@vitest/spy@2.1.1", "@vitest/spy@^2.1.0-beta.1":
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/@vitest/spy/-/spy-2.1.1.tgz#20891f7421a994256ea0d739ed72f05532c78488"
+  integrity sha512-ZM39BnZ9t/xZ/nF4UwRH5il0Sw93QnZXd9NAZGRpIgj0yvVwPpLd702s/Cx955rGaMlyBQkZJ2Ir7qyY48VZ+g==
   dependencies:
     tinyspy "^3.0.0"
 
-"@vitest/ui@^2.0.5":
-  version "2.0.5"
-  resolved "https://registry.yarnpkg.com/@vitest/ui/-/ui-2.0.5.tgz#cfae5f6c7a1cc8cd1be87c88153215cb60a2cc0d"
-  integrity sha512-m+ZpVt/PVi/nbeRKEjdiYeoh0aOfI9zr3Ria9LO7V2PlMETtAXJS3uETEZkc8Be2oOl8mhd7Ew+5SRBXRYncNw==
+"@vitest/ui@^2.1.1":
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/@vitest/ui/-/ui-2.1.1.tgz#3d2b3c4e2f8f30c3615e731e0c63510799546b94"
+  integrity sha512-IIxo2LkQDA+1TZdPLYPclzsXukBWd5dX2CKpGqH8CCt8Wh0ZuDn4+vuQ9qlppEju6/igDGzjWF/zyorfsf+nHg==
   dependencies:
-    "@vitest/utils" "2.0.5"
-    fast-glob "^3.3.2"
+    "@vitest/utils" "2.1.1"
     fflate "^0.8.2"
     flatted "^3.3.1"
     pathe "^1.1.2"
     sirv "^2.0.4"
+    tinyglobby "^0.2.6"
     tinyrainbow "^1.2.0"
 
-"@vitest/utils@2.0.5":
-  version "2.0.5"
-  resolved "https://registry.yarnpkg.com/@vitest/utils/-/utils-2.0.5.tgz#6f8307a4b6bc6ceb9270007f73c67c915944e926"
-  integrity sha512-d8HKbqIcya+GR67mkZbrzhS5kKhtp8dQLcmRZLGTscGVg7yImT82cIrhtn2L8+VujWcy6KZweApgNmPsTAO/UQ==
+"@vitest/utils@2.1.1":
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/@vitest/utils/-/utils-2.1.1.tgz#284d016449ecb4f8704d198d049fde8360cc136e"
+  integrity sha512-Y6Q9TsI+qJ2CC0ZKj6VBb+T8UPz593N113nnUykqwANqhgf3QkZeHFlusgKLTqrnVHbj/XDKZcDHol+dxVT+rQ==
   dependencies:
-    "@vitest/pretty-format" "2.0.5"
-    estree-walker "^3.0.3"
+    "@vitest/pretty-format" "2.1.1"
     loupe "^3.1.1"
     tinyrainbow "^1.2.0"
 
@@ -5025,6 +5109,13 @@ debug@^4.3.5, debug@~4.3.6:
   dependencies:
     ms "2.1.2"
 
+debug@^4.3.6:
+  version "4.3.7"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.7.tgz#87945b4151a011d76d95a198d7111c865c360a52"
+  integrity sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==
+  dependencies:
+    ms "^2.1.3"
+
 decamelize@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
@@ -5982,7 +6073,7 @@ execa@^5.1.1:
     signal-exit "^3.0.3"
     strip-final-newline "^2.0.0"
 
-execa@^8.0.1, execa@~8.0.1:
+execa@~8.0.1:
   version "8.0.1"
   resolved "https://registry.yarnpkg.com/execa/-/execa-8.0.1.tgz#51f6a5943b580f963c3ca9c6321796db8cc39b8c"
   integrity sha512-VyhnebXciFV2DESc+p6B+y0LjSm0krU4OgJN44qFAhBY0TJ+1V61tYD2+wHusZ6F9n5K+vl8k0sTy7PEfV4qpg==
@@ -6109,7 +6200,7 @@ fast-equals@^5.0.1:
   resolved "https://registry.yarnpkg.com/fast-equals/-/fast-equals-5.0.1.tgz#a4eefe3c5d1c0d021aeed0bc10ba5e0c12ee405d"
   integrity sha512-WF1Wi8PwwSY7/6Kx0vKXtw8RwuSGoM1bvDaJbu7MxDlR1vovZjIAKrnzyrThgAjm6JDTu0fVgWXDlMGspodfoQ==
 
-fast-glob@^3.2.9, fast-glob@^3.3.2:
+fast-glob@^3.2.9:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.3.2.tgz#a904501e57cfdd2ffcded45e99a54fef55e46129"
   integrity sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==
@@ -6164,6 +6255,11 @@ fd-slicer@~1.1.0:
   dependencies:
     pend "~1.2.0"
 
+fdir@^6.3.0:
+  version "6.3.0"
+  resolved "https://registry.yarnpkg.com/fdir/-/fdir-6.3.0.tgz#fcca5a23ea20e767b15e081ee13b3e6488ee0bb0"
+  integrity sha512-QOnuT+BOtivR77wYvCWHfGt9s4Pz1VIMbD463vegT5MLqNXy8rYFT/lPVEqf/bhYeT6qmqrNHhsX+rWwe3rOCQ==
+
 fflate@^0.8.1, fflate@^0.8.2:
   version "0.8.2"
   resolved "https://registry.yarnpkg.com/fflate/-/fflate-0.8.2.tgz#fc8631f5347812ad6028bbe4a2308b2792aa1dea"
@@ -7979,7 +8075,7 @@ magic-string@^0.30.0:
   dependencies:
     "@jridgewell/sourcemap-codec" "^1.4.15"
 
-magic-string@^0.30.10:
+magic-string@^0.30.11:
   version "0.30.11"
   resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.30.11.tgz#301a6f93b3e8c2cb13ac1a7a673492c0dfd12954"
   integrity sha512-+Wri9p0QHMy+545hKww7YAu5NyzF8iomPL/RQazugQ9+Ez4Ic3mERMd8ZTX5rfK944j+560ZJi8iAwgak1Ac7A==
@@ -8656,7 +8752,7 @@ ms@2.1.2:
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
   integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
 
-ms@2.1.3, ms@^2.1.1:
+ms@2.1.3, ms@^2.1.1, ms@^2.1.3:
   version "2.1.3"
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2"
   integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==
@@ -9248,11 +9344,21 @@ picocolors@^1.0.1:
   resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.1.tgz#a8ad579b571952f0e5d25892de5445bcfe25aaa1"
   integrity sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==
 
+picocolors@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.1.0.tgz#5358b76a78cde483ba5cef6a9dc9671440b27d59"
+  integrity sha512-TQ92mBOW0l3LeMeyLV6mzy/kWr8lkd/hp3mTg7wYK7zJhuBStmGMBG0BdeDZS/dZx1IukaX6Bk11zcln25o1Aw==
+
 picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.3.1:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
   integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
 
+picomatch@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-4.0.2.tgz#77c742931e8f3b8820946c76cd0c1f13730d1dab"
+  integrity sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==
+
 pidtree@~0.6.0:
   version "0.6.0"
   resolved "https://registry.yarnpkg.com/pidtree/-/pidtree-0.6.0.tgz#90ad7b6d42d5841e69e0a2419ef38f8883aa057c"
@@ -9322,14 +9428,14 @@ postcss@^8.4.35:
     picocolors "^1.0.0"
     source-map-js "^1.0.2"
 
-postcss@^8.4.41:
-  version "8.4.41"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.41.tgz#d6104d3ba272d882fe18fc07d15dc2da62fa2681"
-  integrity sha512-TesUflQ0WKZqAvg52PWL6kHgLKP6xB6heTOdoYM0Wt2UHyxNa4K25EZZMgKns3BH1RLVbZCREPpLY0rhnNoHVQ==
+postcss@^8.4.43:
+  version "8.4.47"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.47.tgz#5bf6c9a010f3e724c503bf03ef7947dcb0fea365"
+  integrity sha512-56rxCq7G/XfB4EkXq9Egn5GCqugWvDFjafDOThIdMBsI15iqPqR5r15TfSr1YPYeEI19YeaXMCbY6u88Y76GLQ==
   dependencies:
     nanoid "^3.3.7"
-    picocolors "^1.0.1"
-    source-map-js "^1.2.0"
+    picocolors "^1.1.0"
+    source-map-js "^1.2.1"
 
 prelude-ls@^1.2.1:
   version "1.2.1"
@@ -10672,6 +10778,11 @@ source-map-js@^1.2.0:
   resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.2.0.tgz#16b809c162517b5b8c3e7dcd315a2a5c2612b2af"
   integrity sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==
 
+source-map-js@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.2.1.tgz#1ce5650fddd87abc099eda37dcff024c2667ae46"
+  integrity sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==
+
 source-map-support@^0.5.19:
   version "0.5.21"
   resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.21.tgz#04fe7c7f9e1ed2d662233c28cb2b35b9f63f6e4f"
@@ -11184,7 +11295,7 @@ tiny-warning@^1.0.0, 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==
 
-tinybench@^2.8.0:
+tinybench@^2.9.0:
   version "2.9.0"
   resolved "https://registry.yarnpkg.com/tinybench/-/tinybench-2.9.0.tgz#103c9f8ba6d7237a47ab6dd1dcff77251863426b"
   integrity sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==
@@ -11194,6 +11305,19 @@ tinycolor2@^1.6.0:
   resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.6.0.tgz#f98007460169b0263b97072c5ae92484ce02d09e"
   integrity sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw==
 
+tinyexec@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/tinyexec/-/tinyexec-0.3.0.tgz#ed60cfce19c17799d4a241e06b31b0ec2bee69e6"
+  integrity sha512-tVGE0mVJPGb0chKhqmsoosjsS+qUnJVGJpZgsHYQcGoPlG3B51R3PouqTgEGH2Dc9jjFyOqOpix6ZHNMXp1FZg==
+
+tinyglobby@^0.2.6:
+  version "0.2.6"
+  resolved "https://registry.yarnpkg.com/tinyglobby/-/tinyglobby-0.2.6.tgz#950baf1462d0c0b443bc3d754d0d39c2e589aaae"
+  integrity sha512-NbBoFBpqfcgd1tCiO8Lkfdk+xrA7mlLR9zgvZcZWQQwU63XAfUePyd6wZBaU93Hqw347lHnwFzttAkemHzzz4g==
+  dependencies:
+    fdir "^6.3.0"
+    picomatch "^4.0.2"
+
 tinypool@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/tinypool/-/tinypool-1.0.1.tgz#c64233c4fac4304e109a64340178760116dbe1fe"
@@ -11775,15 +11899,14 @@ victory-vendor@^36.6.8:
     d3-time "^3.0.0"
     d3-timer "^3.0.1"
 
-vite-node@2.0.5:
-  version "2.0.5"
-  resolved "https://registry.yarnpkg.com/vite-node/-/vite-node-2.0.5.tgz#36d909188fc6e3aba3da5fc095b3637d0d18e27b"
-  integrity sha512-LdsW4pxj0Ot69FAoXZ1yTnA9bjGohr2yNBU7QKRxpz8ITSkhuDl6h3zS/tvgz4qrNjeRnvrWeXQ8ZF7Um4W00Q==
+vite-node@2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/vite-node/-/vite-node-2.1.1.tgz#7d46f623c04dfed6df34e7127711508a3386fa1c"
+  integrity sha512-N/mGckI1suG/5wQI35XeR9rsMsPqKXzq1CdUndzVstBj/HvyxxGctwnK6WX43NGt5L3Z5tcRf83g4TITKJhPrA==
   dependencies:
     cac "^6.7.14"
-    debug "^4.3.5"
+    debug "^4.3.6"
     pathe "^1.1.2"
-    tinyrainbow "^1.2.0"
     vite "^5.0.0"
 
 vite-plugin-svgr@^3.2.0:
@@ -11806,40 +11929,40 @@ vite@^5.0.0:
   optionalDependencies:
     fsevents "~2.3.3"
 
-vite@^5.1.7:
-  version "5.4.2"
-  resolved "https://registry.yarnpkg.com/vite/-/vite-5.4.2.tgz#8acb6ec4bfab823cdfc1cb2d6c53ed311bc4e47e"
-  integrity sha512-dDrQTRHp5C1fTFzcSaMxjk6vdpKvT+2/mIdE07Gw2ykehT49O0z/VHS3zZ8iV/Gh8BJJKHWOe5RjaNrW5xf/GA==
+vite@^5.4.6:
+  version "5.4.6"
+  resolved "https://registry.yarnpkg.com/vite/-/vite-5.4.6.tgz#85a93a1228a7fb5a723ca1743e337a2588ed008f"
+  integrity sha512-IeL5f8OO5nylsgzd9tq4qD2QqI0k2CQLGrWD0rCN0EQJZpBK5vJAx0I+GDkMOXxQX/OfFHMuLIx6ddAxGX/k+Q==
   dependencies:
     esbuild "^0.21.3"
-    postcss "^8.4.41"
+    postcss "^8.4.43"
     rollup "^4.20.0"
   optionalDependencies:
     fsevents "~2.3.3"
 
-vitest@^2.0.5:
-  version "2.0.5"
-  resolved "https://registry.yarnpkg.com/vitest/-/vitest-2.0.5.tgz#2f15a532704a7181528e399cc5b754c7f335fd62"
-  integrity sha512-8GUxONfauuIdeSl5f9GTgVEpg5BTOlplET4WEDaeY2QBiN8wSm68vxN/tb5z405OwppfoCavnwXafiaYBC/xOA==
-  dependencies:
-    "@ampproject/remapping" "^2.3.0"
-    "@vitest/expect" "2.0.5"
-    "@vitest/pretty-format" "^2.0.5"
-    "@vitest/runner" "2.0.5"
-    "@vitest/snapshot" "2.0.5"
-    "@vitest/spy" "2.0.5"
-    "@vitest/utils" "2.0.5"
+vitest@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/vitest/-/vitest-2.1.1.tgz#24a6f6f5d894509f10685b82de008c507faacbb1"
+  integrity sha512-97We7/VC0e9X5zBVkvt7SGQMGrRtn3KtySFQG5fpaMlS+l62eeXRQO633AYhSTC3z7IMebnPPNjGXVGNRFlxBA==
+  dependencies:
+    "@vitest/expect" "2.1.1"
+    "@vitest/mocker" "2.1.1"
+    "@vitest/pretty-format" "^2.1.1"
+    "@vitest/runner" "2.1.1"
+    "@vitest/snapshot" "2.1.1"
+    "@vitest/spy" "2.1.1"
+    "@vitest/utils" "2.1.1"
     chai "^5.1.1"
-    debug "^4.3.5"
-    execa "^8.0.1"
-    magic-string "^0.30.10"
+    debug "^4.3.6"
+    magic-string "^0.30.11"
     pathe "^1.1.2"
     std-env "^3.7.0"
-    tinybench "^2.8.0"
+    tinybench "^2.9.0"
+    tinyexec "^0.3.0"
     tinypool "^1.0.0"
     tinyrainbow "^1.2.0"
     vite "^5.0.0"
-    vite-node "2.0.5"
+    vite-node "2.1.1"
     why-is-node-running "^2.3.0"
 
 w3c-xmlserializer@^5.0.0:

From c602e287fde6103041d2fb579eba1db735b632b0 Mon Sep 17 00:00:00 2001
From: Mariah Jacobs <114685994+mjac0bs@users.noreply.github.com>
Date: Thu, 19 Sep 2024 07:41:26 -0700
Subject: [PATCH 26/62] change: [M3-8599] - Disable 'Save' button in Change
 Avatar Color dialog until color is changed (#10963)

* Disable Save button until color is changed

* Update unit test

* Added changeset: Disable 'Save' button in Change Avatar Color dialog until color is changed

* Update test coverage
---
 .../pr-10963-changed-1726672295505.md         |  5 +++
 .../AvatarColorPickerDialog.test.tsx          | 31 ++++++++++++++-----
 .../AvatarColorPickerDialog.tsx               |  1 +
 3 files changed, 30 insertions(+), 7 deletions(-)
 create mode 100644 packages/manager/.changeset/pr-10963-changed-1726672295505.md

diff --git a/packages/manager/.changeset/pr-10963-changed-1726672295505.md b/packages/manager/.changeset/pr-10963-changed-1726672295505.md
new file mode 100644
index 00000000000..405be2c8dba
--- /dev/null
+++ b/packages/manager/.changeset/pr-10963-changed-1726672295505.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Changed
+---
+
+Disable 'Save' button in Change Avatar Color dialog until color is changed ([#10963](https://github.com/linode/manager/pull/10963))
diff --git a/packages/manager/src/features/Profile/DisplaySettings/AvatarColorPickerDialog.test.tsx b/packages/manager/src/features/Profile/DisplaySettings/AvatarColorPickerDialog.test.tsx
index 19b8557ac5d..5eba8e3a707 100644
--- a/packages/manager/src/features/Profile/DisplaySettings/AvatarColorPickerDialog.test.tsx
+++ b/packages/manager/src/features/Profile/DisplaySettings/AvatarColorPickerDialog.test.tsx
@@ -1,4 +1,5 @@
 import { fireEvent } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import * as React from 'react';
 
 import { renderWithTheme } from 'src/utilities/testHelpers';
@@ -23,21 +24,37 @@ describe('AvatarColorPicker', () => {
     expect(getByTestId('avatar')).toBeVisible();
   });
 
-  it('calls onClose when Close button is clicked', async () => {
-    const { getByText } = renderWithTheme(
+  it('calls onClose when Close/X buttons are clicked', async () => {
+    const { getAllByRole } = renderWithTheme(
       <AvatarColorPickerDialog {...mockProps} />
     );
 
-    await fireEvent.click(getByText('Close'));
-    expect(mockProps.handleClose).toHaveBeenCalled();
+    const closeButtons = getAllByRole('button', { name: 'Close' });
+    closeButtons.forEach(async (button) => {
+      await userEvent.click(button);
+      expect(mockProps.handleClose).toHaveBeenCalled();
+    });
   });
 
-  it('closes when Save button is clicked', async () => {
-    const { getByText } = renderWithTheme(
+  it('confirms when Save button is enabled and the dialog closes when Save is clicked', async () => {
+    const { getByLabelText, getByRole } = renderWithTheme(
       <AvatarColorPickerDialog {...mockProps} />
     );
 
-    await fireEvent.click(getByText('Save'));
+    const saveButton = getByRole('button', { name: 'Save' });
+
+    expect(saveButton).toBeDisabled();
+
+    fireEvent.input(getByLabelText('Avatar color picker'), {
+      target: { value: '#333333' },
+    });
+
+    // Verify save button becomes enabled after changing the color
+    expect(saveButton).toBeEnabled();
+
+    await userEvent.click(saveButton);
+
+    // Verify dialog closes after saving
     expect(mockProps.handleClose).toHaveBeenCalled();
   });
 });
diff --git a/packages/manager/src/features/Profile/DisplaySettings/AvatarColorPickerDialog.tsx b/packages/manager/src/features/Profile/DisplaySettings/AvatarColorPickerDialog.tsx
index dd0cca24ccf..52c0c3a4378 100644
--- a/packages/manager/src/features/Profile/DisplaySettings/AvatarColorPickerDialog.tsx
+++ b/packages/manager/src/features/Profile/DisplaySettings/AvatarColorPickerDialog.tsx
@@ -51,6 +51,7 @@ export const AvatarColorPickerDialog = (
 
       <ActionsPanel
         primaryButtonProps={{
+          disabled: !avatarColor || preferences?.avatarColor === avatarColor,
           label: 'Save',
           onClick: () => {
             if (avatarColor) {

From 5f0847799873439cde2f40b73c008858a69c5ead Mon Sep 17 00:00:00 2001
From: cpathipa <119517080+cpathipa@users.noreply.github.com>
Date: Thu, 19 Sep 2024 11:31:17 -0500
Subject: [PATCH 27/62] change: [M3-8593] - Copy updates in Create with CLI
 modal (#10954)

* unit test coverage for HostNameTableCell

* Revert "unit test coverage for HostNameTableCell"

This reverts commit b274baf67e27d79fd4e764607ded7c5aa755ee8b.

* Copy updates in Create with CLI modal

* Added changeset: Copy updates in Create with CLI modal

* Update packages/manager/src/features/Linodes/LinodesCreate/ApiAwarenessModal/ApiAwarenessModal.tsx

Co-authored-by: Mariah Jacobs <114685994+mjac0bs@users.noreply.github.com>

* Update create-linode-view-code-snippet.spec.ts

---------

Co-authored-by: Mariah Jacobs <114685994+mjac0bs@users.noreply.github.com>
---
 .../manager/.changeset/pr-10954-changed-1726591307327.md    | 5 +++++
 .../core/linodes/create-linode-view-code-snippet.spec.ts    | 4 ++--
 .../ApiAwarenessModal/AnsibleIntegrationResources.tsx       | 2 +-
 .../LinodesCreate/ApiAwarenessModal/ApiAwarenessModal.tsx   | 6 +++---
 .../ApiAwarenessModal/TerraformIntegrationResources.tsx     | 2 +-
 5 files changed, 12 insertions(+), 7 deletions(-)
 create mode 100644 packages/manager/.changeset/pr-10954-changed-1726591307327.md

diff --git a/packages/manager/.changeset/pr-10954-changed-1726591307327.md b/packages/manager/.changeset/pr-10954-changed-1726591307327.md
new file mode 100644
index 00000000000..adff2982d2c
--- /dev/null
+++ b/packages/manager/.changeset/pr-10954-changed-1726591307327.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Changed
+---
+
+Copy updates in Create with CLI modal ([#10954](https://github.com/linode/manager/pull/10954))
diff --git a/packages/manager/cypress/e2e/core/linodes/create-linode-view-code-snippet.spec.ts b/packages/manager/cypress/e2e/core/linodes/create-linode-view-code-snippet.spec.ts
index 40cc3f15e78..8cbe3a649e3 100644
--- a/packages/manager/cypress/e2e/core/linodes/create-linode-view-code-snippet.spec.ts
+++ b/packages/manager/cypress/e2e/core/linodes/create-linode-view-code-snippet.spec.ts
@@ -105,8 +105,8 @@ describe('Create Linode', () => {
             'Import Existing Infrastructure to Terraform'
           ).should('be.visible');
 
-          // Validate SDK's tab
-          ui.tabList.findTabByTitle(`SDK's`).should('be.visible').click();
+          // Validate SDKs tab
+          ui.tabList.findTabByTitle(`SDKs`).should('be.visible').click();
 
           ui.autocomplete.find().click();
 
diff --git a/packages/manager/src/features/Linodes/LinodesCreate/ApiAwarenessModal/AnsibleIntegrationResources.tsx b/packages/manager/src/features/Linodes/LinodesCreate/ApiAwarenessModal/AnsibleIntegrationResources.tsx
index 396b631bad1..a10c9e64d43 100644
--- a/packages/manager/src/features/Linodes/LinodesCreate/ApiAwarenessModal/AnsibleIntegrationResources.tsx
+++ b/packages/manager/src/features/Linodes/LinodesCreate/ApiAwarenessModal/AnsibleIntegrationResources.tsx
@@ -62,7 +62,7 @@ export const AnsibleIntegrationResources = () => {
   return (
     <>
       <Typography sx={(theme) => ({ mt: theme.spacing(2) })} variant="h3">
-        Getting started
+        Getting Started
       </Typography>
       <ResourceLinks
         linkAnalyticsEvent={linkAnalyticsEvent}
diff --git a/packages/manager/src/features/Linodes/LinodesCreate/ApiAwarenessModal/ApiAwarenessModal.tsx b/packages/manager/src/features/Linodes/LinodesCreate/ApiAwarenessModal/ApiAwarenessModal.tsx
index 9d51b921b93..884f7104448 100644
--- a/packages/manager/src/features/Linodes/LinodesCreate/ApiAwarenessModal/ApiAwarenessModal.tsx
+++ b/packages/manager/src/features/Linodes/LinodesCreate/ApiAwarenessModal/ApiAwarenessModal.tsx
@@ -52,7 +52,7 @@ export const additionalTabs = [
   },
   {
     component: SDKTabPanel,
-    title: `SDK's`,
+    title: 'SDKs',
     type: 'INTEGRATIONS',
   },
 ];
@@ -88,11 +88,11 @@ export const ApiAwarenessModal = (props: ApiAwarenessModalProps) => {
     sendApiAwarenessClickEvent(`${type} Tab`, type);
 
     const trackingKey =
-      type === 'INTEGRATIONS' && title !== "SDK's"
+      type === 'INTEGRATIONS' && title !== 'SDKs'
         ? LD_DX_TOOLS_METRICS_KEYS.INTEGRATION_TAB_SELECTION
         : type === 'API'
         ? LD_DX_TOOLS_METRICS_KEYS.CURL_TAB_SELECTION
-        : title === "SDK's"
+        : title === 'SDKs'
         ? LD_DX_TOOLS_METRICS_KEYS.SDK_TAB_SELECTION
         : title === 'Linode CLI'
         ? LD_DX_TOOLS_METRICS_KEYS.LINODE_CLI_TAB_SELECTION
diff --git a/packages/manager/src/features/Linodes/LinodesCreate/ApiAwarenessModal/TerraformIntegrationResources.tsx b/packages/manager/src/features/Linodes/LinodesCreate/ApiAwarenessModal/TerraformIntegrationResources.tsx
index b2d31558b55..7ff665d55ef 100644
--- a/packages/manager/src/features/Linodes/LinodesCreate/ApiAwarenessModal/TerraformIntegrationResources.tsx
+++ b/packages/manager/src/features/Linodes/LinodesCreate/ApiAwarenessModal/TerraformIntegrationResources.tsx
@@ -68,7 +68,7 @@ export const TerraformIntegrationResources = () => {
   return (
     <>
       <Typography sx={(theme) => ({ mt: theme.spacing(2) })} variant="h3">
-        Getting started
+        Getting Started
       </Typography>
       <ResourceLinks
         linkAnalyticsEvent={linkAnalyticsEvent}

From 109bac67e3efa73a439ec8b9e9f7e3824bf4b4bb Mon Sep 17 00:00:00 2001
From: mpolotsk-akamai <157619599+mpolotsk-akamai@users.noreply.github.com>
Date: Thu, 19 Sep 2024 21:57:57 +0200
Subject: [PATCH 28/62] feat: [UIE-8009] - DBaaS enhancements Backups (#10961)

* feat: [UIE-8009] - DBaaS enhancements Backups

* Added changeset: DBaaS V2 enhancements to the Backups

* feat: [UIE-8009] - Review fix: refactoring

* feat: [UIE-8009] - Review fix: replace Time Picker, refactoring
---
 packages/api-v4/src/databases/databases.ts    |  23 ++-
 packages/api-v4/src/databases/types.ts        |   1 +
 ...r-10961-upcoming-features-1726666902955.md |   5 +
 packages/manager/package.json                 |   5 +-
 .../src/components/Dialog/Dialog.test.tsx     |   8 +
 .../manager/src/components/Dialog/Dialog.tsx  |   3 +
 .../components/DialogTitle/DialogTitle.tsx    |  10 +-
 packages/manager/src/factories/databases.ts   |   8 +-
 .../DatabaseBackups/DatabaseBackups.style.ts  |  81 ++++++++
 .../DatabaseBackups/DatabaseBackups.test.tsx  |  45 +++-
 .../DatabaseBackups/DatabaseBackups.tsx       | 194 +++++++++++++++++-
 ....tsx => RestoreLegacyFromBackupDialog.tsx} |   8 +-
 .../RestoreNewFromBackupDialog.tsx            |  93 +++++++++
 .../Databases/DatabaseDetail/index.tsx        |   5 +-
 .../src/features/Databases/utilities.test.ts  |  32 ++-
 .../src/features/Databases/utilities.ts       |  25 +++
 .../DatabaseClusterInfoBanner.tsx             |   4 +-
 packages/manager/src/mocks/serverHandlers.ts  |   2 +-
 .../src/queries/databases/databases.ts        |  24 ++-
 yarn.lock                                     |  85 ++++++++
 20 files changed, 626 insertions(+), 35 deletions(-)
 create mode 100644 packages/manager/.changeset/pr-10961-upcoming-features-1726666902955.md
 create mode 100644 packages/manager/src/features/Databases/DatabaseDetail/DatabaseBackups/DatabaseBackups.style.ts
 rename packages/manager/src/features/Databases/DatabaseDetail/DatabaseBackups/{RestoreFromBackupDialog.tsx => RestoreLegacyFromBackupDialog.tsx} (91%)
 create mode 100644 packages/manager/src/features/Databases/DatabaseDetail/DatabaseBackups/RestoreNewFromBackupDialog.tsx

diff --git a/packages/api-v4/src/databases/databases.ts b/packages/api-v4/src/databases/databases.ts
index 32f6c12b1fc..b8a236743a8 100644
--- a/packages/api-v4/src/databases/databases.ts
+++ b/packages/api-v4/src/databases/databases.ts
@@ -223,11 +223,11 @@ export const getDatabaseBackup = (
   );
 
 /**
- * restoreWithBackup
+ * legacyRestoreWithBackup
  *
  * Fully restore a backup to the cluster
  */
-export const restoreWithBackup = (
+export const legacyRestoreWithBackup = (
   engine: Engine,
   databaseID: number,
   backupID: number
@@ -243,6 +243,25 @@ export const restoreWithBackup = (
     setMethod('POST')
   );
 
+/**
+ * newRestoreWithBackup for the New Database
+ *
+ * Fully restore a backup to the cluster
+ */
+export const newRestoreWithBackup = (
+  engine: Engine,
+  label: string,
+  fork: {
+    source: number;
+    restore_time?: string;
+  }
+) =>
+  Request<{}>(
+    setURL(`${API_ROOT}/databases/${encodeURIComponent(engine)}/instances`),
+    setMethod('POST'),
+    setData({ fork, label })
+  );
+
 /**
  * getDatabaseCredentials
  *
diff --git a/packages/api-v4/src/databases/types.ts b/packages/api-v4/src/databases/types.ts
index 5d9650c6eab..09ab3b816ef 100644
--- a/packages/api-v4/src/databases/types.ts
+++ b/packages/api-v4/src/databases/types.ts
@@ -152,6 +152,7 @@ export interface BaseDatabase {
    */
   members: Record<string, MemberType>;
   platform?: string;
+  oldest_restore_time?: string;
 }
 
 export interface MySQLDatabase extends BaseDatabase {
diff --git a/packages/manager/.changeset/pr-10961-upcoming-features-1726666902955.md b/packages/manager/.changeset/pr-10961-upcoming-features-1726666902955.md
new file mode 100644
index 00000000000..1ad2fdcd0d8
--- /dev/null
+++ b/packages/manager/.changeset/pr-10961-upcoming-features-1726666902955.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+DBaaS V2 enhancements to the Backups ([#10961](https://github.com/linode/manager/pull/10961))
diff --git a/packages/manager/package.json b/packages/manager/package.json
index 3455307a4f1..c97d8c31358 100644
--- a/packages/manager/package.json
+++ b/packages/manager/package.json
@@ -19,16 +19,18 @@
     "@hookform/resolvers": "2.9.11",
     "@linode/api-v4": "*",
     "@linode/design-language-system": "^2.6.1",
-    "@linode/validation": "*",
     "@linode/search": "*",
+    "@linode/validation": "*",
     "@lukemorales/query-key-factory": "^1.3.4",
     "@mui/icons-material": "^5.14.7",
     "@mui/material": "^5.14.7",
+    "@mui/x-date-pickers": "^7.12.0",
     "@paypal/react-paypal-js": "^7.8.3",
     "@reach/tabs": "^0.10.5",
     "@sentry/react": "^7.57.0",
     "@tanstack/react-query": "5.51.24",
     "@tanstack/react-query-devtools": "5.51.24",
+    "@xterm/xterm": "^5.5.0",
     "algoliasearch": "^4.14.3",
     "axios": "~1.7.4",
     "braintree-web": "^3.92.2",
@@ -79,7 +81,6 @@
     "tss-react": "^4.8.2",
     "typescript-fsa": "^3.0.0",
     "typescript-fsa-reducers": "^1.2.0",
-    "@xterm/xterm": "^5.5.0",
     "yup": "^0.32.9",
     "zxcvbn": "^4.4.2"
   },
diff --git a/packages/manager/src/components/Dialog/Dialog.test.tsx b/packages/manager/src/components/Dialog/Dialog.test.tsx
index 1e20c5c22ef..0083a31ded2 100644
--- a/packages/manager/src/components/Dialog/Dialog.test.tsx
+++ b/packages/manager/src/components/Dialog/Dialog.test.tsx
@@ -44,6 +44,14 @@ describe('Dialog', () => {
     expect(getByText('Child items can go here!')).toBeInTheDocument();
   });
 
+  it('should render a Dialog with subtitle if provided', () => {
+    const { getByText } = renderWithTheme(
+      <Dialog {...defaultArgs} open={true} subtitle="This is a subtitle" />
+    );
+
+    expect(getByText('This is a subtitle')).toBeInTheDocument();
+  });
+
   it('should call onClose when the Dialog close button is clicked', () => {
     const { getByRole } = renderWithTheme(
       <Dialog {...defaultArgs} open={true} />
diff --git a/packages/manager/src/components/Dialog/Dialog.tsx b/packages/manager/src/components/Dialog/Dialog.tsx
index 51c9272093a..5c4db71a634 100644
--- a/packages/manager/src/components/Dialog/Dialog.tsx
+++ b/packages/manager/src/components/Dialog/Dialog.tsx
@@ -15,6 +15,7 @@ export interface DialogProps extends _DialogProps {
   className?: string;
   error?: string;
   fullHeight?: boolean;
+  subtitle?: string;
   title: string;
   titleBottomBorder?: boolean;
 }
@@ -49,6 +50,7 @@ export const Dialog = (props: DialogProps) => {
     fullWidth,
     maxWidth = 'md',
     onClose,
+    subtitle,
     title,
     titleBottomBorder,
     ...rest
@@ -78,6 +80,7 @@ export const Dialog = (props: DialogProps) => {
         <DialogTitle
           id={titleID}
           onClose={() => onClose && onClose({}, 'backdropClick')}
+          subtitle={subtitle}
           title={title}
         />
         {titleBottomBorder && <StyledHr />}
diff --git a/packages/manager/src/components/DialogTitle/DialogTitle.tsx b/packages/manager/src/components/DialogTitle/DialogTitle.tsx
index 1e7108b9291..4233df20fba 100644
--- a/packages/manager/src/components/DialogTitle/DialogTitle.tsx
+++ b/packages/manager/src/components/DialogTitle/DialogTitle.tsx
@@ -1,22 +1,25 @@
 import Close from '@mui/icons-material/Close';
-import { Box } from 'src/components/Box';
+import { Typography } from '@mui/material';
 import _DialogTitle from '@mui/material/DialogTitle';
-import { SxProps } from '@mui/system';
 import * as React from 'react';
 
+import { Box } from 'src/components/Box';
 import { IconButton } from 'src/components/IconButton';
 
+import type { SxProps } from '@mui/system';
+
 interface DialogTitleProps {
   className?: string;
   id?: string;
   onClose?: () => void;
+  subtitle?: string;
   sx?: SxProps;
   title: string;
 }
 
 const DialogTitle = (props: DialogTitleProps) => {
   const ref = React.useRef<HTMLDivElement>(null);
-  const { className, id, onClose, sx, title } = props;
+  const { className, id, onClose, subtitle, sx, title } = props;
 
   React.useEffect(() => {
     if (ref.current === null) {
@@ -63,6 +66,7 @@ const DialogTitle = (props: DialogTitleProps) => {
           </IconButton>
         )}
       </Box>
+      {subtitle && <Typography>{subtitle}</Typography>}
     </_DialogTitle>
   );
 };
diff --git a/packages/manager/src/factories/databases.ts b/packages/manager/src/factories/databases.ts
index c0af060c17a..b3a4f1e95e9 100644
--- a/packages/manager/src/factories/databases.ts
+++ b/packages/manager/src/factories/databases.ts
@@ -222,6 +222,7 @@ export const databaseFactory = Factory.Sync.makeFactory<Database>({
   members: {
     '2.2.2.2': 'primary',
   },
+  oldest_restore_time: '2024-09-15T17:15:12',
   platform: pickRandom(['rdbms-legacy', 'rdbms-default']),
   port: 3306,
   region: 'us-east',
@@ -242,7 +243,12 @@ export const databaseFactory = Factory.Sync.makeFactory<Database>({
 });
 
 export const databaseBackupFactory = Factory.Sync.makeFactory<DatabaseBackup>({
-  created: Factory.each(() => randomDate().toISOString()),
+  created: Factory.each(() =>
+    randomDate(
+      new Date(Date.now() - 10 * 24 * 60 * 60 * 1000),
+      new Date()
+    ).toISOString()
+  ),
   id: Factory.each((i) => i),
   label: Factory.each(() => `backup-${v4()}`),
   type: pickRandom(['snapshot', 'auto']),
diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseBackups/DatabaseBackups.style.ts b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseBackups/DatabaseBackups.style.ts
new file mode 100644
index 00000000000..547fe03bfbf
--- /dev/null
+++ b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseBackups/DatabaseBackups.style.ts
@@ -0,0 +1,81 @@
+import { styled } from '@mui/material/styles';
+import { DateCalendar, TimePicker } from '@mui/x-date-pickers';
+
+import { Box } from 'src/components/Box';
+import { Typography } from 'src/components/Typography';
+
+export const StyledTimePicker = styled(TimePicker)(() => ({
+  '.MuiInputAdornment-root': { marginRight: '0' },
+  '.MuiInputBase-input': { padding: '8px 0 8px 12px' },
+  '.MuiInputBase-root': { borderRadius: '0', padding: '0px' },
+
+  'button.MuiButtonBase-root': {
+    marginRight: '0',
+    padding: '8px',
+  },
+  height: '34px',
+  marginTop: '8px',
+  width: '120px',
+}));
+
+export const StyledDateCalendar = styled(DateCalendar, {
+  label: 'StyledDateCalendar',
+})(({ theme }) => ({
+  '.MuiButtonBase-root.MuiPickersDay-root.Mui-disabled': {
+    color: theme.color.grey3,
+  },
+  '.MuiPickersArrowSwitcher-spacer': { width: '15px' },
+  '.MuiPickersCalendarHeader-labelContainer': {
+    fontSize: '0.95rem',
+  },
+  '.MuiPickersCalendarHeader-root': {
+    marginTop: '0',
+    paddingLeft: '17px',
+    paddingRight: '3px',
+  },
+  '.MuiPickersCalendarHeader-switchViewIcon': {
+    fontSize: '28px',
+  },
+  '.MuiPickersDay-root': {
+    fontSize: '0.875rem',
+    height: '32px',
+    width: '32px',
+  },
+  '.MuiSvgIcon-root': {
+    fontSize: '22px',
+  },
+  '.MuiTypography-root': {
+    fontSize: '0.875rem',
+    height: '32px',
+    width: '32px',
+  },
+  '.MuiYearCalendar-root': {
+    width: '260px',
+  },
+  marginLeft: '0px',
+  width: '260px',
+}));
+
+export const StyledBox = styled(Box)(({ theme }) => ({
+  '& h6': {
+    fontSize: '0.875rem',
+  },
+  '& span': {
+    marginBottom: '5px',
+    marginTop: '7px',
+  },
+  alignItems: 'flex-start',
+
+  border: '1px solid #F4F4F4',
+  color: theme.name === 'light' ? '#555555' : theme.color.headline,
+  display: 'flex',
+  flexDirection: 'column',
+  height: '100%',
+  padding: '8px 15px',
+  background: theme.name === 'light' ? '#FBFBFB' : theme.color.grey2,
+}));
+
+export const StyledTypography = styled(Typography)(() => ({
+  lineHeight: '20px',
+  marginTop: '4px',
+}));
diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseBackups/DatabaseBackups.test.tsx b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseBackups/DatabaseBackups.test.tsx
index 7f260fff41a..dc2fc73e58c 100644
--- a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseBackups/DatabaseBackups.test.tsx
+++ b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseBackups/DatabaseBackups.test.tsx
@@ -14,6 +14,9 @@ import DatabaseBackups from './DatabaseBackups';
 
 describe('Database Backups', () => {
   it('should render a list of backups after loading', async () => {
+    const mockDatabase = databaseFactory.build({
+      platform: 'rdbms-legacy',
+    });
     const backups = databaseBackupFactory.buildList(7);
 
     // Mock the Database because the Backups Details page requires it to be loaded
@@ -22,7 +25,7 @@ describe('Database Backups', () => {
         return HttpResponse.json(profileFactory.build({ timezone: 'utc' }));
       }),
       http.get('*/databases/:engine/instances/:id', () => {
-        return HttpResponse.json(databaseFactory.build());
+        return HttpResponse.json(mockDatabase);
       }),
       http.get('*/databases/:engine/instances/:id/backups', () => {
         return HttpResponse.json(makeResourcePage(backups));
@@ -41,10 +44,13 @@ describe('Database Backups', () => {
   });
 
   it('should render an empty state if there are no backups', async () => {
+    const mockDatabase = databaseFactory.build({
+      platform: 'rdbms-legacy',
+    });
     // Mock the Database because the Backups Details page requires it to be loaded
     server.use(
       http.get('*/databases/:engine/instances/:id', () => {
-        return HttpResponse.json(databaseFactory.build());
+        return HttpResponse.json(mockDatabase);
       })
     );
 
@@ -61,6 +67,9 @@ describe('Database Backups', () => {
   });
 
   it('should disable the restore button if disabled = true', async () => {
+    const mockDatabase = databaseFactory.build({
+      platform: 'rdbms-legacy',
+    });
     const backups = databaseBackupFactory.buildList(7);
 
     server.use(
@@ -68,7 +77,7 @@ describe('Database Backups', () => {
         return HttpResponse.json(profileFactory.build({ timezone: 'utc' }));
       }),
       http.get('*/databases/:engine/instances/:id', () => {
-        return HttpResponse.json(databaseFactory.build());
+        return HttpResponse.json(mockDatabase);
       }),
       http.get('*/databases/:engine/instances/:id/backups', () => {
         return HttpResponse.json(makeResourcePage(backups));
@@ -87,6 +96,9 @@ describe('Database Backups', () => {
   });
 
   it('should enable the restore button if disabled = false', async () => {
+    const mockDatabase = databaseFactory.build({
+      platform: 'rdbms-legacy',
+    });
     const backups = databaseBackupFactory.buildList(7);
 
     server.use(
@@ -94,7 +106,7 @@ describe('Database Backups', () => {
         return HttpResponse.json(profileFactory.build({ timezone: 'utc' }));
       }),
       http.get('*/databases/:engine/instances/:id', () => {
-        return HttpResponse.json(databaseFactory.build());
+        return HttpResponse.json(mockDatabase);
       }),
       http.get('*/databases/:engine/instances/:id/backups', () => {
         return HttpResponse.json(makeResourcePage(backups));
@@ -111,4 +123,29 @@ describe('Database Backups', () => {
       expect(button).toBeEnabled();
     });
   });
+
+  it('should render a time picker when it is a new database', async () => {
+    const mockDatabase = databaseFactory.build({
+      platform: 'rdbms-default',
+    });
+    const backups = databaseBackupFactory.buildList(7);
+
+    server.use(
+      http.get('*/profile', () => {
+        return HttpResponse.json(profileFactory.build({ timezone: 'utc' }));
+      }),
+      http.get('*/databases/:engine/instances/:id', () => {
+        return HttpResponse.json(mockDatabase);
+      }),
+      http.get('*/databases/:engine/instances/:id/backups', () => {
+        return HttpResponse.json(makeResourcePage(backups));
+      })
+    );
+
+    const { findByText } = renderWithTheme(
+      <DatabaseBackups disabled={false} />
+    );
+    const timePickerLabel = await findByText('Time (UTC)');
+    expect(timePickerLabel).toBeInTheDocument();
+  });
 });
diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseBackups/DatabaseBackups.tsx b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseBackups/DatabaseBackups.tsx
index 2ebd021cc7c..c1216fb7ae8 100644
--- a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseBackups/DatabaseBackups.tsx
+++ b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseBackups/DatabaseBackups.tsx
@@ -1,7 +1,16 @@
-import { DatabaseBackup, Engine } from '@linode/api-v4/lib/databases';
+import { FormControl } from '@mui/material';
+import Grid from '@mui/material/Grid';
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterLuxon } from '@mui/x-date-pickers/AdapterLuxon';
+import { DateTime } from 'luxon';
 import * as React from 'react';
 import { useParams } from 'react-router-dom';
 
+import { Box } from 'src/components/Box';
+import { Button } from 'src/components/Button/Button';
+import { Divider } from 'src/components/Divider';
+import Select from 'src/components/EnhancedSelect/Select';
+import { Paper } from 'src/components/Paper';
 import { Table } from 'src/components/Table';
 import { TableBody } from 'src/components/TableBody';
 import { TableCell } from 'src/components/TableCell';
@@ -12,16 +21,23 @@ import { TableRowError } from 'src/components/TableRowError/TableRowError';
 import { TableRowLoading } from 'src/components/TableRowLoading/TableRowLoading';
 import { TableSortCell } from 'src/components/TableSortCell';
 import { Typography } from 'src/components/Typography';
-import { Paper } from 'src/components/Paper';
+import {
+  StyledDateCalendar,
+  StyledTypography,
+} from 'src/features/Databases/DatabaseDetail/DatabaseBackups/DatabaseBackups.style';
+import RestoreLegacyFromBackupDialog from 'src/features/Databases/DatabaseDetail/DatabaseBackups/RestoreLegacyFromBackupDialog';
+import RestoreNewFromBackupDialog from 'src/features/Databases/DatabaseDetail/DatabaseBackups/RestoreNewFromBackupDialog';
+import { isOutsideBackupTimeframe } from 'src/features/Databases/utilities';
 import { useOrder } from 'src/hooks/useOrder';
 import {
   useDatabaseBackupsQuery,
   useDatabaseQuery,
 } from 'src/queries/databases/databases';
 
-import RestoreFromBackupDialog from './RestoreFromBackupDialog';
 import { BackupTableRow } from './DatabaseBackupTableRow';
 
+import type { DatabaseBackup, Engine } from '@linode/api-v4/lib/databases';
+
 interface Props {
   disabled?: boolean;
 }
@@ -38,6 +54,15 @@ export const DatabaseBackups = (props: Props) => {
     number | undefined
   >();
 
+  const [selectedDate, setSelectedDate] = React.useState<DateTime | null>(null);
+  const [selectedTime, setSelectedTime] = React.useState<DateTime | null>(
+    DateTime.now().set({ hour: 1, minute: 0, second: 0 })
+  );
+  const [
+    selectedRestoreTime,
+    setSelectedRestoreTime,
+  ] = React.useState<string>();
+
   const id = Number(databaseId);
 
   const {
@@ -46,6 +71,8 @@ export const DatabaseBackups = (props: Props) => {
     isLoading: isDatabaseLoading,
   } = useDatabaseQuery(engine, id);
 
+  const isNewDatabase = database?.platform === 'rdbms-default';
+
   const {
     data: backups,
     error: backupsError,
@@ -57,12 +84,12 @@ export const DatabaseBackups = (props: Props) => {
     orderBy: 'created',
   });
 
-  const onRestore = (id: number) => {
+  const onRestoreLegacyDatabase = (id: number) => {
     setIdOfBackupToRestore(id);
     setIsRestoreDialogOpen(true);
   };
 
-  const backupToRestore = backups?.data.find(
+  const backupToRestoreLegacy = backups?.data.find(
     (backup) => backup.id === idOfBackupToRestore
   );
 
@@ -94,14 +121,134 @@ export const DatabaseBackups = (props: Props) => {
             backup={backup}
             disabled={disabled}
             key={backup.id}
-            onRestore={onRestore}
+            onRestore={onRestoreLegacyDatabase}
           />
         ));
     }
     return null;
   };
 
-  return (
+  const oldestBackup = database?.oldest_restore_time
+    ? DateTime.fromISO(database.oldest_restore_time)
+    : null;
+
+  const onRestoreNewDatabase = (selectedDate: DateTime | null) => {
+    const day = selectedDate?.toISODate();
+    const time = selectedTime?.toISOTime({ includeOffset: false });
+    const selectedDateTime = `${day}T${time}Z`;
+
+    const selectedTimestamp = new Date(selectedDateTime).toISOString();
+
+    setSelectedRestoreTime(selectedTimestamp);
+    setIsRestoreDialogOpen(true);
+  };
+
+  return isNewDatabase ? (
+    <Paper style={{ marginTop: 16 }}>
+      <Typography variant="h2">Summary</Typography>
+      <StyledTypography>
+        Databases are automatically backed-up with full daily backups for the
+        past 10 days, and binary logs recorded continuously. Full backups are
+        version-specific binary backups, which when combined with binary
+        logs allow for consistent recovery to a specific point in time (PITR).
+      </StyledTypography>
+      {/* TODO: Uncomment when the all data is available (Number of Full Backups, Newest Full Backup, Oldest Full Backup) */}
+      {/* <Hidden xlDown={true} xlUp={true}>
+        <Grid alignItems="stretch" container mt={2} spacing={1}>
+          <Grid item md={4} xs={12}>
+            <StyledBox>
+              <Typography variant="h2">Number of Full Backups</Typography>
+              <Typography component="span" variant="h1">
+                {backups?.data.length}
+              </Typography>
+            </StyledBox>
+          </Grid>
+          <Grid item md={4} xs={12}>
+            <StyledBox>
+              <Typography variant="h2">Newest Full Backup</Typography>
+              <Typography variant="subtitle2">{newestBackup} (UTC)</Typography>
+            </StyledBox>
+          </Grid>
+          <Grid item md={4} xs={12}>
+            <StyledBox>
+              <Typography variant="h2">Oldest Full Backup</Typography>
+              <Typography variant="subtitle2">{oldestBackup} (UTC)</Typography>
+            </StyledBox>
+          </Grid>
+        </Grid>
+      </Hidden> */}
+      <Divider spacingBottom={25} spacingTop={25} />
+      <Typography variant="h2">Restore a Backup</Typography>
+      <StyledTypography>
+        Select a date and time within the last 10 days you want to create a fork
+        from.
+      </StyledTypography>
+      <Grid container justifyContent="flex-start" mt={2}>
+        <Grid item lg={3} md={4} xs={12}>
+          <Typography variant="h3">Date</Typography>
+          <LocalizationProvider dateAdapter={AdapterLuxon}>
+            <StyledDateCalendar
+              shouldDisableDate={(date) =>
+                isOutsideBackupTimeframe(date, oldestBackup)
+              }
+              onChange={(newDate) => setSelectedDate(newDate)}
+              value={selectedDate}
+            />
+          </LocalizationProvider>
+        </Grid>
+        <Grid item lg={3} md={4} xs={12}>
+          <Typography variant="h3">Time (UTC)</Typography>
+          <FormControl style={{ marginTop: 0 }}>
+            {/* TODO: Replace Time Select to the own custom date-time picker component when it's ready */}
+            <Select
+              defaultValue={hourSelectionMap.find(
+                (option) => option.value === selectedTime?.hour
+              )}
+              onChange={(time) =>
+                setSelectedTime(
+                  DateTime.now().set({ hour: time.value, minute: 0 })
+                )
+              }
+              textFieldProps={{
+                dataAttrs: {
+                  'data-qa-time-select': true,
+                },
+              }}
+              value={hourSelectionMap.find(
+                (thisOption) => thisOption.value === selectedTime?.hour
+              )}
+              disabled={!selectedDate}
+              isClearable={false}
+              name="Time"
+              noMarginTop
+              options={hourSelectionMap}
+              placeholder="Choose a time"
+            />
+          </FormControl>
+        </Grid>
+      </Grid>
+      <Grid item xs={12}>
+        <Box display="flex" justifyContent="flex-end">
+          <Button
+            buttonType="primary"
+            data-qa-settings-button="restore"
+            disabled={!selectedDate}
+            onClick={() => onRestoreNewDatabase(selectedDate)}
+          >
+            Restore
+          </Button>
+        </Box>
+      </Grid>
+      {database && selectedRestoreTime ? (
+        <RestoreNewFromBackupDialog
+          database={database}
+          onClose={() => setIsRestoreDialogOpen(false)}
+          open={isRestoreDialogOpen}
+          restoreTime={selectedRestoreTime}
+        />
+      ) : null}
+    </Paper>
+  ) : (
     <>
       <Table>
         <TableHead>
@@ -128,9 +275,9 @@ export const DatabaseBackups = (props: Props) => {
           retained for 7 days.
         </Typography>
       </Paper>
-      {database && backupToRestore ? (
-        <RestoreFromBackupDialog
-          backup={backupToRestore}
+      {database && backupToRestoreLegacy ? (
+        <RestoreLegacyFromBackupDialog
+          backup={backupToRestoreLegacy}
           database={database}
           onClose={() => setIsRestoreDialogOpen(false)}
           open={isRestoreDialogOpen}
@@ -140,4 +287,31 @@ export const DatabaseBackups = (props: Props) => {
   );
 };
 
+const hourSelectionMap = [
+  { label: '00:00', value: 0 },
+  { label: '01:00', value: 1 },
+  { label: '02:00', value: 2 },
+  { label: '03:00', value: 3 },
+  { label: '04:00', value: 4 },
+  { label: '05:00', value: 5 },
+  { label: '06:00', value: 6 },
+  { label: '07:00', value: 7 },
+  { label: '08:00', value: 8 },
+  { label: '09:00', value: 9 },
+  { label: '10:00', value: 10 },
+  { label: '11:00', value: 11 },
+  { label: '12:00', value: 12 },
+  { label: '13:00', value: 13 },
+  { label: '14:00', value: 14 },
+  { label: '15:00', value: 15 },
+  { label: '16:00', value: 16 },
+  { label: '17:00', value: 17 },
+  { label: '18:00', value: 18 },
+  { label: '19:00', value: 19 },
+  { label: '20:00', value: 20 },
+  { label: '21:00', value: 21 },
+  { label: '22:00', value: 22 },
+  { label: '23:00', value: 23 },
+];
+
 export default DatabaseBackups;
diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseBackups/RestoreFromBackupDialog.tsx b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseBackups/RestoreLegacyFromBackupDialog.tsx
similarity index 91%
rename from packages/manager/src/features/Databases/DatabaseDetail/DatabaseBackups/RestoreFromBackupDialog.tsx
rename to packages/manager/src/features/Databases/DatabaseDetail/DatabaseBackups/RestoreLegacyFromBackupDialog.tsx
index fb6b690e69f..59686312813 100644
--- a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseBackups/RestoreFromBackupDialog.tsx
+++ b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseBackups/RestoreLegacyFromBackupDialog.tsx
@@ -10,7 +10,7 @@ import { useProfile } from 'src/queries/profile/profile';
 import { getAPIErrorOrDefault } from 'src/utilities/errorUtils';
 import { formatDate } from 'src/utilities/formatDate';
 
-import type { Database, DatabaseBackup } from '@linode/api-v4';
+import type { Database, DatabaseBackup } from '@linode/api-v4/lib/databases';
 import type { DialogProps } from 'src/components/Dialog/Dialog';
 
 interface Props extends Omit<DialogProps, 'title'> {
@@ -20,7 +20,7 @@ interface Props extends Omit<DialogProps, 'title'> {
   open: boolean;
 }
 
-export const RestoreFromBackupDialog: React.FC<Props> = (props) => {
+export const RestoreLegacyFromBackupDialog = (props: Props) => {
   const { backup, database, onClose, open } = props;
   const history = useHistory();
   const { enqueueSnackbar } = useSnackbar();
@@ -30,7 +30,7 @@ export const RestoreFromBackupDialog: React.FC<Props> = (props) => {
     error,
     isPending,
     mutateAsync: restore,
-  } = useRestoreFromBackupMutation(database.engine, database.id, backup.id);
+  } = useRestoreFromBackupMutation(database.engine, database.id, backup?.id);
 
   const handleRestoreDatabase = () => {
     restore().then(() => {
@@ -79,4 +79,4 @@ export const RestoreFromBackupDialog: React.FC<Props> = (props) => {
   );
 };
 
-export default RestoreFromBackupDialog;
+export default RestoreLegacyFromBackupDialog;
diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseBackups/RestoreNewFromBackupDialog.tsx b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseBackups/RestoreNewFromBackupDialog.tsx
new file mode 100644
index 00000000000..5b4c4082d19
--- /dev/null
+++ b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseBackups/RestoreNewFromBackupDialog.tsx
@@ -0,0 +1,93 @@
+import { useSnackbar } from 'notistack';
+import * as React from 'react';
+import { useHistory } from 'react-router-dom';
+
+import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel';
+import { Dialog } from 'src/components/Dialog/Dialog';
+import { Notice } from 'src/components/Notice/Notice';
+import { Typography } from 'src/components/Typography';
+import { useNewRestoreFromBackupMutation } from 'src/queries/databases/databases';
+import { getAPIErrorOrDefault } from 'src/utilities/errorUtils';
+
+import type { Database } from '@linode/api-v4/lib/databases';
+import type { DialogProps } from 'src/components/Dialog/Dialog';
+
+interface Props extends Omit<DialogProps, 'title'> {
+  database: Database;
+  onClose: () => void;
+  open: boolean;
+  restoreTime?: string;
+}
+
+export const RestoreNewFromBackupDialog = (props: Props) => {
+  const { database, onClose, open, restoreTime } = props;
+  const history = useHistory();
+  const { enqueueSnackbar } = useSnackbar();
+
+  const formatedDate =
+    restoreTime &&
+    `${restoreTime?.split('T')[0]} ${restoreTime?.split('T')[1].slice(0, 5)}`;
+
+  const { error, mutateAsync: restore } = useNewRestoreFromBackupMutation(
+    database.engine,
+    `${database.label}(FORK ${formatedDate})`,
+    {
+      restore_time: restoreTime,
+      source: database.id,
+    }
+  );
+
+  const handleNewRestoreDatabase = () => {
+    restore().then(() => {
+      history.push('summary');
+      enqueueSnackbar('Your database is being restored.', {
+        variant: 'success',
+      });
+      onClose();
+    });
+  };
+
+  return (
+    <Dialog
+      onClose={onClose}
+      open={open}
+      subtitle={formatedDate && `From ${formatedDate} (UTC)`}
+      title={`Restore ${database.label}`}
+    >
+      <Typography sx={(theme) => ({ marginBottom: theme.spacing(4) })}>
+        Restoring a backup creates a fork from this backup. If you proceed and
+        the fork is created successfully, you have 10 days to delete the
+        original database cluster. Failing to do so will lead to additional
+        billing caused by two running clusters instead of one.
+      </Typography>
+      <ActionsPanel
+        primaryButtonProps={{
+          'data-testid': 'submit',
+          label: 'Restore',
+          onClick: handleNewRestoreDatabase,
+        }}
+        secondaryButtonProps={{
+          'data-testid': 'cancel',
+          label: 'Cancel',
+          onClick: onClose,
+        }}
+        sx={{
+          display: 'flex',
+          marginBottom: '0',
+          paddingBottom: '0',
+        }}
+      />
+      {error ? (
+        <Notice
+          text={
+            getAPIErrorOrDefault(error, 'Unable to restore this backup.')[0]
+              .reason
+          }
+          variant="error"
+        />
+      ) : null}
+    </Dialog>
+  );
+};
+
+export default RestoreNewFromBackupDialog;
diff --git a/packages/manager/src/features/Databases/DatabaseDetail/index.tsx b/packages/manager/src/features/Databases/DatabaseDetail/index.tsx
index b94efbcc771..8f4723567aa 100644
--- a/packages/manager/src/features/Databases/DatabaseDetail/index.tsx
+++ b/packages/manager/src/features/Databases/DatabaseDetail/index.tsx
@@ -1,5 +1,3 @@
-import { Engine } from '@linode/api-v4/lib/databases/types';
-import { APIError } from '@linode/api-v4/lib/types';
 import * as React from 'react';
 import { matchPath, useHistory, useParams } from 'react-router-dom';
 
@@ -23,6 +21,9 @@ import {
 } from 'src/queries/databases/databases';
 import { getAPIErrorOrDefault } from 'src/utilities/errorUtils';
 
+import type { Engine } from '@linode/api-v4/lib/databases/types';
+import type { APIError } from '@linode/api-v4/lib/types';
+
 const DatabaseSummary = React.lazy(() => import('./DatabaseSummary'));
 const DatabaseBackups = React.lazy(() => import('./DatabaseBackups'));
 const DatabaseSettings = React.lazy(() => import('./DatabaseSettings'));
diff --git a/packages/manager/src/features/Databases/utilities.test.ts b/packages/manager/src/features/Databases/utilities.test.ts
index 11447244793..2ad6ad7eced 100644
--- a/packages/manager/src/features/Databases/utilities.test.ts
+++ b/packages/manager/src/features/Databases/utilities.test.ts
@@ -1,12 +1,15 @@
 import { renderHook, waitFor } from '@testing-library/react';
+import { DateTime } from 'luxon';
 
 import { accountFactory } from 'src/factories';
+import {
+  isOutsideBackupTimeframe,
+  useIsDatabasesEnabled,
+} from 'src/features/Databases/utilities';
 import { makeResourcePage } from 'src/mocks/serverHandlers';
 import { HttpResponse, http, server } from 'src/mocks/testServer';
 import { wrapWithTheme } from 'src/utilities/testHelpers';
 
-import { useIsDatabasesEnabled } from './utilities';
-
 describe('useIsDatabasesEnabled', () => {
   it('should return true for an unrestricted user with the account capability V1', async () => {
     const account = accountFactory.build({
@@ -112,3 +115,28 @@ describe('useIsDatabasesEnabled', () => {
     await waitFor(() => expect(result.current.isDatabasesEnabled).toBe(false));
   });
 });
+
+describe('isOutsideBackupTimeframe', () => {
+  it('should return true if date is before the oldest backup', () => {
+    const date = DateTime.now().minus({ days: 10 });
+    const oldestBackup = DateTime.now().minus({ days: 5 });
+    expect(isOutsideBackupTimeframe(date, oldestBackup)).toBe(true);
+  });
+
+  it('should return true if date is after today', () => {
+    const date = DateTime.now().plus({ days: 1 });
+    const oldestBackup = DateTime.now().minus({ days: 5 });
+    expect(isOutsideBackupTimeframe(date, oldestBackup)).toBe(true);
+  });
+
+  it('should return false if date is between the oldest backup and today', () => {
+    const date = DateTime.now().minus({ days: 3 });
+    const oldestBackup = DateTime.now().minus({ days: 5 });
+    expect(isOutsideBackupTimeframe(date, oldestBackup)).toBe(false);
+  });
+
+  it('should return false if there is no oldest backup', () => {
+    const date = DateTime.now().minus({ days: 3 });
+    expect(isOutsideBackupTimeframe(date, null)).toBe(false);
+  });
+});
diff --git a/packages/manager/src/features/Databases/utilities.ts b/packages/manager/src/features/Databases/utilities.ts
index c044026a989..fea1824df60 100644
--- a/packages/manager/src/features/Databases/utilities.ts
+++ b/packages/manager/src/features/Databases/utilities.ts
@@ -1,3 +1,5 @@
+import { DateTime } from 'luxon';
+
 import { useFlags } from 'src/hooks/useFlags';
 import { useAccount } from 'src/queries/account/account';
 import { useDatabaseEnginesQuery } from 'src/queries/databases/databases';
@@ -50,3 +52,26 @@ export const useIsDatabasesEnabled = () => {
     isDatabasesEnabled: userCouldLoadDatabaseEngines,
   };
 };
+
+/**
+ * Checks if a given date is outside the timeframe between the oldest backup and today.
+ *
+ * @param {DateTime} date - The date you want to check.
+ * @param {DateTime | null} oldestBackup - The date of the oldest backup. If there are no backups (i.e., `null`), the function will return `false`.
+ * @returns {boolean}
+ *   - `true` if the date is before the oldest backup or after today.
+ *   - `false` if the date is within the range between the oldest backup and today.
+ */
+export const isOutsideBackupTimeframe = (
+  date: DateTime,
+  oldestBackup: DateTime | null
+) => {
+  const today = DateTime.now().startOf('day');
+  if (!oldestBackup) {
+    return false;
+  }
+  const backupStart = oldestBackup.startOf('day');
+  const dateStart = date.startOf('day');
+
+  return dateStart < backupStart || dateStart > today;
+};
diff --git a/packages/manager/src/features/GlobalNotifications/DatabaseClusterInfoBanner.tsx b/packages/manager/src/features/GlobalNotifications/DatabaseClusterInfoBanner.tsx
index 256a2b8dee6..9b3c4780a1b 100644
--- a/packages/manager/src/features/GlobalNotifications/DatabaseClusterInfoBanner.tsx
+++ b/packages/manager/src/features/GlobalNotifications/DatabaseClusterInfoBanner.tsx
@@ -33,10 +33,10 @@ export const DatabaseClusterInfoBanner = () => {
           </li>
           <li>
             <Typography variant="body2">
-              You won’t be charged for Aiven database clusters created during
+              You won’t be charged for Aiven Database clusters created during
               duration of the Beta phase. If you decide to keep the new clusters
               later on, you’ll be charged according to the new payment. You can
-              always remove unwanted clusters.
+              always delete unwanted clusters.
             </Typography>
           </li>
         </ul>
diff --git a/packages/manager/src/mocks/serverHandlers.ts b/packages/manager/src/mocks/serverHandlers.ts
index 28282349697..494618e55ec 100644
--- a/packages/manager/src/mocks/serverHandlers.ts
+++ b/packages/manager/src/mocks/serverHandlers.ts
@@ -264,7 +264,7 @@ const databases = [
   }),
 
   http.get('*/databases/:engine/instances/:databaseId/backups', () => {
-    const backups = databaseBackupFactory.buildList(7);
+    const backups = databaseBackupFactory.buildList(10);
     return HttpResponse.json(makeResourcePage(backups));
   }),
 
diff --git a/packages/manager/src/queries/databases/databases.ts b/packages/manager/src/queries/databases/databases.ts
index 89062f4fcd9..65f602aa312 100644
--- a/packages/manager/src/queries/databases/databases.ts
+++ b/packages/manager/src/queries/databases/databases.ts
@@ -5,8 +5,9 @@ import {
   getDatabaseCredentials,
   getDatabases,
   getEngineDatabase,
+  legacyRestoreWithBackup,
+  newRestoreWithBackup,
   resetDatabaseCredentials,
-  restoreWithBackup,
   updateDatabase,
 } from '@linode/api-v4/lib/databases';
 import { createQueryKeys } from '@lukemorales/query-key-factory';
@@ -208,7 +209,7 @@ export const useRestoreFromBackupMutation = (
 ) => {
   const queryClient = useQueryClient();
   return useMutation<{}, APIError[]>({
-    mutationFn: () => restoreWithBackup(engine, databaseId, backupId),
+    mutationFn: () => legacyRestoreWithBackup(engine, databaseId, backupId),
     onSuccess() {
       queryClient.invalidateQueries({
         queryKey: databaseQueries.databases.queryKey,
@@ -219,3 +220,22 @@ export const useRestoreFromBackupMutation = (
     },
   });
 };
+
+export const useNewRestoreFromBackupMutation = (
+  engine: Engine,
+  label: string,
+  fork: {
+    restore_time?: string;
+    source: number;
+  }
+) => {
+  const queryClient = useQueryClient();
+  return useMutation<{}, APIError[]>({
+    mutationFn: () => newRestoreWithBackup(engine, label, fork),
+    onSuccess() {
+      queryClient.invalidateQueries({
+        queryKey: databaseQueries.databases.queryKey,
+      });
+    },
+  });
+};
diff --git a/yarn.lock b/yarn.lock
index eedc9ceaa23..e2290a1b0d9 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -335,6 +335,13 @@
   dependencies:
     regenerator-runtime "^0.14.0"
 
+"@babel/runtime@^7.25.0":
+  version "7.25.0"
+  resolved "https://registry.npmjs.org/@babel/runtime/-/runtime-7.25.0.tgz#3af9a91c1b739c569d5d80cc917280919c544ecb"
+  integrity sha512-7dRy4DwXwtzBrPbZflqxnvfxLF8kdZXPkhymtDeFoFqE6ldzjQFgYTtYIFARcLEYDrqfBfYcZt1WqFxRoyC9Rw==
+  dependencies:
+    regenerator-runtime "^0.14.0"
+
 "@babel/template@^7.23.9":
   version "7.23.9"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.23.9.tgz#f881d0487cba2828d3259dcb9ef5005a9731011a"
@@ -1453,6 +1460,15 @@
     "@mui/utils" "^5.15.9"
     prop-types "^15.8.1"
 
+"@mui/private-theming@^5.16.6":
+  version "5.16.6"
+  resolved "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.16.6.tgz#547671e7ae3f86b68d1289a0b90af04dfcc1c8c9"
+  integrity sha512-rAk+Rh8Clg7Cd7shZhyt2HGTTE5wYKNSJ5sspf28Fqm/PZ69Er9o6KX25g03/FG2dfpg5GCwZh/xOojiTfm3hw==
+  dependencies:
+    "@babel/runtime" "^7.23.9"
+    "@mui/utils" "^5.16.6"
+    prop-types "^15.8.1"
+
 "@mui/styled-engine@^5.15.9":
   version "5.15.9"
   resolved "https://registry.yarnpkg.com/@mui/styled-engine/-/styled-engine-5.15.9.tgz#444605039ec3fe456bdd5d5cb94330183be62b91"
@@ -1463,6 +1479,16 @@
     csstype "^3.1.3"
     prop-types "^15.8.1"
 
+"@mui/styled-engine@^5.16.6":
+  version "5.16.6"
+  resolved "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.16.6.tgz#60110c106dd482dfdb7e2aa94fd6490a0a3f8852"
+  integrity sha512-zaThmS67ZmtHSWToTiHslbI8jwrmITcN93LQaR2lKArbvS7Z3iLkwRoiikNWutx9MBs8Q6okKvbZq1RQYB3v7g==
+  dependencies:
+    "@babel/runtime" "^7.23.9"
+    "@emotion/cache" "^11.11.0"
+    csstype "^3.1.3"
+    prop-types "^15.8.1"
+
 "@mui/system@^5.15.9":
   version "5.15.9"
   resolved "https://registry.yarnpkg.com/@mui/system/-/system-5.15.9.tgz#8a34ac0ab133af2550cc7ab980a35174142fd265"
@@ -1477,11 +1503,30 @@
     csstype "^3.1.3"
     prop-types "^15.8.1"
 
+"@mui/system@^5.16.5":
+  version "5.16.6"
+  resolved "https://registry.npmjs.org/@mui/system/-/system-5.16.6.tgz#2dabe63d2e45816ce611c40d6e3f79b9c2ccbcd7"
+  integrity sha512-5xgyJjBIMPw8HIaZpfbGAaFYPwImQn7Nyh+wwKWhvkoIeDosQ1ZMVrbTclefi7G8hNmqhip04duYwYpbBFnBgw==
+  dependencies:
+    "@babel/runtime" "^7.23.9"
+    "@mui/private-theming" "^5.16.6"
+    "@mui/styled-engine" "^5.16.6"
+    "@mui/types" "^7.2.15"
+    "@mui/utils" "^5.16.6"
+    clsx "^2.1.0"
+    csstype "^3.1.3"
+    prop-types "^15.8.1"
+
 "@mui/types@^7.2.13":
   version "7.2.13"
   resolved "https://registry.yarnpkg.com/@mui/types/-/types-7.2.13.tgz#d1584912942f9dc042441ecc2d1452be39c666b8"
   integrity sha512-qP9OgacN62s+l8rdDhSFRe05HWtLLJ5TGclC9I1+tQngbssu0m2dmFZs+Px53AcOs9fD7TbYd4gc9AXzVqO/+g==
 
+"@mui/types@^7.2.15":
+  version "7.2.15"
+  resolved "https://registry.npmjs.org/@mui/types/-/types-7.2.15.tgz#dadd232fe9a70be0d526630675dff3b110f30b53"
+  integrity sha512-nbo7yPhtKJkdf9kcVOF8JZHPZTmqXjJ/tI0bdWgHg5tp9AnIN4Y7f7wm9T+0SyGYJk76+GYZ8Q5XaTYAsUHN0Q==
+
 "@mui/utils@^5.15.9":
   version "5.15.9"
   resolved "https://registry.yarnpkg.com/@mui/utils/-/utils-5.15.9.tgz#2bdf925e274d87cbe90c14eb52d0835318205e86"
@@ -1492,6 +1537,31 @@
     prop-types "^15.8.1"
     react-is "^18.2.0"
 
+"@mui/utils@^5.16.5", "@mui/utils@^5.16.6":
+  version "5.16.6"
+  resolved "https://registry.npmjs.org/@mui/utils/-/utils-5.16.6.tgz#905875bbc58d3dcc24531c3314a6807aba22a711"
+  integrity sha512-tWiQqlhxAt3KENNiSRL+DIn9H5xNVK6Jjf70x3PnfQPz1MPBdh7yyIcAyVBT9xiw7hP3SomRhPR7hzBMBCjqEA==
+  dependencies:
+    "@babel/runtime" "^7.23.9"
+    "@mui/types" "^7.2.15"
+    "@types/prop-types" "^15.7.12"
+    clsx "^2.1.1"
+    prop-types "^15.8.1"
+    react-is "^18.3.1"
+
+"@mui/x-date-pickers@^7.12.0":
+  version "7.12.0"
+  resolved "https://registry.npmjs.org/@mui/x-date-pickers/-/x-date-pickers-7.12.0.tgz#189acc9e3d2a5be260fab9faf5e6add516e59b09"
+  integrity sha512-WU5C7QNfSpJ9cP8vl2sY7q35NW+0TUMgEy+sl98fcPhLckq3cgV1wnVxoZnQZ3BxVQAtx+7ag/MpefU03vJcVw==
+  dependencies:
+    "@babel/runtime" "^7.25.0"
+    "@mui/system" "^5.16.5"
+    "@mui/utils" "^5.16.5"
+    "@types/react-transition-group" "^4.4.10"
+    clsx "^2.1.1"
+    prop-types "^15.8.1"
+    react-transition-group "^4.4.5"
+
 "@nodelib/fs.scandir@2.1.5":
   version "2.1.5"
   resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz#7619c2eb21b25483f6d167548b4cfd5a7488c3d5"
@@ -3038,6 +3108,11 @@
   resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.11.tgz#2596fb352ee96a1379c657734d4b913a613ad563"
   integrity sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng==
 
+"@types/prop-types@^15.7.12":
+  version "15.7.12"
+  resolved "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.12.tgz#12bb1e2be27293c1406acb6af1c3f3a1481d98c6"
+  integrity sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==
+
 "@types/qrcode.react@^0.8.0":
   version "0.8.2"
   resolved "https://registry.yarnpkg.com/@types/qrcode.react/-/qrcode.react-0.8.2.tgz#35f6e2e454970b6a8404a834c9e1edc2e7f1c105"
@@ -4584,6 +4659,11 @@ clsx@^2.0.0, clsx@^2.1.0:
   resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.1.0.tgz#e851283bcb5c80ee7608db18487433f7b23f77cb"
   integrity sha512-m3iNNWpd9rl3jvvcBnu70ylMdrXt8Vlq4HYadnU5fwcOtvkSQWPmj7amUcDT2qYI7risszBjI5AUIUox9D16pg==
 
+clsx@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz#eed397c9fd8bd882bfb18deab7102049a2f32999"
+  integrity sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==
+
 code-point-at@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/code-point-at/-/code-point-at-1.1.0.tgz#0d070b4d043a5bea33a2f1a40e2edb3d9a4ccf77"
@@ -9787,6 +9867,11 @@ react-is@^17.0.1, react-is@^17.0.2:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"
   integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==
 
+react-is@^18.3.1:
+  version "18.3.1"
+  resolved "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz#e83557dc12eae63a99e003a46388b1dcbb44db7e"
+  integrity sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==
+
 react-lifecycles-compat@^3.0.2:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"

From f9a94a0c7d0cc6df7955cfe5be8a4b5bdea85979 Mon Sep 17 00:00:00 2001
From: Hana Xu <115299789+hana-linode@users.noreply.github.com>
Date: Thu, 19 Sep 2024 18:34:56 -0400
Subject: [PATCH 29/62] feat: [M3-8185] - Add Accessibility tab to Storybook
 Stories (#10942)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Description 📝
We could utilize Storybook more. One way we could do that is by using it for Accessibility testing when developing a component

## Changes  🔄
- Add Accessibility tab to Stories

## How to test 🧪
### Verification steps
(How to verify changes)
- Pull this PR and run storybook locally
- Open a Story and you should see a new Accessibility tab
---
 .../pr-10942-added-1726774387695.md           |  5 +++++
 packages/manager/.storybook/main.ts           |  1 +
 packages/manager/package.json                 |  1 +
 yarn.lock                                     | 20 +++++++++++++++++++
 4 files changed, 27 insertions(+)
 create mode 100644 packages/manager/.changeset/pr-10942-added-1726774387695.md

diff --git a/packages/manager/.changeset/pr-10942-added-1726774387695.md b/packages/manager/.changeset/pr-10942-added-1726774387695.md
new file mode 100644
index 00000000000..1d68b93892d
--- /dev/null
+++ b/packages/manager/.changeset/pr-10942-added-1726774387695.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Added
+---
+
+Accessibility tab to Storybook Stories ([#10942](https://github.com/linode/manager/pull/10942))
diff --git a/packages/manager/.storybook/main.ts b/packages/manager/.storybook/main.ts
index 3592d630db9..c8ca860f561 100644
--- a/packages/manager/.storybook/main.ts
+++ b/packages/manager/.storybook/main.ts
@@ -17,6 +17,7 @@ const config: StorybookConfig = {
     '@storybook/addon-actions',
     'storybook-dark-mode',
     '@storybook/addon-storysource',
+    '@storybook/addon-a11y',
   ],
   staticDirs: ['../public'],
   framework: {
diff --git a/packages/manager/package.json b/packages/manager/package.json
index c97d8c31358..999a36a80f4 100644
--- a/packages/manager/package.json
+++ b/packages/manager/package.json
@@ -115,6 +115,7 @@
   },
   "devDependencies": {
     "@linode/eslint-plugin-cloud-manager": "^0.0.5",
+    "@storybook/addon-a11y": "^8.3.0",
     "@storybook/addon-actions": "^8.3.0",
     "@storybook/addon-controls": "^8.3.0",
     "@storybook/addon-docs": "^8.3.0",
diff --git a/yarn.lock b/yarn.lock
index e2290a1b0d9..6423caaf392 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2012,6 +2012,14 @@
   dependencies:
     "@sentry/types" "7.100.1"
 
+"@storybook/addon-a11y@^8.3.0":
+  version "8.3.2"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-a11y/-/addon-a11y-8.3.2.tgz#b8ce0a3f922d86a0283f2249e2b1f47bcc97ddb1"
+  integrity sha512-i0qyMp+MxzJ3UY3Absqwxhry4JqZo9yk1XLWld7hJpfAzmrulnaIctudQ940/OMFPcEIsOVdg8euz0IGW3HTNw==
+  dependencies:
+    "@storybook/addon-highlight" "8.3.2"
+    axe-core "^4.2.0"
+
 "@storybook/addon-actions@^8.3.0":
   version "8.3.0"
   resolved "https://registry.yarnpkg.com/@storybook/addon-actions/-/addon-actions-8.3.0.tgz#0a5c2d7776ae201fa331bcdc48230fc866e854ac"
@@ -2051,6 +2059,13 @@
     rehype-slug "^6.0.0"
     ts-dedent "^2.0.0"
 
+"@storybook/addon-highlight@8.3.2":
+  version "8.3.2"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-highlight/-/addon-highlight-8.3.2.tgz#a23669cadeed5a5bd18ebbbcd6258f9492508b6b"
+  integrity sha512-JFL/JLBZfa89POgi8lBdt8TzzCS1bgN/X6Qj1MlTq3pxHYqO66eG8DtMLjpuXKOhs8Dhdgs9/uxy5Yd+MFVRmQ==
+  dependencies:
+    "@storybook/global" "^5.0.0"
+
 "@storybook/addon-mdx-gfm@^8.3.0":
   version "8.3.0"
   resolved "https://registry.yarnpkg.com/@storybook/addon-mdx-gfm/-/addon-mdx-gfm-8.3.0.tgz#2a6dadfa76b5f834a2a0f984ddcac0741f2495c8"
@@ -4053,6 +4068,11 @@ axe-core@=4.7.0:
   resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.7.0.tgz#34ba5a48a8b564f67e103f0aa5768d76e15bbbbf"
   integrity sha512-M0JtH+hlOL5pLQwHOLNYZaXuhqmvS8oExsqB1SBYgA4Dk7u/xx+YdGHXaK5pyUfed5mYXdlYiphWq3G8cRi5JQ==
 
+axe-core@^4.2.0:
+  version "4.10.0"
+  resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.10.0.tgz#d9e56ab0147278272739a000880196cdfe113b59"
+  integrity sha512-Mr2ZakwQ7XUAjp7pAwQWRhhK8mQQ6JAaNWSjmjxil0R8BPioMtQsTLOolGYkji1rcL++3dCqZA3zWqpT+9Ew6g==
+
 axios-mock-adapter@^1.22.0:
   version "1.22.0"
   resolved "https://registry.yarnpkg.com/axios-mock-adapter/-/axios-mock-adapter-1.22.0.tgz#0f3e6be0fc9b55baab06f2d49c0b71157e7c053d"

From 538d9e10c92c134e4fc1d8d03239f2567a645a86 Mon Sep 17 00:00:00 2001
From: venkatmano-akamai <chk-Venkatesh@outlook.com>
Date: Fri, 20 Sep 2024 20:37:13 +0530
Subject: [PATCH 30/62] upcoming: [DI-20800] - CSS for widget size control and
 feedbacks (#10951)

* upcoming: [DI-20585] - CSS for widget size control and feedbacks

* upcoming: [DI-20585] - Some simple updates for using styled wrapper and margin updates

* upcoming: [DI-20800] - SVG updates according to CDS 2.0

* upcoming: [DI-20800] - Simple CSS minHeight updates

* upcoming: [DI-20800] - Added changeset

* upcoming: [DI-20800] - CSS updates for button width

* upcoming: [DI-20800] - Widget level height corrections

* upcoming: [DI-20800] - Mock update to have one more dimension

* upcoming: [DI-20800] - Spacing improvement in grids

* upcoming: [DI-20800] - Use Theme spacing and colors

* upcoming: [DI-20800] - Use calc for custom themes

* upcoming: [DI-20800] - Comments for height in px

* upcoming: [DI-20800] - revert unwanted file changes to latest develop

* upcoming: [DI-20800] - Use theme spacing wherever applicable

* Revert "upcoming: [DI-20800] - Use theme spacing wherever applicable"

This reverts commit c8615b2e467437c9d3cd3d22ce0a764fdb081223.

* upcoming: [DI-20800] - Placeholder value updates

* upcoming: [DI-20800] - Style updates for widget

* upcoming: [DI-20800] - SVG fill color update

* upcoming: [DI-20800] - useTheme values

* upcoming: [DI-20800] - Reusable component padding updates

* upcoming: [DI-20800] - Simple refactoring

* upcoming: [DI-20800] - Rename files

* upcoming: [DI-20800] - PR comments addressed

* upcoming: [DI-20800] - Removed styled widget wrapper

* Update packages/manager/src/features/CloudPulse/Widget/CloudPulseWidget.tsx

Co-authored-by: Dajahi Wiley <114682940+dwiley-akamai@users.noreply.github.com>

* Update packages/manager/.changeset/pr-10951-upcoming-features-1726561825358.md

Co-authored-by: Dajahi Wiley <114682940+dwiley-akamai@users.noreply.github.com>

* Update packages/manager/src/features/CloudPulse/shared/CloudPulseDashboardFilterBuilder.tsx

Co-authored-by: Dajahi Wiley <114682940+dwiley-akamai@users.noreply.github.com>

* Update packages/manager/src/features/CloudPulse/shared/CloudPulseDashboardFilterBuilder.tsx

Co-authored-by: Dajahi Wiley <114682940+dwiley-akamai@users.noreply.github.com>

* upcoming: [DI-20800] - UT updates

* upcoming: [DI-20800] - UT updates

* upcoming: [DI-20800] - Reverting not needed changes

---------

Co-authored-by: vmangalr <vmangalr@akamai.com>
Co-authored-by: Jaalah Ramos <125309814+jaalah-akamai@users.noreply.github.com>
Co-authored-by: Dajahi Wiley <114682940+dwiley-akamai@users.noreply.github.com>
---
 ...r-10951-upcoming-features-1726561825358.md |  5 ++
 .../manager/src/assets/icons/arrow_down.svg   |  4 +
 .../manager/src/assets/icons/arrow_right.svg  |  4 +
 packages/manager/src/assets/icons/refresh.svg |  6 ++
 packages/manager/src/assets/icons/zoomin.svg  | 10 +++
 packages/manager/src/assets/icons/zoomout.svg | 10 +++
 .../Dashboard/CloudPulseDashboard.tsx         |  2 +-
 .../CloudPulseDashboardLanding.test.tsx       |  2 +-
 .../Dashboard/CloudPulseDashboardLanding.tsx  |  2 +-
 .../CloudPulseDashboardWithFilters.test.tsx   | 10 ++-
 .../CloudPulseDashboardWithFilters.tsx        | 22 +++---
 .../CloudPulse/Overview/GlobalFilters.tsx     | 79 +++++++++++--------
 .../features/CloudPulse/Utils/FilterConfig.ts | 10 +--
 .../CloudPulse/Widget/CloudPulseWidget.tsx    | 29 ++++---
 .../Widget/components/CloudPulseLineGraph.tsx |  9 ++-
 .../CloudPulse/Widget/components/Zoomer.tsx   |  7 +-
 .../CloudPulseComponentRenderer.test.tsx      |  4 +-
 .../CloudPulseDashboardFilterBuilder.test.tsx |  4 +-
 .../CloudPulseDashboardFilterBuilder.tsx      | 46 +++++++----
 .../shared/CloudPulseDashboardSelect.test.tsx |  2 +-
 .../shared/CloudPulseDashboardSelect.tsx      |  2 +-
 .../shared/CloudPulseRegionSelect.tsx         |  2 +-
 .../shared/CloudPulseResourcesSelect.test.tsx |  2 +-
 .../shared/CloudPulseResourcesSelect.tsx      |  2 +-
 .../shared/CloudPulseTimeRangeSelect.tsx      |  2 +-
 packages/manager/src/mocks/serverHandlers.ts  | 52 ++++++++++--
 26 files changed, 226 insertions(+), 103 deletions(-)
 create mode 100644 packages/manager/.changeset/pr-10951-upcoming-features-1726561825358.md
 create mode 100644 packages/manager/src/assets/icons/arrow_down.svg
 create mode 100644 packages/manager/src/assets/icons/arrow_right.svg
 create mode 100644 packages/manager/src/assets/icons/refresh.svg
 create mode 100644 packages/manager/src/assets/icons/zoomin.svg
 create mode 100644 packages/manager/src/assets/icons/zoomout.svg

diff --git a/packages/manager/.changeset/pr-10951-upcoming-features-1726561825358.md b/packages/manager/.changeset/pr-10951-upcoming-features-1726561825358.md
new file mode 100644
index 00000000000..aa7056eab9e
--- /dev/null
+++ b/packages/manager/.changeset/pr-10951-upcoming-features-1726561825358.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Enhance CSS for Cloudpulse widget and main bar components ([#10951](https://github.com/linode/manager/pull/10951))
diff --git a/packages/manager/src/assets/icons/arrow_down.svg b/packages/manager/src/assets/icons/arrow_down.svg
new file mode 100644
index 00000000000..9f1e07f546c
--- /dev/null
+++ b/packages/manager/src/assets/icons/arrow_down.svg
@@ -0,0 +1,4 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M15 7.5L10 12.5L5 7.5" fill="currentColor"/>
+<path d="M15 7.5L10 12.5L5 7.5L15 7.5Z" stroke="currentColor" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file
diff --git a/packages/manager/src/assets/icons/arrow_right.svg b/packages/manager/src/assets/icons/arrow_right.svg
new file mode 100644
index 00000000000..1791c6569e8
--- /dev/null
+++ b/packages/manager/src/assets/icons/arrow_right.svg
@@ -0,0 +1,4 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.33325 5L13.3333 10L8.33325 15" fill="currentColor"/>
+<path d="M8.33325 5L13.3333 10L8.33325 15L8.33325 5Z" stroke="currentColor" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file
diff --git a/packages/manager/src/assets/icons/refresh.svg b/packages/manager/src/assets/icons/refresh.svg
new file mode 100644
index 00000000000..677cb9966bb
--- /dev/null
+++ b/packages/manager/src/assets/icons/refresh.svg
@@ -0,0 +1,6 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.5001 10.0001C17.9603 10.0001 18.3377 10.3741 18.2918 10.832C18.1449 12.2959 17.6124 13.7001 16.7419 14.8983C15.7075 16.322 14.2489 17.3817 12.5752 17.9256C10.9015 18.4694 9.09863 18.4694 7.42494 17.9256C6.01638 17.4679 4.76019 16.6448 3.78096 15.5469C3.47463 15.2034 3.56011 14.679 3.93245 14.4085C4.30479 14.1379 4.82244 14.2248 5.13727 14.5605C5.90338 15.3774 6.86635 15.9916 7.93997 16.3405C9.27892 16.7755 10.7212 16.7755 12.0602 16.3405C13.3991 15.9054 14.566 15.0576 15.3935 13.9186C16.0571 13.0054 16.4751 11.9425 16.6147 10.8313C16.6721 10.3746 17.0398 10.0001 17.5001 10.0001Z" />
+<path d="M2.49992 9.99992C2.03968 9.99992 1.66227 9.62589 1.70821 9.16795C1.85508 7.70414 2.38757 6.2999 3.25811 5.10171C4.29251 3.67798 5.75108 2.61826 7.42478 2.07445C9.09847 1.53063 10.9014 1.53063 12.5751 2.07445C13.9836 2.53212 15.2398 3.35518 16.219 4.4531C16.5254 4.79658 16.4399 5.32101 16.0675 5.59153C15.6952 5.86205 15.1776 5.77518 14.8627 5.43947C14.0966 4.62257 13.1337 4.00838 12.06 3.65954C10.7211 3.22449 9.27876 3.22449 7.93981 3.65954C6.60085 4.09459 5.43399 4.94237 4.60647 6.08135C3.94294 6.99462 3.52489 8.05753 3.38526 9.16873C3.32788 9.62537 2.96016 9.99992 2.49992 9.99992Z" />
+<path d="M4.16675 9.16659L2.50008 10.8333L0.833415 9.16659" stroke="currentColor" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M15.8333 10.8334L17.4999 9.16675L19.1666 10.8334" stroke="currentColor" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file
diff --git a/packages/manager/src/assets/icons/zoomin.svg b/packages/manager/src/assets/icons/zoomin.svg
new file mode 100644
index 00000000000..fcb722675ef
--- /dev/null
+++ b/packages/manager/src/assets/icons/zoomin.svg
@@ -0,0 +1,10 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.6667 7.5H12.5V3.33333" stroke="currentColor" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M3.33331 7.5H7.49998V3.33333" stroke="currentColor" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M3.33333 12.5001H7.5V16.6667" stroke="currentColor" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M16.6667 12.5001H12.5V16.6667" stroke="currentColor" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12.5 7.5L17.5 2.5" stroke="currentColor" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7.5 7.5L2.5 2.5" stroke="currentColor" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7.5 12.5L2.5 17.5" stroke="currentColor" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12.5 12.5L17.5 17.5" stroke="currentColor" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file
diff --git a/packages/manager/src/assets/icons/zoomout.svg b/packages/manager/src/assets/icons/zoomout.svg
new file mode 100644
index 00000000000..7021f3a5f61
--- /dev/null
+++ b/packages/manager/src/assets/icons/zoomout.svg
@@ -0,0 +1,10 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.3333 2.5H17.5V6.66667" stroke="#888F91" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6.66669 2.5H2.50002V6.66667" stroke="#888F91" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6.66667 17.4999H2.5V13.3333" stroke="#888F91" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M13.3333 17.4999H17.5V13.3333" stroke="#888F91" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M17.5 2.5L11.6667 8.33333" stroke="#888F91" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M2.49998 2.5L8.33331 8.33333" stroke="#888F91" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M2.5 17.5001L8.33333 11.6667" stroke="#888F91" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M17.5 17.5001L11.6667 11.6667" stroke="#888F91" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file
diff --git a/packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboard.tsx b/packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboard.tsx
index a019a829a70..837f5e54c21 100644
--- a/packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboard.tsx
+++ b/packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboard.tsx
@@ -203,7 +203,7 @@ export const CloudPulseDashboard = (props: DashboardProperties) => {
     // maintain a copy
     const newDashboard: Dashboard = createObjectCopy(dashboard)!;
     return (
-      <Grid columnSpacing={1} container item rowSpacing={2} xs={12}>
+      <Grid columnSpacing={2} container item rowSpacing={2} xs={12}>
         {{ ...newDashboard }.widgets.map((widget, index) => {
           // check if widget metric definition is available or not
           if (widget) {
diff --git a/packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboardLanding.test.tsx b/packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboardLanding.test.tsx
index d0cfe9b3470..d54a52a0500 100644
--- a/packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboardLanding.test.tsx
+++ b/packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboardLanding.test.tsx
@@ -8,7 +8,7 @@ import { renderWithTheme } from 'src/utilities/testHelpers';
 import { CloudPulseDashboardLanding } from './CloudPulseDashboardLanding';
 
 const dashboardLabel = 'Factory Dashboard-1';
-const selectDashboardLabel = 'Select Dashboard';
+const selectDashboardLabel = 'Select a Dashboard';
 const queryMocks = vi.hoisted(() => ({
   useCloudPulseDashboardsQuery: vi.fn().mockReturnValue({}),
   useLoadUserPreferences: vi.fn().mockReturnValue({}),
diff --git a/packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboardLanding.tsx b/packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboardLanding.tsx
index b31ee7f84a8..3907346f617 100644
--- a/packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboardLanding.tsx
+++ b/packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboardLanding.tsx
@@ -131,7 +131,7 @@ export const CloudPulseDashboardLanding = () => {
   }
 
   return (
-    <Grid container spacing={2}>
+    <Grid container paddingTop={1} spacing={2}>
       <Grid item xs={12}>
         <Paper>
           <GlobalFilters
diff --git a/packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboardWithFilters.test.tsx b/packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboardWithFilters.test.tsx
index b2382979830..0b3d44ae1ac 100644
--- a/packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboardWithFilters.test.tsx
+++ b/packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboardWithFilters.test.tsx
@@ -10,7 +10,7 @@ const queryMocks = vi.hoisted(() => ({
   useCloudPulseDashboardByIdQuery: vi.fn().mockReturnValue({}),
 }));
 
-const selectTimeDurationPlaceholder = 'Select Time Duration';
+const selectTimeDurationPlaceholder = 'Select a Time Duration';
 const circleProgress = 'circle-progress';
 const mandatoryFiltersError = 'Mandatory Filters not Selected';
 
@@ -63,7 +63,9 @@ describe('CloudPulseDashboardWithFilters component tests', () => {
       <CloudPulseDashboardWithFilters dashboardId={1} resource={1} />
     );
 
-    expect(screen.getByText(selectTimeDurationPlaceholder)).toBeDefined();
+    expect(
+      screen.getByPlaceholderText(selectTimeDurationPlaceholder)
+    ).toBeDefined();
     expect(screen.getByTestId(circleProgress)).toBeDefined(); // the dashboards started to render
   });
 
@@ -79,7 +81,9 @@ describe('CloudPulseDashboardWithFilters component tests', () => {
       <CloudPulseDashboardWithFilters dashboardId={1} resource={1} />
     );
 
-    expect(screen.getByText(selectTimeDurationPlaceholder)).toBeDefined();
+    expect(
+      screen.getByPlaceholderText(selectTimeDurationPlaceholder)
+    ).toBeDefined();
     expect(screen.getByTestId(circleProgress)).toBeDefined(); // the dashboards started to render
   });
 
diff --git a/packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboardWithFilters.tsx b/packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboardWithFilters.tsx
index 2354bda5533..e8f65dd6842 100644
--- a/packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboardWithFilters.tsx
+++ b/packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboardWithFilters.tsx
@@ -1,4 +1,4 @@
-import { Divider, Grid, styled } from '@mui/material';
+import { Grid, styled } from '@mui/material';
 import React from 'react';
 
 import CloudPulseIcon from 'src/assets/icons/entityIcons/monitor.svg';
@@ -100,7 +100,11 @@ export const CloudPulseDashboardWithFilters = React.memo(
 
     return (
       <>
-        <Paper>
+        <Paper
+          sx={{
+            padding: 0,
+          }}
+        >
           <Grid
             justifyContent={{
               sm: 'flex-end',
@@ -126,16 +130,12 @@ export const CloudPulseDashboardWithFilters = React.memo(
               />
             </Grid>
           </Grid>
-          <Divider />
           {isFilterBuilderNeeded && (
-            <>
-              <CloudPulseDashboardFilterBuilder
-                dashboard={dashboard}
-                emitFilterChange={onFilterChange}
-                isServiceAnalyticsIntegration={true}
-              />
-              <Divider />
-            </>
+            <CloudPulseDashboardFilterBuilder
+              dashboard={dashboard}
+              emitFilterChange={onFilterChange}
+              isServiceAnalyticsIntegration={true}
+            />
           )}
         </Paper>
         {isMandatoryFiltersSelected ? (
diff --git a/packages/manager/src/features/CloudPulse/Overview/GlobalFilters.tsx b/packages/manager/src/features/CloudPulse/Overview/GlobalFilters.tsx
index 248e1fcfa33..b6b290176d7 100644
--- a/packages/manager/src/features/CloudPulse/Overview/GlobalFilters.tsx
+++ b/packages/manager/src/features/CloudPulse/Overview/GlobalFilters.tsx
@@ -1,9 +1,9 @@
-import { IconButton } from '@mui/material';
+import { IconButton, useTheme } from '@mui/material';
 import { Grid } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import * as React from 'react';
 
-import Reload from 'src/assets/icons/reload.svg';
+import Reload from 'src/assets/icons/refresh.svg';
 import { Divider } from 'src/components/Divider';
 
 import { CloudPulseDashboardFilterBuilder } from '../shared/CloudPulseDashboardFilterBuilder';
@@ -71,44 +71,53 @@ export const GlobalFilters = React.memo((props: GlobalFilterProperties) => {
     [handleAnyFilterChange]
   );
 
+  const theme = useTheme();
+
   return (
-    <Grid container gap={1}>
-      <Grid
-        columnSpacing={2}
-        container
-        item
-        justifyContent="space-between"
-        mt={2}
-        px={2}
-        rowGap={2}
-        xs={12}
-      >
-        <Grid display={'flex'} item md={4} sm={5} xs={12}>
-          <CloudPulseDashboardSelect
-            handleDashboardChange={onDashboardChange}
-          />
+    <Grid container>
+      <Grid container item m={3} rowGap={1} xs={12}>
+        <Grid
+          columnSpacing={2}
+          container
+          item
+          justifyContent="space-between"
+          rowSpacing={2}
+        >
+          <Grid display={'flex'} item md={4} sm={5} xs={12}>
+            <CloudPulseDashboardSelect
+              handleDashboardChange={onDashboardChange}
+            />
+          </Grid>
+          <Grid display="flex" gap={1} item md={4} sm={5} xs={12}>
+            <CloudPulseTimeRangeSelect
+              handleStatsChange={handleTimeRangeChange}
+              hideLabel
+              label="Select Time Range"
+            />
+            <IconButton
+              sx={{
+                marginBlockEnd: 'auto',
+              }}
+              disabled={!selectedDashboard}
+              onClick={() => handleGlobalRefresh(selectedDashboard)}
+              size="small"
+            >
+              <StyledReload />
+            </IconButton>
+          </Grid>
         </Grid>
-        <Grid display="flex" gap={1} item md={4} sm={5} xs={12}>
-          <CloudPulseTimeRangeSelect
-            handleStatsChange={handleTimeRangeChange}
-            hideLabel
-            label="Select Time Range"
-          />
-          <IconButton
+      </Grid>
+      {selectedDashboard && (
+        <Grid item xs={12}>
+          <Divider
             sx={{
-              marginBlockEnd: 'auto',
+              borderColor: theme.color.grey5,
+              margin: 0,
             }}
-            disabled={!selectedDashboard}
-            onClick={() => handleGlobalRefresh(selectedDashboard)}
-            size="small"
-          >
-            <StyledReload />
-          </IconButton>
+          />
         </Grid>
-      </Grid>
-      <Grid item xs={12}>
-        <Divider />
-      </Grid>
+      )}
+
       {selectedDashboard && (
         <CloudPulseDashboardFilterBuilder
           dashboard={selectedDashboard}
diff --git a/packages/manager/src/features/CloudPulse/Utils/FilterConfig.ts b/packages/manager/src/features/CloudPulse/Utils/FilterConfig.ts
index cc6782926a2..cb2049952c1 100644
--- a/packages/manager/src/features/CloudPulse/Utils/FilterConfig.ts
+++ b/packages/manager/src/features/CloudPulse/Utils/FilterConfig.ts
@@ -28,7 +28,7 @@ export const LINODE_CONFIG: Readonly<CloudPulseServiceTypeFilterMap> = {
         isMultiSelect: true,
         name: 'Resource',
         neededInServicePage: false,
-        placeholder: 'Select Resources',
+        placeholder: 'Select a Resource',
         priority: 2,
       },
       name: 'Resources',
@@ -42,7 +42,7 @@ export const LINODE_CONFIG: Readonly<CloudPulseServiceTypeFilterMap> = {
         isMultiSelect: false,
         name: TIME_DURATION,
         neededInServicePage: false,
-        placeholder: 'Select Duration',
+        placeholder: 'Select a Duration',
         priority: 3,
       },
       name: TIME_DURATION,
@@ -100,7 +100,7 @@ export const DBAAS_CONFIG: Readonly<CloudPulseServiceTypeFilterMap> = {
         isMultiSelect: true,
         name: 'Resource',
         neededInServicePage: false,
-        placeholder: 'Select DB Cluster Names',
+        placeholder: 'Select a DB Cluster',
         priority: 3,
       },
       name: 'Resources',
@@ -114,7 +114,7 @@ export const DBAAS_CONFIG: Readonly<CloudPulseServiceTypeFilterMap> = {
         isMultiSelect: false,
         name: TIME_DURATION,
         neededInServicePage: false, // we will have a static time duration component, no need render from filter builder
-        placeholder: 'Select Duration',
+        placeholder: 'Select a Duration',
         priority: 4,
       },
       name: TIME_DURATION,
@@ -138,7 +138,7 @@ export const DBAAS_CONFIG: Readonly<CloudPulseServiceTypeFilterMap> = {
             label: 'Secondary',
           },
         ],
-        placeholder: 'Select Node Type',
+        placeholder: 'Select a Node Type',
         priority: 5,
         type: CloudPulseSelectTypes.static,
       },
diff --git a/packages/manager/src/features/CloudPulse/Widget/CloudPulseWidget.tsx b/packages/manager/src/features/CloudPulse/Widget/CloudPulseWidget.tsx
index feff3f8e0cd..2eb36a257b8 100644
--- a/packages/manager/src/features/CloudPulse/Widget/CloudPulseWidget.tsx
+++ b/packages/manager/src/features/CloudPulse/Widget/CloudPulseWidget.tsx
@@ -1,7 +1,8 @@
-import { Box, Grid, Paper, Stack, Typography } from '@mui/material';
+import { Box, Grid, Stack, Typography, useTheme } from '@mui/material';
 import { DateTime } from 'luxon';
 import React from 'react';
 
+import { Paper } from 'src/components/Paper';
 import { useFlags } from 'src/hooks/useFlags';
 import { useCloudPulseMetricsQuery } from 'src/queries/cloudpulse/metrics';
 import { useProfile } from 'src/queries/profile/profile';
@@ -25,12 +26,12 @@ import { ZoomIcon } from './components/Zoomer';
 
 import type { FilterValueType } from '../Dashboard/CloudPulseDashboardLanding';
 import type { CloudPulseResources } from '../shared/CloudPulseResourcesSelect';
-import type { Widgets } from '@linode/api-v4';
 import type {
   AvailableMetrics,
   TimeDuration,
   TimeGranularity,
 } from '@linode/api-v4';
+import type { Widgets } from '@linode/api-v4';
 import type { DataSet } from 'src/components/LineGraph/LineGraph';
 import type { Metrics } from 'src/utilities/statMetrics';
 
@@ -125,6 +126,8 @@ export const CloudPulseWidget = (props: CloudPulseWidgetProperties) => {
 
   const [widget, setWidget] = React.useState<Widgets>({ ...props.widget });
 
+  const theme = useTheme();
+
   const {
     additionalFilters,
     ariaLabel,
@@ -287,25 +290,27 @@ export const CloudPulseWidget = (props: CloudPulseWidgetProperties) => {
 
   const metricsApiCallError = error?.[0]?.reason;
   return (
-    <Grid item lg={widget.size} xs={12}>
-      <Paper>
-        <Stack spacing={2}>
+    <Grid container item lg={widget.size} xs={12}>
+      <Stack flexGrow={1} spacing={2}>
+        <Paper sx={{ flexGrow: 1 }}>
           <Stack
             alignItems={'center'}
             direction={{ sm: 'row' }}
             gap={{ sm: 0, xs: 2 }}
             justifyContent={{ sm: 'space-between' }}
+            marginBottom={1}
             padding={1}
           >
             <Typography marginLeft={1} variant="h2">
-              {convertStringToCamelCasesWithSpaces(widget.label)}{' '}
-              {!isLoading &&
-                `(${currentUnit}${unit.endsWith('ps') ? '/s' : ''})`}
+              {convertStringToCamelCasesWithSpaces(widget.label)} ({currentUnit}
+              {unit.endsWith('ps') ? '/s' : ''})
             </Typography>
             <Stack
               alignItems={'center'}
               direction={{ sm: 'row' }}
-              gap={{ md: 2, xs: 1 }}
+              gap={2}
+              maxHeight={`calc(${theme.spacing(10)} + 5px)`}
+              overflow="auto"
               width={{ sm: 'inherit', xs: '100%' }}
             >
               {availableMetrics?.scrape_interval && (
@@ -334,7 +339,6 @@ export const CloudPulseWidget = (props: CloudPulseWidgetProperties) => {
               </Box>
             </Stack>
           </Stack>
-
           <CloudPulseLineGraph
             error={
               status === 'error' && metricsApiCallError !== jweTokenExpiryError // show the error only if the error is not related to token expiration
@@ -350,13 +354,12 @@ export const CloudPulseWidget = (props: CloudPulseWidgetProperties) => {
             formatTooltip={(value: number) => formatToolTip(value, unit)}
             gridSize={widget.size}
             loading={isLoading || metricsApiCallError === jweTokenExpiryError} // keep loading until we fetch the refresh token
-            nativeLegend
             showToday={today}
             timezone={timezone}
             title={widget.label}
           />
-        </Stack>
-      </Paper>
+        </Paper>
+      </Stack>
     </Grid>
   );
 };
diff --git a/packages/manager/src/features/CloudPulse/Widget/components/CloudPulseLineGraph.tsx b/packages/manager/src/features/CloudPulse/Widget/components/CloudPulseLineGraph.tsx
index 80958e13749..4547d306b41 100644
--- a/packages/manager/src/features/CloudPulse/Widget/components/CloudPulseLineGraph.tsx
+++ b/packages/manager/src/features/CloudPulse/Widget/components/CloudPulseLineGraph.tsx
@@ -1,4 +1,4 @@
-import { Box, Typography } from '@mui/material';
+import { Box, Typography, useTheme } from '@mui/material';
 import * as React from 'react';
 
 import { CircleProgress } from 'src/components/CircleProgress';
@@ -23,6 +23,8 @@ export interface CloudPulseLineGraph extends LineGraphProps {
 export const CloudPulseLineGraph = React.memo((props: CloudPulseLineGraph) => {
   const { ariaLabel, data, error, legendRows, loading, ...rest } = props;
 
+  const theme = useTheme();
+
   if (loading) {
     return <CircleProgress sx={{ minHeight: '380px' }} />;
   }
@@ -46,6 +48,11 @@ export const CloudPulseLineGraph = React.memo((props: CloudPulseLineGraph) => {
             '& .MuiTable-root': {
               border: 0,
             },
+            backgroundColor: theme.bg.offWhite,
+            height: `calc(${theme.spacing(14)} + 3px)`, // 115px
+            maxHeight: `calc(${theme.spacing(14)} + 3px)`,
+            overflow: 'auto',
+            padding: theme.spacing(1),
           }}
           ariaLabel={ariaLabel}
           data={data}
diff --git a/packages/manager/src/features/CloudPulse/Widget/components/Zoomer.tsx b/packages/manager/src/features/CloudPulse/Widget/components/Zoomer.tsx
index 7b439274d2f..f21148cc831 100644
--- a/packages/manager/src/features/CloudPulse/Widget/components/Zoomer.tsx
+++ b/packages/manager/src/features/CloudPulse/Widget/components/Zoomer.tsx
@@ -1,8 +1,9 @@
-import ZoomInMap from '@mui/icons-material/ZoomInMap';
-import ZoomOutMap from '@mui/icons-material/ZoomOutMap';
-import { useTheme } from '@mui/material/styles';
+import { useTheme } from '@mui/material';
 import * as React from 'react';
 
+import ZoomInMap from 'src/assets/icons/zoomin.svg';
+import ZoomOutMap from 'src/assets/icons/zoomout.svg';
+
 export interface ZoomIconProperties {
   className?: string;
   handleZoomToggle: (zoomIn: boolean) => void;
diff --git a/packages/manager/src/features/CloudPulse/shared/CloudPulseComponentRenderer.test.tsx b/packages/manager/src/features/CloudPulse/shared/CloudPulseComponentRenderer.test.tsx
index 90c36cdf381..1b907419a46 100644
--- a/packages/manager/src/features/CloudPulse/shared/CloudPulseComponentRenderer.test.tsx
+++ b/packages/manager/src/features/CloudPulse/shared/CloudPulseComponentRenderer.test.tsx
@@ -47,7 +47,7 @@ describe('ComponentRenderer component tests', () => {
       </Grid>
     );
 
-    expect(getByPlaceholderText('Select Region')).toBeDefined();
+    expect(getByPlaceholderText('Select a Region')).toBeDefined();
   }),
     it('it should render provided resource filter in props', () => {
       const resourceProps = linodeFilterConfig?.filters.find(
@@ -81,6 +81,6 @@ describe('ComponentRenderer component tests', () => {
           })}
         </Grid>
       );
-      expect(getByPlaceholderText('Select Resources')).toBeDefined();
+      expect(getByPlaceholderText('Select a Resource')).toBeDefined();
     });
 });
diff --git a/packages/manager/src/features/CloudPulse/shared/CloudPulseDashboardFilterBuilder.test.tsx b/packages/manager/src/features/CloudPulse/shared/CloudPulseDashboardFilterBuilder.test.tsx
index aae73a9acd6..006dc05afb6 100644
--- a/packages/manager/src/features/CloudPulse/shared/CloudPulseDashboardFilterBuilder.test.tsx
+++ b/packages/manager/src/features/CloudPulse/shared/CloudPulseDashboardFilterBuilder.test.tsx
@@ -32,7 +32,7 @@ describe('CloudPulseDashboardFilterBuilder component tests', () => {
       />
     );
 
-    expect(getByPlaceholderText('Select DB Cluster Names')).toBeDefined();
-    expect(getByPlaceholderText('Select Region')).toBeDefined();
+    expect(getByPlaceholderText('Select an Engine')).toBeDefined();
+    expect(getByPlaceholderText('Select a Region')).toBeDefined();
   });
 });
diff --git a/packages/manager/src/features/CloudPulse/shared/CloudPulseDashboardFilterBuilder.tsx b/packages/manager/src/features/CloudPulse/shared/CloudPulseDashboardFilterBuilder.tsx
index a0e1cd76801..d908924c1a8 100644
--- a/packages/manager/src/features/CloudPulse/shared/CloudPulseDashboardFilterBuilder.tsx
+++ b/packages/manager/src/features/CloudPulse/shared/CloudPulseDashboardFilterBuilder.tsx
@@ -1,11 +1,10 @@
-import KeyboardArrowDownIcon from '@mui/icons-material/ArrowDropDown';
-import KeyboardArrowRightIcon from '@mui/icons-material/ArrowRight';
-import { Grid, Typography } from '@mui/material';
+import { Grid, Typography, useTheme } from '@mui/material';
 import * as React from 'react';
 
+import KeyboardArrowDownIcon from 'src/assets/icons/arrow_down.svg';
+import KeyboardArrowRightIcon from 'src/assets/icons/arrow_right.svg';
 import InfoIcon from 'src/assets/icons/info.svg';
 import { Button } from 'src/components/Button/Button';
-import { Divider } from 'src/components/Divider';
 import { ErrorState } from 'src/components/ErrorState/ErrorState';
 import NullComponent from 'src/components/NullComponent';
 
@@ -59,6 +58,8 @@ export const CloudPulseDashboardFilterBuilder = React.memo(
 
     const [showFilter, setShowFilter] = React.useState<boolean>(true);
 
+    const theme = useTheme();
+
     const dependentFilterReference: React.MutableRefObject<{
       [key: string]: FilterValueType;
     }> = React.useRef({});
@@ -205,8 +206,22 @@ export const CloudPulseDashboardFilterBuilder = React.memo(
     }
 
     return (
-      <Grid container item xs={12}>
-        <Grid item key={'toggleFilter'} px={2} xs={12}>
+      <Grid
+        container
+        item
+        m={3}
+        paddingBottom={isServiceAnalyticsIntegration ? 3 : 0}
+        xs={12}
+      >
+        <Grid
+          sx={{
+            m: 0,
+            p: 0,
+          }}
+          item
+          key="toggleFilter"
+          xs={12}
+        >
           <Button
             startIcon={
               showFilter ? (
@@ -219,25 +234,28 @@ export const CloudPulseDashboardFilterBuilder = React.memo(
                 />
               )
             }
+            sx={{
+              justifyContent: 'start',
+              m: 0,
+              minHeight: 'auto',
+              minWidth: 'auto',
+              p: 0,
+              svg: {
+                color: theme.color.grey4,
+              },
+            }}
             onClick={toggleShowFilter}
-            sx={{ justifyContent: 'start', mb: showFilter ? 0 : 2, p: 0 }}
           >
-            <Typography>Filters</Typography>
+            <Typography variant="h3">Filters</Typography>
           </Button>
         </Grid>
-        <Grid display={showFilter ? 'block' : 'none'} item xs={12}>
-          <Divider />
-        </Grid>
         <Grid
           columnSpacing={2}
           container
           display={showFilter ? 'flex' : 'none'}
           item
           maxHeight={'120px'}
-          mb={1}
           overflow={'auto'}
-          px={2}
-          py={1}
           rowGap={2}
           xs={12}
         >
diff --git a/packages/manager/src/features/CloudPulse/shared/CloudPulseDashboardSelect.test.tsx b/packages/manager/src/features/CloudPulse/shared/CloudPulseDashboardSelect.test.tsx
index a4f0ce13c4a..1ff706d78d5 100644
--- a/packages/manager/src/features/CloudPulse/shared/CloudPulseDashboardSelect.test.tsx
+++ b/packages/manager/src/features/CloudPulse/shared/CloudPulseDashboardSelect.test.tsx
@@ -66,7 +66,7 @@ describe('CloudPulse Dashboard select', () => {
     );
 
     expect(getByTestId('cloudpulse-dashboard-select')).toBeInTheDocument();
-    expect(getByPlaceholderText('Select Dashboard')).toBeInTheDocument();
+    expect(getByPlaceholderText('Select a Dashboard')).toBeInTheDocument();
   }),
     it('Should render dashboard select component with data', () => {
       renderWithTheme(<CloudPulseDashboardSelect {...props} />);
diff --git a/packages/manager/src/features/CloudPulse/shared/CloudPulseDashboardSelect.tsx b/packages/manager/src/features/CloudPulse/shared/CloudPulseDashboardSelect.tsx
index 93504ac2882..a27e9051d87 100644
--- a/packages/manager/src/features/CloudPulse/shared/CloudPulseDashboardSelect.tsx
+++ b/packages/manager/src/features/CloudPulse/shared/CloudPulseDashboardSelect.tsx
@@ -59,7 +59,7 @@ export const CloudPulseDashboardSelect = React.memo(
 
     const errorText: string = getErrorText();
 
-    const placeHolder = 'Select Dashboard';
+    const placeHolder = 'Select a Dashboard';
 
     // sorts dashboards by service type. Required due to unexpected autocomplete grouping behaviour
     const getSortedDashboardsList = (options: Dashboard[]): Dashboard[] => {
diff --git a/packages/manager/src/features/CloudPulse/shared/CloudPulseRegionSelect.tsx b/packages/manager/src/features/CloudPulse/shared/CloudPulseRegionSelect.tsx
index c2f9095f8b6..de9c342a17b 100644
--- a/packages/manager/src/features/CloudPulse/shared/CloudPulseRegionSelect.tsx
+++ b/packages/manager/src/features/CloudPulse/shared/CloudPulseRegionSelect.tsx
@@ -62,7 +62,7 @@ export const CloudPulseRegionSelect = React.memo(
         disabled={!selectedDashboard || !regions}
         fullWidth
         label="Select a Region"
-        placeholder={placeholder ?? 'Select Region'}
+        placeholder={placeholder ?? 'Select a Region'}
         regions={regions ? regions : []}
         value={selectedRegion}
       />
diff --git a/packages/manager/src/features/CloudPulse/shared/CloudPulseResourcesSelect.test.tsx b/packages/manager/src/features/CloudPulse/shared/CloudPulseResourcesSelect.test.tsx
index 1567a0681d2..ff06cdcd0fc 100644
--- a/packages/manager/src/features/CloudPulse/shared/CloudPulseResourcesSelect.test.tsx
+++ b/packages/manager/src/features/CloudPulse/shared/CloudPulseResourcesSelect.test.tsx
@@ -42,7 +42,7 @@ describe('CloudPulseResourcesSelect component tests', () => {
       />
     );
     expect(getByTestId('resource-select')).toBeInTheDocument();
-    expect(getByPlaceholderText('Select Resources')).toBeInTheDocument();
+    expect(getByPlaceholderText('Select a Resource')).toBeInTheDocument();
   }),
     it('should render resources happy path', () => {
       queryMocks.useResourcesQuery.mockReturnValue({
diff --git a/packages/manager/src/features/CloudPulse/shared/CloudPulseResourcesSelect.tsx b/packages/manager/src/features/CloudPulse/shared/CloudPulseResourcesSelect.tsx
index c7ec0850ac6..adaf971e1ba 100644
--- a/packages/manager/src/features/CloudPulse/shared/CloudPulseResourcesSelect.tsx
+++ b/packages/manager/src/features/CloudPulse/shared/CloudPulseResourcesSelect.tsx
@@ -91,7 +91,7 @@ export const CloudPulseResourcesSelect = React.memo(
           handleResourcesSelection(resourceSelections);
         }}
         placeholder={
-          selectedResources?.length ? '' : placeholder || 'Select Resources'
+          selectedResources?.length ? '' : placeholder || 'Select a Resource'
         }
         textFieldProps={{
           InputProps: {
diff --git a/packages/manager/src/features/CloudPulse/shared/CloudPulseTimeRangeSelect.tsx b/packages/manager/src/features/CloudPulse/shared/CloudPulseTimeRangeSelect.tsx
index e6aeb855f23..b270743305f 100644
--- a/packages/manager/src/features/CloudPulse/shared/CloudPulseTimeRangeSelect.tsx
+++ b/packages/manager/src/features/CloudPulse/shared/CloudPulseTimeRangeSelect.tsx
@@ -85,7 +85,7 @@ export const CloudPulseTimeRangeSelect = React.memo(
         isOptionEqualToValue={(option, value) => option.value === value.value}
         label="Select Time Duration"
         options={options}
-        placeholder={placeholder ?? 'Select Time Duration'}
+        placeholder={placeholder ?? 'Select a Time Duration'}
         value={selectedTimeRange}
       />
     );
diff --git a/packages/manager/src/mocks/serverHandlers.ts b/packages/manager/src/mocks/serverHandlers.ts
index 494618e55ec..221d57683d4 100644
--- a/packages/manager/src/mocks/serverHandlers.ts
+++ b/packages/manager/src/mocks/serverHandlers.ts
@@ -2451,7 +2451,7 @@ export const handlers = [
         {
           aggregate_function: 'avg',
           chart_type: 'area',
-          color: 'blue',
+          color: 'default',
           label: 'CPU utilization',
           metric: 'system_cpu_utilization_percent',
           size: 12,
@@ -2461,7 +2461,7 @@ export const handlers = [
         {
           aggregate_function: 'avg',
           chart_type: 'area',
-          color: 'red',
+          color: 'default',
           label: 'Memory Usage',
           metric: 'system_memory_usage_by_resource',
           size: 12,
@@ -2471,7 +2471,7 @@ export const handlers = [
         {
           aggregate_function: 'avg',
           chart_type: 'area',
-          color: 'green',
+          color: 'default',
           label: 'Network Traffic',
           metric: 'system_network_io_by_resource',
           size: 6,
@@ -2481,7 +2481,7 @@ export const handlers = [
         {
           aggregate_function: 'avg',
           chart_type: 'area',
-          color: 'yellow',
+          color: 'default',
           label: 'Disk I/O',
           metric: 'system_disk_OPS_total',
           size: 6,
@@ -2497,7 +2497,9 @@ export const handlers = [
       data: {
         result: [
           {
-            metric: {},
+            metric: {
+              test: 'Test1',
+            },
             values: [
               [1721854379, '0.2744841110560275'],
               [1721857979, '0.2980357104166823'],
@@ -2514,6 +2516,46 @@ export const handlers = [
               [1721897579, '0.26164641539434685'],
             ],
           },
+          {
+            metric: {
+              test2: 'Test2',
+            },
+            values: [
+              [1721854379, '0.3744841110560275'],
+              [1721857979, '0.4980357104166823'],
+              [1721861579, '0.3290476561287732'],
+              [1721865179, '0.42148793964961897'],
+              [1721868779, '0.2269247326830727'],
+              [1721872379, '0.3393055885526987'],
+              [1721875979, '0.5237102833940027'],
+              [1721879579, '0.3153372503472701'],
+              [1721883179, '0.26811506053820466'],
+              [1721886779, '0.35839295774934357'],
+              [1721890379, '0.36863082415681144'],
+              [1721893979, '0.46126998689934394'],
+              [1721897579, '0.56164641539434685'],
+            ],
+          },
+          {
+            metric: {
+              test3: 'Test3',
+            },
+            values: [
+              [1721854379, '0.3744841110560275'],
+              [1721857979, '0.4980357104166823'],
+              [1721861579, '0.3290476561287732'],
+              [1721865179, '0.4148793964961897'],
+              [1721868779, '0.4269247326830727'],
+              [1721872379, '0.3393055885526987'],
+              [1721875979, '0.6237102833940027'],
+              [1721879579, '0.3153372503472701'],
+              [1721883179, '0.26811506053820466'],
+              [1721886779, '0.45839295774934357'],
+              [1721890379, '0.36863082415681144'],
+              [1721893979, '0.56126998689934394'],
+              [1721897579, '0.66164641539434685'],
+            ],
+          },
         ],
         resultType: 'matrix',
       },

From 27abb009e03fd8a9240a09a08ac497bcca2ea0ae Mon Sep 17 00:00:00 2001
From: Connie Liu <139280159+coliu-akamai@users.noreply.github.com>
Date: Fri, 20 Sep 2024 12:43:29 -0400
Subject: [PATCH 31/62] test: [M3-8591, M3-8594] - Add unit tests for
 AccountActivationLanding component, remove AddNewLink component (#10966)

* add AccountActivationLanding tests + cleanup styling

* switch component to have named instead of default export

* add tests for AddNewLink + skeleton stories

* create storybook for AddNewLink component

* add changesets

* switch to userEvent instead of fireEvent

* Update packages/manager/src/components/AddNewLink/AddNewLink.stories.tsx

Co-authored-by: Purvesh Makode <pmakode@akamai.com>

* Update packages/manager/src/components/AddNewLink/AddNewLink.stories.tsx

Co-authored-by: Purvesh Makode <pmakode@akamai.com>

* add new story/update test

* replacing AddNewLink with button

* delete AddNewLink, update styling

* update changesets

* fix failing tests

* update tests @pmakode-akamai

---------

Co-authored-by: Purvesh Makode <pmakode@akamai.com>
---
 .../pr-10966-removed-1726765827523.md         |  5 ++
 .../pr-10966-tests-1726678346834.md           |  5 ++
 .../AccountActivationLanding.test.tsx         | 38 ++++++++++++
 .../AccountActivationLanding.tsx              | 38 +++++-------
 .../src/components/AddNewLink/AddNewLink.tsx  | 61 -------------------
 .../src/components/AddNewLink/index.ts        |  4 --
 .../manager/src/components/Button/Button.tsx  |  9 ++-
 .../DatabaseDetail/AccessControls.test.tsx    | 36 +++++------
 .../DatabaseDetail/AccessControls.tsx         | 10 +--
 .../DatabaseSettings.test.tsx                 | 39 +++++-------
 .../DatabaseSettings/DatabaseSettings.tsx     |  5 +-
 .../LinodeConfigs/LinodeConfigs.tsx           | 10 ++-
 .../features/Managed/Contacts/Contacts.tsx    | 23 ++++---
 .../Managed/Credentials/CredentialList.tsx    | 16 ++---
 .../Managed/Monitors/MonitorTable.tsx         | 17 +++---
 .../Profile/OAuthClients/OAuthClients.tsx     | 10 +--
 .../src/features/Profile/SSHKeys/SSHKeys.tsx  | 12 ++--
 .../src/features/Users/UsersLanding.tsx       | 12 ++--
 18 files changed, 168 insertions(+), 182 deletions(-)
 create mode 100644 packages/manager/.changeset/pr-10966-removed-1726765827523.md
 create mode 100644 packages/manager/.changeset/pr-10966-tests-1726678346834.md
 create mode 100644 packages/manager/src/components/AccountActivation/AccountActivationLanding.test.tsx
 delete mode 100644 packages/manager/src/components/AddNewLink/AddNewLink.tsx
 delete mode 100644 packages/manager/src/components/AddNewLink/index.ts

diff --git a/packages/manager/.changeset/pr-10966-removed-1726765827523.md b/packages/manager/.changeset/pr-10966-removed-1726765827523.md
new file mode 100644
index 00000000000..9e38773af5c
--- /dev/null
+++ b/packages/manager/.changeset/pr-10966-removed-1726765827523.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Removed
+---
+
+`AddNewLink` component, replacing instances with `Button` ([#10966](https://github.com/linode/manager/pull/10966))
diff --git a/packages/manager/.changeset/pr-10966-tests-1726678346834.md b/packages/manager/.changeset/pr-10966-tests-1726678346834.md
new file mode 100644
index 00000000000..d206c4c7bc0
--- /dev/null
+++ b/packages/manager/.changeset/pr-10966-tests-1726678346834.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Tests
+---
+
+Add unit tests for `AccountActivationLanding` component ([#10966](https://github.com/linode/manager/pull/10966))
diff --git a/packages/manager/src/components/AccountActivation/AccountActivationLanding.test.tsx b/packages/manager/src/components/AccountActivation/AccountActivationLanding.test.tsx
new file mode 100644
index 00000000000..4c943493612
--- /dev/null
+++ b/packages/manager/src/components/AccountActivation/AccountActivationLanding.test.tsx
@@ -0,0 +1,38 @@
+import userEvent from '@testing-library/user-event';
+import * as React from 'react';
+
+import { renderWithTheme } from 'src/utilities/testHelpers';
+
+import AccountActivationLanding from './AccountActivationLanding';
+
+const openSupportTicket = 'Open a Support Ticket';
+
+describe('AccountActivationLanding', () => {
+  it('renders the AccountActivationLanding component', () => {
+    const { getByText, queryByText } = renderWithTheme(
+      <AccountActivationLanding />
+    );
+
+    expect(
+      getByText('Your account is currently being reviewed.')
+    ).toBeVisible();
+    expect(
+      getByText(
+        /Thanks for signing up! You’ll receive an email from us once our review is complete, so hang tight. If you have questions during this process/
+      )
+    ).toBeVisible();
+    expect(getByText(/please open a Support ticket/)).toBeVisible();
+    expect(queryByText(openSupportTicket)).not.toBeInTheDocument();
+  });
+
+  it('toggles open the Support Ticket dialog', async () => {
+    const { getByText, queryByText } = renderWithTheme(
+      <AccountActivationLanding />
+    );
+
+    expect(queryByText(openSupportTicket)).not.toBeInTheDocument();
+    const supportButtonLink = getByText(/please open a Support ticket/);
+    await userEvent.click(supportButtonLink);
+    expect(getByText(openSupportTicket)).toBeVisible();
+  });
+});
diff --git a/packages/manager/src/components/AccountActivation/AccountActivationLanding.tsx b/packages/manager/src/components/AccountActivation/AccountActivationLanding.tsx
index a4b96a57da8..ea68ced58e2 100644
--- a/packages/manager/src/components/AccountActivation/AccountActivationLanding.tsx
+++ b/packages/manager/src/components/AccountActivation/AccountActivationLanding.tsx
@@ -1,29 +1,16 @@
 import Warning from '@mui/icons-material/CheckCircle';
-import { Theme } from '@mui/material/styles';
 import * as React from 'react';
 import { useHistory } from 'react-router-dom';
-import { makeStyles } from 'tss-react/mui';
 
 import { ErrorState } from 'src/components/ErrorState/ErrorState';
 import { Typography } from 'src/components/Typography';
-import { AttachmentError } from 'src/features/Support/SupportTicketDetail/SupportTicketDetail';
 import { SupportTicketDialog } from 'src/features/Support/SupportTickets/SupportTicketDialog';
 
-const useStyles = makeStyles()((theme: Theme) => ({
-  cta: {
-    ...theme.applyLinkStyles,
-  },
-  errorHeading: {
-    marginBottom: theme.spacing(2),
-  },
-  subheading: {
-    margin: '0 auto',
-    maxWidth: '60%',
-  },
-}));
+import { StyledLinkButton } from '../Button/StyledLinkButton';
+
+import type { AttachmentError } from 'src/features/Support/SupportTicketDetail/SupportTicketDetail';
 
 const AccountActivationLanding = () => {
-  const { classes } = useStyles();
   const history = useHistory();
 
   const [supportDrawerIsOpen, toggleSupportDrawer] = React.useState<boolean>(
@@ -46,19 +33,24 @@ const AccountActivationLanding = () => {
     <ErrorState
       errorText={
         <React.Fragment>
-          <Typography className={classes.errorHeading} variant="h2">
+          <Typography
+            sx={(theme) => ({ marginBottom: theme.spacing(2) })}
+            variant="h2"
+          >
             Your account is currently being reviewed.
           </Typography>
-          <Typography className={classes.subheading}>
+          <Typography
+            sx={{
+              margin: '0 auto',
+              maxWidth: '60%',
+            }}
+          >
             Thanks for signing up! You&rsquo;ll receive an email from us once
             our review is complete, so hang tight. If you have questions during
             this process{' '}
-            <button
-              className={classes.cta}
-              onClick={() => toggleSupportDrawer(true)}
-            >
+            <StyledLinkButton onClick={() => toggleSupportDrawer(true)}>
               please open a Support ticket
-            </button>
+            </StyledLinkButton>
             .
           </Typography>
           <SupportTicketDialog
diff --git a/packages/manager/src/components/AddNewLink/AddNewLink.tsx b/packages/manager/src/components/AddNewLink/AddNewLink.tsx
deleted file mode 100644
index 6103a8acc73..00000000000
--- a/packages/manager/src/components/AddNewLink/AddNewLink.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import * as React from 'react';
-
-import { Tooltip, TooltipProps } from 'src/components/Tooltip';
-
-import { Button } from '../Button/Button';
-
-export interface Props extends Omit<TooltipProps, 'children' | 'title'> {
-  disabled?: boolean;
-  disabledReason?: string;
-  display?: string;
-  label: string;
-  onClick: (e?: React.MouseEvent<HTMLElement>) => void;
-}
-
-const AddNewLink = (props: Props) => {
-  const {
-    className,
-    disabled,
-    disabledReason,
-    display,
-    label,
-    onClick,
-    ...remainingPropsAsTooltipProps
-  } = props;
-
-  const baseProps = {
-    className,
-    disabled,
-    onClick,
-    text: label,
-    title: label,
-  };
-
-  if (!!disabled && !!disabledReason) {
-    return (
-      <Tooltip
-        {...remainingPropsAsTooltipProps}
-        data-qa-disabled-text-icon-tooltip
-        enterTouchDelay={0}
-        leaveTouchDelay={5000}
-        placement={props.placement ? props.placement : 'bottom'}
-        title={disabledReason}
-      >
-        <div>
-          {/* Wrapping in div because the child of tooltip needs to be able to hold a ref */}
-          <Button buttonType="primary" {...baseProps}>
-            {display || label}
-          </Button>
-        </div>
-      </Tooltip>
-    );
-  }
-
-  return (
-    <Button buttonType="primary" {...baseProps}>
-      {display || label}
-    </Button>
-  );
-};
-
-export default AddNewLink;
diff --git a/packages/manager/src/components/AddNewLink/index.ts b/packages/manager/src/components/AddNewLink/index.ts
deleted file mode 100644
index be5b3a5da7f..00000000000
--- a/packages/manager/src/components/AddNewLink/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import AddNewLink, { Props as _AddNewLinkProps } from './AddNewLink';
-/* tslint:disable */
-export type AddNewLinkProps = _AddNewLinkProps;
-export default AddNewLink;
diff --git a/packages/manager/src/components/Button/Button.tsx b/packages/manager/src/components/Button/Button.tsx
index db54b5cec07..e9e3019b07c 100644
--- a/packages/manager/src/components/Button/Button.tsx
+++ b/packages/manager/src/components/Button/Button.tsx
@@ -1,7 +1,6 @@
 import HelpOutline from '@mui/icons-material/HelpOutline';
-import _Button, { ButtonProps as _ButtonProps } from '@mui/material/Button';
-import { Theme, styled } from '@mui/material/styles';
-import { SxProps } from '@mui/system';
+import _Button from '@mui/material/Button';
+import { styled } from '@mui/material/styles';
 import * as React from 'react';
 
 import Reload from 'src/assets/icons/reload.svg';
@@ -10,6 +9,10 @@ import { Tooltip } from 'src/components/Tooltip';
 import { rotate360 } from '../../styles/keyframes';
 import { omittedProps } from '../../utilities/omittedProps';
 
+import type { ButtonProps as _ButtonProps } from '@mui/material/Button';
+import type { Theme } from '@mui/material/styles';
+import type { SxProps } from '@mui/system';
+
 export type ButtonType = 'outlined' | 'primary' | 'secondary';
 
 export interface ButtonProps extends _ButtonProps {
diff --git a/packages/manager/src/features/Databases/DatabaseDetail/AccessControls.test.tsx b/packages/manager/src/features/Databases/DatabaseDetail/AccessControls.test.tsx
index 128121d878f..5d551ca4253 100644
--- a/packages/manager/src/features/Databases/DatabaseDetail/AccessControls.test.tsx
+++ b/packages/manager/src/features/Databases/DatabaseDetail/AccessControls.test.tsx
@@ -31,21 +31,23 @@ describe('Access Controls', () => {
     ).toBeInTheDocument();
   });
 
-  it('Should disable "Manage Access Control" button if disabled = true', () => {
-    const database = databaseFactory.build();
-    const { getByTitle } = renderWithTheme(
-      <AccessControls database={database} disabled={true} />
-    );
-    const manageAccessControlBtn = getByTitle('Manage Access Controls');
-    expect(manageAccessControlBtn).toBeDisabled();
-  });
-
-  it('Should enable "Manage Access Control" button if disabled = false', () => {
-    const database = databaseFactory.build();
-    const { getByTitle } = renderWithTheme(
-      <AccessControls database={database} disabled={false} />
-    );
-    const manageAccessControlBtn = getByTitle('Manage Access Controls');
-    expect(manageAccessControlBtn).toBeEnabled();
-  });
+  it.each([
+    ['disable', true],
+    ['enable', false],
+  ])(
+    'should %s "Manage Access Control" button when disabled is %s',
+    (_, isDisabled) => {
+      const database = databaseFactory.build();
+      const { getByRole } = renderWithTheme(
+        <AccessControls database={database} disabled={isDisabled} />
+      );
+      const button = getByRole('button', { name: 'Manage Access Controls' });
+
+      if (isDisabled) {
+        expect(button).toBeDisabled();
+      } else {
+        expect(button).toBeEnabled();
+      }
+    }
+  );
 });
diff --git a/packages/manager/src/features/Databases/DatabaseDetail/AccessControls.tsx b/packages/manager/src/features/Databases/DatabaseDetail/AccessControls.tsx
index 69d4d2e4d74..1e2a9070474 100644
--- a/packages/manager/src/features/Databases/DatabaseDetail/AccessControls.tsx
+++ b/packages/manager/src/features/Databases/DatabaseDetail/AccessControls.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { makeStyles } from 'tss-react/mui';
 
 import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel';
-import AddNewLink from 'src/components/AddNewLink';
+import { Button } from 'src/components/Button/Button';
 import { ConfirmationDialog } from 'src/components/ConfirmationDialog/ConfirmationDialog';
 import { InlineMenuAction } from 'src/components/InlineMenuAction/InlineMenuAction';
 import { Notice } from 'src/components/Notice/Notice';
@@ -197,12 +197,14 @@ export const AccessControls = (props: Props) => {
           </div>
           <div className={classes.sectionText}>{description ?? null}</div>
         </div>
-        <AddNewLink
+        <Button
+          buttonType="primary"
           className={classes.addAccessControlBtn}
           disabled={disabled}
-          label="Manage Access Controls"
           onClick={() => setAddAccessControlDrawerOpen(true)}
-        />
+        >
+          Manage Access Controls
+        </Button>
       </div>
       {ipTable(allowList)}
       <ConfirmationDialog
diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettings.test.tsx b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettings.test.tsx
index 6b908d78728..3778dcf9e07 100644
--- a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettings.test.tsx
+++ b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettings.test.tsx
@@ -24,31 +24,24 @@ describe('DatabaseSettings Component', () => {
     expect(headings[2].textContent).toBe('Delete Cluster');
   });
 
-  it('Should disable buttons if disabled = true', () => {
-    const { getByTitle } = renderWithTheme(
-      <DatabaseSettings database={database} disabled={true} />
+  it.each([
+    ['disable', true],
+    ['enable', false],
+  ])('should %s buttons when disabled is %s', (_, isDisabled) => {
+    const { getByRole, getByTitle } = renderWithTheme(
+      <DatabaseSettings database={database} disabled={isDisabled} />
     );
-    const disabledButtons = [
-      'Manage Access Controls',
-      'Reset Root Password',
-      'Save Changes',
-    ];
+    const button1 = getByTitle('Reset Root Password');
+    const button2 = getByTitle('Save Changes');
+    const button3 = getByRole('button', { name: 'Manage Access Controls' });
 
-    for (const buttonTitle of disabledButtons) {
-      const button = getByTitle(buttonTitle);
-      expect(button).toBeDisabled();
-    }
-  });
-
-  it('Should enable buttons if disabled = false', () => {
-    const { getByTitle } = renderWithTheme(
-      <DatabaseSettings database={database} />
-    );
-    const enabledButtons = ['Manage Access Controls', 'Reset Root Password'];
-
-    for (const buttonTitle of enabledButtons) {
-      const button = getByTitle(buttonTitle);
-      expect(button).toBeEnabled();
+    if (isDisabled) {
+      expect(button1).toBeDisabled();
+      expect(button2).toBeDisabled();
+      expect(button3).toBeDisabled();
+    } else {
+      expect(button1).toBeEnabled();
+      expect(button3).toBeEnabled();
     }
   });
 
diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettings.tsx b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettings.tsx
index c8df3291a1c..a10f1c39b15 100644
--- a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettings.tsx
+++ b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettings.tsx
@@ -1,9 +1,8 @@
-import { Database } from '@linode/api-v4/lib/databases/types';
 import * as React from 'react';
 
 import { Divider } from 'src/components/Divider';
-import { Typography } from 'src/components/Typography';
 import { Paper } from 'src/components/Paper';
+import { Typography } from 'src/components/Typography';
 import { useProfile } from 'src/queries/profile/profile';
 
 import AccessControls from '../AccessControls';
@@ -12,6 +11,8 @@ import DatabaseSettingsMenuItem from './DatabaseSettingsMenuItem';
 import DatabaseSettingsResetPasswordDialog from './DatabaseSettingsResetPasswordDialog';
 import MaintenanceWindow from './MaintenanceWindow';
 
+import type { Database } from '@linode/api-v4/lib/databases/types';
+
 interface Props {
   database: Database;
   disabled?: boolean;
diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeConfigs/LinodeConfigs.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeConfigs/LinodeConfigs.tsx
index 1b1f25cbe3a..a4118c0c75b 100644
--- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeConfigs/LinodeConfigs.tsx
+++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeConfigs/LinodeConfigs.tsx
@@ -2,8 +2,8 @@ import { useTheme } from '@mui/material/styles';
 import * as React from 'react';
 import { useParams } from 'react-router-dom';
 
-import AddNewLink from 'src/components/AddNewLink';
 import { Box } from 'src/components/Box';
+import { Button } from 'src/components/Button/Button';
 import { DocsLink } from 'src/components/DocsLink/DocsLink';
 import OrderBy from 'src/components/OrderBy';
 import Paginate from 'src/components/Paginate';
@@ -97,11 +97,9 @@ const LinodeConfigs = () => {
           }}
           label={'Configuration Profiles'}
         />
-        <AddNewLink
-          disabled={isReadOnly}
-          label="Add Configuration"
-          onClick={onCreate}
-        />
+        <Button buttonType="primary" disabled={isReadOnly} onClick={onCreate}>
+          Add Configuration
+        </Button>
       </Box>
       <OrderBy data={configs ?? []} order={'asc'} orderBy={'label'}>
         {({ data: orderedData, handleOrderChange, order, orderBy }) => (
diff --git a/packages/manager/src/features/Managed/Contacts/Contacts.tsx b/packages/manager/src/features/Managed/Contacts/Contacts.tsx
index b82c906679f..1c7d5b88018 100644
--- a/packages/manager/src/features/Managed/Contacts/Contacts.tsx
+++ b/packages/manager/src/features/Managed/Contacts/Contacts.tsx
@@ -1,8 +1,7 @@
-import { ManagedContact } from '@linode/api-v4/lib/managed';
 import { useSnackbar } from 'notistack';
 import * as React from 'react';
 
-import AddNewLink from 'src/components/AddNewLink';
+import { Button } from 'src/components/Button/Button';
 import { DeletionDialog } from 'src/components/DeletionDialog/DeletionDialog';
 import { DocumentTitleSegment } from 'src/components/DocumentTitle';
 import { Hidden } from 'src/components/Hidden';
@@ -23,14 +22,16 @@ import {
 } from 'src/queries/managed/managed';
 import { getAPIErrorOrDefault } from 'src/utilities/errorUtils';
 
-import ContactDrawer from './ContactsDrawer';
-import ContactTableContact from './ContactsTableContent';
-import { ManagedContactGroup, Mode } from './common';
 import {
-  StyledWrapperGrid,
-  StyledTypography,
   StyledHeaderGrid,
+  StyledTypography,
+  StyledWrapperGrid,
 } from './Contacts.styles';
+import ContactDrawer from './ContactsDrawer';
+import ContactTableContact from './ContactsTableContent';
+
+import type { ManagedContactGroup, Mode } from './common';
+import type { ManagedContact } from '@linode/api-v4/lib/managed';
 
 const Contacts = () => {
   const { enqueueSnackbar } = useSnackbar();
@@ -99,13 +100,15 @@ const Contacts = () => {
         spacing={2}
       >
         <StyledWrapperGrid>
-          <AddNewLink
+          <Button
             onClick={() => {
               setContactDrawerMode('create');
               contactDrawer.open();
             }}
-            label="Add Contact"
-          />
+            buttonType="primary"
+          >
+            Add Contact
+          </Button>
         </StyledWrapperGrid>
       </StyledHeaderGrid>
       <OrderBy data={contacts} order="asc" orderBy="name">
diff --git a/packages/manager/src/features/Managed/Credentials/CredentialList.tsx b/packages/manager/src/features/Managed/Credentials/CredentialList.tsx
index ff64d9fa4f3..54770113d01 100644
--- a/packages/manager/src/features/Managed/Credentials/CredentialList.tsx
+++ b/packages/manager/src/features/Managed/Credentials/CredentialList.tsx
@@ -1,10 +1,7 @@
-import { CredentialPayload } from '@linode/api-v4/lib/managed/types';
-import { APIError } from '@linode/api-v4/lib/types';
-import { FormikBag } from 'formik';
 import { useSnackbar } from 'notistack';
 import * as React from 'react';
 
-import AddNewLink from 'src/components/AddNewLink';
+import { Button } from 'src/components/Button/Button';
 import { DeletionDialog } from 'src/components/DeletionDialog/DeletionDialog';
 import { DocumentTitleSegment } from 'src/components/DocumentTitle';
 import OrderBy from 'src/components/OrderBy';
@@ -39,6 +36,10 @@ import AddCredentialDrawer from './AddCredentialDrawer';
 import CredentialTableContent from './CredentialTableContent';
 import UpdateCredentialDrawer from './UpdateCredentialDrawer';
 
+import type { CredentialPayload } from '@linode/api-v4/lib/managed/types';
+import type { APIError } from '@linode/api-v4/lib/types';
+import type { FormikBag } from 'formik';
+
 export type FormikProps = FormikBag<{}, CredentialPayload>;
 
 export const CredentialList = () => {
@@ -204,10 +205,9 @@ export const CredentialList = () => {
         spacing={2}
       >
         <StyledWrapperGrid>
-          <AddNewLink
-            label="Add Credential"
-            onClick={() => setDrawerOpen(true)}
-          />
+          <Button buttonType="primary" onClick={() => setDrawerOpen(true)}>
+            Add Credential
+          </Button>
         </StyledWrapperGrid>
       </StyledHeaderGrid>
       <OrderBy data={credentials} order={'asc'} orderBy={'label'}>
diff --git a/packages/manager/src/features/Managed/Monitors/MonitorTable.tsx b/packages/manager/src/features/Managed/Monitors/MonitorTable.tsx
index 2a8933ff543..95df7aad844 100644
--- a/packages/manager/src/features/Managed/Monitors/MonitorTable.tsx
+++ b/packages/manager/src/features/Managed/Monitors/MonitorTable.tsx
@@ -1,11 +1,8 @@
-import { ManagedServicePayload } from '@linode/api-v4/lib/managed';
-import { APIError } from '@linode/api-v4/lib/types';
 import Grid from '@mui/material/Unstable_Grid2';
-import { FormikBag } from 'formik';
 import { useSnackbar } from 'notistack';
 import * as React from 'react';
 
-import AddNewLink from 'src/components/AddNewLink';
+import { Button } from 'src/components/Button/Button';
 import { DeletionDialog } from 'src/components/DeletionDialog/DeletionDialog';
 import { DocumentTitleSegment } from 'src/components/DocumentTitle';
 import OrderBy from 'src/components/OrderBy';
@@ -41,6 +38,10 @@ import {
 } from './MonitorTable.styles';
 import MonitorTableContent from './MonitorTableContent';
 
+import type { ManagedServicePayload } from '@linode/api-v4/lib/managed';
+import type { APIError } from '@linode/api-v4/lib/types';
+import type { FormikBag } from 'formik';
+
 export type Modes = 'create' | 'edit';
 export type FormikProps = FormikBag<{}, ManagedServicePayload>;
 
@@ -180,10 +181,12 @@ export const MonitorTable = () => {
         <Grid>
           <Grid alignItems="flex-end" container>
             <StyledGrid>
-              <AddNewLink
-                label="Add Monitor"
+              <Button
+                buttonType="primary"
                 onClick={() => setMonitorDrawerOpen(true)}
-              />
+              >
+                Add Monitor
+              </Button>
             </StyledGrid>
           </Grid>
         </Grid>
diff --git a/packages/manager/src/features/Profile/OAuthClients/OAuthClients.tsx b/packages/manager/src/features/Profile/OAuthClients/OAuthClients.tsx
index 974e8726b88..db289cf3a6e 100644
--- a/packages/manager/src/features/Profile/OAuthClients/OAuthClients.tsx
+++ b/packages/manager/src/features/Profile/OAuthClients/OAuthClients.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 
-import AddNewLink from 'src/components/AddNewLink';
 import { Box } from 'src/components/Box';
+import { Button } from 'src/components/Button/Button';
 import { DocumentTitleSegment } from 'src/components/DocumentTitle';
 import { Hidden } from 'src/components/Hidden';
 import { PaginationFooter } from 'src/components/PaginationFooter/PaginationFooter';
@@ -129,10 +129,12 @@ const OAuthClients = () => {
         marginBottom={1}
         paddingRight={{ lg: 0, md: 0, sm: 1, xs: 1 }}
       >
-        <AddNewLink
-          label="Add an OAuth App"
+        <Button
+          buttonType="primary"
           onClick={() => setIsCreateDrawerOpen(true)}
-        />
+        >
+          Add an OAuth App
+        </Button>
       </Box>
       <Table aria-label="List of OAuth Apps">
         <TableHead>
diff --git a/packages/manager/src/features/Profile/SSHKeys/SSHKeys.tsx b/packages/manager/src/features/Profile/SSHKeys/SSHKeys.tsx
index 91afe803212..622bb9dab1b 100644
--- a/packages/manager/src/features/Profile/SSHKeys/SSHKeys.tsx
+++ b/packages/manager/src/features/Profile/SSHKeys/SSHKeys.tsx
@@ -1,8 +1,8 @@
-import Grid from '@mui/material/Unstable_Grid2';
 import { styled } from '@mui/material/styles';
+import Grid from '@mui/material/Unstable_Grid2';
 import * as React from 'react';
 
-import AddNewLink from 'src/components/AddNewLink';
+import { Button } from 'src/components/Button/Button';
 import { DocumentTitleSegment } from 'src/components/DocumentTitle';
 import { Hidden } from 'src/components/Hidden';
 import { PaginationFooter } from 'src/components/PaginationFooter/PaginationFooter';
@@ -108,10 +108,12 @@ export const SSHKeys = () => {
         spacing={2}
       >
         <StyledAddNewWrapperGridItem>
-          <AddNewLink
-            label="Add an SSH Key"
+          <Button
+            buttonType="primary"
             onClick={() => setIsCreateDrawerOpen(true)}
-          />
+          >
+            Add an SSH Key
+          </Button>
         </StyledAddNewWrapperGridItem>
       </Grid>
       <Table>
diff --git a/packages/manager/src/features/Users/UsersLanding.tsx b/packages/manager/src/features/Users/UsersLanding.tsx
index 08a74f61930..a0298e8690f 100644
--- a/packages/manager/src/features/Users/UsersLanding.tsx
+++ b/packages/manager/src/features/Users/UsersLanding.tsx
@@ -2,8 +2,8 @@ import { useTheme } from '@mui/material/styles';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import * as React from 'react';
 
-import AddNewLink from 'src/components/AddNewLink';
 import { Box } from 'src/components/Box';
+import { Button } from 'src/components/Button/Button';
 import { DocumentTitleSegment } from 'src/components/DocumentTitle';
 import { PaginationFooter } from 'src/components/PaginationFooter/PaginationFooter';
 import { Table } from 'src/components/Table';
@@ -146,16 +146,18 @@ export const UsersLanding = () => {
             User Settings
           </Typography>
         )}
-        <AddNewLink
-          disabledReason={
+        <Button
+          tooltipText={
             isRestrictedUser
               ? 'You cannot create other users as a restricted user.'
               : undefined
           }
+          buttonType="primary"
           disabled={isRestrictedUser}
-          label="Add a User"
           onClick={() => setIsCreateDrawerOpen(true)}
-        />
+        >
+          Add a User
+        </Button>
       </Box>
       <Table aria-label="List of Users">
         <UsersLandingTableHead

From 5b7c237e1a4e6c3e88333b9c50264bce49c8c855 Mon Sep 17 00:00:00 2001
From: Banks Nussman <115251059+bnussman-akamai@users.noreply.github.com>
Date: Fri, 20 Sep 2024 12:55:42 -0400
Subject: [PATCH 32/62] fix: [M3-8617] - Autocomplete Popper re-rendering
 causing test failures (#10978)

Co-authored-by: Banks Nussman <banks@nussman.us>
---
 .../src/components/Autocomplete/Autocomplete.tsx | 10 +---------
 .../Profile/APITokens/CreateAPITokenDrawer.tsx   | 14 +++++++++-----
 .../PhoneVerification/PhoneVerification.tsx      | 16 +++++++++-------
 .../Profile/DisplaySettings/TimezoneForm.tsx     | 10 +++++++---
 4 files changed, 26 insertions(+), 24 deletions(-)

diff --git a/packages/manager/src/components/Autocomplete/Autocomplete.tsx b/packages/manager/src/components/Autocomplete/Autocomplete.tsx
index e6fbc02dd21..efb09a73f1c 100644
--- a/packages/manager/src/components/Autocomplete/Autocomplete.tsx
+++ b/packages/manager/src/components/Autocomplete/Autocomplete.tsx
@@ -15,7 +15,6 @@ import {
 } from './Autocomplete.styles';
 
 import type { AutocompleteProps } from '@mui/material/Autocomplete';
-import type { SxProps } from '@mui/system';
 import type { TextFieldProps } from 'src/components/TextField';
 
 export interface EnhancedAutocompleteProps<
@@ -42,10 +41,6 @@ export interface EnhancedAutocompleteProps<
   placeholder?: string;
   /** Label for the "select all" option. */
   selectAllLabel?: string;
-  /**
-   * The prop that allows defining CSS style overrides for the PopperComponent.
-   */
-  sxPopperComponent?: SxProps;
   textFieldProps?: Partial<TextFieldProps>;
 }
 
@@ -93,7 +88,6 @@ export const Autocomplete = <
     placeholder,
     renderOption,
     selectAllLabel = '',
-    sxPopperComponent,
     textFieldProps,
     value,
     ...rest
@@ -110,9 +104,6 @@ export const Autocomplete = <
 
   return (
     <MuiAutocomplete
-      PopperComponent={(props) => {
-        return <CustomPopper {...props} sx={sxPopperComponent} />;
-      }}
       options={
         multiple && !disableSelectAll && options.length > 0
           ? optionsWithSelectAll
@@ -172,6 +163,7 @@ export const Autocomplete = <
         );
       }}
       ChipProps={{ deleteIcon: <CloseIcon /> }}
+      PopperComponent={CustomPopper}
       clearOnBlur={clearOnBlur}
       data-qa-autocomplete
       defaultValue={defaultValue}
diff --git a/packages/manager/src/features/Profile/APITokens/CreateAPITokenDrawer.tsx b/packages/manager/src/features/Profile/APITokens/CreateAPITokenDrawer.tsx
index b5df3b5d57c..2156c1524fc 100644
--- a/packages/manager/src/features/Profile/APITokens/CreateAPITokenDrawer.tsx
+++ b/packages/manager/src/features/Profile/APITokens/CreateAPITokenDrawer.tsx
@@ -215,6 +215,15 @@ export const CreateAPITokenDrawer = (props: Props) => {
           onChange={(_, selected) =>
             form.setFieldValue('expiry', selected.value)
           }
+          slotProps={{
+            popper: {
+              sx: {
+                '&& .MuiAutocomplete-listbox': {
+                  padding: 0,
+                },
+              },
+            },
+          }}
           sx={{
             '&& .MuiAutocomplete-inputRoot': {
               paddingLeft: 1,
@@ -224,11 +233,6 @@ export const CreateAPITokenDrawer = (props: Props) => {
               padding: '0px 2px',
             },
           }}
-          sxPopperComponent={{
-            '&& .MuiAutocomplete-listbox': {
-              padding: 0,
-            },
-          }}
           disableClearable
           label="Expiry"
           options={expiryList}
diff --git a/packages/manager/src/features/Profile/AuthenticationSettings/PhoneVerification/PhoneVerification.tsx b/packages/manager/src/features/Profile/AuthenticationSettings/PhoneVerification/PhoneVerification.tsx
index d6aa0d7bc31..c0d5334bc02 100644
--- a/packages/manager/src/features/Profile/AuthenticationSettings/PhoneVerification/PhoneVerification.tsx
+++ b/packages/manager/src/features/Profile/AuthenticationSettings/PhoneVerification/PhoneVerification.tsx
@@ -270,13 +270,15 @@ export const PhoneVerification = ({
                     } ${getCountryFlag(country.code)}`,
                     value: country.code,
                   }))}
-                  sxPopperComponent={{
-                    '& .MuiPaper-root.MuiAutocomplete-paper': {
-                      border: '1px solid #3683dc',
-                      maxHeight: '285px',
-                      overflow: 'hidden',
-                      textWrap: 'nowrap',
-                      width: 'fit-content',
+                  slotProps={{
+                    paper: {
+                      sx: {
+                        border: '1px solid #3683dc',
+                        maxHeight: '285px',
+                        overflow: 'hidden',
+                        textWrap: 'nowrap',
+                        width: 'fit-content',
+                      },
                     },
                   }}
                   textFieldProps={{
diff --git a/packages/manager/src/features/Profile/DisplaySettings/TimezoneForm.tsx b/packages/manager/src/features/Profile/DisplaySettings/TimezoneForm.tsx
index 884fea18900..4b7816d9c90 100644
--- a/packages/manager/src/features/Profile/DisplaySettings/TimezoneForm.tsx
+++ b/packages/manager/src/features/Profile/DisplaySettings/TimezoneForm.tsx
@@ -97,9 +97,13 @@ export const TimezoneForm = (props: Props) => {
       <StyledRootContainer>
         <Stack>
           <Autocomplete
-            sxPopperComponent={{
-              maxHeight: '285px',
-              overflow: 'hidden',
+            slotProps={{
+              popper: {
+                sx: {
+                  maxHeight: '285px',
+                  overflow: 'hidden',
+                },
+              },
             }}
             value={timezoneList.find(
               (option) => option.value === timezoneValue

From 0a954bbcfcc000a0cf045afaff2ae6fc1e4b47fe Mon Sep 17 00:00:00 2001
From: Dajahi Wiley <114682940+dwiley-akamai@users.noreply.github.com>
Date: Fri, 20 Sep 2024 14:21:57 -0400
Subject: [PATCH 33/62] =?UTF-8?q?upcoming:=20[M3-8604]=20=E2=80=93=20Updat?=
 =?UTF-8?q?e=20URL=20for=20Volume=20Encryption=20guide=20(#10973)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../.changeset/pr-10973-upcoming-features-1726768912614.md   | 5 +++++
 packages/manager/src/components/Encryption/constants.tsx     | 3 ++-
 2 files changed, 7 insertions(+), 1 deletion(-)
 create mode 100644 packages/manager/.changeset/pr-10973-upcoming-features-1726768912614.md

diff --git a/packages/manager/.changeset/pr-10973-upcoming-features-1726768912614.md b/packages/manager/.changeset/pr-10973-upcoming-features-1726768912614.md
new file mode 100644
index 00000000000..fdbcc558d6e
--- /dev/null
+++ b/packages/manager/.changeset/pr-10973-upcoming-features-1726768912614.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Update URL for Volume Encryption guide ([#10973](https://github.com/linode/manager/pull/10973))
diff --git a/packages/manager/src/components/Encryption/constants.tsx b/packages/manager/src/components/Encryption/constants.tsx
index 4f44f4fd100..f65ec615baa 100644
--- a/packages/manager/src/components/Encryption/constants.tsx
+++ b/packages/manager/src/components/Encryption/constants.tsx
@@ -73,7 +73,8 @@ export const ENCRYPT_DISK_REBUILD_DISTRIBUTED_COPY =
   'Distributed Compute Instances are secured using disk encryption.';
 
 /* Block Storage Encryption constants */
-const BLOCK_STORAGE_ENCRYPTION_GUIDE_LINK = ''; // @TODO BSE: Update with guide link
+const BLOCK_STORAGE_ENCRYPTION_GUIDE_LINK =
+  'https://techdocs.akamai.com/cloud-computing/docs/volumes-disk-encryption';
 
 export const BLOCK_STORAGE_ENCRYPTION_GENERAL_DESCRIPTION = (
   <>

From f90ac7f752b86af2df6e118b7e80a041f418f02e Mon Sep 17 00:00:00 2001
From: jdamore-linode <97627410+jdamore-linode@users.noreply.github.com>
Date: Fri, 20 Sep 2024 14:37:54 -0400
Subject: [PATCH 34/62] test: [M3-8616] - Fix failures in DBaaS update tests
 (#10975)

* Mock DBaaS v2 feature flag to be disabled in update tests

* Mock account to exclude DBaaS v2 capability, use legacy platform in mock objects

* Add note for random factory values
---
 docs/development-guide/09-mocking-data.md     |  2 ++
 .../core/databases/update-database.spec.ts    | 33 +++++++++++++++++--
 2 files changed, 32 insertions(+), 3 deletions(-)

diff --git a/docs/development-guide/09-mocking-data.md b/docs/development-guide/09-mocking-data.md
index 2d6ad76504b..f75c782ab43 100644
--- a/docs/development-guide/09-mocking-data.md
+++ b/docs/development-guide/09-mocking-data.md
@@ -41,6 +41,8 @@ const linodeList = linodeFactory.buildList(10, { region: "eu-west" });
 // [{ id: 3, label: 'linode-3', region: 'eu-west' }, ...9 more ]
 ```
 
+Because our factories are used by our dev tools, unit tests, and end-to-end tests, we should avoid creating factories with random or unpredictable default values (e.g. by using utilities like `pickRandom` to assign property values).
+
 ### Intercepting Requests
 
 The [Mock Service Worker](https://mswjs.io/) package intercepts requests at the network level and returns the response you defined in the relevant factory.
diff --git a/packages/manager/cypress/e2e/core/databases/update-database.spec.ts b/packages/manager/cypress/e2e/core/databases/update-database.spec.ts
index d8154cb1481..f99436412a1 100644
--- a/packages/manager/cypress/e2e/core/databases/update-database.spec.ts
+++ b/packages/manager/cypress/e2e/core/databases/update-database.spec.ts
@@ -26,6 +26,7 @@ import {
   mockDatabaseNodeTypes,
 } from 'support/constants/databases';
 import { accountFactory } from '@src/factories';
+import { mockAppendFeatureFlags } from 'support/intercepts/feature-flags';
 
 /**
  * Updates a database cluster's label.
@@ -142,6 +143,32 @@ const resetRootPassword = () => {
 };
 
 describe('Update database clusters', () => {
+  beforeEach(() => {
+    const mockAccount = accountFactory.build({
+      capabilities: [
+        'Akamai Cloud Pulse',
+        'Block Storage',
+        'Cloud Firewall',
+        'Disk Encryption',
+        'Kubernetes',
+        'Linodes',
+        'LKE HA Control Planes',
+        'Machine Images',
+        'Managed Databases',
+        'NodeBalancers',
+        'Object Storage Access Key Regions',
+        'Object Storage Endpoint Types',
+        'Object Storage',
+        'Placement Group',
+        'Vlans',
+      ],
+    });
+    mockAppendFeatureFlags({
+      dbaasV2: { enabled: false, beta: false },
+    });
+    mockGetAccount(mockAccount);
+  });
+
   databaseConfigurations.forEach(
     (configuration: databaseClusterConfiguration) => {
       describe(`updates a ${configuration.linodeType} ${configuration.engine} v${configuration.version}.x ${configuration.clusterSize}-node cluster`, () => {
@@ -166,10 +193,9 @@ describe('Update database clusters', () => {
             engine: configuration.dbType,
             status: 'active',
             allow_list: [allowedIp],
+            platform: 'rdbms-legacy',
           });
 
-          // Mock account to ensure 'Managed Databases' capability.
-          mockGetAccount(accountFactory.build()).as('getAccount');
           mockGetDatabase(database).as('getDatabase');
           mockGetDatabaseTypes(mockDatabaseNodeTypes).as('getDatabaseTypes');
           mockResetPassword(database.id, database.engine).as(
@@ -182,7 +208,7 @@ describe('Update database clusters', () => {
           ).as('getCredentials');
 
           cy.visitWithLogin(`/databases/${database.engine}/${database.id}`);
-          cy.wait(['@getAccount', '@getDatabase', '@getDatabaseTypes']);
+          cy.wait(['@getDatabase', '@getDatabaseTypes']);
 
           cy.get('[data-qa-cluster-config]').within(() => {
             cy.findByText(configuration.region.label).should('be.visible');
@@ -283,6 +309,7 @@ describe('Update database clusters', () => {
               primary: undefined,
               secondary: undefined,
             },
+            platform: 'rdbms-legacy',
           });
 
           const errorMessage =

From 64aec6e1f478ff28dbf1287dc77d1c8a3ad25498 Mon Sep 17 00:00:00 2001
From: Hana Xu <115299789+hana-linode@users.noreply.github.com>
Date: Fri, 20 Sep 2024 15:29:44 -0400
Subject: [PATCH 35/62] change: [M3-8377, M3-8579] - Move Region section above
 Images in Linode Create and update default OS to Ubuntu 24.04 LTS (#10858)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Description 📝
1. Move Region section above the Images section in the Linode Create flows. This change has been approved by UX/Marketing/Docs
2. Set Default OS to Ubuntu 24.04 LTS

No changes have been made in the Backups/Clone tab since they don't have an Images section

## How to test 🧪
### Verification steps
(How to verify changes)
- Click through the Linode Create flow tabs and ensure that the Region section is above the Images section and that the default OS is Ubuntu 24.04 LTS
- There should be no regressions in creating a Linode
---
 .../pr-10858-changed-1725914163062.md         |  5 ++
 .../core/linodes/create-linode-mobile.spec.ts |  6 +--
 .../create-linode-view-code-snippet.spec.ts   |  2 +-
 .../e2e/core/linodes/linode-storage.spec.ts   |  2 +-
 .../e2e/core/linodes/resize-linode.spec.ts    |  2 +-
 .../core/oneClickApps/one-click-apps.spec.ts  |  2 +-
 .../smoke-community-stackscripts.spec.ts      |  2 +-
 .../manager/cypress/support/util/linodes.ts   |  2 +-
 .../Linodes/LinodeCreatev2/Region.tsx         |  4 +-
 .../LinodeCreatev2/Tabs/Clone/Clone.tsx       | 18 ++++---
 .../Linodes/LinodeCreatev2/Tabs/Images.tsx    | 48 ++++++++++---------
 .../Tabs/Marketplace/Marketplace.tsx          |  2 +
 .../LinodeCreatev2/Tabs/OperatingSystems.tsx  | 31 +++++++-----
 .../Tabs/StackScripts/StackScripts.tsx        |  2 +
 .../features/Linodes/LinodeCreatev2/index.tsx |  2 -
 .../Linodes/LinodeCreatev2/utilities.ts       |  2 +-
 .../LinodesCreate/AddonsPanel.test.tsx        |  2 +-
 .../IntegrationsTabPanel.test.tsx             |  2 +-
 .../ApiAwarenessModal/SDKTabPanel.test.tsx    |  2 +-
 .../LinodesCreate/LinodeCreateContainer.tsx   |  2 +-
 .../src/store/image/image.helpers.test.ts     |  2 +-
 .../manager/src/store/image/image.helpers.ts  |  2 +-
 22 files changed, 82 insertions(+), 62 deletions(-)
 create mode 100644 packages/manager/.changeset/pr-10858-changed-1725914163062.md

diff --git a/packages/manager/.changeset/pr-10858-changed-1725914163062.md b/packages/manager/.changeset/pr-10858-changed-1725914163062.md
new file mode 100644
index 00000000000..578b70a3494
--- /dev/null
+++ b/packages/manager/.changeset/pr-10858-changed-1725914163062.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Changed
+---
+
+Move Region section above Images in Linode Create and update default OS to Ubuntu 24.04 LTS ([#10858](https://github.com/linode/manager/pull/10858))
diff --git a/packages/manager/cypress/e2e/core/linodes/create-linode-mobile.spec.ts b/packages/manager/cypress/e2e/core/linodes/create-linode-mobile.spec.ts
index 1cc4bfa5f59..608791634f8 100644
--- a/packages/manager/cypress/e2e/core/linodes/create-linode-mobile.spec.ts
+++ b/packages/manager/cypress/e2e/core/linodes/create-linode-mobile.spec.ts
@@ -29,7 +29,7 @@ describe('Linode create mobile smoke', () => {
       cy.viewport(viewport.width, viewport.height);
       cy.visitWithLogin('/linodes/create');
 
-      linodeCreatePage.selectImage('Debian 11');
+      linodeCreatePage.selectImage('Ubuntu 24.04 LTS');
       linodeCreatePage.selectRegionById(mockLinodeRegion.id);
       linodeCreatePage.selectPlanCard('Shared CPU', 'Nanode 1 GB');
       linodeCreatePage.setLabel(mockLinode.label);
@@ -39,7 +39,7 @@ describe('Linode create mobile smoke', () => {
         .scrollIntoView()
         .within(() => {
           cy.findByText('Nanode 1 GB').should('be.visible');
-          cy.findByText('Debian 11').should('be.visible');
+          cy.findByText('Ubuntu 24.04 LTS').should('be.visible');
           cy.findByText(mockLinodeRegion.label).should('be.visible');
         });
 
@@ -52,7 +52,7 @@ describe('Linode create mobile smoke', () => {
       cy.wait('@createLinode').then((xhr) => {
         const requestBody = xhr.request.body;
 
-        expect(requestBody['image']).to.equal('linode/debian11');
+        expect(requestBody['image']).to.equal('linode/ubuntu24.04');
         expect(requestBody['label']).to.equal(mockLinode.label);
         expect(requestBody['region']).to.equal(mockLinodeRegion.id);
         expect(requestBody['type']).to.equal('g6-nanode-1');
diff --git a/packages/manager/cypress/e2e/core/linodes/create-linode-view-code-snippet.spec.ts b/packages/manager/cypress/e2e/core/linodes/create-linode-view-code-snippet.spec.ts
index 8cbe3a649e3..4df65bffb9c 100644
--- a/packages/manager/cypress/e2e/core/linodes/create-linode-view-code-snippet.spec.ts
+++ b/packages/manager/cypress/e2e/core/linodes/create-linode-view-code-snippet.spec.ts
@@ -214,7 +214,7 @@ describe('Create Linode', () => {
 
       cy.findByLabelText('Linode Label').should(
         'have.value',
-        `debian-${linodeRegion.id}`
+        `ubuntu-${linodeRegion.id}`
       );
 
       cy.findByLabelText('Linode Label')
diff --git a/packages/manager/cypress/e2e/core/linodes/linode-storage.spec.ts b/packages/manager/cypress/e2e/core/linodes/linode-storage.spec.ts
index 9403d258e72..4172c5d0414 100644
--- a/packages/manager/cypress/e2e/core/linodes/linode-storage.spec.ts
+++ b/packages/manager/cypress/e2e/core/linodes/linode-storage.spec.ts
@@ -110,7 +110,7 @@ describe('linode storage tab', () => {
   });
 
   it('try to delete in use disk', () => {
-    const diskName = 'Debian 11 Disk';
+    const diskName = 'Ubuntu 24.04 LTS Disk';
     cy.defer(() => createTestLinode({ booted: true })).then((linode) => {
       interceptDeleteDisks(linode.id).as('deleteDisk');
       cy.visitWithLogin(`linodes/${linode.id}/storage`);
diff --git a/packages/manager/cypress/e2e/core/linodes/resize-linode.spec.ts b/packages/manager/cypress/e2e/core/linodes/resize-linode.spec.ts
index d3ab5c2bd09..59137de9022 100644
--- a/packages/manager/cypress/e2e/core/linodes/resize-linode.spec.ts
+++ b/packages/manager/cypress/e2e/core/linodes/resize-linode.spec.ts
@@ -122,7 +122,7 @@ describe('resize linode', () => {
         { securityMethod: 'vlan_no_internet' }
       )
     ).then((linode) => {
-      const diskName = 'Debian 11 Disk';
+      const diskName = 'Ubuntu 24.04 LTS Disk';
       const size = '50000'; // 50 GB
 
       // Error flow when attempting to resize a linode to a smaller size without
diff --git a/packages/manager/cypress/e2e/core/oneClickApps/one-click-apps.spec.ts b/packages/manager/cypress/e2e/core/oneClickApps/one-click-apps.spec.ts
index a6961e86709..36c19f5b5cf 100644
--- a/packages/manager/cypress/e2e/core/oneClickApps/one-click-apps.spec.ts
+++ b/packages/manager/cypress/e2e/core/oneClickApps/one-click-apps.spec.ts
@@ -133,7 +133,7 @@ describe('OneClick Apps (OCA)', () => {
       description: 'Minecraft OCA',
       ordinal: 10,
       logo_url: 'assets/Minecraft.svg',
-      images: ['linode/debian11', 'linode/ubuntu22.04'],
+      images: ['linode/debian11', 'linode/ubuntu24.04'],
       deployments_total: 18854,
       deployments_active: 412,
       is_public: true,
diff --git a/packages/manager/cypress/e2e/core/stackscripts/smoke-community-stackscripts.spec.ts b/packages/manager/cypress/e2e/core/stackscripts/smoke-community-stackscripts.spec.ts
index 26453578d7b..4ae8be80f21 100644
--- a/packages/manager/cypress/e2e/core/stackscripts/smoke-community-stackscripts.spec.ts
+++ b/packages/manager/cypress/e2e/core/stackscripts/smoke-community-stackscripts.spec.ts
@@ -43,7 +43,7 @@ const mockStackScripts: StackScript[] = [
       'linode/rocky8',
       'linode/debian11',
       'linode/centos-stream9',
-      'linode/ubuntu22.04',
+      'linode/ubuntu24.04',
       'linode/almalinux9',
       'linode/rocky9',
     ],
diff --git a/packages/manager/cypress/support/util/linodes.ts b/packages/manager/cypress/support/util/linodes.ts
index 9bbe9ad4b9f..2c6bca8da83 100644
--- a/packages/manager/cypress/support/util/linodes.ts
+++ b/packages/manager/cypress/support/util/linodes.ts
@@ -108,7 +108,7 @@ export const createTestLinode = async (
   const resolvedCreatePayload = {
     ...createLinodeRequestFactory.build({
       booted: false,
-      image: 'linode/debian11',
+      image: 'linode/ubuntu24.04',
       label: randomLabel(),
       region: chooseRegion().id,
     }),
diff --git a/packages/manager/src/features/Linodes/LinodeCreatev2/Region.tsx b/packages/manager/src/features/Linodes/LinodeCreatev2/Region.tsx
index fb9d1002e3a..da792c73378 100644
--- a/packages/manager/src/features/Linodes/LinodeCreatev2/Region.tsx
+++ b/packages/manager/src/features/Linodes/LinodeCreatev2/Region.tsx
@@ -41,7 +41,7 @@ import {
 import type { LinodeCreateFormValues } from './utilities';
 import type { Region as RegionType } from '@linode/api-v4';
 
-export const Region = () => {
+export const Region = React.memo(() => {
   const {
     isDiskEncryptionFeatureEnabled,
   } = useIsDiskEncryptionFeatureEnabled();
@@ -267,4 +267,4 @@ export const Region = () => {
       )}
     </Paper>
   );
-};
+});
diff --git a/packages/manager/src/features/Linodes/LinodeCreatev2/Tabs/Clone/Clone.tsx b/packages/manager/src/features/Linodes/LinodeCreatev2/Tabs/Clone/Clone.tsx
index 0bf8cc097b3..9b4956dc0cf 100644
--- a/packages/manager/src/features/Linodes/LinodeCreatev2/Tabs/Clone/Clone.tsx
+++ b/packages/manager/src/features/Linodes/LinodeCreatev2/Tabs/Clone/Clone.tsx
@@ -3,18 +3,22 @@ import React from 'react';
 import { Paper } from 'src/components/Paper';
 import { Stack } from 'src/components/Stack';
 import { Typography } from 'src/components/Typography';
+import { Region } from 'src/features/Linodes/LinodeCreatev2/Region';
 
 import { LinodeSelectTable } from '../../shared/LinodeSelectTable';
 import { CloneWarning } from './CloneWarning';
 
 export const Clone = () => {
   return (
-    <Paper>
-      <Stack spacing={1}>
-        <Typography variant="h2">Select Linode to Clone From</Typography>
-        <CloneWarning />
-        <LinodeSelectTable enablePowerOff />
-      </Stack>
-    </Paper>
+    <Stack spacing={3}>
+      <Paper>
+        <Stack spacing={1}>
+          <Typography variant="h2">Select Linode to Clone From</Typography>
+          <CloneWarning />
+          <LinodeSelectTable enablePowerOff />
+        </Stack>
+      </Paper>
+      <Region />
+    </Stack>
   );
 };
diff --git a/packages/manager/src/features/Linodes/LinodeCreatev2/Tabs/Images.tsx b/packages/manager/src/features/Linodes/LinodeCreatev2/Tabs/Images.tsx
index bed5a6a0faf..3f68fcd9b6a 100644
--- a/packages/manager/src/features/Linodes/LinodeCreatev2/Tabs/Images.tsx
+++ b/packages/manager/src/features/Linodes/LinodeCreatev2/Tabs/Images.tsx
@@ -12,6 +12,7 @@ import { Paper } from 'src/components/Paper';
 import { Placeholder } from 'src/components/Placeholder/Placeholder';
 import { Stack } from 'src/components/Stack';
 import { Typography } from 'src/components/Typography';
+import { Region } from 'src/features/Linodes/LinodeCreatev2/Region';
 import { useRestrictedGlobalGrantCheck } from 'src/hooks/useRestrictedGlobalGrantCheck';
 import { useAllImagesQuery } from 'src/queries/images';
 import { useRegionsQuery } from 'src/queries/regions/regions';
@@ -95,27 +96,30 @@ export const Images = () => {
   }
 
   return (
-    <Paper>
-      <Typography variant="h2">Choose an Image</Typography>
-      <Box alignItems="flex-end" display="flex" flexWrap="wrap" gap={2}>
-        <ImageSelectv2
-          disabled={isCreateLinodeRestricted}
-          errorText={fieldState.error?.message}
-          onBlur={field.onBlur}
-          onChange={onChange}
-          sx={{ width: '416px' }}
-          value={field.value}
-          variant="private"
-        />
-        {showDistributedCapabilityNotice && (
-          <Stack alignItems="center" direction="row" pb={0.8} spacing={1}>
-            <DistributedRegionIcon height="21px" width="24px" />
-            <Typography>
-              Indicates compatibility with distributed compute regions.
-            </Typography>
-          </Stack>
-        )}
-      </Box>
-    </Paper>
+    <Stack spacing={3}>
+      <Region />
+      <Paper>
+        <Typography variant="h2">Choose an Image</Typography>
+        <Box alignItems="flex-end" display="flex" flexWrap="wrap" gap={2}>
+          <ImageSelectv2
+            disabled={isCreateLinodeRestricted}
+            errorText={fieldState.error?.message}
+            onBlur={field.onBlur}
+            onChange={onChange}
+            sx={{ width: '416px' }}
+            value={field.value}
+            variant="private"
+          />
+          {showDistributedCapabilityNotice && (
+            <Stack alignItems="center" direction="row" pb={0.8} spacing={1}>
+              <DistributedRegionIcon height="21px" width="24px" />
+              <Typography>
+                Indicates compatibility with distributed compute regions.
+              </Typography>
+            </Stack>
+          )}
+        </Box>
+      </Paper>
+    </Stack>
   );
 };
diff --git a/packages/manager/src/features/Linodes/LinodeCreatev2/Tabs/Marketplace/Marketplace.tsx b/packages/manager/src/features/Linodes/LinodeCreatev2/Tabs/Marketplace/Marketplace.tsx
index dab314f8e03..4b90214c62e 100644
--- a/packages/manager/src/features/Linodes/LinodeCreatev2/Tabs/Marketplace/Marketplace.tsx
+++ b/packages/manager/src/features/Linodes/LinodeCreatev2/Tabs/Marketplace/Marketplace.tsx
@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 
 import { Stack } from 'src/components/Stack';
+import { Region } from 'src/features/Linodes/LinodeCreatev2/Region';
 
 import { StackScriptImages } from '../StackScripts/StackScriptImages';
 import { UserDefinedFields } from '../StackScripts/UserDefinedFields/UserDefinedFields';
@@ -18,6 +19,7 @@ export const Marketplace = () => {
     <Stack data-testid="one-click-apps-container" spacing={2}>
       <AppSelect onOpenDetailsDrawer={onOpenDetailsDrawer} />
       <UserDefinedFields onOpenDetailsDrawer={onOpenDetailsDrawer} />
+      <Region />
       <StackScriptImages />
       <AppDetailDrawerv2
         onClose={() => setDrawerStackScriptId(undefined)}
diff --git a/packages/manager/src/features/Linodes/LinodeCreatev2/Tabs/OperatingSystems.tsx b/packages/manager/src/features/Linodes/LinodeCreatev2/Tabs/OperatingSystems.tsx
index ec3b526fc33..79a97d4b303 100644
--- a/packages/manager/src/features/Linodes/LinodeCreatev2/Tabs/OperatingSystems.tsx
+++ b/packages/manager/src/features/Linodes/LinodeCreatev2/Tabs/OperatingSystems.tsx
@@ -4,7 +4,9 @@ import { useController, useFormContext } from 'react-hook-form';
 
 import { ImageSelectv2 } from 'src/components/ImageSelectv2/ImageSelectv2';
 import { Paper } from 'src/components/Paper';
+import { Stack } from 'src/components/Stack';
 import { Typography } from 'src/components/Typography';
+import { Region } from 'src/features/Linodes/LinodeCreatev2/Region';
 import { useRestrictedGlobalGrantCheck } from 'src/hooks/useRestrictedGlobalGrantCheck';
 
 import { getGeneratedLinodeLabel } from '../utilities';
@@ -45,18 +47,21 @@ export const OperatingSystems = () => {
   };
 
   return (
-    <Paper>
-      <Typography variant="h2">Choose an OS</Typography>
-      <ImageSelectv2
-        disabled={isCreateLinodeRestricted}
-        errorText={fieldState.error?.message}
-        label="Linux Distribution"
-        onBlur={field.onBlur}
-        onChange={onChange}
-        placeholder="Choose a Linux distribution"
-        value={field.value}
-        variant="public"
-      />
-    </Paper>
+    <Stack spacing={3}>
+      <Region />
+      <Paper>
+        <Typography variant="h2">Choose an OS</Typography>
+        <ImageSelectv2
+          disabled={isCreateLinodeRestricted}
+          errorText={fieldState.error?.message}
+          label="Linux Distribution"
+          onBlur={field.onBlur}
+          onChange={onChange}
+          placeholder="Choose a Linux distribution"
+          value={field.value}
+          variant="public"
+        />
+      </Paper>
+    </Stack>
   );
 };
diff --git a/packages/manager/src/features/Linodes/LinodeCreatev2/Tabs/StackScripts/StackScripts.tsx b/packages/manager/src/features/Linodes/LinodeCreatev2/Tabs/StackScripts/StackScripts.tsx
index 3df32c14ba2..8221c739745 100644
--- a/packages/manager/src/features/Linodes/LinodeCreatev2/Tabs/StackScripts/StackScripts.tsx
+++ b/packages/manager/src/features/Linodes/LinodeCreatev2/Tabs/StackScripts/StackScripts.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 
 import { Stack } from 'src/components/Stack';
+import { Region } from 'src/features/Linodes/LinodeCreatev2/Region';
 
 import { StackScriptImages } from './StackScriptImages';
 import { StackScriptSelection } from './StackScriptSelection';
@@ -11,6 +12,7 @@ export const StackScripts = () => {
     <Stack spacing={3}>
       <StackScriptSelection />
       <UserDefinedFields />
+      <Region />
       <StackScriptImages />
     </Stack>
   );
diff --git a/packages/manager/src/features/Linodes/LinodeCreatev2/index.tsx b/packages/manager/src/features/Linodes/LinodeCreatev2/index.tsx
index e3dde917e42..52476730937 100644
--- a/packages/manager/src/features/Linodes/LinodeCreatev2/index.tsx
+++ b/packages/manager/src/features/Linodes/LinodeCreatev2/index.tsx
@@ -35,7 +35,6 @@ import { EUAgreement } from './EUAgreement';
 import { Firewall } from './Firewall';
 import { FirewallAuthorization } from './FirewallAuthorization';
 import { Plan } from './Plan';
-import { Region } from './Region';
 import { getLinodeCreateResolver } from './resolvers';
 import { Security } from './Security';
 import { SMTP } from './SMTP';
@@ -225,7 +224,6 @@ export const LinodeCreatev2 = () => {
               </SafeTabPanel>
             </TabPanels>
           </Tabs>
-          {params.type !== 'Backups' && <Region />}
           <Plan />
           <Details />
           {params.type !== 'Clone Linode' && <Security />}
diff --git a/packages/manager/src/features/Linodes/LinodeCreatev2/utilities.ts b/packages/manager/src/features/Linodes/LinodeCreatev2/utilities.ts
index 5679f43bc84..c227d2c0a15 100644
--- a/packages/manager/src/features/Linodes/LinodeCreatev2/utilities.ts
+++ b/packages/manager/src/features/Linodes/LinodeCreatev2/utilities.ts
@@ -28,7 +28,7 @@ import type { FieldErrors } from 'react-hook-form';
 /**
  * This is the ID of the Image of the default OS.
  */
-const DEFAULT_OS = 'linode/debian11';
+const DEFAULT_OS = 'linode/ubuntu24.04';
 
 /**
  * This interface is used to type the query params on the Linode Create flow.
diff --git a/packages/manager/src/features/Linodes/LinodesCreate/AddonsPanel.test.tsx b/packages/manager/src/features/Linodes/LinodesCreate/AddonsPanel.test.tsx
index 37c33a7ed0d..92bbcbc398d 100644
--- a/packages/manager/src/features/Linodes/LinodesCreate/AddonsPanel.test.tsx
+++ b/packages/manager/src/features/Linodes/LinodesCreate/AddonsPanel.test.tsx
@@ -107,7 +107,7 @@ const props: AddonsPanelProps = {
       group: '',
       hypervisor: 'kvm',
       id: 45329311,
-      image: 'linode/debian11',
+      image: 'linode/ubuntu24.04',
       ipv4: ['192.168.139.183', '139.144.17.202'],
       ipv6: '2600:3c04::f03c:93ff:fe75:0612/128',
       label: 'debian-ca-central',
diff --git a/packages/manager/src/features/Linodes/LinodesCreate/ApiAwarenessModal/IntegrationsTabPanel.test.tsx b/packages/manager/src/features/Linodes/LinodesCreate/ApiAwarenessModal/IntegrationsTabPanel.test.tsx
index 91d86d43265..b62fdd695a5 100644
--- a/packages/manager/src/features/Linodes/LinodesCreate/ApiAwarenessModal/IntegrationsTabPanel.test.tsx
+++ b/packages/manager/src/features/Linodes/LinodesCreate/ApiAwarenessModal/IntegrationsTabPanel.test.tsx
@@ -11,7 +11,7 @@ import type { IntegrationsTabPanelProps } from './IntegrationsTabPanel';
 
 const defaultProps: IntegrationsTabPanelProps = {
   payLoad: {
-    image: 'linode/debian11',
+    image: 'linode/ubuntu24.04',
     label: 'debian-us-ord-001',
     region: 'us-ord',
     root_pass: 'testpassword',
diff --git a/packages/manager/src/features/Linodes/LinodesCreate/ApiAwarenessModal/SDKTabPanel.test.tsx b/packages/manager/src/features/Linodes/LinodesCreate/ApiAwarenessModal/SDKTabPanel.test.tsx
index e6a734363d7..036a8726bdd 100644
--- a/packages/manager/src/features/Linodes/LinodesCreate/ApiAwarenessModal/SDKTabPanel.test.tsx
+++ b/packages/manager/src/features/Linodes/LinodesCreate/ApiAwarenessModal/SDKTabPanel.test.tsx
@@ -11,7 +11,7 @@ import type { SDKTabPanelProps } from './SDKTabPanel';
 
 const defaultProps: SDKTabPanelProps = {
   payLoad: {
-    image: 'linode/debian11',
+    image: 'linode/ubuntu24.04',
     label: 'debian-us-ord-001',
     region: 'us-ord',
     root_pass: 'testpassword',
diff --git a/packages/manager/src/features/Linodes/LinodesCreate/LinodeCreateContainer.tsx b/packages/manager/src/features/Linodes/LinodesCreate/LinodeCreateContainer.tsx
index a22ee2d6371..edcecffe224 100644
--- a/packages/manager/src/features/Linodes/LinodesCreate/LinodeCreateContainer.tsx
+++ b/packages/manager/src/features/Linodes/LinodesCreate/LinodeCreateContainer.tsx
@@ -91,7 +91,7 @@ import type { MapState } from 'src/store/types';
 import type { ExtendedType } from 'src/utilities/extendType';
 import type { ExtendedIP } from 'src/utilities/ipUtils';
 
-const DEFAULT_IMAGE = 'linode/debian11';
+const DEFAULT_IMAGE = 'linode/ubuntu24.04';
 
 interface State {
   additionalIPv4RangesForVPC: ExtendedIP[];
diff --git a/packages/manager/src/store/image/image.helpers.test.ts b/packages/manager/src/store/image/image.helpers.test.ts
index c56bc961f1b..296313cb9ea 100644
--- a/packages/manager/src/store/image/image.helpers.test.ts
+++ b/packages/manager/src/store/image/image.helpers.test.ts
@@ -8,6 +8,6 @@ describe('isLinodeKubeImageId', () => {
     expect(isLinodeKubeImageId('linode/alpine3.15')).toBe(false);
   });
   it('should be true if the image is a linode kube image', () => {
-    expect(isLinodeKubeImageId('linode/debian11-kube-v1.23.4')).toBe(true);
+    expect(isLinodeKubeImageId('linode/ubuntu24.04-kube-v1.23.4')).toBe(true);
   });
 });
diff --git a/packages/manager/src/store/image/image.helpers.ts b/packages/manager/src/store/image/image.helpers.ts
index 19228e7c1ea..19e0362f62a 100644
--- a/packages/manager/src/store/image/image.helpers.ts
+++ b/packages/manager/src/store/image/image.helpers.ts
@@ -24,7 +24,7 @@ export const filterImagesByType = (
  * LKE (Linode Kubernetes Engine) image. In Cloud Manager, we hide
  * these images from the user.
  *
- * Image IDs are in the form linode/debian11 or private/15943292
+ * Image IDs are in the form linode/ubuntu24.04 or private/15943292
  *
  * @param {string | null} id the image's id (unlike most entities, image ids are string)
  * @returns {boolean} true if the image is an LKE image

From 4a418fafc57ac5c0514f278d1e02a87a3d445e47 Mon Sep 17 00:00:00 2001
From: jdamore-linode <97627410+jdamore-linode@users.noreply.github.com>
Date: Fri, 20 Sep 2024 16:18:57 -0400
Subject: [PATCH 36/62] fix: [M3-8602] - Fix `plan-selection.spec.ts` test
 failures on retries (#10976)

* Prevent plan selection test from guaranteed failures on reattempts

* Added changeset: Fix plan selection test always failing on reattempts
---
 packages/manager/.changeset/pr-10976-tests-1726778238574.md | 5 +++++
 .../manager/cypress/e2e/core/linodes/plan-selection.spec.ts | 6 +++---
 2 files changed, 8 insertions(+), 3 deletions(-)
 create mode 100644 packages/manager/.changeset/pr-10976-tests-1726778238574.md

diff --git a/packages/manager/.changeset/pr-10976-tests-1726778238574.md b/packages/manager/.changeset/pr-10976-tests-1726778238574.md
new file mode 100644
index 00000000000..64ff6e288bf
--- /dev/null
+++ b/packages/manager/.changeset/pr-10976-tests-1726778238574.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Tests
+---
+
+Fix plan selection test always failing on reattempts ([#10976](https://github.com/linode/manager/pull/10976))
diff --git a/packages/manager/cypress/e2e/core/linodes/plan-selection.spec.ts b/packages/manager/cypress/e2e/core/linodes/plan-selection.spec.ts
index b4f2d50bca8..82b97eb7d63 100644
--- a/packages/manager/cypress/e2e/core/linodes/plan-selection.spec.ts
+++ b/packages/manager/cypress/e2e/core/linodes/plan-selection.spec.ts
@@ -124,7 +124,7 @@ const notices = {
 
 authenticate();
 describe('displays linode plans panel based on availability', () => {
-  before(() => {
+  beforeEach(() => {
     mockGetRegions(mockRegions).as('getRegions');
     mockGetLinodeTypes(mockLinodeTypes).as('getLinodeTypes');
     mockGetRegionAvailability(mockRegions[0].id, mockRegionAvailability).as(
@@ -220,7 +220,7 @@ describe('displays linode plans panel based on availability', () => {
 });
 
 describe('displays kubernetes plans panel based on availability', () => {
-  before(() => {
+  beforeEach(() => {
     mockGetRegions(mockRegions).as('getRegions');
     mockGetLinodeTypes(mockLinodeTypes).as('getLinodeTypes');
     mockGetRegionAvailability(mockRegions[0].id, mockRegionAvailability).as(
@@ -350,7 +350,7 @@ describe('displays kubernetes plans panel based on availability', () => {
 });
 
 describe('displays specific linode plans for GPU', () => {
-  before(() => {
+  beforeEach(() => {
     mockGetRegions(mockRegions).as('getRegions');
     mockGetLinodeTypes(mockLinodeTypes).as('getLinodeTypes');
     mockGetRegionAvailability(mockRegions[0].id, mockRegionAvailability).as(

From 94580bbfee714dc9844c791169bac1c4604e709f Mon Sep 17 00:00:00 2001
From: Purvesh Makode <pmakode@akamai.com>
Date: Mon, 23 Sep 2024 10:45:04 +0530
Subject: [PATCH 37/62] change: [M3-6838] - Better "Backups Enabled" default
 when cloning Linode (#10959)

* Better backups enabled default when cloning linode

* Added changeset: Better 'Backups Enabled' default when cloning Linode

* Refactoring code...

* Cleanup: remove line break
---
 .../manager/.changeset/pr-10959-changed-1726660002249.md     | 5 +++++
 .../Linodes/LinodeCreatev2/shared/LinodeSelectTable.tsx      | 1 +
 .../manager/src/features/Linodes/LinodeCreatev2/utilities.ts | 1 +
 3 files changed, 7 insertions(+)
 create mode 100644 packages/manager/.changeset/pr-10959-changed-1726660002249.md

diff --git a/packages/manager/.changeset/pr-10959-changed-1726660002249.md b/packages/manager/.changeset/pr-10959-changed-1726660002249.md
new file mode 100644
index 00000000000..72e674ff43c
--- /dev/null
+++ b/packages/manager/.changeset/pr-10959-changed-1726660002249.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Changed
+---
+
+Better 'Backups Enabled' default when cloning Linode ([#10959](https://github.com/linode/manager/pull/10959))
diff --git a/packages/manager/src/features/Linodes/LinodeCreatev2/shared/LinodeSelectTable.tsx b/packages/manager/src/features/Linodes/LinodeCreatev2/shared/LinodeSelectTable.tsx
index fb7aaa33c32..856b0018fbc 100644
--- a/packages/manager/src/features/Linodes/LinodeCreatev2/shared/LinodeSelectTable.tsx
+++ b/packages/manager/src/features/Linodes/LinodeCreatev2/shared/LinodeSelectTable.tsx
@@ -109,6 +109,7 @@ export const LinodeSelectTable = (props: Props) => {
     reset((prev) => ({
       ...prev,
       backup_id: null,
+      backups_enabled: linode.backups.enabled,
       linode,
       private_ip: hasPrivateIP,
       region: linode.region,
diff --git a/packages/manager/src/features/Linodes/LinodeCreatev2/utilities.ts b/packages/manager/src/features/Linodes/LinodeCreatev2/utilities.ts
index c227d2c0a15..74a68179aed 100644
--- a/packages/manager/src/features/Linodes/LinodeCreatev2/utilities.ts
+++ b/packages/manager/src/features/Linodes/LinodeCreatev2/utilities.ts
@@ -304,6 +304,7 @@ export const defaultValues = async (
 
   const values: LinodeCreateFormValues = {
     backup_id: params.backupID,
+    backups_enabled: linode?.backups.enabled,
     image: getDefaultImageId(params),
     interfaces: defaultInterfaces,
     linode,

From 3a8266990196bf3a31a7b5a8db856771c12b463b Mon Sep 17 00:00:00 2001
From: Harsh Shankar Rao <hrao@akamai.com>
Date: Mon, 23 Sep 2024 18:37:26 +0530
Subject: [PATCH 38/62] change: [M3-7679] - Update VPC Assigned Linodes table
 header (#10940)

* change: [M3-7679] - Update VPC Assigned Linodes table header

* Added changeset: VPC Assign Linodes table header
---
 .../manager/.changeset/pr-10940-changed-1726472458540.md | 5 +++++
 .../VPCs/VPCDetail/SubnetAssignLinodesDrawer.test.tsx    | 9 ++++++---
 .../VPCs/VPCDetail/SubnetAssignLinodesDrawer.tsx         | 4 ++--
 3 files changed, 13 insertions(+), 5 deletions(-)
 create mode 100644 packages/manager/.changeset/pr-10940-changed-1726472458540.md

diff --git a/packages/manager/.changeset/pr-10940-changed-1726472458540.md b/packages/manager/.changeset/pr-10940-changed-1726472458540.md
new file mode 100644
index 00000000000..0bd462c23c7
--- /dev/null
+++ b/packages/manager/.changeset/pr-10940-changed-1726472458540.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Changed
+---
+
+VPC Assign Linodes table header ([#10940](https://github.com/linode/manager/pull/10940))
diff --git a/packages/manager/src/features/VPCs/VPCDetail/SubnetAssignLinodesDrawer.test.tsx b/packages/manager/src/features/VPCs/VPCDetail/SubnetAssignLinodesDrawer.test.tsx
index ab69f514099..fbef0006bfa 100644
--- a/packages/manager/src/features/VPCs/VPCDetail/SubnetAssignLinodesDrawer.test.tsx
+++ b/packages/manager/src/features/VPCs/VPCDetail/SubnetAssignLinodesDrawer.test.tsx
@@ -1,14 +1,15 @@
-import { Subnet } from '@linode/api-v4';
 import { fireEvent, waitFor } from '@testing-library/react';
 import * as React from 'react';
 
 import { linodeFactory } from 'src/factories';
 import { makeResourcePage } from 'src/mocks/serverHandlers';
-import { http, HttpResponse, server } from 'src/mocks/testServer';
+import { HttpResponse, http, server } from 'src/mocks/testServer';
 import { mockMatchMedia, renderWithTheme } from 'src/utilities/testHelpers';
 
 import { SubnetAssignLinodesDrawer } from './SubnetAssignLinodesDrawer';
 
+import type { Subnet } from '@linode/api-v4';
+
 beforeAll(() => mockMatchMedia());
 
 const props = {
@@ -57,7 +58,9 @@ describe('Subnet Assign Linodes Drawer', () => {
 
     const assignButton = getByText('Assign Linode');
     expect(assignButton).toBeVisible();
-    const alreadyAssigned = getByText('Linodes Assigned to Subnet (0)');
+    const alreadyAssigned = getByText(
+      'Linodes recently assigned to Subnet (0)'
+    );
     expect(alreadyAssigned).toBeVisible();
     const doneButton = getByText('Done');
     expect(doneButton).toBeVisible();
diff --git a/packages/manager/src/features/VPCs/VPCDetail/SubnetAssignLinodesDrawer.tsx b/packages/manager/src/features/VPCs/VPCDetail/SubnetAssignLinodesDrawer.tsx
index 20827c61afa..48e962c9a24 100644
--- a/packages/manager/src/features/VPCs/VPCDetail/SubnetAssignLinodesDrawer.tsx
+++ b/packages/manager/src/features/VPCs/VPCDetail/SubnetAssignLinodesDrawer.tsx
@@ -29,7 +29,6 @@ import { useAllLinodesQuery } from 'src/queries/linodes/linodes';
 import { getAllLinodeConfigs } from 'src/queries/linodes/requests';
 import { useGrants, useProfile } from 'src/queries/profile/profile';
 import { getErrorMap } from 'src/utilities/errorUtils';
-import { ExtendedIP } from 'src/utilities/ipUtils';
 import { SUBNET_LINODE_CSV_HEADERS } from 'src/utilities/subnets';
 
 import {
@@ -48,6 +47,7 @@ import type {
   Linode,
   Subnet,
 } from '@linode/api-v4';
+import type { ExtendedIP } from 'src/utilities/ipUtils';
 
 // @TODO VPC: if all subnet action menu item related components use (most of) this as their props, might be worth
 // putting this in a common file and naming it something like SubnetActionMenuItemProps or something
@@ -548,7 +548,7 @@ export const SubnetAssignLinodesDrawer = (
           handleUnassignLinode(data as LinodeAndConfigData);
           setUnassignLinodesErrors([]);
         }}
-        headerText={`Linodes Assigned to Subnet (${assignedLinodesAndConfigData.length})`}
+        headerText={`Linodes recently assigned to Subnet (${assignedLinodesAndConfigData.length})`}
         noDataText={'No Linodes have been assigned.'}
         preferredDataLabel="linodeConfigLabel"
         selectionData={assignedLinodesAndConfigData}

From ceb3fb586e9cd8852ebea0a1217f9714c64d48e5 Mon Sep 17 00:00:00 2001
From: Alban Bailly <130582365+abailly-akamai@users.noreply.github.com>
Date: Mon, 23 Sep 2024 11:22:48 -0400
Subject: [PATCH 39/62] feat: [M3-8592] - Limits: surface new API errors in
 Linode and LKE flows (#10969)

* Initial commit: save work

* save progress

* Linode resize

* rebuild dialog

* some LKE

* rezie pool

* Cleanup

* Added changeset: Limits: surface new API errors in Linode and LKE flows

* Cleanup

* feedback @coliu-akamai @hkhalil-akamai
---
 .../pr-10969-changed-1726849752351.md         |  5 +++
 .../manager/src/components/ErrorMessage.tsx   |  6 +++
 .../LinodeResizeAllocationError.tsx           | 18 ++++++++
 .../CreateCluster/CreateCluster.tsx           |  7 +--
 .../NodePoolsDisplay/AddNodePoolDrawer.tsx    | 15 ++++---
 .../NodePoolsDisplay/ResizeNodePoolDrawer.tsx | 20 ++++++++-
 .../LinodeRebuild/LinodeRebuildDialog.tsx     | 17 ++++++-
 .../LinodeResize/LinodeResize.tsx             | 28 +++++++-----
 .../LinodeResize/LinodeResize.utils.tsx       | 33 +-------------
 .../presets/extra/limits/linode-limits.ts     | 44 +++++++++++++++++++
 .../mocks/presets/extra/limits/lke-limits.ts  | 32 ++++++++++++++
 packages/manager/src/mocks/presets/index.ts   |  4 ++
 packages/manager/src/mocks/types.ts           |  5 ++-
 13 files changed, 181 insertions(+), 53 deletions(-)
 create mode 100644 packages/manager/.changeset/pr-10969-changed-1726849752351.md
 create mode 100644 packages/manager/src/components/LinodeResizeAllocationError.tsx
 create mode 100644 packages/manager/src/mocks/presets/extra/limits/linode-limits.ts
 create mode 100644 packages/manager/src/mocks/presets/extra/limits/lke-limits.ts

diff --git a/packages/manager/.changeset/pr-10969-changed-1726849752351.md b/packages/manager/.changeset/pr-10969-changed-1726849752351.md
new file mode 100644
index 00000000000..241892d4135
--- /dev/null
+++ b/packages/manager/.changeset/pr-10969-changed-1726849752351.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Changed
+---
+
+Limits: surface new API errors in Linode and LKE flows ([#10969](https://github.com/linode/manager/pull/10969))
diff --git a/packages/manager/src/components/ErrorMessage.tsx b/packages/manager/src/components/ErrorMessage.tsx
index 8bb3871e750..7297899a89b 100644
--- a/packages/manager/src/components/ErrorMessage.tsx
+++ b/packages/manager/src/components/ErrorMessage.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 
+import { LinodeResizeAllocationError } from './LinodeResizeAllocationError';
 import { MigrateError } from './MigrateError';
 import { SupportTicketGeneralError } from './SupportTicketGeneralError';
 import { Typography } from './Typography';
@@ -15,6 +16,7 @@ interface Props {
 
 export const migrationsDisabledRegex = /migrations are currently disabled/i;
 export const supportTextRegex = /(open a support ticket|contact Support)/i;
+export const allocationErrorRegex = /allocated more disk/i;
 
 export const ErrorMessage = (props: Props) => {
   const { entity, formPayloadValues, message } = props;
@@ -33,5 +35,9 @@ export const ErrorMessage = (props: Props) => {
     );
   }
 
+  if (allocationErrorRegex.test(message)) {
+    return <LinodeResizeAllocationError />;
+  }
+
   return <Typography py={2}>{message}</Typography>;
 };
diff --git a/packages/manager/src/components/LinodeResizeAllocationError.tsx b/packages/manager/src/components/LinodeResizeAllocationError.tsx
new file mode 100644
index 00000000000..54fc4e09551
--- /dev/null
+++ b/packages/manager/src/components/LinodeResizeAllocationError.tsx
@@ -0,0 +1,18 @@
+import * as React from 'react';
+
+import { Link } from 'src/components/Link';
+import { Typography } from 'src/components/Typography';
+
+export const LinodeResizeAllocationError = () => {
+  return (
+    <Typography>
+      The current disk size of your Linode is too large for the new service
+      plan. Please resize your disk to accommodate the new plan. You can read
+      our{' '}
+      <Link to="https://www.linode.com/docs/platform/disk-images/resizing-a-linode/">
+        Resize Your Linode
+      </Link>{' '}
+      guide for more detailed instructions.
+    </Typography>
+  );
+};
diff --git a/packages/manager/src/features/Kubernetes/CreateCluster/CreateCluster.tsx b/packages/manager/src/features/Kubernetes/CreateCluster/CreateCluster.tsx
index e8fccf93722..ac8ac0ce87b 100644
--- a/packages/manager/src/features/Kubernetes/CreateCluster/CreateCluster.tsx
+++ b/packages/manager/src/features/Kubernetes/CreateCluster/CreateCluster.tsx
@@ -40,7 +40,7 @@ import { plansNoticesUtils } from 'src/utilities/planNotices';
 import { DOCS_LINK_LABEL_DC_PRICING } from 'src/utilities/pricing/constants';
 import { UNKNOWN_PRICE } from 'src/utilities/pricing/constants';
 import { getDCSpecificPriceByType } from 'src/utilities/pricing/dynamicPricing';
-import { scrollErrorIntoView } from 'src/utilities/scrollErrorIntoView';
+import { scrollErrorIntoViewV2 } from 'src/utilities/scrollErrorIntoViewV2';
 
 import KubeCheckoutBar from '../KubeCheckoutBar';
 import {
@@ -69,6 +69,7 @@ export const CreateCluster = () => {
   const [errors, setErrors] = React.useState<APIError[] | undefined>();
   const [submitting, setSubmitting] = React.useState<boolean>(false);
   const [hasAgreed, setAgreed] = React.useState<boolean>(false);
+  const formContainerRef = React.useRef<HTMLDivElement>(null);
   const { mutateAsync: updateAccountAgreements } = useMutateAccountAgreements();
   const [highAvailability, setHighAvailability] = React.useState<boolean>();
 
@@ -148,7 +149,7 @@ export const CreateCluster = () => {
       .catch((err) => {
         setErrors(getAPIErrorOrDefault(err, 'Error creating your cluster'));
         setSubmitting(false);
-        scrollErrorIntoView();
+        scrollErrorIntoViewV2(formContainerRef);
       });
   };
 
@@ -202,7 +203,7 @@ export const CreateCluster = () => {
   }
 
   return (
-    <Grid className={classes.root} container>
+    <Grid className={classes.root} container ref={formContainerRef}>
       <DocumentTitleSegment segment="Create a Kubernetes Cluster" />
       <LandingHeader
         docsLabel="Docs"
diff --git a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/AddNodePoolDrawer.tsx b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/AddNodePoolDrawer.tsx
index a3c18658cb4..5d314d9a589 100644
--- a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/AddNodePoolDrawer.tsx
+++ b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/AddNodePoolDrawer.tsx
@@ -17,7 +17,7 @@ import { pluralize } from 'src/utilities/pluralize';
 import { PRICES_RELOAD_ERROR_NOTICE_TEXT } from 'src/utilities/pricing/constants';
 import { renderMonthlyPriceToCorrectDecimalPlace } from 'src/utilities/pricing/dynamicPricing';
 import { getLinodeRegionPrice } from 'src/utilities/pricing/linodes';
-import { scrollErrorIntoView } from 'src/utilities/scrollErrorIntoView';
+import { scrollErrorIntoViewV2 } from 'src/utilities/scrollErrorIntoViewV2';
 
 import { KubernetesPlansPanel } from '../../KubernetesPlansPanel/KubernetesPlansPanel';
 import { nodeWarning } from '../../kubeUtils';
@@ -83,6 +83,7 @@ export const AddNodePoolDrawer = (props: Props) => {
     isPending,
     mutateAsync: createPool,
   } = useCreateNodePoolMutation(clusterId);
+  const drawerRef = React.useRef<HTMLDivElement>(null);
 
   // Only want to use current types here.
   const extendedTypes = filterCurrentTypes(types?.map(extendType));
@@ -90,6 +91,7 @@ export const AddNodePoolDrawer = (props: Props) => {
   const [selectedTypeInfo, setSelectedTypeInfo] = React.useState<
     { count: number; planId: string } | undefined
   >(undefined);
+  const [addNodePoolError, setAddNodePoolError] = React.useState<string>('');
 
   const getTypeCount = React.useCallback(
     (planId: string) =>
@@ -114,12 +116,14 @@ export const AddNodePoolDrawer = (props: Props) => {
   React.useEffect(() => {
     if (open) {
       resetDrawer();
+      setAddNodePoolError('');
     }
   }, [open]);
 
   React.useEffect(() => {
     if (error) {
-      scrollErrorIntoView();
+      setAddNodePoolError(error?.[0].reason);
+      scrollErrorIntoViewV2(drawerRef);
     }
   }, [error]);
 
@@ -159,14 +163,15 @@ export const AddNodePoolDrawer = (props: Props) => {
       }}
       onClose={onClose}
       open={open}
+      ref={drawerRef}
       title={`Add a Node Pool: ${clusterLabel}`}
       wide
     >
-      {error && (
+      {addNodePoolError && (
         <Notice spacingBottom={0} spacingTop={12} variant="error">
           <ErrorMessage
-            entity={{ type: 'lkecluster_id' }}
-            message={error?.[0].reason}
+            entity={{ id: clusterId, type: 'lkecluster_id' }}
+            message={addNodePoolError}
           />
         </Notice>
       )}
diff --git a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/ResizeNodePoolDrawer.tsx b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/ResizeNodePoolDrawer.tsx
index 3bfa0f3ef1f..dc4b0aee90f 100644
--- a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/ResizeNodePoolDrawer.tsx
+++ b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/ResizeNodePoolDrawer.tsx
@@ -5,6 +5,7 @@ import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel';
 import { CircleProgress } from 'src/components/CircleProgress';
 import { Drawer } from 'src/components/Drawer';
 import { EnhancedNumberInput } from 'src/components/EnhancedNumberInput/EnhancedNumberInput';
+import { ErrorMessage } from 'src/components/ErrorMessage';
 import { Notice } from 'src/components/Notice/Notice';
 import { Typography } from 'src/components/Typography';
 import { useUpdateNodePoolMutation } from 'src/queries/kubernetes';
@@ -68,6 +69,9 @@ export const ResizeNodePoolDrawer = (props: Props) => {
     isPending,
     mutateAsync: updateNodePool,
   } = useUpdateNodePoolMutation(kubernetesClusterId, nodePool?.id ?? -1);
+  const [resizeNodePoolError, setResizeNodePoolError] = React.useState<string>(
+    ''
+  );
 
   const [updatedCount, setUpdatedCount] = React.useState<number>(
     nodePool?.count ?? 0
@@ -79,6 +83,7 @@ export const ResizeNodePoolDrawer = (props: Props) => {
     }
     if (open) {
       setUpdatedCount(nodePool.count);
+      setResizeNodePoolError('');
     }
   }, [nodePool, open]);
 
@@ -86,6 +91,12 @@ export const ResizeNodePoolDrawer = (props: Props) => {
     setUpdatedCount(Math.min(100, Math.floor(value)));
   };
 
+  React.useEffect(() => {
+    if (error) {
+      setResizeNodePoolError(error?.[0].reason);
+    }
+  }, [error]);
+
   if (!nodePool) {
     // This should never happen, but it keeps TypeScript happy and avoids crashing if we
     // are unable to load the specified pool.
@@ -140,7 +151,14 @@ export const ResizeNodePoolDrawer = (props: Props) => {
             </Typography>
           </div>
 
-          {error && <Notice text={error?.[0].reason} variant="error" />}
+          {resizeNodePoolError && (
+            <Notice variant="error">
+              <ErrorMessage
+                entity={{ id: kubernetesClusterId, type: 'lkecluster_id' }}
+                message={resizeNodePoolError}
+              />
+            </Notice>
+          )}
 
           <div className={classes.section}>
             <Typography className={classes.helperText}>
diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeRebuild/LinodeRebuildDialog.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeRebuild/LinodeRebuildDialog.tsx
index cf08f39b2c2..a097c780f3c 100644
--- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeRebuild/LinodeRebuildDialog.tsx
+++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeRebuild/LinodeRebuildDialog.tsx
@@ -3,12 +3,14 @@ import * as React from 'react';
 
 import { Dialog } from 'src/components/Dialog/Dialog';
 import EnhancedSelect from 'src/components/EnhancedSelect/Select';
+import { ErrorMessage } from 'src/components/ErrorMessage';
 import { Notice } from 'src/components/Notice/Notice';
 import { getIsDistributedRegion } from 'src/components/RegionSelect/RegionSelect.utils';
 import { Typography } from 'src/components/Typography';
 import { useLinodeQuery } from 'src/queries/linodes/linodes';
 import { useGrants, useProfile } from 'src/queries/profile/profile';
 import { useRegionsQuery } from 'src/queries/regions/regions';
+import { scrollErrorIntoViewV2 } from 'src/utilities/scrollErrorIntoViewV2';
 
 import { HostMaintenanceError } from '../HostMaintenanceError';
 import { LinodePermissionsError } from '../LinodePermissionsError';
@@ -39,6 +41,7 @@ const passwordHelperText = 'Set a password for your rebuilt Linode.';
 
 export const LinodeRebuildDialog = (props: Props) => {
   const { linodeId, linodeLabel, onClose, open } = props;
+  const modalRef = React.useRef<HTMLDivElement>(null);
 
   const { data: profile } = useProfile();
   const { data: grants } = useGrants();
@@ -83,6 +86,7 @@ export const LinodeRebuildDialog = (props: Props) => {
 
   const handleRebuildError = (status: string) => {
     setRebuildError(status);
+    scrollErrorIntoViewV2(modalRef);
   };
 
   const toggleDiskEncryptionEnabled = () => {
@@ -97,12 +101,23 @@ export const LinodeRebuildDialog = (props: Props) => {
       maxWidth="md"
       onClose={onClose}
       open={open}
+      ref={modalRef}
       title={`Rebuild Linode ${linodeLabel ?? ''}`}
     >
       <StyledDiv>
         {unauthorized && <LinodePermissionsError />}
         {hostMaintenance && <HostMaintenanceError />}
-        {rebuildError && <Notice variant="error">{rebuildError}</Notice>}
+        {rebuildError && (
+          <Notice variant="error">
+            <ErrorMessage
+              entity={{
+                id: linodeId,
+                type: 'linode_id',
+              }}
+              message={rebuildError}
+            />
+          </Notice>
+        )}
         <Typography
           data-qa-rebuild-desc
           sx={{ paddingBottom: theme.spacing(2) }}
diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeResize/LinodeResize.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeResize/LinodeResize.tsx
index a88ad4753bf..8f4b19bcbf0 100644
--- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeResize/LinodeResize.tsx
+++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeResize/LinodeResize.tsx
@@ -9,6 +9,7 @@ import { Checkbox } from 'src/components/Checkbox';
 import { CircleProgress } from 'src/components/CircleProgress/CircleProgress';
 import { Dialog } from 'src/components/Dialog/Dialog';
 import { Divider } from 'src/components/Divider';
+import { ErrorMessage } from 'src/components/ErrorMessage';
 import { Link } from 'src/components/Link';
 import { Notice } from 'src/components/Notice/Notice';
 import { TooltipIcon } from 'src/components/TooltipIcon';
@@ -32,7 +33,6 @@ import { scrollErrorIntoViewV2 } from 'src/utilities/scrollErrorIntoViewV2';
 import { HostMaintenanceError } from '../HostMaintenanceError';
 import { LinodePermissionsError } from '../LinodePermissionsError';
 import {
-  getError,
   isSmallerThanCurrentPlan,
   shouldEnableAutoResizeDiskOption,
 } from './LinodeResize.utils';
@@ -73,11 +73,11 @@ export const LinodeResize = (props: Props) => {
   const { data: preferences } = usePreferences(open);
   const { enqueueSnackbar } = useSnackbar();
   const [confirmationText, setConfirmationText] = React.useState('');
-  const [hasResizeError, setHasResizeError] = React.useState<boolean>(false);
+  const [resizeError, setResizeError] = React.useState<string>('');
   const formRef = React.useRef<HTMLFormElement>(null);
 
   const {
-    error: resizeError,
+    error,
     isPending,
     mutateAsync: resizeLinode,
   } = useLinodeResizeMutation(linodeId ?? -1);
@@ -147,15 +147,15 @@ export const LinodeResize = (props: Props) => {
     if (!open) {
       formik.resetForm();
       setConfirmationText('');
-      setHasResizeError(false);
+      setResizeError('');
     }
   }, [open]);
 
   React.useEffect(() => {
-    if (resizeError) {
-      setHasResizeError(true);
+    if (error) {
+      setResizeError(error?.[0]?.reason);
     }
-  }, [resizeError]);
+  }, [error]);
 
   const tableDisabled = hostMaintenance || isLinodesGrantReadOnly;
 
@@ -179,8 +179,6 @@ export const LinodeResize = (props: Props) => {
   const currentTypes =
     types?.filter((thisType) => !Boolean(thisType.successor)) ?? [];
 
-  const error = getError(resizeError);
-
   return (
     <Dialog
       fullHeight
@@ -202,7 +200,17 @@ export const LinodeResize = (props: Props) => {
               variant="error"
             />
           )}
-          {hasResizeError && <Notice variant="error">{error}</Notice>}
+          {resizeError && (
+            <Notice variant="error">
+              <ErrorMessage
+                entity={{
+                  id: linodeId,
+                  type: 'linode_id',
+                }}
+                message={resizeError}
+              />
+            </Notice>
+          )}
           <Typography data-qa-description>
             If you&rsquo;re expecting a temporary burst of traffic to your
             website, or if you&rsquo;re not using your Linode as much as you
diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeResize/LinodeResize.utils.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeResize/LinodeResize.utils.tsx
index 748b879d92b..d5d63c04095 100644
--- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeResize/LinodeResize.utils.tsx
+++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeResize/LinodeResize.utils.tsx
@@ -1,35 +1,4 @@
-import * as React from 'react';
-
-import { Link } from 'src/components/Link';
-import { Typography } from 'src/components/Typography';
-
-import type { APIError, Disk, LinodeType } from '@linode/api-v4';
-
-export const getError = (error: APIError[] | null) => {
-  if (!error) {
-    return null;
-  }
-
-  const errorText = error?.[0]?.reason;
-  if (
-    typeof errorText === 'string' &&
-    errorText.match(/allocated more disk/i)
-  ) {
-    return (
-      <Typography>
-        The current disk size of your Linode is too large for the new service
-        plan. Please resize your disk to accommodate the new plan. You can read
-        our{' '}
-        <Link to="https://www.linode.com/docs/platform/disk-images/resizing-a-linode/">
-          Resize Your Linode
-        </Link>{' '}
-        guide for more detailed instructions.
-      </Typography>
-    );
-  }
-
-  return errorText;
-};
+import type { Disk, LinodeType } from '@linode/api-v4';
 
 /**
  * the user should only be given the option to automatically resize
diff --git a/packages/manager/src/mocks/presets/extra/limits/linode-limits.ts b/packages/manager/src/mocks/presets/extra/limits/linode-limits.ts
new file mode 100644
index 00000000000..17b935f0ac3
--- /dev/null
+++ b/packages/manager/src/mocks/presets/extra/limits/linode-limits.ts
@@ -0,0 +1,44 @@
+import { http } from 'msw';
+
+import { makeErrorResponse } from 'src/mocks/utilities/response';
+
+import type { MockPresetExtra } from 'src/mocks/types';
+
+const errorResponse =
+  'You’ve reached the limit for the number of active vCPUs in this Linode plan. Please contact Support to request an increase and specify the total number of resources you may need.';
+
+const mockLinodeLimits = () => {
+  return [
+    http.post('*/v4/linode/instances', () => {
+      return makeErrorResponse(errorResponse);
+    }),
+
+    http.post('*/v4/linode/instances/:id/resize', () => {
+      return makeErrorResponse(errorResponse);
+    }),
+
+    http.post('*/v4/linode/instances/:id/rebuild', () => {
+      return makeErrorResponse(errorResponse);
+    }),
+
+    http.post('*/v4/linode/instances/:id/migrate', () => {
+      return makeErrorResponse(errorResponse);
+    }),
+
+    http.post('*/v4/linode/instances/:id/clone', () => {
+      return makeErrorResponse(errorResponse);
+    }),
+
+    http.post('*/v4/linode/instances/:id/mutate', () => {
+      return makeErrorResponse(errorResponse);
+    }),
+  ];
+};
+
+export const linodeLimitsPreset: MockPresetExtra = {
+  desc: 'Mock an API error for Linode quota limit',
+  group: { id: 'Limits', type: 'select' },
+  handlers: [mockLinodeLimits],
+  id: 'limits:linode-limits',
+  label: 'Linode Limits',
+};
diff --git a/packages/manager/src/mocks/presets/extra/limits/lke-limits.ts b/packages/manager/src/mocks/presets/extra/limits/lke-limits.ts
new file mode 100644
index 00000000000..00826a4cd29
--- /dev/null
+++ b/packages/manager/src/mocks/presets/extra/limits/lke-limits.ts
@@ -0,0 +1,32 @@
+import { http } from 'msw';
+
+import { makeErrorResponse } from 'src/mocks/utilities/response';
+
+import type { MockPresetExtra } from 'src/mocks/types';
+
+const errorResponse =
+  'You’ve reached the limit for the number of active vCPUs in this Linode plan. Please contact Support to request an increase and specify the total number of resources you may need.';
+
+const mockLKELimits = () => {
+  return [
+    http.post('*/v4/lke/clusters', () => {
+      return makeErrorResponse(errorResponse);
+    }),
+
+    http.post('*/v4/lke/clusters/:id/pools', () => {
+      return makeErrorResponse(errorResponse);
+    }),
+
+    http.put('*/v4/lke/clusters/:id/pools/:poolId', () => {
+      return makeErrorResponse(errorResponse);
+    }),
+  ];
+};
+
+export const lkeLimitsPreset: MockPresetExtra = {
+  desc: 'Mock an API error for LKE quota limit',
+  group: { id: 'Limits', type: 'select' },
+  handlers: [mockLKELimits],
+  id: 'limits:lke-limits',
+  label: 'LKE Limits',
+};
diff --git a/packages/manager/src/mocks/presets/index.ts b/packages/manager/src/mocks/presets/index.ts
index 213b42732ba..1d40d1fe095 100644
--- a/packages/manager/src/mocks/presets/index.ts
+++ b/packages/manager/src/mocks/presets/index.ts
@@ -10,6 +10,8 @@ import { managedDisabledPreset } from './extra/account/managedDisabled';
 import { managedEnabledPreset } from './extra/account/managedEnabled';
 import { parentAccountPreset } from './extra/account/parentAccount';
 import { apiResponseTimePreset } from './extra/api/api';
+import { linodeLimitsPreset } from './extra/limits/linode-limits';
+import { lkeLimitsPreset } from './extra/limits/lke-limits';
 import { coreAndDistributedRegionsPreset } from './extra/regions/coreAndDistributed';
 import { coreOnlyRegionsPreset } from './extra/regions/coreOnly';
 import { legacyRegionsPreset } from './extra/regions/legacyRegions';
@@ -39,6 +41,8 @@ export const extraMockPresets: MockPresetExtra[] = [
   apiResponseTimePreset,
   parentAccountPreset,
   childAccountPreset,
+  linodeLimitsPreset,
+  lkeLimitsPreset,
   managedEnabledPreset,
   managedDisabledPreset,
   coreAndDistributedRegionsPreset,
diff --git a/packages/manager/src/mocks/types.ts b/packages/manager/src/mocks/types.ts
index 8d77e2a98e4..ed2621243df 100644
--- a/packages/manager/src/mocks/types.ts
+++ b/packages/manager/src/mocks/types.ts
@@ -45,7 +45,7 @@ export interface MockPresetBaseline extends MockPresetBase {
  * Mock Preset Extra
  */
 export type MockPresetExtraGroup = {
-  id: 'API' | 'Account' | 'Managed' | 'Regions';
+  id: 'API' | 'Account' | 'Limits' | 'Managed' | 'Regions';
   type: 'checkbox' | 'select';
 };
 export type MockPresetExtraId =
@@ -54,9 +54,12 @@ export type MockPresetExtraId =
   | 'account:managed-enabled'
   | 'account:parent'
   | 'api:response-time'
+  | 'limits:linode-limits'
+  | 'limits:lke-limits'
   | 'regions:core-and-distributed'
   | 'regions:core-only'
   | 'regions:legacy';
+
 export interface MockPresetExtra extends MockPresetBase {
   canUpdateCount?: boolean;
   group: MockPresetExtraGroup;

From f36485dbcbba085a4a4859053d3ab5665227e789 Mon Sep 17 00:00:00 2001
From: carrillo-erik <119514965+carrillo-erik@users.noreply.github.com>
Date: Mon, 23 Sep 2024 09:32:54 -0700
Subject: [PATCH 40/62] fix: [M3-7571] - Missing label for Full Account Access
 Toggle (#10931)

* fix: [M3-7571] - Missing label for Full Account Access Toggle

* Add changeset

* Update e2e tests

* Update headers based on PR feedback and lighthouse results
---
 .../pr-10931-fixed-1726172174760.md           |  5 ++
 .../e2e/core/account/user-permissions.spec.ts |  4 +-
 .../features/Users/UserPermissions.styles.ts  | 14 ++---
 .../src/features/Users/UserPermissions.tsx    | 53 +++++++++++--------
 4 files changed, 45 insertions(+), 31 deletions(-)
 create mode 100644 packages/manager/.changeset/pr-10931-fixed-1726172174760.md

diff --git a/packages/manager/.changeset/pr-10931-fixed-1726172174760.md b/packages/manager/.changeset/pr-10931-fixed-1726172174760.md
new file mode 100644
index 00000000000..8cdf45b748a
--- /dev/null
+++ b/packages/manager/.changeset/pr-10931-fixed-1726172174760.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Fixed
+---
+
+Missing label for Full Account Toggle ([#10931](https://github.com/linode/manager/pull/10931))
diff --git a/packages/manager/cypress/e2e/core/account/user-permissions.spec.ts b/packages/manager/cypress/e2e/core/account/user-permissions.spec.ts
index 53be928aded..7d97c8251f5 100644
--- a/packages/manager/cypress/e2e/core/account/user-permissions.spec.ts
+++ b/packages/manager/cypress/e2e/core/account/user-permissions.spec.ts
@@ -216,7 +216,7 @@ describe('User permission management', () => {
     // Restrict account access, confirm page updates to reflect change.
     mockUpdateUser(mockUser.username, mockUserUpdated);
     mockGetUserGrants(mockUser.username, mockUserGrantsUpdated);
-    cy.findByLabelText('Toggle Full Account Access')
+    cy.get('[data-qa="toggle-full-account-access"]')
       .should('be.visible')
       .click();
 
@@ -250,7 +250,7 @@ describe('User permission management', () => {
     // Re-enable unrestricted account access, confirm page updates to reflect change.
     mockUpdateUser(mockUser.username, mockUser);
     mockGetUserGrantsUnrestrictedAccess(mockUser.username);
-    cy.findByLabelText('Toggle Full Account Access')
+    cy.get('[data-qa="toggle-full-account-access"]')
       .should('be.visible')
       .click();
 
diff --git a/packages/manager/src/features/Users/UserPermissions.styles.ts b/packages/manager/src/features/Users/UserPermissions.styles.ts
index a5bc3241b98..fc2a46a9b90 100644
--- a/packages/manager/src/features/Users/UserPermissions.styles.ts
+++ b/packages/manager/src/features/Users/UserPermissions.styles.ts
@@ -1,5 +1,5 @@
-import Grid from '@mui/material/Unstable_Grid2';
 import { styled } from '@mui/material/styles';
+import Grid from '@mui/material/Unstable_Grid2';
 
 import { CircleProgress } from 'src/components/CircleProgress';
 import Select from 'src/components/EnhancedSelect/Select';
@@ -41,16 +41,17 @@ export const StyledHeaderGrid = styled(Grid, {
   [theme.breakpoints.down('sm')]: {
     marginLeft: theme.spacing(2),
     marginTop: theme.spacing(1),
-    width: '100%',
   },
+  width: '100%',
 }));
 
-export const StyledSubHeaderGrid = styled(Grid, {
-  label: 'StyledSubHeaderGrid',
+export const StyledFullAccountAccessToggleGrid = styled(Grid, {
+  label: 'StyledFullAccountAccessToggleGrid',
 })(({ theme }) => ({
+  marginTop: theme.spacing(2),
+  padding: 0,
   [theme.breakpoints.down('sm')]: {
-    margin: theme.spacing(0.5),
-    padding: 0,
+    paddingLeft: theme.spacing(2),
   },
 }));
 
@@ -68,7 +69,6 @@ export const StyledPaper = styled(Paper, {
   label: 'StyledPaper',
 })(({ theme }) => ({
   paddingBottom: 0,
-  paddingTop: 0,
   [theme.breakpoints.down('sm')]: {
     padding: 0,
   },
diff --git a/packages/manager/src/features/Users/UserPermissions.tsx b/packages/manager/src/features/Users/UserPermissions.tsx
index e4433f6cdee..ec85b41df06 100644
--- a/packages/manager/src/features/Users/UserPermissions.tsx
+++ b/packages/manager/src/features/Users/UserPermissions.tsx
@@ -35,11 +35,11 @@ import { scrollErrorIntoViewV2 } from 'src/utilities/scrollErrorIntoViewV2';
 import {
   StyledCircleProgress,
   StyledDivWrapper,
+  StyledFullAccountAccessToggleGrid,
   StyledHeaderGrid,
   StyledPaper,
   StyledPermPaper,
   StyledSelect,
-  StyledSubHeaderGrid,
   StyledUnrestrictedGrid,
 } from './UserPermissions.styles';
 import { UserPermissionsEntitySection } from './UserPermissionsEntitySection';
@@ -424,27 +424,37 @@ class UserPermissions extends React.Component<CombinedProps, State> {
                 {isProxyUser ? PARENT_USER : 'General'} Permissions
               </Typography>
             </StyledHeaderGrid>
-            <StyledSubHeaderGrid>
-              <Toggle
-                tooltipText={
-                  currentUsername === accountUsername
-                    ? 'You cannot restrict the current active user.'
-                    : ''
+            <StyledFullAccountAccessToggleGrid>
+              <FormControlLabel
+                control={
+                  <Toggle
+                    inputProps={{
+                      'aria-label': 'Toggle Full Account Access',
+                    }}
+                    tooltipText={
+                      currentUsername === accountUsername
+                        ? 'You cannot restrict the current active user.'
+                        : ''
+                    }
+                    checked={!restricted}
+                    disabled={currentUsername === accountUsername}
+                    onChange={this.onChangeRestricted}
+                  />
                 }
-                aria-label="Toggle Full Account Access"
-                checked={!restricted}
-                disabled={currentUsername === accountUsername}
-                onChange={this.onChangeRestricted}
+                slotProps={{
+                  typography: {
+                    sx: (theme) => ({
+                      fontFamily: theme.font.bold,
+                      fontSize: '16px',
+                    }),
+                  },
+                }}
+                data-qa="toggle-full-account-access"
+                label="Full Account Access"
+                labelPlacement="end"
+                value={restricted}
               />
-            </StyledSubHeaderGrid>
-            <Grid sx={{ padding: 0 }}>
-              <Typography
-                sx={{ fontFamily: (theme) => theme.font.bold }}
-                variant="subtitle2"
-              >
-                Full Account Access
-              </Typography>
-            </Grid>
+            </StyledFullAccountAccessToggleGrid>
           </Grid>
         </StyledPaper>
         {restricted ? this.renderPermissions() : this.renderUnrestricted()}
@@ -505,7 +515,7 @@ class UserPermissions extends React.Component<CombinedProps, State> {
       <StyledPermPaper data-qa-global-section>
         <Typography
           data-qa-permissions-header="Global Permissions"
-          variant="subtitle2"
+          variant="body2"
         >
           Configure the specific rights and privileges this user has within the
           account.{<br />}Remember that permissions related to actions with the
@@ -585,7 +595,6 @@ class UserPermissions extends React.Component<CombinedProps, State> {
               Specific Permissions
             </Typography>
           </Grid>
-
           <Grid style={{ marginTop: 5 }}>
             <StyledSelect
               defaultValue={defaultPerm}

From c721a17ee6ec60ad53b9546dbda5f1bf2c50f370 Mon Sep 17 00:00:00 2001
From: jdamore-linode <97627410+jdamore-linode@users.noreply.github.com>
Date: Mon, 23 Sep 2024 12:51:09 -0400
Subject: [PATCH 41/62] test: [M3-8619] - Fix Cypress test flake in
 `create-linode-from-image.spec.ts` (#10983)

* Fix region selection test failures when selecting a region with a name similar to another region

* Added changeset: Improve region selection RegEx to resolve test failures when selecting certain regions
---
 .../pr-10983-tests-1726865807776.md           |  5 ++++
 .../cypress/support/ui/autocomplete.ts        | 25 ++++++++++++++-----
 2 files changed, 24 insertions(+), 6 deletions(-)
 create mode 100644 packages/manager/.changeset/pr-10983-tests-1726865807776.md

diff --git a/packages/manager/.changeset/pr-10983-tests-1726865807776.md b/packages/manager/.changeset/pr-10983-tests-1726865807776.md
new file mode 100644
index 00000000000..e59266f0643
--- /dev/null
+++ b/packages/manager/.changeset/pr-10983-tests-1726865807776.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Tests
+---
+
+Improve region selection RegEx to resolve test failures when selecting certain regions ([#10983](https://github.com/linode/manager/pull/10983))
diff --git a/packages/manager/cypress/support/ui/autocomplete.ts b/packages/manager/cypress/support/ui/autocomplete.ts
index 2be652878ce..8ea49156b40 100644
--- a/packages/manager/cypress/support/ui/autocomplete.ts
+++ b/packages/manager/cypress/support/ui/autocomplete.ts
@@ -3,6 +3,23 @@ import { getRegionById, getRegionByLabel } from 'support/util/regions';
 import type { SelectorMatcherOptions } from '@testing-library/cypress';
 import type { Region } from '@linode/api-v4';
 
+/**
+ * Returns a regular expression object to match against region select items.
+ *
+ * This expression accounts for these cases:
+ * - Gecko LA is disabled (region ID is present in line with label)
+ * - Gecko LA is enabled (region ID is not in line with label, rendered in separate element)
+ * - Avoids selecting similarly named regions (e.g. "UK, London" and "UK, London 2")
+ *
+ * @param region - Region for which to return RegEx.
+ *
+ * @returns Regular expression object to match menu item of given Region.
+ */
+// TODO Remove this and use exact string matching once Gecko feature flag is retired.
+const getRegionItemRegEx = (region: Region) => {
+  return new RegExp(`${region.label}(\\s?\\(${region.id}\\)|$)`);
+};
+
 /**
  * Autocomplete UI element.
  */
@@ -90,9 +107,7 @@ export const regionSelect = {
    */
   findItemByRegionId: (regionId: string, searchRegions?: Region[]) => {
     const region = getRegionById(regionId, searchRegions);
-    return autocompletePopper.findByTitle(
-      new RegExp(`${region.label}\\s?(\(${region.id}\))?`)
-    );
+    return autocompletePopper.findByTitle(getRegionItemRegEx(region));
   },
 
   /**
@@ -107,8 +122,6 @@ export const regionSelect = {
    */
   findItemByRegionLabel: (regionLabel: string, searchRegions?: Region[]) => {
     const region = getRegionByLabel(regionLabel, searchRegions);
-    return autocompletePopper.findByTitle(
-      new RegExp(`${region.label}\\s?(\(${region.id}\))?`)
-    );
+    return autocompletePopper.findByTitle(getRegionItemRegEx(region));
   },
 };

From a2b642ca15288f948a3de7b5996bf0096201efc9 Mon Sep 17 00:00:00 2001
From: jdamore-linode <97627410+jdamore-linode@users.noreply.github.com>
Date: Mon, 23 Sep 2024 14:32:42 -0400
Subject: [PATCH 42/62] test: [M3-8601] - Fix NodeBalancer
 `nodebalancers-create-in-complex-form.spec.ts` Cypress test flake (#10981)

* Fix NodeBalancer flake by wrapping async code in `cy.defer`

* Added changeset: Fix test flake in `nodebalancers-create-in-complex-form.spec.ts`
---
 .../pr-10981-tests-1726863454562.md           |   5 +
 ...debalancers-create-in-complex-form.spec.ts | 398 ++++++++++--------
 2 files changed, 218 insertions(+), 185 deletions(-)
 create mode 100644 packages/manager/.changeset/pr-10981-tests-1726863454562.md

diff --git a/packages/manager/.changeset/pr-10981-tests-1726863454562.md b/packages/manager/.changeset/pr-10981-tests-1726863454562.md
new file mode 100644
index 00000000000..b6f0b96f9fc
--- /dev/null
+++ b/packages/manager/.changeset/pr-10981-tests-1726863454562.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Tests
+---
+
+Fix test flake in `nodebalancers-create-in-complex-form.spec.ts` ([#10981](https://github.com/linode/manager/pull/10981))
diff --git a/packages/manager/cypress/e2e/core/nodebalancers/nodebalancers-create-in-complex-form.spec.ts b/packages/manager/cypress/e2e/core/nodebalancers/nodebalancers-create-in-complex-form.spec.ts
index 81b60e72f1a..9dbf139e680 100644
--- a/packages/manager/cypress/e2e/core/nodebalancers/nodebalancers-create-in-complex-form.spec.ts
+++ b/packages/manager/cypress/e2e/core/nodebalancers/nodebalancers-create-in-complex-form.spec.ts
@@ -1,7 +1,7 @@
 import { entityTag } from 'support/constants/cypress';
 import { createTestLinode } from 'support/util/linodes';
 import { randomLabel } from 'support/util/random';
-import { chooseRegion, getRegionById } from 'support/util/regions';
+import { chooseRegion } from 'support/util/regions';
 import { ui } from 'support/ui';
 import { cleanUp } from 'support/util/cleanup';
 import { authenticate } from 'support/api/authentication';
@@ -19,173 +19,197 @@ describe('create NodeBalancer to test the submission of multiple nodes and multi
    * - Confirms NodeBalancer create flow when adding multiple Backend Nodes.
    * - Confirms Summary field displays correct Node number.
    */
-  it('creates a NodeBalancer with multiple Backend Nodes', async () => {
+  it('creates a NodeBalancer with multiple Backend Nodes', () => {
     const region = chooseRegion();
     const linodePayload = {
       region: region.id,
       // NodeBalancers require Linodes with private IPs.
       private_ip: true,
     };
-    const linode: Linode = await createTestLinode(linodePayload);
-    const nodeBal = nodeBalancerFactory.build({
-      label: randomLabel(),
-      region: region.id,
-      ipv4: linode.ipv4[1],
-    });
 
     const linodePayload_2 = {
       region: region.id,
       private_ip: true,
     };
-    const linode_2: Linode = await createTestLinode(linodePayload_2);
-    const nodeBal_2 = nodeBalancerFactory.build({
-      label: randomLabel(),
-      region: region.id,
-      ipv4: linode_2.ipv4[1],
-    });
-    const regionName = getRegionById(nodeBal.region).label;
-
-    // catch request
-    interceptCreateNodeBalancer().as('createNodeBalancer');
-    cy.visitWithLogin('/nodebalancers/create');
-    cy.get('[id="nodebalancer-label"]')
-      .should('be.visible')
-      .click()
-      .clear()
-      .type(nodeBal.label);
-    cy.findByPlaceholderText(/create a tag/i)
-      .click()
-      .type(entityTag);
-
-    // this will create the NB in newark, where the default Linode was created
-    ui.regionSelect.find().click().clear().type(`${regionName}{enter}`);
-
-    // node backend config
-    cy.findByText('Label').click().type(randomLabel());
-    cy.findByLabelText('IP Address')
-      .should('be.visible')
-      .click()
-      .type(nodeBal.ipv4);
-    ui.autocompletePopper
-      .findByTitle(nodeBal.ipv4)
-      .should('be.visible')
-      .click();
-    cy.findByLabelText('Weight')
-      .should('be.visible')
-      .click()
-      .clear()
-      .type('50');
-
-    // Add a backend node
-    cy.get('[data-testid="Button"]').contains('Add a Node').click();
-    cy.findAllByText('Label').last().click().type(randomLabel());
-    cy.findAllByText('IP Address')
-      .last()
-      .should('be.visible')
-      .click()
-      .type(nodeBal_2.ipv4);
-    ui.autocompletePopper
-      .findByTitle(nodeBal_2.ipv4)
-      .should('be.visible')
-      .click();
-    cy.get('[data-testid="textfield-input"]')
-      .last()
-      .should('be.visible')
-      .click()
-      .clear()
-      .type('50');
-
-    // Confirm Summary info
-    cy.get('[data-qa-summary="true"]').within(() => {
-      cy.contains(`Nodes 2`).should('be.visible');
-    });
 
-    cy.get('[data-qa-deploy-nodebalancer]').click();
-    cy.wait('@createNodeBalancer').its('response.statusCode').should('eq', 200);
+    const createTestLinodes = async () => {
+      return Promise.all([
+        createTestLinode(linodePayload),
+        createTestLinode(linodePayload_2),
+      ]);
+    };
+
+    cy.defer(createTestLinodes, 'Creating 2 test Linodes').then(
+      ([linode, linode2]: [Linode, Linode]) => {
+        const nodeBal = nodeBalancerFactory.build({
+          label: randomLabel(),
+          region: region.id,
+          ipv4: linode.ipv4[1],
+        });
+
+        const nodeBal_2 = nodeBalancerFactory.build({
+          label: randomLabel(),
+          region: region.id,
+          ipv4: linode2.ipv4[1],
+        });
+
+        interceptCreateNodeBalancer().as('createNodeBalancer');
+        cy.visitWithLogin('/nodebalancers/create');
+        cy.get('[id="nodebalancer-label"]')
+          .should('be.visible')
+          .click()
+          .clear()
+          .type(nodeBal.label);
+        cy.findByPlaceholderText(/create a tag/i)
+          .click()
+          .type(entityTag);
+
+        // this will create the NB in newark, where the default Linode was created
+        ui.regionSelect.find().click().clear().type(`${region.label}{enter}`);
+
+        // node backend config
+        cy.findByText('Label').click().type(randomLabel());
+        cy.findByLabelText('IP Address')
+          .should('be.visible')
+          .click()
+          .type(nodeBal.ipv4);
+        ui.autocompletePopper
+          .findByTitle(nodeBal.ipv4)
+          .should('be.visible')
+          .click();
+        cy.findByLabelText('Weight')
+          .should('be.visible')
+          .click()
+          .clear()
+          .type('50');
+
+        // Add a backend node
+        cy.get('[data-testid="Button"]').contains('Add a Node').click();
+        cy.findAllByText('Label').last().click().type(randomLabel());
+        cy.findAllByText('IP Address')
+          .last()
+          .should('be.visible')
+          .click()
+          .type(nodeBal_2.ipv4);
+        ui.autocompletePopper
+          .findByTitle(nodeBal_2.ipv4)
+          .should('be.visible')
+          .click();
+        cy.get('[data-testid="textfield-input"]')
+          .last()
+          .should('be.visible')
+          .click()
+          .clear()
+          .type('50');
+
+        // Confirm Summary info
+        cy.get('[data-qa-summary="true"]').within(() => {
+          cy.contains(`Nodes 2`).should('be.visible');
+        });
+
+        cy.get('[data-qa-deploy-nodebalancer]').click();
+        cy.wait('@createNodeBalancer')
+          .its('response.statusCode')
+          .should('eq', 200);
+      }
+    );
   });
 
   /*
    * - Confirms NodeBalancer create flow when adding additional config.
    * - Confirms Summary field displays correct Config number.
    */
-  it('creates a NodeBalancer with an additional config', async () => {
+  it('creates a NodeBalancer with an additional config', () => {
     const region = chooseRegion();
     const linodePayload = {
       region: region.id,
       // NodeBalancers require Linodes with private IPs.
       private_ip: true,
     };
-    const linode: Linode = await createTestLinode(linodePayload);
-    const nodeBal = nodeBalancerFactory.build({
-      label: randomLabel(),
-      region: region.id,
-      ipv4: linode.ipv4[1],
-    });
 
     const linodePayload_2 = {
       region: region.id,
       private_ip: true,
     };
-    const linode_2: Linode = await createTestLinode(linodePayload_2);
-    const nodeBal_2 = nodeBalancerFactory.build({
-      label: randomLabel(),
-      region: region.id,
-      ipv4: linode_2.ipv4[1],
-    });
-    const regionName = getRegionById(nodeBal.region).label;
-
-    // catch request
-    interceptCreateNodeBalancer().as('createNodeBalancer');
-
-    cy.visitWithLogin('/nodebalancers/create');
-    cy.get('[id="nodebalancer-label"]')
-      .should('be.visible')
-      .click()
-      .clear()
-      .type(nodeBal.label);
-    cy.findByPlaceholderText(/create a tag/i)
-      .click()
-      .type(entityTag);
-
-    // This will create the NB in newark, where the default Linode was created
-    ui.regionSelect.find().click().clear().type(`${regionName}{enter}`);
-
-    // Node backend config
-    cy.findByText('Label').click().type(randomLabel());
-    cy.findByLabelText('IP Address')
-      .should('be.visible')
-      .click()
-      .type(nodeBal.ipv4);
-    ui.autocompletePopper
-      .findByTitle(nodeBal.ipv4)
-      .should('be.visible')
-      .click();
-
-    // Add another configuration
-    cy.get('[data-testid="Button"]')
-      .contains('Add another Configuration')
-      .click();
-    cy.get('[data-qa-panel="Configuration - Port "]').within(() => {
-      cy.get('[data-testid="textfield-input"]').first().click().type('8080');
-    });
-    cy.findAllByText('Label').last().click().type(randomLabel());
-    cy.findAllByText('IP Address')
-      .last()
-      .should('be.visible')
-      .click()
-      .type(nodeBal_2.ipv4);
-    ui.autocompletePopper
-      .findByTitle(nodeBal_2.ipv4)
-      .should('be.visible')
-      .click();
-
-    // Confirm Summary info
-    cy.get('[data-qa-summary="true"]').within(() => {
-      cy.contains('Configs 2').should('be.visible');
-    });
 
-    cy.get('[data-qa-deploy-nodebalancer]').click();
-    cy.wait('@createNodeBalancer').its('response.statusCode').should('eq', 200);
+    const createTestLinodes = async () => {
+      return Promise.all([
+        createTestLinode(linodePayload),
+        createTestLinode(linodePayload_2),
+      ]);
+    };
+
+    cy.defer(createTestLinodes, 'Creating 2 test Linodes').then(
+      ([linode, linode2]: [Linode, Linode]) => {
+        const nodeBal = nodeBalancerFactory.build({
+          label: randomLabel(),
+          region: region.id,
+          ipv4: linode.ipv4[1],
+        });
+
+        const nodeBal_2 = nodeBalancerFactory.build({
+          label: randomLabel(),
+          region: region.id,
+          ipv4: linode2.ipv4[1],
+        });
+
+        interceptCreateNodeBalancer().as('createNodeBalancer');
+        cy.visitWithLogin('/nodebalancers/create');
+        cy.get('[id="nodebalancer-label"]')
+          .should('be.visible')
+          .click()
+          .clear()
+          .type(nodeBal.label);
+        cy.findByPlaceholderText(/create a tag/i)
+          .click()
+          .type(entityTag);
+
+        // This will create the NB in newark, where the default Linode was created
+        ui.regionSelect.find().click().clear().type(`${region.label}{enter}`);
+
+        // Node backend config
+        cy.findByText('Label').click().type(randomLabel());
+        cy.findByLabelText('IP Address')
+          .should('be.visible')
+          .click()
+          .type(nodeBal.ipv4);
+        ui.autocompletePopper
+          .findByTitle(nodeBal.ipv4)
+          .should('be.visible')
+          .click();
+
+        // Add another configuration
+        cy.get('[data-testid="Button"]')
+          .contains('Add another Configuration')
+          .click();
+        cy.get('[data-qa-panel="Configuration - Port "]').within(() => {
+          cy.get('[data-testid="textfield-input"]')
+            .first()
+            .click()
+            .type('8080');
+        });
+        cy.findAllByText('Label').last().click().type(randomLabel());
+        cy.findAllByText('IP Address')
+          .last()
+          .should('be.visible')
+          .click()
+          .type(nodeBal_2.ipv4);
+        ui.autocompletePopper
+          .findByTitle(nodeBal_2.ipv4)
+          .should('be.visible')
+          .click();
+
+        // Confirm Summary info
+        cy.get('[data-qa-summary="true"]').within(() => {
+          cy.contains('Configs 2').should('be.visible');
+        });
+
+        cy.get('[data-qa-deploy-nodebalancer]').click();
+        cy.wait('@createNodeBalancer')
+          .its('response.statusCode')
+          .should('eq', 200);
+      }
+    );
   });
 
   /*
@@ -193,59 +217,63 @@ describe('create NodeBalancer to test the submission of multiple nodes and multi
    * - Confirms Label field displays error if label is empty in additional config.
    * - Confirms IP field displays error if ip is empty in additional config.
    */
-  it('displays errors during adding new config', async () => {
+  it('displays errors during adding new config', () => {
     const region = chooseRegion();
     const linodePayload = {
       region: region.id,
       // NodeBalancers require Linodes with private IPs.
       private_ip: true,
     };
-    const linode: Linode = await createTestLinode(linodePayload);
-    const nodeBal = nodeBalancerFactory.build({
-      label: randomLabel(),
-      region: region.id,
-      ipv4: linode.ipv4[1],
-    });
-    const regionName = getRegionById(nodeBal.region).label;
-
-    cy.visitWithLogin('/nodebalancers/create');
-    cy.get('[id="nodebalancer-label"]')
-      .should('be.visible')
-      .click()
-      .clear()
-      .type(nodeBal.label);
-    cy.findByPlaceholderText(/create a tag/i)
-      .click()
-      .type(entityTag);
-
-    // This will create the NB in newark, where the default Linode was created
-    ui.regionSelect.find().click().clear().type(`${regionName}{enter}`);
-
-    // Node backend config
-    cy.findByText('Label').click().type(randomLabel());
-    cy.findByLabelText('IP Address')
-      .should('be.visible')
-      .click()
-      .type(nodeBal.ipv4);
-    ui.autocompletePopper
-      .findByTitle(nodeBal.ipv4)
-      .should('be.visible')
-      .click();
-
-    // Add another configuration
-    cy.get('[data-testid="Button"]')
-      .contains('Add another Configuration')
-      .click();
-    cy.get('[data-qa-panel="Configuration - Port "]').within(() => {
-      cy.get('[data-testid="textfield-input"]').first().click().type('80');
+
+    cy.defer(
+      () => createTestLinode(linodePayload),
+      'Creating test Linode'
+    ).then((linode: Linode) => {
+      const nodeBal = nodeBalancerFactory.build({
+        label: randomLabel(),
+        region: region.id,
+        ipv4: linode.ipv4[1],
+      });
+
+      cy.visitWithLogin('/nodebalancers/create');
+      cy.get('[id="nodebalancer-label"]')
+        .should('be.visible')
+        .click()
+        .clear()
+        .type(nodeBal.label);
+      cy.findByPlaceholderText(/create a tag/i)
+        .click()
+        .type(entityTag);
+
+      // This will create the NB in newark, where the default Linode was created
+      ui.regionSelect.find().click().clear().type(`${region.label}{enter}`);
+
+      // Node backend config
+      cy.findByText('Label').click().type(randomLabel());
+      cy.findByLabelText('IP Address')
+        .should('be.visible')
+        .click()
+        .type(nodeBal.ipv4);
+      ui.autocompletePopper
+        .findByTitle(nodeBal.ipv4)
+        .should('be.visible')
+        .click();
+
+      // Add another configuration
+      cy.get('[data-testid="Button"]')
+        .contains('Add another Configuration')
+        .click();
+      cy.get('[data-qa-panel="Configuration - Port "]').within(() => {
+        cy.get('[data-testid="textfield-input"]').first().click().type('80');
+      });
+      cy.get('[data-qa-deploy-nodebalancer]').click();
+
+      // Confirm error displays
+      cy.contains('Port must be unique').scrollIntoView().should('be.visible');
+      cy.contains('Label is required').scrollIntoView().should('be.visible');
+      cy.contains('Must be a valid private IPv4 address.')
+        .scrollIntoView()
+        .should('be.visible');
     });
-    cy.get('[data-qa-deploy-nodebalancer]').click();
-
-    // Confirm error displays
-    cy.contains('Port must be unique').scrollIntoView().should('be.visible');
-    cy.contains('Label is required').scrollIntoView().should('be.visible');
-    cy.contains('Must be a valid private IPv4 address.')
-      .scrollIntoView()
-      .should('be.visible');
   });
 });

From 08827409359d0f73b7911d4ce68e2b6f27d4810d Mon Sep 17 00:00:00 2001
From: Connie Liu <139280159+coliu-akamai@users.noreply.github.com>
Date: Tue, 24 Sep 2024 10:00:10 -0400
Subject: [PATCH 43/62] test: [M3-8556] - Add unit tests for NodeBalancer
 details package (#10916)

* summary panel tests

* tables panel tests

* nb settings tests

* nb firewall row

* nb firewall table tests

* NodeBalancersConfigurations.test.tsx

* nb confirmation dialog delete test

* Added changeset: Added unit tests for the NodeBalancerDetail package

* switch to userEvent instead of fireEvent @bnussman-akamai

* figured out mocking path/params, may need to rearrange stuff

* update some naming
---
 .../pr-10916-tests-1726065357292.md           |   5 +
 .../manager/src/factories/nodebalancer.ts     |   5 +-
 .../NodeBalancerConfigNode.test.tsx           |   6 +-
 .../NodeBalancerConfigPanel.test.tsx          |  18 +-
 .../NodeBalancerDeleteDialog.test.tsx         |   6 +-
 .../NodeBalancerConfigurations.test.tsx       | 188 ++++++++++++++++++
 .../NodeBalancerConfigurations.tsx            | 174 ++++++++--------
 .../NodeBalancerDetail/NodeBalancerDetail.tsx |   2 +-
 .../NodeBalancerFirewalls.test.tsx            | 111 +++++++++++
 .../NodeBalancerFirewalls.tsx                 |   3 +-
 .../NodeBalancerFirewallsActionMenu.tsx       |   3 +-
 .../NodeBalancerFirewallsRow.test.tsx         |  77 +++++++
 .../NodeBalancerFirewallsRow.tsx              |   3 +-
 .../NodeBalancerSettings.test.tsx             |  92 +++++++++
 .../NodeBalancerSettings.tsx                  |   3 +-
 .../NodeBalancerSummary.tsx                   |   2 +-
 .../NodeBalancerSummary/SummaryPanel.test.tsx |  92 +++++++++
 .../NodeBalancerSummary/TablesPanel.test.tsx  | 126 ++++++++++++
 .../NodeBalancerPassiveCheck.test.tsx         |   6 +-
 .../NodeBalancerActionMenu.test.tsx           |   6 +-
 .../NodeBalancerTableRow.test.tsx             |  10 +-
 .../manager/src/utilities/testHelpers.tsx     |  13 +-
 22 files changed, 826 insertions(+), 125 deletions(-)
 create mode 100644 packages/manager/.changeset/pr-10916-tests-1726065357292.md
 create mode 100644 packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerConfigurations.test.tsx
 create mode 100644 packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerFirewalls.test.tsx
 create mode 100644 packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerFirewallsRow.test.tsx
 create mode 100644 packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerSettings.test.tsx
 create mode 100644 packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerSummary/SummaryPanel.test.tsx
 create mode 100644 packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerSummary/TablesPanel.test.tsx

diff --git a/packages/manager/.changeset/pr-10916-tests-1726065357292.md b/packages/manager/.changeset/pr-10916-tests-1726065357292.md
new file mode 100644
index 00000000000..3d4bfa1d939
--- /dev/null
+++ b/packages/manager/.changeset/pr-10916-tests-1726065357292.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Tests
+---
+
+Added unit tests for the NodeBalancerDetail package ([#10916](https://github.com/linode/manager/pull/10916))
diff --git a/packages/manager/src/factories/nodebalancer.ts b/packages/manager/src/factories/nodebalancer.ts
index 711289d7abf..034151cde52 100644
--- a/packages/manager/src/factories/nodebalancer.ts
+++ b/packages/manager/src/factories/nodebalancer.ts
@@ -1,9 +1,10 @@
-import {
+import Factory from 'src/factories/factoryProxy';
+
+import type {
   NodeBalancer,
   NodeBalancerConfig,
   NodeBalancerConfigNode,
 } from '@linode/api-v4/lib/nodebalancers/types';
-import Factory from 'src/factories/factoryProxy';
 
 export const nodeBalancerFactory = Factory.Sync.makeFactory<NodeBalancer>({
   client_conn_throttle: 0,
diff --git a/packages/manager/src/features/NodeBalancers/NodeBalancerConfigNode.test.tsx b/packages/manager/src/features/NodeBalancers/NodeBalancerConfigNode.test.tsx
index 6bbd8e2248f..6ea897d87fa 100644
--- a/packages/manager/src/features/NodeBalancers/NodeBalancerConfigNode.test.tsx
+++ b/packages/manager/src/features/NodeBalancers/NodeBalancerConfigNode.test.tsx
@@ -1,4 +1,4 @@
-import { fireEvent } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import * as React from 'react';
 
 import { renderWithTheme } from 'src/utilities/testHelpers';
@@ -65,12 +65,12 @@ describe('NodeBalancerConfigNode', () => {
     expect(queryByText('Remove')).not.toBeInTheDocument();
   });
 
-  it('removes the node', () => {
+  it('removes the node', async () => {
     const { getByText } = renderWithTheme(
       <NodeBalancerConfigNode {...props} />
     );
 
-    fireEvent.click(getByText('Remove'));
+    await userEvent.click(getByText('Remove'));
     expect(props.removeNode).toHaveBeenCalled();
   });
 });
diff --git a/packages/manager/src/features/NodeBalancers/NodeBalancerConfigPanel.test.tsx b/packages/manager/src/features/NodeBalancers/NodeBalancerConfigPanel.test.tsx
index 13c7bdfcd36..fa06be32953 100644
--- a/packages/manager/src/features/NodeBalancers/NodeBalancerConfigPanel.test.tsx
+++ b/packages/manager/src/features/NodeBalancers/NodeBalancerConfigPanel.test.tsx
@@ -1,4 +1,4 @@
-import { fireEvent } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import * as React from 'react';
 
 import { renderWithTheme } from 'src/utilities/testHelpers';
@@ -264,13 +264,13 @@ describe('NodeBalancerConfigPanel', () => {
     ).not.toBeInTheDocument();
   });
 
-  it('adds another backend node', () => {
+  it('adds another backend node', async () => {
     const { getByText } = renderWithTheme(
       <NodeBalancerConfigPanel {...nbConfigPanelMockPropsForTest} />
     );
 
     const addNodeButton = getByText('Add a Node');
-    fireEvent.click(addNodeButton);
+    await userEvent.click(addNodeButton);
     expect(nbConfigPanelMockPropsForTest.addNode).toHaveBeenCalled();
   });
 
@@ -282,7 +282,7 @@ describe('NodeBalancerConfigPanel', () => {
     expect(queryByText('Remove')).not.toBeInTheDocument();
   });
 
-  it('removes a backend node', () => {
+  it('removes a backend node', async () => {
     const { getByText } = renderWithTheme(
       <NodeBalancerConfigPanel
         {...nbConfigPanelMockPropsForTest}
@@ -291,21 +291,21 @@ describe('NodeBalancerConfigPanel', () => {
     );
 
     const removeNodeButton = getByText('Remove');
-    fireEvent.click(removeNodeButton);
+    await userEvent.click(removeNodeButton);
     expect(nbConfigPanelMockPropsForTest.removeNode).toHaveBeenCalled();
   });
 
-  it('deletes the configuration panel', () => {
+  it('deletes the configuration panel', async () => {
     const { getByText } = renderWithTheme(
       <NodeBalancerConfigPanel {...nbConfigPanelMockPropsForTest} />
     );
 
     const deleteConfigButton = getByText('Delete');
-    fireEvent.click(deleteConfigButton);
+    await userEvent.click(deleteConfigButton);
     expect(nbConfigPanelMockPropsForTest.onDelete).toHaveBeenCalled();
   });
 
-  it('saves the input after editing the configuration', () => {
+  it('saves the input after editing the configuration', async () => {
     const { getByText } = renderWithTheme(
       <NodeBalancerConfigPanel
         {...nbConfigPanelMockPropsForTest}
@@ -314,7 +314,7 @@ describe('NodeBalancerConfigPanel', () => {
     );
 
     const editConfigButton = getByText('Save');
-    fireEvent.click(editConfigButton);
+    await userEvent.click(editConfigButton);
     expect(nbConfigPanelMockPropsForTest.onSave).toHaveBeenCalled();
   });
 });
diff --git a/packages/manager/src/features/NodeBalancers/NodeBalancerDeleteDialog.test.tsx b/packages/manager/src/features/NodeBalancers/NodeBalancerDeleteDialog.test.tsx
index 8d23ec37771..de194e3a23b 100644
--- a/packages/manager/src/features/NodeBalancers/NodeBalancerDeleteDialog.test.tsx
+++ b/packages/manager/src/features/NodeBalancers/NodeBalancerDeleteDialog.test.tsx
@@ -1,4 +1,4 @@
-import { fireEvent } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import * as React from 'react';
 
 import { renderWithTheme } from 'src/utilities/testHelpers';
@@ -32,12 +32,12 @@ describe('NodeBalancerDeleteDialog', () => {
     expect(getByText('Delete')).toBeVisible();
   });
 
-  it('calls the onClose function of the dialog', () => {
+  it('calls the onClose function of the dialog', async () => {
     const { getByText } = renderWithTheme(
       <NodeBalancerDeleteDialog {...props} />
     );
 
-    fireEvent.click(getByText('Cancel'));
+    await userEvent.click(getByText('Cancel'));
     expect(props.onClose).toHaveBeenCalled();
   });
 });
diff --git a/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerConfigurations.test.tsx b/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerConfigurations.test.tsx
new file mode 100644
index 00000000000..d82c1156bf9
--- /dev/null
+++ b/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerConfigurations.test.tsx
@@ -0,0 +1,188 @@
+import { waitForElementToBeRemoved } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import * as React from 'react';
+
+import {
+  nodeBalancerConfigFactory,
+  nodeBalancerConfigNodeFactory,
+} from 'src/factories';
+import { makeResourcePage } from 'src/mocks/serverHandlers';
+import { HttpResponse, http, server } from 'src/mocks/testServer';
+import { renderWithTheme } from 'src/utilities/testHelpers';
+
+import NodeBalancerConfigurations from './NodeBalancerConfigurations';
+
+const props = {
+  grants: undefined,
+  nodeBalancerLabel: 'nb-1',
+  nodeBalancerRegion: 'us-east',
+};
+
+const loadingTestId = 'circle-progress';
+const memoryRouter = { initialEntries: ['nodebalancers/1/configurations'] };
+const routePath = 'nodebalancers/:nodeBalancerId/configurations';
+
+const nodeBalancerConfig = nodeBalancerConfigFactory.build({
+  id: 1,
+  port: 3000,
+});
+
+describe('NodeBalancerConfigurations', () => {
+  beforeEach(() => {
+    server.resetHandlers();
+  });
+
+  it('renders the NodeBalancerConfigurations component with one configuration', async () => {
+    server.use(
+      http.get(`*/nodebalancers/:id/configs`, () => {
+        return HttpResponse.json(makeResourcePage([nodeBalancerConfig]));
+      }),
+      http.get(`*/nodebalancers/:id/configs/1/nodes`, () => {
+        return HttpResponse.json(
+          makeResourcePage([nodeBalancerConfigNodeFactory.build({ id: 1 })])
+        );
+      })
+    );
+
+    const { getByLabelText, getByTestId, getByText } = renderWithTheme(
+      <NodeBalancerConfigurations {...props} />,
+      {
+        MemoryRouter: memoryRouter,
+        routePath,
+      }
+    );
+
+    expect(getByTestId(loadingTestId)).toBeInTheDocument();
+
+    await waitForElementToBeRemoved(getByTestId(loadingTestId));
+
+    // Expected after mocking the configs returned
+    expect(getByText('Port 3000')).toBeVisible();
+    expect(getByLabelText('Protocol')).toBeInTheDocument();
+    expect(getByLabelText('Algorithm')).toBeInTheDocument();
+    expect(getByLabelText('Session Stickiness')).toBeInTheDocument();
+    expect(getByLabelText('Type')).toBeInTheDocument();
+    expect(getByLabelText('Label')).toBeInTheDocument();
+    expect(getByLabelText('IP Address')).toBeInTheDocument();
+    expect(getByLabelText('Weight')).toBeInTheDocument();
+    expect(getByLabelText('Port')).toBeInTheDocument();
+    expect(getByText('Listen on this port.')).toBeInTheDocument();
+    expect(getByText('Active Health Checks')).toBeInTheDocument();
+    expect(
+      getByText(
+        'Route subsequent requests from the client to the same backend.'
+      )
+    ).toBeInTheDocument();
+    expect(
+      getByText(
+        'Enable passive checks based on observing communication with back-end nodes.'
+      )
+    ).toBeInTheDocument();
+    expect(
+      getByText(
+        "Active health checks proactively check the health of back-end nodes. 'HTTP Valid Status' requires a 2xx or 3xx response from the backend node. 'HTTP Body Regex' uses a regex to match against an expected result body."
+      )
+    ).toBeInTheDocument();
+    expect(getByText('Add a Node')).toBeInTheDocument();
+    expect(getByText('Backend Nodes')).toBeInTheDocument();
+
+    // Since there is an existing configuration, the Add Configuration button says 'Add Another Configuration'
+    expect(getByText('Add Another Configuration')).toBeVisible();
+  });
+
+  it('renders the NodeBalancerConfigurations component with no configurations', async () => {
+    server.use(
+      http.get(`*/nodebalancers/:id/configs`, () => {
+        return HttpResponse.json(makeResourcePage([]));
+      })
+    );
+
+    const { getByTestId, getByText, queryByLabelText } = renderWithTheme(
+      <NodeBalancerConfigurations {...props} />,
+      {
+        MemoryRouter: memoryRouter,
+        routePath,
+      }
+    );
+
+    expect(getByTestId(loadingTestId)).toBeInTheDocument();
+
+    await waitForElementToBeRemoved(getByTestId(loadingTestId));
+
+    // confirm there are no configs
+    expect(queryByLabelText('Protocol')).not.toBeInTheDocument();
+    expect(queryByLabelText('Algorithm')).not.toBeInTheDocument();
+    expect(queryByLabelText('Session Stickiness')).not.toBeInTheDocument();
+
+    // Since there are no existing configurations, the Add Configuration button says 'Add a Configuration'
+    expect(getByText('Add a Configuration')).toBeVisible();
+  });
+
+  it('adds another configuration', async () => {
+    server.use(
+      http.get(`*/nodebalancers/:id/configs`, () => {
+        return HttpResponse.json(makeResourcePage([]));
+      })
+    );
+
+    const { getByTestId, getByText, queryByLabelText } = renderWithTheme(
+      <NodeBalancerConfigurations {...props} />,
+      {
+        MemoryRouter: memoryRouter,
+        routePath,
+      }
+    );
+
+    expect(getByTestId(loadingTestId)).toBeInTheDocument();
+
+    await waitForElementToBeRemoved(getByTestId(loadingTestId));
+
+    // confirm no configuration exists yet
+    expect(queryByLabelText('Protocol')).not.toBeInTheDocument();
+    expect(queryByLabelText('Algorithm')).not.toBeInTheDocument();
+    expect(queryByLabelText('Session Stickiness')).not.toBeInTheDocument();
+
+    await userEvent.click(getByText('Add a Configuration'));
+
+    // confirm new configuration has been added
+    expect(queryByLabelText('Protocol')).toBeVisible();
+    expect(queryByLabelText('Algorithm')).toBeVisible();
+    expect(queryByLabelText('Session Stickiness')).toBeVisible();
+  });
+
+  it('opens the Delete Configuration dialog', async () => {
+    server.use(
+      http.get(`*/nodebalancers/:id/configs`, () => {
+        return HttpResponse.json(makeResourcePage([nodeBalancerConfig]));
+      }),
+      http.get(`*/nodebalancers/:id/configs/1/nodes`, () => {
+        return HttpResponse.json(makeResourcePage([]));
+      })
+    );
+
+    const { getByLabelText, getByTestId, getByText } = renderWithTheme(
+      <NodeBalancerConfigurations {...props} />,
+      {
+        MemoryRouter: memoryRouter,
+        routePath,
+      }
+    );
+
+    expect(getByTestId(loadingTestId)).toBeInTheDocument();
+
+    await waitForElementToBeRemoved(getByTestId(loadingTestId));
+
+    expect(getByText('Port 3000')).toBeVisible();
+    expect(getByLabelText('Protocol')).toBeInTheDocument();
+    expect(getByLabelText('Algorithm')).toBeInTheDocument();
+
+    await userEvent.click(getByText('Delete'));
+
+    expect(getByText('Delete this configuration on port 3000?')).toBeVisible();
+    expect(
+      getByText(
+        'Are you sure you want to delete this NodeBalancer Configuration?'
+      )
+    ).toBeVisible();
+  });
+});
diff --git a/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerConfigurations.tsx b/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerConfigurations.tsx
index 620cd6e10f9..21df493ee6e 100644
--- a/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerConfigurations.tsx
+++ b/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerConfigurations.tsx
@@ -1,6 +1,4 @@
 import {
-  NodeBalancerConfig,
-  NodeBalancerConfigNode,
   createNodeBalancerConfig,
   createNodeBalancerConfigNode,
   deleteNodeBalancerConfig,
@@ -10,10 +8,8 @@ import {
   updateNodeBalancerConfig,
   updateNodeBalancerConfigNode,
 } from '@linode/api-v4/lib/nodebalancers';
-import { APIError, ResourcePage } from '@linode/api-v4/lib/types';
 import { styled } from '@mui/material/styles';
 import {
-  Lens,
   append,
   clone,
   compose,
@@ -25,7 +21,7 @@ import {
   view,
 } from 'ramda';
 import * as React from 'react';
-import { RouteComponentProps, withRouter } from 'react-router-dom';
+import { withRouter } from 'react-router-dom';
 import { compose as composeC } from 'recompose';
 
 import { Accordion } from 'src/components/Accordion';
@@ -34,14 +30,10 @@ import { Box } from 'src/components/Box';
 import { Button } from 'src/components/Button/Button';
 import { ConfirmationDialog } from 'src/components/ConfirmationDialog/ConfirmationDialog';
 import { DocumentTitleSegment } from 'src/components/DocumentTitle';
-import PromiseLoader, {
-  PromiseLoaderResponse,
-} from 'src/components/PromiseLoader/PromiseLoader';
+import PromiseLoader from 'src/components/PromiseLoader/PromiseLoader';
 import { Typography } from 'src/components/Typography';
-import {
-  WithQueryClientProps,
-  withQueryClient,
-} from 'src/containers/withQueryClient.container';
+import { withQueryClient } from 'src/containers/withQueryClient.container';
+import { nodebalancerQueries } from 'src/queries/nodebalancers';
 import { getAPIErrorOrDefault } from 'src/utilities/errorUtils';
 import { scrollErrorIntoView } from 'src/utilities/scrollErrorIntoView';
 
@@ -62,7 +54,15 @@ import type {
   NodeBalancerConfigNodeFields,
 } from '../types';
 import type { Grants } from '@linode/api-v4';
-import { nodebalancerQueries } from 'src/queries/nodebalancers';
+import type {
+  NodeBalancerConfig,
+  NodeBalancerConfigNode,
+} from '@linode/api-v4/lib/nodebalancers';
+import type { APIError, ResourcePage } from '@linode/api-v4/lib/types';
+import type { Lens } from 'ramda';
+import type { RouteComponentProps } from 'react-router-dom';
+import type { PromiseLoaderResponse } from 'src/components/PromiseLoader/PromiseLoader';
+import type { WithQueryClientProps } from 'src/containers/withQueryClient.container';
 
 const StyledPortsSpan = styled('span', {
   label: 'StyledPortsSpan',
@@ -171,62 +171,25 @@ class NodeBalancerConfigurations extends React.Component<
   NodeBalancerConfigurationsProps,
   State
 > {
-  render() {
-    const { nodeBalancerLabel } = this.props;
-    const {
-      configErrors,
-      configSubmitting,
-      configs,
-      hasUnsavedConfig,
-      panelMessages,
-    } = this.state;
-
-    const isNodeBalancerReadOnly = this.isNodeBalancerReadOnly();
-
-    return (
-      <div>
-        <DocumentTitleSegment
-          segment={`${nodeBalancerLabel} - Configurations`}
-        />
-        {Array.isArray(configs) &&
-          configs.map(
-            this.renderConfig(panelMessages, configErrors, configSubmitting)
-          )}
+  static defaultDeleteConfigConfirmDialogState = {
+    errors: undefined,
+    idxToDelete: undefined,
+    open: false,
+    portToDelete: undefined,
+    submitting: false,
+  };
 
-        {!hasUnsavedConfig && (
-          <Box sx={{ marginTop: '16px' }}>
-            <StyledConfigsButton
-              buttonType="outlined"
-              data-qa-add-config
-              disabled={isNodeBalancerReadOnly}
-              onClick={() => this.addNodeBalancerConfig()}
-            >
-              {configs.length === 0
-                ? 'Add a Configuration'
-                : 'Add Another Configuration'}
-            </StyledConfigsButton>
-          </Box>
-        )}
+  static defaultDeleteNodeConfirmDialogState = {
+    configIdxToDelete: undefined,
+    errors: undefined,
+    nodeIdxToDelete: undefined,
+    open: false,
+    submitting: false,
+  };
 
-        <ConfirmationDialog
-          title={
-            typeof this.state.deleteConfigConfirmDialog.portToDelete !==
-            'undefined'
-              ? `Delete this configuration on port ${this.state.deleteConfigConfirmDialog.portToDelete}?`
-              : 'Delete this configuration?'
-          }
-          actions={this.renderConfigConfirmationActions}
-          error={this.confirmationConfigError()}
-          onClose={this.onCloseConfirmation}
-          open={this.state.deleteConfigConfirmDialog.open}
-        >
-          <Typography>
-            Are you sure you want to delete this NodeBalancer Configuration?
-          </Typography>
-        </ConfirmationDialog>
-      </div>
-    );
-  }
+  static defaultFieldsStates = {
+    configs: [createNewNodeBalancerConfig(true)],
+  };
 
   addNode = (configIdx: number) => () => {
     this.setState(
@@ -343,26 +306,6 @@ class NodeBalancerConfigurations extends React.Component<
       );
   };
 
-  static defaultDeleteConfigConfirmDialogState = {
-    errors: undefined,
-    idxToDelete: undefined,
-    open: false,
-    portToDelete: undefined,
-    submitting: false,
-  };
-
-  static defaultDeleteNodeConfirmDialogState = {
-    configIdxToDelete: undefined,
-    errors: undefined,
-    nodeIdxToDelete: undefined,
-    open: false,
-    submitting: false,
-  };
-
-  static defaultFieldsStates = {
-    configs: [createNewNodeBalancerConfig(true)],
-  };
-
   deleteConfig = () => {
     const {
       deleteConfigConfirmDialog: { idxToDelete },
@@ -1164,6 +1107,63 @@ class NodeBalancerConfigurations extends React.Component<
     const clampedValue = clampNumericString(0, Number.MAX_SAFE_INTEGER)(value);
     this.updateState(lens, L, callback)(clampedValue);
   };
+
+  render() {
+    const { nodeBalancerLabel } = this.props;
+    const {
+      configErrors,
+      configSubmitting,
+      configs,
+      hasUnsavedConfig,
+      panelMessages,
+    } = this.state;
+
+    const isNodeBalancerReadOnly = this.isNodeBalancerReadOnly();
+
+    return (
+      <div>
+        <DocumentTitleSegment
+          segment={`${nodeBalancerLabel} - Configurations`}
+        />
+        {Array.isArray(configs) &&
+          configs.map(
+            this.renderConfig(panelMessages, configErrors, configSubmitting)
+          )}
+
+        {!hasUnsavedConfig && (
+          <Box sx={{ marginTop: '16px' }}>
+            <StyledConfigsButton
+              buttonType="outlined"
+              data-qa-add-config
+              disabled={isNodeBalancerReadOnly}
+              onClick={() => this.addNodeBalancerConfig()}
+            >
+              {configs.length === 0
+                ? 'Add a Configuration'
+                : 'Add Another Configuration'}
+            </StyledConfigsButton>
+          </Box>
+        )}
+
+        <ConfirmationDialog
+          title={
+            typeof this.state.deleteConfigConfirmDialog.portToDelete !==
+            'undefined'
+              ? `Delete this configuration on port ${this.state.deleteConfigConfirmDialog.portToDelete}?`
+              : 'Delete this configuration?'
+          }
+          actions={this.renderConfigConfirmationActions}
+          error={this.confirmationConfigError()}
+          onClose={this.onCloseConfirmation}
+          open={this.state.deleteConfigConfirmDialog.open}
+        >
+          <Typography>
+            Are you sure you want to delete this NodeBalancer Configuration?
+          </Typography>
+        </ConfirmationDialog>
+      </div>
+    );
+  }
 }
 
 const preloaded = PromiseLoader<NodeBalancerConfigurationsProps>({
diff --git a/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerDetail.tsx b/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerDetail.tsx
index 886043c757e..c951f4e1f8e 100644
--- a/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerDetail.tsx
+++ b/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerDetail.tsx
@@ -24,7 +24,7 @@ import { useGrants } from 'src/queries/profile/profile';
 import { getErrorMap } from 'src/utilities/errorUtils';
 
 import NodeBalancerConfigurations from './NodeBalancerConfigurations';
-import NodeBalancerSettings from './NodeBalancerSettings';
+import { NodeBalancerSettings } from './NodeBalancerSettings';
 import { NodeBalancerSummary } from './NodeBalancerSummary/NodeBalancerSummary';
 
 export const NodeBalancerDetail = () => {
diff --git a/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerFirewalls.test.tsx b/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerFirewalls.test.tsx
new file mode 100644
index 00000000000..2d6747ef8a3
--- /dev/null
+++ b/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerFirewalls.test.tsx
@@ -0,0 +1,111 @@
+import * as React from 'react';
+
+import { firewallFactory } from 'src/factories';
+import { renderWithTheme } from 'src/utilities/testHelpers';
+
+import { NodeBalancerFirewalls } from './NodeBalancerFirewalls';
+
+const firewall = firewallFactory.build({ label: 'mock-firewall-1' });
+
+// Set up various mocks for tests
+
+const queryMocks = vi.hoisted(() => ({
+  useNodeBalancersFirewallsQuery: vi.fn().mockReturnValue({ data: undefined }),
+}));
+
+vi.mock('src/queries/nodebalancers', async () => {
+  const actual = await vi.importActual('src/queries/nodebalancers');
+  return {
+    ...actual,
+    useNodeBalancersFirewallsQuery: queryMocks.useNodeBalancersFirewallsQuery,
+  };
+});
+
+const props = {
+  displayFirewallInfoText: false,
+  nodeBalancerId: 1,
+};
+
+describe('NodeBalancerFirewalls', () => {
+  beforeEach(() => {
+    queryMocks.useNodeBalancersFirewallsQuery.mockReturnValue({
+      data: { data: [firewall] },
+      isLoading: false,
+    });
+  });
+
+  afterEach(() => {
+    vi.resetAllMocks();
+  });
+
+  it('renders the Firewall table', () => {
+    const { getByText } = renderWithTheme(<NodeBalancerFirewalls {...props} />);
+
+    expect(getByText('Firewall')).toBeVisible();
+    expect(getByText('Status')).toBeVisible();
+    expect(getByText('Rules')).toBeVisible();
+    expect(getByText('mock-firewall-1')).toBeVisible();
+    expect(getByText('Enabled')).toBeVisible();
+    expect(getByText('1 Inbound / 1 Outbound')).toBeVisible();
+    expect(getByText('Unassign')).toBeVisible();
+  });
+
+  it('displays the FirewallInfo text', () => {
+    const { getByText } = renderWithTheme(
+      <NodeBalancerFirewalls {...props} displayFirewallInfoText={true} />
+    );
+
+    expect(getByText('Learn more about creating Firewalls.')).toBeVisible();
+  });
+
+  it('displays a loading placeholder', () => {
+    queryMocks.useNodeBalancersFirewallsQuery.mockReturnValue({
+      data: { data: [firewall] },
+      isLoading: true,
+    });
+    const { getByTestId, getByText } = renderWithTheme(
+      <NodeBalancerFirewalls {...props} />
+    );
+
+    // headers still exist
+    expect(getByText('Firewall')).toBeVisible();
+    expect(getByText('Status')).toBeVisible();
+    expect(getByText('Rules')).toBeVisible();
+
+    // table is loading
+    expect(getByTestId('table-row-loading')).toBeVisible();
+  });
+
+  it('displays an error for the firewall table', () => {
+    queryMocks.useNodeBalancersFirewallsQuery.mockReturnValue({
+      data: { data: [firewall] },
+      error: [{ reason: 'This is a firewall table error.' }],
+      isLoading: false,
+    });
+    const { getByText } = renderWithTheme(<NodeBalancerFirewalls {...props} />);
+
+    // headers still exist
+    expect(getByText('Firewall')).toBeVisible();
+    expect(getByText('Status')).toBeVisible();
+    expect(getByText('Rules')).toBeVisible();
+
+    // error message displays if there was an error getting firewalls
+    expect(getByText('This is a firewall table error.')).toBeVisible();
+  });
+
+  it('shows that no firewalls are assigned', () => {
+    queryMocks.useNodeBalancersFirewallsQuery.mockReturnValue({
+      data: { data: [] },
+      isLoading: false,
+    });
+    const { getByText } = renderWithTheme(<NodeBalancerFirewalls {...props} />);
+
+    // headers still exist
+    expect(getByText('Firewall')).toBeVisible();
+    expect(getByText('Status')).toBeVisible();
+    expect(getByText('Rules')).toBeVisible();
+
+    // no firewalls exist
+    expect(getByText('No Firewalls are assigned.')).toBeVisible();
+  });
+});
diff --git a/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerFirewalls.tsx b/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerFirewalls.tsx
index 5b962fd53a6..a328bac072e 100644
--- a/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerFirewalls.tsx
+++ b/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerFirewalls.tsx
@@ -1,5 +1,4 @@
 /* eslint-disable jsx-a11y/anchor-is-valid */
-import { Firewall, FirewallDevice } from '@linode/api-v4';
 import { Stack } from '@mui/material';
 import * as React from 'react';
 
@@ -20,6 +19,8 @@ import { useNodeBalancersFirewallsQuery } from 'src/queries/nodebalancers';
 
 import { NodeBalancerFirewallsRow } from './NodeBalancerFirewallsRow';
 
+import type { Firewall, FirewallDevice } from '@linode/api-v4';
+
 interface Props {
   displayFirewallInfoText: boolean;
   nodeBalancerId: number;
diff --git a/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerFirewallsActionMenu.tsx b/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerFirewallsActionMenu.tsx
index 74507f315f6..7c92a160cd0 100644
--- a/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerFirewallsActionMenu.tsx
+++ b/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerFirewallsActionMenu.tsx
@@ -1,11 +1,12 @@
 import * as React from 'react';
 
-import { Action } from 'src/components/ActionMenu/ActionMenu';
 import { InlineMenuAction } from 'src/components/InlineMenuAction/InlineMenuAction';
 import { noPermissionTooltipText } from 'src/features/Firewalls/FirewallLanding/FirewallActionMenu';
 import { checkIfUserCanModifyFirewall } from 'src/features/Firewalls/shared';
 import { useGrants, useProfile } from 'src/queries/profile/profile';
 
+import type { Action } from 'src/components/ActionMenu/ActionMenu';
+
 interface Props {
   firewallID: number;
   onUnassign: () => void;
diff --git a/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerFirewallsRow.test.tsx b/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerFirewallsRow.test.tsx
new file mode 100644
index 00000000000..c102b00de25
--- /dev/null
+++ b/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerFirewallsRow.test.tsx
@@ -0,0 +1,77 @@
+import userEvent from '@testing-library/user-event';
+import * as React from 'react';
+
+import { firewallFactory } from 'src/factories';
+import { checkIfUserCanModifyFirewall } from 'src/features/Firewalls/shared';
+import { renderWithTheme } from 'src/utilities/testHelpers';
+
+import { NodeBalancerFirewallsRow } from './NodeBalancerFirewallsRow';
+
+const firewall = firewallFactory.build({ label: 'mock-firewall-1' });
+
+// Set up various mocks for tests
+vi.mock('src/features/Firewalls/shared');
+
+const queryMocks = vi.hoisted(() => ({
+  useNodeBalancersFirewallsQuery: vi.fn().mockReturnValue({ data: undefined }),
+}));
+
+vi.mock('src/queries/nodebalancers', async () => {
+  const actual = await vi.importActual('src/queries/nodebalancers');
+  return {
+    ...actual,
+    useNodeBalancersFirewallsQuery: queryMocks.useNodeBalancersFirewallsQuery,
+  };
+});
+
+const props = {
+  firewall,
+  nodeBalancerID: 1,
+  onClickUnassign: vi.fn(),
+};
+
+describe('NodeBalancerFirewallsRow', () => {
+  beforeEach(() => {
+    vi.mocked(checkIfUserCanModifyFirewall).mockReturnValue(true);
+    queryMocks.useNodeBalancersFirewallsQuery.mockReturnValue({
+      data: { data: [firewall] },
+    });
+  });
+
+  afterEach(() => {
+    vi.resetAllMocks();
+  });
+
+  it('renders the NodeBalancerFirewallsRow', () => {
+    const { getByText } = renderWithTheme(
+      <NodeBalancerFirewallsRow {...props} />
+    );
+
+    expect(getByText('mock-firewall-1')).toBeVisible();
+    expect(getByText('Enabled')).toBeVisible();
+    expect(getByText('1 Inbound / 1 Outbound')).toBeVisible();
+    expect(getByText('Unassign')).toBeVisible();
+  });
+
+  it('unassigns the firewall', async () => {
+    const { getByText } = renderWithTheme(
+      <NodeBalancerFirewallsRow {...props} />
+    );
+
+    const unassignButton = getByText('Unassign');
+    await userEvent.click(unassignButton);
+    expect(props.onClickUnassign).toHaveBeenCalled();
+  });
+
+  it('disables unassigning the firewall if user cannot modify firewall', async () => {
+    vi.mocked(checkIfUserCanModifyFirewall).mockReturnValue(false);
+    const { getByTestId } = renderWithTheme(
+      <NodeBalancerFirewallsRow {...props} />
+    );
+
+    const unassignButton = getByTestId('Button');
+    expect(unassignButton).toBeDisabled();
+    await userEvent.click(unassignButton);
+    expect(props.onClickUnassign).not.toHaveBeenCalled();
+  });
+});
diff --git a/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerFirewallsRow.tsx b/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerFirewallsRow.tsx
index b16129be7c1..d429cc56d3f 100644
--- a/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerFirewallsRow.tsx
+++ b/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerFirewallsRow.tsx
@@ -1,4 +1,3 @@
-import { Firewall, FirewallDevice } from '@linode/api-v4';
 import * as React from 'react';
 import { Link } from 'react-router-dom';
 
@@ -14,6 +13,8 @@ import { capitalize } from 'src/utilities/capitalize';
 
 import { NodeBalancerFirewallsActionMenu } from './NodeBalancerFirewallsActionMenu';
 
+import type { Firewall, FirewallDevice } from '@linode/api-v4';
+
 interface Props {
   firewall: Firewall;
   nodeBalancerID: number;
diff --git a/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerSettings.test.tsx b/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerSettings.test.tsx
new file mode 100644
index 00000000000..af1138e660b
--- /dev/null
+++ b/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerSettings.test.tsx
@@ -0,0 +1,92 @@
+import * as React from 'react';
+
+import { firewallFactory, nodeBalancerFactory } from 'src/factories';
+import { useIsResourceRestricted } from 'src/hooks/useIsResourceRestricted';
+import { renderWithTheme } from 'src/utilities/testHelpers';
+
+import { NodeBalancerSettings } from './NodeBalancerSettings';
+
+// Set up various mocks for tests
+vi.mock('src/hooks/useIsResourceRestricted');
+
+const queryMocks = vi.hoisted(() => ({
+  useNodeBalancerQuery: vi.fn().mockReturnValue({ data: undefined }),
+  useNodeBalancersFirewallsQuery: vi.fn().mockReturnValue({ data: undefined }),
+}));
+
+vi.mock('src/queries/nodebalancers', async () => {
+  const actual = await vi.importActual('src/queries/nodebalancers');
+  return {
+    ...actual,
+    useNodeBalancerQuery: queryMocks.useNodeBalancerQuery,
+    useNodeBalancersFirewallsQuery: queryMocks.useNodeBalancersFirewallsQuery,
+  };
+});
+
+const connectionThrottle = 'Connection Throttle';
+
+describe('NodeBalancerSettings', () => {
+  beforeEach(() => {
+    queryMocks.useNodeBalancerQuery.mockReturnValue({
+      data: nodeBalancerFactory.build(),
+    });
+    queryMocks.useNodeBalancersFirewallsQuery.mockReturnValue({
+      data: { data: [firewallFactory.build({ label: 'mock-firewall-1' })] },
+    });
+  });
+
+  afterEach(() => {
+    vi.resetAllMocks();
+  });
+
+  it('renders the NodeBalancerSettings component', () => {
+    const {
+      getAllByText,
+      getByLabelText,
+      getByTestId,
+      getByText,
+    } = renderWithTheme(<NodeBalancerSettings />);
+
+    // NodeBalancer Label panel
+    expect(getByText('NodeBalancer Label')).toBeVisible();
+    expect(getByText('Label')).toBeVisible();
+    expect(getByLabelText('Label')).not.toBeDisabled();
+
+    // Firewall panel
+    expect(getByText('Firewalls')).toBeVisible();
+    expect(getByText('Firewall')).toBeVisible();
+    expect(getByText('Status')).toBeVisible();
+    expect(getByText('Rules')).toBeVisible();
+    expect(getByText('mock-firewall-1')).toBeVisible();
+    expect(getByText('Enabled')).toBeVisible();
+    expect(getByText('1 Inbound / 1 Outbound')).toBeVisible();
+    expect(getByText('Unassign')).toBeVisible();
+
+    // Client Connection Throttle panel
+    expect(getByText('Client Connection Throttle')).toBeVisible();
+    expect(getByText(connectionThrottle)).toBeVisible();
+    expect(getByLabelText(connectionThrottle)).not.toBeDisabled();
+    expect(
+      getByText(
+        'To help mitigate abuse, throttle connections from a single client IP to this number per second. 0 to disable.'
+      )
+    ).toBeVisible();
+    expect(getAllByText('Save')).toHaveLength(2);
+
+    // Delete panel
+    expect(getByText('Delete NodeBalancer')).toBeVisible();
+    expect(getByText('Delete')).toBeVisible();
+    expect(getByTestId('delete-nodebalancer')).not.toBeDisabled();
+  });
+
+  it('disables inputs and buttons if the Node Balancer is read only', () => {
+    vi.mocked(useIsResourceRestricted).mockReturnValue(true);
+    const { getByLabelText, getByTestId } = renderWithTheme(
+      <NodeBalancerSettings />
+    );
+
+    expect(getByLabelText('Label')).toBeDisabled();
+    expect(getByLabelText(connectionThrottle)).toBeDisabled();
+    expect(getByTestId('delete-nodebalancer')).toBeDisabled();
+  });
+});
diff --git a/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerSettings.tsx b/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerSettings.tsx
index 9afca8890d6..2c3b66cc24f 100644
--- a/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerSettings.tsx
+++ b/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerSettings.tsx
@@ -140,6 +140,7 @@ export const NodeBalancerSettings = () => {
       <Accordion defaultExpanded heading="Delete NodeBalancer">
         <Button
           buttonType="primary"
+          data-testid="delete-nodebalancer"
           disabled={isNodeBalancerReadOnly}
           onClick={() => setIsDeleteDialogOpen(true)}
         >
@@ -155,5 +156,3 @@ export const NodeBalancerSettings = () => {
     </div>
   );
 };
-
-export default NodeBalancerSettings;
diff --git a/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerSummary/NodeBalancerSummary.tsx b/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerSummary/NodeBalancerSummary.tsx
index c13926a5156..24a13313f92 100644
--- a/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerSummary/NodeBalancerSummary.tsx
+++ b/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerSummary/NodeBalancerSummary.tsx
@@ -1,5 +1,5 @@
-import Grid from '@mui/material/Unstable_Grid2';
 import { styled } from '@mui/material/styles';
+import Grid from '@mui/material/Unstable_Grid2';
 import * as React from 'react';
 import { useParams } from 'react-router-dom';
 
diff --git a/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerSummary/SummaryPanel.test.tsx b/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerSummary/SummaryPanel.test.tsx
new file mode 100644
index 00000000000..42fceb03770
--- /dev/null
+++ b/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerSummary/SummaryPanel.test.tsx
@@ -0,0 +1,92 @@
+import * as React from 'react';
+
+import {
+  firewallFactory,
+  nodeBalancerConfigFactory,
+  nodeBalancerFactory,
+} from 'src/factories';
+import { renderWithTheme } from 'src/utilities/testHelpers';
+
+import { SummaryPanel } from './SummaryPanel';
+
+// Set up various mocks for tests
+const queryMocks = vi.hoisted(() => ({
+  useAllNodeBalancerConfigsQuery: vi.fn().mockReturnValue({ data: undefined }),
+  useNodeBalancerQuery: vi.fn().mockReturnValue({ data: undefined }),
+  useNodeBalancersFirewallsQuery: vi.fn().mockReturnValue({ data: undefined }),
+}));
+
+vi.mock('src/queries/nodebalancers', async () => {
+  const actual = await vi.importActual('src/queries/nodebalancers');
+  return {
+    ...actual,
+    useAllNodeBalancerConfigsQuery: queryMocks.useAllNodeBalancerConfigsQuery,
+    useNodeBalancerQuery: queryMocks.useNodeBalancerQuery,
+    useNodeBalancersFirewallsQuery: queryMocks.useNodeBalancersFirewallsQuery,
+  };
+});
+
+const nodeBalancerDetails = 'NodeBalancer Details';
+
+describe('SummaryPanel', () => {
+  beforeEach(() => {
+    queryMocks.useAllNodeBalancerConfigsQuery.mockReturnValue({
+      data: nodeBalancerConfigFactory.buildList(2),
+    });
+    queryMocks.useNodeBalancerQuery.mockReturnValue({
+      data: nodeBalancerFactory.build(),
+    });
+    queryMocks.useNodeBalancersFirewallsQuery.mockReturnValue({
+      data: { data: [firewallFactory.build({ label: 'mock-firewall-1' })] },
+    });
+  });
+
+  afterEach(() => {
+    vi.resetAllMocks();
+  });
+
+  it('does not render anything if there is no nodebalancer', () => {
+    queryMocks.useAllNodeBalancerConfigsQuery.mockReturnValue({
+      data: undefined,
+    });
+    const { queryByText } = renderWithTheme(<SummaryPanel />);
+
+    expect(queryByText(nodeBalancerDetails)).not.toBeInTheDocument();
+  });
+
+  it('does not render anything if there are no configs', () => {
+    queryMocks.useNodeBalancerQuery.mockReturnValue({
+      data: undefined,
+    });
+    const { queryByText } = renderWithTheme(<SummaryPanel />);
+
+    expect(queryByText(nodeBalancerDetails)).not.toBeInTheDocument();
+  });
+
+  it('renders the panel if there is data to render', () => {
+    const { getByText } = renderWithTheme(<SummaryPanel />);
+
+    // Main summary panel
+    expect(getByText(nodeBalancerDetails)).toBeVisible();
+    expect(getByText('Ports:')).toBeVisible();
+    expect(getByText('Backend Status:')).toBeVisible();
+    expect(getByText('0 up, 2 down'));
+    expect(getByText('Transferred:')).toBeVisible();
+    expect(getByText('0 bytes')).toBeVisible();
+    expect(getByText('Host Name:')).toBeVisible();
+    expect(getByText('example.com')).toBeVisible();
+    expect(getByText('Region:')).toBeVisible();
+
+    // Firewall panel
+    expect(getByText('Firewall')).toBeVisible();
+    expect(getByText('mock-firewall-1')).toBeVisible();
+
+    // IP Address panel
+    expect(getByText('IP Addresses')).toBeVisible();
+    expect(getByText('0.0.0.0')).toBeVisible();
+
+    // Tags panel
+    expect(getByText('Tags')).toBeVisible();
+    expect(getByText('Add a tag')).toBeVisible();
+  });
+});
diff --git a/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerSummary/TablesPanel.test.tsx b/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerSummary/TablesPanel.test.tsx
new file mode 100644
index 00000000000..2aadf119823
--- /dev/null
+++ b/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerSummary/TablesPanel.test.tsx
@@ -0,0 +1,126 @@
+/* eslint-disable @typescript-eslint/no-empty-function */
+import * as React from 'react';
+
+import { nodeBalancerFactory } from 'src/factories';
+import { renderWithTheme } from 'src/utilities/testHelpers';
+
+import { TablesPanel } from './TablesPanel';
+
+// Set up various mocks for tests
+const queryMocks = vi.hoisted(() => ({
+  useNodeBalancerQuery: vi.fn().mockReturnValue({ data: undefined }),
+  useNodeBalancerStatsQuery: vi.fn().mockReturnValue({ data: undefined }),
+}));
+
+vi.mock('src/queries/nodebalancers', async () => {
+  const actual = await vi.importActual('src/queries/nodebalancers');
+  return {
+    ...actual,
+    useNodeBalancerQuery: queryMocks.useNodeBalancerQuery,
+    useNodeBalancerStatsQuery: queryMocks.useNodeBalancerStatsQuery,
+  };
+});
+
+const connectionGraphHeader = 'Connections (CXN/s, 5 min avg.)';
+const trafficGraphHeader = 'Traffic (bits/s, 5 min avg.)';
+
+class ResizeObserver {
+  disconnect() {}
+  observe() {}
+  unobserve() {}
+}
+
+describe('TablesPanel', () => {
+  beforeEach(() => {
+    queryMocks.useNodeBalancerQuery.mockReturnValue({
+      data: nodeBalancerFactory.build(),
+    });
+  });
+
+  afterEach(() => {
+    vi.resetAllMocks();
+  });
+
+  it('shows when the Node Balancer stats are not yet ready', () => {
+    queryMocks.useNodeBalancerStatsQuery.mockReturnValue({
+      data: undefined,
+      error: [{ reason: 'Stats are unavailable at this time.' }],
+      isLoading: true,
+    });
+    const { getByText } = renderWithTheme(<TablesPanel />);
+
+    // Headers show regardless of which state the charts are in
+    expect(getByText('Graphs')).toBeVisible();
+    expect(getByText(connectionGraphHeader)).toBeVisible();
+    expect(getByText(trafficGraphHeader)).toBeVisible();
+
+    // Stats availability message displays in place of graphs
+    expect(
+      getByText('Connection stats will be available shortly')
+    ).toBeVisible();
+    expect(getByText('Traffic stats will be available shortly')).toBeVisible();
+  });
+
+  it('shows the error state for the charts', () => {
+    queryMocks.useNodeBalancerStatsQuery.mockReturnValue({
+      data: undefined,
+      error: [{ reason: 'Not found.' }],
+      isLoading: true,
+    });
+    const { getAllByText, getByText } = renderWithTheme(<TablesPanel />);
+
+    // Headers show regardless of which state the charts are in
+    expect(getByText('Graphs')).toBeVisible();
+    expect(getByText(connectionGraphHeader)).toBeVisible();
+    expect(getByText(trafficGraphHeader)).toBeVisible();
+
+    // Error message shows in place of graphs
+    expect(getAllByText('Not found.')).toHaveLength(2);
+  });
+
+  it('returns the loading state for the charts', () => {
+    queryMocks.useNodeBalancerStatsQuery.mockReturnValue({
+      data: undefined,
+      error: undefined,
+      isLoading: true,
+    });
+    const { getAllByTestId, getByText } = renderWithTheme(<TablesPanel />);
+
+    // Headers show regardless of which state the charts are in
+    expect(getByText('Graphs')).toBeVisible();
+    expect(getByText(connectionGraphHeader)).toBeVisible();
+    expect(getByText(trafficGraphHeader)).toBeVisible();
+
+    // Confirm loading state exists in place of graphs
+    expect(getAllByTestId('circle-progress')).toHaveLength(2);
+  });
+
+  it('renders the Node Balancer stats and traffic', () => {
+    window.ResizeObserver = ResizeObserver;
+    queryMocks.useNodeBalancerStatsQuery.mockReturnValue({
+      data: {
+        data: {
+          connections: [],
+          traffic: {
+            in: [],
+            out: [],
+          },
+        },
+        title: 'NodeBalancer stats',
+      },
+      error: undefined,
+      isLoading: false,
+    });
+    const { getByText } = renderWithTheme(<TablesPanel />);
+
+    // Headers show regardless of which state the charts are in
+    expect(getByText('Graphs')).toBeVisible();
+    expect(getByText(connectionGraphHeader)).toBeVisible();
+    expect(getByText(trafficGraphHeader)).toBeVisible();
+
+    // stats and traffic show
+    expect(getByText('Connections')).toBeVisible();
+    expect(getByText('Traffic In')).toBeVisible();
+    expect(getByText('Traffic Out')).toBeVisible();
+  });
+});
diff --git a/packages/manager/src/features/NodeBalancers/NodeBalancerPassiveCheck.test.tsx b/packages/manager/src/features/NodeBalancers/NodeBalancerPassiveCheck.test.tsx
index 50a111b7f85..e08065e7029 100644
--- a/packages/manager/src/features/NodeBalancers/NodeBalancerPassiveCheck.test.tsx
+++ b/packages/manager/src/features/NodeBalancers/NodeBalancerPassiveCheck.test.tsx
@@ -1,4 +1,4 @@
-import { fireEvent } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import * as React from 'react';
 
 import { renderWithTheme } from 'src/utilities/testHelpers';
@@ -20,7 +20,7 @@ describe('NodeBalancer PassiveCheck', () => {
     ).toBeVisible();
   });
 
-  it('calls onCheckPassiveChange when the check is toggled', () => {
+  it('calls onCheckPassiveChange when the check is toggled', async () => {
     const { getByLabelText } = renderWithTheme(
       <PassiveCheck {...nbConfigPanelMockPropsForTest} />
     );
@@ -28,7 +28,7 @@ describe('NodeBalancer PassiveCheck', () => {
     const passiveChecksToggle = getByLabelText('Passive Checks');
     expect(passiveChecksToggle).toBeInTheDocument();
 
-    fireEvent.click(passiveChecksToggle);
+    await userEvent.click(passiveChecksToggle);
     expect(
       nbConfigPanelMockPropsForTest.onCheckPassiveChange
     ).toHaveBeenCalled();
diff --git a/packages/manager/src/features/NodeBalancers/NodeBalancersLanding/NodeBalancerActionMenu.test.tsx b/packages/manager/src/features/NodeBalancers/NodeBalancersLanding/NodeBalancerActionMenu.test.tsx
index ade67435282..e950688d3d4 100644
--- a/packages/manager/src/features/NodeBalancers/NodeBalancersLanding/NodeBalancerActionMenu.test.tsx
+++ b/packages/manager/src/features/NodeBalancers/NodeBalancersLanding/NodeBalancerActionMenu.test.tsx
@@ -1,4 +1,4 @@
-import { fireEvent } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import * as React from 'react';
 
 import { renderWithTheme } from 'src/utilities/testHelpers';
@@ -26,13 +26,13 @@ describe('NodeBalancerActionMenu', () => {
     expect(getByText('Delete')).toBeVisible();
   });
 
-  it('triggers the action to delete the NodeBalancer', () => {
+  it('triggers the action to delete the NodeBalancer', async () => {
     const { getByText } = renderWithTheme(
       <NodeBalancerActionMenu {...props} />
     );
 
     const deleteButton = getByText('Delete');
-    fireEvent.click(deleteButton);
+    await userEvent.click(deleteButton);
     expect(props.toggleDialog).toHaveBeenCalled();
   });
 });
diff --git a/packages/manager/src/features/NodeBalancers/NodeBalancersLanding/NodeBalancerTableRow.test.tsx b/packages/manager/src/features/NodeBalancers/NodeBalancersLanding/NodeBalancerTableRow.test.tsx
index 80df645c989..42d3acaad73 100644
--- a/packages/manager/src/features/NodeBalancers/NodeBalancersLanding/NodeBalancerTableRow.test.tsx
+++ b/packages/manager/src/features/NodeBalancers/NodeBalancersLanding/NodeBalancerTableRow.test.tsx
@@ -1,4 +1,4 @@
-import { fireEvent } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import * as React from 'react';
 
 import { nodeBalancerFactory } from 'src/factories';
@@ -42,20 +42,20 @@ describe('NodeBalancerTableRow', () => {
     expect(getByText('us-east')).toBeVisible();
   });
 
-  it('deletes the NodeBalancer', () => {
+  it('deletes the NodeBalancer', async () => {
     const { getByText } = renderWithTheme(<NodeBalancerTableRow {...props} />);
 
     const deleteButton = getByText('Delete');
-    fireEvent.click(deleteButton);
+    await userEvent.click(deleteButton);
     expect(props.onDelete).toHaveBeenCalled();
   });
 
-  it('does not delete the NodeBalancer if the delete button is disabled', () => {
+  it('does not delete the NodeBalancer if the delete button is disabled', async () => {
     vi.mocked(useIsResourceRestricted).mockReturnValue(true);
     const { getByText } = renderWithTheme(<NodeBalancerTableRow {...props} />);
 
     const deleteButton = getByText('Delete');
-    fireEvent.click(deleteButton);
+    await userEvent.click(deleteButton);
     expect(props.onDelete).not.toHaveBeenCalled();
   });
 });
diff --git a/packages/manager/src/utilities/testHelpers.tsx b/packages/manager/src/utilities/testHelpers.tsx
index 910cee4ef09..07818e547a6 100644
--- a/packages/manager/src/utilities/testHelpers.tsx
+++ b/packages/manager/src/utilities/testHelpers.tsx
@@ -8,7 +8,7 @@ import { mergeDeepRight } from 'ramda';
 import * as React from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 import { Provider } from 'react-redux';
-import { MemoryRouter } from 'react-router-dom';
+import { MemoryRouter, Route } from 'react-router-dom';
 import configureStore from 'redux-mock-store';
 import thunk from 'redux-thunk';
 
@@ -62,6 +62,7 @@ interface Options {
   customStore?: DeepPartial<ApplicationState>;
   flags?: FlagSet;
   queryClient?: QueryClient;
+  routePath?: string;
   theme?: 'dark' | 'light';
 }
 
@@ -76,7 +77,7 @@ export const baseStore = (customStore: DeepPartial<ApplicationState> = {}) =>
   );
 
 export const wrapWithTheme = (ui: any, options: Options = {}) => {
-  const { customStore, queryClient: passedQueryClient } = options;
+  const { customStore, queryClient: passedQueryClient, routePath } = options;
   const queryClient = passedQueryClient ?? queryClientFactory();
   const storeToPass = customStore ? baseStore(customStore) : storeFactory();
 
@@ -86,6 +87,8 @@ export const wrapWithTheme = (ui: any, options: Options = {}) => {
     configureStore<ApplicationState>([thunk])(defaultState)
   );
 
+  const uiToRender = ui.children ?? ui;
+
   return (
     <Provider store={storeToPass}>
       <QueryClientProvider client={passedQueryClient || queryClient}>
@@ -98,7 +101,11 @@ export const wrapWithTheme = (ui: any, options: Options = {}) => {
           >
             <SnackbarProvider>
               <MemoryRouter {...options.MemoryRouter}>
-                {ui.children ?? ui}
+                {routePath ? (
+                  <Route path={routePath}>{uiToRender}</Route>
+                ) : (
+                  uiToRender
+                )}
               </MemoryRouter>
             </SnackbarProvider>
           </LDProvider>

From 915faca5f45cf36fcb0d61aa391b8d26874d5c77 Mon Sep 17 00:00:00 2001
From: cpathipa <119517080+cpathipa@users.noreply.github.com>
Date: Tue, 24 Sep 2024 10:39:53 -0500
Subject: [PATCH 44/62] fix: [M3-8508] - Cancel Button Not Functioning in
 Delete Node Balancer Configuration Dialog (#10962)

* unit test coverage for HostNameTableCell

* Revert "unit test coverage for HostNameTableCell"

This reverts commit b274baf67e27d79fd4e764607ded7c5aa755ee8b.

* fix: [M3-8508] - Cancel Button Not Functioning in Delete Node Balancer Configuration Dialog

* Add unit test coverage

* Added changeset: Cancel Button Not Functioning in Delete Node Balancer Configuration Dialog

* PR feedback - @HanaXu
---
 .../pr-10962-fixed-1726688754577.md           |  5 +++
 .../NodeBalancerConfigurations.tsx            | 34 +++++++++----------
 2 files changed, 21 insertions(+), 18 deletions(-)
 create mode 100644 packages/manager/.changeset/pr-10962-fixed-1726688754577.md

diff --git a/packages/manager/.changeset/pr-10962-fixed-1726688754577.md b/packages/manager/.changeset/pr-10962-fixed-1726688754577.md
new file mode 100644
index 00000000000..851aa610027
--- /dev/null
+++ b/packages/manager/.changeset/pr-10962-fixed-1726688754577.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Fixed
+---
+
+Cancel Button Not Functioning in Delete Node Balancer Configuration Dialog ([#10962](https://github.com/linode/manager/pull/10962))
diff --git a/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerConfigurations.tsx b/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerConfigurations.tsx
index 21df493ee6e..66e713df1a8 100644
--- a/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerConfigurations.tsx
+++ b/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerConfigurations.tsx
@@ -692,23 +692,6 @@ class NodeBalancerConfigurations extends React.Component<
     );
   };
 
-  renderConfigConfirmationActions = ({ onClose }: { onClose: () => void }) => (
-    <ActionsPanel
-      primaryButtonProps={{
-        'data-testid': 'confirm-cancel',
-        label: 'Delete',
-        loading: this.state.deleteConfigConfirmDialog.submitting,
-        onClick: this.deleteConfig,
-      }}
-      secondaryButtonProps={{
-        'data-testid': 'cancel-cancel',
-        label: 'Cancel',
-        onClick: onClose,
-      }}
-      style={{ padding: 0 }}
-    />
-  );
-
   resetSubmitting = (configIdx: number) => {
     // reset submitting
     const newSubmitting = clone(this.state.configSubmitting);
@@ -1146,13 +1129,28 @@ class NodeBalancerConfigurations extends React.Component<
         )}
 
         <ConfirmationDialog
+          actions={
+            <ActionsPanel
+              primaryButtonProps={{
+                'data-testid': 'confirm-cancel',
+                label: 'Delete',
+                loading: this.state.deleteConfigConfirmDialog.submitting,
+                onClick: this.deleteConfig,
+              }}
+              secondaryButtonProps={{
+                'data-testid': 'cancel-cancel',
+                label: 'Cancel',
+                onClick: this.onCloseConfirmation,
+              }}
+              style={{ padding: 0 }}
+            />
+          }
           title={
             typeof this.state.deleteConfigConfirmDialog.portToDelete !==
             'undefined'
               ? `Delete this configuration on port ${this.state.deleteConfigConfirmDialog.portToDelete}?`
               : 'Delete this configuration?'
           }
-          actions={this.renderConfigConfirmationActions}
           error={this.confirmationConfigError()}
           onClose={this.onCloseConfirmation}
           open={this.state.deleteConfigConfirmDialog.open}

From 30e28b87b05eaba2a664657472dc048556c9c34e Mon Sep 17 00:00:00 2001
From: Banks Nussman <115251059+bnussman-akamai@users.noreply.github.com>
Date: Tue, 24 Sep 2024 12:07:25 -0400
Subject: [PATCH 45/62] chore: Update `husky` to latest (#10990)

* update husky

* update husky version

* clean up husky hook

* Added changeset: Update `husky` to latest

---------

Co-authored-by: Banks Nussman <banks@nussman.us>
---
 .husky/pre-commit                             |   1 +
 package.json                                  |  10 +-
 .../pr-10990-tech-stories-1727187564566.md    |   5 +
 yarn.lock                                     | 123 +-----------------
 4 files changed, 15 insertions(+), 124 deletions(-)
 create mode 100755 .husky/pre-commit
 create mode 100644 packages/manager/.changeset/pr-10990-tech-stories-1727187564566.md

diff --git a/.husky/pre-commit b/.husky/pre-commit
new file mode 100755
index 00000000000..c799b8b688d
--- /dev/null
+++ b/.husky/pre-commit
@@ -0,0 +1 @@
+yarn workspaces run precommit
diff --git a/package.json b/package.json
index 8a2e4147fcc..3892b7c4d14 100644
--- a/package.json
+++ b/package.json
@@ -3,14 +3,9 @@
   "private": true,
   "license": "Apache-2.0",
   "devDependencies": {
-    "husky": "^3.0.1",
+    "husky": "^9.1.6",
     "typescript": "^5.5.4"
   },
-  "husky": {
-    "hooks": {
-      "pre-commit": "yarn workspaces run precommit"
-    }
-  },
   "scripts": {
     "lint": "yarn run eslint . --quiet --ext .js,.ts,.tsx",
     "cost-of-modules": "yarn global add cost-of-modules && cost-of-modules --less --no-install --include-dev",
@@ -44,7 +39,8 @@
     "coverage:summary": "yarn workspace linode-manager coverage:summary",
     "junit:summary": "ts-node scripts/junit-summary/index.ts",
     "generate-tod": "ts-node scripts/tod-payload/index.ts",
-    "docs": "bunx vitepress@1.0.0-rc.44 dev docs"
+    "docs": "bunx vitepress@1.0.0-rc.44 dev docs",
+    "prepare": "husky"
   },
   "resolutions": {
     "braces": "^3.0.3",
diff --git a/packages/manager/.changeset/pr-10990-tech-stories-1727187564566.md b/packages/manager/.changeset/pr-10990-tech-stories-1727187564566.md
new file mode 100644
index 00000000000..22440f94772
--- /dev/null
+++ b/packages/manager/.changeset/pr-10990-tech-stories-1727187564566.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Tech Stories
+---
+
+Update `husky` to latest ([#10990](https://github.com/linode/manager/pull/10990))
diff --git a/yarn.lock b/yarn.lock
index 6423caaf392..500b2eb2530 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3103,11 +3103,6 @@
   dependencies:
     undici-types "~6.19.2"
 
-"@types/normalize-package-data@^2.4.0":
-  version "2.4.4"
-  resolved "https://registry.yarnpkg.com/@types/normalize-package-data/-/normalize-package-data-2.4.4.tgz#56e2cc26c397c038fab0e3a917a12d5c5909e901"
-  integrity sha512-37i+OaWTh9qeK4LSHPsyRC7NahnGotNuZvjLSgcPzblpHB3rrCJxAOgI5gCdKm7coonsaX1Of0ILiTcnZjbfxA==
-
 "@types/parse-json@^4.0.0":
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.2.tgz#5950e50960793055845e956c427fc2b0d70c5239"
@@ -4358,25 +4353,6 @@ call-bind@^1.0.7:
     get-intrinsic "^1.2.4"
     set-function-length "^1.2.1"
 
-caller-callsite@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/caller-callsite/-/caller-callsite-2.0.0.tgz#847e0fce0a223750a9a027c54b33731ad3154134"
-  integrity sha512-JuG3qI4QOftFsZyOn1qq87fq5grLIyk1JYd5lJmdA+fG7aQ9pA/i3JIJGcO3q0MrRcHlOt1U+ZeHW8Dq9axALQ==
-  dependencies:
-    callsites "^2.0.0"
-
-caller-path@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/caller-path/-/caller-path-2.0.0.tgz#468f83044e369ab2010fac5f06ceee15bb2cb1f4"
-  integrity sha512-MCL3sf6nCSXOwCTzvPKhN18TU7AHTvdtam8DAogxcrJ8Rjfbbg7Lgng64H9Iy+vUV6VGFClN/TyxBkAebLRR4A==
-  dependencies:
-    caller-callsite "^2.0.0"
-
-callsites@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/callsites/-/callsites-2.0.0.tgz#06eb84f00eea413da86affefacbffb36093b3c50"
-  integrity sha512-ksWePWBloaWPxJYQ8TL0JHvtci6G5QTKwQ95RcWAa/lzoAKuAOflGdAK92hpHXjkwb8zLxoLNUoNYZgVsaJzvQ==
-
 callsites@^3.0.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/callsites/-/callsites-3.1.0.tgz#b3630abd8943432f54b3f0519238e33cd7df2f73"
@@ -4559,11 +4535,6 @@ chokidar@^3.5.3, chokidar@^3.6.0:
   optionalDependencies:
     fsevents "~2.3.2"
 
-ci-info@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-2.0.0.tgz#67a9e964be31a51e15e5010d58e6f12834002f46"
-  integrity sha512-5tK7EtrZ0N+OLFMthtqOj4fI2Jeb88C4CAZPu25LDVUgXJ0A3Js4PMGqrn0JU1W0Mh1/Z8wZzYPxqUrXeBboCQ==
-
 ci-info@^3.2.0, ci-info@^3.7.0:
   version "3.9.0"
   resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-3.9.0.tgz#4279a62028a7b1f262f3473fc9605f5e218c59b4"
@@ -4879,16 +4850,6 @@ core-util-is@1.0.2:
   resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
   integrity sha512-3lqz5YjWTYnW6dlDa5TLaTCcShfar1e40rmcJVwCBJC6mWlFuj0eCHIElmG1g5kyuJ/GD+8Wn4FFCcz4gJPfaQ==
 
-cosmiconfig@^5.2.1:
-  version "5.2.1"
-  resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-5.2.1.tgz#040f726809c591e77a17c0a3626ca45b4f168b1a"
-  integrity sha512-H65gsXo1SKjf8zmrJ67eJk8aIRKV5ff2D4uKZIBZShbhGSpEmsQOPW/SKMKYhSTrqR7ufy6RP69rPogdaPh/kA==
-  dependencies:
-    import-fresh "^2.0.0"
-    is-directory "^0.3.1"
-    js-yaml "^3.13.1"
-    parse-json "^4.0.0"
-
 cosmiconfig@^6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-6.0.0.tgz#da4fee853c52f6b1e6935f41c1a2fc50bd4a9982"
@@ -6681,11 +6642,6 @@ get-intrinsic@^1.1.1, get-intrinsic@^1.1.3, get-intrinsic@^1.2.1, get-intrinsic@
     has-symbols "^1.0.3"
     hasown "^2.0.0"
 
-get-stdin@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/get-stdin/-/get-stdin-7.0.0.tgz#8d5de98f15171a125c5e516643c7a6d0ea8a96f6"
-  integrity sha512-zRKcywvrXlXsA0v0i9Io4KDRaAw7+a1ZpjRwl9Wox8PFlVCCHra7E9c4kqXCoCM9nR5tBkaTTZRBoCm60bFqTQ==
-
 get-stream@^4.0.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-4.1.0.tgz#c1b255575f3dc21d59bfc79cd3d2b46b1c3a54b5"
@@ -7075,22 +7031,10 @@ human-signals@^5.0.0:
   resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-5.0.0.tgz#42665a284f9ae0dade3ba41ebc37eb4b852f3a28"
   integrity sha512-AXcZb6vzzrFAUE61HnN4mpLqd/cSIwNQjtNWR0euPm6y0iqx3G4gOXaIDdtdDwZmhwe82LA6+zinmW4UBWVePQ==
 
-husky@^3.0.1:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/husky/-/husky-3.1.0.tgz#5faad520ab860582ed94f0c1a77f0f04c90b57c0"
-  integrity sha512-FJkPoHHB+6s4a+jwPqBudBDvYZsoQW5/HBuMSehC8qDiCe50kpcxeqFoDSlow+9I6wg47YxBoT3WxaURlrDIIQ==
-  dependencies:
-    chalk "^2.4.2"
-    ci-info "^2.0.0"
-    cosmiconfig "^5.2.1"
-    execa "^1.0.0"
-    get-stdin "^7.0.0"
-    opencollective-postinstall "^2.0.2"
-    pkg-dir "^4.2.0"
-    please-upgrade-node "^3.2.0"
-    read-pkg "^5.2.0"
-    run-node "^1.0.0"
-    slash "^3.0.0"
+husky@^9.1.6:
+  version "9.1.6"
+  resolved "https://registry.yarnpkg.com/husky/-/husky-9.1.6.tgz#e23aa996b6203ab33534bdc82306b0cf2cb07d6c"
+  integrity sha512-sqbjZKK7kf44hfdE94EoX8MZNk0n7HeW37O4YrVGCF4wzgQjp+akPAkfUK5LZ6KuR/6sqeAVuXHji+RzQgOn5A==
 
 hyperdyperid@^1.2.0:
   version "1.2.0"
@@ -7131,14 +7075,6 @@ immer@^9.0.6:
   resolved "https://registry.yarnpkg.com/immer/-/immer-9.0.21.tgz#1e025ea31a40f24fb064f1fef23e931496330176"
   integrity sha512-bc4NBHqOqSfRW7POMkHd51LvClaeMXpm8dx0e8oE2GORbq5aRK7Bxl4FyzVLdGtLmvLKL7BTDBG5ACQm4HWjTA==
 
-import-fresh@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-2.0.0.tgz#d81355c15612d386c61f9ddd3922d4304822a546"
-  integrity sha512-eZ5H8rcgYazHbKC3PG4ClHNykCSxtAhxSSEM+2mb+7evD2CKF5V7c0dNum7AdpDh0ZdICwZY9sRSn8f+KH96sg==
-  dependencies:
-    caller-path "^2.0.0"
-    resolve-from "^3.0.0"
-
 import-fresh@^3.0.0, import-fresh@^3.1.0, import-fresh@^3.2.1, import-fresh@^3.3.0:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.3.0.tgz#37162c25fcb9ebaa2e6e53d5b4d88ce17d9e0c2b"
@@ -7336,11 +7272,6 @@ is-date-object@^1.0.1, is-date-object@^1.0.5:
   dependencies:
     has-tostringtag "^1.0.0"
 
-is-directory@^0.3.1:
-  version "0.3.1"
-  resolved "https://registry.yarnpkg.com/is-directory/-/is-directory-0.3.1.tgz#61339b6f2475fc772fd9c9d83f5c8575dc154ae1"
-  integrity sha512-yVChGzahRFvbkscn2MlwGismPO12i9+znNruC5gVEntG3qu0xQMzsGg/JFbrsqDOHtHFPci+V5aP5T9I+yeKqw==
-
 is-docker@^2.0.0:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/is-docker/-/is-docker-2.2.1.tgz#33eeabe23cfe86f14bde4408a02c0cfb853acdaa"
@@ -8949,7 +8880,7 @@ node-releases@^2.0.14:
   resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.14.tgz#2ffb053bceb8b2be8495ece1ab6ce600c4461b0b"
   integrity sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw==
 
-normalize-package-data@^2.3.2, normalize-package-data@^2.5.0:
+normalize-package-data@^2.3.2:
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/normalize-package-data/-/normalize-package-data-2.5.0.tgz#e66db1838b200c1dfc233225d12cb36520e234a8"
   integrity sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==
@@ -9119,11 +9050,6 @@ open@^7.4.2:
     is-docker "^2.0.0"
     is-wsl "^2.1.1"
 
-opencollective-postinstall@^2.0.2:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/opencollective-postinstall/-/opencollective-postinstall-2.0.3.tgz#7a0fff978f6dbfa4d006238fbac98ed4198c3259"
-  integrity sha512-8AV/sCtuzUeTo8gQK5qDZzARrulB3egtLzFgteqB2tcT4Mw7B8Kt7JcDHmltjz6FOAHsvTevk70gZEbhM4ZS9Q==
-
 optionator@^0.8.3:
   version "0.8.3"
   resolved "https://registry.yarnpkg.com/optionator/-/optionator-0.8.3.tgz#84fa1d036fe9d3c7e21d99884b601167ec8fb495"
@@ -9479,20 +9405,13 @@ pirates@^4.0.1:
   resolved "https://registry.yarnpkg.com/pirates/-/pirates-4.0.6.tgz#3018ae32ecfcff6c29ba2267cbf21166ac1f36b9"
   integrity sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==
 
-pkg-dir@^4.1.0, pkg-dir@^4.2.0:
+pkg-dir@^4.1.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-4.2.0.tgz#f099133df7ede422e81d1d8448270eeb3e4261f3"
   integrity sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==
   dependencies:
     find-up "^4.0.0"
 
-please-upgrade-node@^3.2.0:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/please-upgrade-node/-/please-upgrade-node-3.2.0.tgz#aeddd3f994c933e4ad98b99d9a556efa0e2fe942"
-  integrity sha512-gQR3WpIgNIKwBMVLkpMUeR3e1/E1y42bqDQZfql+kDeXd8COYfM8PQA4X6y7a8u9Ua9FHmsrrmirW2vHs45hWg==
-  dependencies:
-    semver-compare "^1.0.0"
-
 polished@^4.2.2:
   version "4.3.1"
   resolved "https://registry.yarnpkg.com/polished/-/polished-4.3.1.tgz#5a00ae32715609f83d89f6f31d0f0261c6170548"
@@ -10045,16 +9964,6 @@ read-pkg@^4.0.1:
     parse-json "^4.0.0"
     pify "^3.0.0"
 
-read-pkg@^5.2.0:
-  version "5.2.0"
-  resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-5.2.0.tgz#7bf295438ca5a33e56cd30e053b34ee7250c93cc"
-  integrity sha512-Ug69mNOpfvKDAc2Q8DRpMjjzdtrnv9HcSMX+4VsZxD1aZ6ZzrIE7rlzXBtWTyhULSMKg076AW6WR5iZpD0JiOg==
-  dependencies:
-    "@types/normalize-package-data" "^2.4.0"
-    normalize-package-data "^2.5.0"
-    parse-json "^5.0.0"
-    type-fest "^0.6.0"
-
 readdirp@~3.6.0:
   version "3.6.0"
   resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.6.0.tgz#74a370bd857116e245b29cc97340cd431a02a6c7"
@@ -10303,11 +10212,6 @@ reselect@^4.0.0:
   resolved "https://registry.yarnpkg.com/reselect/-/reselect-4.1.8.tgz#3f5dc671ea168dccdeb3e141236f69f02eaec524"
   integrity sha512-ab9EmR80F/zQTMNeneUr4cv+jSwPJgIlvEmVwLerwrWVbpLlBuls9XHzIeTFy4cegU2NHBp3va0LKOzU5qFEYQ==
 
-resolve-from@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-3.0.0.tgz#b22c7af7d9d6881bc8b6e653335eebcb0a188748"
-  integrity sha512-GnlH6vxLymXJNMBo7XP1fJIzBFbdYt49CuTwmB/6N53t+kMPRMFKz783LlQ4tv28XoQfMWinAJX6WCGf2IlaIw==
-
 resolve-from@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-4.0.0.tgz#4abcd852ad32dd7baabfe9b40e00a36db5f392e6"
@@ -10497,11 +10401,6 @@ run-async@^3.0.0:
   resolved "https://registry.yarnpkg.com/run-async/-/run-async-3.0.0.tgz#42a432f6d76c689522058984384df28be379daad"
   integrity sha512-540WwVDOMxA6dN6We19EcT9sc3hkXPw5mzRNGM3FkdN/vtE9NFvj5lFAPNwUDmJjXidm3v7TC1cTE7t17Ulm1Q==
 
-run-node@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/run-node/-/run-node-1.0.0.tgz#46b50b946a2aa2d4947ae1d886e9856fd9cabe5e"
-  integrity sha512-kc120TBlQ3mih1LSzdAJXo4xn/GWS2ec0l3S+syHDXP9uRr0JAT8Qd3mdMuyjqCzeZktgP3try92cEgf9Nks8A==
-
 run-parallel@^1.1.9:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/run-parallel/-/run-parallel-1.2.0.tgz#66d1368da7bdf921eb9d95bd1a9229e7f21a43ee"
@@ -10605,11 +10504,6 @@ search-string@^3.1.0:
   resolved "https://registry.yarnpkg.com/search-string/-/search-string-3.1.0.tgz#3f111c6919a33de33a8e304fd5f8395c3d806ffb"
   integrity sha512-yY3b0VlaXfKi2B//34PN5AFF+GQvwme6Kj4FjggmoSBOa7B8AHfS1nYZbsrYu+IyGeYOAkF8ywL9LN9dkrOo6g==
 
-semver-compare@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/semver-compare/-/semver-compare-1.0.0.tgz#0dee216a1c941ab37e9efb1788f6afc5ff5537fc"
-  integrity sha512-YM3/ITh2MJ5MtzaM429anh+x2jiLVjqILF4m4oyQB18W7Ggea7BfqdH/wGMK7dDiMghv/6WG7znWMwUDzJiXow==
-
 "semver@2 || 3 || 4 || 5", semver@7.6.0, semver@^5.5.0, semver@^6.0.0, semver@^6.1.0, semver@^6.1.2, semver@^6.3.1, semver@^7.2.1, semver@^7.3.2, semver@^7.3.7, semver@^7.5.2, semver@^7.5.3, semver@^7.5.4, semver@^7.6.2:
   version "7.6.3"
   resolved "https://registry.yarnpkg.com/semver/-/semver-7.6.3.tgz#980f7b5550bc175fb4dc09403085627f9eb33143"
@@ -11655,11 +11549,6 @@ type-fest@^0.21.3:
   resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.21.3.tgz#d260a24b0198436e133fa26a524a6d65fa3b2e37"
   integrity sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==
 
-type-fest@^0.6.0:
-  version "0.6.0"
-  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.6.0.tgz#8d2a2370d3df886eb5c90ada1c5bf6188acf838b"
-  integrity sha512-q+MB8nYR1KDLrgr4G5yemftpMC7/QLqVndBmEEdqzmNj5dcFOO4Oo8qlwZE3ULT3+Zim1F8Kq4cBnikNhlCMlg==
-
 type-fest@^0.8.1:
   version "0.8.1"
   resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.8.1.tgz#09e249ebde851d3b1e48d27c105444667f17b83d"

From 055f35de39d99fc26e0522fc80db214f60a673a5 Mon Sep 17 00:00:00 2001
From: Banks Nussman <115251059+bnussman-akamai@users.noreply.github.com>
Date: Tue, 24 Sep 2024 12:26:18 -0400
Subject: [PATCH 46/62] change: [M3-8622] - Update Images empty state as part
 of Image Service Gen2 (#10985)

* update images empty state as part of Image Service Gen2

* update test

* Added changeset: Update Images empty state as part of Image Service Gen2

* update cypress test

* Update packages/manager/src/features/Images/ImagesLanding/ImagesLandingEmptyStateData.ts

Co-authored-by: Alban Bailly <130582365+abailly-akamai@users.noreply.github.com>

* update test

---------

Co-authored-by: Banks Nussman <banks@nussman.us>
Co-authored-by: Alban Bailly <130582365+abailly-akamai@users.noreply.github.com>
---
 .../manager/.changeset/pr-10985-changed-1727105394355.md     | 5 +++++
 .../e2e/core/images/images-empty-landing-page.spec.ts        | 2 +-
 .../src/features/Images/ImagesLanding/ImagesLanding.test.tsx | 2 +-
 .../Images/ImagesLanding/ImagesLandingEmptyStateData.ts      | 2 +-
 4 files changed, 8 insertions(+), 3 deletions(-)
 create mode 100644 packages/manager/.changeset/pr-10985-changed-1727105394355.md

diff --git a/packages/manager/.changeset/pr-10985-changed-1727105394355.md b/packages/manager/.changeset/pr-10985-changed-1727105394355.md
new file mode 100644
index 00000000000..aaffca8877d
--- /dev/null
+++ b/packages/manager/.changeset/pr-10985-changed-1727105394355.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Changed
+---
+
+Update Images empty state as part of Image Service Gen2 ([#10985](https://github.com/linode/manager/pull/10985))
diff --git a/packages/manager/cypress/e2e/core/images/images-empty-landing-page.spec.ts b/packages/manager/cypress/e2e/core/images/images-empty-landing-page.spec.ts
index f3828ba2f96..667b8feabc8 100644
--- a/packages/manager/cypress/e2e/core/images/images-empty-landing-page.spec.ts
+++ b/packages/manager/cypress/e2e/core/images/images-empty-landing-page.spec.ts
@@ -15,7 +15,7 @@ describe('Images empty landing page', () => {
 
     // confirms helper text
     cy.findByText(
-      'Store your own custom Linux images, enabling you to rapidly deploy Linode Compute Instances preconfigured with the software and settings you require.'
+      'Store custom Linux images to rapidly deploy compute instances preconfigured with what you need.'
     ).should('be.visible');
 
     // checks that guides are visible
diff --git a/packages/manager/src/features/Images/ImagesLanding/ImagesLanding.test.tsx b/packages/manager/src/features/Images/ImagesLanding/ImagesLanding.test.tsx
index 8977317fad0..b2602f268c4 100644
--- a/packages/manager/src/features/Images/ImagesLanding/ImagesLanding.test.tsx
+++ b/packages/manager/src/features/Images/ImagesLanding/ImagesLanding.test.tsx
@@ -114,7 +114,7 @@ describe('Images Landing Table', () => {
 
     await waitForElementToBeRemoved(getByTestId(loadingTestId));
     expect(
-      getByText((text) => text.includes('Store your own custom Linux images'))
+      getByText((text) => text.includes('Store custom Linux images'))
     ).toBeInTheDocument();
   });
 
diff --git a/packages/manager/src/features/Images/ImagesLanding/ImagesLandingEmptyStateData.ts b/packages/manager/src/features/Images/ImagesLanding/ImagesLandingEmptyStateData.ts
index 10b5f34a0e2..58a9e18cf74 100644
--- a/packages/manager/src/features/Images/ImagesLanding/ImagesLandingEmptyStateData.ts
+++ b/packages/manager/src/features/Images/ImagesLanding/ImagesLandingEmptyStateData.ts
@@ -11,7 +11,7 @@ import type {
 
 export const headers: ResourcesHeaders = {
   description:
-    'Store your own custom Linux images, enabling you to rapidly deploy Linode Compute Instances preconfigured with the software and settings you require.',
+    'Store custom Linux images to rapidly deploy compute instances preconfigured with what you need.',
   subtitle: '',
   title: 'Images',
 };

From 56e9c4e5584841f55fd877cad38514b3996043a5 Mon Sep 17 00:00:00 2001
From: Hana Xu <115299789+hana-linode@users.noreply.github.com>
Date: Tue, 24 Sep 2024 12:56:41 -0400
Subject: [PATCH 47/62] upcoming: [M3-8624] - Update Region description helper
 text (#10987)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Description 📝
Update region helper description text for Core and Distributed tabs

## How to test 🧪

### Prerequisites
(How to setup test environment)
- Ensure your account has the `new-dc-testing`, `new-dc-testing-gecko`, `edge_testing` and `edge_compute` customer tags
- Pull this PR and run it locally pointing to dev API

### Verification steps
(How to verify changes)
- Go to the Linode Create flow and verify the region description text in both Core and Distributed tabs
---
 .../pr-10987-upcoming-features-1727113889522.md          | 5 +++++
 .../components/SelectRegionPanel/RegionHelperText.tsx    | 9 +++++++--
 .../features/Linodes/LinodeCreatev2/TwoStepRegion.tsx    | 7 +++++++
 3 files changed, 19 insertions(+), 2 deletions(-)
 create mode 100644 packages/manager/.changeset/pr-10987-upcoming-features-1727113889522.md

diff --git a/packages/manager/.changeset/pr-10987-upcoming-features-1727113889522.md b/packages/manager/.changeset/pr-10987-upcoming-features-1727113889522.md
new file mode 100644
index 00000000000..b3d62fb7242
--- /dev/null
+++ b/packages/manager/.changeset/pr-10987-upcoming-features-1727113889522.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Update Region description helper text ([#10987](https://github.com/linode/manager/pull/10987))
diff --git a/packages/manager/src/components/SelectRegionPanel/RegionHelperText.tsx b/packages/manager/src/components/SelectRegionPanel/RegionHelperText.tsx
index ce65f36bf7f..2dbca4e1466 100644
--- a/packages/manager/src/components/SelectRegionPanel/RegionHelperText.tsx
+++ b/packages/manager/src/components/SelectRegionPanel/RegionHelperText.tsx
@@ -3,18 +3,23 @@ import * as React from 'react';
 import { Link } from 'src/components/Link';
 import { Typography } from 'src/components/Typography';
 
-import { Box, BoxProps } from '../Box';
+import { Box } from '../Box';
+
+import type { BoxProps } from '../Box';
 
 interface RegionHelperTextProps extends BoxProps {
   onClick?: () => void;
+  showCoreHelperText?: boolean;
 }
 
 export const RegionHelperText = (props: RegionHelperTextProps) => {
-  const { onClick, ...rest } = props;
+  const { onClick, showCoreHelperText, ...rest } = props;
 
   return (
     <Box {...rest}>
       <Typography data-testid="region-select-helper-test" variant="body1">
+        {showCoreHelperText &&
+          `Data centers in central locations support a robust set of cloud computing services. `}
         You can use
         {` `}
         <Link onClick={onClick} to="https://www.linode.com/speed-test/">
diff --git a/packages/manager/src/features/Linodes/LinodeCreatev2/TwoStepRegion.tsx b/packages/manager/src/features/Linodes/LinodeCreatev2/TwoStepRegion.tsx
index 67b8fac49dd..19cca071c6e 100644
--- a/packages/manager/src/features/Linodes/LinodeCreatev2/TwoStepRegion.tsx
+++ b/packages/manager/src/features/Linodes/LinodeCreatev2/TwoStepRegion.tsx
@@ -104,6 +104,7 @@ export const TwoStepRegion = (props: CombinedProps) => {
             <Box marginTop={2}>
               <RegionHelperText
                 onClick={() => sendLinodeCreateDocsEvent('Speedtest')}
+                showCoreHelperText
               />
             </Box>
             <RegionSelect
@@ -120,6 +121,12 @@ export const TwoStepRegion = (props: CombinedProps) => {
             />
           </SafeTabPanel>
           <SafeTabPanel index={1}>
+            <Box mt={2}>
+              <Typography>
+                Data centers in distributed locations enable you to place
+                workloads closer to users.
+              </Typography>
+            </Box>
             <Autocomplete
               onChange={(_, selectedOption) => {
                 if (selectedOption?.value) {

From 0820e38c882ac274d509f4bacb8c56139fd5391d Mon Sep 17 00:00:00 2001
From: jdamore-linode <97627410+jdamore-linode@users.noreply.github.com>
Date: Tue, 24 Sep 2024 14:46:47 -0400
Subject: [PATCH 48/62] test: [M3-8395] - Fix Linode delete test flake by
 fixing deletion assertion (#10999)

* Ensure Cypress waits for Linode to be deleted before proceeding with test

* Added changeset: Address Linode deletion test flakiness
---
 packages/manager/.changeset/pr-10999-tests-1727196449912.md  | 5 +++++
 .../cypress/e2e/core/linodes/smoke-delete-linode.spec.ts     | 2 +-
 2 files changed, 6 insertions(+), 1 deletion(-)
 create mode 100644 packages/manager/.changeset/pr-10999-tests-1727196449912.md

diff --git a/packages/manager/.changeset/pr-10999-tests-1727196449912.md b/packages/manager/.changeset/pr-10999-tests-1727196449912.md
new file mode 100644
index 00000000000..fb35606582c
--- /dev/null
+++ b/packages/manager/.changeset/pr-10999-tests-1727196449912.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Tests
+---
+
+Address Linode deletion test flakiness ([#10999](https://github.com/linode/manager/pull/10999))
diff --git a/packages/manager/cypress/e2e/core/linodes/smoke-delete-linode.spec.ts b/packages/manager/cypress/e2e/core/linodes/smoke-delete-linode.spec.ts
index 5520041418f..8eaec582df7 100644
--- a/packages/manager/cypress/e2e/core/linodes/smoke-delete-linode.spec.ts
+++ b/packages/manager/cypress/e2e/core/linodes/smoke-delete-linode.spec.ts
@@ -48,7 +48,7 @@ const deleteLinodeFromActionMenu = (linodeLabel: string) => {
     });
 
   cy.wait('@deleteLinode').its('response.statusCode').should('eq', 200);
-  cy.findByText(linodeLabel).should('not.exist');
+  cy.findAllByText(linodeLabel).should('not.exist');
 };
 
 const preferenceOverrides = {

From 4dd89b7a42bd84a53371930124c8056d4de6c0a6 Mon Sep 17 00:00:00 2001
From: Dmytro Chyrva <dchyrva@akamai.com>
Date: Tue, 24 Sep 2024 19:03:05 +0000
Subject: [PATCH 49/62] fix: [M3-8519] - Objects Table Refreshing Logic Fixed.
 (#10927)

---
 .../pr-10927-fixed-1726139552414.md           |  5 +++
 .../BucketDetail/BucketDetail.tsx             | 40 ++++++++++---------
 .../src/queries/object-storage/queries.ts     | 14 +++++--
 3 files changed, 36 insertions(+), 23 deletions(-)
 create mode 100644 packages/manager/.changeset/pr-10927-fixed-1726139552414.md

diff --git a/packages/manager/.changeset/pr-10927-fixed-1726139552414.md b/packages/manager/.changeset/pr-10927-fixed-1726139552414.md
new file mode 100644
index 00000000000..0c60eb271a4
--- /dev/null
+++ b/packages/manager/.changeset/pr-10927-fixed-1726139552414.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Fixed
+---
+
+Objects Table Refreshing Logic Fixed ([#10927](https://github.com/linode/manager/pull/10927))
diff --git a/packages/manager/src/features/ObjectStorage/BucketDetail/BucketDetail.tsx b/packages/manager/src/features/ObjectStorage/BucketDetail/BucketDetail.tsx
index a72be5b389b..ec2f91870a0 100644
--- a/packages/manager/src/features/ObjectStorage/BucketDetail/BucketDetail.tsx
+++ b/packages/manager/src/features/ObjectStorage/BucketDetail/BucketDetail.tsx
@@ -1,5 +1,5 @@
 import { getObjectList, getObjectURL } from '@linode/api-v4/lib/object-storage';
-import { useQueryClient } from '@tanstack/react-query';
+import { InfiniteData, useQueryClient } from '@tanstack/react-query';
 import produce from 'immer';
 import { useSnackbar } from 'notistack';
 import * as React from 'react';
@@ -21,14 +21,12 @@ import { OBJECT_STORAGE_DELIMITER } from 'src/constants';
 import { useFlags } from 'src/hooks/useFlags';
 import { useAccount } from 'src/queries/account/account';
 import {
+  getObjectBucketObjectsQueryKey,
   objectStorageQueries,
   useObjectBucketObjectsInfiniteQuery,
   useObjectStorageBuckets,
 } from 'src/queries/object-storage/queries';
-import {
-  fetchBucketAndUpdateCache,
-  prefixToQueryKey,
-} from 'src/queries/object-storage/utilities';
+import { fetchBucketAndUpdateCache } from 'src/queries/object-storage/utilities';
 import { isFeatureEnabledV2 } from 'src/utilities/accountCapabilities';
 import { sendDownloadObjectEvent } from 'src/utilities/analytics/customEventAnalytics';
 import { getQueryParamFromQueryString } from 'src/utilities/queryParams';
@@ -237,11 +235,7 @@ export const BucketDetail = (props: Props) => {
       pageParams: string[];
       pages: ObjectStorageObjectList[];
     }>(
-      [
-        ...objectStorageQueries.bucket(clusterId, bucketName)._ctx.objects
-          .queryKey,
-        ...prefixToQueryKey(prefix),
-      ],
+      getObjectBucketObjectsQueryKey(clusterId, bucketName, prefix),
       (data) => ({
         pageParams: data?.pageParams || [],
         pages,
@@ -279,7 +273,11 @@ export const BucketDetail = (props: Props) => {
   };
 
   const addOneFile = (objectName: string, sizeInBytes: number) => {
-    if (!data) {
+    const currentData = queryClient.getQueryData<
+      InfiniteData<ObjectStorageObjectList>
+    >(getObjectBucketObjectsQueryKey(clusterId, bucketName, prefix));
+
+    if (!currentData) {
       return;
     }
 
@@ -291,13 +289,13 @@ export const BucketDetail = (props: Props) => {
       size: sizeInBytes,
     };
 
-    for (let i = 0; i < data.pages.length; i++) {
-      const foundObjectIndex = data.pages[i].data.findIndex(
+    for (let i = 0; i < currentData.pages.length; i++) {
+      const foundObjectIndex = currentData.pages[i].data.findIndex(
         (_object) => _object.name === object.name
       );
       if (foundObjectIndex !== -1) {
-        const copy = [...data.pages];
-        const pageCopy = [...data.pages[i].data];
+        const copy = [...currentData.pages];
+        const pageCopy = [...currentData.pages[i].data];
 
         pageCopy[foundObjectIndex] = object;
 
@@ -309,7 +307,7 @@ export const BucketDetail = (props: Props) => {
       }
     }
 
-    const copy = [...data.pages];
+    const copy = [...currentData.pages];
     const dataCopy = [...copy[copy.length - 1].data];
 
     dataCopy.push(object);
@@ -322,7 +320,11 @@ export const BucketDetail = (props: Props) => {
   };
 
   const addOneFolder = (objectName: string) => {
-    if (!data) {
+    const currentData = queryClient.getQueryData<
+      InfiniteData<ObjectStorageObjectList>
+    >(getObjectBucketObjectsQueryKey(clusterId, bucketName, prefix));
+
+    if (!currentData) {
       return;
     }
 
@@ -334,7 +336,7 @@ export const BucketDetail = (props: Props) => {
       size: null,
     };
 
-    for (const page of data.pages) {
+    for (const page of currentData.pages) {
       if (page.data.find((object) => object.name === folder.name)) {
         // If a folder already exists in the store, invalidate that store for that specific
         // prefix. Due to how invalidateQueries works, all subdirectories also get invalidated.
@@ -349,7 +351,7 @@ export const BucketDetail = (props: Props) => {
       }
     }
 
-    const copy = [...data.pages];
+    const copy = [...currentData.pages];
     const dataCopy = [...copy[copy.length - 1].data];
 
     dataCopy.push(folder);
diff --git a/packages/manager/src/queries/object-storage/queries.ts b/packages/manager/src/queries/object-storage/queries.ts
index 83988de1cd3..09ca1d0f534 100644
--- a/packages/manager/src/queries/object-storage/queries.ts
+++ b/packages/manager/src/queries/object-storage/queries.ts
@@ -268,6 +268,15 @@ export const useDeleteBucketWithRegionMutation = () => {
   });
 };
 
+export const getObjectBucketObjectsQueryKey = (
+  clusterId: string,
+  bucket: string,
+  prefix: string
+) => [
+  ...objectStorageQueries.bucket(clusterId, bucket)._ctx.objects.queryKey,
+  ...prefixToQueryKey(prefix),
+];
+
 export const useObjectBucketObjectsInfiniteQuery = (
   clusterId: string,
   bucket: string,
@@ -282,10 +291,7 @@ export const useObjectBucketObjectsInfiniteQuery = (
         clusterId,
         params: { delimiter, marker: pageParam as string | undefined, prefix },
       }),
-    queryKey: [
-      ...objectStorageQueries.bucket(clusterId, bucket)._ctx.objects.queryKey,
-      ...prefixToQueryKey(prefix),
-    ],
+    queryKey: getObjectBucketObjectsQueryKey(clusterId, bucket, prefix),
   });
 
 export const useCreateObjectUrlMutation = (

From b549eb779ac67ed146b76b6cc4522cd456d30ec7 Mon Sep 17 00:00:00 2001
From: cpathipa <119517080+cpathipa@users.noreply.github.com>
Date: Tue, 24 Sep 2024 14:42:49 -0500
Subject: [PATCH 50/62] fix: [M3-8578] - Fix console error on Volume Create -
 Linode Config selection (#10970)

* unit test coverage for HostNameTableCell

* Revert "unit test coverage for HostNameTableCell"

This reverts commit b274baf67e27d79fd4e764607ded7c5aa755ee8b.

* fix console error in Create Volume page

* Added changeset: Fix console error on Volume Create - Linode Config selection
---
 .../.changeset/pr-10970-fixed-1726762187663.md      |  5 +++++
 .../features/Volumes/VolumeDrawer/ConfigSelect.tsx  | 13 ++++++++-----
 2 files changed, 13 insertions(+), 5 deletions(-)
 create mode 100644 packages/manager/.changeset/pr-10970-fixed-1726762187663.md

diff --git a/packages/manager/.changeset/pr-10970-fixed-1726762187663.md b/packages/manager/.changeset/pr-10970-fixed-1726762187663.md
new file mode 100644
index 00000000000..d5a0f2e50e0
--- /dev/null
+++ b/packages/manager/.changeset/pr-10970-fixed-1726762187663.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Fixed
+---
+
+Fix console error on Volume Create - Linode Config selection  ([#10970](https://github.com/linode/manager/pull/10970))
diff --git a/packages/manager/src/features/Volumes/VolumeDrawer/ConfigSelect.tsx b/packages/manager/src/features/Volumes/VolumeDrawer/ConfigSelect.tsx
index 3075ecac946..3e7ec93a784 100644
--- a/packages/manager/src/features/Volumes/VolumeDrawer/ConfigSelect.tsx
+++ b/packages/manager/src/features/Volumes/VolumeDrawer/ConfigSelect.tsx
@@ -36,12 +36,15 @@ export const ConfigSelect = React.memo((props: Props) => {
     return { label: config.label, value: config.id };
   });
 
-  if (configList?.length === 1) {
-    const newValue = configList[0].value;
-    if (value !== newValue) {
-      onChange(newValue);
+  // Use useEffect to handle the side effect
+  React.useEffect(() => {
+    if (configList?.length === 1) {
+      const newValue = configList[0].value;
+      if (value !== newValue) {
+        onChange(newValue);
+      }
     }
-  }
+  }, [configList, onChange, value]);
 
   return (
     <FormControl

From a44a17952615b41b0415ac9aef2ce05d383bd2a4 Mon Sep 17 00:00:00 2001
From: cpathipa <119517080+cpathipa@users.noreply.github.com>
Date: Tue, 24 Sep 2024 14:43:17 -0500
Subject: [PATCH 51/62] fix: [M3-8657] - Set full height to DX Tools Modal and
 add Linode API link (#10998)

* unit test coverage for HostNameTableCell

* Revert "unit test coverage for HostNameTableCell"

This reverts commit b274baf67e27d79fd4e764607ded7c5aa755ee8b.

* Add Linode API Link to DX Tools and set full height to the modal

* Added changeset: Set full height to DX Tools Modal and add Linode API link

* Update packages/manager/src/features/Linodes/LinodesCreate/ApiAwarenessModal/ApiAwarenessModal.tsx

Co-authored-by: Hussain Khalil <122488130+hkhalil-akamai@users.noreply.github.com>

---------

Co-authored-by: Hussain Khalil <122488130+hkhalil-akamai@users.noreply.github.com>
---
 .../pr-10998-fixed-1727195767338.md           |  5 +++++
 .../ApiAwarenessModal/ApiAwarenessModal.tsx   | 21 ++++++++++++++++---
 2 files changed, 23 insertions(+), 3 deletions(-)
 create mode 100644 packages/manager/.changeset/pr-10998-fixed-1727195767338.md

diff --git a/packages/manager/.changeset/pr-10998-fixed-1727195767338.md b/packages/manager/.changeset/pr-10998-fixed-1727195767338.md
new file mode 100644
index 00000000000..e1e76dafd0c
--- /dev/null
+++ b/packages/manager/.changeset/pr-10998-fixed-1727195767338.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Fixed
+---
+
+Set full height to DX Tools Modal and add Linode API link ([#10998](https://github.com/linode/manager/pull/10998))
diff --git a/packages/manager/src/features/Linodes/LinodesCreate/ApiAwarenessModal/ApiAwarenessModal.tsx b/packages/manager/src/features/Linodes/LinodesCreate/ApiAwarenessModal/ApiAwarenessModal.tsx
index 884f7104448..200909e8c96 100644
--- a/packages/manager/src/features/Linodes/LinodesCreate/ApiAwarenessModal/ApiAwarenessModal.tsx
+++ b/packages/manager/src/features/Linodes/LinodesCreate/ApiAwarenessModal/ApiAwarenessModal.tsx
@@ -122,6 +122,7 @@ export const ApiAwarenessModal = (props: ApiAwarenessModalProps) => {
         overflowX: 'hidden',
         paddingBottom: '0px',
       }}
+      fullHeight
       fullWidth
       maxWidth="sm"
       onClose={onClose}
@@ -129,9 +130,23 @@ export const ApiAwarenessModal = (props: ApiAwarenessModalProps) => {
       title="Create Linode"
     >
       <Typography sx={{ paddingBottom: '6px' }} variant="body1">
-        {isDxAdditionsFeatureEnabled
-          ? 'Create a Linode in the command line, powered by the Linode API. Select one of the methods below and paste the corresponding command into your local terminal. The values for each command have been populated with the selections made in the Cloud Manager create form.'
-          : 'Create a Linode in the command line using either cURL or the Linode CLI — both of which are powered by the Linode API. Select one of the methods below and paste the corresponding command into your local terminal. The values for each command have been populated with the selections made in the Cloud Manager create form.'}
+        {isDxAdditionsFeatureEnabled ? (
+          <>
+            Create a Linode in the command line, powered by the{' '}
+            <Link
+              onClick={() => sendApiAwarenessClickEvent('link', 'Linode API')}
+              to="https://techdocs.akamai.com/linode-api/reference/api/"
+            >
+              Linode API
+            </Link>
+            . Select one of the methods below and paste the corresponding
+            command into your local terminal. The values for each command have
+            been populated with the selections made in the Cloud Manager create
+            form.
+          </>
+        ) : (
+          'Create a Linode in the command line using either cURL or the Linode CLI — both of which are powered by the Linode API. Select one of the methods below and paste the corresponding command into your local terminal. The values for each command have been populated with the selections made in the Cloud Manager create form.'
+        )}
       </Typography>
       <StyledTabs defaultIndex={0} onChange={handleTabChange}>
         <TabList>

From 51ff822852fd0a9afa066d3107aca2ef069f3dbd Mon Sep 17 00:00:00 2001
From: corya-akamai <136115382+corya-akamai@users.noreply.github.com>
Date: Wed, 25 Sep 2024 09:07:00 -0400
Subject: [PATCH 52/62] fix: [UIE-8150]  - DBaaS empty landing page show logo
 for V2 (#10993)

---
 packages/manager/.changeset/pr-10993-fixed-1727189409908.md | 5 +++++
 .../Databases/DatabaseLanding/DatabaseEmptyState.tsx        | 6 ++++++
 2 files changed, 11 insertions(+)
 create mode 100644 packages/manager/.changeset/pr-10993-fixed-1727189409908.md

diff --git a/packages/manager/.changeset/pr-10993-fixed-1727189409908.md b/packages/manager/.changeset/pr-10993-fixed-1727189409908.md
new file mode 100644
index 00000000000..25343004bb1
--- /dev/null
+++ b/packages/manager/.changeset/pr-10993-fixed-1727189409908.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Fixed
+---
+
+DBaaS V2 logo on empty landing ([#10993](https://github.com/linode/manager/pull/10993))
diff --git a/packages/manager/src/features/Databases/DatabaseLanding/DatabaseEmptyState.tsx b/packages/manager/src/features/Databases/DatabaseLanding/DatabaseEmptyState.tsx
index 7060c149b6b..5345366f79c 100644
--- a/packages/manager/src/features/Databases/DatabaseLanding/DatabaseEmptyState.tsx
+++ b/packages/manager/src/features/Databases/DatabaseLanding/DatabaseEmptyState.tsx
@@ -13,14 +13,20 @@ import {
   linkAnalyticsEvent,
   youtubeLinkData,
 } from './DatabaseLandingEmptyStateData';
+import { useIsDatabasesEnabled } from 'src/features/Databases/utilities';
 
 export const DatabaseEmptyState = () => {
   const { push } = useHistory();
+  const { isDatabasesV2Enabled } = useIsDatabasesEnabled();
 
   const isRestricted = useRestrictedGlobalGrantCheck({
     globalGrantType: 'add_databases',
   });
 
+  if (!isDatabasesV2Enabled) {
+    headers.logo = '';
+  }
+
   return (
     <ResourcesSection
       buttonProps={[

From b1e937085586ccb36929552730b0b2f120fada32 Mon Sep 17 00:00:00 2001
From: corya-akamai <136115382+corya-akamai@users.noreply.github.com>
Date: Wed, 25 Sep 2024 09:07:27 -0400
Subject: [PATCH 53/62] fix [UIE-8007] DBaaS Summary tab display correct user
 and readonly host (#10989)

---
 .../pr-10989-fixed-1727118907870.md           |  5 ++++
 packages/api-v4/src/databases/types.ts        |  3 +-
 .../pr-10989-fixed-1727118993352.md           |  5 ++++
 packages/manager/src/factories/databases.ts   | 30 ++++++++++++++-----
 .../DatabaseSummaryConnectionDetails.tsx      | 18 +++++++----
 5 files changed, 46 insertions(+), 15 deletions(-)
 create mode 100644 packages/api-v4/.changeset/pr-10989-fixed-1727118907870.md
 create mode 100644 packages/manager/.changeset/pr-10989-fixed-1727118993352.md

diff --git a/packages/api-v4/.changeset/pr-10989-fixed-1727118907870.md b/packages/api-v4/.changeset/pr-10989-fixed-1727118907870.md
new file mode 100644
index 00000000000..910c14b85f7
--- /dev/null
+++ b/packages/api-v4/.changeset/pr-10989-fixed-1727118907870.md
@@ -0,0 +1,5 @@
+---
+'@linode/api-v4': Fixed
+---
+
+Include `standby` field in `DatabaseHosts` interface ([#10989](https://github.com/linode/manager/pull/10989))
diff --git a/packages/api-v4/src/databases/types.ts b/packages/api-v4/src/databases/types.ts
index 09ab3b816ef..57d9c60d38b 100644
--- a/packages/api-v4/src/databases/types.ts
+++ b/packages/api-v4/src/databases/types.ts
@@ -54,7 +54,8 @@ export interface DatabaseCredentials {
 
 interface DatabaseHosts {
   primary: string;
-  secondary: string;
+  secondary?: string;
+  standby?: string;
 }
 
 export interface SSLFields {
diff --git a/packages/manager/.changeset/pr-10989-fixed-1727118993352.md b/packages/manager/.changeset/pr-10989-fixed-1727118993352.md
new file mode 100644
index 00000000000..39aa10472af
--- /dev/null
+++ b/packages/manager/.changeset/pr-10989-fixed-1727118993352.md
@@ -0,0 +1,5 @@
+---
+'@linode/manager': Fixed
+---
+
+Database Detail page Summary tab display of username and read-only host ([#10989](https://github.com/linode/manager/pull/10989))
diff --git a/packages/manager/src/factories/databases.ts b/packages/manager/src/factories/databases.ts
index b3a4f1e95e9..33d95cca170 100644
--- a/packages/manager/src/factories/databases.ts
+++ b/packages/manager/src/factories/databases.ts
@@ -180,10 +180,17 @@ export const databaseInstanceFactory = Factory.Sync.makeFactory<DatabaseInstance
     ),
     created: '2021-12-09T17:15:12',
     engine: Factory.each((i) => ['mysql', 'postgresql'][i % 2] as Engine),
-    hosts: {
-      primary: 'db-mysql-primary-0.b.linodeb.net',
-      secondary: 'db-mysql-secondary-0.b.linodeb.net',
-    },
+    hosts: Factory.each((i) =>
+      adb10(i)
+        ? {
+            primary: 'db-mysql-primary-0.b.linodeb.net',
+            secondary: 'db-mysql-secondary-0.b.linodeb.net',
+          }
+        : {
+            primary: 'db-mysql-primary-0.b.linodeb.net',
+            standby: 'db-mysql-secondary-0.b.linodeb.net',
+          }
+    ),
     id: Factory.each((i) => i),
     instance_uri: '',
     label: Factory.each((i) => `example.com-database-${i}`),
@@ -213,10 +220,17 @@ export const databaseFactory = Factory.Sync.makeFactory<Database>({
   created: '2021-12-09T17:15:12',
   encrypted: false,
   engine: 'mysql',
-  hosts: {
-    primary: 'db-mysql-primary-0.b.linodeb.net',
-    secondary: 'db-mysql-secondary-0.b.linodeb.net',
-  },
+  hosts: Factory.each((i) =>
+    adb10(i)
+      ? {
+          primary: 'db-mysql-primary-0.b.linodeb.net',
+          secondary: 'db-mysql-secondary-0.b.linodeb.net',
+        }
+      : {
+          primary: 'db-mysql-primary-0.b.linodeb.net',
+          standby: 'db-mysql-secondary-0.b.linodeb.net',
+        }
+  ),
   id: Factory.each((i) => i),
   label: Factory.each((i) => `database-${i}`),
   members: {
diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSummary/DatabaseSummaryConnectionDetails.tsx b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSummary/DatabaseSummaryConnectionDetails.tsx
index 1bb6300fc95..ac0409e1b0a 100644
--- a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSummary/DatabaseSummaryConnectionDetails.tsx
+++ b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSummary/DatabaseSummaryConnectionDetails.tsx
@@ -146,6 +146,13 @@ export const DatabaseSummaryConnectionDetails = (props: Props) => {
     refetch: getDatabaseCredentials,
   } = useDatabaseCredentialsQuery(database.engine, database.id);
 
+  const username =
+    database.platform === 'rdbms-default'
+      ? 'akmadmin'
+      : database.engine === 'postgresql'
+      ? 'linpostgres'
+      : DB_ROOT_USERNAME;
+
   const password =
     showCredentials && credentials ? credentials?.password : '••••••••••';
 
@@ -191,7 +198,7 @@ export const DatabaseSummaryConnectionDetails = (props: Props) => {
 
   const disableShowBtn = ['failed', 'provisioning'].includes(database.status);
   const disableDownloadCACertificateBtn = database.status === 'provisioning';
-  // const connectionDetailsCopy = `username = ${credentials?.username}\npassword = ${credentials?.password}\nhost = ${database.host}\nport = ${database.port}\ssl = ${ssl}`;
+  const readOnlyHost = database?.hosts?.standby || database?.hosts?.secondary;
 
   const credentialsBtn = (handleClick: () => void, btnText: string) => {
     return (
@@ -235,8 +242,7 @@ export const DatabaseSummaryConnectionDetails = (props: Props) => {
       </Typography>
       <Box className={classes.connectionDetailsCtn} data-qa-connection-details>
         <Typography>
-          <span>username</span> ={' '}
-          {database.engine === 'postgresql' ? 'linpostgres' : DB_ROOT_USERNAME}
+          <span>username</span> = {username}
         </Typography>
         <Box display="flex">
           <Typography>
@@ -356,7 +362,7 @@ export const DatabaseSummaryConnectionDetails = (props: Props) => {
             </>
           )}
         </Box>
-        {database.hosts.secondary ? (
+        {readOnlyHost ? (
           <Box alignItems="center" display="flex" flexDirection="row">
             <Typography>
               {database.platform === 'rdbms-default' ? (
@@ -364,11 +370,11 @@ export const DatabaseSummaryConnectionDetails = (props: Props) => {
               ) : (
                 <span>private network host</span>
               )}
-              = {database.hosts.secondary}
+              = {readOnlyHost}
             </Typography>
             <CopyTooltip
               className={classes.inlineCopyToolTip}
-              text={database.hosts.secondary}
+              text={readOnlyHost}
             />
             <TooltipIcon
               status="help"

From 2a7be74a613e3d53b633768a4cf1cbb7f74ae9b1 Mon Sep 17 00:00:00 2001
From: Banks Nussman <115251059+bnussman-akamai@users.noreply.github.com>
Date: Wed, 25 Sep 2024 11:16:50 -0400
Subject: [PATCH 54/62] change: [M3-8614] - Update Image Upload dropzone copy
 as part of Image Service Gen2 (#10986)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* make copy update on image upload

* update tests

* Added changeset: Update Image Upload dropzone copy as part of Image Service Gen2

* update image pricing `$.10/GB` ➡️ `-zsh.10/GB`

---------

Co-authored-by: Banks Nussman <banks@nussman.us>
---
 .../pr-10986-changed-1727108550951.md         |  5 ++++
 .../ImageUploader/ImageUploader.test.tsx      | 21 ++++++++++------
 .../Uploaders/ImageUploader/ImageUploader.tsx | 22 ++++++++++------
 .../Images/ImagesCreate/CreateImageTab.tsx    |  2 +-
 .../Images/ImagesCreate/ImageUpload.tsx       | 25 ++++++-------------
 .../ImageRegions/ManageImageRegionsForm.tsx   |  2 +-
 6 files changed, 43 insertions(+), 34 deletions(-)
 create mode 100644 packages/manager/.changeset/pr-10986-changed-1727108550951.md

diff --git a/packages/manager/.changeset/pr-10986-changed-1727108550951.md b/packages/manager/.changeset/pr-10986-changed-1727108550951.md
new file mode 100644
index 00000000000..04a8e64f8bf
--- /dev/null
+++ b/packages/manager/.changeset/pr-10986-changed-1727108550951.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Changed
+---
+
+Update Image Upload dropzone copy as part of Image Service Gen2 ([#10986](https://github.com/linode/manager/pull/10986))
diff --git a/packages/manager/src/components/Uploaders/ImageUploader/ImageUploader.test.tsx b/packages/manager/src/components/Uploaders/ImageUploader/ImageUploader.test.tsx
index ae64d58a2db..4242d775ffb 100644
--- a/packages/manager/src/components/Uploaders/ImageUploader/ImageUploader.test.tsx
+++ b/packages/manager/src/components/Uploaders/ImageUploader/ImageUploader.test.tsx
@@ -13,25 +13,32 @@ describe('File Uploader', () => {
   it('properly renders the File Uploader', () => {
     const screen = renderWithTheme(<ImageUploader {...props} />);
 
-    const browseFiles = screen.getByText('Browse Files').closest('button');
+    const browseFiles = screen.getByText('Choose File').closest('button');
     expect(browseFiles).toBeVisible();
     expect(browseFiles).toBeEnabled();
-    const text = screen.getByText(
-      'You can browse your device to upload an image file or drop it here.'
-    );
-    expect(text).toBeVisible();
+
+    expect(
+      screen.getByText(
+        'An image file needs to be raw disk format (.img) that’s compressed using gzip.'
+      )
+    ).toBeVisible();
+    expect(
+      screen.getByText(
+        'The maxiumum compressed file size is 5 GB and the file can’t exceed 6 GB when uncompressed.'
+      )
+    ).toBeVisible();
   });
 
   it('disables the dropzone', () => {
     const screen = renderWithTheme(<ImageUploader {...props} disabled />);
 
-    const browseFiles = screen.getByText('Browse Files').closest('button');
+    const browseFiles = screen.getByText('Choose File').closest('button');
     expect(browseFiles).toBeVisible();
     expect(browseFiles).toBeDisabled();
     expect(browseFiles).toHaveAttribute('aria-disabled', 'true');
 
     const text = screen.getByText(
-      'You can browse your device to upload an image file or drop it here.'
+      'An image file needs to be raw disk format (.img) that’s compressed using gzip.'
     );
     expect(text).toBeVisible();
   });
diff --git a/packages/manager/src/components/Uploaders/ImageUploader/ImageUploader.tsx b/packages/manager/src/components/Uploaders/ImageUploader/ImageUploader.tsx
index 0392f8e5145..ca7fe9f7d8c 100644
--- a/packages/manager/src/components/Uploaders/ImageUploader/ImageUploader.tsx
+++ b/packages/manager/src/components/Uploaders/ImageUploader/ImageUploader.tsx
@@ -1,7 +1,7 @@
 import { styled } from '@mui/material';
 import { Duration } from 'luxon';
 import * as React from 'react';
-import { DropzoneProps, useDropzone } from 'react-dropzone';
+import { useDropzone } from 'react-dropzone';
 
 import { BarPercent } from 'src/components/BarPercent';
 import { Box } from 'src/components/Box';
@@ -12,6 +12,7 @@ import { MAX_FILE_SIZE_IN_BYTES } from 'src/components/Uploaders/reducer';
 import { readableBytes } from 'src/utilities/unitConversions';
 
 import type { AxiosProgressEvent } from 'axios';
+import type { DropzoneProps } from 'react-dropzone';
 
 interface Props extends Partial<DropzoneProps> {
   /**
@@ -45,18 +46,25 @@ export const ImageUploader = React.memo((props: Props) => {
   return (
     <Dropzone active={isDragActive} {...getRootProps()}>
       <input {...getInputProps()} />
-      <Box display="flex" justifyContent="center">
+      <Stack alignItems="center" justifyContent="center" textAlign="center">
         {acceptedFiles.length === 0 && (
-          <Typography variant="subtitle2">
-            You can browse your device to upload an image file or drop it here.
-          </Typography>
+          <>
+            <Typography variant="subtitle2">
+              An image file needs to be raw disk format (.img) that&rsquo;s
+              compressed using gzip.
+            </Typography>
+            <Typography variant="subtitle2">
+              The maxiumum compressed file size is 5 GB and the file can&rsquo;t
+              exceed 6 GB when uncompressed.
+            </Typography>
+          </>
         )}
         {acceptedFiles.map((file) => (
           <Typography key={file.name} variant="subtitle2">
             {file.name} ({readableBytes(file.size, { base10: true }).formatted})
           </Typography>
         ))}
-      </Box>
+      </Stack>
       {isUploading && (
         <Stack gap={1}>
           <Box width="100%">
@@ -82,7 +90,7 @@ export const ImageUploader = React.memo((props: Props) => {
       {!isUploading && (
         <Box display="flex" justifyContent="center">
           <Button buttonType="primary" disabled={dropzoneProps.disabled}>
-            Browse Files
+            Choose File
           </Button>
         </Box>
       )}
diff --git a/packages/manager/src/features/Images/ImagesCreate/CreateImageTab.tsx b/packages/manager/src/features/Images/ImagesCreate/CreateImageTab.tsx
index 5c78d7b4ad0..71a988f494a 100644
--- a/packages/manager/src/features/Images/ImagesCreate/CreateImageTab.tsx
+++ b/packages/manager/src/features/Images/ImagesCreate/CreateImageTab.tsx
@@ -189,7 +189,7 @@ export const CreateImageTab = () => {
           <Stack spacing={2}>
             <Typography variant="h2">Select Linode & Disk</Typography>
             <Typography sx={{ maxWidth: { md: '80%', sm: '100%' } }}>
-              Custom images are billed monthly, at $.10/GB. The disk you target
+              Custom images are billed monthly, at $0.10/GB. The disk you target
               for an image needs to meet specific{' '}
               <Link to="https://techdocs.akamai.com/cloud-computing/docs/capture-an-image">
                 requirements
diff --git a/packages/manager/src/features/Images/ImagesCreate/ImageUpload.tsx b/packages/manager/src/features/Images/ImagesCreate/ImageUpload.tsx
index 03c0a2fcadd..494b5d5a2bf 100644
--- a/packages/manager/src/features/Images/ImagesCreate/ImageUpload.tsx
+++ b/packages/manager/src/features/Images/ImagesCreate/ImageUpload.tsx
@@ -40,14 +40,14 @@ import { readableBytes } from 'src/utilities/unitConversions';
 
 import { EUAgreementCheckbox } from '../../Account/Agreements/EUAgreementCheckbox';
 import { getRestrictedResourceText } from '../../Account/utils';
+import { uploadImageFile } from '../requests';
 import { ImageUploadSchema, recordImageAnalytics } from './ImageUpload.utils';
-import {
+import { ImageUploadCLIDialog } from './ImageUploadCLIDialog';
+
+import type {
   ImageUploadFormData,
   ImageUploadNavigationState,
 } from './ImageUpload.utils';
-import { ImageUploadCLIDialog } from './ImageUploadCLIDialog';
-import { uploadImageFile } from '../requests';
-
 import type { AxiosError, AxiosProgressEvent } from 'axios';
 
 export const ImageUpload = () => {
@@ -194,9 +194,9 @@ export const ImageUpload = () => {
               Image Details
             </Typography>
             <Typography>
-              Custom images are billed monthly, at $.10/GB. An uploaded image
+              Custom images are billed monthly, at $0.10/GB. An uploaded image
               file needs to meet specific{' '}
-              <Link to="https://techdocs.akamai.com/cloud-computing/docs/upload-an-image">
+              <Link to="https://techdocs.akamai.com/cloud-computing/docs/upload-an-image#requirements-and-considerations">
                 requirements
               </Link>
               .
@@ -331,17 +331,6 @@ export const ImageUpload = () => {
                 variant="error"
               />
             )}
-            <Notice spacingBottom={0} variant="warning">
-              <Typography>
-                Image files must be raw disk images (.img) compressed using gzip
-                (.gz). The maximum file size is 5 GB (compressed) and maximum
-                image size is 6 GB (uncompressed).
-              </Typography>
-            </Notice>
-            <Typography sx={{ paddingBlock: 2 }}>
-              Custom Images are billed at $0.10/GB per month based on the
-              uncompressed image size.
-            </Typography>
             <Controller
               render={({ field }) => (
                 <ImageUploader
@@ -379,8 +368,8 @@ export const ImageUpload = () => {
           <Box display="flex" gap={1} justifyContent="flex-end">
             <Button
               buttonType="outlined"
-              onClick={() => setLinodeCLIModalOpen(true)}
               disabled={isImageCreateRestricted}
+              onClick={() => setLinodeCLIModalOpen(true)}
             >
               Upload Using Command Line
             </Button>
diff --git a/packages/manager/src/features/Images/ImagesLanding/ImageRegions/ManageImageRegionsForm.tsx b/packages/manager/src/features/Images/ImagesLanding/ImageRegions/ManageImageRegionsForm.tsx
index 3cc6a136f7c..e33eb89a91a 100644
--- a/packages/manager/src/features/Images/ImagesLanding/ImageRegions/ManageImageRegionsForm.tsx
+++ b/packages/manager/src/features/Images/ImagesLanding/ImageRegions/ManageImageRegionsForm.tsx
@@ -103,7 +103,7 @@ export const ManageImageReplicasForm = (props: Props) => {
         <Notice text={errors.root.message} variant="error" />
       )}
       <Typography>
-        Custom images are billed monthly, at $.10/GB. Check out{' '}
+        Custom images are billed monthly, at $0.10/GB. Check out{' '}
         <Link to="https://www.linode.com/docs/guides/check-and-clean-linux-disk-space/">
           this guide
         </Link>{' '}

From cb2408a93bcdcc500088907d3d00bb9a5365dd6f Mon Sep 17 00:00:00 2001
From: mpolotsk-akamai <157619599+mpolotsk-akamai@users.noreply.github.com>
Date: Wed, 25 Sep 2024 17:31:23 +0200
Subject: [PATCH 55/62] fix: [UIE-8146] - DBaaS V2 bug fix (#10980)

* fix: [UIE-8146] - DBaaS V2 bug fix

* Add changesets for apiv4 and validation packages

* Update packages/manager/.changeset/pr-10980-fixed-1726845381695.md

* fix: [UIE-8146] - review fix

---------

Co-authored-by: mjac0bs <mjacobs@akamai.com>
Co-authored-by: Mariah Jacobs <114685994+mjac0bs@users.noreply.github.com>
---
 .../pr-10980-changed-1726868220865.md         |  5 +++
 packages/api-v4/src/databases/types.ts        |  6 +--
 .../pr-10980-fixed-1726845381695.md           |  5 +++
 .../DatabaseCreate/DatabaseCreate.tsx         | 40 ++++++++++++-------
 .../DatabaseSettings/MaintenanceWindow.tsx    |  2 +-
 .../DatabaseStatusDisplay.test.tsx            | 34 ++++++++++++----
 .../DatabaseDetail/DatabaseStatusDisplay.tsx  |  7 ++--
 packages/manager/src/mocks/serverHandlers.ts  |  3 +-
 .../pr-10980-changed-1726868115893.md         |  5 +++
 packages/validation/src/databases.schema.ts   |  4 +-
 10 files changed, 79 insertions(+), 32 deletions(-)
 create mode 100644 packages/api-v4/.changeset/pr-10980-changed-1726868220865.md
 create mode 100644 packages/manager/.changeset/pr-10980-fixed-1726845381695.md
 create mode 100644 packages/validation/.changeset/pr-10980-changed-1726868115893.md

diff --git a/packages/api-v4/.changeset/pr-10980-changed-1726868220865.md b/packages/api-v4/.changeset/pr-10980-changed-1726868220865.md
new file mode 100644
index 00000000000..b3d64c2dd7f
--- /dev/null
+++ b/packages/api-v4/.changeset/pr-10980-changed-1726868220865.md
@@ -0,0 +1,5 @@
+---
+"@linode/api-v4": Changed
+---
+
+Make `replication_type` and `replication_commit_type` optional in MySQL and Postgres interfaces ([#10980](https://github.com/linode/manager/pull/10980))
diff --git a/packages/api-v4/src/databases/types.ts b/packages/api-v4/src/databases/types.ts
index 57d9c60d38b..71e0f2d9a64 100644
--- a/packages/api-v4/src/databases/types.ts
+++ b/packages/api-v4/src/databases/types.ts
@@ -157,7 +157,7 @@ export interface BaseDatabase {
 }
 
 export interface MySQLDatabase extends BaseDatabase {
-  replication_type: MySQLReplicationType;
+  replication_type?: MySQLReplicationType;
 }
 
 export type PostgresReplicationType = 'none' | 'synch' | 'asynch';
@@ -170,8 +170,8 @@ type ReplicationCommitTypes =
   | 'off';
 
 export interface PostgresDatabase extends BaseDatabase {
-  replication_type: PostgresReplicationType;
-  replication_commit_type: ReplicationCommitTypes;
+  replication_type?: PostgresReplicationType;
+  replication_commit_type?: ReplicationCommitTypes;
 }
 
 type MongoStorageEngine = 'wiredtiger' | 'mmapv1';
diff --git a/packages/manager/.changeset/pr-10980-fixed-1726845381695.md b/packages/manager/.changeset/pr-10980-fixed-1726845381695.md
new file mode 100644
index 00000000000..b9fb082bfa9
--- /dev/null
+++ b/packages/manager/.changeset/pr-10980-fixed-1726845381695.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Fixed
+---
+
+Incorrect timezone in Database Maintenance Window tooltip, inaccurate Resize status of Database, and unneeded `replication_type` in  v2 `createPayload` ([#10980](https://github.com/linode/manager/pull/10980))
diff --git a/packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreate.tsx b/packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreate.tsx
index 716a4d46a36..87887c34e03 100644
--- a/packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreate.tsx
+++ b/packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreate.tsx
@@ -277,7 +277,9 @@ const DatabaseCreate = () => {
       ...values,
       allow_list: _allow_list,
     };
-
+    if (isDatabasesV2Beta) {
+      delete createPayload.replication_type;
+    }
     try {
       const response = await createDatabase(createPayload);
       history.push(`/databases/${response.engine}/${response.id}`);
@@ -459,17 +461,26 @@ const DatabaseCreate = () => {
       'cluster_size',
       values.cluster_size < 1 ? 3 : values.cluster_size
     );
-    setFieldValue(
-      'replication_type',
-      determineReplicationType(values.cluster_size, values.engine)
-    );
-    setFieldValue(
-      'replication_commit_type',
-      determineReplicationCommitType(values.engine)
-    );
+    if (!isDatabasesV2Enabled) {
+      setFieldValue(
+        'replication_type',
+        determineReplicationType(values.cluster_size, values.engine)
+      );
+      setFieldValue(
+        'replication_commit_type',
+        determineReplicationCommitType(values.engine)
+      );
+    }
     setFieldValue('storage_engine', determineStorageEngine(values.engine));
     setFieldValue('compression_type', determineCompressionType(values.engine));
-  }, [dbtypes, setFieldValue, values.cluster_size, values.type, values.engine]);
+  }, [
+    dbtypes,
+    setFieldValue,
+    values.cluster_size,
+    values.type,
+    values.engine,
+    isDatabasesV2Enabled,
+  ]);
 
   if (regionsLoading || !regionsData || enginesLoading || typesLoading) {
     return <CircleProgress />;
@@ -580,10 +591,11 @@ const DatabaseCreate = () => {
           <FormControl
             onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
               setFieldValue('cluster_size', +e.target.value);
-              setFieldValue(
-                'replication_type',
-                +e.target.value === 1 ? 'none' : 'semi_synch'
-              );
+              !isDatabasesV2Enabled &&
+                setFieldValue(
+                  'replication_type',
+                  +e.target.value === 1 ? 'none' : 'semi_synch'
+                );
             }}
             data-testid="database-nodes"
           >
diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/MaintenanceWindow.tsx b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/MaintenanceWindow.tsx
index ce32afc346e..753c2959ff5 100644
--- a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/MaintenanceWindow.tsx
+++ b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/MaintenanceWindow.tsx
@@ -430,7 +430,7 @@ const weekSelectionMap = [
 ];
 
 const utcOffsetText = (utcOffsetInHours: number) => {
-  return utcOffsetInHours < 0
+  return utcOffsetInHours <= 0
     ? `+${Math.abs(utcOffsetInHours)}`
     : `-${utcOffsetInHours}`;
 };
diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseStatusDisplay.test.tsx b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseStatusDisplay.test.tsx
index feb25df224d..a4858793f31 100644
--- a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseStatusDisplay.test.tsx
+++ b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseStatusDisplay.test.tsx
@@ -1,35 +1,53 @@
 import React from 'react';
-import { DatabaseStatusDisplay } from '../DatabaseDetail/DatabaseStatusDisplay';
-import { mockMatchMedia, renderWithTheme } from 'src/utilities/testHelpers';
+
 import { databaseFactory } from 'src/factories';
 import { entityFactory, eventFactory } from 'src/factories/events';
+import { mockMatchMedia, renderWithTheme } from 'src/utilities/testHelpers';
+
+import { DatabaseStatusDisplay } from '../DatabaseDetail/DatabaseStatusDisplay';
 beforeAll(() => mockMatchMedia());
 
 describe('DatabaseStatusDisplay component', () => {
-  it(`renders status 'resizing' with percentage when recent event status is 'started' or 'scheduled'`, () => {
+  it(`should render status 'resizing' with percentage when recent event status is 'started'`, () => {
     const mockEvent = eventFactory.build({
       action: 'database_resize',
-      percent_complete: 50,
       entity: entityFactory.build({ id: 1, type: 'database' }),
+      percent_complete: 50,
+      status: 'started',
     });
     const database = databaseFactory.build({ id: 1, status: 'resizing' });
 
     const { getByText } = renderWithTheme(
-      <DatabaseStatusDisplay events={[mockEvent]} database={database} />
+      <DatabaseStatusDisplay database={database} events={[mockEvent]} />
     );
     expect(getByText('Resizing (50%)')).toBeInTheDocument();
   });
 
-  it(`renders status 'active' when recent event status is 'finished' `, () => {
+  it(`should render status 'resizing' when recent event status is 'scheduled' `, () => {
+    const mockEvent = eventFactory.build({
+      action: 'database_resize',
+      entity: entityFactory.build({ id: 1, type: 'database' }),
+      percent_complete: 50,
+      status: 'scheduled',
+    });
+    const database = databaseFactory.build({ id: 1, status: 'resizing' });
+
+    const { getByText } = renderWithTheme(
+      <DatabaseStatusDisplay database={database} events={[mockEvent]} />
+    );
+
+    expect(getByText('Resizing (50%)')).toBeInTheDocument();
+  });
+  it(`should render status 'active' when recent event status is 'finished' `, () => {
     const mockEvent = eventFactory.build({
       action: 'database_resize',
-      status: 'finished',
       entity: entityFactory.build({ id: 1, type: 'database' }),
+      status: 'finished',
     });
     const database = databaseFactory.build({ id: 1, status: 'active' });
 
     const { getByText } = renderWithTheme(
-      <DatabaseStatusDisplay events={[mockEvent]} database={database} />
+      <DatabaseStatusDisplay database={database} events={[mockEvent]} />
     );
 
     expect(getByText('Active')).toBeInTheDocument();
diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseStatusDisplay.tsx b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseStatusDisplay.tsx
index 5ee8c9f33f7..d2907c5360b 100644
--- a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseStatusDisplay.tsx
+++ b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseStatusDisplay.tsx
@@ -37,10 +37,11 @@ export const DatabaseStatusDisplay = (props: Props) => {
   let progress: number | undefined;
   let displayedStatus;
 
-  if (
+  const isResizing =
     recentEvent?.action === 'database_resize' &&
-    (recentEvent?.status === 'started' || recentEvent?.status === 'scheduled')
-  ) {
+    (recentEvent?.status === 'started' || recentEvent?.status === 'scheduled');
+
+  if (isResizing) {
     progress = recentEvent?.percent_complete ?? 0;
     displayedStatus = (
       <>
diff --git a/packages/manager/src/mocks/serverHandlers.ts b/packages/manager/src/mocks/serverHandlers.ts
index 221d57683d4..2bba795ae1d 100644
--- a/packages/manager/src/mocks/serverHandlers.ts
+++ b/packages/manager/src/mocks/serverHandlers.ts
@@ -100,12 +100,13 @@ import { accountLoginFactory } from 'src/factories/accountLogin';
 import { accountUserFactory } from 'src/factories/accountUsers';
 import { grantFactory, grantsFactory } from 'src/factories/grants';
 import { LinodeKernelFactory } from 'src/factories/linodeKernel';
-import { pickRandom } from 'src/utilities/random';
 import { getStorage } from 'src/utilities/storage';
 
 const getRandomWholeNumber = (min: number, max: number) =>
   Math.floor(Math.random() * (max - min + 1) + min);
 
+import { pickRandom } from 'src/utilities/random';
+
 import type {
   AccountMaintenance,
   CreateObjectStorageKeyPayload,
diff --git a/packages/validation/.changeset/pr-10980-changed-1726868115893.md b/packages/validation/.changeset/pr-10980-changed-1726868115893.md
new file mode 100644
index 00000000000..9ec7d32d0f5
--- /dev/null
+++ b/packages/validation/.changeset/pr-10980-changed-1726868115893.md
@@ -0,0 +1,5 @@
+---
+"@linode/validation": Changed
+---
+
+Make `replication_type` and `replication_commit_type` optional in `databases.schema.ts` ([#10980](https://github.com/linode/manager/pull/10980))
diff --git a/packages/validation/src/databases.schema.ts b/packages/validation/src/databases.schema.ts
index 61d3009008c..4830427c621 100644
--- a/packages/validation/src/databases.schema.ts
+++ b/packages/validation/src/databases.schema.ts
@@ -25,14 +25,14 @@ export const createDatabaseSchema = object({
         is: (engine: string) => Boolean(engine.match(/postgres/)),
         then: string().oneOf(['none', 'synch', 'asynch']),
       })
-      .required('Replication Type is required'),
+      .optional(),
     otherwise: string().notRequired().nullable(true),
   }),
   replication_commit_type: string().when('engine', {
     is: (engine: string) => Boolean(engine.match(/postgres/)),
     then: string()
       .oneOf(['off', 'on', 'local', 'remote_write', 'remote_apply'])
-      .required(),
+      .optional(),
     otherwise: string().notRequired().nullable(true),
   }),
   storage_engine: string().when('engine', {

From fdca0e4e5572692cb764e005c67b9e909eca46cc Mon Sep 17 00:00:00 2001
From: corya-akamai <136115382+corya-akamai@users.noreply.github.com>
Date: Wed, 25 Sep 2024 12:18:28 -0400
Subject: [PATCH 56/62] fix [UIE-8009] - DBaaS backups disable invalid dates,
 avoid unnecessary API call, remove custom label (#10988)

---
 .../pr-10988-changed-1727197910740.md         |  5 ++++
 packages/api-v4/src/databases/databases.ts    |  7 ++---
 .../pr-10988-fixed-1727119069361.md           |  5 ++++
 .../DatabaseBackups/DatabaseBackups.test.tsx  | 30 +++++++++++++++++++
 .../DatabaseBackups/DatabaseBackups.tsx       | 14 +++++++--
 .../RestoreLegacyFromBackupDialog.tsx         |  8 +++--
 .../RestoreNewFromBackupDialog.tsx            |  5 ++--
 .../src/features/Databases/utilities.test.ts  |  4 +--
 .../src/features/Databases/utilities.ts       |  7 +++--
 .../src/queries/databases/databases.ts        | 22 ++++++++------
 10 files changed, 81 insertions(+), 26 deletions(-)
 create mode 100644 packages/api-v4/.changeset/pr-10988-changed-1727197910740.md
 create mode 100644 packages/manager/.changeset/pr-10988-fixed-1727119069361.md

diff --git a/packages/api-v4/.changeset/pr-10988-changed-1727197910740.md b/packages/api-v4/.changeset/pr-10988-changed-1727197910740.md
new file mode 100644
index 00000000000..4b5811bc5bb
--- /dev/null
+++ b/packages/api-v4/.changeset/pr-10988-changed-1727197910740.md
@@ -0,0 +1,5 @@
+---
+"@linode/api-v4": Changed
+---
+
+DBaaS restore method name ([#10988](https://github.com/linode/manager/pull/10988))
diff --git a/packages/api-v4/src/databases/databases.ts b/packages/api-v4/src/databases/databases.ts
index b8a236743a8..7396c890a6e 100644
--- a/packages/api-v4/src/databases/databases.ts
+++ b/packages/api-v4/src/databases/databases.ts
@@ -244,13 +244,12 @@ export const legacyRestoreWithBackup = (
   );
 
 /**
- * newRestoreWithBackup for the New Database
+ * restoreWithBackup for the New Database
  *
  * Fully restore a backup to the cluster
  */
-export const newRestoreWithBackup = (
+export const restoreWithBackup = (
   engine: Engine,
-  label: string,
   fork: {
     source: number;
     restore_time?: string;
@@ -259,7 +258,7 @@ export const newRestoreWithBackup = (
   Request<{}>(
     setURL(`${API_ROOT}/databases/${encodeURIComponent(engine)}/instances`),
     setMethod('POST'),
-    setData({ fork, label })
+    setData({ fork })
   );
 
 /**
diff --git a/packages/manager/.changeset/pr-10988-fixed-1727119069361.md b/packages/manager/.changeset/pr-10988-fixed-1727119069361.md
new file mode 100644
index 00000000000..91474c8e759
--- /dev/null
+++ b/packages/manager/.changeset/pr-10988-fixed-1727119069361.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Fixed
+---
+
+DBaaS backups disable invalid dates ([#10988](https://github.com/linode/manager/pull/10988))
diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseBackups/DatabaseBackups.test.tsx b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseBackups/DatabaseBackups.test.tsx
index dc2fc73e58c..081dbc98cf3 100644
--- a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseBackups/DatabaseBackups.test.tsx
+++ b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseBackups/DatabaseBackups.test.tsx
@@ -95,6 +95,36 @@ describe('Database Backups', () => {
     });
   });
 
+  it('should disable the restore button if no oldest_restore_time is returned', async () => {
+    const mockDatabase = databaseFactory.build({
+      oldest_restore_time: undefined,
+      platform: 'rdbms-default',
+    });
+    const backups = databaseBackupFactory.buildList(7);
+
+    server.use(
+      http.get('*/profile', () => {
+        return HttpResponse.json(profileFactory.build({ timezone: 'utc' }));
+      }),
+      http.get('*/databases/:engine/instances/:id', () => {
+        return HttpResponse.json(mockDatabase);
+      }),
+      http.get('*/databases/:engine/instances/:id/backups', () => {
+        return HttpResponse.json(makeResourcePage(backups));
+      })
+    );
+
+    const { findAllByText } = renderWithTheme(
+      <DatabaseBackups disabled={true} />
+    );
+    const buttonSpans = await findAllByText('Restore');
+    expect(buttonSpans.length).toEqual(1);
+    buttonSpans.forEach((span: HTMLSpanElement) => {
+      const button = span.closest('button');
+      expect(button).toBeDisabled();
+    });
+  });
+
   it('should enable the restore button if disabled = false', async () => {
     const mockDatabase = databaseFactory.build({
       platform: 'rdbms-legacy',
diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseBackups/DatabaseBackups.tsx b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseBackups/DatabaseBackups.tsx
index c1216fb7ae8..35aafb99e5c 100644
--- a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseBackups/DatabaseBackups.tsx
+++ b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseBackups/DatabaseBackups.tsx
@@ -10,6 +10,7 @@ import { Box } from 'src/components/Box';
 import { Button } from 'src/components/Button/Button';
 import { Divider } from 'src/components/Divider';
 import Select from 'src/components/EnhancedSelect/Select';
+import { Notice } from 'src/components/Notice/Notice';
 import { Paper } from 'src/components/Paper';
 import { Table } from 'src/components/Table';
 import { TableBody } from 'src/components/TableBody';
@@ -71,13 +72,13 @@ export const DatabaseBackups = (props: Props) => {
     isLoading: isDatabaseLoading,
   } = useDatabaseQuery(engine, id);
 
-  const isNewDatabase = database?.platform === 'rdbms-default';
+  const isDefaultDatabase = database?.platform === 'rdbms-default';
 
   const {
     data: backups,
     error: backupsError,
     isLoading: isBackupsLoading,
-  } = useDatabaseBackupsQuery(engine, id);
+  } = useDatabaseBackupsQuery(engine, id, !isDefaultDatabase);
 
   const { handleOrderChange, order, orderBy } = useOrder({
     order: 'desc',
@@ -132,6 +133,10 @@ export const DatabaseBackups = (props: Props) => {
     ? DateTime.fromISO(database.oldest_restore_time)
     : null;
 
+  const unableToRestoreCopy = !oldestBackup
+    ? 'You can restore a backup after the first backup is completed.'
+    : '';
+
   const onRestoreNewDatabase = (selectedDate: DateTime | null) => {
     const day = selectedDate?.toISODate();
     const time = selectedTime?.toISOTime({ includeOffset: false });
@@ -143,7 +148,7 @@ export const DatabaseBackups = (props: Props) => {
     setIsRestoreDialogOpen(true);
   };
 
-  return isNewDatabase ? (
+  return isDefaultDatabase ? (
     <Paper style={{ marginTop: 16 }}>
       <Typography variant="h2">Summary</Typography>
       <StyledTypography>
@@ -183,6 +188,9 @@ export const DatabaseBackups = (props: Props) => {
         Select a date and time within the last 10 days you want to create a fork
         from.
       </StyledTypography>
+      {unableToRestoreCopy && (
+        <Notice spacingTop={16} text={unableToRestoreCopy} variant="info" />
+      )}
       <Grid container justifyContent="flex-start" mt={2}>
         <Grid item lg={3} md={4} xs={12}>
           <Typography variant="h3">Date</Typography>
diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseBackups/RestoreLegacyFromBackupDialog.tsx b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseBackups/RestoreLegacyFromBackupDialog.tsx
index 59686312813..63f9315ae91 100644
--- a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseBackups/RestoreLegacyFromBackupDialog.tsx
+++ b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseBackups/RestoreLegacyFromBackupDialog.tsx
@@ -5,7 +5,7 @@ import { useHistory } from 'react-router-dom';
 import { Notice } from 'src/components/Notice/Notice';
 import { TypeToConfirmDialog } from 'src/components/TypeToConfirmDialog/TypeToConfirmDialog';
 import { Typography } from 'src/components/Typography';
-import { useRestoreFromBackupMutation } from 'src/queries/databases/databases';
+import { useLegacyRestoreFromBackupMutation } from 'src/queries/databases/databases';
 import { useProfile } from 'src/queries/profile/profile';
 import { getAPIErrorOrDefault } from 'src/utilities/errorUtils';
 import { formatDate } from 'src/utilities/formatDate';
@@ -30,7 +30,11 @@ export const RestoreLegacyFromBackupDialog = (props: Props) => {
     error,
     isPending,
     mutateAsync: restore,
-  } = useRestoreFromBackupMutation(database.engine, database.id, backup?.id);
+  } = useLegacyRestoreFromBackupMutation(
+    database.engine,
+    database.id,
+    backup?.id
+  );
 
   const handleRestoreDatabase = () => {
     restore().then(() => {
diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseBackups/RestoreNewFromBackupDialog.tsx b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseBackups/RestoreNewFromBackupDialog.tsx
index 5b4c4082d19..ada23f9fe6e 100644
--- a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseBackups/RestoreNewFromBackupDialog.tsx
+++ b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseBackups/RestoreNewFromBackupDialog.tsx
@@ -6,7 +6,7 @@ import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel';
 import { Dialog } from 'src/components/Dialog/Dialog';
 import { Notice } from 'src/components/Notice/Notice';
 import { Typography } from 'src/components/Typography';
-import { useNewRestoreFromBackupMutation } from 'src/queries/databases/databases';
+import { useRestoreFromBackupMutation } from 'src/queries/databases/databases';
 import { getAPIErrorOrDefault } from 'src/utilities/errorUtils';
 
 import type { Database } from '@linode/api-v4/lib/databases';
@@ -28,9 +28,8 @@ export const RestoreNewFromBackupDialog = (props: Props) => {
     restoreTime &&
     `${restoreTime?.split('T')[0]} ${restoreTime?.split('T')[1].slice(0, 5)}`;
 
-  const { error, mutateAsync: restore } = useNewRestoreFromBackupMutation(
+  const { error, mutateAsync: restore } = useRestoreFromBackupMutation(
     database.engine,
-    `${database.label}(FORK ${formatedDate})`,
     {
       restore_time: restoreTime,
       source: database.id,
diff --git a/packages/manager/src/features/Databases/utilities.test.ts b/packages/manager/src/features/Databases/utilities.test.ts
index 2ad6ad7eced..814e3a2fb07 100644
--- a/packages/manager/src/features/Databases/utilities.test.ts
+++ b/packages/manager/src/features/Databases/utilities.test.ts
@@ -135,8 +135,8 @@ describe('isOutsideBackupTimeframe', () => {
     expect(isOutsideBackupTimeframe(date, oldestBackup)).toBe(false);
   });
 
-  it('should return false if there is no oldest backup', () => {
+  it('should return true if there is no oldest backup', () => {
     const date = DateTime.now().minus({ days: 3 });
-    expect(isOutsideBackupTimeframe(date, null)).toBe(false);
+    expect(isOutsideBackupTimeframe(date, null)).toBe(true);
   });
 });
diff --git a/packages/manager/src/features/Databases/utilities.ts b/packages/manager/src/features/Databases/utilities.ts
index fea1824df60..039d5422f16 100644
--- a/packages/manager/src/features/Databases/utilities.ts
+++ b/packages/manager/src/features/Databases/utilities.ts
@@ -57,7 +57,7 @@ export const useIsDatabasesEnabled = () => {
  * Checks if a given date is outside the timeframe between the oldest backup and today.
  *
  * @param {DateTime} date - The date you want to check.
- * @param {DateTime | null} oldestBackup - The date of the oldest backup. If there are no backups (i.e., `null`), the function will return `false`.
+ * @param {DateTime | null} oldestBackup - The date of the oldest backup. If there are no backups (i.e., `null`), the function will return `true`.
  * @returns {boolean}
  *   - `true` if the date is before the oldest backup or after today.
  *   - `false` if the date is within the range between the oldest backup and today.
@@ -66,10 +66,11 @@ export const isOutsideBackupTimeframe = (
   date: DateTime,
   oldestBackup: DateTime | null
 ) => {
-  const today = DateTime.now().startOf('day');
   if (!oldestBackup) {
-    return false;
+    return true;
   }
+
+  const today = DateTime.now().startOf('day');
   const backupStart = oldestBackup.startOf('day');
   const dateStart = date.startOf('day');
 
diff --git a/packages/manager/src/queries/databases/databases.ts b/packages/manager/src/queries/databases/databases.ts
index 65f602aa312..e754c51abda 100644
--- a/packages/manager/src/queries/databases/databases.ts
+++ b/packages/manager/src/queries/databases/databases.ts
@@ -6,8 +6,8 @@ import {
   getDatabases,
   getEngineDatabase,
   legacyRestoreWithBackup,
-  newRestoreWithBackup,
   resetDatabaseCredentials,
+  restoreWithBackup,
   updateDatabase,
 } from '@linode/api-v4/lib/databases';
 import { createQueryKeys } from '@lukemorales/query-key-factory';
@@ -160,10 +160,15 @@ export const useDeleteDatabaseMutation = (engine: Engine, id: number) => {
   });
 };
 
-export const useDatabaseBackupsQuery = (engine: Engine, id: number) =>
-  useQuery<ResourcePage<DatabaseBackup>, APIError[]>(
-    databaseQueries.database(engine, id)._ctx.backups
-  );
+export const useDatabaseBackupsQuery = (
+  engine: Engine,
+  id: number,
+  enabled: boolean = false
+) =>
+  useQuery<ResourcePage<DatabaseBackup>, APIError[]>({
+    ...databaseQueries.database(engine, id)._ctx.backups,
+    enabled,
+  });
 
 export const useDatabaseEnginesQuery = (enabled: boolean = false) =>
   useQuery<DatabaseEngine[], APIError[]>({
@@ -202,7 +207,7 @@ export const useDatabaseCredentialsMutation = (engine: Engine, id: number) => {
   });
 };
 
-export const useRestoreFromBackupMutation = (
+export const useLegacyRestoreFromBackupMutation = (
   engine: Engine,
   databaseId: number,
   backupId: number
@@ -221,9 +226,8 @@ export const useRestoreFromBackupMutation = (
   });
 };
 
-export const useNewRestoreFromBackupMutation = (
+export const useRestoreFromBackupMutation = (
   engine: Engine,
-  label: string,
   fork: {
     restore_time?: string;
     source: number;
@@ -231,7 +235,7 @@ export const useNewRestoreFromBackupMutation = (
 ) => {
   const queryClient = useQueryClient();
   return useMutation<{}, APIError[]>({
-    mutationFn: () => newRestoreWithBackup(engine, label, fork),
+    mutationFn: () => restoreWithBackup(engine, fork),
     onSuccess() {
       queryClient.invalidateQueries({
         queryKey: databaseQueries.databases.queryKey,

From 0a70c6052ec63f7e1ae95555425345aedd2de4bb Mon Sep 17 00:00:00 2001
From: Banks Nussman <115251059+bnussman-akamai@users.noreply.github.com>
Date: Wed, 25 Sep 2024 12:35:53 -0400
Subject: [PATCH 57/62] chore: [M3-8598] - Remove Linode Create v1 (#10958)

* round 1 of deleting stuff

* round 2 of deleting stuff

* round 3 of deleting stuff

* round 4 of deleting stuff

* fix up one click app tests

* fix unit test

* Added changeset: Remove Linode Create v1

* remove `.only()`

* get test working

* clean up unused utils and lodash packages

---------

Co-authored-by: Banks Nussman <banks@nussman.us>
---
 .../pr-10958-tech-stories-1726606812125.md    |    5 +
 .../core/oneClickApps/one-click-apps.spec.ts  |  133 +-
 packages/manager/package.json                 |    4 -
 .../manager/src/__data__/UserDefinedFields.ts |   28 -
 packages/manager/src/__data__/stackScripts.ts |   49 -
 .../src/components/PrimaryNav/PrimaryNav.tsx  |   24 -
 .../src/containers/account.container.ts       |   23 -
 .../containers/accountSettings.container.ts   |   23 -
 .../src/containers/events.container.ts        |   20 -
 .../src/containers/globalErrors.container.ts  |   41 -
 .../src/containers/preferences.container.ts   |   38 -
 .../src/containers/regions.container.ts       |   35 -
 .../manager/src/containers/types.container.ts |   29 -
 .../src/containers/withLinodes.container.ts   |   52 -
 .../src/containers/withMarketplaceApps.ts     |   54 -
 .../src/containers/withSearchEntities.ts      |    0
 .../withSecureVMNoticesEnabled.container.ts   |   20 -
 .../Tabs/Marketplace/AppSection.test.tsx      |   13 +-
 .../Tabs/Marketplace/AppSelectionCard.tsx     |   10 +-
 .../Tabs/Marketplace/utilities.test.ts        |    4 +-
 .../Tabs/Marketplace/utilities.ts             |   10 +
 .../UserDefinedFields.test.tsx                |    2 +-
 .../UserDefinedFields/UserDefinedFields.tsx   |   11 +-
 .../LinodesCreate/AddonsPanel.test.tsx        |  302 ----
 .../Linodes/LinodesCreate/AddonsPanel.tsx     |  312 ----
 .../Linodes/LinodesCreate/AppPanelSection.tsx |   90 --
 .../LinodesCreate/LinodeCreate.styles.ts      |   84 --
 .../Linodes/LinodesCreate/LinodeCreate.tsx    | 1255 -----------------
 .../LinodesCreate/LinodeCreateContainer.tsx   | 1061 --------------
 .../features/Linodes/LinodesCreate/Panel.tsx  |   25 -
 .../Linodes/LinodesCreate/SelectAppPanel.tsx  |  204 ---
 .../LinodesCreate/SelectBackupPanel.tsx       |  159 ---
 .../SelectLinodePanel/SelectLinodeCards.tsx   |   36 -
 .../SelectLinodePanel.test.tsx                |  223 ---
 .../SelectLinodePanel/SelectLinodePanel.tsx   |  219 ---
 .../SelectLinodeRow.test.tsx                  |  145 --
 .../SelectLinodePanel/SelectLinodeRow.tsx     |  153 --
 .../SelectLinodePanel/SelectLinodeTable.tsx   |   61 -
 .../LinodesCreate/SelectionCardWrapper.tsx    |  127 --
 .../CommonTabbedContent.styles.ts             |   14 -
 .../TabbedContent/FromAppsContent.test.tsx    |   79 --
 .../TabbedContent/FromAppsContent.tsx         |  436 ------
 .../TabbedContent/FromBackupsContent.test.tsx |   47 -
 .../TabbedContent/FromBackupsContent.tsx      |  208 ---
 .../TabbedContent/FromImageContent.test.tsx   |   38 -
 .../TabbedContent/FromImageContent.tsx        |   99 --
 .../TabbedContent/FromLinodeContent.test.tsx  |   43 -
 .../TabbedContent/FromLinodeContent.tsx       |  129 --
 .../FromStackScriptContent.test.tsx           |   48 -
 .../TabbedContent/FromStackScriptContent.tsx  |  187 ---
 .../TabbedContent/formUtilities.test.ts       |   31 -
 .../TabbedContent/formUtilities.ts            |   22 -
 .../LinodesCreate/TabbedContent/utils.ts      |    7 -
 .../UserDataAccordion.styles.ts               |    7 -
 .../UserDataAccordion.test.tsx                |   10 -
 .../UserDataAccordion/UserDataAccordion.tsx   |   23 +-
 .../UserDataAccordionHeading.tsx              |   60 +-
 .../LinodesCreate/VLANAccordion.test.tsx      |  112 --
 .../Linodes/LinodesCreate/VLANAccordion.tsx   |  108 --
 .../LinodesCreate/deriveDefaultLabel.test.ts  |   63 -
 .../LinodesCreate/deriveDefaultLabel.ts       |   72 -
 .../features/Linodes/LinodesCreate/types.ts   |  161 ---
 .../Linodes/LinodesCreate/utilities.test.ts   |  130 +-
 .../Linodes/LinodesCreate/utilities.tsx       |   81 +-
 .../manager/src/features/Linodes/types.ts     |    6 -
 .../OneClickApps/AppDetailDrawer.test.tsx     |   46 -
 .../features/OneClickApps/AppDetailDrawer.tsx |  258 ----
 .../src/features/OneClickApps/index.tsx       |    1 -
 .../features/OneClickApps/oneClickAppsv2.ts   |    6 -
 .../src/features/OneClickApps/utils.test.ts   |   38 -
 .../src/features/OneClickApps/utils.ts        |   32 -
 .../VPCDetail/SubnetAssignLinodesDrawer.tsx   |    7 +-
 packages/manager/src/store/index.ts           |    7 -
 .../linodeCreate/linodeCreate.actions.ts      |   12 -
 .../linodeCreate/linodeCreate.reducer.ts      |   75 -
 .../calculateCostFromUnitPrice.test.ts        |   21 -
 .../utilities/calculateCostFromUnitPrice.ts   |   13 -
 .../manager/src/utilities/compact.test.ts     |   21 -
 packages/manager/src/utilities/compact.ts     |    7 -
 .../filterImagesByDeprecationStatus.ts        |   10 -
 .../src/utilities/safeGetTabRender.test.tsx   |   30 -
 .../src/utilities/safeGetTabRender.tsx        |   30 -
 packages/manager/src/utilities/updateRight.ts |   15 -
 yarn.lock                                     |   29 -
 84 files changed, 125 insertions(+), 7838 deletions(-)
 create mode 100644 packages/manager/.changeset/pr-10958-tech-stories-1726606812125.md
 delete mode 100644 packages/manager/src/__data__/UserDefinedFields.ts
 delete mode 100644 packages/manager/src/__data__/stackScripts.ts
 delete mode 100644 packages/manager/src/containers/account.container.ts
 delete mode 100644 packages/manager/src/containers/accountSettings.container.ts
 delete mode 100644 packages/manager/src/containers/events.container.ts
 delete mode 100644 packages/manager/src/containers/globalErrors.container.ts
 delete mode 100644 packages/manager/src/containers/preferences.container.ts
 delete mode 100644 packages/manager/src/containers/regions.container.ts
 delete mode 100644 packages/manager/src/containers/types.container.ts
 delete mode 100644 packages/manager/src/containers/withLinodes.container.ts
 delete mode 100644 packages/manager/src/containers/withMarketplaceApps.ts
 delete mode 100644 packages/manager/src/containers/withSearchEntities.ts
 delete mode 100644 packages/manager/src/containers/withSecureVMNoticesEnabled.container.ts
 delete mode 100644 packages/manager/src/features/Linodes/LinodesCreate/AddonsPanel.test.tsx
 delete mode 100644 packages/manager/src/features/Linodes/LinodesCreate/AddonsPanel.tsx
 delete mode 100644 packages/manager/src/features/Linodes/LinodesCreate/AppPanelSection.tsx
 delete mode 100644 packages/manager/src/features/Linodes/LinodesCreate/LinodeCreate.styles.ts
 delete mode 100644 packages/manager/src/features/Linodes/LinodesCreate/LinodeCreate.tsx
 delete mode 100644 packages/manager/src/features/Linodes/LinodesCreate/LinodeCreateContainer.tsx
 delete mode 100644 packages/manager/src/features/Linodes/LinodesCreate/Panel.tsx
 delete mode 100644 packages/manager/src/features/Linodes/LinodesCreate/SelectAppPanel.tsx
 delete mode 100644 packages/manager/src/features/Linodes/LinodesCreate/SelectBackupPanel.tsx
 delete mode 100644 packages/manager/src/features/Linodes/LinodesCreate/SelectLinodePanel/SelectLinodeCards.tsx
 delete mode 100644 packages/manager/src/features/Linodes/LinodesCreate/SelectLinodePanel/SelectLinodePanel.test.tsx
 delete mode 100644 packages/manager/src/features/Linodes/LinodesCreate/SelectLinodePanel/SelectLinodePanel.tsx
 delete mode 100644 packages/manager/src/features/Linodes/LinodesCreate/SelectLinodePanel/SelectLinodeRow.test.tsx
 delete mode 100644 packages/manager/src/features/Linodes/LinodesCreate/SelectLinodePanel/SelectLinodeRow.tsx
 delete mode 100644 packages/manager/src/features/Linodes/LinodesCreate/SelectLinodePanel/SelectLinodeTable.tsx
 delete mode 100644 packages/manager/src/features/Linodes/LinodesCreate/SelectionCardWrapper.tsx
 delete mode 100644 packages/manager/src/features/Linodes/LinodesCreate/TabbedContent/CommonTabbedContent.styles.ts
 delete mode 100644 packages/manager/src/features/Linodes/LinodesCreate/TabbedContent/FromAppsContent.test.tsx
 delete mode 100644 packages/manager/src/features/Linodes/LinodesCreate/TabbedContent/FromAppsContent.tsx
 delete mode 100644 packages/manager/src/features/Linodes/LinodesCreate/TabbedContent/FromBackupsContent.test.tsx
 delete mode 100644 packages/manager/src/features/Linodes/LinodesCreate/TabbedContent/FromBackupsContent.tsx
 delete mode 100644 packages/manager/src/features/Linodes/LinodesCreate/TabbedContent/FromImageContent.test.tsx
 delete mode 100644 packages/manager/src/features/Linodes/LinodesCreate/TabbedContent/FromImageContent.tsx
 delete mode 100644 packages/manager/src/features/Linodes/LinodesCreate/TabbedContent/FromLinodeContent.test.tsx
 delete mode 100644 packages/manager/src/features/Linodes/LinodesCreate/TabbedContent/FromLinodeContent.tsx
 delete mode 100644 packages/manager/src/features/Linodes/LinodesCreate/TabbedContent/FromStackScriptContent.test.tsx
 delete mode 100644 packages/manager/src/features/Linodes/LinodesCreate/TabbedContent/FromStackScriptContent.tsx
 delete mode 100644 packages/manager/src/features/Linodes/LinodesCreate/TabbedContent/formUtilities.test.ts
 delete mode 100644 packages/manager/src/features/Linodes/LinodesCreate/TabbedContent/formUtilities.ts
 delete mode 100644 packages/manager/src/features/Linodes/LinodesCreate/TabbedContent/utils.ts
 delete mode 100644 packages/manager/src/features/Linodes/LinodesCreate/UserDataAccordion/UserDataAccordion.styles.ts
 delete mode 100644 packages/manager/src/features/Linodes/LinodesCreate/VLANAccordion.test.tsx
 delete mode 100644 packages/manager/src/features/Linodes/LinodesCreate/VLANAccordion.tsx
 delete mode 100644 packages/manager/src/features/Linodes/LinodesCreate/deriveDefaultLabel.test.ts
 delete mode 100644 packages/manager/src/features/Linodes/LinodesCreate/deriveDefaultLabel.ts
 delete mode 100644 packages/manager/src/features/OneClickApps/AppDetailDrawer.test.tsx
 delete mode 100644 packages/manager/src/features/OneClickApps/AppDetailDrawer.tsx
 delete mode 100644 packages/manager/src/features/OneClickApps/index.tsx
 delete mode 100644 packages/manager/src/features/OneClickApps/utils.test.ts
 delete mode 100644 packages/manager/src/features/OneClickApps/utils.ts
 delete mode 100644 packages/manager/src/store/linodeCreate/linodeCreate.actions.ts
 delete mode 100644 packages/manager/src/store/linodeCreate/linodeCreate.reducer.ts
 delete mode 100644 packages/manager/src/utilities/calculateCostFromUnitPrice.test.ts
 delete mode 100644 packages/manager/src/utilities/calculateCostFromUnitPrice.ts
 delete mode 100644 packages/manager/src/utilities/compact.test.ts
 delete mode 100644 packages/manager/src/utilities/compact.ts
 delete mode 100644 packages/manager/src/utilities/filterImagesByDeprecationStatus.ts
 delete mode 100644 packages/manager/src/utilities/safeGetTabRender.test.tsx
 delete mode 100644 packages/manager/src/utilities/safeGetTabRender.tsx
 delete mode 100644 packages/manager/src/utilities/updateRight.ts

diff --git a/packages/manager/.changeset/pr-10958-tech-stories-1726606812125.md b/packages/manager/.changeset/pr-10958-tech-stories-1726606812125.md
new file mode 100644
index 00000000000..e68ee8e1415
--- /dev/null
+++ b/packages/manager/.changeset/pr-10958-tech-stories-1726606812125.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Tech Stories
+---
+
+Remove Linode Create v1 ([#10958](https://github.com/linode/manager/pull/10958))
diff --git a/packages/manager/cypress/e2e/core/oneClickApps/one-click-apps.spec.ts b/packages/manager/cypress/e2e/core/oneClickApps/one-click-apps.spec.ts
index 36c19f5b5cf..13c46015be2 100644
--- a/packages/manager/cypress/e2e/core/oneClickApps/one-click-apps.spec.ts
+++ b/packages/manager/cypress/e2e/core/oneClickApps/one-click-apps.spec.ts
@@ -1,4 +1,3 @@
-import { containsVisible } from 'support/helpers';
 import { ui } from 'support/ui';
 import {
   interceptGetStackScripts,
@@ -6,114 +5,105 @@ import {
   mockGetStackScripts,
 } from 'support/intercepts/stackscripts';
 import { mockCreateLinode } from 'support/intercepts/linodes';
-import {
-  filterOneClickApps,
-  handleAppLabel,
-} from 'src/features/Linodes/LinodesCreate/utilities';
 import { randomLabel, randomString } from 'support/util/random';
 import { chooseRegion } from 'support/util/regions';
-import { mapStackScriptLabelToOCA } from 'src/features/OneClickApps/utils';
 import { stackScriptFactory } from 'src/factories/stackscripts';
 import { oneClickApps } from 'src/features/OneClickApps/oneClickAppsv2';
+import { getMarketplaceAppLabel } from 'src/features/Linodes/LinodeCreatev2/Tabs/Marketplace/utilities';
 
 import type { StackScript } from '@linode/api-v4';
-import type { OCA } from '@src/features/OneClickApps/types';
 import { imageFactory, linodeFactory } from 'src/factories';
 import { mockGetAllImages } from 'support/intercepts/images';
 
 describe('OneClick Apps (OCA)', () => {
   it('Lists all the OneClick Apps', () => {
     cy.tag('method:e2e');
-    interceptGetStackScripts().as('getStackScripts');
 
+    interceptGetStackScripts().as('getStackScripts');
     cy.visitWithLogin(`/linodes/create?type=One-Click`);
 
     cy.wait('@getStackScripts').then((xhr) => {
       const stackScripts: StackScript[] = xhr.response?.body.data ?? [];
 
-      const trimmedApps: StackScript[] = filterOneClickApps({
-        baseAppIds: Object.keys(oneClickApps).map(Number),
-        newApps: {},
-        queryResults: stackScripts,
-      });
-
-      // Check the content of the OCA listing
+      // Check the content of the app list
       cy.findByTestId('one-click-apps-container').within(() => {
         // Check that all sections are present (note: New apps can be empty so not asserting its presence)
         cy.findByText('Popular apps').should('be.visible');
         cy.findByText('All apps').should('be.visible');
 
-        trimmedApps.forEach((stackScript) => {
-          const { decodedLabel, label } = handleAppLabel(stackScript);
-
-          // Check that every OCA is listed with the correct label
-          cy.get(`[data-qa-select-card-heading="${label.trim()}"]`).should(
-            'exist'
-          );
-
-          // Check that every OCA has a drawer match
-          // This validates the regex in `mapStackScriptLabelToOCA`
-          // and ensures every app listed has a corresponding populated drawer
-          // This is only true for the apps defined in `oneClickApps.ts`
-          expect(
-            mapStackScriptLabelToOCA({
-              oneClickApps: Object.values(oneClickApps),
-              stackScriptLabel: decodedLabel,
-            })
-          ).to.not.be.undefined;
-        });
+        // For every Marketplace app defined in Cloud Manager, make sure the API returns
+        // the nessesary StackScript and that the app renders on the page.
+        for (const stackscriptId in oneClickApps) {
+          const stackscript = stackScripts.find((s) => s.id === +stackscriptId);
+          const app = oneClickApps[stackscriptId];
+
+          if (!stackscript) {
+            throw new Error(
+              `Cloud Manager's fetch to GET /v4/linode/stackscripts did not recieve a StackScript with ID ${stackscriptId}. We expected that StackScript to be in the response for the Marketplace app named "${app.name}".`
+            );
+          }
+
+          // Using `findAllByText` because some apps may be duplicatd under different sections
+          cy.findAllByText(getMarketplaceAppLabel(app.name)).should('exist');
+        }
       });
+    });
+  });
 
-      // Check drawer content for one OCA candidate.
-      const candidateApp = trimmedApps[0];
-      const candidateLabel = handleAppLabel(trimmedApps[0]).label;
+  it('Can view app details of a marketplace app', () => {
+    cy.tag('method:e2e');
 
-      const stackScriptCandidate = cy
-        .get(`[data-qa-selection-card-info="${candidateLabel.trim()}"]`)
-        .first();
-      stackScriptCandidate.should('exist').click();
+    interceptGetStackScripts().as('getStackScripts');
+    cy.visitWithLogin(`/linodes/create?type=One-Click`);
 
-      const app: OCA | undefined = mapStackScriptLabelToOCA({
-        oneClickApps: Object.values(oneClickApps),
-        stackScriptLabel: candidateApp.label,
-      });
+    cy.wait('@getStackScripts').then((xhr) => {
+      const stackScripts: StackScript[] = xhr.response?.body.data ?? [];
+
+      // For the sake of this test, use the first marketplace app defined in Cloud Manager
+      const candidateStackScriptId = +Object.keys(oneClickApps)[0];
 
-      if (!app) {
+      const candidateApp = oneClickApps[candidateStackScriptId];
+
+      if (!candidateApp) {
+        throw new Error(
+          'The candidate app for this test no longer exists. The tests needs updating.'
+        );
+      }
+
+      const candidateStackScript = stackScripts.find(
+        (s) => s.id === candidateStackScriptId
+      );
+
+      if (!candidateStackScript) {
         throw new Error(
-          `Failed to map StackScript label '${candidateLabel}' to a One-Click App`
+          'No StackScript returned by the API for the candidate app.'
         );
       }
 
+      cy.findByTestId('one-click-apps-container').within(() => {
+        cy.findAllByLabelText(`Info for "${candidateApp.name}"`)
+          .first()
+          .scrollIntoView()
+          .should('be.visible')
+          .should('be.enabled')
+          .click();
+      });
+
       ui.drawer
-        .findByTitle(trimmedApps[0].label.trim())
+        .findByTitle(candidateApp.name)
         .should('be.visible')
         .within(() => {
-          containsVisible(app.description);
-          containsVisible(app.summary);
-          containsVisible(app.website!);
+          cy.findByText(candidateApp.description).should('be.visible');
+          cy.findByText(candidateApp.summary).should('be.visible');
+          cy.findByText(candidateApp.website!).should('be.visible');
         });
+
       ui.drawerCloseButton.find().click();
       ui.drawer.find().should('not.exist');
-
-      // Check the filtering of the apps
-      cy.scrollTo(0, 0);
-      const initialNumberOfApps = trimmedApps.length;
-      cy.findByPlaceholderText('Search for app name')
-        .should('exist')
-        .type(candidateLabel);
-      cy.findByTestId('one-click-apps-container').within(() => {
-        cy.get('[data-qa-selection-card="true"]').should(
-          'have.length.below',
-          initialNumberOfApps
-        );
-        cy.get(
-          `[data-qa-selection-card-info="${candidateLabel.trim()}"]`
-        ).should('be.visible');
-      });
     });
   });
 
-  it('Deploys a Linode from a One Click App', () => {
+  it('Deploys a Linode from a One Click App with user defined fields', () => {
     const images = [
       imageFactory.build({
         id: 'linode/ubuntu22.04',
@@ -125,8 +115,11 @@ describe('OneClick Apps (OCA)', () => {
       }),
     ];
 
+    // For the sake of this test, use the first marketplace app defined in Cloud Manager
+    const candidateStackScriptId = +Object.keys(oneClickApps)[0];
+
     const stackscript = stackScriptFactory.build({
-      id: 0,
+      id: candidateStackScriptId,
       username: 'linode',
       user_gravatar_id: '9d4d301385af69ceb7ad658aad09c142',
       label: 'E2E Test App',
@@ -187,7 +180,7 @@ describe('OneClick Apps (OCA)', () => {
       cy.findByText('New apps').should('be.visible');
 
       // Check that the app is listed and select it
-      cy.get('[data-qa-selection-card="true"]').should('have.length', 3);
+      cy.get('[data-qa-selection-card="true"]').should('have.length', 2);
       cy.findAllByText(stackscript.label).first().should('be.visible').click();
     });
 
diff --git a/packages/manager/package.json b/packages/manager/package.json
index 999a36a80f4..adfba775603 100644
--- a/packages/manager/package.json
+++ b/packages/manager/package.json
@@ -49,8 +49,6 @@
     "jspdf-autotable": "^3.5.14",
     "launchdarkly-react-client-sdk": "3.0.10",
     "libphonenumber-js": "^1.10.6",
-    "lodash.clonedeep": "^4.5.0",
-    "lodash.curry": "^4.1.1",
     "logic-query-parser": "^0.0.5",
     "luxon": "3.4.4",
     "markdown-it": "^12.3.2",
@@ -144,8 +142,6 @@
     "@types/highlight.js": "~10.1.0",
     "@types/jsdom": "^21.1.4",
     "@types/jspdf": "^1.3.3",
-    "@types/lodash.clonedeep": "^4.5.9",
-    "@types/lodash.curry": "^4.1.9",
     "@types/luxon": "3.4.2",
     "@types/markdown-it": "^10.0.2",
     "@types/md5": "^2.1.32",
diff --git a/packages/manager/src/__data__/UserDefinedFields.ts b/packages/manager/src/__data__/UserDefinedFields.ts
deleted file mode 100644
index 5ccd881dbe4..00000000000
--- a/packages/manager/src/__data__/UserDefinedFields.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import { UserDefinedField } from '@linode/api-v4/lib/stackscripts';
-
-export const UserDefinedFields: UserDefinedField[] = [
-  {
-    default: '',
-    example: 'The password you use to login with Wordpress',
-    label: 'Wordpress root password',
-    name: 'wordpress_password',
-  },
-  {
-    default: 'username default',
-    example: 'The user you use to login with Wordpress',
-    label: 'Wordpress user',
-    name: 'wordpress_username',
-  },
-  {
-    default: 'Latest Drupal 8',
-    label: 'Drupal Version',
-    name: 'drupal_version',
-    oneof: 'Latest Drupal 8,Latest Drupal 7',
-  },
-  {
-    default: 'rails,mysql',
-    label: 'Gems to install',
-    manyof: 'rails,mysql,passenger,rcov',
-    name: 'gems_to_install',
-  },
-];
diff --git a/packages/manager/src/__data__/stackScripts.ts b/packages/manager/src/__data__/stackScripts.ts
deleted file mode 100644
index 29eefd88fc9..00000000000
--- a/packages/manager/src/__data__/stackScripts.ts
+++ /dev/null
@@ -1,49 +0,0 @@
-import { StackScript } from '@linode/api-v4/lib/stackscripts';
-
-export const stackScripts: StackScript[] = [
-  {
-    created: '2018-07-10T15:30:56',
-    deployments_active: 0,
-    deployments_total: 0,
-    description: 'this\n\n\n\nis\n\n\n\n\nmy public jawn',
-    id: 326426,
-    images: ['linode/containerlinux', 'linode/debian8', 'linode/fedora27'],
-    is_public: true,
-    label: 'is_public',
-    logo_url: '',
-    mine: true,
-    ordinal: 1,
-    rev_note: 'my note!',
-    script: '#!/bin/bash',
-    updated: '2018-07-10T15:30:56',
-    user_defined_fields: [],
-    user_gravatar_id: '8c73c32a9e8f9868ce536b132bb62613',
-    username: 'mmckenna',
-  },
-  {
-    created: '2018-07-10T15:30:56',
-    deployments_active: 0,
-    deployments_total: 0,
-    description: 'this\n\n\n\nis\n\n\n\n\nmy public jawn',
-    id: 326432426,
-    images: [
-      'linode/containerlinux',
-      'linode/debian8',
-      'linode/fedora27',
-      'linode/centos7',
-      'linode/centos6',
-      'linode/coreos',
-    ],
-    is_public: true,
-    label: 'is_public',
-    logo_url: '',
-    mine: true,
-    ordinal: 1,
-    rev_note: 'my note!',
-    script: '#!/bin/bash',
-    updated: '2018-07-10T15:30:56',
-    user_defined_fields: [],
-    user_gravatar_id: '8c73c32a9e8f9868ce536b132bb62613',
-    username: 'mmckenna',
-  },
-];
diff --git a/packages/manager/src/components/PrimaryNav/PrimaryNav.tsx b/packages/manager/src/components/PrimaryNav/PrimaryNav.tsx
index 50f5d00e922..3288454aad9 100644
--- a/packages/manager/src/components/PrimaryNav/PrimaryNav.tsx
+++ b/packages/manager/src/components/PrimaryNav/PrimaryNav.tsx
@@ -31,7 +31,6 @@ import { useIsPlacementGroupsEnabled } from 'src/features/PlacementGroups/utils'
 import { useFlags } from 'src/hooks/useFlags';
 import { usePrefetch } from 'src/hooks/usePreFetch';
 import { useAccountSettings } from 'src/queries/account/settings';
-import { useMarketplaceAppsQuery } from 'src/queries/stackscripts';
 
 import useStyles from './PrimaryNav.styles';
 import { linkIsActive } from './utils';
@@ -88,34 +87,14 @@ export const PrimaryNav = (props: PrimaryNavProps) => {
   const flags = useFlags();
   const location = useLocation();
 
-  const [
-    enableMarketplacePrefetch,
-    setEnableMarketplacePrefetch,
-  ] = React.useState(false);
-
   const { data: accountSettings } = useAccountSettings();
   const isManaged = accountSettings?.managed ?? false;
 
-  const {
-    data: oneClickApps,
-    error: oneClickAppsError,
-    isLoading: oneClickAppsLoading,
-  } = useMarketplaceAppsQuery(enableMarketplacePrefetch);
-
-  const allowMarketplacePrefetch =
-    !oneClickApps && !oneClickAppsLoading && !oneClickAppsError;
-
   const { isACLPEnabled } = useIsACLPEnabled();
 
   const { isPlacementGroupsEnabled } = useIsPlacementGroupsEnabled();
   const { isDatabasesEnabled, isDatabasesV2Beta } = useIsDatabasesEnabled();
 
-  const prefetchMarketplace = () => {
-    if (!enableMarketplacePrefetch) {
-      setEnableMarketplacePrefetch(true);
-    }
-  };
-
   const primaryLinkGroups: PrimaryLink[][] = React.useMemo(
     () => [
       [
@@ -220,8 +199,6 @@ export const PrimaryNav = (props: PrimaryNavProps) => {
           display: 'Marketplace',
           href: '/linodes/create?type=One-Click',
           icon: <OCA />,
-          prefetchRequestCondition: allowMarketplacePrefetch,
-          prefetchRequestFn: prefetchMarketplace,
         },
       ],
       [
@@ -248,7 +225,6 @@ export const PrimaryNav = (props: PrimaryNavProps) => {
       isDatabasesEnabled,
       isDatabasesV2Beta,
       isManaged,
-      allowMarketplacePrefetch,
       isPlacementGroupsEnabled,
       isACLPEnabled,
     ]
diff --git a/packages/manager/src/containers/account.container.ts b/packages/manager/src/containers/account.container.ts
deleted file mode 100644
index 191bea9f0b7..00000000000
--- a/packages/manager/src/containers/account.container.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { Account } from '@linode/api-v4/lib';
-import { APIError } from '@linode/api-v4/lib/types';
-import * as React from 'react';
-import { UseQueryResult } from '@tanstack/react-query';
-
-import { useAccount } from 'src/queries/account/account';
-
-export interface WithAccountProps {
-  account: UseQueryResult<Account, APIError[]>;
-}
-
-export const withAccount = <Props>(
-  Component: React.ComponentType<Props & WithAccountProps>
-) => {
-  return (props: Props) => {
-    const account = useAccount();
-
-    return React.createElement(Component, {
-      ...props,
-      account,
-    });
-  };
-};
diff --git a/packages/manager/src/containers/accountSettings.container.ts b/packages/manager/src/containers/accountSettings.container.ts
deleted file mode 100644
index b297b2c2f31..00000000000
--- a/packages/manager/src/containers/accountSettings.container.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { AccountSettings } from '@linode/api-v4/lib';
-import { APIError } from '@linode/api-v4/lib/types';
-import * as React from 'react';
-import { UseQueryResult } from '@tanstack/react-query';
-
-import { useAccountSettings } from 'src/queries/account/settings';
-
-export interface WithAccountSettingsProps {
-  accountSettings: UseQueryResult<AccountSettings, APIError[]>;
-}
-
-export const withAccountSettings = <Props>(
-  Component: React.ComponentType<Props & WithAccountSettingsProps>
-) => {
-  return (props: Props) => {
-    const accountSettings = useAccountSettings();
-
-    return React.createElement(Component, {
-      ...props,
-      accountSettings,
-    });
-  };
-};
diff --git a/packages/manager/src/containers/events.container.ts b/packages/manager/src/containers/events.container.ts
deleted file mode 100644
index 37ffae66821..00000000000
--- a/packages/manager/src/containers/events.container.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import React from 'react';
-
-import { useEventsPollingActions } from 'src/queries/events/events';
-
-export type WithEventsPollingActionProps = ReturnType<
-  typeof useEventsPollingActions
->;
-
-export const withEventsPollingActions = <Props>(
-  Component: React.ComponentType<Props & WithEventsPollingActionProps>
-) => {
-  return (props: Props) => {
-    const polling = useEventsPollingActions();
-
-    return React.createElement(Component, {
-      ...props,
-      ...polling,
-    });
-  };
-};
diff --git a/packages/manager/src/containers/globalErrors.container.ts b/packages/manager/src/containers/globalErrors.container.ts
deleted file mode 100644
index ce6d04f5b42..00000000000
--- a/packages/manager/src/containers/globalErrors.container.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-import { connect } from 'react-redux';
-
-import { ApplicationState } from 'src/store';
-import {
-  clearErrors,
-  setErrors,
-} from 'src/store/globalErrors/globalErrors.actions';
-import { State } from 'src/store/globalErrors/types';
-import { ThunkDispatch } from 'src/store/types';
-
-interface DispatchProps {
-  clearErrors: (params: State) => void;
-  setErrors: (params: State) => void;
-}
-
-export interface StateProps {
-  globalErrors: State;
-}
-
-/* tslint:disable-next-line */
-export type ReduxState = State;
-
-export type Props = DispatchProps & StateProps;
-
-export default <TInner extends {}, TOuter extends {}>(
-  mapAccountToProps?: (ownProps: TOuter, errors: State) => TInner
-) =>
-  connect<State | StateProps, DispatchProps, TOuter, ApplicationState>(
-    (state, ownProps) => {
-      if (mapAccountToProps) {
-        return mapAccountToProps(ownProps, state.globalErrors);
-      }
-      return {
-        globalErrors: state.globalErrors,
-      };
-    },
-    (dispatch: ThunkDispatch) => ({
-      clearErrors: (params) => dispatch(clearErrors(params)),
-      setErrors: (params) => dispatch(setErrors(params)),
-    })
-  );
diff --git a/packages/manager/src/containers/preferences.container.ts b/packages/manager/src/containers/preferences.container.ts
deleted file mode 100644
index 48736a01f65..00000000000
--- a/packages/manager/src/containers/preferences.container.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import React from 'react';
-
-import {
-  useMutatePreferences,
-  usePreferences,
-} from 'src/queries/profile/preferences';
-import { ManagerPreferences } from 'src/types/ManagerPreferences';
-export interface PreferencesStateProps {
-  preferences?: ManagerPreferences;
-}
-
-export interface PreferencesActionsProps {
-  getUserPreferences: () => Promise<ManagerPreferences>;
-  updateUserPreferences: (
-    params: ManagerPreferences
-  ) => Promise<ManagerPreferences>;
-}
-
-export type Props = PreferencesActionsProps & PreferencesStateProps;
-
-const withPreferences = <Props>(
-  Component: React.ComponentType<
-    Props & PreferencesStateProps & PreferencesActionsProps
-  >
-) => (props: Props) => {
-  const { data: preferences, refetch } = usePreferences();
-  const { mutateAsync: updateUserPreferences } = useMutatePreferences();
-
-  return React.createElement(Component, {
-    ...props,
-    getUserPreferences: () =>
-      refetch().then(({ data }) => data ?? Promise.reject()),
-    preferences,
-    updateUserPreferences,
-  });
-};
-
-export default withPreferences;
diff --git a/packages/manager/src/containers/regions.container.ts b/packages/manager/src/containers/regions.container.ts
deleted file mode 100644
index c9641ecd959..00000000000
--- a/packages/manager/src/containers/regions.container.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import { Region } from '@linode/api-v4/lib/regions';
-import { APIError } from '@linode/api-v4/lib/types';
-import * as React from 'react';
-
-import { useRegionsQuery } from 'src/queries/regions/regions';
-
-export interface RegionsProps {
-  regionsData: Region[];
-  regionsError?: APIError[];
-  regionsLoading: boolean;
-}
-
-/**
- * Simple wrapper around our Regions query. Originally this was a Redux connect
- * function; it is being retained in this way because there are still a few places
- * where regions data is needed in class components, some of which are difficult
- * or problematic to refactor.
- *
- * This file can be deleted once the existing class components have been removed or converted
- * to FCs (current list is: SelectPlanPanel/SelectPlanQuantityPanel; NodeBalancerCreate; LinodeSelect;
- * LinodeCreate/LinodeCreateContainer). Please do NOT use this wrapper for any future components; if a class
- * component is needed, best practice is to include an FC container above it (the routing level often works well)
- * and pass regions through there.
- */
-export const withRegions = <Props>(
-  Component: React.ComponentType<Props & RegionsProps>
-) => (props: Props) => {
-  const { data, error, isLoading } = useRegionsQuery();
-  return React.createElement(Component, {
-    regionsData: data ?? [],
-    regionsError: error ?? undefined,
-    regionsLoading: isLoading,
-    ...props,
-  });
-};
diff --git a/packages/manager/src/containers/types.container.ts b/packages/manager/src/containers/types.container.ts
deleted file mode 100644
index 8499b1293d5..00000000000
--- a/packages/manager/src/containers/types.container.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import React from 'react';
-
-import { useAllTypes } from 'src/queries/types';
-
-import type { APIError, LinodeType } from '@linode/api-v4';
-
-export interface WithTypesProps {
-  typesData?: LinodeType[];
-  typesError?: APIError[];
-  typesLoading: boolean;
-}
-
-export const withTypes = <Props>(
-  Component: React.ComponentType<Props & WithTypesProps>,
-  enabled = true
-) => (props: Props) => {
-  const {
-    data: typesData,
-    error: typesError,
-    isLoading: typesLoading,
-  } = useAllTypes(enabled);
-
-  return React.createElement(Component, {
-    ...props,
-    typesData,
-    typesError: typesError ?? undefined,
-    typesLoading,
-  });
-};
diff --git a/packages/manager/src/containers/withLinodes.container.ts b/packages/manager/src/containers/withLinodes.container.ts
deleted file mode 100644
index 11873f5051c..00000000000
--- a/packages/manager/src/containers/withLinodes.container.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-import {
-  CreateLinodeRequest,
-  Linode,
-  LinodeCloneData,
-} from '@linode/api-v4/lib/linodes';
-import { APIError } from '@linode/api-v4/lib/types';
-import React from 'react';
-
-import {
-  useAllLinodesQuery,
-  useCloneLinodeMutation,
-  useCreateLinodeMutation,
-} from 'src/queries/linodes/linodes';
-
-interface Actions {
-  cloneLinode: (data: {
-    sourceLinodeId: number & LinodeCloneData;
-  }) => Promise<Linode>;
-  createLinode: (data: CreateLinodeRequest) => Promise<Linode>;
-}
-
-export interface WithLinodesProps {
-  linodeActions: Actions;
-  linodesData: Linode[] | undefined;
-  linodesError: APIError[] | null;
-  linodesLoading: boolean;
-}
-
-export const withLinodes = <Props>(
-  Component: React.ComponentType<Props & WithLinodesProps>,
-  enabled = true
-) => (props: Props) => {
-  const {
-    data: linodesData,
-    error: linodesError,
-    isLoading: linodesLoading,
-  } = useAllLinodesQuery({}, {}, enabled);
-
-  const { mutateAsync: createLinode } = useCreateLinodeMutation();
-  const { mutateAsync: cloneLinode } = useCloneLinodeMutation();
-
-  return React.createElement(Component, {
-    ...props,
-    linodeActions: {
-      cloneLinode,
-      createLinode,
-    },
-    linodesData,
-    linodesError,
-    linodesLoading,
-  });
-};
diff --git a/packages/manager/src/containers/withMarketplaceApps.ts b/packages/manager/src/containers/withMarketplaceApps.ts
deleted file mode 100644
index 17a0a56073e..00000000000
--- a/packages/manager/src/containers/withMarketplaceApps.ts
+++ /dev/null
@@ -1,54 +0,0 @@
-import { StackScript } from '@linode/api-v4';
-import React from 'react';
-import { useLocation } from 'react-router-dom';
-
-import { oneClickApps } from 'src/features/OneClickApps/oneClickAppsv2';
-import { useFlags } from 'src/hooks/useFlags';
-import { useMarketplaceAppsQuery } from 'src/queries/stackscripts';
-import { getQueryParamFromQueryString } from 'src/utilities/queryParams';
-
-const trimOneClickFromLabel = (script: StackScript) => {
-  return {
-    ...script,
-    label: script.label.replace('One-Click', ''),
-  };
-};
-
-export interface WithMarketplaceAppsProps {
-  appInstances: StackScript[] | undefined;
-  appInstancesError: string | undefined;
-  appInstancesLoading: boolean;
-}
-
-export const withMarketplaceApps = <Props>(
-  Component: React.ComponentType<Props & WithMarketplaceAppsProps>
-) => (props: Props) => {
-  const location = useLocation();
-  const flags = useFlags();
-
-  const type = getQueryParamFromQueryString(location.search, 'type');
-
-  // Only enable the query when the user is on the Marketplace page
-  const enabled = type === 'One-Click';
-
-  const { data, error, isLoading } = useMarketplaceAppsQuery(enabled);
-
-  const newApps = flags.oneClickApps || [];
-  const allowedApps = Object.keys({ ...oneClickApps, ...newApps });
-
-  const filteredApps = (data ?? []).filter((script) => {
-    return (
-      !script.label.match(/helpers/i) && allowedApps.includes(String(script.id))
-    );
-  });
-  const trimmedApps = filteredApps.map((stackscript) =>
-    trimOneClickFromLabel(stackscript)
-  );
-
-  return React.createElement(Component, {
-    ...props,
-    appInstances: trimmedApps,
-    appInstancesError: error?.[0]?.reason,
-    appInstancesLoading: isLoading,
-  });
-};
diff --git a/packages/manager/src/containers/withSearchEntities.ts b/packages/manager/src/containers/withSearchEntities.ts
deleted file mode 100644
index e69de29bb2d..00000000000
diff --git a/packages/manager/src/containers/withSecureVMNoticesEnabled.container.ts b/packages/manager/src/containers/withSecureVMNoticesEnabled.container.ts
deleted file mode 100644
index 73e8472dd55..00000000000
--- a/packages/manager/src/containers/withSecureVMNoticesEnabled.container.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import React from 'react';
-
-import { useSecureVMNoticesEnabled } from 'src/hooks/useSecureVMNoticesEnabled';
-
-export interface WithSecureVMNoticesEnabledProps {
-  secureVMNoticesEnabled: boolean;
-}
-
-export const withSecureVMNoticesEnabled = <Props>(
-  Component: React.ComponentType<Props & WithSecureVMNoticesEnabledProps>
-) => {
-  return (props: Props) => {
-    const { secureVMNoticesEnabled } = useSecureVMNoticesEnabled();
-
-    return React.createElement(Component, {
-      ...props,
-      secureVMNoticesEnabled,
-    });
-  };
-};
diff --git a/packages/manager/src/features/Linodes/LinodeCreatev2/Tabs/Marketplace/AppSection.test.tsx b/packages/manager/src/features/Linodes/LinodeCreatev2/Tabs/Marketplace/AppSection.test.tsx
index 555fffabe68..1ff4939fb61 100644
--- a/packages/manager/src/features/Linodes/LinodeCreatev2/Tabs/Marketplace/AppSection.test.tsx
+++ b/packages/manager/src/features/Linodes/LinodeCreatev2/Tabs/Marketplace/AppSection.test.tsx
@@ -1,8 +1,7 @@
 import userEvent from '@testing-library/user-event';
 import React from 'react';
 
-import { stackScriptFactory } from 'src/factories';
-import { oneClickApps } from 'src/features/OneClickApps/oneClickAppsv2';
+import { oneClickAppFactory, stackScriptFactory } from 'src/factories';
 import { renderWithTheme } from 'src/utilities/testHelpers';
 
 import { AppSection } from './AppSection';
@@ -24,7 +23,7 @@ describe('AppSection', () => {
 
   it('should render apps', () => {
     const app = {
-      details: oneClickApps[0],
+      details: oneClickAppFactory.build(),
       stackscript: stackScriptFactory.build({
         id: 0,
         label: 'Linode Marketplace App',
@@ -46,8 +45,8 @@ describe('AppSection', () => {
 
   it('should call `onOpenDetailsDrawer` when the details button is clicked for an app', async () => {
     const app = {
-      details: oneClickApps[0],
-      stackscript: stackScriptFactory.build({ id: 0 }),
+      details: oneClickAppFactory.build(),
+      stackscript: stackScriptFactory.build(),
     };
 
     const onOpenDetailsDrawer = vi.fn();
@@ -71,8 +70,8 @@ describe('AppSection', () => {
 
   it('should call `onSelect` when an app is clicked', async () => {
     const app = {
-      details: oneClickApps[0],
-      stackscript: stackScriptFactory.build({ id: 0 }),
+      details: oneClickAppFactory.build(),
+      stackscript: stackScriptFactory.build(),
     };
 
     const onSelect = vi.fn();
diff --git a/packages/manager/src/features/Linodes/LinodeCreatev2/Tabs/Marketplace/AppSelectionCard.tsx b/packages/manager/src/features/Linodes/LinodeCreatev2/Tabs/Marketplace/AppSelectionCard.tsx
index b6ef6a53f86..8a25cfee501 100644
--- a/packages/manager/src/features/Linodes/LinodeCreatev2/Tabs/Marketplace/AppSelectionCard.tsx
+++ b/packages/manager/src/features/Linodes/LinodeCreatev2/Tabs/Marketplace/AppSelectionCard.tsx
@@ -1,5 +1,4 @@
 import { IconButton } from '@mui/material';
-import { decode } from 'he';
 import * as React from 'react';
 
 import Info from 'src/assets/icons/info.svg';
@@ -7,6 +6,8 @@ import { Chip } from 'src/components/Chip';
 import { SelectionCard } from 'src/components/SelectionCard/SelectionCard';
 import { APP_ROOT } from 'src/constants';
 
+import { getMarketplaceAppLabel } from './utilities';
+
 interface Props {
   /**
    * Whether or not the app is selected
@@ -48,12 +49,7 @@ export const AppSelectionCard = (props: Props) => {
     }
   };
 
-  const displayLabel = decode(
-    label
-      .replace(' Null One-Click', '')
-      .replace(' One-Click', '')
-      .replace(' Cluster', '')
-  ).trim();
+  const displayLabel = getMarketplaceAppLabel(label);
 
   const renderIcon =
     iconUrl === ''
diff --git a/packages/manager/src/features/Linodes/LinodeCreatev2/Tabs/Marketplace/utilities.test.ts b/packages/manager/src/features/Linodes/LinodeCreatev2/Tabs/Marketplace/utilities.test.ts
index 41479639f5f..2ec5b3eecce 100644
--- a/packages/manager/src/features/Linodes/LinodeCreatev2/Tabs/Marketplace/utilities.test.ts
+++ b/packages/manager/src/features/Linodes/LinodeCreatev2/Tabs/Marketplace/utilities.test.ts
@@ -112,7 +112,7 @@ describe('getFilteredApps', () => {
 describe('useMarketplaceApps', () => {
   it('should return apps from the stackscripts response', async () => {
     const stackscript = stackScriptFactory.build({
-      id: 0,
+      id: 401697,
       label: 'Linode Marketplace App',
     });
 
@@ -130,7 +130,7 @@ describe('useMarketplaceApps', () => {
     await waitFor(() => {
       expect(result.current.apps).toStrictEqual([
         {
-          details: oneClickApps[0],
+          details: oneClickApps[401697],
           stackscript,
         },
       ]);
diff --git a/packages/manager/src/features/Linodes/LinodeCreatev2/Tabs/Marketplace/utilities.ts b/packages/manager/src/features/Linodes/LinodeCreatev2/Tabs/Marketplace/utilities.ts
index 65d15a17cc3..f83c696c1ef 100644
--- a/packages/manager/src/features/Linodes/LinodeCreatev2/Tabs/Marketplace/utilities.ts
+++ b/packages/manager/src/features/Linodes/LinodeCreatev2/Tabs/Marketplace/utilities.ts
@@ -1,3 +1,5 @@
+import { decode } from 'he';
+
 import { oneClickApps } from 'src/features/OneClickApps/oneClickAppsv2';
 import { useFlags } from 'src/hooks/useFlags';
 import { useMarketplaceAppsQuery } from 'src/queries/stackscripts';
@@ -179,3 +181,11 @@ export const useMarketplaceApps = () => {
 
   return { apps, ...query };
 };
+
+export const getMarketplaceAppLabel = (label: string) =>
+  decode(
+    label
+      .replace(' Null One-Click', '')
+      .replace(' One-Click', '')
+      .replace(' Cluster', '')
+  ).trim();
diff --git a/packages/manager/src/features/Linodes/LinodeCreatev2/Tabs/StackScripts/UserDefinedFields/UserDefinedFields.test.tsx b/packages/manager/src/features/Linodes/LinodeCreatev2/Tabs/StackScripts/UserDefinedFields/UserDefinedFields.test.tsx
index 5c82e90e1cd..66fe54186f1 100644
--- a/packages/manager/src/features/Linodes/LinodeCreatev2/Tabs/StackScripts/UserDefinedFields/UserDefinedFields.test.tsx
+++ b/packages/manager/src/features/Linodes/LinodeCreatev2/Tabs/StackScripts/UserDefinedFields/UserDefinedFields.test.tsx
@@ -62,7 +62,7 @@ describe('UserDefinedFields', () => {
 
   it('should render a notice if this is a cluster', async () => {
     const stackscript = stackScriptFactory.build({
-      id: 0,
+      id: 607488,
       label: 'Marketplace App for Redis',
       user_defined_fields: [
         {
diff --git a/packages/manager/src/features/Linodes/LinodeCreatev2/Tabs/StackScripts/UserDefinedFields/UserDefinedFields.tsx b/packages/manager/src/features/Linodes/LinodeCreatev2/Tabs/StackScripts/UserDefinedFields/UserDefinedFields.tsx
index 8e3df1374bb..cf9d422099e 100644
--- a/packages/manager/src/features/Linodes/LinodeCreatev2/Tabs/StackScripts/UserDefinedFields/UserDefinedFields.tsx
+++ b/packages/manager/src/features/Linodes/LinodeCreatev2/Tabs/StackScripts/UserDefinedFields/UserDefinedFields.tsx
@@ -1,5 +1,3 @@
-import { CreateLinodeRequest } from '@linode/api-v4';
-import { decode } from 'he';
 import React from 'react';
 import { useFormContext, useWatch } from 'react-hook-form';
 
@@ -14,9 +12,12 @@ import { Typography } from 'src/components/Typography';
 import { oneClickApps } from 'src/features/OneClickApps/oneClickAppsv2';
 import { useStackScriptQuery } from 'src/queries/stackscripts';
 
+import { getMarketplaceAppLabel } from '../../Marketplace/utilities';
 import { UserDefinedFieldInput } from './UserDefinedFieldInput';
 import { separateUDFsByRequiredStatus } from './utilities';
 
+import type { CreateLinodeRequest } from '@linode/api-v4';
+
 interface Props {
   /**
    * Opens the Marketplace App details drawer for a given StackScript
@@ -73,10 +74,12 @@ export const UserDefinedFields = ({ onOpenDetailsDrawer }: Props) => {
               src={`/assets/${marketplaceAppInfo.logo_url}`}
             />
             <Typography variant="h2">
-              {decode(stackscript.label.replace('One-Click', ''))} Setup
+              {getMarketplaceAppLabel(stackscript.label)} Setup
             </Typography>
             <IconButton
-              aria-label={`View details for ${stackscript.label}`}
+              aria-label={`View details for ${getMarketplaceAppLabel(
+                stackscript.label
+              )}`}
               onClick={() => onOpenDetailsDrawer?.(stackscriptId!)}
               size="large"
             >
diff --git a/packages/manager/src/features/Linodes/LinodesCreate/AddonsPanel.test.tsx b/packages/manager/src/features/Linodes/LinodesCreate/AddonsPanel.test.tsx
deleted file mode 100644
index 92bbcbc398d..00000000000
--- a/packages/manager/src/features/Linodes/LinodesCreate/AddonsPanel.test.tsx
+++ /dev/null
@@ -1,302 +0,0 @@
-import React from 'react';
-
-import { imageFactory, linodeTypeFactory } from 'src/factories';
-import { HttpResponse, http, server } from 'src/mocks/testServer';
-import { getMonthlyBackupsPrice } from 'src/utilities/pricing/backups';
-import { renderWithTheme, wrapWithTheme } from 'src/utilities/testHelpers';
-
-import { AddonsPanel } from './AddonsPanel';
-
-import type { AddonsPanelProps } from './AddonsPanel';
-
-const type = linodeTypeFactory.build({
-  addons: {
-    backups: {
-      price: {
-        hourly: 0.004,
-        monthly: 2.5,
-      },
-      region_prices: [
-        {
-          hourly: 0.0048,
-          id: 'id-cgk',
-          monthly: 3.57,
-        },
-      ],
-    },
-  },
-});
-
-const props: AddonsPanelProps = {
-  accountBackups: true,
-  backups: false,
-  changeBackups: vi.fn(),
-  createType: 'fromLinode',
-  disabled: false,
-  diskEncryptionEnabled: false,
-  handleVLANChange: vi.fn(),
-  ipamAddress: 'ipadAddress',
-  ipamError: 'test ipad error',
-  isPrivateIPChecked: false,
-  labelError: 'testError',
-  linodesData: [
-    {
-      alerts: {
-        cpu: 90,
-        io: 10000,
-        network_in: 10,
-        network_out: 10,
-        transfer_quota: 80,
-      },
-      backups: {
-        enabled: true,
-        last_successful: '2023-04-20T08:28:33',
-        schedule: {
-          day: 'Scheduling',
-          window: 'Scheduling',
-        },
-      },
-      created: '2023-03-18T04:41:27',
-      group: '',
-      hypervisor: 'kvm',
-      id: 44071363,
-      image: 'linode/ubuntu18.04',
-      ipv4: ['45.56.75.98'],
-      ipv6: '2600:3c00::f03c:93ff:fe85:576d/128',
-      label: 'test_instance',
-      lke_cluster_id: null,
-      placement_group: {
-        id: 1,
-        label: 'test',
-        placement_group_policy: 'strict',
-        placement_group_type: 'anti_affinity:local',
-      },
-      region: 'us-central',
-      site_type: 'core',
-      specs: {
-        disk: 51200,
-        gpus: 0,
-        memory: 2048,
-        transfer: 2000,
-        vcpus: 1,
-      },
-      status: 'running',
-      tags: [],
-      type: 'g6-standard-1',
-      updated: '2023-03-18T04:45:17',
-      watchdog_enabled: true,
-    },
-    {
-      alerts: {
-        cpu: 90,
-        io: 10000,
-        network_in: 10,
-        network_out: 10,
-        transfer_quota: 80,
-      },
-      backups: {
-        enabled: true,
-
-        last_successful: null,
-        schedule: {
-          day: 'Scheduling',
-          window: 'Scheduling',
-        },
-      },
-      created: '2023-04-20T16:10:32',
-      group: '',
-      hypervisor: 'kvm',
-      id: 45329311,
-      image: 'linode/ubuntu24.04',
-      ipv4: ['192.168.139.183', '139.144.17.202'],
-      ipv6: '2600:3c04::f03c:93ff:fe75:0612/128',
-      label: 'debian-ca-central',
-      lke_cluster_id: null,
-      placement_group: {
-        id: 1,
-        label: 'test',
-        placement_group_policy: 'strict',
-        placement_group_type: 'anti_affinity:local',
-      },
-      region: 'ca-central',
-      site_type: 'core',
-      specs: {
-        disk: 25600,
-        gpus: 0,
-        memory: 1024,
-        transfer: 1000,
-        vcpus: 1,
-      },
-      status: 'running',
-      tags: [],
-      type: 'g6-nanode-1',
-      updated: '2023-04-20T16:11:06',
-      watchdog_enabled: true,
-    },
-    {
-      alerts: {
-        cpu: 90,
-        io: 10000,
-        network_in: 10,
-        network_out: 10,
-        transfer_quota: 80,
-      },
-      backups: {
-        enabled: true,
-        last_successful: null,
-        schedule: {
-          day: 'Scheduling',
-          window: 'Scheduling',
-        },
-      },
-      created: '2023-04-20T17:35:32',
-      group: '',
-      hypervisor: 'kvm',
-      id: 45332614,
-      image: 'linode/almalinux8',
-      ipv4: ['45.79.74.95'],
-      ipv6: '2600:3c01::f03c:93ff:fe75:e4f9/128',
-      label: 'almalinux-us-west',
-      lke_cluster_id: null,
-      placement_group: {
-        id: 1,
-        label: 'test',
-        placement_group_policy: 'strict',
-        placement_group_type: 'anti_affinity:local',
-      },
-      region: 'us-west',
-      site_type: 'core',
-      specs: {
-        disk: 25600,
-        gpus: 0,
-        memory: 1024,
-        transfer: 1000,
-        vcpus: 1,
-      },
-      status: 'running',
-      tags: [],
-      type: 'g6-nanode-1',
-      updated: '2023-04-20T17:40:33',
-      watchdog_enabled: true,
-    },
-  ],
-  selectedImageID: '1234',
-  selectedLinodeID: 45329311,
-  selectedRegionID: '1234',
-  selectedTypeID: '12345',
-  togglePrivateIP: vi.fn(),
-  userData: {
-    createType: 'fromLinode',
-    onChange: vi.fn(),
-    showUserData: false,
-    userData: '1234',
-  },
-  vlanLabel: 'abc',
-};
-
-describe('AddonsPanel', () => {
-  beforeEach(() => {
-    server.use(
-      http.get('*/images/*', () => {
-        return HttpResponse.json(imageFactory.build());
-      })
-    );
-  });
-
-  it('should render AddonsPanel', () => {
-    renderWithTheme(<AddonsPanel {...props} />);
-  });
-
-  it('should render UserDataAccordion if showUserData is true and hide it if false', () => {
-    const userDataProps = {
-      userData: { ...props.userData, showUserData: true },
-    };
-    const { getByText, queryByText, rerender } = renderWithTheme(
-      <AddonsPanel {...props} {...userDataProps} />
-    );
-    getByText('Add User Data');
-    userDataProps.userData.showUserData = false;
-    rerender(wrapWithTheme(<AddonsPanel {...props} {...userDataProps} />));
-    expect(queryByText('Add User Data')).not.toBeInTheDocument();
-  });
-
-  it('Should trigger changePrivateIP if source linode has been allocated a private IP', () => {
-    renderWithTheme(<AddonsPanel {...props} />);
-
-    expect(props.togglePrivateIP).toBeCalled();
-  });
-
-  it('Should select Private IP checkbox if source linode has been allocated a private IP', () => {
-    const addOnProps = { ...props, isPrivateIPChecked: true };
-    const { getByTestId } = renderWithTheme(<AddonsPanel {...addOnProps} />);
-    const PrivateIpAddress = getByTestId('private_ip');
-    expect(
-      (PrivateIpAddress?.firstElementChild as HTMLInputElement)?.checked
-    ).toBe(true);
-  });
-
-  it('Should display base backups price when Backups checkbox is checked', () => {
-    const backupsMonthlyPrice = getMonthlyBackupsPrice({
-      region: 'us-east',
-      type,
-    });
-    const addOnProps = {
-      ...props,
-      backups: true,
-      backupsMonthlyPrice,
-    };
-
-    const { getByTestId, getByText } = renderWithTheme(
-      <AddonsPanel {...addOnProps} />
-    );
-
-    const backupsCheckbox = getByTestId('backups');
-    backupsCheckbox.click();
-
-    expect(getByText(/\$2.50/)).toBeInTheDocument();
-  });
-
-  it('Should display DC-specific backups price for region with special pricing when Backups checkbox is checked', () => {
-    const backupsMonthlyPrice = getMonthlyBackupsPrice({
-      region: 'id-cgk',
-      type,
-    });
-    const addOnProps = {
-      ...props,
-      backups: true,
-      backupsMonthlyPrice,
-    };
-
-    const { getByTestId, getByText } = renderWithTheme(
-      <AddonsPanel {...addOnProps} />
-    );
-
-    const backupsCheckbox = getByTestId('backups');
-    backupsCheckbox.click();
-
-    expect(getByText(/\$3.57/)).toBeInTheDocument();
-  });
-
-  it('should render a warning notice if isDistributedRegionSelected is true and disable backups and private ip checkbox', () => {
-    const propsWithDistributedRegionSelected = {
-      ...props,
-      isDistributedRegionSelected: true,
-    };
-    const { getByTestId } = renderWithTheme(
-      <AddonsPanel {...propsWithDistributedRegionSelected} />
-    );
-    expect(getByTestId('notice-warning')).toBeInTheDocument();
-    expect(getByTestId('private_ip')).toHaveAttribute('aria-disabled', 'true');
-    expect(getByTestId('backups')).toHaveAttribute('aria-disabled', 'true');
-  });
-  it('should not render a warning notice if isDistributedRegionSelected is false', () => {
-    const propsWithDistributedRegionNotSelected = {
-      ...props,
-      isDistributedRegionSelected: false,
-    };
-    const { queryByTestId } = renderWithTheme(
-      <AddonsPanel {...propsWithDistributedRegionNotSelected} />
-    );
-    expect(queryByTestId('notice-warning')).not.toBeInTheDocument();
-  });
-});
diff --git a/packages/manager/src/features/Linodes/LinodesCreate/AddonsPanel.tsx b/packages/manager/src/features/Linodes/LinodesCreate/AddonsPanel.tsx
deleted file mode 100644
index 87c2d8fbe07..00000000000
--- a/packages/manager/src/features/Linodes/LinodesCreate/AddonsPanel.tsx
+++ /dev/null
@@ -1,312 +0,0 @@
-import { useMediaQuery } from '@mui/material';
-import { styled, useTheme } from '@mui/material/styles';
-import * as React from 'react';
-import { Link } from 'react-router-dom';
-
-import { Box } from 'src/components/Box';
-import { Checkbox } from 'src/components/Checkbox';
-import { Currency } from 'src/components/Currency';
-import { Divider } from 'src/components/Divider';
-import { DISK_ENCRYPTION_BACKUPS_CAVEAT_COPY } from 'src/components/Encryption/constants';
-import { useIsDiskEncryptionFeatureEnabled } from 'src/components/Encryption/utils';
-import { FormControlLabel } from 'src/components/FormControlLabel';
-import { Notice } from 'src/components/Notice/Notice';
-import { Paper } from 'src/components/Paper';
-import { TooltipIcon } from 'src/components/TooltipIcon';
-import { Typography } from 'src/components/Typography';
-import { useImageQuery } from 'src/queries/images';
-import { privateIPRegex } from 'src/utilities/ipUtils';
-
-import { UserDataAccordion } from './UserDataAccordion/UserDataAccordion';
-import { VLANAccordion } from './VLANAccordion';
-
-import type { Interface, Linode } from '@linode/api-v4/lib/linodes';
-import type { UserDataAccordionProps } from 'src/features/Linodes/LinodesCreate/UserDataAccordion/UserDataAccordion';
-import type { CreateTypes } from 'src/store/linodeCreate/linodeCreate.actions';
-
-interface UserDataProps extends UserDataAccordionProps {
-  showUserData: boolean;
-}
-
-export interface AddonsPanelProps {
-  accountBackups: boolean;
-  backups: boolean;
-  backupsMonthlyPrice?: null | number;
-  changeBackups: () => void;
-  createType: CreateTypes;
-  disabled?: boolean;
-  diskEncryptionEnabled: boolean;
-  handleVLANChange: (updatedInterface: Interface) => void;
-  ipamAddress: string;
-  ipamError?: string;
-  isDistributedRegionSelected?: boolean;
-  isPrivateIPChecked: boolean;
-  labelError?: string;
-  linodesData?: Linode[];
-  selectedImageID?: string;
-  selectedLinodeID?: number;
-  selectedRegionID?: string; // Used for filtering VLANs
-  selectedTypeID?: string;
-  togglePrivateIP: () => void;
-  userData: UserDataProps;
-  vlanLabel: string;
-}
-
-export const AddonsPanel = React.memo((props: AddonsPanelProps) => {
-  const {
-    accountBackups,
-    backupsMonthlyPrice,
-    changeBackups,
-    createType,
-    disabled,
-    diskEncryptionEnabled,
-    handleVLANChange,
-    ipamAddress,
-    ipamError,
-    isDistributedRegionSelected,
-    isPrivateIPChecked,
-    labelError,
-    linodesData,
-    selectedImageID,
-    selectedLinodeID,
-    selectedRegionID,
-    selectedTypeID,
-    togglePrivateIP,
-    userData,
-    vlanLabel,
-  } = props;
-
-  const theme = useTheme();
-
-  const {
-    isDiskEncryptionFeatureEnabled,
-  } = useIsDiskEncryptionFeatureEnabled();
-
-  const matchesMdUp = useMediaQuery(theme.breakpoints.up('md'));
-
-  const { data: image } = useImageQuery(
-    selectedImageID ?? '',
-    Boolean(selectedImageID)
-  );
-
-  // The VLAN section is shown when the user is not creating by cloning (cloning copies the network interfaces)
-  const showVlans = createType !== 'fromLinode';
-
-  const isBareMetal = /metal/.test(selectedTypeID ?? '');
-
-  const vlanDisabledReason = getVlanDisabledReason(
-    isBareMetal,
-    createType,
-    selectedImageID
-  );
-
-  const backupsDisabledReason = isBareMetal
-    ? 'Backups cannot be used with Bare Metal Linodes.'
-    : null;
-
-  const renderBackupsPrice = () => {
-    return backupsMonthlyPrice && backupsMonthlyPrice > 0 ? (
-      <Typography variant="body1">
-        <Currency quantity={backupsMonthlyPrice} /> per month
-      </Typography>
-    ) : undefined;
-  };
-
-  const checkBackupsWarning = () => {
-    if (accountBackups || props.backups) {
-      if (selectedLinodeID) {
-        const selectedLinode = linodesData?.find(
-          (linode) => linode.id === selectedLinodeID
-        );
-        if (
-          selectedLinode?.image?.includes('private/') ||
-          !selectedLinode?.image
-        ) {
-          return true;
-        }
-      } else if (selectedImageID && !image?.is_public) {
-        return true;
-      }
-    }
-
-    return false;
-  };
-
-  // The backups warning is shown when the user checks to enable backups, but they are using a custom image that may not be compatible.
-  const showBackupsWarning = checkBackupsWarning();
-
-  // Check whether the source Linode has been allocated a private IP to select/unselect the 'Private IP' checkbox.
-  React.useEffect(() => {
-    if (selectedLinodeID) {
-      const selectedLinode = linodesData?.find(
-        (image) => image.id === selectedLinodeID
-      );
-      const linodeHasPrivateIp = selectedLinode?.ipv4.some((ipv4) =>
-        privateIPRegex.test(ipv4)
-      );
-      if (
-        (linodeHasPrivateIp && !isPrivateIPChecked) ||
-        (!linodeHasPrivateIp && isPrivateIPChecked)
-      ) {
-        togglePrivateIP();
-      }
-    }
-  }, [selectedLinodeID]);
-
-  const isBackupsBoxChecked =
-    (accountBackups && !isDistributedRegionSelected) || props.backups;
-
-  return (
-    <>
-      {showVlans && (
-        <VLANAccordion
-          handleVLANChange={handleVLANChange}
-          helperText={vlanDisabledReason}
-          ipamAddress={ipamAddress}
-          ipamError={ipamError}
-          labelError={labelError}
-          readOnly={disabled || Boolean(vlanDisabledReason)}
-          region={selectedRegionID}
-          vlanLabel={vlanLabel}
-        />
-      )}
-      {userData.showUserData && (
-        <UserDataAccordion
-          createType={userData.createType}
-          onChange={userData.onChange}
-          userData={userData.userData}
-        />
-      )}
-      <Paper data-qa-add-ons sx={{ marginTop: theme.spacing(3) }}>
-        <Typography sx={{ marginBottom: theme.spacing(2) }} variant="h2">
-          Add-ons{' '}
-          {backupsDisabledReason && (
-            <TooltipIcon status="help" text={backupsDisabledReason} />
-          )}
-        </Typography>
-        {isDistributedRegionSelected && (
-          <Notice
-            text="Backups and Private IP are currently not available for distributed regions."
-            variant="warning"
-          />
-        )}
-        {showBackupsWarning && (
-          <Notice variant="warning">
-            Linodes must have a disk formatted with an ext3 or ext4 file system
-            to use the backup service.
-          </Notice>
-        )}
-        <StyledFormControlLabel
-          control={
-            <Checkbox
-              data-qa-check-backups={
-                accountBackups ? 'auto backup enabled' : 'auto backup disabled'
-              }
-              disabled={
-                accountBackups ||
-                disabled ||
-                isBareMetal ||
-                isDistributedRegionSelected
-              }
-              checked={isBackupsBoxChecked}
-              data-testid="backups"
-              onChange={changeBackups}
-            />
-          }
-          label={
-            <Box display="flex">
-              <Box sx={{ marginRight: 2 }}>Backups</Box>
-              {renderBackupsPrice()}
-            </Box>
-          }
-        />
-        {isDiskEncryptionFeatureEnabled &&
-          diskEncryptionEnabled &&
-          isBackupsBoxChecked && (
-            <Notice
-              typeProps={{
-                style: { fontSize: '0.875rem' },
-              }}
-              spacingLeft={matchesMdUp ? 52 : 36} // Numbers derived from paddingLeft on StyledTypography (+2 to achieve alignment)
-              text={DISK_ENCRYPTION_BACKUPS_CAVEAT_COPY}
-              variant="warning"
-            />
-          )}
-        <StyledTypography variant="body1">
-          {accountBackups && !isDistributedRegionSelected ? (
-            <React.Fragment>
-              You have enabled automatic backups for your account. This Linode
-              will automatically have backups enabled. To change this setting,{' '}
-              <Link to={'/account/settings'}>click here.</Link>
-            </React.Fragment>
-          ) : (
-            <React.Fragment>
-              Three backup slots are executed and rotated automatically: a daily
-              backup, a 2-7 day old backup, and an 8-14 day old backup. Plans
-              are priced according to the Linode plan selected above.
-            </React.Fragment>
-          )}
-        </StyledTypography>
-        <Divider />
-        <StyledFormControlLabel
-          control={
-            <Checkbox
-              checked={isPrivateIPChecked}
-              data-qa-check-private-ip
-              data-testid="private_ip"
-              disabled={disabled || isDistributedRegionSelected}
-              onChange={togglePrivateIP}
-            />
-          }
-          label="Private IP"
-        />
-        <StyledTypography
-          data-testid="private-ip-contextual-copy"
-          variant="body1"
-        >
-          Use Private IP for a backend node to a NodeBalancer. Use VPC instead
-          for private communication between your Linodes.
-        </StyledTypography>
-      </Paper>
-    </>
-  );
-});
-
-const StyledTypography = styled(Typography, { label: 'StyledTypography' })(
-  ({ theme }) => ({
-    marginTop: -8,
-    paddingLeft: `calc(${theme.spacing(2)} + 18px)`, // 34,
-    [theme.breakpoints.up('md')]: {
-      paddingLeft: `calc(${theme.spacing(4)} + 18px)`, // 50
-    },
-  })
-);
-
-const StyledFormControlLabel = styled(FormControlLabel, {
-  label: 'StyledFormControlLabel',
-})(({ theme }) => ({
-  '& > span:last-child': {
-    color: theme.color.headline,
-    fontFamily: theme.font.bold,
-    fontSize: '1rem',
-    lineHeight: '1.2em',
-    [theme.breakpoints.up('md')]: {
-      marginLeft: theme.spacing(2),
-    },
-  },
-}));
-
-const getVlanDisabledReason = (
-  isBareMetal: boolean,
-  createType: CreateTypes,
-  selectedImage?: string
-) => {
-  if (isBareMetal) {
-    return 'VLANs cannot be used with Bare Metal Linodes.';
-  } else if (createType === 'fromBackup') {
-    return 'You cannot attach a VLAN when deploying to a new Linode from a backup.';
-  } else if (!selectedImage) {
-    return 'You must select an Image to attach a VLAN.';
-  }
-  return undefined;
-};
diff --git a/packages/manager/src/features/Linodes/LinodesCreate/AppPanelSection.tsx b/packages/manager/src/features/Linodes/LinodesCreate/AppPanelSection.tsx
deleted file mode 100644
index 47968bb31b6..00000000000
--- a/packages/manager/src/features/Linodes/LinodesCreate/AppPanelSection.tsx
+++ /dev/null
@@ -1,90 +0,0 @@
-import { StackScript, UserDefinedField } from '@linode/api-v4/lib/stackscripts';
-import Grid from '@mui/material/Unstable_Grid2';
-import { styled } from '@mui/material/styles';
-import * as React from 'react';
-
-import { Box } from 'src/components/Box';
-import { Chip } from 'src/components/Chip';
-import { Divider } from 'src/components/Divider';
-import { Typography } from 'src/components/Typography';
-import { SelectionCardWrapper } from 'src/features/Linodes/LinodesCreate/SelectionCardWrapper';
-
-import { handleAppLabel } from './utilities';
-
-interface Props {
-  apps: StackScript[];
-  disabled: boolean;
-  handleClick: (
-    id: number,
-    label: string,
-    username: string,
-    stackScriptImages: string[],
-    userDefinedFields: UserDefinedField[]
-  ) => void;
-  heading?: string;
-  openDrawer: (stackScriptLabel: string) => void;
-  searchValue?: string;
-  selectedStackScriptID: number | undefined;
-}
-
-export const AppPanelSection = (props: Props) => {
-  const {
-    apps,
-    disabled,
-    handleClick,
-    heading,
-    openDrawer,
-    searchValue,
-    selectedStackScriptID,
-  } = props;
-
-  if (heading === 'New apps' && !apps.length) {
-    return null;
-  }
-
-  return (
-    <Box data-testid={heading}>
-      <Typography variant="h2">{heading}</Typography>
-      {heading && heading.length > 0 ? (
-        <Divider spacingBottom={16} spacingTop={16} />
-      ) : null}
-      {apps.length > 0 ? (
-        <AppPanelGrid container spacing={2}>
-          {apps.map((eachApp) => {
-            const { decodedLabel, isCluster, label } = handleAppLabel(eachApp);
-
-            return (
-              <SelectionCardWrapper
-                labelDecoration={
-                  isCluster ? <Chip label="CLUSTER" size="small" /> : undefined
-                }
-                availableImages={eachApp.images}
-                checked={eachApp.id === selectedStackScriptID}
-                clusterLabel={decodedLabel}
-                disabled={disabled}
-                handleClick={handleClick}
-                iconUrl={eachApp.logo_url.toLowerCase() || ''}
-                id={eachApp.id}
-                key={eachApp.id}
-                // Decode App labels since they may contain HTML entities.
-                label={label}
-                openDrawer={openDrawer}
-                userDefinedFields={eachApp.user_defined_fields}
-              />
-            );
-          })}
-        </AppPanelGrid>
-      ) : (
-        <Typography>
-          {`Sorry, no results matching "${searchValue}" were found.`}
-        </Typography>
-      )}
-    </Box>
-  );
-};
-
-const AppPanelGrid = styled(Grid)(({ theme }) => ({
-  marginBottom: theme.spacing(),
-  marginTop: theme.spacing(2),
-  padding: `${theme.spacing(1)} 0`,
-}));
diff --git a/packages/manager/src/features/Linodes/LinodesCreate/LinodeCreate.styles.ts b/packages/manager/src/features/Linodes/LinodesCreate/LinodeCreate.styles.ts
deleted file mode 100644
index 7dd9ff4422f..00000000000
--- a/packages/manager/src/features/Linodes/LinodesCreate/LinodeCreate.styles.ts
+++ /dev/null
@@ -1,84 +0,0 @@
-import { styled } from '@mui/material/styles';
-
-import { Box } from 'src/components/Box';
-import { Button } from 'src/components/Button/Button';
-import { Link } from 'src/components/Link';
-import { Paper } from 'src/components/Paper';
-import { TabPanels } from 'src/components/Tabs/TabPanels';
-import { omittedProps } from 'src/utilities/omittedProps';
-
-import type { LinodeCreateProps } from './LinodeCreate';
-
-type StyledLinodeCreateProps = Pick<LinodeCreateProps, 'showGDPRCheckbox'>;
-
-export const StyledButtonGroupBox = styled(Box, { label: 'StyledButtonGroup' })(
-  ({ theme }) => ({
-    marginTop: theme.spacing(3),
-    [theme.breakpoints.down('sm')]: {
-      justifyContent: 'flex-end',
-    },
-  })
-);
-
-export const StyledCreateButton = styled(Button, {
-  label: 'StyledCreateButton',
-})(({ theme }) => ({
-  marginLeft: theme.spacing(1),
-  [theme.breakpoints.down('md')]: {
-    marginRight: theme.spacing(1),
-  },
-}));
-
-export const StyledForm = styled('form', { label: 'StyledForm' })({
-  width: '100%',
-});
-
-export const StyledMessageDiv = styled('div', {
-  label: 'StyledMessageDiv',
-  shouldForwardProp: omittedProps(['showGDPRCheckbox']),
-})<StyledLinodeCreateProps>(({ showGDPRCheckbox, theme }) => ({
-  display: 'flex',
-  flexDirection: 'column' as const,
-  flexGrow: 1,
-  gap: theme.spacing(2),
-  [(theme.breakpoints.down('sm'), theme.breakpoints.down('md'))]: {
-    margin: theme.spacing(1),
-  },
-
-  // conditional styling
-  ...(showGDPRCheckbox
-    ? {
-        maxWidth: '100%',
-        [theme.breakpoints.down('sm')]: {
-          maxWidth: 'unset',
-        },
-      }
-    : {}),
-}));
-
-export const StyledPaper = styled(Paper, { label: 'StyledPaper' })(
-  ({ theme }) => ({
-    '& [role="tablist"]': {
-      marginBottom: theme.spacing(),
-      marginTop: theme.spacing(2),
-    },
-  })
-);
-
-export const StyledTabPanel = styled(TabPanels, { label: 'StyledTabPanel' })(
-  ({ theme }) => ({
-    '& .MuiPaper-root': {
-      padding: 0,
-    },
-  })
-);
-
-// Currently used in VPC and Firewall panels
-export const StyledCreateLink = styled(Link, {
-  label: 'StyledCreateLink',
-})(({ theme }) => ({
-  fontSize: '14px',
-  marginBottom: theme.spacing(2),
-  marginTop: theme.spacing(1.5),
-  width: '100px',
-}));
diff --git a/packages/manager/src/features/Linodes/LinodesCreate/LinodeCreate.tsx b/packages/manager/src/features/Linodes/LinodesCreate/LinodeCreate.tsx
deleted file mode 100644
index c305ec6ccc6..00000000000
--- a/packages/manager/src/features/Linodes/LinodesCreate/LinodeCreate.tsx
+++ /dev/null
@@ -1,1255 +0,0 @@
-import { restoreBackup } from '@linode/api-v4/lib/linodes';
-import { CreateLinodeSchema } from '@linode/validation/lib/linodes.schema';
-import Grid from '@mui/material/Unstable_Grid2';
-import cloneDeep from 'lodash.clonedeep';
-import * as React from 'react';
-import { connect } from 'react-redux';
-import { v4 } from 'uuid';
-
-import { AccessPanel } from 'src/components/AccessPanel/AccessPanel';
-import { AkamaiBanner } from 'src/components/AkamaiBanner/AkamaiBanner';
-import { Box } from 'src/components/Box';
-import { Checkbox } from 'src/components/Checkbox';
-import { CheckoutSummary } from 'src/components/CheckoutSummary/CheckoutSummary';
-import { CircleProgress } from 'src/components/CircleProgress';
-import { DetailsPanel } from 'src/components/DetailsPanel/DetailsPanel';
-import { DocsLink } from 'src/components/DocsLink/DocsLink';
-import { ErrorMessage } from 'src/components/ErrorMessage';
-import { ErrorState } from 'src/components/ErrorState/ErrorState';
-import { FormControlLabel } from 'src/components/FormControlLabel';
-import { Link } from 'src/components/Link';
-import { Notice } from 'src/components/Notice/Notice';
-import { getIsDistributedRegion } from 'src/components/RegionSelect/RegionSelect.utils';
-import { SelectRegionPanel } from 'src/components/SelectRegionPanel/SelectRegionPanel';
-import { Stack } from 'src/components/Stack';
-import { SafeTabPanel } from 'src/components/Tabs/SafeTabPanel';
-import { TabLinkList } from 'src/components/Tabs/TabLinkList';
-import { TabPanels } from 'src/components/Tabs/TabPanels';
-import { Tabs } from 'src/components/Tabs/Tabs';
-import { Typography } from 'src/components/Typography';
-import { FIREWALL_GET_STARTED_LINK } from 'src/constants';
-import { EUAgreementCheckbox } from 'src/features/Account/Agreements/EUAgreementCheckbox';
-import { PlansPanel } from 'src/features/components/PlansPanel/PlansPanel';
-import {
-  getMonthlyAndHourlyNodePricing,
-  utoa,
-} from 'src/features/Linodes/LinodesCreate/utilities';
-import { regionSupportsMetadata } from 'src/features/Linodes/LinodesCreate/utilities';
-import { SMTPRestrictionText } from 'src/features/Linodes/SMTPRestrictionText';
-import {
-  getCommunityStackscripts,
-  getMineAndAccountStackScripts,
-} from 'src/features/StackScripts/stackScriptUtils';
-import { handleChangeCreateType } from 'src/store/linodeCreate/linodeCreate.actions';
-import { getInitialType } from 'src/store/linodeCreate/linodeCreate.reducer';
-import {
-  sendApiAwarenessClickEvent,
-  sendLinodeCreateFlowDocsClickEvent,
-} from 'src/utilities/analytics/customEventAnalytics';
-import {
-  sendLinodeCreateFormErrorEvent,
-  sendLinodeCreateFormInputEvent,
-} from 'src/utilities/analytics/formEventAnalytics';
-import { doesRegionSupportFeature } from 'src/utilities/doesRegionSupportFeature';
-import { getErrorMap } from 'src/utilities/errorUtils';
-import { extendType } from 'src/utilities/extendType';
-import { filterCurrentTypes } from 'src/utilities/filterCurrentLinodeTypes';
-import { getMonthlyBackupsPrice } from 'src/utilities/pricing/backups';
-import { UNKNOWN_PRICE } from 'src/utilities/pricing/constants';
-import { renderMonthlyPriceToCorrectDecimalPlace } from 'src/utilities/pricing/dynamicPricing';
-import { getQueryParamsFromQueryString } from 'src/utilities/queryParams';
-import { scrollErrorIntoViewV2 } from 'src/utilities/scrollErrorIntoViewV2';
-
-import { SelectFirewallPanel } from '../../../components/SelectFirewallPanel/SelectFirewallPanel';
-import { AddonsPanel } from './AddonsPanel';
-import { ApiAwarenessModal } from './ApiAwarenessModal/ApiAwarenessModal';
-import {
-  StyledButtonGroupBox,
-  StyledCreateButton,
-  StyledForm,
-  StyledMessageDiv,
-  StyledPaper,
-  StyledTabPanel,
-} from './LinodeCreate.styles';
-import { FromAppsContent } from './TabbedContent/FromAppsContent';
-import { FromBackupsContent } from './TabbedContent/FromBackupsContent';
-import { FromImageContent } from './TabbedContent/FromImageContent';
-import { FromLinodeContent } from './TabbedContent/FromLinodeContent';
-import { FromStackScriptContent } from './TabbedContent/FromStackScriptContent';
-import { renderBackupsDisplaySection } from './TabbedContent/utils';
-import { VPCPanel } from './VPCPanel';
-
-import type {
-  AllFormStateAndHandlers,
-  AppsData,
-  HandleSubmit,
-  Info,
-  LinodeCreateValidation,
-  ReduxStateProps,
-  StackScriptFormStateHandlers,
-  TypeInfo,
-  WithDisplayData,
-  WithTypesRegionsAndImages,
-} from './types';
-import type { PlacementGroup } from '@linode/api-v4';
-import type {
-  CreateLinodePlacementGroupPayload,
-  CreateLinodeRequest,
-  EncryptionStatus,
-  InterfacePayload,
-  PriceObject,
-} from '@linode/api-v4';
-import type { Tag } from '@linode/api-v4/lib/tags/types';
-import type { MapDispatchToProps } from 'react-redux';
-import type { RouteComponentProps } from 'react-router-dom';
-import type { Tab } from 'src/components/Tabs/TabLinkList';
-import type { WithAccountProps } from 'src/containers/account.container';
-import type { WithFeatureFlagProps } from 'src/containers/flags.container';
-import type { WithImagesProps as ImagesProps } from 'src/containers/images.container';
-import type { RegionsProps } from 'src/containers/regions.container';
-import type { WithTypesProps } from 'src/containers/types.container';
-import type { WithLinodesProps } from 'src/containers/withLinodes.container';
-import type { LinodeCreateType } from 'src/features/Linodes/LinodesCreate/types';
-import type { LinodeCreateQueryParams } from 'src/features/Linodes/types';
-import type { CreateTypes } from 'src/store/linodeCreate/linodeCreate.actions';
-import type { ExtendedIP } from 'src/utilities/ipUtils';
-
-export interface LinodeCreateProps {
-  additionalIPv4RangesForVPC: ExtendedIP[];
-  assignPublicIPv4Address: boolean;
-  autoassignIPv4WithinVPC: boolean;
-  checkValidation: LinodeCreateValidation;
-  checkedFirewallAuthorization: boolean;
-  createType: CreateTypes;
-  diskEncryptionEnabled: boolean;
-  firewallId: number | undefined;
-  handleAgreementChange: () => void;
-  handleFirewallAuthorizationChange: () => void;
-  handleFirewallChange: (firewallId: number) => void;
-  handleIPv4RangesForVPC: (ranges: ExtendedIP[]) => void;
-  handlePlacementGroupChange: (placementGroup: PlacementGroup | null) => void;
-  handleShowApiAwarenessModal: () => void;
-  handleSubmitForm: HandleSubmit;
-  handleSubnetChange: (subnetId: number | undefined) => void;
-  handleVLANChange: (updatedInterface: InterfacePayload) => void;
-  handleVPCIPv4Change: (IPv4: string) => void;
-  history: any;
-  imageDisplayInfo: Info;
-  ipamAddress: null | string;
-  label: string;
-  placementGroupSelection?: PlacementGroup;
-  regionDisplayInfo: Info;
-  resetCreationState: () => void;
-  selectedSubnetId?: number;
-  selectedVPCId?: number;
-  setAuthorizedUsers: (usernames: string[]) => void;
-  setBackupID: (id: number) => void;
-  setSelectedVPC: (vpcID: number) => void;
-  showApiAwarenessModal: boolean;
-  showFirewallAuthorization: boolean;
-  showGDPRCheckbox: boolean;
-  showGeneralError?: boolean;
-  signedAgreement: boolean;
-  toggleAssignPublicIPv4Address: () => void;
-  toggleAutoassignIPv4WithinVPCEnabled: () => void;
-  toggleBackupsEnabled: () => void;
-  toggleDiskEncryptionEnabled: () => void;
-  togglePrivateIPEnabled: () => void;
-  typeDisplayInfo: TypeInfo;
-  updateDiskSize: (size: number) => void;
-  updateLabel: (label: string) => void;
-  updateLinodeID: (id: number, diskSize?: number | undefined) => void;
-  updatePassword: (password: string) => void;
-  updateTags: (tags: Tag[]) => void;
-  updateUserData: (userData: string) => void;
-  userData: string | undefined;
-  vlanLabel: null | string;
-  vpcIPv4AddressOfLinode: string | undefined;
-}
-
-const errorMap = [
-  'backup_id',
-  'image',
-  'label',
-  'linode_id',
-  'region',
-  'root_pass',
-  'stackscript_id',
-  'type',
-  'interfaces[1].label',
-  'interfaces[1].ipam_address',
-  'interfaces[0].subnet_id',
-  'ipv4.vpc',
-  'placement_group',
-];
-
-type InnerProps = WithTypesRegionsAndImages &
-  ReduxStateProps &
-  StackScriptFormStateHandlers &
-  LinodeCreateProps;
-
-type CombinedProps = AllFormStateAndHandlers &
-  AppsData &
-  WithFeatureFlagProps &
-  ImagesProps &
-  InnerProps &
-  ReduxStateProps &
-  RegionsProps &
-  RouteComponentProps<{}> &
-  WithAccountProps &
-  WithDisplayData &
-  WithLinodesProps &
-  WithTypesProps;
-
-interface State {
-  hasError: boolean;
-  numberOfNodes: number;
-  planKey: string;
-  selectedTab: number;
-  stackScriptSelectedTab: number;
-}
-
-interface CreateTab extends Tab {
-  type: CreateTypes;
-}
-
-interface LinodeCreateComponentProps extends CombinedProps, DispatchProps {}
-
-export class LinodeCreate extends React.PureComponent<
-  LinodeCreateComponentProps,
-  State
-> {
-  createLinode = () => {
-    const payload = this.getPayload();
-
-    try {
-      CreateLinodeSchema.validateSync(payload, {
-        abortEarly: true,
-      });
-      this.setState({ hasError: false });
-    } catch (e) {
-      this.setState({ hasError: true }, () => {
-        scrollErrorIntoViewV2(this.createLinodeFormRef);
-      });
-    }
-    this.props.handleSubmitForm(payload, this.props.selectedLinodeID);
-  };
-
-  createLinodeFormRef = React.createRef<HTMLFormElement>();
-
-  filterTypes = () => {
-    const { createType, typesData } = this.props;
-    const { selectedTab } = this.state;
-    const currentTypes = filterCurrentTypes(typesData?.map(extendType));
-
-    return ['fromBackup', 'fromImage'].includes(createType) && selectedTab !== 0
-      ? currentTypes.filter((t) => t.class !== 'metal')
-      : currentTypes;
-  };
-
-  getPayload = () => {
-    const selectedRegion = this.props.selectedRegionID || '';
-
-    const regionSupportsVLANs = doesRegionSupportFeature(
-      selectedRegion,
-      this.props.regionsData,
-      'Vlans'
-    );
-
-    const regionSupportsVPCs = doesRegionSupportFeature(
-      this.props.selectedRegionID ?? '',
-      this.props.regionsData,
-      'VPCs'
-    );
-
-    const regionSupportsDiskEncryption = doesRegionSupportFeature(
-      this.props.selectedRegionID ?? '',
-      this.props.regionsData,
-      'Disk Encryption'
-    );
-
-    const hasDiskEncryptionAccountCapability = this.props.account.data?.capabilities?.includes(
-      'Disk Encryption'
-    );
-
-    const isDiskEncryptionFeatureEnabled =
-      this.props.flags.linodeDiskEncryption &&
-      hasDiskEncryptionAccountCapability;
-
-    const diskEncryptionPayload: EncryptionStatus = this.props
-      .diskEncryptionEnabled
-      ? 'enabled'
-      : 'disabled';
-
-    const placement_group_payload: CreateLinodePlacementGroupPayload = {
-      id: this.props.placementGroupSelection?.id ?? -1,
-    };
-
-    // eslint-disable-next-line sonarjs/no-unused-collection
-    const interfaces: InterfacePayload[] = [];
-
-    const payload: CreateLinodeRequest = {
-      authorized_users: this.props.authorized_users,
-      backup_id: this.props.selectedBackupID,
-      backups_enabled: this.props.backupsEnabled,
-      booted: true,
-      disk_encryption:
-        isDiskEncryptionFeatureEnabled && regionSupportsDiskEncryption
-          ? diskEncryptionPayload
-          : undefined,
-      firewall_id: this.props.firewallId,
-      image: this.props.selectedImageID,
-      label: this.props.label,
-      placement_group:
-        placement_group_payload.id !== -1 ? placement_group_payload : undefined,
-      private_ip: this.props.privateIPEnabled,
-      region: this.props.selectedRegionID ?? '',
-      root_pass: this.props.password,
-      stackscript_data: this.props.selectedUDFs,
-
-      // StackScripts
-      stackscript_id: this.props.selectedStackScriptID,
-      tags: this.props.tags
-        ? this.props.tags.map((eachTag) => eachTag.label)
-        : [],
-      type: this.props.selectedTypeID ?? '',
-    };
-
-    if (
-      regionSupportsVPCs &&
-      this.props.selectedVPCId !== undefined &&
-      this.props.selectedVPCId !== -1
-    ) {
-      const vpcInterfaceData: InterfacePayload = {
-        ip_ranges: this.props.additionalIPv4RangesForVPC
-          .map((ipRange) => ipRange.address)
-          .filter((ipRange) => ipRange !== ''),
-        ipam_address: null,
-        ipv4: {
-          nat_1_1: this.props.assignPublicIPv4Address ? 'any' : undefined,
-          vpc: this.props.autoassignIPv4WithinVPC
-            ? undefined
-            : this.props.vpcIPv4AddressOfLinode,
-        },
-        label: null,
-        primary: true,
-        purpose: 'vpc',
-        subnet_id: this.props.selectedSubnetId,
-        vpc_id: this.props.selectedVPCId,
-      };
-
-      interfaces.unshift(vpcInterfaceData);
-    }
-
-    if (
-      regionSupportsVLANs &&
-      this.props.selectedImageID &&
-      Boolean(this.props.vlanLabel)
-    ) {
-      // The region must support VLANs and an image and VLAN
-      // must be selected
-      interfaces.push({
-        ipam_address: this.props.ipamAddress,
-        label: this.props.vlanLabel,
-        purpose: 'vlan',
-      });
-    }
-
-    if (this.props.userData) {
-      payload['metadata'] = {
-        user_data: utoa(this.props.userData),
-      };
-    }
-
-    const vpcAssigned = interfaces.some(
-      (_interface) => _interface.purpose === 'vpc'
-    );
-    const vlanAssigned = interfaces.some(
-      (_interface) => _interface.purpose === 'vlan'
-    );
-
-    // Only submit 'interfaces' in the payload if there are VPCs
-    // or VLANs
-    if (interfaces.length > 0) {
-      // Determine position of the default public interface
-
-      // Case 1: VLAN assigned, no VPC assigned
-      if (!vpcAssigned) {
-        interfaces.unshift(defaultPublicInterface);
-      }
-
-      // Case 2: VPC assigned, no VLAN assigned, Private IP enabled
-      if (!vlanAssigned && this.props.privateIPEnabled) {
-        interfaces.push(defaultPublicInterface);
-      }
-
-      // Case 3: VPC and VLAN assigned + Private IP enabled
-      if (vpcAssigned && vlanAssigned && this.props.privateIPEnabled) {
-        interfaces.push(defaultPublicInterface);
-      }
-
-      payload['interfaces'] = interfaces;
-    }
-
-    return payload;
-  };
-
-  handleAnalyticsFormError = (
-    errorMap: Partial<Record<string, string | undefined>>
-  ) => {
-    const { selectedTab } = this.state;
-    const selectedTabName = this.tabs[selectedTab].title as LinodeCreateType;
-    let errorString = '';
-
-    if (!errorMap) {
-      return;
-    }
-    if (errorMap.region) {
-      errorString += errorMap.region;
-    }
-    if (errorMap.type) {
-      errorString += `${errorString.length > 0 ? `|` : ''}${errorMap.type}`;
-    }
-    if (errorMap.root_pass) {
-      errorString += `${errorString.length > 0 ? `|` : ''}${
-        errorMap.root_pass
-      }`;
-    }
-
-    sendLinodeCreateFormErrorEvent(errorString, selectedTabName ?? 'OS');
-  };
-
-  handleClickCreateUsingCommandLine = (
-    apicliButtonCopy: string | undefined
-  ) => {
-    const payload = {
-      authorized_users: this.props.authorized_users,
-      backup_id: this.props.selectedBackupID,
-      backups_enabled: this.props.backupsEnabled,
-      booted: true,
-      image: this.props.selectedImageID,
-      label: this.props.label,
-      private_ip: this.props.privateIPEnabled,
-      region: this.props.selectedRegionID ?? '',
-      root_pass: this.props.password,
-      stackscript_data: this.props.selectedUDFs,
-      // StackScripts
-      stackscript_id: this.props.selectedStackScriptID,
-
-      tags: this.props.tags
-        ? this.props.tags.map((eachTag) => eachTag.label)
-        : [],
-      type: this.props.selectedTypeID ?? '',
-    };
-    sendLinodeCreateFormInputEvent({
-      createType: 'OS',
-      interaction: 'click',
-      label: apicliButtonCopy ?? 'Create Using Command Line',
-    });
-    sendApiAwarenessClickEvent(
-      'Button',
-      apicliButtonCopy ?? 'Create Using Command Line'
-    );
-    this.props.checkValidation(payload);
-  };
-
-  handleTabChange = (index: number) => {
-    this.props.resetCreationState();
-
-    /** set the tab in redux state */
-    this.props.setTab(this.tabs[index].type);
-
-    /** Reset the plan panel since types may have shifted */
-
-    this.setState({
-      planKey: v4(),
-      selectedTab: index,
-    });
-  };
-
-  mounted: boolean = false;
-
-  setNumberOfNodesForAppCluster = (num: number) => {
-    this.setState({
-      numberOfNodes: num,
-    });
-  };
-
-  stackScriptTabs: CreateTab[] = [
-    {
-      routeName: `${this.props.match.url}?type=StackScripts&subtype=Account`,
-      title: 'Account StackScripts',
-      type: 'fromStackScript',
-    },
-    {
-      routeName: `${this.props.match.url}?type=StackScripts&subtype=Community`,
-      title: 'Community StackScripts',
-      type: 'fromStackScript',
-    },
-  ];
-
-  tabs: CreateTab[] = [
-    {
-      routeName: `${this.props.match.url}?type=OS`,
-      title: 'OS',
-      type: 'fromImage',
-    },
-    {
-      routeName: `${this.props.match.url}?type=One-Click`,
-      title: 'Marketplace',
-      type: 'fromApp',
-    },
-    {
-      routeName: `${this.props.match.url}?type=StackScripts`,
-      title: 'StackScripts',
-      type: 'fromStackScript',
-    },
-    {
-      routeName: `${this.props.match.url}?type=Images`,
-      title: 'Images',
-      type: 'fromImage',
-    },
-    {
-      routeName: `${this.props.match.url}?type=Backups`,
-      title: 'Backups',
-      type: 'fromBackup',
-    },
-    {
-      routeName: `${this.props.match.url}?type=Clone%20Linode`,
-      title: 'Clone Linode',
-      type: 'fromLinode',
-    },
-  ];
-
-  constructor(props: LinodeCreateComponentProps) {
-    super(props);
-
-    /** Get the query params as an object, excluding the "?" */
-    const queryParams = getQueryParamsFromQueryString<LinodeCreateQueryParams>(
-      location.search
-    );
-
-    const _tabs: LinodeCreateType[] = [
-      'OS',
-      'One-Click',
-      'StackScripts',
-      'Images',
-      'Backups',
-      'Clone Linode',
-    ];
-
-    /** Will be -1 if the query param is not found */
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const preSelectedTab = _tabs.findIndex((eachTab, index) => {
-      return eachTab === queryParams.type;
-    });
-
-    // If there is no specified "type" in the query params, update the Redux state
-    // so that the correct request is made when the form is submitted.
-    if (!queryParams.type) {
-      this.props.setTab(this.tabs[0].type);
-    }
-
-    this.state = {
-      hasError: false,
-      numberOfNodes: 0,
-      planKey: v4(),
-      selectedTab: preSelectedTab !== -1 ? preSelectedTab : 0,
-      stackScriptSelectedTab:
-        preSelectedTab === 2 && location.search.search('Community') > -1
-          ? 1
-          : 0,
-    };
-  }
-
-  componentDidMount() {
-    this.mounted = true;
-    this.props.setTab(getInitialType());
-  }
-
-  componentDidUpdate(prevProps: any) {
-    if (this.props.errors !== prevProps.errors) {
-      this.handleAnalyticsFormError(getErrorMap(errorMap, this.props.errors));
-    }
-
-    if (this.props.location.search === prevProps.location.search) {
-      return;
-    }
-    // This is for the case where a user is already on the create flow and click the "Marketplace" link in the PrimaryNav.
-    // Because it is the same route, the component will not unmount and remount, so we need to manually update the tab state.
-    // This fix provides an isolated solution for this specific case.
-    // Hard to make this dynamic without a larger refactor because the relationship between the tabs and the query params is not straightforward at all.
-    // ex: "One-Click" is `fromApp` creationType, and `fromImage` applies to both "OS" and "Images" creation flows so getting the index of the tab
-    // based on the query param is not reliable.
-    // It would be wise to consider rethinking this logic when we refactor the Linode Create flow. (M3-7572)
-    if (getInitialType() === 'fromApp') {
-      this.handleTabChange(1);
-    }
-  }
-
-  componentWillUnmount() {
-    this.mounted = false;
-  }
-
-  render() {
-    const { selectedTab, stackScriptSelectedTab } = this.state;
-
-    const {
-      account,
-      accountBackupsEnabled,
-      checkedFirewallAuthorization,
-      errors,
-      flags,
-      formIsSubmitting,
-      handleAgreementChange,
-      handleFirewallAuthorizationChange,
-      handlePlacementGroupChange,
-      handleShowApiAwarenessModal,
-      imageDisplayInfo,
-      imagesData,
-      imagesError,
-      imagesLoading,
-      label,
-      linodesData,
-      linodesError,
-      linodesLoading,
-      regionDisplayInfo,
-      regionsData,
-      regionsError,
-      regionsLoading,
-      selectedRegionID,
-      showApiAwarenessModal,
-      showFirewallAuthorization,
-      showGDPRCheckbox,
-      showGeneralError,
-      signedAgreement,
-      tags,
-      typeDisplayInfo,
-      typesData,
-      typesError,
-      typesLoading,
-      updateLabel,
-      updateTags,
-      updateUserData,
-      userCannotCreateLinode,
-      ...rest
-    } = this.props;
-
-    const hasErrorFor = getErrorMap(errorMap, errors);
-    const generalError = getErrorMap(errorMap, errors).none;
-    const apicliButtonCopy = this.props.flags?.apicliButtonCopy;
-
-    if (regionsLoading || imagesLoading || linodesLoading || typesLoading) {
-      return <CircleProgress />;
-    }
-
-    if (regionsError || imagesError || linodesError || typesError) {
-      return (
-        <ErrorState errorText="There was an issue loading Linode creation options." />
-      );
-    }
-
-    if (!linodesData || !imagesData || !regionsData || !typesData) {
-      return null;
-    }
-
-    const tagsInputProps = {
-      disabled: userCannotCreateLinode,
-      onChange: updateTags,
-      tagError: hasErrorFor.tags,
-      value: tags || [],
-    };
-
-    const hasBackups = Boolean(
-      this.props.backupsEnabled || accountBackupsEnabled
-    );
-
-    const hasDiskEncryptionAccountCapability = account.data?.capabilities?.includes(
-      'Disk Encryption'
-    );
-
-    const isDiskEncryptionFeatureEnabled =
-      flags.linodeDiskEncryption && hasDiskEncryptionAccountCapability;
-
-    const displaySections = [];
-    if (imageDisplayInfo) {
-      displaySections.push(imageDisplayInfo);
-    }
-
-    if (regionDisplayInfo) {
-      displaySections.push({
-        details: regionDisplayInfo.details,
-        title: regionDisplayInfo.title,
-      });
-    }
-
-    const linodeIsInDistributedRegion = getIsDistributedRegion(
-      regionsData,
-      selectedRegionID ?? ''
-    );
-
-    const regionSupportsDiskEncryption = doesRegionSupportFeature(
-      this.props.selectedRegionID ?? '',
-      this.props.regionsData,
-      'Disk Encryption'
-    );
-
-    if (typeDisplayInfo) {
-      const typeDisplayInfoCopy = cloneDeep(typeDisplayInfo);
-
-      // Always display monthly cost to two decimals
-      typeDisplayInfoCopy.details = `$${renderMonthlyPriceToCorrectDecimalPlace(
-        typeDisplayInfo.monthly
-      )}/month`;
-
-      if (this.props.createType === 'fromApp' && this.state.numberOfNodes > 0) {
-        const { hourlyPrice, monthlyPrice } = getMonthlyAndHourlyNodePricing(
-          typeDisplayInfoCopy?.monthly,
-          typeDisplayInfoCopy?.hourly,
-          this.state.numberOfNodes
-        );
-
-        typeDisplayInfoCopy.details = `${
-          this.state.numberOfNodes
-        } Nodes - $${renderMonthlyPriceToCorrectDecimalPlace(
-          monthlyPrice
-        )}/month $${hourlyPrice ?? UNKNOWN_PRICE}/hr`;
-      }
-
-      // @TODO Gecko: Remove $0 hardcoding once Gecko is in GA
-      if (linodeIsInDistributedRegion) {
-        displaySections.push({
-          ...typeDisplayInfoCopy,
-          details: '$0/month',
-          hourly: 0,
-          monthly: 0,
-        });
-      } else {
-        displaySections.push(typeDisplayInfoCopy);
-      }
-    }
-
-    const type = typesData.find(
-      (type) => type.id === this.props.selectedTypeID
-    );
-
-    const backupsMonthlyPrice:
-      | PriceObject['monthly']
-      | undefined = getMonthlyBackupsPrice({
-      region: selectedRegionID,
-      type,
-    });
-
-    if (
-      hasBackups &&
-      typeDisplayInfo &&
-      backupsMonthlyPrice &&
-      !linodeIsInDistributedRegion
-    ) {
-      displaySections.push(
-        renderBackupsDisplaySection(accountBackupsEnabled, backupsMonthlyPrice)
-      );
-    }
-
-    if (
-      isDiskEncryptionFeatureEnabled &&
-      regionSupportsDiskEncryption &&
-      this.props.diskEncryptionEnabled
-    ) {
-      displaySections.push({
-        title: 'Encrypted',
-      });
-    }
-
-    if (this.props.vlanLabel) {
-      displaySections.push({
-        title: 'VLAN Attached',
-      });
-    }
-
-    if (this.props.privateIPEnabled) {
-      displaySections.push({
-        title: 'Private IP',
-      });
-    }
-
-    if (this.props.placementGroupSelection) {
-      displaySections.push({
-        title: 'Assigned to Placement Group',
-      });
-    }
-
-    if (
-      this.props.selectedVPCId !== undefined &&
-      this.props.selectedVPCId !== -1
-    ) {
-      displaySections.push({
-        title: 'VPC Assigned',
-      });
-    }
-
-    if (this.props.firewallId !== undefined) {
-      displaySections.push({
-        title: 'Firewall Assigned',
-      });
-    }
-
-    const selectedLinode = this.props.linodesData?.find(
-      (image) => image.id === this.props.selectedLinodeID
-    );
-
-    const imageIsCloudInitCompatible =
-      this.props.selectedImageID &&
-      this.props.imagesData[this.props.selectedImageID]?.capabilities?.includes(
-        'cloud-init'
-      );
-
-    const linodeIsCloudInitCompatible =
-      this.props.selectedLinodeID &&
-      selectedLinode?.image &&
-      this.props.imagesData[selectedLinode?.image]?.capabilities?.includes(
-        'cloud-init'
-      );
-
-    const showUserData =
-      this.props.flags.metadata &&
-      regionSupportsMetadata(
-        this.props.regionsData,
-        this.props.selectedRegionID ?? ''
-      ) &&
-      (imageIsCloudInitCompatible || linodeIsCloudInitCompatible);
-
-    const isDistributedRegionSelected = Boolean(
-      flags.gecko2?.enabled &&
-        getIsDistributedRegion(regionsData, this.props.selectedRegionID ?? '')
-    );
-
-    const secureVMViolation =
-      showFirewallAuthorization &&
-      this.props.firewallId === undefined &&
-      !checkedFirewallAuthorization;
-
-    return (
-      <StyledForm ref={this.createLinodeFormRef}>
-        <Grid className="py0">
-          {hasErrorFor.none && !!showGeneralError && (
-            <Notice spacingTop={8} text={hasErrorFor.none} variant="error" />
-          )}
-          {generalError && (
-            <Notice spacingTop={8} variant="error">
-              <ErrorMessage
-                entity={{ type: 'linode_id' }}
-                formPayloadValues={{ type: this.props.selectedTypeID }}
-                message={generalError}
-              />
-            </Notice>
-          )}
-          {userCannotCreateLinode && (
-            <Notice
-              text={
-                "You don't have permissions to create a new Linode. Please contact an account administrator for details."
-              }
-              important
-              variant="error"
-            />
-          )}
-          <Stack gap={3}>
-            <Tabs
-              defaultIndex={selectedTab}
-              index={selectedTab}
-              onChange={this.handleTabChange}
-            >
-              <TabLinkList tabs={this.tabs} />
-              <TabPanels>
-                <SafeTabPanel index={0}>
-                  <FromImageContent
-                    accountBackupsEnabled={accountBackupsEnabled}
-                    error={hasErrorFor.image}
-                    imageLabel="Linux Distribution"
-                    imagePanelTitle="Choose an OS"
-                    imagesData={imagesData!}
-                    placeholder="Choose a Linux distribution"
-                    regionsData={regionsData!}
-                    typesData={typesData!}
-                    userCannotCreateLinode={userCannotCreateLinode}
-                    variant="public"
-                    {...rest}
-                  />
-                </SafeTabPanel>
-                <SafeTabPanel index={1}>
-                  <FromAppsContent
-                    setNumberOfNodesForAppCluster={
-                      this.setNumberOfNodesForAppCluster
-                    }
-                    // error={hasErrorFor.image}
-                    accountBackupsEnabled={accountBackupsEnabled}
-                    errors={errors}
-                    flags={flags}
-                    imagesData={imagesData!}
-                    regionsData={regionsData!}
-                    typesData={typesData!}
-                    userCannotCreateLinode={userCannotCreateLinode}
-                    {...rest}
-                  />
-                </SafeTabPanel>
-                <SafeTabPanel index={2}>
-                  <Tabs defaultIndex={stackScriptSelectedTab}>
-                    <StyledPaper>
-                      <Typography variant="h2">Create From:</Typography>
-                      <TabLinkList tabs={this.stackScriptTabs} />
-                      <StyledTabPanel>
-                        <SafeTabPanel index={0}>
-                          <FromStackScriptContent
-                            accountBackupsEnabled={accountBackupsEnabled}
-                            category="account"
-                            errors={errors}
-                            header={'Select a StackScript'}
-                            imagesData={imagesData!}
-                            regionsData={regionsData!}
-                            request={getMineAndAccountStackScripts}
-                            typesData={typesData!}
-                            userCannotCreateLinode={userCannotCreateLinode}
-                            {...rest}
-                          />
-                        </SafeTabPanel>
-                        <SafeTabPanel index={1}>
-                          <FromStackScriptContent
-                            accountBackupsEnabled={accountBackupsEnabled}
-                            category="community"
-                            errors={errors}
-                            header={'Select a StackScript'}
-                            imagesData={imagesData!}
-                            regionsData={regionsData!}
-                            request={getCommunityStackscripts}
-                            typesData={typesData!}
-                            userCannotCreateLinode={userCannotCreateLinode}
-                            {...rest}
-                          />
-                        </SafeTabPanel>
-                      </StyledTabPanel>
-                    </StyledPaper>
-                  </Tabs>
-                </SafeTabPanel>
-                <SafeTabPanel index={3}>
-                  <FromImageContent
-                    accountBackupsEnabled={accountBackupsEnabled}
-                    imagePanelTitle="Choose an Image"
-                    imagesData={imagesData}
-                    regionsData={regionsData!}
-                    selectedRegionID={selectedRegionID}
-                    typesData={typesData!}
-                    userCannotCreateLinode={userCannotCreateLinode}
-                    variant={'private'}
-                    {...rest}
-                  />
-                </SafeTabPanel>
-                <SafeTabPanel index={4}>
-                  <FromBackupsContent
-                    accountBackupsEnabled={accountBackupsEnabled}
-                    errors={errors}
-                    imagesData={imagesData!}
-                    linodesData={linodesData!}
-                    regionsData={regionsData!}
-                    typesData={typesData!}
-                    userCannotCreateLinode={userCannotCreateLinode}
-                    {...restoreBackup}
-                    {...rest}
-                  />
-                </SafeTabPanel>
-                <SafeTabPanel index={5}>
-                  <FromLinodeContent
-                    accountBackupsEnabled={accountBackupsEnabled}
-                    errors={errors}
-                    imagesData={imagesData!}
-                    linodesData={linodesData!}
-                    regionsData={regionsData!}
-                    typesData={typesData!}
-                    userCannotCreateLinode={userCannotCreateLinode}
-                    {...rest}
-                  />
-                </SafeTabPanel>
-              </TabPanels>
-            </Tabs>
-
-            {this.props.createType !== 'fromBackup' && (
-              <SelectRegionPanel
-                currentCapability="Linodes"
-                data-qa-select-region-panel
-                disabled={userCannotCreateLinode}
-                error={hasErrorFor.region}
-                handleSelection={this.props.updateRegionID}
-                helperText={this.props.regionHelperText}
-                selectedId={this.props.selectedRegionID}
-                selectedImageId={this.props.selectedImageID}
-                selectedLinodeTypeId={this.props.selectedTypeID}
-                updateTypeID={this.props.updateTypeID}
-              />
-            )}
-            <PlansPanel
-              docsLink={
-                <DocsLink
-                  onClick={() => {
-                    sendLinodeCreateFlowDocsClickEvent('Choosing a Plan');
-                    sendLinodeCreateFormInputEvent({
-                      createType:
-                        (this.tabs[selectedTab].title as LinodeCreateType) ??
-                        'OS',
-                      headerName: 'Linode Plan',
-                      interaction: 'click',
-                      label: 'Choosing a Plan',
-                    });
-                  }}
-                  href="https://www.linode.com/docs/guides/choosing-a-compute-instance-plan/"
-                  label="Choosing a Plan"
-                />
-              }
-              data-qa-select-plan
-              disabled={userCannotCreateLinode}
-              disabledClasses={this.props.disabledClasses}
-              error={hasErrorFor.type}
-              isCreate
-              key={this.state.planKey}
-              linodeID={this.props.selectedLinodeID}
-              onSelect={this.props.updateTypeID}
-              regionsData={regionsData!}
-              selectedId={this.props.selectedTypeID}
-              selectedRegionID={selectedRegionID}
-              showLimits
-              types={this.filterTypes()}
-            />
-          </Stack>
-          <DetailsPanel
-            labelFieldProps={{
-              disabled: userCannotCreateLinode,
-              errorText: hasErrorFor.label,
-              label: 'Linode Label',
-              onChange: (e) => updateLabel(e.target.value),
-              value: label || '',
-            }}
-            selectedPlacementGroupId={
-              this.props.placementGroupSelection?.id ?? null
-            }
-            tagsInputProps={
-              this.props.createType !== 'fromLinode'
-                ? tagsInputProps
-                : undefined
-            }
-            data-qa-details-panel
-            error={hasErrorFor.placement_group}
-            handlePlacementGroupChange={handlePlacementGroupChange}
-            selectedRegionId={selectedRegionID}
-          />
-          {/* Hide for backups and clone */}
-          {!['fromBackup', 'fromLinode'].includes(this.props.createType) && (
-            <AccessPanel
-              disabledReason={
-                !this.props.selectedImageID
-                  ? 'You must select an image to set a root password'
-                  : ''
-              }
-              toggleDiskEncryptionEnabled={
-                this.props.toggleDiskEncryptionEnabled
-              }
-              authorizedUsers={this.props.authorized_users}
-              data-qa-access-panel
-              disabled={!this.props.selectedImageID || userCannotCreateLinode}
-              diskEncryptionEnabled={this.props.diskEncryptionEnabled}
-              displayDiskEncryption
-              error={hasErrorFor.root_pass}
-              handleChange={this.props.updatePassword}
-              password={this.props.password}
-              selectedRegion={this.props.selectedRegionID}
-              setAuthorizedUsers={this.props.setAuthorizedUsers}
-            />
-          )}
-          <VPCPanel
-            toggleAssignPublicIPv4Address={
-              this.props.toggleAssignPublicIPv4Address
-            }
-            toggleAutoassignIPv4WithinVPCEnabled={
-              this.props.toggleAutoassignIPv4WithinVPCEnabled
-            }
-            additionalIPv4RangesForVPC={this.props.additionalIPv4RangesForVPC}
-            assignPublicIPv4Address={this.props.assignPublicIPv4Address}
-            autoassignIPv4WithinVPC={this.props.autoassignIPv4WithinVPC}
-            from="linodeCreate"
-            handleIPv4RangeChange={this.props.handleIPv4RangesForVPC}
-            handleSelectVPC={this.props.setSelectedVPC}
-            handleSubnetChange={this.props.handleSubnetChange}
-            handleVPCIPv4Change={this.props.handleVPCIPv4Change}
-            region={this.props.selectedRegionID}
-            selectedSubnetId={this.props.selectedSubnetId}
-            selectedVPCId={this.props.selectedVPCId}
-            subnetError={hasErrorFor['interfaces[0].subnet_id']}
-            vpcIPv4AddressOfLinode={this.props.vpcIPv4AddressOfLinode}
-            vpcIPv4Error={hasErrorFor['ipv4.vpc']}
-          />
-          {this.props.flags.linodeCreateWithFirewall && (
-            <SelectFirewallPanel
-              helperText={
-                <Typography>
-                  Assign an existing Firewall to this Linode to control inbound
-                  and outbound network traffic.{' '}
-                  <Link
-                    onClick={() =>
-                      sendLinodeCreateFormInputEvent({
-                        createType:
-                          (this.tabs[selectedTab].title as LinodeCreateType) ??
-                          'OS',
-                        headerName: 'Firewall',
-                        interaction: 'click',
-                        label: 'Learn more',
-                      })
-                    }
-                    to={FIREWALL_GET_STARTED_LINK}
-                  >
-                    Learn more
-                  </Link>
-                  .
-                </Typography>
-              }
-              disabled={userCannotCreateLinode}
-              entityType="linode"
-              handleFirewallChange={this.props.handleFirewallChange}
-              selectedFirewallId={this.props.firewallId}
-            />
-          )}
-          <AddonsPanel
-            diskEncryptionEnabled={
-              regionSupportsDiskEncryption && this.props.diskEncryptionEnabled
-            }
-            userData={{
-              createType: this.props.createType,
-              onChange: updateUserData,
-              showUserData: Boolean(showUserData),
-              userData: this.props.userData,
-            }}
-            accountBackups={accountBackupsEnabled}
-            backups={this.props.backupsEnabled}
-            backupsMonthlyPrice={backupsMonthlyPrice}
-            changeBackups={this.props.toggleBackupsEnabled}
-            createType={this.props.createType}
-            data-qa-addons-panel
-            disabled={userCannotCreateLinode}
-            handleVLANChange={this.props.handleVLANChange}
-            ipamAddress={this.props.ipamAddress || ''}
-            ipamError={hasErrorFor['interfaces[1].ipam_address']}
-            isDistributedRegionSelected={isDistributedRegionSelected}
-            isPrivateIPChecked={this.props.privateIPEnabled}
-            labelError={hasErrorFor['interfaces[1].label']}
-            linodesData={this.props.linodesData}
-            selectedImageID={this.props.selectedImageID}
-            selectedLinodeID={this.props.selectedLinodeID}
-            selectedRegionID={this.props.selectedRegionID}
-            selectedTypeID={this.props.selectedTypeID}
-            togglePrivateIP={this.props.togglePrivateIPEnabled}
-            vlanLabel={this.props.vlanLabel || ''}
-          />
-          <CheckoutSummary
-            data-qa-checkout-bar
-            displaySections={displaySections}
-            heading={`Summary ${this.props.label}`}
-          />
-          <Box
-            alignItems="center"
-            display="flex"
-            flexWrap="wrap"
-            justifyContent={showGDPRCheckbox ? 'space-between' : 'flex-end'}
-          >
-            <StyledMessageDiv showGDPRCheckbox={!!showGDPRCheckbox}>
-              <SMTPRestrictionText>
-                {({ text }) => <Grid xs={12}>{text}</Grid>}
-              </SMTPRestrictionText>
-              {showGDPRCheckbox ? (
-                <EUAgreementCheckbox
-                  centerCheckbox
-                  checked={signedAgreement}
-                  onChange={handleAgreementChange}
-                />
-              ) : null}
-              {showFirewallAuthorization &&
-              this.props.firewallId === undefined &&
-              flags.secureVmCopy?.firewallAuthorizationWarning ? (
-                <AkamaiBanner
-                  action={
-                    <FormControlLabel
-                      checked={checkedFirewallAuthorization}
-                      className="error-for-scroll"
-                      control={<Checkbox />}
-                      disableTypography
-                      label={flags.secureVmCopy.firewallAuthorizationLabel}
-                      onChange={handleFirewallAuthorizationChange}
-                      sx={{ fontSize: 14 }}
-                    />
-                  }
-                  text={flags.secureVmCopy.firewallAuthorizationWarning}
-                  warning
-                />
-              ) : null}
-            </StyledMessageDiv>
-          </Box>
-          <StyledButtonGroupBox
-            alignItems="center"
-            display="flex"
-            justifyContent="flex-end"
-          >
-            <StyledCreateButton
-              disabled={
-                formIsSubmitting ||
-                userCannotCreateLinode ||
-                (showGDPRCheckbox && !signedAgreement) ||
-                secureVMViolation
-              }
-              onClick={() =>
-                this.handleClickCreateUsingCommandLine(apicliButtonCopy)
-              }
-              buttonType="outlined"
-              data-qa-api-cli-linode
-            >
-              {apicliButtonCopy ?? ' Create using command line'}
-            </StyledCreateButton>
-            <StyledCreateButton
-              disabled={
-                formIsSubmitting ||
-                userCannotCreateLinode ||
-                (showGDPRCheckbox && !signedAgreement) ||
-                secureVMViolation
-              }
-              buttonType="primary"
-              data-qa-deploy-linode
-              loading={formIsSubmitting}
-              onClick={this.createLinode}
-            >
-              Create Linode
-            </StyledCreateButton>
-            <ApiAwarenessModal
-              isOpen={showApiAwarenessModal}
-              onClose={handleShowApiAwarenessModal}
-              payLoad={this.getPayload()}
-            />
-          </StyledButtonGroupBox>
-        </Grid>
-      </StyledForm>
-    );
-  }
-}
-
-export const defaultPublicInterface: InterfacePayload = {
-  ipam_address: '',
-  label: '',
-  purpose: 'public',
-};
-
-interface DispatchProps {
-  setTab: (value: CreateTypes) => void;
-}
-
-const mapDispatchToProps: MapDispatchToProps<DispatchProps, CombinedProps> = (
-  dispatch
-) => ({
-  setTab: (value) => dispatch(handleChangeCreateType(value)),
-});
-
-const connected = connect(undefined, mapDispatchToProps);
-
-export default connected(LinodeCreate);
diff --git a/packages/manager/src/features/Linodes/LinodesCreate/LinodeCreateContainer.tsx b/packages/manager/src/features/Linodes/LinodesCreate/LinodeCreateContainer.tsx
deleted file mode 100644
index edcecffe224..00000000000
--- a/packages/manager/src/features/Linodes/LinodesCreate/LinodeCreateContainer.tsx
+++ /dev/null
@@ -1,1061 +0,0 @@
-import { signAgreement } from '@linode/api-v4/lib/account';
-import { convertYupToLinodeErrors } from '@linode/api-v4/lib/request';
-import { vpcsValidateIP } from '@linode/validation';
-import { CreateLinodeSchema } from '@linode/validation/lib/linodes.schema';
-import Grid from '@mui/material/Unstable_Grid2';
-import { enqueueSnackbar } from 'notistack';
-import * as React from 'react';
-import { connect } from 'react-redux';
-
-import { DocumentTitleSegment } from 'src/components/DocumentTitle';
-import { LandingHeader } from 'src/components/LandingHeader';
-import { ProductInformationBanner } from 'src/components/ProductInformationBanner/ProductInformationBanner';
-import { withAccount } from 'src/containers/account.container';
-import { withAccountSettings } from 'src/containers/accountSettings.container';
-import { withEventsPollingActions } from 'src/containers/events.container';
-import { withFeatureFlags } from 'src/containers/flags.container';
-import { withImages } from 'src/containers/images.container';
-import { withProfile } from 'src/containers/profile.container';
-import { withRegions } from 'src/containers/regions.container';
-import { withTypes } from 'src/containers/types.container';
-import { withLinodes } from 'src/containers/withLinodes.container';
-import { withMarketplaceApps } from 'src/containers/withMarketplaceApps';
-import { withQueryClient } from 'src/containers/withQueryClient.container';
-import { withSecureVMNoticesEnabled } from 'src/containers/withSecureVMNoticesEnabled.container';
-import withAgreements from 'src/features/Account/Agreements/withAgreements';
-import { hasPlacementGroupReachedCapacity } from 'src/features/PlacementGroups/utils';
-import { reportAgreementSigningError } from 'src/queries/account/agreements';
-import { accountQueries } from 'src/queries/account/queries';
-import {
-  sendCreateLinodeEvent,
-  sendLinodeCreateFlowDocsClickEvent,
-} from 'src/utilities/analytics/customEventAnalytics';
-import {
-  sendLinodeCreateFormInputEvent,
-  sendLinodeCreateFormSubmitEvent,
-} from 'src/utilities/analytics/formEventAnalytics';
-import { capitalize } from 'src/utilities/capitalize';
-import { getAPIErrorOrDefault } from 'src/utilities/errorUtils';
-import { extendType } from 'src/utilities/extendType';
-import { isEURegion } from 'src/utilities/formatRegion';
-import {
-  getGDPRDetails,
-  getSelectedRegionGroup,
-} from 'src/utilities/formatRegion';
-import { isNotNullOrUndefined } from 'src/utilities/nullOrUndefined';
-import { UNKNOWN_PRICE } from 'src/utilities/pricing/constants';
-import { getLinodeRegionPrice } from 'src/utilities/pricing/linodes';
-import { getQueryParamsFromQueryString } from 'src/utilities/queryParams';
-import { validatePassword } from 'src/utilities/validatePassword';
-
-import { deriveDefaultLabel } from './deriveDefaultLabel';
-import LinodeCreate from './LinodeCreate';
-
-import type {
-  HandleSubmit,
-  Info,
-  LinodeCreateType,
-  LinodeCreateValidation,
-  TypeInfo,
-} from './types';
-import type { PlacementGroup } from '@linode/api-v4';
-import type { Agreements } from '@linode/api-v4/lib/account';
-import type { Image } from '@linode/api-v4/lib/images';
-import type {
-  CreateLinodeRequest,
-  Interface,
-  Linode,
-  LinodeTypeClass,
-  PriceObject,
-} from '@linode/api-v4/lib/linodes';
-import type { Region } from '@linode/api-v4/lib/regions';
-import type { UserDefinedField } from '@linode/api-v4/lib/stackscripts';
-import type { APIError } from '@linode/api-v4/lib/types';
-import type { RouteComponentProps } from 'react-router-dom';
-import type { Tag } from 'src/components/TagsInput/TagsInput';
-import type { WithAccountProps } from 'src/containers/account.container';
-import type { WithAccountSettingsProps } from 'src/containers/accountSettings.container';
-import type { WithEventsPollingActionProps } from 'src/containers/events.container';
-import type { WithFeatureFlagProps } from 'src/containers/flags.container';
-import type { WithImagesProps } from 'src/containers/images.container';
-import type { WithProfileProps } from 'src/containers/profile.container';
-import type { RegionsProps } from 'src/containers/regions.container';
-import type { WithTypesProps } from 'src/containers/types.container';
-import type { WithLinodesProps } from 'src/containers/withLinodes.container';
-import type { WithMarketplaceAppsProps } from 'src/containers/withMarketplaceApps';
-import type { WithQueryClientProps } from 'src/containers/withQueryClient.container';
-import type { WithSecureVMNoticesEnabledProps } from 'src/containers/withSecureVMNoticesEnabled.container';
-import type { AgreementsProps } from 'src/features/Account/Agreements/withAgreements';
-import type { CreateTypes } from 'src/store/linodeCreate/linodeCreate.actions';
-import type { MapState } from 'src/store/types';
-import type { ExtendedType } from 'src/utilities/extendType';
-import type { ExtendedIP } from 'src/utilities/ipUtils';
-
-const DEFAULT_IMAGE = 'linode/ubuntu24.04';
-
-interface State {
-  additionalIPv4RangesForVPC: ExtendedIP[];
-  assignPublicIPv4Address: boolean;
-  attachedVLANLabel: null | string;
-  authorized_users: string[];
-  autoassignIPv4WithinVPCEnabled: boolean;
-  availableStackScriptImages?: Image[];
-  availableUserDefinedFields?: UserDefinedField[];
-  backupsEnabled: boolean;
-  checkedFirewallAuthorization: boolean;
-  customLabel?: string;
-  disabledClasses?: LinodeTypeClass[];
-  diskEncryptionEnabled?: boolean;
-  errors?: APIError[];
-  formIsSubmitting: boolean;
-  password: string;
-  placementGroupSelection?: PlacementGroup;
-  privateIPEnabled: boolean;
-  selectedBackupID?: number;
-  selectedDiskSize?: number;
-  selectedImageID?: string;
-  selectedLinodeID?: number;
-  selectedRegionID?: string;
-  selectedStackScriptID?: number;
-  selectedStackScriptLabel?: string;
-  selectedStackScriptUsername?: string;
-  selectedSubnetId?: number;
-  selectedTypeID?: string;
-  selectedVPCId?: number;
-  selectedfirewallId?: number;
-  showApiAwarenessModal: boolean;
-  showFirewallAuthorization: boolean;
-  showGDPRCheckbox: boolean;
-  signedAgreement: boolean;
-  tags?: Tag[];
-  udfs?: any;
-  userData: string | undefined;
-  vlanIPAMAddress: null | string;
-  vpcIPv4AddressOfLinode?: string;
-}
-
-type CombinedProps = CreateType &
-  WithAccountProps &
-  WithImagesProps &
-  WithTypesProps &
-  WithLinodesProps &
-  RegionsProps &
-  WithFeatureFlagProps &
-  RouteComponentProps<{}, any, any> &
-  WithProfileProps &
-  AgreementsProps &
-  WithQueryClientProps &
-  WithMarketplaceAppsProps &
-  WithAccountSettingsProps &
-  WithEventsPollingActionProps &
-  WithSecureVMNoticesEnabledProps;
-
-const defaultState: State = {
-  additionalIPv4RangesForVPC: [],
-  assignPublicIPv4Address: false,
-  attachedVLANLabel: '',
-  authorized_users: [],
-  autoassignIPv4WithinVPCEnabled: true,
-  backupsEnabled: false,
-  checkedFirewallAuthorization: false,
-  customLabel: undefined,
-  disabledClasses: [],
-  diskEncryptionEnabled: true,
-  errors: undefined,
-  formIsSubmitting: false,
-  password: '',
-  placementGroupSelection: undefined,
-  privateIPEnabled: false,
-  selectedBackupID: undefined,
-  selectedDiskSize: undefined,
-  selectedImageID: undefined,
-  selectedLinodeID: undefined,
-  selectedRegionID: '',
-  selectedStackScriptID: undefined,
-  selectedStackScriptLabel: '',
-  selectedStackScriptUsername: '',
-  selectedSubnetId: undefined,
-  selectedTypeID: undefined,
-  selectedVPCId: undefined,
-  selectedfirewallId: undefined,
-  showApiAwarenessModal: false,
-  showFirewallAuthorization: false,
-  showGDPRCheckbox: false,
-  signedAgreement: false,
-  tags: [],
-  udfs: undefined,
-  userData: undefined,
-  vlanIPAMAddress: null,
-  vpcIPv4AddressOfLinode: '',
-};
-
-const getDisabledClasses = (regionID: string, regions: Region[] = []) => {
-  const selectedRegion = regions.find(
-    (thisRegion) => thisRegion.id === regionID
-  );
-
-  const disabledClasses: LinodeTypeClass[] = [];
-
-  if (!selectedRegion?.capabilities.includes('GPU Linodes')) {
-    disabledClasses.push('gpu');
-  }
-
-  if (!selectedRegion?.capabilities.includes('Bare Metal')) {
-    disabledClasses.push('metal');
-  }
-
-  return disabledClasses;
-};
-
-const nonImageCreateTypes = ['fromStackScript', 'fromBackup', 'fromLinode'];
-
-const isNonDefaultImageType = (prevType: string, type: string) => {
-  return nonImageCreateTypes.some(
-    (thisEntry) => prevType !== thisEntry && type === thisEntry
-  );
-};
-
-class LinodeCreateContainer extends React.PureComponent<CombinedProps, State> {
-  checkValidation: LinodeCreateValidation = (payload) => {
-    try {
-      CreateLinodeSchema.validateSync(payload, { abortEarly: false });
-      // reset errors to default state
-      this.setState({ errors: undefined, showApiAwarenessModal: true });
-    } catch (error) {
-      const processedErrors = convertYupToLinodeErrors(error);
-      this.setState(() => ({
-        errors: getAPIErrorOrDefault(processedErrors),
-        formIsSubmitting: false,
-      }));
-    }
-  };
-
-  clearCreationState = () => {
-    this.setState(defaultState);
-  };
-
-  generateLabel = () => {
-    const { createType, imagesData, regionsData } = this.props;
-    const {
-      customLabel,
-      selectedImageID,
-      selectedLinodeID,
-      selectedRegionID,
-      selectedStackScriptLabel,
-    } = this.state;
-
-    if (customLabel !== undefined) {
-      return customLabel;
-    }
-
-    /* tslint:disable-next-line  */
-    let arg1,
-      arg2,
-      arg3 = '';
-
-    /**
-     * lean in favor of using stackscript label
-     * then next priority is image label
-     */
-    if (selectedStackScriptLabel) {
-      arg1 = selectedStackScriptLabel;
-    } else if (selectedImageID) {
-      /**
-       * safe to ignore possibility of "undefined"
-       * null checking happens in CALinodeCreate
-       */
-      const selectedImage = imagesData![selectedImageID];
-      /**
-       * Use 'vendor' if it's a public image, otherwise use label (because 'vendor' will be null)
-       *
-       * If we have no selectedImage, just use an empty string
-       */
-      arg1 = selectedImage
-        ? selectedImage.is_public
-          ? selectedImage.vendor
-          : selectedImage.label
-        : '';
-
-      if (createType === 'fromApp') {
-        // All 1-clicks are Debian so this isn't useful information.
-        arg1 = '';
-      }
-    }
-
-    if (selectedRegionID) {
-      /**
-       * safe to ignore possibility of "undefined"
-       * null checking happens in CALinodeCreate
-       */
-      const selectedRegion = regionsData!.find(
-        (region) => region.id === selectedRegionID
-      );
-
-      arg2 = selectedRegion ? selectedRegion.id : '';
-    }
-
-    if (createType === 'fromLinode') {
-      // @todo handle any other custom label cases we'd like to have here
-      arg1 =
-        this.props.linodesData?.find(
-          (thisLinode) => thisLinode.id === selectedLinodeID
-        )?.label ?? arg1; // Use the label of whatever we're cloning
-      arg2 = 'clone';
-      arg3 = '';
-    }
-
-    if (createType === 'fromBackup') {
-      arg3 = 'backup';
-    }
-
-    return deriveDefaultLabel(
-      [arg1, arg2, arg3],
-      this.props.linodesData?.map((linode) => linode.label) ?? []
-    );
-  };
-
-  getImageInfo = (): Info | undefined => {
-    const { selectedImageID } = this.state;
-
-    if (!selectedImageID) {
-      return undefined;
-    }
-
-    const selectedImage = this.props.imagesData[selectedImageID];
-
-    if (!selectedImage) {
-      return undefined;
-    }
-
-    const { label, vendor } = selectedImage;
-
-    return { title: `${label ? label : vendor ? vendor : ''}` };
-  };
-
-  getRegionInfo = (): Info | undefined => {
-    const { selectedRegionID } = this.state;
-
-    if (!selectedRegionID) {
-      return;
-    }
-
-    const selectedRegion = this.props.regionsData.find(
-      (region) => region.id === selectedRegionID
-    );
-    return (
-      selectedRegion && {
-        title: selectedRegion.label,
-      }
-    );
-  };
-
-  getTypeInfo = (): TypeInfo => {
-    const { selectedTypeID } = this.state;
-    const selectedType = this.props.typesData?.find(
-      (type) => type.id === selectedTypeID
-    );
-    return this.reshapeTypeInfo(
-      selectedType ? extendType(selectedType) : undefined
-    );
-  };
-
-  handleAgreementChange = () => {
-    this.setState((prevState) => ({
-      signedAgreement: !prevState.signedAgreement,
-    }));
-  };
-
-  handleFirewallAuthorizationChange = () => {
-    this.setState((prevState) => ({
-      checkedFirewallAuthorization: !prevState.checkedFirewallAuthorization,
-    }));
-  };
-
-  handleFirewallChange = (firewallId: number | undefined) => {
-    this.setState({ selectedfirewallId: firewallId });
-  };
-
-  handleShowApiAwarenessModal = () => {
-    this.setState((prevState) => ({
-      showApiAwarenessModal: !prevState.showApiAwarenessModal,
-    }));
-  };
-
-  handleSubnetChange = (subnetID: number | undefined) => {
-    this.setState((prevState) => ({
-      errors: prevState.errors?.filter(
-        (error) => error.field !== 'interfaces[0].subnet_id'
-      ),
-      selectedSubnetId: subnetID,
-    }));
-  };
-
-  handleVLANChange = (updatedInterface: Interface) => {
-    this.setState({
-      attachedVLANLabel: updatedInterface.label,
-      vlanIPAMAddress: updatedInterface.ipam_address,
-    });
-  };
-
-  handleVPCChange = (vpcId: number) => {
-    // Only clear VPC related fields if VPC selection changes
-    if (vpcId !== this.state.selectedVPCId) {
-      this.setState({
-        selectedSubnetId: undefined, // Ensure the selected subnet is cleared
-        selectedVPCId: vpcId,
-        vpcIPv4AddressOfLinode: '', // Ensure the VPC IPv4 address is cleared
-      });
-    }
-  };
-
-  handleVPCIPv4Change = (IPv4: string) => {
-    this.setState({ vpcIPv4AddressOfLinode: IPv4 });
-  };
-
-  handleVPCIPv4RangesChange = (ranges: ExtendedIP[]) => {
-    this.setState({ additionalIPv4RangesForVPC: ranges });
-  };
-
-  params = getQueryParamsFromQueryString(this.props.location.search) as Record<
-    string,
-    string
-  >;
-
-  reshapeTypeInfo = (type?: ExtendedType): TypeInfo | undefined => {
-    const { selectedRegionID } = this.state;
-
-    const linodePrice: PriceObject | undefined = getLinodeRegionPrice(
-      type,
-      selectedRegionID
-    );
-
-    return (
-      type && {
-        details: `$${linodePrice ? linodePrice : UNKNOWN_PRICE}/month`,
-        hourly: linodePrice?.hourly,
-        monthly: linodePrice?.monthly,
-        title: type.formattedLabel,
-      }
-    );
-  };
-
-  setAuthorizedUsers = (usernames: string[]) =>
-    this.setState({ authorized_users: usernames });
-
-  setBackupID = (id: number) => {
-    this.setState({ selectedBackupID: id });
-  };
-
-  setDiskSize = (size: number) => this.setState({ selectedDiskSize: size });
-
-  setImageID = (id: string | undefined) => {
-    if (typeof id === 'undefined') {
-      /** In this case we also clear any VLAN input, since VLANs are incompatible with empty Linodes */
-      return this.setState({
-        attachedVLANLabel: '',
-        selectedImageID: undefined,
-        vlanIPAMAddress: '',
-      });
-    }
-
-    return this.setState({ selectedImageID: id });
-  };
-
-  setLinodeID = (id: number, diskSize?: number) => {
-    if (id !== this.state.selectedLinodeID) {
-      /**
-       * reset selected plan and set the selectedDiskSize
-       * for the purpose of disabling plans that are smaller
-       * than the clone source.
-       *
-       * Also, when creating from backup, we set the region
-       * to the same region as the Linode that owns the backup,
-       * since the API does not infer this automatically.
-       */
-
-      this.setState({
-        selectedBackupID: undefined,
-        selectedDiskSize: diskSize,
-        selectedLinodeID: id,
-        selectedRegionID: this.props.linodesData?.find(
-          (linode) => linode.id == id
-        )?.region,
-        selectedTypeID: undefined,
-      });
-    }
-  };
-
-  setPassword = (password: string) => this.setState({ password });
-
-  setPlacementGroupSelection = (placementGroupSelection: PlacementGroup) => {
-    this.setState({ placementGroupSelection });
-  };
-
-  setRegionID = (selectedRegionId: string) => {
-    const { showGDPRCheckbox } = getGDPRDetails({
-      agreements: this.props.agreements?.data,
-      profile: this.props.profile.data,
-      regions: this.props.regionsData,
-      selectedRegionId,
-    });
-
-    const disabledClasses = getDisabledClasses(
-      selectedRegionId,
-      this.props.regionsData
-    );
-    this.setState({
-      disabledClasses,
-      placementGroupSelection: undefined,
-      selectedRegionID: selectedRegionId,
-      // When the region gets changed, ensure the VPC-related selections are cleared
-      selectedSubnetId: undefined,
-      selectedVPCId: -1,
-      showGDPRCheckbox,
-      vpcIPv4AddressOfLinode: '',
-    });
-  };
-
-  setStackScript = (
-    id: number,
-    label: string,
-    username: string,
-    userDefinedFields: UserDefinedField[],
-    images: Image[],
-    defaultData?: any
-  ) => {
-    /**
-     * If we're switching from one Marketplace app to another,
-     * usually the only compatible image will be Debian 9. If this
-     * is the case, preselect that value.
-     */
-    const defaultImage = images.length === 1 ? images[0].id : undefined;
-
-    const stackScriptLabel = defaultData?.cluster_size
-      ? `${label} Cluster`
-      : label;
-
-    this.setState({
-      availableStackScriptImages: images,
-      availableUserDefinedFields: userDefinedFields,
-      errors: undefined,
-      /** reset image because stackscript might not be compatible with selected one */
-      selectedImageID: defaultImage,
-      selectedStackScriptID: id,
-      selectedStackScriptLabel: stackScriptLabel,
-      selectedStackScriptUsername: username,
-      udfs: defaultData,
-    });
-  };
-
-  setTags = (tags: Tag[]) => this.setState({ tags });
-
-  setTypeID = (id: string) => {
-    if (/metal/.test(id)) {
-      // VLANs and backups don't work with bare metal;
-      // reset those values.
-      this.setState({
-        attachedVLANLabel: '',
-        backupsEnabled: false,
-        selectedTypeID: id,
-        vlanIPAMAddress: '',
-      });
-    } else {
-      this.setState({
-        selectedTypeID: id,
-      });
-    }
-  };
-
-  setUDFs = (udfs: any) => this.setState({ udfs });
-
-  setUserData = (userData: string) => this.setState({ userData });
-
-  state: State = {
-    ...defaultState,
-    disabledClasses: [],
-    selectedBackupID: isNaN(+this.params.backupID)
-      ? undefined
-      : +this.params.backupID,
-    selectedImageID:
-      this.params.imageID ?? this.params.type !== 'Images'
-        ? DEFAULT_IMAGE
-        : undefined,
-    // @todo: Abstract and test. UPDATE 5/21/20: lol what does this mean. UPDATE 3/16/23 lol what
-    selectedLinodeID: isNaN(+this.params.linodeID)
-      ? undefined
-      : +this.params.linodeID,
-    selectedRegionID: this.params.regionID,
-    // These can be passed in as query params
-    selectedTypeID: this.params.typeID,
-    showGDPRCheckbox: Boolean(
-      !this.props.profile.data?.restricted &&
-        isEURegion(
-          getSelectedRegionGroup(this.props.regionsData, this.params.regionID)
-        ) &&
-        this.props.agreements?.data?.eu_model
-    ),
-    signedAgreement: false,
-  };
-
-  submitForm: HandleSubmit = (_payload, linodeID?: number) => {
-    const { createType } = this.props;
-    const { signedAgreement } = this.state;
-    const payload = { ..._payload };
-
-    /**
-     * Do manual password validation (someday we'll use Formik and
-     * not need this). Only run this check if a password is present
-     * on the payload --
-     * Yup schema in the JS client will determine if a password
-     * is required.
-     *
-     * The downside of this approach is that only the password error
-     * will be displayed, even if other required fields are missing.
-     */
-
-    if (payload.root_pass) {
-      const passwordError = validatePassword(payload.root_pass);
-      if (passwordError) {
-        this.setState({
-          errors: [
-            {
-              field: 'root_pass',
-              reason: passwordError,
-            },
-          ],
-        });
-        return;
-      }
-    }
-
-    if (payload.placement_group) {
-      const error = hasPlacementGroupReachedCapacity({
-        placementGroup: this.state.placementGroupSelection!,
-        region: this.props.regionsData.find(
-          (r) => r.id === this.state.selectedRegionID
-        )!,
-      });
-      if (error) {
-        this.setState({
-          errors: [
-            {
-              field: 'placement_group',
-              reason: `${this.state.placementGroupSelection?.label} (${
-                this.state.placementGroupSelection?.placement_group_type ===
-                'affinity:local'
-                  ? 'Affinity'
-                  : 'Anti-affinity'
-              }) doesn't have any capacity for this Linode.`,
-            },
-          ],
-        });
-        return;
-      }
-    }
-
-    // Validation for VPC fields
-    if (
-      this.state.selectedVPCId !== undefined &&
-      this.state.selectedVPCId !== -1
-    ) {
-      const validVPCIPv4 = vpcsValidateIP({
-        mustBeIPMask: false,
-        shouldHaveIPMask: false,
-        value: this.state.vpcIPv4AddressOfLinode,
-      });
-
-      // Situation: 'Auto-assign a VPC IPv4 address for this Linode in the VPC' checkbox
-      // unchecked but a valid VPC IPv4 not provided
-      if (!this.state.autoassignIPv4WithinVPCEnabled && !validVPCIPv4) {
-        return this.setState(() => ({
-          errors: [
-            {
-              field: 'ipv4.vpc',
-              reason: 'Must be a valid IPv4 address, e.g. 192.168.2.0',
-            },
-          ],
-        }));
-      }
-    }
-
-    /**
-     * run a certain linode action based on the type
-     * if clone, run clone service request and upsert linode
-     * if create, run create action
-     */
-    if (createType === 'fromLinode' && !linodeID) {
-      return this.setState(() => ({
-        errors: [
-          {
-            field: 'linode_id',
-            reason: 'You must select a Linode to clone from',
-          },
-        ],
-      }));
-    }
-
-    if (createType === 'fromBackup' && !this.state.selectedBackupID) {
-      /* a backup selection is also required */
-      this.setState({
-        errors: [{ field: 'backup_id', reason: 'You must select a Backup.' }],
-      });
-      return;
-    }
-
-    if (createType === 'fromStackScript' && !this.state.selectedStackScriptID) {
-      return this.setState(() => ({
-        errors: [
-          {
-            field: 'stackscript_id',
-            reason: 'You must select a StackScript.',
-          },
-        ],
-      }));
-    }
-
-    if (createType === 'fromApp' && !this.state.selectedStackScriptID) {
-      return this.setState(() => ({
-        errors: [
-          {
-            field: 'stackscript_id',
-            reason: 'You must select a Marketplace App.',
-          },
-        ],
-      }));
-    }
-
-    if (
-      this.props.secureVMNoticesEnabled &&
-      this.state.selectedfirewallId === undefined &&
-      !this.state.checkedFirewallAuthorization
-    ) {
-      return this.setState(() => ({
-        showFirewallAuthorization: true,
-      }));
-    }
-
-    const request =
-      createType === 'fromLinode'
-        ? () =>
-            this.props.linodeActions.cloneLinode({
-              sourceLinodeId: linodeID!,
-              ...payload,
-            })
-        : () => this.props.linodeActions.createLinode(payload);
-
-    this.setState({ formIsSubmitting: true });
-
-    return request()
-      .then((response: Linode) => {
-        this.setState({ formIsSubmitting: false });
-
-        if (signedAgreement) {
-          const agreeData = { eu_model: true, privacy_policy: true };
-          signAgreement(agreeData)
-            .then(() => {
-              this.props.queryClient.setQueryData<Agreements>(
-                accountQueries.agreements.queryKey,
-                (prev) => ({
-                  ...(prev ?? {}),
-                  ...agreeData,
-                })
-              );
-            })
-            .catch(reportAgreementSigningError);
-        }
-
-        /** Analytics creation event */
-        handleAnalytics({
-          label: this.state.selectedStackScriptLabel,
-          linode: linodeID
-            ? this.props.linodesData?.find((linode) => linode.id == linodeID)
-            : undefined,
-          payload,
-          secureVMNoticesEnabled: this.props.secureVMNoticesEnabled,
-          type: createType,
-        });
-
-        /** show toast */
-        enqueueSnackbar(`Your Linode ${response.label} is being created.`, {
-          variant: 'success',
-        });
-
-        /** reset the Events polling */
-        this.props.checkForNewEvents();
-
-        /** send the user to the Linode detail page */
-        this.props.history.push(`/linodes/${response.id}`);
-      })
-      .catch((error) => {
-        this.setState(() => ({
-          errors: getAPIErrorOrDefault(error),
-          formIsSubmitting: false,
-        }));
-      });
-  };
-
-  toggleAssignPublicIPv4Address = () => {
-    this.setState({
-      assignPublicIPv4Address: !this.state.assignPublicIPv4Address,
-    });
-  };
-
-  toggleAutoassignIPv4WithinVPCEnabled = () => {
-    this.setState({
-      autoassignIPv4WithinVPCEnabled: !this.state
-        .autoassignIPv4WithinVPCEnabled,
-    });
-
-    /*
-      If the "Auto-assign a private IPv4 address ..." checkbox is unchecked,
-      ensure the VPC IPv4 box is clear
-    */
-    if (this.state.autoassignIPv4WithinVPCEnabled) {
-      this.setState({ vpcIPv4AddressOfLinode: '' });
-    }
-  };
-
-  toggleBackupsEnabled = () =>
-    this.setState({ backupsEnabled: !this.state.backupsEnabled });
-
-  toggleDiskEncryptionEnabled = () => {
-    this.setState({ diskEncryptionEnabled: !this.state.diskEncryptionEnabled });
-  };
-
-  togglePrivateIPEnabled = () =>
-    this.setState({ privateIPEnabled: !this.state.privateIPEnabled });
-
-  updateCustomLabel = (customLabel: string) => {
-    this.setState({ customLabel });
-  };
-
-  componentDidMount() {
-    // Allowed apps include the base set of original apps + anything LD tells us to show
-    if (nonImageCreateTypes.includes(this.props.createType)) {
-      // If we're navigating directly to e.g. the clone page, don't select an image by default
-      this.setState({ selectedImageID: undefined });
-    }
-  }
-
-  componentDidUpdate(prevProps: CombinedProps) {
-    /**
-     * When switching to a creation flow where
-     * having a pre-selected image is problematic,
-     * deselect it.
-     */
-    if (isNonDefaultImageType(prevProps.createType, this.props.createType)) {
-      this.setState({ selectedImageID: undefined });
-    }
-
-    // Update search params for Linode Clone
-    if (prevProps.location.search !== this.props.history.location.search) {
-      const { showGDPRCheckbox } = getGDPRDetails({
-        agreements: this.props.agreements?.data,
-        profile: this.props.profile.data,
-        regions: this.props.regionsData,
-        selectedRegionId: this.params.regionID,
-      });
-
-      this.params = getQueryParamsFromQueryString(
-        this.props.location.search
-      ) as Record<string, string>;
-
-      this.setState({
-        showGDPRCheckbox,
-      });
-    }
-  }
-
-  render() {
-    const {
-      grants,
-      profile,
-      regionsData,
-      typesData,
-      ...restOfProps
-    } = this.props;
-    const { udfs: selectedUDFs, ...restOfState } = this.state;
-
-    const extendedTypeData = typesData?.map(extendType);
-
-    const userCannotCreateLinode =
-      Boolean(profile.data?.restricted) && !grants.data?.global.add_linodes;
-
-    return (
-      <React.Fragment>
-        <DocumentTitleSegment segment="Create a Linode" />
-        <ProductInformationBanner bannerLocation="LinodeCreate" />
-        <Grid className="m0" container spacing={0}>
-          <LandingHeader
-            onDocsClick={() => {
-              sendLinodeCreateFlowDocsClickEvent('Getting Started');
-              sendLinodeCreateFormInputEvent({
-                createType: (this.params.type as LinodeCreateType) ?? 'OS',
-                interaction: 'click',
-                label: 'Getting Started',
-              });
-            }}
-            docsLabel="Getting Started"
-            docsLink="https://www.linode.com/docs/guides/platform/get-started/"
-            title="Create"
-          />
-          <LinodeCreate
-            accountBackupsEnabled={
-              this.props.accountSettings.data?.backups_enabled ?? false
-            }
-            handleFirewallAuthorizationChange={
-              this.handleFirewallAuthorizationChange
-            }
-            toggleAutoassignIPv4WithinVPCEnabled={
-              this.toggleAutoassignIPv4WithinVPCEnabled
-            }
-            autoassignIPv4WithinVPC={this.state.autoassignIPv4WithinVPCEnabled}
-            checkValidation={this.checkValidation}
-            diskEncryptionEnabled={this.state.diskEncryptionEnabled ?? false}
-            firewallId={this.state.selectedfirewallId}
-            handleAgreementChange={this.handleAgreementChange}
-            handleFirewallChange={this.handleFirewallChange}
-            handleIPv4RangesForVPC={this.handleVPCIPv4RangesChange}
-            handlePlacementGroupChange={this.setPlacementGroupSelection}
-            handleSelectUDFs={this.setUDFs}
-            handleShowApiAwarenessModal={this.handleShowApiAwarenessModal}
-            handleSubmitForm={this.submitForm}
-            handleSubnetChange={this.handleSubnetChange}
-            handleVLANChange={this.handleVLANChange}
-            handleVPCIPv4Change={this.handleVPCIPv4Change}
-            imageDisplayInfo={this.getImageInfo()}
-            ipamAddress={this.state.vlanIPAMAddress}
-            label={this.generateLabel()}
-            placementGroupSelection={this.state.placementGroupSelection}
-            regionDisplayInfo={this.getRegionInfo()}
-            regionsData={regionsData}
-            resetCreationState={this.clearCreationState}
-            selectedRegionID={this.state.selectedRegionID}
-            selectedUDFs={selectedUDFs}
-            selectedVPCId={this.state.selectedVPCId}
-            setAuthorizedUsers={this.setAuthorizedUsers}
-            setBackupID={this.setBackupID}
-            setSelectedVPC={this.handleVPCChange}
-            toggleAssignPublicIPv4Address={this.toggleAssignPublicIPv4Address}
-            toggleBackupsEnabled={this.toggleBackupsEnabled}
-            toggleDiskEncryptionEnabled={this.toggleDiskEncryptionEnabled}
-            togglePrivateIPEnabled={this.togglePrivateIPEnabled}
-            typeDisplayInfo={this.getTypeInfo()}
-            typesData={extendedTypeData}
-            updateDiskSize={this.setDiskSize}
-            updateImageID={this.setImageID}
-            updateLabel={this.updateCustomLabel}
-            updateLinodeID={this.setLinodeID}
-            updatePassword={this.setPassword}
-            updateRegionID={this.setRegionID}
-            updateStackScript={this.setStackScript}
-            updateTags={this.setTags}
-            updateTypeID={this.setTypeID}
-            updateUserData={this.setUserData}
-            userCannotCreateLinode={userCannotCreateLinode}
-            vlanLabel={this.state.attachedVLANLabel}
-            vpcIPv4AddressOfLinode={this.state.vpcIPv4AddressOfLinode}
-            {...restOfProps}
-            {...restOfState}
-          />
-        </Grid>
-      </React.Fragment>
-    );
-  }
-}
-
-interface CreateType {
-  createType: CreateTypes;
-}
-
-const mapStateToProps: MapState<CreateType, CombinedProps> = (state) => ({
-  createType: state.createLinode.type,
-});
-
-const connected = connect(mapStateToProps);
-
-export default withImages(
-  withAccount(
-    withLinodes(
-      withRegions(
-        withTypes(
-          connected(
-            withFeatureFlags(
-              withSecureVMNoticesEnabled(
-                withProfile(
-                  withAgreements(
-                    withQueryClient(
-                      withAccountSettings(
-                        withMarketplaceApps(
-                          withEventsPollingActions(LinodeCreateContainer)
-                        )
-                      )
-                    )
-                  )
-                )
-              )
-            )
-          )
-        )
-      )
-    )
-  )
-);
-
-const actionsAndLabels = {
-  fromApp: { action: 'one-click', labelPayloadKey: 'stackscript_id' },
-  fromBackup: { action: 'backup', labelPayloadKey: 'backup_id' },
-  fromImage: { action: 'image', labelPayloadKey: 'image' },
-  fromLinode: { action: 'clone', labelPayloadKey: 'type' },
-  fromStackScript: { action: 'stackscript', labelPayloadKey: 'stackscript_id' },
-} as const;
-
-const handleAnalytics = (details: {
-  label?: string;
-  linode?: Linode;
-  payload: CreateLinodeRequest;
-  secureVMNoticesEnabled: boolean;
-  type: CreateTypes;
-}) => {
-  const {
-    label,
-    linode: linode,
-    payload,
-    secureVMNoticesEnabled,
-    type,
-  } = details;
-  const eventInfo = actionsAndLabels[type];
-  // Distinguish the form event create type by tab, which separates 'OS' from 'Image'.
-  const eventCreateType =
-    eventInfo?.action && payload?.image?.includes('linode/')
-      ? 'OS'
-      : capitalize(eventInfo?.action);
-  let eventAction = 'unknown';
-  let eventLabel = '';
-
-  const secureVMCompliant = secureVMNoticesEnabled
-    ? isNotNullOrUndefined(payload.firewall_id)
-    : undefined;
-
-  const isLinodePoweredOff =
-    linode && eventAction == 'clone' ? linode.status === 'offline' : undefined;
-
-  if (eventInfo) {
-    eventAction = eventInfo.action;
-    const payloadLabel = payload[eventInfo.labelPayloadKey];
-    eventLabel = String(payloadLabel);
-  }
-  if (label) {
-    eventLabel = label;
-  }
-
-  // Send custom event.
-  sendCreateLinodeEvent(eventAction, eventLabel, {
-    isLinodePoweredOff,
-    secureVMCompliant,
-  });
-  // Send form event.
-  sendLinodeCreateFormSubmitEvent({
-    createType: eventCreateType as LinodeCreateType,
-  });
-};
diff --git a/packages/manager/src/features/Linodes/LinodesCreate/Panel.tsx b/packages/manager/src/features/Linodes/LinodesCreate/Panel.tsx
deleted file mode 100644
index 77a0c9fb985..00000000000
--- a/packages/manager/src/features/Linodes/LinodesCreate/Panel.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import * as React from 'react';
-
-import { Notice } from 'src/components/Notice/Notice';
-import { Paper } from 'src/components/Paper';
-import { Typography } from 'src/components/Typography';
-
-interface Props {
-  className?: string;
-  error?: string;
-  title?: string;
-}
-
-export const Panel = (props: React.PropsWithChildren<Props>) => {
-  const { children, error, title } = props;
-
-  return (
-    <Paper className={props.className} data-qa-tp="Select Image">
-      {error && <Notice text={error} variant="error" />}
-      <Typography data-qa-tp="Select Image" variant="h2">
-        {title || 'Select an Image'}
-      </Typography>
-      {children}
-    </Paper>
-  );
-};
diff --git a/packages/manager/src/features/Linodes/LinodesCreate/SelectAppPanel.tsx b/packages/manager/src/features/Linodes/LinodesCreate/SelectAppPanel.tsx
deleted file mode 100644
index 77d5de4af66..00000000000
--- a/packages/manager/src/features/Linodes/LinodesCreate/SelectAppPanel.tsx
+++ /dev/null
@@ -1,204 +0,0 @@
-import { Theme, styled } from '@mui/material/styles';
-import * as React from 'react';
-
-import { CircleProgress } from 'src/components/CircleProgress';
-import { ErrorState } from 'src/components/ErrorState/ErrorState';
-import { Notice } from 'src/components/Notice/Notice';
-import { Paper } from 'src/components/Paper';
-import { AppPanelSection } from 'src/features/Linodes/LinodesCreate/AppPanelSection';
-import { getQueryParamFromQueryString } from 'src/utilities/queryParams';
-
-import { Panel } from './Panel';
-
-import type { AppsData } from './types';
-import type { UserDefinedField } from '@linode/api-v4/lib/stackscripts';
-import type { FlagSet } from 'src/featureFlags';
-
-interface Props extends AppsData {
-  disabled: boolean;
-  error?: string;
-  flags: FlagSet;
-  handleClick: (
-    id: number,
-    label: string,
-    username: string,
-    stackScriptImages: string[],
-    userDefinedFields: UserDefinedField[]
-  ) => void;
-  isFiltering: boolean;
-  isSearching: boolean;
-  openDrawer: (stackScriptLabel: string) => void;
-  searchValue?: string;
-  selectedStackScriptID?: number;
-}
-
-class SelectAppPanel extends React.PureComponent<Props> {
-  componentDidMount() {
-    this.clickAppIfQueryParamExists();
-  }
-
-  componentDidUpdate(prevProps: Props) {
-    if (
-      typeof prevProps.appInstances === 'undefined' &&
-      typeof this.props.appInstances !== 'undefined'
-    ) {
-      this.clickAppIfQueryParamExists();
-    }
-  }
-
-  render() {
-    const {
-      appInstances,
-      appInstancesError,
-      appInstancesLoading,
-      disabled,
-      error,
-      flags,
-      handleClick,
-      isFiltering,
-      isSearching,
-      openDrawer,
-      searchValue,
-      selectedStackScriptID,
-    } = this.props;
-
-    if (appInstancesError) {
-      return (
-        <StyledPanel error={error} title="Select App">
-          <ErrorState errorText={appInstancesError} />
-        </StyledPanel>
-      );
-    }
-
-    if (appInstancesLoading || !appInstances) {
-      return (
-        <StyledPanel error={error} title="Select App">
-          <StyledLoadingSpan>
-            <CircleProgress />
-          </StyledLoadingSpan>
-        </StyledPanel>
-      );
-    }
-
-    if (!appInstances) {
-      return null;
-    }
-
-    const newAppsIds = Object.keys(flags.oneClickApps || {});
-    const newApps = appInstances.filter((app) => {
-      return newAppsIds.includes(app.id.toString());
-    });
-
-    const popularApps = appInstances.slice(0, 10);
-
-    // sort mutates original array so make a copy first
-    const allApps = [...appInstances].sort((a, b) =>
-      a.label.toLowerCase().localeCompare(b.label.toLowerCase())
-    );
-
-    const isFilteringOrSearching = isFiltering || isSearching;
-
-    return (
-      <StyledPaper
-        data-qa-tp="Select Image"
-        data-testid="one-click-apps-container"
-      >
-        {error && <Notice text={error} variant="error" />}
-        {!isFilteringOrSearching ? (
-          <AppPanelSection
-            apps={newApps}
-            disabled={disabled}
-            handleClick={handleClick}
-            heading="New apps"
-            openDrawer={openDrawer}
-            selectedStackScriptID={selectedStackScriptID}
-          />
-        ) : null}
-        {!isFilteringOrSearching ? (
-          <AppPanelSection
-            apps={popularApps}
-            disabled={disabled}
-            handleClick={handleClick}
-            heading="Popular apps"
-            openDrawer={openDrawer}
-            selectedStackScriptID={selectedStackScriptID}
-          />
-        ) : null}
-        <AppPanelSection
-          apps={allApps}
-          disabled={disabled}
-          handleClick={handleClick}
-          heading={isFilteringOrSearching ? '' : 'All apps'}
-          openDrawer={openDrawer}
-          searchValue={searchValue}
-          selectedStackScriptID={selectedStackScriptID}
-        />
-      </StyledPaper>
-    );
-  }
-
-  clickAppIfQueryParamExists = () => {
-    const { appInstances, handleClick } = this.props;
-    const appIDFromURL = getQueryParamFromQueryString(location.search, 'appID');
-    const matchedApp = appInstances
-      ? appInstances.find((eachApp) => eachApp.id === +appIDFromURL)
-      : undefined;
-
-    if (appIDFromURL && matchedApp) {
-      /**
-       * check the query params to see if we have an app ID in there and if
-       * so pre-select the app
-       */
-      handleClick(
-        matchedApp.id,
-        matchedApp.label,
-        /**  username is for display purposes only but we're not showing it */
-        '',
-        matchedApp.images,
-        matchedApp.user_defined_fields
-      );
-
-      // Scroll to app when an app id is passed in the query params
-      const section = document.querySelector(`#app-${matchedApp.id}`);
-      if (section) {
-        section.scrollIntoView({
-          behavior: 'smooth',
-          block: 'center',
-          inline: 'start',
-        });
-      }
-
-      // If the URL also included &showInfo, open the Info drawer as well
-      const showInfo = getQueryParamFromQueryString(
-        location.search,
-        'showInfo'
-      );
-      if (showInfo) {
-        this.props.openDrawer(matchedApp.label);
-      }
-    }
-  };
-}
-
-const commonStyling = (theme: Theme) => ({
-  height: 450,
-  marginBottom: theme.spacing(3),
-  overflowY: 'auto' as const,
-});
-
-const StyledPanel = styled(Panel, { label: 'StyledPanel' })(({ theme }) => ({
-  ...commonStyling(theme),
-}));
-
-const StyledPaper = styled(Paper, { label: 'StyledPaper' })(({ theme }) => ({
-  ...commonStyling(theme),
-  borderTop: 0,
-}));
-
-const StyledLoadingSpan = styled('span', { label: 'StyledLoadingSpan' })({
-  '& >div:first-of-type': {
-    height: 450,
-  },
-});
-
-export default React.memo(SelectAppPanel);
diff --git a/packages/manager/src/features/Linodes/LinodesCreate/SelectBackupPanel.tsx b/packages/manager/src/features/Linodes/LinodesCreate/SelectBackupPanel.tsx
deleted file mode 100644
index e95328235d5..00000000000
--- a/packages/manager/src/features/Linodes/LinodesCreate/SelectBackupPanel.tsx
+++ /dev/null
@@ -1,159 +0,0 @@
-import {
-  Linode,
-  LinodeBackup,
-  LinodeBackupsResponse,
-} from '@linode/api-v4/lib/linodes';
-import Grid from '@mui/material/Unstable_Grid2';
-import { styled } from '@mui/material/styles';
-import * as React from 'react';
-
-import { CircleProgress } from 'src/components/CircleProgress';
-import { Notice } from 'src/components/Notice/Notice';
-import { Paper } from 'src/components/Paper';
-import { SelectionCard } from 'src/components/SelectionCard/SelectionCard';
-import { Typography } from 'src/components/Typography';
-import { useProfile } from 'src/queries/profile/profile';
-import { formatDate } from 'src/utilities/formatDate';
-
-export const aggregateBackups = (
-  backups: LinodeBackupsResponse
-): LinodeBackup[] => {
-  const manualSnapshot =
-    backups?.snapshot.in_progress?.status === 'needsPostProcessing'
-      ? backups?.snapshot.in_progress
-      : backups?.snapshot.current;
-  return (
-    backups &&
-    [...backups.automatic!, manualSnapshot!].filter((b) => Boolean(b))
-  );
-};
-
-export interface LinodeWithBackups extends Linode {
-  currentBackups: LinodeBackupsResponse;
-}
-
-interface BackupInfo {
-  details: string;
-  title: string;
-}
-
-interface Props {
-  error?: string;
-  handleChangeBackup: (id: number) => void;
-  handleChangeBackupInfo: (info: BackupInfo) => void;
-  loading: boolean;
-  selectedBackupID?: number;
-  selectedLinodeID?: number;
-  selectedLinodeWithBackups?: LinodeWithBackups;
-}
-
-export const SelectBackupPanel = (props: Props) => {
-  const { data: profile } = useProfile();
-  const {
-    error,
-    handleChangeBackup,
-    handleChangeBackupInfo,
-    loading,
-    selectedBackupID,
-    selectedLinodeID,
-    selectedLinodeWithBackups,
-  } = props;
-
-  const aggregatedBackups = selectedLinodeWithBackups
-    ? aggregateBackups(selectedLinodeWithBackups.currentBackups)
-    : [];
-
-  const getBackupInfo = (backup: LinodeBackup) => {
-    const heading = backup.label
-      ? backup.label
-      : backup.type === 'auto'
-      ? 'Automatic'
-      : 'Snapshot';
-    const subheading = formatDate(backup.created, {
-      timezone: profile?.timezone,
-    });
-    const infoName =
-      heading === 'Automatic'
-        ? 'From automatic backup'
-        : `From backup ${heading}`;
-
-    return {
-      heading,
-      infoName,
-      subheading,
-    };
-  };
-
-  const renderCard = (backup: LinodeBackup) => {
-    const backupInfo_ = getBackupInfo(backup);
-
-    return (
-      <SelectionCard
-        onClick={() => {
-          const backupInfo = {
-            details: backupInfo_.subheading,
-            title: backupInfo_.infoName,
-          };
-          handleChangeBackup(backup.id);
-          handleChangeBackupInfo(backupInfo);
-        }}
-        checked={backup.id === Number(selectedBackupID)}
-        heading={backupInfo_.heading}
-        key={backup.id}
-        subheadings={[backupInfo_.subheading]}
-      />
-    );
-  };
-
-  return (
-    <StyledRootPaper>
-      {error && <Notice text={error} variant="error" />}
-      <Typography variant="h2">Select Backup</Typography>
-      <StyledWrapperGrid alignItems="center" container spacing={2}>
-        {loading ? (
-          <CircleProgress />
-        ) : selectedLinodeID ? (
-          // eslint-disable-next-line react/jsx-no-useless-fragment
-          <React.Fragment>
-            {aggregatedBackups.length !== 0 ? (
-              <StyledTypography component="div">
-                <Grid container spacing={2}>
-                  {aggregatedBackups.map((backup) => {
-                    return renderCard(backup);
-                  })}
-                </Grid>
-              </StyledTypography>
-            ) : (
-              <Typography variant="body1">No backup available</Typography>
-            )}
-          </React.Fragment>
-        ) : (
-          <Typography variant="body1">First, select a Linode</Typography>
-        )}
-      </StyledWrapperGrid>
-    </StyledRootPaper>
-  );
-};
-
-const StyledTypography = styled(Typography, {
-  label: 'StyledTypography',
-})<{ component: string }>(({ theme }) => ({
-  padding: `${theme.spacing(2)} 0 0`,
-  width: '100%',
-}));
-
-const StyledRootPaper = styled(Paper, { label: 'StyledRootPaper' })(
-  ({ theme }) => ({
-    backgroundColor: theme.color.white,
-    flexGrow: 1,
-    marginTop: theme.spacing(3),
-    width: '100%',
-  })
-);
-
-const StyledWrapperGrid = styled(Grid, { label: 'StyledWrapperGrid' })(
-  ({ theme }) => ({
-    minHeight: 120,
-    padding: theme.spacing(1),
-  })
-);
diff --git a/packages/manager/src/features/Linodes/LinodesCreate/SelectLinodePanel/SelectLinodeCards.tsx b/packages/manager/src/features/Linodes/LinodesCreate/SelectLinodePanel/SelectLinodeCards.tsx
deleted file mode 100644
index 689764c6bdf..00000000000
--- a/packages/manager/src/features/Linodes/LinodesCreate/SelectLinodePanel/SelectLinodeCards.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import Grid from '@mui/material/Unstable_Grid2';
-import React from 'react';
-
-import { Typography } from 'src/components/Typography';
-
-import { SelectLinodeCard } from './SelectLinodeCard';
-import { RenderLinodeProps } from './SelectLinodePanel';
-
-export const SelectLinodeCards = ({
-  disabled,
-  handlePowerOff,
-  handleSelection,
-  showPowerActions,
-  orderBy: { data: linodes },
-  selectedLinodeId,
-}: RenderLinodeProps) => (
-  <Grid container spacing={2}>
-    {linodes.length > 0 ? (
-      linodes.map((linode) => (
-        <SelectLinodeCard
-          handleSelection={() =>
-            handleSelection(linode.id, linode.type, linode.specs.disk)
-          }
-          disabled={disabled}
-          handlePowerOff={() => handlePowerOff(linode.id)}
-          key={linode.id}
-          linode={linode}
-          selected={linode.id == selectedLinodeId}
-          showPowerActions={showPowerActions}
-        />
-      ))
-    ) : (
-      <Typography padding={1}>No results</Typography>
-    )}
-  </Grid>
-);
diff --git a/packages/manager/src/features/Linodes/LinodesCreate/SelectLinodePanel/SelectLinodePanel.test.tsx b/packages/manager/src/features/Linodes/LinodesCreate/SelectLinodePanel/SelectLinodePanel.test.tsx
deleted file mode 100644
index d9db90caf33..00000000000
--- a/packages/manager/src/features/Linodes/LinodesCreate/SelectLinodePanel/SelectLinodePanel.test.tsx
+++ /dev/null
@@ -1,223 +0,0 @@
-import { fireEvent, waitFor } from '@testing-library/react';
-import { HttpResponse, http } from 'msw';
-import React from 'react';
-
-import { imageFactory, linodeFactory } from 'src/factories';
-import { breakpoints } from 'src/foundations/breakpoints';
-import { server } from 'src/mocks/testServer';
-import { renderWithTheme } from 'src/utilities/testHelpers';
-import { resizeScreenSize } from 'src/utilities/testHelpers';
-
-import { SelectLinodePanel } from './SelectLinodePanel';
-
-const defaultProps = {
-  handleSelection: vi.fn(),
-  linodes: linodeFactory.buildList(3),
-};
-
-const setupMocks = () => {
-  const image1 = imageFactory.build({
-    id: 'linode/debian10',
-    label: 'Debian 10',
-  });
-
-  server.use(
-    http.get('*/linode/instances/:linodeId', () => {
-      return HttpResponse.json(defaultProps.linodes[0]);
-    }),
-    http.get('*/images/:imageId', () => {
-      return HttpResponse.json(image1);
-    })
-  );
-};
-
-describe('SelectLinodePanel (table, desktop)', () => {
-  beforeAll(() => {
-    resizeScreenSize(breakpoints.values.lg);
-    setupMocks();
-  });
-
-  it('renders as a table', async () => {
-    const { container, findAllByRole, findByRole } = renderWithTheme(
-      <SelectLinodePanel {...defaultProps} />
-    );
-
-    expect(await findByRole('table')).toBeInTheDocument();
-
-    expect(
-      container.querySelector('[data-qa-linode-cards]')
-    ).not.toBeInTheDocument();
-
-    expect((await findAllByRole('row')).length).toBe(4);
-  });
-
-  it('can be disabled', async () => {
-    const { findAllByRole } = renderWithTheme(
-      <SelectLinodePanel {...defaultProps} disabled />
-    );
-
-    for (const radio of await findAllByRole('radio')) {
-      expect(radio).toBeDisabled();
-    }
-  });
-
-  it('selects the plan when clicked', async () => {
-    const mockOnSelect = vi.fn();
-
-    const { findAllByRole } = renderWithTheme(
-      <SelectLinodePanel {...defaultProps} handleSelection={mockOnSelect} />
-    );
-
-    const radioInput = (await findAllByRole('radio'))[0];
-    fireEvent.click(radioInput);
-
-    expect(mockOnSelect).toHaveBeenCalledWith(
-      1,
-      defaultProps.linodes[0].type,
-      defaultProps.linodes[0].specs.disk
-    );
-  });
-
-  it('allows searching', async () => {
-    setupMocks();
-
-    const { findAllByRole, findByRole } = renderWithTheme(
-      <SelectLinodePanel {...defaultProps} />
-    );
-
-    fireEvent.change(await findByRole('textbox'), {
-      target: { value: defaultProps.linodes[0].label },
-    });
-
-    await waitFor(async () => {
-      // wait for rows to be rendered
-      const rows = await findAllByRole('row');
-      // Assert that 2 rows are rendered
-      expect(rows.length).toBe(2);
-      // Check that the second row has the correct text content
-      expect(rows[1]).toHaveTextContent(defaultProps.linodes[0].label);
-    });
-  });
-
-  it('displays the heading, notices and error', () => {
-    const { getByText } = renderWithTheme(
-      <SelectLinodePanel
-        {...defaultProps}
-        error={'Example error'}
-        header={'Example header'}
-        notices={['Example notice']}
-      />
-    );
-
-    expect(getByText('Example error')).toBeInTheDocument();
-    expect(getByText('Example header')).toBeInTheDocument();
-    expect(getByText('Example notice')).toBeInTheDocument();
-  });
-
-  it('prefills the search box when mounted with a selected linode', async () => {
-    setupMocks();
-
-    const { container, findAllByRole } = renderWithTheme(
-      <SelectLinodePanel {...defaultProps} selectedLinodeID={1} />
-    );
-
-    expect(
-      container.querySelector('[data-qa-linode-search] input')
-    ).toHaveValue(defaultProps.linodes[0].label);
-
-    expect((await findAllByRole('row')).length).toBe(2);
-
-    expect((await findAllByRole('row'))[1]).toHaveTextContent(
-      defaultProps.linodes[0].label
-    );
-  });
-});
-
-describe('SelectLinodePanel (cards, mobile)', () => {
-  beforeAll(() => {
-    resizeScreenSize(breakpoints.values.sm);
-    setupMocks();
-  });
-
-  it('renders as cards', async () => {
-    const { container, queryByRole } = renderWithTheme(
-      <SelectLinodePanel {...defaultProps} />
-    );
-
-    expect(queryByRole('table')).not.toBeInTheDocument();
-
-    expect(container.querySelectorAll('[data-qa-selection-card]').length).toBe(
-      3
-    );
-  });
-
-  it('can be disabled', async () => {
-    const { container } = renderWithTheme(
-      <SelectLinodePanel {...defaultProps} disabled />
-    );
-
-    container
-      .querySelectorAll('[data-qa-selection-card]')
-      .forEach((card) => expect(card).toBeDisabled());
-  });
-
-  it('selects the plan when clicked', async () => {
-    const mockOnSelect = vi.fn();
-
-    const { container } = renderWithTheme(
-      <SelectLinodePanel {...defaultProps} handleSelection={mockOnSelect} />
-    );
-
-    const selectionCard = container.querySelectorAll(
-      '[data-qa-selection-card]'
-    )[0];
-    fireEvent.click(selectionCard);
-
-    expect(mockOnSelect).toHaveBeenCalledWith(
-      1,
-      defaultProps.linodes[0].type,
-      defaultProps.linodes[0].specs.disk
-    );
-  });
-
-  it('allows searching', async () => {
-    setupMocks();
-
-    const { container, findByRole } = renderWithTheme(
-      <SelectLinodePanel {...defaultProps} />
-    );
-
-    fireEvent.change(await findByRole('textbox'), {
-      target: { value: defaultProps.linodes[0].label },
-    });
-
-    await waitFor(() => {
-      expect(
-        container.querySelectorAll('[data-qa-selection-card]').length
-      ).toBe(1);
-      expect(
-        container.querySelectorAll('[data-qa-selection-card]')[0]
-      ).toHaveTextContent(defaultProps.linodes[0].label);
-    });
-  });
-
-  it('prefills the search box when mounted with a selected linode', async () => {
-    setupMocks();
-
-    const { container } = renderWithTheme(
-      <SelectLinodePanel {...defaultProps} selectedLinodeID={1} />
-    );
-
-    expect(
-      container.querySelector('[data-qa-linode-search] input')
-    ).toHaveValue(defaultProps.linodes[0].label);
-
-    expect(
-      container.querySelector('[data-qa-selection-card]')
-    ).toBeInTheDocument();
-
-    expect(
-      container.querySelector('[data-qa-selection-card]')
-    ).toHaveTextContent(defaultProps.linodes[0].label);
-  });
-});
diff --git a/packages/manager/src/features/Linodes/LinodesCreate/SelectLinodePanel/SelectLinodePanel.tsx b/packages/manager/src/features/Linodes/LinodesCreate/SelectLinodePanel/SelectLinodePanel.tsx
deleted file mode 100644
index c9bc7bfd1b7..00000000000
--- a/packages/manager/src/features/Linodes/LinodesCreate/SelectLinodePanel/SelectLinodePanel.tsx
+++ /dev/null
@@ -1,219 +0,0 @@
-import { useMediaQuery } from '@mui/material';
-import { styled, useTheme } from '@mui/material/styles';
-import * as React from 'react';
-
-import { Box } from 'src/components/Box';
-import { DebouncedSearchTextField } from 'src/components/DebouncedSearchTextField';
-import { List } from 'src/components/List';
-import { ListItem } from 'src/components/ListItem';
-import { Notice } from 'src/components/Notice/Notice';
-import { sortData } from 'src/components/OrderBy';
-import Paginate from 'src/components/Paginate';
-import { PaginationFooter } from 'src/components/PaginationFooter/PaginationFooter';
-import { Paper } from 'src/components/Paper';
-import { Stack } from 'src/components/Stack';
-import { Typography } from 'src/components/Typography';
-import { useOrder } from 'src/hooks/useOrder';
-import { sendLinodePowerOffEvent } from 'src/utilities/analytics/customEventAnalytics';
-
-import { PowerActionsDialog } from '../../PowerActionsDialogOrDrawer';
-import { SelectLinodeCards } from './SelectLinodeCards';
-import { SelectLinodeTable } from './SelectLinodeTable';
-
-import type { Linode } from '@linode/api-v4/lib/linodes';
-import type { OrderByProps } from 'src/components/OrderBy';
-
-interface Props {
-  disabled?: boolean;
-  error?: string;
-  handleSelection: (id: number, type: null | string, diskSize?: number) => void;
-  header?: string;
-  linodes: Linode[];
-  notices?: (JSX.Element | string)[];
-  selectedLinodeID?: number;
-  showPowerActions?: boolean;
-}
-
-export const SelectLinodePanel = (props: Props) => {
-  const {
-    disabled,
-    error,
-    handleSelection,
-    header,
-    linodes,
-    notices,
-    selectedLinodeID,
-    showPowerActions,
-  } = props;
-
-  const { handleOrderChange, order, orderBy } = useOrder(
-    { order: 'asc', orderBy: 'label' },
-    'create-select-linode'
-  );
-
-  const orderedLinodes = sortData<Linode>(orderBy, order)(linodes);
-
-  const theme = useTheme();
-  const matchesMdUp = useMediaQuery(theme.breakpoints.up('md'));
-
-  const [userSearchText, setUserSearchText] = React.useState<
-    string | undefined
-  >(undefined);
-
-  const [powerOffLinode, setPowerOffLinode] = React.useState<
-    { linodeId: number } | false
-  >(false);
-
-  // Capture the selected linode when this component mounts,
-  // so it doesn't change when the user selects a different one.
-  const [preselectedLinodeID] = React.useState(selectedLinodeID);
-
-  const searchText = React.useMemo(
-    () =>
-      userSearchText !== undefined
-        ? userSearchText
-        : linodes.find((linode) => linode.id === preselectedLinodeID)?.label ||
-          '',
-    [linodes, preselectedLinodeID, userSearchText]
-  );
-
-  const filteredLinodes = React.useMemo(
-    () =>
-      orderedLinodes.filter((linode) =>
-        linode.label.toLowerCase().includes(searchText.toLowerCase())
-      ),
-    [orderedLinodes, searchText]
-  );
-
-  const SelectComponent = matchesMdUp ? SelectLinodeTable : SelectLinodeCards;
-
-  return (
-    <>
-      <Paginate data={filteredLinodes}>
-        {({
-          count,
-          data: linodesData,
-          handlePageChange,
-          handlePageSizeChange,
-          page,
-          pageSize,
-        }) => {
-          return (
-            <>
-              <StyledPaper data-qa-select-linode-panel>
-                <Stack gap={0.5} mb={2}>
-                  {error && (
-                    <Notice
-                      spacingBottom={0}
-                      spacingTop={0}
-                      text={error}
-                      variant="error"
-                    />
-                  )}
-                  {notices && !disabled && notices.length > 0 && (
-                    <Notice variant="warning">
-                      <List
-                        sx={(theme) => ({
-                          '& > li': {
-                            display:
-                              notices.length > 1 ? 'list-item' : 'inline',
-                            lineHeight: theme.spacing(3),
-                            padding: 0,
-                            pl: 0,
-                          },
-                          listStyle: 'disc',
-                          ml: notices.length > 1 ? theme.spacing(2) : 0,
-                        })}
-                      >
-                        {notices.map((notice, i) => (
-                          <ListItem key={i}>{notice}</ListItem>
-                        ))}
-                      </List>
-                    </Notice>
-                  )}
-                </Stack>
-                <Typography
-                  data-qa-select-linode-header
-                  marginBottom={theme.spacing(2)}
-                  variant="h2"
-                >
-                  {!!header ? header : 'Select Linode'}
-                </Typography>
-                <DebouncedSearchTextField
-                  sx={{
-                    marginBottom: theme.spacing(1),
-                    width: '330px',
-                  }}
-                  clearable
-                  data-qa-linode-search
-                  debounceTime={0}
-                  expand={true}
-                  hideLabel
-                  label=""
-                  onSearch={setUserSearchText}
-                  placeholder="Search"
-                  value={searchText}
-                />
-                <StyledBox>
-                  <SelectComponent
-                    handlePowerOff={(linodeId) => {
-                      setPowerOffLinode({ linodeId });
-                      sendLinodePowerOffEvent('Clone Linode');
-                    }}
-                    orderBy={{
-                      data: linodesData,
-                      handleOrderChange,
-                      order,
-                      orderBy,
-                    }}
-                    disabled={disabled}
-                    handleSelection={handleSelection}
-                    selectedLinodeId={selectedLinodeID}
-                    showPowerActions={showPowerActions ?? false}
-                  />
-                </StyledBox>
-              </StyledPaper>
-              <PaginationFooter
-                count={count}
-                eventCategory={'Clone from existing panel'}
-                handlePageChange={handlePageChange}
-                handleSizeChange={handlePageSizeChange}
-                page={page}
-                pageSize={pageSize}
-              />
-            </>
-          );
-        }}
-      </Paginate>
-      {powerOffLinode && (
-        <PowerActionsDialog
-          action={'Power Off'}
-          isOpen={!!powerOffLinode}
-          linodeId={powerOffLinode.linodeId}
-          onClose={() => setPowerOffLinode(false)}
-        />
-      )}
-    </>
-  );
-};
-
-export interface RenderLinodeProps {
-  disabled?: boolean;
-  handlePowerOff: (linodeId: number) => void;
-  handleSelection: Props['handleSelection'];
-  orderBy: OrderByProps<Linode>;
-  selectedLinodeId: number | undefined;
-  showPowerActions: boolean;
-}
-
-const StyledBox = styled(Box, {
-  label: 'StyledBox',
-})(({ theme }) => ({
-  padding: `${theme.spacing(2)} 0 0`,
-}));
-
-const StyledPaper = styled(Paper, { label: 'StyledPaper' })(({ theme }) => ({
-  backgroundColor: theme.color.white,
-  flexGrow: 1,
-  width: '100%',
-}));
diff --git a/packages/manager/src/features/Linodes/LinodesCreate/SelectLinodePanel/SelectLinodeRow.test.tsx b/packages/manager/src/features/Linodes/LinodesCreate/SelectLinodePanel/SelectLinodeRow.test.tsx
deleted file mode 100644
index 4b16c06c4f3..00000000000
--- a/packages/manager/src/features/Linodes/LinodesCreate/SelectLinodePanel/SelectLinodeRow.test.tsx
+++ /dev/null
@@ -1,145 +0,0 @@
-import { fireEvent } from '@testing-library/react';
-import * as React from 'react';
-
-import { imageFactory, linodeFactory, typeFactory } from 'src/factories';
-import { HttpResponse, http, server } from 'src/mocks/testServer';
-import { renderWithTheme, wrapWithTableBody } from 'src/utilities/testHelpers';
-
-import { SelectLinodeRow } from './SelectLinodeRow';
-
-vi.mock('src/queries/types', async () => {
-  const actual = await vi.importActual('src/queries/types');
-  return {
-    ...actual,
-    useTypeQuery: vi.fn().mockReturnValue({
-      data: typeFactory.build({ label: 'Linode 1 GB' }),
-    }),
-  };
-});
-
-describe('SelectLinodeRow', () => {
-  const handlePowerOff = vi.fn();
-  const handleSelection = vi.fn();
-
-  it('should display linode label, status, image, plan and region', async () => {
-    const linode1 = linodeFactory.build({ id: 1, label: 'linode-1' });
-    const image1 = imageFactory.build({
-      id: 'linode/debian10',
-      label: 'Debian 10',
-    });
-
-    server.use(
-      http.get('*/linode/instances/:linodeId', () => {
-        return HttpResponse.json(linode1);
-      }),
-      http.get('*/images/:imageId', () => {
-        return HttpResponse.json(image1);
-      })
-    );
-
-    const { findByText, getAllByRole, getByText } = renderWithTheme(
-      wrapWithTableBody(
-        <SelectLinodeRow
-          handlePowerOff={handlePowerOff}
-          handleSelection={handleSelection}
-          linode={linode1}
-          selected
-          showPowerActions
-        />
-      )
-    );
-
-    getByText(linode1.label);
-    getByText('Running');
-    await findByText('Debian 10');
-    await findByText('Linode 1 GB');
-    await findByText('US, Newark, NJ');
-
-    const selectButton = getAllByRole('button')[0];
-    fireEvent.click(selectButton);
-    expect(handleSelection).toHaveBeenCalled();
-
-    const powerOffButton = getByText('Power Off');
-    fireEvent.click(powerOffButton);
-    expect(handlePowerOff).toHaveBeenCalled();
-  });
-
-  it('should not display power off linode button if linode is not running', async () => {
-    const linode1 = linodeFactory.build({
-      id: 1,
-      label: 'linode-1',
-      status: 'offline',
-    });
-    const image1 = imageFactory.build({
-      id: 'linode/debian10',
-      label: 'Debian 10',
-    });
-    server.use(
-      http.get('*/linode/instances/:linodeId', () => {
-        return HttpResponse.json(linode1);
-      }),
-      http.get('*/images/:imageId', () => {
-        return HttpResponse.json(image1);
-      })
-    );
-
-    const { findByText, getByText, queryByText } = renderWithTheme(
-      wrapWithTableBody(
-        <SelectLinodeRow
-          handlePowerOff={handlePowerOff}
-          handleSelection={handleSelection}
-          linode={linode1}
-          selected
-          showPowerActions
-        />
-      )
-    );
-
-    getByText(linode1.label);
-    getByText('Offline');
-    await findByText('Debian 10');
-    await findByText('Linode 1 GB');
-    await findByText('US, Newark, NJ');
-
-    expect(queryByText('Power Off')).not.toBeInTheDocument();
-  });
-
-  it('should not display power off linode button if not enabled', async () => {
-    const linode1 = linodeFactory.build({
-      id: 1,
-      label: 'linode-1',
-    });
-    const image1 = imageFactory.build({
-      id: 'linode/debian10',
-      label: 'Debian 10',
-    });
-    server.use(
-      http.get('*/linode/instances/:linodeId', () => {
-        return HttpResponse.json(linode1);
-      }),
-      http.get('*/images/:imageId', () => {
-        return HttpResponse.json(image1);
-      })
-    );
-
-    const { findByText, getByText, queryByText } = renderWithTheme(
-      wrapWithTableBody(
-        <SelectLinodeRow
-          handlePowerOff={handlePowerOff}
-          handleSelection={handleSelection}
-          linode={linode1}
-          selected
-          showPowerActions={false}
-        />
-      )
-    );
-
-    getByText(linode1.label);
-    getByText('Running');
-    await findByText('Debian 10');
-    await findByText('Linode 1 GB');
-    await findByText('US, Newark, NJ');
-
-    expect(queryByText('Power Off')).not.toBeInTheDocument();
-  });
-});
diff --git a/packages/manager/src/features/Linodes/LinodesCreate/SelectLinodePanel/SelectLinodeRow.tsx b/packages/manager/src/features/Linodes/LinodesCreate/SelectLinodePanel/SelectLinodeRow.tsx
deleted file mode 100644
index e31ef8d0e1b..00000000000
--- a/packages/manager/src/features/Linodes/LinodesCreate/SelectLinodePanel/SelectLinodeRow.tsx
+++ /dev/null
@@ -1,153 +0,0 @@
-import { useTheme } from '@mui/material';
-import * as React from 'react';
-
-import { InlineMenuAction } from 'src/components/InlineMenuAction/InlineMenuAction';
-import { Radio } from 'src/components/Radio/Radio';
-import { StatusIcon } from 'src/components/StatusIcon/StatusIcon';
-import { TableCell } from 'src/components/TableCell';
-import { TableRow } from 'src/components/TableRow';
-import { TableSortCell } from 'src/components/TableSortCell';
-import { getLinodeIconStatus } from 'src/features/Linodes/LinodesLanding/utils';
-import { useIsResourceRestricted } from 'src/hooks/useIsResourceRestricted';
-import { useImageQuery } from 'src/queries/images';
-import { useTypeQuery } from 'src/queries/types';
-import { capitalizeAllWords } from 'src/utilities/capitalize';
-import { formatStorageUnits } from 'src/utilities/formatStorageUnits';
-
-import { RegionIndicator } from '../../LinodesLanding/RegionIndicator';
-
-import type { Linode } from '@linode/api-v4/lib/linodes/types';
-import type { OrderByProps } from 'src/components/OrderBy';
-import type { TableCellProps } from 'src/components/TableCell';
-
-interface Props {
-  disabled?: boolean;
-  handlePowerOff: () => void;
-  handleSelection: () => void;
-  linode: Linode;
-  selected: boolean;
-  showPowerActions: boolean;
-}
-
-export const SelectLinodeRow = (props: Props) => {
-  const {
-    disabled,
-    handlePowerOff,
-    handleSelection,
-    linode,
-    selected,
-    showPowerActions,
-  } = props;
-
-  const theme = useTheme();
-
-  const { data: linodeType } = useTypeQuery(
-    linode.type ?? '',
-    Boolean(linode.type)
-  );
-
-  const { data: linodeImage } = useImageQuery(
-    linode.image ?? '',
-    Boolean(linode.image)
-  );
-
-  const isLinodesGrantReadOnly = useIsResourceRestricted({
-    grantLevel: 'read_only',
-    grantType: 'linode',
-    id: linode.id,
-  });
-
-  const isDisabled = disabled || isLinodesGrantReadOnly;
-
-  const iconStatus = getLinodeIconStatus(linode.status);
-  const isRunning = linode.status == 'running';
-
-  return (
-    <TableRow
-      disabled={isDisabled}
-      onClick={isDisabled ? undefined : handleSelection}
-    >
-      <TableCell
-        component="th"
-        scope="row"
-        sx={{ height: theme.spacing(6), padding: '0 !important', width: '3%' }}
-      >
-        <Radio checked={!isDisabled && selected} disabled={isDisabled} />
-      </TableCell>
-      <TableCell>{linode.label}</TableCell>
-      <TableCell statusCell>
-        <StatusIcon
-          aria-label={`Linode status ${linode?.status ?? iconStatus}`}
-          status={iconStatus}
-        />
-        {capitalizeAllWords(linode.status.replace('_', ' '))}
-      </TableCell>
-      <TableCell>{linodeImage?.label ?? linode.image ?? 'Unknown'}</TableCell>
-      <TableCell>
-        {linodeType ? formatStorageUnits(linodeType?.label) : linode.type}
-      </TableCell>
-      <TableCell>
-        <RegionIndicator region={linode.region} />
-      </TableCell>
-      {showPowerActions && (
-        <TableCell actionCell>
-          {isRunning && selected && (
-            <InlineMenuAction
-              actionText="Power Off"
-              buttonHeight={47}
-              disabled={isDisabled}
-              onClick={handlePowerOff}
-            />
-          )}
-        </TableCell>
-      )}
-    </TableRow>
-  );
-};
-
-// Keep up to date with number of columns
-export const numCols = 7;
-
-interface CustomSortCellProps extends TableCellProps {
-  label: string;
-}
-
-export const SelectLinodeTableRowHead = (props: {
-  orderBy: Omit<OrderByProps<{}>, 'data'>;
-  showPowerActions: boolean;
-}) => {
-  const { orderBy, showPowerActions } = props;
-  const CustomSortCell = (props: CustomSortCellProps) => (
-    <TableSortCell
-      active={props.label == orderBy.orderBy}
-      direction={orderBy.order}
-      handleClick={orderBy.handleOrderChange}
-      {...props}
-    />
-  );
-
-  return (
-    <TableRow>
-      <TableCell sx={{ borderRight: 'none !important', width: '2%' }} />
-      <CustomSortCell
-        label="label"
-        sx={{ borderLeft: 'none !important', paddingLeft: '4em', width: '20%' }}
-      >
-        Linode
-      </CustomSortCell>
-      <CustomSortCell label="status" sx={{ width: '12%' }}>
-        Status
-      </CustomSortCell>
-      <CustomSortCell label="image" sx={{ width: '13%' }}>
-        Image
-      </CustomSortCell>
-      <CustomSortCell label="plan" sx={{ width: '13%' }}>
-        Plan
-      </CustomSortCell>
-      <CustomSortCell label="region" sx={{ width: '13%' }}>
-        Region
-      </CustomSortCell>
-      {showPowerActions && <TableCell />}
-    </TableRow>
-  );
-};
diff --git a/packages/manager/src/features/Linodes/LinodesCreate/SelectLinodePanel/SelectLinodeTable.tsx b/packages/manager/src/features/Linodes/LinodesCreate/SelectLinodePanel/SelectLinodeTable.tsx
deleted file mode 100644
index f32ed8f81e2..00000000000
--- a/packages/manager/src/features/Linodes/LinodesCreate/SelectLinodePanel/SelectLinodeTable.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import React from 'react';
-
-import { Table } from 'src/components/Table';
-import { TableBody } from 'src/components/TableBody';
-import { TableHead } from 'src/components/TableHead';
-import { TableRowEmpty } from 'src/components/TableRowEmpty/TableRowEmpty';
-import { useIsResourceRestricted } from 'src/hooks/useIsResourceRestricted';
-
-import { RenderLinodeProps } from './SelectLinodePanel';
-import {
-  SelectLinodeRow,
-  SelectLinodeTableRowHead,
-  numCols,
-} from './SelectLinodeRow';
-export const SelectLinodeTable = ({
-  disabled,
-  handlePowerOff,
-  handleSelection,
-  orderBy,
-  selectedLinodeId,
-  showPowerActions,
-}: RenderLinodeProps) => {
-  const isLinodesGrantReadOnly = useIsResourceRestricted({
-    grantLevel: 'read_only',
-    grantType: 'linode',
-    id: selectedLinodeId,
-  });
-  return (
-    <Table aria-label="Linode" size="small">
-      <TableHead style={{ fontSize: '.875rem' }}>
-        <SelectLinodeTableRowHead
-          orderBy={orderBy}
-          showPowerActions={showPowerActions}
-        />
-      </TableHead>
-      <TableBody role="radiogroup">
-        {orderBy.data.length > 0 ? (
-          orderBy.data.map((linode) => (
-            <SelectLinodeRow
-              handleSelection={() =>
-                handleSelection(linode.id, linode.type, linode.specs.disk)
-              }
-              selected={
-                !isLinodesGrantReadOnly &&
-                !disabled &&
-                Number(selectedLinodeId) === linode.id
-              }
-              disabled={disabled}
-              handlePowerOff={() => handlePowerOff(linode.id)}
-              key={linode.id}
-              linode={linode}
-              showPowerActions={showPowerActions}
-            />
-          ))
-        ) : (
-          <TableRowEmpty colSpan={numCols} message={'No results'} />
-        )}
-      </TableBody>
-    </Table>
-  );
-};
diff --git a/packages/manager/src/features/Linodes/LinodesCreate/SelectionCardWrapper.tsx b/packages/manager/src/features/Linodes/LinodesCreate/SelectionCardWrapper.tsx
deleted file mode 100644
index 9a0c216be63..00000000000
--- a/packages/manager/src/features/Linodes/LinodesCreate/SelectionCardWrapper.tsx
+++ /dev/null
@@ -1,127 +0,0 @@
-import { UserDefinedField } from '@linode/api-v4/lib/stackscripts';
-import Grid from '@mui/material/Unstable_Grid2';
-import { styled, useTheme } from '@mui/material/styles';
-import * as React from 'react';
-
-import Info from 'src/assets/icons/info.svg';
-import { SelectionCard } from 'src/components/SelectionCard/SelectionCard';
-import { APP_ROOT } from 'src/constants';
-
-interface Props {
-  availableImages: string[];
-  checked: boolean;
-  clusterLabel: string;
-  disabled: boolean;
-  handleClick: (
-    id: number,
-    label: string,
-    username: string,
-    stackScriptImages: string[],
-    userDefinedFields: UserDefinedField[]
-  ) => void;
-  iconUrl: string;
-  id: number;
-  label: string;
-  labelDecoration?: JSX.Element;
-  openDrawer: (stackScriptLabel: string) => void;
-  userDefinedFields: UserDefinedField[];
-}
-
-export const SelectionCardWrapper = (props: Props) => {
-  const theme = useTheme();
-  const {
-    availableImages,
-    checked,
-    clusterLabel,
-    disabled,
-    handleClick,
-    iconUrl,
-    id,
-    label,
-    labelDecoration,
-    openDrawer,
-    userDefinedFields,
-  } = props;
-  /**
-   * '' is the default value for a stackscript's logo_url;
-   * display a fallback image in this case, to avoid broken image icons
-   */
-
-  const handleSelectApp = () =>
-    handleClick(
-      id,
-      label,
-      '' /** username doesn't matter since we're not displaying it */,
-      availableImages,
-      userDefinedFields
-    );
-
-  const handleInfoClick = (e: React.MouseEvent<any>) => {
-    e.stopPropagation();
-    e.preventDefault();
-    openDrawer(clusterLabel ?? label);
-  };
-
-  const handleKeyPress = (e: React.KeyboardEvent) => {
-    if (e.key === 'Enter' || e.key === ' ') {
-      openDrawer(clusterLabel ?? label);
-    }
-  };
-
-  const renderIcon =
-    iconUrl === ''
-      ? () => <span className="fl-tux" />
-      : () => <img alt={`${label} logo`} src={`${APP_ROOT}/${iconUrl}`} />;
-
-  const renderVariant = () => (
-    <InfoGrid xs={2}>
-      <Info
-        aria-label={`Info for "${label}"`}
-        data-qa-selection-card-info={label.trim()}
-        onClick={handleInfoClick}
-        onKeyDown={handleKeyPress}
-        role="button"
-        tabIndex={0}
-      />
-    </InfoGrid>
-  );
-
-  return (
-    <SelectionCard
-      sxCardBaseIcon={{
-        justifyContent: 'flex-start',
-        paddingRight: 0,
-        width: 40,
-      }}
-      sxGrid={{
-        mixBlendMode: theme.name === 'dark' ? 'initial' : 'darken',
-      }}
-      checked={checked}
-      data-qa-selection-card
-      disabled={disabled}
-      heading={label.trim()}
-      headingDecoration={labelDecoration}
-      id={`app-${String(id)}`}
-      key={id}
-      onClick={handleSelectApp}
-      renderIcon={renderIcon}
-      renderVariant={renderVariant}
-      subheadings={['']}
-    />
-  );
-};
-
-const InfoGrid = styled(Grid, {
-  label: 'InfoGrid',
-})(({ theme }) => ({
-  '& svg': {
-    height: '19px',
-    width: '19px',
-  },
-  color: theme.palette.primary.main,
-  display: 'flex',
-  justifyContent: 'flex-end',
-  maxWidth: 40,
-  padding: theme.spacing(1),
-  paddingLeft: 0,
-}));
diff --git a/packages/manager/src/features/Linodes/LinodesCreate/TabbedContent/CommonTabbedContent.styles.ts b/packages/manager/src/features/Linodes/LinodesCreate/TabbedContent/CommonTabbedContent.styles.ts
deleted file mode 100644
index ce9ee727724..00000000000
--- a/packages/manager/src/features/Linodes/LinodesCreate/TabbedContent/CommonTabbedContent.styles.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import Grid from '@mui/material/Unstable_Grid2';
-import { styled } from '@mui/material/styles';
-
-export const StyledGrid = styled(Grid, { label: 'StyledGrid' })(
-  ({ theme }) => ({
-    [theme.breakpoints.up('md')]: {
-      maxWidth: '100%',
-    },
-    width: '100%',
-    flexBasis: '100%',
-    paddingTop: 0,
-    paddingBottom: 0,
-  })
-);
diff --git a/packages/manager/src/features/Linodes/LinodesCreate/TabbedContent/FromAppsContent.test.tsx b/packages/manager/src/features/Linodes/LinodesCreate/TabbedContent/FromAppsContent.test.tsx
deleted file mode 100644
index 193d3d0cb58..00000000000
--- a/packages/manager/src/features/Linodes/LinodesCreate/TabbedContent/FromAppsContent.test.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-// import * as React from 'react';
-// import { renderWithTheme } from 'src/utilities/testHelpers';
-import { imageFactory } from 'src/factories/images';
-import { userDefinedFieldFactory } from 'src/factories/stackscripts';
-
-import {
-  FromAppsContent,
-  getCompatibleImages,
-  getDefaultUDFData,
-} from './FromAppsContent';
-
-import type { Image } from '@linode/api-v4';
-
-describe('FromAppsContent', () => {
-  it('should exist', () => {
-    expect(FromAppsContent).toBeDefined();
-  });
-});
-
-describe('getCompatibleImages', () => {
-  it('should exist', () => {
-    expect(getCompatibleImages).toBeDefined();
-  });
-
-  it('should return an empty Array if an empty object or an empty array are passed', () => {
-    const bothEmptyResult = getCompatibleImages({}, []);
-    const emptyImagesDataResult = getCompatibleImages({}, ['Debian']);
-    const emptyStackScriptImagesResult = getCompatibleImages(
-      { Test: imageFactory.build() },
-      []
-    );
-    expect(bothEmptyResult).toEqual([]);
-    expect(emptyImagesDataResult).toEqual([]);
-    expect(emptyStackScriptImagesResult).toEqual([]);
-  });
-
-  it('should an array of Images compatible with the StackScript', () => {
-    const imagesDataArray = imageFactory.buildList(5);
-    const imagesData = imagesDataArray.reduce<Record<string, Image>>(
-      (acc, imageData) => {
-        acc[imageData.label] = imageData;
-        return acc;
-      },
-      {}
-    );
-    const stackScriptImages = Object.keys(imagesData).slice(0, 2);
-    const result = getCompatibleImages(imagesData, stackScriptImages);
-    expect(result.length).toBe(2);
-    result.forEach((image) => {
-      expect(stackScriptImages.includes(image.label));
-    });
-  });
-});
-
-describe('getDefaultUDFData', () => {
-  it('should exist', () => {
-    expect(getDefaultUDFData).toBeDefined();
-  });
-
-  it('should return an empty object when given an empty array', () => {
-    const result = getDefaultUDFData([]);
-    expect(result).toEqual({});
-  });
-
-  it('should return an object with keys that are made up of the subset of user defined fields passed that have the default property set to a string', () => {
-    // Need to get a better docsctring for this
-    const userDefinedFieldWithDefaultValue = userDefinedFieldFactory.build({
-      default: 'foobar',
-    });
-    const udfs = [
-      ...userDefinedFieldFactory.buildList(5),
-      userDefinedFieldWithDefaultValue,
-    ];
-    const result = getDefaultUDFData(udfs);
-    expect(result[userDefinedFieldWithDefaultValue.name]).toEqual(
-      userDefinedFieldWithDefaultValue.default
-    );
-  });
-});
diff --git a/packages/manager/src/features/Linodes/LinodesCreate/TabbedContent/FromAppsContent.tsx b/packages/manager/src/features/Linodes/LinodesCreate/TabbedContent/FromAppsContent.tsx
deleted file mode 100644
index 6abde7a3f78..00000000000
--- a/packages/manager/src/features/Linodes/LinodesCreate/TabbedContent/FromAppsContent.tsx
+++ /dev/null
@@ -1,436 +0,0 @@
-import { Image } from '@linode/api-v4/lib/images';
-import { StackScript, UserDefinedField } from '@linode/api-v4/lib/stackscripts';
-import { styled } from '@mui/material/styles';
-import curry from 'lodash.curry';
-import { assocPath } from 'ramda';
-import * as React from 'react';
-
-import { Box } from 'src/components/Box';
-import { DebouncedSearchTextField } from 'src/components/DebouncedSearchTextField';
-import Select, { Item } from 'src/components/EnhancedSelect';
-import { ImageSelect } from 'src/components/ImageSelect/ImageSelect';
-import { Paper } from 'src/components/Paper';
-import { Typography } from 'src/components/Typography';
-import { APP_ROOT } from 'src/constants';
-import { ImageEmptyState } from 'src/features/Linodes/LinodesCreate/TabbedContent/ImageEmptyState';
-import { AppDetailDrawer } from 'src/features/OneClickApps';
-import { oneClickApps } from 'src/features/OneClickApps/oneClickApps';
-import UserDefinedFieldsPanel from 'src/features/StackScripts/UserDefinedFieldsPanel/UserDefinedFieldsPanel';
-import { sendMarketplaceSearchEvent } from 'src/utilities/analytics/customEventAnalytics';
-import { compact } from 'src/utilities/compact';
-import { getAPIErrorFor } from 'src/utilities/getAPIErrorFor';
-
-import SelectAppPanel from '../SelectAppPanel';
-import {
-  AppsData,
-  ReduxStateProps,
-  StackScriptFormStateHandlers,
-  WithTypesRegionsAndImages,
-} from '../types';
-import { StyledGrid } from './CommonTabbedContent.styles';
-import { filterUDFErrors } from './formUtilities';
-
-import type { FlagSet } from 'src/featureFlags';
-import type { AppCategory } from 'src/features/OneClickApps/types';
-
-const appCategories = [
-  'Control Panels',
-  'Databases',
-  'Development',
-  'Games',
-  'Media and Entertainment',
-  'Monitoring',
-  'Productivity',
-  'Security',
-  'Stacks',
-  'Website',
-  //   'App Creators',
-];
-
-const appCategoryOptions = appCategories.map((categoryName) => ({
-  label: categoryName,
-  value: categoryName,
-}));
-
-// type AppCategory = typeof appCategories;
-
-const errorResources = {
-  image: 'Image',
-  label: 'A label',
-  region: 'A region selection',
-  root_pass: 'A root password',
-  stackscript_id: 'The selected App',
-  tags: 'Tags',
-  type: 'A plan selection',
-};
-
-interface Props {
-  flags: FlagSet;
-  setNumberOfNodesForAppCluster: (num: number) => void;
-}
-
-type CombinedProps = Props &
-  AppsData &
-  ReduxStateProps &
-  StackScriptFormStateHandlers &
-  WithTypesRegionsAndImages;
-
-interface State {
-  categoryFilter: Item<AppCategory> | null;
-  detailDrawerOpen: boolean;
-  filteredApps: CombinedProps['appInstances'];
-  isFiltering: boolean;
-  isSearching: boolean;
-  query: string;
-  selectedScriptForDrawer: string;
-}
-
-export const getCompatibleImages = (
-  imagesData: Record<string, Image>,
-  stackScriptImages: string[]
-) =>
-  compact(
-    stackScriptImages.map((stackScriptImage) => imagesData[stackScriptImage])
-  );
-
-export const getDefaultUDFData = (userDefinedFields: UserDefinedField[]) => {
-  return userDefinedFields.reduce<Record<string, string>>(
-    (accum, eachField) => {
-      if (eachField.default) {
-        accum[eachField.name] = eachField.default;
-      }
-      return accum;
-    },
-    {}
-  );
-};
-
-export const handleSelectStackScript = (
-  id: number,
-  label: string,
-  username: string,
-  stackScriptImages: string[],
-  userDefinedFields: UserDefinedField[],
-  imagesData: Record<string, Image>,
-  updateStackScript: CombinedProps['updateStackScript']
-) => {
-  const compatibleImages = getCompatibleImages(imagesData, stackScriptImages);
-  const defaultUDFData = getDefaultUDFData(userDefinedFields);
-  updateStackScript(
-    id,
-    label,
-    username,
-    userDefinedFields,
-    compatibleImages,
-    defaultUDFData
-  );
-};
-
-const renderLogo = (selectedStackScriptLabel?: string, logoUrl?: string) => {
-  return logoUrl === undefined ? (
-    <span className="fl-tux" />
-  ) : (
-    <img
-      alt={`${selectedStackScriptLabel} logo`}
-      src={`${APP_ROOT}/${logoUrl.toLowerCase()}`}
-    />
-  );
-};
-
-const curriedHandleSelectStackScript = curry(handleSelectStackScript);
-
-export class FromAppsContent extends React.Component<CombinedProps, State> {
-  render() {
-    const {
-      appInstances,
-      appInstancesError,
-      appInstancesLoading,
-      availableStackScriptImages: compatibleImages,
-      availableUserDefinedFields: userDefinedFields,
-      errors,
-      flags,
-      selectedImageID,
-      selectedStackScriptID,
-      selectedStackScriptLabel,
-      selectedUDFs: udf_data,
-      setNumberOfNodesForAppCluster,
-      updateImageID,
-      userCannotCreateLinode,
-    } = this.props;
-
-    // ramda's curry placeholder conflicts with lodash so the lodash curry and placeholder is used here
-    const handleSelectStackScript = curriedHandleSelectStackScript(
-      curry.placeholder,
-      curry.placeholder,
-      curry.placeholder,
-      curry.placeholder,
-      curry.placeholder,
-      this.props.imagesData,
-      this.props.updateStackScript
-    );
-
-    const handleSearchFieldClick = () => {
-      sendMarketplaceSearchEvent('Search Field');
-    };
-
-    const logoUrl = appInstances?.find(
-      (app) => app.id === selectedStackScriptID
-    )?.logo_url;
-
-    const appLogo = renderLogo(selectedStackScriptLabel, logoUrl);
-
-    const {
-      categoryFilter,
-      filteredApps,
-      isFiltering,
-      isSearching,
-      query,
-    } = this.state;
-
-    const hasErrorFor = getAPIErrorFor(errorResources, errors);
-
-    return (
-      <React.Fragment>
-        <StyledGrid>
-          <Paper sx={{ borderBottom: 0 }}>
-            <Typography variant="h2">Select an App</Typography>
-            <StyledSearchFilterBox>
-              <StyledSearchBox>
-                <DebouncedSearchTextField
-                  placeholder={
-                    appInstancesLoading ? 'Loading...' : 'Search for app name'
-                  }
-                  sx={
-                    appInstancesLoading
-                      ? {
-                          '& input': {
-                            cursor: 'not-allowed',
-                          },
-                          '& svg': {
-                            opacity: 0.5,
-                          },
-                        }
-                      : null
-                  }
-                  disabled={appInstancesLoading}
-                  fullWidth
-                  hideLabel
-                  label="Search marketplace"
-                  onClick={handleSearchFieldClick}
-                  onSearch={this.onSearch}
-                  value={query}
-                />
-              </StyledSearchBox>
-              <StyledFilterBox>
-                <Select
-                  placeholder={
-                    appInstancesLoading ? 'Loading...' : 'Select category'
-                  }
-                  disabled={appInstancesLoading}
-                  hideLabel
-                  label="Select category"
-                  onChange={this.handleSelectCategory}
-                  options={appCategoryOptions}
-                  value={categoryFilter}
-                />
-              </StyledFilterBox>
-            </StyledSearchFilterBox>
-          </Paper>
-          <StyledBoxShadowWrapper>
-            <SelectAppPanel
-              appInstances={
-                isSearching || isFiltering ? filteredApps : appInstances
-              }
-              appInstancesError={appInstancesError}
-              appInstancesLoading={appInstancesLoading}
-              disabled={userCannotCreateLinode}
-              error={hasErrorFor('stackscript_id')}
-              flags={flags}
-              handleClick={handleSelectStackScript}
-              isFiltering={isFiltering}
-              isSearching={isSearching}
-              openDrawer={this.openDrawer}
-              searchValue={query}
-              selectedStackScriptID={selectedStackScriptID}
-            />
-          </StyledBoxShadowWrapper>
-          {!userCannotCreateLinode && selectedStackScriptLabel ? (
-            <UserDefinedFieldsPanel
-              updateFor={[
-                selectedStackScriptID,
-                userDefinedFields,
-                udf_data,
-                errors,
-              ]}
-              appLogo={appLogo}
-              errors={filterUDFErrors(errorResources, errors)}
-              handleChange={this.handleChangeUDF}
-              openDrawer={this.openDrawer}
-              selectedLabel={selectedStackScriptLabel}
-              selectedUsername="Linode"
-              setNumberOfNodesForAppCluster={setNumberOfNodesForAppCluster}
-              udf_data={udf_data || {}}
-              userDefinedFields={userDefinedFields}
-            />
-          ) : null}
-          {!userCannotCreateLinode &&
-          compatibleImages &&
-          compatibleImages.length > 0 ? (
-            <ImageSelect
-              error={hasErrorFor('image')}
-              handleSelectImage={updateImageID}
-              images={compatibleImages}
-              selectedImageID={selectedImageID}
-              title="Select an Image"
-              variant="public"
-            />
-          ) : (
-            <ImageEmptyState errorText={hasErrorFor('image')} />
-          )}
-        </StyledGrid>
-
-        <AppDetailDrawer
-          onClose={this.closeDrawer}
-          open={this.state.detailDrawerOpen}
-          stackScriptLabel={this.state.selectedScriptForDrawer.trim()}
-        />
-      </React.Fragment>
-    );
-  }
-
-  closeDrawer = () => {
-    this.setState({
-      detailDrawerOpen: false,
-    });
-  };
-
-  handleChangeUDF = (key: string, value: string) => {
-    // either overwrite or create new selection
-    const newUDFData = assocPath([key], value, this.props.selectedUDFs);
-
-    this.props.handleSelectUDFs({ ...this.props.selectedUDFs, ...newUDFData });
-  };
-
-  handleSelectCategory = (categoryItem: Item<AppCategory>) => {
-    const didUserSelectCategory = categoryItem !== null;
-    let instancesInCategory: StackScript[] | undefined = [];
-    if (didUserSelectCategory) {
-      sendMarketplaceSearchEvent('Category Dropdown', categoryItem.label);
-      const appsInCategory = oneClickApps.filter((oca) =>
-        oca.categories?.includes(categoryItem.value)
-      );
-      const appLabels = appsInCategory.map((app) => app.name.trim());
-      instancesInCategory = this.props.appInstances?.filter((instance) => {
-        return appLabels.includes(instance.label.trim());
-      });
-    }
-    this.setState({
-      categoryFilter: categoryItem,
-      filteredApps: didUserSelectCategory ? instancesInCategory : [],
-      isFiltering: didUserSelectCategory,
-      isSearching: false,
-      query: '',
-    });
-  };
-
-  onSearch = (query: string) => {
-    if (query === '' || query.trim().length === 0) {
-      this.setState({ isSearching: false });
-    } else {
-      /**
-       * Enable ability to search OCA's by category, name, alternative name and
-       * alternative description keywords.
-       * */
-      const queryWords = query
-        .replace(/[,.-]/g, '')
-        .trim()
-        .toLocaleLowerCase()
-        .split(' ');
-
-      const matchingOCALabels = oneClickApps.reduce(
-        (acc: string[], { alt_description, alt_name, categories, name }) => {
-          const ocaAppString = `${name} ${alt_name} ${categories.join(
-            ' '
-          )} ${alt_description}`.toLocaleLowerCase();
-
-          const hasMatchingOCA = queryWords.every((queryWord) =>
-            ocaAppString.includes(queryWord)
-          );
-
-          if (hasMatchingOCA) {
-            acc.push(name.trim());
-          }
-
-          return acc;
-        },
-        []
-      );
-
-      const appsMatchingQuery = this.props.appInstances?.filter((instance) => {
-        return matchingOCALabels.includes(instance.label.trim());
-      });
-
-      this.setState({
-        categoryFilter: null,
-        filteredApps: appsMatchingQuery,
-        isFiltering: false,
-        isSearching: true,
-        query,
-      });
-    }
-  };
-
-  openDrawer = (stackScriptLabel: string) => {
-    this.setState({
-      detailDrawerOpen: true,
-      selectedScriptForDrawer: stackScriptLabel,
-    });
-  };
-
-  state: State = {
-    categoryFilter: null,
-    detailDrawerOpen: false,
-    filteredApps: [],
-    isFiltering: false,
-    isSearching: false,
-    query: '',
-    selectedScriptForDrawer: '',
-  };
-}
-
-const StyledSearchFilterBox = styled(Box, { label: 'StyledSearchFilterBox' })(
-  ({ theme }) => ({
-    '& > h2': {
-      width: '100%',
-    },
-    display: 'flex',
-    gap: theme.spacing(),
-    justifyContent: 'space-between',
-    marginTop: theme.spacing(),
-  })
-);
-
-const StyledFilterBox = styled(Box, { label: 'StyledFilterBox' })({
-  flexGrow: 1.5,
-});
-
-const StyledSearchBox = styled(Box, { label: 'StyledSearchBox' })({
-  '& .input': {
-    maxWidth: 'none',
-  },
-  flexGrow: 10,
-});
-
-const StyledBoxShadowWrapper = styled('div', {
-  label: 'StyledBoxShadowWrapper',
-})(({ theme }) => ({
-  '&:after': {
-    bottom: 0,
-    boxShadow: `${theme.color.boxShadow} 0px -15px 10px -10px inset`,
-    content: '""',
-    height: '15px',
-    position: 'absolute',
-    width: '100%',
-  },
-  position: 'relative',
-}));
diff --git a/packages/manager/src/features/Linodes/LinodesCreate/TabbedContent/FromBackupsContent.test.tsx b/packages/manager/src/features/Linodes/LinodesCreate/TabbedContent/FromBackupsContent.test.tsx
deleted file mode 100644
index 4e824c8772f..00000000000
--- a/packages/manager/src/features/Linodes/LinodesCreate/TabbedContent/FromBackupsContent.test.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import * as React from 'react';
-import { linodeFactory } from 'src/factories';
-
-import { renderWithTheme } from 'src/utilities/testHelpers';
-
-import { CombinedProps, FromBackupsContent } from './FromBackupsContent';
-
-const mockProps: CombinedProps = {
-  accountBackupsEnabled: false,
-  imagesData: {},
-  linodesData: [],
-  regionsData: [],
-  setBackupID: vi.fn(),
-  typesData: [],
-  updateDiskSize: vi.fn(),
-  updateImageID: vi.fn(),
-  updateLinodeID: vi.fn(),
-  updateRegionID: vi.fn(),
-  updateTypeID: vi.fn(),
-  userCannotCreateLinode: false,
-};
-
-describe('FromBackupsContent', () => {
-  it('should render Placeholder if no valid backups exist', () => {
-    const { getByText } = renderWithTheme(
-      <FromBackupsContent {...mockProps} />
-    );
-    expect(
-      getByText(
-        'You do not have backups enabled for your Linodes. Please visit the Backups panel in the Linode Details view.'
-      )
-    ).toBeVisible();
-  });
-
-  it('should render a linode select if a user has linodes with backups', () => {
-    const linodes = linodeFactory.buildList(1, {
-      backups: { enabled: true },
-      label: 'this-linode-should-show-up',
-    });
-
-    const { getByText } = renderWithTheme(
-      <FromBackupsContent {...mockProps} linodesData={linodes} />
-    );
-
-    expect(getByText('this-linode-should-show-up')).toBeVisible();
-  });
-});
diff --git a/packages/manager/src/features/Linodes/LinodesCreate/TabbedContent/FromBackupsContent.tsx b/packages/manager/src/features/Linodes/LinodesCreate/TabbedContent/FromBackupsContent.tsx
deleted file mode 100644
index f228398dc1b..00000000000
--- a/packages/manager/src/features/Linodes/LinodesCreate/TabbedContent/FromBackupsContent.tsx
+++ /dev/null
@@ -1,208 +0,0 @@
-import {
-  Linode,
-  LinodeBackupsResponse,
-  getLinodeBackups,
-} from '@linode/api-v4/lib/linodes';
-import * as React from 'react';
-
-import VolumeIcon from 'src/assets/icons/entityIcons/volume.svg';
-import { Paper } from 'src/components/Paper';
-import { Placeholder } from 'src/components/Placeholder/Placeholder';
-import { getIsDistributedRegion } from 'src/components/RegionSelect/RegionSelect.utils';
-import { reportException } from 'src/exceptionReporting';
-import { getAPIErrorFor } from 'src/utilities/getAPIErrorFor';
-
-import { SelectBackupPanel } from '../SelectBackupPanel';
-import { SelectLinodePanel } from '../SelectLinodePanel/SelectLinodePanel';
-import {
-  BackupFormStateHandlers,
-  Info,
-  ReduxStateProps,
-  WithLinodesTypesRegionsAndImages,
-} from '../types';
-import { StyledGrid } from './CommonTabbedContent.styles';
-
-export interface LinodeWithBackups extends Linode {
-  currentBackups: LinodeBackupsResponse;
-}
-
-interface State {
-  backupInfo: Info;
-  backupsError?: string;
-  isGettingBackups: boolean;
-  selectedLinodeWithBackups?: LinodeWithBackups;
-}
-
-export type CombinedProps = BackupFormStateHandlers &
-  ReduxStateProps &
-  WithLinodesTypesRegionsAndImages;
-
-const errorResources = {
-  backup_id: 'Backup ID',
-  label: 'A label',
-  region: 'A region selection',
-  root_pass: 'A root password',
-  tags: 'Tags for this Linode',
-  type: 'A plan selection',
-};
-
-export class FromBackupsContent extends React.Component<CombinedProps, State> {
-  componentDidMount() {
-    this.mounted = true;
-    // If there is a selected Linode ID (from props), make sure its information
-    // is set to state as if it had been selected manually.
-    if (this.props.selectedLinodeID) {
-      this.updateRegion(this.props.selectedLinodeID);
-      this.getBackupsForLinode(this.props.selectedLinodeID);
-    }
-  }
-
-  componentWillUnmount() {
-    this.mounted = false;
-  }
-
-  render() {
-    const { isGettingBackups, selectedLinodeWithBackups } = this.state;
-    const {
-      errors,
-      linodesData,
-      regionsData,
-      selectedBackupID,
-      selectedLinodeID,
-      setBackupID,
-      userCannotCreateLinode,
-    } = this.props;
-
-    const hasErrorFor = getAPIErrorFor(errorResources, errors);
-
-    const userHasBackups = linodesData.some(
-      (thisLinode) => thisLinode.backups.enabled
-    );
-
-    const filterLinodesWithBackups = (linodes: Linode[]) =>
-      linodes.filter(
-        (linode) =>
-          linode.backups.enabled &&
-          !getIsDistributedRegion(regionsData, linode.region) // Hide linodes that are in a distributed region
-      );
-
-    return (
-      <StyledGrid>
-        {!userHasBackups ? (
-          <Paper>
-            <Placeholder
-              icon={VolumeIcon}
-              isEntity
-              renderAsSecondary
-              title="Create from Backup"
-            >
-              You do not have backups enabled for your Linodes. Please visit the
-              Backups panel in the Linode Details view.
-            </Placeholder>
-          </Paper>
-        ) : (
-          <React.Fragment>
-            <SelectLinodePanel
-              notices={[
-                `This newly created Linode will be created with
-                          the same password and SSH Keys (if any) as the original Linode.`,
-                'This Linode will need to be manually booted after it finishes provisioning.',
-              ]}
-              disabled={userCannotCreateLinode}
-              error={hasErrorFor('linode_id')}
-              handleSelection={this.handleLinodeSelect}
-              linodes={filterLinodesWithBackups(linodesData)}
-              selectedLinodeID={selectedLinodeID}
-            />
-            <SelectBackupPanel
-              error={hasErrorFor('backup_id') || this.state.backupsError}
-              handleChangeBackup={setBackupID}
-              handleChangeBackupInfo={this.handleSelectBackupInfo}
-              loading={isGettingBackups}
-              selectedBackupID={selectedBackupID}
-              selectedLinodeID={selectedLinodeID}
-              selectedLinodeWithBackups={selectedLinodeWithBackups}
-            />
-          </React.Fragment>
-        )}
-      </StyledGrid>
-    );
-  }
-
-  // Find regionID from the selectedLinodeID, and update the parent state.
-  updateRegion(selectedLinodeID: number) {
-    /**
-     * This should never happen, but this is coming from a query string
-     * so this is just a sanity check
-     */
-    if (typeof selectedLinodeID !== 'number') {
-      reportException(`selectedLinodeID's type is not a number`, {
-        selectedLinodeID,
-      });
-      throw new Error('selectedLinodeID is not a number');
-    }
-    const regionID = this.props.linodesData.find(
-      (linode) => linode.id == selectedLinodeID
-    )?.region;
-    this.props.updateRegionID(regionID || '');
-  }
-
-  getBackupsForLinode = (linodeId: number) => {
-    const { linodesData } = this.props;
-
-    if (!linodeId) {
-      return;
-    }
-
-    this.setState({
-      backupsError: undefined,
-      isGettingBackups: true,
-    });
-
-    getLinodeBackups(linodeId)
-      .then((backups) => {
-        const selectedLinode = linodesData.find(
-          (thisLinode) => thisLinode.id === linodeId
-        );
-
-        if (!selectedLinode) {
-          return this.setState({ isGettingBackups: false });
-        }
-
-        const selectedLinodeWithBackups: LinodeWithBackups = {
-          ...selectedLinode,
-          currentBackups: { ...backups },
-        };
-
-        this.setState({ isGettingBackups: false, selectedLinodeWithBackups });
-      })
-      .catch(() => {
-        this.setState({
-          backupsError: 'Error retrieving backups for this Linode.',
-          isGettingBackups: false,
-        });
-      });
-  };
-
-  handleLinodeSelect = (
-    linodeId: number,
-    type: null | string,
-    diskSize?: number
-  ) => {
-    this.props.updateLinodeID(linodeId, diskSize);
-    this.updateRegion(linodeId);
-    this.getBackupsForLinode(linodeId);
-    this.props.updateTypeID(type);
-  };
-
-  handleSelectBackupInfo = (info: Info) => {
-    this.setState({ backupInfo: info });
-  };
-
-  mounted: boolean = false;
-
-  state: State = {
-    backupInfo: undefined,
-    isGettingBackups: false,
-  };
-}
diff --git a/packages/manager/src/features/Linodes/LinodesCreate/TabbedContent/FromImageContent.test.tsx b/packages/manager/src/features/Linodes/LinodesCreate/TabbedContent/FromImageContent.test.tsx
deleted file mode 100644
index bb1bc0bc713..00000000000
--- a/packages/manager/src/features/Linodes/LinodesCreate/TabbedContent/FromImageContent.test.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import * as React from 'react';
-
-import { renderWithTheme } from 'src/utilities/testHelpers';
-
-import { FromImageContent } from './FromImageContent';
-
-import type { CombinedProps } from './FromImageContent';
-
-const mockProps: CombinedProps = {
-  accountBackupsEnabled: false,
-  imagesData: {},
-  regionsData: [],
-  typesData: [],
-  updateImageID: vi.fn(),
-  updateRegionID: vi.fn(),
-  updateTypeID: vi.fn(),
-  userCannotCreateLinode: false,
-};
-
-describe('FromImageContent', () => {
-  it('should render an image select', () => {
-    const { getByLabelText } = renderWithTheme(
-      <FromImageContent {...mockProps} />
-    );
-
-    expect(getByLabelText('Images')).toBeVisible();
-  });
-
-  it('should render empty state if user has no images and variant is private', () => {
-    const { getByText } = renderWithTheme(
-      <FromImageContent {...mockProps} variant="private" />
-    );
-
-    expect(
-      getByText('You don’t have any private Images.', { exact: false })
-    ).toBeVisible();
-  });
-});
diff --git a/packages/manager/src/features/Linodes/LinodesCreate/TabbedContent/FromImageContent.tsx b/packages/manager/src/features/Linodes/LinodesCreate/TabbedContent/FromImageContent.tsx
deleted file mode 100644
index 2432a268d04..00000000000
--- a/packages/manager/src/features/Linodes/LinodesCreate/TabbedContent/FromImageContent.tsx
+++ /dev/null
@@ -1,99 +0,0 @@
-import * as React from 'react';
-import { Link } from 'react-router-dom';
-
-import ImageIcon from 'src/assets/icons/entityIcons/image.svg';
-import { ImageSelect } from 'src/components/ImageSelect/ImageSelect';
-import { Paper } from 'src/components/Paper';
-import { Placeholder } from 'src/components/Placeholder/Placeholder';
-import { Typography } from 'src/components/Typography';
-import { useRegionsQuery } from 'src/queries/regions/regions';
-import { filterImagesByType } from 'src/store/image/image.helpers';
-
-import { StyledGrid } from './CommonTabbedContent.styles';
-
-import type {
-  BasicFromContentProps,
-  ReduxStateProps,
-  WithTypesRegionsAndImages,
-} from '../types';
-import type { Image } from '@linode/api-v4';
-
-interface Props extends BasicFromContentProps {
-  error?: string;
-  imageLabel?: string;
-  imagePanelTitle?: string;
-  placeholder?: string;
-  variant?: 'all' | 'private' | 'public';
-}
-
-export type CombinedProps = Props &
-  BasicFromContentProps &
-  ReduxStateProps &
-  WithTypesRegionsAndImages;
-
-export const FromImageContent = (props: CombinedProps) => {
-  const {
-    error,
-    imageLabel,
-    imagePanelTitle,
-    imagesData,
-    placeholder,
-    userCannotCreateLinode,
-    variant,
-  } = props;
-
-  const privateImages = filterImagesByType(imagesData, 'private');
-
-  const { data: regions } = useRegionsQuery();
-
-  if (variant === 'private' && Object.keys(privateImages).length === 0) {
-    return (
-      <StyledGrid>
-        <Paper>
-          <Placeholder icon={ImageIcon} isEntity title="My Images">
-            <Typography variant="subtitle1">
-              You don&rsquo;t have any private Images. Visit the{' '}
-              <Link to="/images">Images section</Link> to create an Image from
-              one of your Linode&rsquo;s disks.
-            </Typography>
-          </Placeholder>
-        </Paper>
-      </StyledGrid>
-    );
-  }
-
-  const onChange = (image: Image | null) => {
-    props.updateImageID(image?.id ?? '');
-
-    const selectedRegion = regions?.find(
-      (r) => r.id === props.selectedRegionID
-    );
-
-    // Non-"distributed compatible" Images must only be deployed to core sites.
-    // Clear the region field if the currently selected region is a distributed site and the Image is only core compatible.
-    if (
-      image &&
-      !image.capabilities.includes('distributed-sites') &&
-      selectedRegion?.site_type === 'distributed'
-    ) {
-      props.updateRegionID('');
-    }
-  };
-
-  return (
-    <StyledGrid>
-      <ImageSelect
-        data-qa-select-image-panel
-        disabled={userCannotCreateLinode}
-        error={error}
-        handleSelectImage={(_, image) => onChange(image ?? null)}
-        images={Object.keys(imagesData).map((eachKey) => imagesData[eachKey])}
-        label={imageLabel}
-        placeholder={placeholder}
-        selectedImageID={props.selectedImageID}
-        title={imagePanelTitle || 'Choose an Image'}
-        variant={variant}
-      />
-    </StyledGrid>
-  );
-};
diff --git a/packages/manager/src/features/Linodes/LinodesCreate/TabbedContent/FromLinodeContent.test.tsx b/packages/manager/src/features/Linodes/LinodesCreate/TabbedContent/FromLinodeContent.test.tsx
deleted file mode 100644
index 35a3257f7f6..00000000000
--- a/packages/manager/src/features/Linodes/LinodesCreate/TabbedContent/FromLinodeContent.test.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import * as React from 'react';
-
-import { linodeFactory } from 'src/factories';
-import { renderWithTheme } from 'src/utilities/testHelpers';
-
-import { CombinedProps, FromLinodeContent } from './FromLinodeContent';
-
-const mockProps: CombinedProps = {
-  accountBackupsEnabled: false,
-  imagesData: {},
-  linodesData: [],
-  regionsData: [],
-  typesData: [],
-  updateDiskSize: vi.fn(),
-  updateImageID: vi.fn(),
-  updateLinodeID: vi.fn(),
-  updateRegionID: vi.fn(),
-  updateTypeID: vi.fn(),
-  userCannotCreateLinode: false,
-};
-
-describe('FromLinodeContent', () => {
-  it('should render an empty state if the user has no Linodes', () => {
-    const { getByText } = renderWithTheme(<FromLinodeContent {...mockProps} />);
-
-    expect(
-      getByText(
-        'You do not have any existing Linodes to clone from. Please first create a Linode from either an Image or StackScript.'
-      )
-    ).toBeVisible();
-  });
-
-  it("should render a user's linodes", () => {
-    const linodes = linodeFactory.buildList(1, {
-      label: 'this-linode-should-render',
-    });
-    const { getByText } = renderWithTheme(
-      <FromLinodeContent {...mockProps} linodesData={linodes} />
-    );
-
-    expect(getByText('this-linode-should-render')).toBeVisible();
-  });
-});
diff --git a/packages/manager/src/features/Linodes/LinodesCreate/TabbedContent/FromLinodeContent.tsx b/packages/manager/src/features/Linodes/LinodesCreate/TabbedContent/FromLinodeContent.tsx
deleted file mode 100644
index d756d80d76d..00000000000
--- a/packages/manager/src/features/Linodes/LinodesCreate/TabbedContent/FromLinodeContent.tsx
+++ /dev/null
@@ -1,129 +0,0 @@
-import { Linode } from '@linode/api-v4/lib/linodes';
-import * as React from 'react';
-import { useHistory } from 'react-router-dom';
-
-import VolumeIcon from 'src/assets/icons/entityIcons/volume.svg';
-import { Paper } from 'src/components/Paper';
-import { Placeholder } from 'src/components/Placeholder/Placeholder';
-import { getIsDistributedRegion } from 'src/components/RegionSelect/RegionSelect.utils';
-import { buildQueryStringForLinodeClone } from 'src/features/Linodes/LinodesLanding/LinodeActionMenu/LinodeActionMenuUtils';
-import { useFlags } from 'src/hooks/useFlags';
-import { extendType } from 'src/utilities/extendType';
-import { getAPIErrorFor } from 'src/utilities/getAPIErrorFor';
-
-import { SelectLinodePanel } from '../SelectLinodePanel/SelectLinodePanel';
-import {
-  CloneFormStateHandlers,
-  ReduxStateProps,
-  WithLinodesTypesRegionsAndImages,
-} from '../types';
-import { StyledGrid } from './CommonTabbedContent.styles';
-
-const errorResources = {
-  label: 'A label',
-  region: 'region',
-  root_pass: 'A root password',
-  type: 'A plan selection',
-};
-
-export type CombinedProps = CloneFormStateHandlers &
-  ReduxStateProps &
-  WithLinodesTypesRegionsAndImages;
-
-export const FromLinodeContent = (props: CombinedProps) => {
-  const {
-    errors,
-    linodesData,
-    regionsData,
-    selectedLinodeID,
-    typesData,
-    updateLinodeID,
-    updateTypeID,
-    userCannotCreateLinode,
-  } = props;
-
-  const extendedTypes = typesData?.map(extendType);
-
-  const hasErrorFor = getAPIErrorFor(errorResources, errors);
-
-  const history = useHistory();
-
-  const flags = useFlags();
-
-  const updateSearchParams = (search: string) => {
-    history.replace({ search });
-  };
-
-  /** Set the Linode ID and the disk size and reset the plan selection */
-  const handleSelectLinode = (linodeId: number) => {
-    const linode = props.linodesData.find(
-      (eachLinode) => eachLinode.id === linodeId
-    );
-
-    if (linode) {
-      updateLinodeID(linode.id, linode.specs.disk);
-      updateTypeID(linode.type);
-      updateSearchParams(
-        buildQueryStringForLinodeClone(
-          linode.id,
-          linode.region,
-          linode.type,
-          extendedTypes,
-          regionsData
-        )
-      );
-    }
-  };
-
-  const filterDistributedRegionsLinodes = (linodes: Linode[]) =>
-    linodes.filter(
-      (linode) => !getIsDistributedRegion(regionsData, linode.region) // Hide linodes that are in a distributed region
-    );
-
-  const filteredLinodes = flags.gecko2?.enabled
-    ? filterDistributedRegionsLinodes(linodesData)
-    : linodesData;
-
-  return (
-    // eslint-disable-next-line
-    <React.Fragment>
-      {linodesData && linodesData.length === 0 ? (
-        <StyledGrid>
-          <Paper>
-            <Placeholder
-              data-qa-placeholder
-              icon={VolumeIcon}
-              isEntity
-              renderAsSecondary
-              title="Clone from Existing Linode"
-            >
-              You do not have any existing Linodes to clone from. Please first
-              create a Linode from either an Image or StackScript.
-            </Placeholder>
-          </Paper>
-        </StyledGrid>
-      ) : (
-        <StyledGrid>
-          <SelectLinodePanel
-            notices={[
-              <>
-                To help <strong>avoid data corruption</strong> during the
-                cloning process, we recommend powering off your Compute Instance
-                prior to cloning.
-              </>,
-              'This newly created Linode will be created with the same password and SSH Keys (if any) as the original Linode.',
-            ]}
-            data-qa-linode-panel
-            disabled={userCannotCreateLinode}
-            error={hasErrorFor('linode_id')}
-            handleSelection={handleSelectLinode}
-            header={'Select Linode to Clone From'}
-            linodes={filteredLinodes}
-            selectedLinodeID={selectedLinodeID}
-            showPowerActions
-          />
-        </StyledGrid>
-      )}
-    </React.Fragment>
-  );
-};
diff --git a/packages/manager/src/features/Linodes/LinodesCreate/TabbedContent/FromStackScriptContent.test.tsx b/packages/manager/src/features/Linodes/LinodesCreate/TabbedContent/FromStackScriptContent.test.tsx
deleted file mode 100644
index e8079fea1a3..00000000000
--- a/packages/manager/src/features/Linodes/LinodesCreate/TabbedContent/FromStackScriptContent.test.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import { getStackScripts } from '@linode/api-v4';
-import * as React from 'react';
-
-import { stackScriptFactory } from 'src/factories';
-import { makeResourcePage } from 'src/mocks/serverHandlers';
-import { http, HttpResponse, server } from 'src/mocks/testServer';
-import { renderWithTheme } from 'src/utilities/testHelpers';
-
-import {
-  CombinedProps,
-  FromStackScriptContent,
-} from './FromStackScriptContent';
-
-const mockProps: CombinedProps = {
-  accountBackupsEnabled: false,
-  category: 'account',
-  handleSelectUDFs: vi.fn(),
-  header: '',
-  imagesData: {},
-  regionsData: [],
-  request: getStackScripts,
-  updateImageID: vi.fn(),
-  updateRegionID: vi.fn(),
-  updateStackScript: vi.fn(),
-  updateTypeID: vi.fn(),
-  userCannotCreateLinode: false,
-};
-
-describe('FromStackScriptContent', () => {
-  it('should render stackscripts', async () => {
-    const stackscripts = stackScriptFactory.buildList(3);
-
-    server.use(
-      http.get('*/v4/linode/stackscripts', () => {
-        return HttpResponse.json(makeResourcePage(stackscripts));
-      })
-    );
-
-    const { findByText } = renderWithTheme(
-      <FromStackScriptContent {...mockProps} />
-    );
-
-    for (const stackscript of stackscripts) {
-      // eslint-disable-next-line no-await-in-loop
-      await findByText(stackscript.label);
-    }
-  });
-});
diff --git a/packages/manager/src/features/Linodes/LinodesCreate/TabbedContent/FromStackScriptContent.tsx b/packages/manager/src/features/Linodes/LinodesCreate/TabbedContent/FromStackScriptContent.tsx
deleted file mode 100644
index 0dc9de9ec00..00000000000
--- a/packages/manager/src/features/Linodes/LinodesCreate/TabbedContent/FromStackScriptContent.tsx
+++ /dev/null
@@ -1,187 +0,0 @@
-import { Image } from '@linode/api-v4/lib/images';
-import { UserDefinedField } from '@linode/api-v4/lib/stackscripts';
-import { styled } from '@mui/material/styles';
-import { assocPath, equals } from 'ramda';
-import * as React from 'react';
-
-import { ImageSelect } from 'src/components/ImageSelect/ImageSelect';
-import { ImageEmptyState } from 'src/features/Linodes/LinodesCreate/TabbedContent/ImageEmptyState';
-import SelectStackScriptPanel from 'src/features/StackScripts/SelectStackScriptPanel/SelectStackScriptPanel';
-import StackScriptDialog from 'src/features/StackScripts/StackScriptDialog';
-import UserDefinedFieldsPanel from 'src/features/StackScripts/UserDefinedFieldsPanel/UserDefinedFieldsPanel';
-import { StackScriptsRequest } from 'src/features/StackScripts/types';
-import { filterImagesByType } from 'src/store/image/image.helpers';
-import { getAPIErrorFor } from 'src/utilities/getAPIErrorFor';
-
-import {
-  ReduxStateProps,
-  StackScriptFormStateHandlers,
-  WithTypesRegionsAndImages,
-} from '../types';
-import { StyledGrid } from './CommonTabbedContent.styles';
-import { filterUDFErrors } from './formUtilities';
-
-interface Props {
-  category: 'account' | 'community';
-  header: string;
-  request: StackScriptsRequest;
-}
-
-const errorResources = {
-  image: 'image',
-  label: 'A label',
-  region: 'region',
-  root_pass: 'A root password',
-  stackscript_id: 'The selected StackScript',
-  tags: 'Tags',
-  type: 'A plan selection',
-};
-
-export type CombinedProps = Props &
-  ReduxStateProps &
-  StackScriptFormStateHandlers &
-  WithTypesRegionsAndImages;
-
-export class FromStackScriptContent extends React.PureComponent<CombinedProps> {
-  render() {
-    const {
-      availableStackScriptImages: compatibleImages,
-      availableUserDefinedFields: userDefinedFields,
-      errors,
-      header,
-      imagesData,
-      request,
-      selectedImageID,
-      selectedStackScriptID,
-      selectedStackScriptLabel,
-      selectedStackScriptUsername,
-      selectedUDFs: udf_data,
-      updateImageID,
-      userCannotCreateLinode,
-    } = this.props;
-
-    // If all of the StackScript's compatibleImages match the full array of images,
-    // we can assume that the StackScript specified any/all
-    const showAllImages = equals(compatibleImages, Object.values(imagesData));
-
-    const hasErrorFor = getAPIErrorFor(errorResources, errors);
-
-    return (
-      <React.Fragment>
-        <StyledGrid data-qa-panel={header}>
-          <SelectStackScriptPanel
-            category={this.props.category}
-            data-qa-select-stackscript
-            disabled={userCannotCreateLinode}
-            error={hasErrorFor('stackscript_id')}
-            header={header}
-            isOnCreate
-            onSelect={this.handleSelectStackScript}
-            publicImages={filterImagesByType(imagesData, 'public')}
-            request={request}
-            resetSelectedStackScript={() => null}
-            selectedId={selectedStackScriptID}
-            selectedUsername={selectedStackScriptUsername}
-            updateFor={[selectedStackScriptID, errors]}
-          />
-          {!userCannotCreateLinode &&
-            userDefinedFields &&
-            userDefinedFields.length > 0 && (
-              <UserDefinedFieldsPanel
-                data-qa-udf-panel
-                errors={filterUDFErrors(errorResources, this.props.errors)}
-                handleChange={this.handleChangeUDF}
-                selectedLabel={selectedStackScriptLabel || ''}
-                selectedUsername={selectedStackScriptUsername || ''}
-                udf_data={udf_data || {}}
-                updateFor={[userDefinedFields, udf_data, errors]}
-                userDefinedFields={userDefinedFields}
-              />
-            )}
-          {!userCannotCreateLinode &&
-          compatibleImages &&
-          compatibleImages.length > 0 ? (
-            <ImageSelect
-              data-qa-select-image-panel
-              error={hasErrorFor('image')}
-              handleSelectImage={updateImageID}
-              images={compatibleImages}
-              selectedImageID={selectedImageID}
-              title="Select an Image"
-              variant={showAllImages ? 'all' : 'public'}
-            />
-          ) : (
-            <StyledImageEmptyState errorText={hasErrorFor('image')} />
-          )}
-        </StyledGrid>
-
-        <StackScriptDialog />
-      </React.Fragment>
-    );
-  }
-
-  handleChangeUDF = (key: string, value: string) => {
-    // either overwrite or create new selection
-    const newUDFData = assocPath([key], value, this.props.selectedUDFs);
-
-    this.props.handleSelectUDFs({ ...this.props.selectedUDFs, ...newUDFData });
-  };
-
-  handleSelectStackScript = (
-    id: number,
-    label: string,
-    username: string,
-    stackScriptImages: string[],
-    userDefinedFields: UserDefinedField[]
-  ) => {
-    const allowAllImages = stackScriptImages.includes('any/all');
-    const { imagesData } = this.props;
-
-    /**
-     * based on the list of images we get back from the API, compare those
-     * to our list of public images supported by Linode and filter out the ones
-     * that aren't compatible with our selected StackScript
-     */
-    const compatibleImages = allowAllImages
-      ? Object.values(imagesData)
-      : Object.keys(imagesData).reduce((acc, eachKey) => {
-          if (
-            stackScriptImages.some((eachSSImage) => eachSSImage === eachKey)
-          ) {
-            acc.push(imagesData[eachKey]);
-          }
-
-          return acc;
-        }, [] as Image[]);
-    /**
-     * if a UDF field comes back from the API with a "default"
-     * value, it means we need to pre-populate the field and form state
-     */
-    const defaultUDFData = userDefinedFields.reduce<Record<string, string>>(
-      (accum, eachField) => {
-        if (eachField.default) {
-          accum[eachField.name] = eachField.default;
-        }
-        return accum;
-      },
-      {}
-    );
-
-    this.props.updateStackScript(
-      id,
-      label,
-      username,
-      userDefinedFields,
-      compatibleImages,
-      defaultUDFData
-    );
-  };
-}
-
-const StyledImageEmptyState = styled(ImageEmptyState, {
-  label: 'StyledImageEmptyState',
-})(({ theme }) => ({
-  padding: theme.spacing(3),
-}));
-
-export default FromStackScriptContent;
diff --git a/packages/manager/src/features/Linodes/LinodesCreate/TabbedContent/formUtilities.test.ts b/packages/manager/src/features/Linodes/LinodesCreate/TabbedContent/formUtilities.test.ts
deleted file mode 100644
index f29165412b9..00000000000
--- a/packages/manager/src/features/Linodes/LinodesCreate/TabbedContent/formUtilities.test.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import { APIError } from '@linode/api-v4/lib/types';
-
-import { filterUDFErrors } from './formUtilities';
-
-describe('Linode Create Utilities', () => {
-  it('should filter out all errors except UDF errors', () => {
-    const mockErrors: APIError[] = [
-      {
-        field: 'label',
-        reason: 'label is required',
-      },
-      {
-        field: 'ssh_keys',
-        reason: 'ssh_keys are required',
-      },
-      {
-        field: 'wp_password',
-        reason: 'a value for the UDF is required',
-      },
-    ];
-
-    const errorResources = {
-      label: 'A label',
-      ssh_keys: 'ssh_keys',
-    };
-
-    const filteredErrors = filterUDFErrors(errorResources, mockErrors);
-    expect(filteredErrors[0].field).toBe('wp_password');
-    expect(filteredErrors).toHaveLength(1);
-  });
-});
diff --git a/packages/manager/src/features/Linodes/LinodesCreate/TabbedContent/formUtilities.ts b/packages/manager/src/features/Linodes/LinodesCreate/TabbedContent/formUtilities.ts
deleted file mode 100644
index a0b9a532a0f..00000000000
--- a/packages/manager/src/features/Linodes/LinodesCreate/TabbedContent/formUtilities.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { APIError } from '@linode/api-v4/lib/types';
-
-/**
- * filter out all the API errors that aren't UDF errors from our error state.
- * To do this, we compare the keys from the error state to our "errorResources"
- * map and return all the errors that don't match the keys in that object
- */
-export const filterUDFErrors = (
-  errorResources: Record<string, string>,
-  errors?: APIError[]
-) => {
-  if (typeof errorResources !== 'object') {
-    throw Error('errorResources must be an object.');
-  }
-  return !errors
-    ? []
-    : errors.filter((eachError) => {
-        return !Object.keys(errorResources).some(
-          (eachKey) => eachKey === eachError.field
-        );
-      });
-};
diff --git a/packages/manager/src/features/Linodes/LinodesCreate/TabbedContent/utils.ts b/packages/manager/src/features/Linodes/LinodesCreate/TabbedContent/utils.ts
deleted file mode 100644
index 92a7d4d3dd3..00000000000
--- a/packages/manager/src/features/Linodes/LinodesCreate/TabbedContent/utils.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export const renderBackupsDisplaySection = (
-  accountBackups: boolean,
-  price: number
-) => ({
-  details: `$${price.toFixed(2)}/month`,
-  title: accountBackups ? 'Backups (Auto Enrolled)' : 'Backups',
-});
diff --git a/packages/manager/src/features/Linodes/LinodesCreate/UserDataAccordion/UserDataAccordion.styles.ts b/packages/manager/src/features/Linodes/LinodesCreate/UserDataAccordion/UserDataAccordion.styles.ts
deleted file mode 100644
index 5e87270c21e..00000000000
--- a/packages/manager/src/features/Linodes/LinodesCreate/UserDataAccordion/UserDataAccordion.styles.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-export const useExpandIconStyles = makeStyles()(() => ({
-  expandIconStyles: {
-    marginTop: '8px',
-  },
-}));
diff --git a/packages/manager/src/features/Linodes/LinodesCreate/UserDataAccordion/UserDataAccordion.test.tsx b/packages/manager/src/features/Linodes/LinodesCreate/UserDataAccordion/UserDataAccordion.test.tsx
index c9f1d339e4a..931edd0f9ef 100644
--- a/packages/manager/src/features/Linodes/LinodesCreate/UserDataAccordion/UserDataAccordion.test.tsx
+++ b/packages/manager/src/features/Linodes/LinodesCreate/UserDataAccordion/UserDataAccordion.test.tsx
@@ -44,16 +44,6 @@ describe('UserDataAccordion', () => {
     ).toBeInTheDocument();
   });
 
-  it('should display a custom header warning message', () => {
-    renderWithTheme(<UserDataAccordion {...props} createType="fromBackup" />);
-
-    const headerWarningMessage = screen.getByText(
-      'Existing user data is not accessible when creating a Linode from a backup. You may add new user data now.'
-    );
-
-    expect(headerWarningMessage).toBeInTheDocument();
-  });
-
   it('should display a custom notice', () => {
     renderWithTheme(
       <UserDataAccordion {...props} renderNotice={<div>Custom notice</div>} />
diff --git a/packages/manager/src/features/Linodes/LinodesCreate/UserDataAccordion/UserDataAccordion.tsx b/packages/manager/src/features/Linodes/LinodesCreate/UserDataAccordion/UserDataAccordion.tsx
index e718e2b0d91..ebe548dc6ba 100644
--- a/packages/manager/src/features/Linodes/LinodesCreate/UserDataAccordion/UserDataAccordion.tsx
+++ b/packages/manager/src/features/Linodes/LinodesCreate/UserDataAccordion/UserDataAccordion.tsx
@@ -6,13 +6,10 @@ import { Link } from 'src/components/Link';
 import { Notice } from 'src/components/Notice/Notice';
 import { TextField } from 'src/components/TextField';
 import { Typography } from 'src/components/Typography';
-import { CreateTypes } from 'src/store/linodeCreate/linodeCreate.actions';
 
-import { useExpandIconStyles } from './UserDataAccordion.styles';
 import { UserDataAccordionHeading } from './UserDataAccordionHeading';
 
 export interface UserDataAccordionProps {
-  createType?: CreateTypes;
   disabled?: boolean;
   onChange: (userData: string) => void;
   renderCheckbox?: JSX.Element;
@@ -21,15 +18,7 @@ export interface UserDataAccordionProps {
 }
 
 export const UserDataAccordion = (props: UserDataAccordionProps) => {
-  const { classes, cx } = useExpandIconStyles();
-  const {
-    createType,
-    disabled,
-    onChange,
-    renderCheckbox,
-    renderNotice,
-    userData,
-  } = props;
+  const { disabled, onChange, renderCheckbox, renderNotice, userData } = props;
   const [formatWarning, setFormatWarning] = React.useState(false);
 
   const checkFormat = ({
@@ -55,9 +44,6 @@ export const UserDataAccordion = (props: UserDataAccordionProps) => {
     padding: `0px 24px 24px ${renderNotice ? 0 : 24}px`,
   };
 
-  const fromBackupOrFromLinode =
-    createType && ['fromBackup', 'fromLinode'].includes(createType);
-
   return (
     <Accordion
       headingProps={{
@@ -68,7 +54,7 @@ export const UserDataAccordion = (props: UserDataAccordionProps) => {
       }} // for now, these props can be taken as an indicator we're in the Rebuild flow.
       summaryProps={{
         sx: {
-          alignItems: fromBackupOrFromLinode ? 'flex-start' : 'center',
+          alignItems: 'center',
           padding: '5px 24px 0px 24px',
         },
       }}
@@ -78,10 +64,7 @@ export const UserDataAccordion = (props: UserDataAccordionProps) => {
         },
       }}
       detailProps={{ sx: sxDetails }}
-      expandIconClassNames={cx({
-        [classes.expandIconStyles]: !!fromBackupOrFromLinode,
-      })}
-      heading={<UserDataAccordionHeading createType={createType} />}
+      heading={<UserDataAccordionHeading />}
     >
       {renderNotice ? (
         <Box data-testid="render-notice" marginBottom="16px">
diff --git a/packages/manager/src/features/Linodes/LinodesCreate/UserDataAccordion/UserDataAccordionHeading.tsx b/packages/manager/src/features/Linodes/LinodesCreate/UserDataAccordion/UserDataAccordionHeading.tsx
index 24ae144710c..6c400990ae1 100644
--- a/packages/manager/src/features/Linodes/LinodesCreate/UserDataAccordion/UserDataAccordionHeading.tsx
+++ b/packages/manager/src/features/Linodes/LinodesCreate/UserDataAccordion/UserDataAccordionHeading.tsx
@@ -2,51 +2,25 @@ import * as React from 'react';
 
 import { Box } from 'src/components/Box';
 import { Link } from 'src/components/Link';
-import { Notice } from 'src/components/Notice/Notice';
 import { TooltipIcon } from 'src/components/TooltipIcon';
-import { CreateTypes } from 'src/store/linodeCreate/linodeCreate.actions';
-
-interface Props {
-  createType?: CreateTypes;
-}
-
-export const UserDataAccordionHeading = (props: Props) => {
-  const { createType } = props;
-  const warningMessageMap: Record<CreateTypes, null | string> = {
-    fromApp: null,
-    fromBackup:
-      'Existing user data is not accessible when creating a Linode from a backup. You may add new user data now.',
-    fromImage: null,
-    fromLinode:
-      'Existing user data is not cloned. You may add new user data now.',
-    fromStackScript: null,
-  };
-
-  const warningMessage = createType ? warningMessageMap[createType] : null;
 
+export const UserDataAccordionHeading = () => {
   return (
-    <>
-      <Box display="flex">
-        Add User Data
-        <TooltipIcon
-          text={
-            <>
-              User data allows you to provide additional custom data to
-              cloud-init to further configure your system.{' '}
-              <Link to="https://www.linode.com/docs/products/compute/compute-instances/guides/metadata/">
-                Learn more.
-              </Link>
-            </>
-          }
-          status="help"
-          sxTooltipIcon={{ alignItems: 'baseline', padding: '0 8px' }}
-        />
-      </Box>
-      {warningMessage ? (
-        <Notice spacingBottom={16} spacingTop={16} variant="warning">
-          {warningMessage}
-        </Notice>
-      ) : null}
-    </>
+    <Box display="flex">
+      Add User Data
+      <TooltipIcon
+        text={
+          <>
+            User data allows you to provide additional custom data to cloud-init
+            to further configure your system.{' '}
+            <Link to="https://www.linode.com/docs/products/compute/compute-instances/guides/metadata/">
+              Learn more.
+            </Link>
+          </>
+        }
+        status="help"
+        sxTooltipIcon={{ alignItems: 'baseline', padding: '0 8px' }}
+      />
+    </Box>
   );
 };
diff --git a/packages/manager/src/features/Linodes/LinodesCreate/VLANAccordion.test.tsx b/packages/manager/src/features/Linodes/LinodesCreate/VLANAccordion.test.tsx
deleted file mode 100644
index 8a23365fddb..00000000000
--- a/packages/manager/src/features/Linodes/LinodesCreate/VLANAccordion.test.tsx
+++ /dev/null
@@ -1,112 +0,0 @@
-import { fireEvent, waitFor } from '@testing-library/react';
-import React from 'react';
-
-import { regionFactory } from 'src/factories';
-import { queryClientFactory } from 'src/queries/base';
-import { renderWithTheme } from 'src/utilities/testHelpers';
-
-import { VLANAccordion } from './VLANAccordion';
-
-import type { VLANAccordionProps } from './VLANAccordion';
-
-const queryClient = queryClientFactory();
-
-const defaultProps: VLANAccordionProps = {
-  handleVLANChange: vi.fn(),
-  helperText: 'helper text',
-  ipamAddress: '',
-  vlanLabel: '',
-};
-
-const queryMocks = vi.hoisted(() => ({
-  useRegionsQuery: vi.fn().mockReturnValue({}),
-}));
-
-vi.mock('src/queries/regions/regions', async () => {
-  const actual = await vi.importActual('src/queries/regions/regions');
-  return {
-    ...actual,
-    useRegionsQuery: queryMocks.useRegionsQuery,
-  };
-});
-
-describe('VLANAccordion Component', () => {
-  it('renders collapsed VLANAccordion component', () => {
-    const { getByRole } = renderWithTheme(<VLANAccordion {...defaultProps} />, {
-      queryClient,
-    });
-
-    expect(getByRole('button', { name: 'VLAN' })).toHaveAttribute(
-      'aria-expanded',
-      'false'
-    );
-  });
-
-  it('contains expected elements when expanded', () => {
-    const {
-      container,
-      getByPlaceholderText,
-      getByRole,
-      getByTestId,
-    } = renderWithTheme(<VLANAccordion {...defaultProps} />, {
-      queryClient,
-    });
-
-    fireEvent.click(getByRole('button', { name: 'VLAN' }));
-
-    expect(getByTestId('notice-warning')).toBeVisible();
-    expect(
-      getByRole('link', {
-        name: 'Configuration Profile - link opens in a new tab',
-      })
-    ).toBeVisible();
-    expect(getByPlaceholderText('Create or select a VLAN')).toBeVisible();
-    expect(container.querySelector('#vlan-label-1')).toBeDisabled();
-    expect(getByPlaceholderText('192.0.2.0/24')).toBeVisible();
-    expect(container.querySelector('#ipam-input-1')).toBeDisabled();
-  });
-
-  it('enables the input fields when a region is selected', () => {
-    queryMocks.useRegionsQuery.mockReturnValue({
-      data: [
-        regionFactory.build({
-          capabilities: ['Vlans'],
-          id: 'us-east',
-        }),
-      ],
-    });
-
-    const { container, getByRole } = renderWithTheme(
-      <VLANAccordion {...defaultProps} region="us-east" />,
-      {
-        queryClient,
-      }
-    );
-
-    fireEvent.click(getByRole('button', { name: 'VLAN' }));
-
-    expect(container.querySelector('#vlan-label-1')).not.toHaveAttribute(
-      'disabled'
-    );
-    expect(container.querySelector('#ipam-input-1')).not.toHaveAttribute(
-      'disabled'
-    );
-  });
-
-  it('contains a tooltip containing avalable VLAN regions', async () => {
-    const { getAllByRole, getByRole, getByText } = renderWithTheme(
-      <VLANAccordion {...defaultProps} />,
-      {
-        queryClient,
-      }
-    );
-
-    fireEvent.click(getByRole('button', { name: 'VLAN' }));
-    fireEvent.mouseOver(getByText('select regions'));
-
-    await waitFor(() => {
-      expect(getByRole('tooltip')).toBeVisible();
-      expect(getAllByRole('listitem').length).toBeGreaterThan(0);
-    });
-  });
-});
diff --git a/packages/manager/src/features/Linodes/LinodesCreate/VLANAccordion.tsx b/packages/manager/src/features/Linodes/LinodesCreate/VLANAccordion.tsx
deleted file mode 100644
index 8785cbf8e29..00000000000
--- a/packages/manager/src/features/Linodes/LinodesCreate/VLANAccordion.tsx
+++ /dev/null
@@ -1,108 +0,0 @@
-import * as React from 'react';
-
-import { Accordion } from 'src/components/Accordion';
-import { Box } from 'src/components/Box';
-import { Link } from 'src/components/Link';
-import { TooltipIcon } from 'src/components/TooltipIcon';
-import { Typography } from 'src/components/Typography';
-import { useRegionsQuery } from 'src/queries/regions/regions';
-import { doesRegionSupportFeature } from 'src/utilities/doesRegionSupportFeature';
-
-import { InterfaceSelect } from '../LinodesDetail/LinodeSettings/InterfaceSelect';
-import { VLANAvailabilityNotice } from './VLANAvailabilityNotice';
-
-import type { Interface } from '@linode/api-v4/lib/linodes';
-
-export interface VLANAccordionProps {
-  handleVLANChange: (updatedInterface: Interface) => void;
-  helperText?: string;
-  ipamAddress: string;
-  ipamError?: string;
-  labelError?: string;
-  readOnly?: boolean;
-  region?: string;
-  vlanLabel: string;
-}
-
-export const VLANAccordion = React.memo((props: VLANAccordionProps) => {
-  const {
-    handleVLANChange,
-    helperText,
-    ipamAddress,
-    ipamError,
-    labelError,
-    readOnly,
-    region,
-    vlanLabel,
-  } = props;
-
-  const regions = useRegionsQuery().data ?? [];
-  const selectedRegion = region || '';
-
-  const regionSupportsVLANs = doesRegionSupportFeature(
-    selectedRegion,
-    regions,
-    'Vlans'
-  );
-
-  return (
-    <Accordion
-      detailProps={{
-        sx: {
-          padding: '0px 24px 24px 24px',
-        },
-      }}
-      heading={
-        <Box display="flex">
-          VLAN
-          {helperText && (
-            <TooltipIcon
-              status="help"
-              sxTooltipIcon={{ alignItems: 'baseline', padding: '0 8px' }}
-              text={helperText}
-            />
-          )}
-        </Box>
-      }
-      summaryProps={{
-        sx: {
-          padding: '5px 24px 0px 24px',
-        },
-      }}
-      sx={{
-        marginTop: 2,
-      }}
-      data-qa-add-ons
-      data-testid="vlan-accordion"
-    >
-      <VLANAvailabilityNotice />
-      <Typography sx={{ marginTop: 2 }} variant="body1">
-        VLANs are used to create a private L2 Virtual Local Area Network between
-        Linodes. A VLAN created or attached in this section will be assigned to
-        the eth1 interface, with eth0 being used for connections to the public
-        internet. VLAN configurations can be further edited in the
-        Linode&rsquo;s{' '}
-        <Link to="https://www.linode.com/docs/guides/linode-configuration-profiles/">
-          Configuration Profile
-        </Link>
-        .
-      </Typography>
-      <InterfaceSelect
-        errors={{
-          ipamError,
-          labelError,
-        }}
-        handleChange={(newInterface: Interface) =>
-          handleVLANChange(newInterface)
-        }
-        fromAddonsPanel
-        ipamAddress={ipamAddress}
-        label={vlanLabel}
-        purpose="vlan"
-        readOnly={readOnly || !regionSupportsVLANs || false}
-        region={region}
-        slotNumber={1}
-      />
-    </Accordion>
-  );
-});
diff --git a/packages/manager/src/features/Linodes/LinodesCreate/deriveDefaultLabel.test.ts b/packages/manager/src/features/Linodes/LinodesCreate/deriveDefaultLabel.test.ts
deleted file mode 100644
index 81ef6d2654b..00000000000
--- a/packages/manager/src/features/Linodes/LinodesCreate/deriveDefaultLabel.test.ts
+++ /dev/null
@@ -1,63 +0,0 @@
-import { deriveDefaultLabel } from './deriveDefaultLabel';
-
-describe('create label name', () => {
-  it('creates label name with image, region, type', () => {
-    expect(deriveDefaultLabel(['ubuntu', 'newark', '1gb'], [])).toBe(
-      'ubuntu-newark-1gb'
-    );
-  });
-
-  it('works without all params', () => {
-    expect(deriveDefaultLabel(['ubuntu', 'newark'], [])).toBe('ubuntu-newark');
-    expect(deriveDefaultLabel(['1gb'], [])).toBe('1gb');
-    expect(deriveDefaultLabel(['ubuntu', 'newark'], [])).toBe('ubuntu-newark');
-  });
-
-  it('clamps length when necessary', () => {
-    expect(deriveDefaultLabel(['really-long-linode-label', 'newark'], [])).toBe(
-      'really-long-l-newark'
-    );
-    expect(
-      deriveDefaultLabel(
-        ['really-long-linode-label', 'us-east-another-region'],
-        []
-      )
-    ).toBe('really-long-l-us-east-anoth');
-    expect(deriveDefaultLabel(['123456789', '10', '11', '12131415'], [])).toBe(
-      '123456789-10-11-12131415'
-    );
-    expect(
-      deriveDefaultLabel(['123456789', '10', '11', '12131415161718192021'], [])
-    ).toBe('123456-10-11-121314');
-  });
-
-  it('ensures no double dashes or underscores are present', () => {
-    expect(
-      deriveDefaultLabel(
-        ['really-long-l-inode-label', 'us-east-another-region'],
-        []
-      )
-    ).toBe('really-long-l-us-east-anoth');
-    expect(deriveDefaultLabel(['this-is__impossible', 'us-west'], [])).toBe(
-      'this-is_impossible-us-west'
-    );
-  });
-
-  it('adds an incrementor', () => {
-    expect(deriveDefaultLabel(['my', 'label'], ['my-label'])).toBe(
-      'my-label-001'
-    );
-    expect(deriveDefaultLabel(['my', 'label'], ['my-label-001'])).toBe(
-      'my-label'
-    );
-    expect(
-      deriveDefaultLabel(['my', 'label'], ['my-label', 'my-label-002'])
-    ).toBe('my-label-001');
-    expect(
-      deriveDefaultLabel(
-        ['my', 'label'],
-        ['my-label', 'my-label-001', 'my-label003']
-      )
-    ).toBe('my-label-002');
-  });
-});
diff --git a/packages/manager/src/features/Linodes/LinodesCreate/deriveDefaultLabel.ts b/packages/manager/src/features/Linodes/LinodesCreate/deriveDefaultLabel.ts
deleted file mode 100644
index 1bf2e989d6b..00000000000
--- a/packages/manager/src/features/Linodes/LinodesCreate/deriveDefaultLabel.ts
+++ /dev/null
@@ -1,72 +0,0 @@
-import { compose, filter, join, map } from 'ramda';
-
-// Set this at 28, so we can leave room for a dash and zero-padding (width: 3) if needed
-const MAX_LABEL_LENGTH = 28;
-
-// Only alpha-numeric chars, dashes, and underscores allowed by the API
-const labelRegex = /[^a-zA-Z0-9-_]/g;
-
-export type LabelArgTypes = null | string | undefined;
-
-export const deriveDefaultLabel = (
-  parts: LabelArgTypes[],
-  existingLabels: string[]
-): string => {
-  return dedupeLabel(generateBaseLabel(parts), existingLabels);
-};
-
-const generateBaseLabel = (parts: LabelArgTypes[]) => {
-  const filtered = filter(Boolean)(parts);
-  const cleaned = map((s: string) => s.replace(labelRegex, '').toLowerCase())(
-    filtered as string[]
-  );
-
-  const withDash = join('-');
-
-  if (withDash(cleaned).length <= MAX_LABEL_LENGTH) {
-    return compose(ensureSingleDashesAndUnderscores, withDash)(cleaned);
-  }
-
-  // If the length will be more than MAX_LABEL_LENGTH, we'll need to do some calculation and clamp each section
-  const numDashes = filtered.length - 1;
-  const maxSectionLength = Math.floor(
-    (MAX_LABEL_LENGTH - numDashes) / filtered.length
-  );
-
-  return compose(
-    ensureSingleDashesAndUnderscores,
-    withDash,
-    map((s: string) => s.slice(0, maxSectionLength))
-  )(cleaned);
-};
-
-// The API doesn't allow double dashes or underscores. Just in case joining the param
-// sections of the derived label name results in this, we need to do one final 'replace';
-const ensureSingleDashesAndUnderscores = (s: string) => {
-  return s.replace(/--/g, '-').replace(/__/g, '_');
-};
-
-// Searches 'existingLabels' and appends a zero-padded increment-er to the original label
-const dedupeLabel = (label: string, existingLabels: string[]): string => {
-  const ZERO_PAD_WIDTH = 3;
-
-  let dedupedLabel = label;
-  let i = 1;
-
-  const matchingLabels = existingLabels.filter((l) => l.startsWith(label));
-  const findMatchingLabel = (l: string) => {
-    return l === dedupedLabel;
-  };
-
-  while (matchingLabels.find(findMatchingLabel)) {
-    dedupedLabel = label + '-' + i.toString().padStart(ZERO_PAD_WIDTH, '0');
-    i++;
-
-    // EDGE CASE: if a user has 999 iterations of the same name (arch-us-east-001, arch-us-east-002, ...)
-    // just return the original label. They'll get an API error.
-    if (i === 999) {
-      return label;
-    }
-  }
-  return dedupedLabel;
-};
diff --git a/packages/manager/src/features/Linodes/LinodesCreate/types.ts b/packages/manager/src/features/Linodes/LinodesCreate/types.ts
index 50475fe95aa..9176f1aaaaa 100644
--- a/packages/manager/src/features/Linodes/LinodesCreate/types.ts
+++ b/packages/manager/src/features/Linodes/LinodesCreate/types.ts
@@ -1,164 +1,3 @@
-import type { Image } from '@linode/api-v4/lib/images';
-import type {
-  CreateLinodeRequest,
-  Linode,
-  LinodeTypeClass,
-} from '@linode/api-v4/lib/linodes';
-import type { Region } from '@linode/api-v4/lib/regions';
-import type {
-  StackScript,
-  UserDefinedField,
-} from '@linode/api-v4/lib/stackscripts';
-import type { APIError } from '@linode/api-v4/lib/types';
-import type { Tag } from 'src/components/TagsInput/TagsInput';
-import type { ExtendedType } from 'src/utilities/extendType';
-
-export type TypeInfo =
-  | {
-      details: string;
-      hourly: null | number | undefined;
-      monthly: null | number | undefined;
-      title: string;
-    }
-  | undefined;
-
-export type Info = { details?: string; title?: string } | undefined;
-
-/**
- * These props are meant purely for what is displayed in the
- * Checkout bar
- */
-export interface WithDisplayData {
-  imageDisplayInfo?: Info;
-  regionDisplayInfo?: Info;
-  typeDisplayInfo?: TypeInfo;
-}
-
-/**
- * Pure Data without the loading and error
- * keys. Component with these props have already been
- * safe-guarded with null, loading, and error checking
- */
-export interface WithTypesRegionsAndImages {
-  imagesData: Record<string, Image>;
-  regionsData: Region[];
-  typesData?: ExtendedType[];
-}
-
-export interface WithLinodesTypesRegionsAndImages
-  extends WithTypesRegionsAndImages {
-  linodesData: Linode[];
-}
-
-export interface ReduxStateProps {
-  accountBackupsEnabled: boolean;
-  userCannotCreateLinode: boolean;
-}
-
-export type HandleSubmit = (
-  payload: CreateLinodeRequest,
-  linodeID?: number
-) => void;
-
-export type LinodeCreateValidation = (payload: CreateLinodeRequest) => void;
-
-export interface BasicFromContentProps {
-  disabledClasses?: LinodeTypeClass[];
-  errors?: APIError[];
-  regionHelperText?: string;
-  selectedImageID?: string;
-  selectedRegionID?: string;
-  selectedTypeID?: string;
-  updateImageID: (id: string) => void;
-  updateRegionID: (id: string) => void;
-  updateTypeID: (id: string) => void;
-}
-
-/**
- * minimum number of state and handlers needed for
- * the _create from image_ flow to function
- */
-export interface BaseFormStateAndHandlers {
-  authorized_users: string[];
-  backupsEnabled: boolean;
-  disabledClasses?: LinodeTypeClass[];
-  errors?: APIError[];
-  formIsSubmitting: boolean;
-  handleSubmitForm: HandleSubmit;
-  label: string;
-  password: string;
-  privateIPEnabled: boolean;
-  regionHelperText?: string;
-  resetCreationState: () => void;
-  selectedImageID?: string;
-  selectedRegionID?: string;
-  selectedTypeID?: string;
-  setAuthorizedUsers: (usernames: string[]) => void;
-  tags?: Tag[];
-  toggleBackupsEnabled: () => void;
-  togglePrivateIPEnabled: () => void;
-  updateImageID: (id: string) => void;
-  updateLabel: (label: string) => void;
-  updatePassword: (password: string) => void;
-  updateRegionID: (id: string) => void;
-  updateTags: (tags: Tag[]) => void;
-  updateTypeID: (id: string) => void;
-}
-
-/**
- * additional form fields needed when creating a Linode from a Linode
- * AKA cloning a Linode
- */
-export interface CloneFormStateHandlers extends BasicFromContentProps {
-  selectedDiskSize?: number;
-  selectedLinodeID?: number;
-  updateDiskSize: (id: number) => void;
-  updateLinodeID: (id: number, diskSize?: number) => void;
-  updateTypeID: (id: null | string) => void;
-}
-
-/**
- * additional form fields needed when creating a Linode from a StackScript
- */
-export interface StackScriptFormStateHandlers extends BasicFromContentProps {
-  availableStackScriptImages?: Image[];
-  availableUserDefinedFields?: UserDefinedField[];
-  handleSelectUDFs: (stackScripts: any) => void;
-  selectedStackScriptID?: number;
-  selectedStackScriptLabel?: string;
-  selectedStackScriptUsername?: string;
-  selectedUDFs?: any;
-  updateStackScript: (
-    id: number,
-    label: string,
-    username: string,
-    userDefinedFields: UserDefinedField[],
-    availableImages: Image[],
-    defaultData?: any
-  ) => void;
-}
-
-/**
- * additional form fields needed when create a Linode from a backup
- * Note that it extends the _Clone_ props because creating from a backup
- * requires the Linodes data
- */
-export interface BackupFormStateHandlers extends CloneFormStateHandlers {
-  selectedBackupID?: number;
-  setBackupID: (id: number) => void;
-}
-
-export interface AppsData {
-  appInstances?: StackScript[];
-  appInstancesError?: string;
-  appInstancesLoading: boolean;
-}
-
-export type AllFormStateAndHandlers = BaseFormStateAndHandlers &
-  CloneFormStateHandlers &
-  StackScriptFormStateHandlers &
-  BackupFormStateHandlers;
-
 export type LinodeCreateType =
   | 'Backups'
   | 'Clone Linode'
diff --git a/packages/manager/src/features/Linodes/LinodesCreate/utilities.test.ts b/packages/manager/src/features/Linodes/LinodesCreate/utilities.test.ts
index 150809adfdf..21676dee097 100644
--- a/packages/manager/src/features/Linodes/LinodesCreate/utilities.test.ts
+++ b/packages/manager/src/features/Linodes/LinodesCreate/utilities.test.ts
@@ -1,132 +1,4 @@
-import { imageFactory, normalizeEntities } from 'src/factories';
-import { stackScriptFactory } from 'src/factories/stackscripts';
-
-import {
-  filterOneClickApps,
-  getMonthlyAndHourlyNodePricing,
-  handleAppLabel,
-  trimOneClickFromLabel,
-  utoa,
-} from './utilities';
-
-import type { StackScript } from '@linode/api-v4';
-
-const linodeImage = imageFactory.build({
-  id: 'linode/debian10',
-  label: 'Debian 10',
-  vendor: 'linode',
-});
-
-const images = normalizeEntities(imageFactory.buildList(10));
-images['linode/debian10'] = linodeImage;
-
-describe('Marketplace cluster pricing', () => {
-  it('should return the monthly and hourly price multipled by the number of nodes', () => {
-    expect(getMonthlyAndHourlyNodePricing(30, 0.045, 3)).toEqual({
-      hourlyPrice: 0.135,
-      monthlyPrice: 90,
-    });
-  });
-
-  it('should round the hourly price to 3 digits', () => {
-    expect(getMonthlyAndHourlyNodePricing(30, 0.045, 5)).toEqual({
-      hourlyPrice: 0.225,
-      monthlyPrice: 150,
-    });
-  });
-});
-
-describe('trimOneClickFromLabel', () => {
-  const stackScript = stackScriptFactory.build({
-    label: 'MongoDB Cluster One-Click',
-  });
-
-  it('should remove "One-Click" from the label', () => {
-    expect(trimOneClickFromLabel(stackScript)).toStrictEqual({
-      ...stackScript,
-      label: 'MongoDB Cluster ',
-    });
-  });
-});
-
-describe('filterOneClickApps', () => {
-  const baseAppIds = [2, 3, 4, 5];
-  const newApps = {
-    6: 'New App 1',
-    7: 'New App 2',
-    8: 'New App 3',
-    9: 'New App 4',
-  };
-
-  // id: 2,3,4,5
-  const queryResultsWithHelpers: StackScript[] = [
-    ...stackScriptFactory.buildList(3),
-    stackScriptFactory.build({ label: 'StackScript Helpers' }),
-  ];
-  // id: 6,7,8,9
-  const queryResultsWithoutHelpers: StackScript[] = stackScriptFactory.buildList(
-    4
-  );
-
-  it('filters OneClickApps and trims labels, excluding StackScripts with Helpers', () => {
-    // feeding 4 Ids (2,3,4,5) getting 3 back
-    const filteredOCAsWithHelpersLabel = filterOneClickApps({
-      baseAppIds,
-      newApps,
-      queryResults: queryResultsWithHelpers,
-    });
-    expect(filteredOCAsWithHelpersLabel.length).toBe(3);
-
-    // feeding 4 Ids (6,7,8,9) getting 4 back
-    const filteredOCAsWithoutHelpersLabel = filterOneClickApps({
-      baseAppIds,
-      newApps,
-      queryResults: queryResultsWithoutHelpers,
-    });
-
-    expect(filteredOCAsWithoutHelpersLabel.length).toBe(4);
-  });
-
-  it('handles empty queryResults', () => {
-    const emptyQueryResults: StackScript[] = [];
-    const filteredOCAs = filterOneClickApps({
-      baseAppIds,
-      newApps,
-      queryResults: emptyQueryResults,
-    });
-
-    // Expect an empty array when queryResults is empty
-    expect(filteredOCAs).toEqual([]);
-  });
-});
-
-describe('handleAppLabel', () => {
-  it('should decode the label and remove "Cluster" when cluster_size is present', () => {
-    const stackScript = stackScriptFactory.build({
-      label: 'My StackScript Cluster ',
-      user_defined_fields: [{ name: 'cluster_size' }],
-    });
-
-    const result = handleAppLabel(stackScript);
-
-    expect(result.decodedLabel).toBe('My StackScript Cluster ');
-    expect(result.isCluster).toBe(true);
-    expect(result.label).toBe('My StackScript');
-  });
-
-  it('should decode the label without removing "Cluster" when cluster_size is not present', () => {
-    const stackScript = stackScriptFactory.build({
-      label: 'My StackScript&reg; Cluster ',
-      user_defined_fields: [],
-    });
-
-    const result = handleAppLabel(stackScript);
-
-    expect(result.decodedLabel).toBe('My StackScript® Cluster ');
-    expect(result.isCluster).toBe(false);
-    expect(result.label).toBe('My StackScript® Cluster ');
-  });
-});
+import { utoa } from './utilities';
 
 /**
  * This is an example cloud-init config
diff --git a/packages/manager/src/features/Linodes/LinodesCreate/utilities.tsx b/packages/manager/src/features/Linodes/LinodesCreate/utilities.tsx
index 68144a1aed7..316de26ad72 100644
--- a/packages/manager/src/features/Linodes/LinodesCreate/utilities.tsx
+++ b/packages/manager/src/features/Linodes/LinodesCreate/utilities.tsx
@@ -1,19 +1,4 @@
-import { decode } from 'he';
-
-import type { Region, StackScript } from '@linode/api-v4/lib';
-
-export const getMonthlyAndHourlyNodePricing = (
-  monthlyPrice: null | number | undefined,
-  hourlyPrice: null | number | undefined,
-  numberOfNodes: number
-) => {
-  return {
-    hourlyPrice: hourlyPrice
-      ? Math.round(hourlyPrice * numberOfNodes * 1000) / 1000
-      : hourlyPrice,
-    monthlyPrice: monthlyPrice ? monthlyPrice * numberOfNodes : monthlyPrice,
-  };
-};
+import type { Region } from '@linode/api-v4/lib';
 
 /**
  * Unicode to ASCII (encode data to Base64)
@@ -37,67 +22,3 @@ export const regionSupportsMetadata = (
       ?.capabilities.includes('Metadata') ?? false
   );
 };
-
-/**
- * This function is used to remove the "One-Click" text from the label of an OCA StackScript.
- * @param stackScript
- * @returns StackScript
- */
-export const trimOneClickFromLabel = (stackScript: StackScript) => {
-  return {
-    ...stackScript,
-    label: stackScript.label.replace('One-Click', ''),
-  };
-};
-
-interface FilteredOCAs {
-  baseAppIds: number[];
-  newApps: Record<string, string> | never[];
-  queryResults: StackScript[];
-}
-
-/**
- * This function is used to filter StackScripts OCAs.
- * @param baseApps // The base apps that are always displayed (static)
- * @param newApps // The new apps defined in the OneClickApps feature flag
- * @param queryResults // The results of the query for StackScripts
- * @returns an array of OCA StackScripts
- */
-export const filterOneClickApps = ({
-  baseAppIds,
-  newApps,
-  queryResults,
-}: FilteredOCAs) => {
-  const allowedAppIds = [...baseAppIds, ...Object.keys(newApps).map(Number)];
-
-  // Don't display One-Click Helpers to the user
-  // Filter out any apps that we don't have info for
-  const filteredApps: StackScript[] = queryResults.filter(
-    (app: StackScript) => {
-      return !app.label.match(/helpers/i) && allowedAppIds.includes(app.id);
-    }
-  );
-  return filteredApps.map((app) => trimOneClickFromLabel(app));
-};
-
-/**
- * This function is used to
- * - decode the label of a StackScript
- * - remove the "Cluster" text from the label of a StackScript since it'll turn into a chip.
- * @param app // The StackScript
- * @returns the decoded label of the StackScript
- */
-export const handleAppLabel = (app: StackScript) => {
-  const decodedLabel = decode(app.label);
-  const isCluster =
-    decodedLabel.endsWith('Cluster ') &&
-    app.user_defined_fields.some((field) => field.name === 'cluster_size');
-
-  const label = isCluster ? decodedLabel.split(' Cluster')[0] : decodedLabel;
-
-  return {
-    decodedLabel,
-    isCluster,
-    label,
-  };
-};
diff --git a/packages/manager/src/features/Linodes/types.ts b/packages/manager/src/features/Linodes/types.ts
index 028d578edf3..70a8efc98d9 100644
--- a/packages/manager/src/features/Linodes/types.ts
+++ b/packages/manager/src/features/Linodes/types.ts
@@ -11,12 +11,6 @@ export type DialogType =
   | 'resize'
   | 'upgrade_volumes';
 
-export type OpenDialog = (
-  type: DialogType,
-  linodeID: number,
-  linodeLabel?: string
-) => void;
-
 export interface LinodeCreateQueryParams extends BaseQueryParams {
   type: LinodeCreateType;
 }
diff --git a/packages/manager/src/features/OneClickApps/AppDetailDrawer.test.tsx b/packages/manager/src/features/OneClickApps/AppDetailDrawer.test.tsx
deleted file mode 100644
index 193e20874c8..00000000000
--- a/packages/manager/src/features/OneClickApps/AppDetailDrawer.test.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import * as React from 'react';
-
-import { renderWithTheme } from 'src/utilities/testHelpers';
-
-import AppDetailDrawer from './AppDetailDrawer';
-
-describe('AppDetailDrawer component', () => {
-  it("should have a title ending in 'Cluster' if the app is a cluster", () => {
-    const { queryByTestId } = renderWithTheme(
-      <AppDetailDrawer
-        onClose={() => {}}
-        open={true}
-        stackScriptLabel="Galera Cluster "
-      />
-    );
-
-    const innerHTML = queryByTestId('app-name')?.innerHTML;
-    expect(innerHTML).toBe('Galera Cluster');
-  });
-
-  it("should not have a title ending in 'Cluster' if the app is not a cluster", () => {
-    const { queryByTestId } = renderWithTheme(
-      <AppDetailDrawer
-        onClose={() => {}}
-        open={true}
-        stackScriptLabel="Docker "
-      />
-    );
-
-    const innerHTML = queryByTestId('app-name')?.innerHTML;
-    expect(innerHTML).toBe('Docker');
-  });
-
-  it('should not logically break if the stackScriptLabel for a cluster does not have the expected spaces', () => {
-    const { queryByTestId } = renderWithTheme(
-      <AppDetailDrawer
-        onClose={() => {}}
-        open={true}
-        stackScriptLabel="Galera Cluster"
-      />
-    );
-
-    const innerHTML = queryByTestId('app-name')?.innerHTML;
-    expect(innerHTML).toBe('Galera Cluster');
-  });
-});
diff --git a/packages/manager/src/features/OneClickApps/AppDetailDrawer.tsx b/packages/manager/src/features/OneClickApps/AppDetailDrawer.tsx
deleted file mode 100644
index fab152f1a4d..00000000000
--- a/packages/manager/src/features/OneClickApps/AppDetailDrawer.tsx
+++ /dev/null
@@ -1,258 +0,0 @@
-import Close from '@mui/icons-material/Close';
-import Drawer from '@mui/material/Drawer';
-import { Theme } from '@mui/material/styles';
-import { makeStyles } from 'tss-react/mui';
-import * as React from 'react';
-
-import { Box } from 'src/components/Box';
-import { Button } from 'src/components/Button/Button';
-import { Link } from 'src/components/Link';
-import { Typography } from 'src/components/Typography';
-import { useFlags } from 'src/hooks/useFlags';
-import { sanitizeHTML } from 'src/utilities/sanitizeHTML';
-
-import { oneClickApps } from './oneClickApps';
-import { mapStackScriptLabelToOCA } from './utils';
-
-import type { OCA } from './types';
-
-const useStyles = makeStyles()((theme: Theme) => ({
-  appName: {
-    color: '#fff !important',
-    fontFamily: theme.font.bold,
-    fontSize: '2.2rem',
-    lineHeight: '2.5rem',
-    textAlign: 'center',
-  },
-  button: {
-    '& :hover, & :focus, & :active': {
-      backgroundColor: 'unset !important',
-      color: 'white',
-    },
-    backgroundColor: 'unset !important',
-    borderRadius: '50%',
-    color: 'white',
-    margin: theme.spacing(2),
-    minHeight: 'auto',
-    minWidth: 'auto',
-    padding: theme.spacing(2),
-    position: 'absolute',
-  },
-  container: {
-    display: 'flex',
-    flexDirection: 'column',
-    gap: theme.spacing(2),
-    padding: theme.spacing(4),
-  },
-  description: {
-    lineHeight: 1.5,
-    marginBottom: theme.spacing(2),
-    marginTop: theme.spacing(2),
-  },
-  image: {
-    width: 50,
-  },
-  link: {
-    fontSize: '0.875rem',
-    lineHeight: '24px',
-    wordBreak: 'break-word',
-  },
-  logoContainer: {
-    gap: theme.spacing(),
-    height: 225,
-    padding: theme.spacing(2),
-  },
-  paper: {
-    [theme.breakpoints.up('sm')]: {
-      width: 480,
-    },
-  },
-  wrapAppName: {
-    maxWidth: 'fit-content',
-    minWidth: 170,
-  },
-  wrapLogo: {
-    marginLeft: `-${theme.spacing(3)}`,
-  },
-}));
-
-interface Props {
-  onClose: () => void;
-  open: boolean;
-  stackScriptLabel: string;
-}
-
-export const AppDetailDrawer: React.FunctionComponent<Props> = (props) => {
-  const { onClose, open, stackScriptLabel } = props;
-  const { classes } = useStyles();
-  const { oneClickAppsDocsOverride } = useFlags();
-
-  const [selectedApp, setSelectedApp] = React.useState<OCA | null>(null);
-
-  const gradient = {
-    backgroundImage: `url(/assets/marketplace-background.png),linear-gradient(to right, #${selectedApp?.colors.start}, #${selectedApp?.colors.end})`,
-  };
-
-  React.useEffect(() => {
-    const app = mapStackScriptLabelToOCA({
-      oneClickApps,
-      stackScriptLabel,
-    });
-
-    if (!app) {
-      return;
-    }
-
-    setSelectedApp(app);
-
-    return () => {
-      setSelectedApp(null);
-    };
-  }, [stackScriptLabel]);
-
-  return (
-    <Drawer
-      anchor="right"
-      classes={{ paper: classes.paper }}
-      data-qa-drawer
-      data-testid="drawer"
-      disablePortal
-      onClose={onClose}
-      open={open}
-    >
-      <Box display="flex" justifyContent="flex-end">
-        <Button
-          aria-label="Close drawer"
-          className={classes.button}
-          data-qa-close-drawer
-          onClick={onClose}
-        >
-          <Close />
-        </Button>
-      </Box>
-      {selectedApp ? (
-        <>
-          <Box
-            alignItems="center"
-            className={classes.logoContainer}
-            display="flex"
-            flexWrap="wrap"
-            justifyContent="center"
-            style={gradient}
-          >
-            <img
-              src={`/assets/white/${
-                REUSE_WHITE_ICONS[
-                  selectedApp?.logo_url as keyof typeof REUSE_WHITE_ICONS
-                ] || selectedApp?.logo_url
-              }`}
-              alt={`${selectedApp.name} logo`}
-              className={classes.image}
-            />
-            <Typography
-              dangerouslySetInnerHTML={{
-                __html: sanitizeHTML({
-                  sanitizingTier: 'flexible',
-                  text: selectedApp.name,
-                }),
-              }}
-              className={classes.appName}
-              data-qa-drawer-title={stackScriptLabel.trim()}
-              data-testid="app-name"
-              variant="h2"
-            />
-          </Box>
-          <Box className={classes.container}>
-            <Box>
-              <Typography variant="h3">{selectedApp.summary}</Typography>
-              <Typography
-                dangerouslySetInnerHTML={{
-                  __html: sanitizeHTML({
-                    sanitizingTier: 'flexible',
-                    text: selectedApp.description,
-                  }),
-                }}
-                className={classes.description}
-                variant="body1"
-              />
-            </Box>
-            {selectedApp.website ? (
-              <Box>
-                <Typography variant="h3">Website</Typography>
-                <Link
-                  className={classes.link}
-                  external
-                  to={selectedApp.website}
-                >
-                  {selectedApp.website}
-                </Link>
-              </Box>
-            ) : null}
-            {selectedApp.related_guides ? (
-              <Box>
-                <Typography variant="h3">Guides</Typography>
-                <Box display="flex" flexDirection="column" style={{ gap: 6 }}>
-                  {(
-                    oneClickAppsDocsOverride?.[selectedApp.name] ??
-                    selectedApp.related_guides
-                  ).map((link, idx) => (
-                    <Link
-                      className={classes.link}
-                      key={`${selectedApp.name}-guide-${idx}`}
-                      to={link.href}
-                    >
-                      {sanitizeHTML({
-                        sanitizingTier: 'flexible',
-                        text: link.title,
-                      })}
-                    </Link>
-                  ))}
-                </Box>
-              </Box>
-            ) : null}
-            {selectedApp.tips ? (
-              <Box>
-                <Typography variant="h3">Tips</Typography>
-                <Box display="flex" flexDirection="column" style={{ gap: 6 }}>
-                  {selectedApp.tips.map((tip, idx) => (
-                    <Typography
-                      key={`${selectedApp.name}-tip-${idx}`}
-                      variant="body1"
-                    >
-                      {tip}
-                    </Typography>
-                  ))}
-                </Box>
-              </Box>
-            ) : null}
-          </Box>
-        </>
-      ) : (
-        <Box
-          alignItems="center"
-          display="flex"
-          flexDirection="column"
-          justifyContent="center"
-          style={{ gap: 10, height: '100%' }}
-        >
-          <Typography variant="h2">App Details Not Found</Typography>
-          <Typography>
-            We were unable to load the details of this app.
-          </Typography>
-          <Button buttonType="primary" onClick={onClose}>
-            Exit
-          </Button>
-        </Box>
-      )}
-    </Drawer>
-  );
-};
-
-// remove this when we make the svgs white via css
-const REUSE_WHITE_ICONS = {
-  'mongodbmarketplaceocc.svg': 'mongodb.svg',
-  'postgresqlmarketplaceocc.svg': 'postgresql.svg',
-  'redissentinelmarketplaceocc.svg': 'redis.svg',
-};
-
-export default AppDetailDrawer;
diff --git a/packages/manager/src/features/OneClickApps/index.tsx b/packages/manager/src/features/OneClickApps/index.tsx
deleted file mode 100644
index d910f9ab161..00000000000
--- a/packages/manager/src/features/OneClickApps/index.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export { default as AppDetailDrawer } from './AppDetailDrawer';
diff --git a/packages/manager/src/features/OneClickApps/oneClickAppsv2.ts b/packages/manager/src/features/OneClickApps/oneClickAppsv2.ts
index dd4e8fba445..61094ec2475 100644
--- a/packages/manager/src/features/OneClickApps/oneClickAppsv2.ts
+++ b/packages/manager/src/features/OneClickApps/oneClickAppsv2.ts
@@ -1,5 +1,3 @@
-import { oneClickAppFactory } from 'src/factories/stackscripts';
-
 import type { OCA } from './types';
 
 /**
@@ -9,10 +7,6 @@ import type { OCA } from './types';
  * for it to be visible to users.
  */
 export const oneClickApps: Record<number, OCA> = {
-  0: oneClickAppFactory.build({
-    isNew: true,
-    name: 'E2E Test App',
-  }),
   401697: {
     alt_description: 'Popular website content management system.',
     alt_name: 'CMS: content management system',
diff --git a/packages/manager/src/features/OneClickApps/utils.test.ts b/packages/manager/src/features/OneClickApps/utils.test.ts
deleted file mode 100644
index 1f9809436f6..00000000000
--- a/packages/manager/src/features/OneClickApps/utils.test.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import { oneClickAppFactory } from 'src/factories/stackscripts';
-
-import { mapStackScriptLabelToOCA } from './utils';
-
-describe('mapStackScriptLabelToOneClickAppName', () => {
-  const onClickApp = oneClickAppFactory.build();
-
-  it('should return undefined if no match is found', () => {
-    const result = mapStackScriptLabelToOCA({
-      oneClickApps: [],
-      stackScriptLabel: '',
-    });
-
-    expect(result).toBeUndefined();
-  });
-
-  it('should return the matching app', () => {
-    const result = mapStackScriptLabelToOCA({
-      oneClickApps: [onClickApp],
-      stackScriptLabel: 'Test App',
-    });
-
-    expect(result).toBeDefined();
-  });
-
-  it('should return the matching app when the StackScript label contains unexpected characters', () => {
-    const onClickAppWithUnexpectedCharacters = oneClickAppFactory.build({
-      name: 'Test @App &reg;',
-    });
-
-    const result = mapStackScriptLabelToOCA({
-      oneClickApps: [onClickAppWithUnexpectedCharacters],
-      stackScriptLabel: 'Test App',
-    });
-
-    expect(result).toBeDefined();
-  });
-});
diff --git a/packages/manager/src/features/OneClickApps/utils.ts b/packages/manager/src/features/OneClickApps/utils.ts
deleted file mode 100644
index 302ad6cd953..00000000000
--- a/packages/manager/src/features/OneClickApps/utils.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import type { OCA } from './types';
-
-const OCA_MAPPING_REGEX = /[^A-Za-z0-9\s\/$*+\-?&.:()]/g;
-
-interface Options {
-  oneClickApps: OCA[];
-  stackScriptLabel: string;
-}
-
-/**
- * Given a StackScript label, return the corresponding One-Click App name
- * @param oneClickApps
- * @param stackScriptLabel
- * @returns {string}
- */
-export const mapStackScriptLabelToOCA = ({
-  oneClickApps,
-  stackScriptLabel,
-}: Options): OCA | undefined => {
-  return oneClickApps.find((app) => {
-    const cleanedStackScriptLabel = stackScriptLabel
-      .replace(OCA_MAPPING_REGEX, '')
-      .trim();
-
-    const cleanedAppName = app.name
-      .replace('&reg;', '')
-      .replace(OCA_MAPPING_REGEX, '')
-      .trim();
-
-    return cleanedStackScriptLabel === cleanedAppName;
-  });
-};
diff --git a/packages/manager/src/features/VPCs/VPCDetail/SubnetAssignLinodesDrawer.tsx b/packages/manager/src/features/VPCs/VPCDetail/SubnetAssignLinodesDrawer.tsx
index 48e962c9a24..8a532231cc0 100644
--- a/packages/manager/src/features/VPCs/VPCDetail/SubnetAssignLinodesDrawer.tsx
+++ b/packages/manager/src/features/VPCs/VPCDetail/SubnetAssignLinodesDrawer.tsx
@@ -17,7 +17,6 @@ import { RemovableSelectionsListTable } from 'src/components/RemovableSelections
 import { TextField } from 'src/components/TextField';
 import { TooltipIcon } from 'src/components/TooltipIcon';
 import { Typography } from 'src/components/Typography';
-import { defaultPublicInterface } from 'src/features/Linodes/LinodesCreate/LinodeCreate';
 import { LinodeSelect } from 'src/features/Linodes/LinodeSelect/LinodeSelect';
 import {
   VPC_AUTO_ASSIGN_IPV4_TOOLTIP,
@@ -580,3 +579,9 @@ export const SubnetAssignLinodesDrawer = (
     </Drawer>
   );
 };
+
+const defaultPublicInterface: InterfacePayload = {
+  ipam_address: '',
+  label: '',
+  purpose: 'public',
+};
diff --git a/packages/manager/src/store/index.ts b/packages/manager/src/store/index.ts
index 2728fe0b015..12607a8526b 100644
--- a/packages/manager/src/store/index.ts
+++ b/packages/manager/src/store/index.ts
@@ -8,10 +8,6 @@ import globalErrors, {
   State as GlobalErrorState,
   defaultState as defaultGlobalErrorState,
 } from 'src/store/globalErrors';
-import linodeCreateReducer, {
-  State as LinodeCreateState,
-  defaultState as linodeCreateDefaultState,
-} from 'src/store/linodeCreate/linodeCreate.reducer';
 import longview, {
   State as LongviewState,
   defaultState as defaultLongviewState,
@@ -37,7 +33,6 @@ import thunk from 'redux-thunk';
 
 export interface ApplicationState {
   authentication: AuthState;
-  createLinode: LinodeCreateState;
   globalErrors: GlobalErrorState;
   longviewClients: LongviewState;
   longviewStats: LongviewStatsState;
@@ -48,7 +43,6 @@ export interface ApplicationState {
 
 export const defaultState: ApplicationState = {
   authentication: authenticationDefaultState,
-  createLinode: linodeCreateDefaultState,
   globalErrors: defaultGlobalErrorState,
   longviewClients: defaultLongviewState,
   longviewStats: defaultLongviewStatsState,
@@ -62,7 +56,6 @@ export const defaultState: ApplicationState = {
  */
 const reducers = combineReducers<ApplicationState>({
   authentication,
-  createLinode: linodeCreateReducer,
   globalErrors,
   longviewClients: longview,
   longviewStats,
diff --git a/packages/manager/src/store/linodeCreate/linodeCreate.actions.ts b/packages/manager/src/store/linodeCreate/linodeCreate.actions.ts
deleted file mode 100644
index 2a5400a88d2..00000000000
--- a/packages/manager/src/store/linodeCreate/linodeCreate.actions.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import actionCreatorFactory from 'typescript-fsa';
-
-const actionBase = actionCreatorFactory('@@manager/create-linode');
-
-export type CreateTypes =
-  | 'fromApp'
-  | 'fromBackup'
-  | 'fromImage'
-  | 'fromLinode'
-  | 'fromStackScript';
-
-export const handleChangeCreateType = actionBase<CreateTypes>('change-type');
diff --git a/packages/manager/src/store/linodeCreate/linodeCreate.reducer.ts b/packages/manager/src/store/linodeCreate/linodeCreate.reducer.ts
deleted file mode 100644
index df88168ede7..00000000000
--- a/packages/manager/src/store/linodeCreate/linodeCreate.reducer.ts
+++ /dev/null
@@ -1,75 +0,0 @@
-import { Reducer } from 'redux';
-import { reducerWithInitialState } from 'typescript-fsa-reducers';
-
-import { CreateTypes, handleChangeCreateType } from './linodeCreate.actions';
-
-export interface State {
-  type: CreateTypes;
-}
-
-export const getInitialType = (): CreateTypes => {
-  const queryParams = new URLSearchParams(location.search.toLowerCase());
-
-  if (queryParams.has('type')) {
-    if (queryParams.has('subtype')) {
-      // Lowercase the subtype to make comparisons
-      const normalizedSubtype = queryParams.get('subtype')?.toLowerCase();
-
-      /**
-       * we have a subtype in the query string so now we need to deduce what
-       * endpoint we should be POSTing to based on what is in the query params
-       */
-      if (
-        normalizedSubtype?.includes('community') ||
-        normalizedSubtype?.includes('account')
-      ) {
-        return 'fromStackScript';
-      } else if (normalizedSubtype?.includes('clone')) {
-        return 'fromLinode';
-      } else if (normalizedSubtype?.includes('backup')) {
-        return 'fromBackup';
-      } else {
-        return 'fromApp';
-      }
-    } else {
-      // Lowercase the type to make comparisons
-      const normalizedType = queryParams.get('type')?.toLowerCase();
-
-      /**
-       * here we know we don't have a subtype in the query string
-       * but we do have a type (AKA a parent tab is selected). In this case,
-       * we can assume the first child tab is selected within the parent tabs
-       * This is needed to determine the createType for conditional logic in the UI.
-       */
-      if (normalizedType?.includes('one-click')) {
-        return 'fromApp';
-      } else if (normalizedType?.includes('clone')) {
-        return 'fromLinode';
-      } else if (normalizedType?.includes('backup')) {
-        return 'fromBackup';
-      } else {
-        return 'fromImage';
-      }
-    }
-  }
-
-  /** always backup to 'fromImage' */
-  return 'fromImage';
-};
-
-export const defaultState: State = {
-  type: getInitialType(),
-};
-
-const reducer: Reducer<State> = reducerWithInitialState(
-  defaultState
-).caseWithAction(handleChangeCreateType, (state, action) => {
-  const { payload } = action;
-
-  return {
-    ...state,
-    type: payload,
-  };
-});
-
-export default reducer;
diff --git a/packages/manager/src/utilities/calculateCostFromUnitPrice.test.ts b/packages/manager/src/utilities/calculateCostFromUnitPrice.test.ts
deleted file mode 100644
index a17e1d5b010..00000000000
--- a/packages/manager/src/utilities/calculateCostFromUnitPrice.test.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import calculateCostFromUnitPrice from './calculateCostFromUnitPrice';
-
-describe('unitPriceCalculator', () => {
-  it('should return a string of $0.00 if given a negative number for the unit price', () => {
-    expect(calculateCostFromUnitPrice(-1, 200)).toBe('$0.00');
-  });
-
-  it('should return a string of $0.00 if given a negative number for the quantity', () => {
-    expect(calculateCostFromUnitPrice(1, -200)).toBe('$0.00');
-  });
-
-  it('should return a string starting with a $ sign', () => {
-    const result = calculateCostFromUnitPrice(1, 1);
-    const firstCharacter = result.charAt(0);
-    expect(firstCharacter).toBe('$');
-  });
-
-  it('should properly calculate the total price for the given quantity', () => {
-    expect(calculateCostFromUnitPrice(2.5, 10.5)).toBe('$26.25');
-  });
-});
diff --git a/packages/manager/src/utilities/calculateCostFromUnitPrice.ts b/packages/manager/src/utilities/calculateCostFromUnitPrice.ts
deleted file mode 100644
index 8561c0df304..00000000000
--- a/packages/manager/src/utilities/calculateCostFromUnitPrice.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-/**
- * Returns a string representation of total cost of a quantity at a given unit price.
- *
- * @param unitPrice - The cost per unit in dollars
- * @param sourceQuantity - The number of units to calculate the total cost for
- */
-
-export default function calculateCostFromUnitPrice(
-  unitPrice: number,
-  quantity: number
-) {
-  return `$${Math.max(unitPrice * quantity, 0).toFixed(2)}`;
-}
diff --git a/packages/manager/src/utilities/compact.test.ts b/packages/manager/src/utilities/compact.test.ts
deleted file mode 100644
index b5c04b2e6db..00000000000
--- a/packages/manager/src/utilities/compact.test.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { compact } from './compact';
-
-describe('compact', () => {
-  it('should remove all falsy values', () => {
-    const result = compact([
-      -0,
-      0,
-      1,
-      false,
-      2,
-      '',
-      3,
-      null,
-      undefined,
-      4,
-      NaN,
-      5,
-    ]);
-    expect(result).toEqual([1, 2, 3, 4, 5]);
-  });
-});
diff --git a/packages/manager/src/utilities/compact.ts b/packages/manager/src/utilities/compact.ts
deleted file mode 100644
index 1bec69859c5..00000000000
--- a/packages/manager/src/utilities/compact.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-/**
- * Removes all falsy values from an array.
- *
- * @param array
- * @returns Array without falsy values
- */
-export const compact = <T>(array: T[]): T[] => array.filter(Boolean);
diff --git a/packages/manager/src/utilities/filterImagesByDeprecationStatus.ts b/packages/manager/src/utilities/filterImagesByDeprecationStatus.ts
deleted file mode 100644
index d6b8c0784da..00000000000
--- a/packages/manager/src/utilities/filterImagesByDeprecationStatus.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { Image } from '@linode/api-v4/lib/images';
-
-/*
- * Gets images by two types: deprecated and non-deprecated
- */
-const getImagesByDeprecationStatus = (images: Image[], deprecated: boolean) => {
-  return images.filter((image) => image.deprecated === deprecated);
-};
-
-export default getImagesByDeprecationStatus;
diff --git a/packages/manager/src/utilities/safeGetTabRender.test.tsx b/packages/manager/src/utilities/safeGetTabRender.test.tsx
deleted file mode 100644
index 60d138fde29..00000000000
--- a/packages/manager/src/utilities/safeGetTabRender.test.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import { Tab, safeGetTabRender } from './safeGetTabRender';
-
-vi.mock('src/exceptionReporting');
-
-const mockFn = vi.fn();
-
-const mockTabs: Tab[] = [
-  {
-    render: mockFn,
-    title: 'Example Tab',
-  },
-  {
-    render: mockFn,
-    title: 'Example Tab 2',
-  },
-];
-
-describe('getSafeTabRender', () => {
-  it('should return the default render method if there is one', () => {
-    expect(safeGetTabRender(mockTabs, 0)).toEqual(mockFn);
-  });
-
-  it('should return a default render method if the tab does not exist', () => {
-    const render = safeGetTabRender(mockTabs, 3);
-    expect(render().props).toHaveProperty(
-      'errorText',
-      'An unexpected error occurred.'
-    );
-  });
-});
diff --git a/packages/manager/src/utilities/safeGetTabRender.tsx b/packages/manager/src/utilities/safeGetTabRender.tsx
deleted file mode 100644
index 4481c426e00..00000000000
--- a/packages/manager/src/utilities/safeGetTabRender.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import { pathOr } from 'ramda';
-import * as React from 'react';
-
-import { ErrorState } from 'src/components/ErrorState/ErrorState';
-import { reportException } from 'src/exceptionReporting';
-import { CreateTypes } from 'src/store/linodeCreate/linodeCreate.actions';
-
-export interface Tab {
-  render: any;
-  title: JSX.Element | string;
-  type?: CreateTypes;
-}
-
-export const safeGetTabRender = (tabs: Tab[], selectedTab: number) => {
-  const abortAndLogError = () => {
-    /**
-     * a failure usually means we tried to render an undefined tab,
-     * which would crash the app if we didn't catch it. Report the
-     * error and return a default error render() function.
-     */
-
-    reportException('Attempted to render undefined tab.', {
-      Location: window.location.search,
-      'Selected tab': selectedTab,
-    });
-    return <ErrorState errorText={'An unexpected error occurred.'} />;
-  };
-
-  return pathOr(abortAndLogError, [selectedTab, 'render'], tabs);
-};
diff --git a/packages/manager/src/utilities/updateRight.ts b/packages/manager/src/utilities/updateRight.ts
deleted file mode 100644
index 98ddc976e5e..00000000000
--- a/packages/manager/src/utilities/updateRight.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-/**
- * Allows for creation of state (right) while having the immutable context of the previous state (left).
- * These functions are generally used to create pipelines of updates where the context of the
- * original value/state is required for making decisions throughout the pipeline.
- *
- * @example
- *  updateRight((a, b) => a + b, [1, 2]) //-> [1, 3]
- *  updateRight((a, b) => a + b, [1, 3]) //-> [1, 4]
- *  updateRight((a, b) => a + b, [1, 4]) //-> [1, 5]
- *
- * Note how the right is updated with the value of fn(left, right), but the left is untouched.
- */
-export const updateRight = <Left = any, Right = any>(
-  fn: (l: Left, r: Right) => Right
-) => (arr: [Left, Right]) => [arr[0], fn(arr[0], arr[1])];
diff --git a/yarn.lock b/yarn.lock
index 500b2eb2530..7d320858704 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2984,25 +2984,6 @@
   resolved "https://registry.yarnpkg.com/@types/linkify-it/-/linkify-it-3.0.5.tgz#1e78a3ac2428e6d7e6c05c1665c242023a4601d8"
   integrity sha512-yg6E+u0/+Zjva+buc3EIb+29XEg4wltq7cSmd4Uc2EE/1nUVmxyzpX6gUXD0V8jIrG0r7YeOGVIbYRkxeooCtw==
 
-"@types/lodash.clonedeep@^4.5.9":
-  version "4.5.9"
-  resolved "https://registry.yarnpkg.com/@types/lodash.clonedeep/-/lodash.clonedeep-4.5.9.tgz#ea48276c7cc18d080e00bb56cf965bcceb3f0fc1"
-  integrity sha512-19429mWC+FyaAhOLzsS8kZUsI+/GmBAQ0HFiCPsKGU+7pBXOQWhyrY6xNNDwUSX8SMZMJvuFVMF9O5dQOlQK9Q==
-  dependencies:
-    "@types/lodash" "*"
-
-"@types/lodash.curry@^4.1.9":
-  version "4.1.9"
-  resolved "https://registry.yarnpkg.com/@types/lodash.curry/-/lodash.curry-4.1.9.tgz#b9a0f5032747309c3cbe78e1acffc1599fb78d94"
-  integrity sha512-QV967vSflHEza0d0IMTK7fwbl+baPBXZjcESeAHrA5eSE+EHetaggZjPpkzX1NJh4qa8DLOLScwUR+f7FN85Zg==
-  dependencies:
-    "@types/lodash" "*"
-
-"@types/lodash@*":
-  version "4.17.0"
-  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.17.0.tgz#d774355e41f372d5350a4d0714abb48194a489c3"
-  integrity sha512-t7dhREVv6dbNj0q17X12j7yDG4bD/DHYX7o5/DbDxobP0HnGPgpRz2Ej77aL7TZT3DSw13fqUTj8J4mMnqa7WA==
-
 "@types/lodash@^4.14.167", "@types/lodash@^4.14.175":
   version "4.14.202"
   resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.202.tgz#f09dbd2fb082d507178b2f2a5c7e74bd72ff98f8"
@@ -7955,16 +7936,6 @@ lodash.camelcase@^4.3.0:
   resolved "https://registry.yarnpkg.com/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz#b28aa6288a2b9fc651035c7711f65ab6190331a6"
   integrity sha512-TwuEnCnxbc3rAvhf/LbG7tJUDzhqXyFnv3dtzLOPgCG/hODL7WFnsbwktkD7yUV0RrreP/l1PALq/YSg6VvjlA==
 
-lodash.clonedeep@^4.5.0:
-  version "4.5.0"
-  resolved "https://registry.yarnpkg.com/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz#e23f3f9c4f8fbdde872529c1071857a086e5ccef"
-  integrity sha512-H5ZhCF25riFd9uB5UCkVKo61m3S/xZk1x4wA6yp/L3RFP6Z/eHH1ymQcGLo7J3GMPfm0V/7m1tryHuGVxpqEBQ==
-
-lodash.curry@^4.1.1:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/lodash.curry/-/lodash.curry-4.1.1.tgz#248e36072ede906501d75966200a86dab8b23170"
-  integrity sha512-/u14pXGviLaweY5JI0IUzgzF2J6Ne8INyzAZjImcryjgkZ+ebruBxy2/JaOOkTqScddcYtakjhSaeemV8lR0tA==
-
 lodash.get@^4.3.0:
   version "4.4.2"
   resolved "https://registry.yarnpkg.com/lodash.get/-/lodash.get-4.4.2.tgz#2d177f652fa31e939b4438d5341499dfa3825e99"

From 02058c688f2f0f368574c0b32ad7aa6e00ecd9fb Mon Sep 17 00:00:00 2001
From: Hussain Khalil <122488130+hkhalil-akamai@users.noreply.github.com>
Date: Wed, 25 Sep 2024 13:35:23 -0400
Subject: [PATCH 58/62] fix: [M3-8661] - Fix crash in Volume Create page caused
 by misconfigured Autocomplete (#11001)

* Fix ConfigSelect uncontrolled Autocomplete warning

* Added changeset: Crash when switching between Linodes in Volume Create page

* Remove changeset
---
 .../src/features/Volumes/VolumeDrawer/ConfigSelect.tsx | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/packages/manager/src/features/Volumes/VolumeDrawer/ConfigSelect.tsx b/packages/manager/src/features/Volumes/VolumeDrawer/ConfigSelect.tsx
index 3e7ec93a784..8f41357c8b4 100644
--- a/packages/manager/src/features/Volumes/VolumeDrawer/ConfigSelect.tsx
+++ b/packages/manager/src/features/Volumes/VolumeDrawer/ConfigSelect.tsx
@@ -10,7 +10,7 @@ interface Props {
   linodeId: null | number;
   name: string;
   onBlur: (e: any) => void;
-  onChange: (value: number) => void;
+  onChange: (value: number | undefined) => void;
   value: null | number;
   width?: number;
 }
@@ -63,14 +63,12 @@ export const ConfigSelect = React.memo((props: Props) => {
             : 'No options.'
         }
         onChange={(_, selected) => {
-          onChange(+selected.value);
+          onChange(selected !== null ? +selected?.value : undefined);
         }}
         value={
-          value && value !== -1
-            ? configList?.find((thisConfig) => thisConfig.value === value)
-            : { label: '', value: -1 }
+          configList?.find((thisConfig) => thisConfig.value === value) ?? null
         }
-        disableClearable
+        clearIcon={null}
         id={name}
         isOptionEqualToValue={(option, value) => option.value === value.value}
         label="Config"

From bc48d764098caab9a4d0eb8ba68c51d295828795 Mon Sep 17 00:00:00 2001
From: mpolotsk-akamai <157619599+mpolotsk-akamai@users.noreply.github.com>
Date: Wed, 25 Sep 2024 19:51:18 +0200
Subject: [PATCH 59/62] fix: [UIE-8152] - DBaaS V2 Resize: disable Shared plans
 tab  (#10995)

* unit test coverage for HostNameTableCell

* Revert "unit test coverage for HostNameTableCell"

This reverts commit b274baf67e27d79fd4e764607ded7c5aa755ee8b.

* fix: [UIE-8152] - DBaaS V2 Resize: disable shared plans tab for 2-nodes cluster

* Added changeset: Enabled Shared CPU tab for 2-nodes Database Cluster Resize

---------

Co-authored-by: cpathipa <119517080+cpathipa@users.noreply.github.com>
---
 .../.changeset/pr-10995-fixed-1727190775726.md    |  5 +++++
 .../DatabaseResize/DatabaseResize.test.tsx        | 15 +++++++++++++++
 .../DatabaseResize/DatabaseResize.tsx             |  4 ++++
 3 files changed, 24 insertions(+)
 create mode 100644 packages/manager/.changeset/pr-10995-fixed-1727190775726.md

diff --git a/packages/manager/.changeset/pr-10995-fixed-1727190775726.md b/packages/manager/.changeset/pr-10995-fixed-1727190775726.md
new file mode 100644
index 00000000000..e253937a46c
--- /dev/null
+++ b/packages/manager/.changeset/pr-10995-fixed-1727190775726.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Fixed
+---
+
+Enabled Shared CPU tab for 2-nodes Database Cluster Resize ([#10995](https://github.com/linode/manager/pull/10995))
diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseResize/DatabaseResize.test.tsx b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseResize/DatabaseResize.test.tsx
index 46841b41615..0362763350c 100644
--- a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseResize/DatabaseResize.test.tsx
+++ b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseResize/DatabaseResize.test.tsx
@@ -177,4 +177,19 @@ describe('database resize', () => {
       );
     });
   });
+
+  describe('should disable Shared Plans Tab for 2 nodes cluster', () => {
+    const database = databaseFactory.build({
+      cluster_size: 2,
+      type: 'g6-dedicated-8',
+    });
+    it('should disable Shared Plans Tab', async () => {
+      const { getByTestId, getByText } = renderWithTheme(
+        <DatabaseResize database={database} />
+      );
+      expect(getByTestId(loadingTestId)).toBeInTheDocument();
+      await waitForElementToBeRemoved(getByTestId(loadingTestId));
+      expect(getByText('Shared CPU')).toHaveAttribute('aria-disabled', 'true');
+    });
+  });
 });
diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseResize/DatabaseResize.tsx b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseResize/DatabaseResize.tsx
index 8441c8319f1..e8677225454 100644
--- a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseResize/DatabaseResize.tsx
+++ b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseResize/DatabaseResize.tsx
@@ -211,6 +211,8 @@ export const DatabaseResize = ({ database, disabled = false }: Props) => {
       : type.disk <= currentPlanDisk
   );
 
+  const isDisabledSharedTab = database.cluster_size === 2;
+
   if (typesLoading) {
     return <CircleProgress />;
   }
@@ -232,9 +234,11 @@ export const DatabaseResize = ({ database, disabled = false }: Props) => {
           data-qa-select-plan
           disabled={disabled}
           disabledSmallerPlans={disabledPlans}
+          disabledTabs={isDisabledSharedTab ? ['shared'] : []}
           header="Choose a Plan"
           onSelect={(selected: string) => setPlanSelected(selected)}
           selectedId={planSelected}
+          tabDisabledMessage="Resizing a 2-nodes cluster is only allowed with Dedicated plans."
           types={displayTypes}
         />
       </Paper>

From a6bd924a95c13ac0e46cdea2216ccf1c01d79362 Mon Sep 17 00:00:00 2001
From: Alban Bailly <130582365+abailly-akamai@users.noreply.github.com>
Date: Wed, 25 Sep 2024 14:44:37 -0400
Subject: [PATCH 60/62] feat: [M3-8581] - GPUv2 Plan Selection Egress Banner
 (#10956)

* initial commit: new banner and flag value

* Copy update

* Update link

* Added changeset: GPUv2 Plan Selection Egress Banner

* feedback @bnussman-akamai

* fix plan selection test
---
 .../pr-10956-added-1727103260742.md           |  5 +++
 .../e2e/core/linodes/plan-selection.spec.ts   |  2 +-
 packages/manager/src/featureFlags.ts          |  1 +
 .../components/PlansPanel/PlanInformation.tsx | 45 ++++++++++++++-----
 4 files changed, 41 insertions(+), 12 deletions(-)
 create mode 100644 packages/manager/.changeset/pr-10956-added-1727103260742.md

diff --git a/packages/manager/.changeset/pr-10956-added-1727103260742.md b/packages/manager/.changeset/pr-10956-added-1727103260742.md
new file mode 100644
index 00000000000..511c979c325
--- /dev/null
+++ b/packages/manager/.changeset/pr-10956-added-1727103260742.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Added
+---
+
+GPUv2 Plan Selection Egress Banner ([#10956](https://github.com/linode/manager/pull/10956))
diff --git a/packages/manager/cypress/e2e/core/linodes/plan-selection.spec.ts b/packages/manager/cypress/e2e/core/linodes/plan-selection.spec.ts
index 82b97eb7d63..848732eb462 100644
--- a/packages/manager/cypress/e2e/core/linodes/plan-selection.spec.ts
+++ b/packages/manager/cypress/e2e/core/linodes/plan-selection.spec.ts
@@ -368,7 +368,7 @@ describe('displays specific linode plans for GPU', () => {
     // Should display two separate tables
     cy.findByText('GPU').click();
     cy.get(linodePlansPanel).within(() => {
-      cy.findAllByRole('alert').should('have.length', 1);
+      cy.findAllByRole('alert').should('have.length', 2);
       cy.get(notices.unavailable).should('be.visible');
 
       cy.findByRole('table', {
diff --git a/packages/manager/src/featureFlags.ts b/packages/manager/src/featureFlags.ts
index 57cc999ce71..35917a087a6 100644
--- a/packages/manager/src/featureFlags.ts
+++ b/packages/manager/src/featureFlags.ts
@@ -70,6 +70,7 @@ export interface CloudPulseResourceTypeMapFlag {
 }
 
 interface gpuV2 {
+  egressBanner: boolean;
   planDivider: boolean;
 }
 
diff --git a/packages/manager/src/features/components/PlansPanel/PlanInformation.tsx b/packages/manager/src/features/components/PlansPanel/PlanInformation.tsx
index 02b819e3b90..e631e7a9e25 100644
--- a/packages/manager/src/features/components/PlansPanel/PlanInformation.tsx
+++ b/packages/manager/src/features/components/PlansPanel/PlanInformation.tsx
@@ -1,11 +1,10 @@
-import { LinodeTypeClass } from '@linode/api-v4/lib/linodes';
-import { Theme, useTheme } from '@mui/material/styles';
 import * as React from 'react';
 
 import { Link } from 'src/components/Link';
 import { Notice } from 'src/components/Notice/Notice';
 import { Typography } from 'src/components/Typography';
 import { StyledNoticeTypography } from 'src/features/Linodes/LinodesCreate/PlansAvailabilityNotice.styles';
+import { useFlags } from 'src/hooks/useFlags';
 
 import { PlansAvailabilityNotice } from '../../Linodes/LinodesCreate/PlansAvailabilityNotice';
 import {
@@ -19,6 +18,8 @@ import { MetalNotice } from './MetalNotice';
 import { planTabInfoContent } from './utils';
 
 import type { Region } from '@linode/api-v4';
+import type { LinodeTypeClass } from '@linode/api-v4/lib/linodes';
+import type { Theme } from '@mui/material/styles';
 
 export interface PlanInformationProps {
   disabledClasses?: LinodeTypeClass[];
@@ -40,20 +41,40 @@ export const PlanInformation = (props: PlanInformationProps) => {
     planType,
     regionsData,
   } = props;
-
   const getDisabledClass = (thisClass: LinodeTypeClass) => {
     return Boolean(disabledClasses?.includes(thisClass));
   };
+  const showGPUEgressBanner = Boolean(useFlags().gpuv2?.egressBanner);
 
   return (
     <>
       {planType === 'gpu' ? (
-        <PlansAvailabilityNotice
-          hasSelectedRegion={hasSelectedRegion}
-          isSelectedRegionEligibleForPlan={isSelectedRegionEligibleForPlan}
-          planType={planType}
-          regionsData={regionsData || []}
-        />
+        <>
+          {showGPUEgressBanner && (
+            <Notice spacingBottom={8} variant="info">
+              <Typography
+                fontFamily={(theme: Theme) => theme.font.bold}
+                fontSize="1rem"
+              >
+                New GPU instances are now generally available. Deploy an RTX
+                4000 Ada GPU instance in select core compute regions in North
+                America, Europe, and Asia. <br />
+                Receive 1 TB of free included network transfer for a limited
+                time.{' '}
+                <Link to="https://www.linode.com/blog/compute/new-gpus-nvidia-rtx-4000-ada-generation">
+                  Learn more
+                </Link>
+                .
+              </Typography>
+            </Notice>
+          )}
+          <PlansAvailabilityNotice
+            hasSelectedRegion={hasSelectedRegion}
+            isSelectedRegionEligibleForPlan={isSelectedRegionEligibleForPlan}
+            planType={planType}
+            regionsData={regionsData || []}
+          />
+        </>
       ) : null}
       {planType === 'metal' ? (
         <MetalNotice
@@ -101,7 +122,6 @@ interface ClassDescriptionCopyProps {
 
 export const ClassDescriptionCopy = (props: ClassDescriptionCopyProps) => {
   const { planType } = props;
-  const theme = useTheme();
   let planTypeLabel: null | string;
   let docLink: null | string;
 
@@ -133,7 +153,10 @@ export const ClassDescriptionCopy = (props: ClassDescriptionCopyProps) => {
 
   return planTypeLabel && docLink ? (
     <Typography
-      sx={{ marginBottom: theme.spacing(3), marginTop: theme.spacing(1) }}
+      sx={(theme: Theme) => ({
+        marginBottom: theme.spacing(3),
+        marginTop: theme.spacing(1),
+      })}
     >
       {
         planTabInfoContent[planType as keyof typeof planTabInfoContent]

From 75e00f1412546b6df2136a1d3514c4fb80c98eae Mon Sep 17 00:00:00 2001
From: Connie Liu <coliu@akamai.com>
Date: Wed, 25 Sep 2024 15:45:15 -0400
Subject: [PATCH 61/62] Cloud version v1.129.0, API v4 version v0.127.0, and
 Validation version v0.53.0

---
 ...r-10939-upcoming-features-1726263534115.md |  5 --
 .../pr-10980-changed-1726868220865.md         |  5 --
 .../pr-10988-changed-1727197910740.md         |  5 --
 .../pr-10989-fixed-1727118907870.md           |  5 --
 packages/api-v4/CHANGELOG.md                  | 16 ++++
 packages/api-v4/package.json                  |  2 +-
 .../pr-10780-tech-stories-1724255560445.md    |  5 --
 ...r-10823-upcoming-features-1724867496417.md |  5 --
 .../pr-10858-changed-1725914163062.md         |  5 --
 ...r-10903-upcoming-features-1725857694589.md |  5 --
 .../pr-10906-added-1726196972242.md           |  5 --
 .../pr-10908-fixed-1726091771498.md           |  5 --
 .../pr-10915-tests-1725992312603.md           |  5 --
 .../pr-10916-tests-1726065357292.md           |  5 --
 .../pr-10917-tests-1726061618551.md           |  5 --
 .../pr-10922-fixed-1726078413547.md           |  5 --
 .../pr-10924-fixed-1726085139068.md           |  5 --
 .../pr-10927-fixed-1726139552414.md           |  5 --
 ...r-10929-upcoming-features-1726156754302.md |  5 --
 .../pr-10930-removed-1726159393499.md         |  5 --
 .../pr-10931-fixed-1726172174760.md           |  5 --
 .../pr-10934-tech-stories-1726237837582.md    |  5 --
 .../pr-10938-fixed-1726262803311.md           |  5 --
 ...r-10939-upcoming-features-1726263444178.md |  5 --
 .../pr-10940-changed-1726472458540.md         |  5 --
 .../pr-10942-added-1726774387695.md           |  5 --
 .../pr-10944-changed-1726505494539.md         |  5 --
 .../pr-10945-tests-1726507532580.md           |  5 --
 .../pr-10947-fixed-1726507951785.md           |  5 --
 .../pr-10948-fixed-1726517375013.md           |  5 --
 ...r-10951-upcoming-features-1726561825358.md |  5 --
 .../pr-10954-changed-1726591307327.md         |  5 --
 .../pr-10955-tech-stories-1726591613226.md    |  5 --
 .../pr-10956-added-1727103260742.md           |  5 --
 .../pr-10958-tech-stories-1726606812125.md    |  5 --
 .../pr-10959-changed-1726660002249.md         |  5 --
 .../pr-10960-tech-stories-1726671382649.md    |  5 --
 ...r-10961-upcoming-features-1726666902955.md |  5 --
 .../pr-10962-fixed-1726688754577.md           |  5 --
 .../pr-10963-changed-1726672295505.md         |  5 --
 .../pr-10965-fixed-1726675687897.md           |  5 --
 .../pr-10966-removed-1726765827523.md         |  5 --
 .../pr-10966-tests-1726678346834.md           |  5 --
 .../pr-10969-changed-1726849752351.md         |  5 --
 .../pr-10970-fixed-1726762187663.md           |  5 --
 ...r-10973-upcoming-features-1726768912614.md |  5 --
 .../pr-10976-tests-1726778238574.md           |  5 --
 .../pr-10980-fixed-1726845381695.md           |  5 --
 .../pr-10981-tests-1726863454562.md           |  5 --
 .../pr-10983-tests-1726865807776.md           |  5 --
 .../pr-10985-changed-1727105394355.md         |  5 --
 .../pr-10986-changed-1727108550951.md         |  5 --
 ...r-10987-upcoming-features-1727113889522.md |  5 --
 .../pr-10988-fixed-1727119069361.md           |  5 --
 .../pr-10989-fixed-1727118993352.md           |  5 --
 .../pr-10990-tech-stories-1727187564566.md    |  5 --
 .../pr-10993-fixed-1727189409908.md           |  5 --
 .../pr-10995-fixed-1727190775726.md           |  5 --
 .../pr-10998-fixed-1727195767338.md           |  5 --
 .../pr-10999-tests-1727196449912.md           |  5 --
 packages/manager/CHANGELOG.md                 | 77 +++++++++++++++++++
 packages/manager/package.json                 |  2 +-
 .../pr-10980-changed-1726868115893.md         |  5 --
 packages/validation/CHANGELOG.md              |  7 ++
 packages/validation/package.json              |  2 +-
 65 files changed, 103 insertions(+), 298 deletions(-)
 delete mode 100644 packages/api-v4/.changeset/pr-10939-upcoming-features-1726263534115.md
 delete mode 100644 packages/api-v4/.changeset/pr-10980-changed-1726868220865.md
 delete mode 100644 packages/api-v4/.changeset/pr-10988-changed-1727197910740.md
 delete mode 100644 packages/api-v4/.changeset/pr-10989-fixed-1727118907870.md
 delete mode 100644 packages/manager/.changeset/pr-10780-tech-stories-1724255560445.md
 delete mode 100644 packages/manager/.changeset/pr-10823-upcoming-features-1724867496417.md
 delete mode 100644 packages/manager/.changeset/pr-10858-changed-1725914163062.md
 delete mode 100644 packages/manager/.changeset/pr-10903-upcoming-features-1725857694589.md
 delete mode 100644 packages/manager/.changeset/pr-10906-added-1726196972242.md
 delete mode 100644 packages/manager/.changeset/pr-10908-fixed-1726091771498.md
 delete mode 100644 packages/manager/.changeset/pr-10915-tests-1725992312603.md
 delete mode 100644 packages/manager/.changeset/pr-10916-tests-1726065357292.md
 delete mode 100644 packages/manager/.changeset/pr-10917-tests-1726061618551.md
 delete mode 100644 packages/manager/.changeset/pr-10922-fixed-1726078413547.md
 delete mode 100644 packages/manager/.changeset/pr-10924-fixed-1726085139068.md
 delete mode 100644 packages/manager/.changeset/pr-10927-fixed-1726139552414.md
 delete mode 100644 packages/manager/.changeset/pr-10929-upcoming-features-1726156754302.md
 delete mode 100644 packages/manager/.changeset/pr-10930-removed-1726159393499.md
 delete mode 100644 packages/manager/.changeset/pr-10931-fixed-1726172174760.md
 delete mode 100644 packages/manager/.changeset/pr-10934-tech-stories-1726237837582.md
 delete mode 100644 packages/manager/.changeset/pr-10938-fixed-1726262803311.md
 delete mode 100644 packages/manager/.changeset/pr-10939-upcoming-features-1726263444178.md
 delete mode 100644 packages/manager/.changeset/pr-10940-changed-1726472458540.md
 delete mode 100644 packages/manager/.changeset/pr-10942-added-1726774387695.md
 delete mode 100644 packages/manager/.changeset/pr-10944-changed-1726505494539.md
 delete mode 100644 packages/manager/.changeset/pr-10945-tests-1726507532580.md
 delete mode 100644 packages/manager/.changeset/pr-10947-fixed-1726507951785.md
 delete mode 100644 packages/manager/.changeset/pr-10948-fixed-1726517375013.md
 delete mode 100644 packages/manager/.changeset/pr-10951-upcoming-features-1726561825358.md
 delete mode 100644 packages/manager/.changeset/pr-10954-changed-1726591307327.md
 delete mode 100644 packages/manager/.changeset/pr-10955-tech-stories-1726591613226.md
 delete mode 100644 packages/manager/.changeset/pr-10956-added-1727103260742.md
 delete mode 100644 packages/manager/.changeset/pr-10958-tech-stories-1726606812125.md
 delete mode 100644 packages/manager/.changeset/pr-10959-changed-1726660002249.md
 delete mode 100644 packages/manager/.changeset/pr-10960-tech-stories-1726671382649.md
 delete mode 100644 packages/manager/.changeset/pr-10961-upcoming-features-1726666902955.md
 delete mode 100644 packages/manager/.changeset/pr-10962-fixed-1726688754577.md
 delete mode 100644 packages/manager/.changeset/pr-10963-changed-1726672295505.md
 delete mode 100644 packages/manager/.changeset/pr-10965-fixed-1726675687897.md
 delete mode 100644 packages/manager/.changeset/pr-10966-removed-1726765827523.md
 delete mode 100644 packages/manager/.changeset/pr-10966-tests-1726678346834.md
 delete mode 100644 packages/manager/.changeset/pr-10969-changed-1726849752351.md
 delete mode 100644 packages/manager/.changeset/pr-10970-fixed-1726762187663.md
 delete mode 100644 packages/manager/.changeset/pr-10973-upcoming-features-1726768912614.md
 delete mode 100644 packages/manager/.changeset/pr-10976-tests-1726778238574.md
 delete mode 100644 packages/manager/.changeset/pr-10980-fixed-1726845381695.md
 delete mode 100644 packages/manager/.changeset/pr-10981-tests-1726863454562.md
 delete mode 100644 packages/manager/.changeset/pr-10983-tests-1726865807776.md
 delete mode 100644 packages/manager/.changeset/pr-10985-changed-1727105394355.md
 delete mode 100644 packages/manager/.changeset/pr-10986-changed-1727108550951.md
 delete mode 100644 packages/manager/.changeset/pr-10987-upcoming-features-1727113889522.md
 delete mode 100644 packages/manager/.changeset/pr-10988-fixed-1727119069361.md
 delete mode 100644 packages/manager/.changeset/pr-10989-fixed-1727118993352.md
 delete mode 100644 packages/manager/.changeset/pr-10990-tech-stories-1727187564566.md
 delete mode 100644 packages/manager/.changeset/pr-10993-fixed-1727189409908.md
 delete mode 100644 packages/manager/.changeset/pr-10995-fixed-1727190775726.md
 delete mode 100644 packages/manager/.changeset/pr-10998-fixed-1727195767338.md
 delete mode 100644 packages/manager/.changeset/pr-10999-tests-1727196449912.md
 delete mode 100644 packages/validation/.changeset/pr-10980-changed-1726868115893.md

diff --git a/packages/api-v4/.changeset/pr-10939-upcoming-features-1726263534115.md b/packages/api-v4/.changeset/pr-10939-upcoming-features-1726263534115.md
deleted file mode 100644
index dee797b1597..00000000000
--- a/packages/api-v4/.changeset/pr-10939-upcoming-features-1726263534115.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@linode/api-v4": Upcoming Features
----
-
-DBaaS V2 readonly hosts ([#10939](https://github.com/linode/manager/pull/10939))
diff --git a/packages/api-v4/.changeset/pr-10980-changed-1726868220865.md b/packages/api-v4/.changeset/pr-10980-changed-1726868220865.md
deleted file mode 100644
index b3d64c2dd7f..00000000000
--- a/packages/api-v4/.changeset/pr-10980-changed-1726868220865.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@linode/api-v4": Changed
----
-
-Make `replication_type` and `replication_commit_type` optional in MySQL and Postgres interfaces ([#10980](https://github.com/linode/manager/pull/10980))
diff --git a/packages/api-v4/.changeset/pr-10988-changed-1727197910740.md b/packages/api-v4/.changeset/pr-10988-changed-1727197910740.md
deleted file mode 100644
index 4b5811bc5bb..00000000000
--- a/packages/api-v4/.changeset/pr-10988-changed-1727197910740.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@linode/api-v4": Changed
----
-
-DBaaS restore method name ([#10988](https://github.com/linode/manager/pull/10988))
diff --git a/packages/api-v4/.changeset/pr-10989-fixed-1727118907870.md b/packages/api-v4/.changeset/pr-10989-fixed-1727118907870.md
deleted file mode 100644
index 910c14b85f7..00000000000
--- a/packages/api-v4/.changeset/pr-10989-fixed-1727118907870.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'@linode/api-v4': Fixed
----
-
-Include `standby` field in `DatabaseHosts` interface ([#10989](https://github.com/linode/manager/pull/10989))
diff --git a/packages/api-v4/CHANGELOG.md b/packages/api-v4/CHANGELOG.md
index 023a393e3ba..5f7c3cc1585 100644
--- a/packages/api-v4/CHANGELOG.md
+++ b/packages/api-v4/CHANGELOG.md
@@ -1,3 +1,19 @@
+## [2024-09-30] - v0.127.0
+
+
+### Changed:
+
+- Make `replication_type` and `replication_commit_type` optional in MySQL and Postgres interfaces ([#10980](https://github.com/linode/manager/pull/10980))
+- DBaaS restore method name ([#10988](https://github.com/linode/manager/pull/10988))
+
+### Fixed:
+
+- Include `standby` field in `DatabaseHosts` interface ([#10989](https://github.com/linode/manager/pull/10989))
+
+### Upcoming Features:
+
+- DBaaS V2 readonly hosts ([#10939](https://github.com/linode/manager/pull/10939))
+
 ## [2024-09-16] - v0.126.0
 
 
diff --git a/packages/api-v4/package.json b/packages/api-v4/package.json
index 31e59148235..486c4dd6a3d 100644
--- a/packages/api-v4/package.json
+++ b/packages/api-v4/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@linode/api-v4",
-  "version": "0.126.0",
+  "version": "0.127.0",
   "homepage": "https://github.com/linode/manager/tree/develop/packages/api-v4",
   "bugs": {
     "url": "https://github.com/linode/manager/issues"
diff --git a/packages/manager/.changeset/pr-10780-tech-stories-1724255560445.md b/packages/manager/.changeset/pr-10780-tech-stories-1724255560445.md
deleted file mode 100644
index e4311cecf31..00000000000
--- a/packages/manager/.changeset/pr-10780-tech-stories-1724255560445.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@linode/manager": Tech Stories
----
-
-Replace 'react-select' with Autocomplete in Profile ([#10780](https://github.com/linode/manager/pull/10780))
diff --git a/packages/manager/.changeset/pr-10823-upcoming-features-1724867496417.md b/packages/manager/.changeset/pr-10823-upcoming-features-1724867496417.md
deleted file mode 100644
index be33c99dea2..00000000000
--- a/packages/manager/.changeset/pr-10823-upcoming-features-1724867496417.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@linode/manager": Upcoming Features
----
-
-Add Landing Page and update Empty-State Landing page for DBaaS V2 ([#10823](https://github.com/linode/manager/pull/10823))
diff --git a/packages/manager/.changeset/pr-10858-changed-1725914163062.md b/packages/manager/.changeset/pr-10858-changed-1725914163062.md
deleted file mode 100644
index 578b70a3494..00000000000
--- a/packages/manager/.changeset/pr-10858-changed-1725914163062.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@linode/manager": Changed
----
-
-Move Region section above Images in Linode Create and update default OS to Ubuntu 24.04 LTS ([#10858](https://github.com/linode/manager/pull/10858))
diff --git a/packages/manager/.changeset/pr-10903-upcoming-features-1725857694589.md b/packages/manager/.changeset/pr-10903-upcoming-features-1725857694589.md
deleted file mode 100644
index 66017bb7ed9..00000000000
--- a/packages/manager/.changeset/pr-10903-upcoming-features-1725857694589.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@linode/manager": Upcoming Features
----
-
-Update CSS for widget level filters and widget heading title for ACLP ([#10903](https://github.com/linode/manager/pull/10903))
diff --git a/packages/manager/.changeset/pr-10906-added-1726196972242.md b/packages/manager/.changeset/pr-10906-added-1726196972242.md
deleted file mode 100644
index 8838687b742..00000000000
--- a/packages/manager/.changeset/pr-10906-added-1726196972242.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@linode/manager": Added
----
-
-Tracking metrics for LD DX Tools AB Test ([#10906](https://github.com/linode/manager/pull/10906))
diff --git a/packages/manager/.changeset/pr-10908-fixed-1726091771498.md b/packages/manager/.changeset/pr-10908-fixed-1726091771498.md
deleted file mode 100644
index 26fa286a532..00000000000
--- a/packages/manager/.changeset/pr-10908-fixed-1726091771498.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@linode/manager": Fixed
----
-
-Fix missing radio button labels for User Permissions ([#10908](https://github.com/linode/manager/pull/10908))
diff --git a/packages/manager/.changeset/pr-10915-tests-1725992312603.md b/packages/manager/.changeset/pr-10915-tests-1725992312603.md
deleted file mode 100644
index 6d7703fd558..00000000000
--- a/packages/manager/.changeset/pr-10915-tests-1725992312603.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@linode/manager": Tests
----
-
-Tag cypress tests by adding the "method:e2e" and "purpose:dcTesting" ([#10915](https://github.com/linode/manager/pull/10915))
diff --git a/packages/manager/.changeset/pr-10916-tests-1726065357292.md b/packages/manager/.changeset/pr-10916-tests-1726065357292.md
deleted file mode 100644
index 3d4bfa1d939..00000000000
--- a/packages/manager/.changeset/pr-10916-tests-1726065357292.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@linode/manager": Tests
----
-
-Added unit tests for the NodeBalancerDetail package ([#10916](https://github.com/linode/manager/pull/10916))
diff --git a/packages/manager/.changeset/pr-10917-tests-1726061618551.md b/packages/manager/.changeset/pr-10917-tests-1726061618551.md
deleted file mode 100644
index 40ad85e0440..00000000000
--- a/packages/manager/.changeset/pr-10917-tests-1726061618551.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@linode/manager": Tests
----
-
-Add unit tests for Dialog and DeletionDialog components ([#10917](https://github.com/linode/manager/pull/10917))
diff --git a/packages/manager/.changeset/pr-10922-fixed-1726078413547.md b/packages/manager/.changeset/pr-10922-fixed-1726078413547.md
deleted file mode 100644
index c05ef12b040..00000000000
--- a/packages/manager/.changeset/pr-10922-fixed-1726078413547.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@linode/manager": Fixed
----
-
-Scrollbar showing briefly on Splash Screen ([#10922](https://github.com/linode/manager/pull/10922))
diff --git a/packages/manager/.changeset/pr-10924-fixed-1726085139068.md b/packages/manager/.changeset/pr-10924-fixed-1726085139068.md
deleted file mode 100644
index 9d3eb10136a..00000000000
--- a/packages/manager/.changeset/pr-10924-fixed-1726085139068.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@linode/manager": Fixed
----
-
-Misaligned DNS banner text ([#10924](https://github.com/linode/manager/pull/10924))
diff --git a/packages/manager/.changeset/pr-10927-fixed-1726139552414.md b/packages/manager/.changeset/pr-10927-fixed-1726139552414.md
deleted file mode 100644
index 0c60eb271a4..00000000000
--- a/packages/manager/.changeset/pr-10927-fixed-1726139552414.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@linode/manager": Fixed
----
-
-Objects Table Refreshing Logic Fixed ([#10927](https://github.com/linode/manager/pull/10927))
diff --git a/packages/manager/.changeset/pr-10929-upcoming-features-1726156754302.md b/packages/manager/.changeset/pr-10929-upcoming-features-1726156754302.md
deleted file mode 100644
index 70e24c98b29..00000000000
--- a/packages/manager/.changeset/pr-10929-upcoming-features-1726156754302.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@linode/manager": Upcoming Features
----
-
-Fix 'Create Volume' button state on Volume Create page when 'Encrypt Volume' checkbox is checked ([#10929](https://github.com/linode/manager/pull/10929))
diff --git a/packages/manager/.changeset/pr-10930-removed-1726159393499.md b/packages/manager/.changeset/pr-10930-removed-1726159393499.md
deleted file mode 100644
index d6e275ef800..00000000000
--- a/packages/manager/.changeset/pr-10930-removed-1726159393499.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@linode/manager": Removed
----
-
-Support for Gravatar as user profile avatars ([#10930](https://github.com/linode/manager/pull/10930))
diff --git a/packages/manager/.changeset/pr-10931-fixed-1726172174760.md b/packages/manager/.changeset/pr-10931-fixed-1726172174760.md
deleted file mode 100644
index 8cdf45b748a..00000000000
--- a/packages/manager/.changeset/pr-10931-fixed-1726172174760.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@linode/manager": Fixed
----
-
-Missing label for Full Account Toggle ([#10931](https://github.com/linode/manager/pull/10931))
diff --git a/packages/manager/.changeset/pr-10934-tech-stories-1726237837582.md b/packages/manager/.changeset/pr-10934-tech-stories-1726237837582.md
deleted file mode 100644
index 30a569b9508..00000000000
--- a/packages/manager/.changeset/pr-10934-tech-stories-1726237837582.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@linode/manager": Tech Stories
----
-
-Update storybook to take care of tar vulnerability ([#10934](https://github.com/linode/manager/pull/10934))
diff --git a/packages/manager/.changeset/pr-10938-fixed-1726262803311.md b/packages/manager/.changeset/pr-10938-fixed-1726262803311.md
deleted file mode 100644
index 407b55e45ec..00000000000
--- a/packages/manager/.changeset/pr-10938-fixed-1726262803311.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@linode/manager": Fixed
----
-
-Textarea tooltip icon focus area ([#10938](https://github.com/linode/manager/pull/10938))
diff --git a/packages/manager/.changeset/pr-10939-upcoming-features-1726263444178.md b/packages/manager/.changeset/pr-10939-upcoming-features-1726263444178.md
deleted file mode 100644
index 0a3622d74ba..00000000000
--- a/packages/manager/.changeset/pr-10939-upcoming-features-1726263444178.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@linode/manager": Upcoming Features
----
-
-DBaaS V2 enhancements to the Summary and Settings tabs ([#10939](https://github.com/linode/manager/pull/10939))
diff --git a/packages/manager/.changeset/pr-10940-changed-1726472458540.md b/packages/manager/.changeset/pr-10940-changed-1726472458540.md
deleted file mode 100644
index 0bd462c23c7..00000000000
--- a/packages/manager/.changeset/pr-10940-changed-1726472458540.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@linode/manager": Changed
----
-
-VPC Assign Linodes table header ([#10940](https://github.com/linode/manager/pull/10940))
diff --git a/packages/manager/.changeset/pr-10942-added-1726774387695.md b/packages/manager/.changeset/pr-10942-added-1726774387695.md
deleted file mode 100644
index 1d68b93892d..00000000000
--- a/packages/manager/.changeset/pr-10942-added-1726774387695.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@linode/manager": Added
----
-
-Accessibility tab to Storybook Stories ([#10942](https://github.com/linode/manager/pull/10942))
diff --git a/packages/manager/.changeset/pr-10944-changed-1726505494539.md b/packages/manager/.changeset/pr-10944-changed-1726505494539.md
deleted file mode 100644
index c54de69a88e..00000000000
--- a/packages/manager/.changeset/pr-10944-changed-1726505494539.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@linode/manager": Changed
----
-
-Mark formik as deprecated ([#10944](https://github.com/linode/manager/pull/10944))
diff --git a/packages/manager/.changeset/pr-10945-tests-1726507532580.md b/packages/manager/.changeset/pr-10945-tests-1726507532580.md
deleted file mode 100644
index f3b7edd947e..00000000000
--- a/packages/manager/.changeset/pr-10945-tests-1726507532580.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@linode/manager": Tests
----
-
-Add unit tests for rest of NodeBalancers package ([#10945](https://github.com/linode/manager/pull/10945))
diff --git a/packages/manager/.changeset/pr-10947-fixed-1726507951785.md b/packages/manager/.changeset/pr-10947-fixed-1726507951785.md
deleted file mode 100644
index 8f9cc90912a..00000000000
--- a/packages/manager/.changeset/pr-10947-fixed-1726507951785.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@linode/manager": Fixed
----
-
-Flickering on the user profile page when updating the currently signed in user's username ([#10947](https://github.com/linode/manager/pull/10947))
diff --git a/packages/manager/.changeset/pr-10948-fixed-1726517375013.md b/packages/manager/.changeset/pr-10948-fixed-1726517375013.md
deleted file mode 100644
index 3d205599b99..00000000000
--- a/packages/manager/.changeset/pr-10948-fixed-1726517375013.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@linode/manager": Fixed
----
-
-Linode IPv6 Range rDNS typo ([#10948](https://github.com/linode/manager/pull/10948))
diff --git a/packages/manager/.changeset/pr-10951-upcoming-features-1726561825358.md b/packages/manager/.changeset/pr-10951-upcoming-features-1726561825358.md
deleted file mode 100644
index aa7056eab9e..00000000000
--- a/packages/manager/.changeset/pr-10951-upcoming-features-1726561825358.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@linode/manager": Upcoming Features
----
-
-Enhance CSS for Cloudpulse widget and main bar components ([#10951](https://github.com/linode/manager/pull/10951))
diff --git a/packages/manager/.changeset/pr-10954-changed-1726591307327.md b/packages/manager/.changeset/pr-10954-changed-1726591307327.md
deleted file mode 100644
index adff2982d2c..00000000000
--- a/packages/manager/.changeset/pr-10954-changed-1726591307327.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@linode/manager": Changed
----
-
-Copy updates in Create with CLI modal ([#10954](https://github.com/linode/manager/pull/10954))
diff --git a/packages/manager/.changeset/pr-10955-tech-stories-1726591613226.md b/packages/manager/.changeset/pr-10955-tech-stories-1726591613226.md
deleted file mode 100644
index 92d98a87901..00000000000
--- a/packages/manager/.changeset/pr-10955-tech-stories-1726591613226.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@linode/manager": Tech Stories
----
-
-Update dompurify and jsPDF packages to resolve dependabot security alerts ([#10955](https://github.com/linode/manager/pull/10955))
diff --git a/packages/manager/.changeset/pr-10956-added-1727103260742.md b/packages/manager/.changeset/pr-10956-added-1727103260742.md
deleted file mode 100644
index 511c979c325..00000000000
--- a/packages/manager/.changeset/pr-10956-added-1727103260742.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@linode/manager": Added
----
-
-GPUv2 Plan Selection Egress Banner ([#10956](https://github.com/linode/manager/pull/10956))
diff --git a/packages/manager/.changeset/pr-10958-tech-stories-1726606812125.md b/packages/manager/.changeset/pr-10958-tech-stories-1726606812125.md
deleted file mode 100644
index e68ee8e1415..00000000000
--- a/packages/manager/.changeset/pr-10958-tech-stories-1726606812125.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@linode/manager": Tech Stories
----
-
-Remove Linode Create v1 ([#10958](https://github.com/linode/manager/pull/10958))
diff --git a/packages/manager/.changeset/pr-10959-changed-1726660002249.md b/packages/manager/.changeset/pr-10959-changed-1726660002249.md
deleted file mode 100644
index 72e674ff43c..00000000000
--- a/packages/manager/.changeset/pr-10959-changed-1726660002249.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@linode/manager": Changed
----
-
-Better 'Backups Enabled' default when cloning Linode ([#10959](https://github.com/linode/manager/pull/10959))
diff --git a/packages/manager/.changeset/pr-10960-tech-stories-1726671382649.md b/packages/manager/.changeset/pr-10960-tech-stories-1726671382649.md
deleted file mode 100644
index 6afcb97dc1b..00000000000
--- a/packages/manager/.changeset/pr-10960-tech-stories-1726671382649.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@linode/manager": Tech Stories
----
-
-Update vite and related packages to latest versions ([#10960](https://github.com/linode/manager/pull/10960))
diff --git a/packages/manager/.changeset/pr-10961-upcoming-features-1726666902955.md b/packages/manager/.changeset/pr-10961-upcoming-features-1726666902955.md
deleted file mode 100644
index 1ad2fdcd0d8..00000000000
--- a/packages/manager/.changeset/pr-10961-upcoming-features-1726666902955.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@linode/manager": Upcoming Features
----
-
-DBaaS V2 enhancements to the Backups ([#10961](https://github.com/linode/manager/pull/10961))
diff --git a/packages/manager/.changeset/pr-10962-fixed-1726688754577.md b/packages/manager/.changeset/pr-10962-fixed-1726688754577.md
deleted file mode 100644
index 851aa610027..00000000000
--- a/packages/manager/.changeset/pr-10962-fixed-1726688754577.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@linode/manager": Fixed
----
-
-Cancel Button Not Functioning in Delete Node Balancer Configuration Dialog ([#10962](https://github.com/linode/manager/pull/10962))
diff --git a/packages/manager/.changeset/pr-10963-changed-1726672295505.md b/packages/manager/.changeset/pr-10963-changed-1726672295505.md
deleted file mode 100644
index 405be2c8dba..00000000000
--- a/packages/manager/.changeset/pr-10963-changed-1726672295505.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@linode/manager": Changed
----
-
-Disable 'Save' button in Change Avatar Color dialog until color is changed ([#10963](https://github.com/linode/manager/pull/10963))
diff --git a/packages/manager/.changeset/pr-10965-fixed-1726675687897.md b/packages/manager/.changeset/pr-10965-fixed-1726675687897.md
deleted file mode 100644
index 86badc03d5d..00000000000
--- a/packages/manager/.changeset/pr-10965-fixed-1726675687897.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@linode/manager": Fixed
----
-
-Incorrect URL slug for Apache Spark Cluster Marketplace documentation ([#10965](https://github.com/linode/manager/pull/10965))
diff --git a/packages/manager/.changeset/pr-10966-removed-1726765827523.md b/packages/manager/.changeset/pr-10966-removed-1726765827523.md
deleted file mode 100644
index 9e38773af5c..00000000000
--- a/packages/manager/.changeset/pr-10966-removed-1726765827523.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@linode/manager": Removed
----
-
-`AddNewLink` component, replacing instances with `Button` ([#10966](https://github.com/linode/manager/pull/10966))
diff --git a/packages/manager/.changeset/pr-10966-tests-1726678346834.md b/packages/manager/.changeset/pr-10966-tests-1726678346834.md
deleted file mode 100644
index d206c4c7bc0..00000000000
--- a/packages/manager/.changeset/pr-10966-tests-1726678346834.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@linode/manager": Tests
----
-
-Add unit tests for `AccountActivationLanding` component ([#10966](https://github.com/linode/manager/pull/10966))
diff --git a/packages/manager/.changeset/pr-10969-changed-1726849752351.md b/packages/manager/.changeset/pr-10969-changed-1726849752351.md
deleted file mode 100644
index 241892d4135..00000000000
--- a/packages/manager/.changeset/pr-10969-changed-1726849752351.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@linode/manager": Changed
----
-
-Limits: surface new API errors in Linode and LKE flows ([#10969](https://github.com/linode/manager/pull/10969))
diff --git a/packages/manager/.changeset/pr-10970-fixed-1726762187663.md b/packages/manager/.changeset/pr-10970-fixed-1726762187663.md
deleted file mode 100644
index d5a0f2e50e0..00000000000
--- a/packages/manager/.changeset/pr-10970-fixed-1726762187663.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@linode/manager": Fixed
----
-
-Fix console error on Volume Create - Linode Config selection  ([#10970](https://github.com/linode/manager/pull/10970))
diff --git a/packages/manager/.changeset/pr-10973-upcoming-features-1726768912614.md b/packages/manager/.changeset/pr-10973-upcoming-features-1726768912614.md
deleted file mode 100644
index fdbcc558d6e..00000000000
--- a/packages/manager/.changeset/pr-10973-upcoming-features-1726768912614.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@linode/manager": Upcoming Features
----
-
-Update URL for Volume Encryption guide ([#10973](https://github.com/linode/manager/pull/10973))
diff --git a/packages/manager/.changeset/pr-10976-tests-1726778238574.md b/packages/manager/.changeset/pr-10976-tests-1726778238574.md
deleted file mode 100644
index 64ff6e288bf..00000000000
--- a/packages/manager/.changeset/pr-10976-tests-1726778238574.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@linode/manager": Tests
----
-
-Fix plan selection test always failing on reattempts ([#10976](https://github.com/linode/manager/pull/10976))
diff --git a/packages/manager/.changeset/pr-10980-fixed-1726845381695.md b/packages/manager/.changeset/pr-10980-fixed-1726845381695.md
deleted file mode 100644
index b9fb082bfa9..00000000000
--- a/packages/manager/.changeset/pr-10980-fixed-1726845381695.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@linode/manager": Fixed
----
-
-Incorrect timezone in Database Maintenance Window tooltip, inaccurate Resize status of Database, and unneeded `replication_type` in  v2 `createPayload` ([#10980](https://github.com/linode/manager/pull/10980))
diff --git a/packages/manager/.changeset/pr-10981-tests-1726863454562.md b/packages/manager/.changeset/pr-10981-tests-1726863454562.md
deleted file mode 100644
index b6f0b96f9fc..00000000000
--- a/packages/manager/.changeset/pr-10981-tests-1726863454562.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@linode/manager": Tests
----
-
-Fix test flake in `nodebalancers-create-in-complex-form.spec.ts` ([#10981](https://github.com/linode/manager/pull/10981))
diff --git a/packages/manager/.changeset/pr-10983-tests-1726865807776.md b/packages/manager/.changeset/pr-10983-tests-1726865807776.md
deleted file mode 100644
index e59266f0643..00000000000
--- a/packages/manager/.changeset/pr-10983-tests-1726865807776.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@linode/manager": Tests
----
-
-Improve region selection RegEx to resolve test failures when selecting certain regions ([#10983](https://github.com/linode/manager/pull/10983))
diff --git a/packages/manager/.changeset/pr-10985-changed-1727105394355.md b/packages/manager/.changeset/pr-10985-changed-1727105394355.md
deleted file mode 100644
index aaffca8877d..00000000000
--- a/packages/manager/.changeset/pr-10985-changed-1727105394355.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@linode/manager": Changed
----
-
-Update Images empty state as part of Image Service Gen2 ([#10985](https://github.com/linode/manager/pull/10985))
diff --git a/packages/manager/.changeset/pr-10986-changed-1727108550951.md b/packages/manager/.changeset/pr-10986-changed-1727108550951.md
deleted file mode 100644
index 04a8e64f8bf..00000000000
--- a/packages/manager/.changeset/pr-10986-changed-1727108550951.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@linode/manager": Changed
----
-
-Update Image Upload dropzone copy as part of Image Service Gen2 ([#10986](https://github.com/linode/manager/pull/10986))
diff --git a/packages/manager/.changeset/pr-10987-upcoming-features-1727113889522.md b/packages/manager/.changeset/pr-10987-upcoming-features-1727113889522.md
deleted file mode 100644
index b3d62fb7242..00000000000
--- a/packages/manager/.changeset/pr-10987-upcoming-features-1727113889522.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@linode/manager": Upcoming Features
----
-
-Update Region description helper text ([#10987](https://github.com/linode/manager/pull/10987))
diff --git a/packages/manager/.changeset/pr-10988-fixed-1727119069361.md b/packages/manager/.changeset/pr-10988-fixed-1727119069361.md
deleted file mode 100644
index 91474c8e759..00000000000
--- a/packages/manager/.changeset/pr-10988-fixed-1727119069361.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@linode/manager": Fixed
----
-
-DBaaS backups disable invalid dates ([#10988](https://github.com/linode/manager/pull/10988))
diff --git a/packages/manager/.changeset/pr-10989-fixed-1727118993352.md b/packages/manager/.changeset/pr-10989-fixed-1727118993352.md
deleted file mode 100644
index 39aa10472af..00000000000
--- a/packages/manager/.changeset/pr-10989-fixed-1727118993352.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'@linode/manager': Fixed
----
-
-Database Detail page Summary tab display of username and read-only host ([#10989](https://github.com/linode/manager/pull/10989))
diff --git a/packages/manager/.changeset/pr-10990-tech-stories-1727187564566.md b/packages/manager/.changeset/pr-10990-tech-stories-1727187564566.md
deleted file mode 100644
index 22440f94772..00000000000
--- a/packages/manager/.changeset/pr-10990-tech-stories-1727187564566.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@linode/manager": Tech Stories
----
-
-Update `husky` to latest ([#10990](https://github.com/linode/manager/pull/10990))
diff --git a/packages/manager/.changeset/pr-10993-fixed-1727189409908.md b/packages/manager/.changeset/pr-10993-fixed-1727189409908.md
deleted file mode 100644
index 25343004bb1..00000000000
--- a/packages/manager/.changeset/pr-10993-fixed-1727189409908.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@linode/manager": Fixed
----
-
-DBaaS V2 logo on empty landing ([#10993](https://github.com/linode/manager/pull/10993))
diff --git a/packages/manager/.changeset/pr-10995-fixed-1727190775726.md b/packages/manager/.changeset/pr-10995-fixed-1727190775726.md
deleted file mode 100644
index e253937a46c..00000000000
--- a/packages/manager/.changeset/pr-10995-fixed-1727190775726.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@linode/manager": Fixed
----
-
-Enabled Shared CPU tab for 2-nodes Database Cluster Resize ([#10995](https://github.com/linode/manager/pull/10995))
diff --git a/packages/manager/.changeset/pr-10998-fixed-1727195767338.md b/packages/manager/.changeset/pr-10998-fixed-1727195767338.md
deleted file mode 100644
index e1e76dafd0c..00000000000
--- a/packages/manager/.changeset/pr-10998-fixed-1727195767338.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@linode/manager": Fixed
----
-
-Set full height to DX Tools Modal and add Linode API link ([#10998](https://github.com/linode/manager/pull/10998))
diff --git a/packages/manager/.changeset/pr-10999-tests-1727196449912.md b/packages/manager/.changeset/pr-10999-tests-1727196449912.md
deleted file mode 100644
index fb35606582c..00000000000
--- a/packages/manager/.changeset/pr-10999-tests-1727196449912.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@linode/manager": Tests
----
-
-Address Linode deletion test flakiness ([#10999](https://github.com/linode/manager/pull/10999))
diff --git a/packages/manager/CHANGELOG.md b/packages/manager/CHANGELOG.md
index 5b2d1e28112..0374369be23 100644
--- a/packages/manager/CHANGELOG.md
+++ b/packages/manager/CHANGELOG.md
@@ -4,6 +4,83 @@ All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](http://keepachangelog.com/) and this project adheres to [Semantic Versioning](http://semver.org/).
 
+## [2024-09-30] - v1.129.0
+
+
+### Added:
+
+- GPUv2 Plan Selection Egress Banner ([#10956](https://github.com/linode/manager/pull/10956))
+
+### Changed:
+
+- Move Region section above Images in Linode Create and update default OS to Ubuntu 24.04 LTS ([#10858](https://github.com/linode/manager/pull/10858))
+- VPC Assign Linodes table header ([#10940](https://github.com/linode/manager/pull/10940))
+- Copy updates in Create with CLI modal ([#10954](https://github.com/linode/manager/pull/10954))
+- Better 'Backups Enabled' default when cloning Linode ([#10959](https://github.com/linode/manager/pull/10959))
+- Disable 'Save' button in Change Avatar Color dialog until color is changed ([#10963](https://github.com/linode/manager/pull/10963))
+- Limits: surface new API errors in Linode and LKE flows ([#10969](https://github.com/linode/manager/pull/10969))
+- Update Images empty state as part of Image Service Gen2 ([#10985](https://github.com/linode/manager/pull/10985))
+- Update Image Upload dropzone copy as part of Image Service Gen2 ([#10986](https://github.com/linode/manager/pull/10986))
+
+### Fixed:
+
+- Missing radio button labels for User Permissions ([#10908](https://github.com/linode/manager/pull/10908))
+- Scrollbar showing briefly on Splash Screen ([#10922](https://github.com/linode/manager/pull/10922))
+- Misaligned DNS banner text ([#10924](https://github.com/linode/manager/pull/10924))
+- Objects Table Refreshing Logic Fixed ([#10927](https://github.com/linode/manager/pull/10927))
+- Missing label for Full Account Toggle ([#10931](https://github.com/linode/manager/pull/10931))
+- Textarea tooltip icon focus area ([#10938](https://github.com/linode/manager/pull/10938))
+- Flickering on the user profile page when updating the currently signed in user's username ([#10947](https://github.com/linode/manager/pull/10947))
+- Linode IPv6 Range rDNS typo ([#10948](https://github.com/linode/manager/pull/10948))
+- Cancel Button Not Functioning in Delete Node Balancer Configuration Dialog ([#10962](https://github.com/linode/manager/pull/10962))
+- Incorrect URL slug for Apache Spark Cluster Marketplace documentation ([#10965](https://github.com/linode/manager/pull/10965))
+- Incorrect timezone in Database Maintenance Window tooltip, inaccurate Resize status of Database, and unneeded `replication_type` in  v2 `createPayload` ([#10980](https://github.com/linode/manager/pull/10980))
+- DBaaS backups disable invalid dates ([#10988](https://github.com/linode/manager/pull/10988))
+- DBaaS V2 logo on empty landing ([#10993](https://github.com/linode/manager/pull/10993))
+- Enabled Shared CPU tab for 2-nodes Database Cluster Resize ([#10995](https://github.com/linode/manager/pull/10995))
+- Set full height to DX Tools Modal and add Linode API link ([#10998](https://github.com/linode/manager/pull/10998))
+- Database Detail page Summary tab display of username and read-only host ([#10989](https://github.com/linode/manager/pull/10989))
+
+### Removed:
+
+- Support for Gravatar as user profile avatars ([#10930](https://github.com/linode/manager/pull/10930))
+- `AddNewLink` component, replacing instances with `Button` ([#10966](https://github.com/linode/manager/pull/10966))
+
+### Tech Stories:
+
+- Replace 'react-select' with Autocomplete in Profile ([#10780](https://github.com/linode/manager/pull/10780))
+- Update storybook to take care of tar vulnerability ([#10934](https://github.com/linode/manager/pull/10934))
+- Update dompurify and jsPDF packages to resolve dependabot security alerts ([#10955](https://github.com/linode/manager/pull/10955))
+- Remove Linode Create v1 ([#10958](https://github.com/linode/manager/pull/10958))
+- Update vite and related packages to latest versions ([#10960](https://github.com/linode/manager/pull/10960))
+- Update `husky` to latest ([#10990](https://github.com/linode/manager/pull/10990))
+- Add Accessibility tab to Storybook Stories ([#10942](https://github.com/linode/manager/pull/10942))
+- Mark formik as deprecated ([#10944](https://github.com/linode/manager/pull/10944))
+- Fix console error on Volume Create - Linode Config selection  ([#10970](https://github.com/linode/manager/pull/10970))
+
+### Tests:
+
+- Tag cypress tests by adding the "method:e2e" and "purpose:dcTesting" ([#10915](https://github.com/linode/manager/pull/10915))
+- Added unit tests for the NodeBalancerDetail package ([#10916](https://github.com/linode/manager/pull/10916))
+- Add unit tests for Dialog and DeletionDialog components ([#10917](https://github.com/linode/manager/pull/10917))
+- Add unit tests for rest of NodeBalancers package ([#10945](https://github.com/linode/manager/pull/10945))
+- Add unit tests for `AccountActivationLanding` component ([#10966](https://github.com/linode/manager/pull/10966))
+- Fix plan selection test always failing on reattempts ([#10976](https://github.com/linode/manager/pull/10976))
+- Fix test flake in `nodebalancers-create-in-complex-form.spec.ts` ([#10981](https://github.com/linode/manager/pull/10981))
+- Improve region selection RegEx to resolve test failures when selecting certain regions ([#10983](https://github.com/linode/manager/pull/10983))
+- Address Linode deletion test flakiness ([#10999](https://github.com/linode/manager/pull/10999))
+
+### Upcoming Features:
+
+- Add Landing Page and update Empty-State Landing page for DBaaS V2 ([#10823](https://github.com/linode/manager/pull/10823))
+- Update CSS for widget level filters and widget heading title for ACLP ([#10903](https://github.com/linode/manager/pull/10903))
+- Fix 'Create Volume' button state on Volume Create page when 'Encrypt Volume' checkbox is checked ([#10929](https://github.com/linode/manager/pull/10929))
+- DBaaS V2 enhancements to the Summary and Settings tabs ([#10939](https://github.com/linode/manager/pull/10939))
+- Enhance CSS for Cloudpulse widget and main bar components ([#10951](https://github.com/linode/manager/pull/10951))
+- DBaaS V2 enhancements to the Backups ([#10961](https://github.com/linode/manager/pull/10961))
+- Update URL for Volume Encryption guide ([#10973](https://github.com/linode/manager/pull/10973))
+- Update Region description helper text ([#10987](https://github.com/linode/manager/pull/10987))
+
 ## [2024-09-16] - v1.128.0
 
 
diff --git a/packages/manager/package.json b/packages/manager/package.json
index adfba775603..b03b220a873 100644
--- a/packages/manager/package.json
+++ b/packages/manager/package.json
@@ -2,7 +2,7 @@
   "name": "linode-manager",
   "author": "Linode",
   "description": "The Linode Manager website",
-  "version": "1.128.0",
+  "version": "1.129.0",
   "private": true,
   "type": "module",
   "bugs": {
diff --git a/packages/validation/.changeset/pr-10980-changed-1726868115893.md b/packages/validation/.changeset/pr-10980-changed-1726868115893.md
deleted file mode 100644
index 9ec7d32d0f5..00000000000
--- a/packages/validation/.changeset/pr-10980-changed-1726868115893.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@linode/validation": Changed
----
-
-Make `replication_type` and `replication_commit_type` optional in `databases.schema.ts` ([#10980](https://github.com/linode/manager/pull/10980))
diff --git a/packages/validation/CHANGELOG.md b/packages/validation/CHANGELOG.md
index 9b6a47f0457..dde5be62a5f 100644
--- a/packages/validation/CHANGELOG.md
+++ b/packages/validation/CHANGELOG.md
@@ -1,3 +1,10 @@
+## [2024-09-30] - v0.53.0
+
+
+### Changed:
+
+- Make `replication_type` and `replication_commit_type` optional in `databases.schema.ts` ([#10980](https://github.com/linode/manager/pull/10980))
+
 ## [2024-09-03] - v0.52.0
 
 
diff --git a/packages/validation/package.json b/packages/validation/package.json
index 477bc81f799..b00a5749acc 100644
--- a/packages/validation/package.json
+++ b/packages/validation/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@linode/validation",
-  "version": "0.52.0",
+  "version": "0.53.0",
   "description": "Yup validation schemas for use with the Linode APIv4",
   "type": "module",
   "main": "lib/index.cjs",

From 66265ea4ff94d032a7069c94d9b66654b5003843 Mon Sep 17 00:00:00 2001
From: corya-akamai <136115382+corya-akamai@users.noreply.github.com>
Date: Thu, 26 Sep 2024 13:27:14 -0400
Subject: [PATCH 62/62] fix: [UIE-8157] - DBaaS type call requires X-Filter
 (#11010)

---
 .../.changeset/pr-11010-fixed-1727359551617.md      |  5 +++++
 .../Databases/DatabaseCreate/DatabaseCreate.tsx     |  7 ++++---
 .../DatabaseResize/DatabaseResize.tsx               |  2 +-
 .../DatabaseResizeCurrentConfiguration.tsx          |  2 +-
 .../DatabaseSummaryClusterConfiguration.tsx         |  9 ++++++---
 .../src/features/Databases/DatabaseDetail/index.tsx |  4 +++-
 .../Databases/DatabaseLanding/DatabaseLanding.tsx   |  4 +++-
 .../Databases/DatabaseLanding/DatabaseRow.tsx       |  4 +++-
 packages/manager/src/queries/databases/databases.ts | 13 ++++++++++---
 packages/manager/src/queries/databases/requests.ts  |  8 ++++----
 10 files changed, 40 insertions(+), 18 deletions(-)
 create mode 100644 packages/manager/.changeset/pr-11010-fixed-1727359551617.md

diff --git a/packages/manager/.changeset/pr-11010-fixed-1727359551617.md b/packages/manager/.changeset/pr-11010-fixed-1727359551617.md
new file mode 100644
index 00000000000..0592d838d01
--- /dev/null
+++ b/packages/manager/.changeset/pr-11010-fixed-1727359551617.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Fixed
+---
+
+Include platform header in DBaaS types call ([#11010](https://github.com/linode/manager/pull/11010))
diff --git a/packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreate.tsx b/packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreate.tsx
index 87887c34e03..4f90a4224a8 100644
--- a/packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreate.tsx
+++ b/packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreate.tsx
@@ -196,6 +196,7 @@ interface NodePricing {
 const DatabaseCreate = () => {
   const { classes } = useStyles();
   const history = useHistory();
+  const { isDatabasesV2Beta, isDatabasesV2Enabled } = useIsDatabasesEnabled();
 
   const {
     data: regionsData,
@@ -213,9 +214,9 @@ const DatabaseCreate = () => {
     data: dbtypes,
     error: typesError,
     isLoading: typesLoading,
-  } = useDatabaseTypesQuery();
-
-  const { isDatabasesV2Beta, isDatabasesV2Enabled } = useIsDatabasesEnabled();
+  } = useDatabaseTypesQuery({
+    platform: isDatabasesV2Enabled ? 'rdbms-default' : 'rdbms-legacy',
+  });
 
   const formRef = React.useRef<HTMLFormElement>(null);
   const { mutateAsync: createDatabase } = useCreateDatabaseMutation();
diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseResize/DatabaseResize.tsx b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseResize/DatabaseResize.tsx
index e8677225454..79a566b77a7 100644
--- a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseResize/DatabaseResize.tsx
+++ b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseResize/DatabaseResize.tsx
@@ -67,7 +67,7 @@ export const DatabaseResize = ({ database, disabled = false }: Props) => {
     data: dbTypes,
     error: typesError,
     isLoading: typesLoading,
-  } = useDatabaseTypesQuery();
+  } = useDatabaseTypesQuery({ platform: database.platform });
 
   const { enqueueSnackbar } = useSnackbar();
 
diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseResize/DatabaseResizeCurrentConfiguration.tsx b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseResize/DatabaseResizeCurrentConfiguration.tsx
index 4206f31ba66..5a9bb7ed430 100644
--- a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseResize/DatabaseResizeCurrentConfiguration.tsx
+++ b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseResize/DatabaseResizeCurrentConfiguration.tsx
@@ -40,7 +40,7 @@ export const DatabaseResizeCurrentConfiguration = ({ database }: Props) => {
     data: types,
     error: typesError,
     isLoading: typesLoading,
-  } = useDatabaseTypesQuery();
+  } = useDatabaseTypesQuery({ platform: database.platform });
   const theme = useTheme();
   const { data: regions } = useRegionsQuery();
 
diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSummary/DatabaseSummaryClusterConfiguration.tsx b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSummary/DatabaseSummaryClusterConfiguration.tsx
index 8eb09fd8b07..1c39a908a3e 100644
--- a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSummary/DatabaseSummaryClusterConfiguration.tsx
+++ b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSummary/DatabaseSummaryClusterConfiguration.tsx
@@ -53,13 +53,16 @@ export const DatabaseSummaryClusterConfiguration = (props: Props) => {
 
   const { database } = props;
 
-  const { data: types } = useDatabaseTypesQuery();
+  const { data: types } = useDatabaseTypesQuery({
+    platform: database.platform,
+  });
+
+  const type = types?.find((type: DatabaseType) => type.id === database?.type);
+
   const { data: regions } = useRegionsQuery();
 
   const region = regions?.find((r: Region) => r.id === database.region);
 
-  const type = types?.find((type: DatabaseType) => type.id === database?.type);
-
   const { data: events } = useInProgressEvents();
 
   if (!database || !type) {
diff --git a/packages/manager/src/features/Databases/DatabaseDetail/index.tsx b/packages/manager/src/features/Databases/DatabaseDetail/index.tsx
index 8f4723567aa..0f858f039cd 100644
--- a/packages/manager/src/features/Databases/DatabaseDetail/index.tsx
+++ b/packages/manager/src/features/Databases/DatabaseDetail/index.tsx
@@ -45,7 +45,9 @@ export const DatabaseDetail = () => {
   const id = Number(databaseId);
 
   const { data: database, error, isLoading } = useDatabaseQuery(engine, id);
-  const { isLoading: isTypesLoading } = useDatabaseTypesQuery();
+  const { isLoading: isTypesLoading } = useDatabaseTypesQuery({
+    platform: database?.platform,
+  });
 
   const { mutateAsync: updateDatabase } = useDatabaseMutation(engine, id);
 
diff --git a/packages/manager/src/features/Databases/DatabaseLanding/DatabaseLanding.tsx b/packages/manager/src/features/Databases/DatabaseLanding/DatabaseLanding.tsx
index d5e2845e668..0380790dc27 100644
--- a/packages/manager/src/features/Databases/DatabaseLanding/DatabaseLanding.tsx
+++ b/packages/manager/src/features/Databases/DatabaseLanding/DatabaseLanding.tsx
@@ -35,8 +35,10 @@ const DatabaseLanding = () => {
     globalGrantType: 'add_databases',
   });
 
-  const { isLoading: isTypeLoading } = useDatabaseTypesQuery();
   const { isDatabasesV2Enabled } = useIsDatabasesEnabled();
+  const { isLoading: isTypeLoading } = useDatabaseTypesQuery({
+    platform: isDatabasesV2Enabled ? 'rdbms-default' : 'rdbms-legacy',
+  });
 
   const {
     handleOrderChange: newDatabaseHandleOrderChange,
diff --git a/packages/manager/src/features/Databases/DatabaseLanding/DatabaseRow.tsx b/packages/manager/src/features/Databases/DatabaseLanding/DatabaseRow.tsx
index f471fa9e7b0..f51a33e561e 100644
--- a/packages/manager/src/features/Databases/DatabaseLanding/DatabaseRow.tsx
+++ b/packages/manager/src/features/Databases/DatabaseLanding/DatabaseRow.tsx
@@ -48,7 +48,9 @@ export const DatabaseRow = ({ database, events, isNewDatabase }: Props) => {
 
   const { data: regions } = useRegionsQuery();
   const { data: profile } = useProfile();
-  const { data: types } = useDatabaseTypesQuery();
+  const { data: types } = useDatabaseTypesQuery({
+    platform: database.platform,
+  });
   const plan = types?.find((t: DatabaseType) => t.id === type);
   const formattedPlan = plan && formatStorageUnits(plan.label);
   const actualRegion = regions?.find((r) => r.id === region);
diff --git a/packages/manager/src/queries/databases/databases.ts b/packages/manager/src/queries/databases/databases.ts
index e754c51abda..39236fd1184 100644
--- a/packages/manager/src/queries/databases/databases.ts
+++ b/packages/manager/src/queries/databases/databases.ts
@@ -75,7 +75,12 @@ export const databaseQueries = createQueryKeys('databases', {
     queryKey: null,
   },
   types: {
-    queryFn: getAllDatabaseTypes,
+    contextQueries: {
+      all: (filter: Filter = {}) => ({
+        queryFn: () => getAllDatabaseTypes(filter),
+        queryKey: [filter],
+      }),
+    },
     queryKey: null,
   },
 });
@@ -176,8 +181,10 @@ export const useDatabaseEnginesQuery = (enabled: boolean = false) =>
     enabled,
   });
 
-export const useDatabaseTypesQuery = () =>
-  useQuery<DatabaseType[], APIError[]>(databaseQueries.types);
+export const useDatabaseTypesQuery = (filter: Filter = {}) =>
+  useQuery<DatabaseType[], APIError[]>({
+    ...databaseQueries.types._ctx.all(filter),
+  });
 
 export const useDatabaseCredentialsQuery = (
   engine: Engine,
diff --git a/packages/manager/src/queries/databases/requests.ts b/packages/manager/src/queries/databases/requests.ts
index 072e1d76197..f2d6c4490da 100644
--- a/packages/manager/src/queries/databases/requests.ts
+++ b/packages/manager/src/queries/databases/requests.ts
@@ -27,7 +27,7 @@ export const getAllDatabaseEngines = () =>
     (data) => data.data
   );
 
-export const getAllDatabaseTypes = () =>
-  getAll<DatabaseType>((params) => getDatabaseTypes(params))().then(
-    (data) => data.data
-  );
+export const getAllDatabaseTypes = (passedFilter: Filter = {}) =>
+  getAll<DatabaseType>((params, filter) =>
+    getDatabaseTypes(params, { ...filter, ...passedFilter })
+  )().then((data) => data.data);