refactor: update code to display user errors

Parkreiner · Parkreiner · commit 734b4f18b3a9 · 2024-02-27T16:41:45.000Z
diff --git a/site/src/components/CopyButton/CopyButton.tsx b/site/src/components/CopyButton/CopyButton.tsx
@@ -32,7 +32,9 @@ export const CopyButton = forwardRef<HTMLButtonElement, CopyButtonProps>(
       buttonStyles,
       tooltipTitle = Language.tooltipTitle,
     } = props;
-    const { showCopiedSuccess, copyToClipboard } = useClipboard(text);
+    const { showCopiedSuccess, copyToClipboard } = useClipboard({
+      textToCopy: text,
+    });
 
     return (
       <Tooltip title={tooltipTitle} placement="top">
diff --git a/site/src/components/CopyableValue/CopyableValue.tsx b/site/src/components/CopyableValue/CopyableValue.tsx
@@ -16,7 +16,9 @@ export const CopyableValue: FC<CopyableValueProps> = ({
   children,
   ...attrs
 }) => {
-  const { showCopiedSuccess, copyToClipboard } = useClipboard(value);
+  const { showCopiedSuccess, copyToClipboard } = useClipboard({
+    textToCopy: value,
+  });
   const clickableProps = useClickable<HTMLSpanElement>(copyToClipboard);
 
   return (
diff --git a/site/src/hooks/useClipboard.test-setup.ts b/site/src/hooks/useClipboard.test-setup.ts
@@ -41,7 +41,11 @@
  *    order of operations involving closure, but you have no idea why the code
  *    is working, and it's impossible to debug.
  */
-import { type UseClipboardResult, useClipboard } from "./useClipboard";
+import {
+  type UseClipboardInput,
+  type UseClipboardResult,
+  useClipboard,
+} from "./useClipboard";
 import { act, renderHook } from "@testing-library/react";
 
 const initialExecCommand = global.document.execCommand;
@@ -95,10 +99,10 @@ function makeMockClipboard(isSecureContext: boolean): MockClipboard {
   };
 }
 
-function renderUseClipboard(textToCopy: string) {
-  return renderHook<UseClipboardResult, { hookText: string }>(
-    ({ hookText }) => useClipboard(hookText),
-    { initialProps: { hookText: textToCopy } },
+function renderUseClipboard(textToCopy: string, displayErrors: boolean) {
+  return renderHook<UseClipboardResult, UseClipboardInput>(
+    (props) => useClipboard(props),
+    { initialProps: { textToCopy, displayErrors } },
   );
 }
 
@@ -154,13 +158,13 @@ export function scheduleClipboardTests({ isHttps }: ScheduleConfig) {
    */
   it("Copies the current text to the user's clipboard", async () => {
     const hookText = "dogs";
-    const { result } = renderUseClipboard(hookText);
+    const { result } = renderUseClipboard(hookText, false);
     await assertClipboardTextUpdate(result, hookText);
   });
 
   it("Should indicate to components not to show successful copy after a set period of time", async () => {
     const hookText = "cats";
-    const { result } = renderUseClipboard(hookText);
+    const { result } = renderUseClipboard(hookText, false);
     await assertClipboardTextUpdate(result, hookText);
 
     setTimeout(() => {
diff --git a/site/src/hooks/useClipboard.ts b/site/src/hooks/useClipboard.ts
@@ -1,7 +1,18 @@
 import { useEffect, useRef, useState } from "react";
+import { displayError as dispatchError } from "components/GlobalSnackbar/utils";
 
 const CLIPBOARD_TIMEOUT_MS = 1_000;
-const COPY_FAILED_MESSAGE = "copyToClipboard: failed to copy text to clipboard";
+const COPY_FAILED_MESSAGE = "Failed to copy text to clipboard";
+
+export type UseClipboardInput = Readonly<{
+  textToCopy: string;
+
+  /**
+   * Indicates whether the user should be notified of an error if the copy
+   * operation fails for whatever reason. Defaults to true.
+   */
+  displayErrors?: boolean;
+}>;
 
 export type UseClipboardResult = Readonly<{
   copyToClipboard: () => Promise<void>;
@@ -27,7 +38,8 @@ export type UseClipboardResult = Readonly<{
   showCopiedSuccess: boolean;
 }>;
 
-export const useClipboard = (textToCopy: string): UseClipboardResult => {
+export const useClipboard = (input: UseClipboardInput): UseClipboardResult => {
+  const { textToCopy, displayErrors = true } = input;
   const [showCopiedSuccess, setShowCopiedSuccess] = useState(false);
   const timeoutIdRef = useRef<number | undefined>();
 
@@ -43,27 +55,31 @@ export const useClipboard = (textToCopy: string): UseClipboardResult => {
     }, CLIPBOARD_TIMEOUT_MS);
   };
 
-  return {
-    showCopiedSuccess,
-    copyToClipboard: async () => {
-      try {
-        await window.navigator.clipboard.writeText(textToCopy);
+  const copyToClipboard = async () => {
+    try {
+      await window.navigator.clipboard.writeText(textToCopy);
+      handleSuccessfulCopy();
+    } catch (err) {
+      const fallbackCopySuccessful = simulateClipboardWrite(textToCopy);
+
+      if (fallbackCopySuccessful) {
         handleSuccessfulCopy();
-      } catch (err) {
-        const copySuccessful = simulateClipboardWrite(textToCopy);
-        if (copySuccessful) {
-          handleSuccessfulCopy();
-        } else {
-          const wrappedErr = new Error(COPY_FAILED_MESSAGE);
-          if (err instanceof Error) {
-            wrappedErr.stack = err.stack;
-          }
-
-          console.error(wrappedErr);
-        }
+        return;
       }
-    },
+
+      const wrappedErr = new Error(COPY_FAILED_MESSAGE);
+      if (err instanceof Error) {
+        wrappedErr.stack = err.stack;
+      }
+
+      console.error(wrappedErr);
+      if (displayErrors) {
+        dispatchError(COPY_FAILED_MESSAGE);
+      }
+    }
   };
+
+  return { showCopiedSuccess, copyToClipboard };
 };
 
 /**
@@ -112,17 +128,17 @@ function simulateClipboardWrite(textToCopy: string): boolean {
    *
    * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Clipboard}
    */
-  let isCopied: boolean;
+  let copySuccessful: boolean;
   try {
-    isCopied = document?.execCommand("copy") ?? false;
+    copySuccessful = document?.execCommand("copy") ?? false;
   } catch {
-    isCopied = false;
+    copySuccessful = false;
   }
 
   dummyInput.remove();
   if (previousFocusTarget instanceof HTMLElement) {
     previousFocusTarget.focus();
   }
 
-  return isCopied;
+  return copySuccessful;
 }
diff --git a/site/src/pages/TemplatePage/TemplateEmbedPage/TemplateEmbedPage.tsx b/site/src/pages/TemplatePage/TemplateEmbedPage/TemplateEmbedPage.tsx
@@ -47,19 +47,26 @@ interface TemplateEmbedPageViewProps {
   templateParameters?: TemplateVersionParameter[];
 }
 
+function getClipboardCopyContent(
+  templateName: string,
+  buttonValues: ButtonValues | undefined,
+): string {
+  const deploymentUrl = `${window.location.protocol}//${window.location.host}`;
+  const createWorkspaceUrl = `${deploymentUrl}/templates/${templateName}/workspace`;
+  const createWorkspaceParams = new URLSearchParams(buttonValues);
+  const buttonUrl = `${createWorkspaceUrl}?${createWorkspaceParams.toString()}`;
+
+  return `[![Open in Coder](${deploymentUrl}/open-in-coder.svg)](${buttonUrl})`;
+}
+
 export const TemplateEmbedPageView: FC<TemplateEmbedPageViewProps> = ({
   template,
   templateParameters,
 }) => {
-  const [buttonValues, setButtonValues] = useState<ButtonValues | undefined>(
-    undefined,
-  );
-  const deploymentUrl = `${window.location.protocol}//${window.location.host}`;
-  const createWorkspaceUrl = `${deploymentUrl}/templates/${template.name}/workspace`;
-  const createWorkspaceParams = new URLSearchParams(buttonValues);
-  const buttonUrl = `${createWorkspaceUrl}?${createWorkspaceParams.toString()}`;
-  const buttonMkdCode = `[![Open in Coder](${deploymentUrl}/open-in-coder.svg)](${buttonUrl})`;
-  const clipboard = useClipboard(buttonMkdCode);
+  const [buttonValues, setButtonValues] = useState<ButtonValues | undefined>();
+  const clipboard = useClipboard({
+    textToCopy: getClipboardCopyContent(template.name, buttonValues),
+  });
 
   // template parameters is async so we need to initialize the values after it
   // is loaded
