Skip to content

Commit

Permalink
NEBULA-2126: Add new config options to Sandbox & Explorer landing pag…
Browse files Browse the repository at this point in the history 
…es (#7431)

In the Apollo Server Landing Page Local config, you can now automatically turn off
autopolling on your endpoints as well as pass headers used to introspect your
schema, embed an operation from a collection, and configure whether the
endpoint input box is editable. In the Apollo Server Landing Page Prod config, you
can embed an operation from a collection & we fixed a bug introduced in v4.4.0.

Example of all new config options: 
```
const server = new ApolloServer({
  typeDefs,
  resolvers,
  plugins: [
    process.env.NODE_ENV === 'production'
      ? ApolloServerPluginLandingPageProductionDefault({
          graphRef: 'my-graph-id@my-graph-variant',
          collectionId: 'abcdef',
          operationId: '12345'
          embed: true,
          footer: false,
        })
      : ApolloServerPluginLandingPageLocalDefault({
          collectionId: 'abcdef',
          operationId: '12345'
          embed: {
            initialState: {
              pollForSchemaUpdates: false,
              sharedHeaders: {
                "HeaderNeededForIntrospection": "ValueForIntrospection"
              },
            },
            endpointIsEditable: true,
          },
          footer: false,
        }),
  ],
});
```
  • Loading branch information
@mayakoneval
mayakoneval committed Mar 9, 2023
1 parent b694bb1 commit 7cc163a
Show file tree
Hide file tree
Showing 6 changed files with 418 additions and 73 deletions.
39 changes: 39 additions & 0 deletions .changeset/angry-weeks-flash.md
View file
@@ -0,0 +1,39 @@
---
'@apollo/server': minor
---

In the Apollo Server Landing Page Local config, you can now automatically turn off autopolling on your endpoints as well as pass headers used to introspect your schema, embed an operation from a collection, and configure whether the endpoint input box is editable. In the Apollo Server Landing Page Prod config, you can embed an operation from a collection & we fixed a bug introduced in release 4.4.0

Example of all new config options:

```
const server = new ApolloServer({
typeDefs,
resolvers,
plugins: [
process.env.NODE_ENV === 'production'
? ApolloServerPluginLandingPageProductionDefault({
graphRef: 'my-graph-id@my-graph-variant',
collectionId: 'abcdef',
operationId: '12345'
embed: true,
footer: false,
})
: ApolloServerPluginLandingPageLocalDefault({
collectionId: 'abcdef',
operationId: '12345'
embed: {
initialState: {
pollForSchemaUpdates: false,
sharedHeaders: {
"HeaderNeededForIntrospection": "ValueForIntrospection"
},
},
endpointIsEditable: true,
},
footer: false,
}),
],
});
```
83 changes: 82 additions & 1 deletion packages/server/src/__tests__/plugin/landingPage/getEmbeddedExplorerHTML.test.ts
View file
Expand Up @@ -62,11 +62,92 @@ describe('Embedded Explorer Landing Page Config HTML', () => {
`);
});

it('with only headers provided', () => {
const config: ApolloServerPluginEmbeddedLandingPageProductionDefaultOptions =
{
includeCookies: true,
headers: { authorization: 'true' },
embed: true,
graphRef: 'graph@current',
};
expect(getEmbeddedExplorerHTML(cdnVersion, config, apolloServerVersion))
.toMatchInlineSnapshot(`
<div class="fallback">
<h1>
Welcome to Apollo Server
</h1>
<p>
Apollo Explorer cannot be loaded; it appears that you might be offline.
</p>
</div>
<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?runtime=%40apollo%2Fserver%404.0.0">
</script>
<script>
var endpointUrl = window.location.href;
var embeddedExplorerConfig = {"graphRef":"graph@current","target":"#embeddableExplorer","initialState":{"headers":{"authorization":"true"},"displayOptions":{}},"persistExplorerState":false,"includeCookies":true,"runtime":"@apollo/server@4.0.0"};
new window.EmbeddedExplorer({
...embeddedExplorerConfig,
endpointUrl,
});
</script>
`);
});

it('with operationId, collectionId provided', () => {
const config: ApolloServerPluginEmbeddedLandingPageProductionDefaultOptions =
{
includeCookies: true,
collectionId: '12345',
operationId: 'abcdef',
embed: true,
graphRef: 'graph@current',
};
expect(getEmbeddedExplorerHTML(cdnVersion, config, apolloServerVersion))
.toMatchInlineSnapshot(`
<div class="fallback">
<h1>
Welcome to Apollo Server
</h1>
<p>
Apollo Explorer cannot be loaded; it appears that you might be offline.
</p>
</div>
<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?runtime=%40apollo%2Fserver%404.0.0">
</script>
<script>
var endpointUrl = window.location.href;
var embeddedExplorerConfig = {"graphRef":"graph@current","target":"#embeddableExplorer","initialState":{"collectionId":"12345","operationId":"abcdef","displayOptions":{}},"persistExplorerState":false,"includeCookies":true,"runtime":"@apollo/server@4.0.0"};
new window.EmbeddedExplorer({
...embeddedExplorerConfig,
endpointUrl,
});
</script>
`);
});

it('for embedded explorer with document, variables, headers and displayOptions excluded', () => {
const config: ApolloServerPluginEmbeddedLandingPageProductionDefaultOptions =
{
includeCookies: false,
embed: true as true,
embed: true,
graphRef: 'graph@current',
};
expect(getEmbeddedExplorerHTML(cdnVersion, config, apolloServerVersion))
Expand Down
141 changes: 135 additions & 6 deletions packages/server/src/__tests__/plugin/landingPage/getEmbeddedSandboxHTML.test.ts
View file
@@ -1,5 +1,5 @@
import { getEmbeddedSandboxHTML } from '../../../plugin/landingPage/default/getEmbeddedHTML';
import type { LandingPageConfig } from '../../../plugin/landingPage/default/types';
import type { ApolloServerPluginEmbeddedLandingPageLocalDefaultOptions } from '../../../plugin/landingPage/default/types';
import { describe, it, expect } from '@jest/globals';

const cdnVersion = '_latest';
Expand All @@ -8,7 +8,7 @@ const apolloServerVersion = '@apollo/server@4.0.0';

describe('Landing Page Config HTML', () => {
it('for embedded sandbox with document, variables and headers provided', () => {
const config: LandingPageConfig = {
const config: ApolloServerPluginEmbeddedLandingPageLocalDefaultOptions = {
includeCookies: true,
document: 'query Test { id }',
variables: {
Expand Down Expand Up @@ -49,15 +49,97 @@ describe('Landing Page Config HTML', () => {
initialEndpoint,
initialState: {"document":"query Test { id }","variables":{"option":{"a":"val","b":1,"c":true}},"headers":{"authorization":"true"},"includeCookies":true},
hideCookieToggle: false,
endpointIsEditable: false,
runtime: '@apollo/server@4.0.0'
});
</script>
`);
});

