From 4377a3972b8005d1e547f4d3d15cedd389cf118c Mon Sep 17 00:00:00 2001
From: mariana-furyk <58301139+mariana-furyk@users.noreply.github.com>
Date: Wed, 12 Jun 2024 23:14:56 +0300
Subject: [PATCH] Fix [Jobs] Filtering through custom labels isn't working as
 intended (#286)

---
 .../FormChipCell/FormChipCellView.js          | 27 ++++++-----
 .../FormChipCell/NewChipForm/NewChipForm.js   | 48 +++++++++++--------
 .../FormChipCell/NewChipForm/newChipForm.scss |  8 +++-
 src/lib/scss/mixins.scss                      |  4 ++
 src/lib/utils/validation.util.js              | 32 +++++++++++--
 5 files changed, 81 insertions(+), 38 deletions(-)

diff --git a/src/lib/components/FormChipCell/FormChipCellView.js b/src/lib/components/FormChipCell/FormChipCellView.js
index a0d3efaa..24003ac7 100644
--- a/src/lib/components/FormChipCell/FormChipCellView.js
+++ b/src/lib/components/FormChipCell/FormChipCellView.js
@@ -98,26 +98,29 @@ const FormChipCellView = React.forwardRef(
                 <div className={wrapperClassNames} ref={chipsWrapperRef}>
                   {fields.map((contentItem, index) => {
                     const chipData = fields.value[index]
+
                     return (
                       index < chips.visibleChips?.length && (
                         <div className="chip-block" key={chipData.id}>
                           <Tooltip
-                            hidden={editConfig.isEdit}
+                            hidden={editConfig.isEdit && !chipData.tooltip}
                             key={chipData.id}
                             template={
                               <TextTooltipTemplate
                                 text={
-                                  <span className="chip__content">
-                                    {chipData.key}
-                                    {!chipData.isKeyOnly && (
-                                      <>
-                                        <span className="chip__delimiter">
-                                          {chipData.delimiter ? chipData.delimiter : ':'}
-                                        </span>
-                                        {chipData.value}
-                                      </>
-                                    )}
-                                  </span>
+                                  chipData.tooltip || (
+                                    <span className="chip__content">
+                                      {chipData.key}
+                                      {!chipData.isKeyOnly && (
+                                        <>
+                                          <span className="chip__delimiter">
+                                            {chipData.delimiter ? chipData.delimiter : ':'}
+                                          </span>
+                                          {chipData.value}
+                                        </>
+                                      )}
+                                    </span>
+                                  )
                                 }
                               />
                             }
diff --git a/src/lib/components/FormChipCell/NewChipForm/NewChipForm.js b/src/lib/components/FormChipCell/NewChipForm/NewChipForm.js
index 855a3fb7..75bd6564 100644
--- a/src/lib/components/FormChipCell/NewChipForm/NewChipForm.js
+++ b/src/lib/components/FormChipCell/NewChipForm/NewChipForm.js
@@ -77,6 +77,7 @@ const NewChipForm = React.forwardRef(
       !editConfig.isKeyFocused && 'item_edited',
       !isEmpty(get(meta, ['error', chipIndex, 'key'], [])) &&
         !isEmpty(chipData.key) &&
+        !chip.disabled &&
         'item_edited_invalid'
     )
     const labelContainerClassName = classnames(
@@ -86,7 +87,8 @@ const NewChipForm = React.forwardRef(
       font && `edit-chip-container-font_${font}`,
       density && `edit-chip-container-density_${density}`,
       borderRadius && `edit-chip-container-border_${borderRadius}`,
-      (editConfig.isEdit || editConfig.isNewChip) && 'edit-chip-container_edited'
+      (editConfig.isEdit || editConfig.isNewChip) && 'edit-chip-container_edited',
+      chip.disabled && 'edit-chip-container_disabled edit-chip-container-font_disabled'
     )
     const labelValueClassName = classnames(
       'input-label-value',
@@ -98,7 +100,9 @@ const NewChipForm = React.forwardRef(
 
     const closeButtonClass = classnames(
       'item-icon-close',
-      (editConfig.chipIndex === chipIndex || !isEditable) && 'item-icon-close_hidden'
+      !chip.disabled &&
+        (editConfig.chipIndex === chipIndex || !isEditable) &&
+        'item-icon-close_hidden'
     )
 
     useLayoutEffect(() => {
@@ -110,14 +114,14 @@ const NewChipForm = React.forwardRef(
           !chipData.key || currentWidthKeyInput <= minWidthInput
             ? minWidthInput
             : currentWidthKeyInput >= maxWidthInput
-            ? maxWidthInput
-            : currentWidthKeyInput
+              ? maxWidthInput
+              : currentWidthKeyInput
         const valueFieldWidth =
           !chipData.value || currentWidthValueInput <= minWidthValueInput
             ? minWidthValueInput
             : currentWidthValueInput >= maxWidthInput
-            ? maxWidthInput
-            : currentWidthValueInput
+              ? maxWidthInput
+              : currentWidthValueInput
 
         setChipData((prevState) => ({
           ...prevState,
@@ -259,10 +263,10 @@ const NewChipForm = React.forwardRef(
               refInputKey.current.value.length <= 1
                 ? minWidthInput
                 : currentWidthKeyInput >= maxWidthInput
-                ? maxWidthInput
-                : currentWidthKeyInput > minWidthInput
-                ? currentWidthKeyInput + 2
-                : minWidthInput
+                  ? maxWidthInput
+                  : currentWidthKeyInput > minWidthInput
+                    ? currentWidthKeyInput + 2
+                    : minWidthInput
           }))
         } else {
           const currentWidthValueInput = getTextWidth(refInputValue.current)
@@ -274,10 +278,10 @@ const NewChipForm = React.forwardRef(
               refInputValue.current.value?.length <= 1
                 ? minWidthValueInput
                 : currentWidthValueInput >= maxWidthInput
-                ? maxWidthInput
-                : currentWidthValueInput > minWidthValueInput
-                ? currentWidthValueInput + 2
-                : minWidthValueInput
+                  ? maxWidthInput
+                  : currentWidthValueInput > minWidthValueInput
+                    ? currentWidthValueInput + 2
+                    : minWidthValueInput
           }))
         }
       },
@@ -329,13 +333,15 @@ const NewChipForm = React.forwardRef(
     return (
       <div
         className={labelContainerClassName}
-        onKeyDown={(event) => editConfig.isEdit && focusChip(event)}
+        onKeyDown={(event) => !chip.disabled && editConfig.isEdit && focusChip(event)}
         ref={refInputContainer}
       >
         <NewChipInput
           className={labelKeyClassName}
           disabled={
-            !isEditable || (!isNil(editConfig.chipIndex) && editConfig.chipIndex !== chipIndex)
+            chip.disabled ||
+            !isEditable ||
+            (!isNil(editConfig.chipIndex) && editConfig.chipIndex !== chipIndex)
           }
           name={keyName}
           onChange={handleOnChange}
@@ -349,7 +355,9 @@ const NewChipForm = React.forwardRef(
           <NewChipInput
             className={labelValueClassName}
             disabled={
-              !isEditable || (!isNil(editConfig.chipIndex) && editConfig.chipIndex !== chipIndex)
+              chip.disabled ||
+              !isEditable ||
+              (!isNil(editConfig.chipIndex) && editConfig.chipIndex !== chipIndex)
             }
             name={valueName}
             onChange={handleOnChange}
@@ -361,13 +369,15 @@ const NewChipForm = React.forwardRef(
         )}
 
         <button
+          disabled={chip.disabled}
           className={closeButtonClass}
-          onClick={(event) => handleRemoveChip(event, chipIndex)}
+          onClick={(event) => !chip.disabled && handleRemoveChip(event, chipIndex)}
         >
           <Close />
         </button>
 
-        {(editConfig.isKeyFocused ? !isEmpty(chipData.key) : !isEmpty(chipData.value)) &&
+        {!chip.disabled &&
+          (editConfig.isKeyFocused ? !isEmpty(chipData.key) : !isEmpty(chipData.value)) &&
           editConfig.chipIndex === chipIndex &&
           !isEmpty(get(meta, ['error', editConfig.chipIndex, selectedInput], [])) && (
             <OptionsMenu show={showValidationRules} ref={refInputContainer}>
diff --git a/src/lib/components/FormChipCell/NewChipForm/newChipForm.scss b/src/lib/components/FormChipCell/NewChipForm/newChipForm.scss
index cbea27b7..a800f1ea 100644
--- a/src/lib/components/FormChipCell/NewChipForm/newChipForm.scss
+++ b/src/lib/components/FormChipCell/NewChipForm/newChipForm.scss
@@ -56,15 +56,19 @@
       display: flex;
       align-items: center;
       justify-content: center;
-  
+
       &_hidden {
         visibility: hidden;
       }
-  
+
       svg {
         transform: scale(0.7);
       }
     }
+
+    &_disabled {
+      cursor: not-allowed;
+    }
   }
 
   &-separator {
diff --git a/src/lib/scss/mixins.scss b/src/lib/scss/mixins.scss
index 0db192d2..a0da67c5 100644
--- a/src/lib/scss/mixins.scss
+++ b/src/lib/scss/mixins.scss
@@ -307,6 +307,10 @@
     &_purple {
       @include editableChipFont($amethyst);
     }
+
+    &_disabled {
+      @include editableChipFont($spunPearl)
+    }
   } @else if $component == Chip {
     &_white {
       @include chipFont($white);
diff --git a/src/lib/utils/validation.util.js b/src/lib/utils/validation.util.js
index c5fbc078..9f3c6dc4 100644
--- a/src/lib/utils/validation.util.js
+++ b/src/lib/utils/validation.util.js
@@ -250,6 +250,15 @@ const generateRule = {
       label: ValidationConstants.REQUIRED.LABEL,
       pattern: new RegExp('\\S')
     }
+  },
+  checkForValidCustomLabels: (internalLabels) => {
+    return {
+      name: 'customLabels',
+      label: 'System-defined labels cannot be modified.',
+      pattern: (value) => {
+        return !internalLabels.includes(value)
+      }
+    }
   }
 }
 
@@ -372,7 +381,8 @@ const validationRules = {
       generateRule.beginEndWith('a-z A-Z 0-9'),
       generateRule.length({ max: 56 })
     ],
-    combobox: [generateRule.required()]
+    combobox: [generateRule.required()],
+    labels: [(internalLabels) => generateRule.checkForValidCustomLabels(internalLabels)]
   },
   project: {
     name: [
@@ -383,7 +393,10 @@ const validationRules = {
       generateRule.required()
     ],
     labels: {
-      key: commonRules.k8sLabels.key,
+      key: [
+        ...commonRules.k8sLabels.key,
+        (internalLabels) => generateRule.checkForValidCustomLabels(internalLabels)
+      ],
       value: commonRules.k8sLabels.value
     },
     params: {
@@ -418,7 +431,8 @@ const validationRules = {
       key: [
         generateRule.validCharactersWithPrefix('a-z A-Z 0-9 - _ .'),
         generateRule.beginEndWith('a-z A-Z 0-9'),
-        generateRule.length({ max: 75 })
+        generateRule.length({ max: 75 }),
+        (internalLabels) => generateRule.checkForValidCustomLabels(internalLabels)
       ],
       value: generateRule.length({ max: 255 })
     }
@@ -430,14 +444,22 @@ const validationRules = {
  * @function getValidationRules
  * @param {string} type - The property path to the list of validation rules.
  * @param {Array.<Object>} [additionalRules] - Additional rules to append.
- * @returns {Array.<Object>} the rule list of type `type` with `additionalRules` appended to it if provided.
+ * @param {Array.<Object>} [customData] - Additional data to be passed to the custom rule functions.
+ * @returns {Array.<Object>} The rule list of type `type` with `additionalRules` appended to it if provided.
  */
-export const getValidationRules = (type, additionalRules) => {
+export const getValidationRules = (type, additionalRules, customData) => {
   return lodash
     .chain(validationRules)
     .get(type)
     .defaultTo([])
     .cloneDeep()
+    .map((rule) => {
+      if (typeof rule === 'function') {
+        return rule(customData)
+      }
+
+      return rule
+    })
     .concat(lodash.defaultTo(additionalRules, []))
     .value()
 }