Adds in search functionality to result-viewer, bugfixes for example (#…

…188) * Adds in search functionality to result-viewer, bugfixes for example * Fixing server now that client queries appropriate endpoint * Removing graphiql from deps as it's now available at build time from root
graphql · Nov 7, 2016 · f9de007 · f9de007
1 parent 39086a9
commit f9de007
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 15 deletions.
diff --git a/css/codemirror.css b/css/codemirror.css
@@ -335,3 +335,36 @@ div.CodeMirror-dragcursors {
 
 /* Help users use markselection to safely style text background */
 span.CodeMirror-selectedtext { background: none; }
+
+.CodeMirror-dialog {
+  position: absolute;
+  left: 0; right: 0;
+  background: inherit;
+  z-index: 15;
+  padding: .1em .8em;
+  overflow: hidden;
+  color: inherit;
+}
+
+.CodeMirror-dialog-top {
+  border-bottom: 1px solid #eee;
+  top: 0;
+}
+
+.CodeMirror-dialog-bottom {
+  border-top: 1px solid #eee;
+  bottom: 0;
+}
+
+.CodeMirror-dialog input {
+  border: 1px solid #d3d6db;
+  outline: none;
+  background: transparent;
+  width: 20em;
+  color: inherit;
+  font-family: monospace;
+}
+
+.CodeMirror-dialog button {
+  font-size: 70%;
+}
diff --git a/example/build.sh b/example/build.sh
@@ -2,7 +2,7 @@
 
 rm -rf dist/ && mkdir -p dist/ &&
 babel server.js -o dist/server.js &&
-cp node_modules/graphiql/graphiql.js dist/graphiql.js &&
-cp node_modules/graphiql/graphiql.css dist/graphiql.css &&
+cp ../graphiql.js dist/graphiql.js &&
+cp ../graphiql.css dist/graphiql.css &&
 cp -r vendor/ dist/vendor/ &&
 cat index.html > dist/index.html
diff --git a/example/package.json b/example/package.json
@@ -13,7 +13,6 @@
   "dependencies": {
     "express": "^4.13.3",
     "express-graphql": "^0.5.1",
-    "graphiql": "../",
     "graphql": "^0.7.0",
     "react": "^15.0.1",
     "react-dom": "^15.0.1"

diff --git a/example/server.js b/example/server.js
@@ -23,20 +23,19 @@ import {
   GraphQLList,
 } from 'graphql';
 
-var app = express();
+const app = express();
 app.use(express.static(__dirname));
 app.use('/graphql', graphqlHTTP(() => ({
   schema: TestSchema
 })));
-app.listen(8080);
-console.log('Started on http://localhost:8080/');
+app.listen(8080, () => console.log('Started on http://localhost:8080/'));
 
 // Schema defined here
 
 
 // Test Schema
 
-var TestEnum = new GraphQLEnumType({
+const TestEnum = new GraphQLEnumType({
   name: 'TestEnum',
   values: {
     RED: { description: 'A rosy color' },
@@ -45,7 +44,7 @@ var TestEnum = new GraphQLEnumType({
   }
 });
 
-var TestInputObject = new GraphQLInputObjectType({
+const TestInputObject = new GraphQLInputObjectType({
   name: 'TestInput',
   fields: () => ({
     string: {
@@ -69,7 +68,7 @@ var TestInputObject = new GraphQLInputObjectType({
   })
 });
 
-var TestInterface = new GraphQLInterfaceType({
+const TestInterface = new GraphQLInterfaceType({
   name: 'TestInterface',
   description: 'Test interface.',
   fields: () => ({
@@ -83,7 +82,7 @@ var TestInterface = new GraphQLInterfaceType({
   }
 });
 
-var UnionFirst = new GraphQLObjectType({
+const UnionFirst = new GraphQLObjectType({
   name: 'First',
   fields: () => ({
     name: {
@@ -98,7 +97,7 @@ var UnionFirst = new GraphQLObjectType({
   interfaces: [ TestInterface ]
 });
 
-var UnionSecond = new GraphQLObjectType({
+const UnionSecond = new GraphQLObjectType({
   name: 'Second',
   fields: () => ({
     name: {
@@ -113,15 +112,15 @@ var UnionSecond = new GraphQLObjectType({
   interfaces: [ TestInterface ]
 });
 
-var TestUnion = new GraphQLUnionType({
+const TestUnion = new GraphQLUnionType({
   name: 'TestUnion',
   types: [ UnionFirst, UnionSecond ],
   resolveType() {
     return UnionFirst;
   }
 });
 
-var TestType = new GraphQLObjectType({
+const TestType = new GraphQLObjectType({
   name: 'Test',
   fields: () => ({
     test: {
@@ -172,7 +171,7 @@ var TestType = new GraphQLObjectType({
   })
 });
 
-var TestMutationType = new GraphQLObjectType({
+const TestMutationType = new GraphQLObjectType({
   name: 'MutationType',
   description: 'This is a simple mutation type',
   fields: {
@@ -186,7 +185,7 @@ var TestMutationType = new GraphQLObjectType({
   }
 });
 
-var TestSubscriptionType = new GraphQLObjectType({
+const TestSubscriptionType = new GraphQLObjectType({
   name: 'SubscriptionType',
   description: 'This is a simple subscription type',
   fields: {

diff --git a/src/components/ResultViewer.js b/src/components/ResultViewer.js
@@ -31,6 +31,8 @@ export class ResultViewer extends React.Component {
     const CodeMirror = require('codemirror');
     require('codemirror/addon/fold/foldgutter');
     require('codemirror/addon/fold/brace-fold');
+    require('codemirror/addon/dialog/dialog');
+    require('codemirror/addon/search/search');
     require('codemirror/keymap/sublime');
     require('codemirror-graphql/results/mode');