From b8538d87421edb086b32d4eb2e30a3f7d9d9e893 Mon Sep 17 00:00:00 2001 From: Dimitri POSTOLOV Date: Sat, 24 Aug 2024 16:09:37 +0200 Subject: [PATCH] =?UTF-8?q?[graphiql]=20fix=20placeholder=20`=E2=8C=98=20K?= =?UTF-8?q?`=20in=20doc=20explorer=20search=20input=20for=20non=20mac=20de?= =?UTF-8?q?vices,=20replace=20by=20`Ctrl=20K`=20(#3751)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .changeset/lemon-mirrors-accept.md | 10 ++++++++++ packages/cm6-graphql/src/helpers.ts | 2 +- packages/codemirror-graphql/src/utils/jump-addon.ts | 2 +- packages/graphiql-react/src/editor/common.ts | 7 +------ .../src/explorer/components/doc-explorer.css | 2 +- .../src/explorer/components/search.tsx | 3 ++- packages/graphiql-react/src/index.ts | 1 + packages/graphiql-react/src/utility/is-macos.ts | 2 ++ packages/graphiql/src/components/GraphiQL.tsx | 7 ++----- packages/graphiql/test/beforeDevServer.js | 12 ++++-------- 10 files changed, 25 insertions(+), 23 deletions(-) create mode 100644 .changeset/lemon-mirrors-accept.md create mode 100644 packages/graphiql-react/src/utility/is-macos.ts diff --git a/.changeset/lemon-mirrors-accept.md b/.changeset/lemon-mirrors-accept.md new file mode 100644 index 00000000000..7c3f305d1f5 --- /dev/null +++ b/.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` diff --git a/packages/cm6-graphql/src/helpers.ts b/packages/cm6-graphql/src/helpers.ts index 6248db87f96..83fc3237c12 100644 --- a/packages/cm6-graphql/src/helpers.ts +++ b/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; diff --git a/packages/codemirror-graphql/src/utils/jump-addon.ts b/packages/codemirror-graphql/src/utils/jump-addon.ts index d3fd3d41f02..933bd0ce4a1 100644 --- a/packages/codemirror-graphql/src/utils/jump-addon.ts +++ b/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'); diff --git a/packages/graphiql-react/src/editor/common.ts b/packages/graphiql-react/src/editor/common.ts index 720f427b101..33f55299a5c 100644 --- a/packages/graphiql-react/src/editor/common.ts +++ b/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', diff --git a/packages/graphiql-react/src/explorer/components/doc-explorer.css b/packages/graphiql-react/src/explorer/components/doc-explorer.css index 9cab5ffb4a0..8e8daa3bc35 100644 --- a/packages/graphiql-react/src/explorer/components/doc-explorer.css +++ b/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 { diff --git a/packages/graphiql-react/src/explorer/components/search.tsx b/packages/graphiql-react/src/explorer/components/search.tsx index 6faed70f652..e090f513258 100644 --- a/packages/graphiql-react/src/explorer/components/search.tsx +++ b/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" diff --git a/packages/graphiql-react/src/index.ts b/packages/graphiql-react/src/index.ts index d52e3bffb24..bf4b99d71d4 100644 --- a/packages/graphiql-react/src/index.ts +++ b/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'; diff --git a/packages/graphiql-react/src/utility/is-macos.ts b/packages/graphiql-react/src/utility/is-macos.ts new file mode 100644 index 00000000000..a71ebf16978 --- /dev/null +++ b/packages/graphiql-react/src/utility/is-macos.ts @@ -0,0 +1,2 @@ +export const isMacOs = + typeof navigator !== 'undefined' && navigator.userAgent.includes('Mac'); diff --git a/packages/graphiql/src/components/GraphiQL.tsx b/packages/graphiql/src/components/GraphiQL.tsx index 470cbd6f2ad..9a4be7a2221 100644 --- a/packages/graphiql/src/components/GraphiQL.tsx +++ b/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'], diff --git a/packages/graphiql/test/beforeDevServer.js b/packages/graphiql/test/beforeDevServer.js index 55c634caeed..4a3d4fb89ef 100644 --- a/packages/graphiql/test/beforeDevServer.js +++ b/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')));