feat: Condensed attribute editor

pages/attribute-editor/condensed.page.tsx

@@ -0,0 +1,217 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useState } from 'react';
+
+import AppLayoutToolbar from '~components/app-layout-toolbar';
+import AttributeEditor from '~components/attribute-editor';
+import Box from '~components/box';
+import BreadcrumbGroup from '~components/breadcrumb-group';
+import Button from '~components/button/internal';
+import Container from '~components/container';
+import Header from '~components/header';
+import Select from '~components/select';
+import SideNavigation from '~components/side-navigation';
+import SpaceBetween from '~components/space-between';
+interface LabelFilter {
+  label: string;
+  operator: string;
+  value: string;
+}
+const LABEL_OPTIONS = [
+  {
+    value: 'alertname',
+  },
+  {
+    value: 'alertstate',
+  },
+  {
+    value: 'job',
+  },
+  {
+    value: 'namespace',
+  },
+  {
+    value: 'severity',
+  },
+  {
+    value: 'instance',
+  },
+];
+const OPERATOR_OPTIONS = [
+  {
+    label: '=',
+    value: '=',
+  },
+  {
+    label: '!=',
+    value: '!=',
+  },
+  {
+    label: '=~',
+    value: '=~',
+  },
+  {
+    label: '!~',
+    value: '!~',
+  },
+];
+const VALUE_OPTIONS = [
+  {
+    value: 'pending',
+  },
+  {
+    value: 'firing',
+  },
+  {
+    value: 'resolved',
+  },
+  {
+    value: 'inactive',
+  },
+];
+function LabelFilters() {
+  const [filters, setFilters] = useState<LabelFilter[]>([
+    {
+      label: 'alertstate',
+      operator: '=',
+      value: 'pending',
+    },
+  ]);
+  const handleAddFilter = () => {
+    setFilters([
+      ...filters,
+      {
+        label: '',
+        operator: '=',
+        value: '',
+      },
+    ]);
+  };
+  const handleRemoveFilter = (itemIndex: number) => {
+    const newFilters = filters.filter((_, index) => index !== itemIndex);
+    setFilters(newFilters);
+  };
+  const updateFilter = (index: number, field: keyof LabelFilter, value: string) => {
+    const newFilters = [...filters];
+    newFilters[index] = {
+      ...newFilters[index],
+      [field]: value,
+    };
+    setFilters(newFilters);
+  };
+  const attributeEditorDefinition = [
+    {
+      // label: 'Label',
+      control: (item: LabelFilter, itemIndex: number) => (
+        <Select
+          variant="group-start"
+          options={LABEL_OPTIONS}
+          selectedOption={LABEL_OPTIONS.find(opt => opt.value === item.label) || LABEL_OPTIONS[0]}
+          onChange={({ detail }) => updateFilter(itemIndex, 'label', detail.selectedOption.value ?? '')}
+        />
+      ),
+    },
+    {
+      // label: 'Operator',
+      control: (item: LabelFilter, itemIndex: number) => (
+        <Select
+          variant="group-middle"
+          options={OPERATOR_OPTIONS}
+          selectedOption={OPERATOR_OPTIONS.find(opt => opt.value === item.operator) || OPERATOR_OPTIONS[0]}
+          onChange={({ detail }) => updateFilter(itemIndex, 'operator', detail.selectedOption.value || '=')}
+        />
+      ),
+    },
+    {
+      control: (item: LabelFilter, itemIndex: number) => (
+        <Select
+          variant="group-middle"
+          options={VALUE_OPTIONS}
+          selectedOption={VALUE_OPTIONS.find(opt => opt.value === item.value) || VALUE_OPTIONS[0]}
+          onChange={({ detail }) => updateFilter(itemIndex, 'value', detail.selectedOption.value ?? '')}
+        />
+      ),
+    },
+  ];
+  return (
+    <AppLayoutToolbar
+      breadcrumbs={
+        <BreadcrumbGroup
+          items={[
+            {
+              href: '#',
+              text: 'Home',
+            },
+            {
+              href: '#',
+              text: 'Label filters',
+            },
+          ]}
+        />
+      }
+      content={
+        <SpaceBetween size="l">
+          <Header description="Define label-based filters to match and route alerts." variant="h1">
+            Label filters
+          </Header>
+          <Container
+            header={
+              <Header
+                description="Specify label key-value pairs to filter alerts. Only alerts matching all filters are shown."
+                variant="h2"
+              >
+                Label filters
+              </Header>
+            }
+            data-venue="true"
+          >
+            <AttributeEditor
+              direction="horizontal"
+              variant="condensed"
+              addButtonText="Add filter"
+              definition={attributeEditorDefinition}
+              empty={
+                <Box color="inherit" textAlign="center">
+                  No filters added. Choose &#34;Add filter&#34; to add a label filter.
+                </Box>
+              }
+              gridLayout={[
+                {
+                  removeButton: {
+                    width: 'auto',
+                  },
+                  rows: [[3, 1, 3]],
+                },
+              ]}
+              items={filters}
+              removeButtonText="Remove"
+              onAddButtonClick={handleAddFilter}
+              onRemoveButtonClick={({ detail }) => handleRemoveFilter(detail.itemIndex)}
+              customRowActions={() => {
+                return <Button iconName="close" variant="condensed-filter"></Button>;
+              }}
+            />
+          </Container>
+        </SpaceBetween>
+      }
+      contentType="form"
+      navigation={
+        <SideNavigation
+          header={{
+            href: '#',
+            text: 'Monitoring',
+          }}
+          items={[
+            {
+              href: '#label-filters-01',
+              text: 'Label filters',
+              type: 'link',
+            },
+          ]}
+        />
+      }
+      toolsHide={true}
+    />
+  );
+}
+export default LabelFilters;

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

