Explorer Everywhere Auth (#71)

* Add handshake on connection for Embedded Explorer * Add type for outgoing messages and send graphRef on handshake * Remove apollo-client as dependency * Minor changeset * type all outgoing post messages via a function (#70) * Embedded Sandbox Relay (#80) * move embedded explorer & embedded sandbox into their own folders. Set up Embeddedsandbox, and much more simplified version of EmbeddedExplorer with introspection requests & update build commands to build both and publish both to cdn * update github workflow build steps * update Readme with new build steps & paths * update circle ci config * Revert "chore(deps): update dependency typescript to v4" This reverts commit e2262b1. * for now revert ts to v3 since TSDX doesn't support ts v4 yet * delete unused example * update url for subdomain * rename sandbox shtuff from explorer to sandbox * don't export ApolloSandbox * add changeset * add eslint-plugin-prettier * update default build command to point to new command name * add versioned jobs to circle ci also Co-authored-by: William San <[email protected]> Co-authored-by: mayakoneval <[email protected]>
apollographql · Apr 29, 2022 · fb3097f · fb3097f
1 parent 1c87608
commit fb3097f
Show file tree

Hide file tree

Showing 34 changed files with 17,458 additions and 20,522 deletions.
diff --git a/.changeset/tender-onions-clap.md b/.changeset/tender-onions-clap.md
@@ -0,0 +1,5 @@
+---
+'@apollo/explorer': minor
+---
+
+Add handshake on connection for Embedded Explorer
diff --git a/.changeset/twenty-cherries-arrive.md b/.changeset/twenty-cherries-arrive.md
@@ -0,0 +1,5 @@
+---
+'@apollo/explorer': minor
+---
+
+Add support for embeddable Sandbox in the embedded-explorer repo. The embeddable Sandbox is only built and pushed to our CDN bucket for use in Apollo Server right now.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -75,37 +75,37 @@ jobs:
           name: TypeScript
           command: npm run typescript:check
 
-  build-latest-umd-app:
+  build-latest-umd-explorer:
     executor: node
     steps:
       - checkout
       - npm-install
       - run:
           name: Build
-          command: '[ -d build ] || PUBLIC_URL=https://embeddable-explorer.cdn.apollographql.com/_latest npm run build:umd -- --no-progress'
+          command: '[ -d build ] || PUBLIC_URL=https://embeddable-explorer.cdn.apollographql.com/_latest npm run build-explorer:umd -- --no-progress'
           environment:
             BUILD_TO_CDN: 'true'
       - persist_to_workspace:
           root: ~/embeddable-explorer
           paths:
             - dist
 
-  build-versioned-umd-app:
+  build-versioned-umd-explorer:
     executor: node
     steps:
       - checkout
       - npm-install
       - run:
           name: Build
-          command: '[ -d build ] || PUBLIC_URL=https://embeddable-explorer.cdn.apollographql.com/$CIRCLE_SHA1 npm run build:umd -- --no-progress'
+          command: '[ -d build ] || PUBLIC_URL=https://embeddable-explorer.cdn.apollographql.com/$CIRCLE_SHA1 npm run build-explorer:umd -- --no-progress'
           environment:
             BUILD_TO_CDN: 'true'
       - persist_to_workspace:
           root: ~/embeddable-explorer
           paths:
             - dist
 
-  cdn-upload-latest:
+  cdn-upload-latest-explorer:
     executor: gcp-cli/google
     steps:
       - gcp-cli/initialize:
@@ -119,7 +119,7 @@ jobs:
           command: |
             gsutil -m rsync -r ~/embeddable-explorer/dist gs://embeddable-explorer/_latest
 
-  cdn-upload-versioned:
+  cdn-upload-versioned-explorer:
     executor: gcp-cli/google
     steps:
       - gcp-cli/initialize:
@@ -133,25 +133,102 @@ jobs:
           command: |
             gsutil -m rsync -r ~/embeddable-explorer/dist gs://embeddable-explorer/$CIRCLE_SHA1
 
+  build-latest-umd-sandbox:
+    executor: node
+    steps:
+      - checkout
+      - npm-install
+      - run:
+          name: Build
+          command: '[ -d build ] || PUBLIC_URL=https://embeddable-explorer.cdn.apollographql.com/_latest npm run build-explorer:umd -- --no-progress'
+          environment:
+            BUILD_TO_CDN: 'true'
+      - persist_to_workspace:
+          root: ~/embeddable-explorer
+          paths:
+            - dist
+
+  build-versioned-umd-sandbox:
+    executor: node
+    steps:
+      - checkout
+      - npm-install
+      - run:
+          name: Build
+          command: '[ -d build ] || PUBLIC_URL=https://embeddable-sandbox.cdn.apollographql.com/$CIRCLE_SHA1 npm run build-sandbox:umd -- --no-progress'
+          environment:
+            BUILD_TO_CDN: 'true'
+      - persist_to_workspace:
+          root: ~/embeddable-explorer
+          paths:
+            - dist
+
+  cdn-upload-latest-sandbox:
+    executor: gcp-cli/google
+    steps:
+      - gcp-cli/initialize:
+          gcloud-service-key: GCLOUD_GCS_SERVICE_KEY
+      - gcp-cli/install
+      - checkout
+      - attach_workspace:
+          at: ~/embeddable-explorer
+      - run:
+          name: Upload build artifacts to CDN
+          command: |
+            gsutil -m rsync -r ~/embeddable-sandbox/dist gs://embeddable-sandbox/_latest
+
+  cdn-upload-versioned-sandbox:
+    executor: gcp-cli/google
+    steps:
+      - gcp-cli/initialize:
+          gcloud-service-key: GCLOUD_GCS_SERVICE_KEY
+      - gcp-cli/install
+      - checkout
+      - attach_workspace:
+          at: ~/embeddable-sandbox
+      - run:
+          name: Upload build artifacts to CDN
+          command: |
+            gsutil -m rsync -r ~/embeddable-sandbox/dist gs://embeddable-sandbox/$CIRCLE_SHA1
+
+
 workflows:
   build-test-deploy:
     jobs:
       - eslint
       - prettier
       - typescript
-      - build-latest-umd-app
-      - cdn-upload-latest:
+      - build-latest-umd-explorer
+      - cdn-upload-latest-explorer:
+          requires:
+            - build-latest-umd-explorer
+          filters:
+            branches:
+              only: main
+      - build-versioned-umd-explorer:
+          requires:
+            - cdn-upload-latest-explorer
+      - cdn-upload-versioned-explorer:
+          requires:
+            - build-versioned-umd-explorer
+          filters:
+            branches:
+              only: main
+      - build-latest-umd-sandbox:
+          requires:
+            - cdn-upload-versioned-explorer
+      - cdn-upload-latest-sandbox:
           requires:
-            - build-latest-umd-app
+            - build-latest-umd-sandbox
           filters:
             branches:
               only: main
-      - build-versioned-umd-app:
+      - build-versioned-umd-sandbox:
           requires:
-            - cdn-upload-latest
-      - cdn-upload-versioned:
+            - cdn-upload-latest-sandbox
+      - cdn-upload-versioned-sandbox:
           requires:
-            - build-versioned-umd-app
+            - build-versioned-umd-sandbox
           filters:
             branches:
               only: main

diff --git a/.codesandbox/ci.json b/.codesandbox/ci.json
@@ -1,4 +1,4 @@
 {
   "sandboxes": ["npm-embeddable-explorer-zotwkv"],
-  "buildCommand": "build:cjs-esm"
+  "buildCommand": "build"
 }
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
@@ -28,8 +28,11 @@ jobs:
       - name: Test
         run: yarn test --ci --coverage --maxWorkers=2
 
-      - name: Build UMD
-        run: yarn build:umd
+      - name: Build Explorer UMD
+        run: yarn build-explorer:umd
 
-      - name: Build CJS / ESM
-        run: yarn build:cjs-esm
+      - name: Build Explorer CJS / ESM
+        run: yarn build-explorer:cjs-esm
+
+      - name: Build Sandbox UMD
+        run: yarn build-sandbox:umd
diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
-# Apollo Studio Embeddable Explorer
+# Apollo Studio Embeddable Explorer & Embeddable Sandbox
 
-This repo hosts the source for Apollo Studio's Embeddable Explorer
+This repo hosts the source for Apollo Studio's Embeddable Explorer & the Embeddable Sandbox
 
 [See docs for usage details](https://www.apollographql.com/docs/studio/embed-explorer/)
 
@@ -23,7 +23,6 @@ function App() {
 
   return (
     <ApolloExplorerReact
-      target='#embeddableExplorer',
       graphRef='acephei@current',
       endpointUrl='https://acephei-gateway.herokuapp.com',
       initialState={{
@@ -78,18 +77,24 @@ me {
 
 ### Examples from the raw cdn hosted umd file
 
-- [Embedding a registered public graph](./src/examples/graphRef.html)
-- [Usage by directly passing in schema](./src/examples/manualSchema.html)
+- [Embedding a registered public graph](./src/embeddableExplorer/examples/graphRef.html)
+- [Usage by directly passing in schema](./src/embeddableExplorer/examples/manualSchema.html)
 
 ## Developing
 
-run `npm run build:umd` to build umd files where EmbeddedExplorer is exposed on window.
+run `npm run build-explorer:umd` to build umd files where EmbeddedExplorer is exposed on window.
 
-Open `examples/localDevelopmentExample.html` to test your changes. (if origin is not set, run localDevelopmentExample.html from `Live Server`)
+Open `examples/embeddedExplorer/localDevelopmentExample.html` to test your changes. (if origin is not set, run localDevelopmentExample.html from `Live Server`)
 
 Install the `Live Server` extension on VSCode, then go to `localDevelopmentExample.html` and click 'Go Live'
 <img width="279" alt="Screen Shot 2022-04-27 at 4 34 53 PM" src="https://user-images.githubusercontent.com/16390269/165626464-8252abcd-2577-4d97-90a8-f487da807a64.png">
 
 
+run `npm run build-explorer:cjs-esm` to build cjs & esm files where ApolloExplorer & ApolloExplorerReact are named exports.
+
+## Developing Embedded Sandbox
+
+run `npm run build-sandbox:umd` to build umd files where EmbeddedExplorer is exposed on window.
+
+Open `examples/embeddedSandbox/localDevelopmentExample.html` to test your changes.
 
-run `npm run build:cjs-esm` to build cjs & esm files where ApolloExplorer & ApolloExplorerReact are named exports.