Merge finos:main -> sl:main

* finos#900 disable failing test

* Update check on viewport and context menu (finos#913)

* remove reprecated Portal, fixes in COntextMenu

* use woff2 font, fix portal

* make sure ContextMenu always has theme attributes

* type fixes

* Tidy package and type issues (finos#914)

* fix package references, type issues

* add typescript config for correct auto import resolution

* Layout Management (finos#916)

* fix vuu-filters types

* drawer and dialog fix

* drag drop flexbox editable

* Update vuu-ui/packages/vuu-filters/src/filter-utils.ts

Whitespace between guard clauses

Co-authored-by: Luke Vincent <lincent@users.noreply.github.com>

* layout header

* restore double quotes

* layout-provider

* layout-reducer

* layout-view

* palette

* palette

* placeholder

* layout-view decomment

* registry

* rollback multi filter dropdown

* stack

* tabs

* config wrapper

* tools

* utils

* layout top level

* revert flexbox layout change

* restore lost semicolon

* missing space

* change action to a type union

* Update README.md

* Sync with Finos main

* VUU-41 style fixes

* VUU-41 rename css variable to --vuu

* Manage layout persistence via interface (#55)

* VUU-27 interface to return promises

* VUU-47 add methods for loading and saving tempLayout

* VUU-47 use loadLayoutById in LayoutList

* VUU-47 remove unused files

* VUU-47 update other examples to use new hook

* Calculated column (finos#882)

* calculated column in settings, instrument search

* additional mock data sources

* instrument tiles

* calculated column editing

* measured-container

* Row used columnMap rathe than column key

* full keyboard nav for table

* fix drag drop in column group headerr

* use MeasuredContainer for Table List

* table cell editing updates datasource

* table editing

* fix type issues

* fix old background renderer

* remove outdated import in showcase story

* exclude PatternValidator from semgrep

* add vuu tooltip component (finos#885)

* VUU-47 improve naming

* VUU-47 use placeholder in defaultLayout

* VUU-47 update docs with new naming

* remove duplicate CSS

* VUU-47 fix layoutList styling

* VUU-47 add loaded layouts to layout view

* VUU-47 rename currentLayout to applicationLayout

* VUU-47 make defaultLayout closeable and update features

* VUU-27 interface to return promises

* VUU-54: Validate IDs in LocalLayoutPersistenceManager

* VUU-54: Mock get/saveLocalEntity

* VUU-54: Refactor promises

* VUU-54: Remove unnecessary asyncs

* VUU-54: Use string union to distinguish layouts/metadata

* VUU-54: Rename variables

* VUU-54: Convert layout types to interfaces

* VUU-54: Extract loadAndFilter method

* VUU-54: Replace filter with find

* VUU-54: Rename validateId variables

* VUU-54: Change vars to lets

* VUU-54: Update imports for consistency

* VUU-54: Add comment to explain filter(Boolean)

* VUU-54: Refactor tests

* VUU-54: Extract expectError

* VUU-54: Remove loadAndFilter method

* VUU-54: Remove removeEntry method

* VUU-52: Add E2E tests to CI

* VUU-52: Use commit hash for cypress-io

* VUU-52: Add comment to explain full SHA

* VUU-47 rename imports

* VUU-59 set up notification context

* VUU-47 fix cypress test

* Update vuu-ui/packages/vuu-layout/src/layout-persistence/LayoutPersistenceManager.ts

Co-authored-by: Cara <99646608+cfisher-scottlogic@users.noreply.github.com>

* VUU-47 remove unused import

* VUU-59 notifications with animation

* VUU-59 revert changes to imports

* VUU-59 change toast timeout

* VUU-59 change notificationType to enum

* VUU-59 improvements to example and add comments

---------

Co-authored-by: harryhartley <hhartley94@gmail.com>
Co-authored-by: Luke Vincent <lincent@users.noreply.github.com>
Co-authored-by: Joe Dunleavy <107405201+Joe-Dunleavy@users.noreply.github.com>
Co-authored-by: Joe Dunleavy <jdunleavy@scottlogic.com>
Co-authored-by: cfisher-scottlogic <cfisher@scottlogic.com>
Co-authored-by: Cara <99646608+cfisher-scottlogic@users.noreply.github.com>
Co-authored-by: Peter Ling <pling@scottlogic.com>
Co-authored-by: pling-scottlogic <79100986+pling-scottlogic@users.noreply.github.com>
Co-authored-by: heswell <steve@heswell.com>

* add Layout Management Provider to sample apps (finos#917)

* add Layout Management Provider to sample apps

* fix test dependencies

* Drag drop provider (finos#918)

* add DragDrop example, resume drag in DragProvider

* full flow for remote drag

* fix type issues

* fix post rebase conflicts, type issues

* ignore type issue in drag drop code for now, so packages build

* Filterbar styling (finos#919)

* improve the keyboards navigation in Toolbar

* fix form control styling, uennecessaryb layout rerenders, table resize bug

* make sure all table config setting changes are saved, style tweaks

* calculated columns

* fix dropdown width

* fix width of combo in SaveLayout Panel

* remove console.log

* fix bug in OverflowContainer when orientation vertical

* remove global error listener, leave this to cypress

* move test schemas out of showcase (finos#920)

* Update dependency electron to v22 [SECURITY] (finos#894)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* bump vite, vitest versions to latest (finos#921)

* Instrument picker (finos#923)

* make instrument-picker more generic

* refactor Table navigation, preparing for row highlighting

* fix broken import paths

* add empty inlined worker as vitext mocj fails otherwise

* reinstate ignore for inlined-wotker so stub file doesn't get overwritten (finos#924)

* disable basket functionality in showcase while we wait for full server (finos#925)

* disable basket functionality in showcase while we wait for server implementation

* remove console log

* fix styling of main tabs during drag (finos#929)

* wiring together calculated column pieces (finos#931)

* wiring together calculated column pieces

* remove logging

* re-enable all tests

* fix FilterTable resize bug (finos#932)

* move table height fix to measured container (finos#933)

* type fixes (finos#934)

* final styling for calculated column input (finos#935)

* connect filterbar to persistence (finos#936)

* connect filterbar to persistence

* skip test for missing TreeWalker finctionality until its there

* final adjustments to table column header styling (finos#937)

* move date generators to test data package (finos#938)

* Bump postcss from 8.4.27 to 8.4.31 in /vuu-ui (finos#926)

Bumps [postcss](https://github.com/postcss/postcss) from 8.4.27 to 8.4.31.
- [Release notes](https://github.com/postcss/postcss/releases)
- [Changelog](https://github.com/postcss/postcss/blob/main/CHANGELOG.md)
- [Commits](postcss/postcss@8.4.27...8.4.31)

---
updated-dependencies:
- dependency-name: postcss
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* finos#850 added for functionality to the rpc service, not ready for the big time yet, but not far off.

* finos#850 added ability to reference tables in separate modules.

* finos#850 refactored simul module to take prices out to prices module

* finos#850 refactored tableDefContainer to make it an implicit, otherwise it is re-used in the tests causing issues.

* finos#850 found a bug with basket constituents, not resolved as of this commit.

* finos#850 found a bug with basket constituents, not resolved as of this commit.

* Update basket tables UI (finos#940)

* update all basket tables, integrate basket server changes

* filter basket tables when loading

* connect cell editing

* remove console log

* fix newFeature story

* remove console log

* fix for dropdown width error

* remove console.log

* basket workflow (finos#941)

* Fix faulty conflict resolutions

---------

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: keikeicheung <keikei274@gmail.com>
Co-authored-by: heswell <steve@heswell.com>
Co-authored-by: Vasco <98337074+vferraro-scottlogic@users.noreply.github.com>
Co-authored-by: harryhartley <hhartley94@gmail.com>
Co-authored-by: Luke Vincent <lincent@users.noreply.github.com>
Co-authored-by: Joe Dunleavy <107405201+Joe-Dunleavy@users.noreply.github.com>
Co-authored-by: Joe Dunleavy <jdunleavy@scottlogic.com>
Co-authored-by: Peter Ling <pling@scottlogic.com>
Co-authored-by: pling-scottlogic <79100986+pling-scottlogic@users.noreply.github.com>
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: chris <chris.stevenson@gmail.com>

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

@@ -6,6 +6,7 @@ export type BasketsTableName =
   | "basketConstituent"
   | "basketTrading"
   | "basketTradingConstituent"
+  | "basketTrdConsPrices"
   | "priceStrategyType";
 
 export const schemas: Readonly<
@@ -67,12 +68,41 @@ export const schemas: Readonly<
       { name: "description", serverDataType: "string" },
       { name: "instanceId", serverDataType: "string" },
       { name: "instanceIdRic", serverDataType: "string" },
+      { name: "limitPrice", serverDataType: "double" },
+      { name: "notionalLocal", serverDataType: "double" },
+      { name: "notionalUsd", serverDataType: "double" },
+      { name: "pctFilled", serverDataType: "double" },
+      { name: "priceSpread", serverDataType: "int" },
+      { name: "priceStrategyId", serverDataType: "int" },
+      { name: "quantity", serverDataType: "long" },
+      { name: "ric", serverDataType: "string" },
+      { name: "side", serverDataType: "string" },
+      { name: "venue", serverDataType: "string" },
+      { name: "weighting", serverDataType: "double" },
+    ],
+    key: "instanceIdRic",
+    table: { module: "BASKET", table: "basketTradingConstituent" },
+  },
+  basketTrdConsPrices: {
+    columns: [
+      { name: "algo", serverDataType: "string" },
+      { name: "algoParams", serverDataType: "string" },
+      { name: "ask", serverDataType: "double" },
+      { name: "askSize", serverDataType: "double" },
+      { name: "basketId", serverDataType: "string" },
+      { name: "bid", serverDataType: "double" },
+      { name: "bidSize", serverDataType: "double" },
+      { name: "close", serverDataType: "double" },
+      { name: "description", serverDataType: "string" },
+      { name: "instanceId", serverDataType: "string" },
+      { name: "instanceIdRic", serverDataType: "string" },
       { name: "last", serverDataType: "double" },
       { name: "limitPrice", serverDataType: "double" },
       { name: "notionalLocal", serverDataType: "double" },
       { name: "notionalUsd", serverDataType: "double" },
-      { name: "offer", serverDataType: "double" },
+      { name: "open", serverDataType: "double" },
       { name: "pctFilled", serverDataType: "double" },
+      { name: "phase", serverDataType: "string" },
       { name: "priceSpread", serverDataType: "int" },
       { name: "priceStrategyId", serverDataType: "int" },
       { name: "quantity", serverDataType: "long" },

vuu-ui/packages/vuu-data-test/src/basket/reference-data/basketTrading.ts

@@ -2,6 +2,9 @@ import { VuuDataRow } from "@finos/vuu-protocol-types";
 import { ColumnMap } from "@finos/vuu-utils";
 import { getSchema } from "../../schemas";
 
+import baskets, { BasketColumnMap } from "./basket";
+import basketConstituents from "./basketConstituent";
+
 const schema = getSchema("basketTrading");
 
 export const BasketTradingColumnMap = Object.values(
@@ -11,6 +14,32 @@ export const BasketTradingColumnMap = Object.values(
   return map;
 }, {});
 
+let instance = 1;
+
 const data: VuuDataRow[] = [];
 
+const createBasket = (basketId: string, basketName: string) => {
+  const key = BasketColumnMap.basketId;
+  const basketRow = baskets.find((basket) => basket[key] === basketId);
+  const basketTradingRow = [
+    basketId,
+    basketName,
+    0,
+    0,
+    `steve-${instance++}`,
+    "OFF-MARKET",
+    0,
+    0,
+    0,
+  ];
+  data.push(basketTradingRow);
+};
+
+createBasket(".FTSE", "Steve FTSE 1");
+createBasket(".FTSE", "Steve FTSE 2");
+createBasket(".FTSE", "Steve FTSE 3");
+createBasket(".FTSE", "Steve FTSE 4");
+createBasket(".FTSE", "Steve FTSE 5");
+createBasket(".FTSE", "Steve FTSE 6");
+
 export default data;

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

@@ -201,34 +201,41 @@ export class ArrayDataSource
     this.status = "subscribed";
     this.lastRangeServed = { from: 0, to: 0 };
 
-    if (aggregations || columns || filter || groupBy || sort) {
+    let config = this.#config;
+
+    const hasConfigProps = aggregations || columns || filter || groupBy || sort;
+    if (hasConfigProps) {
       if (range) {
         this.#range = range;
       }
-      this.config = {
-        ...this.#config,
+      config = {
+        ...config,
         aggregations: aggregations || this.#config.aggregations,
         columns: columns || this.#config.columns,
         filter: filter || this.#config.filter,
         groupBy: groupBy || this.#config.groupBy,
         sort: sort || this.#config.sort,
       };
-    } else {
-      this.clientCallback?.({
-        ...this.#config,
-        type: "subscribed",
-        clientViewportId: this.viewport,
-        range: this.#range,
-        tableSchema: this.tableSchema,
-      });
+    }
 
+    this.clientCallback?.({
+      ...config,
+      type: "subscribed",
+      clientViewportId: this.viewport,
+      range: this.#range,
+      tableSchema: this.tableSchema,
+    });
+
+    if (hasConfigProps) {
+      // invoke setter to action config
+      this.config = config;
+    } else {
       this.clientCallback({
         clientViewportId: this.viewport,
         mode: "size-only",
         type: "viewport-update",
         size: this.#data.length,
       });
-
       if (range) {
         // set range and trigger dispatch of initial rows
         this.range = range;
@@ -570,8 +577,8 @@ export class ArrayDataSource
     console.log({ row, colName, value });
   }
 
-  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[0]} ${columnName} ${value}`);
     return true;
   }
 

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

@@ -129,7 +129,6 @@ export class RemoteDataSource
     }: SubscribeProps,
     callback: SubscribeCallback
   ) {
-    console.log(`%csubscribe`, "color:red;font-weight:bold;");
     this.clientCallback = callback;
 
     if (aggregations || columns || filter || groupBy || sort) {
@@ -213,16 +212,16 @@ export class RemoteDataSource
   };
 
   unsubscribe() {
-    console.log("%cunsubscribe", "color:red;font-weight:bold;");
-
     info?.(`unsubscribe #${this.viewport}`);
     if (this.viewport) {
       this.server?.unsubscribe(this.viewport);
     }
     this.server?.destroy(this.viewport);
+    this.server = null;
     this.removeAllListeners();
     this.status = "unsubscribed";
     this.viewport = undefined;
+    this.range = { from: 0, to: 0 };
   }
 
   suspend() {
@@ -618,10 +617,6 @@ export class RemoteDataSource
   }
 
   applyEdit(row: DataSourceRow, columnName: string, value: VuuColumnDataType) {
-    console.log(
-      `ArrayDataSource applyEdit ${row.join(",")} ${columnName} ${value}`
-    );
-
     this.menuRpcCall({
       rowKey: row[KEY],
       field: columnName,

vuu-ui/packages/vuu-data/src/server-proxy/server-proxy.ts

@@ -506,8 +506,6 @@ export class ServerProxy {
       | WithRequestId<VuuRpcRequest>
       | WithRequestId<ClientToServerMenuRPC>
   ) {
-    debug?.(`handleMessageFromClient: ${message.type}`);
-
     if (isViewportMessage(message)) {
       if (message.type === "disable") {
         // Viewport may already have been unsubscribed

vuu-ui/packages/vuu-layout/src/layout-persistence/LocalLayoutPersistenceManager.ts

@@ -116,10 +116,8 @@ export class LocalLayoutPersistenceManager implements LayoutPersistenceManager {
     return new Promise((resolve) => {
       const applicationLayout = getLocalEntity<LayoutJSON>(this.#urlKey);
       if (applicationLayout) {
-        console.log(applicationLayout);
         resolve(applicationLayout);
       } else {
-        console.log(defaultLayout);
         resolve(defaultLayout);
       }
     });

vuu-ui/packages/vuu-popups/src/popup/Popup.tsx

@@ -1,5 +1,4 @@
 import cx from "classnames";
-import { useThemeAttributes } from "@finos/vuu-shell";
 import { HTMLAttributes, RefObject } from "react";
 import { Position, useAnchoredPosition } from "./useAnchoredPosition";
 

vuu-ui/packages/vuu-shell/src/layout-management/LayoutList.tsx

@@ -60,7 +60,7 @@ export const LayoutsList = (props: HTMLAttributes<HTMLDivElement>) => {
                       {metadata?.name}
                     </div>
                     <div className={`${classBase}-layoutDetails`}>
-                                        <div>{`${metadata?.user}, ${metadata?.date}`}</div>
+                                        <div>{`${metadata?.user}, ${metadata?.created}`}</div>
                     </div>
                   </div>
                 </div>

vuu-ui/packages/vuu-shell/src/layout-management/useLayoutManager.tsx

@@ -28,9 +28,9 @@ export const LayoutManagementContext = React.createContext<{
   loadLayoutById: (id: string) => void;
 }>({
   layoutMetadata: [],
-  saveLayout: () => null,
+  saveLayout: () => undefined,
   applicationLayout: defaultLayout,
-  saveApplicationLayout: () => null,
+  saveApplicationLayout: () => undefined,
   loadLayoutById: () => defaultLayout,
 });
 

vuu-ui/packages/vuu-shell/src/shell.tsx

@@ -6,7 +6,6 @@ import {
   ReactNode,
   useCallback,
   useEffect,
-  useMemo,
   useRef,
 } from "react";
 import {

vuu-ui/packages/vuu-table-extras/src/cell-renderers-next/background-cell/BackgroundCell.tsx

@@ -70,8 +70,6 @@ export const BackgroundCell = ({ column, row }: TableCellProps) => {
   );
 };
 
-console.log("register BackgroundCellNext");
-
 registerComponent("background-next", BackgroundCell, "cell-renderer", {
   description: "Change background color of cell when value changes",
   label: "Background Flash",

vuu-ui/packages/vuu-table/src/table/cell-renderers/json-cell/JsonCell.tsx

@@ -51,7 +51,6 @@ const JsonCell = ({ column, row }: TableCellProps) => {
   }
 };
 
-console.log("register JsonCell");
 registerComponent("json", JsonCell, "cell-renderer", {
   description: "JSON formatter",
   label: "JSON formatter",

vuu-ui/packages/vuu-theme/css/components/button.css

@@ -14,6 +14,10 @@
     --saltButton-borderColor: var(--salt-actionable-primary-background-hover)
 }
 
+.saltButton-secondary {
+    --saltButton-borderStyle: none;
+}
+
 .saltButton:focus-visible {
     outline-color: var(--vuuToolbarItem-outlineColor, var(--vuu-color-purple-10));
     outline-style: dashed;

vuu-ui/packages/vuu-ui-controls/src/instrument-picker/SearchCell.tsx

@@ -24,8 +24,6 @@ export const SearchCell = ({
   );
 };
 
-console.log("register SearchCell");
-
 registerComponent("search-cell", SearchCell, "cell-renderer", {
   serverDataType: "private",
 });

vuu-ui/packages/vuu-ui-controls/src/instrument-picker/useInstrumentPicker.ts

@@ -32,7 +32,7 @@ export const useInstrumentPicker = ({
   defaultIsOpen,
   isOpen: isOpenProp,
   itemToString = defaultItemToString(columns, columnMap),
-  onOpenChange: onOpenChangeProp,
+  onOpenChange,
   onSelect,
   searchColumns,
 }: InstrumentPickerHookProps) => {
@@ -52,9 +52,12 @@ export const useInstrumentPicker = ({
   const handleOpenChange = useCallback<OpenChangeHandler>(
     (open, closeReason) => {
       setIsOpen(open);
-      onOpenChangeProp?.(open, closeReason);
+      onOpenChange?.(open, closeReason);
+      if (open === false) {
+        dataSource.unsubscribe();
+      }
     },
-    [onOpenChangeProp, setIsOpen]
+    [dataSource, onOpenChange, setIsOpen]
   );
 
   const handleInputChange = useCallback(
@@ -82,11 +85,10 @@ export const useInstrumentPicker = ({
     (row) => {
       const value = itemToString(row);
       setValue(value);
-      setIsOpen(false);
       onSelect(row);
-      onOpenChangeProp?.(false, "select");
+      handleOpenChange?.(false, "select");
     },
-    [itemToString, onOpenChangeProp, onSelect, setIsOpen]
+    [handleOpenChange, itemToString, onSelect]
   );
 
   const inputProps = {