@@ -2625,6 +2625,20 @@ If more than 6 attributes are specified, a \`gridLayout\` must be provided.
       "optional": false,
       "type": "ReadonlyArray<AttributeEditorProps.FieldDefinition<T>>",
     },
+    {
+      "description": "Vertical by default.",
+      "inlineType": {
+        "name": ""horizontal" | "vertical"",
+        "type": "union",
+        "values": [
+          "horizontal",
+          "vertical",
+        ],
+      },
+      "name": "direction",
+      "optional": true,
+      "type": "string",
+    },
     {
       "description": "Determines whether the add button is disabled.",
       "name": "disableAddButton",
@@ -2759,6 +2773,18 @@ The display of a row is handled by the \`definition\` property.",
       "optional": true,
       "type": "string",
     },
+    {
+      "inlineType": {
+        "name": "condensed",
+        "type": "union",
+        "values": [
+          "condensed",
+        ],
+      },
+      "name": "variant",
+      "optional": true,
+      "type": "string",
+    },
   ],
   "regions": [
     {
@@ -24019,6 +24045,20 @@ If you want to clear the selection, use \`null\`.",
       "optional": true,
       "type": "string",
     },
+    {
+      "inlineType": {
+        "name": ""group-start" | "group-middle" | "group-end"",
+        "type": "union",
+        "values": [
+          "group-start",
+          "group-middle",
+          "group-end",
+        ],
+      },
+      "name": "variant",
+      "optional": true,
+      "type": "string",
+    },
     {
       "description": "If you have more than 500 options, enable this flag to apply a performance optimization
 that makes the filtering experience smoother. We don't recommend enabling the feature if you

src/attribute-editor/interfaces.ts

@@ -223,4 +223,11 @@ export interface AttributeEditorProps<T> extends BaseComponentProps {
    * @i18n
    */
   i18nStrings?: AttributeEditorProps.I18nStrings<T>;
+
+  variant?: 'condensed';
+
+  /**
+   * Vertical by default.
+   */
+  direction?: 'vertical' | 'horizontal';
 }

src/attribute-editor/internal.tsx

@@ -48,6 +48,8 @@ const InternalAttributeEditor = React.forwardRef(
       __internalRootRef,
       hideAddButton,
       additionalActions,
+      variant,
+      direction = 'vertical',
       ...props
     }: InternalAttributeEditorProps<T>,
     ref: React.Ref<AttributeEditorProps.Ref>
@@ -143,8 +145,15 @@ const InternalAttributeEditor = React.forwardRef(
       <div
         {...baseProps}
         ref={mergedRef}
-        className={clsx(baseProps.className, styles.root)}
-        style={{ gridTemplateColumns: getGridTemplateColumns(gridLayoutForBreakpoint) }}
+        className={clsx(
+          baseProps.className,
+          styles.root,
+          variant && styles[`variant-${variant}`],
+          styles[`direction-${direction ?? 'vertical'}`]
+        )}
+        style={
+          direction === 'horizontal' ? {} : { gridTemplateColumns: getGridTemplateColumns(gridLayoutForBreakpoint) }
+        }
       >
         {isEmpty && <div className={clsx(styles.empty, wasNonEmpty.current && styles['empty-appear'])}>{empty}</div>}
         {items.map((item, index) => (
@@ -162,6 +171,7 @@ const InternalAttributeEditor = React.forwardRef(
             customRowActions={customRowActions}
             onRemoveButtonClick={onRemoveButtonClick}
             removeButtonAriaLabel={removeButtonAriaLabel}
+            parentDirection={direction}
           />
         ))}
 
@@ -182,10 +192,10 @@ const InternalAttributeEditor = React.forwardRef(
                   formAction="none"
                   ref={addButtonRef}
                   ariaDescribedby={infoAriaDescribedBy}
-                  variant={addButtonVariant}
-                  iconName={addButtonVariant === 'inline-link' ? 'add-plus' : undefined}
+                  variant={direction === 'horizontal' ? 'condensed-filter-standalone' : addButtonVariant}
+                  iconName={addButtonVariant === 'inline-link' || direction === 'horizontal' ? 'add-plus' : undefined}
                 >
-                  {addButtonText}
+                  {direction === 'horizontal' ? '' : addButtonText}
                 </InternalButton>
               )}
               {additionalActions}

src/attribute-editor/row.tsx

@@ -29,6 +29,7 @@ interface RowProps<T> {
   customRowActions?: (props: AttributeEditorProps.RowActionsProps<T>) => React.ReactNode;
   onRemoveButtonClick?: NonCancelableEventHandler<AttributeEditorProps.RemoveButtonClickDetail>;
   removeButtonAriaLabel?: (item: T) => string;
+  parentDirection?: 'vertical' | 'horizontal';
 }
 
 function render<T>(
@@ -60,6 +61,7 @@ export const Row = React.memo(
     customRowActions,
     onRemoveButtonClick,
     removeButtonAriaLabel,
+    parentDirection,
   }: RowProps<T>) => {
     const i18n = useInternalI18n('attribute-editor');
 
@@ -85,9 +87,15 @@ export const Row = React.memo(
       ownRow: !removeButtonOnSameLine,
     });
 
+    const withLabels = definition.every(item => !!item.label);
+
     return (
       <div
-        className={clsx(styles.row, layout.rows.length === 1 && styles['single-row'])}
+        className={clsx(
+          styles.row,
+          layout.rows.length === 1 && styles['single-row'],
+          styles[`direction-${parentDirection}`]
+        )}
         role="group"
         aria-labelledby={`${firstControlId}-label ${firstControlId}`}
       >
@@ -118,7 +126,7 @@ export const Row = React.memo(
         })}
         <div
           className={clsx(styles['remove-button-container'], {
-            [styles['remove-button-field-padding']]: removeButtonOnSameLine && index === 0,
+            [styles['remove-button-field-padding']]: withLabels && removeButtonOnSameLine && index === 0,
             [styles['remove-button-own-row']]: !removeButtonOnSameLine,
           })}
           style={{ ...getRemoveButtonGridColumns(layout, gridColumnEnd) }}