From 06f5279fc9311f59f0473629613fe9516b74ddca Mon Sep 17 00:00:00 2001
From: Bassel Kanso <basselkanso82@gmail.com>
Date: Thu, 14 Aug 2025 18:08:25 +0300
Subject: [PATCH] feat(CTB): add conditional fields form to custom fields
 advanced settings (#24175)

---
 .../src/components/FormModal/forms/forms.ts   | 21 +++++-
 .../FormModal/forms/tests/customField.test.ts | 66 ++++++++++++++++++-
 .../admin/src/components/TabForm.tsx          |  2 +-
 3 files changed, 84 insertions(+), 5 deletions(-)

diff --git a/packages/core/content-type-builder/admin/src/components/FormModal/forms/forms.ts b/packages/core/content-type-builder/admin/src/components/FormModal/forms/forms.ts
index e0e123c8df..354e1da233 100644
--- a/packages/core/content-type-builder/admin/src/components/FormModal/forms/forms.ts
+++ b/packages/core/content-type-builder/admin/src/components/FormModal/forms/forms.ts
@@ -84,7 +84,26 @@ export const forms = {
       },
       advanced({ customField, data, step, extensions, ...rest }: any) {
         // Default section with no fields
-        const sections: FormTypeOptions = [{ sectionTitle: null, items: [] }];
+        const sections: FormTypeOptions = [
+          { sectionTitle: null, items: [] },
+          {
+            sectionTitle: { id: 'form.attribute.condition.section', defaultMessage: 'Conditions' },
+            items: [
+              {
+                name: 'conditions',
+                type: 'condition-form',
+                intlLabel: {
+                  id: 'form.attribute.condition.label',
+                  defaultMessage: 'Visibility condition',
+                },
+                description: {
+                  id: 'form.attribute.condition.desc',
+                  defaultMessage: 'Show this field only when a boolean/enum condition matches.',
+                },
+              },
+            ],
+          },
+        ];
         const injectedInputs = extensions.getAdvancedForm(['attribute', customField.type], {
           data,
           type: customField.type,
diff --git a/packages/core/content-type-builder/admin/src/components/FormModal/forms/tests/customField.test.ts b/packages/core/content-type-builder/admin/src/components/FormModal/forms/tests/customField.test.ts
index a2a3d0f1e9..8c784fbebb 100644
--- a/packages/core/content-type-builder/admin/src/components/FormModal/forms/tests/customField.test.ts
+++ b/packages/core/content-type-builder/admin/src/components/FormModal/forms/tests/customField.test.ts
@@ -228,9 +228,29 @@ describe('customField forms', () => {
             },
           ],
         },
+        {
+          sectionTitle: {
+            id: 'form.attribute.condition.section',
+            defaultMessage: 'Conditions',
+          },
+          items: [
+            {
+              name: 'conditions',
+              type: 'condition-form',
+              intlLabel: {
+                id: 'form.attribute.condition.label',
+                defaultMessage: 'Visibility condition',
+              },
+              description: {
+                id: 'form.attribute.condition.desc',
+                defaultMessage: 'Show this field only when a boolean/enum condition matches.',
+              },
+            },
+          ],
+        },
       ];
 
-      expect(result.sections.length).toBe(1);
+      expect(result.sections.length).toBe(2);
       expect(result).toStrictEqual({ sections: expected });
     });
     it('adds a new advanced form section', () => {
@@ -251,6 +271,26 @@ describe('customField forms', () => {
           sectionTitle: null,
           items: [],
         },
+        {
+          sectionTitle: {
+            id: 'form.attribute.condition.section',
+            defaultMessage: 'Conditions',
+          },
+          items: [
+            {
+              name: 'conditions',
+              type: 'condition-form',
+              intlLabel: {
+                id: 'form.attribute.condition.label',
+                defaultMessage: 'Visibility condition',
+              },
+              description: {
+                id: 'form.attribute.condition.desc',
+                defaultMessage: 'Show this field only when a boolean/enum condition matches.',
+              },
+            },
+          ],
+        },
         {
           sectionTitle: {
             id: 'test',
@@ -273,7 +313,7 @@ describe('customField forms', () => {
         },
       ];
 
-      expect(result.sections.length).toBe(2);
+      expect(result.sections.length).toBe(3);
       expect(result).toStrictEqual({ sections: expected });
     });
 
@@ -310,6 +350,26 @@ describe('customField forms', () => {
           sectionTitle: null,
           items: [],
         },
+        {
+          sectionTitle: {
+            id: 'form.attribute.condition.section',
+            defaultMessage: 'Conditions',
+          },
+          items: [
+            {
+              name: 'conditions',
+              type: 'condition-form',
+              intlLabel: {
+                id: 'form.attribute.condition.label',
+                defaultMessage: 'Visibility condition',
+              },
+              description: {
+                id: 'form.attribute.condition.desc',
+                defaultMessage: 'Show this field only when a boolean/enum condition matches.',
+              },
+            },
+          ],
+        },
         {
           sectionTitle: {
             id: 'content-type-builder.modalForm.custom-fields.advanced.settings.extended',
@@ -332,7 +392,7 @@ describe('customField forms', () => {
         },
       ];
 
-      expect(result.sections.length).toBe(2);
+      expect(result.sections.length).toBe(3);
       expect(result).toStrictEqual({ sections: expected });
     });
   });
diff --git a/packages/core/content-type-builder/admin/src/components/TabForm.tsx b/packages/core/content-type-builder/admin/src/components/TabForm.tsx
index bf0d3311ca..37fc7a47e7 100644
--- a/packages/core/content-type-builder/admin/src/components/TabForm.tsx
+++ b/packages/core/content-type-builder/admin/src/components/TabForm.tsx
@@ -139,7 +139,7 @@ export const TabForm = ({
                               )}
                             </Typography>
                           )}
-                          <Tooltip description={noFieldsMessage}>
+                          <Tooltip label={noFieldsMessage}>
                             <Button
                               marginTop={
                                 currentCondition && Object.keys(currentCondition).length > 0 ? 0 : 4