NEBULA-1385: Add initialState to embedable sandbox based on config

docs/source/api/plugin/landing-pages.md

@@ -106,6 +106,52 @@ By default, the landing page displays a footer that links to the documentation t
 <tr>
 <td>
 
+###### `document`
+
+`string`
+</td>
+<td>
+
+A GraphQL document (eg, query or mutation) to populate in the Studio Explorer's editor on load.
+
+If you omit this, the Explorer initially loads an example query based on your schema.
+
+</td>
+</tr>
+
+<tr>
+<td>
+
+###### `variables`
+
+`Record<string, string | Record>`
+</td>
+<td>
+
+An object containing initial variable values to populate in the Explorer on load.
+
+If provided, these variables should apply to the initial query you provide in `document`.
+
+</td>
+</tr>
+
+<tr>
+<td>
+
+###### `headers`
+
+`Record<string, string>`
+</td>
+<td>
+
+An object containing initial HTTP header values to populate in the Explorer on load.
+
+</td>
+</tr>
+
+<tr>
+<td>
+
 ###### `includeCookies`
 
 `boolean`
@@ -228,7 +274,7 @@ If you omit this, the Explorer initially loads an example query based on your sc
 
 ###### `variables`
 
-`Record<string, string>`
+`Record<string, string | Record>`
 </td>
 <td>
 

packages/apollo-server-core/src/__tests__/landingPageConfigHTML.test.ts

@@ -0,0 +1,158 @@
+import {
+  getEmbeddedExplorerHTML,
+  getEmbeddedSandboxHTML,
+} from '../plugin/landingPage/default/index';
+
+const version = '_latest';
+
+describe('Landing Page Config HTML', () => {
+  it('for embedded explorer with document, variables, headers and displayOptions provided', () => {
+    const config = {
+      includeCookies: true,
+      document: 'query Test { id }',
+      variables: {
+        option: {
+          a: 'val',
+          b: 1,
+          c: true,
+        },
+      },
+      headers: { authorization: 'true' },
+      embed: {
+        displayOptions: {
+          showHeadersAndEnvVars: true,
+          docsPanelState: 'open' as 'open',
+          theme: 'light' as 'light',
+        },
+        persistExplorerState: true,
+      },
+      graphRef: 'graph@current',
+    };
+    const expected = `
+<style>
+  iframe {
+    background-color: white;
+  }
+</style>
+<div
+style="width: 100vw; height: 100vh; position: absolute; top: 0;"
+id="embeddableExplorer"
+></div>
+<script src="https://embeddable-explorer.cdn.apollographql.com/_latest/embeddable-explorer.umd.production.min.js"></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};
+  new window.EmbeddedExplorer({
+    ...embeddedExplorerConfig,
+    endpointUrl,
+  });
+</script>
+`;
+    const htmlString = getEmbeddedExplorerHTML(version, config);
+    expect(htmlString).toEqual(expected);
+  });
+
+  it('for embedded explorer with document, variables, headers and displayOptions excluded', () => {
+    const config = {
+      includeCookies: false,
+      embed: true as true,
+      graphRef: 'graph@current',
+    };
+    const expected = `
+<style>
+  iframe {
+    background-color: white;
+  }
+</style>
+<div
+style="width: 100vw; height: 100vh; position: absolute; top: 0;"
+id="embeddableExplorer"
+></div>
+<script src="https://embeddable-explorer.cdn.apollographql.com/_latest/embeddable-explorer.umd.production.min.js"></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};
+  new window.EmbeddedExplorer({
+    ...embeddedExplorerConfig,
+    endpointUrl,
+  });
+</script>
+`;
+    const htmlString = getEmbeddedExplorerHTML(version, config);
+    expect(htmlString).toEqual(expected);
+  });
+
+  it('for embedded sandbox with document, variables and headers provided', () => {
+    const config = {
+      includeCookies: true,
+      document: 'query Test { id }',
+      variables: {
+        option: {
+          a: 'val',
+          b: 1,
+          c: true,
+        },
+      },
+      headers: { authorization: 'true' },
+      displayOptions: {
+        showHeadersAndEnvVariables: true,
+        docsPanelState: 'open',
+        theme: 'light',
+      },
+      embed: true as true,
+    };
+    const expected = `
+<style>
+  iframe {
+    background-color: white;
+  }
+</style>
+<div
+style="width: 100vw; height: 100vh; position: absolute; top: 0;"
+id="embeddableSandbox"
+></div>
+<script src="https://embeddable-sandbox.cdn.apollographql.com/_latest/embeddable-sandbox.umd.production.min.js"></script>
+<script>
+  var initialEndpoint = window.location.href;
+  new window.EmbeddedSandbox({
+    target: '#embeddableSandbox',
+    initialEndpoint,
+    includeCookies: true,
+    initialState: {"document":"query Test { id }","variables":{"option":{"a":"val","b":1,"c":true}},"headers":{"authorization":"true"}},
+  });
+</script>
+`;
+    const htmlString = getEmbeddedSandboxHTML(version, config);
+    expect(htmlString).toEqual(expected);
+  });
+
+  it('for embedded sandbox with document, variables and headers excluded', () => {
+    const config = {
+      includeCookies: false,
+      embed: true as true,
+    };
+    const expected = `
+<style>
+  iframe {
+    background-color: white;
+  }
+</style>
+<div
+style="width: 100vw; height: 100vh; position: absolute; top: 0;"
+id="embeddableSandbox"
+></div>
+<script src="https://embeddable-sandbox.cdn.apollographql.com/_latest/embeddable-sandbox.umd.production.min.js"></script>
+<script>
+  var initialEndpoint = window.location.href;
+  new window.EmbeddedSandbox({
+    target: '#embeddableSandbox',
+    initialEndpoint,
+    includeCookies: false,
+    initialState: {},
+  });
+</script>
+`;
+    const htmlString = getEmbeddedSandboxHTML(version, config);
+    expect(htmlString).toEqual(expected);
+  });
+});

packages/apollo-server-core/src/plugin/landingPage/default/index.ts

@@ -57,7 +57,7 @@ function getConfigStringForHtml(config: LandingPageConfig) {
     .replace("'", '\\u0027');
 }
 
-const getEmbeddedExplorerHTML = (
+export const getEmbeddedExplorerHTML = (
   version: string,
   config: ApolloServerPluginEmbeddedLandingPageProductionDefaultOptions,
 ) => {
@@ -124,7 +124,10 @@ id="embeddableExplorer"
 `;
 };
 
-const getEmbeddedSandboxHTML = (version: string, config: LandingPageConfig) => {
+export const getEmbeddedSandboxHTML = (
+  version: string,
+  config: LandingPageConfig,
+) => {
   return `
 <style>
   iframe {
@@ -142,6 +145,11 @@ id="embeddableSandbox"
     target: '#embeddableSandbox',
     initialEndpoint,
     includeCookies: ${config.includeCookies ?? 'false'},
+    initialState: ${getConfigStringForHtml({
+      document: config.document ?? undefined,
+      variables: config.variables ?? undefined,
+      headers: config.headers ?? undefined,
+    })},
   });
 </script>
 `;

packages/apollo-server-core/src/plugin/landingPage/default/types.ts

@@ -21,7 +21,7 @@ export interface ApolloServerPluginLandingPageDefaultBaseOptions {
    * Users can configure their landing page to link to Studio Explorer with
    * variables loaded in the UI.
    */
-  variables?: Record<string, string>;
+  variables?: Record<string, any>;
   /**
    * Users can configure their landing page to link to Studio Explorer with
    * headers loaded in the UI.