Merge pull request #1463 from finos/shell-layout-left-tabs

refactor feature and datasource provider useFullHeightLeftPanel

Author: heswell

vuu-ui/packages/vuu-data-react/src/datasource-provider/VuuDataSourceProvider.tsx

@@ -0,0 +1,17 @@
+import { VuuDataSource, getServerAPI } from "@finos/vuu-data-remote";
+import { DataSourceProvider } from "@finos/vuu-utils";
+import { ReactNode } from "react";
+
+export const VuuDataSourceProvider = ({
+  children,
+}: {
+  children: ReactNode;
+}) => (
+  <DataSourceProvider
+    VuuDataSource={VuuDataSource}
+    getServerAPI={getServerAPI}
+    isLocalData={false}
+  >
+    {children}
+  </DataSourceProvider>
+);

vuu-ui/packages/vuu-data-react/src/hooks/useVuuTables.ts

@@ -1,11 +1,12 @@
-import { getServerAPI } from "@finos/vuu-data-remote";
 import type { TableSchema } from "@finos/vuu-data-types";
-import type { VuuTable } from "@finos/vuu-protocol-types";
+import { useDataSource } from "@finos/vuu-utils";
 import { useCallback, useEffect, useState } from "react";
 
 export const useVuuTables = () => {
   const [tables, setTables] = useState<Map<string, TableSchema> | undefined>();
 
+  const { getServerAPI } = useDataSource();
+
   const buildTables = useCallback((schemas: TableSchema[]) => {
     const vuuTables = new Map<string, TableSchema>();
     schemas.forEach((schema) => {
@@ -21,22 +22,19 @@ export const useVuuTables = () => {
         const { tables } = await server.getTableList();
         const tableSchemas = buildTables(
           await Promise.all(
-            tables.map((vuuTable) => server.getTableSchema(vuuTable))
-          )
+            tables.map((vuuTable) => server.getTableSchema(vuuTable)),
+          ),
         );
         setTables(tableSchemas);
       } catch (err) {
         console.warn(
-          `useVuuTables: unable to connect to Vuu server ${String(err)}`
+          `useVuuTables: error fetching table metedata ${String(err)}`,
         );
       }
     }
 
     fetchTableMetadata();
-  }, [buildTables]);
+  }, [buildTables, getServerAPI]);
 
   return tables;
 };
-
-export const getVuuTableSchema = (table: VuuTable) =>
-  getServerAPI().then((server) => server.getTableSchema(table));

vuu-ui/packages/vuu-data-test/src/basket/basket-schemas.ts

@@ -1,4 +1,5 @@
 import { TableSchema } from "@finos/vuu-data-types";
+import { VuuTable } from "@finos/vuu-protocol-types";
 
 export type BasketsTableName =
   | "algoType"
@@ -128,3 +129,11 @@ export const schemas: Readonly<
     table: { module: "BASKET", table: "priceStrategyType" },
   },
 };
+
+export type BasketVuuTable = {
+  module: "BASKET";
+  table: BasketsTableName;
+};
+
+export const isBasketTable = (table: VuuTable): table is BasketVuuTable =>
+  table.module === "BASKET";

vuu-ui/packages/vuu-data-test/src/basket/index.ts

@@ -1,5 +1,6 @@
 export {
   type BasketsTableName,
   schemas as basketSchemas,
+  isBasketTable,
 } from "./basket-schemas";
 export * from "./basket-module";

vuu-ui/packages/vuu-data-test/src/local-datasource-provider/LocalDatasourceProvider.tsx

@@ -0,0 +1,67 @@
+import type {
+  DataSourceConstructorProps,
+  TableSchema,
+} from "@finos/vuu-data-types";
+import type { VuuTable, VuuTableList } from "@finos/vuu-protocol-types";
+import { basketModule, basketSchemas, isBasketTable } from "../basket";
+import { isSimulTable, simulModule, simulSchemas } from "../simul";
+import { ReactNode } from "react";
+import { DataSourceProvider } from "@finos/vuu-utils";
+
+interface ServerAPI {
+  getTableList: () => Promise<VuuTableList>;
+  getTableSchema: (table: VuuTable) => Promise<TableSchema>;
+}
+
+const serverAPI: ServerAPI = {
+  getTableList: async () => {
+    return {
+      tables: Object.values(simulSchemas)
+        .concat(Object.values(basketSchemas))
+        .map((schema) => schema.table),
+    };
+  },
+  getTableSchema: async (vuuTable: VuuTable) => {
+    if (isSimulTable(vuuTable)) {
+      return simulSchemas[vuuTable.table];
+    } else if (isBasketTable(vuuTable)) {
+      return basketSchemas[vuuTable.table];
+    } else {
+      throw Error(
+        `unsupported module/table ${vuuTable.module}/${vuuTable.table}`,
+      );
+    }
+  },
+};
+
+const getServerAPI = async () => serverAPI;
+
+class VuuDataSource {
+  constructor({ table }: DataSourceConstructorProps) {
+    if (isSimulTable(table)) {
+      return simulModule.createDataSource(table.table);
+    } else if (isBasketTable(table)) {
+      return basketModule.createDataSource(table.table);
+    } else {
+      throw Error(`unsupported module/table ${table.module}/${table.table}`);
+    }
+  }
+}
+
+export const LocalDataSourceProvider = ({
+  children,
+  modules,
+}: {
+  children: ReactNode;
+  modules: string[];
+}) => {
+  return (
+    <DataSourceProvider
+      VuuDataSource={VuuDataSource as any}
+      vuuModuleNames={modules}
+      getServerAPI={getServerAPI}
+    >
+      {children}
+    </DataSourceProvider>
+  );
+};

