@genesislcap/blank-app-seed 5.22.1 → 5.23.0

package/client-tmp/react/src/main.tsx

@@ -1,13 +1,13 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import App from './App.tsx'
-import { AppErrorBoundary } from './components/error-boundary/ErrorBoundary'
-
-import { registerPBCs } from './pbc/utils';
 import { createLogger } from '@genesislcap/foundation-logger';
 import { installRapidFlexLayoutReactStyles } from '@genesislcap/rapid-design-system';
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App.tsx';
+import { AppErrorBoundary } from './components/error-boundary/ErrorBoundary';
+
+import { registerPBCs } from './pbc/utils';
 
-import './styles/styles.css'
+import './styles/styles.css';
 
 // Single source of truth for the flexlayout-react theme lives in the platform (@genesislcap/rapid-design-system).
 installRapidFlexLayoutReactStyles();
@@ -23,11 +23,11 @@ function bootstrapApp() {
           <App rootElement={rootEelement} />
         </AppErrorBoundary>
       </React.StrictMode>,
-    )
+    );
   }
 }
 
 registerPBCs()
-.then(hasAssets => logger.debug(hasAssets ? 'PBCs registered' : 'No PBCs detected'))
-.catch((err) => logger.error(err))
-.finally(bootstrapApp)
+  .then((hasAssets) => logger.debug(hasAssets ? 'PBCs registered' : 'No PBCs detected'))
+  .catch((err) => logger.error(err))
+  .finally(bootstrapApp);

package/client-tmp/react/src/pages/AuthPage/AuthPage.test.tsx

@@ -1,10 +1,21 @@
 import { render } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
 import AuthPage from './AuthPage';
 
+// The login module pulls in the whole foundation-auth runtime (design-system registration,
+// fast-router); this test only asserts the page shell renders.
+jest.mock('../../share/foundation-login.ts', () => ({
+  configureFoundationLogin: jest.fn(),
+}));
+
 test('renders AuthPage component', () => {
-  const { container } = render(<AuthPage />);
+  const { container } = render(
+    <MemoryRouter>
+      <AuthPage />
+    </MemoryRouter>,
+  );
   const authPageElement: Element | null = container.querySelector('.auth-page');
   expect(authPageElement).toBeInTheDocument();
   const clientAppLoginElement: Element | null = container.querySelector('client-app-login');
   expect(clientAppLoginElement).toBeInTheDocument();
-});
+});

package/client-tmp/react/src/pages/AuthPage/AuthPage.tsx

@@ -1,21 +1,22 @@
-import React, {useEffect} from 'react';
-import './AuthPage.css';
-import { configureFoundationLogin } from '../../share/foundation-login.ts';
+import React, { useEffect } from 'react';
 import { useNavigate, useLocation } from 'react-router-dom';
+import { configureFoundationLogin } from '../../share/foundation-login.ts';
+import './AuthPage.css';
 
 const AuthPage: React.FC = () => {
-    const navigate = useNavigate();
-    const location = useLocation();
+  const navigate = useNavigate();
+  const location = useLocation();
 
-    useEffect(() => {
-        configureFoundationLogin({ navigate, location });
-    }, []);
+  useEffect(() => {
+    configureFoundationLogin({ navigate, location });
+    // oxlint-disable-next-line react-hooks/exhaustive-deps -- run once on mount; re-subscribing on every navigation would re-initialise login
+  }, []);
 
-    return (
-        <section className="auth-page">
-            <client-app-login></client-app-login>
-        </section>
-    );
+  return (
+    <section className="auth-page">
+      <client-app-login></client-app-login>
+    </section>
+  );
 };
 
 export default AuthPage;

package/client-tmp/react/src/pages/NotFoundPage/NotFoundPage.tsx

@@ -3,12 +3,7 @@ import ErrorMessage from '../../components/ErrorMessage/ErrorMessage';
 import './NotFoundPage.css';
 
 const NotFoundPage: React.FC = () => {
-  return (
-    <ErrorMessage
-      elementType="h1"
-      message="Page Not Found 404"
-    />
-  );
+  return <ErrorMessage elementType="h1" message="Page Not Found 404" />;
 };
 
