From 6e8fc82ab9379a1520d61b71b0a4183ac56ab9ef Mon Sep 17 00:00:00 2001
From: rikinsk <rikin.kachhia@gmail.com>
Date: Wed, 13 Mar 2019 17:44:39 +0530
Subject: [PATCH] show migration name section if is migration is checked

---
 .../components/Services/Data/RawSQL/RawSQL.js | 600 ++++++++++--------
 1 file changed, 339 insertions(+), 261 deletions(-)

diff --git a/console/src/components/Services/Data/RawSQL/RawSQL.js b/console/src/components/Services/Data/RawSQL/RawSQL.js
index c20147dd05c43..285a2e160509b 100644
--- a/console/src/components/Services/Data/RawSQL/RawSQL.js
+++ b/console/src/components/Services/Data/RawSQL/RawSQL.js
@@ -22,33 +22,6 @@ import globals from '../../../../Globals';
 import semverCheck from '../../../../helpers/semver';
 import './AceEditorFix.css';
 
-const cascadeTip = (
-  <Tooltip id="tooltip-cascade">
-    Cascade all the dependent metadata references like relationships and
-    permissions.
-  </Tooltip>
-);
-const migrationTip = (
-  <Tooltip id="tooltip-migration">
-    Modifications to the underlying postgres schema should be tracked as
-    migrations
-  </Tooltip>
-);
-const migrationNameTip = (
-  <Tooltip id="tooltip-migration">
-    Use this to change the name of the generated migration files. Defaults to
-    'run_sql_migration'
-  </Tooltip>
-);
-const trackTableTip = hasFunctionSupport => (
-  <Tooltip id="tooltip-tracktable">
-    {`If you are creating a table/view${
-      hasFunctionSupport ? '/function' : ''
-    }, you can track them to query them
-      with GraphQL`}
-  </Tooltip>
-);
-
 const RawSQL = ({
   sql,
   resultType,
@@ -68,6 +41,33 @@ const RawSQL = ({
 }) => {
   const styles = require('../../../Common/TableCommon/Table.scss');
 
+  const cascadeTip = (
+    <Tooltip id="tooltip-cascade">
+      Cascade all the dependent metadata references like relationships and
+      permissions.
+    </Tooltip>
+  );
+  const migrationTip = (
+    <Tooltip id="tooltip-migration">
+      Modifications to the underlying postgres schema should be tracked as
+      migrations
+    </Tooltip>
+  );
+  const migrationNameTip = (
+    <Tooltip id="tooltip-migration">
+      Use this to change the name of the generated migration files. Defaults to
+      'run_sql_migration'
+    </Tooltip>
+  );
+  const trackTableTip = _hasFunctionSupport => (
+    <Tooltip id="tooltip-tracktable">
+      {`If you are creating a table/view${
+        _hasFunctionSupport ? '/function' : ''
+      }, you can track them to query them
+      with GraphQL`}
+    </Tooltip>
+  );
+
   let alert = null;
 
   if (ongoingRequest) {
@@ -96,9 +96,10 @@ const RawSQL = ({
     );
   }
 
-  const functionText = semverCheck('customFunctionSection', serverVersion)
-    ? 'Function'
-    : '';
+  const hasFunctionSupport = semverCheck(
+    'customFunctionSection',
+    serverVersion
+  );
 
   const isSchemaModification = _sql => {
     const formattedSQL = _sql.toLowerCase();
@@ -140,97 +141,324 @@ const RawSQL = ({
     }
   };
 
-  const handleSQLChange = val => {
-    dispatch({ type: SET_SQL, data: val });
+  const getMigrationModal = () => {
+    const onModalClose = () => {
+      dispatch(modalClose());
+    };
 
-    // set migration checkbox true
-    if (isSchemaModification(val)) {
-      dispatch({ type: SET_MIGRATION_CHECKED, data: true });
-    } else {
-      dispatch({ type: SET_MIGRATION_CHECKED, data: false });
-    }
+    const onConfirmNoMigration = () => {
+      const isMigration = document.getElementById('migration-checkbox').checked;
+      dispatch(modalClose());
+      dispatch(executeSQL(isMigration));
+    };
+
+    return (
+      <Modal show={isModalOpen} onHide={onModalClose.bind(this)}>
+        <Modal.Header closeModalButton>
+          <Modal.Title>Run SQL</Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
+          <div className="content-fluid">
+            <div className="row">
+              <div className="col-xs-12">
+                Your SQL Statement is most likely modifying the database schema.
+                Are you sure its not a migration?
+              </div>
+            </div>
+          </div>
+        </Modal.Body>
+        <Modal.Footer>
+          <ModalButton onClick={onModalClose}>Cancel</ModalButton>
+          <ModalButton
+            onClick={onConfirmNoMigration}
+            bsStyle="primary"
+            data-test="not-migration-confirm"
+          >
+            Yes, i confirm
+          </ModalButton>
+        </Modal.Footer>
+      </Modal>
+    );
+  };
 
-    // set track this checkbox true
-    const objects = parseCreateSQL(val, true);
-    if (objects.length) {
-      let allObjectsTrackable = true;
+  const getSQLSection = () => {
+    const handleSQLChange = val => {
+      dispatch({ type: SET_SQL, data: val });
+
+      // set migration checkbox true
+      if (isSchemaModification(val)) {
+        dispatch({ type: SET_MIGRATION_CHECKED, data: true });
+      } else {
+        dispatch({ type: SET_MIGRATION_CHECKED, data: false });
+      }
 
-      const trackedObjectNames = allSchemas.map(schema => {
-        return [schema.table_schema, schema.table_name].join('.');
-      });
+      // set track this checkbox true
+      const objects = parseCreateSQL(val, true);
+      if (objects.length) {
+        let allObjectsTrackable = true;
 
-      for (let i = 0; i < objects.length; i++) {
-        const object = objects[i];
+        const trackedObjectNames = allSchemas.map(schema => {
+          return [schema.table_schema, schema.table_name].join('.');
+        });
 
-        if (object.type === 'function') {
-          allObjectsTrackable = false;
-          break;
-        } else {
-          const objectName = [object.schema, object.name].join('.');
+        for (let i = 0; i < objects.length; i++) {
+          const object = objects[i];
 
-          if (trackedObjectNames.includes(objectName)) {
+          if (object.type === 'function') {
             allObjectsTrackable = false;
             break;
+          } else {
+            const objectName = [object.schema, object.name].join('.');
+
+            if (trackedObjectNames.includes(objectName)) {
+              allObjectsTrackable = false;
+              break;
+            }
           }
         }
-      }
 
-      if (allObjectsTrackable) {
-        dispatch({ type: SET_TRACK_TABLE_CHECKED, data: true });
+        if (allObjectsTrackable) {
+          dispatch({ type: SET_TRACK_TABLE_CHECKED, data: true });
+        } else {
+          dispatch({ type: SET_TRACK_TABLE_CHECKED, data: false });
+        }
       } else {
         dispatch({ type: SET_TRACK_TABLE_CHECKED, data: false });
       }
-    } else {
-      dispatch({ type: SET_TRACK_TABLE_CHECKED, data: false });
+    };
+
+    return (
+      <div>
+        <h4>SQL:</h4>
+        <AceEditor
+          data-test="sql-test-editor"
+          mode="sql"
+          theme="github"
+          name="raw_sql"
+          value={sql}
+          minLines={8}
+          maxLines={100}
+          width="100%"
+          showPrintMargin={false}
+          commands={[
+            {
+              name: 'submit',
+              bindKey: { win: 'Ctrl-Enter', mac: 'Command-Enter' },
+              exec: () => {
+                submitSQL();
+              },
+            },
+          ]}
+          onChange={handleSQLChange}
+        />
+      </div>
+    );
+  };
+
+  const getResultTable = () => {
+    let resultTable = null;
+
+    if (resultType && resultType !== 'command') {
+      const getTableHeadings = () => {
+        return resultHeaders.map((columnName, i) => (
+          <th key={i}>{columnName}</th>
+        ));
+      };
+
+      const getRows = () => {
+        return result.map((row, i) => (
+          <tr key={i}>
+            {row.map((columnValue, j) => (
+              <td key={j}>{columnValue}</td>
+            ))}
+          </tr>
+        ));
+      };
+
+      resultTable = (
+        <div
+          className={`${styles.addCol} col-xs-12 ${styles.padd_left_remove} ${
+            styles.add_mar_top
+          }`}
+        >
+          <h4 className={styles.subheading_text}>SQL Result:</h4>
+          <div className={styles.tableContainer}>
+            <table
+              className={`${
+                styles.table
+              } table table-bordered table-striped table-hover`}
+            >
+              <thead>
+                <tr>{getTableHeadings()}</tr>
+              </thead>
+              <tbody>{getRows()}</tbody>
+            </table>
+          </div>
+          <br />
+          <br />
+        </div>
+      );
     }
+
+    return resultTable;
   };
 
-  const onModalClose = () => {
-    dispatch(modalClose());
+  const getNotesSection = () => {
+    return (
+      <div>
+        <b>Notes</b>
+        <ul className={styles.remove_ul_left}>
+          <li>
+            You can create views, alter tables or just use any SQL syntax to
+            communicate with the database.
+          </li>
+          <li>
+            If you plan to create a Table/View
+            {hasFunctionSupport ? '/Function' : ''} using Raw SQL, remember to
+            expose it over the GraphQL API by checking the{' '}
+            <code>Track this</code> checkbox below.
+          </li>
+          <li>
+            Please note that if migrations are enabled, <b>down</b> migrations
+            will not be generated when you change the schema using Raw SQL.
+          </li>
+        </ul>
+      </div>
+    );
   };
 
-  const onConfirmNoMigration = () => {
-    const isMigration = document.getElementById('migration-checkbox').checked;
-    dispatch(modalClose());
-    dispatch(executeSQL(isMigration));
+  const getMetadataCascadeSection = () => {
+    return (
+      <div>
+        <input
+          checked={isCascadeChecked}
+          className={styles.add_mar_right_small}
+          id="cascade-checkbox"
+          type="checkbox"
+          onChange={() => {
+            dispatch({
+              type: SET_CASCADE_CHECKED,
+              data: !isCascadeChecked,
+            });
+          }}
+        />
+        Cascade metadata
+        <OverlayTrigger placement="right" overlay={cascadeTip}>
+          <i
+            className={`${styles.add_mar_left_small} fa fa-info-circle`}
+            aria-hidden="true"
+          />
+        </OverlayTrigger>
+      </div>
+    );
   };
 
-  const resultTable = (() => {
-    const tableHeadings = resultHeaders.map((columnName, i) => (
-      <th key={i}>{columnName}</th>
-    ));
-    const rows = result.map((row, i) => (
-      <tr key={i}>
-        {row.map((columnValue, j) => (
-          <td key={j}>{columnValue}</td>
-        ))}
-      </tr>
-    ));
-    return !resultType || resultType === 'command' ? null : (
-      <div
-        className={`${styles.addCol} col-xs-12 ${styles.padd_left_remove} ${
-          styles.padd_top
-        }`}
-      >
-        <h4 className={styles.subheading_text}>SQL Result:</h4>
-        {/* Table for the results */}
-        <div className={styles.tableContainer}>
-          <table
-            className={`${
-              styles.table
-            } table table-bordered table-striped table-hover`}
-          >
-            <thead>
-              <tr>{tableHeadings}</tr>
-            </thead>
-            <tbody>{rows}</tbody>
-          </table>
-        </div>
-        <br />
-        <br />
+  const getTrackThisSection = () => {
+    return (
+      <div className={styles.add_mar_top}>
+        <input
+          checked={isTableTrackChecked}
+          className={styles.add_mar_right_small}
+          id="track-checkbox"
+          type="checkbox"
+          onChange={() => {
+            dispatch({
+              type: SET_TRACK_TABLE_CHECKED,
+              data: !isTableTrackChecked,
+            });
+          }}
+          data-test="raw-sql-track-check"
+        />
+        Track this
+        <OverlayTrigger
+          placement="right"
+          overlay={trackTableTip(hasFunctionSupport)}
+        >
+          <i
+            className={`${styles.add_mar_left_small} fa fa-info-circle`}
+            aria-hidden="true"
+          />
+        </OverlayTrigger>
       </div>
     );
-  })();
+  };
+
+  const getMigrationSection = () => {
+    let migrationSection = null;
+
+    const getIsMigrationSection = () => {
+      return (
+        <div>
+          <input
+            checked={isMigrationChecked}
+            className={styles.add_mar_right_small}
+            id="migration-checkbox"
+            type="checkbox"
+            onChange={() => {
+              dispatch({
+                type: SET_MIGRATION_CHECKED,
+                data: !isMigrationChecked,
+              });
+            }}
+            data-test="raw-sql-migration-check"
+          />
+          This is a migration
+          <OverlayTrigger placement="right" overlay={migrationTip}>
+            <i
+              className={`${styles.add_mar_left_small} fa fa-info-circle`}
+              aria-hidden="true"
+            />
+          </OverlayTrigger>
+        </div>
+      );
+    };
+
+    const getMigrationNameSection = () => {
+      let migrationNameSection = null;
+
+      if (isMigrationChecked) {
+        migrationNameSection = (
+          <div className={styles.add_mar_top + ' ' + styles.add_mar_left}>
+            <div>
+              Migration Name:
+              <OverlayTrigger placement="right" overlay={migrationNameTip}>
+                <i
+                  className={`${styles.add_mar_left_small} fa fa-info-circle`}
+                  aria-hidden="true"
+                />
+              </OverlayTrigger>
+            </div>
+            <input
+              className={
+                styles.add_mar_right_small +
+                ' ' +
+                styles.tableNameInput +
+                ' ' +
+                styles.add_mar_top_small +
+                ' form-control'
+              }
+              placeholder={'Name of the generated migration file'}
+              id="migration-name"
+              type="text"
+            />
+          </div>
+        );
+      }
+
+      return migrationNameSection;
+    };
+
+    if (migrationMode && globals.consoleMode === 'cli') {
+      migrationSection = (
+        <div className={styles.add_mar_top}>
+          {getIsMigrationSection()}
+          {getMigrationNameSection()}
+        </div>
+      );
+    }
+
+    return migrationSection;
+  };
 
   return (
     <div
@@ -246,145 +474,17 @@ const RawSQL = ({
       <hr />
       <div>
         <div className={`${styles.addCol} col-xs-8 ${styles.padd_left_remove}`}>
-          <div>
-            <b>Notes</b>
-            <ul className={styles.remove_ul_left}>
-              <li>
-                You can create views, alter tables or just use any SQL syntax to
-                communicate with the database.
-              </li>
-              <li>
-                If you plan to create a Table/View
-                {functionText ? '/' + functionText : ''} using Raw SQL, remember
-                to link it to Hasura DB by checking the <code>Track this</code>{' '}
-                checkbox below.
-              </li>
-              <li>
-                Please note that if the migrations are enabled,{' '}
-                <code>down</code> migrations will not be generated when you
-                change the schema using Raw SQL.
-              </li>
-            </ul>
-          </div>
+          {getNotesSection()}
           <hr />
-          <h4>SQL:</h4>
-          <AceEditor
-            data-test="sql-test-editor"
-            mode="sql"
-            theme="github"
-            name="raw_sql"
-            value={sql}
-            minLines={8}
-            maxLines={100}
-            width="100%"
-            showPrintMargin={false}
-            commands={[
-              {
-                name: 'submit',
-                bindKey: { win: 'Ctrl-Enter', mac: 'Command-Enter' },
-                exec: () => {
-                  submitSQL();
-                },
-              },
-            ]}
-            onChange={handleSQLChange}
-          />
+
+          {getSQLSection()}
           <hr />
-          <div>
-            <input
-              checked={isCascadeChecked}
-              className={styles.add_mar_right_small}
-              id="cascade-checkbox"
-              type="checkbox"
-              onChange={() => {
-                dispatch({
-                  type: SET_CASCADE_CHECKED,
-                  data: !isCascadeChecked,
-                });
-              }}
-            />
-            Cascade relationships or permissions metadata
-            <OverlayTrigger placement="right" overlay={cascadeTip}>
-              <i
-                className={`${styles.padd_small_left} fa fa-info-circle`}
-                aria-hidden="true"
-              />
-            </OverlayTrigger>
-          </div>
-          <div className={styles.padd_top}>
-            <input
-              checked={isTableTrackChecked}
-              className={styles.add_mar_right_small}
-              id="track-checkbox"
-              type="checkbox"
-              onChange={() => {
-                dispatch({
-                  type: SET_TRACK_TABLE_CHECKED,
-                  data: !isTableTrackChecked,
-                });
-              }}
-              data-test="raw-sql-track-check"
-            />
-            Track this
-            <OverlayTrigger
-              placement="right"
-              overlay={trackTableTip(!!functionText)}
-            >
-              <i
-                className={`${styles.padd_small_left} fa fa-info-circle`}
-                aria-hidden="true"
-              />
-            </OverlayTrigger>
-          </div>
-          {migrationMode && globals.consoleMode === 'cli' ? (
-            <div className={styles.padd_top}>
-              <input
-                checked={isMigrationChecked}
-                className={styles.add_mar_right_small}
-                id="migration-checkbox"
-                type="checkbox"
-                onChange={() => {
-                  dispatch({
-                    type: SET_MIGRATION_CHECKED,
-                    data: !isMigrationChecked,
-                  });
-                }}
-                data-test="raw-sql-migration-check"
-              />
-              This is a migration
-              <OverlayTrigger placement="right" overlay={migrationTip}>
-                <i
-                  className={`${styles.padd_small_left} fa fa-info-circle`}
-                  aria-hidden="true"
-                />
-              </OverlayTrigger>
-              <div className={styles.padd_top}>
-                Migration Name:
-                <OverlayTrigger placement="right" overlay={migrationNameTip}>
-                  <i
-                    className={`${styles.padd_small_left} fa fa-info-circle`}
-                    aria-hidden="true"
-                  />
-                </OverlayTrigger>
-              </div>
-              <input
-                className={
-                  styles.add_mar_right_small +
-                  ' ' +
-                  styles.tableNameInput +
-                  ' ' +
-                  styles.add_mar_top_small +
-                  ' form-control'
-                }
-                placeholder={'Name of the generated migration file'}
-                id="migration-name"
-                type="text"
-              />
-              <hr />
-            </div>
-          ) : (
-            <hr />
-          )}
+
+          {getMetadataCascadeSection()}
+          {getTrackThisSection()}
+          {getMigrationSection()}
+          <hr />
+
           <Button
             type="submit"
             onClick={submitSQL}
@@ -397,33 +497,11 @@ const RawSQL = ({
         </div>
         <div className="hidden col-xs-4">{alert}</div>
       </div>
-      <Modal show={isModalOpen} onHide={onModalClose.bind(this)}>
-        <Modal.Header closeModalButton>
-          <Modal.Title>Run SQL</Modal.Title>
-        </Modal.Header>
-        <Modal.Body>
-          <div className="content-fluid">
-            <div className="row">
-              <div className="col-xs-12">
-                Your SQL Statement is most likely modifying the database schema.
-                Are you sure its not a migration?
-              </div>
-            </div>
-          </div>
-        </Modal.Body>
-        <Modal.Footer>
-          <ModalButton onClick={onModalClose}>Cancel</ModalButton>
-          <ModalButton
-            onClick={onConfirmNoMigration}
-            bsStyle="primary"
-            data-test="not-migration-confirm"
-          >
-            Yes, i confirm
-          </ModalButton>
-        </Modal.Footer>
-      </Modal>
+
+      {getMigrationModal()}
+
       <div className={`${styles.padd_left_remove} container-fluid`}>
-        {resultTable}
+        {getResultTable()}
       </div>
     </div>
   );