@gen-epix/ui 1.14.4 → 1.15.0

package/src/classes/managers/InactivityManager/InactivityManager.ts

@@ -0,0 +1,119 @@
+import throttle from 'lodash/throttle';
+
+import { LogLevel } from '../../../api';
+import { SubscribableAbstract } from '../../abstracts/SubscribableAbstract';
+import { Subject } from '../../Subject';
+import { AuthenticationManager } from '../AuthenticationManager';
+import { ConfigManager } from '../ConfigManager';
+import { LogManager } from '../LogManager';
+import { TimeUtil } from '../../../utils/TimeUtil';
+import { WindowManager } from '../WindowManager';
+
+export type InactivityState = {
+  isIdle: boolean;
+  idleDiff: number;
+  notificationDiff: number;
+  readableIdleDiff: string;
+  readableNotificationDiff: string;
+};
+
+export class InactivityManager extends SubscribableAbstract<InactivityState> {
+  private idleSince: number = Date.now();
+  private idleDiff: number = 0;
+  private notificationDiff: number = 0;
+  private isIdle: boolean = false;
+  private isPaused: boolean = false;
+  private readonly onActivityDebounced: () => void;
+
+  private constructor() {
+    super(new Subject<InactivityState>({
+      isIdle: false,
+      idleDiff: 0,
+      notificationDiff: 0,
+      readableIdleDiff: '',
+      readableNotificationDiff: '',
+    }));
+
+    const ALLOWED_IDLE_TIME_MS = ConfigManager.instance.config.userInactivityConfirmation.ALLOWED_IDLE_TIME_MS;
+    const NOTIFICATION_TIME_MS = ConfigManager.instance.config.userInactivityConfirmation.NOTIFICATION_TIME_MS;
+
+    this.onActivityDebounced = throttle(this.onActivity.bind(this), 1000, {
+      leading: true,
+      trailing: true,
+    });
+
+    ['mousemove', 'keydown', 'scroll'].forEach((event) => window.addEventListener(event, this.onActivityDebounced));
+
+    setInterval(() => {
+      if (this.idleSince > 0 && (Date.now() - ALLOWED_IDLE_TIME_MS) > this.idleSince && !this.isPaused) {
+        this.idleDiff = Date.now() - this.idleSince;
+        this.isIdle = true;
+
+        const notificationEndTime = this.idleSince + ALLOWED_IDLE_TIME_MS + NOTIFICATION_TIME_MS;
+        this.notificationDiff = notificationEndTime - Date.now();
+
+        if (this.notificationDiff < 0) {
+          this.logout();
+        }
+
+        if (this.isIdle) {
+          this.doNext();
+        }
+      }
+    }, 500);
+  }
+
+  private onActivity(): void {
+    if (this.isIdle) {
+      return;
+    }
+    this.idleSince = Date.now();
+  }
+
+  public static get instance(): InactivityManager {
+    // Instances are stored on the window to prevent multiple instances of the same manager. HMR may load multiple instances of the same manager, but we only want one instance to be active at a time.
+
+    WindowManager.instance.window.managers.inactivity = WindowManager.instance.window.managers.inactivity || new InactivityManager();
+    return WindowManager.instance.window.managers.inactivity;
+  }
+
+  public reset(): void {
+    this.idleSince = Date.now();
+    this.isIdle = false;
+    this.idleDiff = 0;
+    this.notificationDiff = 0;
+    this.doNext();
+  }
+
+  public pause(): void {
+    this.isPaused = true;
+    this.reset();
+  }
+
+  public resume(): void {
+    this.isPaused = false;
+    this.reset();
+  }
+
+  private doNext(): void {
+    this.next({
+      isIdle: this.isIdle,
+      idleDiff: this.idleDiff,
+      notificationDiff: this.notificationDiff,
+      readableIdleDiff: TimeUtil.getReadableTimeRemaining(this.idleDiff),
+      readableNotificationDiff: TimeUtil.getReadableTimeRemaining(this.notificationDiff),
+    });
+  }
+
+  public logout(): void {
+    LogManager.instance.log([{
+      topic: 'USER_LOGOUT_BY_INACTIVITY',
+      level: LogLevel.TRACE,
+      detail: AuthenticationManager.instance.authContextProps.user,
+    }]);
+    LogManager.instance.flushLog();
+    // eslint-disable-next-line @typescript-eslint/no-floating-promises
+    AuthenticationManager.instance.authContextProps.signoutRedirect();
+  }
+
+}

