Merge branch 'main' of https://github.com/ScottLogic/finos-vuu into V…

…UU-47-link-layoutProvider-and-layoutManagerProvider

.github/workflows/test-ui.yml

@@ -23,6 +23,45 @@ jobs:
         run: cd ./vuu-ui && npm install
       - run: cd ./vuu-ui && npm run test:vite
 
+  cypress-e2e:
+    # As a third party action, cypress-io is pinned to a full length commit SHA for security purposes.
+    # This is also a requirement for the semgrep (static code analysis) scan to pass.
+    # https://docs.github.com/en/actions/security-guides/security-hardening-for-github-actions#using-third-party-actions
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Use Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: "16"
+      - name: Cache dependencies
+        uses: actions/cache@v2
+        with:
+          path: ~/.npm
+          key: npm-${{ hashFiles('package-lock.json') }}
+          restore-keys: npm-
+      - name: Install dependencies
+        run: cd ./vuu-ui && npm install
+      - name: Run end-to-end tests in Chrome
+        uses: cypress-io/github-action@bd9dda317ed2d4fbffc808ba6cdcd27823b2a13b
+        with:
+          install: false
+          working-directory: ./vuu-ui
+          browser: chrome
+          build: npm run build
+          start: npm run showcase
+          wait-on: "http://localhost:5173"
+      - name: Run end-to-end tests in Edge
+        uses: cypress-io/github-action@bd9dda317ed2d4fbffc808ba6cdcd27823b2a13b
+        with:
+          install: false
+          working-directory: ./vuu-ui
+          browser: edge
+          build: npm run build
+          start: npm run showcase
+          wait-on: "http://localhost:5173"
+
   # ensure the vuu example and showcase still build
   vuu-and-showcase-build:
     runs-on: ubuntu-latest

.semgrepignore

@@ -8,6 +8,7 @@ vuu-ui/packages/vuu-popups/src/menu/useContextMenu.tsx
 vuu-ui/packages/vuu-table-extras/src/cell-edit-validators/PatternValidator.ts
 vuu-ui/packages/vuu-ui-controls/src/list/Highlighter.tsx
 vuu-ui/packages/vuu-ui-controls/src/list/common-hooks/utils/filter-utils.ts
+vuu-ui/showcase/scripts/build-file-list.mjs
 vuu-ui/showcase/src/index.tsx
 vuu-ui/showcase/src/examples/Layout/Menu.examples.tsx
 vuu-ui/tools/websocket-test.html

vuu-ui/cypress.config.ts

