✨ table-controls: factor out duplicated code via new usePersistentState hook + misc cleanup + add initial documentation (DOCS.md and JSDoc comments)

client/package.json

@@ -24,7 +24,7 @@
     "@dnd-kit/sortable": "^7.0.2",
     "@hookform/resolvers": "^2.9.11",
     "@hot-loader/react-dom": "^17.0.2",
-    "@migtools/lib-ui": "^9.0.3",
+    "@migtools/lib-ui": "^10.0.1",
     "@patternfly/patternfly": "^5.0.2",
     "@patternfly/react-charts": "^7.1.0",
     "@patternfly/react-code-editor": "^5.1.0",

client/src/app/Constants.ts

@@ -236,8 +236,9 @@ export enum LocalStorageKey {
 }
 
 // URL param prefixes: should be short, must be unique for each table that uses one
-export enum TableURLParamKeyPrefix {
+export enum TablePersistenceKeyPrefix {
   issues = "i",
+  dependencies = "d",
   issuesAffectedApps = "ia",
   issuesAffectedFiles = "if",
   issuesRemainingIncidents = "ii",

client/src/app/components/TableControls/TableRowContentWithControls.tsx

@@ -1,16 +1,23 @@
 import React from "react";
 import { Td } from "@patternfly/react-table";
-import { useTableControlProps } from "@app/hooks/table-controls";
+import { ITableControls } from "@app/hooks/table-controls";
 
 export interface ITableRowContentWithControlsProps<
   TItem,
   TColumnKey extends string,
-  TSortableColumnKey extends TColumnKey
+  TSortableColumnKey extends TColumnKey,
+  TFilterCategoryKey extends string = string,
+  TPersistenceKeyPrefix extends string = string,
 > {
-  expandableVariant?: "single" | "compound" | null;
-  isSelectable?: boolean;
-  propHelpers: ReturnType<
-    typeof useTableControlProps<TItem, TColumnKey, TSortableColumnKey>
+  isExpansionEnabled?: boolean;
+  expandableVariant?: "single" | "compound";
+  isSelectionEnabled?: boolean;
+  propHelpers: ITableControls<
+    TItem,
+    TColumnKey,
+    TSortableColumnKey,
+    TFilterCategoryKey,
+    TPersistenceKeyPrefix
   >["propHelpers"];
   item: TItem;
   rowIndex: number;
@@ -20,22 +27,23 @@ export interface ITableRowContentWithControlsProps<
 export const TableRowContentWithControls = <
   TItem,
   TColumnKey extends string,
-  TSortableColumnKey extends TColumnKey
+  TSortableColumnKey extends TColumnKey,
 >({
-  expandableVariant = null,
-  isSelectable = false,
-  propHelpers: { getSingleExpandTdProps, getSelectCheckboxTdProps },
+  isExpansionEnabled = false,
+  expandableVariant,
+  isSelectionEnabled = false,
+  propHelpers: { getSingleExpandButtonTdProps, getSelectCheckboxTdProps },
   item,
   rowIndex,
   children,
 }: React.PropsWithChildren<
   ITableRowContentWithControlsProps<TItem, TColumnKey, TSortableColumnKey>
 >) => (
   <>
-    {expandableVariant === "single" ? (
-      <Td {...getSingleExpandTdProps({ item, rowIndex })} />
+    {isExpansionEnabled && expandableVariant === "single" ? (
+      <Td {...getSingleExpandButtonTdProps({ item, rowIndex })} />
     ) : null}
-    {isSelectable ? (
+    {isSelectionEnabled ? (
       <Td {...getSelectCheckboxTdProps({ item, rowIndex })} />
     ) : null}
     {children}

client/src/app/components/answer-table/answer-table.tsx

@@ -37,14 +37,12 @@ const AnswerTable: React.FC<IAnswerTableProps> = ({
       choice: "Answer choice",
       weight: "Weight",
     },
-    hasActionsColumn: false,
-    hasPagination: false,
     variant: "compact",
   });
   const {
     currentPageItems,
     numRenderedColumns,
-    propHelpers: { tableProps, getThProps, getTdProps },
+    propHelpers: { tableProps, getThProps, getTrProps, getTdProps },
   } = tableControls;
 
   const getIconByRisk = (risk: string): React.ReactElement => {
@@ -118,7 +116,7 @@ const AnswerTable: React.FC<IAnswerTableProps> = ({
             {currentPageItems?.map((answer, rowIndex) => {
               return (
                 <>
-                  <Tr key={answer.text}>
+                  <Tr key={answer.text} {...getTrProps({ item: answer })}>
                     <TableRowContentWithControls
                       {...tableControls}
                       item={answer}

client/src/app/components/questions-table/questions-table.tsx

@@ -44,6 +44,7 @@ const QuestionsTable: React.FC<{
       formulation: "Name",
       section: "Section",
     },
+    isExpansionEnabled: true,
     expandableVariant: "single",
     forceNumRenderedColumns: isAllQuestionsTab ? 3 : 2, // columns+1 for expand control
   });
@@ -54,6 +55,7 @@ const QuestionsTable: React.FC<{
     propHelpers: {
       tableProps,
       getThProps,
+      getTrProps,
       getTdProps,
       getExpandedContentTdProps,
     },
@@ -63,7 +65,7 @@ const QuestionsTable: React.FC<{
   const { t } = useTranslation();
 
   return (
-    <Table {...tableProps} aria-label="Questions table" isExpandable>
+    <Table {...tableProps} aria-label="Questions table">
       <Thead>
         <Tr>
           <TableHeaderContentWithControls {...tableControls}>
@@ -98,7 +100,7 @@ const QuestionsTable: React.FC<{
               )?.name || "";
             return (
               <>
-                <Tr key={question.text}>
+                <Tr key={question.text} {...getTrProps({ item: question })}>
                   <TableRowContentWithControls
                     {...tableControls}
                     item={question}