@genesislcap/blank-app-seed 3.30.0-prerelease.13 → 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.13",
+  "version": "3.30.0-prerelease.15",
   "license": "Apache-2.0",
   "scripts": {
     "lint": "eslint .",

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # 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)
+
+
+### Features
+
+* replaced karma with jest in angular (#348) 805d7ec
+
 ## [3.30.0-prerelease.13](https://github.com/genesiscommunitysuccess/blank-app-seed/compare/v3.30.0-prerelease.12...v3.30.0-prerelease.13) (2024-09-18)
 
 

package/client-tmp/angular/__mocks__/fileMock.js

@@ -0,0 +1 @@
+module.exports = 'test-file-stub';

package/client-tmp/angular/angular.json

@@ -90,35 +90,6 @@
             "buildTarget": "{{pkgName}}:build"
           }
         },
-        "test": {
-          "builder": "@angular-builders/custom-webpack:karma",
-          "configurations": {
-            "production": {
-              "customWebpackConfig": {
-                "path": "./webpack.prod.config.js",
-                "mergeStrategies": {
-                  "externals": "replace"
-                }
-              }
-            },
-            "development": {
-              "customWebpackConfig": {
-                "path": "./webpack.dev.config.js",
-                "mergeStrategies": {
-                  "externals": "replace"
-                }
-              }
-            }
-          },
-          "defaultConfiguration": "development",
-          "options": {
-            "polyfills": ["zone.js", "zone.js/testing"],
-            "tsConfig": "tsconfig.spec.json",
-            "assets": ["src/favicon.ico", "src/assets"],
-            "styles": ["src/styles/styles.css"],
-            "scripts": []
-          }
-        },
         "lint": {
           "builder": "@angular-eslint/builder:lint",
           "options": {

package/client-tmp/angular/jest.config.js

@@ -0,0 +1,20 @@
+const { pathsToModuleNameMapper } = require('ts-jest');
+const { compilerOptions } = require('./tsconfig');
+
+module.exports = {
+  preset: 'jest-preset-angular',
+  roots: ['<rootDir>/src/'],
+  testMatch: ['**/+(*.)+(spec).+(ts)'],
+  setupFilesAfterEnv: ['<rootDir>/src/jest.setup.ts'],
+  collectCoverage: true,
+  coverageReporters: ['html'],
+  coverageDirectory: 'coverage/my-app',
+  transformIgnorePatterns: [
+    'node_modules/(?!(@genesislcap/*|consola|@angular|@microsoft|exenv-es6|uuid))',
+  ],
+  moduleNameMapper: {
+    ...pathsToModuleNameMapper(compilerOptions.paths || {}, { prefix: '<rootDir>/' }),
+    '\\.(jpg|jpeg|png|gif|svg)$': '<rootDir>/src/__mocks__/fileMock.js',
+    '\\.(css)$': 'identity-obj-proxy',
+  },
+};

package/client-tmp/angular/package.json

@@ -27,7 +27,7 @@
     "lint:fix": "genx lint --fix",
     "lint:eslint": "genx lint -l eslint --profile",
     "lint:stylelint": "node lint-css.js",
-    "test": "ng test",
+    "test": "jest",
     "test:e2e": "genx test --e2e",
     "test:e2e:debug": "genx test --e2e --debug",
     "test:e2e:ui": "genx test --e2e --interactive",
@@ -54,14 +54,14 @@
     "@genesislcap/genx": "{{versions.UI}}",
     "@genesislcap/build-kit": "{{versions.UI}}",
     "@types/jasmine": "~5.1.0",
+    "@types/jest": "^29.5.13",
     "@types/numeral": "^2.0.5",
     "file-loader": "^6.2.0",
     "jasmine-core": "~5.1.0",
-    "karma": "~6.4.0",
-    "karma-chrome-launcher": "~3.2.0",
-    "karma-coverage": "~2.2.0",
-    "karma-jasmine": "~5.1.0",
-    "karma-jasmine-html-reporter": "~2.1.0",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "jest-preset-angular": "^14.2.4",
+    "jest-transform-stub": "^2.0.0",
     "svg-url-loader": "^8.0.0",
     "typescript": "~5.4.5",
     "ts-node": "10.9.2",

package/client-tmp/angular/src/app/layouts/default/default.layout.spec.ts

@@ -4,7 +4,7 @@ import { DefaultLayoutComponent } from './default.layout';
 import { ElementRef, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 
 class MockRouter {
-  navigate = jasmine.createSpy('navigate');
+  navigate = jest.fn();
 }
 
 class MockElementRef implements ElementRef {
@@ -46,4 +46,4 @@ describe('DefaultLayoutComponent', () => {
     component.navigateAngular(path);
     expect(router.navigate).toHaveBeenCalledWith([path]);
   });
-});
+});

package/client-tmp/angular/src/jest.setup.ts

@@ -0,0 +1,46 @@
+import 'jest-preset-angular/setup-jest';
+
+// Mock window.matchMedia
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: (query: string) => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: jest.fn(), // Deprecated
+    removeListener: jest.fn(), // Deprecated
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+    dispatchEvent: jest.fn(),
+  }),
+});
+
+// Mock BroadcastChannel
+class MockBroadcastChannel {
+  name: string;
+  onmessage: ((this: BroadcastChannel, ev: MessageEvent) => any) | null = null;
+  onmessageerror: ((this: BroadcastChannel, ev: MessageEvent) => any) | null = null;
+
+  constructor(name: string) {
+    this.name = name;
+  }
+
+  postMessage(message: any) {
+    if (this.onmessage) {
+      this.onmessage({ data: message } as MessageEvent);
+    }
+  }
+
+  close() {}
+
+  addEventListener() {}
+  removeEventListener() {}
+  dispatchEvent() {
+    return false;
+  }
+}
+
+Object.defineProperty(window, 'BroadcastChannel', {
+  writable: true,
+  value: MockBroadcastChannel,
+});

package/client-tmp/angular/tsconfig.app.json

@@ -1,9 +1,8 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
 {
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "./out-tsc/app",
-    "types": ["node"],
+    "types": ["node"]
   },
   "files": [
     "src/main.ts"

package/client-tmp/angular/tsconfig.json

@@ -1,4 +1,3 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
 {
   "compileOnSave": false,
   "compilerOptions": {
@@ -23,7 +22,7 @@
       "ES2022",
       "dom"
     ],
-    "resolveJsonModule": true,
+    "resolveJsonModule": true
   },
   "angularCompilerOptions": {
     "enableI18nLegacyMessageIdFormat": false,

package/client-tmp/angular/tsconfig.spec.json

@@ -1,15 +1,21 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
 {
   "extends": "./tsconfig.json",
   "compilerOptions": {
+    "module": "ES2022",
+    "target": "ES2022",
     "outDir": "./out-tsc/spec",
     "types": [
-      "jasmine"
-    ]
+      "jest" 
+    ],
+    "esModuleInterop": true,
+    "emitDecoratorMetadata": true,
+    "resolveJsonModule": true
   },
+  "files": [
+    "src/jest.setup.ts",
+  ],
   "include": [
-    "src/**/*.d.ts",
-    "src/pbc/**/*.ts",
-    "src/**/*.spec.ts"
+    "src/**/*.spec.ts",
+    "src/**/*.d.ts"
   ]
-}
+}

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;