change: [UIE-8743] - Replaced Button component in DBAAS with Akamai CDS button Web Component #12148

tvijay-akamai · 2025-05-02T11:21:17Z

Description 📝

This PR is to Replaced CM Button component in DBAAS with Akamai CDS button Web Component

Changes 🔄

Replaced Buttons in DBAAS with Akamai CDS Button Web Components.
Changed only those button component that has no impact outside DBAAS.
No changes to functional behavior of the buttons. Button Sizes may differ when compared to production.

Target release date 🗓️

July 15th Release

Preview 📷

Include a screenshot or screen recording of the change.

🔒 Use the Mask Sensitive Data setting for security.

💡 Use <video src="" /> tag when including recordings in table.

Before	After

How to test 🧪

Test all the buttons in DBAAS for functional and any UX issues.

Verification steps

(How to verify changes)

Test all the buttons in DBAAS for functional and any UX alignment issues. There should no functional impact. Size of button may change compared to prod.

As an Author, to speed up the review process, I considered 🤔

👀 Doing a self review
❔ Our contribution guidelines
🤏 Splitting feature into small PRs
➕ Adding a changeset
🧪 Providing/improving test coverage
🔐 Removing all sensitive information from the code and PR description
🚩 Using a feature flag to protect the release
👣 Providing comprehensive reproduction steps
📑 Providing or updating our documentation
🕛 Scheduling a pair reviewing session
📱 Providing mobile support
♿ Providing accessibility support

I have read and considered all applicable items listed above.

As an Author, before moving this PR from Draft to Open, I confirmed ✅

All unit tests are passing
TypeScript compilation succeeded without errors
Code passes all linting rules

Commit message and pull request title format standards

Note: Remove this section before opening the pull request
Make sure your PR title and commit message on squash and merge are as shown below

<commit type>: [JIRA-ticket-number] - <description>

Commit Types:

feat: New feature for the user (not a part of the code, or ci, ...).
fix: Bugfix for the user (not a fix to build something, ...).
change: Modifying an existing visual UI instance. Such as a component or a feature.
refactor: Restructuring existing code without changing its external behavior or visual UI. Typically to improve readability, maintainability, and performance.
test: New tests or changes to existing tests. Does not change the production code.
upcoming: A new feature that is in progress, not visible to users yet, and usually behind a feature flag.

Example: feat: [M3-1234] - Allow user to view their login history

corya-akamai · 2025-05-05T12:50:37Z

packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreate.test.tsx

+  mockMatchMedia,
+  renderWithTheme,
+  getShadowRootButton,
+} from 'src/utilities/testHelpers'; // Import the utility


Comment not needed

corya-akamai · 2025-05-05T12:52:19Z

packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreate.test.tsx


-    expect(createClusterButton).toBeInTheDocument();
+    const buttonHost = getByTestId('create-database-cluster'); // Query the host element


As long as the getShadowRootButton function has JS docs and comments explaining usage, we don't need the comments in the .test.tsx getByTestId is common so everyone knows what it's doing.

corya-akamai · 2025-05-05T12:53:45Z

...atabases/DatabaseDetail/DatabaseAdvancedConfiguration/DatabaseAdvancedConfiguration.style.ts

@@ -34,3 +34,9 @@ export const GroupItems = styled('ul')(({ theme }) => ({
  },
  padding: 0,
 }));
