@cccsaurora/howler-ui 2.14.0-dev.263 → 2.14.0-dev.265

package/plugins/HowlerPlugin.ts

@@ -0,0 +1,375 @@
+import type { HowlerHelper } from '@cccsaurora/howler-ui/components/elements/display/handlebars/helpers';
+import type { ActionButton } from '@cccsaurora/howler-ui/components/elements/hit/actions/SharedComponents';
+import type { StatusProps } from '@cccsaurora/howler-ui/components/elements/hit/HitBanner';
+import type { PivotLinkProps } from '@cccsaurora/howler-ui/components/elements/hit/related/PivotLink';
+import type { PluginChipProps } from '@cccsaurora/howler-ui/components/elements/PluginChip';
+import type { PluginTypographyProps } from '@cccsaurora/howler-ui/components/elements/PluginTypography';
+import type { CustomActionProps } from '@cccsaurora/howler-ui/components/routes/action/edit/ActionEditor';
+import type { LeadFormProps } from '@cccsaurora/howler-ui/components/routes/dossiers/LeadEditor';
+import type { PivotFormProps } from '@cccsaurora/howler-ui/components/routes/dossiers/PivotForm';
+import type { PluginDocumentation } from '@cccsaurora/howler-ui/components/routes/help/ActionDocumentation';
+import i18nInstance from '@cccsaurora/howler-ui/i18n';
+import type { i18n as I18N } from 'i18next';
+import { difference } from 'lodash-es';
+import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
+import type React from 'react';
+import type { PropsWithChildren } from 'react';
+import type { IPlugin, PluginStore } from 'react-pluggable';
+import type { MainMenuInsertOperation } from './store';
+import howlerPluginStore from './store';
+
+const INTERNAL_FUNCTIONS = [
+  'constructor',
+  'getPluginName',
+  'getDependencies',
+  'init',
+  'activate',
+  'deactivate',
+  'addLead',
+  'addPivot',
+  'addUserMenuItem',
+  'addAdminMenuItem',
+  'addRoute',
+  'addSitemap',
+  'addRouteAndSitemap',
+  'addMainMenuItem',
+  'addMainMenuDivider',
+  'addOperation'
+];
+
+abstract class HowlerPlugin implements IPlugin {
+  abstract name: string;
+  abstract version: string;
+  abstract author: string;
+  abstract description: string;
+
+  pluginStore: PluginStore;
+
+  private functionsToRemove: string[] = [];
+
+  getPluginName(): string {
+    return `${this.name}@${this.version}`;
+  }
+
+  getDependencies(): string[] {
+    return [];
+  }
+
+  init(pluginStore: PluginStore): void {
+    this.pluginStore = pluginStore;
+  }
+
+  activate() {
+    difference(Object.getOwnPropertyNames(HowlerPlugin.prototype), INTERNAL_FUNCTIONS).forEach(_function => {
+      this.pluginStore.addFunction(`${this.name}.${_function}`, this[_function]);
+      this.functionsToRemove.push(`${this.name}.${_function}`);
+    });
+
+    this.localization(i18nInstance);
+  }
+
+  deactivate() {
+    difference(Object.getOwnPropertyNames(HowlerPlugin.prototype), INTERNAL_FUNCTIONS).forEach(_function =>
+      this.pluginStore.removeFunction(`${this.name}.${_function}`)
+    );
+
+    this.functionsToRemove.forEach(name => this.pluginStore.removeFunction(name));
+  }
+
+  addLead(
+    format: string,
+    form: (props: LeadFormProps) => React.ReactNode,
+    renderer: (content: string, metadata: any, hit?: Hit) => React.ReactNode
+  ) {
+    if (!howlerPluginStore.addLead(format)) {
+      // eslint-disable-next-line no-console
+      console.error(`Lead format ${format} already configured, not enabling for plugin ${this.getPluginName()}`);
+      return;
+    }
+
+    this.pluginStore.addFunction(`lead.${format}`, renderer);
+    this.functionsToRemove.push(`lead.${format}`);
+
+    this.pluginStore.addFunction(`lead.${format}.form`, form);
+    this.functionsToRemove.push(`lead.${format}.form`);
+
+    // eslint-disable-next-line no-console
+    console.debug(`Lead format ${format} enabled for plugin ${this.getPluginName()}`);
+  }
+
+  addPivot(
+    format: string,
+    form: (props: PivotFormProps) => React.ReactNode,
+    renderer: (props: PivotLinkProps) => React.ReactNode
+  ) {
+    if (!howlerPluginStore.addPivot(format)) {
+      // eslint-disable-next-line no-console
+      console.error(`Pivot format ${format} already configured, not enabling for plugin ${this.getPluginName()}`);
+      return;
+    }
+
+    this.pluginStore.addFunction(`pivot.${format}`, renderer);
+    this.functionsToRemove.push(`pivot.${format}`);
+
+    this.pluginStore.addFunction(`pivot.${format}.form`, form);
+    this.functionsToRemove.push(`pivot.${format}.form`);
+
+    // eslint-disable-next-line no-console
+    console.debug(`Pivot format ${format} enabled for plugin ${this.getPluginName()}`);
+  }
+
+  /**
+   * Adds a single menu item to the User Menu group under the Avatar Menu,
+   * items are added before the 'Settings' and 'Logout' menu items.
+   *
+   * @param i18nKey Translation Key or Title
+   * @param route Route to navigate to, '/settings' for example
+   * @param icon JSX Icon element, <Settings/> for example
+   */
+  addUserMenuItem(i18nKey: string, route: string, icon: JSX.Element) {
+    howlerPluginStore.addUserMenuItem({
+      i18nKey: i18nKey,
+      route: route,
+      icon: icon
+    });
+  }
+
+  /**
+   * Adds a single menu item to the Admin Menu group under the Avatar Menu,
+   * items are added to the end of the existing Admin menu items.
+   *
+   * @param i18nKey Translation Key or Title
+   * @param route Route to navigate to, '/settings' for example
+   * @param icon JSX Icon element, <Settings/> for example
+   */
+  addAdminMenuItem(i18nKey: string, route: string, icon: JSX.Element) {
+    howlerPluginStore.addAdminMenuItem({
+      i18nKey: i18nKey,
+      route: route,
+      icon: icon
+    });
+  }
+
+  /**
+   * Adds a single route to the system to load, items are added to the end of
+   * base routes defined.
+   *
+   * @param path Route path, should not start with /
+   * @param element Element the route directs to
+   * @param children Child routes if required
+   */
+  addRoute(path: string, element: JSX.Element, children?: []) {
+    howlerPluginStore.addRoute({
+      path: path,
+      element: element,
+      children: children
+    });
+  }
+
+  /**
+   * Adds a sitemap entry to the sitemap table, this is used to populate
+   * information on the Breadcrumb component
+   *
+   * @param path The react router path to this route
+   * @param title The title/label to display in breadcrumbs for this route
+   * @param icon The icon component to show beside the title/label
+   * @param isRoot When true, indicates that the breadcrumbs will reset to this one path each time it is encountered
+   * @param isLeaf When true, indicates that this path does not aggregate in breadcrumbs, i.e. will be replaced by next path
+   * @param excluded When true, indicates to breadcrumbs component to not render this route
+   * @param breadcrumbs Static list of breadcrumb paths to be rendered for the given route
+   * @param textWidth The max width of the text when rendering the breadcrumb
+   */
+  addSitemap(
+    path: string,
+    title: string,
+    icon?: JSX.Element,
+    isRoot?: boolean,
+    isLeaf?: boolean,
+    excluded?: boolean,
+    breadcrumbs?: string[],
+    textWidth?: number
+  ) {
+    if (isRoot === isLeaf) {
+      throw new Error(`Sitemap '${path}' must define either isRoot or isLeaf as true`);
+    }
+
+    if (isRoot) {
+      if (breadcrumbs != null) {
+        breadcrumbs = null;
+        console.warn(`Sitemap '${path}' with isRoot should not contain breadcrumbs and have been removed`);
+      }
+    }
+
+    howlerPluginStore.addSitemap({
+      path: path,
+      title: title,
+      icon: icon,
+      isRoot: isRoot,
+      isLeaf: isLeaf,
+      excluded: excluded,
+      breadcrumbs: breadcrumbs,
+      textWidth: textWidth
+    });
+  }
+
+  /**
+   * Adds a route as well as a simple sitemap entry with values derived from the path
+   *
+   * @param path Route path, should not start with /
+   * @param element Element the route directs to
+   * @param children Child routes if required
+   * @param title The title/label to display in breadcrumbs for this route
+   * @param icon The icon component to show beside the title/label
+   */
+  addRouteAndSitemap(path: string, element: JSX.Element, title: string, icon?: JSX.Element, children?: []) {
+    this.addRoute(path, element, children);
+
+    const routeParts = path.split('/');
+
+    let isRoot = true;
+    let isLeaf = false;
+    let breadcrumbs = null;
+
+    if (routeParts.length > 1) {
+      // Set as leaf and not root
+      isRoot = false;
+      isLeaf = true;
+      // Attempt to auto build breadcrumbs
+      breadcrumbs = [];
+      for (let index = 0; index < routeParts.length - 1; index++) {
+        breadcrumbs.push(`/${routeParts[index]}`);
+      }
+    }
+
+    this.addSitemap(`/${path}`, title, icon, isRoot, isLeaf, false, breadcrumbs);
+  }
+
+  /**
+   * Adds a new menu item to the Main Menu
+   *
+   * @param operation Insert operation to perform
+   * @param targetId Reference Menu Id
+   * @param id Identifier for new menu entry
+   * @param i18nKey Translation key for new menu entry
+   * @param route Route for new menu entry
+   * @param icon Icon for new menu entry
+   */
+  addMainMenuItem(
+    operation: MainMenuInsertOperation,
+    targetId: string,
+    id: string,
+    i18nKey: string,
+    route: string,
+    icon: JSX.Element
+  ) {
+    if (targetId === '') {
+      targetId = 'root';
+    }
+
+    howlerPluginStore.addMainMenuItem({
+      operation: operation,
+      targetId: targetId,
+      item: {
+        type: 'item',
+        element: {
+          id: id,
+          i18nKey: i18nKey,
+          route: route,
+          icon: icon
+        }
+      }
+    });
+  }
+
+  /**
+   * Adds a divider to the main menu
+   *
+   * @param operation Insert operation to perform
+   * @param targetId Reference menu id
+   */
+  addMainMenuDivider(operation: MainMenuInsertOperation, targetId: string) {
+    if (targetId === '') {
+      targetId = 'root';
+    }
+
+    howlerPluginStore.addMainMenuItem({
+      operation: operation,
+      targetId: targetId,
+      item: {
+        type: 'divider',
+        element: null
+      }
+    });
+  }
+
+  addOperation(
+    format: string,
+    form: (props: CustomActionProps) => React.ReactNode,
+    documentation: PluginDocumentation
+  ) {
+    if (!howlerPluginStore.addOperation(format)) {
+      // eslint-disable-next-line no-console
+      console.error(`Operation ${format} already configured, not enabling for plugin ${this.getPluginName()}`);
+      return;
+    }
+
+    this.pluginStore.addFunction(`operation.${format}`, form);
+    this.functionsToRemove.push(`operation.${format}`);
+
+    this.pluginStore.addFunction(`operation.${format}.documentation`, () => documentation);
+    this.functionsToRemove.push(`operation.${format}.documentation`);
+
+    // eslint-disable-next-line no-console
+    console.debug(`Operation ${format} enabled for plugin ${this.getPluginName()}`);
+  }
+
+  on(_event: string, _hit: Hit) {
+    return null;
+  }
+
+  provider(): React.FC<PropsWithChildren<{}>> | null {
+    return null;
+  }
+
+  setup(): void {}
+
+  localization(_i18n: I18N): void {}
+
+  helpers(): HowlerHelper[] {
+    return [];
+  }
+
+  typography(_props: PluginTypographyProps) {
+    return null;
+  }
+
+  chip(_props: PluginChipProps) {
+    return null;
+  }
+
+  actions(_hits: Hit[]): ActionButton[] {
+    return [];
+  }
+
+  status(_props: StatusProps): React.ReactNode {
+    return null;
+  }
+
+  support(): React.ReactNode {
+    return null;
+  }
+
+  help(): React.ReactNode {
+    return null;
+  }
+
+  settings(_section: 'admin' | 'local' | 'profile' | 'security'): React.ReactNode {
+    return null;
+  }
+
+  integrations(): [string, () => React.ReactNode][] {
+    return [];
+  }
+}
+
+export default HowlerPlugin;

