DEX-1120 respond to code review feedback

WildMeOrg · Jul 6, 2022 · 77c5ee3 · 77c5ee3
1 parent b1f5534
commit 77c5ee3
Show file tree

Hide file tree

Showing 3 changed files with 85 additions and 46 deletions.
diff --git a/locale/en.json b/locale/en.json
@@ -1127,5 +1127,6 @@
   "PAGINATION_FIRST_PAGE": "first page",
   "PAGINATION_LAST_PAGE": "last page",
   "PAGINATION_PREVIOUS_PAGE": "previous page",
-  "PAGINATION_NEXT_PAGE": "next page"
+  "PAGINATION_NEXT_PAGE": "next page",
+  "UNFINISHED_OPTIONS": "Options must have valid values and labels"
 }
diff --git a/src/components/Button.jsx b/src/components/Button.jsx
@@ -2,6 +2,7 @@ import React, { forwardRef } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { useTheme } from '@material-ui/core/styles';
 import Button from '@material-ui/core/Button';
+import Tooltip from '@material-ui/core/Tooltip';
 import CircularProgress from '@material-ui/core/CircularProgress';
 import BackIcon from '@material-ui/icons/KeyboardBackspace';
 
@@ -12,6 +13,7 @@ const Core = function (
     loading = false,
     style,
     disabled,
+    tooltiptext = '',
     size,
     ...rest
   },
@@ -28,19 +30,23 @@ const Core = function (
 
   if (display === 'back') {
     return (
-      <Button
-        size="small"
-        startIcon={<BackIcon />}
-        disabled={disabled}
-        style={{
-          padding: '4px 16px',
-          ...style,
-        }}
-        ref={ref}
-        {...rest}
-      >
-        {children}
-      </Button>
+      <Tooltip title={tooltiptext}>
+        <span>
+          <Button
+            size="small"
+            startIcon={<BackIcon />}
+            disabled={disabled}
+            style={{
+              padding: '4px 16px',
+              ...style,
+            }}
+            ref={ref}
+            {...rest}
+          >
+            {children}
+          </Button>
+        </span>
+      </Tooltip>
     );
   }
 
@@ -97,18 +103,22 @@ const Core = function (
       fontSize: '14px',
     };
     return (
-      <button
-        type="button"
-        style={{ ...roleStyles, ...style }}
-        ref={ref}
-        {...rest}
-      >
-        {loading ? (
-          <CircularProgress size={24} style={spinnerStyles} />
-        ) : (
-          children
-        )}
-      </button>
+      <Tooltip title={tooltiptext}>
+        <span>
+          <button
+            type="button"
+            style={{ ...roleStyles, ...style }}
+            ref={ref}
+            {...rest}
+          >
+            {loading ? (
+              <CircularProgress size={24} style={spinnerStyles} />
+            ) : (
+              children
+            )}
+          </button>
+        </span>
+      </Tooltip>
     );
   }
 
@@ -118,21 +128,25 @@ const Core = function (
   }
 
   return (
-    <Button
-      color={color}
-      variant={variant}
-      disabled={disabled}
-      style={{ ...roleStyles, ...style }}
-      size={size}
-      ref={ref}
-      {...rest}
-    >
-      {loading ? (
-        <CircularProgress size={24} style={spinnerStyles} />
-      ) : (
-        children
-      )}
-    </Button>
+    <Tooltip title={tooltiptext}>
+      <span>
+        <Button
+          color={color}
+          variant={variant}
+          disabled={disabled}
+          style={{ ...roleStyles, ...style }}
+          size={size}
+          ref={ref}
+          {...rest}
+        >
+          {loading ? (
+            <CircularProgress size={24} style={spinnerStyles} />
+          ) : (
+            children
+          )}
+        </Button>
+      </span>
+    </Tooltip>
   );
 };
 

diff --git a/src/pages/fieldManagement/settings/saveField/OptionEditor.jsx b/src/pages/fieldManagement/settings/saveField/OptionEditor.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
-import { FormattedMessage } from 'react-intl';
+import { useIntl, FormattedMessage } from 'react-intl';
+
 import FormControl from '@material-ui/core/FormControl';
 import DialogContent from '@material-ui/core/DialogContent';
 import DialogActions from '@material-ui/core/DialogActions';
@@ -18,9 +19,12 @@ export default function OptionEditor({
   onChange,
   ...rest
 }) {
+  const intl = useIntl();
   const options = value || [];
   const displayedOptions =
-    options.length > 0 ? options : [{ label: '', value: '' }];
+    options.length > 0
+      ? options
+      : [{ label: '', value: '', created: new Date() }];
 
   return (
     <StandardDialog
@@ -31,7 +35,9 @@ export default function OptionEditor({
       <DialogContent style={{ minWidth: 200 }}>
         {displayedOptions.map((option, optionIndex) => {
           const otherOptions = options.filter(
-            o => o.value !== option.value,
+            o =>
+              o?.created !== option?.created ||
+              o.value !== option?.value,
           );
           const showDeleteButton = displayedOptions.length !== 1;
           return (
@@ -41,7 +47,7 @@ export default function OptionEditor({
                 flexDirection: 'column',
                 marginBottom: 12,
               }}
-              key={option.value}
+              key={option?.created || option?.value}
             >
               <div style={{ display: 'flex', alignItems: 'center' }}>
                 <Text variant="subtitle2" id="OPTION" />
@@ -97,6 +103,7 @@ export default function OptionEditor({
               {
                 label: '',
                 value: '',
+                created: Date.now(),
               },
             ]);
           }}
@@ -110,7 +117,24 @@ export default function OptionEditor({
         </Button>
       </DialogContent>
       <DialogActions style={{ padding: '0px 24px 24px 24px' }}>
-        <Button display="primary" onClick={onSubmit}>
+        <Button
+          disabled={
+            displayedOptions.filter(
+              option => !option?.value || !option?.label,
+            ).length > 0
+          }
+          tooltiptext={
+            displayedOptions.filter(
+              option => !option?.value || !option?.label,
+            ).length > 0
+              ? intl.formatMessage({
+                  id: 'UNFINISHED_OPTIONS',
+                })
+              : ''
+          }
+          display="primary"
+          onClick={onSubmit}
+        >
           <FormattedMessage id="FINISH" />
         </Button>
       </DialogActions>