@genesislcap/foundation-workspace 14.406.0-workspaces.7

package/src/workspace/grid-register/grid-register.ts

@@ -0,0 +1,142 @@
+import type { ColumnApi, GridApi } from '@ag-grid-community/core';
+import { attr, customElement } from '@microsoft/fast-element';
+import { GridRegistry, WorkspaceState } from '..';
+import { GridRegisterTemplate as template } from './grid-register.template';
+
+const name = 'grid-register';
+
+/**
+ * Registers an AG Grid instance so workspace state can apply/load it.
+ * @alpha
+ */
+@customElement({
+  name,
+  template,
+})
+export class GridRegister extends HTMLElement {
+  @attr({ attribute: 'grid-key' }) gridKey: string;
+
+  @GridRegistry gridRegistry: GridRegistry;
+  @WorkspaceState workspaceState: WorkspaceState;
+
+  private gridElement: HTMLElement | null = null;
+  private gridApi: GridApi | null = null;
+  private columnApi: ColumnApi | null = null;
+  private workspaceSettingsApplied: boolean = false;
+
+  connectedCallback(): void {
+    this.findAndRegisterGrid();
+  }
+
+  disconnectedCallback(): void {
+    if (this.gridKey) {
+      this.gridRegistry.unregisterGrid(this.gridKey);
+    }
+
+    this.detachFromGridApis();
+  }
+
+  private findAndRegisterGrid(): void {
+    this.gridElement = this.querySelector('rapid-grid-pro') as HTMLElement;
+
+    if (this.gridElement) {
+      this.gridElement.addEventListener('gridReady', this.handleGridReady as EventListener);
+      this.attachToGridApis();
+    } else {
+      setTimeout(() => {
+        this.gridElement = this.querySelector('rapid-grid-pro') as HTMLElement;
+
+        if (this.gridElement) {
+          this.gridElement.addEventListener('gridReady', this.handleGridReady as EventListener);
+          this.attachToGridApis();
+        } else {
+          console.warn(`grid-register: rapid-grid-pro element not found`);
+        }
+      }, 100);
+    }
+  }
+
+  private readonly handleGridReady = (): void => {
+    this.attachToGridApis();
+  };
+
+  private attachToGridApis(): void {
+    if (!this.gridElement) {
+      return;
+    }
+
+    const anyGrid: any = this.gridElement;
+    const gridApi = anyGrid.gridApi || null;
+    const columnApi = anyGrid.columnApi || null;
+    const persistKey = anyGrid?.getAttribute?.('persist-column-state-key') || this.gridKey;
+    if (!gridApi || this.gridApi === gridApi) {
+      return;
+    }
+
+    this.gridApi = gridApi;
+    this.columnApi = columnApi;
+
+    const effectiveGridKey = persistKey;
+    if (!effectiveGridKey) {
+      console.warn('grid-register: missing persist-column-state-key; grid state will not be saved');
+    } else {
+      this.gridRegistry.registerGrid(effectiveGridKey, gridApi, columnApi);
+      this.gridKey = effectiveGridKey;
+    }
+
+    if (!this.workspaceSettingsApplied && this.gridApi) {
+      this.loadWorkspaceColumnState().catch((error) => {
+        console.warn(`Failed to apply column state for ${this.gridKey} on gridReady:`, error);
+      });
+    }
+  }
+
+  private detachFromGridApis(): void {
+    if (this.gridElement && this.handleGridReady) {
+      this.gridElement.removeEventListener('gridReady', this.handleGridReady as EventListener);
+    }
+
+    this.gridElement = null;
+    this.gridApi = null;
+    this.columnApi = null;
+  }
+
+  private async loadWorkspaceSettings(options?: { applyColumns?: boolean }): Promise<void> {
+    if (!this.gridKey || !this.columnApi || !this.gridApi) {
+      return;
+    }
+
+    try {
+      const currentWorkspace = this.workspaceState.getCurrentWorkspace();
+      if (currentWorkspace && currentWorkspace.grids) {
+        const gridSetting = currentWorkspace.grids.find((g) => g.gridKey === this.gridKey);
+
+        if (gridSetting) {
+          const currentColumnState = this.columnApi.getColumnState() || [];
+          const targetColumnState = gridSetting.columnState || [];
+
+          const columnsEqual =
+            JSON.stringify(currentColumnState) === JSON.stringify(targetColumnState);
+
+          const applyColumns = !options || options.applyColumns !== false;
+          const columnsOk = !applyColumns || columnsEqual;
+
+          if (columnsOk) {
+            return;
+          }
+
+          const applied = await this.gridRegistry.applyGridSettings(gridSetting, options);
+          if (!applied) {
+            console.warn(`Failed to apply grid settings for ${this.gridKey}`);
+          }
+        }
+      }
+    } catch (error) {
+      console.warn(`Failed to load workspace settings for grid ${this.gridKey}:`, error);
+    }
+  }
+
+  private async loadWorkspaceColumnState(): Promise<void> {
+    return this.loadWorkspaceSettings({ applyColumns: true });
+  }
+}

