add computed fields support on console

console/.eslintrc

@@ -80,7 +80,8 @@
     "jsx-a11y/alt-text": 0,
     "jsx-a11y/no-autofocus": 0,
     "max-len": 0,
-    "no-continue": 0
+    "no-continue": 0,
+    "no-nested-ternary": 0
   },
   "plugins": [
     "react", "import", "cypress"

console/src/components/Common/SearchableSelect/SearchableSelect.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import Select, { components, createFilter } from 'react-select';
 import PropTypes from 'prop-types';
+import { isArray, isObject } from '../utils/jsUtils';
 
 /*
  * Wrap the option generated by react-select and adds utility properties
@@ -64,6 +65,17 @@ const SearchableSelectBox = ({
       customFilter = {};
   }
 
+  // handle simple options
+  if (isArray(options) && !isObject(options[0])) {
+    options = options.map(op => {
+      return { value: op, label: op };
+    });
+  }
+
+  if (value && !isObject(value)) {
+    value = { value: value, label: value };
+  }
+
   return (
     <Select
       isSearchable

console/src/components/Common/utils/pgUtils.js

@@ -235,6 +235,22 @@ export const getFunctionName = pgFunction => {
   return pgFunction.function_name;
 };
 
+export const getFunctionDefinition = pgFunction => {
+  return pgFunction.function_definition;
+};
+
+export const getSchemaFunctions = (allFunctions, fnSchema) => {
+  return allFunctions.filter(fn => getFunctionSchema(fn) === fnSchema);
+};
+
+export const findFunction = (allFunctions, functionName, functionSchema) => {
+  return allFunctions.find(
+    f =>
+      getFunctionName(f) === functionName &&
+      getFunctionSchema(f) === functionSchema
+  );
+};
+
 /*** Schema utils ***/
 
 export const getSchemaName = schema => {
@@ -264,3 +280,34 @@ export const getTableCustomColumnNames = table => {
   }
   return {};
 };
+
+/*** Table/View Computed Field utils ***/
+
+export const getTableComputedFields = table => {
+  return table.computed_fields;
+};
+
+export const getComputedFieldName = computedField => {
+  return computedField.computed_field_name;
+};
+
+export const getGroupedTableComputedFields = (table, allFunctions) => {
+  const groupedComputedFields = { scalar: [], table: [] };
+
+  getTableComputedFields(table).forEach(computedField => {
+    const computedFieldFnDef = computedField.definition.function;
+    const computedFieldFn = findFunction(
+      allFunctions,
+      computedFieldFnDef.name,
+      computedFieldFnDef.schema
+    );
+
+    if (computedFieldFn && computedFieldFn.return_type_type === 'b') {
+      groupedComputedFields.scalar.push(computedField);
+    } else {
+      groupedComputedFields.table.push(computedField);
+    }
+  });
+
+  return groupedComputedFields;
+};

console/src/components/Common/utils/v1QueryUtils.js

@@ -78,3 +78,32 @@ export const getUntrackTableQuery = tableDef => {
     },
   };
 };
+
+export const getAddComputedFieldQuery = (
+  tableDef,
+  computedFieldName,
+  definition,
+  comment
+) => {
+  return {
+    type: 'add_computed_field',
+    args: {
+      table: tableDef,
+      name: computedFieldName,
+      definition: {
+        ...definition,
+      },
+      comment: comment,
+    },
+  };
+};
+
+export const getDropComputedFieldQuery = (tableDef, computedFieldName) => {
+  return {
+    type: 'drop_computed_field',
+    args: {
+      table: tableDef,
+      name: computedFieldName,
+    },
+  };
+};

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;

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

