implement review suggestions, add etsts

finos · Jan 24, 2024 · e23b517 · e23b517
1 parent a2d7edc
commit e23b517
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 13 deletions.
diff --git a/vuu-ui/packages/vuu-filters/src/__tests__/__component__/filter-bar/Filterbar.cy.tsx b/vuu-ui/packages/vuu-filters/src/__tests__/__component__/filter-bar/Filterbar.cy.tsx
@@ -1,6 +1,9 @@
 // TODO try and get TS path alias working to avoid relative paths like this
 import { defaultPatternsByType, formatDate } from "@finos/vuu-utils";
-import { DefaultFilterBar } from "../../../../../../showcase/src/examples/Filters/FilterBar/FilterBar.examples";
+import {
+  DefaultFilterBar,
+  FilterBarMultipleFilters,
+} from "../../../../../../showcase/src/examples/Filters/FilterBar/FilterBar.examples";
 
 // Common selectors
 const OVERFLOW_CONTAINER = ".vuuOverflowContainer-wrapContainer";
@@ -521,3 +524,45 @@ describe("WHEN a user applies a date filter", () => {
     })
   );
 });
+
+describe("Deleting and renaming filters", () => {
+  describe("WHEN user deletes a filter", () => {
+    it("THEN onFilterDeleted callback is called", () => {
+      const onFilterDeleted = cy.stub().as("onFilterDeleted");
+      cy.mount(<FilterBarMultipleFilters onFilterDeleted={onFilterDeleted} />);
+
+      findOverflowItem('[data-index="0"]').findByRole("button").realClick();
+      clickButton("Delete");
+      clickButton("Remove");
+
+      cy.get("@onFilterDeleted").should("be.calledWithExactly", {
+        column: "currency",
+        name: "Filter One",
+        op: "=",
+        value: "EUR",
+      });
+    });
+  });
+
+  describe("WHEN user renames a filter", () => {
+    it("THEN onFilterRenamed callback is called", () => {
+      const onFilterRenamed = cy.stub().as("onFilterRenamed");
+      cy.mount(<FilterBarMultipleFilters onFilterRenamed={onFilterRenamed} />);
+
+      findOverflowItem('[data-index="0"]').findByText("Filter One").dblclick();
+      cy.realType("Test");
+      cy.realPress("Enter");
+
+      cy.get("@onFilterRenamed").should(
+        "be.calledWithExactly",
+        {
+          column: "currency",
+          name: "Filter One",
+          op: "=",
+          value: "EUR",
+        },
+        "Test"
+      );
+    });
+  });
+});
diff --git a/vuu-ui/packages/vuu-filters/src/filter-bar/useFilterBar.ts b/vuu-ui/packages/vuu-filters/src/filter-bar/useFilterBar.ts
@@ -378,7 +378,6 @@ export const useFilterBar = ({
 
   const handleKeyDownMenu = useCallback<KeyboardEventHandler>(
     (evt) => {
-      console.log(`keydown from List ${evt.key}`);
       const { current: container } = containerRef;
       if (evt.key === "Backspace" && container) {
         evt.preventDefault();

diff --git a/vuu-ui/sample-apps/feature-filter-table/src/useFilterTable.tsx b/vuu-ui/sample-apps/feature-filter-table/src/useFilterTable.tsx
@@ -46,11 +46,13 @@ type SavedFilterMap = {
   [key: string]: Omit<NamedFilter, "name"> & { name: string }[];
 };
 
+const hasFilterWithName = (filters: NamedFilter[], name: string) =>
+  filters.findIndex((f) => f.name === name) !== -1;
+
 export const useFilterTable = ({ tableSchema }: FilterTableFeatureProps) => {
   const { dispatch, load, save } = useViewContext();
   const { getApplicationSettings, saveApplicationSettings } =
     useLayoutManager();
-  console.log({ getApplicationSettings, saveApplicationSettings });
 
   const savedFilters = useMemo(() => {
     const {
@@ -78,9 +80,6 @@ export const useFilterTable = ({ tableSchema }: FilterTableFeatureProps) => {
     [dataSource]
   );
 
-  const hasFilterWithName = (filters: NamedFilter[], name: string) =>
-    filters.findIndex((f) => f.name === name) !== -1;
-
   const removeFilterFromSettings = useCallback(
     (filter: Filter | NamedFilter) => {
       if (!tableSchema || !filter.name) return;

diff --git a/vuu-ui/showcase/src/examples/Filters/FilterBar/FilterBar.examples.tsx b/vuu-ui/showcase/src/examples/Filters/FilterBar/FilterBar.examples.tsx
@@ -9,12 +9,7 @@ import {
   useState,
 } from "react";
 import type { DataSourceFilter } from "@finos/vuu-data-types";
-import {
-  Input,
-  ToggleButton,
-  ToggleButtonGroup,
-  ToggleButtonGroupProps,
-} from "@salt-ds/core";
+import { Input, ToggleButton, ToggleButtonGroup } from "@salt-ds/core";
 import { getSchema, vuuModule } from "@finos/vuu-data-test";
 import type { ActiveItemChangeHandler } from "@finos/vuu-ui-controls";
 
@@ -29,6 +24,8 @@ const lastUpdatedColumn = {
 export const DefaultFilterBar = ({
   filters: filtersProp = [],
   onApplyFilter,
+  onFilterDeleted,
+  onFilterRenamed,
   onFiltersChanged,
   style,
 }: Partial<FilterBarProps>) => {
@@ -83,6 +80,8 @@ export const DefaultFilterBar = ({
         filters={filters}
         onApplyFilter={handleApplyFilter}
         onChangeActiveFilterIndex={handleChangeActiveFilterIndex}
+        onFilterDeleted={onFilterDeleted}
+        onFilterRenamed={onFilterRenamed}
         onFiltersChanged={handleFiltersChanged}
         tableSchema={{ ...tableSchema, columns }}
         columnDescriptors={columns}
@@ -121,7 +120,10 @@ export const FilterBarOneMultiValueFilter = () => {
 };
 FilterBarOneMultiValueFilter.displaySequence = displaySequence++;
 
-export const FilterBarMultipleFilters = () => {
+export const FilterBarMultipleFilters = ({
+  onFilterDeleted,
+  onFilterRenamed,
+}: Partial<FilterBarProps>) => {
   return (
     <DefaultFilterBar
       filters={[
@@ -149,6 +151,8 @@ export const FilterBarMultipleFilters = () => {
           ],
         },
       ]}
+      onFilterDeleted={onFilterDeleted}
+      onFilterRenamed={onFilterRenamed}
     />
   );
 };