Login panel (#942)

* login panel

* WIP

* tidy up type issues etc

* import fixes

* remove deprecated example

.gitignore

@@ -34,3 +34,4 @@ website/package-lock.json
 
 # Generated docs
 docs/contributing.md
+vuu-ui/packages/vuu-data/src/inlined-worker.js

vuu-ui/packages/vuu-data-ag-grid/src/ViewportRowModelDataSource.ts

@@ -1,10 +1,10 @@
 import {
   DataSource,
   DataSourceConfig,
+  isVuuFeatureAction,
   SubscribeCallback,
   VuuFeatureMessage,
 } from "@finos/vuu-data";
-import { isVuuFeatureAction } from "@finos/vuu-data-react";
 import { Filter } from "@finos/vuu-filter-types";
 import { VuuGroupBy, VuuSort } from "@finos/vuu-protocol-types";
 import {

vuu-ui/packages/vuu-data-ag-grid/src/useViewportRowModel.ts

@@ -1,5 +1,7 @@
 import {
   DataSourceConfig,
+  isViewportMenusAction,
+  isVisualLinksAction,
   MenuRpcResponse,
   RemoteDataSource,
   VuuFeatureMessage,
@@ -8,8 +10,6 @@ import {
 } from "@finos/vuu-data";
 
 import {
-  isViewportMenusAction,
-  isVisualLinksAction,
   MenuActionConfig,
   SuggestionFetcher,
   useTypeaheadSuggestions,

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

@@ -53,34 +53,6 @@ const { KEY } = metadataKeys;
 
 const NO_CONFIG: MenuActionConfig = {};
 
-export const isVisualLinksAction = (
-  action: GridAction
-): action is DataSourceVisualLinksMessage => action.type === "vuu-links";
-
-export const isVisualLinkCreatedAction = (
-  action: GridAction
-): action is DataSourceVisualLinkCreatedMessage =>
-  action.type === "vuu-link-created";
-
-export const isVisualLinkRemovedAction = (
-  action: GridAction
-): action is DataSourceVisualLinkRemovedMessage =>
-  action.type === "vuu-link-removed";
-
-export const isViewportMenusAction = (
-  action: GridAction
-): action is DataSourceMenusMessage => action.type === "vuu-menu";
-
-export const isVuuFeatureAction = (
-  action: GridAction
-): action is VuuFeatureMessage =>
-  isViewportMenusAction(action) || isVisualLinksAction(action);
-
-export const isVuuFeatureInvocation = (
-  action: GridAction
-): action is VuuFeatureInvocationMessage =>
-  action.type === "vuu-link-created" || action.type === "vuu-link-removed";
-
 const isMenuItem = (menu: VuuMenuItem | VuuMenu): menu is VuuMenuItem =>
   "rpcName" in menu;
 
@@ -213,7 +185,7 @@ export type VuuServerMenuOptions = {
   columnMap: ColumnMap;
   columnName: string;
   row: DataSourceRow;
-  selectedRowsCount: number;
+  selectedRows: DataSourceRow[];
   viewport: string;
 };
 
@@ -318,11 +290,12 @@ export const useVuuMenuActions = ({
 }: VuuMenuActionHookProps): ViewServerHookResult => {
   const buildViewserverMenuOptions: MenuBuilder = useCallback(
     (location, options) => {
-      const { visualLink, visualLinks, vuuMenu } = menuActionConfig;
+      const { links, menu } = dataSource;
+      const { visualLink } = menuActionConfig;
       const descriptors: ContextMenuItemDescriptor[] = [];
 
-      if (location === "grid" && visualLinks && !visualLink) {
-        visualLinks.forEach((linkDescriptor: LinkDescriptorWithLabel) => {
+      if (location === "grid" && links && !visualLink) {
+        links.forEach((linkDescriptor: LinkDescriptorWithLabel) => {
           const { link, label: linkLabel } = linkDescriptor;
           const label = linkLabel ? linkLabel : link.toTable;
           descriptors.push({
@@ -333,13 +306,13 @@ export const useVuuMenuActions = ({
         });
       }
 
-      if (vuuMenu && isTableLocation(location)) {
+      if (menu && isTableLocation(location)) {
         const menuDescriptor = buildMenuDescriptor(
-          vuuMenu,
+          menu,
           location,
           options as VuuServerMenuOptions
         );
-        if (isRoot(vuuMenu) && isGroupMenuItemDescriptor(menuDescriptor)) {
+        if (isRoot(menu) && isGroupMenuItemDescriptor(menuDescriptor)) {
           descriptors.push(...menuDescriptor.children);
         } else if (menuDescriptor) {
           descriptors.push(menuDescriptor);
@@ -348,7 +321,7 @@ export const useVuuMenuActions = ({
 
       return descriptors;
     },
-    [menuActionConfig]
+    [dataSource, menuActionConfig]
   );
 
   const handleMenuAction = useCallback(

vuu-ui/packages/vuu-data-test/src/simul/reference-data/instruments.ts

@@ -69,7 +69,7 @@ for (const char of chars) {
       currency,
       description,
       exchange,
-      isin,
+      String(isin),
       lotSize,
       ric,
       price,

vuu-ui/packages/vuu-data/src/array-data-source/array-data-source.ts

@@ -33,6 +33,7 @@ import {
   DataSourceConfig,
   DataSourceConstructorProps,
   DataSourceEvents,
+  DataSourceStatus,
   groupByChanged,
   hasFilter,
   hasGroupBy,
@@ -110,7 +111,6 @@ export class ArrayDataSource
 {
   private clientCallback: SubscribeCallback | undefined;
   private columnDescriptors: ColumnDescriptor[];
-  private status = "initialising";
   private disabled = false;
   private groupedData: undefined | DataSourceRow[];
   private groupMap: undefined | GroupMap;
@@ -128,6 +128,7 @@ export class ArrayDataSource
   #range: VuuRange = NULL_RANGE;
   #selectedRowsCount = 0;
   #size = 0;
+  #status: DataSourceStatus = "initialising";
   #title: string | undefined;
 
   public viewport: string;
@@ -198,7 +199,7 @@ export class ArrayDataSource
   ) {
     this.clientCallback = callback;
     this.viewport = viewport;
-    this.status = "subscribed";
+    this.#status = "subscribed";
     this.lastRangeServed = { from: 0, to: 0 };
 
     let config = this.#config;
@@ -296,6 +297,10 @@ export class ArrayDataSource
     }
   }
 
+  get status() {
+    return this.#status;
+  }
+
   get data() {
     return this.#data;
   }

vuu-ui/packages/vuu-data/src/connection-manager.ts

@@ -234,6 +234,12 @@ export interface ServerAPI {
 
 const connectedServerAPI: ServerAPI = {
   subscribe: (message, callback) => {
+    if (viewports.get(message.viewport)) {
+      throw Error(
+        `ConnectionManager attempting to subscribe with an existing viewport id`
+      );
+    }
+    // TODO we never use this status
     viewports.set(message.viewport, {
       status: "subscribing",
       request: message,

vuu-ui/packages/vuu-data/src/data-source.ts

@@ -344,6 +344,7 @@ const datasourceMessages = [
   "vuu-menu",
   "sort",
   "subscribed",
+  "VIEW_PORT_MENU_REJ",
 ];
 
 export type ConfigChangeColumnsMessage = {
@@ -487,18 +488,56 @@ export type RpcResponse =
 
 export type RpcResponseHandler = (response: RpcResponse) => boolean;
 
+export type RowSearchPredicate = (row: DataSourceRow) => boolean;
+
+export type DataSourceStatus =
+  | "disabled"
+  | "disabling"
+  | "enabled"
+  | "enabling"
+  | "initialising"
+  | "subscribing"
+  | "subscribed"
+  | "suspended"
+  | "unsubscribed";
+
 export interface DataSource extends EventEmitter<DataSourceEvents> {
   aggregations: VuuAggregation[];
   applyEdit: DataSourceEditHandler;
   closeTreeNode: (key: string, cascade?: boolean) => void;
   columns: string[];
   config: DataSourceConfig;
+  status: DataSourceStatus;
+  /**
+   *
+   * Similar to disable but intended for pauses of very short duration (default is 3 seconds). Although
+   * the dataSource will stop sending messages until resumed, it will not disconnect from a  remote server.
+   * It will preserve subscription to the remote server and continue to apply updates to cached data. It
+   * just won't send updates through to the UI thread (until resumed). Useful in edge cases such as where a
+   * component is dragged to a new location. When dropped, the component will be unmounted and very quickly
+   * remounted by React. For the duration of this operation, we suspend updates . Updating an unmounted
+   * React component would cause a React error.
+   * If an suspend is requested and not resumed within 3 seconds, it will automatically be promoted to a disable.,
+   */
   suspend?: () => void;
   resume?: () => void;
-  enable?: () => void;
+  /**
+   * For a dataSource that has been previously disabled and is currently in disabled state , this will restore
+   * the subscription to active status. Fresh data will be dispatched to client. The enable call optionally
+   * accepts the same subscribe callback as subscribe. This allows a completely new instance of a component to
+   * assume ownership of a subscription and receive all messages.
+   */
+  enable?: (callback?: SubscribeCallback) => void;
+  /**
+   * Disables this subscription. A datasource will send no further messages until re-enabled. Example usage
+   * might be for a component displayed within a set of Tabs. If user switches to another tab, the dataSource
+   * of the component that is no longer visible can be disabled until it is made visible again.
+   */
   disable?: () => void;
   filter: DataSourceFilter;
   groupBy: VuuGroupBy;
+  links?: LinkDescriptorWithLabel[];
+  menu?: VuuMenu;
   menuRpcCall: (
     rpcRequest: Omit<ClientToServerMenuRPC, "vpId"> | ClientToServerEditRpc
   ) => Promise<RpcResponse | undefined>;

vuu-ui/packages/vuu-data/src/json-data-source.ts

@@ -23,6 +23,7 @@ import type {
   DataSource,
   DataSourceConstructorProps,
   DataSourceEvents,
+  DataSourceStatus,
   SubscribeCallback,
   SubscribeProps,
   WithFullConfig,
@@ -54,7 +55,6 @@ export class JsonDataSource
   extends EventEmitter<DataSourceEvents>
   implements DataSource
 {
-  private status = "initialising";
   public columnDescriptors: ColumnDescriptor[];
   private clientCallback: SubscribeCallback | undefined;
   private expandedRows = new Set<string>();
@@ -69,6 +69,7 @@ export class JsonDataSource
   #selectedRowsCount = 0;
   #size = 0;
   #sort: VuuSort = { sortDefs: [] };
+  #status: DataSourceStatus = "initialising";
   #title: string | undefined;
 
   public rowCount: number | undefined;
@@ -156,14 +157,14 @@ export class JsonDataSource
       this.#sort = sort;
     }
 
-    if (this.status !== "initialising") {
+    if (this.#status !== "initialising") {
       //TODO check if subscription details are still the same
       return;
     }
 
     this.viewport = viewport;
 
-    this.status = "subscribed";
+    this.#status = "subscribed";
 
     this.clientCallback?.({
       aggregations: this.#aggregations,
@@ -262,6 +263,10 @@ export class JsonDataSource
     this.sendRowsToClient();
   }
 
+  get status() {
+    return this.#status;
+  }
+
   get config() {
     return this.#config;
   }
@@ -386,8 +391,10 @@ export class JsonDataSource
     return undefined;
   }
 
-  applyEdit(rowIndex: number, columnName: string, value: VuuColumnDataType) {
-    console.log(`ArrayDataSource applyEdit ${rowIndex} ${columnName} ${value}`);
+  applyEdit(row: DataSourceRow, columnName: string, value: VuuColumnDataType) {
+    console.log(
+      `ArrayDataSource applyEdit ${row.join(",")} ${columnName} ${value}`
+    );
     return true;
   }