From 167dbc4939d2157d40eeab29fe663944051364e0 Mon Sep 17 00:00:00 2001
From: Valentin Serra <valentin.serra@camunda.com>
Date: Wed, 3 Jan 2024 14:27:24 +0100
Subject: [PATCH] chore(label correlation): fix naming

Related to #960
---
 .../src/render/components/form-fields/Checklist.js | 10 +++++-----
 .../src/render/components/form-fields/Radio.js     |  4 ++--
 .../src/render/components/form-fields/Taglist.js   | 14 +++++++-------
 .../form-fields/parts/SearchableSelect.js          |  6 +++---
 .../components/form-fields/parts/SimpleSelect.js   |  6 +++---
 .../src/render/components/util/sanitizerUtil.js    | 10 +++++-----
 .../render/hooks/useCleanupMultiSelectValues.js    |  6 +++---
 .../render/hooks/useCleanupSingleSelectValue.js    |  4 ++--
 ...belCorrelation.js => useGetLabelCorrelation.js} |  2 +-
 9 files changed, 31 insertions(+), 31 deletions(-)
 rename packages/form-js-viewer/src/render/hooks/{useLabelCorrelation.js => useGetLabelCorrelation.js} (92%)

diff --git a/packages/form-js-viewer/src/render/components/form-fields/Checklist.js b/packages/form-js-viewer/src/render/components/form-fields/Checklist.js
index c736dfecb..d6eea2435 100644
--- a/packages/form-js-viewer/src/render/components/form-fields/Checklist.js
+++ b/packages/form-js-viewer/src/render/components/form-fields/Checklist.js
@@ -2,13 +2,13 @@ import { useRef } from 'preact/hooks';
 import useOptionsAsync, { LOAD_STATES } from '../../hooks/useOptionsAsync';
 import useCleanupMultiSelectValues from '../../hooks/useCleanupMultiSelectValues';
 import classNames from 'classnames';
-import isDeepEqual from 'lodash/isEqual';
+import isEqual from 'lodash/isEqual';
 
 import Description from '../Description';
 import Errors from '../Errors';
 import Label from '../Label';
 
-import { sanitizeMultiSelectValue, isDeepIncluded } from '../util/sanitizerUtil';
+import { sanitizeMultiSelectValue, hasEqualValue } from '../util/sanitizerUtil';
 
 import { createEmptyOptions } from '../util/optionsUtil';
 
