13 | 
![]()
14 |
15 |
16 |
26 |
12 |
27 |
28 |
29 |
--------------------------------------------------------------------------------
/src/actions/actionTypes.jsx:
--------------------------------------------------------------------------------
1 | /*
2 | This file declares the action types to be used by store.
3 | */
4 |
5 | export const ADD_TABLE = "ADD_TABLE";
6 | export const EDIT_TABLE = "EDIT_TABLE";
7 | export const SAVE_TABLE = "SAVE_TABLE";
8 | export const EDIT_TABLE_NAME = "EDIT_TABLE_NAME";
9 | export const DELETE_TABLE = "DELETE_TABLE";
10 | export const IMPORT_TABLES = "IMPORT_TABLES";
11 |
12 | export const EDIT_FIELD = "EDIT_FIELD";
13 | export const ADD_FIELD = "ADD_FIELD";
14 | export const DELETE_FIELD = "DELETE_FIELD";
15 | export const EDIT_RELATIONS = "EDIT_RELATIONS";
16 |
17 | export const SET_POP_UP = "SET_POP_UP";
18 | export const SET_VIEW = "SET_VIEW";
19 |
20 | export const HIDE_DISPLAY_ERROR = "HIDE_DISPLAY_ERROR";
21 | export const THROTTLE_DISPLAY_ERROR = "THROTTLE_DISPLAY_ERROR";
22 |
23 | export const UPDATE_QUERIES = "UPDATE_QUERIES";
24 |
25 | export const ADD_APOLLO_SERVER_URI = "ADD_APOLLO_SERVER_URI";
26 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
20 | {view === 'code' &&
26 | )
27 | }
28 |
29 | export default MainView;
30 |
--------------------------------------------------------------------------------
/src/container/mainContainer.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Header from '../components/header/header';
3 | import NavSideBar from '../components/sideBar/navSidebar';
4 | import Welcome from '../components/popup/welcome';
5 | import Instructions from '../components/popup/instructions';
6 | import MainView from '../components/view/mainView';
7 | import ExportPopUp from '../components/popup/exportPopUp';
8 | import styled from 'styled-components';
9 |
10 | /*-------------------- Styled Component --------------------*/
11 |
12 | /*
13 | styles the display area that appears after you exit the ReadME dialog-box that appears when you load the
14 | application
15 | */
16 | const Container = styled.div`
17 | display: grid;
18 | grid-template-columns: repeat(7, 1fr);
19 | grid-template-rows: 65px auto;
20 | grid-template-areas:
21 | "header header header header header header header"
22 | "navSideBar main main main main main main";
23 | height: 100vh;
24 | background-color: #EEEFF0;
25 | font-family: "Roboto", sans-serif;
26 | `;
27 |
28 | /*-------------------- Functional Component --------------------*/
29 |
30 | const Main = () => {
31 |
32 | return (
33 |
61 | Please remove relationship from
62 | '{displayError.relatedField}' field in '{displayError.relatedTable}' table first. 63 |
}
64 | 62 | '{displayError.relatedField}' field in '{displayError.relatedTable}' table first. 63 |
67 |
68 | GraphQL Schema
69 | {gqlSchema}
70 |
71 |
72 | SQL Scripts
73 | {sqlScripts}
74 |
75 |
76 | GraphQL Resolvers
77 | {gqlResolvers}
78 |
79 |
80 | );
81 | }
82 |
83 | export default CodeView;
84 |
--------------------------------------------------------------------------------
/src/components/popup/instructions.jsx:
--------------------------------------------------------------------------------
1 | //These are the instructions
2 |
3 | /* eslint-disable no-unused-vars */
4 | import React, { useContext } from "react";
5 | import {
6 | Button,
7 | Dialog,
8 | DialogActions,
9 | DialogContent,
10 | DialogContentText,
11 | DialogTitle,
12 | Paper
13 | } from "@material-ui/core";
14 | import Draggable from "react-draggable";
15 | import { styled } from "@material-ui/styles";
16 | import { Store } from '../../state/store';
17 | import { SET_POP_UP } from '../../actions/actionTypes';
18 |
19 | /*-------------------- Styled components --------------------*/
20 |
21 | // styles the header of this dialog-box
22 | const Title = styled(DialogTitle)({
23 | width: "500px",
24 | textAlign: "center",
25 | padding: '25px',
26 | color: 'white',
27 | background: '#161e26',
28 | });
29 |
30 |
31 | // styles "ContentDiv"
32 | const ContentDiv = styled(DialogContent)({
33 | textAlign: 'left',
34 | width: '500px',
35 | color: '#161e26',
36 | });
37 |
38 | // styles the "GotItButton"
39 | const GotItButton = styled(Button)({
40 | width: '100px',
41 | border: '1px solid #161e26',
42 | // color: '#161e26',
43 | padding: '10px',
44 | marginTop: '0px',
45 | marginBottom: '10px',
46 | color: "rgba(221, 57, 156, 1)",
47 | fontFamily: "Roboto, sans-serif",
48 | });
49 |
50 | /*
51 | styles the space around the GotItButton button
52 | */
53 | const DialogActionsDiv = styled(DialogActions)({
54 | justifyContent: 'center',
55 | margin: 0
56 | });
57 |
58 | /*-------------------- Functional Component --------------------*/
59 |
60 | function PaperComponent(props) {
61 | return (
62 |
92 |
106 |
107 | );
108 | }
109 |
110 | export default DraggableDialog;
111 |
--------------------------------------------------------------------------------
/src/utils/buildVisualizerJson.js:
--------------------------------------------------------------------------------
1 |
2 | /********************************** HELPER FUNCTIONS **********************************/
3 |
4 |
5 | // Checks all fields of a table and returns an array of queryable fields
6 | export const queryableFieldsArrayCreator = fields => {
7 | const queryFieldsArray = [];
8 | for(let x in fields) {
9 | if (fields[x].queryable) {
10 | queryFieldsArray.push(fields[x])
11 | }
12 | }
13 | return queryFieldsArray
14 | }
15 |
16 | //Check all fields of a table and return objects with the fields name and type
17 | export const fieldNameType = fields => {
18 | let fieldJson =``
19 | for(let i = 0; i < fields.length; i++) {
20 | fieldJson += `{"name":"${fields[i].name}", "type":"${fields[i].type}"}`
21 | if (i !== fields.length - 1) {
22 | fieldJson += `,`
23 | }
24 | }
25 | return fieldJson;
26 |
27 | }
28 |
29 | export const queryableTableMaker = tables => {
30 | if (Object.keys(tables).length === 0) {
31 | console.log("tables is empty")
32 | return []
33 | }
34 | console.log('queryableTableMaker tables:', tables)
35 | const tableArray = Object.values(tables)
36 | const queryableTables = []
37 | tableArray.forEach( el => {
38 | //get list of fields that are queryable for current table ("el")
39 | const queryableFields = queryableFieldsArrayCreator(el.fields)
40 |
41 | /*if there is at least one queryable field in the table, update the tables fields to only the queryable fields and push to queryableTableArray */
42 | if (queryableFields.length !== 0) {
43 | el.fields = queryableFields
44 | queryableTables.push(el)
45 | }
46 | })
47 | return queryableTables
48 | }
49 |
50 | export function queryTypeCreator (tables) {
51 | const queryableTables = queryableTableMaker(tables)
52 | console.log("queryTypeCreator Tables:", tables)
53 | const typeArray = [];
54 | for (let i in queryableTables) {
55 | const curr = queryableTables[i]
56 | const fields = curr.fields
57 | const type = {}
58 | type.name = curr.type
59 | type.fields = {}
60 | for (let j in fields) {
61 | if (fields[j].relationSelected) {
62 | type.fields[tables[fields[j].relation.tableIndex].type] = `[${tables[fields[j].relation.tableIndex].type}]`
63 | }
64 | type.fields
65 | if (!fields[j].relationSelected) {
66 | type.fields[fields[j].name] = fields[j].type
67 | }
68 | }
69 | typeArray.push(type)
70 | }
71 | return typeArray
72 | }
73 |
74 | /********************************** BUILD JSON FOR VISUALIZER **********************************/
75 |
76 | export const buildVisualizerJson = tables => {
77 | let root = `{"name":"Queries"`
78 | console.log('buildvisualizerjson tables: ', tables)
79 |
80 | //if we have no tables return only root
81 | if (Object.keys(tables).length === 0) return JSON.parse(root +='}')
82 |
83 | const queryableTableArray = queryableTableMaker(tables)
84 |
85 | //If there are no queryable fields return root
86 | if (queryableTableArray.length === 0) return JSON.parse(root +='}')
87 |
88 | //Building children of root query
89 | root += `, "children":[`
90 | for (let i = 0; i < queryableTableArray.length; i++) {
91 | //get All query
92 | root += `{"name":"getAll${queryableTableArray[i].type}","type":"[${queryableTableArray[i].type}]","children":[{"name":"${queryableTableArray[i].type}","type":"[${queryableTableArray[i].type}]"}]},`
93 |
94 | //get query
95 | root += `{"name": "get${queryableTableArray[i].type}","type":"[${queryableTableArray[i].type}]","children":[{"name": "${queryableTableArray[i].type}","type": "[${queryableTableArray[i].type}]","children": [${fieldNameType(queryableTableArray[i].fields)}]}]}`
96 |
97 | if (i !== queryableTableArray.length - 1) root += `,`
98 | }
99 | root += `]}`
100 | return JSON.parse(root)
101 | }
--------------------------------------------------------------------------------
/_protographql_tests_/buildGQLInputTypes.test.js:
--------------------------------------------------------------------------------
1 | import buildGQLInputTypes from '../src/utils/buildGQLInputTypes';
2 | import { build } from 'protobufjs';
3 |
4 | const testInput = {
5 | 0: {
6 | type: 'FirstTable',
7 | fields: {
8 | 0: {
9 | name: 'FirstColumn',
10 | type: 'ID',
11 | primaryKey: true,
12 | unique: true,
13 | required: false,
14 | defaultValue: '1',
15 | relationSelected: false,
16 | relation: {
17 | tableIndex: -1,
18 | fieldIndex: -1,
19 | refType: ''
20 | },
21 | tableNum: 0,
22 | fieldNum: 0,
23 | queryable: false
24 | },
25 | 1: {
26 | name: 'SecondColumn',
27 | type: 'String',
28 | primaryKey: false,
29 | unique: false,
30 | required: true,
31 | defaultValue: 'thisIsADefaultValue',
32 | relationSelected: false,
33 | relation: {
34 | tableIndex: -1,
35 | fieldIndex: -1,
36 | refType: ''
37 | },
38 | tableNum: 0,
39 | fieldNum: 1,
40 | queryable: true
41 | },
42 | 2: {
43 | name: 'ThirdColumn',
44 | type: 'String',
45 | primaryKey: false,
46 | unique: false,
47 | required: true,
48 | defaultValue: '',
49 | relationSelected: false,
50 | relation: {
51 | tableIndex: -1,
52 | fieldIndex: -1,
53 | refType: ''
54 | },
55 | tableNum: 0,
56 | fieldNum: 2,
57 | queryable: false
58 | }
59 | },
60 | fieldIndex: 3,
61 | tableID: 0
62 | },
63 | 1: {
64 | type: 'SecondTable',
65 | fields: {
66 | 0: {
67 | name: 'SecondTableFirstColumn',
68 | type: 'ID',
69 | primaryKey: true,
70 | unique: true,
71 | required: false,
72 | defaultValue: '',
73 | relationSelected: false,
74 | relation: {
75 | tableIndex: -1,
76 | fieldIndex: -1,
77 | refType: ''
78 | },
79 | tableNum: 1,
80 | fieldNum: 0,
81 | queryable: true
82 | },
83 | 1: {
84 | name: 'SecondSecondColumn',
85 | type: 'String',
86 | primaryKey: false,
87 | unique: false,
88 | required: true,
89 | defaultValue: 'anotherDefaultValue',
90 | relationSelected: false,
91 | relation: {
92 | tableIndex: -1,
93 | fieldIndex: -1,
94 | refType: ''
95 | },
96 | tableNum: 1,
97 | fieldNum: 1,
98 | queryable: true
99 | },
100 | 2: {
101 | name: 'SecondThirdColumn',
102 | type: 'ID',
103 | primaryKey: false,
104 | unique: false,
105 | required: true,
106 | defaultValue: '',
107 | relationSelected: true,
108 | relation: {
109 | tableIndex: '0',
110 | fieldIndex: '0',
111 | refType: 'many to one'
112 | },
113 | tableNum: 1,
114 | fieldNum: 2,
115 | queryable: true
116 | }
117 | },
118 | fieldIndex: 3,
119 | tableID: 1
120 | },
121 | };
122 |
123 | const testOutput = ` input FirstTableInput {
124 | FirstColumn: ID,
125 | SecondColumn: String!,
126 | ThirdColumn: String!,
127 | }
128 |
129 | input SecondTableInput {
130 | SecondTableFirstColumn: ID,
131 | SecondSecondColumn: String!,
132 | firsttable: FirstTableInput,
133 | }
134 |
135 | `
136 |
137 | test('Building GQL Input Types does not return null: ', () => {
138 | expect(buildGQLInputTypes(testInput)).not.toBeNull;
139 | });
140 |
141 | test('When trying to create the GQL Input Types the result is a string: ', () => {
142 | expect(typeof(buildGQLInputTypes(testInput))).toBe('string');
143 | });
144 |
145 | test('Building GQL Input Types works given test input: ', () => {
146 | expect(buildGQLInputTypes(testInput)).toBe(testOutput);
147 | });
--------------------------------------------------------------------------------
/src/components/header/header.jsx:
--------------------------------------------------------------------------------
1 | /*
2 | This file defines the header of the application
3 | */
4 |
5 | import React, { useContext } from 'react';
6 | import { Store } from '../../state/store';
7 | import { SET_POP_UP } from '../../actions/actionTypes';
8 | import { makeStyles } from '@material-ui/core/styles';
9 | import {
10 | AppBar,
11 | Toolbar,
12 | Typography,
13 | Button,
14 | IconButton
15 | } from '@material-ui/core';
16 | import { isWhiteSpaceLike } from 'typescript';
17 |
18 |
19 |
20 | /*-------------------- Styled components --------------------*/
21 |
22 | const useStyles = makeStyles(theme => ({
23 | root: {
24 | flexGrow: 3,
25 | gridArea: "header",
26 | },
27 | // styles the complete title of the application, ProtoGraphQL
28 | menuButton: {
29 | marginRight: theme.spacing(2)
30 | },
31 | // styles the Proto part of the title of the application, ProtoGraphQL
32 | title: {
33 | flexGrow: 2
34 | },
35 | header: {
36 | backgroundColor: "#324353",
37 | },
38 | // style the GraphQL part of the title of the application, ProtoGraphQL
39 | pink: {
40 | color: "#DD399C",
41 | },
42 | // style the Import and Export buttons in the header
43 | button: {
44 | color: 'white',
45 | backgroundColor: '#324353',
46 | border: '1px solid white',
47 | marginRight: '10px',
48 | minWidth: '50px',
49 | "&:hover": {
50 | backgroundColor: '#EEEFF0',
51 | transform: 'scale(1.01)',
52 | color: '#324353',
53 | border: '1px solid #324353',
54 | }
55 | },
56 | // style the GitHub button in the header
57 | anchor: {
58 | color: 'white',
59 | "&:hover": {
60 | color: '#324353',
61 | }
62 | },
63 | // style the text associated with each button on the right side of the header
64 | label: {
65 | display: 'inline-block',
66 | fontSize: '10px',
67 | paddingLeft: '5px',
68 | }
69 | }));
70 |
71 | /*-------------------- Functional Component --------------------*/
72 |
73 | function Header() {
74 | // sets the classes to be used in the header, as defined on line 22
75 | const classes = useStyles();
76 | /*
77 | -> connects the application to the context (utilized by Hooks in React) and facilitates the ability to
78 | update the context of the application
79 | -> the context is initialized by useContext() and specified by Store which is found
80 | in /components/state/store.jsx
81 | */
82 | const { state: { popUp }, dispatch } = useContext(Store);
83 |
84 | return (
85 |
86 |
87 |
88 |
89 | 
90 |
91 |
92 | Proto
93 | GraphQL
94 |
95 |
99 |
103 |
109 |
110 |
111 |
112 | );
113 | }
114 |
115 | export default Header;
116 |
--------------------------------------------------------------------------------
/src/components/view/schemaTable.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { withStyles, makeStyles } from '@material-ui/core/styles';
3 | import {
4 | Table,
5 | Typography,
6 | TableBody,
7 | TableCell,
8 | TableHead,
9 | TableRow,
10 | Paper
11 | } from '@material-ui/core/';
12 | import styled from 'styled-components';
13 |
14 | /*-------------------- Styled Components --------------------*/
15 |
16 | // styles the 'Name' section of each cell that appears after clicking the 'Schema' button
17 | const StyledTableCell = withStyles(theme => ({
18 | head: {
19 | backgroundColor: '#324353',
20 | color: theme.palette.common.white,
21 | fontSize: 16,
22 | size: 'small',
23 | color: 'white'
24 | },
25 | body: {
26 | color: '#222',
27 | fontSize: 15,
28 | },
29 | }))(TableCell);
30 |
31 | // styles each field of each cell that appears after clicking the 'Schema' button
32 | const StyledTableRow = withStyles(theme => ({
33 | root: {
34 | '&:nth-of-type(odd)': {
35 | backgroundColor: theme.palette.background.default,
36 | },
37 | },
38 | }))(TableRow);
39 |
40 |
41 | const useStyles = makeStyles(theme => ({
42 | // styles each cell that appears after clicking the 'Schema' button
43 | root: {
44 | width: 250,
45 | height: '100%',
46 | },
47 | // styles each cell that appears after clicking the 'Schema' button
48 | table: {
49 | minWidth: 200
50 | },
51 | // styles the title of each cell that appears after clicking the 'Schema' button
52 | title: {
53 | variant: "h6",
54 | id: "tableTitle",
55 | minWidth: 200,
56 | paddingTop: '3px',
57 | paddingLeft: '16px',
58 | paddingRight: '7px',
59 | paddingBottom: '2px',
60 | color: '#dd399c',
61 | fontWeight: 400,
62 | letterSpacing: '0.1em',
63 | }
64 | }));
65 |
66 | // styles the icons of the title section of each cell that appears after clicking the 'Schema' button
67 | const Buttons = styled.span`
68 | color: black;
69 | margin-left: 5px;
70 | cursor: pointer;
71 | &:hover{
72 | color: #DD399C;
73 | }
74 | `;
75 |
76 | /*-------------------- Functional Component --------------------*/
77 |
78 | function SchemaTable({
79 | table,
80 | setPopUp,
81 | tableKey,
82 | deleteTable,
83 | editTable
84 | }) {
85 | // sets the classes to be used in each cell, as defined on line 41
86 | const classes = useStyles();
87 | const fields = (
88 | Object.keys(table.fields).map(fieldKey => (
89 | {
90 | // populates, for each cell, the table name, field name, field type, etc.
91 | name: table.fields[fieldKey].name,
92 | type: table.fields[fieldKey].type,
93 | tableNum: table.fields[fieldKey].tableNum,
94 | fieldNum: table.fields[fieldKey].fieldNum
95 | }
96 | ))
97 | )
98 |
99 | return (
100 |
90 |
85 |
109 |
110 | );
111 | }
112 |
113 | export default ExportPopUp;
114 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "protographql",
3 | "version": "1.0.0",
4 | "description": "ProtGraphQl is prototyping tool to easily build and visualize GraphQl schemas and queries",
5 | "main": "main.js",
6 | "scripts": {
7 | "start": "electron .",
8 | "build": "webpack -p",
9 | "dev": "webpack-dev-server --mode=development",
10 | "dist": "build",
11 | "package-all": "build && electron-builder build -mwl",
12 | "test": "jest"
13 | },
14 | "build": {
15 | "productName": "ProtoGraphQL",
16 | "appId": "org.oslabs.Protographql.todo",
17 | "asar": false,
18 | "files": [
19 | "public/",
20 | "index.html",
21 | "main.js",
22 | "apollo-server/",
23 | "package.json"
24 | ],
25 | "dmg": {
26 | "contents": [
27 | {
28 | "x": 130,
29 | "y": 220
30 | },
31 | {
32 | "x": 410,
33 | "y": 220,
34 | "type": "link",
35 | "path": "/Applications"
36 | }
37 | ]
38 | },
39 | "win": {
40 | "target": [
41 | "nsis",
42 | "msi"
43 | ]
44 | },
45 | "linux": {
46 | "target": [
47 | "deb",
48 | "rpm",
49 | "snap",
50 | "AppImage"
51 | ],
52 | "category": "Development"
53 | },
54 | "directories": {
55 | "buildResources": "public/assets/pictures/icon",
56 | "output": "release"
57 | },
58 | "publish": {
59 | "provider": "github",
60 | "owner": "oslabs-beta",
61 | "repo": "protographql",
62 | "private": false
63 | }
64 | },
65 | "repository": {
66 | "type": "git",
67 | "url": "git+https://github.com/protographql/protographql.git"
68 | },
69 | "author": {
70 | "name": "ProtoGraphQL",
71 | "email": "protographql-labs@todo.com",
72 | "url": "https://protographql.todo.org"
73 | },
74 | "contributors": [
75 | {
76 | "name": "Alena Budzko",
77 | "email": "#TODO",
78 | "url": "#TODO"
79 | },
80 | {
81 | "name": "Bryan Fong",
82 | "email": "",
83 | "url": ""
84 | },
85 | {
86 | "name": "Rodolfo Guzman",
87 | "email": "",
88 | "url": ""
89 | },
90 | {
91 | "name": "Jarred Jack-Harewood",
92 | "email": "",
93 | "url": ""
94 | },
95 | {
96 | "name": "Geoffrey Lin",
97 | "email": "",
98 | "url": ""
99 | }
100 | ],
101 | "license": "ISC",
102 | "bugs": {
103 | "url": "https://github.com/protographql/protographql/issues"
104 | },
105 | "homepage": "https://github.com/protographql/protographql#readme",
106 | "devDependencies": {
107 | "@babel/core": "^7.4.5",
108 | "@babel/preset-env": "^7.6.0",
109 | "@babel/preset-react": "^7.0.0",
110 | "@material-ui/core": "^4.0.2",
111 | "awesome-typescript-loader": "^5.2.1",
112 | "babel-loader": "^8.0.6",
113 | "css-loader": "^2.1.1",
114 | "d3": "^5.9.2",
115 | "electron": "^5.0.10",
116 | "enzyme": "^3.9.0",
117 | "eslint": "^5.16.0",
118 | "eslint-plugin-react": "^7.13.0",
119 | "express": "^4.17.1",
120 | "jest": "^24.8.0",
121 | "nodemon": "^1.19.1",
122 | "source-map-loader": "^0.2.4",
123 | "styled-components": "^4.3.1",
124 | "ts-loader": "^6.0.2",
125 | "typescript": "^3.5.1",
126 | "webpack": "^4.39.2",
127 | "webpack-cli": "^3.3.2",
128 | "webpack-dev-server": "^3.5.1"
129 | },
130 | "dependencies": {
131 | "@apollo/react-hooks": "^3.0.1",
132 | "@babel/plugin-transform-runtime": "^7.6.0",
133 | "@babel/cli": "^7.6.0",
134 | "@babel/plugin-proposal-class-properties": "^7.5.5",
135 | "@babel/plugin-proposal-export-default-from": "^7.5.2",
136 | "@babel/polyfill": "^7.6.0",
137 | "@material-ui/icons": "^4.0.1",
138 | "@types/react": "^16.8.19",
139 | "@types/react-dom": "^16.8.4",
140 | "apollo-boost": "^0.4.4",
141 | "apollo-cache-inmemory": "^1.6.3",
142 | "apollo-link": "^1.2.12",
143 | "apollo-link-error": "^1.1.11",
144 | "apollo-server-express": "^2.9.0",
145 | "archiver": "^3.0.0",
146 | "babel-jest": "^24.9.0",
147 | "dotenv": "^8.1.0",
148 | "graphiql": "^0.14.2",
149 | "graphql": "^14.5.3",
150 | "graphql-tag": "^2.10.1",
151 | "graphql-transport-electron": "^1.0.1",
152 | "isomorphic-fetch": "^2.2.1",
153 | "path": "^0.12.7",
154 | "pg": "^7.12.1",
155 | "react": "^16.9.0",
156 | "react-dom": "^16.9.0",
157 | "react-draggable": "^3.3.0"
158 | }
159 | }
160 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | 
26 | 27 | 2. Navigate to the alternate views within the app using the tabs on the left: **Schema**, **Code**, **Visualize**, and **Tests** 28 | 29 | * **Schema** - view, edut or delete tables you've added. 30 | 31 |
75 |
76 | - Alena Budzko | [@AlenaBudzko](https://github.com/AlenaBudzko)
77 | - Bryan Fong | [@bryanfong-dev](https://github.com/bryanfong-dev)
78 | - Rodolfo Guzman | [@Rodolfoguzman25](https://github.com/Rodolfoguzman25)
79 | - Haris Hambasic | [@hambasicharis1995](https://github.com/hambasicharis1995)
80 | - Jarred Jack Harewood | [@jackhajb](https://github.com/jackhajb)
81 | - Geoffrey Lin | [@geofflin](https://github.com/geofflin)
82 | - Michele Moody | [@Milmoody](https://github.com/Milmoody)
83 | - Jessica Vaughan | [@jessicavaughan820](https://github.com/jessicavaughan820)
84 | - Vance Wallace | [@Vancito](https://github.com/Vancito)
85 |
--------------------------------------------------------------------------------
/public/styles.css:
--------------------------------------------------------------------------------
1 | /* CSS RESET */
2 | html, body, div, span, applet, object, iframe,
3 | h1, h2, h3, h4, h5, h6, p, blockquote, pre,
4 | a, abbr, acronym, address, big, cite, code,
5 | del, dfn, em, img, ins, kbd, q, s, samp,
6 | small, strike, strong, sub, sup, tt, var,
7 | b, u, i, center,
8 | dl, dt, dd, ol, ul, li,
9 | fieldset, form, label, legend,
10 | article, aside, canvas, details, embed,
11 | figure, figcaption, footer, header, hgroup,
12 | menu, nav, output, ruby, section, summary,
13 | time, mark, audio, video {
14 | margin: 0;
15 | padding: 0;
16 | border: 0;
17 | font-size: 100%;
18 | font: inherit;
19 | vertical-align: baseline;
20 | }
21 | /* HTML5 display-role reset for older browsers */
22 | article, aside, details, figcaption, figure,
23 | footer, header, hgroup, menu, nav, section {
24 | display: block;
25 | }
26 | body {
27 | /* defines the amount of space above and below inline elements */
28 | line-height: 1;
29 | }
30 | ol, ul {
31 | /* specifies the type of list-item marker in a list */
32 | list-style: none;
33 | }
34 | blockquote, q {
35 | /* sets the type of quotation marks for quotations */
36 | quotes: none;
37 | }
38 | blockquote:before, blockquote:after,
39 | q:before, q:after { /* content may be only used in association with :before and :after */
40 | /* insert generated content */
41 | content: '';
42 | /* insert generated content */
43 | content: none;
44 | }
45 | table {
46 | /* sets whether cells inside a table have shared or separate borders */
47 | border-collapse: collapse;
48 | /* sets the distance between the borders of adjacent
140 |
173 |
174 | );
175 | }
176 | export default DraggableDialog;
--------------------------------------------------------------------------------
/src/state/store.jsx:
--------------------------------------------------------------------------------
1 | /* eslint-disable no-case-declarations */
2 | import React from 'react';
3 | import * as state from '../state/initialState';
4 | import deepClone from '../utils/deepClone';
5 | import buildGQLSchema from '../utils/buildGQLSchema';
6 | import buildGQLResolvers from '../utils/buildGQLResolvers';
7 | import buildSQLScripts from '../utils/buildSQLScripts';
8 | import { buildVisualizerJson } from '../utils/buildVisualizerJson';
9 |
10 | // sets the intial state of the application as found in '../state/initialState'
11 | const initialState = state;
12 |
13 | function reducer(state, action) {
14 |
15 | // makes a deep clone of 'state' to enable updates of 'state'
16 | const newState = deepClone(state);
17 | let selectedTable;
18 | let tables;
19 |
20 | switch (action.type) {
21 | case "SET_POP_UP":
22 | return { ...state, popUp: action.payload };
23 |
24 | case "ADD_TABLE":
25 | selectedTable = newState.initialTable;
26 | selectedTable.tableID = newState.tableIndex;
27 | selectedTable.fields[1].tableNum = newState.tableIndex;
28 | return { ...state, selectedTable, tableIndex: newState.tableIndex + 1 };
29 |
30 | case "ADD_FIELD":
31 | // Assign which table and field this newly added field belongs to
32 | newState.initialField.tableNum = newState.selectedTable.tableID;
33 | newState.initialField.fieldNum = newState.selectedTable.fieldIndex;
34 |
35 | // Add the new field to our selectedTable and increment the field index on our selectedTable
36 | newState.selectedTable.fields[newState.selectedTable.fieldIndex++] = newState.initialField;
37 | return { ...state, selectedTable: newState.selectedTable };
38 |
39 | case "EDIT_TABLE":
40 | newState.selectedTable = newState.tables[action.payload];
41 | return { ...state, selectedTable: newState.selectedTable };
42 |
43 | case "EDIT_FIELD":
44 | const { fieldKey, fieldProperty, value } = action.payload;
45 | newState.selectedTable.fields[fieldKey][fieldProperty] = value;
46 | return { ...state, selectedTable: newState.selectedTable };
47 |
48 | case "EDIT_RELATIONS":
49 | const { relationFieldKey, relationFieldProperty, relationValue } = action.payload;
50 | const currentRelation = newState.selectedTable.fields[relationFieldKey].relation;
51 | currentRelation[relationFieldProperty] = relationValue;
52 | if (currentRelation.tableIndex !== -1) newState.selectedTable.fields[relationFieldKey].relationSelected = true;
53 | else newState.selectedTable.fields[relationFieldKey].relationSelected = false;
54 | return { ...state, selectedTable: newState.selectedTable };
55 |
56 | case "EDIT_TABLE_NAME":
57 | newState.selectedTable.type = action.payload;
58 | return { ...state, selectedTable: newState.selectedTable };
59 |
60 | // This case will increment tableIndex regardless whether we're adding a new table or editing an existing one
61 | case "SAVE_TABLE":
62 | newState.tables[newState.selectedTable.tableID] = newState.selectedTable;
63 |
64 | return {
65 | ...state,
66 | tables: newState.tables,
67 | tableIndex: newState.tableIndex + 1,
68 | visualizeJSON: buildVisualizerJson(deepClone(newState.tables)),
69 | gqlSchema: buildGQLSchema(newState.tables),
70 | gqlResolvers: buildGQLResolvers(newState.tables),
71 | sqlScripts: buildSQLScripts(newState.tables)
72 | };
73 |
74 | //Import tables from existing postgres database
75 | case "IMPORT_TABLES":
76 | newState.tables = action.payload;
77 | const indeces = Object.keys(newState.tables);
78 | console.log("indeces",indeces)
79 | const newTableIndex = indeces[indeces.length - 1]
80 |
81 | return {
82 | ...state,
83 | tables: newState.tables,
84 | tableIndex: newTableIndex + 1,
85 | visualizeJSON: buildVisualizerJson(deepClone(newState.tables)),
86 | gqlSchema: buildGQLSchema(newState.tables),
87 | gqlResolvers: buildGQLResolvers(newState.tables),
88 | sqlScripts: buildSQLScripts(newState.tables)
89 | };
90 |
91 | case "DELETE_TABLE":
92 | tables = Object.values(newState.tables);
93 | for (let table of tables) {
94 | const fields = Object.values(table.fields);
95 | for (let field of fields) {
96 | if (Number(field.relation.tableIndex) === Number(action.payload)) {
97 | newState.displayError.displayStatus = true;
98 | newState.displayError.relatedTable = table.type;
99 | newState.displayError.relatedField = field.name;
100 | return { ...state, displayError: newState.displayError };
101 | }
102 | }
103 | }
104 | delete newState.tables[action.payload];
105 | return {
106 | ...state,
107 | tables: newState.tables,
108 | visualizeJSON: buildVisualizerJson(deepClone(newState.tables)),
109 | gqlSchema: buildGQLSchema(newState.tables),
110 | gqlResolvers: buildGQLResolvers(newState.tables),
111 | sqlScripts: buildSQLScripts(newState.tables)
112 | };
113 |
114 | case "DELETE_FIELD":
115 | tables = Object.values(newState.tables);
116 | for (let table of tables) {
117 | const fields = Object.values(table.fields);
118 | for (let field of fields) {
119 | if (Number(field.relation.tableIndex) === Number(newState.selectedTable.tableID) && field.relation.fieldIndex === action.payload) {
120 | newState.displayError.displayStatus = true;
121 | newState.displayError.relatedTable = table.type;
122 | newState.displayError.relatedField = field.name;
123 | return { ...state, displayError: newState.displayError };
124 | }
125 | }
126 | }
127 |
128 | delete newState.selectedTable.fields[action.payload];
129 | return { ...state, selectedTable: newState.selectedTable };
130 |
131 | case "SET_VIEW":
132 | return { ...state, view: action.payload };
133 |
134 | case "HIDE_DISPLAY_ERROR":
135 | newState.displayError.displayStatus = false;
136 | return { ...state, displayError: newState.displayError };
137 |
138 | case "THROTTLE_DISPLAY_ERROR":
139 | newState.displayError.throttleStatus = !newState.displayError.throttleStatus;
140 | return { ...state, displayError: newState.displayError };
141 |
142 | //Updates the queries that are input by the user and the subsequent responses.
143 | case "UPDATE_QUERIES":
144 | console.log(action.payload[0][0]);
145 | return {
146 | ...state,
147 | queries: [state.queries[0].concat(action.payload[0][0]), state.queries[1].concat(action.payload[1][0])]
148 | }
149 | //Updates the endpoint as input by the user.
150 | case "ADD_APOLLO_SERVER_URI":
151 | return {
152 | ...state,
153 | apolloServerURI: action.payload,
154 | }
155 |
156 | default:
157 | return state;
158 | }
159 | }
160 |
161 | export const Store = React.createContext("");
162 |
163 | export function StoreProvider(props) {
164 | const [state, dispatch] = React.useReducer(reducer, initialState);
165 | const value = { state, dispatch };
166 | return ${queries[0][i]}
`; 187 | } 188 | document.getElementById("queriesDisplay").innerHTML = display; 189 | }); 190 | 191 | 192 | /*-------------------- Functional Component Rendering --------------------*/ 193 | //FOR FUTURE IMPLEMENTATION: Check the user input and maybe ping the endpoint to check that it is live. 194 | return( 195 |
196 |
227 | );
228 | }
229 | export default TestsView;
--------------------------------------------------------------------------------
/src/components/popup/tableInput.jsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect } from 'react';
2 | import styled from 'styled-components';
3 | import deepClone from '../../utils/deepClone';
4 |
5 | /*-------------------- Styled Components --------------------*/
6 |
7 | /*
8 | styles the line between the options buttons and the space around the 'Add Field' and 'Save' buttons
9 | associated with the 'Add Table' button
10 | */
11 | const Tr = styled.tr`
12 | border-top: 1px solid rgba(0, 0, 0, 0.2);
13 | vertical-align: middle;
14 | `;
15 |
16 | /*
17 | styles the buttons associated with the 'Type' and 'Table Relationship' options
18 | */
19 | const Selected = styled.select`
20 | display: inline-flex;
21 | padding: .6em 1.4em .5em .8em;
22 | width: 90%;
23 | max-width: 100%;
24 | box-sizing: border-box;
25 | margin: 0;
26 | border: 1px solid #aaa;
27 | box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
28 | border-radius: .5em;
29 | appearance: none;
30 | background-color: #fff;
31 | background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
32 | linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
33 | background-repeat: no-repeat, repeat;
34 | background-position: right .7em top 50%, 0 0;
35 | background-size: .65em auto, 100%;
36 | &:disabled {
37 | opacity: .70;
38 | -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
39 | filter: grayscale(100%);
40 | }
41 | `;
42 |
43 | // styles the trash icon of the dialog-box associated with the 'Add Table' button
44 | const Td = styled.td`
45 | font-size: .75em;
46 | text-align: center;
47 | margin: 0;
48 | padding-top: 5px;
49 | padding-bottom: 5px;
50 | &:hover{
51 | color: #DD399C;
52 | }
53 | `;
54 |
55 | /*
56 | styles the input fields associated with the 'Field Name' and 'Default Value' options of the dialog-box
57 | associated with the 'Add Table' button
58 | */
59 | const Input = styled.input`
60 | height: 2.5em;
61 | border-radius: 5px;
62 | margin: 0;
63 | width: 90%;
64 | margin: 5px;
65 | font-size: .75em;
66 | `;
67 |
68 | // styles the 'trash' icon of the dialog-box associated with the 'Add Table' button
69 | const TrashCan = styled.span`
70 | font-size: 18px;
71 | &:hover {
72 | color: #DD399C;
73 | cursor: pointer;
74 | }
75 | `;
76 |
77 | /*-------------------- Functional Component --------------------*/
78 |
79 | function TableInput({
80 | field,
81 | fieldIndex, // this represents the index of the field of the table
82 | editField, // this is used when there is a change / edit to a field of the table
83 | editRelations,
84 | deleteField,
85 | tables
86 | }) {
87 |
88 | // these constants represent each option in the dialog-box of the 'Add Table' button
89 | const {
90 | defaultValue, // 'Dafault Value'
91 | fieldNum, // ''
92 | name, // 'Field Name'
93 | primaryKey, // 'Primary Key'
94 | queryable, // 'Queryable'
95 | relation, // ''
96 | relationSelected, // ''
97 | required, // 'Required'
98 | tableNum, // ''
99 | type, // 'Type of Relationship'
100 | unique, // 'Unique'
101 | } = field;
102 |
103 | const { refType } = relation;
104 | let relationTableIdx = relation.tableIndex;
105 | let relationFieldIdx = relation.fieldIndex;
106 |
107 | function isChecked(id, field) {
108 | // represents the switch button to be affected
109 | const selectedSwitch = document.querySelector(id);
110 | // if 'field' exists, simulate a 'click' event on the switch button represented by 'selectedSwitch'
111 | if (field) selectedSwitch.click();
112 | }
113 |
114 | /*
115 | handles 'checking' the swtich buttons associated with 'Primary Key', 'Unique', 'Required', and
116 | 'Queryable'
117 | */
118 | useEffect(() => {
119 | // isChecked() is defined on line 106
120 | isChecked("#primaryKey" + fieldNum, primaryKey);
121 | isChecked("#unique" + fieldNum, unique);
122 | isChecked("#required" + fieldNum, required);
123 | isChecked("#queryable" + fieldNum, queryable);
124 | }, []);
125 |
126 | const relationalTableNames = [];
127 | const populateTableRelationOptions = () => {
128 | for (let key in tables) {
129 | relationalTableNames.push();
130 | }
131 | }
132 | populateTableRelationOptions();
133 |
134 | const relationalFieldsNames = [];
135 | const populateFieldRelationOptions = (relTblIdx) => {
136 | if (relTblIdx !== -1) {
137 | for (let field in tables[relTblIdx].fields) {
138 | relationalFieldsNames.push();
139 | }
140 | }
141 | }
142 | populateFieldRelationOptions(relationTableIdx);
143 |
144 | // these components represent buttons, input fields, etc. associated with each option
145 | return (
146 |
197 |
198 |
199 |
200 |
203 |
204 |
205 |
206 | Current endpoint:
207 |
208 |
209 |
210 |
211 | Insert Your Query Here
212 | View Your Query Response Below
215 |
217 |
218 | Test Queries to Export
219 |
220 |
224 |
225 |
226 |