Add unique table name to drive col selection persistence

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

@@ -31,6 +31,7 @@ const AnswerTable: React.FC<IAnswerTableProps> = ({
   const { t } = useTranslation();
 
   const tableControls = useLocalTableControls({
+    tableName: "answer-table",
     idProperty: "text",
     items: hideAnswerKey
       ? answers.filter((answer) => answer.selected)

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

@@ -38,6 +38,7 @@ const QuestionsTable: React.FC<{
   hideAnswerKey,
 }) => {
   const tableControls = useLocalTableControls({
+    tableName: "questions-table",
     idProperty: "text",
     items: questions || [],
     columnNames: {

client/src/app/hooks/table-controls/DOCS.md

@@ -38,6 +38,7 @@ const things: Thing[] = [
 ];
 
 const tableControls = useLocalTableControls({
+  tableName: 'page-table-name' // A unique name of the table
   idProperty: "id", // The name of a unique string or number property on the data items.
   items: things, // The generic type `TItem` is inferred from the items passed here.
   columnNames: {

client/src/app/hooks/table-controls/column/useColumnState.ts

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useLocalStorage } from "@migtools/lib-ui";
 
 export interface ColumnState<TColumnKey extends string> {
   id: TColumnKey;
@@ -13,13 +13,19 @@ export interface IColumnState<TColumnKey extends string> {
 
 interface IColumnStateArgs<TColumnKey extends string> {
   initialColumns: ColumnState<TColumnKey>[];
+  columnsKey: string;
 }
 
 export const useColumnState = <TColumnKey extends string>(
   args: IColumnStateArgs<TColumnKey>
 ): IColumnState<TColumnKey> => {
-  const [columns, setColumns] = useState<ColumnState<TColumnKey>[]>(
-    args.initialColumns
-  );
+  // const [columns, setColumns] = useState<ColumnState<TColumnKey>[]>(
+  //   args.initialColumns
+  // );
+  const [columns, setColumns] = useLocalStorage<ColumnState<TColumnKey>[]>({
+    key: args.columnsKey,
+    defaultValue: args.initialColumns,
+  });
+
   return { columns, setColumns };
 };

client/src/app/hooks/table-controls/types.ts

@@ -138,6 +138,7 @@ export type IUseTableControlStateArgs<
   TFilterCategoryKey extends string = string,
   TPersistenceKeyPrefix extends string = string,
 > = {
+  tableName: string;
   /**
    * An ordered mapping of unique keys to human-readable column name strings.
    * - Keys of this object are used as unique identifiers for columns (`columnKey`).

client/src/app/hooks/table-controls/useLocalTableControls.ts

@@ -34,7 +34,6 @@ export const useLocalTableControls = <
   const state = useTableControlState(args);
   const derivedState = getLocalTableControlDerivedState({ ...args, ...state });
   const { columnState } = state;
-  console.log("columnState", columnState);
   return useTableControlProps({
     ...args,
     ...state,

client/src/app/hooks/table-controls/useTableControlState.ts

@@ -70,16 +70,14 @@ export const useTableControlState = <
 
   const { columnNames, ...restArgs } = args;
 
-  const initialColumns = Object.entries(columnNames).map(
-    ([id, label], index) => ({
-      id: id as TColumnKey,
-      label: label as string,
-      isVisible: true,
-    })
-  );
+  const initialColumns = Object.entries(columnNames).map(([id, label]) => ({
+    id: id as TColumnKey,
+    label: label as string,
+    isVisible: true,
+  }));
 
   const columnState = useColumnState<TColumnKey>({
-    ...restArgs,
+    columnsKey: restArgs.tableName,
     initialColumns,
   });
   return {

client/src/app/pages/applications/applications-table/applications-table.tsx

@@ -311,6 +311,7 @@ export const ApplicationsTable: React.FC = () => {
   const deserializedFilterValues = deserializeFilterUrlParams({ filters });
 
   const tableControls = useLocalTableControls({
+    tableName: "applications",
     idProperty: "id",
     items: applications || [],
     columnNames: {
@@ -833,7 +834,6 @@ export const ApplicationsTable: React.FC = () => {
           <Thead>
             <Tr>
               <TableHeaderContentWithControls {...tableControls}>
-                {/* {columnState.columns. isVisible then render this column} */}
                 {getColumnVisibility("name") && (
                   <Th {...getThProps({ columnKey: "name" })} width={15} />
                 )}

client/src/app/pages/applications/manage-imports/manage-imports.tsx

@@ -78,6 +78,7 @@ export const ManageImports: React.FC = () => {
   );
 
   const tableControls = useLocalTableControls({
+    tableName: "manage-imports",
     idProperty: "id",
     items: importSummaries,
     columnNames: {

client/src/app/pages/archetypes/archetypes-page.tsx

@@ -192,6 +192,7 @@ const Archetypes: React.FC = () => {
   const deserializedFilterValues = deserializeFilterUrlParams({ filters });
 
   const tableControls = useLocalTableControls({
+    tableName: "archetypes-table",
     persistTo: "urlParams",
     persistenceKeyPrefix: TablePersistenceKeyPrefix.archetypes,
     idProperty: "id",

client/src/app/pages/assessment-management/assessment-settings/assessment-settings-page.tsx

@@ -101,6 +101,7 @@ const AssessmentSettings: React.FC = () => {
   const [questionnaireToDelete, setQuestionnaireToDelete] =
     React.useState<Questionnaire>();
   const tableControls = useLocalTableControls({
+    tableName: "questionnaires-table",
     idProperty: "id",
     items: questionnaires || [],
     columnNames: {

client/src/app/pages/assessment/components/assessment-actions/components/questionnaires-table.tsx

@@ -37,6 +37,7 @@ const QuestionnairesTable: React.FC<QuestionnairesTableProps> = ({
   tableName,
 }) => {
   const tableControls = useLocalTableControls({
+    tableName: "questionnaires-table",
     idProperty: "id",
     items: questionnaires || [],
     columnNames: {

client/src/app/pages/controls/business-services/business-services.tsx

@@ -81,6 +81,7 @@ export const BusinessServices: React.FC = () => {
   const { data: applications } = useFetchApplications();
 
   const tableControls = useLocalTableControls({
+    tableName: "business-services-table",
     idProperty: "name",
     items: businessServices,
     columnNames: {

client/src/app/pages/controls/stakeholder-groups/stakeholder-groups.tsx

@@ -99,6 +99,7 @@ export const StakeholderGroups: React.FC = () => {
   };
 
   const tableControls = useLocalTableControls({
+    tableName: "stakeholder-groups-table",
     idProperty: "name",
     items: stakeholderGroups,
     columnNames: {

client/src/app/pages/controls/stakeholders/stakeholders.tsx

@@ -95,6 +95,7 @@ export const Stakeholders: React.FC = () => {
   };
 
   const tableControls = useLocalTableControls({
+    tableName: "stakeholders-table",
     idProperty: "email",
     items: stakeholders,
     columnNames: {

client/src/app/pages/dependencies/dependencies.tsx

@@ -44,6 +44,7 @@ export const Dependencies: React.FC = () => {
   const deserializedFilterValues = deserializeFilterUrlParams({ filters });
 
   const tableControlState = useTableControlState({
+    tableName: "dependencies-table",
     persistTo: "urlParams",
     persistenceKeyPrefix: TablePersistenceKeyPrefix.dependencies,
     columnNames: {

client/src/app/pages/dependencies/dependency-apps-table.tsx

@@ -51,6 +51,7 @@ export const DependencyAppsTable: React.FC<IDependencyAppsTableProps> = ({
   const deserializedFilterValues = deserializeFilterUrlParams({ filters });
 
   const tableControlState = useTableControlState({
+    tableName: "dependency-apps-table",
     persistTo: "urlParams",
     persistenceKeyPrefix: TablePersistenceKeyPrefix.dependencyApplications,
     columnNames: {

client/src/app/pages/external/jira/trackers.tsx

@@ -92,6 +92,7 @@ export const JiraTrackers: React.FC = () => {
   );
 
   const tableControls = useLocalTableControls({
+    tableName: "jira-Tracker-table",
     idProperty: "name",
     items: trackers,
     columnNames: {

client/src/app/pages/issues/affected-applications/affected-applications.tsx

@@ -53,6 +53,7 @@ export const AffectedApplications: React.FC = () => {
     "Active rule";
 
   const tableControlState = useTableControlState({
+    tableName: "affected-applications-table",
     persistTo: "urlParams",
     persistenceKeyPrefix: TablePersistenceKeyPrefix.issuesAffectedApps,
     columnNames: {

client/src/app/pages/issues/issue-detail-drawer/file-incidents-detail-modal/file-all-incidents-table.tsx

@@ -26,6 +26,7 @@ export const FileAllIncidentsTable: React.FC<
   IFileRemainingIncidentsTableProps
 > = ({ fileReport }) => {
   const tableControlState = useTableControlState({
+    tableName: "file-all-incidents-table",
     persistTo: "urlParams",
     persistenceKeyPrefix: TablePersistenceKeyPrefix.issuesRemainingIncidents,
     columnNames: {

client/src/app/pages/issues/issue-detail-drawer/issue-affected-files-table.tsx

@@ -37,6 +37,7 @@ export const IssueAffectedFilesTable: React.FC<
   const { t } = useTranslation();
 
   const tableControlState = useTableControlState({
+    tableName: "affected-files-table",
     persistTo: "urlParams",
     persistenceKeyPrefix: TablePersistenceKeyPrefix.issuesAffectedFiles,
     columnNames: {

client/src/app/pages/issues/issues-table.tsx

@@ -96,6 +96,7 @@ export const IssuesTable: React.FC<IIssuesTableProps> = ({ mode }) => {
     useSharedAffectedApplicationFilterCategories();
 
   const tableControlState = useTableControlState({
+    tableName: "issues-table",
     persistTo: "urlParams",
     persistenceKeyPrefix: TablePersistenceKeyPrefix.issues,
     columnNames: {

client/src/app/pages/migration-waves/components/manage-applications-form.tsx

@@ -100,6 +100,7 @@ export const ManageApplicationsForm: React.FC<ManageApplicationsFormProps> = ({
   );
 
   const tableControls = useLocalTableControls({
+    tableName: "manage-applications-table",
     idProperty: "name",
     items: availableApplications,
     columnNames: {

client/src/app/pages/migration-waves/components/stakeholders-table.tsx

@@ -18,6 +18,7 @@ export const WaveStakeholdersTable: React.FC<IWaveStakeholdersTableProps> = ({
   migrationWave,
 }) => {
   const tableControls = useLocalTableControls({
+    tableName: "wave-stakeholders-table",
     idProperty: "name",
     items: migrationWave.allStakeholders,
     columnNames: {

client/src/app/pages/migration-waves/components/wave-applications-table.tsx

@@ -35,6 +35,7 @@ export const WaveApplicationsTable: React.FC<IWaveApplicationsTableProps> = ({
   const { tickets } = useFetchTickets();
 
   const tableControls = useLocalTableControls({
+    tableName: "wave-applications-table",
     idProperty: "name",
     items: migrationWave.fullApplications,
     columnNames: {

client/src/app/pages/migration-waves/components/wave-status-table.tsx

@@ -61,6 +61,7 @@ export const WaveStatusTable: React.FC<IWaveStatusTableProps> = ({
   const { mutate: deleteTicket } = useDeleteTicketMutation();
 
   const tableControls = useLocalTableControls({
+    tableName: "wave-applications-table",
     idProperty: "name",
     items: migrationWave.fullApplications,
     columnNames: {

client/src/app/pages/migration-waves/migration-waves.tsx

@@ -180,6 +180,7 @@ export const MigrationWaves: React.FC = () => {
   };
 
   const tableControls = useLocalTableControls({
+    tableName: "migration-waves-table",
     idProperty: "id",
     items: migrationWaves,
     columnNames: {

client/src/app/pages/reports/components/adoption-candidate-table/adoption-candidate-table.tsx

@@ -51,6 +51,7 @@ const AdoptionCandidateTable: React.FC<AdoptionCandidateTableProps> = () => {
   }, [allApplications, reviews]);
 
   const tableControls = useLocalTableControls({
+    tableName: "adoption-candidate-table",
     idProperty: "id",
     items: applicationsWithReviews || [],
     columnNames: {

client/src/app/pages/reports/components/identified-risks-table/identified-risks-table.tsx

@@ -141,6 +141,7 @@ export const IdentifiedRisksTable: React.FC<IIdentifiedRisksTableProps> = ({
   });
 
   const tableControls = useLocalTableControls({
+    tableName: "identified-risks-table",
     idProperty: "questionId",
     items: tableData || [],
     columnNames: {