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 🗓️

May 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.

jdamore-linode · 2025-05-15T14:51:25Z

Still looking into these test failures with @stayal712, but in the meantime I'm noticing a couple regressions:

Button alignment on DB settings tab:

Prod	This PR

Help button alignment next to cert download button (and possibly icon color? Not sure which color is right):

Prod	This PR

Maintenance section "Upgrade Version" button alignment and appearance

Prod	This PR

… and fixed tooltip alignment

abailly-akamai · 2025-05-21T13:53:31Z

@jdamore-linode is there an update on a solution to get the tests to pass here?

jdamore-linode · 2025-05-21T14:10:53Z

@abailly-akamai I believe @stayal712 is working on the tests, I can follow up with her. I am interested in the recent commits to add test IDs everywhere because in my opinion that should not be necessary just to click a button.

We discovered that any button that has an onClick prop defined can be interacted with via cy.click(), but buttons that rely on form submission do not receive the click event. Because I was able to confirm that clicking other buttons within shadow DOMs works fine, my instinct is that this is a bug with the button component that should be fixed in the CDS library, not worked around in our tests.

In the meantime, there are still unaddressed issues.

tvijay-akamai · 2025-05-21T15:17:08Z

Still looking into these test failures with @stayal712, but in the meantime I'm noticing a couple regressions:

Button alignment on DB settings tab:

Prod This PR

Help button alignment next to cert download button (and possibly icon color? Not sure which color is right):

Prod This PR

Maintenance section "Upgrade Version" button alignment and appearance

Prod This PR

@jdamore-linode These are addressed: #12148 (comment). Please check if looks fine.

…equested by sakshi to add to this PR

jdamore-linode

Happy to see the tests passing, thanks @stayal712! I have some comments/questions about a few of the places you're interacting with the CDS buttons

jdamore-linode · 2025-05-22T13:42:09Z

packages/manager/cypress/support/ui/buttons.ts