+
+export const StyledButtonWrapper = styled('div')(({ theme }) => ({


Comments are redundant.

corya-akamai · 2025-05-05T12:54:57Z

...tabases/DatabaseDetail/DatabaseAdvancedConfiguration/DatabaseAdvancedConfigurationDrawer.tsx

@@ -58,6 +59,10 @@ interface Props {
 interface FormValues {
  configs: ConfigurationOption[];
 }
+const StyledAddButtonWrapper = styled('div')(({ theme }) => ({
+  minWidth: 'auto', // Ensure no default minimum width


Department of Redundancy Department :)

corya-akamai · 2025-05-05T12:55:56Z

packages/manager/src/features/Databases/DatabaseDetail/DatabaseResize/DatabaseResize.test.tsx


-      await userEvent.click(resizeButton);
+      await userEvent.click(resizeButton as HTMLButtonElement);


Just curious if something was complaining without the cast?

yeah was getting Argument of type 'HTMLButtonElement | null' is not assignable to parameter of type 'Element'.

corya-akamai · 2025-05-05T12:56:54Z

.../manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettingsMenuItem.tsx

        data-qa-settings-button={buttonText}
        disabled={disabled}
        onClick={onClick}
-        title={buttonText}
+        title={buttonText} // Title will be passed automatically to dom since it is standard HTML attribute


Comment not needed, those are internal impl. details.

corya-akamai · 2025-05-05T12:57:38Z

packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/MaintenanceWindow.tsx

+        hour_of_day: database.updates?.hour_of_day ?? 20,
+        week_of_month: getInitialWeekOfMonth(),
+      },
+      // validationSchema: updateDatabaseSchema,


I see this was already commented. Not sure why though.

corya-akamai · 2025-05-05T12:58:38Z

packages/manager/src/utilities/testHelpers.tsx

+ * @param host - The web component host element.
+ * @returns A promise that resolves to the button element inside the Shadow DOM, or null if not found.
+ */
+export const getShadowRootButton = (


Can we make this function generic getShadowRoot and then you pass in the type you're looking for? Also this needs tests.

Besides making this more generic, I'd like to find a better approach to test these components in Cloud Manager. setTimeOut feels hacky at best and this requires to make all those tests async for just rendering DOM elements. I am hoping there's better support out there for Web Components which i'd hope could be explored before signing up on this.

I’ve generalized the utility and found a solution to eliminate the use of setTimeout. However, we still need to rely on async handling, as there’s a possibility that the Shadow DOM may not be rendered yet when attempting to access shadowRoot.

abailly-akamai

This new component needs to adhere to basic Accessibility standards and to be consistent with its Cloud Manager counterpart. It appears to do it right overall, but I am noticing some discrepancies and lacking a couple needed improvements:

the focus state is barely visible when its variant is primary
there is no active state

abailly-akamai · 2025-05-05T19:48:55Z

packages/manager/src/utilities/testHelpers.tsx

+ * @param host - The web component host element.
+ * @returns A promise that resolves to the button element inside the Shadow DOM, or null if not found.
+ */
+export const getShadowRootButton = (


Besides making this more generic, I'd like to find a better approach to test these components in Cloud Manager. setTimeOut feels hacky at best and this requires to make all those tests async for just rendering DOM elements. I am hoping there's better support out there for Web Components which i'd hope could be explored before signing up on this.

abailly-akamai · 2025-05-05T19:54:53Z

packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/MaintenanceWindow.tsx

          disabled={!formTouched || isSubmitting || disabled}
-          loading={isSubmitting}
+          processing={isSubmitting}


This isn't pertinent to this PR as much as the component itself, but I'd argue that if the goal is to show a loading pattern, the processing naming convention is rather unintuitive. Also, considering these components are going to live side by side with Cloud Manager components for a long time, aiming for prop consistency when possible (for which i believe it to be the case here) would go a long way. CC @jaalah-akamai

abailly-akamai · 2025-05-05T19:59:48Z

...tabases/DatabaseDetail/DatabaseAdvancedConfiguration/DatabaseAdvancedConfigurationDrawer.tsx

+              >
+                Add
+              </Button>
+            </StyledAddButtonWrapper>


I am a bit confused here, why using a container to set en element's width? This points to a stylistic limitation of the component itself

@tvijay-akamai is this still needed with the changes you made to the components?

Yeah this is not needed now after core component change. I have removed it.

cpathipa

Missing changeset.

cpathipa

Overall, LGTM! I left a few nitpicks, nothing blocking, but worth considering. Also, I strongly agree with Alban's feedback. In addition, this PR needs a changeset and conflicts should be resolved before merging.

cpathipa · 2025-05-06T18:04:12Z

packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreate.test.tsx


-    expect(createClusterButton).toBeInTheDocument();
+    const buttonHost = getByTestId('create-database-cluster'); // Query the host element


Nit: Consider replacing getByTestId with getByRole for improved accessibility and alignment with React Testing Library best practices.

Thank you for the suggestion to use getByRole for improved accessibility and alignment with React Testing Library best practices. I completely agree that getByRole is generally preferred as it aligns with accessibility standards and ensures that elements are queried based on their semantic roles.

However, in this specific case, the element we are trying to access resides inside a Shadow DOM. Unfortunately, getByRole does not penetrate the Shadow DOM or have access to elements within the Shadow Root. As a result, we need to rely on getByTestId to query the wrapper element or host element that contains the Shadow DOM. Once we have access to the wrapper, we can use a utility function like getShadowRootElement to query elements inside the Shadow DOM.

This approach ensures that we can still test Shadow DOM elements effectively while working within the constraints of the React Testing Library and the Shadow DOM API.

If there are any alternative suggestions or tools that better support Shadow DOM testing while adhering to accessibility best practices, I’d be happy to explore them further.

tvijay-akamai · 2025-05-08T13:52:48Z

This new component needs to adhere to basic Accessibility standards and to be consistent with its Cloud Manager counterpart. It appears to do it right overall, but I am noticing some discrepancies and lacking a couple needed improvements:

the focus state is barely visible when its variant is primary

there is no active state

@abailly-akamai , please send me where i can find basic accessibility standards for cloud manager.

abailly-akamai · 2025-05-09T17:48:37Z

@tvijay-akamai to recap, here's what we should aim to get this PR merged (spoke to Ellen about it)

This is currently breaking our pipeline, which can't access the remote (this is why you are seeing all these failures)
We need to bump the lib version with the following fix for the button:

missing focus styles (see ng-akamai-core lib for examples)

…on web component

… fix the button focus styles

tvijay-akamai · 2025-05-14T16:23:55Z

@abailly-akamai I have upgraded the web component library version which has the fix for the button focus styles. Please check and approve if looks good.

corya-akamai

@tvijay-akamai let's revisit the e2e tests

abailly-akamai · 2025-05-28T15:14:04Z

@corya-akamai @tvijay-akamai @stayal712 what is the status of this PR?

We think the e2e issues we were seeing could be related to the button implementation itself, not necessarily warranting attempts to find the perfect workaround in Cypress. Once we confirm or rule that out (we could be quite wrong), we can move forward with either an upstream solution or the proposed implementation. Let us know how you want to proceed!

spadhi-akamai · 2025-05-30T11:58:50Z

@abailly-akamai Tarun is currently evaluating the most effective path forward and is exploring several potential approaches. We will keep the group informed once a final decision has been made.

dmcintyr-akamai · 2025-06-02T17:49:04Z

Stupid question: what does 'CDS' stand for?

and i can't see any difference in the button(s) between the before and after screenshots; is that how it's intended to be?

tvijay-akamai · 2025-06-03T02:37:41Z

Stupid question: what does 'CDS' stand for?

and i can't see any difference in the button(s) between the before and after screenshots; is that how it's intended to be?

Not a stupid question at all! 'CDS' stands for Akamai Core Design System. It's a comprehensive design framework that provides standardized UI components and design guidelines to ensure consistency and efficiency across Akamai's applications and services.

Yes, no difference is intentional. While the visual appearance of the buttons remains the same, the underlying implementation has been updated. Goal is to transition to using a new, framework-agnostic component. This change doesn't affect the look or behavior of the buttons but enhances their flexibility and maintainability across different Akamai platforms.

tvijay-akamai · 2025-06-20T11:21:18Z

@corya-akamai @tvijay-akamai @stayal712 what is the status of this PR?

We think the e2e issues we were seeing could be related to the button implementation itself, not necessarily warranting attempts to find the perfect workaround in Cypress. Once we confirm or rule that out (we could be quite wrong), we can move forward with either an upstream solution or the proposed implementation. Let us know how you want to proceed!

@abailly-akamai We explored multiple approaches including the one you previously suggested to address the Cypress implementation preference specifically related to buttons of type "submit" in our web component. There are only 2 button type submit. (For other button types there is no concern as discussed with Sakshi.)

While we did identify one solution that resolves the issue, the team decided not to proceed with it. The team's consensus is that introducing code changes solely to accommodate Cypress’s implementation preferences is not optimal, especially since there is an alternative way to simulate and test submit-type button behavior in our e2e test cases. For all other button types, our current approach works as expected.

Let us know if you’d like more details on the alternatives we considered. we can separately sync-up on the same.

corya-akamai

Thanks for looking into the alternatives @tvijay-akamai

corya-akamai · 2025-06-23T21:08:20Z

...ges/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettings.test.tsx

-    const button2 = getByTitle('Save Changes');
-    const button3 = getByRole('button', { name: 'Manage Access' });
+
+    const resetPasswordButtonHost = getByTestId(


Thanks for making the variable names more explicit.

corya-akamai

The styling on the settings tab looks off

linode-gh-bot · 2025-06-26T14:16:59Z

Cloud Manager UI test results

🎉 666 passing tests on test run #22 ↗︎

❌ Failing	✅ Passing	↪️ Skipped	🕐 Duration
`0 Failing`	`666 Passing`	`4 Skipped`	`138m 45s`

tvijay-akamai requested a review from a team as a code owner May 2, 2025 11:21

tvijay-akamai requested review from dwiley-akamai and abailly-akamai and removed request for a team May 2, 2025 11:21

github-project-automation bot added this to Cloud Manager May 2, 2025

github-project-automation bot moved this to Review in Cloud Manager May 2, 2025

cpathipa assigned tvijay-akamai May 2, 2025

cpathipa added the DBaaS Relates to Database as a Service label May 2, 2025

cpathipa requested review from cpathipa and corya-akamai and removed request for dwiley-akamai May 2, 2025 16:28

cpathipa added the Merge Conflicts label May 2, 2025

corya-akamai reviewed May 5, 2025

View reviewed changes

abailly-akamai reviewed May 5, 2025

View reviewed changes

cpathipa reviewed May 6, 2025

View reviewed changes

cpathipa added the Missing Changeset label May 6, 2025

cpathipa reviewed May 6, 2025

View reviewed changes

tvijay-akamai force-pushed the feature/UIE-8743 branch from d3aaa19 to bd3b76f Compare May 7, 2025 08:31

tvijay-akamai removed Missing Changeset Merge Conflicts labels May 7, 2025

corya-akamai approved these changes May 9, 2025

View reviewed changes

rodonnel-akamai mentioned this pull request May 12, 2025

change: [UIE-8743] - Replaced Button component in DBAAS with Akamai CDS button Web Component #12199

Closed

change: [UIE-8743] - Replaced Button component in DBAAS with CDS butt…

76e0e37

…on web component

tvijay-akamai force-pushed the feature/UIE-8743 branch from bd3b76f to 76e0e37 Compare May 13, 2025 15:07

tvijay-akamai added the 🚨 Urgent label May 13, 2025

cpathipa added the Do Not Merge label May 14, 2025

change: [UIE-8743] - upgrade web component library version which will…

8c21f66

… fix the button focus styles

corya-akamai requested changes May 22, 2025

View reviewed changes

github-project-automation bot moved this from Approved to Changes Requested in Cloud Manager May 22, 2025

change: [UIE-8743] - cypress e2e tests fix from sakshi

7924fd7

tvijay-akamai added Do Not Merge and removed Add'tl Approval Needed Waiting on another approval! labels May 27, 2025

bnussman-akamai added the Merge Conflicts label Jun 5, 2025

tvijay-akamai and others added 4 commits June 20, 2025 15:01

UIE-8743 Resolved merge conflicts

1b63b8c

UIE-8743 Resolved merge conflicts

7d6d096

Merge branch 'develop' into feature/UIE-8743

bbc2ce1

Resolved merge conflicts

ad04d1a

corya-akamai approved these changes Jun 23, 2025

View reviewed changes

github-project-automation bot moved this from Changes Requested to Approved in Cloud Manager Jun 23, 2025

corya-akamai removed Do Not Merge Merge Conflicts labels Jun 23, 2025

corya-akamai reviewed Jun 23, 2025

View reviewed changes

corya-akamai requested review from corya-akamai and stayal712 June 23, 2025 21:20

fixed cypress e2e tests

1c9945d

corya-akamai approved these changes Jun 26, 2025

View reviewed changes

Merge branch 'develop' into feature/UIE-8743

de2e634

cpathipa approved these changes Jun 26, 2025

View reviewed changes

stayal712 approved these changes Jun 26, 2025

View reviewed changes

cpathipa merged commit 091471a into linode:develop Jun 27, 2025
35 checks passed

github-project-automation bot moved this from Approved to Merged in Cloud Manager Jun 27, 2025


		expect(createClusterButton).toBeInTheDocument();
		const buttonHost = getByTestId('create-database-cluster'); // Query the host element


		await userEvent.click(resizeButton);
		await userEvent.click(resizeButton as HTMLButtonElement);

change: [UIE-8743] - Replaced Button component in DBAAS with Akamai CDS button Web Component #12148

change: [UIE-8743] - Replaced Button component in DBAAS with Akamai CDS button Web Component #12148

Uh oh!

Conversation

tvijay-akamai commented May 2, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description 📝

Changes 🔄

Target release date 🗓️

Preview 📷

How to test 🧪

Verification steps

As an Author, to speed up the review process, I considered 🤔

As an Author, before moving this PR from Draft to Open, I confirmed ✅

Commit message and pull request title format standards

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

abailly-akamai left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

cpathipa left a comment

Choose a reason for hiding this comment

Uh oh!

cpathipa left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

tvijay-akamai commented May 8, 2025

Uh oh!

abailly-akamai commented May 9, 2025

Uh oh!

tvijay-akamai commented May 14, 2025

Uh oh!

corya-akamai left a comment

Choose a reason for hiding this comment

Uh oh!

abailly-akamai commented May 28, 2025

Uh oh!

spadhi-akamai commented May 30, 2025

Uh oh!

dmcintyr-akamai commented Jun 2, 2025

Uh oh!

tvijay-akamai commented Jun 3, 2025

Uh oh!

tvijay-akamai commented May 2, 2025 •

edited

Loading