Skip to content
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

[redesign] add settings dialog #2595

Merged
merged 5 commits into from
Jul 28, 2022
Merged

[redesign] add settings dialog #2595

merged 5 commits into from
Jul 28, 2022

Conversation

thomasheyenbrock
Copy link
Collaborator

@thomasheyenbrock thomasheyenbrock commented Jul 27, 2022

Part of #2325

This adds the settings dialog. The only option for now is to clear the storage, theme selection will be added in the next PR.

@changeset-bot
Copy link

changeset-bot bot commented Jul 27, 2022

🦋 Changeset detected

Latest commit: 45f285e

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages
Name Type
@graphiql/react Minor
@graphiql/toolkit Minor
graphiql Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@codecov
Copy link

codecov bot commented Jul 27, 2022

Codecov Report

Merging #2595 (45f285e) into graphiql-v2 (dded854) will decrease coverage by 0.12%.
The diff coverage is 25.71%.

@@               Coverage Diff               @@
##           graphiql-v2    #2595      +/-   ##
===============================================
- Coverage        57.83%   57.70%   -0.13%     
===============================================
  Files               90       91       +1     
  Lines             5324     5355      +31     
  Branches          1733     1746      +13     
===============================================
+ Hits              3079     3090      +11     
- Misses            2228     2245      +17     
- Partials            17       20       +3     
Impacted Files Coverage Δ
packages/graphiql-toolkit/src/storage/base.ts 87.80% <0.00%> (-6.94%) ⬇️
packages/graphiql-react/src/ui/dialog.tsx 20.00% <20.00%> (ø)
packages/graphiql/src/components/GraphiQL.tsx 63.85% <23.80%> (-3.84%) ⬇️
packages/graphiql-react/src/ui/button.tsx 66.66% <50.00%> (-33.34%) ⬇️
packages/graphiql-react/src/utility/compose.ts 100.00% <0.00%> (+100.00%) ⬆️

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update dded854...45f285e. Read the comment docs.

@acao
Copy link
Member

acao commented Jul 27, 2022

this is so exciting!

@acao
Copy link
Member

acao commented Jul 27, 2022

this looks great so far, and the clear data toggle works, and is a fantastic start.

found this though, is this a known issue?
Screenshot 2022-07-27 at 19 27 55

@thomasheyenbrock
Copy link
Collaborator Author

Good catch! CodeMirror has some z-index set on the scrollbar containers which caused them to be above the dialog, should be fixed now.

Copy link
Member

@acao acao left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💯 ⚙️ 🤓 🚀

@thomasheyenbrock thomasheyenbrock merged commit 50eb83d into graphiql-v2 Jul 28, 2022
@thomasheyenbrock thomasheyenbrock deleted the feat/settings branch July 28, 2022 11:13
@thomasheyenbrock thomasheyenbrock mentioned this pull request Jul 28, 2022
thomasheyenbrock added a commit that referenced this pull request Aug 1, 2022
* add `Dialog` component to `@graphiql/react`

* add a `clear` method to the `Storage` type

* add success and failure states to `Button` component

* add settings dialog

* make sure to show dialog above editor scrollbars
thomasheyenbrock added a commit that referenced this pull request Aug 2, 2022
* add `Dialog` component to `@graphiql/react`

* add a `clear` method to the `Storage` type

* add success and failure states to `Button` component

* add settings dialog

* make sure to show dialog above editor scrollbars
thomasheyenbrock added a commit that referenced this pull request Aug 4, 2022
* add `Dialog` component to `@graphiql/react`

* add a `clear` method to the `Storage` type

* add success and failure states to `Button` component

* add settings dialog

* make sure to show dialog above editor scrollbars
thomasheyenbrock added a commit that referenced this pull request Aug 5, 2022
* add `Dialog` component to `@graphiql/react`

* add a `clear` method to the `Storage` type

* add success and failure states to `Button` component

* add settings dialog

* make sure to show dialog above editor scrollbars
thomasheyenbrock added a commit that referenced this pull request Aug 5, 2022
* add `Dialog` component to `@graphiql/react`

* add a `clear` method to the `Storage` type

* add success and failure states to `Button` component

* add settings dialog

* make sure to show dialog above editor scrollbars
thomasheyenbrock added a commit that referenced this pull request Aug 5, 2022
* add `Dialog` component to `@graphiql/react`

* add a `clear` method to the `Storage` type

* add success and failure states to `Button` component

* add settings dialog

* make sure to show dialog above editor scrollbars
thomasheyenbrock added a commit that referenced this pull request Aug 7, 2022
* add `Dialog` component to `@graphiql/react`

* add a `clear` method to the `Storage` type

* add success and failure states to `Button` component

* add settings dialog

* make sure to show dialog above editor scrollbars
thomasheyenbrock added a commit that referenced this pull request Aug 8, 2022
* add `Dialog` component to `@graphiql/react`

