add tooltip to copy SAS URL button

microsoft · Feb 6, 2023 · bc66abf · bc66abf
1 parent 3226302
commit bc66abf
Showing 1 changed file with 17 additions and 4 deletions.
diff --git a/ui/app/src/components/shared/airlock/AirlockRequestFilesSection.tsx b/ui/app/src/components/shared/airlock/AirlockRequestFilesSection.tsx
@@ -1,4 +1,4 @@
-import { MessageBar, MessageBarType, Pivot, PivotItem, PrimaryButton, Stack, TextField } from "@fluentui/react";
+import { MessageBar, MessageBarType, Pivot, PivotItem, PrimaryButton, Stack, TextField, TooltipHost } from "@fluentui/react";
 import React, { useCallback, useEffect, useState } from "react";
 import { HttpMethod, useAuthApiCall } from "../../../hooks/useAuthApiCall";
 import { AirlockRequest, AirlockRequestStatus } from "../../../models/airlock";
@@ -14,7 +14,11 @@ interface AirlockRequestFilesSectionProps {
 
 export const AirlockRequestFilesSection: React.FunctionComponent<AirlockRequestFilesSectionProps> = (props: AirlockRequestFilesSectionProps) => {
 
+  const COPY_TOOL_TIP_DEFAULT_MESSAGE = "Copy to clipboard"
+
+  const [copyToolTipMessage, setCopyToolTipMessage] = useState<string>(COPY_TOOL_TIP_DEFAULT_MESSAGE);
   const [sasUrl, setSasUrl] = useState<string>();
+
   const [sasUrlError, setSasUrlError] = useState(false);
   const [apiSasUrlError, setApiSasUrlError] = useState({} as APIError);
 
@@ -50,6 +54,15 @@ export const AirlockRequestFilesSection: React.FunctionComponent<AirlockRequestF
     }
   };
 
+  const handleCopySasUrl = () => {
+    if (!sasUrl) {
+      return;
+    }
+    navigator.clipboard.writeText(sasUrl);
+    setCopyToolTipMessage("Copied")
+    setTimeout(() => setCopyToolTipMessage(COPY_TOOL_TIP_DEFAULT_MESSAGE), 3000);
+  }
+
   const getAzureCliCommand = (sasUrl: string) => {
     let containerDetails = parseSasUrl(sasUrl)
     if (!containerDetails) {
@@ -85,13 +98,13 @@ export const AirlockRequestFilesSection: React.FunctionComponent<AirlockRequestF
                 <Stack.Item grow>
                   <TextField readOnly value={sasUrl} />
                 </Stack.Item>
-                {
+                <TooltipHost content={copyToolTipMessage}>
                   <PrimaryButton
                     iconProps={{ iconName: 'copy' }}
                     styles={{ root: { minWidth: '40px' } }}
-                    onClick={() => { sasUrl && navigator.clipboard.writeText(sasUrl) }}
+                    onClick={() => { handleCopySasUrl() }}
                   />
-                }
+                </TooltipHost>
               </Stack>
             </Stack.Item>
             {