change: [UIE-8744] - Replace text field in DBaaS create page with Akamai CDS text field Web Component

packages/manager/.changeset/pr-12225-changed-1747318195258.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Changed
+---
+
+DBaaS: Replace the text field component under DBAAS create DB cluster page with Akamai CDS text field web component ([#12225](https://github.com/linode/manager/pull/12225))

packages/manager/package.json

@@ -45,7 +45,7 @@
     "@tanstack/react-query-devtools": "5.51.24",
     "@tanstack/react-router": "^1.111.11",
     "@xterm/xterm": "^5.5.0",
-    "akamai-cds-react-components": "0.0.1-alpha.6",
+    "akamai-cds-react-components": "0.0.1-alpha.8",
     "algoliasearch": "^4.14.3",
     "axios": "~1.8.3",
     "braintree-web": "^3.92.2",

packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreate.style.ts

@@ -1,8 +1,10 @@
-import { Box, Button, TextField, Typography } from '@linode/ui';
+import { Box, Button, Typography } from '@linode/ui';
 import { Grid, styled } from '@mui/material';
 
 import { PlansPanel } from 'src/features/components/PlansPanel/PlansPanel';
 
+import { TextFieldWrapper } from '../TextFieldWrapper';
+
 export const StyledLabelTooltip = styled(Box, {
   label: 'StyledLabelTooltip',
 })(() => ({
@@ -14,7 +16,7 @@ export const StyledLabelTooltip = styled(Box, {
   },
 }));
 
-export const StyledTextField = styled(TextField, {
+export const StyledTextField = styled(TextFieldWrapper, {
   label: 'StyledTextField',
 })(({ theme }) => ({
   '& .MuiTooltip-tooltip': {

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

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { describe, expect, it } from 'vitest';
+
+import { renderWithTheme } from 'src/utilities/testHelpers';
+
+import { TextFieldWrapper } from './TextFieldWrapper';
+
+describe('TextFieldWrapper', () => {
+  const props = {
+    label: 'Cluster Label',
+    value: 'test',
+  };
+
+  it('Renders a TextField with the given label and initial value', async () => {
+    const { getByTestId, getByText } = renderWithTheme(
+      <TextFieldWrapper {...props} />
+    );
+    const textFieldHost = await getByTestId('textfield-input');
+    const shadowTextField = textFieldHost?.shadowRoot?.querySelector('input');
+
+    expect(getByText('Cluster Label')).toBeInTheDocument();
+    expect(shadowTextField).toHaveValue('test');
+  });
+
+  it('Renders an error message on error', async () => {
+    const { getByText } = renderWithTheme(
+      <TextFieldWrapper errorText="There was an error" {...props} />
+    );
+    expect(getByText(/There was an error/i)).toBeInTheDocument();
+  });
+
+  it('text field should be disabled on disable', async () => {
+    const { getByTestId } = renderWithTheme(
+      <TextFieldWrapper disabled {...props} />
+    );
+    const textFieldHost = await getByTestId('textfield-input');
+
+    expect(textFieldHost).toBeDisabled();
+  });
+});

packages/manager/src/features/Databases/TextFieldWrapper.tsx

@@ -0,0 +1,171 @@
+import { convertToKebabCase } from '@linode/ui';
+import { Box, FormHelperText, InputLabel, TooltipIcon } from '@linode/ui';
+import { useTheme } from '@mui/material/styles';
+import { TextField } from 'akamai-cds-react-components';
+import React, { useId, useRef } from 'react';
+
+interface BaseProps {
+  disabled?: boolean;
+  /**
+   * When defined, makes the input show an error state with the defined text
+   */
+  errorText?: string;
+  label: string;
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  value?: Value;
+}
+
+type Value = string | undefined;
+
+interface InputToolTipProps {
+  tooltipText?: JSX.Element | string;
+}
+
+type TextFieldWrapperProps = BaseProps & InputToolTipProps;
+
+export const TextFieldWrapper = (props: TextFieldWrapperProps) => {
+  const { disabled, errorText, label, onChange, tooltipText, value } = props;
+
+  const [_value, setValue] = React.useState<Value>(value ?? '');
+  const theme = useTheme();
+  const inputRef = useRef<HTMLInputElement | null>(null); // Ref for the input field
+
+  const isControlled = value !== undefined;
+
+  const useFieldIds = ({
+    hasError = false,
+    label,
+  }: {
+    hasError?: boolean;
+    label: string;
+  }) => {
+    const fallbackId = useId();
+    const validInputId = label ? convertToKebabCase(label) : fallbackId;
+    const helperTextId = `${validInputId}-helper-text`;
+    const errorTextId = `${validInputId}-error-text`;
+    const errorScrollClassName = hasError ? `error-for-scroll` : '';
+
+    return {
+      errorScrollClassName,
+      errorTextId,
+      helperTextId,
+      validInputId,
+    };
+  };
+
+  const { errorScrollClassName, errorTextId, validInputId } = useFieldIds({
+    hasError: Boolean(errorText),
+    label,
+  });
+
+  React.useEffect(() => {
+    if (isControlled) {
+      setValue(value);
+    }
+  }, [value, isControlled]);
+
+  // Simulate htmlFor for the label as it doesn't work with shadow DOM
+  const handleLabelClick = () => {
+    if (inputRef.current) {
+      const shadowRoot = inputRef.current.shadowRoot;
+      if (shadowRoot) {
+        const inputElement = shadowRoot.querySelector('input');
+        if (inputElement) {
+          (inputElement as HTMLElement).focus();
+        }
+      }
+    }
+  };
+
+  return (
+    <Box
+      className={`${errorText ? errorScrollClassName : ''}`}
+      sx={{
+        ...(Boolean(tooltipText) && {
+          alignItems: 'flex-end',
+          display: 'flex',
+          flexWrap: 'wrap',
+        }),
+      }}
+    >
+      <Box
+        alignItems={'center'}
+        data-testid="inputLabelWrapper"
+        display="flex"
+        sx={{
+          marginBottom: theme.spacingFunction(8),
+          marginTop: theme.spacingFunction(16),
+        }}
+      >
+        <InputLabel
+          data-qa-textfield-label={label}
+          htmlFor={validInputId}
+          onClick={handleLabelClick}
+          sx={{
+            marginBottom: 0,
+            transform: 'none',
+          }}
+        >
+          {label}
+        </InputLabel>
+      </Box>
+      <Box
+        sx={{
+          ...(Boolean(tooltipText) && {
+            display: 'flex',
+            width: '100%',
+          }),
+        }}
+      >
+        <Box
+          sx={{
+            width: '416px',
+            minWidth: '120px',
+          }}
+        >
+          <TextField
+            aria-errormessage={errorText ? errorTextId : undefined}
+            aria-invalid={!!errorText}
+            className={errorText ? 'error' : ''}
+            data-testid="textfield-input"
+            disabled={disabled}
+            id={validInputId}
+            onChange={(e) =>
+              onChange?.(e as unknown as React.ChangeEvent<HTMLInputElement>)
+            }
+            ref={inputRef as React.RefObject<never>}
+            value={_value}
+          />
+        </Box>
+        {tooltipText && (
+          <TooltipIcon
+            status="help"
+            sxTooltipIcon={{
+              height: '34px',
+              margin: '0px 0px 0px 4px',
+              padding: '17px',
+              width: '34px',
+            }}
+            text={tooltipText}
+          />
+        )}
+      </Box>
+      {errorText && (
+        <FormHelperText
+          data-qa-textfield-error-text={label}
+          role="alert"
+          sx={{
+            alignItems: 'center',
+            color: theme.palette.error.dark,
+            display: 'flex',
+            left: 5,
+            top: 42,
+            width: '100%',
+          }}
+        >
+          {errorText}
+        </FormHelperText>
+      )}
+    </Box>
+  );
+};