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 <[email protected]> * 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 <[email protected]> * 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 <[email protected]> Co-authored-by: Luke Vincent <[email protected]> Co-authored-by: Joe Dunleavy <[email protected]> Co-authored-by: Joe Dunleavy <[email protected]> Co-authored-by: cfisher-scottlogic <[email protected]> Co-authored-by: Cara <[email protected]> Co-authored-by: Peter Ling <[email protected]> Co-authored-by: pling-scottlogic <[email protected]> Co-authored-by: heswell <[email protected]>
ScottLogic · Oct 18, 2023 · b09a523 · b09a523
1 parent f68ef1c
commit b09a523
Show file tree

Hide file tree

Showing 42 changed files with 1,170 additions and 345 deletions.
diff --git a/.github/workflows/test-ui.yml b/.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

diff --git a/.gitignore b/.gitignore
@@ -20,6 +20,7 @@ yarn-debug.log*
 yarn-error.log*
 
 /vuu-ui/showcase/src/examples/**/*.js
+/vuu-ui/cypress/screenshots
 
 deployed_apps
 dist

diff --git a/vuu-ui/cypress.config.ts b/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: {

diff --git a/vuu-ui/cypress/e2e/layout-management/screenshot.cy.js b/vuu-ui/cypress/e2e/layout-management/screenshot.cy.js
@@ -9,15 +9,15 @@ context("Screenshot", () => {
   // TODO (#VUU24): Improve test alignment with the user flow
   it("Takes a screenshot of the current layout and displays it in the save layout dialog", () => {
     // TODO (#VUU24): Improve selector
-    cy.findByRole("tab", { name: "My Instruments" }).then((tab) => {
+    cy.get("#tab1-tab").then((tab) => {
       cy.wrap(tab).findByRole("button").click();
     });
 
     // TODO (#VUU24): Improve selector
     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")

diff --git a/... -- THEN as last tab is selected, last but one will be overflowed (failed).png b/... -- THEN as last tab is selected, last but one will be overflowed (failed).png
diff --git a/vuu-ui/cypress/support/e2e/constants.ts b/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";
diff --git a/vuu-ui/packages/vuu-icons/index.css b/vuu-ui/packages/vuu-icons/index.css
diff --git a/vuu-ui/packages/vuu-layout/src/index.ts b/vuu-ui/packages/vuu-layout/src/index.ts
@@ -5,6 +5,7 @@ export * from "./DraggableLayout";
 export * from "./flexbox";
 export { Action } from "./layout-action";
 export * from "./layout-header";
+export * from "./layout-persistence";
 export * from "./layout-provider";
 export * from "./layout-reducer";
 export * from "./layout-view";

diff --git a/vuu-ui/packages/vuu-layout/src/layout-persistence/LayoutPersistenceManager.ts b/vuu-ui/packages/vuu-layout/src/layout-persistence/LayoutPersistenceManager.ts
@@ -0,0 +1,60 @@
+import { LayoutJSON } from "@finos/vuu-layout";
+import { LayoutMetadata } from "@finos/vuu-shell";
+
+export interface LayoutPersistenceManager {
+  /**
+   * Saves a new layout and its corresponding metadata
+   *
+   * @param metadata - Metadata about the layout to be saved
+   * @param layout   - Full JSON representation of the layout to be saved
+   *
+   * @returns Unique identifier assigned to the saved layout
+   */
+  createLayout: (metadata: Omit<LayoutMetadata, "id">, layout: LayoutJSON) => Promise<string>;
+
+  /**
+   * Overwrites an existing layout and its corresponding metadata with the provided information
+   *
+   * @param id       - Unique identifier of the existing layout to be updated
+   * @param metadata - Metadata describing the new layout to overwrite with
+   * @param layout   - Full JSON representation of the new layout to overwrite with
+   */
+  updateLayout: (id: string, metadata: Omit<LayoutMetadata, "id">, layout: LayoutJSON) => Promise<void>;
+
+  /**
+   * Deletes an existing layout and its corresponding metadata
+   *
+   * @param id - Unique identifier of the existing layout to be deleted
+   */
+  deleteLayout: (id: string) => Promise<void>;
+
+  /**
+   * Retrieves an existing layout
+   *
+   * @param id - Unique identifier of the existing layout to be retrieved
+   *
+   * @returns Full JSON representation of the layout corresponding to the provided ID
+   */
+  loadLayout: (id: string) => Promise<LayoutJSON>;
+
+  /**
+   * Retrieves metadata for all existing layouts
+   *
+   * @returns an array of all persisted layout metadata
+   */
+  loadMetadata: () => Promise<LayoutMetadata[]>;
+
+  /**
+   * Retrieves the application layout which includes all layouts on screen
+   *
+   * @returns Full JSON representation of the application layout
+   */
+  loadApplicationLayout: () => Promise<LayoutJSON>;
+
+  /**
+  * Saves the application layout which includes all layouts on screen
+  *   
+  * @param layout - Full JSON representation of the application layout to be saved
+  */
+   saveApplicationLayout: (layout: LayoutJSON) => Promise<void>
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -69,6 +69,7 @@ export default defineConfig({ @@
           viteConfig,
         },
         specPattern: "packages/**/src/**/*.cy.{js,ts,jsx,tsx}",
+        indexHtmlFile: "cypress/support/component/component-index.html",
       },
       e2e: {
@@ Expand Down @@