package/src/classes/managers/InactivityManager/index.ts

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

package/src/classes/managers/KeyboardShortcutManager/KeyboardShortcutManager.ts

@@ -0,0 +1,78 @@
+import { WindowManager } from '../WindowManager';
+
+const FORM_ELEMENT_TAG_NAMES = [
+  'form',
+  'input',
+  'label',
+  'select',
+  'textarea',
+  'button',
+  'fieldset',
+  'legend',
+  'datalist',
+  'output',
+  'option',
+  'optgroup',
+];
+
+type KeyboardShortcutConfig = {
+  key: string;
+  modifier?: string;
+  callback: () => void;
+};
+
+export class KeyboardShortcutManager {
+  private readonly configs: KeyboardShortcutConfig[] = [];
+
+  public static get instance(): KeyboardShortcutManager {
+    // Instances are stored on the window to prevent multiple instances of the same manager. HMR may load multiple instances of the same manager, but we only want one instance to be active at a time.
+
+    WindowManager.instance.window.managers.keyboardShortcut = WindowManager.instance.window.managers.keyboardShortcut || new KeyboardShortcutManager();
+    return WindowManager.instance.window.managers.keyboardShortcut;
+  }
+
+  private constructor() {
+    window.addEventListener('keydown', this.handleKeyDown.bind(this));
+  }
+
+  private handleKeyDown(event: KeyboardEvent): void {
+    for (const config of this.configs) {
+      const { key, modifier, callback } = config;
+      if (event.key !== key) {
+        continue;
+      }
+      if (modifier && !event.getModifierState(modifier)) {
+        return;
+      }
+      if (!modifier && (event.getModifierState('Control') || event.getModifierState('Alt') || event.getModifierState('Meta'))) {
+        return;
+      }
+
+      if (KeyboardShortcutManager.shouldIgnoreShortcut()) {
+        return;
+      }
+      callback();
+      return; // only one callback per shortcut
+    }
+  }
+
+  private static shouldIgnoreShortcut(): boolean {
+    let activeElement = document.activeElement as HTMLElement;
+    while (activeElement) {
+      if (FORM_ELEMENT_TAG_NAMES.includes(activeElement.tagName.toLowerCase())) {
+        return true; // ignore all shortcuts when typing in form elements
+      }
+      activeElement = activeElement.parentElement;
+    }
+    return false;
+  }
+
+  public registerShortcut({ key, modifier, callback }: KeyboardShortcutConfig): () => void {
+    const config: KeyboardShortcutConfig = { key, modifier, callback };
+    this.configs.push(config);
+
+    return () => {
+      this.configs.splice(this.configs.indexOf(config), 1);
+    };
+  }
+}

package/src/classes/managers/KeyboardShortcutManager/index.ts

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

package/src/classes/managers/LogManager/LogManager.ts

