From 58d38083d5a6bfb90492b363099127b37cfcad7e Mon Sep 17 00:00:00 2001
From: heswell <steve@heswell.com>
Date: Wed, 4 Dec 2024 10:35:47 +0000
Subject: [PATCH] ensure when columnDescriptors have labels, filter
 columnnpicker works as expected

---
 .../src/filter-clause/ColumnPicker.tsx        |  4 ++-
 .../vuu-theme/css/components/split-button.css |  3 ++
 .../Filters/FilterBar/FilterBar.examples.tsx  | 34 ++++++++++++++++---
 3 files changed, 36 insertions(+), 5 deletions(-)

diff --git a/vuu-ui/packages/vuu-filters/src/filter-clause/ColumnPicker.tsx b/vuu-ui/packages/vuu-filters/src/filter-clause/ColumnPicker.tsx
index 6c1e3d7f2..60568bd8c 100644
--- a/vuu-ui/packages/vuu-filters/src/filter-clause/ColumnPicker.tsx
+++ b/vuu-ui/packages/vuu-filters/src/filter-clause/ColumnPicker.tsx
@@ -41,7 +41,9 @@ export const ColumnPicker = forwardRef(function ColumnPicker(
           name.toLowerCase().includes(comboProps.value.toLowerCase()),
         )
         .map(({ name, label = name }) => (
-          <Option value={label} key={name} />
+          <Option value={name} key={name}>
+            {label}
+          </Option>
         ))}
     </ExpandoCombobox>
   );
diff --git a/vuu-ui/packages/vuu-theme/css/components/split-button.css b/vuu-ui/packages/vuu-theme/css/components/split-button.css
index ecd89fea8..bc51854c2 100644
--- a/vuu-ui/packages/vuu-theme/css/components/split-button.css
+++ b/vuu-ui/packages/vuu-theme/css/components/split-button.css
@@ -13,6 +13,9 @@
             border-radius: var(--trigger-border-radius);
         }
         
+        &.vuuFocusVisible {
+            --vuuButton-borderColor: transparent;
+        }
         
     }
 }
\ No newline at end of file
diff --git a/vuu-ui/showcase/src/examples/Filters/FilterBar/FilterBar.examples.tsx b/vuu-ui/showcase/src/examples/Filters/FilterBar/FilterBar.examples.tsx
index a34c5715c..bc3bc414a 100644
--- a/vuu-ui/showcase/src/examples/Filters/FilterBar/FilterBar.examples.tsx
+++ b/vuu-ui/showcase/src/examples/Filters/FilterBar/FilterBar.examples.tsx
@@ -10,9 +10,10 @@ import {
   useRef,
   useState,
 } from "react";
-import type { DataSourceFilter } from "@finos/vuu-data-types";
+import type { DataSourceFilter, SchemaColumn } from "@finos/vuu-data-types";
 import { Input, ToggleButton, ToggleButtonGroup } from "@salt-ds/core";
 import { LocalDataSourceProvider, getSchema } from "@finos/vuu-data-test";
+import { ColumnDescriptor } from "@finos/vuu-table-types";
 
 const lastUpdatedColumn = {
   name: "lastUpdated",
@@ -51,6 +52,7 @@ const FilterContainer = ({
 
 const DefaultFilterBarCore = ({
   QuickFilterProps,
+  columnDescriptors,
   filterState,
   onApplyFilter,
   onFilterDeleted,
@@ -61,8 +63,8 @@ const DefaultFilterBarCore = ({
   const [filterStruct, setFilterStruct] = useState<Filter | null>(null);
   const tableSchema = useMemo(() => getSchema("instruments"), []);
   const columns = useMemo(
-    () => [...tableSchema.columns, lastUpdatedColumn],
-    [tableSchema],
+    () => columnDescriptors ?? [...tableSchema.columns, lastUpdatedColumn],
+    [columnDescriptors, tableSchema.columns],
   );
 
   const handleApplyFilter = useCallback(
@@ -105,7 +107,7 @@ const DefaultFilterBarCore = ({
         onFilterDeleted={handleFilterDeleted}
         onFilterRenamed={handleFilterRenamed}
         onFilterStateChanged={handleFilterStateChange}
-        tableSchema={{ ...tableSchema, columns }}
+        tableSchema={{ ...tableSchema, columns: columns as SchemaColumn[] }}
         variant={variant}
       />
     </FilterContainer>
@@ -160,6 +162,30 @@ export const DefaultFilterBar = (props: Partial<FilterBarProps>) => (
   </LocalDataSourceProvider>
 );
 
+export const DefaultFilterBarColumnLabels = (
+  props: Partial<FilterBarProps>,
+) => {
+  const columnDescriptors: ColumnDescriptor[] = [
+    { label: "BBG", name: "bbg", serverDataType: "string" },
+    { label: "Currency", name: "currency", serverDataType: "string" },
+    { label: "Description", name: "description", serverDataType: "string" },
+    { label: "Exchange", name: "exchange", serverDataType: "string" },
+    { label: "ISIN", name: "isin", serverDataType: "string" },
+    { label: "Lot size", name: "lotSize", serverDataType: "int" },
+    { label: "RIC", name: "ric", serverDataType: "string" },
+    { label: "Supported", name: "supported", serverDataType: "boolean" },
+    { label: "Wish list", name: "wishlist", serverDataType: "boolean" },
+    { label: "Last Updated", name: "lastUpdated", serverDataType: "long" },
+    { label: "Price", name: "price", serverDataType: "double" },
+    { label: "Date", name: "date", serverDataType: "long" },
+  ];
+  return (
+    <LocalDataSourceProvider modules={["SIMUL"]}>
+      <FilterBarTemplate {...props} columnDescriptors={columnDescriptors} />
+    </LocalDataSourceProvider>
+  );
+};
+
 export const FilterBarOneSimpleFilter = () => {
   return (
     <LocalDataSourceProvider modules={["SIMUL"]}>