fix computed fields local state

hasura · Dec 17, 2019 · f7a39af · f7a39af
1 parent 7731790
commit f7a39af
Show file tree

Hide file tree

Showing 3 changed files with 84 additions and 67 deletions.
diff --git a/console/src/components/Services/Data/Common/ReusableComponents/RawSqlButton.js b/console/src/components/Services/Data/Common/ReusableComponents/RawSqlButton.js
@@ -0,0 +1,31 @@
+import React from 'react';
+import _push from '../../push';
+import { SET_SQL } from '../../RawSQL/Actions';
+import Button from '../../../../Common/Button/Button';
+
+const RawSqlButton = props => {
+  const { dataTestId, sql, customStyles, dispatch, children } = props;
+
+  const handleClick = e => {
+    e.preventDefault();
+
+    dispatch(_push('/data/sql'));
+
+    dispatch({
+      type: SET_SQL,
+      data: sql,
+    });
+  };
+
+  return (
+    <Button
+      data-test={dataTestId}
+      className={`${customStyles} btn btn-xs btn-default`}
+      onClick={handleClick}
+    >
+      {children}
+    </Button>
+  );
+};
+
+export default RawSqlButton;
diff --git a/console/src/components/Services/Data/Schema/Schema.js b/console/src/components/Services/Data/Schema/Schema.js
@@ -37,14 +37,13 @@ import { createNewSchema, deleteCurrentSchema } from './Actions';
 import CollapsibleToggle from '../../../Common/CollapsibleToggle/CollapsibleToggle';
 import gqlPattern from '../Common/GraphQLValidation';
 import GqlCompatibilityWarning from '../../../Common/GqlCompatibilityWarning/GqlCompatibilityWarning';
+import RawSqlButton from '../Common/ReusableComponents/RawSqlButton';
 import {
   displayTableName,
   getFunctionName,
   getSchemaTables,
   getUntrackedTables,
 } from '../../../Common/utils/pgUtils';
-import { SET_SQL } from '../RawSQL/Actions';
-import _push from '../push';
 import { isEmpty } from '../../../Common/utils/jsUtils';
 import { getConfirmation } from '../../../Common/utils/jsUtils';
 