package/plugins/store.ts

@@ -0,0 +1,152 @@
+/* eslint-disable no-console */
+import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
+import { createPluginStore, Event } from 'react-pluggable';
+import type HowlerPlugin from './HowlerPlugin';
+import type { AppLeftNavElement } from '../commons/components/app/AppConfigs';
+
+export class HitEvent extends Event {
+  public hit: Hit;
+
+  constructor(type: string, hit: Hit) {
+    super(type);
+
+    this.hit = hit;
+  }
+}
+
+export enum MainMenuInsertOperation {
+  Insert = 'INSERT',
+  InsertAfter = 'AFTER',
+  InsertBefore = 'BEFORE'
+}
+
+class HowlerPluginStore {
+  private _pluginStore = createPluginStore();
+
+  plugins: string[] = [];
+
+  private _leadFormats: string[] = [];
+  private _pivotFormats: string[] = [];
+  private _operations: string[] = [];
+  private _userMenuItems: { i18nKey: string; route: string; icon: JSX.Element }[] = [];
+  private _adminMenuItems: { i18nKey: string; route: string; icon: JSX.Element }[] = [];
+  private _mainMenuOperations: { operation: string; targetId: string; item: AppLeftNavElement }[] = [];
+  private _routes: { path: string; element: JSX.Element; children?: [] }[] = [];
+  private _sitemaps: {
+    path: string;
+    title: string;
+    icon?: JSX.Element;
+    isRoot?: boolean;
+    isLeaf?: boolean;
+    excluded?: boolean;
+    breadcrumbs?: string[];
+    textWidth?: number;
+  }[] = [];
+
+  install(plugin: HowlerPlugin) {
+    console.log(`Installing plugin ${plugin.getPluginName()} by ${plugin.author}`);
+
+    this.plugins.push(plugin.name);
+
+    this.pluginStore.install(plugin);
+  }
+
+  addLead(format: string): boolean {
+    if (this._leadFormats.includes(format)) {
+      return false;
+    }
+
+    this._leadFormats.push(format);
+
+    return true;
+  }
+
+  addPivot(format: string): boolean {
+    if (this._pivotFormats.includes(format)) {
+      return false;
+    }
+
+    this._pivotFormats.push(format);
+
+    return true;
+  }
+
+  addUserMenuItem(menuItem: { i18nKey: string; route: string; icon: JSX.Element }) {
+    this._userMenuItems.push(menuItem);
+  }
+
+  addAdminMenuItem(menuItem: { i18nKey: string; route: string; icon: JSX.Element }) {
+    this._adminMenuItems.push(menuItem);
+  }
+
+  addMainMenuItem(menuOperation: { operation: string; targetId: string; item: AppLeftNavElement }) {
+    this._mainMenuOperations.push(menuOperation);
+  }
+
+  addRoute(route: { path: string; element: JSX.Element; children?: [] }) {
+    this._routes.push(route);
+  }
+
+  addSitemap(sitemap: {
+    path: string;
+    title: string;
+    icon?: JSX.Element;
+    isRoot?: boolean;
+    isLeaf?: boolean;
+    excluded?: boolean;
+    breadcrumbs?: string[];
+    textWidth?: number;
+  }) {
+    this._sitemaps.push(sitemap);
+  }
+
+  addOperation(format: string): boolean {
+    if (this._operations.includes(format)) {
+      return false;
+    }
+
+    this._operations.push(format);
+
+    return true;
+  }
+
+  public get leadFormats() {
+    return this._leadFormats;
+  }
+
+  public get pivotFormats() {
+    return this._pivotFormats;
+  }
+
+  public get operations() {
+    return this._operations;
+  }
+
+  public get userMenuItems() {
+    return this._userMenuItems;
+  }
+
+  public get adminMenuItems() {
+    return this._adminMenuItems;
+  }
+
+  public get mainMenuOperations() {
+    return this._mainMenuOperations;
+  }
+
+  public get routes() {
+    return this._routes;
+  }
+
+  public get sitemaps() {
+    return this._sitemaps;
+  }
+
+  public get pluginStore() {
+    return this._pluginStore;
+  }
+}
+
+const howlerPluginStore = new HowlerPluginStore();
+
+export default howlerPluginStore;