@@ -0,0 +1,151 @@
+import {
+  isAxiosError,
+  type AxiosResponse,
+  type InternalAxiosRequestConfig,
+} from 'axios';
+
+import { AuthenticationManager } from '../AuthenticationManager';
+import { ConfigManager } from '../ConfigManager';
+import { WindowManager } from '../WindowManager';
+import {
+  type LogItem,
+  LogLevel,
+} from '../../../api';
+import { SystemApi } from '../../../api';
+import { StringUtil } from '../../../utils/StringUtil';
+import { AxiosUtil } from '../../../utils/AxiosUtil';
+
+type LogManagerItem = {
+  detail?: unknown;
+  topic: string;
+  duration?: number;
+  level: LogLevel;
+};
+
+export class LogManager {
+  protected readonly requestMap: Map<string, number>;
+  private logItems: LogItem[] = [];
+
+  public static get instance(): LogManager {
+    // Instances are stored on the window to prevent multiple instances of the same manager. HMR may load multiple instances of the same manager, but we only want one instance to be active at a time.
+
+    WindowManager.instance.window.managers.log = WindowManager.instance.window.managers.log || new LogManager();
+    return WindowManager.instance.window.managers.log;
+  }
+
+  private constructor() {
+    this.requestMap = new Map<string, number>();
+    setInterval(() => {
+      this.sendLog();
+    }, ConfigManager.instance.config.log.LOG_INTERVAL_MS);
+  }
+
+  public log(items: LogManagerItem[]): void {
+    const timestamp = new Date().toISOString();
+    const software_version = ConfigManager.instance.config.getSoftwareVersion();
+    this.logItems.push(...items.map<LogItem>(item => {
+      return {
+        timestamp,
+        software_version,
+        level: item.level,
+        detail: item.detail ? JSON.stringify(item.detail) : null,
+        topic: item.topic ?? null,
+        command_id: StringUtil.createUuid(),
+        duration: item.duration ?? null,
+      };
+    }));
+  }
+
+  public flushLog(): void {
+    this.sendLog();
+  }
+
+  private sendLog(): void {
+    if (!this.logItems.length || !AuthenticationManager.instance?.authContextProps?.isAuthenticated) {
+      return;
+    }
+    if (document.location.href.includes('accept-invitation')) {
+      return;
+    }
+    SystemApi.instance.log({
+      log_items: this.logItems,
+    }, {
+      headers: {
+        'X-IGNORE-LOG': '1',
+      },
+    }).catch(() => 0);
+    this.logItems = [];
+  }
+
+  public onRequest(request: InternalAxiosRequestConfig): InternalAxiosRequestConfig {
+    if (request.headers.has('X-IGNORE-LOG')) {
+      return request;
+    }
+    const requestId = StringUtil.createUuid();
+    request.headers.set('X-REQUEST-ID', requestId);
+    this.requestMap.set(requestId, new Date().getTime());
+
+    this.log([{
+      topic: 'REQUEST',
+      detail: {
+        url: request.url,
+        requestParams: request.params as unknown,
+        requestData: request.data as unknown,
+      },
+      level: LogLevel.TRACE,
+    }]);
+
+    return request;
+  }
+
+  public onResponseFulfilled(response: AxiosResponse): AxiosResponse {
+    if (response.config.headers.has('X-IGNORE-LOG')) {
+      return response;
+    }
+
+    const requestId = response?.config?.headers.get('X-REQUEST-ID') as string;
+    const duration = new Date().getTime() - this.requestMap.get(requestId);
+
+    this.log([{
+      topic: 'RESPONSE',
+      detail: {
+        url: response.config.url,
+        requestParams: response.config.params as unknown,
+        requestData: response.config.data as unknown,
+      },
+      duration,
+      level: response.status >= 200 && response.status < 300 ? LogLevel.TRACE : LogLevel.ERROR,
+    }]);
+
+    return response;
+  }
+
+  public onResponseRejected(error: unknown): void {
+    if (isAxiosError(error)) {
+      if (AxiosUtil.isAxiosCanceledError(error)) {
+        return;
+      }
+      const requestId = error?.config?.headers.get('X-REQUEST-ID') as string;
+      const duration = new Date().getTime() - this.requestMap.get(requestId);
+      this.log([{
+        topic: 'RESPONSE_ERROR',
+        detail: {
+          url: error.config.url,
+          status: error.response.status,
+          responseData: error.response.data as unknown,
+          requestParams: error.config.params as unknown,
+        },
+        duration,
+        level: LogLevel.ERROR,
+      }]);
+    } else {
+      this.log([{
+        topic: 'RESPONSE_ERROR',
+        detail: {
+          error,
+        },
+        level: LogLevel.ERROR,
+      }]);
+    }
+  }
+}

