fix feature confoguration, basket trading

vuu-ui/packages/vuu-layout/src/layout-view-actions/ViewContext.ts

@@ -5,7 +5,7 @@ export type QueryReponse = { [key: string]: unknown };
 
 export type ViewDispatch = <Action extends ViewAction = ViewAction>(
   action: Action,
-  evt?: SyntheticEvent
+  evt?: SyntheticEvent,
 ) => Promise<boolean | QueryReponse | void>;
 
 /**
@@ -20,7 +20,7 @@ export interface ViewContextAPI {
    */
   dispatch?: ViewDispatch | null;
   id?: string;
-  load?: (key?: string) => unknown;
+  load?: <T = unknown>(key?: string) => T;
   loadSession?: (key?: string) => unknown;
   onConfigChange?: (config: unknown) => void;
   path?: string;

vuu-ui/packages/vuu-shell/src/feature-and-layout-provider/FeatureAndLayoutProvider.tsx

@@ -59,6 +59,7 @@ export const FeatureAndLayoutProvider = ({
   systemLayouts,
 }: FeatureAndLayoutProviderProps): ReactElement => {
   const tableSchemas = useVuuTables();
+
   const { dynamicFeatures, tableFeatures } = useMemo<{
     dynamicFeatures: DynamicFeatureProps[];
     tableFeatures: DynamicFeatureProps<FilterTableFeatureProps>[];

vuu-ui/packages/vuu-table-types/index.d.ts

@@ -249,6 +249,11 @@ export interface ColumnDescriptor extends DataValueDescriptor {
   aggregate?: VuuAggType;
   align?: ColumnAlignment;
   className?: string;
+  /**
+   * Allows custom content to be rendered into the column header. This will be an identifier.
+   * The identifier will be used to retrieve content from the component registry. The componnet
+   * yielded will be rendered into the column header.
+   */
   colHeaderContentRenderer?: string;
   colHeaderLabelRenderer?: string;
   flex?: number;

vuu-ui/packages/vuu-ui-controls/src/table-search/TableSearch.tsx

@@ -105,5 +105,3 @@ export const TableSearch = ({
 registerComponent("search-cell", SearchCell, "cell-renderer", {
   serverDataType: "private",
 });
-
-registerComponent?.("TableSearch", TableSearch, "view");

vuu-ui/packages/vuu-utils/src/feature-utils.ts

@@ -48,8 +48,7 @@ export interface DynamicFeatureDescriptor {
   css?: string;
   leftNavLocation: "vuu-features" | "vuu-tables";
   featureProps?: {
-    schema?: "*" | VuuTable;
-    schemas?: VuuTable[];
+    vuuTables?: "*" | VuuTable[];
   };
   viewProps?: ViewConfig;
 }
@@ -95,15 +94,20 @@ export interface VuuConfig {
   ssl: boolean;
 }
 
+/**
+ * We currently categorize 'features' simply by the leftNavLocation
+ * @param feature
+ * @returns
+ */
 export const isCustomFeature = (feature: DynamicFeatureDescriptor) =>
   feature.leftNavLocation === "vuu-features";
 
-export const isWildcardSchema = (schema?: "*" | VuuTable): schema is "*" =>
-  schema === "*";
-export const isVuuTable = (vuuTable?: "*" | VuuTable): vuuTable is VuuTable =>
-  typeof vuuTable === "object" &&
-  typeof vuuTable.module === "string" &&
-  typeof vuuTable.table === "string";
+export const isWildcardSchema = (
+  vuuTables?: "*" | VuuTable[],
+): vuuTables is "*" => vuuTables === "*";
+export const isVuuTables = (
+  vuuTables?: "*" | VuuTable[],
+): vuuTables is VuuTable[] => Array.isArray(vuuTables);
 
 export interface FeaturePropsWithFilterTableFeature
   extends Omit<DynamicFeatureProps, "ComponentProps"> {
@@ -182,14 +186,22 @@ export const assertComponentsRegistered = (componentList: Component[]) => {
     assertComponentRegistered(componentName, component);
   }
 };
-
+/**
+ *  Process the DynamicFeature descriptors. Identify
+ * the vuu tables required and inject the appropriate TableSchemas
+ *
+ * @param dynamicFeatures
+ * @param tableSchemas
+ * @returns
+ */
 export const getCustomAndTableFeatures = (
   dynamicFeatures: DynamicFeatureDescriptor[],
   tableSchemas: TableSchema[],
 ): {
   dynamicFeatures: DynamicFeatureProps[];
   tableFeatures: DynamicFeatureProps<FilterTableFeatureProps>[];
 } => {
+  // Split features into simple tables and 'custom' features
   const [customFeatureConfig, tableFeaturesConfig] = partition(
     dynamicFeatures,
     isCustomFeature,
@@ -203,24 +215,27 @@ export const getCustomAndTableFeatures = (
     viewProps,
     ...feature
   } of tableFeaturesConfig) {
-    const { schema: vuuTable } = featureProps;
-    if (isWildcardSchema(vuuTable) && tableSchemas) {
-      for (const tableSchema of tableSchemas) {
-        tableFeatures.push({
-          ...feature,
-          ComponentProps: {
-            tableSchema,
-          },
-          title: `${tableSchema.table.module} ${wordify(
-            tableSchema.table.table,
-          )}`,
-          ViewProps: {
-            ...viewProps,
-            allowRename: true,
-          },
-        });
+    const { vuuTables } = featureProps;
+    // Currently FilterTable is the only 'tableFeature' and it uses the wildcard
+    if (isWildcardSchema(vuuTables)) {
+      if (tableSchemas) {
+        for (const tableSchema of tableSchemas) {
+          tableFeatures.push({
+            ...feature,
+            ComponentProps: {
+              tableSchema,
+            },
+            title: `${tableSchema.table.module} ${wordify(
+              tableSchema.table.table,
+            )}`,
+            ViewProps: {
+              ...viewProps,
+              allowRename: true,
+            },
+          });
+        }
       }
-    } else if (isVuuTable(vuuTable) && tableSchemas) {
+    } /*else if (isVuuTables(vuuTables) && tableSchemas) {
       const tableSchema = tableSchemas.find((tableSchema) =>
         isSameTable(vuuTable, tableSchema.table),
       );
@@ -233,40 +248,31 @@ export const getCustomAndTableFeatures = (
           ViewProps: viewProps,
         });
       }
-    }
+    }*/
   }
 
   for (const {
     featureProps = {},
     viewProps,
     ...feature
   } of customFeatureConfig) {
-    const { schema: vuuTable, schemas } = featureProps;
-    if (isVuuTable(vuuTable) && tableSchemas) {
-      const tableSchema = tableSchemas.find((tableSchema) =>
-        isSameTable(vuuTable, tableSchema.table),
-      );
-      customFeatures.push({
-        ...feature,
-        ComponentProps: {
-          tableSchema,
-        },
-        ViewProps: viewProps,
-      });
-    } else if (Array.isArray(schemas) && tableSchemas) {
-      customFeatures.push({
-        ...feature,
-        ComponentProps: schemas.reduce<Record<string, TableSchema>>(
-          (map, vuuTable) => {
-            map[`${vuuTable.table}Schema`] = tableSchemas.find((tableSchema) =>
-              isSameTable(vuuTable, tableSchema.table),
-            ) as TableSchema;
-            return map;
-          },
-          {},
-        ),
-        ViewProps: viewProps,
-      });
+    const { vuuTables } = featureProps;
+    if (isVuuTables(vuuTables)) {
+      if (tableSchemas) {
+        customFeatures.push({
+          ...feature,
+          ComponentProps: vuuTables.reduce<Record<string, TableSchema>>(
+            (map, vuuTable) => {
+              map[`${vuuTable.table}Schema`] = tableSchemas.find(
+                (tableSchema) => isSameTable(vuuTable, tableSchema.table),
+              ) as TableSchema;
+              return map;
+            },
+            {},
+          ),
+          ViewProps: viewProps,
+        });
+      }
     } else {
       customFeatures.push(feature);
     }

vuu-ui/sample-apps/feature-basket-trading/index.ts

@@ -1,10 +1,7 @@
 import VuuBasketTradingFeature from "./src/VuuBasketTradingFeature";
 export default VuuBasketTradingFeature;
-
-export type { BasketTradingFeatureProps } from "./src/VuuBasketTradingFeature";
 export type { basketDataSourceKey } from "./src/useBasketTradingDatasources";
 export { BasketSelector } from "./src/basket-selector";
 export { BasketToolbar } from "./src/basket-toolbar";
 export { NewBasketPanel } from "./src/new-basket-panel";
-
 export { Basket } from "./src/useBasketTrading";

vuu-ui/sample-apps/feature-basket-trading/package.json

@@ -47,7 +47,7 @@
       "header": false
     },
     "featureProps": {
-      "schemas": [
+      "vuuTables": [
         {
           "module": "BASKET",
           "table": "basket"

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

@@ -1,33 +1,22 @@
-import { TableSchema } from "@finos/vuu-data-types";
 import { FlexboxLayout, Stack } from "@finos/vuu-layout";
 import { BasketTableEdit } from "./basket-table-edit";
 import { BasketTableLive } from "./basket-table-live";
 import { BasketToolbar } from "./basket-toolbar";
-
-import "./VuuBasketTradingFeature.css";
 import { EmptyBasketsPanel } from "./empty-baskets-panel";
 import { useBasketTrading } from "./useBasketTrading";
 
+import "./VuuBasketTradingFeature.css";
+
 const classBase = "VuuBasketTradingFeature";
 
 export type BasketStatus = "design" | "on-market";
 const basketStatus: [BasketStatus, BasketStatus] = ["design", "on-market"];
 
-export interface BasketTradingFeatureProps {
-  basketSchema: TableSchema;
-  basketConstituentSchema: TableSchema;
-  basketTradingSchema: TableSchema;
-  basketTradingConstituentJoinSchema: TableSchema;
-}
-
-const VuuBasketTradingFeature = (props: BasketTradingFeatureProps) => {
-  const {
-    basketSchema,
-    basketConstituentSchema,
-    basketTradingSchema,
-    basketTradingConstituentJoinSchema,
-  } = props;
-
+const VuuBasketTradingFeature = () => {
+  const basketTradingProps = useBasketTrading();
+  if (basketTradingProps === undefined) {
+    return null;
+  }
   const {
     basket,
     basketCount,
@@ -44,14 +33,13 @@ const VuuBasketTradingFeature = (props: BasketTradingFeatureProps) => {
     onDropInstrument,
     onSendToMarket,
     onTakeOffMarket,
-  } = useBasketTrading({
-    basketSchema,
-    basketConstituentSchema,
-    basketTradingSchema,
-    basketTradingConstituentJoinSchema,
-  });
+  } = basketTradingProps;
 
-  if (basketCount === -1) {
+  if (
+    basketCount === -1 ||
+    dataSourceBasketTradingConstituentJoin === undefined ||
+    basketSelectorProps === undefined
+  ) {
     // TODO loading
     return null;
   } else if (basketCount === 0) {

vuu-ui/sample-apps/feature-basket-trading/src/basket-table-edit/BasketTableEdit.tsx

@@ -1,17 +1,21 @@
-import { Table, TableProps } from "@finos/vuu-table";
 import {
   ContextMenuConfiguration,
   ContextMenuProvider,
 } from "@finos/vuu-popups";
+import { Table, TableProps } from "@finos/vuu-table";
+import { registerComponent } from "@finos/vuu-utils";
 import { ColHeaderAddSymbol } from "../cell-renderers";
 
 import "./BasketTableEdit.css";
 
-const classBase = "vuuBasketTableEdit";
+registerComponent(
+  "col-header-add-symbol",
+  ColHeaderAddSymbol,
+  "column-header-content-renderer",
+  {},
+);
 
-if (typeof ColHeaderAddSymbol !== "function") {
-  console.warn("BasketTableEdit not all custom cell renderers are available");
-}
+const classBase = "vuuBasketTableEdit";
 
 export interface BasketTableEditProps extends TableProps {
   contextMenuConfig: ContextMenuConfiguration;

vuu-ui/sample-apps/feature-basket-trading/src/cell-renderers/col-header-add-symbol/ColHeaderAddSymbol.tsx

@@ -3,14 +3,17 @@ import {
   useLayoutProviderDispatch,
   useViewContext,
 } from "@finos/vuu-layout";
-import { VuuShellLocation, registerComponent } from "@finos/vuu-utils";
+import { registerComponent, VuuShellLocation } from "@finos/vuu-utils";
 import { Button } from "@salt-ds/core";
 import type { DataSource } from "@finos/vuu-data-types";
 import type { TableSearchProps } from "@finos/vuu-ui-controls/src";
 import { MouseEventHandler, useCallback, useMemo } from "react";
+import { TableSearch } from "@finos/vuu-ui-controls";
 
 import "./ColHeaderAddSymbol.css";
 
+registerComponent("TableSearch", TableSearch, "view");
+
 const classBase = "vuuColHeaderAddSymbol";
 
 export const ColHeaderAddSymbol = () => {
@@ -37,13 +40,17 @@ export const ColHeaderAddSymbol = () => {
         props: {
           expanded: true,
           content: {
-            type: "InstrumentSearch",
+            type: "TableSearch",
             props: {
               TableProps: {
                 allowDragDrop: "drag-copy",
+                config: {
+                  columns: [{ name: "description" }],
+                },
                 dataSource,
                 id: "basket-instruments",
               },
+              searchColumns: ["description"],
             } as TableSearchProps,
           },
           title: "Add Ticker",
@@ -59,10 +66,3 @@ export const ColHeaderAddSymbol = () => {
     </span>
   );
 };
-
-registerComponent(
-  "col-header-add-symbol",
-  ColHeaderAddSymbol,
-  "column-header-content-renderer",
-  {},
-);