+   */
+  findButtonByTitle: (cdsButtonTitle: string): Cypress.Chainable => {
+    return cy
+      .findAllByText(cdsButtonTitle)


Suggested change

.findAllByText(cdsButtonTitle)

.findByText(cdsButtonTitle)

jdamore-linode · 2025-05-22T13:46:14Z

packages/manager/cypress/e2e/core/databases/create-database.spec.ts

+          .then((btn) => {
+            btn[0].click(); // Native DOM click
+          });


@stayal712 and @tvijay-akamai, do you have an explanation for why this workaround is necessary?

In my testing, I'm able to implement a simple (non-CDS) button in a shadow root, set up an event handler, and trigger it by clicking via cy.click(). Why doesn't this work with the CDS button? Why aren't we running into any of these same issues with the text field component?

I'm willing to resort to hacky workarounds like this if they're necessary, but we should at least understand why. This is a lot of work to click on a button, and the fact that this is only an issue with the CDS button makes it sound like a bug. I want to rule that out, and I especially want to avoid implementing more hacks like this as we introduce more CDS components.

I am going to try to offer a potential fix, without confidence it'll work. Bear in mind, my knowledge of web components is limited, however I'd still like to explore this before moving forward with the workaround proposed, which seem to be pointing at a potential limitation of the component.

https://git.source.akamai.com/projects/FEE/repos/cds-web-components/browse/packages/cds-web-components/src/components/button/button.element.ts

Custom elements sometimes don’t work well with React’s synthetic event system. onClick in React won’t fire unless the component dispatches a standard DOM event from the host. This may be the issue we've been noticing with Cypress.

Currently, this listens to @click internally on the native button, but we don't re-emit the event from the custom element. Which could perhaps be done this way:

private _handleClick(e: MouseEvent) { if (this.type === 'submit') { const form = this.closest('form'); if (form) { e.preventDefault(); form.requestSubmit(); } } // Re-emit the click event from the custom element host this.dispatchEvent(new MouseEvent('click', { bubbles: true, composed: true, cancelable: true, })); }

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/dispatchEvent

Again, not sure this will fix it, but before approving I'd like to explore this because it would also have important implications for other Web Components making their way to Cloud Manager. It could even be expanded further from what I could read, but not sure how helpful that would be.

this.dispatchEvent(new MouseEvent('click', { bubbles: true, composed: true, cancelable: true, detail: e.detail, screenX: e.screenX, screenY: e.screenY, clientX: e.clientX, clientY: e.clientY, ctrlKey: e.ctrlKey, shiftKey: e.shiftKey, altKey: e.altKey, metaKey: e.metaKey, button: e.button, relatedTarget: e.relatedTarget, }));

@abailly-akamai
Thank you for your suggestion. Tarun has started looking into your suggestion and will also explore alternative solutions with QA team to find the best way out to access shadow dom elements in cypress, in the next release. Meanwhile, request you to move forward with this PR for the current release.

Approved. It would be greatly appreciated if the next PR for a web component takes in consideration all the problems raised in this one, and the compatibility with our codebase not to be an afterthought. Merging this as-is gives us no guaranty there will be a follow up. The branch cut is in a week by the way.

jdamore-linode · 2025-05-22T13:46:39Z

packages/manager/cypress/e2e/core/databases/create-database.spec.ts

+        cy.get('[data-testid="create-database-cluster"]')
+          .shadow()
+          .find('button')
+          .first()


Can you use ui.cdsButton here?

Replaced getting shadow element with ui.cdsButton and kept .click() as a work around for this release.

jdamore-linode · 2025-05-22T13:48:58Z

packages/manager/cypress/e2e/core/databases/update-database.spec.ts

+  cy.get('[data-testid="save-changes-button"]')
+    .shadow()
+    .find('button')
+    .first()
+    .then((btn) => {
+      btn[0].click(); // Native DOM click
+    });


Same questions as before:

Can we use ui.cdsButton here

Why isn't clicking working on submit buttons that don't have an onClick prop specified?

Replaced getting shadow element with ui.cdsButton and kept .click() as a work around for this release.

jdamore-linode

Echoing @abailly-akamai's thoughts but approving in the interest of keeping things moving.

I think the way these components get used in apps warrants more consideration from the CDS team; if every new CDS component is going to require wrappers, hacks, and workarounds that increase the complexity of the codebases integrating them, then this seems extremely counterproductive to the goals of the project.

jdamore-linode · 2025-05-22T18:38:54Z

@tvijay-akamai it looks like those test failures need to be addressed, cc @stayal712. It looks like you might need to narrow your selection to only click on the button you want using .within like we discussed earlier

stayal712 · 2025-05-22T19:03:06Z

@tvijay-akamai it looks like those test failures need to be addressed, cc @stayal712. It looks like you might need to narrow your selection to only click on the button you want using .within like we discussed earlier

Thanks @jdamore-linode, I have made the changes to the restricted-user-details-pages.spec.ts script as well.

corya-akamai

@tvijay-akamai let's revisit the e2e tests

linode-gh-bot · 2025-05-23T06:25:30Z

Cloud Manager UI test results

🎉 605 passing tests on test run #16 ↗︎

❌ Failing	✅ Passing	↪️ Skipped	🕐 Duration
`0 Failing`	`605 Passing`	`4 Skipped`	`120m 14s`

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

tvijay-akamai removed the 🚨 Urgent label May 14, 2025

tvijay-akamai added 3 commits May 16, 2025 17:17

change: [UIE-8743] - resolved merge conflicts

61cad37

change: [UIE-8743] - added test id to some buttons as requested by qa

1508b46

change: [UIE-8743] - added test id to some buttons as requested by qa…

3afdade

… and fixed tooltip alignment

tvijay-akamai removed the Do Not Merge label May 21, 2025

tvijay-akamai added 2 commits May 21, 2025 20:17

Merge branch 'develop' into feature/UIE-8743

5f59acf

change: [UIE-8743] - upgraded cds version to fix the button size issue

9f32bb7

change: [UIE-8743] - Adding fixed cypress e2e tests provided and as r…

5ff2e49

…equested by sakshi to add to this PR

tvijay-akamai requested a review from a team as a code owner May 22, 2025 06:53

tvijay-akamai requested review from dmcintyr-akamai and removed request for a team May 22, 2025 06:53

tvijay-akamai added 2 commits May 22, 2025 14:53

change: [UIE-8743] - fixed cypress e2e test

fc7702c

Merge branch 'develop' into feature/UIE-8743

d86d553

tvijay-akamai added the Add'tl Approval Needed Waiting on another approval! label May 22, 2025

jdamore-linode reviewed May 22, 2025

View reviewed changes

Merge branch 'develop' into feature/UIE-8743

3dacb66

abailly-akamai approved these changes May 22, 2025

View reviewed changes

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

jdamore-linode approved these changes May 22, 2025

View reviewed changes

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

6de8a33

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


		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

Are you sure you want to change the base?

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!

jdamore-linode commented May 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

abailly-akamai commented May 21, 2025

Uh oh!

jdamore-linode commented May 21, 2025

Uh oh!

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

Uh oh!

Uh oh!

tvijay-akamai commented May 2, 2025 •

edited

Loading

jdamore-linode commented May 15, 2025 •

edited

Loading

tvijay-akamai commented May 21, 2025 •

edited

Loading

spadhi-akamai May 22, 2025 •

edited

Loading