[LG-5432] feat(suggestions): add apply state and improve component flexibility (#3033)

* feat(suggestions): add apply state, remove fixed width, and spread props to root node

* docs(suggestions): update README

* chore(suggestions): changeset

* chore: lint fix

* test(suggestions): remove redundant tests

Author: stephl3

.changeset/puny-laws-thank.md

@@ -0,0 +1,5 @@
+---
+'@lg-chat/suggestions': minor
+---
+
+[LG-5432](https://jira.mongodb.org/browse/LG-5432): add `'apply'` state value to conditionally render apply button. `'unset'` state will now no longer render the apply button. Also enables HTMLDivElement props to spread to the root container node and removes the fixed width. Styles can be further customized using `className` prop.

chat/suggestions/README.md

@@ -37,13 +37,20 @@ const configurationParameters = [
   { key: 'vCPUs', value: '2 vCPUs' },
 ];
 
-// Basic suggestion card with apply button
+// Basic suggestion card
 <SuggestedActions
   state={State.Unset}
   configurationParameters={configurationParameters}
   onClickApply={() => console.log('Apply clicked')}
 />
 
+// Apply state with apply button
+<SuggestedActions
+  state={State.Apply}
+  configurationParameters={configurationParameters}
+  onClickApply={() => console.log('Apply clicked')}
+/>
+
 // Success state with applied parameters
 <SuggestedActions
   state={State.Success}
@@ -75,7 +82,8 @@ The `State` enum provides the following options:
 
 | State     | Value       | Description                                            |
 | --------- | ----------- | ------------------------------------------------------ |
-| `Unset`   | `'unset'`   | Shows configuration suggestions with an "Apply" button |
+| `Unset`   | `'unset'`   | Shows configuration suggestions                        |
+| `Apply`   | `'apply'`   | Shows configuration suggestions with an "Apply" button |
 | `Success` | `'success'` | Shows success banner with applied parameters           |
 | `Error`   | `'error'`   | Shows error banner with failed parameters              |
 
@@ -93,16 +101,16 @@ interface ConfigurationParameter {
 
 The component automatically filters and displays parameters based on their state:
 
-- **Table**: Shows parameters with `unset` state (or no state)
+- **Table**: Shows parameters with `unset` or `apply` state (or no state)
 - **Success Banner**: Shows parameters with `success` state
 - **Error Banner**: Shows parameters with `error` state
 
 ## Properties
 
 | Prop                      | Type                      | Description                                                                                  | Default |
 | ------------------------- | ------------------------- | -------------------------------------------------------------------------------------------- | ------- |
-| `state`                   | `State`                   | Determines the current state and rendering behavior of the suggestion card                   |         |
 | `configurationParameters` | `ConfigurationParameters` | Array of configuration parameters, each with key, value, and optional state                  |         |
-| `onClickApply`            | `() => void`              | Callback fired when the user clicks the "Apply" button (shown when `state` is `State.Unset`) |         |
 | `darkMode`                | `boolean`                 | Determines if the component is rendered in dark mode                                         | `false` |
+| `onClickApply`            | `() => void`              | Callback fired when the user clicks the "Apply" button (shown when `state` is `State.Apply`) |         |
+| `state`                   | `State`                   | Determines the current state and rendering behavior of the suggestion card                   |         |
 | `...`                     | `HTMLElementProps<'div'>` | Props spread on root element                                                                 |         |

chat/suggestions/src/SuggestedActions/SuggestedActions.spec.tsx

@@ -185,6 +185,13 @@ describe('chat/suggestions', () => {
   describe('Apply button', () => {
     test('renders when state is Unset', () => {
       renderSuggestedActions({ state: State.Unset });
+      expect(
+        screen.getByText('Apply configuration to your cluster?'),
+      ).toBeInTheDocument();
+    });
+
+    test('renders when state is Apply', () => {
+      renderSuggestedActions({ state: State.Apply });
       const button = screen.getByRole('button', {
         name: /apply these suggestions/i,
       });
@@ -205,9 +212,9 @@ describe('chat/suggestions', () => {
       ).not.toBeInTheDocument();
     });
 
-    test('calls onClickApply when clicked', () => {
+    test('calls onClickApply when clicked in Apply state', () => {
       const onClickApply = jest.fn();
-      renderSuggestedActions({ state: State.Unset, onClickApply });
+      renderSuggestedActions({ state: State.Apply, onClickApply });
 
       const button = screen.getByRole('button', {
         name: /apply these suggestions/i,
@@ -216,16 +223,6 @@ describe('chat/suggestions', () => {
 
       expect(onClickApply).toHaveBeenCalledTimes(1);
     });
-
-    test('has correct button attributes', () => {
-      renderSuggestedActions({ state: State.Unset });
-      const button = screen.getByRole('button', {
-        name: /apply these suggestions/i,
-      });
-
-      expect(button).toHaveAttribute('type', 'button');
-      expect(button).not.toBeDisabled();
-    });
   });
 
   describe('Status banner', () => {

chat/suggestions/src/SuggestedActions/SuggestedActions.styles.ts

@@ -1,4 +1,4 @@
-import { css } from '@leafygreen-ui/emotion';
+import { css, cx } from '@leafygreen-ui/emotion';
 import { Theme } from '@leafygreen-ui/lib';
 import {
   borderRadius,
@@ -8,15 +8,16 @@ import {
   typeScales,
 } from '@leafygreen-ui/tokens';
 
-const DIVIDER_WIDTH = 353;
-
-export const dividerStyles = css`
-  width: ${DIVIDER_WIDTH}px;
+export const baseContainerStyles = css`
+  width: 100%;
   display: flex;
   flex-direction: column;
   gap: ${spacing[400]}px;
 `;
 
+export const getContainerStyles = (className?: string) =>
+  cx(baseContainerStyles, className);
+
 export const getSuggestedActionsWrapperStyles = (theme: Theme) => css`
   background-color: ${color[theme].background.secondary.default};
   border: 1px solid ${color[theme].border.secondary.default};

chat/suggestions/src/SuggestedActions/SuggestedActions.tsx

@@ -12,7 +12,7 @@ import { StatusBanner } from '../StatusBanner/StatusBanner';
 import {
   applyButtonStyles,
   boldedTextStyle,
-  dividerStyles,
+  getContainerStyles,
   getSuggestedActionsWrapperStyles,
   tableCellStyles,
   tableHeaderStyles,
@@ -21,13 +21,17 @@ import {
 import { SuggestedActionsProps } from './SuggestedActions.types';
 
 const SuggestedActions = forwardRef<HTMLDivElement, SuggestedActionsProps>(
-  (props: SuggestedActionsProps, fwdRef: React.Ref<HTMLDivElement>) => {
-    const {
-      state,
+  (
+    {
+      className,
       configurationParameters,
-      onClickApply,
       darkMode: darkModeProp,
-    } = props;
+      onClickApply,
+      state,
+      ...rest
+    },
+    fwdRef,
+  ) => {
     const { theme, darkMode } = useDarkMode(darkModeProp);
 
     // Filter parameters by state
@@ -40,7 +44,7 @@ const SuggestedActions = forwardRef<HTMLDivElement, SuggestedActionsProps>(
 
     return (
       <LeafyGreenProvider darkMode={darkMode}>
-        <div ref={fwdRef} className={dividerStyles}>
+        <div ref={fwdRef} className={getContainerStyles(className)} {...rest}>
           <div className={getSuggestedActionsWrapperStyles(theme)}>
             <div className={boldedTextStyle}>
               Apply configuration to your cluster?
@@ -53,7 +57,7 @@ const SuggestedActions = forwardRef<HTMLDivElement, SuggestedActionsProps>(
                 </tr>
               ))}
             </table>
-            {state === State.Unset && (
+            {state === State.Apply && (
               <Button
                 className={applyButtonStyles}
                 variant="primary"

chat/suggestions/src/SuggestedActions/SuggestedActions.types.ts

@@ -5,20 +5,23 @@ import { ConfigurationParameters, State } from '../shared.types';
 export interface SuggestedActionsProps
   extends HTMLElementProps<'div'>,
     DarkModeProps {
-  /**
-   * Determines rendering of the SuggestedActions:
-   * - `'Unset'` will render suggestions and the "Apply" button
-   * - `'Success'` will render success banner with applied suggestions
-   * - `'Error'` will render error banner with instructions to manually apply suggestions
-   */
-  state: State;
   /**
    * Configuration parameters with their individual state values.
-   * Each parameter includes a key, value, and state (unset/success/error).
+   * Each parameter includes a key, value, and state (unset/apply/success/error).
    */
   configurationParameters: ConfigurationParameters;
+
   /**
    * Callback fired when the user clicks the "Apply" button
    */
   onClickApply: () => void;
+
+  /**
+   * Determines rendering of the SuggestedActions:
+   * - `'Unset'` will render suggestions
+   * - `'Apply'` will render suggestions and the "Apply" button
+   * - `'Success'` will render success banner with applied suggestions
+   * - `'Error'` will render error banner with instructions to manually apply suggestions
+   */
+  state: State;
 }

chat/suggestions/src/shared.types.ts

@@ -3,6 +3,7 @@
  */
 export const State = {
   Unset: 'unset',
+  Apply: 'apply',
   Success: 'success',
   Error: 'error',
 } as const;