@cccsaurora/howler-ui 2.14.0-dev.259 → 2.14.0-dev.264

package/utils/hitFunctions.ts

@@ -0,0 +1,10 @@
+import type { Hit } from 'models/entities/generated/Hit';
+
+export const getUserList = (hit: Hit): Set<string> => {
+  const ids = new Set<string>();
+  if (hit) {
+    hit.howler?.log?.forEach(l => ids.add(l.user));
+    hit.howler?.comment?.forEach(c => ids.add(c.user), ids);
+  }
+  return ids;
+};

package/utils/localStorage.ts

@@ -0,0 +1,54 @@
+import type { LoginResponse } from 'api/auth/login';
+import { MY_LOCAL_STORAGE_PREFIX, StorageKey } from './constants';
+
+const buildName = (name: string) => `${MY_LOCAL_STORAGE_PREFIX}.${name}`;
+
+/**
+ * **IMPORTANT**: This function should only be used OUTSIDE of the React tree.
+ * If you want to edit localStorage items inside a React component, use
+ * src/components/hooks/useMyLocalStorage.tsx.
+ */
+export const removeStored = (name: StorageKey) => {
+  localStorage.removeItem(buildName(name));
+};
+
+/**
+ * **IMPORTANT**: This function should only be used OUTSIDE of the React tree.
+ * If you want to edit localStorage items inside a React component, use
+ * src/components/hooks/useMyLocalStorage.tsx.
+ */
+export const setStored = (name: StorageKey, item: any) => {
+  localStorage.setItem(buildName(name), JSON.stringify(item));
+};
+
+/**
+ * **IMPORTANT**: This function should only be used OUTSIDE of the React tree.
+ * If you want to edit localStorage items inside a React component, use
+ * src/components/hooks/useMyLocalStorage.tsx.
+ */
+export const getStored = <T = string>(name?: StorageKey): T => {
+  try {
+    return JSON.parse(localStorage.getItem(buildName(name))) as T;
+  } catch (e) {
+    // Migrating from the old system, some values were not JSON encoded. Decoding them will cause an exception.
+    // Obviously, this is not optimal, but it's the only way to get Typescript to play nice.
+    // When this is called, T will be type string.
+    return localStorage.getItem(buildName(name)) as unknown as T;
+  }
+};
+
+export const saveLoginCredential = (loginRes: LoginResponse) => {
+  if (loginRes.app_token) {
+    setStored(StorageKey.APP_TOKEN, loginRes.app_token);
+    if (loginRes.refresh_token) {
+      setStored(StorageKey.REFRESH_TOKEN, loginRes.refresh_token);
+      setStored(StorageKey.PROVIDER, loginRes.provider);
+    }
+    return true;
+  }
+
+  removeStored(StorageKey.REFRESH_TOKEN);
+  removeStored(StorageKey.APP_TOKEN);
+  removeStored(StorageKey.PROVIDER);
+  return false;
+};

package/utils/menuUtils.ts