package/src/classes/managers/LogManager/index.ts

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

package/src/classes/managers/NavigationHistoryManager/NavigationHistoryManager.ts

@@ -0,0 +1,16 @@
+import { WindowManager } from '../WindowManager';
+
+export class NavigationHistoryManager {
+  public readonly navigationHistory: string[] = [];
+
+  private constructor() {
+    //
+  }
+
+  public static get instance(): NavigationHistoryManager {
+    // Instances are stored on the window to prevent multiple instances of the same manager. HMR may load multiple instances of the same manager, but we only want one instance to be active at a time.
+
+    WindowManager.instance.window.managers.navigationHistory = WindowManager.instance.window.managers.navigationHistory || new NavigationHistoryManager();
+    return WindowManager.instance.window.managers.navigationHistory;
+  }
+}

package/src/classes/managers/NavigationHistoryManager/index.ts

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

package/src/classes/managers/NotificationManager/NotificationManager.ts

@@ -0,0 +1,104 @@
+import { StringUtil } from '../../../utils/StringUtil';
+import { SubscribableAbstract } from '../../abstracts/SubscribableAbstract';
+import { Subject } from '../../Subject';
+import { ConfigManager } from '../ConfigManager';
+import { WindowManager } from '../WindowManager';
+import type { Notification } from '../../../models/notification';
+
+export class NotificationManager extends SubscribableAbstract<Notification[]> {
+  private readonly notificationTimeouts: Record<string, ReturnType<typeof setTimeout>>;
+
+  public static get instance(): NotificationManager {
+    // Instances are stored on the window to prevent multiple instances of the same manager. HMR may load multiple instances of the same manager, but we only want one instance to be active at a time.
+
+    WindowManager.instance.window.managers.notification = WindowManager.instance.window.managers.notification || new NotificationManager();
+    return WindowManager.instance.window.managers.notification;
+  }
+
+  private constructor() {
+    super(new Subject<Notification[]>([]));
+    this.notificationTimeouts = {};
+  }
+
+  public hideAllNotifications(): void {
+    this.subject.next(this.subject.data.map(x => ({
+      ...x,
+      visible: false,
+    })));
+  }
+
+  public clearNotifications(): void {
+    this.subject.next([]);
+    Object.keys(this.notificationTimeouts).forEach(key => {
+      clearTimeout(this.notificationTimeouts[key]);
+      delete this.notificationTimeouts[key];
+    });
+  }
+
+  public clearNotification(key: string): void {
+    this.subject.next(this.subject.data.filter(x => x.key !== key));
+    if (this.notificationTimeouts[key]) {
+      clearTimeout(this.notificationTimeouts[key]);
+      delete this.notificationTimeouts[key];
+    }
+  }
+
+  public hideNotification(key: string): void {
+    this.subject.next(this.subject.data.map(x => {
+      if (x.key === key) {
+        return {
+          ...x,
+          visible: false,
+        };
+      }
+      return x;
+    }));
+    clearTimeout(this.notificationTimeouts[key]);
+    delete this.notificationTimeouts[key];
+  }
+
+  public fulfillNotification(key: string, message: Notification['message'], severity: Notification['severity']): void {
+    this.subject.next(this.subject.data.map(x => {
+      if (x.key === key) {
+        return {
+          ...x,
+          message,
+          severity,
+          isLoading: false,
+        };
+      }
+      return x;
+    }));
+  }
+
+  public showNotification(notification: Omit<Notification, 'key' | 'visible' | 'timestamp'>): string {
+    const key = StringUtil.createUuid();
+    const autoHideAfterMs = notification.autoHideAfterMs ?? ConfigManager.instance.config.notifications.autoHideAfterMs;
+
+    this.subject.next([
+      {
+        ...notification,
+        key,
+        autoHideAfterMs,
+        visible: true,
+        timestamp: new Date().getTime(),
+      },
+      ...this.subject.data,
+    ]);
+
+    if (isFinite(autoHideAfterMs)) {
+      this.notificationTimeouts[key] = setTimeout(() => {
+        this.subject.next(this.subject.data.map(x => {
+          if (x.key === key) {
+            return {
+              ...x,
+              visible: false,
+            };
+          }
+          return x;
+        }));
+      }, autoHideAfterMs);
+    }
+    return key;
+  }
+}

