@genesislcap/blank-app-seed 3.29.2 → 3.30.0-prerelease.10

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

@@ -1,36 +1,59 @@
-import React from 'react';
 import {
   unstable_HistoryRouter as HistoryRouter,
   Routes,
   Route,
   useLocation,
 } from 'react-router-dom';
-import history from './utils/history';
+import { useEffect } from 'react';
+import { history, setApiHost{{#if FDC3.channels.length}}, listenToChannel{{/if}} } from './utils';
 import LayoutWrapper from './layouts/LayoutWrapper';
-import { routeLayouts } from './config';
+import { AUTH_PATH, NOT_PERMITTED_PATH, routeLayouts } from './config';
 import AuthGuard from './guards/AuthGuard';
+import PermissionsGuard from './guards/PermissionsGuard';
 import { AuthProvider } from './store/AuthContext';
 // Pages Components
-import AuthPage from './pages/auth/AuthPage';
+import AuthPage from './pages/AuthPage/AuthPage';
+import NotPermittedPage from './pages/NotPermittedPage/NotPermittedPage';
 {{#each routes}}
-import {{pascalCase this.name}} from './pages/{{kebabCase this.name}}/{{pascalCase this.name}}';
+import {{pascalCase this.name}} from './pages/{{pascalCase this.name}}/{{pascalCase this.name}}';
 {{/each}}
+
 // Genesis Components
 import './share/genesis-components';
 
 const LayoutWithLocation = () => {
   const location = useLocation();
   const layout = routeLayouts[location.pathname] || 'default';
+  {{#if FDC3.channels.length}}
+  useEffect(() => {
+    {{#each FDC3.channels}}
+    listenToChannel('{{this.name}}', '{{this.type}}', (result) => {
+      console.log('Received FDC3 channel message on: {{this.name}} channel, type: {{this.type}}', result);
+      // TODO: Add your listener logic here
+      // 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':
+    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:
@@ -45,13 +68,17 @@ const LayoutWithLocation = () => {
   } else {
     return (
       <AuthGuard>
-        <LayoutWrapper layout={layout}>{pageComponent}</LayoutWrapper>
+        <PermissionsGuard permissionCode={permissionCode}>
+          <LayoutWrapper layout={layout}>{pageComponent}</LayoutWrapper>
+        </PermissionsGuard>
       </AuthGuard>
     );
   }
 };
 
 const App: React.FC = () => {
+  setApiHost();
+
   return (
     <AuthProvider>
       <HistoryRouter history={history}>

package/client-tmp/react/src/components/ErrorMessage/ErrorMessage.test.tsx

@@ -0,0 +1,95 @@
+import { render, screen } from '@testing-library/react';
+import { default as ErrorMessage, ErrorMessageProps } from './ErrorMessage';
+
+describe('ErrorMessage Component', () => {
+  const message: string = 'Test Error Message';
+
+  test('renders the message as a div by default', () => {
+    render(<ErrorMessage message={message} />);
+    const displayedMessage: HTMLElement = screen.getByText(message);
+    expect(displayedMessage.tagName).toBe('DIV');
+    expect(displayedMessage).toBeInTheDocument();
+  });
+
+  test('renders the message as an h1 element when elementType is "h1"', () => {
+    render(<ErrorMessage message={message} elementType="h1" />);
+    const displayedMessage: HTMLElement = screen.getByRole('heading', { level: 1 });
+    expect(displayedMessage.tagName).toBe('H1');
+    expect(displayedMessage).toBeInTheDocument();
+  });
+
+  test('renders the message as a p element when elementType is "p"', () => {
+    render(<ErrorMessage message={message} elementType="p" />);
+    const displayedMessage: HTMLElement = screen.getByText(message);
+    expect(displayedMessage.tagName).toBe('P');
+    expect(displayedMessage).toBeInTheDocument();
+  });
+
+  test('applies the correct styles to the error message wrapper', () => {
+    render(<ErrorMessage message={message} />);
+    const wrapper: HTMLElement | null = screen.getByText(message).closest('section');
+    expect(wrapper).toHaveStyle(`
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      height: 100%;
+      width: 100%;
+    `);
+  });
+
+  test('applies the correct styles to the error message itself', () => {
+    render(<ErrorMessage message={message} />);
+    const displayedMessage: HTMLElement = screen.getByText(message);
+    const messageWrapper: HTMLElement | null = displayedMessage.parentElement;
+    
+    expect(messageWrapper).toBeInTheDocument();
+    expect(messageWrapper).toHaveStyle(`
+      color: var(--neutral-foreground-rest);
+      background-color: var(--neutral-layer-4);
+      border-color: var(--error-color);
+      border-radius: 7px;
+      border-style: solid;
+      border-width: 4px;
+      padding: 5px;
+      margin: 15px;
+      text-align: center;
+      width: fit-content;
+      align-self: center;
+      height: auto;
+      max-height: 100%;
+    `);
+  });
+
+  test('renders nothing if the message is an empty string', () => {
+    const { container }: { container: HTMLElement } = render(<ErrorMessage message="" />);
+    expect(container.firstChild).toBeNull();
+  });
+
+  test('renders the correct element type for various elementType props', () => {
+    const elementTypes: ErrorMessageProps['elementType'][] = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'span', 'div'];
+    elementTypes.forEach((elementType: ErrorMessageProps['elementType']) => {
+      const { container }: { container: HTMLElement } = render(<ErrorMessage message={message} elementType={elementType} />);
+      const displayedMessage: HTMLElement | null = container.querySelector(elementType as string);
+      expect(displayedMessage).toBeInTheDocument();
+      expect(displayedMessage?.tagName).toBe((elementType as string).toUpperCase());
+    });
+  });
+
+  test('renders the message as a div element when elementType is unknown', () => {
+    render(<ErrorMessage message={message} />);
+    const displayedMessage: HTMLElement = screen.getByText(message);
+    expect(displayedMessage.tagName).toBe('DIV');
+    expect(displayedMessage).toBeInTheDocument();
+  });
+
+  test('renders nothing if the message is null', () => {
+    const { container }: { container: HTMLElement } = render(<ErrorMessage />);
+    expect(container.firstChild).toBeNull();
+  });
+
+  test('renders nothing if the message is undefined', () => {
+    const { container }: { container: HTMLElement } = render(<ErrorMessage message={undefined} />);
+    expect(container.firstChild).toBeNull();
+  });
+});

package/client-tmp/react/src/components/ErrorMessage/ErrorMessage.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+
+const styles = {
+  errorMessageWrapper: {
+    display: 'flex',
+    flexDirection: 'column' as const,
+    justifyContent: 'center',
+    alignItems: 'center',
+    height: '100%',
+    width: '100%',
+  },
+  errorMessage: {
+    color: 'var(--neutral-foreground-rest)',
+    backgroundColor: 'var(--neutral-layer-4)',
+    borderColor: 'var(--error-color)',
+    borderRadius: '7px',
+    borderStyle: 'solid' as const,
+    borderWidth: '4px',
+    padding: '5px',
+    margin: '15px',
+    textAlign: 'center' as const,
+    width: 'fit-content',
+    alignSelf: 'center',
+    height: 'auto',
+    maxHeight: '100%'
+  },
+};
+
+export interface ErrorMessageProps {
+  elementType?: 'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span';
+  message?: string;
+}
+
+const ErrorMessage: React.FC<ErrorMessageProps> = ({ elementType = 'div', message = '' }) => {
+  const ElementType = elementType;
+
+  return message && message !== '' && (
+    <section style={styles.errorMessageWrapper}>
+      <div style={styles.errorMessage}>
+        {(() => {
+          switch (ElementType) {
+            case 'h1':
+              return <h1>{message}</h1>;
+            case 'h2':
+              return <h2>{message}</h2>;
+            case 'h3':
+              return <h3>{message}</h3>;
+            case 'h4':
+              return <h4>{message}</h4>;
+            case 'h5':
+              return <h5>{message}</h5>;
+            case 'h6':
+              return <h6>{message}</h6>;
+            case 'p':
+              return <p>{message}</p>;
+            case 'span':
+              return <span>{message}</span>;
+            default:
+              return <div>{message}</div>;
+          }
+        })()}
+      </div>
+    </section>
+  );
+};
+
+export default ErrorMessage;

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

@@ -9,9 +9,10 @@ export const routeLayouts: RouteLayouts = {
 import type { MainMenu } from './types/menu';
 
 export const AUTH_PATH = 'auth';
+export const NOT_PERMITTED_PATH = 'not-permitted';
 
 export const API_DATA = {
-  URL: '',
+  URL: import.meta.env.VITE_API_HOST,
   AUTH: {
     username: '', // provide login to a user in given environment
     password: '', // provide password to a user in given environment

package/client-tmp/react/src/custom-elements.d.ts

@@ -1,11 +1,21 @@
-declare namespace JSX {
-  interface IntrinsicElements {
-    // Wildcard for all webcomponents:
-    [elemName: string]: any;
-  }
-}
+import React, { useState, DOMAttributes }  from 'react';
 
-declare module '*.module.css' {
-  const classes: { [key: string]: string };
-  export default classes;
+type CustomElement<T = HTMLElement> = Partial<T & DOMAttributes<T> & { children: any }>;
+
+declare module "react/jsx-runtime" {
+  namespace JSX {
+    interface IntrinsicElements {
+      'entity-management': CustomElement;
+      'foundation-form': CustomElement;
+      'rapid-grid-pro': CustomElement;
+      'grid-pro-genesis-datasource': CustomElement;
+      'grid-pro-column': CustomElement;
+      'rapid-g2plot-chart': CustomElement;
+      'chart-datasource': CustomElement;
+      'client-app-login': CustomElement;
+      'rapid-layout': CustomElement;
+      'rapid-layout-region': CustomElement;
+      'rapid-layout-item': CustomElement;
+    }
+  }
 }

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

@@ -16,7 +16,7 @@ const AuthGuard: React.FC<AuthGuardProps> = ({ children }: AuthGuardProps) => {
     };
 
     verifyAuth();
-  }, []);
+  }, [checkAuthStatus]);
 
   if (isLoading) {
     return <div>Loading...</div>; // Or some loading component

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

@@ -0,0 +1,37 @@
+import { useEffect, useState, ReactNode } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { getUser } from '@genesislcap/foundation-user';
+import { NOT_PERMITTED_PATH } from '../config';
+
+interface PermissionsGuardProps {
+  children: ReactNode;
+  permissionCode?: string;
+}
+
+const PermissionsGuard: React.FC<PermissionsGuardProps> = ({ children, permissionCode }: PermissionsGuardProps) => {
+  const navigate = useNavigate();
+  const [isAuthorized, setIsAuthorized] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    const checkPermission = async () => {
+      const user = getUser();
+      if (permissionCode && !user.hasPermission(permissionCode)) {
+        navigate(`/${NOT_PERMITTED_PATH}`);
+      } else {
+        setIsAuthorized(true);
+      }
+      setIsLoading(false);
+    };
+
+    checkPermission();
+  }, [navigate, permissionCode]);
+
+  if (isLoading) {
+    return <div>Loading...</div>; // Or some loading component
+  }
+
+  return isAuthorized ? <>{children}</> : null;
+};
+
+export default PermissionsGuard;

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

@@ -0,0 +1,21 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './styles/styles.css';
+import App from './App';
+import reportWebVitals from './reportWebVitals';
+
+const rootElement = document.getElementById('root');
+
+if (rootElement) {
+  const root = ReactDOM.createRoot(rootElement);
+  root.render(
+    <React.StrictMode>
+      <App />
+    </React.StrictMode>,
+  );
+
+  // If you want to start measuring performance in your app, pass a function
+  // to log results (for example: reportWebVitals(console.log))
+  // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+  reportWebVitals();
+}

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

@@ -0,0 +1,10 @@
+import { render } from '@testing-library/react';
+import AuthPage from './AuthPage';
+
+test('renders AuthPage component', () => {
+  const { container } = render(<AuthPage />);
+  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/{auth/AuthPage.jsx → AuthPage/AuthPage.tsx}

@@ -1,6 +1,7 @@
+import React from 'react';
 import './AuthPage.css';
 
-const AuthPage = () => {
+const AuthPage: React.FC = () => {
   return (
     <section className="auth-page">
       <client-app-login></client-app-login>
@@ -8,4 +9,4 @@ const AuthPage = () => {
   );
 };
 
-export default AuthPage;
+export default AuthPage;

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

@@ -0,0 +1,17 @@
+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>);
+});
+
+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.');
+  });
+});

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import ErrorMessage from '../../components/ErrorMessage/ErrorMessage';
+import './NotPermittedPage.css';
+
+const NotPermittedPage: React.FC = () => {
+  return (
+    <ErrorMessage
+      elementType="h1"
+      message="You do not have permission to access this part of the application, please contact your administrator."
+    />
+  );
+};
+
+export default NotPermittedPage;

package/client-tmp/react/src/{reportWebVitals.js → reportWebVitals.ts}

@@ -1,4 +1,4 @@
-const reportWebVitals = (onPerfEntry) => {
+const reportWebVitals = onPerfEntry => {
   if (onPerfEntry && onPerfEntry instanceof Function) {
     import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
       getCLS(onPerfEntry);

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

@@ -1,7 +1,7 @@
 import {configure, define} from '@genesislcap/foundation-login';
 import { AUTH_PATH } from '../config';
 import { DI } from '@microsoft/fast-foundation';
-import history from '../utils/history';
+import { history } from '../utils/history';
 
 /**
  * Configure the micro frontend

package/client-tmp/react/src/svg-elements.d.ts

@@ -1,4 +1,4 @@
 declare module '*.svg' {
-  const content: any;
+  const content: string;
   export default content;
 }

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

@@ -0,0 +1,32 @@
+{{#if FDC3.includeDependencies}}
+import { DefaultFDC3 } from '@genesislcap/foundation-fdc3';
+{{/if}}
+export const isFDC3 = (): boolean => !!((window as unknown as { fdc3?: boolean }).fdc3);
+{{#if FDC3.includeDependencies}}
+
+export const onFDC3Ready = async (FDC3ReadyCb: () => any): Promise<void> => {
+  isFDC3()
+    ? await FDC3ReadyCb()
+    : window.addEventListener('fdc3Ready', async () => {
+      await FDC3ReadyCb();
+    });
+};
+
+export const listenToChannel = async (
+  channelName: string,
+  type: string,
+  callback: (result: any) => void,
+): Promise<void> => {
+  const fdc3Service = new DefaultFDC3();
+  fdc3Service.addChannelListener(channelName, type, callback);
+};
+
+export const sendEventOnChannel = (channelName: string, type: string) => {
+  return async (e: any) => {
+    const fdc3Service = new DefaultFDC3();
+    // check for ag-grid-specific events, fall back to standard events
+    const payload = e.data || e.detail;
+    await fdc3Service.broadcastOnChannel(channelName, type, payload);
+  };
+};
+{{/if}}

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

@@ -1,5 +1,3 @@
 import { createBrowserHistory } from 'history';
 
-const history = createBrowserHistory();
-
-export default history;
+export const history = createBrowserHistory();

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

@@ -0,0 +1,4 @@
+export * from './history';
+export * from './fdc3';
+export * from './permissions';
+export * from './setApiHost';

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

@@ -0,0 +1,7 @@
+import { User } from '@genesislcap/foundation-user';
+
+export const getViewUpdateRightComponent = (
+  user: User,
+  right: string,
+  event: string | boolean = true,
+) => (!right || user.hasPermission(right) ? event : '');

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

@@ -0,0 +1,9 @@
+import { API_DATA } from '../config';
+
+export const setApiHost = () => {
+    const { URL: apiHost } = API_DATA;
+  
+    if (apiHost) {
+      sessionStorage.setItem('hostUrl', apiHost);
+    }
+  };

package/client-tmp/react/test/e2e/fixture.ts

@@ -0,0 +1,26 @@
+import { base, Page } from '@genesislcap/foundation-testing/e2e';
+import { ProtectedPage } from './pages';
+import { PORT } from '../../playwright.config';
+
+export type FixtureConfig = {
+  API_HOST: string;
+  DEFAULT_USER: string;
+  DEFAULT_PASSWORD: string;
+  PORT: number;
+};
+
+export type Fixture = {
+  config: FixtureConfig;
+  protectedPage: ProtectedPage;
+};
+
+const API_HOST = process.env['API_HOST'] || 'localhost';
+
+export const test = base.extend<Fixture>({
+  config: [{ PORT, API_HOST, DEFAULT_PASSWORD: '', DEFAULT_USER: '' }, { option: true }],
+  protectedPage: async ({ config, page }: { config: FixtureConfig, page: Page }, use: (page: ProtectedPage) => Promise<unknown>) => {
+    const protectedPage = new ProtectedPage(config, page);
+    await protectedPage.goto();
+    await use(protectedPage);
+  },
+});

package/client-tmp/react/test/e2e/flows/001-protected.e2e.ts

@@ -0,0 +1,6 @@
+import { expect } from '@genesislcap/foundation-testing/e2e';
+import { test } from '../fixture';
+
+test('expected page title', async ({ page }: { page: any }) => {
+  await expect(page).toHaveTitle(/{{capitalCase appName}}/);
+});

package/client-tmp/react/test/e2e/index.ts

@@ -0,0 +1,2 @@
+export * from './fixture';
+export * from './pages';

package/client-tmp/react/test/e2e/pages/index.ts

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

package/client-tmp/react/test/e2e/pages/protected.ts

@@ -0,0 +1,16 @@
+import type { Page } from '@genesislcap/foundation-testing/e2e';
+import type { FixtureConfig } from '../fixture';
+
+export class ProtectedPage {
+  config: FixtureConfig;
+  page: Page;
+
+  constructor(config: FixtureConfig, page: Page) {
+    this.config = config;
+    this.page = page;
+  }
+
+  async goto() {
+    await this.page.goto('/');
+  }
+}

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

@@ -7,8 +7,6 @@
     "lib": ["ES2020", "DOM", "DOM.Iterable"],
     "module": "ESNext",
     "skipLibCheck": true,
-
-    /* Bundler mode */
     "moduleResolution": "bundler",
     "allowImportingTsExtensions": true,
     "resolveJsonModule": true,
@@ -16,13 +14,12 @@
     "moduleDetection": "force",
     "noEmit": true,
     "jsx": "react-jsx",
-
-    /* Linting */
     "strict": true,
+    "esModuleInterop": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true,
     "types": ["node", "react"]
   },
-  "include": ["src"]
+  "include": ["src" , "src/**/*.d.ts"],
 }

package/client-tmp/react/tsconfig.json

@@ -7,5 +7,8 @@
     {
       "path": "./tsconfig.node.json"
     }
-  ]
+  ],
+  "compilerOptions": {
+    "esModuleInterop": true,
+  }
 }