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
freshworks · Nov 18, 2024 · 6e42dbc · 6e42dbc
1 parent 1b14022
commit 6e42dbc
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 23 deletions.
diff --git a/...yons-extended/custom-objects/src/components/form-builder/components/fb-field-dropdown.tsx b/...yons-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/...s/crayons-extended/custom-objects/src/components/form-builder/components/field-editor.tsx b/...s/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
@@ -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
@@ -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;
+};