add first cut of filterbarmenu

vuu-ui/packages/vuu-filters/src/filter-bar/FilterBar.tsx

@@ -11,6 +11,7 @@ import { FilterClauseEditor, FilterClauseEditorProps } from "../filter-clause";
 import { FilterPill } from "../filter-pill";
 import { filterClauses as getFilterClauses } from "../filter-utils";
 import { useFilterBar } from "./useFilterBar";
+import { FilterBarMenu } from "./FilterbarMenu";
 
 import "./FilterBar.css";
 
@@ -133,7 +134,8 @@ export const FilterBar = ({
       onKeyDown={onKeyDownFilterbar}
       ref={rootRef}
     >
-      <span className={`${classBase}-icon`} data-icon="tune" />
+      <FilterBarMenu />
+      {/* <span className={`${classBase}-icon`} data-icon="tune" /> */}
       <Toolbar
         activeItemIndex={activeFilterIndex}
         height={28}

vuu-ui/packages/vuu-filters/src/filter-bar/FilterBarMenu.tsx

@@ -0,0 +1,19 @@
+import { PopupMenu } from "@finos/vuu-popups";
+import { useFilterBarMenu } from "./useFilterBarMenu";
+
+export const FilterBarMenu = () => {
+  const classBase = "vuuFilterBarMenu";
+
+  const { menuBuilder, menuActionHandler } = useFilterBarMenu();
+
+  return (
+    <div className={classBase}>
+      <PopupMenu
+        icon="tune"
+        menuBuilder={menuBuilder}
+        menuActionHandler={menuActionHandler}
+        tabIndex={-1}
+      />
+    </div>
+  );
+};

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

@@ -0,0 +1,33 @@
+import { useCallback, useMemo } from "react";
+import {
+  ContextMenuItemDescriptor,
+  MenuActionHandler,
+  MenuBuilder,
+} from "@finos/vuu-data-types";
+import { MenuActionClosePopup } from "@finos/vuu-popups";
+
+export const useFilterBarMenu = () => {
+  const menuBuilder = useCallback<MenuBuilder>(() => {
+    return [
+      {
+        label: `You have no saved filters for this table`,
+        action: `no-action`,
+      } as ContextMenuItemDescriptor,
+    ];
+  }, []);
+
+  const menuActionHandler = useMemo<MenuActionHandler>(
+    () => (action: MenuActionClosePopup) => {
+      console.log(`invoke menuId `, {
+        action,
+      });
+      return false;
+    },
+    []
+  );
+
+  return {
+    menuBuilder,
+    menuActionHandler,
+  };
+};

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

@@ -26,85 +26,75 @@ export const useFilters = ({
 
   const { getApplicationSettings, saveApplicationSettings } =
     useLayoutManager();
-  const savedFilters = getApplicationSettings("filters") as {
+
+  type SavedFilterMap = {
     [key: string]: NamedFilter[];
   };
 
-  console.log({ savedFilters });
+  const hasFilter = (filters: NamedFilter[], name: string) =>
+    filters.findIndex((f) => f.name === name) !== -1;
 
   const saveFilterToSettings = useCallback(
     (filter: Filter, name?: string) => {
-      console.log(`saveFilterToSettings`);
       if (tableSchema && name) {
+        const savedFilters = getApplicationSettings(
+          "filters"
+        ) as SavedFilterMap;
+        let newFilters = savedFilters;
         const { module, table } = tableSchema.table;
         const key = `${module}:${table}`;
         if (savedFilters) {
-          console.log("add filter to existing store ... ", {
-            savedFilters,
-          });
           if (savedFilters[key]) {
-            console.log("add filter to existing filters for this table ... ");
-            if (savedFilters[key].findIndex((f) => f.name === name) !== -1) {
-              console.log("We already have a filter by that name, replace it ");
-
-              saveApplicationSettings(
-                {
-                  ...savedFilters,
-                  [key]: savedFilters[key].map((f) => {
-                    f.name === name ? { ...filter, name } : f;
-                  }),
-                },
-                "filters"
-              );
+            if (hasFilter(savedFilters[key], name)) {
+              newFilters = {
+                ...savedFilters,
+                [key]: savedFilters[key].map((f) =>
+                  f.name === name ? { ...filter, name } : f
+                ),
+              };
             } else if (
-              name !== undefined &&
-              filter?.name !== undefined &&
+              filter?.name &&
               filter?.name !== name &&
-              savedFilters[key].findIndex((f) => f.name === filter.name) !== -1
+              hasFilter(savedFilters[key], filter.name)
             ) {
-              saveApplicationSettings(
-                {
-                  ...savedFilters,
-                  [key]: savedFilters[key].map((f) =>
-                    f.name === filter.name ? { ...filter, name } : f
-                  ),
-                },
-                "filters"
-              );
+              newFilters = {
+                ...savedFilters,
+                [key]: savedFilters[key].map((f) =>
+                  f.name === filter.name ? { ...filter, name } : f
+                ),
+              };
             } else {
-              saveApplicationSettings(
-                {
-                  ...savedFilters,
-                  [key]: savedFilters[key].concat({ ...filter, name }),
-                },
-                "filters"
-              );
+              newFilters = {
+                ...savedFilters,
+                [key]: savedFilters[key].concat({ ...filter, name }),
+              };
             }
           } else {
-            saveApplicationSettings(
-              {
-                ...savedFilters,
-                [key]: [{ ...filter, name }],
-              },
-              "filters"
-            );
+            newFilters = {
+              ...savedFilters,
+              [key]: [{ ...filter, name }],
+            };
           }
         } else {
-          saveApplicationSettings(
-            {
-              [key]: [{ ...filter, name }],
-            },
-            "filters"
-          );
+          newFilters = {
+            [key]: [{ ...filter, name }],
+          };
+        }
+        if (newFilters !== savedFilters) {
+          saveApplicationSettings(newFilters, "filters");
         }
       }
     },
-    [saveApplicationSettings, savedFilters, tableSchema]
+    [getApplicationSettings, saveApplicationSettings, tableSchema]
   );
 
   const removeFilterFromSettings = useCallback(
     (filter: Filter | NamedFilter) => {
       if (tableSchema && filter.name) {
+        const savedFilters = getApplicationSettings(
+          "filters"
+        ) as SavedFilterMap;
+
         const { module, table } = tableSchema.table;
         const key = `${module}:${table}`;
 
@@ -119,7 +109,7 @@ export const useFilters = ({
         }
       }
     },
-    [saveApplicationSettings, savedFilters, tableSchema]
+    [getApplicationSettings, saveApplicationSettings, tableSchema]
   );
 
   const handleAddFilter = useCallback(

vuu-ui/packages/vuu-table/src/context-menu/buildContextMenuDescriptors.ts

@@ -1,13 +1,11 @@
 import { DataSource } from "@finos/vuu-data";
 import { ContextMenuItemDescriptor, MenuBuilder } from "@finos/vuu-data-types";
 import { RuntimeColumnDescriptor, PinLocation } from "@finos/vuu-table-types";
-import { Filter } from "@finos/vuu-filter-types";
 import { isNumericColumn } from "@finos/vuu-utils";
 
 export type ContextMenuLocation = "header" | "filter" | "grid";
 
 type MaybeColumn = { column?: RuntimeColumnDescriptor };
-type MaybeFilter = { filter?: Filter };
 
 export const buildContextMenuDescriptors =
   (dataSource?: DataSource): MenuBuilder =>
@@ -40,30 +38,6 @@ export const buildContextMenuDescriptors =
         label: `DataGrid Settings`,
         options,
       });
-    } else if (location === "filter") {
-      const { column, filter } = options as MaybeFilter & MaybeColumn;
-      const colIsOnlyFilter = filter?.column === column?.name;
-      descriptors.push({
-        label: "Edit filter",
-        action: "filter-edit",
-        options,
-      });
-
-      descriptors.push({
-        label: "Remove filter",
-        action: "filter-remove-column",
-        options,
-      });
-
-      if (column && !colIsOnlyFilter) {
-        // TODO col might still be the only column in the filter if it is
-        // involved in all clauses
-        descriptors.push({
-          label: `Remove all filters`,
-          action: "remove-filters",
-          options,
-        });
-      }
     }
 
     // if (options?.selectedRowCount){