From 833d677d20984a29d56f482894283f3cdb15deae Mon Sep 17 00:00:00 2001
From: Laurent Nguyen <laurent.nguyen@microsoft.com>
Date: Thu, 22 Aug 2024 17:00:49 +0200
Subject: [PATCH] Change persistence format for column width (#1944)

---
 .../DocumentsTabV2/DocumentsTabStateUtil.ts   |  2 +-
 .../DocumentsTableComponent.tsx               | 31 ++++++++++++++-----
 2 files changed, 25 insertions(+), 8 deletions(-)

diff --git a/src/Explorer/Tabs/DocumentsTabV2/DocumentsTabStateUtil.ts b/src/Explorer/Tabs/DocumentsTabV2/DocumentsTabStateUtil.ts
index fb01bdc54..aaccfa3ac 100644
--- a/src/Explorer/Tabs/DocumentsTabV2/DocumentsTabStateUtil.ts
+++ b/src/Explorer/Tabs/DocumentsTabV2/DocumentsTabStateUtil.ts
@@ -14,7 +14,7 @@ export enum SubComponentName {
 }
 
 export type ColumnSizesMap = { [columnId: string]: WidthDefinition };
-export type WidthDefinition = { idealWidth?: number; minWidth?: number };
+export type WidthDefinition = { widthPx: number };
 export type TabDivider = { leftPaneWidthPercent: number };
 
 /**
diff --git a/src/Explorer/Tabs/DocumentsTabV2/DocumentsTableComponent.tsx b/src/Explorer/Tabs/DocumentsTabV2/DocumentsTableComponent.tsx
index 7d785f6b1..127c5d6d9 100644
--- a/src/Explorer/Tabs/DocumentsTabV2/DocumentsTableComponent.tsx
+++ b/src/Explorer/Tabs/DocumentsTabV2/DocumentsTableComponent.tsx
@@ -28,7 +28,6 @@ import {
   readSubComponentState,
   saveSubComponentState,
   SubComponentName,
-  WidthDefinition,
 } from "Explorer/Tabs/DocumentsTabV2/DocumentsTabStateUtil";
 import { INITIAL_SELECTED_ROW_INDEX, useDocumentsTabStyles } from "Explorer/Tabs/DocumentsTabV2/DocumentsTabV2";
 import { selectionHelper } from "Explorer/Tabs/DocumentsTabV2/SelectionHelper";
@@ -68,11 +67,10 @@ interface ReactWindowRenderFnProps extends ListChildComponentProps {
   data: TableRowData[];
 }
 
-const defaultSize: WidthDefinition = {
+const defaultSize = {
   idealWidth: 200,
   minWidth: 50,
 };
-
 export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> = ({
   items,
   onSelectedRowsChange,
@@ -86,16 +84,28 @@ export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> =
   const [columnSizingOptions, setColumnSizingOptions] = React.useState<TableColumnSizingOptions>(() => {
     const columnIds = ["id"].concat(columnHeaders.partitionKeyHeaders);
     const columnSizesMap: ColumnSizesMap = readSubComponentState(SubComponentName.ColumnSizes, collection, {});
-    const columnSizesPx: ColumnSizesMap = {};
+    const columnSizesPx: TableColumnSizingOptions = {};
     columnIds.forEach((columnId) => {
-      columnSizesPx[columnId] = (columnSizesMap && columnSizesMap[columnId]) || defaultSize;
+      if (
+        !columnSizesMap ||
+        !columnSizesMap[columnId] ||
+        columnSizesMap[columnId].widthPx === undefined ||
+        isNaN(columnSizesMap[columnId].widthPx)
+      ) {
+        columnSizesPx[columnId] = defaultSize;
+      } else {
+        columnSizesPx[columnId] = {
+          idealWidth: columnSizesMap[columnId].widthPx,
+          minWidth: 50,
+        };
+      }
     });
     return columnSizesPx;
   });
 
   const styles = useDocumentsTabStyles();
 
-  const onColumnResize = React.useCallback((_, { columnId, width }) => {
+  const onColumnResize = React.useCallback((_, { columnId, width }: { columnId: string; width: number }) => {
     setColumnSizingOptions((state) => {
       const newSizingOptions = {
         ...state,
@@ -105,7 +115,14 @@ export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> =
         },
       };
 
-      saveSubComponentState(SubComponentName.ColumnSizes, collection, newSizingOptions, true);
+      const persistentSizes = Object.keys(newSizingOptions).reduce((acc, key) => {
+        acc[key] = {
+          widthPx: newSizingOptions[key].idealWidth,
+        };
+        return acc;
+      }, {} as ColumnSizesMap);
+
+      saveSubComponentState(SubComponentName.ColumnSizes, collection, persistentSizes, true);
 
       return newSizingOptions;
     });