From eef9a7c1a21c8193ecff6668d2628181b5a4f67e Mon Sep 17 00:00:00 2001
From: Laurent Nguyen <laurent.nguyen@microsoft.com>
Date: Wed, 27 Mar 2024 11:56:16 +0100
Subject: [PATCH] Add refresh button

---
 .../Tabs/DocumentsTabV2/DocumentsTabV2.tsx    | 15 +++---
 .../DocumentsTableComponent.tsx               | 46 +++++++++++--------
 2 files changed, 36 insertions(+), 25 deletions(-)

diff --git a/src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.tsx b/src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.tsx
index 4a50a3083..5e8004417 100644
--- a/src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.tsx
+++ b/src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.tsx
@@ -1167,13 +1167,13 @@ const DocumentsTabComponent: React.FunctionComponent<{
                       value={filterContent}
                       onChange={(e) => setFilterContent(e.target.value)}
                       /*
-    data-bind="
-              W  attr:{
-                    placeholder:isPreferredApiMongoDB?'Type a query predicate (e.g., {´a´:´foo´}), or choose one from the drop down list, or leave empty to query all documents.':'Type a query predicate (e.g., WHERE c.id=´1´), or choose one from the drop down list, or leave empty to query all documents.'
-                },
-                css: { placeholderVisible: filterContent().length === 0 },
-                textInput: filterContent"
-                */
+  data-bind="
+            W  attr:{
+                  placeholder:isPreferredApiMongoDB?'Type a query predicate (e.g., {´a´:´foo´}), or choose one from the drop down list, or leave empty to query all documents.':'Type a query predicate (e.g., WHERE c.id=´1´), or choose one from the drop down list, or leave empty to query all documents.'
+              },
+              css: { placeholderVisible: filterContent().length === 0 },
+              textInput: filterContent"
+              */
                     />
 
                     <datalist id="filtersList" /*data-bind="foreach: lastFilterContents"*/>
@@ -1243,6 +1243,7 @@ const DocumentsTabComponent: React.FunctionComponent<{
                 onSelectedItemsChange={onDocumentsSelectionChange}
                 size={tableContainerSizePx}
                 columnHeaders={columnHeaders}
+                onRefreshClicked={refreshDocumentsGrid}
               />
               <a className="loadMore" role="button" onClick={() => loadNextPage(false)}>
                 Load more
diff --git a/src/Explorer/Tabs/DocumentsTabV2/DocumentsTableComponent.tsx b/src/Explorer/Tabs/DocumentsTabV2/DocumentsTableComponent.tsx
index 169da42ef..19db00d65 100644
--- a/src/Explorer/Tabs/DocumentsTabV2/DocumentsTableComponent.tsx
+++ b/src/Explorer/Tabs/DocumentsTabV2/DocumentsTableComponent.tsx
@@ -1,4 +1,5 @@
 import {
+  Button,
   Menu,
   MenuItem,
   MenuList,
@@ -24,6 +25,7 @@ import {
   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";
 
@@ -41,6 +43,7 @@ export interface IDocumentsTableComponentProps {
   onSelectedItemsChange: (selectedItemsIndices: Set<number>) => void;
   size: { height: number; width: number };
   columnHeaders: ColumnHeaders;
+  onRefreshClicked: () => void;
   style?: React.CSSProperties;
 }
 
@@ -61,6 +64,7 @@ export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> =
   style,
   size,
   columnHeaders,
+  onRefreshClicked,
 }: IDocumentsTableComponentProps) => {
   const { targetDocument } = useFluent();
   const scrollbarWidth = useScrollbarWidth({ targetDocument });
@@ -107,33 +111,39 @@ export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> =
       [
         createTableColumn<DocumentsTableComponentItem>({
           columnId: "id",
-          compare: (a, b) => {
-            return a.id.localeCompare(b.id);
-          },
-          renderHeaderCell: () => {
-            return "id";
-          },
-          renderCell: (item) => {
-            return <TableCellLayout truncate>{item.id}</TableCellLayout>;
-          },
+          compare: (a, b) => a.id.localeCompare(b.id),
+          renderHeaderCell: () => "id",
+          renderCell: (item) => <TableCellLayout truncate>{item.id}</TableCellLayout>,
         }),
       ].concat(
-        columnHeaders.partitionKeyHeaders.map((pkHeader) =>
+        columnHeaders.partitionKeyHeaders.map((pkHeader, index) =>
           createTableColumn<DocumentsTableComponentItem>({
             columnId: pkHeader,
-            compare: (a, b) => {
-              return a[pkHeader].localeCompare(b[pkHeader]);
-            },
-            renderHeaderCell: () => {
-              return `/${pkHeader}`;
-            },
+            compare: (a, b) => a[pkHeader].localeCompare(b[pkHeader]),
+            // Show Refresh button on last column
+            renderHeaderCell: () =>
+              index >= columnHeaders.partitionKeyHeaders.length - 1 ? (
+                <>
+                  <span>{`/${pkHeader}`}</span>
+                  <Button
+                    appearance="transparent"
+                    aria-label="Refresh"
+                    size="small"
+                    icon={<ArrowClockwise16Filled />}
+                    style={{ position: "absolute", right: 0 }}
+                    onClick={onRefreshClicked}
+                  />
+                </>
+              ) : (
+                `/${pkHeader}`
+              ),
             renderCell: (item) => {
               return <TableCellLayout truncate>{item[pkHeader]}</TableCellLayout>;
             },
           }),
         ),
       ),
-    [columnHeaders],
+    [columnHeaders.partitionKeyHeaders, onRefreshClicked],
   );
 
   const RenderRow = ({ index, style, data }: ReactWindowRenderFnProps) => {
@@ -256,7 +266,7 @@ export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> =
               </MenuPopover>
             </Menu>
           ))}
-          {/** Scrollbar alignment for the header */}
+          {/** Scrollbar alignment for the header: TODO: Check if this really works? */}
           <div role="presentation" style={{ width: scrollbarWidth }} />
         </TableRow>
       </TableHeader>