Operators loaded using getOperators API

Updated the ColumnFilter examples to use state and updated minor styling for one of the example
Fixed a minor issue related to state update
Added some test coverage

Author: anandBalachandar

vuu-ui/packages/vuu-filters/src/__tests__/__component__/ColumnFilter.cy.tsx

@@ -0,0 +1,36 @@
+import { LocalDataSourceProvider } from "@vuu-ui/vuu-data-test";
+import { TextColumnFilterValueSetViaBtn } from "../../../../../showcase/src/examples/Filters/ColumnFilter.examples";
+
+describe("ColumnFilter", () => {
+  describe("WHEN text columnfilter is rendered", () => {
+    beforeEach(() => {
+      cy.mount(
+        <LocalDataSourceProvider>
+          <TextColumnFilterValueSetViaBtn />
+        </LocalDataSourceProvider>,
+      );
+    });
+
+    it("THEN the component is rendered with an initial value", () => {
+      const container = cy.findByTestId("columnfilter");
+      container.should("have.class", "vuuColumnFilter");
+      container.find("input").should("have.value", "AAOP.N");
+    });
+
+    it("THEN the component shows suggestions on input", () => {
+      const container = cy.findByTestId("columnfilter");
+      container.find("input").clear().type("A");
+      cy.findAllByRole("option", { name: "AAOO.L" }).should("be.visible");
+    });
+
+    it("THEN component renders a new value provided via state set from outside the container", () => {
+      const container = cy.findByTestId("columnfilter");
+      const input = container.find("input");
+      input.should("have.value", "AAOP.N");
+      cy.contains("button", "AAOQ.OQ").realClick();
+      input.should("have.value", "AAOQ.OQ");
+      cy.contains("button", "AAOU.MI").realClick();
+      input.should("have.value", "AAOU.MI");
+    });
+  });
+});

vuu-ui/packages/vuu-filters/src/column-filter/ColumnFilter.tsx

@@ -15,17 +15,19 @@ import columnFilterCss from "./ColumnFilter.css";
 import { getDataItemEditControl } from "@vuu-ui/vuu-data-react";
 import { ForwardedRef, forwardRef, ReactElement, useMemo } from "react";
 import { VuuTable } from "@vuu-ui/vuu-protocol-types";
-import { assertValidValue, Operator, useColumnFilter } from "./useColumnFilter";
+import { assertValidOperator, assertValidValue, Operator, useColumnFilter } from "./useColumnFilter";
 import { ColumnDescriptor } from "@vuu-ui/vuu-table-types";
-import { FilterOp } from "@vuu-ui/vuu-filter-types";
 
 const classBase = "vuuColumnFilter";
 export type FilterValue = string | readonly string[] | number;
 export type ColumnFilterValue = FilterValue | [FilterValue, FilterValue];
 
 export interface ColumnFilterProps extends SegmentedButtonGroupProps {
   column: ColumnDescriptor;
-  operator?: FilterOp | "between";
+  operator?: Operator;
+  /**
+   * Display operator picker.
+   */
   showOperatorPicker?: boolean;
   /**
    * VuuTable is required if typeahead support is expected.
@@ -68,19 +70,25 @@ export const ColumnFilter = forwardRef(function ColumnFilter(
 
   const {
     op,
+    allowedOperators,
     filterValue,
     inputProps,
     rangeInputProps,
     onOperatorChange,
     handleCommit,
     handleRangeCommit,
   } = useColumnFilter({
-    column,
     operator,
+    column,
     value,
     onFilterChange,
   });
 
+  useMemo(
+    () => assertValidOperator(allowedOperators, column, operator),
+    [column, operator, allowedOperators],
+  );
+
   useMemo(
     () => assertValidValue(column, op, filterValue),
     [column, op, filterValue],
@@ -106,23 +114,19 @@ export const ColumnFilter = forwardRef(function ColumnFilter(
             </Button>
           </MenuTrigger>
           <MenuPanel>
-            <MenuItem onClick={() => onOperatorChange("=")}>=</MenuItem>
-            <MenuItem onClick={() => onOperatorChange("!=")}>!=</MenuItem>
-            <MenuItem onClick={() => onOperatorChange("starts")}>
-              starts
-            </MenuItem>
-            <MenuItem onClick={() => onOperatorChange("ends")}>ends</MenuItem>
-            <MenuItem onClick={() => onOperatorChange("contains")}>
-              contains
-            </MenuItem>
-            <MenuItem onClick={() => onOperatorChange("between")}>
-              between
-            </MenuItem>
+            {allowedOperators.map((operator) => (
+              <MenuItem
+                key={operator}
+                onClick={() => onOperatorChange(operator)}
+              >
+                {operator}
+              </MenuItem>
+            ))}
           </MenuPanel>
         </Menu>
       ) : null}
       {getDataItemEditControl({
-        InputProps: { inputProps },
+        InputProps: { inputProps },        
         dataDescriptor: column,
         onCommit: handleCommit,
         defaultValue: Array.isArray(filterValue) ? filterValue[0] : filterValue,

vuu-ui/packages/vuu-filters/src/column-filter/useColumnFilter.ts

@@ -1,4 +1,4 @@
-import { FilterOp } from "@vuu-ui/vuu-filter-types";
+import { FilterClauseOp, FilterOp } from "@vuu-ui/vuu-filter-types";
 import { ColumnDescriptor } from "@vuu-ui/vuu-table-types";
 import {
   ColumnFilterProps,
@@ -8,16 +8,28 @@ import {
 import {
   ChangeEventHandler,
   useCallback,
-  useEffect,
   useMemo,
   useRef,
   useState,
 } from "react";
 import { CommitHandler, queryClosest } from "@vuu-ui/vuu-utils";
 import { VuuTypeaheadInputProps } from "@vuu-ui/vuu-ui-controls";
+import { getOperators } from "../filter-clause/operator-utils";
 
 export type Operator = FilterOp | "between";
 
+export const assertValidOperator = (
+  allowedOperators: FilterClauseOp[],
+  column: ColumnDescriptor,
+  op: Operator,
+) => {
+  if (!allowedOperators.find((filterClauseOp) => filterClauseOp === op)) {
+    console.warn(
+      `[useColumnFilter] '${op} not supported for column ${column.name}'`,
+    );
+  }
+};
+
 export const assertValidValue = (
   { serverDataType: _ }: ColumnDescriptor,
   operator: Operator,
@@ -56,11 +68,14 @@ export const useColumnFilter = ({
 }: ColumnFilterHookProps) => {
   const filterValue = useRef(value);
   const [op, setOp] = useState(operator);
+  const allowedOperators = useMemo(() => getOperators(column), [column]);
 
-  useEffect(() => {
+  useMemo(() => {
     if (value && value !== filterValue.current) {
       filterValue.current = value;
-      onFilterChange?.(value, column.name, op);
+      setTimeout(() => {
+        onFilterChange?.(value, column.name, op);
+      }, 100);
     }
   }, [value, column, op, onFilterChange]);
 
@@ -168,6 +183,7 @@ export const useColumnFilter = ({
 
   return {
     op,
+    allowedOperators,
     filterValue: filterValue.current,
     inputProps,
     rangeInputProps,