From c59d31f4c0a324dc1dba73a091a26bab6d48ed57 Mon Sep 17 00:00:00 2001
From: bogercraig <124094535+bogercraig@users.noreply.github.com>
Date: Wed, 20 Sep 2023 19:34:22 -0400
Subject: [PATCH] File Upload Tooltip (#1621)

* Added tooltip to the filename and status columns.  There is an InfoTooltip function that can reduce the boilerplate.

* Changed tooltip to be constructed with the DetailsList column and changed orientation to rightCenter.
That orientation prevents issues with topCenter orientation getting off center from the width of the cell.
Also looks a bit nicer, but will get feedback.

* Updated formatting.

* Removing uneccessary column formatting.

---------

Co-authored-by: Craig Boger <craig.boger@microsoft.com>
---
 .../Panes/UploadItemsPane/UploadItemsPane.tsx | 24 +++++++++++++++----
 1 file changed, 20 insertions(+), 4 deletions(-)

diff --git a/src/Explorer/Panes/UploadItemsPane/UploadItemsPane.tsx b/src/Explorer/Panes/UploadItemsPane/UploadItemsPane.tsx
index 388b8d944..c3cfee4ea 100644
--- a/src/Explorer/Panes/UploadItemsPane/UploadItemsPane.tsx
+++ b/src/Explorer/Panes/UploadItemsPane/UploadItemsPane.tsx
@@ -1,8 +1,15 @@
-import { DetailsList, DetailsListLayoutMode, IColumn, SelectionMode } from "@fluentui/react";
+import {
+  DetailsList,
+  DetailsListLayoutMode,
+  DirectionalHint,
+  IColumn,
+  SelectionMode,
+  TooltipHost,
+} from "@fluentui/react";
 import { Upload } from "Common/Upload/Upload";
 import { UploadDetailsRecord } from "Contracts/ViewModels";
-import React, { ChangeEvent, FunctionComponent, useState } from "react";
 import { logConsoleError } from "Utils/NotificationConsoleUtils";
+import React, { ChangeEvent, FunctionComponent, useState } from "react";
 import { getErrorMessage } from "../../Tables/Utilities";
 import { useSelectedNode } from "../../useSelectedNode";
 import { RightPaneForm, RightPaneFormProps } from "../RightPaneForm/RightPaneForm";
@@ -74,12 +81,21 @@ export const UploadItemsPane: FunctionComponent = () => {
   ];
 
   const _renderItemColumn = (item: UploadDetailsRecord, index: number, column: IColumn) => {
+    let fieldContent: string;
+    const tooltipId = `tooltip-${index}-${column.key}`;
+
     switch (column.key) {
       case "status":
-        return `${item.numSucceeded} created, ${item.numThrottled} throttled, ${item.numFailed} errors`;
+        fieldContent = `${item.numSucceeded} created, ${item.numThrottled} throttled, ${item.numFailed} errors`;
+        break;
       default:
-        return item.fileName;
+        fieldContent = item.fileName;
     }
+    return (
+      <TooltipHost content={fieldContent} id={tooltipId} directionalHint={DirectionalHint.rightCenter}>
+        {fieldContent}
+      </TooltipHost>
+    );
   };
 
   return (