package/src/classes/managers/NotificationManager/index.ts

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

package/src/classes/managers/PageEventBusManager/PageEventBusManager.ts

@@ -0,0 +1,116 @@
+import { WindowManager } from '../WindowManager';
+import { ConfigManager } from '../ConfigManager';
+import type { User } from '../../../api';
+import { EventBusAbstract } from '../../abstracts/EventBusAbstract';
+
+type Page = {
+  pageName: string;
+  location: Location;
+};
+
+type EpiEvent = {
+  error: Error;
+  changeUser: User;
+  changePage: Page;
+  click: {
+    label: string;
+    context?: string;
+    page?: Page;
+    type: 'button' | 'link' | 'table-row' | 'table-row-index';
+  };
+};
+
+export class PageEventBusManager extends EventBusAbstract<EpiEvent> {
+  private lastPageEventPayload: string = null;
+
+  private constructor() {
+    super();
+    this.setupClickEventListener();
+  }
+
+  public static get instance(): PageEventBusManager {
+    // Instances are stored on the window to prevent multiple instances of the same manager. HMR may load multiple instances of the same manager, but we only want one instance to be active at a time.
+
+    WindowManager.instance.window.managers.pageEventBus = WindowManager.instance.window.managers.pageEventBus || new PageEventBusManager();
+    return WindowManager.instance.window.managers.pageEventBus;
+  }
+
+  public emit<TEventName extends keyof EpiEvent>(eventName: TEventName, payload?: EpiEvent[TEventName]): void {
+    if (eventName === 'changePage') {
+      if (this.lastPageEventPayload === (payload as EpiEvent['changePage']).pageName) {
+        return;
+      }
+      this.lastPageEventPayload = (payload as EpiEvent['changePage']).pageName;
+    }
+
+    if (eventName === 'click' && !(payload as EpiEvent['click']).page) {
+      (payload as EpiEvent['click']).page = this.getPage();
+    }
+
+    super.emit(eventName, payload);
+  }
+
+
+  private setupClickEventListener(): void {
+    if (!ConfigManager.instance.config.enablePageEvents) {
+      return;
+    }
+    WindowManager.instance.window.addEventListener('click', (event: Event): void => {
+
+      const closestButton = (event.target as HTMLElement).closest('button');
+      const closestLink = (event.target as HTMLElement).closest('a');
+      const closestElement = closestButton || closestLink;
+
+      if (closestElement) {
+        const context = closestElement?.closest('[data-testid]')?.getAttribute('data-testid') ?? '';
+
+        const buttonTitle = closestElement.getAttribute('aria-label') ?? closestElement.getAttribute('title');
+        if (buttonTitle) {
+          this.emit('click', {
+            label: buttonTitle,
+            context,
+            type: closestButton ? 'button' : 'link',
+          });
+        } else {
+          const childTextNode = this.traverseDom(closestElement, (el) => el.nodeType === Node.TEXT_NODE);
+          if (childTextNode?.nodeValue) {
+            this.emit('click', {
+              label: childTextNode?.nodeValue,
+              context,
+              type: closestButton ? 'button' : 'link',
+            });
+          } else {
+            const nodeWithText = this.traverseDom(closestElement, (el) => !!el.innerText);
+            if (nodeWithText?.innerText) {
+              this.emit('click', {
+                label: nodeWithText?.innerText.split('\n')[0],
+                context,
+                type: closestButton ? 'button' : 'link',
+              });
+            }
+          }
+        }
+      }
+    });
+  }
+
+  private traverseDom(element: HTMLElement, predicate: (element: HTMLElement) => boolean): HTMLElement {
+    if (predicate(element)) {
+      return element;
+    }
+    for (const child of Array.from(element.childNodes)) {
+      const found = this.traverseDom(child as HTMLElement, predicate);
+      if (found) {
+        return child as HTMLElement;
+      }
+    }
+    return null;
+  }
+
+  public getPage(): Page {
+    return {
+      pageName: document.querySelector('[data-page-container]')?.getAttribute('data-testid'),
+      location: WindowManager.instance.window.location,
+    };
+  }
+}