package/rest/AxiosClient.ts

@@ -0,0 +1,81 @@
+import type { HowlerResponse } from '@cccsaurora/howler-ui/api';
+import type { AxiosInstance, AxiosRequestConfig, AxiosRequestHeaders } from 'axios';
+import axios, { AxiosError } from 'axios';
+import axiosRetry, { exponentialDelay, isNetworkError } from 'axios-retry';
+import type RestClient from '@cccsaurora/howler-ui/rest';
+import { getAxiosCache, setAxiosCache } from '@cccsaurora/howler-ui/utils/sessionStorage';
+
+class AxiosCache {
+  constructor(_axios: AxiosInstance) {
+    _axios.interceptors.response.use(async res => {
+      const cache = getAxiosCache();
+
+      if (res.status >= 200 && res.status < 300 && res.headers.etag) {
+        setAxiosCache(res.headers.etag, res.data);
+      }
+
+      if (res.status === 304) {
+        const etag = res.config.headers['If-Match'] as string;
+        if (etag) {
+          res.data = cache[etag];
+        }
+      }
+
+      return res;
+    });
+  }
+}
+
+export default class AxiosClient implements RestClient {
+  // @ts-ignore
+  private cache: AxiosCache;
+
+  private client: AxiosInstance;
+
+  constructor() {
+    this.client = axios.create({
+      validateStatus: status => (status >= 200 && status < 300) || status === 304
+    });
+
+    this.cache = new AxiosCache(this.client);
+
+    axiosRetry(this.client, {
+      retries: 3,
+      retryCondition: err => {
+        return (
+          // Don't retry 502s, as we assume the server handles retries in those cases
+          isNetworkError(err) || (err?.response?.status >= 500 && err?.response?.status !== 502)
+        );
+      },
+      retryDelay: exponentialDelay
+    });
+  }
+
+  public async fetch<R>(
+    url: string,
+    method: 'get' | 'post' | 'put' | 'delete' | 'patch' = 'get',
+    body?: any,
+    params?: URLSearchParams,
+    headers?: HeadersInit
+  ): Promise<[HowlerResponse<R>, number, { [index: string]: any }]> {
+    const config: AxiosRequestConfig = {
+      url,
+      params,
+      method,
+      withCredentials: true,
+      data: JSON.stringify(body),
+      headers: headers as AxiosRequestHeaders
+    };
+
+    try {
+      const response = await this.client(config);
+      return [response.data, response.status, response.headers];
+    } catch (e) {
+      if (e instanceof AxiosError && e.response?.data) {
+        return [e.response.data, e.response.status, e.response.headers];
+      }
+
+      throw e;
+    }
+  }
+}

