From 6e42dbc4fa33e4ee7fd4a712088852879653f050 Mon Sep 17 00:00:00 2001
From: gowtham-balaganesh <gowtham.balaganesh@freshworks.com>
Date: Mon, 18 Nov 2024 23:14:22 +0530
Subject: [PATCH] Form builder Dynamic section changes - bug fixes (#953)

* fix: delete button is not shown for some of the conversation properties

* fix: don't show tooltip for default fields
---
 .../components/fb-field-dropdown.tsx          |  8 ++--
 .../form-builder/components/field-editor.tsx  | 43 +++++++++++--------
 .../components/form-builder/form-builder.tsx  |  3 +-
 .../custom-objects/src/utils/utils.ts         |  7 +++
 4 files changed, 38 insertions(+), 23 deletions(-)

diff --git a/packages/crayons-extended/custom-objects/src/components/form-builder/components/fb-field-dropdown.tsx b/packages/crayons-extended/custom-objects/src/components/form-builder/components/fb-field-dropdown.tsx
index e80e830f8..9c637a18f 100644
--- a/packages/crayons-extended/custom-objects/src/components/form-builder/components/fb-field-dropdown.tsx
+++ b/packages/crayons-extended/custom-objects/src/components/form-builder/components/fb-field-dropdown.tsx
@@ -401,11 +401,11 @@ export class FbFieldDropdown {
       dpSource.length > 0
         ? dpSource
             .map((dataItem, index) => {
-              const isNewChoice = !hasCustomProperty(dataItem, 'id');
+              const isNewChoice = !hasCustomProperty(dataItem, 'id'),
+                hasSection = !!dataItem?.choice_options?.section_name;
               const isChoiceDisabled =
-                !isNewChoice &&
-                (this.disabled || !!dataItem?.choice_options?.section_name);
-              if (isChoiceDisabled) {
+                !isNewChoice && (this.disabled || hasSection);
+              if (hasSection) {
                 return (
                   <fw-tooltip
                     placement='bottom'
diff --git a/packages/crayons-extended/custom-objects/src/components/form-builder/components/field-editor.tsx b/packages/crayons-extended/custom-objects/src/components/form-builder/components/field-editor.tsx
index a9c3898d6..4f8065f97 100644
--- a/packages/crayons-extended/custom-objects/src/components/form-builder/components/field-editor.tsx
+++ b/packages/crayons-extended/custom-objects/src/components/form-builder/components/field-editor.tsx
@@ -42,6 +42,8 @@ import {
   validateLevels,
 } from '../utils/form-builder-utils';
 
+import { parseBoolean } from '../../../utils/utils';
+
 @Component({
   tag: 'fw-field-editor',
   styleUrl: 'field-editor.scss',
@@ -301,7 +303,9 @@ export class FieldEditor {
         hasCustomProperty(objDP, 'isSection') && objDP?.isSection === true
           ? true
           : false;
-      this.editSectionField = objDP.field_options?.is_section_field;
+      this.editSectionField = parseBoolean(
+        objDP.field_options?.is_section_field
+      );
       // Currently supports dropdown format
       this.isDependentField = objDP.type === 'DEPENDENT_FIELD';
 
@@ -2032,7 +2036,7 @@ export class FieldEditor {
         }
       } else if (
         this.dataProvider.isSectionFieldMatch &&
-        this.dataProvider?.field_options?.is_section_field &&
+        parseBoolean(this.dataProvider?.field_options?.is_section_field) &&
         this.disabledSort
       ) {
         const elDefaultCustomTag = this.renderFwLabel({
@@ -2085,6 +2089,13 @@ export class FieldEditor {
       this.createDynamicSection ||
       this.sectionCreatedForAllChoices;
 
+    const showDeleteBtn =
+      !this.expanded &&
+      !this.isPrimaryField &&
+      !this.isDeleting &&
+      !this.isDefaultNonCustomField &&
+      !this.editSectionField;
+
     return (
       <Host tabIndex='-1'>
         <div
@@ -2162,22 +2173,18 @@ export class FieldEditor {
                 </fw-button>
               </fw-tooltip>
             )}
-            {!this.expanded &&
-              !this.isPrimaryField &&
-              !this.isDeleting &&
-              !this.isDefaultNonCustomField &&
-              !this.editSectionField && (
-                <fw-button
-                  part='delete-field-btn'
-                  size='icon'
-                  color='secondary'
-                  disabled={boolDisableDelete}
-                  class={`${strBaseClassName}-delete-button`}
-                  onFwClick={this.deleteFieldClickHandler}
-                >
-                  <fw-icon name='delete'></fw-icon>
-                </fw-button>
-              )}
+            {showDeleteBtn && (
+              <fw-button
+                part='delete-field-btn'
+                size='icon'
+                color='secondary'
+                disabled={boolDisableDelete}
+                class={`${strBaseClassName}-delete-button`}
+                onFwClick={this.deleteFieldClickHandler}
+              >
+                <fw-icon name='delete'></fw-icon>
+              </fw-button>
+            )}
             {/* {!this.expanded && this.isDefaultNonCustomField && (
               <span class={`${strBaseClassName}-lock-container`}>
                 <fw-icon name='lock'></fw-icon>
diff --git a/packages/crayons-extended/custom-objects/src/components/form-builder/form-builder.tsx b/packages/crayons-extended/custom-objects/src/components/form-builder/form-builder.tsx
index ea61c1ca4..a763b46d0 100644
--- a/packages/crayons-extended/custom-objects/src/components/form-builder/form-builder.tsx
+++ b/packages/crayons-extended/custom-objects/src/components/form-builder/form-builder.tsx
@@ -30,6 +30,7 @@ import presetSchema from './assets/form-builder-preset.json';
 import formMapper from './assets/form-mapper.json';
 import { debounce } from '../../utils/utils';
 import { TranslationController } from '../../global/Translation';
+import { parseBoolean } from '../../utils/utils';
 
 @Component({
   tag: 'fw-form-builder',
@@ -691,7 +692,7 @@ export class FormBuilder {
         return fields.reduce((results, field) => {
           // Check if the field label matches the search text
           if (field.label.toLowerCase().includes(strSearchableText)) {
-            if (field?.field_options?.is_section_field) {
+            if (parseBoolean(field?.field_options?.is_section_field)) {
               field.isSectionFieldMatch = true;
             }
             results.push(field);
diff --git a/packages/crayons-extended/custom-objects/src/utils/utils.ts b/packages/crayons-extended/custom-objects/src/utils/utils.ts
index 28f631793..36d2ee035 100644
--- a/packages/crayons-extended/custom-objects/src/utils/utils.ts
+++ b/packages/crayons-extended/custom-objects/src/utils/utils.ts
@@ -33,3 +33,10 @@ export const debounce = (fn, context, timeout = 1000) => {
     }, timeout);
   };
 };
+
+export const parseBoolean = (value: any) => {
+  if (typeof value === 'string') {
+    return value === 'true';
+  }
+  return !!value;
+};