fixes and tests for filterclause

Author: heswell

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

@@ -0,0 +1,34 @@
+import {
+  NewFilterClause,
+  PartialFilterClauseColumnAndOperator,
+} from "../../../../../showcase/src/examples/Filters/FilterBar/FilterClause.examples";
+
+describe("FilterClause", () => {
+  describe("WHEN new filter clause is rendered", () => {
+    it("THEN expected classname is present", () => {
+      cy.mount(<NewFilterClause />);
+      const container = cy.findByTestId("filterclause");
+      container.should("have.class", "vuuFilterClause");
+    });
+
+    it("THEN component is rendered with column input, is focused and shows suggestions", () => {
+      cy.mount(<NewFilterClause />);
+      const container = cy.findByTestId("filterclause");
+      container.find(".vuuFilterClauseField").should("have.length", 1);
+      container.find("input").should("be.focused");
+      cy.findAllByRole("option", { name: "currency" }).should("be.visible");
+    });
+  });
+
+  describe("WHEN partial filter clause with Column and Operator is rendered", () => {
+    it("THEN component is rendered with controls for column, operator and value", () => {
+      cy.mount(<PartialFilterClauseColumnAndOperator />);
+      const container = cy.findByTestId("filterclause");
+      container.find(".vuuFilterClauseField").should("have.length", 3);
+      cy.findByTestId("filterclause")
+        .find(".vuuFilterClauseValue input")
+        .should("be.focused");
+      cy.findAllByRole("option", { name: "GBP" }).should("be.visible");
+    });
+  });
+});

vuu-ui/packages/vuu-filters/src/filter-clause/FilterClause.css

@@ -21,77 +21,70 @@
   padding: 0 var(--salt-spacing-100);
   width: fit-content;
 
+  .vuuFilterClauseField {
+    flex: 0 0 auto;
+  }
+  .vuuFilterClauseField:last-child {
+    flex: 1 0 auto;
+  }
+
+  .vuuExpandoCombobox {
+    flex-basis: auto;
+    flex-shrink: 0;
+    flex-grow: 0;
+  }
+
+  &:focus-within {
+    border-color: var(--vuu-color-purple-10);
+  }
 
   .saltComboBox-focused {
     outline: none;
   }
-}
 
-.vuuFilterClause:focus-within {
-  border-color: var(--vuu-color-purple-10);
+  .saltTokenizedInput {
+    height: 16px;
+    min-height: 16px;
+  }
+
+  .saltTokenizedInput .saltInputPill {
+    --pill-fontSize: 12px;
+    --saltButton-borderStyle: none;
+    --pill-background: none;
+    height: 16px;
+    margin: 0;
+  }
+
+  .saltTokenizedInput-pillGroup {
+    padding: 0;
+    height: 16px;
+  }
 }
 