package/rest/FetchClient.ts

@@ -0,0 +1,27 @@
+import type { HowlerResponse } from '@cccsaurora/howler-ui/api';
+import type RestClient from '@cccsaurora/howler-ui/rest';
+
+export default class FetchClient implements RestClient {
+  public async fetch<R>(
+    url: string,
+    method: 'get' | 'post' | 'put' | 'delete' = 'get',
+    body?: any,
+    params?: URLSearchParams,
+    headers?: HeadersInit
+  ): Promise<[HowlerResponse<R>, number, { [index: string]: any }]> {
+    const _url = `${url}${params ? `?${params.toString()}` : ''}`;
+    const response = await fetch(_url, {
+      method,
+      credentials: 'same-origin',
+      headers: headers,
+      body: body ? JSON.stringify(body) : null
+    });
+
+    if (response.status === 204) {
+      return null;
+    }
+
+    const json = (await response.json()) as HowlerResponse<R>;
+    return [json, response.status, response.headers];
+  }
+}

package/rest/index.ts

@@ -0,0 +1,12 @@
+import type { HowlerResponse } from '@cccsaurora/howler-ui/api';
+
+export default interface RestClient {
+  fetch<R>(
+    url: string,
+    method: 'get' | 'post' | 'put' | 'delete',
+    body?: any,
+    params?: URLSearchParams,
+    headers?: HeadersInit
+  ): Promise<[HowlerResponse<R>, number, { [index: string]: any }]>;
+  // eslint-disable-next-line semi
+}

