Skip to content

Add a schema management tab #5

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.

Sign up for GitHub

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

Merged
merged 7 commits into from
Jan 8, 2018
Merged

Add a schema management tab #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
e870695
Add simple table view for the schema
gpahal Jan 4, 2018
a1345df
Fix bugs in update predicate and allow add predicate
gpahal Jan 5, 2018
a8b2f40
Add schema to editor panel
gpahal Jan 8, 2018
702db02
Add key prop to schema modal tokenizers
gpahal Jan 8, 2018
1507e2a
Show count option in update schema modal for uids and lists
gpahal Jan 8, 2018
b806aa4
Add link to docs when adding an index
gpahal Jan 8, 2018
e088a89
Run npm install always to install missing dependencies or update depe…
gpahal Jan 8, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 27 additions & 0 deletions client/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

7 changes: 7 additions & 0 deletions client/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,9 @@
"babel": {
"presets": [
"react-app"
],
"plugins": [
"transform-es2015-for-of"
]
},
"eslintConfig": {
Expand Down Expand Up @@ -98,6 +101,7 @@
"babel-eslint": "^7.2.3",
"babel-jest": "^20.0.3",
"babel-loader": "^7.1.2",
"babel-plugin-transform-es2015-for-of": "^6.23.0",
"babel-preset-react-app": "^3.1.0",
"babel-runtime": "^6.26.0",
"case-sensitive-paths-webpack-plugin": "2.1.1",
Expand Down Expand Up @@ -144,7 +148,9 @@
"codemirror": "^5.32.0",
"codemirror-graphql": "^0.6.12",
"crypto-js": "^3.1.9-1",
"datatables.net-bs": "^1.10.16",
"highlight.js": "^9.12.0",
"jquery": "^3.2.1",
"lodash": "^4.17.4",
"pluralize": "^7.0.0",
"randomcolor": "^0.5.3",
Expand All @@ -154,6 +160,7 @@
"react-dom": "^16.2.0",
"react-redux": "^5.0.6",
"react-router-dom": "^4.2.2",
"react-timeago": "^3.4.3",
"react-transition-group": "^2.2.1",
"redux": "^3.7.2",
"redux-persist": "^5.4.0",
Expand Down
8 changes: 8 additions & 0 deletions client/src/assets/css/Schema.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
#schema-table th,
#schema-table td {
white-space: nowrap;
}

#schema-table tbody tr {
cursor: pointer;
}
8 changes: 7 additions & 1 deletion client/src/assets/css/Sidebar.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,9 @@
ul {
list-style: none;
padding-left: 0;
flex-direction: column;
display: flex;
height: 100%;
}

li {
Expand All @@ -19,7 +22,10 @@
font-size: 29px;
border-bottom: 1px solid #505050;
}
li:hover {
li.flex-expand {
flex: 1;
}
li:not(.flex-expand):hover {
background-color: #353836;
}
li a {
Expand Down
57 changes: 45 additions & 12 deletions client/src/components/EditorPanel.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { connect } from "react-redux";
import classnames from "classnames";

import Editor from "../containers/Editor";
import Schema from "./Schema";

import "../assets/css/EditorPanel.scss";

Expand All @@ -11,6 +12,7 @@ class EditorPanel extends React.Component {
const {
canDiscardAll,
query,
action,
onRunQuery,
onUpdateQuery,
onClearQuery,
Expand All @@ -19,6 +21,7 @@ class EditorPanel extends React.Component {
connection,
url,
onUpdateAction,
onUpdateConnectedState,
onRefreshConnectedState,
openChangeUrlModal,
} = this.props;
Expand All @@ -28,6 +31,26 @@ class EditorPanel extends React.Component {
const refreshing = connection.refreshing;
const isQueryDirty = query.trim() !== "";

let innerComponent;
if (action === "schema") {
innerComponent = (
<Schema
url={url}
onUpdateConnectedState={onUpdateConnectedState}
/>
);
} else {
innerComponent = (
<Editor
onUpdateQuery={onUpdateQuery}
onRunQuery={onRunQuery}
query={query}
action={this.props.action}
saveCodeMirrorInstance={saveCodeMirrorInstance}
/>
);
}

return (
<div className="editor-panel">
<div className="header">
Expand Down Expand Up @@ -62,12 +85,14 @@ class EditorPanel extends React.Component {
style={{
marginLeft: "10px",
}}
disabled={connection.refreshing}
>
{connection.refreshing
? "Reconnecting..."
: "Reconnect"}
</button>
)}
{/* eslint-disable jsx-a11y/href-no-hash */}
<a
href="#"
className="btn btn-primary btn-xs"
Expand All @@ -82,9 +107,11 @@ class EditorPanel extends React.Component {
>
Change URL
</a>
{/* eslint-enable jsx-a11y/href-no-hash */}
</span>
</div>
<div className="actions">
{/* eslint-disable jsx-a11y/href-no-hash */}
<a
href="#"
className={classnames("action clear-btn", {
Expand All @@ -109,7 +136,7 @@ class EditorPanel extends React.Component {
<a
href="#"
className={classnames("action clear-btn", {
actionable: isQueryDirty,
actionable: action !== "schema" && isQueryDirty,
})}
onClick={e => {
e.preventDefault();
Expand All @@ -125,7 +152,7 @@ class EditorPanel extends React.Component {
<a
href="#"
className={classnames("action run-btn", {
actionable: isQueryDirty,
actionable: action !== "schema" && isQueryDirty,
})}
onClick={e => {
e.preventDefault();
Expand All @@ -138,24 +165,20 @@ class EditorPanel extends React.Component {
>
<i className="fa fa-play" /> Run
</a>
{/* eslint-enable jsx-a11y/href-no-hash */}
</div>
</div>

<Editor
onUpdateQuery={onUpdateQuery}
onRunQuery={onRunQuery}
query={query}
action={this.props.action}
saveCodeMirrorInstance={saveCodeMirrorInstance}
/>
{innerComponent}

<div className="editor-radio">
<label className="editor-label">
<input
className="editor-type"
type="radio"
name="action"
value="query"
checked={this.props.action === "query"}
checked={action === "query"}
onChange={onUpdateAction}
/>Query
</label>
Expand All @@ -165,7 +188,7 @@ class EditorPanel extends React.Component {
type="radio"
name="action"
value="mutate"
checked={this.props.action === "mutate"}
checked={action === "mutate"}
onChange={onUpdateAction}
/>Mutate
</label>
Expand All @@ -175,10 +198,20 @@ class EditorPanel extends React.Component {
type="radio"
name="action"
value="alter"
checked={this.props.action === "alter"}
checked={action === "alter"}
onChange={onUpdateAction}
/>Alter
</label>
<label className="editor-label">
<input
className="editor-type"
type="radio"
name="action"
value="schema"
checked={action === "schema"}
onChange={onUpdateAction}
/>Schema
</label>
</div>
</div>
);
Expand Down
2 changes: 1 addition & 1 deletion client/src/components/FrameItem.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -159,7 +159,7 @@ export default class FrameItem extends React.Component {
.catch(error => {
// FIXME: make it DRY. but error.response.text() is async and error.message is sync.

// if no response, it's a network error or client side runtime error.
// If no response, it's a network error or client side runtime error.
if (!error.response) {
// Capture client side error not query execution error from server.
// FIXME: This captures 404.
Expand Down
Loading