[graphiql] fix placeholder ⌘ K in doc explorer search input for non mac devices, replace by Ctrl K (#3751)

Author: dimaMachina

.changeset/lemon-mirrors-accept.md

@@ -0,0 +1,10 @@
+---
+'codemirror-graphql': patch
+'@graphiql/react': patch
+'cm6-graphql': patch
+'graphiql': patch
+---
+
+replace deprecated `navigator.platform` with `navigator.userAgent`
+
+fix placeholder `⌘ K` in doc explorer search input for non mac devices, replace by `Ctrl K`

packages/cm6-graphql/src/helpers.ts

@@ -38,6 +38,6 @@ export class Position implements IPosition {
   }
 }
 
-const isMac = () => /mac/i.test(navigator.platform);
+const isMac = () => navigator.userAgent.includes('Mac');
 export const isMetaKeyPressed = (e: MouseEvent) =>
   isMac() ? e.metaKey : e.ctrlKey;

packages/codemirror-graphql/src/utils/jump-addon.ts

@@ -121,7 +121,7 @@ function onKeyDown(cm: CodeMirror.Editor, event: KeyboardEvent) {
 }
 
 const isMac =
-  typeof navigator !== 'undefined' && navigator?.appVersion.includes('Mac');
+  typeof navigator !== 'undefined' && navigator.userAgent.includes('Mac');
 
 function isJumpModifier(key: string) {
   return key === (isMac ? 'Meta' : 'Control');

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

@@ -1,14 +1,9 @@
 import { KeyMap } from './types';
+import { isMacOs } from '../utility/is-macos';
 
 export const DEFAULT_EDITOR_THEME = 'graphiql';
 export const DEFAULT_KEY_MAP: KeyMap = 'sublime';
 
-let isMacOs = false;
-
-if (typeof window === 'object') {
-  isMacOs = window.navigator.platform.toLowerCase().indexOf('mac') === 0;
-}
-
 export const commonKeys = {
   // Persistent search box in Query Editor
   [isMacOs ? 'Cmd-F' : 'Ctrl-F']: 'findPersistent',

packages/graphiql-react/src/explorer/components/doc-explorer.css

@@ -38,7 +38,7 @@
 
   &:not(:focus-within) [role='combobox'] {
     height: 24px;
-    width: 4ch;
+    width: 5ch;
   }
 
   & [role='combobox']:focus {

packages/graphiql-react/src/explorer/components/search.tsx

@@ -24,6 +24,7 @@ import { useExplorerContext } from '../context';
 
 import './search.css';
 import { renderType } from './utils';
+import { isMacOs } from '../../utility/is-macos';
 
 export function Search() {
   const { explorerNavStack, push } = useExplorerContext({
@@ -103,7 +104,7 @@ export function Search() {
           onFocus={handleFocus}
           onBlur={handleFocus}
           onChange={event => setSearchValue(event.target.value)}
-          placeholder="⌘ K"
+          placeholder={`${isMacOs ? '⌘' : 'Ctrl'} K`}
           ref={inputRef}
           value={searchValue}
           data-cy="doc-explorer-input"

packages/graphiql-react/src/index.ts

@@ -71,6 +71,7 @@ export {
 } from './storage';
 export { useTheme } from './theme';
 export { useDragResize } from './utility/resize';
+export { isMacOs } from './utility/is-macos';
 
 export * from './icons';
 export * from './ui';

packages/graphiql-react/src/utility/is-macos.ts

@@ -0,0 +1,2 @@
+export const isMacOs =
+  typeof navigator !== 'undefined' && navigator.userAgent.includes('Mac');

packages/graphiql/src/components/GraphiQL.tsx

@@ -60,6 +60,7 @@ import {
   UseVariableEditorArgs,
   VariableEditor,
   WriteableEditorProps,
+  isMacOs,
 } from '@graphiql/react';
 
 const majorVersion = parseInt(React.version.slice(0, 2), 10);
@@ -915,11 +916,7 @@ export function GraphiQLInterface(props: GraphiQLInterfaceProps) {
   );
 }
 
-const modifier =
-  typeof window !== 'undefined' &&
-  window.navigator.platform.toLowerCase().indexOf('mac') === 0
-    ? 'Cmd'
-    : 'Ctrl';
+const modifier = isMacOs ? '⌘' : 'Ctrl';
 
 const SHORT_KEYS = Object.entries({
   'Search in editor': [modifier, 'F'],

packages/graphiql/test/beforeDevServer.js

@@ -10,17 +10,13 @@ const path = require('node:path');
 // eslint-disable-next-line import-x/no-extraneous-dependencies
 const { createHandler } = require('graphql-http/lib/use/express');
 const schema = require('./schema');
-const badSchema = require('../cypress/fixtures/bad-schema.json');
+const { customExecute } = require('./execute');
 
 module.exports = function beforeDevServer(app, _server, _compiler) {
   // GraphQL Server
-  app.post('/graphql', createHandler({ schema }));
-  app.get('/graphql', createHandler({ schema }));
-
-  app.post('/bad/graphql', (_req, res, next) => {
-    res.json({ data: badSchema });
-    next();
-  });
+  const handler = createHandler({ schema, execute: customExecute });
+  app.post('/graphql', handler);
+  app.get('/graphql', handler);
 
   app.use('/images', express.static(path.join(__dirname, 'images')));