console: fix enum tables reload data button UI (close #4647) (#4877)

CHANGELOG.md

@@ -77,6 +77,7 @@ Read more about the session argument for computed fields in the [docs](https://h
 - server: fix importing of allow list query from metadata (fix #4687)
 - server: flush log buffer during shutdown (#4800)
 - server: fix edge case with printing logs on startup failure (fix #4772)
+- console: fix enum tables reload data button UI (#4647)
 - console: allow entering big int values in the console (close #3667) (#4775)
 - console: add support for subscriptions analyze in API explorer (close #2541) (#2541)
 - console: avoid count queries for large tables (#4692)

console/src/components/Common/Tooltip/Tooltip.tsx

@@ -10,19 +10,23 @@ export interface TooltipProps extends React.ComponentProps<'i'> {
   message: string;
   placement?: 'right' | 'left' | 'top' | 'bottom';
   className?: string;
+  tooltipStyle?: string;
 }
+
 const ToolTip: React.FC<TooltipProps> = ({
   message,
   placement = 'right',
+  tooltipStyle = '',
   children,
 }) => (
   <OverlayTrigger placement={placement} overlay={tooltipGen(message)}>
     {children || (
       <i
-        className={`fa fa-question-circle ${styles.tooltipIcon}`}
+        className={`fa fa-info-circle ${styles.tooltipIcon} ${tooltipStyle}`}
         aria-hidden="true"
       />
     )}
   </OverlayTrigger>
 );
+
 export default ToolTip;

console/src/components/Services/Data/Common/Components/ReloadEnumValuesButton.js

@@ -1,32 +0,0 @@
-import React from 'react';
-import ReloadEnumMetadata from '../../../Settings/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;

console/src/components/Services/Data/Common/Components/ReloadEnumValuesButton.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { ThunkDispatch } from 'redux-thunk';
+import { AnyAction } from 'redux';
+import ReloadMetadata from '../../../Settings/MetadataOptions/ReloadMetadata';
+
+export interface ReloadEnumValuesButtonProps {
+  isEnum: boolean;
+  dispatch: ThunkDispatch<{}, {}, AnyAction>;
+  tooltipStyle?: string;
+}
+
+const TOOLTIP_TEXT =
+  'Reload enum values in your GraphQL schema after inserting, updating or deleting enum values';
+
+const ReloadEnumValuesButton: React.FC<ReloadEnumValuesButtonProps> = ({
+  isEnum,
+  dispatch,
+  tooltipStyle = '',
+}) => {
+  if (!isEnum) return null;
+  return (
+    <ReloadMetadata
+      buttonText="Reload enum values"
+      btnTooltipMessage={TOOLTIP_TEXT}
+      showReloadRemoteSchemas={false}
+      dispatch={dispatch}
+      tooltipStyle={tooltipStyle}
+    />
+  );
+};
+
+export default ReloadEnumValuesButton;

console/src/components/Services/Settings/MetadataOptions/ReloadMetadata.js

@@ -26,7 +26,12 @@ class ReloadMetadata extends Component {
   };
 
   render() {
-    const { dispatch } = this.props;
+    const {
+      dispatch,
+      btnTooltipMessage,
+      tooltipStyle,
+      showReloadRemoteSchemas = true,
+    } = this.props;
     const { isReloading, shouldReloadRemoteSchemas } = this.state;
 
     const reloadMetadataAndLoadInconsistentMetadata = e => {
@@ -53,7 +58,7 @@ class ReloadMetadata extends Component {
 
     const buttonText = isReloading ? 'Reloading' : 'Reload';
     return (
-      <div className={`${metaDataStyles.display_flex}`}>
+      <>
         <Button
           data-test="data-reload-metadata"
           color="white"
@@ -64,21 +69,28 @@ class ReloadMetadata extends Component {
         >
           {this.props.buttonText || buttonText}
         </Button>
-        <label
-          onChange={this.toggleShouldReloadRemoteSchemas}
-          className={`${metaDataStyles.cursorPointer} ${metaDataStyles.add_mar_right_small}`}
-          disabled={this.state.isReloading}
-        >
-          <input
-            type="checkbox"
-            checked={shouldReloadRemoteSchemas}
-            readOnly
-            className={`${metaDataStyles.add_mar_right_small} ${metaDataStyles.cursorPointer}`}
-          />
-          Reload all remote schemas
-        </label>
-        <Tooltip message="Check this if you have inconsistent remote schemas or if your remote schema has changed." />
-      </div>
+        {btnTooltipMessage && (
+          <Tooltip message={btnTooltipMessage} tooltipStyle={tooltipStyle} />
+        )}
+        {showReloadRemoteSchemas && (
+          <>
+            <label
+              className={`${metaDataStyles.cursorPointer} ${metaDataStyles.add_mar_right_small} ${metaDataStyles.add_mar_left_small}`}
+              disabled={this.state.isReloading}
+            >
+              <input
+                type="checkbox"
+                onChange={this.toggleShouldReloadRemoteSchemas}
+                checked={shouldReloadRemoteSchemas}
+                readOnly
+                className={`${metaDataStyles.add_mar_right_small} ${metaDataStyles.cursorPointer}`}
+              />
+              Reload all remote schemas
+            </label>
+            <Tooltip message="Check this if you have inconsistent remote schemas or if your remote schema has changed." />
+          </>
+        )}
+      </>
     );
   }
 }