graphiql 5: fix color in the F1 popup should be graphiql primary color (#4078)

* fix color in the F1 popup should be graphiql primary color

* upd

* upd

* upd

* increase test timeout

Author: dimaMachina

.changeset/twenty-walls-share.md

@@ -0,0 +1,6 @@
+---
+'@graphiql/react': minor
+'graphiql': patch
+---
+
+fix color in the F1 popup should be graphiql primary color and add deprecated exports for `useEditorStore`, `useExecutionStore`, `usePluginStore` and `useSchemaStore`

packages/graphiql-react/src/components/provider.tsx

@@ -346,7 +346,7 @@ const InnerGraphiQLProvider: FC<GraphiQLProviderProps> = ({
   }, [
     schema,
     dangerouslyAssumeSchemaIsValid,
-    fetcher, // should refresh schema with new fetcher after a fetchError
+    fetcher, // should refresh schema with a new fetcher after a fetchError
   ]);
 
   /**

packages/graphiql-react/src/constants.ts

@@ -200,13 +200,15 @@ const getBaseColors = (
   'editorLink.activeForeground': colors.primary[theme], // Color of active links
   'editorHoverWidget.background': colors.bg[theme], // Background color of the editor hover
   'list.hoverBackground': colors.primaryBg[theme], // List/Tree background when hovering over items using the mouse
+  'list.highlightForeground': colors.primary[theme],
+  'list.focusHighlightForeground': colors.primary[theme],
   'menu.background': colors.bg[theme], // Background color of the context menu
 
   'editorSuggestWidget.background': colors.bg[theme], // Background color of the suggest widget
   'editorSuggestWidget.selectedBackground': colors.primaryBg[theme], // Background color of the selected entry in the suggest widget
   'editorSuggestWidget.selectedForeground': colors.primary[theme], // Foreground color of the selected entry in the suggest widget
   'quickInput.background': colors.bg[theme],
-  'quickInputList.focusForeground': colors.primary[theme],
+  'quickInputList.focusForeground': theme === 'dark' ? '#ffffff' : '#444444',
   'highlighted.label': colors.primary[theme],
   'quickInput.widget': colors.primary[theme],
   highlight: colors.primary[theme],

packages/graphiql-react/src/deprecated.ts

@@ -1,5 +1,8 @@
+/* eslint-disable @typescript-eslint/no-deprecated */
+
 import { useGraphiQL, useGraphiQLActions } from './components';
 import { pick } from './utility';
+import type { MonacoEditor } from './types';
 
 /**
  * @deprecated Use `const { prettifyEditors } = useGraphiQLActions()` instead.
@@ -25,13 +28,66 @@ export function useMergeQuery() {
   return mergeQuery;
 }
 
+/**
+ * @deprecated Use `useGraphiQLActions` and `useGraphiQL` hooks instead.
+ */
+export function useEditorContext() {
+  const {
+    addTab,
+    changeTab,
+    moveTab,
+    closeTab,
+    updateActiveTabValues,
+    setEditor,
+    setOperationName,
+    setShouldPersistHeaders,
+  } = useGraphiQLActions();
+
+  const setHeaderEditor = (headerEditor: MonacoEditor) =>
+    setEditor({ headerEditor });
+  const setQueryEditor = (queryEditor: MonacoEditor) =>
+    setEditor({ queryEditor });
+  const setResponseEditor = (responseEditor: MonacoEditor) =>
+    setEditor({ responseEditor });
+  const setVariableEditor = (variableEditor: MonacoEditor) =>
+    setEditor({ variableEditor });
+
+  const values = useGraphiQL(
+    pick(
+      'headerEditor',
+      'queryEditor',
+      'responseEditor',
+      'variableEditor',
+      'initialHeaders',
+      'initialQuery',
+      'initialVariables',
+      'externalFragments',
+      'shouldPersistHeaders',
+    ),
+  );
+  return {
+    addTab,
+    changeTab,
+    moveTab,
+    closeTab,
+    updateActiveTabValues,
+    setHeaderEditor,
+    setQueryEditor,
+    setResponseEditor,
+    setVariableEditor,
+    setOperationName,
+    setShouldPersistHeaders,
+    ...values,
+  };
+}
+
 /**
  * @deprecated Use `useGraphiQLActions` and `useGraphiQL` hooks instead.
  */
 export function useExecutionContext() {
   const { run, stop } = useGraphiQLActions();
   const values = useGraphiQL(state => ({
-    isFetching: state.isIntrospecting,
+    isFetching: state.isFetching,
     isSubscribed: Boolean(state.subscription),
     operationName: state.operationName,
   }));
@@ -59,9 +115,12 @@ export function usePluginContext() {
  */
 export function useSchemaContext() {
   const { introspect } = useGraphiQLActions();
-  const values = useGraphiQL(
-    pick('fetchError', 'isFetching', 'schema', 'validationErrors'),
-  );
+  const values = useGraphiQL(state => ({
+    isFetching: state.isIntrospecting,
+    fetchError: state.fetchError,
+    schema: state.schema,
+    validationErrors: state.validationErrors,
+  }));
   return {
     introspect,
     ...values,
@@ -76,7 +135,7 @@ export const useStorage = () => useGraphiQL(state => state.storage);
 /**
  * @deprecated Use `const storage = useGraphiQL(state => state.storage)` instead.
  */
-export const useStorageContext = useStorage; // eslint-disable-line @typescript-eslint/no-deprecated
+export const useStorageContext = useStorage;
 
 /**
  * @deprecated Use `useGraphiQLActions` and `useGraphiQL` hooks instead.
@@ -89,3 +148,23 @@ export function useTheme() {
     theme,
   };
 }
+
+/**
+ * @deprecated Use `useGraphiQLActions` and `useGraphiQL` hooks instead.
+ */
+export const useEditorStore = useEditorContext;
+
+/**
+ * @deprecated Use `useGraphiQLActions` and `useGraphiQL` hooks instead.
+ */
+export const useExecutionStore = useExecutionContext;
+
+/**
+ * @deprecated Use `useGraphiQLActions` and `useGraphiQL` hooks instead.
+ */
+export const usePluginStore = usePluginContext;
+
+/**
+ * @deprecated Use `useGraphiQLActions` and `useGraphiQL` hooks instead.
+ */
+export const useSchemaStore = useSchemaContext;

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

@@ -22,7 +22,8 @@ import { STORAGE_KEY } from '../constants';
 
 export interface EditorSlice extends TabsState {
   /**
-   * Unique ID of the GraphiQL instance, which will be suffixed to the URIs for operations, variables, headers, and responses.
+   * Unique ID of the GraphiQL instance, which will be suffixed to the URIs for operations,
+   * variables, headers, and response editors.
    *
    * @see https://github.com/microsoft/monaco-editor#uris
    */

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

@@ -12,11 +12,6 @@ type MonacoTheme =
 export interface ThemeSlice {
   theme: Theme;
 
-  editorTheme: {
-    dark: MonacoTheme;
-    light: MonacoTheme;
-  };
-
   monacoTheme?: MonacoTheme;
 }
 
@@ -37,11 +32,14 @@ export interface ThemeProps {
    * Sets the color theme for the monaco editors.
    * @default { dark: 'graphiql-DARK', light: 'graphiql-LIGHT' }
    */
-  editorTheme?: ThemeSlice['editorTheme'];
+  editorTheme?: {
+    dark: MonacoTheme;
+    light: MonacoTheme;
+  };
 }
 
 type CreateThemeSlice = (
-  initial: Pick<ThemeSlice, 'editorTheme'>,
+  initial: Pick<ThemeProps, 'editorTheme'>,
 ) => StateCreator<
   SlicesWithActions,
   [],
@@ -51,25 +49,26 @@ type CreateThemeSlice = (
   }
 >;
 
-export const createThemeSlice: CreateThemeSlice = initial => (set, get) => ({
-  theme: null,
-  ...initial,
-  actions: {
-    setTheme(theme) {
-      const { storage, editorTheme } = get();
-      storage.set(STORAGE_KEY.theme, theme ?? '');
-      document.body.classList.remove('graphiql-light', 'graphiql-dark');
-      if (theme) {
-        document.body.classList.add(`graphiql-${theme}`);
-      }
-      const { monaco } = monacoStore.getState();
-      const resolvedTheme = theme ?? getSystemTheme();
-      const monacoTheme = editorTheme[resolvedTheme];
-      monaco?.editor.setTheme(monacoTheme);
-      set({ theme, monacoTheme });
+export const createThemeSlice: CreateThemeSlice =
+  ({ editorTheme }) =>
+  (set, get) => ({
+    theme: null,
+    actions: {
+      setTheme(theme) {
+        const { storage } = get();
+        storage.set(STORAGE_KEY.theme, theme ?? '');
+        document.body.classList.remove('graphiql-light', 'graphiql-dark');
+        if (theme) {
+          document.body.classList.add(`graphiql-${theme}`);
+        }
+        const { monaco } = monacoStore.getState();
+        const resolvedTheme = theme ?? getSystemTheme();
+        const monacoTheme = editorTheme![resolvedTheme];
+        monaco?.editor.setTheme(monacoTheme);
+        set({ theme, monacoTheme });
+      },
     },
-  },
-});
+  });
 
 /**
  * Get the resolved theme - dark or light

packages/graphiql/README.md

@@ -54,8 +54,9 @@ _/ˈɡrafək(ə)l/_ A graphical interactive in-browser GraphQL IDE.
 
 ## Getting started
 
-> If you're looking to upgrade from `[email protected]` to `graphiql@2`, check out
-> the [migration guide](../../docs/migration/graphiql-2.0.0.md)!
+- [Migration guide to GraphiQL 2](../../docs/migration/graphiql-2.0.0.md)
+- [Migration guide to GraphiQL 4](../../docs/migration/graphiql-4.0.0.md)
+- [Migration guide to GraphiQL 5](../../docs/migration/graphiql-5.0.0.md)
 
 ### CDN usage
 

packages/graphiql/setup-files.ts

@@ -8,4 +8,4 @@ vi.mock('zustand');
 vi.mock('monaco-editor');
 
 // Since we load `monaco-editor` dynamically, we need to allow more time for tests that assert editor values
-configure({ asyncUtilTimeout: 8_000 });
+configure({ asyncUtilTimeout: 9_000 });

packages/graphiql/src/GraphiQL.spec.tsx

@@ -655,10 +655,24 @@ describe('GraphiQL', () => {
   });
 
   it('should support multiple instances', async () => {
+    const queryEditors: Record<0 | 1, MonacoEditor> = Object.create(null);
+
+    const HookConsumer: FC<{ id: 0 | 1 }> = ({ id }) => {
+      const $queryEditor = useGraphiQL(state => state.queryEditor);
+      useEffect(() => {
+        queryEditors[id] = $queryEditor!;
+      }, [$queryEditor, id]);
+      return null;
+    };
+
     const { container, getAllByLabelText } = render(
       <>
-        <GraphiQL fetcher={noOpFetcher} />
-        <GraphiQL fetcher={noOpFetcher} />
+        <GraphiQL fetcher={noOpFetcher}>
+          <HookConsumer id={0} />
+        </GraphiQL>
+        <GraphiQL fetcher={noOpFetcher}>
+          <HookConsumer id={1} />
+        </GraphiQL>
       </>,
     );
     const [firstEl, secondEl] = container.querySelectorAll(
@@ -685,6 +699,15 @@ describe('GraphiQL', () => {
       // Editor store
       expect(firstEl!.querySelectorAll('.graphiql-tab').length).toBe(2);
       expect(secondEl!.querySelectorAll('.graphiql-tab').length).toBe(1);
+
+      // Query
+      queryEditors[0].setValue('{__typename}');
+      queryEditors[1].setValue('bar');
+      const editors = container.querySelectorAll<HTMLDivElement>(
+        '.graphiql-query-editor .monaco-scrollable-element',
+      );
+      expect(editors[0]!.textContent).toBe('{__typename}');
+      expect(editors[1]!.textContent).toBe('bar');
     });
   });
 

packages/graphiql/vitest.config.mts

@@ -9,7 +9,7 @@ export default defineConfig({
     environment: 'jsdom',
     setupFiles: ['./setup-files.ts', './setup-window.ts'],
     // Since we increased `waitFor` timeout in setup-files.ts
-    testTimeout: 8_000,
+    testTimeout: 9_000,
     alias: [
       {
         // Fixes Error: Failed to resolve entry for package "monaco-editor". The package may have incorrect main/module/exports specified in its package.json.