package/setupTests.ts

@@ -0,0 +1,17 @@
+/// <reference types="vitest" />
+import * as matchers from '@testing-library/jest-dom/matchers';
+import '@testing-library/jest-dom/vitest';
+import { configure } from '@testing-library/react';
+import { server } from 'tests/server';
+
+// Extend vitest with the dom matchers from jest-dom.
+expect.extend(matchers);
+
+// tell React Testing Library to look for id as the testId.
+configure({ testIdAttribute: 'id' });
+
+beforeAll(() => server.listen());
+
+afterEach(() => server.resetHandlers());
+
+afterAll(() => server.close());

package/utils/Throttler.ts

@@ -0,0 +1,43 @@
+export default class Throttler {
+  private throttleId: number = null;
+
+  private delayId: number = null;
+
+  private msec: number = null;
+
+  constructor(msec: number) {
+    this.msec = msec;
+    this.debounce = this.debounce.bind(this);
+  }
+
+  public throttle(fn: () => void): void {
+    if (!this.throttleId) {
+      fn();
+      this.throttleId = setTimeout(() => {
+        this.throttleId = null;
+      }, this.msec) as unknown as number;
+    }
+  }
+
+  public debounce(fn: () => void): void {
+    if (this.delayId) {
+      clearTimeout(this.delayId);
+    }
+    this.delayId = setTimeout(fn, this.msec) as unknown as number;
+  }
+
+  public delayAsync(fn: (...args: any[]) => Promise<any>, ...args: any[]): Promise<any> {
+    if (this.delayId) {
+      clearTimeout(this.delayId);
+    }
+    return new Promise((resolve, reject) => {
+      this.delayId = setTimeout(async () => {
+        try {
+          resolve(await fn?.(...args));
+        } catch (error) {
+          reject(error);
+        }
+      }, this.msec) as unknown as number;
+    });
+  }
+}