additional functionality on quick filters, fix tab auto naming

vuu-ui/packages/vuu-data-react/src/data-editing/date-editing-utils.tsx

@@ -1,7 +1,11 @@
 import { ColumnDescriptor } from "@finos/vuu-table-types";
-import { VuuInput, VuuTypeaheadInput } from "@finos/vuu-ui-controls";
+import {
+  VuuDatePicker,
+  VuuInput,
+  VuuTypeaheadInput,
+} from "@finos/vuu-ui-controls";
 import { SuggestionProvider, TableSchemaTable } from "@finos/vuu-data-types";
-import { CommitHandler } from "@finos/vuu-utils";
+import { CommitHandler, isDateTimeColumn } from "@finos/vuu-utils";
 
 export interface DataItemEditControlProps {
   column: ColumnDescriptor;
@@ -16,7 +20,13 @@ export const getDataItemEditControl = ({
   suggestionProvider,
   table,
 }: DataItemEditControlProps) => {
-  if (column.serverDataType === "string" && suggestionProvider && table) {
+  if (isDateTimeColumn(column)) {
+    return <VuuDatePicker onCommit={onCommit as any} />;
+  } else if (
+    column.serverDataType === "string" &&
+    suggestionProvider &&
+    table
+  ) {
     return (
       <VuuTypeaheadInput
         column={column.name}

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

@@ -43,6 +43,10 @@ export interface FilterBarProps extends HTMLAttributes<HTMLDivElement> {
   onFilterRenamed?: (filter: Filter, name: string) => void;
   onFilterStateChanged?: (state: FilterState) => void;
   suggestionProvider?: SuggestionProvider;
+  /**
+   * TableSchema is used both to populate list of available columns and to
+   * provide table in call to Typeahead service
+   */
   tableSchema?: TableSchema;
   variant?: FilterBarVariant;
 }

vuu-ui/packages/vuu-filters/src/quick-filters/QuickFilters.tsx

@@ -18,6 +18,7 @@ export interface QuickFilterProps
       FilterBarProps,
       "onApplyFilter" | "suggestionProvider" | "tableSchema"
     > {
+  allowAddColumn?: boolean;
   allowFind?: boolean;
   availableColumns: ColumnDescriptor[];
   onChangeQuickFilterColumns?: (columns: string[]) => void;
@@ -31,6 +32,7 @@ export interface QuickFilterProps
 }
 
 export const QuickFilters = ({
+  allowAddColumn = true,
   allowFind = true,
   availableColumns,
   onApplyFilter,
@@ -106,13 +108,15 @@ export const QuickFilters = ({
       <div className={`${classBase}-filter-container`}>
         {getFilterControls()}
       </div>
-      <ColumnPicker
-        columns={availableColumnNames}
-        icon="more-horiz"
-        iconSize={16}
-        onSelectionChange={onColumnsSelectionChange}
-        selected={quickFilterColumns}
-      />
+      {allowAddColumn ? (
+        <ColumnPicker
+          columns={availableColumnNames}
+          icon="more-horiz"
+          iconSize={16}
+          onSelectionChange={onColumnsSelectionChange}
+          selected={quickFilterColumns}
+        />
+      ) : null}
     </div>
   );
 };

vuu-ui/packages/vuu-filters/src/quick-filters/useQuickFilters.ts

@@ -3,7 +3,12 @@ import type { Filter } from "@finos/vuu-filter-types";
 import type { VuuRowDataItemType } from "@finos/vuu-protocol-types";
 import type { ColumnDescriptor } from "@finos/vuu-table-types";
 import { MultiSelectionHandler } from "@finos/vuu-ui-controls";
-import { CommitHandler, filterAsQuery, queryClosest } from "@finos/vuu-utils";
+import {
+  CommitHandler,
+  NoFilter,
+  filterAsQuery,
+  queryClosest,
+} from "@finos/vuu-utils";
 import {
   ChangeEventHandler,
   RefCallback,
@@ -49,7 +54,7 @@ const createFilterClause = (
 const buildFilterStruct = (
   quickFilters: QuickFilterValues,
   availableColumns: ColumnDescriptor[],
-): Filter => {
+): Filter | undefined => {
   const entries = Object.entries(quickFilters);
   if (entries.length === 1) {
     return createFilterClause(entries[0], availableColumns);
@@ -61,8 +66,6 @@ const buildFilterStruct = (
         availableColumns,
       ),
     };
-  } else {
-    throw Error("What no filter");
   }
 };
 
@@ -71,10 +74,14 @@ const buildFilter = (
   availableColumns: ColumnDescriptor[],
 ): DataSourceFilter => {
   const filterStruct = buildFilterStruct(quickFilters, availableColumns);
-  return {
-    filter: filterAsQuery(filterStruct),
-    filterStruct,
-  };
+  if (filterStruct) {
+    return {
+      filter: filterAsQuery(filterStruct),
+      filterStruct,
+    };
+  } else {
+    return NoFilter;
+  }
 };
 
 export type QuickFilterHookProps = Pick<

vuu-ui/packages/vuu-layout/src/layout-reducer/layoutUtils.ts

@@ -23,7 +23,7 @@ interface ComponentWithId {
 }
 
 export const getManagedDimension = (
-  style: CSSProperties
+  style: CSSProperties,
 ): [dimension, dimension] =>
   style.flexDirection === "column" ? ["height", "width"] : ["width", "height"];
 
@@ -33,7 +33,7 @@ export const applyLayoutProps = (component: ReactElement, path = "0") => {
   const [layoutProps, children] = getChildLayoutProps(
     typeOf(component) as string,
     component.props,
-    path
+    path,
   );
   return React.cloneElement(component, layoutProps, children);
 };
@@ -58,30 +58,30 @@ export interface LayoutProps extends ComponentWithId {
  */
 export const cloneElementAddLayoutProps = (
   layoutElement: ReactElement,
-  previousLayout?: ReactElement
+  previousLayout?: ReactElement,
 ): ReactElement => {
   const type = typeOf(layoutElement) as string;
   const [layoutProps, children] = getChildLayoutProps(
     type,
     layoutElement.props,
     "0",
     undefined,
-    previousLayout
+    previousLayout,
   );
   return cloneElement(layoutElement, layoutProps, children);
 };
 
 export const applyLayout = (
   type: layoutType,
   props: LayoutProps,
-  previousLayout?: LayoutModel
+  previousLayout?: LayoutModel,
 ): LayoutModel => {
   const [layoutProps, children] = getChildLayoutProps(
     type,
     props,
     "0",
     undefined,
-    previousLayout
+    previousLayout,
   );
   return {
     ...props,
@@ -96,7 +96,7 @@ function getLayoutProps(
   props: LayoutProps,
   path = "0",
   parentType: string | null = null,
-  previousLayout?: LayoutModel
+  previousLayout?: LayoutModel,
 ): LayoutProps {
   const {
     active: prevActive = 0,
@@ -107,8 +107,8 @@ function getLayoutProps(
   } = getProps(previousLayout);
 
   const prevMatch = typeOf(previousLayout) === type && path === prevPath;
-  const id = prevMatch ? prevId : props.id ?? uuid();
-  const active = type === "Stack" ? props.active ?? prevActive : undefined;
+  const id = prevMatch ? prevId : (props.id ?? uuid());
+  const active = type === "Stack" ? (props.active ?? prevActive) : undefined;
 
   const key = id;
   const style = prevMatch ? prevStyle : getStyle(type, props, parentType);
@@ -122,14 +122,14 @@ function getChildLayoutProps(
   props: LayoutProps,
   path: string,
   parentType: string | null = null,
-  previousLayout?: LayoutModel
+  previousLayout?: LayoutModel,
 ): [LayoutProps, ReactElement[]] {
   const layoutProps = getLayoutProps(
     type,
     props,
     path,
     parentType,
-    previousLayout
+    previousLayout,
   );
 
   if (props.layout && !previousLayout) {
@@ -149,13 +149,13 @@ function getLayoutChildren(
   type: string,
   children?: ReactElement[],
   path = "0",
-  previousChildren?: ReactElement[]
+  previousChildren?: ReactElement[],
 ) {
   const kids = Array.isArray(children)
     ? children
     : React.isValidElement(children)
-    ? [children]
-    : [];
+      ? [children]
+      : [];
   return isContainer(type)
     ? kids.map((child, i) => {
         const childType = typeOf(child) as string;
@@ -167,7 +167,7 @@ function getLayoutChildren(
             child.props,
             `${path}.${i}`,
             type,
-            previousChildren?.[i]
+            previousChildren?.[i],
           );
           return React.cloneElement(child, layoutProps, children);
         }
@@ -180,7 +180,7 @@ function getLayoutChildren(
 const getStyle = (
   type: string,
   props: LayoutProps,
-  parentType?: string | null
+  parentType?: string | null,
 ) => {
   let { style = theKidHasNoStyle } = props;
   if (type === "Flexbox") {
@@ -220,13 +220,13 @@ const getStyle = (
 
 export function layoutFromJson(
   { id = uuid(), type, children, props, state }: LayoutJSON,
-  path: string
+  path: string,
 ): ReactElement {
   const componentType = type.match(/^[a-z]/) ? type : getLayoutComponent(type);
 
   if (componentType === undefined) {
     throw Error(
-      `layoutUtils unable to create component from JSON, unknown type ${type}`
+      `layoutUtils unable to create component from JSON, unknown type ${type}`,
     );
   }
 
@@ -244,7 +244,7 @@ export function layoutFromJson(
     },
     children
       ? children.map((child, i) => layoutFromJson(child, `${path}.${i}`))
-      : undefined
+      : undefined,
   );
 }
 
@@ -303,7 +303,7 @@ export type LayoutQuery = "PARENT_CONTAINER";
 export const layoutQuery = (
   query: LayoutQuery,
   path?: string,
-  layoutRoot?: ReactElement
+  layoutRoot?: ReactElement,
 ) => {
   if (path && layoutRoot) {
     const parentElement = followPathToParent(layoutRoot, path);
@@ -325,9 +325,12 @@ export const layoutQuery = (
 export const getDefaultTabLabel: TabLabelFactory = (
   component,
   tabIndex,
-  existingLabels = []
+  existingLabels = [],
 ): string => {
-  let label = component.props?.title ?? component.props?.["data-tab-title"];
+  let label =
+    component.props?.title ??
+    component.props?.["data-tab-title"] ??
+    existingLabels[tabIndex];
   if (label) {
     return label;
   } else {

vuu-ui/packages/vuu-layout/src/stack/Stack.tsx

@@ -21,7 +21,7 @@ const classBase = "vuuTabs";
 const getDefaultTabIcon = () => undefined;
 
 const getChildElements = <T extends ReactElement = ReactElement>(
-  children: ReactNode
+  children: ReactNode,
 ): T[] => {
   const elements: T[] = [];
   React.Children.forEach(children, (child) => {
@@ -59,7 +59,7 @@ export const Stack = forwardRef(function Stack(
     showTabs = "top",
     style,
   }: StackProps,
-  ref: ForwardedRef<HTMLDivElement>
+  ref: ForwardedRef<HTMLDivElement>,
 ) {
   const targetWindow = useWindow();
   useComponentCssInjection({
@@ -69,7 +69,7 @@ export const Stack = forwardRef(function Stack(
   });
 
   const id = useId(idProp);
-  const tabLabels = useRef<string[]>([]);
+  const tabLabelsRef = useRef<string[]>([]);
   const {
     allowCloseTab,
     allowRenameTab,
@@ -81,11 +81,11 @@ export const Stack = forwardRef(function Stack(
       _oldText: string,
       newText: string,
       _allowDeactivation: boolean,
-      tabIndex: number
+      tabIndex: number,
     ) => {
       onTabEdit?.(tabIndex, newText);
     },
-    [onTabEdit]
+    [onTabEdit],
   );
 
   const activeChild = () => {
@@ -101,15 +101,19 @@ export const Stack = forwardRef(function Stack(
     return null;
   };
 
+  // The list of existing Tab Labels is required only when assigning a default label
+  // to a new Tab. We rebuild on each render
+  tabLabelsRef.current.length = 0;
+
   const renderTabs = () =>
     getChildElements(children).map((child, idx) => {
       const {
         closeable = allowCloseTab,
         id: childId = `${id}-${idx}`,
         "data-tab-location": tabLocation,
       } = child.props;
-      const label = getTabLabel(child, idx, tabLabels.current);
-      tabLabels.current.push(label);
+      const label = getTabLabel(child, idx, tabLabelsRef.current);
+      tabLabelsRef.current.push(label);
       return (
         <Tab
           ariaControls={childId}

vuu-ui/packages/vuu-ui-controls/src/column-picker/ColumnPicker.css

@@ -0,0 +1,3 @@
+.vuuColumnPicker {
+  z-index: 100;
+}