* add a `clear` method to the `Storage` type

* add success and failure states to `Button` component

* add settings dialog

* make sure to show dialog above editor scrollbars
thomasheyenbrock added a commit that referenced this pull request Aug 9, 2022
* add `Dialog` component to `@graphiql/react`

* add a `clear` method to the `Storage` type

* add success and failure states to `Button` component

* add settings dialog

* make sure to show dialog above editor scrollbars
thomasheyenbrock added a commit that referenced this pull request Aug 9, 2022
* add `Dialog` component to `@graphiql/react`

* add a `clear` method to the `Storage` type

* add success and failure states to `Button` component

* add settings dialog

* make sure to show dialog above editor scrollbars
thomasheyenbrock added a commit that referenced this pull request Aug 9, 2022
* add `Dialog` component to `@graphiql/react`

* add a `clear` method to the `Storage` type

* add success and failure states to `Button` component

* add settings dialog

* make sure to show dialog above editor scrollbars
thomasheyenbrock added a commit that referenced this pull request Aug 9, 2022
* add `Dialog` component to `@graphiql/react`

* add a `clear` method to the `Storage` type

* add success and failure states to `Button` component

* add settings dialog

* make sure to show dialog above editor scrollbars
thomasheyenbrock added a commit that referenced this pull request Aug 9, 2022
* add `Dialog` component to `@graphiql/react`

* add a `clear` method to the `Storage` type

* add success and failure states to `Button` component

* add settings dialog

* make sure to show dialog above editor scrollbars
thomasheyenbrock added a commit that referenced this pull request Aug 9, 2022
* add `Dialog` component to `@graphiql/react`

* add a `clear` method to the `Storage` type

* add success and failure states to `Button` component

* add settings dialog

* make sure to show dialog above editor scrollbars
thomasheyenbrock added a commit that referenced this pull request Aug 15, 2022
* add `Dialog` component to `@graphiql/react`

* add a `clear` method to the `Storage` type

* add success and failure states to `Button` component

* add settings dialog

* make sure to show dialog above editor scrollbars
thomasheyenbrock added a commit that referenced this pull request Aug 19, 2022
* add `Dialog` component to `@graphiql/react`

* add a `clear` method to the `Storage` type

* add success and failure states to `Button` component

* add settings dialog

* make sure to show dialog above editor scrollbars
thomasheyenbrock added a commit that referenced this pull request Aug 20, 2022
* add `Dialog` component to `@graphiql/react`

* add a `clear` method to the `Storage` type

* add success and failure states to `Button` component

* add settings dialog

* make sure to show dialog above editor scrollbars
thomasheyenbrock added a commit that referenced this pull request Aug 24, 2022
* add `Dialog` component to `@graphiql/react`

* add a `clear` method to the `Storage` type

* add success and failure states to `Button` component

* add settings dialog

* make sure to show dialog above editor scrollbars
thomasheyenbrock added a commit that referenced this pull request Aug 24, 2022
* add `Dialog` component to `@graphiql/react`

* add a `clear` method to the `Storage` type

* add success and failure states to `Button` component

* add settings dialog

* make sure to show dialog above editor scrollbars
thomasheyenbrock added a commit that referenced this pull request Aug 24, 2022
* add `Dialog` component to `@graphiql/react`

* add a `clear` method to the `Storage` type

* add success and failure states to `Button` component

* add settings dialog