package/src/workspace/grid-register/index.ts

@@ -0,0 +1 @@
+export * from './grid-register';

package/src/workspace/grid-registry.ts

@@ -0,0 +1,157 @@
+import type { ColumnApi, GridApi } from '@ag-grid-community/core';
+import { DI } from '@microsoft/fast-foundation';
+import type { SavedGridSettings } from './workspace.types';
+
+/**
+ * @alpha
+ */
+export interface GridRegistry {
+  registerGrid(gridKey: string, gridApi: unknown, columnApi: unknown): void;
+  getGrid(gridKey: string): unknown;
+  unregisterGrid(gridKey: string): void;
+  getAllGridsSettings(): SavedGridSettings[];
+  applyGridSettings(
+    gridSetting: SavedGridSettings,
+    options?: { applyColumns?: boolean; applyFilters?: boolean },
+  ): Promise<boolean>;
+  applyAllGridsSettings(gridsSettings: SavedGridSettings[]): Promise<void>;
+}
+
+/**
+ * @alpha
+ */
+export interface GridRegistration {
+  gridKey: string;
+  gridApi: GridApi;
+  columnApi: ColumnApi;
+}
+
+/**
+ * @alpha
+ */
+export class DefaultGridRegistry implements GridRegistry {
+  private grids: Map<string, GridRegistration> = new Map();
+  private cachedSettings: Map<string, SavedGridSettings> = new Map();
+
+  // Note: StatePersistence is not wired here to avoid a hard dependency on grid-pro.
+
+  registerGrid(gridKey: string, gridApi: unknown, columnApi: unknown): void {
+    this.grids.set(gridKey, {
+      gridKey,
+      gridApi: gridApi as GridApi,
+      columnApi: columnApi as ColumnApi,
+    });
+  }
+
+  getGrid(gridKey: string): unknown {
+    return this.grids.get(gridKey) || null;
+  }
+
+  unregisterGrid(gridKey: string): void {
+    const grid = this.grids.get(gridKey);
+    if (grid) {
+      const settings = this.getGridSettings(gridKey, grid);
+      if (settings) {
+        this.cachedSettings.set(gridKey, settings);
+      }
+    }
+    this.grids.delete(gridKey);
+  }
+
+  getAllGridsSettings(): SavedGridSettings[] {
+    Array.from(this.grids).forEach(([key, grid]) => {
+      const settings = this.getGridSettings(key, grid);
+      if (settings) {
+        this.cachedSettings.set(key, settings);
+      }
+    });
+
+    return Array.from(this.cachedSettings.values()).filter((s) => !!s);
+  }
+
+  async applyGridSettings(
+    gridSetting: SavedGridSettings,
+    options?: { applyColumns?: boolean; applyFilters?: boolean },
+  ): Promise<boolean> {
+    const gridRegistration = this.grids.get(gridSetting.gridKey);
+
+    if (!gridRegistration || !gridRegistration.columnApi || !gridRegistration.gridApi) {
+      return false;
+    }
+
+    const hasColumnState = gridSetting.columnState && gridSetting.columnState.length > 0;
+    const applyColumns = !options || options.applyColumns !== false;
+    const shouldApplyColumns = applyColumns && !!hasColumnState;
+
+    if (!shouldApplyColumns) {
+      // No column state to apply; treat as a no-op.
+      return false;
+    }
+
+    try {
+      if (shouldApplyColumns) {
+        gridRegistration.columnApi.applyColumnState({
+          state: gridSetting.columnState,
+          applyOrder: true,
+        });
+      }
+
+      return true;
+    } catch (error) {
+      console.warn(`Failed to apply settings for grid ${gridSetting.gridKey}:`, error);
+      return false;
+    }
+  }
+
+  async applyAllGridsSettings(
+    gridsSettings: SavedGridSettings[],
+    maxRetries: number = 3,
+    delayMs: number = 200,
+  ): Promise<void> {
+    // eslint-disable-next-line no-plusplus
+    for (let attempt = 0; attempt < maxRetries; attempt++) {
+      const remainingSettings: SavedGridSettings[] = [];
+
+      for (const gridSetting of gridsSettings) {
+        // eslint-disable-next-line no-await-in-loop
+        const applied = await this.applyGridSettings(gridSetting);
+
+        if (!applied) {
+          remainingSettings.push(gridSetting);
+        }
+      }
+
+      if (remainingSettings.length === 0 || attempt >= maxRetries - 1) {
+        break;
+      }
+
+      // await new Promise((resolve) => setTimeout(resolve, delayMs));
+      gridsSettings = remainingSettings;
+    }
+  }
+
+  private getGridSettings(gridKey: string, grid: GridRegistration): SavedGridSettings | null {
+    if (grid) {
+      const columnState = grid.columnApi?.getColumnState();
+      const columnCount = columnState?.length || 0;
+
+      console.log(`Saved grid settings for ${gridKey}: ${columnCount} columns`);
+      return {
+        gridKey: grid.gridKey,
+        columnState: columnState || [],
+        savedAt: new Date().toISOString(),
+      };
+    }
+
+    console.warn(`No grid found for ${gridKey}`);
+    return null;
+  }
+}
+
+/**
+ * DI token for grid registry.
+ * @alpha
+ */
+export const GridRegistry = DI.createInterface<GridRegistry>((x) =>
+  x.singleton(DefaultGridRegistry as any),
+);

