Feb 28, 2024 · Feb 25, 2024 · Feb 25, 2024 · Feb 25, 2024 · Feb 26, 2024 · Feb 26, 2024
diff --git a/site/src/components/CodeExample/CodeExample.tsx b/site/src/components/CodeExample/CodeExample.tsx
 }) => {
  const buttonRef = useRef<HTMLButtonElement>(null);
  const triggerButton = (event: KeyboardEvent | MouseEvent) => {
    if (event.target !== buttonRef.current) {
    const clickTriggeredOutsideButton =
      event.target instanceof HTMLElement &&
      !buttonRef.current?.contains(event.target);

    if (clickTriggeredOutsideButton) {
      buttonRef.current?.click();
    }
  };
diff --git a/site/src/components/CopyButton/CopyButton.tsx b/site/src/components/CopyButton/CopyButton.tsx
      buttonStyles,
      tooltipTitle = Language.tooltipTitle,
    } = props;
    const { isCopied, copyToClipboard } = useClipboard(text);
    const { showCopiedSuccess, copyToClipboard } = useClipboard({
      textToCopy: text,
    });

    return (
      <Tooltip title={tooltipTitle} placement="top">
            variant="text"
            onClick={copyToClipboard}
          >
            {isCopied ? (
            {showCopiedSuccess ? (
              <Check css={styles.copyIcon} />
            ) : (
              <FileCopyIcon css={styles.copyIcon} />
diff --git a/site/src/components/CopyableValue/CopyableValue.tsx b/site/src/components/CopyableValue/CopyableValue.tsx
  children,
  ...attrs
 }) => {
  const { isCopied, copyToClipboard } = useClipboard(value);
  const { showCopiedSuccess, copyToClipboard } = useClipboard({
    textToCopy: value,
  });
  const clickableProps = useClickable<HTMLSpanElement>(copyToClipboard);

  return (
    <Tooltip
      title={isCopied ? "Copied!" : "Click to copy"}
      title={showCopiedSuccess ? "Copied!" : "Click to copy"}
      placement={placement}
      PopperProps={PopperProps}
    >
diff --git a/site/src/components/GlobalSnackbar/GlobalSnackbar.tsx b/site/src/components/GlobalSnackbar/GlobalSnackbar.tsx
 };

 export const GlobalSnackbar: FC = () => {
  const [open, setOpen] = useState<boolean>(false);
  const [notification, setNotification] = useState<NotificationMsg>();

  const [notificationMsg, setNotificationMsg] = useState<NotificationMsg>();
  useCustomEvent<NotificationMsg>(SnackbarEventType, (event) => {
    setNotification(event.detail);
    setOpen(true);
    setNotificationMsg(event.detail);
  });

  if (!notification) {
  const hasNotification = notificationMsg !== undefined;
  if (!hasNotification) {
    return null;
  }

  return (
    <EnterpriseSnackbar
      key={notification.msg}
      open={open}
      variant={variantFromMsgType(notification.msgType)}
      onClose={() => setOpen(false)}
      autoHideDuration={notification.msgType === MsgType.Error ? 22000 : 6000}
      key={notificationMsg.msg}
      open={hasNotification}
      variant={variantFromMsgType(notificationMsg.msgType)}
      onClose={() => setNotificationMsg(undefined)}
      autoHideDuration={
        notificationMsg.msgType === MsgType.Error ? 22000 : 6000
      }
      anchorOrigin={{ vertical: "bottom", horizontal: "right" }}
      message={
        <div css={{ display: "flex" }}>
          {notification.msgType === MsgType.Error && (
          {notificationMsg.msgType === MsgType.Error && (
            <ErrorIcon css={styles.errorIcon} />
          )}

          <div css={{ maxWidth: 670 }}>
            <span css={styles.messageTitle}>{notification.msg}</span>
            <span css={styles.messageTitle}>{notificationMsg.msg}</span>

            {notification.additionalMsgs &&
 notification.additionalMsgs.map((msg, index) => (
            {notificationMsg.additionalMsgs &&
 notificationMsg.additionalMsgs.map((msg, index) => (
                <AdditionalMessageDisplay key={index} message={msg} />
              ))}
          </div>
diff --git a/site/src/hooks/useClickableTableRow.test.tsx → site/src/hooks/useClickable.test.tsx b/site/src/hooks/useClickableTableRow.test.tsx → site/src/hooks/useClickable.test.tsx
diff --git a/site/src/hooks/useClipboard-http.test.ts b/site/src/hooks/useClipboard-http.test.ts
 /**
 * This test is for all useClipboard functionality, with the browser context
 * set to insecure (HTTP connections).
 *
 * See useClipboard.test-setup.ts for more info on why this file is set up the
 * way that it is.
 */
 import { useClipboard } from "./useClipboard";
 import { scheduleClipboardTests } from "./useClipboard.test-setup";

 describe(useClipboard.name, () => {
  describe("HTTP (non-secure) connections", () => {
    scheduleClipboardTests({ isHttps: false });
  });
 });
diff --git a/site/src/hooks/useClipboard-https.test.ts b/site/src/hooks/useClipboard-https.test.ts
 /**
 * This test is for all useClipboard functionality, with the browser context
 * set to secure (HTTPS connections).
 *
 * See useClipboard.test-setup.ts for more info on why this file is set up the
 * way that it is.
 */
 import { useClipboard } from "./useClipboard";
 import { scheduleClipboardTests } from "./useClipboard.test-setup";

 describe(useClipboard.name, () => {
  describe("HTTPS (secure/default) connections", () => {
    scheduleClipboardTests({ isHttps: true });
  });
 });
diff --git a/site/src/hooks/useClipboard.test-setup.tsx b/site/src/hooks/useClipboard.test-setup.tsx
 /**
 * @file This is a very weird test setup.
 *
 * There are two main things that it's fighting against to insure that the
 * clipboard functionality is working as expected:
 * 1. userEvent.setup's default global behavior
 * 2. The fact that we need to reuse the same set of test cases for two separate
 *    contexts (secure and insecure), each with their own version of global
 *    state.
 *
 * The goal of this file is to provide a shared set of test behavior that can
 * be imported into two separate test files (one for HTTP, one for HTTPS),
 * without any risk of global state conflicts.
 *
 * ---
 * For (1), normally you could call userEvent.setup to enable clipboard mocking,
 * but userEvent doesn't expose a teardown function. It also modifies the global
 * scope for the whole test file, so enabling just one userEvent session will
 * make a mock clipboard exist for all other tests, even though you didn't tell
 * them to set up a session. The mock also assumes that the clipboard API will
 * always be available, which is not true on HTTP-only connections
 *
 * Since these tests need to split hairs and differentiate between HTTP and
 * HTTPS connections, setting up a single userEvent is disastrous. It will make
 * all the tests pass, even if they shouldn't. Have to avoid that by creating a
 * custom clipboard mock.
 *
 * ---
 * For (2), we're fighting against Jest's default behavior, which is to treat
 * the test file as the main boundary for test environments, with each test case
 * able to run in parallel. That works if you have one single global state, but
 * we need two separate versions of the global state, while repeating the exact
 * same test cases for each one.
 *
 * If both tests were to be placed in the same file, Jest would not isolate them
 * and would let their setup steps interfere with each other. This leads to one
 * of two things:
 * 1. One of the global mocks overrides the other, making it so that one
 *    connection type always fails
 * 2. The two just happen not to conflict each other, through some convoluted
 *    order of operations involving closure, but you have no idea why the code
 *    is working, and it's impossible to debug.
 */
 import {
  type UseClipboardInput,
  type UseClipboardResult,
  useClipboard,
 } from "./useClipboard";
 import { act, renderHook } from "@testing-library/react";
 import { GlobalSnackbar } from "components/GlobalSnackbar/GlobalSnackbar";

 const initialExecCommand = global.document.execCommand;
 beforeAll(() => {
  jest.useFakeTimers();
 });

 afterAll(() => {
  jest.restoreAllMocks();
  jest.useRealTimers();
  global.document.execCommand = initialExecCommand;
 });

 type MockClipboardEscapeHatches = Readonly<{
  getMockText: () => string;
  setMockText: (newText: string) => void;
  simulateFailure: boolean;
  setSimulateFailure: (failureMode: boolean) => void;
 }>;

 type MockClipboard = Readonly<Clipboard & MockClipboardEscapeHatches>;
 function makeMockClipboard(isSecureContext: boolean): MockClipboard {
  let mockClipboardValue = "";
  let shouldFail = false;

  return {
    get simulateFailure() {
      return shouldFail;
    },
    setSimulateFailure: (value) => {
      shouldFail = value;
    },

    readText: async () => {
      if (shouldFail) {
        throw new Error("Clipboard deliberately failed");
      }

      if (!isSecureContext) {
        throw new Error(
          "Trying to read from clipboard outside secure context!",
        );
      }

      return mockClipboardValue;
    },
    writeText: async (newText) => {
      if (shouldFail) {
        throw new Error("Clipboard deliberately failed");
      }

      if (!isSecureContext) {
        throw new Error("Trying to write to clipboard outside secure context!");
      }

      mockClipboardValue = newText;
    },

    getMockText: () => mockClipboardValue,
    setMockText: (newText) => {
      mockClipboardValue = newText;
    },

    addEventListener: jest.fn(),
    removeEventListener: jest.fn(),
    dispatchEvent: jest.fn(),
    read: jest.fn(),
    write: jest.fn(),
  };
 }

 function renderUseClipboard(inputs: UseClipboardInput) {
  return renderHook<UseClipboardResult, UseClipboardInput>(
    (props) => useClipboard(props),
    {
      initialProps: inputs,
      wrapper: ({ children }) => (
        <>
          <>{children}</>
          <GlobalSnackbar />
        </>
      ),
    },
  );
 }

 type ScheduleConfig = Readonly<{ isHttps: boolean }>;

 export function scheduleClipboardTests({ isHttps }: ScheduleConfig) {
  const mockClipboardInstance = makeMockClipboard(isHttps);

  const originalNavigator = window.navigator;
  beforeAll(() => {
    jest.spyOn(window, "navigator", "get").mockImplementation(() => ({
      ...originalNavigator,
      clipboard: mockClipboardInstance,
    }));

    if (!isHttps) {
      // Not the biggest fan of exposing implementation details like this, but
      // making any kind of mock for execCommand is really gnarly in general
      global.document.execCommand = jest.fn(() => {
        if (mockClipboardInstance.simulateFailure) {
          return false;
        }

        const dummyInput = document.querySelector("input[data-testid=dummy]");
        const inputIsFocused =
          dummyInput instanceof HTMLInputElement &&
          document.activeElement === dummyInput;

        let copySuccessful = false;
        if (inputIsFocused) {
          mockClipboardInstance.setMockText(dummyInput.value);
          copySuccessful = true;
        }

        return copySuccessful;
      });
    }
  });

  afterEach(() => {
    mockClipboardInstance.setMockText("");
    mockClipboardInstance.setSimulateFailure(false);
  });

  const assertClipboardTextUpdate = async (
    result: ReturnType<typeof renderUseClipboard>["result"],
    textToCheck: string,
  ): Promise<void> => {
    await act(() => result.current.copyToClipboard());
    expect(result.current.showCopiedSuccess).toBe(true);

    const clipboardText = mockClipboardInstance.getMockText();
    expect(clipboardText).toEqual(textToCheck);
  };

  /**
   * Start of test cases
   */
  it("Copies the current text to the user's clipboard", async () => {
    const textToCopy = "dogs";
    const { result } = renderUseClipboard({ textToCopy });
    await assertClipboardTextUpdate(result, textToCopy);
  });

  it("Should indicate to components not to show successful copy after a set period of time", async () => {
    const textToCopy = "cats";
    const { result } = renderUseClipboard({ textToCopy });
    await assertClipboardTextUpdate(result, textToCopy);

    setTimeout(() => {
      expect(result.current.showCopiedSuccess).toBe(false);
    }, 10_000);

    await jest.runAllTimersAsync();
  });

  it("Should notify the user of an error using the provided callback", async () => {
    const textToCopy = "birds";
    const onError = jest.fn();
    const { result } = renderUseClipboard({ textToCopy, onError });

    mockClipboardInstance.setSimulateFailure(true);
    await act(() => result.current.copyToClipboard());
    expect(onError).toBeCalled();
  });
 }
Original file line number	Diff line number	Diff line change
Expand Up		@@ -23,7 +23,11 @@ export const CodeExample: FC<CodeExampleProps> = ({
		}) => {
		const buttonRef = useRef<HTMLButtonElement>(null);
		const triggerButton = (event: KeyboardEvent \| MouseEvent) => {
		if (event.target !== buttonRef.current) {
		const clickTriggeredOutsideButton =
		event.target instanceof HTMLElement &&
		!buttonRef.current?.contains(event.target);

		if (clickTriggeredOutsideButton) {
		buttonRef.current?.click();
		}
		};
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -32,7 +32,9 @@ export const CopyButton = forwardRef<HTMLButtonElement, CopyButtonProps>(
		buttonStyles,
		tooltipTitle = Language.tooltipTitle,
		} = props;
		const { isCopied, copyToClipboard } = useClipboard(text);
		const { showCopiedSuccess, copyToClipboard } = useClipboard({
		textToCopy: text,
		});

		return (
		<Tooltip title={tooltipTitle} placement="top">
Expand All		@@ -45,7 +47,7 @@ export const CopyButton = forwardRef<HTMLButtonElement, CopyButtonProps>(
		variant="text"
		onClick={copyToClipboard}
		>
		{isCopied ? (
		{showCopiedSuccess ? (
		<Check css={styles.copyIcon} />
		) : (
		<FileCopyIcon css={styles.copyIcon} />
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -16,12 +16,14 @@ export const CopyableValue: FC<CopyableValueProps> = ({
		children,
		...attrs
		}) => {
		const { isCopied, copyToClipboard } = useClipboard(value);
		const { showCopiedSuccess, copyToClipboard } = useClipboard({
		textToCopy: value,
		});
		const clickableProps = useClickable<HTMLSpanElement>(copyToClipboard);

		return (
		<Tooltip
		title={isCopied ? "Copied!" : "Click to copy"}
		title={showCopiedSuccess ? "Copied!" : "Click to copy"}
		placement={placement}
		PopperProps={PopperProps}
		>
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -24,37 +24,37 @@ const variantFromMsgType = (type: MsgType) => {
		};

		export const GlobalSnackbar: FC = () => {
		const [open, setOpen] = useState<boolean>(false);
		const [notification, setNotification] = useState<NotificationMsg>();

		const [notificationMsg, setNotificationMsg] = useState<NotificationMsg>();
		useCustomEvent<NotificationMsg>(SnackbarEventType, (event) => {
		setNotification(event.detail);
		setOpen(true);
		setNotificationMsg(event.detail);
		});

		if (!notification) {
		const hasNotification = notificationMsg !== undefined;
		if (!hasNotification) {
		return null;
		}

		return (
		<EnterpriseSnackbar
		key={notification.msg}
		open={open}
		variant={variantFromMsgType(notification.msgType)}
		onClose={() => setOpen(false)}
		autoHideDuration={notification.msgType === MsgType.Error ? 22000 : 6000}
		key={notificationMsg.msg}
		open={hasNotification}
		variant={variantFromMsgType(notificationMsg.msgType)}
		onClose={() => setNotificationMsg(undefined)}
		autoHideDuration={
		notificationMsg.msgType === MsgType.Error ? 22000 : 6000
		}
		anchorOrigin={{ vertical: "bottom", horizontal: "right" }}
		message={
		<div css={{ display: "flex" }}>
		{notification.msgType === MsgType.Error && (
		{notificationMsg.msgType === MsgType.Error && (
		<ErrorIcon css={styles.errorIcon} />
		)}

		<div css={{ maxWidth: 670 }}>
		<span css={styles.messageTitle}>{notification.msg}</span>
		<span css={styles.messageTitle}>{notificationMsg.msg}</span>

		{notification.additionalMsgs &&
		notification.additionalMsgs.map((msg, index) => (
		{notificationMsg.additionalMsgs &&
		notificationMsg.additionalMsgs.map((msg, index) => (
		<AdditionalMessageDisplay key={index} message={msg} />
		))}
		</div>
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,15 @@
		/**
		* This test is for all useClipboard functionality, with the browser context
		* set to insecure (HTTP connections).
		*
		* See useClipboard.test-setup.ts for more info on why this file is set up the
		* way that it is.
		*/
		import { useClipboard } from "./useClipboard";
		import { scheduleClipboardTests } from "./useClipboard.test-setup";

		describe(useClipboard.name, () => {
		describe("HTTP (non-secure) connections", () => {
		scheduleClipboardTests({ isHttps: false });
		});
		});
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,15 @@
		/**
		* This test is for all useClipboard functionality, with the browser context
		* set to secure (HTTPS connections).
		*
		* See useClipboard.test-setup.ts for more info on why this file is set up the
		* way that it is.
		*/
		import { useClipboard } from "./useClipboard";
		import { scheduleClipboardTests } from "./useClipboard.test-setup";

		describe(useClipboard.name, () => {
		describe("HTTPS (secure/default) connections", () => {
		scheduleClipboardTests({ isHttps: true });
		});
		});
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,218 @@
		/**
		* @file This is a very weird test setup.
		*
		* There are two main things that it's fighting against to insure that the
		* clipboard functionality is working as expected:
		* 1. userEvent.setup's default global behavior
		* 2. The fact that we need to reuse the same set of test cases for two separate
		* contexts (secure and insecure), each with their own version of global
		* state.
		*
		* The goal of this file is to provide a shared set of test behavior that can
		* be imported into two separate test files (one for HTTP, one for HTTPS),
		* without any risk of global state conflicts.
		*
		* ---
		* For (1), normally you could call userEvent.setup to enable clipboard mocking,
		* but userEvent doesn't expose a teardown function. It also modifies the global
		* scope for the whole test file, so enabling just one userEvent session will
		* make a mock clipboard exist for all other tests, even though you didn't tell
		* them to set up a session. The mock also assumes that the clipboard API will
		* always be available, which is not true on HTTP-only connections
		*
		* Since these tests need to split hairs and differentiate between HTTP and
		* HTTPS connections, setting up a single userEvent is disastrous. It will make
		* all the tests pass, even if they shouldn't. Have to avoid that by creating a
		* custom clipboard mock.
		*
		* ---
		* For (2), we're fighting against Jest's default behavior, which is to treat
		* the test file as the main boundary for test environments, with each test case
		* able to run in parallel. That works if you have one single global state, but
		* we need two separate versions of the global state, while repeating the exact
		* same test cases for each one.
		*
		* If both tests were to be placed in the same file, Jest would not isolate them
		* and would let their setup steps interfere with each other. This leads to one
		* of two things:
		* 1. One of the global mocks overrides the other, making it so that one
		* connection type always fails
		* 2. The two just happen not to conflict each other, through some convoluted
		* order of operations involving closure, but you have no idea why the code
		* is working, and it's impossible to debug.
		*/
		import {
		type UseClipboardInput,
		type UseClipboardResult,
		useClipboard,
		} from "./useClipboard";
		import { act, renderHook } from "@testing-library/react";
		import { GlobalSnackbar } from "components/GlobalSnackbar/GlobalSnackbar";

		const initialExecCommand = global.document.execCommand;
		beforeAll(() => {
		jest.useFakeTimers();
		});

		afterAll(() => {
		jest.restoreAllMocks();
		jest.useRealTimers();
		global.document.execCommand = initialExecCommand;
		});

		type MockClipboardEscapeHatches = Readonly<{
		getMockText: () => string;
		setMockText: (newText: string) => void;
		simulateFailure: boolean;
		setSimulateFailure: (failureMode: boolean) => void;
		}>;

		type MockClipboard = Readonly<Clipboard & MockClipboardEscapeHatches>;
		function makeMockClipboard(isSecureContext: boolean): MockClipboard {
		let mockClipboardValue = "";
		let shouldFail = false;

		return {
		get simulateFailure() {
		return shouldFail;
		},
		setSimulateFailure: (value) => {
		shouldFail = value;
		},

		readText: async () => {
		if (shouldFail) {
		throw new Error("Clipboard deliberately failed");
		}

		if (!isSecureContext) {
		throw new Error(
		"Trying to read from clipboard outside secure context!",
		);
		}

		return mockClipboardValue;
		},
		writeText: async (newText) => {
		if (shouldFail) {
		throw new Error("Clipboard deliberately failed");
		}

		if (!isSecureContext) {
		throw new Error("Trying to write to clipboard outside secure context!");
		}

		mockClipboardValue = newText;
		},

		getMockText: () => mockClipboardValue,
		setMockText: (newText) => {
		mockClipboardValue = newText;
		},

		addEventListener: jest.fn(),
		removeEventListener: jest.fn(),
		dispatchEvent: jest.fn(),
		read: jest.fn(),
		write: jest.fn(),
		};
		}

		function renderUseClipboard(inputs: UseClipboardInput) {
		return renderHook<UseClipboardResult, UseClipboardInput>(
		(props) => useClipboard(props),
		{
		initialProps: inputs,
		wrapper: ({ children }) => (
		<>
		<>{children}</>
		<GlobalSnackbar />
		</>
		),
		},
		);
		}

		type ScheduleConfig = Readonly<{ isHttps: boolean }>;

		export function scheduleClipboardTests({ isHttps }: ScheduleConfig) {
		const mockClipboardInstance = makeMockClipboard(isHttps);

		const originalNavigator = window.navigator;
		beforeAll(() => {
		jest.spyOn(window, "navigator", "get").mockImplementation(() => ({
		...originalNavigator,
		clipboard: mockClipboardInstance,
		}));

		if (!isHttps) {
		// Not the biggest fan of exposing implementation details like this, but
		// making any kind of mock for execCommand is really gnarly in general
		global.document.execCommand = jest.fn(() => {
		if (mockClipboardInstance.simulateFailure) {
		return false;
		}

		const dummyInput = document.querySelector("input[data-testid=dummy]");
		const inputIsFocused =
		dummyInput instanceof HTMLInputElement &&
		document.activeElement === dummyInput;

		let copySuccessful = false;
		if (inputIsFocused) {
		mockClipboardInstance.setMockText(dummyInput.value);
		copySuccessful = true;
		}

		return copySuccessful;
		});
		}
		});

		afterEach(() => {
		mockClipboardInstance.setMockText("");
		mockClipboardInstance.setSimulateFailure(false);
		});

		const assertClipboardTextUpdate = async (
		result: ReturnType<typeof renderUseClipboard>["result"],
		textToCheck: string,
		): Promise<void> => {
		await act(() => result.current.copyToClipboard());
		expect(result.current.showCopiedSuccess).toBe(true);

		const clipboardText = mockClipboardInstance.getMockText();
		expect(clipboardText).toEqual(textToCheck);
		};

		/**
		* Start of test cases
		*/
		it("Copies the current text to the user's clipboard", async () => {
		const textToCopy = "dogs";
		const { result } = renderUseClipboard({ textToCopy });
		await assertClipboardTextUpdate(result, textToCopy);
		});

		it("Should indicate to components not to show successful copy after a set period of time", async () => {
		const textToCopy = "cats";
		const { result } = renderUseClipboard({ textToCopy });
		await assertClipboardTextUpdate(result, textToCopy);

		setTimeout(() => {
		expect(result.current.showCopiedSuccess).toBe(false);
		}, 10_000);

		await jest.runAllTimersAsync();
		});

		it("Should notify the user of an error using the provided callback", async () => {
		const textToCopy = "birds";
		const onError = jest.fn();
		const { result } = renderUseClipboard({ textToCopy, onError });

		mockClipboardInstance.setSimulateFailure(true);
		await act(() => result.current.copyToClipboard());
		expect(onError).toBeCalled();
		});
		}