Draft: Add support for iframes

package.json

@@ -31,6 +31,7 @@
     "@emotion/cache": "^11.1.3",
     "@emotion/react": "^11.1.5",
     "@reach/tabs": "^0.18.0",
+    "cuid": "^2.1.8",
     "framer-motion": "^3.6.2",
     "graphql": "^15.5.0",
     "graphql-tag": "^2.11.0",

src/application/App.tsx

@@ -1,11 +1,13 @@
 import React, { useEffect, useState } from "react";
 import { useReactiveVar, gql, useQuery, makeVar } from "@apollo/client";
 
-import { currentScreen, Screens } from "./components/Layouts/Navigation";
+import { currentScreen } from "./components/Layouts/Navigation";
+import { Screens } from "./components/Layouts/screens";
 import { Queries } from "./components/Queries/Queries";
 import { Mutations } from "./components/Mutations/Mutations";
 import { Explorer } from "./components/Explorer/Explorer";
 import { Cache } from "./components/Cache/Cache";
+import { clients, currentClient } from ".";
 
 export const reloadStatus = makeVar<boolean>(false);
 
@@ -16,19 +18,35 @@ const screens = {
   [Screens.Cache]: Cache,
 };
 
-const GET_OPERATION_COUNTS = gql`
-  query GetOperationCounts {
-    watchedQueries @client {
-      count
-    }
-    mutationLog @client {
-      count
+export const GET_OPERATION_COUNTS = gql`
+  query GetOperationCounts($clientId: ID!) {
+    client(id: $id) @client {
+      watchedQueries {
+        queries {
+          id
+        }
+        count
+      }
+      mutationLog {
+        count
+      }
     }
   }
 `;
 
 export const App = (): JSX.Element => {
-  const { data } = useQuery(GET_OPERATION_COUNTS);
+  const selectedClient = useReactiveVar(currentClient)
+  const allClients = useReactiveVar(clients);
+
+  if (allClients.length > 0 && !selectedClient) {
+    currentClient(allClients[0])
+  }
+
+  const { data } = useQuery(GET_OPERATION_COUNTS, {
+    variables: {
+      id: selectedClient
+    },
+  });
   const selected = useReactiveVar<Screens>(currentScreen);
   const reloading = useReactiveVar<boolean>(reloadStatus);
   const [embeddedExplorerIFrame, setEmbeddedExplorerIFrame] = useState<HTMLIFrameElement | null>(null);
@@ -52,8 +70,8 @@ export const App = (): JSX.Element => {
         <Screen
           isVisible={undefined}
           navigationProps={{
-            queriesCount: data?.watchedQueries?.count,
-            mutationsCount: data?.mutationLog?.count,
+            queriesCount: data?.client?.watchedQueries?.count ?? 0,
+            mutationsCount: data?.client?.mutationLog?.count ?? 0,
           }}
           embeddedExplorerProps={{
             embeddedExplorerIFrame,
@@ -68,8 +86,8 @@ export const App = (): JSX.Element => {
       <Explorer
         isVisible={selected === Screens.Explorer}
         navigationProps={{
-          queriesCount: data?.watchedQueries?.count,
-          mutationsCount: data?.mutationLog?.count,
+          queriesCount: data?.client?.watchedQueries?.count,
+          mutationsCount: data?.client?.mutationLog?.count,
         }}
         embeddedExplorerProps={{
           embeddedExplorerIFrame,
@@ -79,3 +97,4 @@ export const App = (): JSX.Element => {
     </>
   );
 };
+

src/application/__tests__/App.test.tsx

@@ -2,8 +2,9 @@ import React from "react";
 import { waitFor } from "@testing-library/react";
 
 import { renderWithApolloClient } from "../utilities/testing/renderWithApolloClient";
-import { currentScreen, Screens } from "../components/Layouts/Navigation";
+import { currentScreen } from "../components/Layouts/Navigation";
 import { App, reloadStatus } from "../App";
+import { Screens } from "../components/Layouts/screens";
 
 jest.mock("../components/Queries/Queries", () => ({
   Queries: ({ navigationProps }) => (
@@ -37,7 +38,7 @@ describe("<App />", () => {
 
   test("after reload, renders the Queries screen", async () => {
     currentScreen(Screens.Mutations);
-    const { getByText, debug } = renderWithApolloClient(<App />);
+    const { getByText } = renderWithApolloClient(<App />);
     const element = getByText("Mutations (0)");
     expect(element).toBeInTheDocument();
     await waitFor(() => {

src/application/components/Cache/Cache.tsx

@@ -2,7 +2,7 @@
 
 import { Fragment, useState } from "react";
 import { jsx, css } from "@emotion/react";
-import { gql, useQuery } from "@apollo/client";
+import { gql, useQuery, useReactiveVar } from "@apollo/client";
 import { rem } from "polished";
 import { colors } from "@apollo/space-kit/colors";
 
@@ -11,6 +11,7 @@ import { Search } from "./sidebar/Search";
 import { EntityList } from "./sidebar/EntityList";
 import { EntityView } from "./main/EntityView";
 import { Loading } from "./common/Loading";
+import { currentClient } from "../..";
 
 const { Header, Sidebar, Main, Content } = SidebarLayout;
 
@@ -39,8 +40,10 @@ const noDataStyles = css`
 `;
 
 const GET_CACHE = gql`
