Braze INTEG-2406: Allow to select entry fields #9574

joaquincasal · 2025-03-19T13:26:49Z

Purpose

First dialgo step: allow to select fields

Approach

State management was complex with this one. We store the information of whether a field is selected or not in the field instances, which is a react ref, not a state. Maintaining a second structure for the checkboxes was too complicatec. So we rerender the checkboxes when one changes.

There's one new FieldCheckbox which is the generic checkbox component. That component chooses from the field-specific checkboxes and renders it.
A handleToggle function is provided to checkboxes when they change, so the selected property of the fields can be updated.
The recursive logic of selecting child checkboxes is in the fields classes.

Screen.Recording.2025-03-20.at.13.19.32.mov

JuliRossi

Could you add a video or some screenshots showing the new component? It'll help a lot!

apps/braze/src/components/FieldCheckbox.tsx

apps/braze/src/fields/FieldsFactory.ts

JuliRossi · 2025-03-20T19:05:23Z

apps/braze/test/locations/Dialog.spec.tsx

Not for this PR but need to either add tests for the Dialog or delete this spec

JuliRossi · 2025-03-20T19:10:34Z

apps/braze/test/fields/ReferenceItem.spec.ts

+    const phone = new BasicField('phone', 'Phone', 'author', false);
+    phone.selected = true;
+    const item = new ReferenceItem(
+      '[0]',


Suggested change

'[0]',

'idReferenceItem',

JuliRossi · 2025-03-20T19:11:05Z

apps/braze/test/fields/ReferenceItem.spec.ts

+    const phone = new BasicField('phone', 'Phone', 'author', false);
+    phone.selected = true;
+    const item = new ReferenceItem(
+      '[0]',


Suggested change

'[0]',

'idReferenceItem',

JuliRossi · 2025-03-20T19:11:54Z

apps/braze/test/fields/ReferenceArrayField.spec.ts

+    const phone = new BasicField('phone', 'Phone', 'author', false);
+    phone.selected = true;
+    const item = new ReferenceItem(
+      '[0]',


Suggested change

'[0]',

'idReferenceItem',

JuliRossi · 2025-03-20T19:12:08Z

apps/braze/test/fields/ReferenceArrayField.spec.ts

+    const phone = new BasicField('phone', 'Phone', 'author', false);
+    phone.selected = true;
+    const item = new ReferenceItem(
+      '[0]',


Suggested change

'[0]',

'idReferenceItem',

JuliRossi · 2025-03-20T19:40:18Z

apps/braze/src/fields/ReferenceField.ts

+  select(): void {
+    this.selected = true;
+    this.fields.forEach((field) => field.select());
+    if (this.parent) {
+      this.parent.childSelected();
+    }
+  }
+
+  deselect(): void {
+    this.selected = false;
+    this.fields.forEach((field) => field.deselect());
+    if (this.parent) {
+      this.parent.childDeselected();
+    }
+  }


Suggested change

select(): void {

this.selected = true;

this.fields.forEach((field) => field.select());

if (this.parent) {

this.parent.childSelected();

}

}

deselect(): void {

this.selected = false;

this.fields.forEach((field) => field.deselect());

if (this.parent) {

this.parent.childDeselected();

}

}

toggle(bool): void {

this.selected = bool;

this.fields.forEach((field) => field.toggle());

if (this.parent) {

this.parent.childToggle(bool);

}

}

JuliRossi · 2025-03-20T19:40:53Z

apps/braze/src/fields/ReferenceField.ts

+  childSelected(): void {
+    if (this.fields.every((field) => field.selected)) {
+      this.selected = true;
+    }
+    if (this.parent) {
+      this.parent.childSelected();
+    }
+  }
+
+  childDeselected(): void {
+    if (this.fields.every((field) => !field.selected)) {
+      this.selected = false;
+    }
+    if (this.parent) {
+      this.parent.childDeselected();
+    }
+  }


Suggested change

childSelected(): void {

if (this.fields.every((field) => field.selected)) {

this.selected = true;

}

if (this.parent) {

this.parent.childSelected();

}

}

childDeselected(): void {

if (this.fields.every((field) => !field.selected)) {

this.selected = false;

}

if (this.parent) {

this.parent.childDeselected();

}

}

childSelectedToggle(bool): void {

if (this.fields.every((field) => field.selected)) {

this.selected = bool;

}

if (this.parent) {

this.parent.childSelected();

}

}

childDeselected(): void {

if (this.fields.every((field) => !field.selected)) {

this.selected = false;

}

if (this.parent) {

this.parent.childDeselected();

}

}

JuliRossi · 2025-03-20T19:49:01Z

apps/braze/src/fields/Entry.ts

+    return this.fields
+      .filter((field) => field.selected)


💭 We could extract this

- Replace field.select and field.deselect with field.toggle - Extracted repeated logic into entry.selectedFields - Updated fields ids in tests

* add base braze app * Add sidebar button (#9495) * [INTEG-2399] Braze app config screen (#9496) * adding main structure to configscreen * refactor: generic splitter * updating labels * adding configuration parameters on app instalation * adding tests fot the configuration screen * adding test to check if the link manage api key renders * adding test to check if the api key is set correctly * Fixing tests * removing comments * running prettier * adding placeholder --------- Co-authored-by: francobanfi <franco.banfi@external.contentful.com> * Braze liquid tags (#9556) * Assemble graphql query * Fix type for contentful-resolve-response * Refactor graphql query assembly * test for simple liquid tag generation * multiple liquid tag generation * test for asset liquid tag generation * new test for location and list of texts + refactor on basic field liquid tag generation test * removing test for list text * refactor to use a utils constant to generate location lat and long liquid tag * initial structure for polimorfic fields * Adding simple references and asset * Braze integ 2403 (#9545) * Display example response * Fix linter * Adding arrays of entries * refactor on the field type to generate the array liquid tags * new test and implementation for text array liquid tag generation * extracting methods refactor * skiping generation of rich text liquid tag * liquid tags for basic fields --------- Revert "addressing array types" This reverts commit d57c5e9. addressing array types Co-Authored-By: francobanfi <franco.banfi@external.contentful.com> Co-Authored-By: Juli Rossi <juliana.rossi@10pines.com> * Braze liquid tags complex array types (#9561) * addressing array types removing todo Revert "addressing array types" This reverts commit d57c5e9. addressing array types * test for nested entry references * array for basic fields * asset array liquid tag modification * Addressing tests errors * Fixing prettier * correcting pr comments --------- Co-authored-by: francobanfi <franco.banfi@external.contentful.com> * Setup dialog steps (#9557) * Setup dialog steps * Create components for each step * Allow to select locales * Complete types in tests * Add WizardFooter component * Braze app code block component (#9566) * wip code block component creation * Adding styles * Adding styles * styling code block * Updating styles * adding formating to the graphql response to ident the example json code block * Fixing indentation * Test * omiting richtext in the connected content call query and json * correcting an import * adding tests * changing the import of the react-syntax-highlighter * format import with prettier --------- Co-authored-by: Juli Rossi <juliana.rossi@10pines.com> * Braze refactor (#9565) * Add classes for each field type * Replace usage of field types with classes * Add and reorganize tests * Set max depth for nested fields * Separate Location and RichText from BasicField * Refactor: create Entry class * Add clarifying comments * Fix queries case (#9573) * Save content type id instead of name * Set first letter of content type to lowercase * Update apps/braze/src/utils.ts Co-authored-by: JuliRossi <juliana.rossi@10pines.com> --------- Co-authored-by: JuliRossi <juliana.rossi@10pines.com> * Braze app config validations (#9577) * config screen validation when api key is null * first version of the config screen validations * adding validation message to textinput * fixing test to work with validations * adding test for invalid api key * changes in the validations for the config screen * test to install the app when api key is invalid * using sdk to get the contentful base url * changing method name in config screen location * Braze app styles refactor (#9578) * changing the extensions for the style files * changing the extensions for the style files * correction of PR comments * Adding type password to the contentful api key input (#9588) * adding type password to the contentful api key input * removing braces * Braze app generate localize content (#9576) * WIP * Refactor * refactor * making better tests * Fix indentation * Fix initialization * Refactor * updating dependency (#9589) * Braze INTEG-2406: Allow to select entry fields (#9574) * Allow to select entry fields * Rename styles file * Apply margin to nested fields * Address PR comments * Display field name in checkbox * Address PR comments - Replace field.select and field.deselect with field.toggle - Extracted repeated logic into entry.selectedFields - Updated fields ids in tests * Update apps/braze/package.json Co-authored-by: Mitch Goudy <mgoudy91@gmail.com> * Update apps/braze/package.json --------- Co-authored-by: francobanfi <franco.banfi@external.contentful.com> Co-authored-by: JuliRossi <juliana.rossi@10pines.com> Co-authored-by: Franco Banfi <62450599+FBanfi@users.noreply.github.com> Co-authored-by: JuliRossi <juliana.rossi@external.contentful.com> Co-authored-by: Mitch Goudy <mgoudy91@gmail.com>

Allow to select entry fields

9f2f1cb

joaquincasal requested a review from a team as a code owner March 19, 2025 13:26

joaquincasal changed the title ~~Braze INTEG-2406: Allow to select entry fields~~ WIP: Braze INTEG-2406: Allow to select entry fields Mar 19, 2025

Rename styles file

f4b7b34

JuliRossi reviewed Mar 19, 2025

View reviewed changes

joaquincasal and others added 5 commits March 19, 2025 18:03

Apply margin to nested fields

3bd580b

Address PR comments

d4027e7

Display field name in checkbox

d583580

Merge branch 'braze-app' into braze-integ-2406

ad685c9

Merge branch 'braze-app' into braze-integ-2406

594b8ac

joaquincasal changed the title ~~WIP: Braze INTEG-2406: Allow to select entry fields~~ Braze INTEG-2406: Allow to select entry fields Mar 20, 2025

JuliRossi approved these changes Mar 20, 2025

View reviewed changes

Address PR comments

12be3d8

- Replace field.select and field.deselect with field.toggle - Extracted repeated logic into entry.selectedFields - Updated fields ids in tests

joaquincasal merged commit f6e3a5d into braze-app Mar 20, 2025
10 checks passed

joaquincasal deleted the braze-integ-2406 branch March 20, 2025 21:04

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Braze INTEG-2406: Allow to select entry fields #9574

Braze INTEG-2406: Allow to select entry fields #9574

joaquincasal commented Mar 19, 2025 •

edited

Loading

JuliRossi left a comment

JuliRossi Mar 20, 2025

JuliRossi Mar 20, 2025

JuliRossi Mar 20, 2025

JuliRossi Mar 20, 2025

JuliRossi Mar 20, 2025

JuliRossi Mar 20, 2025

JuliRossi Mar 20, 2025

JuliRossi Mar 20, 2025

Braze INTEG-2406: Allow to select entry fields #9574

Braze INTEG-2406: Allow to select entry fields #9574

Conversation

joaquincasal commented Mar 19, 2025 • edited Loading

Purpose

Approach

JuliRossi left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

joaquincasal commented Mar 19, 2025 •

edited

Loading