Federation: Update operation registry docs [AP-587] (#505)

* Federation: Update operation registry docs

Nothing here should change much, but we should verify that users don't
need to do anything to use the operation registry, and if they do, then
we should document those.

* operation-registry to mdx file

* Create dropdown for operation registry code with federation

* fix compilation errors

docs/source/platform/operation-registry.mdx

@@ -3,6 +3,8 @@ title: Securing your graph
 description: How to secure your graph by enforcing a safelist of registered operations
 ---
 
+import { ExpansionPanel } from "gatsby-theme-apollo-docs";
+
 ## Overview
 
 > **Note:** Operation safelisting is an Apollo Platform feature that is only available to subscribers of the [_Apollo Team_ and _Enterprise_ plans](https://www.apollographql.com/plans/). Visit [this guide](https://www.apollographql.com/docs/intro/platform.html) to learn more about the Apollo Platform.
@@ -148,7 +150,9 @@ Enable demand control by adding the operation registry to Apollo Server. To enab
 First, add the appropriate plugin to the Apollo Server's `package.json`:
 
 ```
+
 npm install apollo-server-plugin-operation-registry
+
 ```
 
 Next, the plugin must be enabled. This requires adding the appropriate module to the `plugins` parameter to the Apollo Server options:
@@ -169,6 +173,46 @@ const server = new ApolloServer({
 });
 ```
 
+<ExpansionPanel title="Running Federation using the Apollo Gateway? These same steps should work!">
+
+The full setup:
+
+```js{21-25}
+const { ApolloServer } = require('apollo-server');
+const { ApolloGateway } = require("@apollo/gateway");
+
+const gateway = new ApolloGateway({
+  serviceList: [
+    { name: 'accounts', url: 'http://localhost:4001' },
+    // more services
+  ],
+});
+
+(async () => {
+  const { schema, executor } = await gateway.load();
+
+  const server = new ApolloServer({
+    // Existing configuration
+    schema,
+    executor,
+    subscriptions: false
+    // ...
+    // New configuration
+    plugins: [
+      require("apollo-server-plugin-operation-registry")({
+        forbidUnregisteredOperations: true
+      })
+    ]
+  });
+
+  server.listen().then(({ url }) => {
+    console.log(`🚀 Server ready at ${url}`);
+  });
+})();
+```
+
+</ExpansionPanel>
+
 ####5.1 Optionally, set the schema tag
 
 Configure the `schemaTag` field to specify which tag to pull operation manifests from.
@@ -428,7 +472,7 @@ The new model removes this coupling by using the Apollo api key as the shared
 secret. In order to enable independent secret rotation, the api key is used
 to reference a storage secret that then references the manifests
 
-`/(service id)/storage-secret/(hash of api key).json` <br>
+`/(service id)/storage-secret/(hash of api key).json` <br/>
 `/(service id)/(storage secret)/(tag)/manifest.v2.json`
 
 These changes should be transparent, since the new version of the operation
@@ -451,7 +495,12 @@ message with the operation that fails.
 
 A successful registration will show the operations that are newly registered:
 
-<img src="../img/operation-registry/client-push-success.png" width="80%" style="margin: 5%" alt="apollo client:push successful push">
+<img
+  src="../img/operation-registry/client-push-success.png"
+  width="80%"
+  style="margin: 5%"
+  alt="apollo client:push successful push"
+/>
 
 > Note: If all operations have already been registered, then `apollo client:push` will explain that all operations are registered and not print any specific details
 
@@ -459,7 +508,12 @@ A successful registration will show the operations that are newly registered:
 
 A failed registration will include the validation failure next to the operation:
 
-<img src="../img/operation-registry/client-push-failure.png" width="80%" style="margin: 5%" alt="apollo client:push failure">
+<img
+  src="../img/operation-registry/client-push-failure.png"
+  width="80%"
+  style="margin: 5%"
+  alt="apollo client:push failure"
+/>
 
 #### Metrics and usage statistics
 
@@ -471,13 +525,23 @@ the metric tab
 
 The clients page will show the unregistered operation reported by client
 
-<img src="../img/operation-registry/clients-page.png" width="80%" style="margin: 5%" alt="The clients page showing unregistered operations">
+<img
+  src="../img/operation-registry/clients-page.png"
+  width="80%"
+  style="margin: 5%"
+  alt="The clients page showing unregistered operations"
+/>
 
 ##### Metrics page
 
 The filter on the metrics page will provide the option to show unregistered operations only
 
-<img src="../img/operation-registry/metrics-filter.png" width="50%" style="margin: 5%" alt="The metrics filter showing the option to select unregistered operations">
+<img
+  src="../img/operation-registry/metrics-filter.png"
+  width="50%"
+  style="margin: 5%"
+  alt="The metrics filter showing the option to select unregistered operations"
+/>
 
 #### Variant/tag awareness