remote relationship support for console (#5)

* added feedback on migration commands (close hasura#1410) (hasura#1931)

* firebase2graphql (v0.0.2): support array types in firebase json (close hasura#1829) (hasura#1900)

* improve console error page (close hasura#272) (hasura#1890)

* add nextjs 8 jwt sample app (hasura#1943)

* persist queries in GraphiQL (closes hasura#1894) (hasura#1903)

* add realtime chat sample app with vue (hasura#1885)

* fix update_event_trigger query not persisting the changes (hasura#1950)

fix hasura#1949

* mention required key length for HMAC encryption to user (hasura#1956)

Following on from a discussion in discord, a small tweak to make the required key length for a HMAC key more obvious

* fix input argument types for custom SQL functions (close hasura#1952) (hasura#1953)

* run graphql tests on both http and websocket; add parallelism (close hasura#1868) (hasura#1921)

Examples 
1)  `
pytest --hge-urls "http://127.0.0.1:8080" --pg-urls "postgresql://admin@127.0.0.1:5432/hge_tests" -vv
`
2)  `pytest --hge-urls "http://127.0.0.1:8080"   "http://127.0.0.1:8081" --pg-urls "postgresql://admin@127.0.0.1:5432/hge_tests"  "postgresql://admin@127.0.0.1:5432/hge_tests2" -vv
`
### Solution and Design
<!-- How is this issue solved/fixed? What is the design? -->
<!-- It's better if we elaborate -->
#### Reducing execution time of tests
- The Schema setup and teardown, which were earlier done per test method, usually takes around 1 sec. 
- For mutations, the model has now been changed to only do schema setup and teardown once per test class.
-  A data setup and teardown will be done once per test instead (usually takes ~10ms).
- For the test class to get this behaviour, one can can extend the class `DefaultTestMutations`. 
    - The function  `dir()` should be define which returns the location of the configuration folder.
    - Inside the configuration folder, there should be 
        - Files `<conf_dir>/schema_setup.yaml` and `<conf_dir>/schema_teardown.yaml`, which has the metadata query executed during schema setup and teardown respectively
        - Files named `<conf_dir>/values_setup.yaml` and `<conf_dir>/values_teardown.yaml`. These files are executed to setup and remove data from the tables respectively. 

#### Running Graphql queries on both http and websockets
- Each GraphQL query/mutation is run on the both HTTP and websocket protocols
- Pytests test parameterisation is used to achieve this
- The errors over websockets are slightly different from that on HTTP
   - The code takes care of converting the errors in HTTP to errors in websockets

#### Parallel executation of tests.
- The plugin pytest-xdist helps in running tests on parallel workers.
- We are using this plugin to group tests by file and run on different workers.
- Parallel test worker processes operate on separate postgres databases(and separate graphql-engines connected to these databases). Thus tests on one worker will not affect the tests on the other worker.
- With two workers, this decreases execution times by half, as the tests on event triggers usually takes a long time, but does not consume much CPU.

* update manifests to v1.0.0-alpha42

* update regex to delete event triggers in edit-pg-dump (close hasura#1959) (hasura#1960)

* support composite foreign keys and primary keys through console (close hasura#1707) (hasura#1854)

* edit-pg-dump: fix a missing semi-colon

* fix styles in browse rows, relationship and permission tables (hasura#1969)

* update console permissions ui (hasura#1924)

* Make permissions sections as collapsibles with tooltips
* Remove 'use same permission as select' type options from row permissions section
* Added clone section to apply same permission to any table-role-action
* Disable other subsections till row permissions are set

* re-add same as other action options in permissions (hasura#1970)

* fix excessive memory consumption with bulk queries (hasura#1972)

Use 'Strict' State monad instead of 'Lazy' to avoid unevaluated memory thunks

* add placeholder for bool type fields while inserting rows (hasura#1962)

* Use UTF-8 encoding for stack hpc report generation (hasura#1974)

* fix save function in console's retry config editor (fix hasura#1975) (hasura#1976)

* Wip

* add scroll to literal blocks in docs (close hasura#1954) (hasura#1978)

* remote relationship ui v1

* wip

* ui for creating remote relationships

* wip

* ui fixes

* ui fixes

* functional ui

* namespace ui wip

* add functionality for dropping relationship

* show exact error in notification

* fix state inconsistencies

* update reldef for namespaced fields

* lint

console/src/components/ApiExplorer/GraphiQLWrapper.js

@@ -97,6 +97,7 @@ class GraphiQLWrapper extends Component {
     const { supportAnalyze, analyzeApiChange, headerFocus } = this.state;
 
     const { numberOfTables, queryParams } = this.props;
+
     const graphqlNetworkData = this.props.data;
 
     const graphQLFetcher = graphQLParams => {

console/src/components/Common/Common.scss

@@ -384,6 +384,9 @@ input {
 .remove_margin_bottom {
   margin-bottom: 0 !important;
 }
+.remove_margin_right {
+  margin-right: 0 !important;
+}
 
 .remove_margin {
   margin: 0 !important;
@@ -488,6 +491,10 @@ input {
   margin-bottom: 10px;
 }
 
+.add_mar_bottom_small {
+  margin-bottom: 5px;
+}
+
 .add_mar_right {
   margin-right: 20px !important;
 }
@@ -1248,9 +1255,22 @@ code {
   width: 100% !important;
 }
 
+.wd150px {
+  width: 150px;
+}
+
+.cursorPointer {
+  cursor: pointer;
+}
+
+.display_flex_centered {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
 /* container height subtracting top header and bottom scroll bar */
 $mainContainerHeight: calc(100vh - 50px - 25px);
 
 /* Min container width below which horizontal scroll will appear */
 $minContainerWidth: 1200px;
-

console/src/components/Services/Data/DataState.js

@@ -113,6 +113,7 @@ const defaultModifyState = {
       tables: [],
     },
   },
+  remoteRelationships: [],
   permissionsState: { ...defaultPermissionsState },
   prevPermissionState: { ...defaultPermissionsState },
   ongoingRequest: false,

console/src/components/Services/Data/TableCommon/TableReducer.js

@@ -34,6 +34,7 @@ import {
   REL_ADD_NEW_CLICKED,
   REL_SET_MANUAL_COLUMNS,
   REL_ADD_MANUAL_CLICKED,
+  LOAD_REMOTE_RELATIONSHIPS,
 } from '../TableRelationships/Actions';
 
 // TABLE PERMISSIONS
@@ -198,6 +199,11 @@ const modifyReducer = (tableName, schemas, modifyStateOrig, action) => {
           manualColumns: action.data,
         },
       };
+    case LOAD_REMOTE_RELATIONSHIPS:
+      return {
+        ...modifyState,
+        remoteRelationships: action.data,
+      };
     case TABLE_COMMENT_EDIT:
       return {
         ...modifyState,

console/src/components/Services/Data/TablePermissions/Permissions.js

@@ -773,7 +773,6 @@ class Permissions extends Component {
                   queryLabel
                 )
               );
-
               if (isSelected) {
                 _filterOptionsSection.push(selectedValue);
               }
@@ -1422,7 +1421,6 @@ class Permissions extends Component {
             let _deleteBtn;
 
             const presetType = getPresetValueType(preset);
-
             if (presetType) {
               _deleteBtn = (
                 <i
@@ -1432,7 +1430,6 @@ class Permissions extends Component {
                 />
               );
             }
-
             return _deleteBtn;
           };
 

console/src/components/Services/Data/TableRelationships/Actions.js

@@ -21,6 +21,9 @@ export const REL_ADD_NEW_CLICKED = 'ModifyTable/REL_ADD_NEW_CLICKED';
 export const REL_SET_MANUAL_COLUMNS = 'ModifyTable/REL_SET_MANUAL_COLUMNS';
 export const REL_ADD_MANUAL_CLICKED = 'ModifyTable/REL_ADD_MANUAL_CLICKED';
 
+export const LOAD_REMOTE_RELATIONSHIPS =
+  'ModifyTable/LOAD_REMOTE_RELATIONSHIPS';
+
 const resetRelationshipForm = () => ({ type: REL_RESET });
 const addNewRelClicked = () => ({ type: REL_ADD_NEW_CLICKED });
 const relManualAddClicked = () => ({ type: REL_ADD_MANUAL_CLICKED });

console/src/components/Services/Data/TableRelationships/Relationships.js

@@ -20,6 +20,7 @@ import { getRelDef, getObjArrRelList } from './utils';
 
 import Button from '../../../Common/Button/Button';
 import AddManualRelationship from './AddManualRelationship';
+import RemoteRelationships from './RemoteRelationships/Wrapper';
 import suggestedRelationshipsRaw from './autoRelations';
 import RelationshipEditor from './RelationshipEditor';
 import semverCheck from '../../../../helpers/semver';
@@ -153,8 +154,8 @@ const AddRelationship = ({
       <div className={`${styles.remove_margin_bottom} form-group`}>
         <label>
           {' '}
-          You have no new relationships that can be added. Add a foreign key to
-          get suggestions{' '}
+          You have no suggested relationships with another table. Add a foreign
+          key to get suggestions{' '}
         </label>
       </div>
     );
@@ -354,6 +355,7 @@ class Relationships extends Component {
       currentSchema,
       migrationMode,
       schemaList,
+      remoteRelationships,
     } = this.props;
     const styles = require('../TableModify/ModifyTable.scss');
     const tableStyles = require('../../../Common/TableCommon/TableStyles.scss');
@@ -466,7 +468,7 @@ class Relationships extends Component {
         <br />
         <div className={`${styles.padd_left_remove} container-fluid`}>
           <div className={`${styles.padd_left_remove} col-xs-10 col-md-10`}>
-            <h4 className={styles.subheading_text}>Relationships</h4>
+            <h4 className={styles.subheading_text}>Table Relationships</h4>
             {addedRelationshipsView}
             <br />
             {relAdd.isActive ? (
@@ -514,7 +516,7 @@ class Relationships extends Component {
               <Button
                 type="submit"
                 color="white"
-                size="sm"
+                size="xs"
                 onClick={() => {
                   dispatch(relManualAddClicked());
                 }}
@@ -524,6 +526,12 @@ class Relationships extends Component {
               </Button>
             )}
             <hr />
+            <h4 className={styles.subheading_text}>Remote Relationships</h4>
+            <RemoteRelationships
+              dispatch={dispatch}
+              tableSchema={tableSchema}
+              remoteRels={remoteRelationships}
+            />
           </div>
         </div>
         <div className={`${styles.fixed} hidden`}>{alert}</div>
@@ -541,6 +549,7 @@ Relationships.propTypes = {
   relAdd: PropTypes.object.isRequired,
   migrationMode: PropTypes.bool.isRequired,
   ongoingRequest: PropTypes.bool.isRequired,
+  remoteRelationships: PropTypes.array,
   lastError: PropTypes.object,
   lastFormError: PropTypes.object,
   lastSuccess: PropTypes.bool,