[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
graphql · Aug 7, 2022 · ed0957e · ed0957e
1 parent 56299a0
commit ed0957e
Show file tree

Hide file tree

Showing 14 changed files with 332 additions and 18 deletions.
diff --git a/.changeset/five-pillows-fail.md b/.changeset/five-pillows-fail.md
@@ -3,7 +3,7 @@
 ---
 
 Add new components:
-- UI components (`Button`, `Dropdown`, `Spinner`, `Tab`, `Tabs`, `UnStyledButton` and lots of icon components)
+- UI components (`Button`, `Dialog`, `Dropdown`, `Spinner`, `Tab`, `Tabs`, `UnStyledButton` and lots of icon components)
 - Editor components (`QueryEditor`, `VariableEditor`, `HeaderEditor` and `ResponseEditor`)
 - Toolbar components (`ExecuteButton` and `ToolbarButton`)
 - Docs components (`Argument`, `DefaultValue`, `DeprecationReason`, `Directive`, `DocExplorer`, `ExplorerSection`, `FieldDocumentation`, `FieldLink`, `SchemaDocumentation`, `Search`, `TypeDocumentation` and `TypeLink`)

diff --git a/.changeset/tender-impalas-provide.md b/.changeset/tender-impalas-provide.md
@@ -0,0 +1,5 @@
+---
+'@graphiql/toolkit': minor
+---
+
+Add a `clear` method to `Storage` classes
diff --git a/packages/graphiql-react/package.json b/packages/graphiql-react/package.json
@@ -39,6 +39,8 @@
   "dependencies": {
     "@graphiql/toolkit": "^1.0.0-next.1",
     "@reach/combobox": "^0.17.0",
+    "@reach/dialog": "^0.17.0",
+    "@reach/visually-hidden": "^0.17.0",
     "codemirror": "^5.65.3",
     "codemirror-graphql": "^2.0.0-next.1",
     "copy-to-clipboard": "^3.2.0",

diff --git a/packages/graphiql-react/src/style/root.css b/packages/graphiql-react/src/style/root.css
@@ -1,6 +1,7 @@
 .graphiql-container,
 .CodeMirror-info,
-.CodeMirror-lint-tooltip {
+.CodeMirror-lint-tooltip,
+reach-portal {
   /* Colors */
   --color-pink: #d60690;
   --color-purple: #6e6acf;
@@ -23,6 +24,8 @@
   --color-orche-background: rgba(211, 127, 0, 0.07);
   --color-orche-background-dark: rgba(211, 127, 0, 0.12);
   --color-red-background: rgba(248, 91, 48, 0.12);
+  --color-green-background: rgba(43, 171, 124, 0.12);
+  --color-neutral-background: rgba(59, 75, 104, 0.1);
 
   /* Font */
   --font-family: 'Roboto', sans-serif;
@@ -46,6 +49,7 @@
   --px-12: 12px;
   --px-16: 16px;
   --px-20: 20px;
+  --px-24: 24px;
 
   /* Border radius */
   --border-radius-2: 2px;
@@ -67,6 +71,7 @@
 .graphiql-container,
 .CodeMirror-info,
 .CodeMirror-lint-tooltip,
+reach-portal,
 .graphiql-container:is(button) {
   color: var(--color-neutral-100);
   font-family: var(--font-family);

diff --git a/packages/graphiql-react/src/ui/button.css b/packages/graphiql-react/src/ui/button.css
@@ -28,4 +28,11 @@ button.graphiql-button {
   &:focus {
     outline: var(--color-neutral-15) auto 1px;
   }
+
+  &.graphiql-button-success {
+    background-color: var(--color-green-background);
+  }
+  &.graphiql-button-error {
+    background-color: var(--color-red-background);
+  }
 }
diff --git a/packages/graphiql-react/src/ui/button.tsx b/packages/graphiql-react/src/ui/button.tsx
@@ -1,19 +1,31 @@
+import { compose } from '../utility/compose';
+
 import './button.css';
 
 export function UnStyledButton(props: JSX.IntrinsicElements['button']) {
   return (
     <button
       {...props}
-      className={`graphiql-un-styled ${props.className || ''}`.trim()}
+      className={compose('graphiql-un-styled', props.className)}
     />
   );
 }
 
-export function Button(props: JSX.IntrinsicElements['button']) {
+type ButtonProps = { state?: 'success' | 'error' };
+
+export function Button(props: ButtonProps & JSX.IntrinsicElements['button']) {
   return (
     <button
       {...props}
-      className={`graphiql-button ${props.className || ''}`.trim()}
+      className={compose(
+        'graphiql-button',
+        props.state === 'success'
+          ? 'graphiql-button-success'
+          : props.state === 'error'
+          ? 'graphiql-button-error'
+          : '',
+        props.className,
+      )}
     />
   );
 }
diff --git a/packages/graphiql-react/src/ui/dialog.css b/packages/graphiql-react/src/ui/dialog.css
@@ -0,0 +1,34 @@
+@import url('@reach/dialog/styles.css');
+
+[data-reach-dialog-overlay] {
+  align-items: center;
+  background-color: var(--color-neutral-background);
+  display: flex;
+  justify-content: center;
+  /**
+   * CodeMirror has a `z-index` set for the container of the scrollbar of the
+   * editor, so we have to add one here to make sure that the dialog is shown
+   * above the editor scrollbar (if they are visible).
+   */
+  z-index: 10;
+}
+
+[data-reach-dialog-content] {
+  background-color: var(--color-neutral-0);
+  border-radius: var(--border-radius-12);
+  box-shadow: var(--box-shadow);
+  margin: 0;
+  max-height: 80vh;
+  max-width: 80vw;
+  overflow: auto;
+  padding: 0;
+  width: unset;
+}
+
+.graphiql-dialog-close > svg {
+  color: var(--color-neutral-60);
+  display: block;
+  height: var(--px-12);
+  padding: var(--px-12);
+  width: var(--px-12);
+}
diff --git a/packages/graphiql-react/src/ui/dialog.tsx b/packages/graphiql-react/src/ui/dialog.tsx
@@ -0,0 +1,25 @@
+import { Dialog as ReachDialog } from '@reach/dialog';
+import { VisuallyHidden } from '@reach/visually-hidden';
+import { ComponentProps } from 'react';
+import { CloseIcon } from '../icons';
+import { compose } from '../utility/compose';
+import { UnStyledButton } from './button';
+
+import './dialog.css';
+
+export function Dialog(props: ComponentProps<typeof ReachDialog>) {
+  return <ReachDialog {...props} />;
+}
+
+function DialogClose(props: JSX.IntrinsicElements['button']) {
+  return (
+    <UnStyledButton
+      {...props}
+      className={compose('graphiql-dialog-close', props.className)}>
+      <VisuallyHidden>Close dialog</VisuallyHidden>
+      <CloseIcon />
+    </UnStyledButton>
+  );
+}
+
+Dialog.Close = DialogClose;
diff --git a/packages/graphiql-react/src/ui/index.ts b/packages/graphiql-react/src/ui/index.ts
@@ -1,4 +1,5 @@
 export * from './button';
+export * from './dialog';
 export * from './dropdown';
 export * from './markdown';
 export * from './spinner';

diff --git a/packages/graphiql-toolkit/src/storage/base.ts b/packages/graphiql-toolkit/src/storage/base.ts
@@ -2,6 +2,7 @@ export type Storage = {
   getItem(key: string): string | null;
   removeItem(key: string): void;
   setItem(key: string, value: string): void;
+  clear(): void;
   length: number;
 };
 
@@ -77,6 +78,12 @@ export class StorageAPI {
 
     return { isQuotaError: quotaError, error };
   }
+
+  clear() {
+    if (this.storage) {
+      this.storage.clear();
+    }
+  }
 }
 
 const STORAGE_NAMESPACE = 'graphiql';
diff --git a/packages/graphiql/__mocks__/@graphiql/react.tsx b/packages/graphiql/__mocks__/@graphiql/react.tsx
@@ -25,6 +25,7 @@ export {
   DeprecatedEnumValueIcon,
   DeprecatedFieldIcon,
   DeprecationReason,
+  Dialog,
   Directive,
   DirectiveIcon,
   DocExplorer,

diff --git a/packages/graphiql/src/components/GraphiQL.tsx b/packages/graphiql/src/components/GraphiQL.tsx
@@ -22,33 +22,43 @@ import {
 } from 'graphql';
 
 import {
+  Button,
   ChevronDownIcon,
   ChevronUpIcon,
   CopyIcon,
+  Dialog,
   DocExplorer,
   DocsIcon,
   EditorContextProvider,
+  EditorContextType,
   ExecuteButton,
   ExecutionContextProvider,
   ExecutionContextType,
   ExplorerContextProvider,
+  ExplorerContextType,
   HeaderEditor,
   History,
   HistoryContextProvider,
+  HistoryContextType,
   HistoryIcon,
   KeyboardShortcutIcon,
+  KeyMap,
   MergeIcon,
   PlusIcon,
   PrettifyIcon,
   QueryEditor,
   ReloadIcon,
   ResponseEditor,
+  ResponseTooltipType,
   SchemaContextProvider,
+  SchemaContextType,
   SettingsIcon,
   Spinner,
   StorageContextProvider,
+  StorageContextType,
   Tab,
   Tabs,
+  TabsState,
   ToolbarButton,
   UnStyledButton,
   useAutoCompleteLeafs,
@@ -64,16 +74,6 @@ import {
   useStorageContext,
   VariableEditor,
 } from '@graphiql/react';
-import type {
-  EditorContextType,
-  ExplorerContextType,
-  HistoryContextType,
-  ResponseTooltipType,
-  SchemaContextType,
-  StorageContextType,
-  TabsState,
-  KeyMap,
-} from '@graphiql/react';
 
 import { ToolbarMenu, ToolbarMenuItem } from './ToolbarMenu';
 import find from '../utility/find';
@@ -619,6 +619,8 @@ type GraphiQLWithContextConsumerProps = Omit<
 
 export type GraphiQLState = {
   activeSecondaryEditor: 'variable' | 'header';
+  showSettings: boolean;
+  clearStorageStatus: 'success' | 'error' | null;
 };
 
 class GraphiQLWithContext extends React.Component<
@@ -629,7 +631,11 @@ class GraphiQLWithContext extends React.Component<
     super(props);
 
     // Initialize state
-    this.state = { activeSecondaryEditor: 'variable' };
+    this.state = {
+      activeSecondaryEditor: 'variable',
+      showSettings: false,
+      clearStorageStatus: null,
+    };
   }
 
   render() {
@@ -751,7 +757,10 @@ class GraphiQLWithContext extends React.Component<
             <UnStyledButton>
               <KeyboardShortcutIcon />
             </UnStyledButton>
-            <UnStyledButton>
+            <UnStyledButton
+              onClick={() => {
+                this.setState({ showSettings: true });
+              }}>
               <SettingsIcon />
             </UnStyledButton>
           </div>
@@ -989,6 +998,57 @@ class GraphiQLWithContext extends React.Component<
             </div>
           </div>
         </div>
+        <Dialog
+          isOpen={this.state.showSettings}
+          onDismiss={() => {
+            this.setState({
+              showSettings: false,
+              clearStorageStatus: null,
+            });
+          }}>
+          <div className="graphiql-dialog-header">
+            <div className="graphiql-dialog-title">Settings</div>
+            <Dialog.Close
+              onClick={() => {
+                this.setState({
+                  showSettings: false,
+                  clearStorageStatus: null,
+                });
+              }}
+            />
+          </div>
+          {this.props.storageContext ? (
+            <div className="graphiql-dialog-section">
+              <div>
+                <div className="graphiql-dialog-section-title">
+                  Clear storage
+                </div>
+                <div className="graphiql-dialog-section-caption">
+                  Remove all locally stored data and start fresh.
+                </div>
+              </div>
+              <div>
+                <Button
+                  state={this.state.clearStorageStatus || undefined}
+                  disabled={this.state.clearStorageStatus === 'success'}
+                  onClick={() => {
+                    try {
+                      this.props.storageContext?.clear();
+                      this.setState({ clearStorageStatus: 'success' });
+                    } catch {
+                      this.setState({ clearStorageStatus: 'error' });
+                    }
+                  }}>
+                  {this.state.clearStorageStatus === 'success'
+                    ? 'Cleared data'
+                    : this.state.clearStorageStatus === 'error'
+                    ? 'Failed'
+                    : 'Clear data'}
+                </Button>
+              </div>
+            </div>
+          ) : null}
+        </Dialog>
       </div>
     );
   }

diff --git a/packages/graphiql/src/style.css b/packages/graphiql/src/style.css
@@ -231,3 +231,40 @@ button.graphiql-tab-add > svg {
     transform: rotate(360deg);
   }
 }
+
+/* The header of the settings dialog */
+reach-portal .graphiql-dialog-header {
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+  padding: var(--px-24);
+}
+
+/* The title of the settings dialog */
+reach-portal .graphiql-dialog-title {
+  font-size: var(--font-size-h3);
+  font-weight: var(--font-weight-medium);
+}
+
+/* A section inside the settings dialog */
+reach-portal .graphiql-dialog-section {
+  align-items: center;
+  border-top: 1px solid var(--color-neutral-15);
+  display: flex;
+  justify-content: space-between;
+  padding: var(--px-24);
+}
+reach-portal .graphiql-dialog-section > :not(:first-child) {
+  margin-left: var(--px-24);
+}
+
+/* The section title in the settings dialog */
+reach-portal .graphiql-dialog-section-title {
+  font-size: var(--font-size-h4);
+  font-weight: var(--font-weight-medium);
+}
+
+/* The section caption in the settings dialog */
+reach-portal .graphiql-dialog-section-caption {
+  color: var(--color-neutral-60);
+}