@@ -44,8 +44,8 @@ export default function Checklist(props) {
 
   const toggleCheckbox = (toggledValue) => {
 
-    const newValues = isDeepIncluded(toggledValue, values)
-      ? values.filter(value => !isDeepEqual(value, toggledValue))
+    const newValues = hasEqualValue(toggledValue, values)
+      ? values.filter(value => !isEqual(value, toggledValue))
       : [ ...values, toggledValue ];
 
     props.onChange({
@@ -93,7 +93,7 @@ export default function Checklist(props) {
       loadState == LOAD_STATES.LOADED && options.map((o, index) => {
 
         const itemDomId = `${domId}-${index}`;
-        const isChecked = isDeepIncluded(o.value, values);
+        const isChecked = hasEqualValue(o.value, values);
 
         return (
           <Label
diff --git a/packages/form-js-viewer/src/render/components/form-fields/Radio.js b/packages/form-js-viewer/src/render/components/form-fields/Radio.js
index 55506d316..bb1a5d55f 100644
--- a/packages/form-js-viewer/src/render/components/form-fields/Radio.js
+++ b/packages/form-js-viewer/src/render/components/form-fields/Radio.js
@@ -1,5 +1,5 @@
 import { useRef } from 'preact/hooks';
-import isDeepEqual from 'lodash/isEqual';
+import isEqual from 'lodash/isEqual';
 import useOptionsAsync, { LOAD_STATES } from '../../hooks/useOptionsAsync';
 import useCleanupSingleSelectValue from '../../hooks/useCleanupSingleSelectValue';
 import classNames from 'classnames';
@@ -86,7 +86,7 @@ export default function Radio(props) {
       loadState == LOAD_STATES.LOADED && options.map((option, index) => {
 
         const itemDomId = `${domId}-${index}`;
-        const isChecked = isDeepEqual(option.value, value);
+        const isChecked = isEqual(option.value, value);
 
         return (
           <Label
diff --git a/packages/form-js-viewer/src/render/components/form-fields/Taglist.js b/packages/form-js-viewer/src/render/components/form-fields/Taglist.js
index 9efa3f5e9..790c19c12 100644
--- a/packages/form-js-viewer/src/render/components/form-fields/Taglist.js
+++ b/packages/form-js-viewer/src/render/components/form-fields/Taglist.js
@@ -3,7 +3,7 @@ import { useMemo, useRef, useState } from 'preact/hooks';
 import { useService } from '../../hooks';
 import useOptionsAsync, { LOAD_STATES } from '../../hooks/useOptionsAsync';
 import useCleanupMultiSelectValues from '../../hooks/useCleanupMultiSelectValues';
-import { useLabelCorrelation } from '../../hooks/useLabelCorrelation';
+import { useGetLabelCorrelation } from '../../hooks/useGetLabelCorrelation';
 
 import classNames from 'classnames';
 
@@ -14,8 +14,8 @@ import Errors from '../Errors';
 import Label from '../Label';
 import SkipLink from './parts/SkipLink';
 
-import { sanitizeMultiSelectValue, isDeepIncluded } from '../util/sanitizerUtil';
-import isDeepEqual from 'lodash/isEqual';
+import { sanitizeMultiSelectValue, hasEqualValue } from '../util/sanitizerUtil';
+import isEqual from 'lodash/isEqual';
 
 import { createEmptyOptions } from '../util/optionsUtil';
 
@@ -66,7 +66,7 @@ export default function Taglist(props) {
     onChange: props.onChange
   });
 
-  const correlateLabel = useLabelCorrelation(options);
+  const getLabelCorrelation = useGetLabelCorrelation(options);
 
   const hasOptionsLeft = useMemo(() => options.length > values.length, [ options.length, values.length ]);
 
@@ -78,7 +78,7 @@ export default function Taglist(props) {
 
     const isValidFilteredOption = (option) => {
       const filterMatches = option.label.toLowerCase().includes(filter.toLowerCase());
-      return filterMatches && !isDeepIncluded(option.value, values);
+      return filterMatches && !hasEqualValue(option.value, values);
     };
 
     return options.filter(isValidFilteredOption);
@@ -98,7 +98,7 @@ export default function Taglist(props) {
   };
 
   const deselectValue = (value) => {
-    const newValues = values.filter((v) => !isDeepEqual(v, value));
+    const newValues = values.filter((v) => !isEqual(v, value));
     props.onChange({ value: newValues, field });
   };
 
@@ -201,7 +201,7 @@ export default function Taglist(props) {
               return (
                 <div class={ classNames('fjs-taglist-tag', { 'fjs-disabled': disabled, 'fjs-readonly': readonly }) } onMouseDown={ (e) => e.preventDefault() }>
                   <span class="fjs-taglist-tag-label">
-                    { correlateLabel(v) }
+                    { getLabelCorrelation(v) }
                   </span>
                   { (!disabled && !readonly) && <button
                     type="button"
diff --git a/packages/form-js-viewer/src/render/components/form-fields/parts/SearchableSelect.js b/packages/form-js-viewer/src/render/components/form-fields/parts/SearchableSelect.js
index 82e6d42ae..3f2cf54cb 100644
--- a/packages/form-js-viewer/src/render/components/form-fields/parts/SearchableSelect.js
+++ b/packages/form-js-viewer/src/render/components/form-fields/parts/SearchableSelect.js
@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'preact/hooks';
 import useOptionsAsync, { LOAD_STATES } from '../../../hooks/useOptionsAsync';
-import { useLabelCorrelation } from '../../../hooks/useLabelCorrelation';
+import { useGetLabelCorrelation } from '../../../hooks/useGetLabelCorrelation';
 import { useService } from '../../../hooks';
 import useCleanupSingleSelectValue from '../../../hooks/useCleanupSingleSelectValue';
 
@@ -43,9 +43,9 @@ export default function SearchableSelect(props) {
     onChange: props.onChange
   });
 
-  const correlateLabel = useLabelCorrelation(options);
+  const getLabelCorrelation = useGetLabelCorrelation(options);
 
-  const label = useMemo(() => value && correlateLabel(value), [ value, correlateLabel ]);
+  const label = useMemo(() => value && getLabelCorrelation(value), [ value, getLabelCorrelation ]);
 
   // whenever we change the underlying value, set the label to it
   useEffect(() => { setFilter(label); }, [ label ]);
diff --git a/packages/form-js-viewer/src/render/components/form-fields/parts/SimpleSelect.js b/packages/form-js-viewer/src/render/components/form-fields/parts/SimpleSelect.js
index d24157d21..b2521308b 100644
--- a/packages/form-js-viewer/src/render/components/form-fields/parts/SimpleSelect.js
+++ b/packages/form-js-viewer/src/render/components/form-fields/parts/SimpleSelect.js
@@ -3,7 +3,7 @@ import classNames from 'classnames';
 import { findIndex } from 'min-dash';
 import useOptionsAsync, { LOAD_STATES } from '../../../hooks/useOptionsAsync';
 import useCleanupSingleSelectValue from '../../../hooks/useCleanupSingleSelectValue';
-import { useLabelCorrelation } from '../../../hooks/useLabelCorrelation';
+import { useGetLabelCorrelation } from '../../../hooks/useGetLabelCorrelation';
 
 import XMarkIcon from '../icons/XMark.svg';
 import AngelDownIcon from '../icons/AngelDown.svg';
@@ -39,9 +39,9 @@ export default function SimpleSelect(props) {
     onChange: props.onChange
   });
 
-  const correlateLabel = useLabelCorrelation(options);
+  const getLabelCorrelation = useGetLabelCorrelation(options);
 
-  const valueLabel = useMemo(() => value && correlateLabel(value), [ value, correlateLabel ]);
+  const valueLabel = useMemo(() => value && getLabelCorrelation(value), [ value, getLabelCorrelation ]);
 
   const setValue = useCallback((option) => {
     props.onChange({ value: option && option.value || null, field });
diff --git a/packages/form-js-viewer/src/render/components/util/sanitizerUtil.js b/packages/form-js-viewer/src/render/components/util/sanitizerUtil.js
index c05db410b..443b795d2 100644
--- a/packages/form-js-viewer/src/render/components/util/sanitizerUtil.js
+++ b/packages/form-js-viewer/src/render/components/util/sanitizerUtil.js
@@ -1,4 +1,4 @@
-import isDeepEqual from 'lodash/isEqual';
+import isEqual from 'lodash/isEqual';
 import { DATETIME_SUBTYPES } from '../../../util/constants/DatetimeConstants';
 import { isDateInputInformationMatching, isDateTimeInputInformationSufficient, isInvalidDateString, parseIsoTime } from './dateTimeUtil';
 import { getOptionsData, normalizeOptionsData } from './optionsUtil';
@@ -20,13 +20,13 @@ export function sanitizeDateTimePickerValue(options) {
   return value;
 }
 
-export function isDeepIncluded(value, array) {
+export function hasEqualValue(value, array) {
 
   if (!Array.isArray(array)) {
     return false;
   }
 
-  return array.some(element => isDeepEqual(value, element));
+  return array.some(element => isEqual(value, element));
 }
 
 export function sanitizeSingleSelectValue(options) {
@@ -38,7 +38,7 @@ export function sanitizeSingleSelectValue(options) {
 
   try {
     const validValues = normalizeOptionsData(getOptionsData(formField, data)).map(v => v.value);
-    return isDeepIncluded(value, validValues) ? value : null;
+    return hasEqualValue(value, validValues) ? value : null;
   } catch (error) {
 
     // use default value in case of formatting error
@@ -56,7 +56,7 @@ export function sanitizeMultiSelectValue(options) {
 
   try {
     const validValues = normalizeOptionsData(getOptionsData(formField, data)).map(v => v.value);
-    return value.filter(v => isDeepIncluded(v, validValues));
+    return value.filter(v => hasEqualValue(v, validValues));
   } catch (error) {
 
     // use default value in case of formatting error
diff --git a/packages/form-js-viewer/src/render/hooks/useCleanupMultiSelectValues.js b/packages/form-js-viewer/src/render/hooks/useCleanupMultiSelectValues.js
index d3146acaa..5c8bbde32 100644
--- a/packages/form-js-viewer/src/render/hooks/useCleanupMultiSelectValues.js
+++ b/packages/form-js-viewer/src/render/hooks/useCleanupMultiSelectValues.js
@@ -1,6 +1,6 @@
 import { useEffect } from 'preact/hooks';
 import { LOAD_STATES } from './useOptionsAsync';
-import { isDeepIncluded } from '../components/util/sanitizerUtil';
+import { hasEqualValue } from '../components/util/sanitizerUtil';
 
 export default function(props) {
 
@@ -20,12 +20,12 @@ export default function(props) {
     }
 
     const optionValues = options.map(o => o.value);
-    const hasValuesNotInOptions = values.some(v => !isDeepIncluded(v, optionValues));
+    const hasValuesNotInOptions = values.some(v => !hasEqualValue(v, optionValues));
 
     if (hasValuesNotInOptions) {
       onChange({
         field,
-        value: values.filter(v => isDeepIncluded(v, optionValues))
+        value: values.filter(v => hasEqualValue(v, optionValues))
       });
     }
 
diff --git a/packages/form-js-viewer/src/render/hooks/useCleanupSingleSelectValue.js b/packages/form-js-viewer/src/render/hooks/useCleanupSingleSelectValue.js
index df16a0d24..553e435e1 100644
--- a/packages/form-js-viewer/src/render/hooks/useCleanupSingleSelectValue.js
+++ b/packages/form-js-viewer/src/render/hooks/useCleanupSingleSelectValue.js
@@ -1,6 +1,6 @@
 import { useEffect } from 'preact/hooks';
 import { LOAD_STATES } from './useOptionsAsync';
-import { isDeepIncluded } from '../components/util/sanitizerUtil';
+import { hasEqualValue } from '../components/util/sanitizerUtil';
 
 export default function(props) {
 
@@ -20,7 +20,7 @@ export default function(props) {
     }
 
     const optionValues = options.map(o => o.value);
-    const hasValueNotInOptions = value && !isDeepIncluded(value, optionValues);
+    const hasValueNotInOptions = value && !hasEqualValue(value, optionValues);
 
     if (hasValueNotInOptions) {
       onChange({
diff --git a/packages/form-js-viewer/src/render/hooks/useLabelCorrelation.js b/packages/form-js-viewer/src/render/hooks/useGetLabelCorrelation.js
similarity index 92%
rename from packages/form-js-viewer/src/render/hooks/useLabelCorrelation.js
rename to packages/form-js-viewer/src/render/hooks/useGetLabelCorrelation.js
index e1dbb5100..609ac8e0e 100644
--- a/packages/form-js-viewer/src/render/hooks/useLabelCorrelation.js
+++ b/packages/form-js-viewer/src/render/hooks/useGetLabelCorrelation.js
@@ -5,7 +5,7 @@ import { isObject } from 'min-dash';
  * This hook allows us to retrieve the label from a value in linear time by caching it in a map
  * @param {Array} options
  */
-export function useLabelCorrelation(options) {
+export function useGetLabelCorrelation(options) {
 
   // This allows us to retrieve the label from a value in linear time
   const labelMap = useMemo(() => Object.assign({}, ...options.map((o) => ({ [_getValueHash(o.value)]:  o.label }))), [ options ]);