feat: Allows labelling property filter options (#497)

cloudscape-design · Dec 2, 2022 · 59a1797 · 59a1797
1 parent 3349cc8
commit 59a1797
Show file tree

Hide file tree

Showing 11 changed files with 324 additions and 108 deletions.
diff --git a/pages/property-filter/common-props.tsx b/pages/property-filter/common-props.tsx
@@ -1,9 +1,11 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import { PropertyFilterProps } from '~components/property-filter';
-import { TableItem } from './table.data';
+import { states, TableItem } from './table.data';
 import { DateForm, DateTimeForm, formatDateTime, YesNoForm, yesNoFormat } from './custom-forms';
 
+const getStateLabel = (value: TableItem['state']) => (value !== undefined && states[value]) ?? 'Unknown';
+
 export const columnDefinitions = [
   {
     id: 'instanceid',
@@ -17,17 +19,18 @@ export const columnDefinitions = [
     id: 'state',
     sortingField: 'state',
     header: 'State',
-    type: 'text',
+    type: 'enum',
+    getLabel: getStateLabel,
     propertyLabel: 'State',
-    cell: (item: TableItem) => item.state,
+    cell: (item: TableItem) => getStateLabel(item.state),
   },
   {
     id: 'stopped',
     sortingField: 'stopped',
     header: 'Stopped',
     type: 'boolean',
     propertyLabel: 'Stopped',
-    cell: (item: TableItem) => item.state === 'Stopped',
+    cell: (item: TableItem) => item.state === 0,
   },
   {
     id: 'instancetype',
@@ -161,6 +164,10 @@ export const filteringProperties: readonly PropertyFilterProps.FilteringProperty
   let defaultOperator: PropertyFilterProps.ComparisonOperator = '=';
   let groupValuesLabel = `${def.propertyLabel} values`;
 
+  if (def.type === 'enum') {
+    operators = ['=', '!='].map(operator => ({ operator, format: def.getLabel }));
+  }
+
   if (def.type === 'text') {
     operators = ['=', '!=', ':', '!:'];
   }

diff --git a/pages/property-filter/split-panel-app-layout-integration.page.tsx b/pages/property-filter/split-panel-app-layout-integration.page.tsx
@@ -12,7 +12,7 @@ import ScreenshotArea from '../utils/screenshot-area';
 import { Navigation, Tools, Breadcrumbs } from '../app-layout/utils/content-blocks';
 import * as toolsContent from '../app-layout/utils/tools-content';
 import labels from '../app-layout/utils/labels';
-import { allItems, TableItem } from './table.data';
+import { allItems, states, TableItem } from './table.data';
 import { columnDefinitions, i18nStrings, filteringProperties } from './common-props';
 import { useCollection } from '@cloudscape-design/collection-hooks';
 
@@ -40,6 +40,14 @@ export default function () {
     },
     sorting: {},
   });
+
+  const filteringOptions = propertyFilterProps.filteringOptions.map(option => {
+    if (option.propertyKey === 'state') {
+      option.label = states[parseInt(option.value)];
+    }
+    return option;
+  });
+
   return (
     <ScreenshotArea gutters={false}>
       <AppLayout
@@ -77,6 +85,7 @@ export default function () {
             filter={
               <PropertyFilter
                 {...propertyFilterProps}
+                filteringOptions={filteringOptions}
                 virtualScroll={true}
                 countText={`${items.length} matches`}
                 i18nStrings={i18nStrings}