@@ -628,24 +627,14 @@ class Schema extends Component {
                         styles.add_mar_right
                       }`}
                     >
-                      <Button
-                        data-test={`view-function-${p.function_name}`}
-                        className={`${
-                          styles.display_inline
-                        } btn btn-xs btn-default`}
-                        onClick={e => {
-                          e.preventDefault();
-
-                          dispatch(_push('/data/sql'));
-
-                          dispatch({
-                            type: SET_SQL,
-                            data: p.function_definition,
-                          });
-                        }}
+                      <RawSqlButton
+                        dataTestId={`view-function-${p.function_name}`}
+                        customStyles={styles.display_inline}
+                        sql={p.function_definition}
+                        dispatch={dispatch}
                       >
                         View
-                      </Button>
+                      </RawSqlButton>
                     </div>
                     <div className={styles.display_inline}>
                       {p.function_name}

diff --git a/console/src/components/Services/Data/TableModify/ComputedFieldsEditor.js b/console/src/components/Services/Data/TableModify/ComputedFieldsEditor.js
@@ -4,14 +4,12 @@ import AceEditor from 'react-ace';
 import styles from './ModifyTable.scss';
 import { getConfirmation } from '../../../Common/utils/jsUtils';
 import ExpandableEditor from '../../../Common/Layout/ExpandableEditor/Editor';
+import RawSqlButton from '../Common/ReusableComponents/RawSqlButton';
 import {
   findFunction,
   getFunctionDefinition,
   getSchemaName,
 } from '../../../Common/utils/pgUtils';
-import { SET_SQL } from '../RawSQL/Actions';
-import _push from '../push';
-import Button from '../../../Common/Button/Button';
 
 const ComputedFieldsEditor = ({
   table,
@@ -21,11 +19,15 @@ const ComputedFieldsEditor = ({
   dispatch,
 }) => {
   const computedFields = table.computed_fields;
+  // const computedFields = [
+  //   { computed_field_name: 'author_full_id', function_name: 'get_author_full_id', function_schema: 'public', table_schema: 'public', table_name: 'author' },
+  //   { computed_field_name: 'author_articles', function_name: 'fetch_articles', function_schema: 'public', table_schema: 'public', table_name: 'author' }
+  // ];
 
   const emptyComputedField = {
     computed_field_name: '',
     function_name: '',
-    function_schema: '',
+    function_schema: currentSchema,
   };
 
   const [computedFieldsState, setComputedFieldsState] = React.useState(
@@ -47,17 +49,36 @@ const ComputedFieldsEditor = ({
     const computedFieldFunctionName = computedField.function_name;
     const computedFieldFunctionSchema = computedField.function_schema;
 
-    const onDelete = () => {
-      const confirmMessage = `This will permanently delete the computed field "${computedFieldName}" from this table`;
-      const isOk = getConfirmation(confirmMessage, true, computedFieldName);
-      if (isOk) {
-        // TODO
-        // dispatch(deleteComputedField(computedField, table));
+    let computedFieldFunction = null;
+    let computedFieldFunctionDefinition = null;
+    if (functions) {
+      computedFieldFunction = findFunction(
+        functions,
+        computedFieldFunctionName,
+        computedFieldFunctionSchema
+      );
+
+      if (computedFieldFunction) {
+        computedFieldFunctionDefinition = getFunctionDefinition(
+          computedFieldFunction
+        );
       }
-    };
+    }
+
+    let removeFunc;
+    if (!isLast) {
+      removeFunc = () => {
+        const confirmMessage = `This will permanently delete the computed field "${computedFieldName}" from this table`;
+        const isOk = getConfirmation(confirmMessage, true, computedFieldName);
+        if (isOk) {
+          // TODO
+          // dispatch(deleteComputedField(computedField, table));
+        }
+      };
+    }
 
     let saveFunc;
-    if (computedFieldName && computedFieldFunctionName) {
+    if (computedFieldName && computedFieldFunctionDefinition) {
       // TODO
       // saveFunc = toggle => {
       //   dispatch(saveComputedField(i, toggle));
@@ -99,53 +120,29 @@ const ComputedFieldsEditor = ({
 
     const expandedContent = () => {
       const getFunctionDefinitionSection = () => {
-        if (isLast) {
-          return null;
-        }
-
-        let computedFieldFunctionDefinition = '-- Function not found';
-        if (functions) {
-          const computedFieldFunction = findFunction(
-            functions,
-            computedFieldFunctionName,
-            computedFieldFunctionSchema
-          );
-          if (computedFieldFunction) {
-            computedFieldFunctionDefinition = getFunctionDefinition(
-              computedFieldFunction
-            );
-          }
-        }
+        const modifyFunctionBtn = (
+          <RawSqlButton
+            dataTestId={`modify-function-${computedFieldFunctionName}`}
+            customStyles={`${styles.display_inline} ${styles.add_mar_left}`}
+            sql={computedFieldFunctionDefinition}
+            dispatch={dispatch}
+          >
+            Modify
+          </RawSqlButton>
+        );
 
         return (
           <div>
             <div className={`${styles.add_mar_bottom_mid}`}>
               <b>Computed field function definition: </b>
-              <Button
-                data-test={`modify-function-${computedFieldFunctionName}`}
-                className={`${styles.display_inline} ${
-                  styles.add_mar_left
-                } btn btn-xs btn-default`}
-                onClick={e => {
-                  e.preventDefault();
-
-                  dispatch(_push('/data/sql'));
-
-                  dispatch({
-                    type: SET_SQL,
-                    data: computedFieldFunctionDefinition,
-                  });
-                }}
-              >
-                Modify
-              </Button>
+              {computedFieldFunctionDefinition && modifyFunctionBtn}
             </div>
             <AceEditor
               mode="sql"
               readOnly
               theme="github"
               name="computed_field_fn_def"
-              value={computedFieldFunctionDefinition}
+              value={computedFieldFunctionDefinition || '-- Function not found'}
               minLines={3}
               maxLines={100}
               width="100%"
@@ -263,7 +260,7 @@ const ComputedFieldsEditor = ({
           service="modify-table"
           expandButtonText={expandButtonText}
           saveFunc={saveFunc}
-          removeFunc={onDelete}
+          removeFunc={removeFunc}
           isCollapsable
         />
       </div>