@@ -0,0 +1,274 @@
+import type { AppLeftNavElement, AppLeftNavGroup, AppLeftNavItem } from '../commons/components/app/AppConfigs';
+import { MainMenuInsertOperation } from '../plugins/store';
+import { isNil } from 'lodash-es';
+
+class AppMenuBuilder {
+  private items: AppLeftNavElement[];
+  private indexMap: Record<string | number, { index: number; parent?: number }>;
+
+  constructor(defaultMenu: AppLeftNavElement[]) {
+    this.items = defaultMenu;
+    this.updateMenuMap();
+  }
+
+  /**
+   * Applies a collection of Menu Operation objects created by the plugin system
+   *
+   * @param operations Operations created by the plugin system
+   */
+  applyOperations(operations: { operation: string; targetId: string; item: AppLeftNavElement }[]) {
+    for (const operation of operations) {
+      switch (operation.operation) {
+        case MainMenuInsertOperation.Insert:
+          // Inserts at end or adds to sub-elements
+          this.insert(operation.targetId, operation.item);
+          break;
+        case MainMenuInsertOperation.InsertBefore:
+          // Inserts before target element
+          this.insertBefore(operation.targetId, operation.item);
+          break;
+        case MainMenuInsertOperation.InsertAfter:
+          // Inserts after target element
+          this.insertAfter(operation.targetId, operation.item);
+          break;
+      }
+      this.updateMenuMap();
+    }
+  }
+
+  /**
+   * Get the completed menu structure
+   */
+  get menu() {
+    return this.items;
+  }
+
+  /**
+   * Insert provided menu item at the menu object identified by targetId.
+   *
+   * If the target menu is a group then item will be placed at end of sub items
+   *
+   * If the target menu is a standard item then group will be created and new item added, warning this removes
+   * the route from the new group parent item, be sure to add it back.
+   *
+   * If the target is 'root' then item will be added to end of root menu
+   *
+   * @param targetId Identifier of menu to insert to
+   * @param item Menu Item to insert
+   */
+  insert(targetId: string, item: AppLeftNavElement) {
+    const menuLocation = this.indexOfMenuId(targetId);
+    const target = this.menuFromIndex(menuLocation.index, menuLocation.subIndex);
+
+    if (!Array.isArray(target) && this.isGroupElement(target)) {
+      if (item.type === 'divider') {
+        console.warn(
+          `Skipping DIVIDER Operation: INSERT on Target: ${targetId}, Dividers cannot be inserted to sub-menus`
+        );
+        return;
+      }
+      const group = target.element;
+      const newItem: AppLeftNavItem = { ...(item.element as AppLeftNavItem), nested: true };
+      group.items = [...group.items, newItem];
+      return;
+    }
+
+    if (Array.isArray(target)) {
+      target.push(item);
+      return;
+    }
+
+    if (menuLocation.index !== -1 && isNil(menuLocation.subIndex)) {
+      if (item.type === 'divider') {
+        console.warn(
+          `Skipping DIVIDER Operation: INSERT on Target: ${targetId}, Dividers cannot be inserted to sub-menus`
+        );
+        return;
+      }
+
+      if (!this.isItemElement(target)) {
+        return;
+      }
+
+      const header = target.element;
+      const inserted: AppLeftNavItem = { ...(item.element as AppLeftNavItem), nested: true };
+
+      const newGroup: AppLeftNavElement = {
+        type: 'group',
+        element: {
+          id: header.id,
+          open: true,
+          i18nKey: header.i18nKey,
+          title: header.text,
+          userPropValidators: header.userPropValidators,
+          icon: header.icon as React.ReactElement<any>,
+          items: [inserted]
+        } as AppLeftNavGroup
+      };
+
+      this.items[menuLocation.index] = newGroup;
+      return;
+    }
+  }
+
+  /**
+   * Insert provided menu item before the menu object identified by targetId.
+   *
+   * @param targetId Identifier of menu to insert to
+   * @param item Menu Item to insert
+   */
+  insertBefore(targetId: string, item: AppLeftNavElement) {
+    const menuLocation = this.indexOfMenuId(targetId);
+
+    if (!isNil(menuLocation.subIndex)) {
+      if (item.type === 'divider') {
+        console.warn(
+          `Skipping DIVIDER Operation: INSERT on Target: ${targetId}, Dividers cannot be inserted to sub-menus`
+        );
+        return;
+      }
+      const parentElement = this.menuFromIndex(menuLocation.index);
+      if (!Array.isArray(parentElement) && this.isGroupElement(parentElement)) {
+        const group = parentElement.element;
+        const newItem: AppLeftNavItem = { ...(item.element as AppLeftNavItem), nested: true };
+        group.items = [
+          ...group.items.slice(0, menuLocation.subIndex),
+          newItem,
+          ...group.items.slice(menuLocation.subIndex)
+        ];
+      }
+      return;
+    }
+
+    // Root level insertion before target index
+    if (menuLocation.index < 0) {
+      menuLocation.index = 0;
+    }
+    this.items = [...this.items.slice(0, menuLocation.index), item, ...this.items.slice(menuLocation.index)];
+  }
+
+  /**
+   * Insert provided menu item after the menu object identified by targetId.
+   *
+   * @param targetId Identifier of menu to insert to
+   * @param item Menu Item to insert
+   */
+  insertAfter(targetId: string, item: AppLeftNavElement) {
+    const menuLocation = this.indexOfMenuId(targetId);
+
+    if (!isNil(menuLocation.subIndex)) {
+      if (item.type === 'divider') {
+        console.warn(
+          `Skipping DIVIDER Operation: INSERT on Target: ${targetId}, Dividers cannot be inserted to sub-menus`
+        );
+        return;
+      }
+      const parentElement = this.menuFromIndex(menuLocation.index);
+      if (!Array.isArray(parentElement) && this.isGroupElement(parentElement)) {
+        const group = parentElement.element;
+        const newItem: AppLeftNavItem = { ...(item.element as AppLeftNavItem), nested: true };
+        group.items = [
+          ...group.items.slice(0, menuLocation.subIndex + 1),
+          newItem,
+          ...group.items.slice(menuLocation.subIndex + 1)
+        ];
+      }
+      return;
+    }
+
+    // Root level insertion after target index
+    if (menuLocation.index < 0) {
+      menuLocation.index = this.items.length;
+    }
+    this.items = [...this.items.slice(0, menuLocation.index + 1), item, ...this.items.slice(menuLocation.index + 1)];
+  }
+
+  /**
+   * Locates menu location in menu structure by menu id.
+   *
+   * @param id Menu Id to search for
+   * @return {index: number, subIndex: number} A dictionary containing indexes needed to access Menu Item
+   */
+  indexOfMenuId(id: string): { index: number; subIndex?: number } {
+    if (id === 'root') {
+      // Root item so return entire menu
+      return { index: -1 };
+    } else if (id in this.indexMap) {
+      // Item exists, check if it's a subitem
+      if ('parent' in this.indexMap[id]) {
+        return { index: this.indexMap[id].parent, subIndex: this.indexMap[id].index };
+      }
+      return { index: this.indexMap[id].index };
+    } else {
+      throw new Error(`Menu element with id of '${id}' not found.`);
+    }
+  }
+
+  /**
+   *  Grabs a menu by indexes, helper function to account for an index of -1
+   *  to represent the root menu
+   *
+   * @param index First level index
+   * @param subIndex Second level index
+   * @return {} Menu item
+   */
+  menuFromIndex(index: number, subIndex?: number): AppLeftNavElement[] | AppLeftNavElement | AppLeftNavItem {
+    if (index === -1) {
+      return this.items;
+    }
+    if (isNil(subIndex)) {
+      return this.items[index];
+    }
+    const menuItem = this.items[index];
+    if (menuItem.type === 'group') {
+      return menuItem.element.items[subIndex];
+    }
+    throw new Error(`Menu item at index ${index} is not a group and does not have sub-items.`);
+  }
+
+  /**
+   * Determine if provided element is a group element
+   *
+   * @param elem Element to check
+   * @private
+   */
+  private isGroupElement(elem: unknown): elem is { type: 'group'; element: AppLeftNavGroup } {
+    return !!elem && typeof elem === 'object' && (elem as AppLeftNavElement).type === 'group';
+  }
+
+  /**
+   * Determine if provided element is an item element
+   *
+   * @param elem Element to check
+   * @private
+   */
+  private isItemElement(elem: unknown): elem is { type: 'item'; element: AppLeftNavItem } {
+    return !!elem && typeof elem === 'object' && (elem as AppLeftNavElement).type === 'item';
+  }
+
+  /**
+   * Creates a flat list of menu items and subitems by menu id
+   * for quick lookup.
+   *
+   * @private
+   */
+  private updateMenuMap() {
+    const indexMap: Record<string | number, { index: number; parent?: number }> = {};
+    for (let index = 0; index < this.items.length; index++) {
+      const menuItem = this.items[index];
+      if (menuItem.type === 'divider') {
+        continue;
+      }
+      indexMap[menuItem.element.id] = { index };
+      if (menuItem.type === 'group') {
+        for (let subIndex = 0; subIndex < menuItem.element.items.length; subIndex++) {
+          const subMenuItem = menuItem.element.items[subIndex];
+          indexMap[subMenuItem.id] = { index: subIndex, parent: index };
+        }
+      }
+    }
+    this.indexMap = indexMap;
+  }
+}
+
+export default AppMenuBuilder;

