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;
  });