NEBULA-2126: Add new config options to Sandbox & Explorer landing pages #7431

mayakoneval · 2023-03-08T20:22:36Z

This should be rebased off of this PR, can you do that with forks?

Context

What Changed?

We recently added the ability to

make the embedded Sandbox endpoint static
pass through shared headers ApolloServerPluginLandingPageLocalDefault: headers not passed to IntrospectionQuery embeddable-explorer#214
Allow users to embed an operation from a collection
Allow users to decide not to poll for updates initially

So this PR allows users to set the above configuration in their Sandbox. This PR also allows folks to pass operation ids to the Explorer, but no other changes are made the the Explorer.

How to test

erm, run the landing pages locally!

there are already tests for the html functions

netlify · 2023-03-08T20:22:43Z

👷 Deploy request for apollo-server-docs pending review.

Visit the deploys page to approve it

Name	Link
🔨 Latest commit	`4bab3ad`

codesandbox-ci · 2023-03-08T20:23:18Z

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

trevor-scheer

Changeset please (and I'm ignoring changes from the other PR)

trevor-scheer · 2023-03-08T23:21:30Z

packages/server/src/plugin/landingPage/default/types.ts

+  collectionId?: string;
+  operationId?: string;


We don't expect one without the other here, right? I think I'd suggest something like:

defaultOperation?: { collectionId: string; operationId: string; }

That way we can give them a TS error for one without the other. (or you could get funky with the typings to keep them top level, but I think I like the nesting and the naming)

Another idea that comes to mind that we probably don't want but hey, just in case. A single string "ref" like: collectionId@operationId which wouldn't feel too unfamiliar because graph refs.

I wrapped! Just noting that I added this to the shared types, but its only supported in the embeds, I just moved it out of this shared base type into the specific embed: true types 👍🏻

trevor-scheer · 2023-03-08T23:22:34Z

packages/server/src/plugin/landingPage/default/types.ts

+     *
+     * The default value is true.
+     */
+    pollForSchemaUpdates?: boolean;


First thing I do when I load up a sandbox. Glad we're adding this!

packages/server/src/plugin/landingPage/default/types.ts

packages/server/src/plugin/landingPage/default/getEmbeddedHTML.ts

mayakoneval · 2023-03-08T23:54:15Z

@trevor-scheer flagging that I am fixing this in this PR too https://github.com/apollographql/apollo-server/pull/7358/files#r1130206916

trevor-scheer · 2023-03-09T00:10:32Z

@mayakoneval just bureacracy left:

Would you add a code snippet to your changeset to demonstrate usage of the new config options?
Please break out the bugfix changeset to its own (as a patch) and provide some more description about why a user is interested in this fix (who's affected, what's broken)
Update PR desc with bugfix info, can be duped from your changeset

mayakoneval · 2023-03-09T06:35:04Z

@trevor-scheer

Bug Fix PR here

This PR has commits from the bug fix PR and This PR which is rebased off of the bug fix PR

added the snippet to this changeset as well 🙏🏻

mayakoneval · 2023-03-09T06:48:55Z

TODO for maya in the morning, test several config options & make sure embedded explorer shows up as expected w the operation, collection, shared headers, uneditable url box etc

trevor-scheer · 2023-03-09T19:53:40Z

@mayakoneval q: what's the expected behavior for providing both this new config and a document? Now we might need some kind of either/or typing so users don't provide both options?

Optionally, document could become string | { collectionId, operationId } 🤔

mayakoneval · 2023-03-09T20:31:20Z

packages/server/src/plugin/landingPage/default/types.ts

+    /**
+     * Headers that are applied by default to every operation executed by the landing page's Sandbox.
+     * Users can disable the application of these headers, but they can't modify their values.
+     *
+     * The landing page's Sandbox always includes these headers in its introspection queries
+     * to your endpoint.
+     */
+    sharedHeaders?: Record<string, string>;
+  };


@cheapsteak @trevor-scheer noting a weirdness here.

