random-mirrors
/
cosmos-explorer
mirror of https://github.com/Azure/cosmos-explorer.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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>
This commit is contained in:
bogercraig 2023-09-20 19:34:22 -04:00 committed by GitHub
parent 8fa2721eab
commit c59d31f4c0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 20 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/Explorer/Panes/UploadItemsPane/UploadItemsPane.tsx
View File

@ -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 (