* make sure to show dialog above editor scrollbars
thomasheyenbrock added a commit that referenced this pull request Aug 24, 2022
* [redesign]: editor in new design (#2513)

* add postcss config to allow nesting

* avoid processing css from `@graphiql/react` with postcss

* add css files for default fonts

* add long description with markdown to dev schema

* rewrite completion tooltip

* move editor css to @graphiql/react

* git mv editor components to `@graphiql/react`

* adjust editor components after moving to `@graphiql/react`

* move styles for auto-inserted leads

* make dynamic padding more resilient and add explanatory comment

* add extra color to avoid conflicts

* colocate markdown and deprecation styles

* add changesets

* fix spell checking

* add changeset for graphiql@2

* don't enter pre-release mode in changeset

* more elaborate changeset message

* [redesign] layout for editor components (#2515)

* add icons to `@graphiql/react`

* add `UnstyledButton` ui component

* implement new design for editors layout

* rename `Unstyled` to `UnStyled` for spell checking

* remove unused class and whitespace in `className`

* make tiny change for deploy preview 🤞

* this will do it, i think?

Co-authored-by: Rikki Schulte <[email protected]>

* set default background color for editors (#2528)

* set default background colors via css variables (#2530)

* move editor styles to `@graphiql/react` (#2532)

* refresh editor after hiding (#2537)

* add caller argument to editor hooks (#2538)

* implement footer in new design (#2540)

* [redesign] implement new toolbar design (#2524)

* implement new toolbar design

* add `caller` argument for better errors

* [redesign] implement sidebar (#2543)

* implement sidebar in new design

* simplify callback

* [redesign] implement new design for history plugin (#2571)

* add icons

* don't invoce callback when programmatically change resizable element

* implement history in new design

* visually separate favourite history items

* add save button when editing history label

* add changeset

* add missing changesets in retrospect

* fix typos

* fix e2e tests

* remove input outline

* add prerelease versions

* fix opening doc explorer when clicking references (#2578)

* extract loading spinner to `@graphiql/react` (#2581)

* [redesign] move docs components to `@graphiql/react` (#2582)

* move explorer context into folder

* move `TypeLink` component to `@graphiql/react`

* move `FieldLink` component to `@graphiql/react`

* move `DefaultValue` component to `@graphiql/react`

* move `Directive` component to `@graphiql/react`

* extract `MarkdownContent` component in `@gaphiql/react`

* move `Argument` component to `@graphiql/react`

* combine and extend changesets

* add `Search` component to `@graphiql/react` (#2586)

* move remaining doc explorer component to `@graphiql/react` (#2587)

* [redesign] docs (#2588)

* add icons

* add `Button` component to `@graphiql/react`

* add explorer section component

* redesign `SchemaDocumentation` component

* redesign `TypeDocumentation` component

* redesign `FieldDocumentation` component

* redesign `DocExplorer` component

* extend changeset message

* move tab components to `@graphiql/react` (#2591)

* [redesign] implement new design for tabs (#2592)

* implement new design for tabs

* add back `tab` role

* increment versions from release

* [redesign] add settings dialog (#2595)

* add `Dialog` component to `@graphiql/react`

* add a `clear` method to the `Storage` type

* add success and failure states to `Button` component

* add settings dialog

* make sure to show dialog above editor scrollbars

* [redesign] add dark mode (#2596)

* add `ButtonGroup` component to `@graphiql/react`

* dark mode

* add back styles for editor search (#2599)

* add a dialog that shows all available shortkeys (#2601)

* add a dialog that shows all available shortkeys

* use table in short key dialog

* add shortkey for introspection

* add link to codemirror keymaps

* make dropdown menu accessible (#2627)

* fix doc explorer style regressions (#2630)

* fix selector specificity for link styling

* leverage nesting

* fix hiding the headline on focus

* ensure correct focus outlines and remove visited styles

* increment next versions

* adds styles to contain the result window above any footer content (#2621)

* adds styles to contain the result window above any footer content

* simplifies flex value

* use hsl values and reduce number of CSS variables (#2637)

* rename CSS variables for colors (#2641)

* forward refs and props for UI components (#2628)

* [redesign] implement toolbar menu and select in new design (#2631)

* implement toolbar menu in new design

* implement `ToolbarListbox` in new design

* better tooltips

* [v2] cleanup `GraphiQL` component (#2632)

* remove deprecated class methods

* remove utilities

* remove ref forwarding

* refactor inner class component to a function component

* merge main component with context consumer component

* remove component statics

* refactor outer component to be a class component

* remove comments

* add changeset

* remove legacy exports

* [v2] add provider component and deduplicate prop type definitions (#2650)

* add `GraphiQLProvider` to `@graphiql/react` and include `StorageContextProvider`

* add `HistoryContextProvider` to `GraphiQLProvider`

* add `EditorContextProvider` to `GraphiQLProvider`

* add `SchemaContextProvider` to `GraphiQLProvider`

* add `ExecutionContextProvider` to `GraphiQLProvider`

* move `ExplorerContextProvider` to `GraphiQLProvider`

* declare props for `GraphiQLInterface`

* reuse prop definitions from editor components

* merge props for default state of editor tools

* rename prop for toggling headers editor

* re-export GraphiQL provider

* add documention for `@graphiql/react` (#2657)

* add JSDocs for component props and hooks

* add JSDocs for context types

* add README for `@graphiql/react`

* [v2] add plugin api for docs and history (#2674)

* add plugin api for docs and history

* throw error when plugin has no title

* make popover styles look good in dark mode (#2682)

* add example for `graphiql-explorer` (#2683)

* don't pass `shouldPersistHeaders` to fetcher anymore (#2684)

* bump preview versions

* overhaul READMEs and add migratio guide for `graphiql@2`

Co-authored-by: Rikki Schulte <[email protected]>
Co-authored-by: Jonathan Brennan <[email protected]>
thomasheyenbrock added a commit that referenced this pull request Aug 24, 2022
* add `Dialog` component to `@graphiql/react`

* add a `clear` method to the `Storage` type

* add success and failure states to `Button` component

* add settings dialog

* make sure to show dialog above editor scrollbars
thomasheyenbrock added a commit that referenced this pull request Aug 24, 2022
* add `Dialog` component to `@graphiql/react`

* add a `clear` method to the `Storage` type

* add success and failure states to `Button` component

* add settings dialog

* make sure to show dialog above editor scrollbars
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants