From c6cec71fd95f4731908677b3202baf130e1ed29f Mon Sep 17 00:00:00 2001
From: Laurent Nguyen <laurent.nguyen@microsoft.com>
Date: Thu, 29 Feb 2024 11:15:29 +0100
Subject: [PATCH] Fix selection behavior and some layout issue

---
 .../Tabs/DocumentsTabV2/DocumentsTabV2.tsx    | 24 +++++++++++--------
 .../DocumentsTableComponent.tsx               | 10 ++++++--
 2 files changed, 22 insertions(+), 12 deletions(-)

diff --git a/src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.tsx b/src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.tsx
index c63050c4f..1b724779d 100644
--- a/src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.tsx
+++ b/src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.tsx
@@ -442,16 +442,18 @@ const DocumentsTabComponent: React.FunctionComponent<{
       setCurrentDocument(content);
     });
 
-  return <FluentProvider theme={dataExplorerLightTheme} style={{ overflow: "hidden" }}>
+  return <FluentProvider theme={dataExplorerLightTheme} style={{ height: "100%" }}>
     <div
-      className="tab-pane active tabdocuments flexContainer"
-      data-bind="
+      className="tab-pane active"
+      /* data-bind="
     setTemplateReady: true,
     attr:{
         id: tabId
     },
     visible: isActive"
+    */
       role="tabpanel"
+      style={{ display: "flex" }}
     >
       {/* <!-- Filter - Start --> */}
       {isFilterCreated &&
@@ -548,13 +550,15 @@ const DocumentsTabComponent: React.FunctionComponent<{
       }
       {/* <!-- Filter - End --> */}
 
-      <Split style={{ height: "100%" }}>
-        <div style={{ minWidth: "20%", width: "20%" }}>
-          <DocumentsTableComponent items={tableItems} onSelectedItem={onSelectedDocument} />
-        </div>
-        <div style={{ minWidth: "20%", flex: 1 }}><pre>{JSON.stringify(currentDocument, undefined, " ")}</pre></div>
-      </Split>
-
+      {/* <Split> doesn't like to be a flex child */}
+      <div style={{ overflow: "hidden" }}>
+        <Split>
+          <div style={{ minWidth: 440, width: "20%" }}>
+            <DocumentsTableComponent style={{ width: "100%", height: "100%" }} items={tableItems} onSelectedItem={onSelectedDocument} />
+          </div>
+          <div style={{ minWidth: "20%" }}><pre>{JSON.stringify(currentDocument, undefined, " ")}</pre></div>
+        </Split>
+      </div>
     </div >
   </FluentProvider>;
 }
diff --git a/src/Explorer/Tabs/DocumentsTabV2/DocumentsTableComponent.tsx b/src/Explorer/Tabs/DocumentsTabV2/DocumentsTableComponent.tsx
index 5e3f7834b..a1001e533 100644
--- a/src/Explorer/Tabs/DocumentsTabV2/DocumentsTableComponent.tsx
+++ b/src/Explorer/Tabs/DocumentsTabV2/DocumentsTableComponent.tsx
@@ -46,9 +46,11 @@ const columns: TableColumnDefinition<DocumentsTableComponentItem>[] = [
 export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> = ({
   items, onSelectedItem, style,
 }: IDocumentsTableComponentProps) => {
+  const [activeItemIndex, setActiveItemIndex] = React.useState<number>(undefined);
+
   const [columnSizingOptions, setColumnSizingOptions] = React.useState<TableColumnSizingOptions>({
     id: {
-      idealWidth: 300,
+      idealWidth: 280,
       minWidth: 273,
     },
     type: {
@@ -126,7 +128,11 @@ export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> =
   // Load document depending on selection
   useEffect(() => {
     if (selectedRows.size === 1 && items.length > 0) {
-      onSelectedItem(selectedRows.values().next().value);
+      const newActiveItemIndex = selectedRows.values().next().value;
+      if (newActiveItemIndex !== activeItemIndex) {
+        onSelectedItem(newActiveItemIndex);
+        setActiveItemIndex(newActiveItemIndex);
+      }
     }
   }, [selectedRows, items]);