coder · Parkreiner · Feb 1, 2024 · Jan 26, 2024 · Jan 26, 2024 · Jan 26, 2024
diff --git a/site/src/api/queries/users.ts b/site/src/api/queries/users.ts
@@ -13,6 +13,7 @@ import type {
   UpdateUserAppearanceSettingsRequest,
   UsersRequest,
   User,
+  GenerateAPIKeyResponse,
 } from "api/typesGenerated";
 import { getAuthorizationKey } from "./authCheck";
 import { getMetadataAsJSON } from "utils/metadata";
@@ -134,6 +135,13 @@ export const me = (): UseQueryOptions<User> & {
   };
 };
 
+export function apiKey(): UseQueryOptions<GenerateAPIKeyResponse> {
+  return {
+    queryKey: [...meKey, "apiKey"],
+    queryFn: () => API.getApiKey(),
+  };
+}
+
 export const hasFirstUser = () => {
   return {
     queryKey: ["hasFirstUser"],

diff --git a/site/src/components/CodeExample/CodeExample.tsx b/site/src/components/CodeExample/CodeExample.tsx
@@ -1,7 +1,8 @@
-import { type FC } from "react";
+import { type FC, type KeyboardEvent, type MouseEvent, useRef } from "react";
 import { type Interpolation, type Theme } from "@emotion/react";
 import { MONOSPACE_FONT_FAMILY } from "theme/constants";
 import { CopyButton } from "../CopyButton/CopyButton";
+import { visuallyHidden } from "@mui/utils";
 
 export interface CodeExampleProps {
   code: string;
@@ -14,19 +15,72 @@ export interface CodeExampleProps {
  */
 export const CodeExample: FC<CodeExampleProps> = ({
   code,
-  secret,
   className,
+
+  // Defaulting to true to be on the safe side; you should have to opt out of
+  // the secure option, not remember to opt in
+  secret = true,
 }) => {
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const triggerButton = (event: KeyboardEvent | MouseEvent) => {
+    if (event.target !== buttonRef.current) {
+      buttonRef.current?.click();
+    }
+  };
+
   return (
-    <div css={styles.container} className={className}>
-      <code css={[styles.code, secret && styles.secret]}>{code}</code>
-      <CopyButton text={code} />
+    /* eslint-disable-next-line jsx-a11y/no-static-element-interactions --
+       Expanding clickable area of CodeExample for better ergonomics, but don't
+       want to change the semantics of the HTML elements being rendered
+    */
+    <div
+      css={styles.container}
+      className={className}
+      onClick={triggerButton}
+      onKeyDown={(event) => {
+        if (event.key === "Enter") {
+          triggerButton(event);
+        }
+      }}
+      onKeyUp={(event) => {
+        if (event.key === " ") {
+          triggerButton(event);
+        }
+      }}
+    >
+      <code css={[styles.code, secret && styles.secret]}>
+        {secret ? (
+          <>
+            {/*
+             * Obfuscating text even though we have the characters replaced with
+             * discs in the CSS for two reasons:
+             * 1. The CSS property is non-standard and won't work everywhere;
+             *    MDN warns you not to rely on it alone in production
+             * 2. Even with it turned on and supported, the plaintext is still
+             *    readily available in the HTML itself
+             */}
+            <span aria-hidden>{obfuscateText(code)}</span>
+            <span css={{ ...visuallyHidden }}>
+              Encrypted text. Please access via the copy button.
+            </span>
+          </>
+        ) : (
+          <>{code}</>
+        )}
+      </code>
+
+      <CopyButton ref={buttonRef} text={code} />
     </div>
   );
 };
 
+function obfuscateText(text: string): string {
+  return new Array(text.length).fill("*").join("");
+}
+
 const styles = {
   container: (theme) => ({
+    cursor: "pointer",
     display: "flex",
     flexDirection: "row",
     alignItems: "center",
@@ -37,6 +91,10 @@ const styles = {
     padding: 8,
     lineHeight: "150%",
     border: `1px solid ${theme.experimental.l1.outline}`,
+
+    "&:hover": {
+      backgroundColor: theme.experimental.l2.hover.background,
+    },
   }),
 
   code: {

diff --git a/site/src/components/CopyButton/CopyButton.tsx b/site/src/components/CopyButton/CopyButton.tsx
@@ -2,7 +2,7 @@ import IconButton from "@mui/material/Button";
 import Tooltip from "@mui/material/Tooltip";
 import Check from "@mui/icons-material/Check";
 import { css, type Interpolation, type Theme } from "@emotion/react";
-import { type FC, type ReactNode } from "react";
+import { forwardRef, type MouseEventHandler, type ReactNode } from "react";
 import { useClipboard } from "hooks/useClipboard";
 import { FileCopyIcon } from "../Icons/FileCopyIcon";
 
@@ -13,6 +13,7 @@ interface CopyButtonProps {
   wrapperStyles?: Interpolation<Theme>;
   buttonStyles?: Interpolation<Theme>;
   tooltipTitle?: string;
+  onClick?: MouseEventHandler;
 }
 
 export const Language = {
@@ -23,36 +24,44 @@ export const Language = {
 /**
  * Copy button used inside the CodeBlock component internally
  */
-export const CopyButton: FC<CopyButtonProps> = ({
-  text,
-  ctaCopy,
-  wrapperStyles,
-  buttonStyles,
-  tooltipTitle = Language.tooltipTitle,
-}) => {
-  const { isCopied, copy: copyToClipboard } = useClipboard(text);
+export const CopyButton = forwardRef<HTMLButtonElement, CopyButtonProps>(
+  (props, ref) => {
+    const {
+      text,
+      ctaCopy,
+      wrapperStyles,
+      buttonStyles,
+      onClick: outsideOnClick,
+      tooltipTitle = Language.tooltipTitle,
+    } = props;
+    const { isCopied, copyToClipboard } = useClipboard(text);
 
-  return (
-    <Tooltip title={tooltipTitle} placement="top">
-      <div css={[{ display: "flex" }, wrapperStyles]}>
-        <IconButton
-          css={[styles.button, buttonStyles]}
-          onClick={copyToClipboard}
-          size="small"
-          aria-label={Language.ariaLabel}
-          variant="text"
-        >
-          {isCopied ? (
-            <Check css={styles.copyIcon} />
-          ) : (
-            <FileCopyIcon css={styles.copyIcon} />
-          )}
-          {ctaCopy && <div css={{ marginLeft: 8 }}>{ctaCopy}</div>}
-        </IconButton>
-      </div>
-    </Tooltip>
-  );
-};
+    return (
+      <Tooltip title={tooltipTitle} placement="top">
+        <div css={[{ display: "flex" }, wrapperStyles]}>
+          <IconButton
+            ref={ref}
+            css={[styles.button, buttonStyles]}
+            size="small"
+            aria-label={Language.ariaLabel}
+            variant="text"
+            onClick={(event) => {
+              void copyToClipboard();
+              outsideOnClick?.(event);
+            }}
+          >
+            {isCopied ? (
+              <Check css={styles.copyIcon} />
+            ) : (
+              <FileCopyIcon css={styles.copyIcon} />
+            )}
+            {ctaCopy && <div css={{ marginLeft: 8 }}>{ctaCopy}</div>}
+          </IconButton>
+        </div>
+      </Tooltip>
+    );
+  },
+);
 
 const styles = {
   button: (theme) => css`

diff --git a/site/src/components/CopyableValue/CopyableValue.tsx b/site/src/components/CopyableValue/CopyableValue.tsx
@@ -16,8 +16,8 @@ export const CopyableValue: FC<CopyableValueProps> = ({
   children,
   ...attrs
 }) => {
-  const { isCopied, copy } = useClipboard(value);
-  const clickableProps = useClickable<HTMLSpanElement>(copy);
+  const { isCopied, copyToClipboard } = useClipboard(value);
+  const clickableProps = useClickable<HTMLSpanElement>(copyToClipboard);
 
   return (
     <Tooltip

diff --git a/site/src/hooks/useClipboard.test.ts b/site/src/hooks/useClipboard.test.ts
@@ -0,0 +1,136 @@
+/**
+ * userEvent.setup is supposed to stub out a clipboard for you, since it doesn't
+ * normally exist in JSDOM. Spent ages trying to figure out how to make it work,
+ * but couldn't figure it out. So the code is using a home-grown mock.
+ *
+ * The bad news is that not using userEvent.setup means that you have to test
+ * all events through fireEvent instead of userEvent
+ *
+ * @todo Figure out how to swap userEvent in, just to help make sure that the
+ * tests mirror actual user flows more closely.
+ */
+import { fireEvent, renderHook, waitFor } from "@testing-library/react";
+import { useClipboard } from "./useClipboard";
+
+type MockClipboard = Readonly<
+  Clipboard & {
+    resetText: () => void;
+  }
+>;
+
+function makeMockClipboard(): MockClipboard {
+  let mockClipboardValue = "";
+
+  return {
+    readText: async () => mockClipboardValue,
+    writeText: async (newText) => {
+      mockClipboardValue = newText;
+    },
+    resetText: () => {
+      mockClipboardValue = "";
+    },
+
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+    dispatchEvent: jest.fn(),
+    read: jest.fn(),
+    write: jest.fn(),
+  };
+}
+
+const mockClipboard = makeMockClipboard();
+
+beforeAll(() => {
+  const originalNavigator = window.navigator;
+  jest.spyOn(window, "navigator", "get").mockImplementation(() => {
+    return { ...originalNavigator, clipboard: mockClipboard };
+  });
+
+  jest.spyOn(document, "hasFocus").mockImplementation(() => true);
+  jest.useFakeTimers();
+});
+
+afterEach(() => {
+  mockClipboard.resetText();
+});
+
+afterAll(() => {
+  jest.resetAllMocks();
+  jest.useRealTimers();
+});
+
+async function prepareInitialClipboardValue(clipboardText: string) {
+  /* eslint-disable-next-line testing-library/render-result-naming-convention --
+     Need to pass the whole render result back */
+  const rendered = renderHook(({ text }) => useClipboard(text), {
+    initialProps: { text: clipboardText },
+  });
+
+  await rendered.result.current.copyToClipboard();
+  await waitFor(() => expect(rendered.result.current.isCopied).toBe(true));
+
+  return rendered;
+}
+
+const text1 = "blah";
+const text2 = "nah";
+
+describe(useClipboard.name, () => {
+  describe(".copyToClipboard", () => {
+    it("Injects a new value into the clipboard when called", async () => {
+      await prepareInitialClipboardValue(text1);
+    });
+
+    it("Injects the most recent value the hook rendered with", async () => {
+      const { result, rerender } = await prepareInitialClipboardValue(text1);
+      rerender({ text: text2 });
+      await waitFor(() => expect(result.current.isCopied).toBe(false));
+
+      await result.current.copyToClipboard();
+      await waitFor(() => expect(result.current.isCopied).toBe(true));
+    });
+
+    it("Maintains a stable reference as long as text doesn't change", async () => {
+      const { result, rerender } = await prepareInitialClipboardValue(text1);
+      const originalFunction = result.current.copyToClipboard;
+
+      rerender({ text: text1 });
+      expect(result.current.copyToClipboard).toBe(originalFunction);
+
+      rerender({ text: text2 });
+      expect(result.current.copyToClipboard).not.toBe(originalFunction);
+    });
+  });
+
+  describe(".isCopied", () => {
+    it("Does not change its value if the clipboard never changes", async () => {
+      const { result } = await prepareInitialClipboardValue(text1);
+      for (let i = 1; i <= 10; i++) {
+        setTimeout(() => {
+          expect(result.current.isCopied).toBe(true);
+        }, i * 10_000);
+      }
+
+      await jest.advanceTimersByTimeAsync(100_000);
+    });
+
+    it("Listens to the user copying different text while in the same tab", async () => {
+      const { result } = await prepareInitialClipboardValue(text1);
+
+      await mockClipboard.writeText(text2);
+      fireEvent(window, new Event("copy"));
+      await waitFor(() => expect(result.current.isCopied).toBe(false));
+    });
+
+    it("Re-syncs state when user navigates to a different tab and comes back", async () => {
+      const { result, rerender } = await prepareInitialClipboardValue(text1);
+      rerender({ text: text2 });
+      await waitFor(() => expect(result.current.isCopied).toBe(false));
+
+      fireEvent(window, new FocusEvent("blur"));
+      await mockClipboard.writeText(text2);
+      fireEvent(window, new FocusEvent("focus"));
+      await waitFor(() => expect(result.current.isCopied).toBe(true));
+    });
+  });
+});