@genesislcap/blank-app-seed 3.30.0-prerelease.14 → 3.30.0-prerelease.15

package/.genx/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@genesislcap/blank-app-seed-config",
   "description": "Genesis Blank App Seed Configuration",
-  "version": "3.30.0-prerelease.14",
+  "version": "3.30.0-prerelease.15",
   "license": "Apache-2.0",
   "scripts": {
     "lint": "eslint .",

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [3.30.0-prerelease.15](https://github.com/genesiscommunitysuccess/blank-app-seed/compare/v3.30.0-prerelease.14...v3.30.0-prerelease.15) (2024-09-26)
+
+
+### Features
+
+* pbc support in react [FUI-2140](https://github.com/genesiscommunitysuccess/blank-app-seed/issues/2140) (#347) 4c41243, closes FUI-2173 FUI-2173 FUI-2173 FUI-2157 FUI-2157 origin/ak/FUI-2173 ak/FUI-2157 FUI-2157 FUI-2157
+
 ## [3.30.0-prerelease.14](https://github.com/genesiscommunitysuccess/blank-app-seed/compare/v3.30.0-prerelease.13...v3.30.0-prerelease.14) (2024-09-26)
 
 

package/client-tmp/react/package.json

@@ -9,7 +9,7 @@
     "build": "vite build",
     "build:stats": "npm run build --stats-json",
     "clean": "genx clean dist node_modules",
-    "dev": "vite",
+    "dev": "vite build && vite preview",
     "dev:docker": "npm run dev -- --host 0.0.0.0",
     "dev:no-open": "NO_OPEN=true npm run dev",
     "dev:intellij": "npm run dev",
@@ -33,17 +33,21 @@
     "@ag-grid-enterprise/core": "29.2.0",
     "@ag-grid-enterprise/row-grouping": "29.2.0",
     "@ag-grid-enterprise/server-side-row-model": "29.2.0",
+    "@genesislcap/foundation-comms": "{{versions.UI}}",
+    "@genesislcap/foundation-entity-management": "{{versions.UI}}",
     {{#if FDC3.includeDependencies}}
     "@genesislcap/foundation-fdc3": "{{versions.UI}}",
     {{/if}}
-    "@genesislcap/foundation-comms": "{{versions.UI}}",
-    "@genesislcap/foundation-login": "{{versions.UI}}",
-    "@genesislcap/foundation-entity-management": "{{versions.UI}}",
     "@genesislcap/foundation-header": "{{versions.UI}}",
+    "@genesislcap/foundation-layout": "{{versions.UI}}",
+    "@genesislcap/foundation-logger": "{{versions.UI}}",
+    "@genesislcap/foundation-login": "{{versions.UI}}",
+    "@genesislcap/foundation-shell": "{{versions.UI}}",
     "@genesislcap/foundation-ui": "{{versions.UI}}",
+    "@genesislcap/foundation-utils": "{{versions.UI}}",
     "@genesislcap/rapid-design-system": "{{versions.UI}}",
     "@genesislcap/rapid-grid-pro": "{{versions.UI}}",
-    "@genesislcap/foundation-layout": "{{versions.UI}}",
+    "@genesislcap/web-core": "{{versions.UI}}",
     "@genesislcap/g2plot-chart": "{{versions.UI}}",
     "history": "^5.3.0",
     "react": "^19.0.0-beta-94eed63c49-20240425",
@@ -64,6 +68,7 @@
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/react": "^16.0.0",
+    "@types/css-modules": "^1.0.5",
     "@types/jest": "^29.5.12",
     "@types/node": "^20.14.10",
     "@types/react": "npm:types-react@alpha",  
@@ -80,7 +85,8 @@
     "ts-jest": "^29.2.5",
     "ts-node": "^10.9.2",
     "typescript": "^5.2.2",
-    "vite": "^5.3.1"
+    "vite": "^5.3.1",
+    "vite-plugin-tsconfig-paths": "^1.4.1"
   },  
   "overrides": {  
     "@types/react": "npm:types-react@alpha",  

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

@@ -1,31 +1,70 @@
+import { useEffect, useState } from 'react';
+import { unstable_HistoryRouter as HistoryRouter, Routes, Route, useLocation } from 'react-router-dom';
 import {
-  unstable_HistoryRouter as HistoryRouter,
-  Routes,
-  Route,
-  useLocation,
-} from 'react-router-dom';
-import { useEffect } from 'react';
-import { history, setApiHost{{#if FDC3.channels.length}}, listenToChannel{{/if}} } from './utils';
+  history,
+  setApiHost,
+  getLayoutNameByRoute,
+  {{#if FDC3.channels.length~}}
+  listenToChannel,
+  onFDC3Ready,
+  {{/if}}
+} from './utils';
+import { customEventFactory, registerStylesTarget } from '@/pbc/utils';
 import LayoutWrapper from './layouts/LayoutWrapper';
-import { AUTH_PATH, NOT_PERMITTED_PATH, routeLayouts } from './config';
-import AuthGuard from './guards/AuthGuard';
-import PermissionsGuard from './guards/PermissionsGuard';
+import LayoutName from '@/types/LayoutName';
+import { AUTH_PATH, routeLayouts } from './config';
 import { AuthProvider } from './store/AuthContext';
-// Pages Components
+import { RoutesProvider, useRoutesContext } from './store/RoutesContext';
 import AuthPage from './pages/AuthPage/AuthPage';
-import NotPermittedPage from './pages/NotPermittedPage/NotPermittedPage';
-{{#each routes}}
-import {{pascalCase this.name}} from './pages/{{pascalCase this.name}}/{{pascalCase this.name}}';
-{{/each}}
-
-// Genesis Components
-import './share/genesis-components';
+import { registerComponents as genesisRegisterComponents } from './share/genesis-components';
+import { configureFoundationLogin } from './share/foundation-login';
+import ProtectedGuard from './guards/ProtectedGuard';
+import { storeService } from '@/services/store.service';
 
-const LayoutWithLocation = () => {
+const DynamicLayout = () => {
   const location = useLocation();
-  const layout = routeLayouts[location.pathname] || 'default';
-  {{#if FDC3.channels.length}}
+  const [layoutName, setLayoutName] = useState<LayoutName>(routeLayouts[location.pathname]  || 'default');
+  const handleRouteChange = (location: any) => {
+    setLayoutName(getLayoutNameByRoute(location.pathname));
+  };
+  const route = useRoutesContext().find((r) => r.path === location.pathname);
+  let pageComponent;
+  let content;
+
   useEffect(() => {
+    handleRouteChange(location);
+    const unlisten = history.listen(handleRouteChange);
+
+    return () => {
+      unlisten();
+    }
+  }, [location]);
+
+  if (route) {
+    pageComponent = route.element;
+  } else {
+    pageComponent = <AuthPage />;
+  }
+
+  if (location.pathname === `/${AUTH_PATH}` || location.pathname === '/') {
+    content = pageComponent;
+  } else {
+    content = <ProtectedGuard>{pageComponent}</ProtectedGuard>
+  }
+
+  return <LayoutWrapper layout={layoutName}>{content}</LayoutWrapper>
+
+};
+
+const App: React.FC = ({ rootElement }) => {
+  const dispatchCustomEvent = (type: string, detail?: any) => {
+    rootElement.dispatchEvent(customEventFactory(type, detail));
+  };
+  const handleStoreConnected = (event: CustomEvent) => {
+    storeService.onConnected(event);
+  };
+  {{#if FDC3.channels.length~}}
+  const FDC3ReadyHandler = () => {
     {{#each FDC3.channels}}
     listenToChannel('{{this.name}}', '{{this.type}}', (result) => {
       console.log('Received FDC3 channel message on: {{this.name}} channel, type: {{this.type}}', result);
@@ -33,61 +72,39 @@ const LayoutWithLocation = () => {
       // E.g. open a modal or route to specific page: Route.path.push(`[Route name]`);
     });
     {{/each}}
-    
-    return () => {
-      console.log('Component is being unmounted');
-    };
-  }, []);
+  };
   {{/if}}
 
-  let pageComponent;
-  let permissionCode = '{{this.permissions.viewRight}}';
-
-  switch (location.pathname) {
-    case `/${AUTH_PATH}`:
-      pageComponent = <AuthPage />;
-      break;
-    case `/${NOT_PERMITTED_PATH}`:
-      pageComponent = <NotPermittedPage />;
-      break;
-  {{#each routes}}
-    case '/{{kebabCase this.name}}':
-      pageComponent = <{{pascalCase this.name}} />;
-      permissionCode = '{{this.permissions.viewRight}}';
-      break;
-  {{/each}}
-    default:
-      pageComponent = <AuthPage />;
-  }
+  setApiHost();
+  genesisRegisterComponents();
+  configureFoundationLogin({ router: history });
 
-  if (
-    location.pathname === '/auth' ||
-    location.pathname === '/'
-  ) {
-    return <LayoutWrapper layout={layout}>{pageComponent}</LayoutWrapper>;
-  } else {
-    return (
-      <AuthGuard>
-        <PermissionsGuard permissionCode={permissionCode}>
-          <LayoutWrapper layout={layout}>{pageComponent}</LayoutWrapper>
-        </PermissionsGuard>
-      </AuthGuard>
-    );
-  }
-};
+  useEffect(() => {
+    rootElement.addEventListener('store-connected', handleStoreConnected);
+    registerStylesTarget(document.body, 'main');
+    {{#if FDC3.channels.length~}}
+    onFDC3Ready(FDC3ReadyHandler);
+    {{/if}}
+    dispatchCustomEvent('store-connected', rootElement);
+    dispatchCustomEvent('store-ready', true);
 
-const App: React.FC = () => {
-  setApiHost();
+    return () => {
+      rootElement.removeEventListener('store-connected', handleStoreConnected);
+      dispatchCustomEvent('store-disconnected');
+    };
+  }, []);
 
   return (
     <AuthProvider>
-      <HistoryRouter history={history}>
-        <Routes>
-          <Route path="*" element={<LayoutWithLocation />} />
-        </Routes>
-      </HistoryRouter>
+      <RoutesProvider>
+        <HistoryRouter history={history}>
+          <Routes>
+            <Route path="*" element={<DynamicLayout />} />
+          </Routes>
+        </HistoryRouter>
+      </RoutesProvider>
     </AuthProvider>
   );
 };
 
-export default App;
+export default App;

package/client-tmp/react/src/config.ts

@@ -1,13 +1,10 @@
 import { RouteLayouts } from './types/RouteLayouts';
 
 export const routeLayouts: RouteLayouts = {
-  '/auth-mock': 'blank',
   '/auth': 'blank',
   '/': 'blank',
 };
 
-import type { MainMenu } from './types/menu';
-
 export const AUTH_PATH = 'auth';
 export const NOT_PERMITTED_PATH = 'not-permitted';
 
@@ -18,15 +15,3 @@ export const API_DATA = {
     password: '', // provide password to a user in given environment
   },
 };
-
-export const mainMenu: MainMenu = [
-  {{#each routes}}
-  {
-    index: {{@index}},
-    path: '{{kebabCase this.name}}',
-    title: '{{#if this.title}}{{this.title}}{{else}}{{this.name}}{{/if}}',
-    icon: '{{this.icon}}',
-    variant: 'solid'
-  }{{#unless @last}},{{/unless}}
-  {{/each}}
-];

package/client-tmp/react/src/guards/ProtectedGuard.tsx

@@ -0,0 +1,56 @@
+import { useState, useEffect, ReactNode } from 'react';
+import isConnectedHelper from '@/helpers/isConnectedHelper';
+import isAuthenticatedHelper from '@/helpers/isAuthenticatedHelper';
+import hasPermissionHelper from '@/helpers/hasPermissionHelper';
+import { useRoutesContext } from '@/store/RoutesContext';
+import { NOT_PERMITTED_PATH, AUTH_PATH } from '@/config';
+
+enum PermissionState {
+  ALLOWED = 'allowed',
+  DENIED = 'denied',
+  UNKNOWN = 'unknown',
+}
+
+const redirectUrlByPermissionState: { [key in Partial<PermissionState>]?: string } = {
+  [PermissionState.DENIED]: NOT_PERMITTED_PATH,
+  [PermissionState.UNKNOWN]: AUTH_PATH,
+};
+
+const ProtectedGuard: React.FC<{ children: ReactNode }> = ({ children }: { children: ReactNode }) => {
+  const routes = useRoutesContext();
+  const [isConnected, setIsConnected] = useState<boolean | null>(null);
+  const isAuthenticated: boolean | null = null;
+  const route = routes.find(({ path }) => path === location.pathname);
+  const hasPermission = route?.data?.permissionCode ? hasPermissionHelper(route.data?.permissionCode) : true;
+
+  useEffect(() => {
+    isConnectedHelper().then((connectedState: boolean): void => {
+      setIsConnected(connectedState);
+    });
+  }, []);
+  
+  useEffect((): void  => {
+    if (isConnected === null) {
+      return;
+    }
+
+    const isAuthenticated = isAuthenticatedHelper();
+
+
+    let permissionState;
+
+    if (!isConnected || !isAuthenticated) {
+      permissionState = PermissionState.UNKNOWN;
+    } else if (hasPermission === false) {
+      permissionState = PermissionState.DENIED;
+    } 
+    
+    if (permissionState) {
+      window.location.href = `/${redirectUrlByPermissionState[permissionState]}`;
+    }
+  }, [routes, isConnected, isAuthenticated, hasPermission]);
+
+  return children;
+};
+
+export default ProtectedGuard;

package/client-tmp/react/src/helpers/hasPermissionHelper.tsx

@@ -0,0 +1,10 @@
+import { getUser } from '@genesislcap/foundation-user';
+
+const hasPermissionHelper = (permissionCode: string | undefined): boolean => {
+  const user = getUser();
+
+  return !!(permissionCode && !user.hasPermission(permissionCode))
+
+};
+
+export default hasPermissionHelper;

package/client-tmp/react/src/helpers/isAuthenticatedHelper.tsx

@@ -0,0 +1,14 @@
+import { getUser } from '@genesislcap/foundation-user';
+
+const isAuthenticatedHelper = (): boolean => {
+  const user = getUser();
+
+  if (!user.isAuthenticated) {
+    user.trackPath();
+    return false;
+  }
+
+  return true;
+};
+
+export default isAuthenticatedHelper;

package/client-tmp/react/src/helpers/isConnectedHelper.tsx

@@ -0,0 +1,16 @@
+import { getConnect } from '@genesislcap/foundation-comms';
+
+const isConnectedHelper = (): Promise<boolean> => {
+  const connect = getConnect();
+  const hostUrl = sessionStorage.getItem('hostUrl');
+
+  if (connect.isConnected) {
+    return new Promise((resolve) => resolve(true));
+  }
+  if (!hostUrl) {
+    return new Promise((resolve) => resolve(false));
+  }
+  return connect.connect(hostUrl);
+};
+
+export default isConnectedHelper;

package/client-tmp/react/src/layouts/blank/BlankLayout.tsx

@@ -1,7 +1,7 @@
 import React, { ReactNode, useEffect, useRef } from 'react';
 import { configureDesignSystem } from '@genesislcap/foundation-ui';
 import styles from './BlankLayout.module.css';
-import * as designTokens from '../../styles/design-tokens.json';
+import * as designTokens from '@/styles/design-tokens.json';
 
 interface BlankLayoutProps {
   children: ReactNode;

package/client-tmp/react/src/layouts/default/DefaultLayout.tsx

@@ -1,13 +1,14 @@
 import React, { ReactNode, useEffect, useRef } from 'react';
-import { configureDesignSystem } from '@genesislcap/foundation-ui';
+import { configureDesignSystem, getNavItems } from '@genesislcap/foundation-ui';
 import { useNavigate } from 'react-router-dom';
 import {
   baseLayerLuminance,
   StandardLuminance,
 } from '@microsoft/fast-components';
 import styles from './DefaultLayout.module.css';
-import { mainMenu } from '../../config';
-import * as designTokens from '../../styles/design-tokens.json';
+import PBCElementsRenderer from '@/pbc/elementsRenderer';
+import * as designTokens from '@/styles/design-tokens.json';
+import { useRoutesContext } from '@/store/RoutesContext';
 
 interface DefaultLayoutProps {
   children: ReactNode;
@@ -15,10 +16,13 @@ interface DefaultLayoutProps {
 
 const DefaultLayout: React.FC<DefaultLayoutProps> = ({ children }) => {
   const navigate = useNavigate();
-
   const designSystemProviderRef = useRef<HTMLElement>(null);
   const foundationHeaderRef = useRef<HTMLElement>(null);
-  const allRoutes = mainMenu;
+  const routes = useRoutesContext();
+  const navItems = getNavItems(routes.flatMap((route) => ({
+    path: route.path || '',
+    navItems: route.data?.navItems,
+  })));
 
   const onLuminanceToggle = (): void => {
     if (designSystemProviderRef.current) {
@@ -57,22 +61,21 @@ const DefaultLayout: React.FC<DefaultLayoutProps> = ({ children }) => {
 
   return (
     <rapid-design-system-provider ref={designSystemProviderRef} class={className}>
+      <PBCElementsRenderer target={['layout-start']} />
       <foundation-header
         ref={foundationHeaderRef}
         show-luminance-toggle-button
         show-misc-toggle-button
+        routeNavItems={navItems}
         navigateTo={(path) => navigate(path)}
       >
-        <section className={styles['routes-wrapper']} slot="routes">
-          {allRoutes.map((route, index) => (
-            <rapid-button key={index} onClick={() => navigate(route.path)}>
-              <rapid-icon name={route.icon}></rapid-icon>
-              {route.title}
-            </rapid-button>
-          ))}
-        </section>
       </foundation-header>
-      <section className={styles['content']}>{children}</section>
+      <section className={styles['content']}>
+        <PBCElementsRenderer target={['content-start']} />
+        {children}
+        <PBCElementsRenderer target={['content', 'content-end']} />
+      </section>
+      <PBCElementsRenderer target={['layout', 'layout-end']} />
     </rapid-design-system-provider>
   );
 };

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

@@ -1,10 +1,24 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './App.tsx'
+
+import { registerPBCs } from '@/pbc/utils';
+import { createLogger } from '@genesislcap/foundation-logger';
+
 import './styles/styles.css'
 
-ReactDOM.createRoot(document.getElementById('root')!).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-)
+const logger = createLogger('main');
+
+function bootstrapApp() {
+  const rootEelement = document.getElementById('root');
+  ReactDOM.createRoot(rootEelement!).render(
+    <React.StrictMode>
+      <App rootElement={rootEelement} />
+    </React.StrictMode>,
+  )
+}
+
+registerPBCs()
+.then(hasAssets => logger.debug(hasAssets ? 'PBCs registered' : 'No PBCs detected'))
+.catch((err) => logger.error(err))
+.finally(bootstrapApp)

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

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

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

@@ -1,7 +1,7 @@
 import { render, screen } from '@testing-library/react';
 import NotPermittedPage from './NotPermittedPage';
 
-jest.mock('../../components/ErrorMessage/ErrorMessage', () => {
+jest.mock('@/components/ErrorMessage/ErrorMessage', () => {
   return jest.fn((props: { message: string }) => <h1 data-testid="error-message">{props.message}</h1>);
 });
 

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import ErrorMessage from '../../components/ErrorMessage/ErrorMessage';
+import ErrorMessage from '@/components/ErrorMessage/ErrorMessage';
 import './NotPermittedPage.css';
 
 const NotPermittedPage: React.FC = () => {

package/client-tmp/react/src/pbc/README.md

@@ -0,0 +1,7 @@
+# PBC
+
+This directory contains PBC `genx add` output.
+
+The app will reload if you remove, add, or customise a packaged business capability.
+
+See the expanded README.md in `@genesislcap/foundation-shell`.

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

@@ -0,0 +1,36 @@
+import React, { useEffect, useRef } from 'react';
+import { deriveElementTag } from './utils';
+import { useRoutesContext } from '@/store/RoutesContext';
+import { useLocation } from 'react-router-dom';
+
+
+const PBCContainer: React.FC = () => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const routes = useRoutesContext();
+  const location = useLocation();
+
+  useEffect(() => {
+    const loadElement = async () => {
+      const route = routes.find(({ path }) => path === location.pathname);
+      const { data } = route || {};
+      const { pbcElement, pbcElementTag } = data || {};
+
+      if (!pbcElement) {
+        return;
+      }
+      const element = pbcElement.define ? pbcElement : await pbcElement();
+      const tagName = pbcElementTag || deriveElementTag(element.name);
+      const customElement = document.createElement(tagName);
+      if (containerRef.current) {
+        containerRef.current.replaceChildren();
+        containerRef.current.appendChild(customElement);
+      }
+    };
+
+    loadElement();
+  }, [location.pathname, routes]);
+
+  return <div ref={containerRef} className="container" style=\{{ width: '100%', height: '100%' }}></div>;
+};
+
+export default PBCContainer;

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

@@ -0,0 +1,40 @@
+import { useEffect, useRef } from 'react';
+import { AppElementPredicate, AppTargetId } from '@genesislcap/foundation-shell/app';
+import { customEventFactory, getTargetElements } from './utils';
+
+interface PBCElementsRendererProps {
+  target: AppTargetId;
+  predicate?: AppElementPredicate;
+}
+
+interface PBCContainerElement extends HTMLDivElement {
+  $emit: (type: string, detail: any) => void;
+}
+
+const PBCElementsRenderer = ({ target = [], predicate = () => true }: PBCElementsRendererProps) => {
+  const containerRef = useRef<PBCContainerElement>(null);
+
+  useEffect(() => {
+    if (containerRef.current) {
+      containerRef.current.$emit = (type, detail) => {
+        containerRef.current.dispatchEvent(customEventFactory(type, detail));
+      }
+    }
+  }, []);
+
+  useEffect(() => {
+    if (containerRef.current) {
+      containerRef.current.replaceChildren();
+    }
+    const templates = getTargetElements(target, predicate);
+    templates.forEach((currentTemplate: any) => {
+      if (containerRef.current) {
+        currentTemplate.render(containerRef.current, containerRef.current);
+      }
+    });
+  }, [target, predicate]);
+
+  return (<div ref={containerRef} className="container"></div>);
+};
+
+export default PBCElementsRenderer;