add cancel to filter editor

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

@@ -134,8 +134,8 @@ describe("FilterEditor", () => {
         cy.realPress("Enter");
 
         selectMenuOption("AND");
-        cy.findByRole("button", { name: "AND" }).should("be.visible");
-        cy.findAllByRole("button", { name: "AND" }).should("have.length", 1);
+        cy.findByRole("button", { name: "and" }).should("be.visible");
+        cy.findAllByRole("button", { name: "and" }).should("have.length", 1);
       });
       it("THEN second clause is created and column focused", () => {
         cy.mount(<NewFilter />);
@@ -182,10 +182,6 @@ describe("FilterEditor", () => {
     });
   });
 
-  // describe("Tab navigation", () => {
-
-  // })
-
   describe("Arrow key navigation", () => {
     describe("within a single clause filter", () => {
       describe("WHEN clause complete and Save button focused, then Shift+Tab pressed", () => {
@@ -262,7 +258,7 @@ describe("FilterEditor", () => {
           cy.findAllByRole("combobox").eq(2).should("be.focused");
           cy.realPress("ArrowRight");
           cy.realPress("ArrowRight");
-          cy.findByRole("button", { name: "OR" }).should("be.focused");
+          cy.findByRole("button", { name: "or" }).should("be.focused");
           cy.realPress("ArrowRight");
           cy.realPress("ArrowRight");
           cy.findAllByRole("combobox").eq(3).should("be.focused");
@@ -291,7 +287,7 @@ describe("FilterEditor", () => {
           cy.realPress("ArrowLeft");
           cy.findAllByRole("combobox").eq(3).should("be.focused");
           cy.realPress("ArrowLeft");
-          cy.findByRole("button", { name: "OR" }).should("be.focused");
+          cy.findByRole("button", { name: "or" }).should("be.focused");
           cy.realPress("ArrowLeft");
           cy.findAllByRole("combobox").eq(2).should("be.focused");
           cy.realPress("ArrowLeft");

vuu-ui/packages/vuu-filters/src/filter-bar/useFilterBar.ts

@@ -178,9 +178,8 @@ export const useFilterBar = ({
           interactedFilterState?.state === "rename" &&
           interactedFilterState.filter
         ) {
-          const { filter, index } = interactedFilterState;
+          const { filter } = interactedFilterState;
           const indexOfEditedFilter = onRenameFilter(filter, editedValue);
-          console.log({ index, indexOfEditedFilter });
 
           setInteractedFilterState(undefined);
           focusFilterPill(indexOfEditedFilter);
@@ -253,9 +252,6 @@ export const useFilterBar = ({
 
   const handlePillClick = useCallback<MouseEventHandler<HTMLButtonElement>>(
     (e) => {
-      console.log("Pill Click", {
-        e,
-      });
       const isEditing = (e.target as HTMLElement).querySelector(
         ".vuuEditableLabel-editing"
       );
@@ -296,7 +292,7 @@ export const useFilterBar = ({
     if (interactedFilterState) {
       const { index } = interactedFilterState;
       if (index === -1) {
-        console.log("focus add button");
+        addButtonRef.current?.focus();
       } else {
         focusFilterPill(index);
       }

vuu-ui/packages/vuu-filters/src/filter-editor/FilterClauseCombinator.tsx

@@ -1,8 +1,5 @@
 import type { FilterCombinatorOp } from "@finos/vuu-filter-types";
-import {
-  CycleStateButton,
-  CycleStateButtonProps,
-} from "@finos/vuu-ui-controls";
+import { CycleStateButton } from "@finos/vuu-ui-controls";
 import { KeyboardEventHandler, useCallback } from "react";
 
 import "./FilterClauseCombinator.css";
@@ -24,7 +21,7 @@ export const FilterClauseCombinator = ({
   onKeyDown,
   operator,
 }: FilterClauseCombinatorProps) => {
-  const handleChange = useCallback<CycleStateButtonProps["onChange"]>(
+  const handleChange = useCallback(
     (value) => {
       onChange(value as FilterCombinatorOp);
     },

vuu-ui/packages/vuu-filters/src/filter-editor/FilterEditor.tsx

@@ -2,16 +2,14 @@ import { TableSchema } from "@finos/vuu-data-types";
 import { Filter } from "@finos/vuu-filter-types";
 import { ColumnDescriptor } from "@finos/vuu-table-types";
 import { SplitButton } from "@finos/vuu-ui-controls";
-import { HTMLAttributes, useCallback } from "react";
+import { HTMLAttributes } from "react";
 import { FilterClause, FilterClauseProps } from "../filter-clause/FilterClause";
 import { FilterClauseModel } from "../FilterModel";
-import {
-  FilterClauseCombinator,
-  FilterClauseCombinatorChangeHandler,
-} from "./FilterClauseCombinator";
+import { FilterClauseCombinator } from "./FilterClauseCombinator";
 import { useFilterEditor } from "./useFilterEditor";
 
 import "./FilterEditor.css";
+import { Button } from "@salt-ds/core";
 
 const classBase = "vuuFilterEditor";
 
@@ -41,6 +39,7 @@ export const FilterEditor = ({
     filterModel,
     setContainer,
     onCancelFilterClause,
+    onCancelFilterEdit,
     onChangeFilterCombinator,
     onKeyDownCombinator,
     saveButtonRef,
@@ -93,6 +92,9 @@ export const FilterEditor = ({
       >
         Save
       </SplitButton>
+      <Button onClick={onCancelFilterEdit} variant="secondary">
+        Cancel
+      </Button>
     </div>
   );
 };

vuu-ui/packages/vuu-filters/src/filter-editor/useFilterEditor.ts

@@ -220,11 +220,16 @@ export const useFilterEditor = ({
       [filterModel]
     );
 
+  const handleCancelFilterEdit = useCallback(() => {
+    onCancel(filter);
+  }, [filter, onCancel]);
+
   return {
     columnsByName,
     filterModel,
     isValid,
     onCancelFilterClause: handleCancelFilterClause,
+    onCancelFilterEdit: handleCancelFilterEdit,
     onChangeFilterCombinator,
     onKeyDownCombinator: handleKeyDownNavigationFromCombinator,
     saveButtonProps,

vuu-ui/packages/vuu-table/src/cell-renderers/toggle-cell/ToggleCell.tsx

@@ -2,7 +2,11 @@ import {
   ColumnDescriptor,
   TableCellRendererProps,
 } from "@finos/vuu-table-types";
-import { CycleStateButtonProps, WarnCommit } from "@finos/vuu-ui-controls";
+import {
+  CycleStateButtonProps,
+  CycleStateCommitHandler,
+  WarnCommit,
+} from "@finos/vuu-ui-controls";
 import {
   dataColumnAndKeyUnchanged,
   dispatchCustomEvent,
@@ -39,7 +43,7 @@ export const ToggleCell = memo(function ToggleCell({
   const dataIdx = columnMap[column.name];
   const value = row[dataIdx] as string;
 
-  const handleCommit = useCallback<CycleStateButtonProps["onCommit"]>(
+  const handleCommit = useCallback<CycleStateCommitHandler>(
     (evt, value) => {
       return onCommit(value).then((response) => {
         if (response === true) {

vuu-ui/packages/vuu-ui-controls/src/cycle-state-button/CycleStateButton.tsx

@@ -9,9 +9,14 @@ import { ForwardedRef, forwardRef, SyntheticEvent, useCallback } from "react";
 
 const classBase = "vuuCycleStateButton";
 
+export type CycleStateCommitHandler = (
+  evt: SyntheticEvent,
+  value: VuuRowDataItemType
+) => CommitResponse;
+
 export interface CycleStateButtonProps extends Omit<ButtonProps, "onChange"> {
-  onChange: (value: VuuRowDataItemType) => void;
-  onCommit?: (evt: SyntheticEvent, value: VuuRowDataItemType) => CommitResponse;
+  onChange?: (value: VuuRowDataItemType) => void;
+  onCommit?: CycleStateCommitHandler;
   values: string[];
   value: string;
 }

vuu-ui/sample-apps/feature-basket-trading/src/basket-toolbar/BasketToolbar.tsx

@@ -2,6 +2,7 @@ import { MenuActionHandler } from "@finos/vuu-data-types";
 import {
   CycleStateButton,
   CycleStateButtonProps,
+  CycleStateCommitHandler,
   ExpandoInput,
   useEditableText,
 } from "@finos/vuu-ui-controls";
@@ -75,7 +76,7 @@ export const BasketToolbar = ({
       type: "number",
     });
 
-  const handleSideCommit = useCallback<CycleStateButtonProps["onCommit"]>(
+  const handleSideCommit = useCallback<CycleStateCommitHandler>(
     (_, value) => {
       if (onCommit) {
         return onCommit?.("side", value);