Merge pull request #160 from protographql2/master

Version 2 Pull Request

Author: jessicavaughan820

README.md

@@ -1,75 +1,84 @@
 <p align="center" ><img src="public/assets/pictures/ProtographQLBanner.png" width="800px"></p>
-
-# ProtoGraphQL
-
-ProtoGraphQL is a **prototyping tool** that helps developers build and visualize GraphQL schemas and queries without writing any code. Users simply input their relational database tables and ProtoGraphQL will dynamically create a customized and functional GraphQL Apollo Server readily available for export.
-
-ProtoGraphQL is currently in beta. We would appreciate if you could post any issues to our GitHub – we are actively looking for areas for improvement and we welcome feedback from the community.
-
-Upcoming releases include adding visual indicators for table relationships in the “Schema” view, enabling users to create customizable GraphQL mutations, and extending support for NoSQL databases such as MongoDB.
-
-\* *We recently added support for users to view the structures and relationships of their tables using our GraphQL schema tree visualizer!*
-
+ 
+# ProtoGraphQL ver. 2.0
+ 
+*** The latest release of ProtoGraphQL includes a new view that can jumpstart your query testing with the Jest framework and the ability to import tables from an existing database. *** 
+ 
+ProtoGraphQL is a **prototyping tool** that empowers developers to build and visualize GraphQL schemas and queries without writing any code. Once users import or input their relational database tables, ProtoGraphQL can generate an export package that allows developers to spin up a customized and functional GraphQL Apollo Server as an independent app. (As of version 2.0 custom mutations are also supported!)
+ 
+ProtoGraphQL is in beta. Please post any issues to our GitHub - we are actively looking for opportunities to improve this tool and we welcome your feedback.
+ 
+Upcoming releases will improve the “Schema” view and add support for NoSQL databases. 
+ 
 ## Getting Started:
