From 5767ec6b4b7171b41741be91bf58d7d053e92d1b Mon Sep 17 00:00:00 2001
From: Mark <mark.aaron.fisher@gmail.com>
Date: Wed, 6 Jul 2022 18:12:36 -0700
Subject: [PATCH] DEX-1120 make more robust to undefined and begin working with
 alternatives to value-as-the-key

---
 .../settings/saveField/OptionEditor.jsx       | 154 ++++++++++--------
 1 file changed, 88 insertions(+), 66 deletions(-)

diff --git a/src/pages/fieldManagement/settings/saveField/OptionEditor.jsx b/src/pages/fieldManagement/settings/saveField/OptionEditor.jsx
index 7ea71e4d7..1d3c97890 100644
--- 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 React, { useMemo } from 'react';
 import { useIntl, FormattedMessage } from 'react-intl';
+import { map, filter } from 'lodash-es';
 
 import FormControl from '@material-ui/core/FormControl';
 import DialogContent from '@material-ui/core/DialogContent';
@@ -21,10 +22,16 @@ export default function OptionEditor({
 }) {
   const intl = useIntl();
   const options = value || [];
-  const displayedOptions =
-    options.length > 0
-      ? options
-      : [{ label: '', value: '', created: new Date() }];
+  const displayedOptions = useMemo(() => {
+    return options.length > 0
+      ? map(options, (option, idx) => {
+          console.log('deleteMe this happens and idx is: ' + idx);
+          if (!option?.created)
+            return { ...option, created: Date.now() + idx };
+          else return { ...option };
+        })
+      : [{ label: '', value: '', created: Date.now() }];
+  }, [value, options]);
 
   return (
     <StandardDialog
@@ -33,68 +40,81 @@ 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) => {
+            console.log('deleteMe option is: ');
+            console.log(option);
+            const otherOptions = options.filter(
+              o =>
+                o?.created !== option?.created ||
+                o?.edited !== option?.edited ||
+                o.value !== option?.value,
+            );
+            const showDeleteButton = displayedOptions.length !== 1;
+            return (
               <div
-                style={{ display: 'flex', alignItems: 'flex-end' }}
-                {...rest}
+                style={{
+                  display: 'flex',
+                  flexDirection: 'column',
+                  marginBottom: 12,
+                }}
+                key={
+                  option?.created || option?.edited || option?.value
+                }
               >
-                <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,
+                          edited: Date.now(),
+                        };
+                        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,
+                          edited: Date.now(),
+                        };
+                        onChange(newOptions);
+                      }}
+                      width={200}
+                      schema={{ labelId: 'OPTION_VALUE' }}
+                      value={option.value}
+                    />
+                  </FormControl>
+                </div>
               </div>
-            </div>
-          );
-        })}
+            );
+          },
+          [],
+        )}
         <Button
           style={{ marginTop: 16 }}
           onClick={() => {
@@ -119,13 +139,15 @@ export default function OptionEditor({
       <DialogActions style={{ padding: '0px 24px 24px 24px' }}>
         <Button
           disabled={
-            displayedOptions.filter(
+            filter(
+              displayedOptions,
               option => !option?.value || !option?.label,
             ).length > 0
           }
           showTooltip
           tooltipText={
-            displayedOptions.filter(
+            filter(
+              displayedOptions,
               option => !option?.value || !option?.label,
             ).length > 0
               ? intl.formatMessage({