Skip to content

new tabs look for graphiql v4 #3685

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 89 commits into from
May 2, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
89 commits
Select commit Hold shift + click to select a range
fec285b
changeset pre enter alpha
dimaMachina Aug 7, 2024
3c1a345
[graphiql-react/graphiql] new looks of tabs (#3644)
dimaMachina Aug 7, 2024
5d90e0e
[2] GraphiQL x Vite v5 (#3679)
dimaMachina Aug 7, 2024
11aacd0
[3] remove unused webpack deps (#3681)
dimaMachina Aug 7, 2024
955573a
Merge branch 'main' into graphiql-v4
dimaMachina Aug 7, 2024
8efb873
[4] update graphql to `16.9.0` and use vite `define` configuration to…
dimaMachina Aug 7, 2024
0fdd9b9
remove `data-testid="graphiql-container"` (#3688)
dimaMachina Aug 7, 2024
c5b3aa2
commit `pre.json` until `graphiql-v4` will be added to list of author…
dimaMachina Aug 7, 2024
61fc27a
remove `graphiql-v4` from release.yml
dimaMachina Aug 7, 2024
09e7004
[v4] remove `disableTabs` option (#3687)
dimaMachina Aug 7, 2024
11bacb8
commit `pre.json`
dimaMachina Aug 7, 2024
445bf02
add `graphiql-v4` in release.yml
dimaMachina Aug 7, 2024
d34246e
Merge branch 'main' into graphiql-v4
dimaMachina Aug 7, 2024
82bc961
[v4] prefer `location` over `window.location` and prefer `navigator` …
dimaMachina Aug 7, 2024
93453fc
[v4] remove `build.sh` and `checkgit.sh` (#3694)
dimaMachina Aug 7, 2024
2005871
[v4] test umd build only on ci, locally test cdn.ts (#3693)
dimaMachina Aug 7, 2024
bf3ea52
[v4] convert graphiql e2e server to ESM (#3697)
dimaMachina Aug 8, 2024
bb70347
Merge branch 'main' into graphiql-v4
dimaMachina Aug 8, 2024
5e43d2b
[v4] update changeset for changed exports (#3700)
dimaMachina Aug 8, 2024
95668f5
Merge branch 'main' into graphiql-v4
dimaMachina Aug 8, 2024
00415d2
[v4] generate types with `vite-plugin-dts` (#3702)
dimaMachina Aug 9, 2024
8ff87d7
[v4] use `vite build --watch` instead of `vite` for `dev` script beca…
dimaMachina Aug 9, 2024
343dd59
[v4] remove graphiql default export (#3706)
dimaMachina Aug 9, 2024
4e26b74
Merge branch 'main' into graphiql-v4
dimaMachina Aug 9, 2024
db181b2
[v4] fix netlify deploy (#3708)
dimaMachina Aug 9, 2024
9baf1f0
change `style.css` imports (#3709)
dimaMachina Aug 9, 2024
7afb4be
Update poor-ghosts-jump.md
dimaMachina Aug 9, 2024
1a6d63d
Version Packages (alpha) (#3689)
acao Aug 11, 2024
27bbc51
[v4] show tabs even there is only 1 tab (#3713)
dimaMachina Aug 13, 2024
3c901c1
[v4] Remove `toolbar.additionalContent` and `toolbar.additionalCompon…
dimaMachina Aug 13, 2024
cb4553d
Version Packages (alpha) (#3714)
acao Aug 13, 2024
cc2808f
[v4] use `position: absolute` for `.graphiql-logo` class (#3716)
dimaMachina Aug 13, 2024
bf0c4e7
[v4] remove `createComponentGroup` utility in favour `Object.assign` …
dimaMachina Aug 13, 2024
15fff26
Version Packages (alpha) (#3718)
acao Aug 13, 2024
d3fc470
[v4] fix merge conflicts with `main` (#3719)
dimaMachina Aug 13, 2024
b468046
Merge branch 'main' into graphiql-v4
dimaMachina Aug 14, 2024
79f3abf
[v4] fix scrollbar appearing in sidebar (#3720)
dimaMachina Aug 14, 2024
9d28035
Version Packages (alpha) (#3723)
acao Aug 14, 2024
4609e00
Merge branch 'main' into graphiql-v4
dimaMachina Aug 14, 2024
6587675
Merge branch 'main' into graphiql-v4
dimaMachina Aug 14, 2024
f2a6b39
Merge branch 'main' into graphiql-v4
dimaMachina Aug 14, 2024
f8b719f
style: Don't convert single \n to <br> (#3414)
leonardehrenfried Aug 14, 2024
196e9a0
[v4] some refactoring (#3726)
dimaMachina Aug 14, 2024
3bcbda4
Merge branch 'main' into graphiql-v4
dimaMachina Aug 14, 2024
a1a5208
[v4] polish `tabs.cy` tests, remove `.graphiql-session` class (#3728)
dimaMachina Aug 14, 2024
99c64ac
Merge branch 'main' into graphiql-v4
dimaMachina Aug 15, 2024
167629f
fix tests
dimaMachina Aug 15, 2024
360a038
[v4] rollback `position: absolute` style for `.graphiql-logo` because…
dimaMachina Aug 15, 2024
8d9d469
Merge branch 'main' into graphiql-v4
dimaMachina Aug 15, 2024
fd0e25f
Version Packages (alpha) (#3725)
acao Aug 15, 2024
058d1d8
Merge branch 'main' into graphiql-v4
dimaMachina Aug 15, 2024
c966fa1
Merge branch 'main' into graphiql-v4
dimaMachina Aug 15, 2024
8dbddb5
Add support for onPrettifyQuery callback to enable customised query f…
dimaMachina Aug 15, 2024
e10e96c
Merge branch 'main' into graphiql-v4
dimaMachina Aug 15, 2024
3a2580e
Version Packages (alpha) (#3732)
acao Aug 15, 2024
eaa415c
[v4] improve explorer styles (#3738)
dimaMachina Aug 19, 2024
dfb302a
Version Packages (alpha) (#3739)
acao Aug 19, 2024
3c12ce0
fix types incorrect types entry (#3740)
dimaMachina Aug 20, 2024
e432fb5
Version Packages (alpha) (#3741)
acao Aug 20, 2024
ffaf5c9
add vite replace html plugin for graphiql plugin explorer (#3742)
dimaMachina Aug 20, 2024
f042025
Merge branch 'main' into graphiql-v4
dimaMachina Aug 22, 2024
befbd04
temp
dimaMachina Aug 23, 2024
fdcecaf
Merge branch 'main' into graphiql-v4
dimaMachina Aug 23, 2024
78cb500
migrate `@graphiql/toolkit` to `tsup` (#3746)
dimaMachina Aug 23, 2024
3c48be0
rollback of `temp` commit
dimaMachina Aug 23, 2024
068e23c
Merge branch 'main' into graphiql-v4
dimaMachina Aug 24, 2024
885176a
Merge branch 'main' into graphiql-v4
dimaMachina Apr 25, 2025
2fb81c3
update lock
dimaMachina Apr 25, 2025
8eafb05
Merge branch 'v4' into graphiql-v4
dimaMachina May 2, 2025
d50b252
merge
dimaMachina May 2, 2025
3cae1d1
Update .changeset/rich-jobs-kick.md
dimaMachina May 2, 2025
0e45bb7
polish
dimaMachina May 2, 2025
388da67
lint
dimaMachina May 2, 2025
d435e68
Update .changeset/good-vans-refuse.md
dimaMachina May 2, 2025
59860d5
update migration guide
dimaMachina May 2, 2025
bcf7099
update migration guide
dimaMachina May 2, 2025
2582f44
upd
dimaMachina May 2, 2025
cd97d15
upd
dimaMachina May 2, 2025
2508668
fix
dimaMachina May 2, 2025
bc03dd0
make on prettify query async
dimaMachina May 2, 2025
fc34a65
use maybe promise from toolkit
dimaMachina May 2, 2025
abd6527
upd
dimaMachina May 2, 2025
5b80da4
message processor test pass
dimaMachina May 2, 2025
16e5029
fix e2e
dimaMachina May 2, 2025
44dc882
try
dimaMachina May 2, 2025
8493035
FIX e2e
dimaMachina May 2, 2025
e796eb3
try
dimaMachina May 2, 2025
3cf9bf6
ok now it's good
dimaMachina May 2, 2025
edb2291
I hope now it's ok!
dimaMachina May 2, 2025
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions .changeset/add-on-prettify-callback.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
"@graphiql/react": minor
"graphiql": minor
---

Add support for `onPrettifyQuery` callback to enable customised query formatting
12 changes: 12 additions & 0 deletions .changeset/breezy-chicken-crash.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
---
'@graphiql/plugin-code-exporter': major
---

`style.css` import was changed

## Migration

```diff
-import '@graphiql/plugin-code-exporter/dist/style.css';
+import '@graphiql/plugin-code-exporter/style.css';
```
5 changes: 5 additions & 0 deletions .changeset/few-steaks-clap.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'graphiql': major
---

show tabs even there is only 1 tab
7 changes: 7 additions & 0 deletions .changeset/flat-lies-heal.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
---
'@graphiql/react': minor
'@graphiql/plugin-explorer': minor
'@graphiql/plugin-code-exporter': minor
---

generate types with `vite-plugin-dts`
19 changes: 19 additions & 0 deletions .changeset/gentle-bugs-mix.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
---
'graphiql': major
---

remove default export

## Migration

### Before

```jsx
import GraphiQL from 'graphiql'
```

### After

```jsx
import { GraphiQL } from 'graphiql'
```
12 changes: 12 additions & 0 deletions .changeset/good-vans-refuse.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
---
'@graphiql/react': minor
---

`style.css` import was changed

## Migration

```diff
-import '@graphiql/react/dist/style.css';
+import '@graphiql/react/style.css';
```
5 changes: 5 additions & 0 deletions .changeset/green-pugs-worry.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'graphiql': major
---

remove `disableTabs` option
5 changes: 5 additions & 0 deletions .changeset/healthy-onions-bake.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@graphiql/plugin-explorer': patch
---

improve explorer styles
5 changes: 5 additions & 0 deletions .changeset/hungry-spiders-cheat.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'graphiql': major
---

remove `data-testid="graphiql-container"`
5 changes: 5 additions & 0 deletions .changeset/metal-glasses-bow.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'graphiql': patch
---

update graphql to `16.9.0` and use vite `define` configuration to remove development code from cdn bundle
6 changes: 6 additions & 0 deletions .changeset/nine-meals-happen.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
'@graphiql/plugin-code-exporter': patch
'@graphiql/plugin-explorer': patch
---

fix types incorrect types entry
5 changes: 5 additions & 0 deletions .changeset/old-zebras-knock.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'graphiql': minor
---

remove `.graphiql-session` class
6 changes: 6 additions & 0 deletions .changeset/olive-mice-hide.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
'graphiql': patch
'@graphiql/react': patch
---

Respect Markdown format: ignore single newline
9 changes: 9 additions & 0 deletions .changeset/orange-rivers-draw.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
---
'@graphiql/plugin-code-exporter': patch
'@graphiql/plugin-explorer': patch
'@graphiql/react': patch
---

use `vite build --watch` instead of `vite` for `dev` script because we don't need development server for them

do not use `vite-plugin-dts` when generating umd build
5 changes: 5 additions & 0 deletions .changeset/pink-moose-shake.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'graphiql': patch
---

use `position: absolute` for `.graphiql-logo` class
13 changes: 13 additions & 0 deletions .changeset/poor-ghosts-jump.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
---
'@graphiql/plugin-explorer': major
---

`style.css` import was changed

## Migration

```diff
-import '@graphiql/plugin-explorer/dist/style.css';
+import '@graphiql/plugin-explorer/style.css';
```

51 changes: 51 additions & 0 deletions .changeset/pre.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
{
"mode": "pre",
"tag": "alpha",
"initialVersions": {
"cm6-graphql": "0.0.15",
"codemirror-graphql": "2.0.13",
"graphiql": "3.4.0",
"@graphiql/plugin-code-exporter": "3.0.5",
"@graphiql/plugin-explorer": "3.1.1",
"@graphiql/react": "0.23.0",
"@graphiql/toolkit": "0.9.2",
"graphql-language-service": "5.2.2",
"graphql-language-service-cli": "3.4.2",
"graphql-language-service-server": "2.13.2",
"monaco-graphql": "1.5.3",
"vscode-graphql": "0.11.2",
"vscode-graphql-execution": "0.2.6",
"vscode-graphql-syntax": "1.3.6",
"example-graphiql-webpack": "0.0.0",
"example-monaco-graphql-nextjs": "0.0.0",
"example-monaco-graphql-react-vite": "0.0.0",
"example-monaco-graphql-webpack": "0.0.0"
},
"changesets": [
"add-on-prettify-callback",
"breezy-chicken-crash",
"few-steaks-clap",
"flat-lies-heal",
"gentle-bugs-mix",
"good-vans-refuse",
"green-pugs-worry",
"healthy-onions-bake",
"hungry-spiders-cheat",
"metal-glasses-bow",
"nine-meals-happen",
"old-zebras-knock",
"olive-mice-hide",
"orange-rivers-draw",
"pink-moose-shake",
"poor-ghosts-jump",
"red-papayas-fly",
"rich-jobs-kick",
"serious-forks-sip",
"spotty-bulldogs-confess",
"strong-ears-bake",
"thick-adults-leave",
"thirty-spoons-call",
"weak-dancers-jog",
"wicked-seas-laugh"
]
}
6 changes: 6 additions & 0 deletions .changeset/red-papayas-fly.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
'@graphiql/react': patch
'graphiql': patch
---

replace `overflow-y: scroll` with `overflow-y: auto`
21 changes: 21 additions & 0 deletions .changeset/rich-jobs-kick.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
---
'graphiql': major
---

changed exports

```diff
-graphiql/graphiql.css
+graphiql/style.css
```

changed cdn paths, `dist/index.umd.js` and `dist/style.css` are minified

```diff
-https://unpkg.com/graphiql/graphiql.js
-https://unpkg.com/graphiql/graphiql.min.js
+https://unpkg.com/graphiql/dist/index.umd.js
-https://unpkg.com/graphiql/graphiql.css
-https://unpkg.com/graphiql/graphiql.min.css
+https://unpkg.com/graphiql/dist/style.css
```
6 changes: 6 additions & 0 deletions .changeset/serious-forks-sip.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
'@graphiql/react': patch
'graphiql': patch
---

rollback `position: absolute` style for `.graphiql-logo` because tabs will behind logo
7 changes: 7 additions & 0 deletions .changeset/spotty-bulldogs-confess.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
---
'@graphiql/react': patch
'graphiql': patch
---

- prefer `location` over `window.location`
- prefer `navigator` over `window.navigator`
5 changes: 5 additions & 0 deletions .changeset/strong-ears-bake.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'graphiql': patch
---

use `right: var(--px-16)` instead of `right: 0` for `.graphiql-logo`
5 changes: 5 additions & 0 deletions .changeset/thick-adults-leave.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@graphiql/react': minor
---

remove `createComponentGroup` utility in favour `Object.assign`
8 changes: 8 additions & 0 deletions .changeset/thirty-spoons-call.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
---
"graphiql": major
"@graphiql/react": minor
---

- new looks of tabs

- fix `disableTabs` when `Add tab` button is still shown
79 changes: 79 additions & 0 deletions .changeset/weak-dancers-jog.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@
---
'graphiql': major
---

Remove `toolbar.additionalContent` and `toolbar.additionalComponent` props in favor of `GraphiQL.Toolbar` render props.

## Migration from `toolbar.additionalContent`

### Before

```jsx
<GraphiQL toolbar={{ additionalContent: <button>My button</button> }} />
```

### After

```jsx
<GraphiQL>
<GraphiQL.Toolbar>
{({ merge, prettify, copy }) => (
<>
{prettify}
{merge}
{copy}
<button>My button</button>
</>
)}
</GraphiQL.Toolbar>
</GraphiQL>
```

## Migration from `toolbar.additionalComponent`

### Before

```jsx
<GraphiQL
toolbar={{
additionalComponent: function MyComponentWithAccessToContext() {
return <button>My button</button>;
},
}}
/>
```

### After

```jsx
<GraphiQL>
<GraphiQL.Toolbar>
{({ merge, prettify, copy }) => (
<>
{prettify}
{merge}
{copy}
<MyComponentWithAccessToContext />
</>
)}
</GraphiQL.Toolbar>
</GraphiQL>
```

---

Additionally, you can sort default toolbar buttons in different order or remove unneeded buttons for you:

```jsx
<GraphiQL>
<GraphiQL.Toolbar>
{({ prettify, copy }) => (
<>
{copy /* Copy button will be first instead of default last */}
{/* Merge button is removed from toolbar */}
{prettify}
</>
)}
</GraphiQL.Toolbar>
</GraphiQL>
```
5 changes: 5 additions & 0 deletions .changeset/wicked-seas-laugh.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'graphiql': patch
---

replace `Tooltip`s in tabs with html `title="..."` attribute
12 changes: 11 additions & 1 deletion .eslintrc.js
Original file line number Diff line number Diff line change
Expand Up @@ -129,6 +129,16 @@ module.exports = {
property: 'localStorage',
message: 'Use `localStorage` instead',
},
{
object: 'window',
property: 'location',
message: 'Use `location` instead',
},
{
object: 'window',
property: 'navigator',
message: 'Use `navigator` instead',
},
],
'no-return-assign': 'error',
'no-return-await': 'error',
Expand Down Expand Up @@ -389,7 +399,7 @@ module.exports = {
projectService: {
allowDefaultProject: [
'examples/monaco-graphql-react-vite/vite.config.ts',
'packages/{graphiql,graphiql-plugin-explorer,graphiql-plugin-code-exporter}/vite.config.mts',
'packages/graphiql/vite.config.mts',
'packages/{codemirror-graphql,graphiql-toolkit,graphql-language-service-cli,graphql-language-service,monaco-graphql,vscode-graphql-syntax,graphiql}/vitest.config.mts',

'packages/cm6-graphql/__tests__/test.spec.ts',
Expand Down
3 changes: 1 addition & 2 deletions .github/workflows/pr-graphql-compat-check.yml
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,7 @@ on:
# only on merge to main.
# it's rare that this workflow would
# show us an error, but when it does it's important!
branches:
- main
branches: [main, graphiql-v4]
# don't run this regression suite if we don't need to
paths-ignore:
- '**.md'
Expand Down
Loading
Loading