hasura · rikinsk · Aug 30, 2019 · Aug 28, 2019 · Aug 28, 2019 · Aug 28, 2019
@@ -1356,6 +1356,10 @@ code {
   width: 325px;
 }
 
+.cursorNotAllowed {
+  cursor: not-allowed;
+}
+
 /* container height subtracting top header and bottom scroll bar */
 $mainContainerHeight: calc(100vh - 50px - 25px);
 

@@ -14,15 +14,21 @@ const WarningSymbol = ({
   return (
     <div className={styles.display_inline}>
       <OverlayTrigger placement={tooltipPlacement} overlay={tooltip}>
-        <i
-          className={`fa fa-exclamation-triangle ${styles.warningSymbol} ${
-            customStyle ? customStyle : ''
-          }`}
-          aria-hidden="true"
-        />
+        <WarningIcon customStyle={customStyle} />
       </OverlayTrigger>
     </div>
   );
 };
 
+export const WarningIcon = ({ customStyle }) => {
+  return (
+    <i
+      className={`fa fa-exclamation-triangle ${styles.warningSymbol} ${
+        customStyle ? customStyle : ''
+      }`}
+      aria-hidden="true"
+    />
+  );
+};
+
 export default WarningSymbol;
@@ -82,10 +82,6 @@
 
 }
 
-.cursorNotAllowed {
-  cursor: not-allowed;
-}
-
 .apiExplorerWrapper {
   display: flex;
   height: $mainContainerHeight;

@@ -0,0 +1,72 @@
+import React from 'react';
+import Toggle from 'react-toggle';
+import styles from '../../../../Common/Common.scss';
+
+const enumCompatibilityDocsUrl =
+  'https://docs.hasura.io/1.0/graphql/manual/schema/enums.html#create-an-enum-table';
+
+export const EnumTableModifyWarning = ({ isEnum }) => {
+  if (!isEnum) {
+    return null;
+  }
+
+  return (
+    <div className={styles.add_mar_bottom}>
+      <i>
+        * This table is set as an enum. Modifying it may cause your Hasura
+        metadata to become inconsistent.
+        <br />
+        <a
+          href={enumCompatibilityDocsUrl}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          See enum table requirements.
+        </a>
+      </i>
+    </div>
+  );
+};
+
+const EnumsSection = ({ isEnum, toggleEnum, loading }) => {
+  let title;
+  if (loading) {
+    title = 'Please wait...';
+  }
+
+  const getCompatibilityNote = () => {
+    return (
+      <div>
+        <i>
+          * The table must meet some requirements for you to set it as an enum.{' '}
+          <a
+            href={enumCompatibilityDocsUrl}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            See requirements.
+          </a>
+        </i>
+      </div>
+    );
+  };
+
+  return (
+    <div>
+      <h4 className={`${styles.subheading_text}`}>Set table as enum</h4>
+      <div
+        className={`${styles.display_flex} ${styles.add_mar_bottom}`}
+        title={title}
+        data-toggle="tooltip"
+      >
+        <span className={styles.add_mar_right_mid}>
+          Expose the table values as GraphQL enums
+        </span>
+        <Toggle checked={isEnum} icons={false} onChange={toggleEnum} />
+      </div>
+      {getCompatibilityNote()}
+    </div>
+  );
+};
+
+export default EnumsSection;
@@ -0,0 +1,32 @@
+import React from 'react';
+import ReloadEnumMetadata from '../../../Metadata/MetadataOptions/ReloadMetadata';
+import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger';
+import Tooltip from 'react-bootstrap/lib/Tooltip';
+import styles from '../../../../Common/Common.scss';
+
+const ReloadEnumValuesButton = ({ isEnum, dispatch, tooltipStyle }) => {
+  if (!isEnum) return null;
+
+  const tooltip = (
+    <Tooltip id="tooltip-reload-enum-metadata">
+      Reload enum values in your GraphQL schema after inserting, updating or
+      deleting enum values
+    </Tooltip>
+  );
+
+  return (
+    <React.Fragment>
+      <ReloadEnumMetadata buttonText="Reload enum values" dispatch={dispatch} />
+      <OverlayTrigger overlay={tooltip} placement="right">
+        <i
+          className={`fa fa-info-circle ${
+            styles.cursorPointer
+          } ${tooltipStyle || ''}`}
+          aria-hidden="true"
+        />
+      </OverlayTrigger>
+    </React.Fragment>
+  );
+};
+
+export default ReloadEnumValuesButton;
@@ -90,6 +90,9 @@ const defaultModifyState = {
     rel: null,
     perm: '',
   },
+  tableEnum: {
+    loading: false
+  },
   columnEdit: {},
   pkEdit: [''],
   pkModify: [''],

@@ -8,6 +8,8 @@ import JsonInput from '../../../Common/CustomInputTypes/JsonInput';
 import TextInput from '../../../Common/CustomInputTypes/TextInput';
 import Button from '../../../Common/Button/Button';
 
+import ReloadEnumValuesButton from '../Common/ReusableComponents/ReloadEnumValuesButton';
+
 import {
   getPlaceholder,
   INTEGER,
@@ -69,9 +71,12 @@ class EditItem extends Component {
     }
 
     const styles = require('../../../Common/TableCommon/Table.scss');
-    const columns = schemas.find(
+
+    const currentTable = schemas.find(
       x => x.table_name === tableName && x.table_schema === currentSchema
-    ).columns;
+    );
+
+    const columns = currentTable.columns;
 
     const refs = {};
     const elements = columns.map((col, i) => {
@@ -246,6 +251,10 @@ class EditItem extends Component {
               >
                 {buttonText}
               </Button>
+              <ReloadEnumValuesButton
+                dispatch={dispatch}
+                isEnum={currentTable.is_enum}
+              />
             </form>
           </div>
           <div className="col-xs-3">{alert}</div>

@@ -23,6 +23,7 @@ import {
 } from './FilterActions.js';
 import { setDefaultQuery, runQuery, setOffset } from './FilterActions';
 import Button from '../../../Common/Button/Button';
+import ReloadEnumValuesButton from '../Common/ReusableComponents/ReloadEnumValuesButton';
 
 const renderCols = (colName, tableSchema, onChange, usage, key) => {
   const columns = tableSchema.columns.map(c => c.column_name);
@@ -176,6 +177,7 @@ class FilterQuery extends Component {
   render() {
     const { dispatch, whereAnd, tableSchema, orderBy } = this.props; // eslint-disable-line no-unused-vars
     const styles = require('../../../Common/FilterQuery/FilterQuery.scss');
+
     return (
       <div className={styles.add_mar_top}>
         <form
@@ -209,9 +211,15 @@ class FilterQuery extends Component {
               color="yellow"
               size="sm"
               data-test="run-query"
+              className={styles.add_mar_right}
             >
               Run query
             </Button>
+            <ReloadEnumValuesButton
+              dispatch={dispatch}
+              isEnum={tableSchema.is_enum}
+              tooltipStyle={styles.add_mar_left_mid}
+            />
             {/* <div className={styles.count + ' alert alert-info'}><i>Total <b>{tableName}</b> rows in the database for current query: {count} </i></div> */}
           </div>
         </form>

@@ -22,6 +22,9 @@ import {
   FETCH_COLUMN_TYPE_CASTS_FAIL,
   RESET,
   SET_UNIQUE_KEYS,
+  TOGGLE_ENUM,
+  TOGGLE_ENUM_SUCCESS,
+  TOGGLE_ENUM_FAILURE,
 } from '../TableModify/ModifyActions';
 
 // TABLE RELATIONSHIPS
@@ -586,6 +589,28 @@ const modifyReducer = (tableName, schemas, modifyStateOrig, action) => {
         ...modifyState,
         uniqueKeyModify: action.keys,
       };
+    case TOGGLE_ENUM:
+      return {
+        ...modifyState,
+        tableEnum: {
+          loading: true,
+        },
+      };
+    case TOGGLE_ENUM_FAILURE:
+      return {
+        ...modifyState,
+        tableEnum: {
+          loading: false,
+          error: action.error,
+        },
+      };
+    case TOGGLE_ENUM_SUCCESS:
+      return {
+        ...modifyState,
+        tableEnum: {
+          loading: false,
+        },
+      };
     default:
       return modifyState;
   }

@@ -7,6 +7,7 @@ import { setTable } from '../DataActions';
 import JsonInput from '../../../Common/CustomInputTypes/JsonInput';
 import TextInput from '../../../Common/CustomInputTypes/TextInput';
 import Button from '../../../Common/Button/Button';
+import ReloadEnumValuesButton from '../Common/ReusableComponents/ReloadEnumValuesButton';
 import { getPlaceholder, BOOLEAN, JSONB, JSONDTYPE, TEXT } from '../utils';
 
 import { NotFoundError } from '../../../Error/PageNotFound';
@@ -325,6 +326,10 @@ class InsertItem extends Component {
               >
                 Clear
               </Button>
+              <ReloadEnumValuesButton
+                dispatch={dispatch}
+                isEnum={currentTable.is_enum}
+              />
             </form>
           </div>
           <div className="col-xs-3">{alert}</div>