[redesign] implement sidebar (#2543)

* implement sidebar in new design

* simplify callback

packages/graphiql-react/src/icons/index.tsx

@@ -1,9 +1,14 @@
 import _ChevronDownIcon from './chevron-down.svg';
 import _ChevronUpIcon from './chevron-up.svg';
 import _CopyIcon from './copy.svg';
+import _DocsIcon from './docs.svg';
+import _HistoryIcon from './history.svg';
+import _KeyboardShortcutIcon from './keyboard-shortcut.svg';
 import _MergeIcon from './merge.svg';
 import _PlayIcon from './play.svg';
 import _PrettifyIcon from './prettify.svg';
+import _ReloadIcon from './reload.svg';
+import _SettingsIcon from './settings.svg';
 import _StopIcon from './stop.svg';
 
 export const ChevronDownIcon = generateIcon(
@@ -12,9 +17,17 @@ export const ChevronDownIcon = generateIcon(
 );
 export const ChevronUpIcon = generateIcon(_ChevronUpIcon, 'chevron up icon');
 export const CopyIcon = generateIcon(_CopyIcon, 'copy icon');
+export const DocsIcon = generateIcon(_DocsIcon, 'docs icon');
+export const HistoryIcon = generateIcon(_HistoryIcon, 'history icon');
+export const KeyboardShortcutIcon = generateIcon(
+  _KeyboardShortcutIcon,
+  'keyboard shortcut icon',
+);
 export const MergeIcon = generateIcon(_MergeIcon, 'merge icon');
 export const PlayIcon = generateIcon(_PlayIcon, 'play icon');
 export const PrettifyIcon = generateIcon(_PrettifyIcon, 'prettify icon');
+export const ReloadIcon = generateIcon(_ReloadIcon, 'reload icon');
+export const SettingsIcon = generateIcon(_SettingsIcon, 'settings icon');
 export const StopIcon = generateIcon(_StopIcon, 'stop icon');
 
 function generateIcon(RawComponent: any, title: string) {

packages/graphiql-react/src/style/root.css

@@ -54,13 +54,15 @@
     0px 0.399006px 1.33002px rgba(59, 76, 106, 0.0525061);
 
   /* Layout */
+  --sidebar-width: 44px;
   --toolbar-width: 40px;
 }
 
 .graphiql-container,
 .CodeMirror-info,
 .CodeMirror-lint-tooltip,
 .graphiql-container button {
+  color: var(--color-neutral-100);
   font-family: var(--font-family);
   font-size: var(--font-size-body);
   font-weight: var(----font-weight-regular);

packages/graphiql-react/src/utility/resize.tsx

@@ -145,12 +145,8 @@ export function useDragResize({
 
       if (firstRef.current && storage && storageKey) {
         const storedValue = storage?.get(storageKey);
-        if (
-          storedValue &&
-          storedValue !== HIDE_FIRST &&
-          storedValue !== HIDE_SECOND
-        ) {
-          firstRef.current.style.flex = storedValue;
+        if (storedValue !== HIDE_FIRST && storedValue !== HIDE_SECOND) {
+          firstRef.current.style.flex = storedValue || defaultFlexRef.current;
         }
       }
     },

packages/graphiql/__mocks__/@graphiql/react.tsx

@@ -15,6 +15,7 @@ export {
   ChevronDownIcon,
   ChevronUpIcon,
   CopyIcon,
+  DocsIcon,
   Dropdown,
   EditorContext,
   EditorContextProvider,
@@ -25,13 +26,17 @@ export {
   ExplorerContextProvider,
   HistoryContext,
   HistoryContextProvider,
+  HistoryIcon,
   ImagePreview,
+  KeyboardShortcutIcon,
   onHasCompletion,
   MergeIcon,
   PlayIcon,
   PrettifyIcon,
+  ReloadIcon,
   SchemaContext,
   SchemaContextProvider,
+  SettingsIcon,
   StopIcon,
   StorageContext,
   StorageContextProvider,

packages/graphiql/cypress/integration/docs.spec.ts

@@ -5,7 +5,7 @@ describe('GraphiQL DocExplorer - button', () => {
     cy.visit(`/`);
   });
   it('Toggles doc pane on', () => {
-    cy.get('.docExplorerShow').click();
+    cy.get('.graphiql-sidebar button').eq(0).click();
     cy.get('.doc-explorer').should('be.visible');
   });
 
@@ -19,7 +19,7 @@ describe('GraphiQL DocExplorer - button', () => {
 describe('GraphiQL DocExplorer - search', () => {
   before(() => {
     cy.visit(`/`);
-    cy.get('.docExplorerShow').click();
+    cy.get('.graphiql-sidebar button').eq(0).click();
   });
 
   it('Searches docs for values', () => {
@@ -66,7 +66,7 @@ describe('GraphiQL DocExplorer - search', () => {
 
   it('Allows clearing the search', () => {
     cy.visit(`/`);
-    cy.get('.docExplorerShow').click();
+    cy.get('.graphiql-sidebar button').eq(0).click();
     cy.get('label.search-box input').type('test');
     cy.get('.doc-category-item').should('have.length', 7);
     cy.get('.search-box-clear').click();
@@ -78,7 +78,7 @@ describe('GraphiQL DocExplorer - search', () => {
 describe('GraphQL DocExplorer - deprecated fields', () => {
   before(() => {
     cy.visit(`/`);
-    cy.get('.docExplorerShow').click();
+    cy.get('.graphiql-sidebar button').eq(0).click();
   });
   it('should show deprecated fields category title', () => {
     cy.get('.doc-category>.doc-category-item').first().find('a').click();