package/src/workspace/index.ts

@@ -0,0 +1,8 @@
+export * from './workspace.types';
+export * from './workspace-state.types';
+export * from './workspace-state';
+export * from './layout-registry';
+export * from './grid-registry';
+export * from './filter-registry';
+export * from './grid-register';
+export * from './layout-wrapper';

package/src/workspace/layout-registry.ts

@@ -0,0 +1,58 @@
+import { DI } from '@microsoft/fast-foundation';
+import type { SavedLayout } from './workspace.types';
+
+/**
+ * @alpha
+ */
+export interface LayoutRegistry {
+  registerLayout(layoutKey: string, layout: unknown): void;
+  unregisterLayout(layoutKey: string): void;
+  getLayoutsConfigs(): SavedLayout[];
+  applySavedLayouts(savedLayouts: SavedLayout[]): Promise<void>;
+}
+
+/**
+ * Default layout registry implementation.
+ * @alpha
+ */
+export class DefaultLayoutRegistry implements LayoutRegistry {
+  private layouts: Map<string, any> = new Map();
+
+  registerLayout(layoutKey: string, layout: any): void {
+    if (!layoutKey) {
+      return;
+    }
+    this.layouts.set(layoutKey, layout);
+  }
+
+  unregisterLayout(layoutKey: string): void {
+    this.layouts.delete(layoutKey);
+  }
+
+  getLayoutsConfigs(): SavedLayout[] {
+    return Array.from(this.layouts).map(([key, layout]) => ({
+      layoutKey: key,
+      layout: layout.getLayout(),
+    }));
+  }
+
+  async applySavedLayouts(savedLayouts: SavedLayout[]): Promise<void> {
+    savedLayouts.forEach((s) => {
+      const layout = this.layouts.get(s.layoutKey);
+      if (layout) {
+        layout.loadLayout(s.layout as any, 'placeholder', true);
+      } else {
+        console.warn(`layout for ${s.layoutKey} not found`);
+      }
+    });
+    // await new Promise((resolve) => setTimeout(resolve, 300));
+  }
+}
+
+/**
+ * DI token for layout registry.
+ * @alpha
+ */
+export const LayoutRegistry = DI.createInterface<LayoutRegistry>((x) =>
+  x.singleton(DefaultLayoutRegistry as any),
+);