This was added in response to this issue, where users expect headers to be applied to their introspection request. This would be a major update b/c the behavior would change with no config change. I added sharedHeaders as an option instead, but it will be confusing for folks to have a top level headers option and then a sharedHeaders option nested in embed: { initialState: { sharedHeaders: {} } }. I don't see a way around this but will add a TODO for the next major version perhaps? What do you think?

What's the desired outcome for the API? A TODO(as5), // @deprecated, and an actual console.warn deprecation warning when we detect bad usage with helpful messaging would be good if people can migrate to a correct thing now.

If they can't migrate to the thing we want it to be yet, a TODO(as5) w/comment is sufficient.

They can't migrate now, headers at the base level will populate headers into the default tab on their Explorer, while sharedHeaders will populate the shared headers in Sandbox that are sent to introspection. These are semantically different, but in AS5 we should probably switch their behavior. 🙏🏻 added TODO!

mayakoneval · 2023-03-09T20:39:31Z

@trevor-scheer

what's the expected behavior for providing both this new config and a document? Now we might need some kind of either/or typing so users don't provide both options?

Optionally, document could become string | { collectionId, operationId } 🤔

an operation from a collection includes headers, variables and a document actually. Now I am thinking I should have changed the types of the embed to be

initialState: {
  document, headers, vars
} | { collectionId, operationId }

The issue with the landing pages is that we don't support collectionId & operationId in the AS landing page, just the embeds. Let me futz with the types to make it more clear if that makes sense to you.

… includes the introduction of config options for the Sandbox aka the local dev embedded landing page option. New config options for Sandbox are: pollForSchemaUpdates, endpointIsEditable, collection & operation id embedding. For explorer, it is just collection & operation id embedding

…nId & operationId in a defaultOperation obj

…out of shared types

…cument, headers, variables

…efined

@mayakoneval