@@ -69,6 +69,7 @@ export default defineConfig({
       viteConfig,
     },
     specPattern: "packages/**/src/**/*.cy.{js,ts,jsx,tsx}",
+    indexHtmlFile: "cypress/support/component/component-index.html",
   },
 
   e2e: {

vuu-ui/cypress/e2e/layout-management/screenshot.cy.js

@@ -17,7 +17,7 @@ context("Screenshot", () => {
     cy.findByRole("menuitem", { name: "Save Layout" }).click();
 
     // TODO (#VUU24): Don't find by classname, use an accessible selector
-    cy.get(".vuuSaveLayoutPanel").then((dialog) => {
+    cy.get(".saveLayoutPanel-panelContainer").then((dialog) => {
       cy.wrap(dialog)
         .find("img")
         .should("be.visible")

vuu-ui/cypress/support/e2e/constants.ts

@@ -1,2 +1,2 @@
 export const SHELL_WITH_NEW_THEME_URL =
-  "/Apps/ShellWithNewTheme?standalone&theme=vuu";
+  "/Apps/ShellWithNewThemeAndLayoutManagement?standalone&theme=vuu";

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

@@ -132,7 +132,7 @@ export class ArrayDataSource
   public viewport: string;
 
   private keys = new KeySet(this.#range);
-  private processedData: readonly DataSourceRow[] | undefined = undefined;
+  protected processedData: readonly DataSourceRow[] | undefined = undefined;
 
   constructor({
     aggregations,
@@ -191,55 +191,50 @@ export class ArrayDataSource
     }: SubscribeProps,
     callback: SubscribeCallback
   ) {
-    if (this.status !== "initialising") {
-      throw Error(
-        "ArrayDataSource subscribe should not be called more than once"
-      );
-    }
-
     this.clientCallback = callback;
+    this.viewport = viewport;
+    this.status = "subscribed";
+    this.lastRangeServed = { from: 0, to: 0 };
 
     if (aggregations || columns || filter || groupBy || sort) {
-      //TODO use setter so we build the sorted/grouped etc dataset
-      this.#config = {
+      if (range) {
+        this.#range = range;
+      }
+      this.config = {
         ...this.#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,
       };
-    }
-
-    this.viewport = viewport;
-
-    this.status = "subscribed";
-
-    this.clientCallback?.({
-      ...this.#config,
-      type: "subscribed",
-      clientViewportId: this.viewport,
-      range: this.#range,
-      tableSchema: this.tableSchema,
-    });
-
-    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;
-    } else if (this.#range !== NULL_RANGE) {
-      this.sendRowsToClient();
+    } else {
+      this.clientCallback?.({
+        ...this.#config,
+        type: "subscribed",
+        clientViewportId: this.viewport,
+        range: this.#range,
+        tableSchema: this.tableSchema,
+      });
+
+      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;
+      } else if (this.#range !== NULL_RANGE) {
+        this.sendRowsToClient();
+      }
     }
   }
 
   unsubscribe() {
-    console.log("noop");
+    console.log("unsubscribe noop");
   }
 
   suspend() {
@@ -248,17 +243,17 @@ export class ArrayDataSource
   }
 
   resume() {
-    console.log("noop");
+    console.log("resume noop");
     return this;
   }
 
   disable() {
-    console.log("noop");
+    console.log("disable noop");
     return this;
   }
 
   enable() {
-    console.log("noop");
+    console.log("enable noop");
     return this;
   }
 
@@ -293,6 +288,11 @@ export class ArrayDataSource
     return this.#data;
   }
 
+  // Only used by the UpdateGenerator
+  get currentData() {
+    return this.processedData ?? this.#data;
+  }
+
   get config() {
     return this.#config;
   }
@@ -317,7 +317,7 @@ export class ArrayDataSource
         let processedData: DataSourceRow[] | undefined;
 
         if (hasFilter(config)) {
-          const { filterStruct } = config.filter;
+          const { filter, filterStruct = parseFilter(filter) } = config.filter;
           if (filterStruct) {
             const fn = filterPredicate(this.#columnMap, filterStruct);
             processedData = this.#data.filter(fn);

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

@@ -7,6 +7,7 @@ import type {
 } from "@finos/vuu-protocol-types";
 import type { FunctionComponent, MouseEvent } from "react";
 import type { ClientSideValidationChecker } from "@finos/vuu-ui-controls";
+import type { ColumnMap } from "@finos/vuu-utils";
 
 export type TableSelectionModel = "none" | "single" | "checkbox" | "extended";
 

vuu-ui/packages/vuu-layout/src/drag-drop/BoxModel.ts

@@ -1,5 +1,5 @@
 import { ReactElement } from "react";
-import { rect } from "../common-types";
+import { boxContainsPoint } from "@finos/vuu-utils";
 import { LayoutModel } from "../layout-reducer";
 import { isContainer } from "../registry/ComponentRegistry";
 import { getProps, typeOf } from "../utils";
@@ -132,7 +132,7 @@ export function getPosition(
 
   if (targetOrientation === "row") {
     position = pctX < 0.5 ? WEST : EAST;
-  } else if (rect.header && containsPoint(rect.header, x, y)) {
+  } else if (rect.header && boxContainsPoint(rect.header, x, y)) {
     position = HEADER;
 
     if (rect.Stack) {
@@ -199,7 +199,7 @@ function getPositionWithinBox(
   pctY: number
 ) {
   const centerBox = getCenteredBox(rect, 0.2);
-  if (containsPoint(centerBox, x, y)) {
+  if (boxContainsPoint(centerBox, x, y)) {
     return CENTRE;
   } else {
     const quadrant = `${pctY < 0.5 ? "north" : "south"}${
@@ -474,7 +474,7 @@ function allBoxesContainingPoint(
 
   const type = typeOf(component) as string;
   const rect = measurements[path];
-  if (!containsPoint(rect, x, y)) return boxes;
+  if (!boxContainsPoint(rect, x, y)) return boxes;
 
   if (dropTargets && dropTargets.length) {
     if (dropTargets.includes(path)) {
@@ -494,7 +494,7 @@ function allBoxesContainingPoint(
     return boxes;
   }
 
-  if (rect.header && containsPoint(rect.header, x, y)) {
+  if (rect.header && boxContainsPoint(rect.header, x, y)) {
     return boxes;
   }
 
@@ -520,12 +520,6 @@ function allBoxesContainingPoint(
   return boxes;
 }
 
-function containsPoint(rect: rect, x: number, y: number) {
-  if (rect) {
-    return x >= rect.left && x < rect.right && y >= rect.top && y < rect.bottom;
-  }
-}
-
 function scrollIntoViewIfNeccesary(
   { top, bottom, scrolling }: DragDropRect,
   x: number,

vuu-ui/packages/vuu-layout/src/drag-drop/Draggable.ts

@@ -1,5 +1,5 @@
+import { rect } from "@finos/vuu-utils";
 import { ReactElement } from "react";
-import { rect } from "../common-types";
 import { LayoutModel } from "../layout-reducer";
 import { findTarget, followPath, getProps } from "../utils";
 import { BoxModel, Measurements, Position } from "./BoxModel";

vuu-ui/packages/vuu-layout/src/drag-drop/DropTarget.ts

@@ -1,4 +1,4 @@
-import { rect, rectTuple } from "../common-types";
+import { rect, rectTuple } from "@finos/vuu-utils";
 import { LayoutModel } from "../layout-reducer";
 import { getProps, typeOf } from "../utils";
 import {

vuu-ui/packages/vuu-layout/src/drag-drop/dragDropTypes.ts

@@ -1,4 +1,4 @@
-import type { rect } from '../common-types';
+import type { rect } from "@finos/vuu-utils";
 export interface DragDropRect extends rect {
   children?: DragDropRect[];
   header?: {
@@ -28,7 +28,7 @@ export interface DropPosition {
   West: boolean;
 }
 
-export type RelativePosition = 'after' | 'before';
+export type RelativePosition = "after" | "before";
 
 export type DropPosTab = {
   index: number;

vuu-ui/packages/vuu-layout/src/index.ts

@@ -1,5 +1,4 @@
 export * from "./dock-layout";
-export * from "./common-types";
 export { default as Component } from "./Component";
 export * from "./drag-drop";
 export * from "./DraggableLayout";