WIP on operation collection docs

studio-docs/gatsby-config.js

@@ -19,6 +19,7 @@ module.exports = {
           null: [
             'index',
             'getting-started',
+            'explorer/sandbox',
             '[Managed federation](https://apollographql.com/docs/federation/managed-federation/overview/)'
           ],
           'Registering Schemas': [
@@ -34,8 +35,8 @@ module.exports = {
           ],
           'The Explorer': [
             'explorer/explorer',
-            'explorer/sandbox',
             'explorer/connecting-authenticating',
+            'explorer/operation-collections',
             'explorer/embed-explorer',
             'explorer/additional-features',
           ],

studio-docs/source/explorer/additional-features.mdx

@@ -118,6 +118,10 @@ See [Embedding the Explorer](./embed-explorer).
 
 ## Saving operations
 
+### Operation collections
+
+See [Operation collections](./operation-collections).
+
 ### Operation history
 
 > View your operation history from the Explorer's **Run history** tab.

studio-docs/source/explorer/explorer.mdx

@@ -17,7 +17,7 @@ The Explorer is free for all Apollo Studio organizations. It supports all GraphQ
 
 To get started with the Explorer, [create a graph](../getting-started/#2-create-your-first-graph) in Apollo Studio and then navigate to the graph's Explorer tab.
 
-> The Explorer also provides a [sandbox mode](./sandbox/) that doesn't require an Apollo account.
+> Studio also provides a [sandbox mode](./sandbox/) that doesn't require an Apollo account.
 
 The Getting Started tab _within_ the Explorer helps you get up and running with core features.
 

studio-docs/source/explorer/operation-collections.mdx

@@ -0,0 +1,110 @@
+---
+title: Operation collections in the Explorer
+sidebar_title: Operation collections
+---
+
+You can save **operation collections** in the Apollo Studio Explorer, enabling you to organize your frequently used GraphQL operations and optionally share them with your team:
+
+<img src="../img/operation-collections/list-collections.jpg" alt="Explorer collections list" class="screenshot" width="300" />
+
+Each [variant](../org/graphs/#managing-variants) of a graph has its own set of operation collections. An operation collection can be either **personal** (visible only to you) or **shared** (visible to all organization members).
+
+**Operation collections help you and your team:**
+
+* Stop writing the same operation over and over
+* Organize common operations by how they're used and who uses them
+* Design, execute, and share operations all in a single interface
+* Onboard new team members
+
+## Creating a collection
+
+To create an operation collection in the Explorer:
+
+1. [Open Studio](https://studio.apollographql.com/) and navigate to the Explorer.
+2. In the top left, select the graph/variant combination you want to create a collection for (e.g., `docs-example-graph/current` in the screenshot above).
+3. Click the "bookmark" tab in the Explorer's left panel to open your collection settings (shown in the screenshot above).
+4. Click **+ Create collection** at the top of either the Personal or the Shared section, depending on which type of collection you want to create.
+
+    A dialog like the following appears:
+
+    <img src="../img/operation-collections/create-collection.jpg" alt="Create collection dialog" class="screenshot" width="500" />
+
+5. Provide a name and optional description for your collection.
+6. If you're creating a shared collection, you can click **Advanced permissions for this collection** to specify whether non-admin members of the organization can modify your shared collection and its operations.
+7. Click **Add**.
+
+That's it! Your newly created collection appears in its corresponding list.
+
+## Adding operations
+
+To add operations to a collection:
+
+1. Define at least one operation in the Explorer's editor panel:
+
+    <img src="../img/operation-collections/create-operation.jpg" alt="Example query in the Explorer editor panel" class="screenshot" width="350" />
+
+    > If you define _multiple_ operations in a single editor, _all_ of those operations are saved together as a single entry in a collection.
+
+2. Click the "floppy disk" button (shown in the screenshot above) to open the save dialog:
+
+    <img src="../img/operation-collections/save-operation.jpg" alt="Dialog for saving operation to collection" class="screenshot" width="500" />
+
+3. Provide a name for the collection entry, then use the dropdown menu to select a collection to add it to.
+
+    > If you don't see the collection you want, make sure you've selected the correct graph/variant combination in the Explorer.
+
+4. Click **Save**.
+
+That's it! Your newly saved entry appears in its corresponding collection:
+
+<img src="../img/operation-collections/added-operation.jpg" alt="Saved operation shown in left panel" class="screenshot" width="500" />
+
+If you've saved the entry to a shared collection, it also appears for other members of your organization.
+
+After you add multiple operations to a collection, you can drag and drop to reorder them within the collection.
+
+## Modifying collections and operations
+
+> ⚠️ Non-admin organization members _can't_ edit another team member's shared collection, _unless_ that team member specifically configures the collection to allow this.
+
+**To edit a collection's details,** click the **•••** button next to its entry in the list and select **Configure**.
+
+**To edit an existing operation in a collection,** click that operation to open it and make any necessary changes. Then click the "floppy disk" icon to save those changes.
+
+## Cloning collections and operations
+
+It's often helpful to create a _new_ collection or operation based on an existing one.
+
+* **To clone an entire collection,** click the **•••** button next to its entry in the list and select **Duplicate**.
+  * You can save the new collection to any variant of any graph you have access to, and you can make it personal or shared.
+  * This creates a new collection with an identical set of operations. Modifying the new collection has no effect on the original.
+* **To clone a single operation,** open it in the editor panel and click the dropdown arrow next to the "floppy disk" icon. Then select **Save As**.
+  * This enables you to save a copy of the operation to any collection for the current variant.
+
+## Sharing collections
+
+Every **shared** operation collection is automatically visible in the Explorer for all members of your organization.
+
+You can also give team members a link directly to a particular shared collection or operation. To do so, click the **•••** button next to any shared collection or operation in the list and select the **Copy link** option.
+
+> Team members must be signed in to Studio to view a linked collection or operation, unless it's a [public collection](#public-collections).
+
+### Embedding in the README page
+
+Each graph variant in Studio has a [README page](../org/graphs/#the-readme-page) that you can customize to document that variant. You can embed a variant's shared collections and operations in its README using [shortcodes](../org/graphs/#readme-shortcodes) that are shown in the README editor.
+
+### Public collections
+
+If you create a [public variant](../org/graphs/#public-variants) of your graph, any shared collections for that variant are visible to _everyone_, not just members of your organization. Anonymous users can view and execute operations in a public collection, but they can't make any changes to the collection.
+
+## Sandbox collections
+
+[Apollo Sandbox](./sandbox/) is a special mode of Apollo Studio that doesn't require an Apollo account. If you use Sandbox and _do_ sign in with your Apollo account, you can save personal operation collections that are _specific_ to Sandbox:
+
+<img src="../img/operation-collections/sandbox-collections.jpg" alt="Operation collections in Apollo Sandbox" class="screenshot" width="300" />
+
+These Sandbox collections persist regardless of which GraphQL endpoint you connect to.
+
+While signed in to Sandbox, you can also access the collections for any graph and variant your account has access to.
+
+> If you _don't_ sign in to Sandbox, operation collections are not available.

studio-docs/source/explorer/sandbox.mdx

@@ -1,14 +1,18 @@
 ---
 title: Apollo Sandbox
-description: Use the Explorer with any GraphQL server
+description: Use Studio features without an Apollo account
 sidebar_title: Sandbox (no account required)
 ---
 
 import { Button } from '@apollo/space-kit/Button';
 import { Link } from 'gatsby';
 import { colors } from 'gatsby-theme-apollo-core';
 
-**Apollo Sandbox** is a special instance of the [Explorer](./explorer/) that doesn't require an Apollo account. Sandbox doesn't support certain Explorer features like schema history, but it's great for local development.
+**Apollo Sandbox** is a special mode of Apollo Studio that doesn't require an Apollo account. It provides a subset of Studio features that are great for local development, including:
+
+* [The Explorer](./explorer/)
+* Schema reference
+* [Schema checks](../schema-checks/) and diffs against registered graphs (for logged-in users)
 
 <p>
   <Button
@@ -20,23 +24,25 @@ import { colors } from 'gatsby-theme-apollo-core';
   </Button>
 </p>
 
-Sandbox automatically attempts to connect to a GraphQL server running at `http://localhost:4000`. You can use the box at the top of Sandbox to change this URL to any local or remote GraphQL endpoint that's accessible by your browser:
+## Overview video
 
-<img class="screenshot" src="../img/sandbox-url.jpg" alt="Sandbox URL field" width="300" />
+<iframe width="560" height="315" src="https://www.youtube.com/embed/0jzqqHZU00Q" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 
-> To try out Sandbox with an example GraphQL API, you can set its URL to `https://swapi-graphql.netlify.app/.netlify/functions/index`.
+## Connecting to a GraphQL server
 
-## Overview video
+When you open Sandbox, it automatically attempts to connect to a GraphQL server running at `http://localhost:4000`. You can use the box at the top of the Explorer to change this URL to any local or remote GraphQL endpoint that's accessible by your browser:
 
-<iframe width="560" height="315" src="https://www.youtube.com/embed/0jzqqHZU00Q" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+<img class="screenshot" src="../img/sandbox-url.jpg" alt="Sandbox URL field" width="300" />
+
+> To try out Sandbox with an example GraphQL API, you can set the URL to `https://swapi-graphql.netlify.app/.netlify/functions/index`.
 
 ## Publishing schemas from Sandbox
 
 > ⚠️ Sandbox does not yet support publishing subgraph schemas to Studio for a [federated graph](https://www.apollographql.com/docs/federation/).
 
 If you're signed in to Sandbox with your Apollo account, you can publish your GraphQL server's schema to any Studio graph and variant you have the necessary permissions for.
 
-To do so, first click **Publish** at the top of Sandbox:
+To do so, first click **Publish** at the top of the Explorer:
 
 <img class="screenshot" src="../img/sandbox-publish.jpg" alt="Publishing schemas to Studio from Sandbox" width="600" />
 
@@ -92,7 +98,6 @@ When you click **Run a check**, Studio first performs a composition check using
 
 <img class="screenshot" src="../img/subgraph-sandbox-one-check-failed.jpg" alt="Sandbox subgraph check result" width="500" />
 
-
 ## Offline Sandbox
 
 You can use Sandbox _without_ an internet connection if you're querying a graph running on `localhost`. To do so, [open Sandbox in your browser](https://studio.apollographql.com/sandbox/) at least once while connected to the internet. You can then use that browser to open Sandbox while offline.
@@ -102,3 +107,7 @@ You can use Sandbox _without_ an internet connection if you're querying a graph
 Sandbox automatically reconnects to Apollo Studio whenever your internet connection is restored. When it does, it might display a notification that your Apollo Studio application version is stale by at least 24 hours. You can click the notification to update _all_ of your browser's open Apollo Studio tabs to the latest version.
 
 > This notification indicates only that the Apollo Studio _UI_ is out of date. Your Studio _data_ is always kept up to date.
+
+## Operation collections in Sandbox
+
+See [this section](./operation-collections/#sandbox-collections).