hasura · rikinsk · Jul 21, 2020 · Jul 20, 2020 · Jul 20, 2020 · Jul 20, 2020
@@ -47,7 +47,6 @@ export const unTrackFunction = () => {
 };
 
 export const trackFunction = () => {
-  cy.get(getElementFromAlias('toggle-trackable-functions')).click();
   cy.get(
     getElementFromAlias(`add-track-function-${getCustomFunctionName(1)}`)
   ).should('exist');

@@ -151,18 +151,23 @@
   outline: 0;
 }
 
-/* Event Trigger */
-
 .ReactTable .rt-table .rt-thead .rt-tr .rt-th:first-child,
 .ReactTable .rt-table .rt-tbody .rt-tr-group .rt-tr.-odd .rt-td:first-child,
 .ReactTable .rt-table .rt-tbody .rt-tr-group .rt-tr.-even .rt-td:first-child {
   min-width: 75px !important;
 }
 
+.dataTable.ReactTable .rt-tbody .rt-th,
+.dataTable.ReactTable .rt-tbody .rt-td,
+.dataTable.ReactTable .rt-thead .rt-resizable-header-content {
+  justify-content: left;
+}
+
 .ReactTable .rt-tbody .rt-th,
 .ReactTable .rt-tbody .rt-td {
   display: flex;
   justify-content: center;
+  align-items: center;
 }
 
 .ReactTable .rt-thead .rt-resizable-header-content {

@@ -35,11 +35,14 @@
   border-left: 1px solid #ddd;
 }
 
