Merged from sdl-tabs https://github.com/Novvum/graphql-playground.git

[rajinwonderland]

Feature Request: SchemaExplorer Tab

---

Screenshot

Dark Mode:

Light Mode:

Changes proposed in this pull request:

• Creating an ExplorerTab System for Docs, Schema, and any other new features that may be implemented into the Explorer side tab.

• Renaming Current Schema Tab (DocsExplorer Component) to Docs

• Adding a Schema Tab that shows the SDL version (Using CodeMirror Component) of the schema

• Options to Download Schema in either .json or .graphql format within the Schema tab

Proposed File Structure Changes:

src
├── ...
├── components
│   ├── ...
│   ├── Playground
│   │   ├── ...
│   │   ├── DocExplorer //  Directory Containing all DocExplorer Components
│   │   │   ├── ...
│   │   ├── ExplorerTabs // Directory Containing all Tab System Components used by the Side Drawer
│   │   │   ├── SideTab.tsx // The Tab Button Component
│   │   │   └── SideTabs.tsx // The TabContainer Module
│   │   ├── SchemaExplorer // Directory Containing all SchemaExplorer Components
│   │   │   ├── SDLEditor.tsx // CodeMirror editor version of the SDL
│   │   │   ├── SDLTypes // DocExplorer styled version of the SDL
│   │   │   │   ├── SDLDocType.tsx 
│   │   │   │   ├── SDLFieldDoc.tsx
│   │   │   │   ├── SDLStyles.tsx
│   │   │   │   ├── SDLType.tsx
│   │   │   │   └── SDLUnionType.tsx
│   │   │   └── SDLView.tsx // SDL View Component
│   │   ├── ...
│   │   └── util
│   │       ├── ...
│   │       ├── createSDL.ts // Utils for SchemaExplorer Components
│   │       └── ...
│   ├── ...
└── ...

Todos:

• Add 'schema.disableComments' to settings
• Review Design
• Refresh Endpoint Icon Placement
• Autopolling Schema from endpoint

[CLAassistant]

All committers have signed the CLA.

[huv1k]

Great job! 🚀

[rajinwonderland]

Implemented Disabled Comments in SDLView

Schema View Screenshot schema.disabledComments: true

Settings Screenshot

Changes to ISettings Interface on README.md and src/types.ts

interface ISettings {
	'general.betaUpdates': boolean
	'editor.theme': Theme
	'editor.reuseHeaders': boolean
	'tracing.hideTracingResponse': boolean
	'editor.fontSize': number
	'editor.fontFamily': string
	'request.credentials': string
	'schema.disableComments': boolean // defaults to true
}

On src/state/workspace/reducers.ts the defaultSettings has the added attribute of schema.disableComments

... const defaultSettings: ISettings = {
  'general.betaUpdates': false,
  'editor.cursorShape': 'line',
  'editor.fontSize': 14,
  'editor.fontFamily': `'Source Code Pro', 'Consolas', 'Inconsolata', 'Droid Sans Mono', 'Monaco', monospace`,
  'editor.theme': 'dark',
  'editor.reuseHeaders': true,
  'prettier.printWidth': 80,
  'request.credentials': 'omit',
  'tracing.hideTracingResponse': true,
  'schema.disableComments': true
}

[kuldar]

Hey Raj, thanks for the PR, looking awesome! 🙌 I checked it out and played around with it a little bit locally - few notes I took:

1. It seems like the left side padding is bit too narrow at the moment - could we increase it by ~20px?

---

2. Would it prehaps be better DX if we overflow:scroll the schema, rather than linebreaking? It’s easier to scroll sideways to read more data, than it is to decypher the beginnings and ends of linebreaked code.

---

3. For the sidebar, let's maybe have a consistent color for both the code and header background. The Playground currently has a lot of boxes and areas as it is, so it helps to reduce the visual noise just a bit. For overflow indicator, we could add a slight dropshadow.

---