package/src/workspace/layout-wrapper/index.ts

@@ -0,0 +1 @@
+export * from './layout-wrapper';

package/src/workspace/layout-wrapper/layout-wrapper.template.ts

@@ -0,0 +1,7 @@
+import { html } from '@microsoft/fast-element';
+import type { ViewTemplate } from '@microsoft/fast-element';
+import type { LayoutWrapper } from './layout-wrapper';
+
+export const LayoutWrapperTemplate: ViewTemplate<LayoutWrapper> = html`
+  <slot></slot>
+`;

package/src/workspace/layout-wrapper/layout-wrapper.ts

@@ -0,0 +1,66 @@
+import { attr, customElement } from '@microsoft/fast-element';
+import { LayoutRegistry } from '..';
+import { LayoutWrapperTemplate as template } from './layout-wrapper.template';
+
+const name = 'layout-register';
+
+/**
+ * Registers a layout instance so workspace state can apply/load it.
+ * @alpha
+ */
+@customElement({
+  name,
+  template,
+})
+export class LayoutWrapper extends HTMLElement {
+  @attr({ attribute: 'layout-key' }) layoutKey: string;
+
+  @LayoutRegistry layoutRegistry: LayoutRegistry;
+
+  private layoutElement: any | null = null;
+
+  connectedCallback(): void {
+    this.findAndRegisterLayout();
+  }
+
+  disconnectedCallback(): void {
+    const layoutKey =
+      (this.layoutElement as any)?.autoSaveKey ??
+      this.layoutElement?.getAttribute?.('auto-save-key') ??
+      this.layoutKey;
+
+    if (layoutKey) {
+      this.layoutRegistry.unregisterLayout(layoutKey);
+    }
+  }
+
+  private findAndRegisterLayout(): void {
+    let layoutElement = this.querySelector('rapid-layout') as any;
+
+    const registerLayout = (layout: any | null) => {
+      if (!layout) {
+        console.warn(`layout-register: rapid-layout element not found`);
+        return;
+      }
+      this.layoutElement = layout;
+      const layoutKeyFromLayout =
+        (layout as any).autoSaveKey ?? layout.getAttribute?.('auto-save-key') ?? this.layoutKey;
+
+      if (!layoutKeyFromLayout) {
+        console.warn('layout-register: missing layout key (auto-save-key/layout-key)');
+        return;
+      }
+
+      this.layoutRegistry.registerLayout(layoutKeyFromLayout, layout);
+    };
+
+    if (layoutElement) {
+      registerLayout(layoutElement);
+    } else {
+      setTimeout(() => {
+        layoutElement = this.querySelector('rapid-layout') as any;
+        registerLayout(layoutElement);
+      }, 100);
+    }
+  }
+}

package/src/workspace/workspace-state.ts