-.vuu-density-high .vuuFilterClause {
+.salt-density-high .vuuFilterClause {
   padding: 4px 8px;
   gap: 4px;
   --salt-text-lineHeight: 12px;
   --saltInputLegacy-fontSize: 12px;
   --saltInputLegacy-minWidth: 12px;
 }
 
-.vuu-density-high .vuuFilterClause .saltInput {
+.salt-density-high .vuuFilterClause .saltInput {
   padding: 0;
   min-height: 16px;
   height: 16px;
 }
 
-.vuuFilterClause .vuuExpandoCombobox {
-  flex-basis: auto;
-  flex-shrink: 0;
-  flex-grow: 0;
-}
-
 .vuuFilterClauseOperator-hidden {
   display: none;
 }
 
-
 .vuuFilterClause .saltInput-focused,
 .vuuFilterClause .saltTokenizedInput-focused {
   outline: none;
   color: var(--salt-content-primary-foreground);
 }
 
-.vuu-theme .saltList {
-  --list-borderWidth: 1px;
-  --list-borderStyle: solid;
-  border-radius: 4px;
-  box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.4);
-}
-
-.saltListItem[aria-selected="true"]:not(.saltListItem-checkbox) {
-  --list-item-background: var(--list-item-background-active);
-  color: var(--list-item-text-color-active);
-}
-
-.saltTokenizedInput {
-  height: 16px;
-  min-height: 16px;
-}
-
-.saltTokenizedInput .saltInputPill {
-  --pill-fontSize: 12px;
-  --saltButton-borderStyle: none;
-  --pill-background: none;
-  height: 16px;
-  margin: 0;
-}
-
-.saltTokenizedInput-pillGroup {
-  padding: 0;
-  height: 16px;
-}
-
 .vuuFilterClause-DatePicker {
   border: none;
 }

vuu-ui/packages/vuu-filters/src/filter-clause/FilterClause.tsx

@@ -57,10 +57,10 @@ export const FilterClause = ({
     // onChangeColumn,
     onSelectColumn,
     onSelectOperator,
-    onFocus,
     onDeselectValue,
     operatorRef,
     selectedColumn,
+    valueRef,
   } = useFilterClause({
     filterClauseModel,
     onCancel,
@@ -78,20 +78,15 @@ export const FilterClause = ({
   const columns = useMemo(() => Object.values(columnsByName), [columnsByName]);
 
   return (
-    <div
-      className={cx(classBase, className)}
-      {...htmlAttributes}
-      onFocus={onFocus}
-      tabIndex={0}
-    >
+    <div className={cx(classBase, className)} {...htmlAttributes} tabIndex={0}>
       <ColumnPicker
         inputProps={inputProps}
         className={cx(`${classBase}Field`, `${classBase}Column`)}
         columns={columns}
         key="column-field"
         onSelect={onSelectColumn}
         ref={columnRef}
-        value={filterClause.column ?? ""}
+        value={filterClauseModel.column ?? ""}
       />
       {selectedColumn?.name ? (
         <OperatorPicker
@@ -103,23 +98,26 @@ export const FilterClause = ({
           key="operator-field"
           onSelect={onSelectOperator}
           ref={operatorRef}
-          value={filterClause.op ?? ""}
+          value={filterClauseModel.op ?? ""}
+        />
+      ) : null}
+      {filterClauseModel.op ? (
+        <FilterClauseValueEditor
+          inputProps={inputProps}
+          key="value-field"
+          onChangeValue={onChangeValue}
+          onDeselectValue={onDeselectValue}
+          operator={filterClauseModel.op}
+          ref={valueRef}
+          selectedColumn={selectedColumn}
+          suggestionProvider={suggestionProvider}
+          table={tableSchema.table}
+          value={
+            (filterClause as MultiValueFilterClause)?.values ??
+            (filterClause as SingleValueFilterClause)?.value
+          }
         />
       ) : null}
-      <FilterClauseValueEditor
-        inputProps={inputProps}
-        key="value-field"
-        onChangeValue={onChangeValue}
-        onDeselectValue={onDeselectValue}
-        operator={filterClause.op}
-        selectedColumn={selectedColumn}
-        suggestionProvider={suggestionProvider}
-        table={tableSchema.table}
-        value={
-          (filterClause as MultiValueFilterClause)?.values ??
-          (filterClause as SingleValueFilterClause)?.value
-        }
-      />
     </div>
   );
 };

vuu-ui/packages/vuu-filters/src/filter-clause/filterClauseFocusManagement.ts

@@ -41,7 +41,7 @@ export const getFocusedFieldDetails = (): [number, string] | [] => {
 
 // Focus the input control within field. If clause passed, will
 // focus first field within clause
-export const focusField = (fieldOrClause: HTMLElement | null) => {
+const focusField = (fieldOrClause: HTMLElement | null) => {
   const input = fieldOrClause?.querySelector("input");
   if (input) {
     input.focus();

vuu-ui/packages/vuu-filters/src/filter-clause/useFilterClause.ts

@@ -1,8 +1,8 @@
 import { FilterClause, FilterClauseOp } from "@finos/vuu-filter-types";
 import { hasOpenOptionList } from "@finos/vuu-utils";
 import {
-  FocusEventHandler,
   KeyboardEvent,
+  RefCallback,
   SyntheticEvent,
   useCallback,
   useEffect,
@@ -13,8 +13,6 @@ import {
 import { FilterClauseProps } from "./FilterClause";
 import {
   clauseIsNotFirst,
-  elementIsFilterClause,
-  focusField,
   focusNextElement,
   focusNextFocusableElement,
   navigateToNextItemIfAtBoundary,
@@ -48,6 +46,17 @@ export const useFilterClause = ({
 
   const columnRef = useRef<HTMLDivElement>(null);
   const operatorRef = useRef<HTMLDivElement>(null);
+  const valueRef = useRef<HTMLDivElement | null>(null);
+
+  const setValueRef = useCallback<RefCallback<HTMLDivElement>>(
+    (el) => {
+      valueRef.current = el;
+      if (!filterClauseModel.isValid) {
+        el?.querySelector("input")?.focus();
+      }
+    },
+    [filterClauseModel.isValid]
+  );
 
   const removeAndNavigateToNextInputIfAtBoundary = useCallback(
     (evt: KeyboardEvent) => {
@@ -152,12 +161,6 @@ export const useFilterClause = ({
     ]
   );
 
-  const handleFocus = useCallback<FocusEventHandler>((evt) => {
-    if (elementIsFilterClause(evt.target)) {
-      focusField(evt.target);
-    }
-  }, []);
-
   const inputProps = useMemo(
     () => ({
       onKeyDownCapture: handleKeyDownCaptureNavigation,
@@ -168,10 +171,18 @@ export const useFilterClause = ({
 
   // Do we need this or can we leave it to the filterEditor
   useEffect(() => {
-    if (filterClauseModel.column === undefined) {
+    // leave the valueInput to callbackRef handler above, may
+    // fire after the requestAnimationFrame
+    if (!filterClauseModel.isValid) {
+      const inputRef =
+        filterClauseModel.column === undefined
+          ? columnRef
+          : filterClauseModel.op === undefined
+          ? operatorRef
+          : null;
+
       requestAnimationFrame(() => {
-        const columnInput = columnRef?.current?.querySelector("input");
-        columnInput?.focus();
+        inputRef?.current?.querySelector("input")?.focus();
       });
     }
   }, [filterClauseModel]);
@@ -183,9 +194,9 @@ export const useFilterClause = ({
     onChangeValue: handleChangeValue,
     onDeselectValue: handleDeselectValue,
     onSelectColumn,
-    onFocus: handleFocus,
     onSelectOperator,
     operatorRef,
-    selectedColumn: columnsByName[filterClause.column ?? ""],
+    selectedColumn: columnsByName[filterClauseModel.column ?? ""],
+    valueRef: setValueRef,
   };
 };