feat: tabs (#2197)

Co-authored-by: Rikki Schulte <rikki.schulte@gmail.com>
Co-authored-by: timsuchanek <tim.suchanek@gmail.com>

.changeset/lemon-eagles-knock.md

@@ -0,0 +1,6 @@
+---
+"graphiql": minor
+---
+
+Now featuring: tabs! 🥳 🍾 just opt-in with new prop `<GraphiQL tabs />`. 
+You can also both opt-in and provide a handler via `<GraphiQL tabs={{ onTabsChange }} />`!

package.json

@@ -14,7 +14,8 @@
   "lint-staged": {
     "*.{js,ts,jsx,tsx}": [
       "eslint --fix",
-      "prettier --write"
+      "prettier --write",
+      "jest"
     ],
     "*.{md,html,json,css}": [
       "prettier --write"

packages/graphiql/resources/renderExample.js

@@ -75,6 +75,15 @@ function onEditOperationName(newOperationName) {
   updateURL();
 }
 
+function onTabChange(tabsState) {
+  const activeTab = tabsState.tabs[tabsState.activeTabIndex];
+  parameters.query = activeTab.query;
+  parameters.variables = activeTab.variables;
+  parameters.headers = activeTab.headers;
+  parameters.operationName = activeTab.operationName;
+  updateURL();
+}
+
 function updateURL() {
   var newSearch =
     '?' +
@@ -127,6 +136,9 @@ ReactDOM.render(
     headerEditorEnabled: true,
     shouldPersistHeaders: true,
     inputValueDeprecation: true,
+    tabs: {
+      onTabChange: onTabChange,
+    },
   }),
   document.getElementById('graphiql'),
 );