-.tableHeaderCell i {
-  font-size: 12px;
-  position: absolute;
-  top: calc(50% - 5px);
-  right: 8px;
+.tableHeaderCell {
+  text-align: left;
+  i {
+    font-size: 12px;
+    position: absolute;
+    top: calc(50% - 5px);
+    right: 8px;
+  }
 }
 
 .insertContainer {
@@ -150,9 +153,6 @@ a.expanded {
   text-overflow: ellipsis;
 }
 
-.sqlBody {
-}
-
 .tablesBody {
   padding-top: 20px;
 }
@@ -170,11 +170,6 @@ a.expanded {
   padding-bottom: 10px;
 }
 
-.tableCellCenterAligned {
-  text-align: center;
-  overflow: unset !important;
-}
-
 .tableCellCenterAlignedOverflow {
   text-align: center;
   overflow: hidden !important;
@@ -186,10 +181,15 @@ a.expanded {
 
 .tableCenterContent {
   display: flex;
+  width: 100%;
   justify-content: center;
   align-items: center;
 }
 
+.overflowUnset {
+  overflow: unset !important;
+}
+
 .bulkDeleteButton {
   margin: 10px;
   font-size: 16px;
@@ -199,4 +199,5 @@ a.expanded {
 .headerInputCheckbox {
   height: 16px;
   margin-bottom: 2px;
+  margin-right: 3px !important;
 }
@@ -10,24 +10,17 @@ export const sqlEscapeText = (rawText: string) => {
 
 // detect DDL statements in SQL
 export const checkSchemaModification = (sql: string) => {
-  let isSchemaModification = false;
-
   const sqlStatements = sql
     .toLowerCase()
     .split(';')
-    .map(s => s.trim());
+    .map(sqlStr => sqlStr.trim());
 
-  sqlStatements.forEach(statement => {
-    if (
+  return sqlStatements.some(
+    statement =>
       statement.startsWith('create ') ||
       statement.startsWith('alter ') ||
       statement.startsWith('drop ')
-    ) {
-      isSchemaModification = true;
-    }
-  });
-
-  return isSchemaModification;
+  );
 };
 
 export const getCheckConstraintBoolExp = (check: string) => {

@@ -33,6 +33,9 @@ const RootFieldEditor = ({
     if (rfType.includes('select')) {
       return rfType.replace('select', tableName);
     }
+    if (rfType.includes('one')) {
+      return rfType.replace('one', tableName) + '_one';
+    }
     return `${rfType}_${tableName}`;
   };
 

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import Helmet from 'react-helmet';
 import AceEditor from 'react-ace';
@@ -34,7 +34,7 @@ import {
 } from '../../../Common/AceEditor/utils';
 import { CLI_CONSOLE_MODE } from '../../../../constants';
 import NotesSection from './molecules/NotesSection';
-
+import styles from '../../../Common/TableCommon/Table.scss';
 /**
  * # RawSQL React FC
  * ## renders raw SQL page on route `/data/sql`
@@ -73,41 +73,35 @@ const RawSQL = ({
   migrationMode,
   allSchemas,
 }) => {
-  const styles = require('../../../Common/TableCommon/Table.scss');
-
   // local storage key for SQL
   const LS_RAW_SQL_SQL = 'rawSql:sql';
 
-  /* hooks */
-
-  // set up sqlRef to use in unmount
-  const sqlRef = useRef(sql);
-
   const [statementTimeout, setStatementTimeout] = useState(
     Number(getLocalStorageItem(LS_RAW_SQL_STATEMENT_TIMEOUT)) || 10
   );
 
+  const [sqlText, onChangeSQLText] = useState(sql);
+
   useEffect(() => {
     if (!sql) {
       const sqlFromLocalStorage = localStorage.getItem(LS_RAW_SQL_SQL);
       if (sqlFromLocalStorage) {
         dispatch({ type: SET_SQL, data: sqlFromLocalStorage });
+        onChangeSQLText(sqlFromLocalStorage);
       }
     }
     return () => {
-      localStorage.setItem(LS_RAW_SQL_SQL, sqlRef.current);
+      localStorage.setItem(LS_RAW_SQL_SQL, sqlText);
     };
-  }, [dispatch, sql]);
-  // set SQL to sqlRef
-  useEffect(() => {
-    sqlRef.current = sql;
-  }, [sql]);
-
-  /* hooks - end */
+  }, [dispatch, sql, sqlText]);
 
   const submitSQL = () => {
+    if (!sqlText) {
+      localStorage.setItem(LS_RAW_SQL_SQL, '');
+      return;
+    }
     // set SQL to LS
-    localStorage.setItem(LS_RAW_SQL_SQL, sql);
+    localStorage.setItem(LS_RAW_SQL_SQL, sqlText);
 
     // check migration mode global
     if (migrationMode) {
@@ -120,21 +114,15 @@ const RawSQL = ({
       }
       if (!isMigration && globals.consoleMode === CLI_CONSOLE_MODE) {
         // if migration is not checked, check if is schema modification
-        if (checkSchemaModification(sql)) {
+        if (checkSchemaModification(sqlText)) {
           dispatch(modalOpen());
-          const confirmation = false;
-          if (confirmation) {
-            dispatch(executeSQL(isMigration, migrationName, statementTimeout));
-          }
-        } else {
-          dispatch(executeSQL(isMigration, migrationName, statementTimeout));
+          return;
         }
-      } else {
-        dispatch(executeSQL(isMigration, migrationName, statementTimeout));
       }
-    } else {
-      dispatch(executeSQL(false, '', statementTimeout));
+      dispatch(executeSQL(isMigration, migrationName, statementTimeout));
+      return;
     }
+    dispatch(executeSQL(false, '', statementTimeout));
   };
 
   const getMigrationWarningModal = () => {
@@ -171,6 +159,7 @@ const RawSQL = ({
 
   const getSQLSection = () => {
     const handleSQLChange = val => {
+      onChangeSQLText(val);
       dispatch({ type: SET_SQL, data: val });
 
       // set migration checkbox true
@@ -189,21 +178,19 @@ const RawSQL = ({
           return [schema.table_schema, schema.table_name].join('.');
         });
 
-        for (let i = 0; i < objects.length; i++) {
-          const object = objects[i];
-
+        allObjectsTrackable = objects.every(object => {
           if (object.type === 'function') {
-            allObjectsTrackable = false;
-            break;
-          } else {
-            const objectName = [object.schema, object.name].join('.');
-
-            if (trackedObjectNames.includes(objectName)) {
-              allObjectsTrackable = false;
-              break;
-            }
+            return false;
           }
-        }
+
+          const objectName = [object.schema, object.name].join('.');
+
+          if (trackedObjectNames.includes(objectName)) {
+            return false;
+          }
+
+          return true;
+        });
 
         if (allObjectsTrackable) {
           dispatch({ type: SET_TRACK_TABLE_CHECKED, data: true });
@@ -223,7 +210,7 @@ const RawSQL = ({
           theme={ACE_EDITOR_THEME}
           fontSize={ACE_EDITOR_FONT_SIZE}
           name="raw_sql"
-          value={sql}
+          value={sqlText}
           minLines={15}
           maxLines={100}
           width="100%"
@@ -233,7 +220,9 @@ const RawSQL = ({
               name: 'submit',
               bindKey: { win: 'Ctrl-Enter', mac: 'Command-Enter' },
               exec: () => {
-                submitSQL();
+                if (sqlText) {
+                  submitSQL();
+                }
               },
             },
           ]}
@@ -475,6 +464,7 @@ const RawSQL = ({
             color="yellow"
             size="sm"
             data-test="run-sql"
+            disabled={!sqlText.length}
           >
             Run!
           </Button>

@@ -532,9 +532,13 @@ class Schema extends Component {
       };
 
       const heading = getSectionHeading(
-        'Untracked foreign-key relations',
+        'Untracked foreign-key relationships',
         'Relationships inferred via foreign-keys that are not exposed over the GraphQL API',
-        getTrackAllBtn()
+        <>
+          <KnowMoreLink href="https://hasura.io/docs/1.0/graphql/manual/schema/table-relationships/index.html" />
+          &nbsp;
+          {getTrackAllBtn()}
+        </>
       );
 
       return (
@@ -621,14 +625,14 @@ class Schema extends Component {
       const heading = getSectionHeading(
         'Untracked custom functions',
         'Custom functions that are not exposed over the GraphQL API',
-        <KnowMoreLink href="https://hasura.io/docs/1.0/graphql/manual/queries/custom-functions.html" />
+        <KnowMoreLink href="https://hasura.io/docs/1.0/graphql/manual/schema/custom-functions.html" />
       );
 
       return (
         <div className={styles.add_mar_top} key={'custom-functions-content'}>
           <CollapsibleToggle
             title={heading}
-            isOpen={!noTrackableFunctions}
+            isOpen
             testId={'toggle-trackable-functions'}
           >
             <div className={`${styles.padd_left_remove} col-xs-12`}>
@@ -689,7 +693,7 @@ class Schema extends Component {
           className={styles.add_mar_top}
           key={'non-trackable-custom-functions'}
         >
-          <CollapsibleToggle title={heading} isOpen={false}>
+          <CollapsibleToggle title={heading} isOpen>
             <div className={`${styles.padd_left_remove} col-xs-12`}>
               {getNonTrackableFuncList()}
             </div>

@@ -464,7 +464,10 @@ const ViewRows = ({
         manualTriggersButton = getManualTriggersButton();
 
         return (
-          <div key={rowIndex} className={styles.tableCellCenterAligned}>
+          <div
+            key={rowIndex}
+            className={`${styles.tableCenterContent} ${styles.overflowUnset}`}
+          >
             {cloneButton}
             {editButton}
             {deleteButton}
@@ -923,7 +926,7 @@ const ViewRows = ({
 
     return (
       <DragFoldTable
-        className="-highlight -fit-content"
+        className="dataTable -highlight -fit-content"
         data={_gridRows}
         columns={_gridHeadings}
         headerTitle={'Click to sort / Drag to rearrange'}

@@ -68,7 +68,7 @@ const AddManualRelationship = ({
   return (
     <div key="add_manual_relationship">
       <div className={styles.add_mar_bottom}>
-        <label> Add a new relationship manually </label>
+        Add a new relationship <b>manually</b>
       </div>
       <ExpandableEditor
         editorExpanded={expandedContent}