Add settings modal (#1128)

alessbell · web-flow · commit 576efe6f83f2 · 2023-10-05T16:28:18.000-04:00
diff --git a/.changeset/calm-seals-happen.md b/.changeset/calm-seals-happen.md
@@ -0,0 +1,5 @@
+---
+"apollo-client-devtools": patch
+---
+
+Adds settings modal that displays the current devtools version with a link to the GitHub release page
diff --git a/jest.config.js b/jest.config.js
@@ -2,6 +2,9 @@ module.exports = {
   preset: "ts-jest",
   setupFilesAfterEnv: ["./test.setup.ts"],
   testEnvironment: "jsdom",
+  globals: {
+    VERSION: "0.0.0",
+  },
   testPathIgnorePatterns: [
     "<rootDir>/build",
     "<rootDir>/dist",
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -37,6 +37,8 @@
     "@apollo/client": "^3.7.10",
     "@apollo/space-kit": "^9.11.0",
     "@emotion/react": "^11.11.1",
+    "@headlessui/react": "^1.7.17",
+    "@heroicons/react": "^2.0.18",
     "@radix-ui/react-tabs": "^1.0.2",
     "graphql": "^16.0.0",
     "graphql-tag": "^2.11.0",
@@ -92,6 +94,7 @@
     "postcss": "8.4.31",
     "postcss-loader": "7.3.3",
     "prettier": "3.0.3",
+    "resize-observer-polyfill": "1.5.1",
     "rimraf": "5.0.5",
     "style-loader": "3.3.3",
     "tailwindcss": "3.3.3",
diff --git a/src/application/components/Cache/Cache.tsx b/src/application/components/Cache/Cache.tsx
@@ -83,7 +83,10 @@ export function Cache({
         <Header>
           {dataExists ? (
             <Fragment>
-              <h1 className="font-monospace font-normal text-xl">
+              <h1
+                className="font-monospace font-normal text-xl"
+                data-testid="cache-id"
+              >
                 <code>{cacheId || undefined}</code>
               </h1>
               <span className="font-sans text-grey-light uppercase text-xs mt-1 ml-2">
diff --git a/src/application/components/Cache/__tests__/Cache.test.tsx b/src/application/components/Cache/__tests__/Cache.test.tsx
@@ -70,10 +70,8 @@ describe("Cache component tests", () => {
 
     it("should leave the header blank instead of trying to show a cache ID", async () => {
       renderWithApolloClient(<Cache navigationProps={navigationProps} />);
-      const header = screen.getByTestId("header");
-      await waitFor(() => {
-        expect(header.firstChild).not.toBeInTheDocument();
-      });
+      const cacheId = screen.queryByTestId("cache-id");
+      expect(cacheId).toBeNull();
     });
   });
 
diff --git a/src/application/components/Cache/main/EntityView.tsx b/src/application/components/Cache/main/EntityView.tsx
@@ -1,3 +1,4 @@
+/** @jsxImportSource @emotion/react */
 import { css } from "@emotion/react";
 import { JSONTree } from "react-json-tree";
 import { rem } from "polished";
diff --git a/src/application/components/Cache/sidebar/EntityList.tsx b/src/application/components/Cache/sidebar/EntityList.tsx
@@ -1,3 +1,4 @@
+/** @jsxImportSource @emotion/react */
 import { css } from "@emotion/react";
 import { List } from "@apollo/space-kit/List";
 import { ListItem } from "@apollo/space-kit/ListItem";
diff --git a/src/application/components/Cache/sidebar/Search.tsx b/src/application/components/Cache/sidebar/Search.tsx
@@ -1,3 +1,4 @@
+/** @jsxImportSource @emotion/react */
 import { IconSearch } from "@apollo/space-kit/icons/IconSearch";
 import { TextField } from "@apollo/space-kit/TextField";
 import { colors } from "@apollo/space-kit/colors";
diff --git a/src/application/components/Explorer/Explorer.tsx b/src/application/components/Explorer/Explorer.tsx
@@ -1,3 +1,4 @@
+/** @jsxImportSource @emotion/react */
 import { useMemo } from "react";
 import { css } from "@emotion/react";
 import { rem } from "polished";
@@ -48,7 +49,7 @@ export enum FetchPolicy {
 const headerStyles = css`
   display: flex;
   align-items: center;
-  padding: 0 ${rem(16)};
+  padding: 0 0.75rem;
   background-color: var(--primary);
   box-shadow: 0 ${rem(-1)} 0 0 rgba(255, 255, 255, 0.3) inset;
 `;
diff --git a/src/application/components/Explorer/GraphRefModal.tsx b/src/application/components/Explorer/GraphRefModal.tsx
@@ -1,3 +1,4 @@
+/** @jsxImportSource @emotion/react */
 import React, { useState } from "react";
 import { LoadingSpinner } from "./LoadingSpinner";
 import { hasGraphRefBeenAuthenticated } from "./postMessageAuthHelpers";
diff --git a/src/application/components/Explorer/LoadingSpinner.tsx b/src/application/components/Explorer/LoadingSpinner.tsx
@@ -1,3 +1,4 @@
+/** @jsxImportSource @emotion/react */
 import React from "react";
 import { keyframes } from "@emotion/react";
 
diff --git a/src/application/components/HighlightMatch.tsx b/src/application/components/HighlightMatch.tsx
@@ -1,3 +1,4 @@
+/** @jsxImportSource @emotion/react */
 import { css } from "@emotion/react";
 import { colors } from "@apollo/space-kit/colors";
 
diff --git a/src/application/components/Layouts/FullWidthLayout.tsx b/src/application/components/Layouts/FullWidthLayout.tsx
@@ -1,6 +1,9 @@
-import { ReactNode } from "react";
+/** @jsxImportSource @emotion/react */
+import { ReactNode, useState, useRef } from "react";
 import { css } from "@emotion/react";
+import { Cog6ToothIcon } from "@heroicons/react/24/outline";
 
+import { SettingsModal } from "./SettingsModal";
 import { Navigation, NavigationProps } from "./Navigation";
 
 interface FullWidthLayoutProps {
@@ -46,11 +49,20 @@ interface HeaderProps {
   children?: ReactNode;
 }
 
-const Header = ({ children, className }: HeaderProps) => (
-  <div className={className} css={headerStyles} data-testid="header">
-    {children}
-  </div>
-);
+const Header = ({ children, className }: HeaderProps) => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <div className={className} css={headerStyles} data-testid="header">
+      {children}
+      <button className="ml-auto" onClick={() => setOpen(true)}>
+        <span className="sr-only">Settings</span>
+        <Cog6ToothIcon aria-hidden="true" className="h-6 w-6 stroke-white" />
+      </button>
+      <SettingsModal open={open} onOpen={setOpen} />
+    </div>
+  );
+};
 
 interface MainProps {
   className?: string;
diff --git a/src/application/components/Layouts/Navigation.tsx b/src/application/components/Layouts/Navigation.tsx
@@ -1,3 +1,4 @@
+/** @jsxImportSource @emotion/react */
 import React, { ReactNode } from "react";
 import { makeVar, useReactiveVar } from "@apollo/client";
 import { css } from "@emotion/react";
diff --git a/src/application/components/Layouts/SettingsModal.tsx b/src/application/components/Layouts/SettingsModal.tsx
@@ -0,0 +1,68 @@
+import { Fragment } from "react";
+import { Dialog, Transition } from "@headlessui/react";
+
+declare const VERSION: string;
+
+export function SettingsModal({
+  open = false,
+  onOpen,
+}: {
+  open?: boolean;
+  onOpen: (open: boolean) => void;
+}) {
+  return (
+    <Transition.Root show={open} as={Fragment}>
+      <Dialog className="relative z-10" onClose={onOpen}>
+        <Transition.Child
+          as={Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="fixed inset-0 bg-grey-darker bg-opacity-75 transition-opacity" />
+        </Transition.Child>
+
+        <div className="fixed inset-0 z-10 w-screen overflow-y-auto">
+          <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
+            <Transition.Child
+              as={Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+              enterTo="opacity-100 translate-y-0 sm:scale-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            >
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white dark:bg-black-base px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 sm:w-full max-w-sm sm:p-6">
+                <div>
+                  <Dialog.Title
+                    as="h3"
+                    className="text-base leading-6 mb-6 dark:text-white"
+                  >
+                    Settings
+                  </Dialog.Title>
+                  <div className="mt-2 text-sm dark:text-white">
+                    <p>
+                      Devtools version:{" "}
+                      <a
+                        className="underline text-purple-darker dark:text-white font-monospace"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        href={`https://github.com/apollographql/apollo-client-devtools/releases/tag/v${VERSION}`}
+                      >
+                        {VERSION}
+                      </a>
+                    </p>
+                  </div>
+                </div>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+}
diff --git a/src/application/components/Layouts/SidebarLayout.tsx b/src/application/components/Layouts/SidebarLayout.tsx
@@ -1,8 +1,11 @@
-import { ReactNode } from "react";
+/** @jsxImportSource @emotion/react */
+import { ReactNode, useState, useRef } from "react";
 import { css } from "@emotion/react";
 import { rem } from "polished";
 import { PanelGroup, Panel, PanelResizeHandle } from "react-resizable-panels";
+import { Cog6ToothIcon } from "@heroicons/react/24/outline";
 
+import { SettingsModal } from "./SettingsModal";
 import { Navigation, NavigationProps } from "./Navigation";
 
 interface SidebarLayoutProps {
@@ -21,10 +24,10 @@ const listStyles = css`
 `;
 
 const headerStyles = css`
-  grid-area: header;
   display: flex;
+  justify-content: flex-end;
   align-items: center;
-  padding: 0 1rem;
+  padding: 0 0.75rem;
   border-bottom: ${rem(1)} solid var(--mainBorder);
   background-color: var(--main);
   color: var(--textPrimary);
@@ -106,11 +109,27 @@ interface HeaderProps {
   children?: ReactNode;
 }
 
-const Header = ({ children }: HeaderProps) => (
-  <div css={headerStyles} data-testid="header">
-    {children}
-  </div>
-);
+const Header = ({ children }: HeaderProps) => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <div css={headerStyles} data-testid="header">
+      {children}
+      {/* In order to avoid duplicating the cog component everywhere
+        `SidebarLayout.Header` is used, we use margin-left: auto as the default,
+        and margin-left: 4 when displayed next to the explorer button.
+      */}
+      <button
+        className="ml-auto peer-[.is-explorer-button]:ml-6"
+        onClick={() => setOpen(true)}
+      >
+        <span className="sr-only">Settings</span>
+        <Cog6ToothIcon aria-hidden="true" className="h-6 w-6" />
+      </button>
+      <SettingsModal open={open} onOpen={setOpen} />
+    </div>
+  );
+};
 
 interface MainProps {
   children?: ReactNode;
diff --git a/src/application/components/Layouts/__tests__/SettingsModal.test.tsx b/src/application/components/Layouts/__tests__/SettingsModal.test.tsx
@@ -0,0 +1,44 @@
+import React, { useState } from "react";
+import { act, screen } from "@testing-library/react";
+import { matchers } from "@emotion/jest";
+import * as ResizeObserverModule from "resize-observer-polyfill";
+
+import { renderWithApolloClient } from "../../../utilities/testing/renderWithApolloClient";
+import { SettingsModal } from "../SettingsModal";
+
+expect.extend(matchers);
+
+global.ResizeObserver = ResizeObserverModule.default;
+
+describe("<SettingsModal />", () => {
+  it("can be toggled open and closed", async () => {
+    const setOpenMock = jest.fn();
+
+    const WrappedSettingsModal = () => {
+      const [open, setOpen] = useState(false);
+
+      const handleOpen = (value: boolean) => {
+        setOpenMock(value);
+        setOpen(value);
+      };
+
+      return (
+        <>
+          <button onClick={() => handleOpen(!open)}>Toggle modal</button>
+          <SettingsModal onOpen={handleOpen} open={open} />
+        </>
+      );
+    };
+
+    const { user } = renderWithApolloClient(<WrappedSettingsModal />);
+
+    expect(screen.queryByText("0.0.0")).toBeNull();
+
+    await act(() => user.click(screen.getByText("Toggle modal")));
+    expect(setOpenMock).toHaveBeenCalledTimes(1);
+
+    expect(screen.getByText("0.0.0")).toBeInTheDocument();
+
+    await act(() => user.click(screen.getByText("Toggle modal")));
+  });
+});
diff --git a/src/application/components/Mutations/MutationViewer.tsx b/src/application/components/Mutations/MutationViewer.tsx
@@ -1,3 +1,4 @@
+/** @jsxImportSource @emotion/react */
 import { css } from "@emotion/react";
 import { JSONTree } from "react-json-tree";
 import { IconCopy } from "@apollo/space-kit/icons/IconCopy";
diff --git a/src/application/components/Mutations/Mutations.tsx b/src/application/components/Mutations/Mutations.tsx
@@ -1,3 +1,4 @@
+/** @jsxImportSource @emotion/react */
 import { Fragment, useState } from "react";
 import { gql, TypedDocumentNode, useQuery } from "@apollo/client";
 import { List } from "@apollo/space-kit/List";
diff --git a/src/application/components/Mutations/__tests__/Mutations.test.tsx b/src/application/components/Mutations/__tests__/Mutations.test.tsx
diff --git a/src/application/components/Queries/Queries.tsx b/src/application/components/Queries/Queries.tsx
diff --git a/src/application/components/Queries/QueryViewer.tsx b/src/application/components/Queries/QueryViewer.tsx
diff --git a/src/application/components/Queries/RunInExplorerButton.tsx b/src/application/components/Queries/RunInExplorerButton.tsx
diff --git a/src/application/components/Queries/__tests__/Queries.test.tsx b/src/application/components/Queries/__tests__/Queries.test.tsx
diff --git a/tsconfig.json b/tsconfig.json
diff --git a/webpack.config.mjs b/webpack.config.mjs

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"apollo-client-devtools": patch
 +---
++
 +Adds settings modal that displays the current devtools version with a link to the GitHub release page
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,4 @@`
	`1`	`+/** @jsxImportSource @emotion/react */`
`1`	`2`	`import { css } from "@emotion/react";`
`2`	`3`	`import { JSONTree } from "react-json-tree";`
`3`	`4`	`import { rem } from "polished";`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,4 @@`
	`1`	`+/** @jsxImportSource @emotion/react */`
`1`	`2`	`import { IconSearch } from "@apollo/space-kit/icons/IconSearch";`
`2`	`3`	`import { TextField } from "@apollo/space-kit/TextField";`
`3`	`4`	`import { colors } from "@apollo/space-kit/colors";`