-export default NotFoundPage;
+export default NotFoundPage;

package/client-tmp/react/src/pages/NotPermittedPage/NotPermittedPage.test.tsx

@@ -2,16 +2,20 @@ import { render, screen } from '@testing-library/react';
 import NotPermittedPage from './NotPermittedPage';
 
 jest.mock('../../components/ErrorMessage/ErrorMessage', () => {
-  return jest.fn((props: { message: string }) => <h1 data-testid="error-message">{props.message}</h1>);
+  return jest.fn((props: { message: string }) => (
+    <h1 data-testid="error-message">{props.message}</h1>
+  ));
 });
 
 describe('NotPermittedPage Component', () => {
   test('renders the ErrorMessage component with correct props', () => {
     render(<NotPermittedPage />);
-    
+
     const errorMessage: HTMLElement = screen.getByTestId('error-message');
     expect(errorMessage).toBeInTheDocument();
     expect(errorMessage.tagName).toBe('H1');
-    expect(errorMessage).toHaveTextContent('You do not have permission to access this part of the application, please contact your administrator.');
+    expect(errorMessage).toHaveTextContent(
+      'You do not have permission to access this part of the application, please contact your administrator.',
+    );
   });
-});
+});

package/client-tmp/react/src/pages/NotPermittedPage/NotPermittedPage.tsx

@@ -11,4 +11,4 @@ const NotPermittedPage: React.FC = () => {
   );
 };
 
-export default NotPermittedPage;
+export default NotPermittedPage;

package/client-tmp/react/src/pbc/container.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useRef } from 'react';
-import { deriveElementTag } from './utils';
-import { useRoutesContext } from '../store/RoutesContext';
 import { useLocation, RouteObject } from 'react-router-dom';
+import { useRoutesContext } from '../store/RoutesContext';
+import { deriveElementTag } from './utils';
 
 type ExtendedRouteObject = RouteObject & {
   data?: {
@@ -9,7 +9,7 @@ type ExtendedRouteObject = RouteObject & {
     pbcElement?: any;
   };
   path: string;
-}
+};
 
 const PBCContainer: React.FC = () => {
   const containerRef = useRef<HTMLDivElement>(null);
@@ -36,9 +36,14 @@ const PBCContainer: React.FC = () => {
     };
 
     loadElement();
+    // `routes` comes from a memoized context value (see RoutesContext) so its identity is
+    // stable; an unstable one would re-run this effect and remount the PBC custom element
+    // on every re-render of the provider.
   }, [location.pathname, routes]);
 
-  return <div ref={containerRef} className="container" style=\{{ width: '100%', height: '100%' }}></div>;
+  return (
+    <div ref={containerRef} className="container" style=\{{ width: '100%', height: '100%' }}></div>
+  );
 };
 
 export default PBCContainer;

package/client-tmp/react/src/pbc/elementsRenderer.tsx

@@ -1,8 +1,8 @@
-import { useEffect, useRef, useState } from 'react';
+import { Connect } from '@genesislcap/foundation-comms';
 import { AppElementPredicate, AppTargetId } from '@genesislcap/foundation-shell/app';
-import { customEventFactory, getTargetElements } from './utils';
 import { DI } from '@genesislcap/web-core';
-import { Connect } from '@genesislcap/foundation-comms';
+import { useEffect, useRef, useState } from 'react';
+import { customEventFactory, getTargetElements } from './utils';
 
 const ALWAYS_TRUE_PREDICATE: AppElementPredicate = () => true;
 
@@ -15,15 +15,21 @@ interface PBCContainerElement extends HTMLDivElement {
   $emit: (type: string, detail: any) => void;
 }
 