package/utils/sessionStorage.ts

@@ -0,0 +1,59 @@
+import Throttler from 'utils/Throttler';
+import { MY_SESSION_STORAGE_PREFIX, StorageKey } from './constants';
+
+const buildName = (name: string) => `${MY_SESSION_STORAGE_PREFIX}.${name}`;
+
+const {
+  _getStored: getStored,
+  _removeStored: removeStored,
+  _setStored: setStored
+} = (() => {
+  // In order to tamp down on the number of writes to session storage, we use a throttler to debounce writes.
+  // This allows us to write to the same key many times in quick succession without actually writing it to session storage right away.
+  const throttler = new Throttler(3000);
+
+  let changes = {};
+
+  const _getStored = <T = string>(name: StorageKey): T => {
+    return {
+      ...JSON.parse(sessionStorage.getItem(buildName(name))),
+      ...changes[buildName(name)]
+    } as T;
+  };
+
+  const _removeStored = (name: StorageKey) => {
+    delete changes[buildName(name)];
+    sessionStorage.removeItem(buildName(name));
+  };
+
+  const _setStored = (name: StorageKey, item: any) => {
+    changes[buildName(name)] = item;
+
+    throttler.debounce(() => {
+      Object.entries(changes).forEach(([_name, data]) => {
+        try {
+          sessionStorage.setItem(_name, JSON.stringify(data));
+        } catch (e) {
+          // eslint-disable-next-line no-console
+          console.warn('Quota Error when saving to sessionStorage', e);
+        }
+      });
+
+      changes = {};
+    });
+  };
+
+  return { _getStored, _removeStored, _setStored };
+})();
+
+export { getStored, removeStored, setStored };
+
+export const getAxiosCache = (): { [index: string]: any } => {
+  return getStored(StorageKey.AXIOS_CACHE) ?? {};
+};
+
+export const setAxiosCache = (etag: string, value: any) => {
+  const cache = getAxiosCache();
+  cache[etag] = value;
+  setStored(StorageKey.AXIOS_CACHE, cache);
+};

