graphiql 5: extract graphiql sidebar to react component (#4017)

* extract sidebar into component

* upd

* add changeset

* fix cypress

Author: dimaMachina

.changeset/orange-spies-poke.md

@@ -0,0 +1,6 @@
+---
+'@graphiql/react': minor
+'graphiql': minor
+---
+
+extract graphiql sidebar to react component

packages/graphiql-react/src/stores/editor.ts

@@ -467,10 +467,11 @@ export const createEditorSlice: CreateEditorSlice = initial => (set, get) => {
       set(newState);
     },
     setOperationName(operationName) {
-      const { onEditOperationName, actions } = get();
-      set({ operationName });
-      actions.updateActiveTabValues({ operationName });
-      onEditOperationName?.(operationName);
+      set(({ onEditOperationName, actions }) => {
+        actions.updateActiveTabValues({ operationName });
+        onEditOperationName?.(operationName);
+        return { operationName };
+      });
     },
     setShouldPersistHeaders(persist) {
       const { headerEditor, tabs, activeTabIndex } = get();
@@ -486,8 +487,8 @@ export const createEditorSlice: CreateEditorSlice = initial => (set, get) => {
         storage.set(STORAGE_KEY.headers, '');
         clearHeadersFromTabs();
       }
-      set({ shouldPersistHeaders: persist });
       storage.set(STORAGE_KEY.persistHeaders, persist.toString());
+      set({ shouldPersistHeaders: persist });
     },
     storeTabs({ tabs, activeTabIndex }) {
       const { storage } = storageStore.getState();

packages/graphiql-react/src/stores/execution.ts

@@ -8,12 +8,7 @@ import {
   isObservable,
   Unsubscribable,
 } from '@graphiql/toolkit';
-import {
-  ExecutionResult,
-  FragmentDefinitionNode,
-  GraphQLError,
-  print,
-} from 'graphql';
+import { ExecutionResult, GraphQLError, print } from 'graphql';
 import { getFragmentDependenciesForAST } from 'graphql-language-service';
 import setValue from 'set-value';
 import getValue from 'get-value';
@@ -185,9 +180,10 @@ export const createExecutionSlice: CreateExecutionSlice =
       queryId: 0,
       actions: {
         stop() {
-          const { subscription } = get();
-          subscription?.unsubscribe();
-          set({ isFetching: false, subscription: null });
+          set(({ subscription }) => {
+            subscription?.unsubscribe();
+            return { isFetching: false, subscription: null };
+          });
         },
         async run() {
           const {
@@ -258,12 +254,9 @@ export const createExecutionSlice: CreateExecutionSlice =
           const fragmentDependencies = documentAST
             ? getFragmentDependenciesForAST(documentAST, externalFragments)
             : [];
-          if (fragmentDependencies.length > 0) {
+          if (fragmentDependencies.length) {
             query +=
-              '\n' +
-              fragmentDependencies
-                .map((node: FragmentDefinitionNode) => print(node))
-                .join('\n');
+              '\n' + fragmentDependencies.map(node => print(node)).join('\n');
           }
 
           setResponse('');

packages/graphiql-react/src/stores/plugin.ts

@@ -98,13 +98,18 @@ export const createPluginSlice: CreatePluginSlice = initial => set => ({
   ...initial,
   actions: {
     setVisiblePlugin(plugin = null) {
-      set(({ visiblePlugin, plugins, onTogglePluginVisibility }) => {
+      set(current => {
+        const {
+          visiblePlugin: currentVisiblePlugin,
+          plugins,
+          onTogglePluginVisibility,
+        } = current;
         const byTitle = typeof plugin === 'string';
         const newVisiblePlugin: PluginSlice['visiblePlugin'] =
           (plugin && plugins.find(p => (byTitle ? p.title : p) === plugin)) ||
           null;
-        if (newVisiblePlugin === visiblePlugin) {
-          return { visiblePlugin };
+        if (newVisiblePlugin === currentVisiblePlugin) {
+          return current;
         }
         onTogglePluginVisibility?.(newVisiblePlugin);
         const { storage } = storageStore.getState();

packages/graphiql-react/src/utility/tabs.ts

@@ -26,21 +26,25 @@ export interface TabState extends TabDefinition {
    * A GUID value generated when the tab was created.
    */
   id: string;
+
   /**
    * A hash that is unique for a combination of the contents of the query
    * editor, the variable editor and the header editor (i.e. all the editor
    * where the contents are persisted in storage).
    */
   hash: string;
+
   /**
    * The title of the tab shown in the tab element.
    */
   title: string;
+
   /**
    * The operation name derived from the contents of the query editor of this
    * tab.
    */
   operationName: string | null;
+
   /**
    * The contents of the response editor of this tab.
    */

packages/graphiql/cypress/e2e/docs.cy.ts

@@ -117,7 +117,7 @@ describeOrSkip('GraphQL DocExplorer - deprecated arguments', () => {
     );
     cy.get('.graphiql-markdown-deprecation').should(
       'have.text',
-      'deprecated argument\n',
+      'Argument "deprecatedArg" is deprecated. Use "string" instead.\n',
     );
   });
 });