-  query GetCache {
-    cache @client
+  query GetCache($clientId: ID!) {
+    client(id: $clientId) @client {
+      cache
+    }
   }
 `;
 
@@ -52,12 +55,17 @@ export function Cache({ navigationProps }: {
 }): jsx.JSX.Element {
   const [searchResults, setSearchResults] = useState({});
   const [cacheId, setCacheId] = useState<string>("ROOT_QUERY");
+  const selectedClient = useReactiveVar(currentClient);
 
-  const { loading, data } = useQuery(GET_CACHE);
+  const { loading, data } = useQuery(GET_CACHE, {
+    variables: {
+      clientId: selectedClient
+    }
+  });
 
   let parsedData: Record<string, any> = {};
-  if (!loading && data && data.cache) {
-    parsedData = JSON.parse(data.cache);
+  if (!loading && data && data?.client?.cache) {
+    parsedData = JSON.parse(data.client.cache);
   }
 
   const dataExists = parsedData && Object.keys(parsedData).length > 0;

src/application/components/Cache/__tests__/Cache.test.tsx

@@ -3,7 +3,7 @@ import { within, waitFor, fireEvent } from "@testing-library/react";
 
 import { Cache } from "../Cache";
 import { renderWithApolloClient } from "../../../utilities/testing/renderWithApolloClient";
-import { client, writeData } from "../../../index";
+import { client, currentClient, writeData } from "../../../index";
 
 const CACHE_DATA = {
   "Result:1": {
@@ -65,15 +65,20 @@ describe("Cache component tests", () => {
 
   describe("With cache data", () => {
     beforeEach(() => {
-      client.resetStore();
-
+      const clientId = "client-1";
+      currentClient(clientId);
       writeData({
+        id: clientId,
         queries: [],
         mutations: [],
         cache: JSON.stringify(CACHE_DATA),
       });
     });
 
+    afterEach(() => {
+      client.resetStore();
+    });
+
     it("should show list of root cache ids in the sidebar", () => {
       const { getByTestId } = renderWithApolloClient(
         <Cache navigationProps={navigationProps} />
@@ -122,7 +127,10 @@ describe("Cache component tests", () => {
     const selectedMainStyles = "background-color: yellow";
 
     beforeEach(() => {
+      const clientId = "client-1";
+      currentClient(clientId);
       writeData({
+        id: clientId,
         queries: [],
         mutations: [],
         cache: JSON.stringify(CACHE_DATA),

src/application/components/Layouts/Navigation.tsx

@@ -6,13 +6,8 @@ import { jsx, css } from "@emotion/react";
 import { rem } from "polished";
 import { colors } from "@apollo/space-kit/colors";
 import { ApolloLogo } from "@apollo/space-kit/icons/ApolloLogo";
-
-export enum Screens {
-  Cache = "cache",
-  Queries = "queries",
-  Mutations = "mutations",
-  Explorer = "explorer",
-}
+import { clients, currentClient } from "../..";
+import { Screens } from "./screens";
 
 type NavButtonProps = {
   isSelected: boolean;
@@ -101,8 +96,14 @@ export const Navigation: React.FC<NavigationProps> = ({
   mutationsCount,
 }) => {
   const selected = useReactiveVar<Screens>(currentScreen);
+  const allClients = useReactiveVar(clients)
+  const selectedClient = useReactiveVar(currentClient);
+
   const isSelected = (NavButton: Screens) => selected === NavButton;
   const onNavigate = (screen: Screens) => currentScreen(screen);
+  const handleClientChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    currentClient(event.target.value)
+  }
 
   return (
     <nav css={navigationStyles}>
@@ -149,6 +150,17 @@ export const Navigation: React.FC<NavigationProps> = ({
             Cache
           </NavButton>
         </li>
+        {allClients.length > 1 && (
+          <li>
+            <select value={selectedClient ?? allClients[0]} onChange={handleClientChange}>
+              {allClients.map((client) => (
+                <option value={client} key={client}>
+                  {client}
+                </option>
+              ))}
+            </select>
+          </li>
+        )}
       </ul>
     </nav>
   );

src/application/components/Layouts/screens.ts

@@ -0,0 +1,6 @@
+export enum Screens {
+  Cache = "cache",
+  Queries = "queries",
+  Mutations = "mutations",
+  Explorer = "explorer",
+}