Show cookie toggle for embedded landing pages (#7358)

[Related embed PR](apollographql/embeddable-explorer#215) Context Users are getting confused because the embedded sandbox doesn't show the `includeCookies` toggle. This toggle should be visible for AS4 users when they are in embedded sandbox. What Changed This adjusts the way the getEmbeddedHTML helpers use the landing page config options. These options should stay the same and the user shouldn't experience any changes to how they need to configure their Apollo Server configuration. Instead, we use the `includeCookies` value as an initial value for the cookie toggle in explorer, pass it to `initialState`, and turn off a `hideCookieToggle` flag to expose this value to users in explorer.
apollographql · Feb 15, 2023 · f2d433b · f2d433b
1 parent 6ff88e8
commit f2d433b
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 9 deletions.
diff --git a/.changeset/quick-teachers-tan.md b/.changeset/quick-teachers-tan.md
@@ -0,0 +1,5 @@
+---
+'@apollo/server': minor
+---
+
+Show "Include Cookies" toggle in Embedded Sandbox landing page.
diff --git a/packages/server/src/__tests__/plugin/landingPage/getEmbeddedExplorerHTML.test.ts b/packages/server/src/__tests__/plugin/landingPage/getEmbeddedExplorerHTML.test.ts
@@ -51,7 +51,7 @@ describe('Embedded Explorer Landing Page Config HTML', () => {
       </script>
       <script>
         var endpointUrl = window.location.href;
-        var embeddedExplorerConfig = {"includeCookies":true,"document":"query Test { id }","variables":{"option":{"a":"val","b":1,"c":true}},"headers":{"authorization":"true"},"embed":{"displayOptions":{"showHeadersAndEnvVars":true,"docsPanelState":"open","theme":"light"},"persistExplorerState":true},"graphRef":"graph@current","target":"#embeddableExplorer","initialState":{"includeCookies":true,"document":"query Test { id }","variables":{"option":{"a":"val","b":1,"c":true}},"headers":{"authorization":"true"},"embed":{"displayOptions":{"showHeadersAndEnvVars":true,"docsPanelState":"open","theme":"light"},"persistExplorerState":true},"graphRef":"graph@current","displayOptions":{"showHeadersAndEnvVars":true,"docsPanelState":"open","theme":"light"}},"persistExplorerState":true};
+        var embeddedExplorerConfig = {"graphRef":"graph@current","target":"#embeddableExplorer","initialState":{"includeCookies":true,"document":"query Test { id }","variables":{"option":{"a":"val","b":1,"c":true}},"headers":{"authorization":"true"},"embed":{"displayOptions":{"showHeadersAndEnvVars":true,"docsPanelState":"open","theme":"light"},"persistExplorerState":true},"graphRef":"graph@current","displayOptions":{"showHeadersAndEnvVars":true,"docsPanelState":"open","theme":"light"}},"persistExplorerState":true,"hideCookieToggle":false};
         new window.EmbeddedExplorer({
           ...embeddedExplorerConfig,
           endpointUrl,
@@ -89,7 +89,7 @@ describe('Embedded Explorer Landing Page Config HTML', () => {
       </script>
       <script>
         var endpointUrl = window.location.href;
-        var embeddedExplorerConfig = {"includeCookies":false,"embed":true,"graphRef":"graph@current","target":"#embeddableExplorer","initialState":{"includeCookies":false,"embed":true,"graphRef":"graph@current","displayOptions":{}},"persistExplorerState":false};
+        var embeddedExplorerConfig = {"graphRef":"graph@current","target":"#embeddableExplorer","initialState":{"includeCookies":false,"embed":true,"graphRef":"graph@current","displayOptions":{}},"persistExplorerState":false,"hideCookieToggle":false};
         new window.EmbeddedExplorer({
           ...embeddedExplorerConfig,
           endpointUrl,

diff --git a/packages/server/src/__tests__/plugin/landingPage/getEmbeddedSandboxHTML.test.ts b/packages/server/src/__tests__/plugin/landingPage/getEmbeddedSandboxHTML.test.ts
@@ -45,8 +45,8 @@ describe('Landing Page Config HTML', () => {
         new window.EmbeddedSandbox({
           target: '#embeddableSandbox',
           initialEndpoint,
-          includeCookies: true,
-          initialState: {"document":"query Test { id }","variables":{"option":{"a":"val","b":1,"c":true}},"headers":{"authorization":"true"}},
+          initialState: {"document":"query Test { id }","variables":{"option":{"a":"val","b":1,"c":true}},"headers":{"authorization":"true"},"includeCookies":true},
+          hideCookieToggle: false,
         });
       </script>
     `);
@@ -82,8 +82,8 @@ describe('Landing Page Config HTML', () => {
         new window.EmbeddedSandbox({
           target: '#embeddableSandbox',
           initialEndpoint,
-          includeCookies: false,
-          initialState: {},
+          initialState: {"includeCookies":false},
+          hideCookieToggle: false,
         });
       </script>
     `);

diff --git a/packages/server/src/plugin/landingPage/default/getEmbeddedHTML.ts b/packages/server/src/plugin/landingPage/default/getEmbeddedHTML.ts
@@ -42,7 +42,7 @@ export const getEmbeddedExplorerHTML = (
 
     endpointUrl: string;
 
-    includeCookies?: boolean; // defaults to 'false'
+    hideCookieToggle?: boolean; // defaults to 'true'
   }
   const productionLandingPageConfigOrDefault = {
     displayOptions: {},
@@ -51,7 +51,7 @@ export const getEmbeddedExplorerHTML = (
   };
   const embeddedExplorerParams: Omit<EmbeddableExplorerOptions, 'endpointUrl'> =
     {
-      ...config,
+      graphRef: config.graphRef,
       target: '#embeddableExplorer',
       initialState: {
         ...config,
@@ -61,6 +61,7 @@ export const getEmbeddedExplorerHTML = (
       },
       persistExplorerState:
         productionLandingPageConfigOrDefault.persistExplorerState,
+      hideCookieToggle: false,
     };
 
   return `
@@ -115,12 +116,13 @@ id="embeddableSandbox"
   new window.EmbeddedSandbox({
     target: '#embeddableSandbox',
     initialEndpoint,
-    includeCookies: ${config.includeCookies ?? 'false'},
     initialState: ${getConfigStringForHtml({
       document: config.document ?? undefined,
       variables: config.variables ?? undefined,
       headers: config.headers ?? undefined,
+      includeCookies: config.includeCookies ?? undefined,
     })},
+    hideCookieToggle: false,
   });
 </script>
 `;