feat: Add hide add-button, additional actions slot to attribute-editor (#4014)

Author: SpyZzey

pages/attribute-editor/permutations.page.tsx

@@ -4,6 +4,7 @@ import React from 'react';
 
 import AttributeEditor, { AttributeEditorProps } from '~components/attribute-editor';
 import Box from '~components/box';
+import Button from '~components/button';
 import Input from '~components/input';
 import StatusIndicator from '~components/status-indicator';
 
@@ -144,6 +145,41 @@ export const permutations = createPermutations<AttributeEditorProps<Item>>([
     addButtonText: ['Add item'],
     removeButtonText: ['Remove item'],
   },
+  {
+    definition: [definition2],
+    items: [defaultItems],
+    addButtonText: ['Add item'],
+    removeButtonText: ['Remove item'],
+    additionalActions: [
+      <Button key="test-button" variant="normal">
+        Test Button
+      </Button>,
+      [
+        <Button key="import" variant="normal">
+          Import
+        </Button>,
+        <Button key="export" variant="normal">
+          Export
+        </Button>,
+        <Button key="long-text" variant="normal">
+          A very long button text to try out wrapping to a second row
+        </Button>,
+      ],
+    ],
+  },
+  {
+    definition: [definition2],
+    items: [defaultItems],
+    removeButtonText: ['Remove item'],
+    hideAddButton: [true],
+    addButtonText: ['Add item'],
+    additionalActions: [
+      <Button key="add-custom" variant="primary">
+        Add custom item
+      </Button>,
+      undefined,
+    ],
+  },
 ]);
 
 export default function AttributeEditorPermutations() {

src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap

@@ -2614,6 +2614,12 @@ A \`gridLayout\` is an array of breakpoint definitions. Each definition consists
       "optional": true,
       "type": "ReadonlyArray<AttributeEditorProps.GridLayout>",
     },
+    {
+      "description": "Determines whether the add button is hidden",
+      "name": "hideAddButton",
+      "optional": true,
+      "type": "boolean",
+    },
     {
       "description": "An object containing all the necessary localized strings required by the component.",
       "i18nTag": true,
@@ -2721,6 +2727,11 @@ The display of a row is handled by the \`definition\` property.",
     },
   ],
   "regions": [
+    {
+      "description": "Specifies additional actions displayed next to the add-button (or instead of the add-button if hidden).",
+      "isDefault": false,
+      "name": "additionalActions",
+    },
     {
       "description": "Displayed below the add button. Use it for additional information related to the attribute editor.",
       "isDefault": false,

src/attribute-editor/__tests__/attribute-editor.test.tsx

@@ -6,6 +6,7 @@ import { render, waitFor } from '@testing-library/react';
 import { useContainerQuery } from '@cloudscape-design/component-toolkit';
 
 import AttributeEditor, { AttributeEditorProps } from '../../../lib/components/attribute-editor';
+import Button from '../../../lib/components/button';
 import ButtonDropdown from '../../../lib/components/button-dropdown';
 import TestI18nProvider from '../../../lib/components/i18n/testing';
 import Input from '../../../lib/components/input';
@@ -209,6 +210,21 @@ describe('Attribute Editor', () => {
       expect(wrapper.findAddButton().getElement()).toHaveFocus();
     });
 
+    test('hides add button when hideAddButton is true', () => {
+      const wrapper = renderAttributeEditor({ hideAddButton: true });
+      expect(wrapper.findAddButton()).toBeNull();
+    });
+
+    test('shows add button when hideAddButton is false', () => {
+      const wrapper = renderAttributeEditor({ hideAddButton: false });
+      expect(wrapper.findAddButton()).not.toBeNull();
+    });
+
+    test('shows add button by default when hideAddButton is not specified', () => {
+      const wrapper = renderAttributeEditor();
+      expect(wrapper.findAddButton()).not.toBeNull();
+    });
+
     test('has no aria-describedby if there is no additional info', () => {
       const wrapper = renderAttributeEditor({ ...defaultProps });
       const buttonElement = wrapper.findAddButton().getElement();
@@ -652,6 +668,16 @@ describe('Attribute Editor', () => {
     });
   });
 
+  describe('additional actions', () => {
+    test('renders additional actions alongside add button if provided', () => {
+      const additionalActions = <Button data-testid="additional-test-button">Additional Action Button</Button>;
+      const { container } = render(<AttributeEditor {...defaultProps} additionalActions={additionalActions} />);
+      const wrapper = createWrapper(container).findAttributeEditor()!;
+      expect(wrapper.getElement().querySelector('[data-testid="additional-test-button"]')).not.toBeNull();
+      expect(wrapper.findAddButton()).not.toBeNull();
+    });
+  });
+
   describe('custom buttons', () => {
     test('allows a custom row action', () => {
       const { container } = render(

src/attribute-editor/index.tsx

@@ -10,7 +10,14 @@ import InternalAttributeEditor from './internal';
 
 const AttributeEditor = React.forwardRef(
   <T,>(
-    { items = [], addButtonVariant = 'normal', isItemRemovable = () => true, ...props }: AttributeEditorProps<T>,
+    {
+      items = [],
+      addButtonVariant = 'normal',
+      isItemRemovable = () => true,
+      hideAddButton,
+      additionalActions,
+      ...props
+    }: AttributeEditorProps<T>,
     ref: React.Ref<AttributeEditorProps.Ref>
   ) => {
     const baseComponentProps = useBaseComponent('AttributeEditor', {
@@ -28,6 +35,8 @@ const AttributeEditor = React.forwardRef(
         items={items}
         isItemRemovable={isItemRemovable}
         addButtonVariant={addButtonVariant}
+        additionalActions={additionalActions}
+        hideAddButton={hideAddButton}
         {...props}
         {...baseComponentProps}
         ref={ref}

src/attribute-editor/interfaces.ts

@@ -142,6 +142,16 @@ export interface AttributeEditorProps<T> extends BaseComponentProps {
    */
   disableAddButton?: boolean;
 
+  /**
+   * Determines whether the add button is hidden
+   */
+  hideAddButton?: boolean;
+
+  /**
+   * Specifies additional actions displayed next to the add-button (or instead of the add-button if hidden).
+   */
+  additionalActions?: React.ReactNode;
+
   /**
    * Specifies the variant to use for the add button. By default a normal button is used.
    * Use `inline-link` when using an attribute editor nested inside complex attribute editing

src/attribute-editor/internal.tsx

@@ -15,6 +15,7 @@ import { InternalBaseComponentProps } from '../internal/hooks/use-base-component
 import { usePrevious } from '../internal/hooks/use-previous';
 import { SomeRequired } from '../internal/types';
 import InternalLiveRegion from '../live-region/internal';
+import InternalSpaceBetween from '../space-between/internal';
 import { AdditionalInfo } from './additional-info';
 import { gridDefaults } from './grid-defaults';
 import { AttributeEditorForwardRefType, AttributeEditorProps } from './interfaces';
@@ -45,6 +46,8 @@ const InternalAttributeEditor = React.forwardRef(
       onAddButtonClick,
       onRemoveButtonClick,
       __internalRootRef,
+      hideAddButton,
+      additionalActions,
       ...props
     }: InternalAttributeEditorProps<T>,
     ref: React.Ref<AttributeEditorProps.Ref>
@@ -153,24 +156,31 @@ const InternalAttributeEditor = React.forwardRef(
         ))}
 
         <div className={styles['add-row']}>
-          <InternalButton
-            className={styles['add-button']}
-            disabled={disableAddButton}
-            // Using aria-disabled="true" and tabindex="-1" instead of "disabled"
-            // because focus can be dynamically moved to this button by calling
-            // `focusAddButton()` on the ref.
-            nativeButtonAttributes={disableAddButton ? { tabIndex: -1 } : {}}
-            __skipNativeAttributesWarnings={true}
-            __focusable={true}
-            onClick={onAddButtonClick}
-            formAction="none"
-            ref={addButtonRef}
-            ariaDescribedby={infoAriaDescribedBy}
-            variant={addButtonVariant}
-            iconName={addButtonVariant === 'inline-link' ? 'add-plus' : undefined}
-          >
-            {addButtonText}
-          </InternalButton>
+          {(!hideAddButton || additionalActions) && (
+            <InternalSpaceBetween size="xs" direction="horizontal">
+              {!hideAddButton && (
+                <InternalButton
+                  className={styles['add-button']}
+                  disabled={disableAddButton}
+                  // Using aria-disabled="true" and tabindex="-1" instead of "disabled"
+                  // because focus can be dynamically moved to this button by calling
+                  // `focusAddButton()` on the ref.
+                  nativeButtonAttributes={disableAddButton ? { tabIndex: -1 } : {}}
+                  __skipNativeAttributesWarnings={true}
+                  __focusable={true}
+                  onClick={onAddButtonClick}
+                  formAction="none"
+                  ref={addButtonRef}
+                  ariaDescribedby={infoAriaDescribedBy}
+                  variant={addButtonVariant}
+                  iconName={addButtonVariant === 'inline-link' ? 'add-plus' : undefined}
+                >
+                  {addButtonText}
+                </InternalButton>
+              )}
+              {additionalActions}
+            </InternalSpaceBetween>
+          )}
           <InternalLiveRegion
             data-testid="removal-announcement"
             tagName="span"