-const PBCElementsRenderer = ({ target = [], predicate = ALWAYS_TRUE_PREDICATE }: PBCElementsRendererProps) => {
+const PBCElementsRenderer = ({
+  target = [],
+  predicate = ALWAYS_TRUE_PREDICATE,
+}: PBCElementsRendererProps) => {
   const containerRef = useRef<PBCContainerElement>(null);
   const [isConnected, setIsConnected] = useState(false);
 
   useEffect(() => {
     const connect = DI.getOrCreateDOMContainer().get(Connect);
     setIsConnected(connect.isConnected);
-    const isConnected$ = (connect as { isConnected$?: { subscribe: (cb: (v: boolean) => void) => { unsubscribe: () => void } } })
-      ?.isConnected$;
+    const isConnected$ = (
+      connect as {
+        isConnected$?: { subscribe: (cb: (v: boolean) => void) => { unsubscribe: () => void } };
+      }
+    )?.isConnected$;
     const sub = isConnected$?.subscribe((connected: boolean) => setIsConnected(connected));
     return () => sub?.unsubscribe?.();
   }, []);
@@ -49,7 +55,7 @@ const PBCElementsRenderer = ({ target = [], predicate = ALWAYS_TRUE_PREDICATE }:
     });
   }, [target, predicate, isConnected]);
 
-  return (<div ref={containerRef} className="container"></div>);
+  return <div ref={containerRef} className="container"></div>;
 };
 
 export default PBCElementsRenderer;

package/client-tmp/react/src/pbc/utils.ts

@@ -1,15 +1,15 @@
 import { createLogger } from '@genesislcap/foundation-logger';
 import {
-    AppContext,
-    AppElement,
-    AppElementPredicate,
-    AppStyle,
-    AppStylePredicate,
-    AppTargetId,
-    assetPredicate,
-    getApp,
-    registrationPredicate,
-    targetIdPredicate
+  AppContext,
+  AppElement,
+  AppElementPredicate,
+  AppStyle,
+  AppStylePredicate,
+  AppTargetId,
+  assetPredicate,
+  getApp,
+  registrationPredicate,
+  targetIdPredicate,
 } from '@genesislcap/foundation-shell/app';
 import { importPBCAssets } from '@genesislcap/foundation-shell/pbc';
 import { toElementStyles } from '@genesislcap/foundation-utils';
@@ -26,10 +26,10 @@ const logger = createLogger('pbc-utils');
  * @public
  */
 export async function registerPBCs(): Promise<boolean> {
-    const app = getApp();
-    const pbcAssets = await importPBCAssets();
-    app.registerAssets(pbcAssets);
-    return app.hasAssets();
+  const app = getApp();
+  const pbcAssets = await importPBCAssets();
+  app.registerAssets(pbcAssets);
+  return app.hasAssets();
 }
 
 /**
@@ -37,76 +37,72 @@ export async function registerPBCs(): Promise<boolean> {
  * Shared across elements and styles.
  */
 const assetFilter = (
-    asset: AppElement | AppStyle,
-    targetId: AppTargetId,
-    predicate: AppElementPredicate | AppStylePredicate = () => true,
-    context: AppContext,
-) => targetIdPredicate(asset, targetId) &&
-    assetPredicate(asset, context) &&
-    registrationPredicate(
-        asset,
-        predicate,
-        context,
-    );
+  asset: AppElement | AppStyle,
+  targetId: AppTargetId,
+  predicate: AppElementPredicate | AppStylePredicate = () => true,
+  context: AppContext,
+) =>
+  targetIdPredicate(asset, targetId) &&
+  assetPredicate(asset, context) &&
+  registrationPredicate(asset, predicate, context);
 
 /**
  * @public
  */
