+
+ {this.props.beforeTopBarContent}
+
{logo}
+
+ {this.props.tabs ? (
+
+ {this.props.editorContext.tabs.map((tab, index) => (
+ 1}
+ onSelect={() => {
+ this.props.executionContext.stop();
+ this.props.editorContext.changeTab(index);
+ }}
+ onClose={() => {
+ if (this.props.editorContext.activeTabIndex === index) {
+ this.props.executionContext.stop();
+ }
+ this.props.editorContext.closeTab(index);
+ }}
+ tabProps={{
+ 'aria-controls': 'graphiql-session',
+ id: `session-tab-${index}`,
+ }}
+ />
+ ))}
+ {
+ this.props.editorContext.addTab();
}}
/>
- ))}
- {
- this.props.editorContext.addTab();
- }}
- />
-
- ) : null}
-
-
-
-
-
-
-
{
- if (
- this.props.docResize.hiddenElement === 'second'
- ) {
- this.props.docResize.setHiddenElement(null);
- }
- }}
- onCopyQuery={this.props.onCopyQuery}
- onEdit={this.props.onEditQuery}
- onEditOperationName={this.props.onEditOperationName}
- readOnly={this.props.readOnly}
- validationRules={this.props.validationRules}
- />
+
+ ) : null}
+
+
+
+
+
+
+ {
+ if (
+ this.props.docResize.hiddenElement === 'first'
+ ) {
+ this.props.docResize.setHiddenElement(null);
+ }
+ }}
+ onCopyQuery={this.props.onCopyQuery}
+ onEdit={this.props.onEditQuery}
+ onEditOperationName={this.props.onEditOperationName}
+ readOnly={this.props.readOnly}
+ validationRules={this.props.validationRules}
+ />
+
{toolbar}
-
-
-
-
-
-
- {
- if (
- this.props.editorToolsResize.hiddenElement ===
- 'second'
- ) {
- this.props.editorToolsResize.setHiddenElement(
- null,
- );
- }
- this.setState({
- activeSecondaryEditor: 'variable',
- });
- }}>
- Variables
-
- {this.props.headerEditorEnabled ? (
+
+
+
+
+
- Headers
+ Variables
- ) : null}
-
-
{
- if (
- this.props.editorToolsResize.hiddenElement ===
- 'second'
- ) {
- this.props.editorToolsResize.setHiddenElement(null);
- } else {
+ {headerEditorEnabled ? (
+ {
+ if (
+ this.props.editorToolsResize.hiddenElement ===
+ 'second'
+ ) {
+ this.props.editorToolsResize.setHiddenElement(
+ null,
+ );
+ }
+ this.setState({
+ activeSecondaryEditor: 'header',
+ });
+ }}>
+ Headers
+
+ ) : null}
+
+
{
this.props.editorToolsResize.setHiddenElement(
- 'second',
+ this.props.editorToolsResize.hiddenElement ===
+ 'second'
+ ? null
+ : 'second',
);
- }
- }}>
- {this.props.editorToolsResize.hiddenElement ===
- 'second' ? (
-
- ) : (
-
- )}
-
+ }}>
+ {this.props.editorToolsResize.hiddenElement ===
+ 'second' ? (
+
+ ) : (
+
+ )}
+
+
-
-
-
-
- {headerEditorEnabled && (
-
+
+ {headerEditorEnabled && (
+
+ )}
+
+
-
-
-
- {this.props.executionContext.isFetching ? (
-
- ) : null}
-
- {footer}
+
+
+
+ {this.props.executionContext.isFetching ? (
+
+ ) : null}
+
+ {footer}
+
-
-
-
- this.props.docResize.setHiddenElement('second')}
- />
-
-
);
}
diff --git a/packages/graphiql/src/components/ToolbarButton.tsx b/packages/graphiql/src/components/ToolbarButton.tsx
deleted file mode 100644
index 45d32da5671..00000000000
--- a/packages/graphiql/src/components/ToolbarButton.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-/**
- * Copyright (c) 2021 GraphQL Contributors.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import React from 'react';
-
-type ToolbarButtonProps = {
- onClick: () => void;
- title: string;
- label: string;
-};
-
-type ToolbarButtonState = {
- error: Error | null;
-};
-
-/**
- * ToolbarButton
- *
- * A button to use within the Toolbar.
- */
-export class ToolbarButton extends React.Component<
- ToolbarButtonProps,
- ToolbarButtonState
-> {
- constructor(props: ToolbarButtonProps) {
- super(props);
- this.state = { error: null };
- }
-
- render() {
- const { error } = this.state;
- return (
-
- );
- }
-
- handleClick = () => {
- try {
- this.props.onClick();
- this.setState({ error: null });
- } catch (error) {
- if (error instanceof Error) {
- this.setState({ error });
- return;
- }
- throw error;
- }
- };
-}
diff --git a/packages/graphiql/src/components/__tests__/GraphiQL.spec.tsx b/packages/graphiql/src/components/__tests__/GraphiQL.spec.tsx
index 82bba6cc2e4..d0959f015cb 100644
--- a/packages/graphiql/src/components/__tests__/GraphiQL.spec.tsx
+++ b/packages/graphiql/src/components/__tests__/GraphiQL.spec.tsx
@@ -542,29 +542,29 @@ describe('GraphiQL', () => {
.spyOn(Element.prototype, 'getBoundingClientRect')
.mockReturnValue({ left: 0, right: 1200 });
- const { container, getByLabelText } = render(
-
,
- );
+ const { container } = render(
);
- fireEvent.click(getByLabelText(/Open Documentation Explorer/i));
- const docExplorerResizer = container.querySelector(
- '.docExplorerResizer',
- ) as Element;
+ fireEvent.click(
+ container.querySelector('[title="Show Documentation Explorer"]'),
+ );
+ const dragBar = container.querySelectorAll(
+ '.graphiql-horizontal-drag-bar',
+ )[0];
- fireEvent.mouseDown(docExplorerResizer, {
+ fireEvent.mouseDown(dragBar, {
clientX: 3,
});
- fireEvent.mouseMove(docExplorerResizer, {
+ fireEvent.mouseMove(dragBar, {
buttons: 1,
clientX: 800,
});
- fireEvent.mouseUp(docExplorerResizer);
+ fireEvent.mouseUp(dragBar);
// 797 / (1200 - 797) = 1.977667493796526
expect(
- container.querySelector('.editorWrap').parentElement.style.flex,
+ container.querySelector('.docExplorerWrap').parentElement.style.flex,
).toBe('1.977667493796526');
clientWidthSpy.mockRestore();
diff --git a/packages/graphiql/src/css/app.css b/packages/graphiql/src/css/app.css
index d0fd9ff8815..fc351be8ab2 100644
--- a/packages/graphiql/src/css/app.css
+++ b/packages/graphiql/src/css/app.css
@@ -1,19 +1,3 @@
-.graphiql-container,
-.graphiql-container button,
-.graphiql-container input {
- color: var(--color-neutral-100);
- font-size: 14px;
-}
-
-.graphiql-container {
- display: flex;
- flex-direction: row;
- height: 100%;
- margin: 0;
- overflow: hidden;
- width: 100%;
-}
-
.graphiql-container .editorWrap {
display: flex;
flex-direction: column;
@@ -102,14 +86,6 @@
z-index: 5;
}
-.graphiql-container .docExplorerResizer {
- cursor: col-resize;
- height: 100%;
- position: absolute;
- width: 10px;
- z-index: 10;
-}
-
.graphiql-container .docExplorerHide {
cursor: pointer;
font-size: 18px;
diff --git a/packages/graphiql/src/index.tsx b/packages/graphiql/src/index.tsx
index b559e0b5a30..b46f214e1b4 100644
--- a/packages/graphiql/src/index.tsx
+++ b/packages/graphiql/src/index.tsx
@@ -40,7 +40,6 @@ export { DocExplorer } from './components/DocExplorer';
* Toolbar
*/
export { ToolbarMenu, ToolbarMenuItem } from './components/ToolbarMenu';
-export { ToolbarButton } from './components/ToolbarButton';
export { ToolbarSelect, ToolbarSelectOption } from './components/ToolbarSelect';
/**
diff --git a/packages/graphiql/src/style.css b/packages/graphiql/src/style.css
index 839027ad6b8..a12eb4ec5e0 100644
--- a/packages/graphiql/src/style.css
+++ b/packages/graphiql/src/style.css
@@ -1,3 +1,44 @@
+/* Everything */
+.graphiql-container {
+ display: flex;
+ height: 100%;
+ margin: 0;
+ overflow: hidden;
+ width: 100%;
+}
+
+/* The sidebar */
+.graphiql-container .graphiql-sidebar {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ padding: var(--px-8);
+ width: var(--sidebar-width);
+}
+.graphiql-container .graphiql-sidebar button {
+ color: var(--color-neutral-60);
+ height: var(--sidebar-width);
+ width: var(--sidebar-width);
+}
+.graphiql-container .graphiql-sidebar button.active {
+ color: var(--color-neutral-100);
+}
+.graphiql-container .graphiql-sidebar button:not(:first-child) {
+ margin-top: var(--px-4);
+}
+.graphiql-container .graphiql-sidebar button > svg {
+ height: calc(var(--sidebar-width) - (2 * var(--px-12)));
+ padding: var(--px-12);
+ pointer-events: none;
+ width: calc(var(--sidebar-width) - (2 * var(--px-12)));
+}
+
+/* The main content, i.e. everything except the sidebar */
+.graphiql-container .graphiql-main {
+ display: flex;
+ flex: 1;
+}
+
/* The whole session, i.e. editors and response */
.graphiql-container .graphiql-session {
background-color: var(--color-neutral-7);
@@ -151,3 +192,16 @@
padding: var(--px-12);
width: var(--px-12);
}
+
+/* Generic spin animation */
+.graphiql-spin {
+ animation: spin 1s linear 0s infinite;
+}
+@keyframes spin {
+ from {
+ transform: rotate(0deg);
+ }
+ to {
+ transform: rotate(360deg);
+ }
+}