package/src/classes/managers/PageEventBusManager/index.ts

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

package/src/classes/managers/QueryClientManager/QueryClientManager.ts

@@ -0,0 +1,51 @@
+import {
+  MutationCache,
+  QueryCache,
+  QueryClient,
+} from '@tanstack/react-query';
+
+import { AxiosUtil } from '../../../utils/AxiosUtil';
+import { WindowManager } from '../WindowManager';
+
+
+export class QueryClientManager {
+  public readonly queryCache: QueryCache;
+  public readonly queryClient: QueryClient;
+  public readonly mutationCache: MutationCache;
+
+  private constructor() {
+    const queryCache = new QueryCache({});
+    const mutationCache = new MutationCache({});
+    const queryClient = new QueryClient({
+      defaultOptions: {
+        queries: {
+          staleTime: Infinity,
+          gcTime: Infinity,
+          // !FIXME: move to config
+          retry: (import.meta.env.DEV)
+            ? () => false
+            : (failureCount: number, error: unknown) => {
+              if (AxiosUtil.isAxiosInternalServerError(error) || AxiosUtil.isAxiosTimeoutError(error)) {
+                return failureCount < 3;
+              }
+              return false;
+            },
+          retryDelay: attempt => Math.min(attempt > 1 ? 2 ** attempt * 3000 : 3000, 30 * 1000),
+        },
+      },
+      queryCache,
+      mutationCache,
+    });
+
+    this.queryCache = queryCache;
+    this.mutationCache = mutationCache;
+    this.queryClient = queryClient;
+  }
+
+  public static get instance(): QueryClientManager {
+    // Instances are stored on the window to prevent multiple instances of the same manager. HMR may load multiple instances of the same manager, but we only want one instance to be active at a time.
+
+    WindowManager.instance.window.managers.queryClient = WindowManager.instance.window.managers.queryClient || new QueryClientManager();
+    return WindowManager.instance.window.managers.queryClient;
+  }
+}

package/src/classes/managers/QueryClientManager/index.ts

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

package/src/classes/managers/RouterManager/RouterManager.ts

@@ -0,0 +1,25 @@
+import { createBrowserRouter } from 'react-router-dom';
+import { t } from 'i18next';
+
+import { createRoutes } from '../../../routes';
+import { WindowManager } from '../WindowManager';
+import type { MyNonIndexRouteObject } from '../../../models/reactRouter';
+
+
+export class RouterManager {
+  public readonly router: ReturnType<typeof createBrowserRouter>;
+  public readonly routes: MyNonIndexRouteObject[];
+
+  private constructor() {
+    this.routes = createRoutes(t);
+    this.router = createBrowserRouter(this.routes);
+  }
+
+  public static get instance(): RouterManager {
+    // Instances are stored on the window to prevent multiple instances of the same manager. HMR may load multiple instances of the same manager, but we only want one instance to be active at a time.
+
+    WindowManager.instance.window.managers.route = WindowManager.instance.window.managers.route || new RouterManager();
+    return WindowManager.instance.window.managers.route;
+  }
+
+}

package/src/classes/managers/RouterManager/index.ts

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