feat: add PEM visualization for certificates (#11)

Signed-off-by: Carlos Feria <[email protected]>

Author: carlosthe19916

client/openapi/console.yaml

@@ -777,13 +777,17 @@ components:
         expiration:
           type: string
           description: Expiration date and time of the certificate (notAfter).
+        pem:
+          type: string
+          description: Certificate in PEM-encoded format.
       required:
         - subject
         - issuer
         - type
         - status
         - target
         - expiration
+        - pem
     CertificateInfoList:
       type: object
       properties:

client/src/app/Constants.ts

@@ -3,3 +3,9 @@ import ENV from "./env";
 export const isAuthRequired = ENV.AUTH_REQUIRED !== "false";
 
 export const RENDER_DATE_FORMAT = "MMM DD, YYYY";
+
+/**
+ * The name of the client generated id field inserted in a object marked with mixin type
+ * `WithUiId`.
+ */
+export const UI_UNIQUE_ID = "_ui_unique_id";

client/src/app/hooks/TableControls/expansion/getExpansionDerivedState.ts

@@ -0,0 +1,71 @@
+import type { KeyWithValueType } from "@app/utils/type-utils";
+import type { IExpansionState } from "./useExpansionState";
+
+/**
+ * Args for getExpansionDerivedState
+ */
+export interface IExpansionDerivedStateArgs<TItem, TColumnKey extends string> {
+  /**
+   * The string key/name of a property on the API data item objects that can be used as a unique identifier (string or number)
+   */
+  idProperty: KeyWithValueType<TItem, string | number>;
+  /**
+   * The "source of truth" state for the expansion feature (returned by useExpansionState)
+   */
+  expansionState: IExpansionState<TColumnKey>;
+}
+
+/**
+ * Derived state for the expansion feature
+ * - "Derived state" here refers to values and convenience functions derived at render time based on the "source of truth" state.
+ * - "source of truth" (persisted) state and "derived state" are kept separate to prevent out-of-sync duplicated state.
+ */
+export interface IExpansionDerivedState<TItem, TColumnKey extends string> {
+  /**
+   * Returns whether a cell or a row is expanded
+   *  - If called with a columnKey, returns whether that column's cell in this row is expanded (for compound-expand)
+   *  - If called without a columnKey, returns whether the entire row or any cell in it is expanded (for both single-expand and compound-expand)
+   */
+  isCellExpanded: (item: TItem, columnKey?: TColumnKey) => boolean;
+  /**
+   * Set a cell or a row as expanded or collapsed
+   *  - If called with a columnKey, sets that column's cell in this row expanded or collapsed (for compound-expand)
+   *  - If called without a columnKey, sets the entire row as expanded or collapsed (for single-expand)
+   */
+  setCellExpanded: (args: { item: TItem; isExpanding?: boolean; columnKey?: TColumnKey }) => void;
+}
+
+/**
+ * Given the "source of truth" state for the expansion feature and additional arguments, returns "derived state" values and convenience functions.
+ * - "source of truth" (persisted) state and "derived state" are kept separate to prevent out-of-sync duplicated state.
+ */
+export const getExpansionDerivedState = <TItem, TColumnKey extends string>({
+  idProperty,
+  expansionState: { expandedCells, setExpandedCells },
+}: IExpansionDerivedStateArgs<TItem, TColumnKey>): IExpansionDerivedState<TItem, TColumnKey> => {
+  const isCellExpanded = (item: TItem, columnKey?: TColumnKey) => {
+    return columnKey
+      ? expandedCells[String(item[idProperty])] === columnKey
+      : !!expandedCells[String(item[idProperty])];
+  };
+
+  const setCellExpanded = ({
+    item,
+    isExpanding = true,
+    columnKey,
+  }: {
+    item: TItem;
+    isExpanding?: boolean;
+    columnKey?: TColumnKey;
+  }) => {
+    const newExpandedCells = { ...expandedCells };
+    if (isExpanding) {
+      newExpandedCells[String(item[idProperty])] = columnKey ?? true;
+    } else {
+      delete newExpandedCells[String(item[idProperty])];
+    }
+    setExpandedCells(newExpandedCells);
+  };
+
+  return { isCellExpanded, setCellExpanded };
+};

client/src/app/hooks/TableControls/expansion/useExpansionPropHelpers.ts

@@ -0,0 +1,101 @@
+import type { TdProps } from "@patternfly/react-table";
+
+import type { KeyWithValueType } from "@app/utils/type-utils";
+import { getExpansionDerivedState } from "./getExpansionDerivedState";
+import type { IExpansionState } from "./useExpansionState";
+
+/**
+ * Args for useExpansionPropHelpers
+ */
+export interface IExpansionPropHelpersExternalArgs<TItem, TColumnKey extends string> {
+  /**
+   * The string key/name of a property on the API data item objects that can be used as a unique identifier (string or number)
+   */
+  idProperty: KeyWithValueType<TItem, string | number>;
+  /**
+   * The "source of truth" state for the expansion feature (returned by useExpansionState)
+   */
+  expansionState: IExpansionState<TColumnKey>;
+}
+
+/**
+ * Additional args for useExpansionPropHelpers that come from logic inside useTableControlProps
+ * @see useTableControlProps
+ */
+export interface IExpansionPropHelpersInternalArgs<TColumnKey extends string> {
+  /**
+   * The keys of the `columnNames` object (unique keys identifying each column).
+   */
+  columnKeys: TColumnKey[];
+}
+
+/**
+ * Returns derived state and prop helpers for the expansion feature based on given "source of truth" state.
+ * - Used internally by useTableControlProps
+ * - "Derived state" here refers to values and convenience functions derived at render time.
+ * - "source of truth" (persisted) state and "derived state" are kept separate to prevent out-of-sync duplicated state.
+ */
+export const useExpansionPropHelpers = <TItem, TColumnKey extends string>(
+  args: IExpansionPropHelpersExternalArgs<TItem, TColumnKey> & IExpansionPropHelpersInternalArgs<TColumnKey>
+) => {
+  const { idProperty, columnKeys } = args;
+
+  const expansionDerivedState = getExpansionDerivedState(args);
+  const { isCellExpanded, setCellExpanded } = expansionDerivedState;
+
+  /**
+   * Returns props for the Td to the left of the data cells which contains each row's expansion toggle button (only for single-expand).
+   */
+  const getSingleExpandButtonTdProps = ({
+    item,
+    rowIndex,
+  }: {
+    item: TItem;
+    rowIndex: number;
+  }): Omit<TdProps, "ref"> => ({
+    expand: {
+      rowIndex,
+      isExpanded: isCellExpanded(item),
+      onToggle: () =>
+        setCellExpanded({
+          item,
+          isExpanding: !isCellExpanded(item),
+        }),
+      // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
+      expandId: `expandable-row-${item[idProperty]}`,
+    },
+  });
+
+  /**
+   * Returns props for the Td which is a data cell in an expandable column and functions as an expand toggle (only for compound-expand)
+   */
+  const getCompoundExpandTdProps = ({
+    columnKey,
+    item,
+    rowIndex,
+  }: {
+    columnKey: TColumnKey;
+    item: TItem;
+    rowIndex: number;
+  }): Omit<TdProps, "ref"> => ({
+    compoundExpand: {
+      isExpanded: isCellExpanded(item, columnKey),
+      onToggle: () =>
+        setCellExpanded({
+          item,
+          isExpanding: !isCellExpanded(item, columnKey),
+          columnKey,
+        }),
+      // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
+      expandId: `compound-expand-${item[idProperty]}-${columnKey}`,
+      rowIndex,
+      columnIndex: columnKeys.indexOf(columnKey),
+    },
+  });
+
+  return {
+    expansionDerivedState,
+    getSingleExpandButtonTdProps,
+    getCompoundExpandTdProps,
+  };
+};

client/src/app/hooks/TableControls/expansion/useExpansionState.ts

@@ -0,0 +1,49 @@
+import React from "react";
+
+/**
+ * A map of item ids (strings resolved from `item[idProperty]`) to either:
+ * - a `columnKey` if that item's row has a compound-expanded cell
+ * - or a boolean:
+ *   - true if the row is expanded (for single-expand)
+ *   - false if the row and all its cells are collapsed (for both single-expand and compound-expand).
+ */
+export type TExpandedCells<TColumnKey extends string> = Record<string, TColumnKey | boolean>;
+
+/**
+ * The "source of truth" state for the expansion feature.
+ */
+export interface IExpansionState<TColumnKey extends string> {
+  /**
+   * A map of item ids to a `columnKey` or boolean for the current expansion state of that cell/row
+   * @see TExpandedCells
+   */
+  expandedCells: TExpandedCells<TColumnKey>;
+  /**
+   * Updates the `expandedCells` map (replacing the entire map).
+   * - See `expansionDerivedState` for helper functions to expand/collapse individual cells/rows.
+   * @see IExpansionDerivedState
+   */
+  setExpandedCells: (newExpandedCells: TExpandedCells<TColumnKey>) => void;
+}
+
+/**
+ * Args for useExpansionState
+ */
+export interface IExpansionStateArgs {
+  /**
+   * Whether to use single-expand or compound-expand behavior
+   * - "single" for the entire row to be expandable with one toggle.
+   * - "compound" for multiple cells in a row to be expandable with individual toggles.
+   */
+  expandableVariant: "single" | "compound";
+}
+
+/**
+ * Provides the "source of truth" state for the expansion feature.
+ * - Used internally by useTableControlState
+ * - Takes args defined above as well as optional args for persisting state to a configurable storage target.
+ */
+export const useExpansionState = <TColumnKey extends string>(): IExpansionState<TColumnKey> => {
+  const [expandedCells, setExpandedCells] = React.useState<TExpandedCells<TColumnKey>>({});
+  return { expandedCells, setExpandedCells };
+};

client/src/app/hooks/TableControls/usePFTable.ts

@@ -1,12 +1,28 @@
+import type { KeyWithValueType } from "@app/utils/type-utils";
+
+import { useExpansionPropHelpers } from "./expansion/useExpansionPropHelpers";
+import { useExpansionState } from "./expansion/useExpansionState";
 import { usePaginationPropHelpers } from "./pagination/usePaginationPropHelpers";
 import { useSortPropHelpers } from "./sorting/useSortPropHelpers";
 import { useTable, type ITableArgs } from "./useTable";
 
-export const usePFTable = <TItem, TSortableColumnKey extends string, TFilterCategoryKey extends string>(
-  args: ITableArgs<TItem, TSortableColumnKey, TFilterCategoryKey>
+export interface IPFTableArgs<TItem, TColumnKey extends string> {
+  columns: TColumnKey[];
+  idProperty: KeyWithValueType<TItem, string | number>;
+}
+
+export const usePFTable = <
+  TItem,
+  TColumnKey extends string,
+  TSortableColumnKey extends TColumnKey,
+  TFilterCategoryKey extends string,
+>(
+  args: ITableArgs<TItem, TSortableColumnKey, TFilterCategoryKey> & IPFTableArgs<TItem, TColumnKey>
 ) => {
   const tableState = useTable(args);
 
+  const expansionState = useExpansionState<TColumnKey>();
+
   const { getSortThProps } = useSortPropHelpers({
     sortableColumns: args.sorting?.sortableColumns,
     sortState: tableState.sortingState,
@@ -19,12 +35,24 @@ export const usePFTable = <TItem, TSortableColumnKey extends string, TFilterCate
     isPaginationEnabled: true,
   });
 
+  const { expansionDerivedState, getCompoundExpandTdProps, getSingleExpandButtonTdProps } = useExpansionPropHelpers<
+    TItem,
+    TColumnKey
+  >({
+    idProperty: args.idProperty,
+    expansionState,
+    columnKeys: args.columns,
+  });
+
   return {
     ...tableState,
     propHelpers: {
       getSortThProps,
       paginationProps,
       paginationToolbarItemProps,
+      getSingleExpandButtonTdProps,
+      getCompoundExpandTdProps,
     },
+    expansionDerivedState,
   };
 };

client/src/app/hooks/query-utils.ts

@@ -0,0 +1,35 @@
+import { useMemo } from "react";
+
+import { UI_UNIQUE_ID } from "@app/Constants";
+
+export type WithUiId<T> = T & { _ui_unique_id: string };
+
+/**
+ * Make a shallow copy of `data` and insert a new `UI_UNIQUE_ID` field in each element
+ * with the output of the `generator` function.  This hook allows generating the needed
+ * UI id field for any object that does not already have a unique id field so the object
+ * can be used with our table selection handlers.
+ *
+ * @returns A shallow copy of `T` with an added `UI_UNIQUE_ID` field.
+ */
+export const useWithUiId = <T>(
+  /** Source data to modify. */
+  data: T[] | undefined,
+  /** Generate the unique id for a specific `T`. */
+  generator: (item: T) => string
+): WithUiId<T>[] => {
+  const result = useMemo(() => {
+    if (!data || data.length === 0) {
+      return [];
+    }
+
+    const dataWithUiId: WithUiId<T>[] = data.map((item) => ({
+      ...item,
+      [UI_UNIQUE_ID]: generator(item),
+    }));
+
+    return dataWithUiId;
+  }, [data, generator]);
+
+  return result;
+};

client/src/app/hooks/usePFToolbarTable.ts

@@ -1,16 +1,25 @@
 import React from "react";
 
 import { useFilterPropHelpers } from "./TableControls/filtering/useFilterPropHelpers";
-import { usePFTable } from "./TableControls/usePFTable";
+import { usePFTable, type IPFTableArgs } from "./TableControls/usePFTable";
 import { type ITableArgs } from "./TableControls/useTable";
 import { useFilterControlPropHelpers } from "./ToolbarControls/useFilterControlPropHelpers";
 
-export const usePFToolbarTable = <TItem, TSortableColumnKey extends string, TFilterCategoryKey extends string>(
-  args: ITableArgs<TItem, TSortableColumnKey, TFilterCategoryKey> & {
-    toolbar: {
-      categoryTitles: Record<TFilterCategoryKey, string>;
-    };
-  }
+export interface IPFToolbarTableArgs<TFilterCategoryKey extends string> {
+  toolbar: {
+    categoryTitles: Record<TFilterCategoryKey, string>;
+  };
+}
+
+export const usePFToolbarTable = <
+  TItem,
+  TColumnKey extends string,
+  TSortableColumnKey extends TColumnKey,
+  TFilterCategoryKey extends string,
+>(
+  args: ITableArgs<TItem, TSortableColumnKey, TFilterCategoryKey> &
+    IPFTableArgs<TItem, TColumnKey> &
+    IPFToolbarTableArgs<TFilterCategoryKey>
 ) => {
   const [currentFilterCategoryKey, setCurrentFilterCategoryKey] = React.useState(
     args.filtering?.filterCategories?.[0].categoryKey