it('for embedded sandbox with document, variables and headers excluded', () => {
const config: LandingPageConfig = {
includeCookies: false,
it('for embedded sandbox with only headers provided', () => {
const config: ApolloServerPluginEmbeddedLandingPageLocalDefaultOptions = {
includeCookies: true,
headers: { authorization: 'true' },
embed: true,
};
expect(getEmbeddedSandboxHTML(cdnVersion, config, apolloServerVersion))
.toMatchInlineSnapshot(`
<div class="fallback">
<h1>
Welcome to Apollo Server
</h1>
<p>
Apollo Sandbox cannot be loaded; it appears that you might be offline.
</p>
</div>
<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?runtime=%40apollo%2Fserver%404.0.0">
</script>
<script>
var initialEndpoint = window.location.href;
new window.EmbeddedSandbox({
target: '#embeddableSandbox',
initialEndpoint,
initialState: {"headers":{"authorization":"true"},"includeCookies":true},
hideCookieToggle: false,
endpointIsEditable: false,
runtime: '@apollo/server@4.0.0'
});
</script>
`);
});

it('for embedded sandbox with all config excluded', () => {
const config: ApolloServerPluginEmbeddedLandingPageLocalDefaultOptions = {
embed: true,
};
expect(getEmbeddedSandboxHTML(cdnVersion, config, apolloServerVersion))
.toMatchInlineSnapshot(`
<div class="fallback">
<h1>
Welcome to Apollo Server
</h1>
<p>
Apollo Sandbox cannot be loaded; it appears that you might be offline.
</p>
</div>
<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?runtime=%40apollo%2Fserver%404.0.0">
</script>
<script>
var initialEndpoint = window.location.href;
new window.EmbeddedSandbox({
target: '#embeddableSandbox',
initialEndpoint,
initialState: {},
hideCookieToggle: false,
endpointIsEditable: false,
runtime: '@apollo/server@4.0.0'
});
</script>
`);
});

it('for embedded sandbox with operationId & collectionId provided', () => {
const config: ApolloServerPluginEmbeddedLandingPageLocalDefaultOptions = {
collectionId: '12345',
operationId: 'abcdef',
embed: true,
};
expect(getEmbeddedSandboxHTML(cdnVersion, config, apolloServerVersion))
Expand Down Expand Up @@ -86,8 +168,55 @@ describe('Landing Page Config HTML', () => {
new window.EmbeddedSandbox({
target: '#embeddableSandbox',
initialEndpoint,
initialState: {"includeCookies":false},
initialState: {"collectionId":"12345","operationId":"abcdef"},
hideCookieToggle: false,
endpointIsEditable: false,
runtime: '@apollo/server@4.0.0'
});
</script>
`);
});

it('for embedded sandbox with endpointIsEditable, pollForSchemaUpdates, sharedHeaders provided', () => {
const config: ApolloServerPluginEmbeddedLandingPageLocalDefaultOptions = {
includeCookies: false,
embed: {
endpointIsEditable: true,
initialState: {
pollForSchemaUpdates: false,
sharedHeaders: { SharedHeaderKey: 'SharedHeaderValue' },
},
},
};
expect(getEmbeddedSandboxHTML(cdnVersion, config, apolloServerVersion))
.toMatchInlineSnapshot(`
<div class="fallback">
<h1>
Welcome to Apollo Server
</h1>
<p>
Apollo Sandbox cannot be loaded; it appears that you might be offline.
</p>
</div>
<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?runtime=%40apollo%2Fserver%404.0.0">
</script>
<script>
var initialEndpoint = window.location.href;
new window.EmbeddedSandbox({
target: '#embeddableSandbox',
initialEndpoint,
initialState: {"includeCookies":false,"pollForSchemaUpdates":false,"sharedHeaders":{"SharedHeaderKey":"SharedHeaderValue"}},
hideCookieToggle: false,
endpointIsEditable: true,
runtime: '@apollo/server@4.0.0'
});
</script>
Expand Down

0 comments on commit 7cc163a

Please sign in to comment.