Move refresh documents button from table back to DocumentsTabV2

src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.tsx

@@ -1,9 +1,11 @@
 import { Item, ItemDefinition, PartitionKey, PartitionKeyDefinition, QueryIterator, Resource } from "@azure/cosmos";
-import { FluentProvider, TableRowId } from "@fluentui/react-components";
+import { Button, FluentProvider, TableRowId } from "@fluentui/react-components";
+import { ArrowClockwise16Filled } from "@fluentui/react-icons";
 import Split from "@uiw/react-split";
 import { KeyCodes, QueryCopilotSampleContainerId, QueryCopilotSampleDatabaseId } from "Common/Constants";
 import { getErrorMessage, getErrorStack } from "Common/ErrorHandlingUtils";
 import MongoUtility from "Common/MongoUtility";
+import { StyleConstants } from "Common/StyleConstants";
 import { createDocument } from "Common/dataAccess/createDocument";
 import { deleteDocument } from "Common/dataAccess/deleteDocument";
 import { queryDocuments } from "Common/dataAccess/queryDocuments";
@@ -1457,12 +1459,12 @@ const DocumentsTabComponent: React.FunctionComponent<{
       <div
         className="tab-pane active"
         /* data-bind="
-                  setTemplateReady: true,
+                    setTemplateReady: true,
-                  attr:{
+                    attr:{
-                      id: tabId
+                        id: tabId
-                  },
+                    },
-                  visible: isActive"
+                    visible: isActive"
-                  */
+                    */
         role="tabpanel"
         style={{ display: "flex" }}
       >
@@ -1551,9 +1553,9 @@ const DocumentsTabComponent: React.FunctionComponent<{
                         onClick={() => refreshDocumentsGrid(true)}
                         disabled={!applyFilterButton.enabled}
                         /* data-bind="
-                                              click: refreshDocumentsGrid.bind($data, true),
+                                                click: refreshDocumentsGrid.bind($data, true),
-                                              enable: applyFilterButton.enabled"
+                                                enable: applyFilterButton.enabled"
-                                    */
+                                      */
                         aria-label="Apply filter"
                         tabIndex={0}
                       >
@@ -1565,9 +1567,9 @@ const DocumentsTabComponent: React.FunctionComponent<{
                         <button
                           className="filterbtnstyle queryButton"
                           /* data-bind="
-                                                visible: !isPreferredApiMongoDB && isExecuting,
+                                                  visible: !isPreferredApiMongoDB && isExecuting,
-                                                click: onAbortQueryClick"
+                                                  click: onAbortQueryClick"
-                                      */
+                                        */
                           aria-label="Cancel Query"
                           tabIndex={0}
                         >
@@ -1598,10 +1600,32 @@ const DocumentsTabComponent: React.FunctionComponent<{
         {/* <Split> doesn't like to be a flex child */}
         <div style={{ overflow: "hidden", height: "100%" }}>
           <Split>
-            <div style={{ minWidth: 200, width: "35%" }} ref={tableContainerRef}>
+            <div style={{ minWidth: 200, width: "35%", overflow: "hidden" }} ref={tableContainerRef}>
-              <div style={{ height: "100%", width: "calc(100% - 50px)" }}>
+              <Button
-                {" "}
+                appearance="transparent"
-                {/* Fix to make table not resize beyond parent's width */}
+                aria-label="Refresh"
+                size="small"
+                icon={<ArrowClockwise16Filled />}
+                style={{
+                  position: "relative",
+                  top: 6,
+                  right: 0,
+                  float: "right",
+                  backgroundColor: "white",
+                  zIndex: 1,
+                  color: StyleConstants.AccentMedium,
+                }}
+                onClick={() => refreshDocumentsGrid(false)}
+                onKeyDown={() => refreshDocumentsGrid(false)}
+              />
+              <div
+                style={
+                  {
+                    height: "100%",
+                    width: "calc(100% - 50px)",
+                  } /* Fix to make table not resize beyond parent's width */
+                }
+              >
                 <DocumentsTableComponent
                   items={tableItems}
                   onItemClicked={onDocumentClicked}
@@ -1609,7 +1633,6 @@ const DocumentsTabComponent: React.FunctionComponent<{
                   selectedRows={selectedRows}
                   size={tableContainerSizePx}
                   columnHeaders={columnHeaders}
-                  onRefreshClicked={refreshDocumentsGrid}
                 />
                 <a
                   className="loadMore"

src/Explorer/Tabs/DocumentsTabV2/DocumentsTableComponent.tsx

@@ -1,5 +1,4 @@
 import {
-  Button,
   Menu,
   MenuItem,
   MenuList,
@@ -19,13 +18,10 @@ import {
   TableSelectionCell,
   createTableColumn,
   useArrowNavigationGroup,
-  useFluent,
-  useScrollbarWidth,
   useTableColumnSizing_unstable,
   useTableFeatures,
   useTableSelection,
 } from "@fluentui/react-components";
-import { ArrowClockwise16Filled } from "@fluentui/react-icons";
 import React, { useEffect, useMemo } from "react";
 import { FixedSizeList as List, ListChildComponentProps } from "react-window";
 
@@ -44,7 +40,6 @@ export interface IDocumentsTableComponentProps {
   selectedRows: Set<TableRowId>;
   size: { height: number; width: number };
   columnHeaders: ColumnHeaders;
-  onRefreshClicked: () => void;
   style?: React.CSSProperties;
 }
 
@@ -66,11 +61,7 @@ export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> =
   style,
   size,
   columnHeaders,
-  onRefreshClicked,
 }: IDocumentsTableComponentProps) => {
-  const { targetDocument } = useFluent();
-  const scrollbarWidth = useScrollbarWidth({ targetDocument });
-
   const [activeItemIndex, setActiveItemIndex] = React.useState<number>(undefined);
 
   const initialSizingOptions: TableColumnSizingOptions = {
@@ -113,39 +104,21 @@ export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> =
           ),
         }),
       ].concat(
-        columnHeaders.partitionKeyHeaders.map((pkHeader, index) =>
+        columnHeaders.partitionKeyHeaders.map((pkHeader) =>
           createTableColumn<DocumentsTableComponentItem>({
             columnId: pkHeader,
             compare: (a, b) => a[pkHeader].localeCompare(b[pkHeader]),
             // Show Refresh button on last column
-            renderHeaderCell: () =>
+            renderHeaderCell: () => <span title={pkHeader}>{pkHeader}</span>,
-              index >= columnHeaders.partitionKeyHeaders.length - 1 ? (
+            renderCell: (item) => (
-                <>
+              <TableCellLayout truncate title={item[pkHeader]}>
-                  <span title={pkHeader}>{pkHeader}</span>
+                {item[pkHeader]}
-                  <Button
+              </TableCellLayout>
-                    appearance="transparent"
+            ),
-                    aria-label="Refresh"
-                    size="small"
-                    icon={<ArrowClockwise16Filled />}
-                    style={{ position: "absolute", right: 0 }}
-                    onClick={onRefreshClicked}
-                    onKeyDown={onRefreshClicked}
-                  />
-                </>
-              ) : (
-                <span title={pkHeader}>{pkHeader}</span>
-              ),
-            renderCell: (item) => {
-              return (
-                <TableCellLayout truncate title={item[pkHeader]}>
-                  {item[pkHeader]}
-                </TableCellLayout>
-              );
-            },
           }),
         ),
       ),
-    [columnHeaders.partitionKeyHeaders, onRefreshClicked],
+    [columnHeaders],
   );
 
   const RenderRow = ({ index, style, data }: ReactWindowRenderFnProps) => {
@@ -270,8 +243,6 @@ export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> =
               </MenuPopover>
             </Menu>
           ))}
-          {/** Scrollbar alignment for the header: TODO: This does not work */}
-          <div role="columnheader" className="fui-TableHeaderCell" style={{ width: scrollbarWidth, height: 32 }} />
         </TableRow>
       </TableHeader>
       <TableBody>