vuu-ui/packages/vuu-data-test/src/simul/index.ts

@@ -1,2 +1,6 @@
-export { type SimulTableName, schemas as simulSchemas } from "./simul-schemas";
+export {
+  type SimulTableName,
+  isSimulTable,
+  schemas as simulSchemas,
+} from "./simul-schemas";
 export * from "./simul-module";

vuu-ui/packages/vuu-data-test/src/simul/simul-module.ts

@@ -4,15 +4,15 @@ import {
   VuuLink,
   VuuMenu,
 } from "@finos/vuu-protocol-types";
+import { MenuRpcResponse } from "@finos/vuu-data-types";
 import { Table, buildDataColumnMap, joinTables } from "../Table";
+import { RpcService, RpcServiceRequest } from "../VuuModule";
+import { SimulModule } from "./SimulModule";
 import { instrumentsTable } from "./reference-data/instruments";
 import { instrumentsExtendedTable } from "./reference-data/instruments-extended";
 import { ordersTable } from "./reference-data/orders";
 import { pricesTable } from "./reference-data/prices";
 import { schemas, type SimulTableName } from "./simul-schemas";
-import { RpcService, RpcServiceRequest } from "../VuuModule";
-import { MenuRpcResponse } from "packages/vuu-data-types";
-import { SimulModule } from "./SimulModule";
 
 const undefinedTables = {
   childOrders: undefined,
@@ -28,21 +28,21 @@ const tables: Record<SimulTableName, Table> = {
   childOrders: new Table(
     schemas.childOrders,
     [],
-    buildDataColumnMap<SimulTableName>(schemas, "childOrders")
+    buildDataColumnMap<SimulTableName>(schemas, "childOrders"),
   ),
   instruments: instrumentsTable,
   instrumentsExtended: instrumentsExtendedTable,
   instrumentPrices: joinTables(
     { module: "SIMUL", table: "instrumentPrices" },
     instrumentsTable,
     pricesTable,
-    "ric"
+    "ric",
   ),
   orders: ordersTable,
   parentOrders: new Table(
     schemas.parentOrders,
     [],
-    buildDataColumnMap<SimulTableName>(schemas, "parentOrders")
+    buildDataColumnMap<SimulTableName>(schemas, "parentOrders"),
   ),
   prices: pricesTable,
 };
@@ -94,7 +94,7 @@ const menus: Record<SimulTableName, VuuMenu | undefined> = {
 };
 
 async function cancelOrder(
-  rpcRequest: RpcServiceRequest
+  rpcRequest: RpcServiceRequest,
 ): Promise<Omit<MenuRpcResponse<ShowNotificationAction>, "requestId">> {
   const { rowKey } = rpcRequest as ClientToServerMenuRowRPC;
   const table = tables.orders;

vuu-ui/packages/vuu-data-test/src/simul/simul-schemas.ts

@@ -1,4 +1,5 @@
 import { TableSchema } from "@finos/vuu-data-types";
+import { VuuTable } from "@finos/vuu-protocol-types";
 
 export type SimulTableName =
   | "instruments"
@@ -143,3 +144,11 @@ export const schemas: Readonly<Record<SimulTableName, Readonly<TableSchema>>> =
       table: { module: "SIMUL", table: "prices" },
     },
   };
+
+export type SimulVuuTable = {
+  module: "SIMUL";
+  table: SimulTableName;
+};
+
+export const isSimulTable = (table: VuuTable): table is SimulVuuTable =>
+  table.module === "SIMUL";

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

@@ -7,6 +7,7 @@
     calc(var(--salt-size-base) + var(--salt-spacing-100))
   );
   --vuuFilterEditor-height: var(--filterbar-height);
+  --icon-container-height: auto;
   --flexbar-gap: var(--salt-spacing-100);
   --icon-marginTop: 0;
 
@@ -27,6 +28,7 @@
 }
 
 .vuuFilterBar-quick-filter {
+  --icon-container-height: 100%;
   --icon-marginTop: 20px;
   --filterbar-height: var(
     --vuuFilterBar-height,
@@ -42,7 +44,7 @@
 }
 
 .vuuFilterBar-iconContainer {
-  height: 100%;
+  height: var(--icon-container-height);
 
   .saltToggleButtonGroup {
     margin-top: var(--icon-marginTop);

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

@@ -93,9 +93,7 @@ export const FilterBar = ({
 
   const startAdornment = useMemo(() => {
     if (!allowQuickFilters) {
-      return <Icon name="tune" />;
-    } else if (!allowCustomFilters) {
-      return <Icon name="grid" />;
+      return <Icon name="filter" size={16} style={{ top: 4 }} />;
     } else {
       return (
         <ToggleButtonGroup
@@ -124,14 +122,20 @@ export const FilterBar = ({
         </ToggleButtonGroup>
       );
     }
-  }, [allowCustomFilters, allowQuickFilters, filterMode, onChangeFilterMode]);
+  }, [allowQuickFilters, filterMode, onChangeFilterMode]);
 
   return (
     <div
       {...htmlAttributes}
-      className={cx(className, `${classBase}-${filterMode}`)}
+      className={cx(
+        className,
+        `${classBase}-${variant}`,
+        `${classBase}-${filterMode}`,
+      )}
     >
-      <div className={`${classBase}-iconContainer`}>{startAdornment}</div>
+      {variant === "quick-filters" ? null : (
+        <div className={`${classBase}-iconContainer`}>{startAdornment}</div>
+      )}
       {filterMode === "custom-filter" ? (
         <CustomFilters
           columnDescriptors={columnDescriptors}