package/utils/socketUtils.ts

@@ -0,0 +1,11 @@
+import type { RecievedDataType } from 'components/app/providers/SocketProvider';
+import type { HitUpdate } from 'models/socket/HitUpdate';
+
+/**
+ * Checks to see if the data recieved from the socket is a hit update
+ * @param data The data recieved from the socket
+ * @returns whether the data is a hit update
+ */
+export const isHitUpdate = (data: any): data is RecievedDataType<HitUpdate> => {
+  return data.version && data.hit;
+};

package/utils/stringUtils.ts

@@ -0,0 +1,57 @@
+import { get } from 'lodash-es';
+
+export const nameToInitials = (string: string) => {
+  const parts = string.split(' ').slice(0, 2);
+
+  if (string.includes(',')) {
+    parts.reverse();
+  }
+
+  return parts.map(p => p.charAt(0).toUpperCase());
+};
+
+export const maxLenStr = (str: string, len: number) => {
+  if (str.length > len) {
+    return `${str.substr(0, len - 3)}...`;
+  }
+  return str;
+};
+
+export const safeFieldValue = (data: string | number | boolean) => {
+  const temp = String(data);
+  return `"${temp.replace(/\\/g, '\\\\').replace(/"/g, '\\"')}"`;
+};
+
+export const safeFieldValueURI = (data: string | number | boolean) => {
+  return `${encodeURIComponent(safeFieldValue(data))}`;
+};
+
+export const sanitizeLuceneQuery = (query: string) => {
+  return query
+    .replace(/([\^"~*?:\\/()[\]{}\-!])/g, '\\$1')
+    .replace('&&', '\\&&')
+    .replace('||', '\\||');
+};
+
+// Supports : prop or any form of nested object.. prop.object.prop2, prop.object[0].prop2
+export const safeStringPropertyCompare = (propertyPath: string) => {
+  return (a: unknown, b: unknown) => {
+    const aVal = get(a, propertyPath);
+    const bVal = get(b, propertyPath);
+    return aVal && bVal ? aVal.localeCompare(bVal) : aVal ? 1 : 0;
+  };
+};
+
+export const sanitizeMultilineLucene = (query: string) => {
+  return query.replace(/#.+/g, '').replace(/\n{2,}/, '\n');
+};
+
+export const validateRegex = (regex: string) => {
+  try {
+    new RegExp(regex);
+
+    return true;
+  } catch {
+    return false;
+  }
+};

package/utils/utils.ts

@@ -0,0 +1,222 @@
+import * as colors from '@mui/material/colors';
+import dayjs from 'dayjs';
+import { flatten, unflatten } from 'flat';
+import { isArray, isEmpty, isNil, isObject, isPlainObject } from 'lodash-es';
+
+export const bytesToSize = (bytes: number | null) => {
+  const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
+  if (bytes === 0 || bytes === null) return '0 B';
+  const i = Math.floor(Math.log(bytes) / Math.log(1024));
+  return `${Math.round(bytes / Math.pow(1024, i))} ${sizes[i]}`;
+};
+
+export const humanReadableNumber = (num: number | null) => {
+  const sizes = ['', 'k', 'm', 'g', 't', 'p', 'e', 'z', 'y'];
+  if (num === 0 || num === null) return '0 ';
+  const i = Math.floor(Math.log(num) / Math.log(1000));
+  return `${Math.round(num / Math.pow(1000, i))}${sizes[i]} `;
+};
+
+export const getProvider = () => {
+  if (window.location.pathname.indexOf(`${import.meta.env.PUBLIC_URL}/oauth/`) !== -1) {
+    return window.location.pathname
+      .split(`${import.meta.env.PUBLIC_URL}/oauth/`)
+      .pop()
+      .slice(0, -1);
+  }
+  const params = new URLSearchParams(window.location.search);
+  return params.get('provider');
+};
+
+export const searchResultsDisplay = (count: number, max: number = 10000) => {
+  const params = new URLSearchParams(window.location.search);
+  const trackedHits = params.get('track_total_hits');
+
+  if (count === parseInt(trackedHits) || (trackedHits === null && count === max)) {
+    return `${count}+`;
+  }
+
+  return `${count}`;
+};
+
+const DATE_FORMAT = 'YYYY/MM/DD HH:mm:ss';
+export const formatDate = (date: number | string | Date): string => {
+  if (!date) {
+    return '?';
+  }
+
+  return dayjs(date).utc().format(DATE_FORMAT);
+};
+
+export const compareTimestamp = (a: string, b: string): number => {
+  return (new Date(a).getTime() - new Date(b).getTime()) / 1000;
+};
+
+export const twitterShort = (date: string | Date | number): string => {
+  if (!date || date === '?') {
+    return '?';
+  }
+
+  return dayjs(date).fromNow();
+};
+
+export const hashCode = (s: string): number => s.split('').reduce((a, b) => ((a << 5) - a + b.charCodeAt(0)) | 0, 0);
+
+export const stringToColor = (string: string) => {
+  const number = Math.abs(hashCode(string));
+  const colorKeys = Object.keys(colors).filter(key => key !== 'common');
+
+  const colorKey = colorKeys[number % colorKeys.length];
+  // eslint-disable-next-line import/namespace
+  const color = colors[colorKey] as { [shade: string]: string };
+
+  const shade = Math.max(Math.floor((number / 1000) % 10), 1) * 100;
+
+  return color[shade];
+};
+
+// Adapted from here: https://stackoverflow.com/a/48429492
+export const delay = (ms: number, rejectOnCancel = false) => {
+  let timerId: number;
+  let onCancel: () => void;
+
+  class TimedPromise extends Promise<void> {
+    cancel = () => {
+      if (rejectOnCancel) {
+        onCancel();
+      }
+
+      clearTimeout(timerId);
+    };
+  }
+
+  return new TimedPromise((resolve, reject) => {
+    timerId = setTimeout(resolve, ms) as unknown as number;
+    onCancel = reject;
+  });
+};
+
+type Timestamp = {
+  timestamp?: string;
+};
+
+export const sortByTimestamp = <T extends Timestamp>(arr: T[]) => {
+  return (arr ?? []).slice().sort((a, b) => compareTimestamp(b.timestamp, a.timestamp));
+};
+
+export const getTimeRange = (arr: string[]): [string, string] => {
+  const sorted = arr.sort((a, b) => compareTimestamp(a, b));
+
+  return [sorted[0], sorted[sorted.length - 1]];
+};
+
+export const removeEmpty = (obj: any, aggressive = false) => {
+  if (aggressive && isEmpty(obj)) {
+    return null;
+  } else if (isArray(obj)) {
+    return obj;
+  }
+
+  return Object.fromEntries(
+    Object.entries(obj ?? {})
+      .filter(([__, v]) => !isNil(v))
+      .map(([k, v]) => [k, isPlainObject(v) || isArray(v) ? removeEmpty(v, aggressive) : v])
+      .filter(([__, v]) => !!v)
+  );
+};
+
+export const searchObject = (o: any, query: string, returnFlat = false) => {
+  if (!query) {
+    return returnFlat ? flatten(o) : o;
+  }
+
+  try {
+    const regex = new RegExp(query, 'i');
+
+    const filteredData =
+      Object.fromEntries(Object.entries(flatten(o)).filter(([k, v]) => regex.test(k) || regex.test(v))) ?? {};
+
+    return returnFlat ? filteredData : unflatten(filteredData);
+  } catch (e) {
+    return returnFlat ? flatten(o) : o;
+  }
+};
+
+const DATE_TO_LUCENE_MAP = {
+  day: 'd',
+  week: 'w',
+  month: 'M',
+  year: 'y'
+};
+
+export const convertDateToLucene = (date: string) => {
+  if (!date.startsWith('date.range.')) {
+    return '[now-1d TO now]';
+  }
+
+  if (date.endsWith('all')) {
+    return '*';
+  }
+
+  const [amount, type] = date.replace('date.range.', '').split('.');
+
+  return `[now-${amount}${DATE_TO_LUCENE_MAP[type] ?? 'd'} TO now]`;
+};
+
+export const convertCustomDateRangeToLucene = (startDate: string, endDate: string) => {
+  return `[${startDate} TO ${endDate}]`;
+};
+
+export const convertLuceneToDate = (lucene: string) => {
+  if (!lucene.includes(':')) {
+    return lucene;
+  }
+
+  const [amount, initial] = lucene.replace(/.+\[now-(\d+)(\w+) TO now]/, '$1 $2').split(' ');
+
+  const type = Object.entries(DATE_TO_LUCENE_MAP).find(([__, _initial]) => _initial === initial)?.[0] ?? 'day';
+
+  return `date.range.${amount}.${type}`;
+};
+
+export const tryParse = (json: string) => {
+  try {
+    return JSON.parse(json);
+  } catch (e) {
+    return json;
+  }
+};
+
+export const flattenDeep = (data: { [index: string]: any }): { [index: string]: any } => {
+  const partialFlat = flatten(data, { safe: true });
+
+  const final: { [index: string]: any } = {};
+  Object.entries(partialFlat).forEach(([key, value]) => {
+    if (!Array.isArray(value) || value.length === 0 || !value.some(entry => isObject(entry))) {
+      final[key] = value;
+    } else {
+      value.forEach(entry => {
+        const flattenedEntry = flattenDeep(entry);
+
+        Object.entries(flattenedEntry).forEach(([childKey, childValue]) => {
+          const fullKey = `${key}.${childKey}`;
+          if (!final[fullKey]) {
+            if (Array.isArray(childValue)) {
+              final[fullKey] = childValue;
+            } else {
+              final[fullKey] = [childValue];
+            }
+          } else {
+            if (Array.isArray(childValue)) {
+              final[fullKey] = [...final[fullKey], ...childValue];
+            } else {
+              final[fullKey].push(childValue);
+            }
+          }
+        });
+      });
+    }
+  });
+
+  return final;
+};