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,
-                  attr:{
-                      id: tabId
-                  },
-                  visible: isActive"
-                  */
+                    setTemplateReady: true,
+                    attr:{
+                        id: tabId
+                    },
+                    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),
-                                              enable: applyFilterButton.enabled"
-                                    */
+                                                click: refreshDocumentsGrid.bind($data, true),
+                                                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,
-                                                click: onAbortQueryClick"
-                                      */
+                                                  visible: !isPreferredApiMongoDB && isExecuting,
+                                                  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={{ height: "100%", width: "calc(100% - 50px)" }}>
-                {" "}
-                {/* Fix to make table not resize beyond parent's width */}
+            <div style={{ minWidth: 200, width: "35%", overflow: "hidden" }} ref={tableContainerRef}>
+              <Button
+                appearance="transparent"
+                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"