Merge branch 'next' into pause-sla-timer

packages/crayons-extended/custom-objects/CHANGELOG.md

@@ -3,6 +3,19 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.4.0-beta.9](https://github.com/freshworks/crayons/compare/@freshworks/crayons-custom-objects@1.4.0-beta.8...@freshworks/crayons-custom-objects@1.4.0-beta.9) (2024-03-18)
+
+### Bug Fixes
+
+- adds cloned fieldBuilderOptions and rel for anchor ([9e64bda](https://github.com/freshworks/crayons/commit/9e64bdafd78d9721a5254e10c00b658996a30ad9))
+- adds two level dependency with validation on various steps ([de17335](https://github.com/freshworks/crayons/commit/de173358823e399f6fe6054cf615d7eb80bdf68a))
+- validating fields length ([10649c3](https://github.com/freshworks/crayons/commit/10649c3d2bd8eb494c032e0cf398e4ae742edb93))
+- validating the duplicate before removing the dictEl ([43a0e3d](https://github.com/freshworks/crayons/commit/43a0e3d2ae84d76173c5acad38634d70e013b8a0))
+
+### Features
+
+- [FC-120856]: Enables two level dependent field ([9280495](https://github.com/freshworks/crayons/commit/92804951336ae0a1005494623bea1a43ee4b8629))
+
 ## [1.4.0-beta.8](https://github.com/freshworks/crayons/compare/@freshworks/crayons-custom-objects@1.4.0-beta.7...@freshworks/crayons-custom-objects@1.4.0-beta.8) (2024-01-17)
 
 ### Bug Fixes

packages/crayons-extended/custom-objects/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@freshworks/crayons-custom-objects",
   "author": "Freshworks Inc",
-  "version": "1.4.0-beta.8",
+  "version": "1.4.0-beta.9",
   "description": "Custom Objects with Crayons",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",

packages/crayons-extended/custom-objects/src/components/form-builder/components/fb-field-dropdown.tsx

@@ -146,6 +146,13 @@ export class FbFieldDropdown {
             : [...arrChoices];
       }
       this.validateMaximumChoiceLimits();
+    } else if (
+      this.dataProvider &&
+      this.dataProvider.length === 0 &&
+      this.level > 2 &&
+      this.isDependentField
+    ) {
+      this.errorType = '';
     } else {
       this.errorType = i18nText('errors.minimum');
     }

packages/crayons-extended/custom-objects/src/components/form-builder/components/field-editor.tsx

@@ -35,6 +35,10 @@ import {
   updateFieldAttributes,
   updateLevelSelection,
   updateRequiredOnAllFields,
+  validateLevels,
+  getFieldBasedOnLevel,
+  getModifiedEl,
+  removeIsNewFromField,
 } from '../utils/form-builder-utils';
 
 @Component({
@@ -550,7 +554,27 @@ export class FieldEditor {
   /**
    * function to check the dropdown error values
    */
-  private validateDropdownErrors = (arrDropdownValues, emptyCheck = false) => {
+  private validateDropdownErrors = (
+    arrDropdownValues,
+    emptyCheck = false,
+    level = 0
+  ) => {
+    if (level > 2 && this.isDependentField) {
+      const levelToDelete = validateLevels(
+        this.dictInteractiveElements,
+        this.fieldBuilderOptions,
+        {
+          CHOICES: 'choices_level_',
+          NAME: this.DEP_NAME_KEY,
+          LABEL: this.DEP_LABEL_KEY,
+        }
+      );
+
+      if (levelToDelete !== 0) {
+        return true;
+      }
+    }
+
     if (!arrDropdownValues || arrDropdownValues.length < 1) {
       this.formErrorMessage = i18nText('errors.minimum');
       return false;
@@ -618,14 +642,26 @@ export class FieldEditor {
     };
 
     if (this.isDependentField) {
-      objValues['fields'] = deepCloneObject(this.fieldBuilderOptions.fields);
-    }
+      // Validate name
+      if (this.validateDuplicateErrors(this.DEP_LABEL_KEY)) {
+        this.duplicateError = true;
+        this.showErrors = true;
+        return;
+      }
 
-    // Validate name
-    if (this.validateDuplicateErrors(this.DEP_LABEL_KEY)) {
-      this.duplicateError = true;
-      this.showErrors = true;
-      return;
+      // Validate levels and update dictInteractive
+      const elements = getModifiedEl(
+        this.dictInteractiveElements,
+        deepCloneObject(this.fieldBuilderOptions),
+        {
+          CHOICES: 'choices_level_',
+          NAME: this.DEP_NAME_KEY,
+          LABEL: this.DEP_LABEL_KEY,
+        }
+      );
+
+      objValues['fields'] = elements.fieldEl;
+      this.dictInteractiveElements = elements.dictEl;
     }
 
     // this.showErrors = false;
@@ -708,7 +744,8 @@ export class FieldEditor {
               deepCloneObject(elInteractive.dataProvider) || [];
             boolValidForm = this.validateDropdownErrors(
               arrDropdownValues,
-              true
+              true,
+              level
             );
 
             if (boolValidForm) {
@@ -760,6 +797,10 @@ export class FieldEditor {
       return;
     }
 
+    if (this.isDependentField) {
+      objValues = removeIsNewFromField(objValues);
+    }
+
     if (checkIfCustomToggleField(this.productName, this.dataProvider.name)) {
       objValues['choices'] = [...this.dataProvider.choices];
     }
@@ -862,15 +903,23 @@ export class FieldEditor {
     switch (strType) {
       case 'DELETE':
         this.errorType = event.detail.errorType;
-        this.validateDropdownErrors(event.detail.value);
+        this.validateDropdownErrors(
+          event.detail.value,
+          false,
+          event.detail.level
+        );
         if (this.isDependentField) {
           this.fieldBuilderOptions = deleteChoicesInFields(this, event);
           delete this.dependentLevels[`level_${event.detail.level}`];
         }
         break;
       case 'VALUE_CHANGE':
         this.errorType = event.detail.errorType;
-        this.validateDropdownErrors(event.detail.value);
+        this.validateDropdownErrors(
+          event.detail.value,
+          false,
+          event.detail.level
+        );
         if (this.isDependentField) {
           this.fieldBuilderOptions = updateChoicesInFields(this, event);
         }
@@ -886,7 +935,11 @@ export class FieldEditor {
         this.dependentLevels = updateLevelSelection(this, event);
         break;
       case 'VALIDATE_DROPDOWN':
-        this.validateDropdownErrors(event.detail.value);
+        this.validateDropdownErrors(
+          event.detail.value,
+          false,
+          event.detail.level
+        );
         break;
       default:
         break;
@@ -988,15 +1041,19 @@ export class FieldEditor {
       this.isValuesChanged = true;
     }
 
+    const field = this.isDependentField
+      ? getFieldBasedOnLevel(this.fieldBuilderOptions, level)
+      : {};
     const dictElName = `${this.DEP_LABEL_KEY}${level}`;
+
     const strInputValue = !isBlur
       ? event?.detail?.value || ''
       : event?.target?.['value']?.trim() || '';
     const isValidValue = strInputValue && strInputValue !== '';
 
     let strInternalName = '';
     let boolInternalNameUpdated = false;
-    if (!this.isInternalNameEdited && this.isNewField) {
+    if ((!this.isInternalNameEdited && this.isNewField) || field.isNew) {
       strInternalName = deriveInternalNameFromLabel(strInputValue);
       boolInternalNameUpdated = true;
     }
@@ -1044,7 +1101,7 @@ export class FieldEditor {
         );
       }
 
-      if (!this.isInternalNameEdited) {
+      if (!this.isInternalNameEdited || field.isNew) {
         attr['name'] = strInternalName;
       }
     }
@@ -1415,7 +1472,9 @@ export class FieldEditor {
             value={strInputInternalName}
             errorText={strInputError}
             warningText={strInputWarning}
-            disabled={!this.isNewField || !boolEditAllowed}
+            disabled={
+              !this.isNewField || !boolEditAllowed || this.isDependentField
+            }
             state={
               boolShowNameError
                 ? 'error'
@@ -1598,6 +1657,7 @@ export class FieldEditor {
                     <a
                       href={this.dependentFieldLink}
                       target='_blank'
+                      rel='noopener noreferrer'
                       class={`${strBaseClassName}-link`}
                     >
                       {i18nText('moreOnDependentFields')}

packages/crayons-extended/custom-objects/src/components/form-builder/form-builder.tsx

@@ -23,6 +23,7 @@ import {
   isPrimaryFieldType,
   isUniqueField,
   getDefaultDependentLevels,
+  checkAndAppendLevel3,
 } from './utils/form-builder-utils';
 import presetSchema from './assets/form-builder-preset.json';
 import formMapper from './assets/form-mapper.json';
@@ -290,6 +291,7 @@ export class FormBuilder {
               },
               internalNamePrefix
             );
+            arrFields[i1] = checkAndAppendLevel3(arrFields[i1]);
           }
 
           const objField = arrFields[i1];

packages/crayons-extended/custom-objects/src/components/form-builder/utils/form-builder-utils.ts

@@ -607,12 +607,102 @@ export function updateRequiredOnAllFields(data, isRequired) {
   function updateRequiredAttribute(field) {
     field.required = isRequired;
 
-    if (hasCustomProperty(field, 'fields') && field.fields.length) {
+    if (hasCustomProperty(field, 'fields') && field.fields.length > 0) {
       updateRequiredAttribute(field.fields[0]);
     }
   }
 
-  updateRequiredAttribute(data.fields[0]);
+  updateRequiredAttribute(data?.fields[0]);
 
   return data;
 }
+
+function removeFieldsWithEmptyChoices(data, deleteLevel) {
+  // Iterate over the structure recursively
+  function clean(data) {
+    // Check if current object has a 'fields' property that is an array
+    if (data.fields && data.fields.length > 0) {
+      // Filter out objects with an empty 'choices' array
+      if (deleteLevel === data.fields[0].field_options.level) {
+        data.fields = [];
+      }
+
+      // Recursively apply the cleaning process to the remaining fields
+      data.fields.forEach((field) => clean(field));
+    }
+  }
+
+  // Start the cleaning process with the provided data
+  clean(data);
+}
+
+export function validateLevels(dictEl, fieldEl, KEYS) {
+  let deleteLevel = 0;
+
+  function validateField(fields) {
+    const level = fields[0]?.field_options?.level;
+    if (
+      dictEl[`${KEYS.CHOICES}${level}`].dataProvider.length === 0 &&
+      !dictEl[`${KEYS.NAME}${level}`].value &&
+      !dictEl[`${KEYS.LABEL}${level}`].value &&
+      parseInt(level, 10) > 2
+    ) {
+      delete dictEl[`${KEYS.CHOICES}${level}`];
+      delete dictEl[`${KEYS.NAME}${level}`];
+      delete dictEl[`${KEYS.LABEL}${level}`];
+      deleteLevel = level;
+    }
+
+    if (fields && fields[0] && fields[0].fields && fields[0].fields.length) {
+      validateField(fields[0].fields);
+    }
+  }
+
+  validateField(fieldEl.fields);
+
+  return deleteLevel;
+}
+
+export function getModifiedEl(dictEl, fieldEl, KEYS) {
+  const level = validateLevels(dictEl, fieldEl, KEYS);
+  if (level > 0) {
+    removeFieldsWithEmptyChoices(fieldEl, level);
+  }
+
+  return { dictEl, fieldEl: fieldEl.fields };
+}
+
+export function checkAndAppendLevel3(fields) {
+  const field = getFieldBasedOnLevel(fields, 2);
+
+  if (field.fields && field.fields.length === 0) {
+    field.fields = [
+      {
+        type: 'DROPDOWN',
+        field_options: { level: '3', dependent: 'true' },
+        choices: [],
+        id: createUUID(),
+        isNew: true,
+      },
+    ];
+  }
+
+  return fields;
+}
+
+export function removeIsNewFromField(fieldEl) {
+  function validateField(fields) {
+    const field = fields[0];
+    if (field.isNew) {
+      delete field.isNew;
+    }
+
+    if (field.fields && field.fields.length > 0) {
+      validateField(field.fields);
+    }
+  }
+
+  validateField(fieldEl.fields);
+
+  return fieldEl;
+}