feat(CodeBlock): Pass variables into graphqlPlayground url (#362)

* WIP

* Cleanup code

* Convert to json from jsonc

* Rename var

* Cleanup code

package.json

@@ -17,6 +17,7 @@
     "clsx": "^1.1.1",
     "find-up": "^5.0.0",
     "fs-extra": "^10.0.0",
+    "jsonc-parser": "^3.0.0",
     "polished": "^4.1.3",
     "prism-react-renderer": "1.2.1",
     "react-keyed-flatten-children": "^1.3.0",

src/components/CodeBlock.stories.tsx

@@ -11,7 +11,7 @@ import { CodeBlock as Component } from './CodeBlock';
 export default {
   args: {
     braidThemeName: defaultArgs.braidThemeName,
-    graphqlPlayground: 'https://graphql.seek.com/graphql',
+    graphqlPlayground: 'https://manage.developer.seek.com/graphql-explorer',
     language: 'graphql',
     size: defaultArgs.size,
     trim: true,

src/components/CodeBlock.tsx

@@ -1,4 +1,5 @@
 import { Box, Stack, Text, TextLinkButton } from 'braid-design-system';
+import { parse } from 'jsonc-parser';
 import Highlight from 'prism-react-renderer';
 import React, { useState } from 'react';
 
@@ -56,15 +57,23 @@ export const CodeBlock = ({
 
   const child = children[index];
 
+  const jsoncVariables =
+    children[0].language === 'graphql' && children[1]?.label === 'Variables'
+      ? children[1].code
+      : undefined;
+
+  const variables =
+    jsoncVariables && JSON.stringify(parse(jsoncVariables), null, 2);
+
   const graphqlPlaygroundButton =
-    child.language === 'graphql' && graphqlPlayground ? (
+    children[0].language === 'graphql' && graphqlPlayground ? (
       <Box component="span" paddingLeft={tablePadding}>
         <GraphQLPlaygroundAction
           graphqlPlayground={graphqlPlayground}
           size={size}
-        >
-          {child.code}
-        </GraphQLPlaygroundAction>
+          query={children[0].code}
+          variables={variables}
+        />
       </Box>
     ) : undefined;
 

src/components/CodeBlock/GraphQLPlaygroundAction.tsx

@@ -8,26 +8,29 @@ import { SIZE_TO_SMALLER, Size } from '../../private/size';
 const URL = url.URL ?? window.URL;
 
 interface Props {
-  children: string;
+  query: string;
+  variables: string | undefined;
   graphqlPlayground: string;
   size: Size;
 }
 
 export const GraphQLPlaygroundAction = ({
-  children,
+  query,
+  variables,
   graphqlPlayground,
   size,
 }: Props) => {
   const playgroundUrl = new URL(graphqlPlayground);
-  playgroundUrl.searchParams.set('query', children);
+  playgroundUrl.searchParams.set('query', query);
+  playgroundUrl.searchParams.set('variables', variables ?? '{}');
   const href = playgroundUrl.toString();
 
   const smallerSize = SIZE_TO_SMALLER[size];
 
   return (
     <Text size={smallerSize} weight="medium">
       <TextLink href={href} rel="noreferrer" target="_blank">
-        <IconVideo alignY="lowercase" /> Playground
+        <IconVideo alignY="lowercase" /> GraphQL Explorer
       </TextLink>
     </Text>
   );