@@ -0,0 +1,234 @@
+import {
+  Auth,
+  KVStorage,
+  type KVStorage as KVStorageType,
+  type Auth as AuthType,
+} from '@genesislcap/foundation-comms';
+import { DI } from '@microsoft/fast-foundation';
+import type { SavedWorkspace } from './workspace-state.types';
+import type { SavedFilterValue, SavedGridSettings, SavedLayout } from './workspace.types';
+
+/**
+ * @alpha
+ */
+export interface WorkspaceState {
+  saveWorkspace(
+    workspaceName: string,
+    layouts: SavedLayout[],
+    grids: SavedGridSettings[],
+    filters: SavedFilterValue[],
+    description?: string,
+  ): Promise<void>;
+  loadWorkspace(workspaceName: string): Promise<SavedWorkspace | null>;
+  getSavedWorkspaces(): Promise<SavedWorkspace[]>;
+  deleteWorkspace(workspaceName: string): Promise<void>;
+  getCurrentWorkspace(): SavedWorkspace | null;
+  setCurrentWorkspace(workspace: SavedWorkspace | null): void;
+}
+
+/**
+ * Default workspace persistence implementation backed by KVStorage.
+ *
+ * @alpha
+ */
+export class DefaultWorkspaceState implements WorkspaceState {
+  private readonly STORAGE_PREFIX = 'workspace_';
+  private readonly WORKSPACES_LIST_KEY = 'workspaces_list';
+
+  private currentWorkspace: SavedWorkspace | null = null;
+
+  constructor(
+    @KVStorage public kvStorage: KVStorageType,
+    @Auth public auth: AuthType,
+  ) {}
+
+  private getCurrentUsername(): string {
+    return this.auth?.loggedUserResult?.username || 'anonymous';
+  }
+
+  private getWorkspaceStorageKey(workspaceName: string): string {
+    const username = this.getCurrentUsername();
+    return `${this.STORAGE_PREFIX}${username}_${workspaceName}`;
+  }
+
+  private getWorkspacesListKey(): string {
+    const username = this.getCurrentUsername();
+    return `${this.STORAGE_PREFIX}${username}_${this.WORKSPACES_LIST_KEY}`;
+  }
+
+  async saveWorkspace(
+    workspaceName: string,
+    layouts: SavedLayout[],
+    grids: SavedGridSettings[],
+    filters: SavedFilterValue[],
+    description?: string,
+  ): Promise<void> {
+    const storageKey = this.getWorkspaceStorageKey(workspaceName);
+    const username = this.getCurrentUsername();
+
+    const workspace: SavedWorkspace = {
+      name: workspaceName,
+      username,
+      description: description?.trim() || undefined,
+      layouts,
+      grids,
+      filters,
+      savedAt: new Date().toISOString(),
+    };
+
+    await this.kvStorage.put([
+      {
+        key: storageKey,
+        value: JSON.stringify(workspace),
+      },
+    ]);
+
+    await this.updateWorkspacesList(workspaceName);
+  }
+
+  async loadWorkspace(workspaceName: string): Promise<SavedWorkspace | null> {
+    const workspace = await this.getWorkspace(workspaceName);
+    this.currentWorkspace = workspace ?? null;
+    return this.currentWorkspace;
+  }
+
+  private async getWorkspace(workspaceName: string): Promise<SavedWorkspace | null> {
+    const storageKey = this.getWorkspaceStorageKey(workspaceName);
+    const existing = await this.kvStorage.get(storageKey);
+
+    if (!existing?.kv?.value) {
+      return null;
+    }
+
+    try {
+      const workspace =
+        typeof existing.kv.value === 'string' ? JSON.parse(existing.kv.value) : existing.kv.value;
+
+      const currentUsername = this.getCurrentUsername();
+      if (workspace.username && workspace.username !== currentUsername) {
+        console.warn(`Workspace ${workspaceName} does not belong to current user`);
+        return null;
+      }
+
+      if (!workspace.username) {
+        workspace.username = currentUsername;
+      }
+
+      return workspace || null;
+    } catch (e) {
+      console.warn('Failed to parse saved workspace', e);
+      return null;
+    }
+  }
+
+  getCurrentWorkspace(): SavedWorkspace | null {
+    return this.currentWorkspace;
+  }
+
+  setCurrentWorkspace(workspace: SavedWorkspace | null): void {
+    this.currentWorkspace = workspace;
+  }
+
+  async getSavedWorkspaces(): Promise<SavedWorkspace[]> {
+    const listKey = this.getWorkspaceStorageKey(this.WORKSPACES_LIST_KEY);
+    const existing = await this.kvStorage.get(listKey);
+
+    if (!existing?.kv?.value) {
+      return [];
+    }
+
+    try {
+      const workspaceNames: string[] =
+        typeof existing.kv.value === 'string' ? JSON.parse(existing.kv.value) : existing.kv.value;
+
+      if (!Array.isArray(workspaceNames)) {
+        return [];
+      }
+
+      const workspaces: SavedWorkspace[] = [];
+      const currentUsername = this.getCurrentUsername();
+      for (const name of workspaceNames) {
+        // eslint-disable-next-line no-await-in-loop
+        const workspace = await this.getWorkspace(name);
+        if (workspace && (!workspace.username || workspace.username === currentUsername)) {
+          workspaces.push(workspace);
+        }
+      }
+
+      return workspaces;
+    } catch (e) {
+      console.warn('Failed to parse saved workspaces list', e);
+      return [];
+    }
+  }
+
+  async deleteWorkspace(workspaceName: string): Promise<void> {
+    const storageKey = this.getWorkspaceStorageKey(workspaceName);
+    await this.kvStorage.delete([storageKey]);
+    await this.removeFromWorkspacesList(workspaceName);
+  }
+
+  private async updateWorkspacesList(workspaceName: string): Promise<void> {
+    const listKey = this.getWorkspacesListKey();
+    const existing = await this.kvStorage.get(listKey);
+
+    let workspaceNames: string[] = [];
+    if (existing?.kv?.value) {
+      try {
+        workspaceNames =
+          typeof existing.kv.value === 'string' ? JSON.parse(existing.kv.value) : existing.kv.value;
+      } catch (e) {
+        console.warn('Failed to parse workspaces list', e);
+      }
+    }
+
+    workspaceNames = workspaceNames.filter((name) => name !== workspaceName);
+    workspaceNames.push(workspaceName);
+
+    await this.kvStorage.put([
+      {
+        key: listKey,
+        value: JSON.stringify(workspaceNames),
+      },
+    ]);
+  }
+
+  private async removeFromWorkspacesList(workspaceName: string): Promise<void> {
+    const listKey = this.getWorkspacesListKey();
+    const existing = await this.kvStorage.get(listKey);
+
+    if (!existing?.kv?.value) {
+      return;
+    }
+
+    let workspaceNames: string[] = [];
+    try {
+      workspaceNames =
+        typeof existing.kv.value === 'string' ? JSON.parse(existing.kv.value) : existing.kv.value;
+    } catch (e) {
+      console.warn('Failed to parse workspaces list for deletion', e);
+      return;
+    }
+
+    workspaceNames = workspaceNames.filter((name) => name !== workspaceName);
+
+    if (workspaceNames.length === 0) {
+      await this.kvStorage.delete([listKey]);
+    } else {
+      await this.kvStorage.put([
+        {
+          key: listKey,
+          value: JSON.stringify(workspaceNames),
+        },
+      ]);
+    }
+  }
+}
+
+/**
+ * DI token for workspace state.
+ * @alpha
+ */
+export const WorkspaceState = DI.createInterface<WorkspaceState>((x) =>
+  x.singleton(DefaultWorkspaceState),
+);

package/src/workspace/workspace-state.types.ts

@@ -0,0 +1,27 @@
+import type { SavedFilterValue, SavedGridSettings, SavedLayout } from './workspace.types';
+
+/**
+ * @alpha
+ */
+export interface SavedWorkspace {
+  name: string;
+  username: string;
+  description?: string;
+  layouts: SavedLayout[];
+  grids: SavedGridSettings[];
+  filters: SavedFilterValue[];
+  savedAt: string;
+}
+
+/**
+ * @alpha
+ */
+export interface SharedWorkspace {
+  id: string;
+  name: string;
+  userName: string;
+  description?: string;
+  createdOn?: string | number;
+  modifiedOn?: string | number;
+  data: string;
+}