Feature: Cookie table settings should be made persistent

packages/common/src/cookies.types.ts

@@ -92,3 +92,18 @@ export interface CookieStatsComponents {
 export interface FramesWithCookies {
   [key: string]: { frameIds: number[] };
 }
+
+export type SortingState = {
+  defaultSortKey?: string;
+  defaultSortOrder?: 'asc' | 'desc';
+};
+
+export type SelectedFilters = {
+  [key: string]: Set<string>;
+};
+
+export type PreferenceDataValues =
+  | Record<string, number | boolean>
+  | string
+  | SelectedFilters
+  | SortingState[];

packages/design-system/src/components/table/columnMenu/columnList.tsx

@@ -17,26 +17,47 @@
 /**
  * External dependencies.
  */
-import React from 'react';
+import React, { useEffect } from 'react';
+import { PreferenceDataValues } from '@cookie-analysis-tool/common';
 
 /**
  * Internal dependencies.
  */
 import ColumnListItem from './columnListItem';
-
 import type { TableOutput } from '../useTable';
 
 interface ColumnListProps {
   table: TableOutput;
   toggleVisibility: (key: string) => void;
+  updatePreference: (
+    key: string,
+    updater: (prevStatePreference: {
+      [key: string]: unknown;
+    }) => PreferenceDataValues
+  ) => void;
   handleClose: () => void;
 }
 
 const ColumnList = ({
   table,
   toggleVisibility,
   handleClose,
+  updatePreference,
 }: ColumnListProps) => {
+  useEffect(() => {
+    return () => {
+      const visibleColumns: Record<string, boolean> = {};
+
+      table.hideableColumns.forEach((column) => {
+        visibleColumns[column.header] = table.isColumnHidden(
+          column.accessorKey
+        );
+      });
+
+      updatePreference('selectedColumns', () => visibleColumns);
+    };
+  }, [table, table.hideableColumns, updatePreference]);
+
   return (
     <ul className="text-basic mt-1.5">
       {table.hideableColumns.map((column, key) => (

packages/design-system/src/components/table/columnMenu/index.tsx

@@ -19,7 +19,7 @@
  */
 import React, { useEffect, useRef, useState } from 'react';
 import classNames from 'classnames';
-
+import { type PreferenceDataValues } from '@cookie-analysis-tool/common';
 /**
  * Internal dependencies.
  */
@@ -32,9 +32,21 @@ interface ColumnMenuProps {
   position: { x: number; y: number };
   open: boolean;
   onClose: (value: boolean) => void;
+  updatePreference: (
+    key: string,
+    updater: (prevStatePreference: {
+      [key: string]: unknown;
+    }) => PreferenceDataValues
+  ) => void;
 }
 
-const ColumnMenu = ({ table, position, open, onClose }: ColumnMenuProps) => {
+const ColumnMenu = ({
+  table,
+  position,
+  open,
+  onClose,
+  updatePreference,
+}: ColumnMenuProps) => {
   const [startAnimation, setStartAnimation] = useState(false);
   const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
@@ -95,6 +107,7 @@ const ColumnMenu = ({ table, position, open, onClose }: ColumnMenuProps) => {
               <div>
                 <ColumnList
                   table={table}
+                  updatePreference={updatePreference}
                   toggleVisibility={(key: string) => {
                     table.isColumnHidden(key)
                       ? table.showColumn(key)

packages/design-system/src/components/table/table.tsx

@@ -18,15 +18,17 @@
  * External dependencies.
  */
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-
+import {
+  CookieTableData,
+  PreferenceDataValues,
+} from '@cookie-analysis-tool/common';
 /**
  * Internal dependencies.
  */
 import TableHeader from './tableHeader';
 import TableBody from './tableBody';
 import ColumnMenu from './columnMenu';
 import { TableOutput, TableRow } from './useTable';
-import { CookieTableData } from '@cookie-analysis-tool/common';
 
 export type TableData = CookieTableData;
 
@@ -35,13 +37,20 @@ interface TableProps {
   selectedKey: string | undefined | null;
   getRowObjectKey: (row: TableRow) => string;
   onRowClick: (row: TableData | null) => void;
+  updatePreference: (
+    key: string,
+    updater: (prevStatePreference: {
+      [key: string]: unknown;
+    }) => PreferenceDataValues
+  ) => void;
 }
 
 const Table = ({
   table,
   selectedKey,
   getRowObjectKey,
   onRowClick,
+  updatePreference,
 }: TableProps) => {
   const [showColumnsMenu, setShowColumnsMenu] = useState(false);
   const [columnPosition, setColumnPosition] = useState({
@@ -89,13 +98,15 @@ const Table = ({
       className="relative h-full w-full overflow-auto"
     >
       <ColumnMenu
+        updatePreference={updatePreference}
         table={table}
         open={showColumnsMenu}
         onClose={setShowColumnsMenu}
         position={columnPosition}
       />
       <div className="h-full w-full" ref={tableRef}>
         <TableHeader
+          updatePreference={updatePreference}
           table={table}
           setColumnPosition={setColumnPosition}
           onRightClick={handleRightClick}

packages/design-system/src/components/table/tableHeader/headerCell.tsx

@@ -17,35 +17,73 @@
 /**
  * External dependencies.
  */
-import React, { useRef } from 'react';
-
+import React, { useCallback, useEffect, useRef } from 'react';
+import { PreferenceDataValues } from '@cookie-analysis-tool/common';
 /**
  * Internal dependencies.
  */
 import type { TableColumn, TableOutput } from '../useTable';
 import HeaderResizer from './headerResizer';
-import { ArrowDown } from '@cookie-analysis-tool/design-system';
+import { ArrowDown } from '../../../icons';
 
 interface HeaderCellProps {
   table: TableOutput;
   index: number;
   cell: TableColumn;
   setIsRowFocused: (state: boolean) => void;
+  updatePreference: (
+    key: string,
+    callback: (prevStatePreference: {
+      [key: string]: unknown;
+    }) => PreferenceDataValues
+  ) => void;
 }
 
 const HeaderCell = ({
   table,
   index,
   cell,
   setIsRowFocused,
+  updatePreference,
 }: HeaderCellProps) => {
+  // Table data is updated on mouseup.
+  const resizeHandler = useCallback(() => {
+    updatePreference('columnSizing', () => {
+      const currentSizes: { [key: string]: number } = {};
+
+      table.columns.map((column) => {
+        currentSizes[column.accessorKey] = column.width as number;
+        return column;
+      });
+      return currentSizes;
+    });
+  }, [table, updatePreference]);
+
+  useEffect(() => {
+    if (columnRef.current) {
+      columnRef.current.addEventListener('mouseup', resizeHandler);
+    }
+
+    const tempRef = columnRef.current;
+
+    return () => {
+      if (tempRef) {
+        tempRef.removeEventListener('mouseup', resizeHandler);
+      }
+    };
+  }, [resizeHandler]);
+
+  const handleOnClick = useCallback(() => {
+    table.setSortKey(cell.accessorKey, updatePreference);
+  }, [cell.accessorKey, table, updatePreference]);
+
   const columnRef = useRef<HTMLTableHeaderCellElement>(null);
 
   return (
     <div
       ref={columnRef}
       style={{ width: cell.width }}
-      onClick={() => table.setSortKey(cell.accessorKey)}
+      onClick={handleOnClick}
       className="relative hover:bg-gainsboro dark:hover:bg-outer-space select-none touch-none font-normal truncate"
       data-testid="header-cell"
     >

packages/design-system/src/components/table/tableHeader/headerRow.tsx

@@ -18,23 +18,33 @@
  * External dependencies.
  */
 import React from 'react';
-
+import { PreferenceDataValues } from '@cookie-analysis-tool/common';
 /**
  * Internal dependencies.
  */
 import HeaderCell from './headerCell';
 import type { TableOutput } from '../useTable';
-
 interface HeaderRowProps {
   table: TableOutput;
   setIsRowFocused: (state: boolean) => void;
+  updatePreference: (
+    key: string,
+    callback: (prevStatePreference: {
+      [key: string]: unknown;
+    }) => PreferenceDataValues
+  ) => void;
 }
 
-const HeaderRow = ({ table, setIsRowFocused }: HeaderRowProps) => {
+const HeaderRow = ({
+  table,
+  setIsRowFocused,
+  updatePreference,
+}: HeaderRowProps) => {
   return (
     <div className="bg-anti-flash-white dark:bg-charleston-green border-b border-american-silver dark:border-quartz divide-x divide-american-silver dark:divide-quartz flex">
       {table.columns?.map((cell, idx) => (
         <HeaderCell
+          updatePreference={updatePreference}
           key={idx}
           index={idx}
           table={table}

packages/design-system/src/components/table/tableHeader/index.tsx

@@ -18,7 +18,7 @@
  * External dependencies.
  */
 import React, { useCallback } from 'react';
-
+import { PreferenceDataValues } from '@cookie-analysis-tool/common';
 /**
  * Internal dependencies.
  */
@@ -32,13 +32,20 @@ interface TableHeaderProps {
     event: React.MouseEvent<HTMLTableSectionElement, MouseEvent>
   ) => void;
   setIsRowFocused: (state: boolean) => void;
+  updatePreference: (
+    key: string,
+    updater: (prevStatePreference: {
+      [key: string]: unknown;
+    }) => PreferenceDataValues
+  ) => void;
 }
 
 const TableHeader = ({
   table,
   setColumnPosition,
   onRightClick,
   setIsRowFocused,
+  updatePreference,
 }: TableHeaderProps) => {
   const handleRightClick = useCallback(
     (e: React.MouseEvent<HTMLTableSectionElement>) => {
@@ -53,7 +60,11 @@ const TableHeader = ({
 
   return (
     <div onContextMenu={handleRightClick} className="sticky top-0 z-10">
-      <HeaderRow table={table} setIsRowFocused={setIsRowFocused} />
+      <HeaderRow
+        updatePreference={updatePreference}
+        table={table}
+        setIsRowFocused={setIsRowFocused}
+      />
     </div>
   );
 };

packages/design-system/src/components/table/useColumnResizing/index.tsx

@@ -34,24 +34,49 @@ export type ColumnResizingOutput = {
 };
 
 const useColumnResizing = (
-  tableColumns: TableColumn[]
+  tableColumns: TableColumn[],
+  options?: Record<string, number>
 ): ColumnResizingOutput => {
   const tableContainerRef = useRef<HTMLDivElement>(null);
   const [columns, setColumns] = useState<TableColumn[]>([]);
 
   useEffect(() => {
-    const tableWidth =
-      tableContainerRef.current?.getBoundingClientRect().width || 0;
+    if (options) {
+      const tableWidth =
+        tableContainerRef.current?.getBoundingClientRect().width || 0;
+      let newColumns = tableColumns.map((column) => ({
+        ...column,
+        width: options[column.accessorKey],
+      }));
+
+      if (Object.keys(options).length === tableColumns.length) {
+        newColumns = tableColumns.map((column) => ({
+          ...column,
+          width: options[column.accessorKey],
+        }));
+      } else {
+        newColumns = tableColumns.map((column) => ({
+          ...column,
+          width: tableWidth / tableColumns.length,
+        }));
+      }
+
+      setColumns(newColumns);
+    }
+  }, [options, tableColumns]);
 
-    const newColumns = tableColumns.map((column) => {
-      return {
+  useEffect(() => {
+    if (!options) {
+      const tableWidth =
+        tableContainerRef.current?.getBoundingClientRect().width || 0;
+      const newColumns = tableColumns.map((column) => ({
         ...column,
         width: tableWidth / tableColumns.length,
-      };
-    });
+      }));
 
-    setColumns(newColumns);
-  }, [tableColumns]);
+      setColumns(newColumns);
+    }
+  }, [options, tableColumns]);
 
   const onMouseDown = useCallback(
     (