DEX-1120 respond to code review feedback part 3

WildMeOrg · Jul 7, 2022 · b2c0f77 · b2c0f77
1 parent 2ffec49
commit b2c0f77
Show file tree

Hide file tree

Showing 3 changed files with 83 additions and 75 deletions.
diff --git a/locale/en.json b/locale/en.json
@@ -1128,5 +1128,5 @@
   "PAGINATION_LAST_PAGE": "last page",
   "PAGINATION_PREVIOUS_PAGE": "previous page",
   "PAGINATION_NEXT_PAGE": "next page",
-  "UNFINISHED_OPTIONS": "Options must have valid values and labels"
+  "UNFINISHED_OPTIONS": "Options must have valid values and labels and unique values"
 }
diff --git a/src/components/Button.jsx b/src/components/Button.jsx
@@ -138,12 +138,12 @@ const Core = function (
 
 const ButtonWithTooltip = function (
   {
+    showTooltip = false,
+    tooltipText = '',
     display = 'panel',
     loading = false,
     style,
     disabled,
-    showTooltip = false,
-    tooltipText = '',
     size,
     ...rest
   },

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 { useIntl, FormattedMessage } from 'react-intl';
+import { map, filter, uniq } from 'lodash-es';
 
 import FormControl from '@material-ui/core/FormControl';
 import DialogContent from '@material-ui/core/DialogContent';
@@ -22,9 +23,19 @@ export default function OptionEditor({
   const intl = useIntl();
   const options = value || [];
   const displayedOptions =
-    options.length > 0
-      ? options
-      : [{ label: '', value: '', created: new Date() }];
+    options.length > 0 ? options : [{ label: '', value: '' }];
+
+  const areAllOptionsNonEmpty =
+    filter(
+      displayedOptions,
+      option => !option?.value || !option?.label,
+    ).length === 0;
+  const areAllValuesUnique =
+    uniq(map(displayedOptions, option => option?.value)).length ===
+    displayedOptions.length;
+
+  const areAllOptionsValid =
+    areAllOptionsNonEmpty && areAllValuesUnique;
 
   return (
     <StandardDialog
@@ -33,68 +44,72 @@ export default function OptionEditor({
       titleId="OPTION_EDITOR"
     >
       <DialogContent style={{ minWidth: 200 }}>
-        {displayedOptions.map((option, optionIndex) => {
-          const otherOptions = options.filter(
-            o =>
-              o?.created !== option?.created ||
-              o.value !== option?.value,
-          );
-          const showDeleteButton = displayedOptions.length !== 1;
-          return (
-            <div
-              style={{
-                display: 'flex',
-                flexDirection: 'column',
-                marginBottom: 12,
-              }}
-              key={option?.created || option?.value}
-            >
-              <div style={{ display: 'flex', alignItems: 'center' }}>
-                <Text variant="subtitle2" id="OPTION" />
-                {showDeleteButton && (
-                  <DeleteButton
-                    onClick={() => onChange(otherOptions)}
-                  />
-                )}
-              </div>
+        {map(
+          displayedOptions,
+          (option, optionIndex) => {
+            const otherOptions = options.filter(
+              (o, oIdx) => oIdx !== optionIndex,
+            );
+            const showDeleteButton = displayedOptions.length !== 1;
+            return (
               <div
-                style={{ display: 'flex', alignItems: 'flex-end' }}
-                {...rest}
+                style={{
+                  display: 'flex',
+                  flexDirection: 'column',
+                  marginBottom: 12,
+                }}
+                key={optionIndex}
               >
-                <FormControl style={{ marginRight: 12 }}>
-                  <TextInput
-                    onChange={label => {
-                      const newOptions = [...options];
-                      newOptions[optionIndex] = {
-                        ...option,
-                        label,
-                      };
-                      onChange(newOptions);
-                    }}
-                    width={200}
-                    schema={{ labelId: 'OPTION_LABEL' }}
-                    value={option.label}
-                  />
-                </FormControl>
-                <FormControl style={{ marginLeft: 12 }}>
-                  <TextInput
-                    onChange={newValue => {
-                      const newOptions = [...options];
-                      newOptions[optionIndex] = {
-                        ...option,
-                        value: newValue,
-                      };
-                      onChange(newOptions);
-                    }}
-                    width={200}
-                    schema={{ labelId: 'OPTION_VALUE' }}
-                    value={option.value}
-                  />
-                </FormControl>
+                <div
+                  style={{ display: 'flex', alignItems: 'center' }}
+                >
+                  <Text variant="subtitle2" id="OPTION" />
+                  {showDeleteButton && (
+                    <DeleteButton
+                      onClick={() => onChange(otherOptions)}
+                    />
+                  )}
+                </div>
+                <div
+                  style={{ display: 'flex', alignItems: 'flex-end' }}
+                  {...rest}
+                >
+                  <FormControl style={{ marginRight: 12 }}>
+                    <TextInput
+                      onChange={label => {
+                        const newOptions = [...options];
+                        newOptions[optionIndex] = {
+                          ...option,
+                          label,
+                        };
+                        onChange(newOptions);
+                      }}
+                      width={200}
+                      schema={{ labelId: 'OPTION_LABEL' }}
+                      value={option.label}
+                    />
+                  </FormControl>
+                  <FormControl style={{ marginLeft: 12 }}>
+                    <TextInput
+                      onChange={newValue => {
+                        const newOptions = [...options];
+                        newOptions[optionIndex] = {
+                          ...option,
+                          value: newValue,
+                        };
+                        onChange(newOptions);
+                      }}
+                      width={200}
+                      schema={{ labelId: 'OPTION_VALUE' }}
+                      value={option.value}
+                    />
+                  </FormControl>
+                </div>
               </div>
-            </div>
-          );
-        })}
+            );
+          },
+          [],
+        )}
         <Button
           style={{ marginTop: 16 }}
           onClick={() => {
@@ -103,7 +118,6 @@ export default function OptionEditor({
               {
                 label: '',
                 value: '',
-                created: Date.now(),
               },
             ]);
           }}
@@ -118,20 +132,14 @@ export default function OptionEditor({
       </DialogContent>
       <DialogActions style={{ padding: '0px 24px 24px 24px' }}>
         <Button
-          disabled={
-            displayedOptions.filter(
-              option => !option?.value || !option?.label,
-            ).length > 0
-          }
+          disabled={!areAllOptionsValid}
           showTooltip
           tooltipText={
-            displayedOptions.filter(
-              option => !option?.value || !option?.label,
-            ).length > 0
+            !areAllOptionsValid
               ? intl.formatMessage({
                   id: 'UNFINISHED_OPTIONS',
                 })
-              : ''
+              : undefined
           }
           display="primary"
           onClick={onSubmit}