@@ -124,6 +124,7 @@ const initQueries = {
         has_variadic: false,
         returns_set: true,
         return_type_type: 'c', // COMPOSITE type
+        return_table_info: {},
         $or: [
           {
             function_type: {
@@ -168,6 +169,7 @@ const initQueries = {
           has_variadic: false,
           returns_set: true,
           return_type_type: 'c', // COMPOSITE type
+          return_table_info: {},
           $or: [
             {
               function_type: {
@@ -372,7 +374,7 @@ const fetchDataInit = () => (dispatch, getState) => {
   );
 };
 
-const fetchFunctionInit = () => (dispatch, getState) => {
+const fetchFunctionInit = (schema = null) => (dispatch, getState) => {
   const url = Endpoints.getSchema;
   const body = {
     type: 'bulk',
@@ -384,10 +386,10 @@ const fetchFunctionInit = () => (dispatch, getState) => {
   };
 
   // set schema in queries
-  const currentSchema = getState().tables.currentSchema;
-  body.args[0].args.where.function_schema = currentSchema;
-  body.args[1].args.where.function_schema = currentSchema;
-  body.args[2].args.where.function_schema = currentSchema;
+  const fnSchema = schema || getState().tables.currentSchema;
+  body.args[0].args.where.function_schema = fnSchema;
+  body.args[1].args.where.function_schema = fnSchema;
+  body.args[2].args.where.function_schema = fnSchema;
 
   const options = {
     credentials: globalCookiePolicy,

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

@@ -60,6 +60,7 @@ const defaultQueryPermissions = {
   },
   select: {
     columns: [],
+    computed_fields: [],
     filter: {},
     limit: null,
     allow_aggregations: false,

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

@@ -465,10 +465,9 @@ class PermissionsSummary extends Component {
               <div className={styles.add_mar_bottom_small}>
                 <b>Columns</b> -{' '}
                 <i>
-                  {getPermissionColumnAccessSummary(
-                    actionPermission,
-                    table.columns
-                  )}
+                  {getPermissionColumnAccessSummary(actionPermission, {
+                    columns: table.columns,
+                  })}
                 </i>
                 {showDetails && getColumnsDetails()}
               </div>

console/src/components/Services/Data/PermissionsSummary/utils.js

@@ -71,18 +71,31 @@ export const getPermissionFilterString = (
   return filterString;
 };
 
-export const getPermissionColumnAccessSummary = (permission, tableColumns) => {
+export const getPermissionColumnAccessSummary = (permission, tableFields) => {
   let columnAccessStatus;
 
-  if (!permission || !permission.columns.length) {
+  if (!permission) {
     columnAccessStatus = 'no columns';
-  } else if (
-    permission.columns === '*' ||
-    permission.columns.length === tableColumns.length
-  ) {
-    columnAccessStatus = 'all columns';
   } else {
-    columnAccessStatus = 'partial columns';
+    let noFields = true;
+    let allFields = true;
+
+    Object.keys(tableFields).forEach(fieldType => {
+      noFields = noFields && !permission[fieldType].length;
+
+      allFields =
+        allFields &&
+        (permission[fieldType] === '*' ||
+          permission[fieldType].length === tableFields[fieldType].length);
+    });
+
+    if (noFields) {
+      columnAccessStatus = 'no columns';
+    } else if (allFields) {
+      columnAccessStatus = 'all columns';
+    } else {
+      columnAccessStatus = 'partial columns';
+    }
   }
 
   return columnAccessStatus;

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

@@ -48,10 +48,11 @@ const RawSQL = ({
   // set SQL from localStorage on mount and write back to localStorage on unmount
   useEffect(() => {
     const LS_RAW_SQL_SQL = 'rawSql:sql';
-
-    const sqlFromLocalStorage = localStorage.getItem(LS_RAW_SQL_SQL);
-    if (sqlFromLocalStorage) {
-      dispatch({ type: SET_SQL, data: sqlFromLocalStorage });
+    if (!sql) {
+      const sqlFromLocalStorage = localStorage.getItem(LS_RAW_SQL_SQL);
+      if (sqlFromLocalStorage) {
+        dispatch({ type: SET_SQL, data: sqlFromLocalStorage });
+      }
     }
 
     return () => {

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

@@ -34,12 +34,11 @@ import {
   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';
 import ToolTip from '../../../Common/Tooltip/Tooltip';
 import KnowMoreLink from '../../../Common/KnowMoreLink/KnowMoreLink';
+import RawSqlButton from '../Common/ReusableComponents/RawSqlButton';
 
 class Schema extends Component {
   constructor(props) {
@@ -83,13 +82,9 @@ class Schema extends Component {
       const trackedFuncNames = trackedFunctions.map(fn => getFunctionName(fn));
 
       // Assuming schema for both function and tables are same
-      // return function which are tracked && function name whose
-      // set of tables are tracked
+      // return function which are tracked
       const filterCondition = func => {
-        return (
-          !trackedFuncNames.includes(getFunctionName(func)) &&
-          !!func.return_table_info
-        );
+        return !trackedFuncNames.includes(getFunctionName(func));
       };
 
       return functionsList.filter(filterCondition);
@@ -454,7 +449,6 @@ class Schema extends Component {
         if (isEmpty(untrackedRelations)) {
           untrackedRelList.push(
             <div key="no-untracked-rel">There are no untracked relations</div>
-              .ne
           );
         } else {
           untrackedRelations.forEach((rel, i) => {
@@ -557,9 +551,7 @@ class Schema extends Component {
               };
 
               return (
-                <div
-                  className={`${styles.display_inline} ${styles.add_mar_right}`}
-                >
+                <div className={styles.display_inline}>
                   <Button
                     data-test={`add-track-function-${p.function_name}`}
                     className={`${
@@ -579,7 +571,23 @@ class Schema extends Component {
                 key={`untracked-function-${i}`}
               >
                 {getTrackBtn()}
-                <div className={styles.display_inline}>
+                <div
+                  className={`${styles.display_inline} ${
+                    styles.add_mar_left_mid
+                  }`}
+                >
+                  <RawSqlButton
+                    dataTestId={`view-function-${p.function_name}`}
+                    customStyles={styles.display_inline}
+                    sql={p.function_definition}
+                    dispatch={dispatch}
+                  >
+                    View
+                  </RawSqlButton>
+                </div>
+                <div
+                  className={`${styles.display_inline} ${styles.add_mar_left}`}
+                >
                   <span>{p.function_name}</span>
                 </div>
               </div>
@@ -634,24 +642,14 @@ class Schema extends Component {
                 <div
                   className={`${styles.display_inline} ${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}</div>
               </div>