poc: Property filter enum props POC

package.json

@@ -22,7 +22,8 @@
     "start:watch": "gulp watch",
     "start:dev": "cross-env NODE_ENV=development webpack serve --config pages/webpack.config.js",
     "start:integ": "cross-env NODE_ENV=development webpack serve --config pages/webpack.config.integ.js",
-    "prepare": "husky"
+    "prepare": "husky",
+    "postinstall": "node ./scripts/install-peer-dependency.js collection-hooks:feat-property-filter-enum-props-2"
   },
   "dependencies": {
     "@cloudscape-design/collection-hooks": "^1.0.0",

pages/property-filter/common-props.tsx

@@ -30,7 +30,7 @@ export const columnDefinitions = [
     sortingField: 'state',
     header: 'State',
     type: 'enum',
-    getLabel: getStateLabel,
+    getLabel: (value: any) => (Array.isArray(value) ? value.map(getStateLabel).join(', ') : getStateLabel(value)),
     propertyLabel: 'State',
     cell: (item: TableItem) => getStateLabel(item.state),
   },
@@ -40,7 +40,7 @@ export const columnDefinitions = [
     header: 'Stopped',
     type: 'boolean',
     propertyLabel: 'Stopped',
-    cell: (item: TableItem) => item.state === 0,
+    cell: (item: TableItem) => item.state === 'STOPPED',
   },
   {
     id: 'instancetype',
@@ -236,7 +236,10 @@ export const filteringProperties: readonly PropertyFilterProps.FilteringProperty
   let groupValuesLabel = `${def.propertyLabel} values`;
 
   if (def.type === 'enum') {
-    operators = ['=', '!='].map(operator => ({ operator, format: def.getLabel }));
+    operators = [
+      ...['=', '!='].map(operator => ({ operator, format: def.getLabel, valueType: 'enum' })),
+      ...[':', '!:'].map(operator => ({ operator, format: def.getLabel, valueType: 'auto' })),
+    ];
   }
 
   if (def.type === 'text') {

pages/property-filter/property-filter-editor-permutations.page.tsx

@@ -32,6 +32,7 @@ const nameProperty: InternalFilteringProperty = {
   groupValuesLabel: 'Name values',
   operators: ['=', '!='],
   defaultOperator: '=',
+  getValueType: () => 'auto',
   getValueFormatter: () => null,
   getValueFormRenderer: () => null,
   externalProperty,
@@ -43,6 +44,7 @@ const dateProperty: InternalFilteringProperty = {
   groupValuesLabel: 'Date values',
   operators: ['=', '!='],
   defaultOperator: '=',
+  getValueType: () => 'auto',
   getValueFormatter: () => (value: Date) => (value ? format(value, 'yyyy-MM-dd') : ''),
   getValueFormRenderer:
     () =>
@@ -60,6 +62,7 @@ const dateTimeProperty: InternalFilteringProperty = {
   groupValuesLabel: 'Date time values',
   operators: ['=', '!='],
   defaultOperator: '=',
+  getValueType: () => 'auto',
   getValueFormatter: () => (value: Date) => (value ? format(value, 'yyyy-MM-dd hh:mm') : ''),
   getValueFormRenderer:
     () =>

pages/property-filter/split-panel-app-layout-integration.page.tsx

@@ -49,7 +49,7 @@ export default function () {
 
   const filteringOptions = propertyFilterProps.filteringOptions.map(option => {
     if (option.propertyKey === 'state') {
-      option.label = states[parseInt(option.value)];
+      option.label = states[option.value];
     }
     return option;
   });