4. Could we also double-check the download button - ideally the height should be the same as the left-hand action buttons. (~30px) and the color bit more toned back.

5. As for the dropdown itself, I realized I hadn't really clearified the different states, so I mocked a better version to illustrate how the hover states should look like. Could we also have it close on blur/outsideClick?

---

6. The last one, I promise 😄 Can we tweak the sizing of the vertical buttons just a bit. (By making the "Docs" button ~20px narrower for example).

---

As for showing/hiding comments - this feels more like a setting than an action. (I can’t imagine people toggling between the states too often). Should we just keep the option in the settings, or do we feel strongly about having a separate UI for that?

(Btw changing the schema comments setting didn't affect my schema when trying out locally for some reason).

[kuldar]

Oh snap, forgot one 😄 Could we change the wording here to "Search the docs.." instead?

[rajinwonderland]

Perfect! Thanks @kuldar! Will start working on those specs!

[rajinwonderland]

Style Changes & Tweaks

As requested by @kuldar

Comments

• Separated SDLHeader component into it's own file (originally in SDLTypes/SDLStyles.tsx)

Checklist

• Increase Editor Padding by 24px
• Disable Line Breaking on Editor: Allow for overflow scroll
• SDLHeader style changes
  • Add box-shadow as an overflow indicator
    • box-shadow: 0px 1px 3px rgba(17, 17, 17, 0.1);
  • Fix background color so it matches the editor
• Fix Height on Download & Option Buttons (32px)
• Fix Color on Download & Option Buttons (On Figma)
• Fix Stylings for different states on Download & Option Buttons
• Close Options on blur/outside click
• Look into Settings schema.disabledComments on local server
• Decrease width of Docs by ~20px Change fixed width of 60px to 8px padding
• Change copy from 'Search the schema...' to 'Search the docs...'

[rajinwonderland]

@kuldar for some reason, the cmd+save button isn't working on the Settings editor. I think this may be a deeper issue. Try the Save button to disable the comments for now and let me know if it still persists!

Tab Screenshots: 📷 📸

Theme	With Comment	W/O Comments	Options Button
Light
Dark

Docs Screenshot 📜 📓 📸

[kuldar]

Looking great Raj! 🙌 The comments setting seems to now work as well.

The only nitpick I'd perhaps have is that it looks like the vertical "Docs" button still has quite a lot of padding around it compared to "Schema". But other than that looks good to me! 👍

[rajinwonderland]

Hey @kuldar agreed. I'll go ahead and see what I can do to fix that!

[rajinwonderland]

Hey @kuldar, just added a tabWidth prop to the side tabs based on your figma designs.

Screenshots 📸

Dark Theme

Light Theme

[kuldar]

Awesome, looks good to me! 👍

[schickling]

A bit more feedback from my side:

• The spacing for the collapsed tabs seems off

• Let's add additional line-breaks after each item

# change from ...
type AggregateUser {
  count: Int!
}
type BatchPayload {
  count: Long!
}
scalar Long

# to ...
type AggregateUser {
  count: Int!
}

type BatchPayload {
  count: Long!
}

scalar Long

[rajinwonderland]

Hey @schickling thanks for the feedback!

Just pushed some changes

• Fix Tab Spacing in collapsed state
• Add additional line-breaks after each

Tab Spacing Fix

• Changed right: -2px to right: 0px on SideTab.tsx styled Tab component

Line Breaking on Schema

With Comments	Without Comments

• Added addLineBreaks(sdl: string, commentsDisabled?: boolean) function on createSDL.ts

Note on Comment Linebreaking

I've opted to removed added newlines on comments since the newlines from each comment, but I'm not sure what would be best.

[schickling]

This looks great. Thanks a lot for the updates. I agree, let's remove the line breaks between fields.

[rajinwonderland]

Cool! Line breaks are removed on the fields! 😊

[huv1k]

@rajinwonderland Thanks for great work on this PR! 🚀It will be in next release of playground this week.