-
-1. Download for [Mac](https://github.com/oslabs-beta/protographql/releases/download/v1.0.0-beta/ProtoGraphQL-1.0.0.dmg), [Windows](https://github.com/oslabs-beta/protographql/releases/download/v1.0.0-beta/ProtoGraphQL.Setup.1.0.0.exe), or [Linux](https://github.com/oslabs-beta/protographql/releases/download/v1.0.0-beta/protographql_1.0.0_amd64.deb)
-
+ 
+1. Download: [Mac](https://github.com/oslabs-beta/protographql/releases/download/v1.0.0-beta/ProtoGraphQL-1.0.0.dmg), [Windows](https://github.com/oslabs-beta/protographql/releases/download/v1.0.0-beta/ProtoGraphQL.Setup.1.0.0.exe), [Linux](https://github.com/oslabs-beta/protographql/releases/download/v1.0.0-beta/protographql_1.0.0_amd64.deb)
+ 
 2. Extract file
-
-3. Run app
-
+ 
+3. Run application
+ 
 ## How to Use:
-
-1.	When the application loads, click on **Add Table** and populate the table form with a name and new fields. Optionally, you may also use the last three inputs in the form to create relationships to other tables. When you are done, click **Save**.
-
-<p align="center"><kbd><img src="public/assets/pictures/add-table demo.mov.gif" width="800px"></kbd><p>
-
-2.	Navigate to the **Schema**, **Code**, and **Visualize** tabs to toggle views:
-    * **Schema** - view, edit, or delete tables you've added
+ 
+1.  When the application starts you will be given the option to either **CREATE YOUR TABLES** or **IMPORT TABLES**. To create your tables, click the “Add Table” button in the lower left corner of the screen. When your config is complete, click **Save**. When importing, simply paste your database URI in the field and click the **Connect** button. In either case, your tables will be displayed in the main view when you are done.
+ 
+<p align="center"><kbd><img src="public/assets/pictures/v2-add-tables.gif" width="800px"></kbd><p>
+ 
+2.  Navigate to the alternate views within the app using the tabs on the left:  **Schema**, **Code**, **Visualize**, and **Tests**
+ 
+* **Schema** - view, edut or delete tables you've added. 
 
-    <p align="center"><kbd><img src="public/assets/pictures/Schema_Screenshot.png" width="800px"></kbd></p>
+    <p align="center"><kbd><img src="public/assets/pictures/v2-schema-view.png" width="800px"></kbd></p>
 
-    * **Code** - view generated GraphQL and SQL code before export
+* **Code** - view generated GraphQL and SQL code. 
 
-    <p align="center"><kbd><img src="public/assets/pictures/Code_Screenshot.png" width="800px"></kbd></p>
+    <p align="center"><kbd><img src="public/assets/pictures/v2-codeview.png" width="800px"></kbd></p>
 
-    * **Visualize** - view the GraphQL schema intuitively as a simple tree
+* **Visualize** - view the GraphQL schema as a simple tree. 
 
-   <p align="center" ><kbd><img src="public/assets/pictures/tree visializer demo.gif" width="800px"></kbd></p>
-
-3.	Export the code by clicking the **Export** icon. 
-
-   <p align="center" ><kbd><img src="public/assets/pictures/Export_Screenshot.png" width="800px"></kbd></p>
-
-4. Enter your Postgres database URI and then select the directory you want to save your executable GraphQL server.
-
+   <p align="center" ><kbd><img src="public/assets/pictures/v2-visualizer.gif" width="800px"></kbd></p>
+ 
+* **Tests** - create and export query and response pairs from a custom GraphQL Endpoint.
+       
+   <p align="center" ><kbd><img src="public/assets/pictures/v2-test-queries.gif" width="800px"></kbd></p>
+ 
+3.  Export your code by clicking the **Export** icon in the upper right.  
+ 
+   <p align="center" ><kbd><img src="public/assets/pictures/v2-export.png" width="800px"></kbd></p>
+ 
+4. Enter your Postgres database URI, then select the directory you want to save your compressed GraphQL server package in.
+
+ 
 ## How to Run GraphQL Server:
-
+ 
 There are several libraries we could have used to create a GraphQL server, but we decided to use Apollo Server – the most popular library to setup an endpoint for responding to incoming GraphQL requests in JavaScript.
-
-1.	Extract apollo-server.zip file 
-
+ 
+1. Extract apollo-server.zip file 
+ 
 2. Open the project 
-
-3.	Install dependencies 
+ 
+3. Install dependencies 
   ```
   npm install
   ```
-
-4.	Run the server and visit localhost:3000
+ 
+4. Run the server and point your browser to localhost:3000
   ```
   npm start
   ```
-
-5.	Use Apollo Server Playground to mock client GraphQL queries and responses to your server. [Learn more about constructing GraphQL Queries here](https://graphql.org/learn/queries/)
-
+ 
+5.  Use Apollo Server Playground to mock client GraphQL queries and responses to your server. [Learn more about constructing GraphQL Queries here](https://graphql.org/learn/queries/)
+ 
 ## Contributors:
-
+ 
 <img align="right" src="public/assets/pictures/icon/icon.png" width="125px">
-
-- Alena Budzko [@AlenaBudzko](https://github.com/AlenaBudzko) 
-- Bryan Fong [@bryanfong-dev](https://github.com/bryanfong-dev)
-- Rodolfo Guzman [@Rodolfoguzman25](https://github.com/Rodolfoguzman25)
-- Jarred Jack Harewood [@jackhajb](https://github.com/jackhajb)
-- Geoffrey Lin [@geofflin](https://github.com/geofflin)
-
+ 
+- Alena Budzko  |  [@AlenaBudzko](https://github.com/AlenaBudzko) 
+- Bryan Fong  |  [@bryanfong-dev](https://github.com/bryanfong-dev)
+- Rodolfo Guzman  |  [@Rodolfoguzman25](https://github.com/Rodolfoguzman25)
+- Haris Hambasic | [@hambasicharis1995](https://github.com/hambasicharis1995)
+- Jarred Jack Harewood  |  [@jackhajb](https://github.com/jackhajb)
+- Geoffrey Lin  |  [@geofflin](https://github.com/geofflin)
+- Michele Moody  | [@Milmoody](https://github.com/Milmoody)
+- Jessica Vaughan  |  [@jessicavaughan820](https://github.com/jessicavaughan820)
+- Vance Wallace  | [@Vancito](https://github.com/Vancito) 

src/utils/buildENV.test.js renamed to _protographql_tests_/buildENV.test.js

@@ -1,5 +1,5 @@
-import buildEnvURI from './buildENV';
-import buildENV from './buildENV';
+import buildEnvURI from '../src/utils/buildENV';
+import buildENV from '../src/utils/buildENV';
 
 test('When trying to create the Environment URI the result is not null: ', () => {
     expect(buildEnvURI("thisIsNotNull")).not.toBeNull;

_protographql_tests_/buildGQLInputTypes.test.js

@@ -0,0 +1,147 @@
+import buildGQLInputTypes from '../src/utils/buildGQLInputTypes';
+import { build } from 'protobufjs';
+
+const testInput = {
+  0: {
+    type: 'FirstTable',
+    fields: {
+      0: {
+        name: 'FirstColumn',
+        type: 'ID',
+        primaryKey: true,
+        unique: true,
+        required: false,
+        defaultValue: '1',
+        relationSelected: false,
+        relation: {
+          tableIndex: -1,
+          fieldIndex: -1,
+          refType: ''
+        },
+        tableNum: 0,
+        fieldNum: 0,
+        queryable: false
+      },
+      1: {
+        name: 'SecondColumn',
+        type: 'String',
+        primaryKey: false,
+        unique: false,
+        required: true,
+        defaultValue: 'thisIsADefaultValue',
+        relationSelected: false,
+        relation: {
+          tableIndex: -1,
+          fieldIndex: -1,
+          refType: ''
+        },
+        tableNum: 0,
+        fieldNum: 1,
+        queryable: true
+      },
+      2: {
+        name: 'ThirdColumn',
+        type: 'String',
+        primaryKey: false,
+        unique: false,
+        required: true,
+        defaultValue: '',
+        relationSelected: false,
+        relation: {
+          tableIndex: -1,
+          fieldIndex: -1,
+          refType: ''
+        },
+        tableNum: 0,
+        fieldNum: 2,
+        queryable: false
+      }
+    },
+    fieldIndex: 3,
+    tableID: 0
+  },
+  1: {
+    type: 'SecondTable',
+    fields: {
+      0: {
+        name: 'SecondTableFirstColumn',
+        type: 'ID',
+        primaryKey: true,
+        unique: true,
+        required: false,
+        defaultValue: '',
+        relationSelected: false,
+        relation: {
+          tableIndex: -1,
+          fieldIndex: -1,
+          refType: ''
+        },
+        tableNum: 1,
+        fieldNum: 0,
+        queryable: true
+      },
+      1: {
+        name: 'SecondSecondColumn',
+        type: 'String',
+        primaryKey: false,
+        unique: false,
+        required: true,
+        defaultValue: 'anotherDefaultValue',
+        relationSelected: false,
+        relation: {
+          tableIndex: -1,
+          fieldIndex: -1,
+          refType: ''
+        },
+        tableNum: 1,
+        fieldNum: 1,
+        queryable: true
+      },
+      2: {
+        name: 'SecondThirdColumn',
+        type: 'ID',
+        primaryKey: false,
+        unique: false,
+        required: true,
+        defaultValue: '',
+        relationSelected: true,
+        relation: {
+          tableIndex: '0',
+          fieldIndex: '0',
+          refType: 'many to one'
+        },
+        tableNum: 1,
+        fieldNum: 2,
+        queryable: true
+      }
+    },
+    fieldIndex: 3,
+    tableID: 1
+  },
+};
+
+const testOutput = `  input FirstTableInput {
+    FirstColumn: ID,
+    SecondColumn: String!,
+    ThirdColumn: String!,
+  }
+
+  input SecondTableInput {
+    SecondTableFirstColumn: ID,
+    SecondSecondColumn: String!,
+    firsttable: FirstTableInput,
+  }
+
+`
+
+test('Building GQL Input Types does not return null: ', () => {
+    expect(buildGQLInputTypes(testInput)).not.toBeNull;
+});
+
+test('When trying to create the GQL Input Types the result is a string: ', () => {
+  expect(typeof(buildGQLInputTypes(testInput))).toBe('string');
+});
+
+test('Building GQL Input Types works given test input: ', () => {
+  expect(buildGQLInputTypes(testInput)).toBe(testOutput);
+});

src/utils/buildGQLSchema.test.js renamed to _protographql_tests_/buildGQLSchema.test.js

@@ -1,4 +1,4 @@
-import buildGQLSchema from './buildGQLSchema';
+import buildGQLSchema from '../src/utils/buildGQLSchema';
 import { build } from 'protobufjs';
 
 const testInput = {

public/assets/pictures/v2-add-tables.gif

@@ -93,10 +93,11 @@ function DraggableDialog(props) {
         <Title style={{ cursor: "move" }} id="draggable-dialog-title">Instructions</Title>
 
         <ContentDiv style={{ marginTop: "15px", marginBottom: "25px", textAlign: "left" }}>
-          <DialogContentText>1) Add the endpoint of your running GraphQL server in the "GraphQL Endpoint URL" box. (For example: "http://localhost:3000") Click the "Add URL" button</DialogContentText>
-          <DialogContentText>2) Type your test query in the box on the left.</DialogContentText>
-          <DialogContentText>3) Click the "Add Query" button <br />(Repeat steps 2 and 3 to add additional query response pairs)</DialogContentText>
-          <DialogContentText>4) To export your test file click the "Export Tests" button.</DialogContentText>
+          <DialogContentText>1) Add the endpoint of your running GraphQL server in the "GraphQL Endpoint URL" box. Click the "Add URL" button</DialogContentText>
+          <DialogContentText>2) If no valid endpoint is entered, the default endpoint will be set to http://localhost:3000/GraphQL  </DialogContentText>
+          <DialogContentText>3) Type your test query in the box on the left.</DialogContentText>
+          <DialogContentText>4) Click the "Add Query" button <br />(Repeat steps 2 and 3 to add additional query response pairs)</DialogContentText>
+          <DialogContentText>5) To export your test file click the "Export Tests" button.</DialogContentText>
         </ContentDiv>
         <DialogActionsDiv>
           <GotItButton onClick={handleClose} color="primary">Got it!</GotItButton>

public/assets/pictures/v2-codeview.png

@@ -171,11 +171,13 @@ function updateURL() {
   if (url.match(/http:\/\/.+/) || url.match(/https:\/\/.+/)) {
     dispatch({ type: ADD_APOLLO_SERVER_URI, payload: url });
     console.log('test updateURL', apolloServerURI);
+    document.querySelector('#endpointStatus').innerHTML = `Current endpoint: ${document.getElementById('url').value}`;
+    document.querySelector('#endpointStatus').classList.remove('invisible');
     document.getElementById('url').value = '';
-    document.querySelector('#endpointError').classList.add('invisible');
   } else {
-    document.querySelector('#endpointError').classList.remove('invisible');
-  }
+    document.querySelector('#endpointStatus').innerHTML = "Endpoint must include http:// or https://";
+    document.querySelector('#endpointStatus').classList.remove('invisible');
+  }    
 }
 
 useEffect(() => {
@@ -185,6 +187,7 @@ useEffect(() => {
   }
   document.getElementById("queriesDisplay").innerHTML = display;
 });
+
 
 /*-------------------- Functional Component Rendering --------------------*/
 //FOR FUTURE IMPLEMENTATION: Check the user input and maybe ping the endpoint to check that it is live. 
@@ -200,7 +203,7 @@ return(
             </div>
             <div style={{ flexBasis: "80%", lineHeight: ".01em" }}>
               <Input type='text' id='url' placeholder='Enter Your Custom GraphQL Endpoint URL here'></Input><Button style={{ width: "20%" }} onClick={updateURL}>Add URL</Button>
-              <p className="invisible" id="endpointError">That is not a valid endpoint.  If no valid endpoint is entered, the endpoint will remain unchanged. The initial value is set to http://localhost:3000/GraphQL</p>
+              <p className="invisible" id="endpointStatus">Current endpoint: </p>
             </div>
           </div>
         </Column>

public/assets/pictures/v2-export.png

@@ -11,7 +11,7 @@ const buildGQLInputTypes = tables => {
     // Iterate through each table field and define its respective GQL property 
     for (let fieldIndex in table.fields) {
       const field = table.fields[fieldIndex];
-      gqlTypes += addScalarField(field);
+      gqlTypes += field.relationSelected ? addObjectInput(tables, field) : addScalarField(field);
       gqlTypes += `,\n`;
     }
     gqlTypes += `${tabs(1)}}\n\n`; // Close GQL type definition
@@ -22,6 +22,17 @@ const buildGQLInputTypes = tables => {
 
 /**********************************    HELPER FUNCTIONS    **********************************/
 
+// Returns a string of a GQL object field 
+const addObjectInput = (tables, field) => {
+  const { tableIndex, refType } = field.relation;
+  const linkedTableName = tables[tableIndex].type;
+  // Wrap linked field in curly braces if we have an 'xxx to many' relationship
+  let objectField = refType.slice(-4) === `many` ? 
+    `${tabs(2)}${linkedTableName.toLowerCase()}: [${linkedTableName}Input]` : 
+    `${tabs(2)}${linkedTableName.toLowerCase()}: ${linkedTableName}Input`;
+  return objectField;
+}
+
 // Returns a string of a GQL scalar field 
 const addScalarField = field => {
   let scalarField = `${tabs(2)}${field.name}: ${field.type}`;

public/assets/pictures/v2-import-tables.gif

@@ -94,7 +94,6 @@ const buildGQLResolvers = tables => {
     gqlResolvers += `${tabs(3)}let valuesStr = \` VALUES (\`;\n`;
     gqlResolvers += `${tabs(3)}let values = [];\n`;
     gqlResolvers += `${tabs(3)}let columnsStr = \`(\`\n`;
-    gqlResolvers += `${tabs(3)}const returning = \` RETURNING *\`\n`;
     gqlResolvers += `${tabs(3)}Object.keys(args.input).forEach((fieldName, i, arr) => {\n`;
     gqlResolvers += `${tabs(4)}if(i == arr.length - 1){\n`;
     gqlResolvers += `${tabs(5)}columnsStr += \`\${fieldName})\`\n`;