This PR was opened by the [Changesets release](https://github.com/changesets/action) GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated. # Releases ## @apollo/server@4.5.0 ### Minor Changes - [#7431](#7431) [`7cc163ac8`](7cc163a) Thanks [@mayakoneval](https://github.com/mayakoneval)! - 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, }), ], }); ``` - [#7430](#7430) [`b694bb1dd`](b694bb1) Thanks [@mayakoneval](https://github.com/mayakoneval)! - We now send your @apollo/server version to the embedded Explorer & Sandbox used in the landing pages for analytics. ### Patch Changes - [#7432](#7432) [`8cbc61406`](8cbc614) Thanks [@mayakoneval](https://github.com/mayakoneval)! - Bug fix: TL;DR revert a previous change that stops passing includeCookies from the prod landing page config. Who was affected? Any Apollo Server instance that passes a `graphRef` to a production landing page with a non-default `includeCookies` value that does not match the `Include cookies` setting on your registered variant on studio.apollographql.com. How were they affected? From release 4.4.0 to this patch release, folks affected would have seen their Explorer requests being sent with cookies included only if they had set `Include cookies` on their variant. Cookies would not have been included by default. ## @apollo/server-integration-testsuite@4.5.0 ### Patch Changes - Updated dependencies \[[`7cc163ac8`](7cc163a), [`8cbc61406`](8cbc614), [`b694bb1dd`](b694bb1)]: - @apollo/server@4.5.0 Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

trevor-scheer requested changes Mar 8, 2023

View reviewed changes

mayakoneval mentioned this pull request Mar 8, 2023

Show cookie toggle for embedded landing pages #7358

Merged

mayakoneval requested a review from trevor-scheer March 9, 2023 00:00

mayakoneval force-pushed the maya/03-2023/NBLA-2126/add-new-config-to-as-embedded-sandbox branch from 7a31290 to 73f2218 Compare March 9, 2023 06:33

mayakoneval force-pushed the maya/03-2023/NBLA-2126/add-new-config-to-as-embedded-sandbox branch 2 times, most recently from 2818ed5 to 8bdd98d Compare March 9, 2023 06:48

mayakoneval commented Mar 9, 2023

View reviewed changes

mayakoneval force-pushed the maya/03-2023/NBLA-2126/add-new-config-to-as-embedded-sandbox branch from 8bdd98d to 3a169a3 Compare March 9, 2023 22:08

mayakoneval added 8 commits March 9, 2023 14:11

update tests

ee302c0

vs code formatted for me, but this commit really just wraps collectio…

b8fc731

…nId & operationId in a defaultOperation obj

only embeds support default operations, not as landing page, move it …

7f94a1b

…out of shared types

collection & op id shuldn't be optional under their optional parent

297994f

changeset

74e1f5d

update changeset with an example

c8927d3

either pass both collection Id & operation Id or some selection of do…

f3134e0

…cument, headers, variables

mayakoneval force-pushed the maya/03-2023/NBLA-2126/add-new-config-to-as-embedded-sandbox branch from 3a169a3 to f3134e0 Compare March 9, 2023 22:11

mayakoneval added 2 commits March 9, 2023 14:15

add todo for as5

4eda210

pass through any of document, headers, vars not only if doucment is d…

4bab3ad

…efined

trevor-scheer approved these changes Mar 9, 2023

View reviewed changes

trevor-scheer merged commit 7cc163a into apollographql:main Mar 9, 2023

github-actions bot mentioned this pull request Mar 9, 2023

Version Packages #7413

Merged

trevor-scheer mentioned this pull request Mar 9, 2023

pre release fixup: never on both ends #7434

Merged

trevor-scheer pushed a commit that referenced this pull request Mar 9, 2023

Follow up fix to typings from #7431 (#7434)

198fc2c

github-actions bot locked as resolved and limited conversation to collaborators Apr 19, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

NEBULA-2126: Add new config options to Sandbox & Explorer landing pages #7431

NEBULA-2126: Add new config options to Sandbox & Explorer landing pages #7431

mayakoneval commented Mar 8, 2023

netlify bot commented Mar 8, 2023 •

edited

codesandbox-ci bot commented Mar 8, 2023 •

edited

trevor-scheer left a comment

trevor-scheer Mar 8, 2023

mayakoneval Mar 8, 2023

trevor-scheer Mar 8, 2023

mayakoneval commented Mar 8, 2023

trevor-scheer commented Mar 9, 2023

mayakoneval commented Mar 9, 2023

mayakoneval commented Mar 9, 2023

trevor-scheer commented Mar 9, 2023

mayakoneval Mar 9, 2023

trevor-scheer Mar 9, 2023 •

edited

mayakoneval Mar 9, 2023 •

edited

mayakoneval commented Mar 9, 2023

NEBULA-2126: Add new config options to Sandbox & Explorer landing pages #7431

NEBULA-2126: Add new config options to Sandbox & Explorer landing pages #7431

Conversation

mayakoneval commented Mar 8, 2023

Context

What Changed?

How to test

netlify bot commented Mar 8, 2023 • edited

👷 Deploy request for apollo-server-docs pending review.

codesandbox-ci bot commented Mar 8, 2023 • edited

trevor-scheer left a comment

Choose a reason for hiding this comment

trevor-scheer Mar 8, 2023

Choose a reason for hiding this comment

mayakoneval Mar 8, 2023

Choose a reason for hiding this comment

trevor-scheer Mar 8, 2023

Choose a reason for hiding this comment

mayakoneval commented Mar 8, 2023

trevor-scheer commented Mar 9, 2023

mayakoneval commented Mar 9, 2023

mayakoneval commented Mar 9, 2023

trevor-scheer commented Mar 9, 2023

mayakoneval Mar 9, 2023

Choose a reason for hiding this comment

trevor-scheer Mar 9, 2023 • edited

Choose a reason for hiding this comment

mayakoneval Mar 9, 2023 • edited

Choose a reason for hiding this comment

mayakoneval commented Mar 9, 2023

netlify bot commented Mar 8, 2023 •

edited

codesandbox-ci bot commented Mar 8, 2023 •

edited

trevor-scheer Mar 9, 2023 •

edited

mayakoneval Mar 9, 2023 •

edited