-export function getTargetStyles(
-    targetId: AppTargetId,
-    predicate: AppStylePredicate = () => true
-) {
-    const app = getApp();
-    return app.styles
-        .filter(asset => assetFilter(asset, targetId, predicate, app.config.context!))
-        .map((token) => token.styles)
-        .flat();
+export function getTargetStyles(targetId: AppTargetId, predicate: AppStylePredicate = () => true) {
+  const app = getApp();
+  return app.styles
+    .filter((asset) => assetFilter(asset, targetId, predicate, app.config.context!))
+    .map((token) => token.styles)
+    .flat();
 }
 
-
 /**
  * @public
  */
 export function getTargetElements(
-    targetId: AppTargetId,
-    predicate: AppElementPredicate = () => true
+  targetId: AppTargetId,
+  predicate: AppElementPredicate = () => true,
 ) {
-    const app = getApp();
-    return app.elements
-        .filter(asset => assetFilter(asset, targetId, predicate, app.config.context!))
-        .map((token) => token.elements);
+  const app = getApp();
+  return app.elements
+    .filter((asset) => assetFilter(asset, targetId, predicate, app.config.context!))
+    .map((token) => token.elements);
 }
 
 /**
  * @public
  */
 export function registerStylesTarget(nativeElement: HTMLElement, targetId: AppTargetId) {
-    const styles = getTargetStyles(targetId);
-    if (!styles || styles.length === 0) {
-        return;
-    }
-    applyDynamicStyles(nativeElement, styles);
+  const styles = getTargetStyles(targetId);
+  if (!styles || styles.length === 0) {
+    return;
+  }
+  applyDynamicStyles(nativeElement, styles);
 }
 
 /**
  * @public
  */
-export function applyDynamicStyles(nativeElement: HTMLElement, style: ComposableStyles | ComposableStyles[]) {
-    const elementStyles = toElementStyles(style);
-    const styleTarget = nativeElement.shadowRoot ? nativeElement.shadowRoot : document;
-    elementStyles.addStylesTo(styleTarget);
+export function applyDynamicStyles(
+  nativeElement: HTMLElement,
+  style: ComposableStyles | ComposableStyles[],
+) {
+  const elementStyles = toElementStyles(style);
+  const styleTarget = nativeElement.shadowRoot ? nativeElement.shadowRoot : document;
+  elementStyles.addStylesTo(styleTarget);
 }
 
 /**
  * @public
  */
 export function customEventFactory(type: string, detail?: any) {
-    return new CustomEvent(type, {
-        bubbles: true,
-        cancelable: true,
-        composed: true,
-        detail,
-    });
+  return new CustomEvent(type, {
+    bubbles: true,
+    cancelable: true,
+    composed: true,
+    detail,
+  });
 }
 
 /**
@@ -115,7 +111,12 @@ export function customEventFactory(type: string, detail?: any) {
  * @public
  */
 export function deriveElementTag(name: string): string {
-    const tagName = name.replace(/([A-Z])/g, '-$1').toLowerCase().replace(/^-/, '');
-    logger.debug(`Guessing pbc element tag is '${tagName}' based on '${name}'. This may be incorrect, please set pbcElementTag in route data.`);
-    return tagName;
+  const tagName = name
+    .replace(/([A-Z])/g, '-$1')
+    .toLowerCase()
+    .replace(/^-/, '');
+  logger.debug(
+    `Guessing pbc element tag is '${tagName}' based on '${name}'. This may be incorrect, please set pbcElementTag in route data.`,
+  );
+  return tagName;
 }

package/client-tmp/react/src/services/auth.service.ts

@@ -1,5 +1,5 @@
 import { Auth } from '@genesislcap/foundation-comms';
-import { DI } from '@microsoft/fast-foundation';
+import { DI } from '@genesislcap/web-core';
 
 class AuthService {
   isAuthenticated = false;

package/client-tmp/react/src/services/store.service.ts

@@ -30,9 +30,11 @@ class DefaultStore extends AbstractStoreRoot<Store, StoreEventDetailMap> impleme
 
   setConnected(connected: boolean) {
     this.connected = connected;
-    document.dispatchEvent(new CustomEvent('connected-changed', {
-      detail: { connected }
-    }));
+    document.dispatchEvent(
+      new CustomEvent('connected-changed', {
+        detail: { connected },
+      }),
+    );
   }
 }
 

package/client-tmp/react/src/share/foundation-login.ts

@@ -1,12 +1,12 @@
 import { configure, defaultAuthConfig } from '@genesislcap/foundation-auth/config';
+import { Connect } from '@genesislcap/foundation-comms';
 import {
   buildPostLoginRedirect,
   type RedirectableLocationState,
 } from '@genesislcap/foundation-react-utils/router';
-import { AUTH_PATH } from '../config';
-import { Connect } from '@genesislcap/foundation-comms';
 import { DI } from '@genesislcap/web-core';
 import type { NavigateFunction, Location as RouterLocation } from 'react-router-dom';
+import { AUTH_PATH } from '../config';
 
 /**
  * Configure the micro frontend

package/client-tmp/react/src/share/genesis-components.ts

@@ -1,47 +1,46 @@
-import { getApp } from '@genesislcap/foundation-shell/app';
-import { g2plotChartsComponents } from '@genesislcap/g2plot-chart';
-import * as rapidDesignSystem from '@genesislcap/rapid-design-system';
-import { rapidGridComponents, rapidGridProBeta } from '@genesislcap/rapid-grid-pro';
-import { FoundationRouter } from '@genesislcap/foundation-ui';
-import { avoidTreeShaking } from '@genesislcap/foundation-utils';
-
-/**
- * Ensure tree shaking doesn't remove these.
- */
-avoidTreeShaking(FoundationRouter);
-
-/**
- * registerComponents.
- * @public
- */
-export async function registerComponents() {
-  const { configure: configureHeader } = await import('@genesislcap/foundation-header/config');
-  /**
-  * Register any PBC components with the design system
-  */
-  getApp().registerComponents({
-    designSystem: rapidDesignSystem,
-  });
-
-  rapidDesignSystem
-    .provideDesignSystem()
-    .register(
-      rapidDesignSystem.baseComponents,
-      rapidGridProBeta(),
-      rapidGridComponents,
-      g2plotChartsComponents,
-    );
-
-  configureHeader({
-    templateOptions: {
-      provider: 'template',
-      icon: 'rapid-icon',
-      button: 'rapid-button',
-      connectionIndicator: 'rapid-connection-indicator',
-      select: 'rapid-select',
-      option: 'rapid-option',
-      flyout: 'rapid-flyout',
-    },
-  });
-
-}
+import { getApp } from '@genesislcap/foundation-shell/app';
+import { FoundationRouter } from '@genesislcap/foundation-ui';
+import { avoidTreeShaking } from '@genesislcap/foundation-utils';
+import { g2plotChartsComponents } from '@genesislcap/g2plot-chart';
+import * as rapidDesignSystem from '@genesislcap/rapid-design-system';
+import { rapidGridComponents, rapidGridProBeta } from '@genesislcap/rapid-grid-pro';
+
+/**
+ * Ensure tree shaking doesn't remove these.
+ */
+avoidTreeShaking(FoundationRouter);
+
+/**
+ * registerComponents.
+ * @public
+ */
+export async function registerComponents() {
+  const { configure: configureHeader } = await import('@genesislcap/foundation-header/config');
+  /**
+   * Register any PBC components with the design system
+   */
+  getApp().registerComponents({
+    designSystem: rapidDesignSystem,
+  });
+
+  rapidDesignSystem
+    .provideDesignSystem()
+    .register(
+      rapidDesignSystem.baseComponents,
+      rapidGridProBeta(),
+      rapidGridComponents,
+      g2plotChartsComponents,
+    );
+
+  configureHeader({
+    templateOptions: {
+      provider: 'template',
+      icon: 'rapid-icon',
+      button: 'rapid-button',
+      connectionIndicator: 'rapid-connection-indicator',
+      select: 'rapid-select',
+      option: 'rapid-option',
+      flyout: 'rapid-flyout',
+    },
+  });
+}

package/client-tmp/react/src/store/AuthContext.tsx

@@ -1,10 +1,4 @@
-import {
-  createContext,
-  useState,
-  useContext,
-  ReactNode,
-  FunctionComponent,
-} from 'react';
+import { createContext, useState, useContext, ReactNode, FunctionComponent } from 'react';
 import { authService } from '../services/auth.service';
 
 interface AuthContextType {
@@ -31,9 +25,7 @@ export const useAuth = () => {
   return context;
 };
 
-export const AuthProvider: FunctionComponent<AuthProviderProps> = ({
-  children,
-}) => {
+export const AuthProvider: FunctionComponent<AuthProviderProps> = ({ children }) => {
   const [user, setUser] = useState<User | null>(null);
 
   const checkAuthStatus = async () => {

package/client-tmp/react/src/store/RoutesContext.test.tsx

@@ -0,0 +1,99 @@
+import type { AppRouteConfig, PbcRouteInput } from '@genesislcap/foundation-react-utils/router';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { useState } from 'react';
+import { RoutesProvider, useRoutesContext } from './RoutesContext';
+
+/**
+ * `getApp()` resolves the shell's `App` singleton out of the DI DOM container, which this
+ * unit test has no reason to boot. The stand-in mirrors the only thing the provider reads:
+ * a plain `routes` array field, stored once by the real `App` and only ever reassigned
+ * (registerAssets/deregisterAssets) — so identity behaves here exactly as it does in the app.
+ */
+const mockShellApp: { routes: PbcRouteInput[] } = { routes: [] };
+
+jest.mock('@genesislcap/foundation-shell/app', () => ({
+  getApp: () => mockShellApp,
+}));
+
+// Route pages are inert payload for this test — the provider only parks them in the route
+// table as `element` values, never renders them — while dragging in the foundation-auth
+// runtime and, for generated dashboards/charts, chart libraries jest cannot transform.
+// Stubbed here; the route table itself and `mergePbcRoutes` stay real.
+jest.mock('../pages/AuthPage/AuthPage', () => () => null);
+jest.mock('../pages/NotPermittedPage/NotPermittedPage', () => () => null);
+{{#each routes}}
+jest.mock('../pages/{{pascalCase this.name}}/{{pascalCase this.name}}', () => () => null);
+{{/each}}
+
+/** Every context value the consumer below saw, in render order. */
+const captured: AppRouteConfig[][] = [];
+
+const RoutesConsumer = () => {
+  const routes = useRoutesContext();
+  captured.push(routes);
+  return null;
+};
+
+/** A fresh element tree per call, so React cannot bail out of re-rendering the provider. */
+const providerTree = () => (
+  <RoutesProvider>
+    <RoutesConsumer />
+  </RoutesProvider>
+);
+
+const expectSingleIdentity = () => {
+  // initial render plus at least two re-renders
+  expect(captured.length).toBeGreaterThan(2);
+  captured.forEach((value) => {
+    expect(value).toBe(captured[0]);
+  });
+};
+
+describe('RoutesProvider', () => {
+  beforeEach(() => {
+    captured.length = 0;
+    mockShellApp.routes = [];
+  });
+
+  test('hands consumers one context value identity across re-renders', () => {
+    const { rerender } = render(providerTree());
+
+    rerender(providerTree());
+    rerender(providerTree());
+
+    expectSingleIdentity();
+  });
+
+  test('hands consumers one context value identity when a parent state change cascades in', () => {
+    const Parent = () => {
+      const [tick, setTick] = useState(0);
+      return (
+        <RoutesProvider>
+          <button type="button" onClick={() => setTick(tick + 1)}>
+            tick {tick}
+          </button>
+          <RoutesConsumer />
+        </RoutesProvider>
+      );
+    };
+
+    render(<Parent />);
+    const tickButton = screen.getByRole('button');
+    fireEvent.click(tickButton);
+    fireEvent.click(tickButton);
+
+    expectSingleIdentity();
+  });
+
+  test('recomputes the context value when the app reassigns its routes', () => {
+    const { rerender } = render(providerTree());
+    const beforeReassign = captured[captured.length - 1];
+
+    mockShellApp.routes = [{ path: 'pbc-page', settings: { permissionCode: 'PBC_VIEW' } }];
+    rerender(providerTree());
+
+    const afterReassign = captured[captured.length - 1];
+    expect(afterReassign).not.toBe(beforeReassign);
+    expect(afterReassign.map((route) => route.path)).toContain('/pbc-page');
+  });
+});