DEX-1270 remove id from optionEditor (#412)

* DEX-1270 remove id from optionEditor * DEX-1120 respond to code review feedback * DEX-1120 respond to code review feedback part 2 * DEX-1120 respond to code review feedback part 3 * DEX-1120 only show tooltip when not valid * DEX-1120 DRY up the ButtonWithTooltip props * DEX-1120 respond to lodash improvement feedback
WildMeOrg · Jul 7, 2022 · ce66873 · ce66873
1 parent d97eb70
commit ce66873
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 14 deletions.
diff --git a/locale/en.json b/locale/en.json
@@ -1134,5 +1134,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 and unique values"
 }
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';
 
@@ -25,7 +26,6 @@ const Core = function (
   let spinnerStyles = {
     color: theme.palette.common.white,
   };
-
   if (display === 'back') {
     return (
       <Button
@@ -136,22 +136,39 @@ const Core = function (
   );
 };
 
+const ButtonWithTooltip = function (
+  { showTooltip = false, tooltipText = '', ...rest },
+  ref,
+) {
+  if (showTooltip)
+    return (
+      <Tooltip title={tooltipText}>
+        <span>
+          <CoreForwardRef ref={ref} {...rest} />
+        </span>
+      </Tooltip>
+    );
+  else return <CoreForwardRef ref={ref} {...rest} />;
+};
+
 const CoreForwardRef = forwardRef(Core);
 
+const ButtonForwardRef = forwardRef(ButtonWithTooltip);
+
 function CustomButton(
   { id, domId = undefined, values, children, ...rest },
   ref,
 ) {
   if (!id)
     return (
-      <CoreForwardRef id={domId} ref={ref} {...rest}>
+      <ButtonForwardRef id={domId} ref={ref} {...rest}>
         {children}
-      </CoreForwardRef>
+      </ButtonForwardRef>
     );
   return (
-    <CoreForwardRef id={domId} ref={ref} {...rest}>
+    <ButtonForwardRef id={domId} ref={ref} {...rest}>
       <FormattedMessage id={id} values={values} />
-    </CoreForwardRef>
+    </ButtonForwardRef>
   );
 }
 

diff --git a/src/pages/fieldManagement/settings/saveField/OptionEditor.jsx b/src/pages/fieldManagement/settings/saveField/OptionEditor.jsx
@@ -1,6 +1,7 @@
 import React from 'react';
-import { FormattedMessage } from 'react-intl';
-import { v4 as uuid } from 'uuid';
+import { useIntl, FormattedMessage } from 'react-intl';
+import { map, some, uniqBy } from 'lodash-es';
+
 import FormControl from '@material-ui/core/FormControl';
 import DialogContent from '@material-ui/core/DialogContent';
 import DialogActions from '@material-ui/core/DialogActions';
@@ -19,9 +20,22 @@ export default function OptionEditor({
   onChange,
   ...rest
 }) {
+  const intl = useIntl();
   const options = value || [];
   const displayedOptions =
-    options.length > 0 ? options : [{ label: '', value: '', id: 6 }];
+    options.length > 0 ? options : [{ label: '', value: '' }];
+
+  const areAllOptionsNonEmpty = !some(
+    displayedOptions,
+    option => !option?.value || !option?.label,
+  );
+
+  const areAllValuesUnique =
+    uniqBy(displayedOptions, option => option?.value).length ===
+    displayedOptions.length;
+
+  const areAllOptionsValid =
+    areAllOptionsNonEmpty && areAllValuesUnique;
 
   return (
     <StandardDialog
@@ -30,9 +44,9 @@ export default function OptionEditor({
       titleId="OPTION_EDITOR"
     >
       <DialogContent style={{ minWidth: 200 }}>
-        {displayedOptions.map((option, optionIndex) => {
+        {map(displayedOptions, (option, optionIndex) => {
           const otherOptions = options.filter(
-            o => o.id !== option.id,
+            (o, oIdx) => oIdx !== optionIndex,
           );
           const showDeleteButton = displayedOptions.length !== 1;
           return (
@@ -42,7 +56,7 @@ export default function OptionEditor({
                 flexDirection: 'column',
                 marginBottom: 12,
               }}
-              key={option.id}
+              key={optionIndex}
             >
               <div style={{ display: 'flex', alignItems: 'center' }}>
                 <Text variant="subtitle2" id="OPTION" />
@@ -98,7 +112,6 @@ export default function OptionEditor({
               {
                 label: '',
                 value: '',
-                id: uuid(),
               },
             ]);
           }}
@@ -112,7 +125,19 @@ export default function OptionEditor({
         </Button>
       </DialogContent>
       <DialogActions style={{ padding: '0px 24px 24px 24px' }}>
-        <Button display="primary" onClick={onSubmit}>
+        <Button
+          disabled={!areAllOptionsValid}
+          showTooltip={!areAllOptionsValid}
+          tooltipText={
+            !areAllOptionsValid
+              ? intl.formatMessage({
+                  id: 'UNFINISHED_OPTIONS',
+                })
+              : undefined
+          }
+          display="primary"
+          onClick={onSubmit}
+        >
           <FormattedMessage id="FINISH" />
         </Button>
       </DialogActions>