[7418] Update tokenized prop name by jvega190 · Pull Request #4686 · craftercms/studio-ui

jvega190 · 2025-10-24T23:00:47Z

Update to tokenized prop name in descriptors and in serializer. In legacy system the prop name is tokenize, and when saving into html the property is tokenized. Updated to match legacy.

craftercms/craftercms#7418

Summary by CodeRabbit

Refactor
- Renamed the tokenization option from "Tokenized" to "Tokenize" across content-type controls and serializers.
- Consolidated common field options (readonly, required, tokenize) for consistent UI presentation and validation.
- Preserved labels and behavior so indexing hints and form behavior remain unchanged for end users.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

coderabbitai · 2025-10-24T23:04:15Z

Walkthrough

Centralized common field descriptors into a new commonDescriptors.ts, replaced many inline boolean/flag field definitions with commonFieldPropertiesDescriptors references, and renamed the field key tokenized → tokenize across descriptors and the FormsEngine XML serializer.

Changes

Cohort / File(s)	Summary
New shared descriptors `ui/app/src/components/ContentTypeManagement/descriptors/controls/commonDescriptors.ts`	Added a new module exporting shared sections and descriptor maps including `commonFieldPropertiesDescriptors` (defines `tokenize`, `readonly`, `required`) and `commonControlFieldsDescriptors`.
Tokenize rename & descriptor updates `ui/app/src/components/ContentTypeManagement/descriptors/controls/{input,internalName,linkInput,numericInput}.ts`	Renamed `tokenized` → `tokenize` in sections and `fields`; replaced inline tokenization/readonly/required definitions with `commonFieldPropertiesDescriptors['tokenize'
Descriptor files switching to shared descriptors `ui/app/src/components/ContentTypeManagement/descriptors/controls/{awsFileUpload,checkbox,checkboxGroup,dateTime,disabled,dropdown,fileName,forceHttps,imagePicker,linkTextarea,linkedDropdown,localeSelector,nodeSelector,pageNavOrder,rte,textarea,time,transcodedVideoPicker,videoPicker,...}`	Replaced many inline `readonly`/`required` (and similar) field definitions with references to `commonFieldPropertiesDescriptors['readonly'
Removed exports from controls index `ui/app/src/components/ContentTypeManagement/descriptors/controls/index.ts`	Removed previously-exported shared descriptors/sections (moved to `commonDescriptors.ts`); left `controlDescriptors` mapping intact.
Import path updates in views/util `ui/app/src/components/ContentTypeManagement/{components/EditTypeView.tsx,components/TypeDetailsView.tsx,utils.ts}`	Updated imports to source moved symbols from `./descriptors/controls/commonDescriptors` instead of `./descriptors/controls`.
Forms engine serializer update `ui/app/src/components/FormsEngine/lib/valueSerializers.ts`	Updated runtime check from `field.properties.tokenized.value` → `field.properties.tokenize.value` so serialization reads the renamed property while still emitting the same XML attribute key.

Sequence Diagram(s)

(omitted)

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

[7418] FE2 - Serializers/retrievers/validators updates, i18n updates in validator messages #4672 — Touches tokenization-related descriptor fields and serializer logic; likely to conflict with the tokenized→tokenize rename.
[7418] Type Builder #4451 — Similar refactor introducing shared descriptors and tokenize renames; overlaps strongly with these changes.
[7418] Use XML values on fields types in control descriptors #4688 — Modifies many same descriptor files (type/field changes) and may interact with the centralized descriptors introduced here.

Suggested reviewers

rart
sumerjabri

Pre-merge checks and finishing touches

❌ Failed checks (1 inconclusive)

Check name	Status	Explanation	Resolution
Description check	❓ Inconclusive	The PR description explains the purpose and rationale but is minimal and does not follow the provided template which requests a ticket reference or full description.	Consider expanding the description to follow the template structure and provide more context about the implementation approach and scope of changes.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and specifically references the main change: updating the tokenized property name across the codebase.
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.

✨ Finishing touches

📝 Generate docstrings

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment

📜 Recent review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 14297db and 6128514.

📒 Files selected for processing (28)

ui/app/src/components/ContentTypeManagement/components/EditTypeView.tsx
ui/app/src/components/ContentTypeManagement/components/TypeDetailsView.tsx
ui/app/src/components/ContentTypeManagement/descriptors/controls/awsFileUpload.ts
ui/app/src/components/ContentTypeManagement/descriptors/controls/checkbox.ts
ui/app/src/components/ContentTypeManagement/descriptors/controls/checkboxGroup.ts
ui/app/src/components/ContentTypeManagement/descriptors/controls/commonDescriptors.ts
ui/app/src/components/ContentTypeManagement/descriptors/controls/dateTime.ts
ui/app/src/components/ContentTypeManagement/descriptors/controls/disabled.ts
ui/app/src/components/ContentTypeManagement/descriptors/controls/dropdown.ts
ui/app/src/components/ContentTypeManagement/descriptors/controls/fileName.ts
ui/app/src/components/ContentTypeManagement/descriptors/controls/forceHttps.ts
ui/app/src/components/ContentTypeManagement/descriptors/controls/imagePicker.ts
ui/app/src/components/ContentTypeManagement/descriptors/controls/index.ts
ui/app/src/components/ContentTypeManagement/descriptors/controls/input.ts
ui/app/src/components/ContentTypeManagement/descriptors/controls/internalName.ts
ui/app/src/components/ContentTypeManagement/descriptors/controls/linkInput.ts
ui/app/src/components/ContentTypeManagement/descriptors/controls/linkTextarea.ts
ui/app/src/components/ContentTypeManagement/descriptors/controls/linkedDropdown.ts
ui/app/src/components/ContentTypeManagement/descriptors/controls/localeSelector.ts
ui/app/src/components/ContentTypeManagement/descriptors/controls/nodeSelector.ts
ui/app/src/components/ContentTypeManagement/descriptors/controls/numericInput.ts
ui/app/src/components/ContentTypeManagement/descriptors/controls/pageNavOrder.ts
ui/app/src/components/ContentTypeManagement/descriptors/controls/rte.ts
ui/app/src/components/ContentTypeManagement/descriptors/controls/textarea.ts
ui/app/src/components/ContentTypeManagement/descriptors/controls/time.ts
ui/app/src/components/ContentTypeManagement/descriptors/controls/transcodedVideoPicker.ts
ui/app/src/components/ContentTypeManagement/descriptors/controls/videoPicker.ts
ui/app/src/components/ContentTypeManagement/utils.ts

✅ Files skipped from review due to trivial changes (1)

ui/app/src/components/ContentTypeManagement/components/EditTypeView.tsx

🚧 Files skipped from review as they are similar to previous changes (2)

ui/app/src/components/ContentTypeManagement/descriptors/controls/numericInput.ts
ui/app/src/components/ContentTypeManagement/descriptors/controls/internalName.ts

🧰 Additional context used

🧠 Learnings (8)

📓 Common learnings

Learnt from: jvega190
Repo: craftercms/studio-ui PR: 4451
File: ui/app/src/components/ContentTypeManagement/utils.ts:253-264
Timestamp: 2025-08-27T23:08:05.012Z
Learning: In the ContentTypeManagement utils.ts reverseTypeFieldValuesObject function, properties that are not available in the descriptor values should be removed/cleaned up, not preserved. This keeps the field configuration in sync with the current descriptor definitions and prevents accumulation of obsolete properties.

📚 Learning: 2025-08-27T23:08:05.012Z

Learnt from: jvega190
Repo: craftercms/studio-ui PR: 4451
File: ui/app/src/components/ContentTypeManagement/utils.ts:253-264
Timestamp: 2025-08-27T23:08:05.012Z
Learning: In the ContentTypeManagement utils.ts reverseTypeFieldValuesObject function, properties that are not available in the descriptor values should be removed/cleaned up, not preserved. This keeps the field configuration in sync with the current descriptor definitions and prevents accumulation of obsolete properties.

Applied to files:

ui/app/src/components/ContentTypeManagement/descriptors/controls/checkbox.ts
ui/app/src/components/ContentTypeManagement/descriptors/controls/nodeSelector.ts
ui/app/src/components/ContentTypeManagement/descriptors/controls/input.ts
ui/app/src/components/ContentTypeManagement/descriptors/controls/dropdown.ts
ui/app/src/components/ContentTypeManagement/descriptors/controls/videoPicker.ts
ui/app/src/components/ContentTypeManagement/descriptors/controls/pageNavOrder.ts
ui/app/src/components/ContentTypeManagement/components/TypeDetailsView.tsx
ui/app/src/components/ContentTypeManagement/descriptors/controls/linkInput.ts
ui/app/src/components/ContentTypeManagement/descriptors/controls/time.ts
ui/app/src/components/ContentTypeManagement/descriptors/controls/imagePicker.ts
ui/app/src/components/ContentTypeManagement/descriptors/controls/checkboxGroup.ts
ui/app/src/components/ContentTypeManagement/descriptors/controls/fileName.ts
ui/app/src/components/ContentTypeManagement/descriptors/controls/linkTextarea.ts
ui/app/src/components/ContentTypeManagement/descriptors/controls/transcodedVideoPicker.ts
ui/app/src/components/ContentTypeManagement/descriptors/controls/dateTime.ts
ui/app/src/components/ContentTypeManagement/utils.ts
ui/app/src/components/ContentTypeManagement/descriptors/controls/awsFileUpload.ts
ui/app/src/components/ContentTypeManagement/descriptors/controls/rte.ts
ui/app/src/components/ContentTypeManagement/descriptors/controls/index.ts
ui/app/src/components/ContentTypeManagement/descriptors/controls/commonDescriptors.ts
ui/app/src/components/ContentTypeManagement/descriptors/controls/localeSelector.ts
ui/app/src/components/ContentTypeManagement/descriptors/controls/disabled.ts
ui/app/src/components/ContentTypeManagement/descriptors/controls/textarea.ts
ui/app/src/components/ContentTypeManagement/descriptors/controls/linkedDropdown.ts
ui/app/src/components/ContentTypeManagement/descriptors/controls/forceHttps.ts

📚 Learning: 2025-10-22T17:00:22.544Z

Learnt from: jvega190
Repo: craftercms/studio-ui PR: 4658
File: ui/app/src/components/FormsEngine/controls/Checkbox.tsx:21-21
Timestamp: 2025-10-22T17:00:22.544Z
Learning: In the CrafterCMS Studio UI forms engine, ContentTypeField properties with type='boolean' are converted from strings to actual boolean values during ContentType parsing in contentTypes.ts (lines 274-278). Therefore, properties like 'readonly' with type='boolean' will have boolean values, not string values, at runtime.

Applied to files:

ui/app/src/components/ContentTypeManagement/descriptors/controls/checkbox.ts
ui/app/src/components/ContentTypeManagement/descriptors/controls/checkboxGroup.ts

📚 Learning: 2025-12-11T21:19:00.860Z

Learnt from: jvega190
Repo: craftercms/studio-ui PR: 4708
File: ui/app/src/components/PreviewAudiencesPanel/PreviewAudiencesPanel.tsx:72-74
Timestamp: 2025-12-11T21:19:00.860Z
Learning: The EmptyState component's title prop in ui/app/src/components/EmptyState accepts type `ReactNode | MessageDescriptor`, allowing both React elements like <FormattedMessage> and MessageDescriptor objects to be passed.

Applied to files:

ui/app/src/components/ContentTypeManagement/descriptors/controls/checkbox.ts
ui/app/src/components/ContentTypeManagement/descriptors/controls/nodeSelector.ts
ui/app/src/components/ContentTypeManagement/descriptors/controls/input.ts
ui/app/src/components/ContentTypeManagement/descriptors/controls/pageNavOrder.ts
ui/app/src/components/ContentTypeManagement/descriptors/controls/linkInput.ts
ui/app/src/components/ContentTypeManagement/descriptors/controls/time.ts
ui/app/src/components/ContentTypeManagement/descriptors/controls/linkTextarea.ts
ui/app/src/components/ContentTypeManagement/descriptors/controls/localeSelector.ts
ui/app/src/components/ContentTypeManagement/descriptors/controls/disabled.ts
ui/app/src/components/ContentTypeManagement/descriptors/controls/textarea.ts

📚 Learning: 2025-10-16T16:09:27.232Z

Learnt from: jvega190
Repo: craftercms/studio-ui PR: 4663
File: ui/app/src/components/FormsEngine/controls/NodeSelector.tsx:0-0
Timestamp: 2025-10-16T16:09:27.232Z
Learning: In the NodeSelector component (ui/app/src/components/FormsEngine/controls/NodeSelector.tsx), when looking up items in itemsByPath, use value[index].key rather than value[index].include. For embedded components, the key is used since they never reach handleViewItem (they're always editable). For shared components/assets, key and include are the same path, so key works correctly for the lookup.

Applied to files:

ui/app/src/components/ContentTypeManagement/descriptors/controls/nodeSelector.ts
ui/app/src/components/ContentTypeManagement/components/TypeDetailsView.tsx

📚 Learning: 2025-09-23T15:24:08.254Z

Learnt from: rart
Repo: craftercms/studio-ui PR: 0
File: :0-0
Timestamp: 2025-09-23T15:24:08.254Z
Learning: In SectionAccordion.tsx, the AccordionSummary component should have data-section-id={section.id} (not section.title) to match what TableOfContents click handlers expect to find. The section.id is the unique identifier while section.title is the display text.

Applied to files:

ui/app/src/components/ContentTypeManagement/components/TypeDetailsView.tsx

📚 Learning: 2025-12-11T21:18:51.227Z

Learnt from: jvega190
Repo: craftercms/studio-ui PR: 4708
File: ui/app/src/components/PreviewAudiencesPanel/PreviewAudiencesPanel.tsx:72-74
Timestamp: 2025-12-11T21:18:51.227Z
Learning: When reviewing components in ui/app/src/components, verify that props expecting a title (e.g., EmptyState) allow ReactNode or MessageDescriptor (e.g., React elements like FormattedMessage and MessageDescriptor objects). Ensure TS types reflect ReactNode | MessageDescriptor where appropriate, and audit usages to avoid passing incompatible values. Update tests or PropTypes/TypeScript types as needed to maintain correct typing and rendering behavior.

Applied to files:

ui/app/src/components/ContentTypeManagement/components/TypeDetailsView.tsx

📚 Learning: 2025-10-24T18:12:08.208Z

Learnt from: jvega190
Repo: craftercms/studio-ui PR: 4648
File: ui/app/src/components/FormsEngine/controls/Time.tsx:57-69
Timestamp: 2025-10-24T18:12:08.208Z
Learning: The Time control in ui/app/src/components/FormsEngine/controls/Time.tsx does not have an `allowPastDate` property in its descriptor, unlike the DateTime control. This is an intentional design difference between the two controls.

Applied to files:

ui/app/src/components/ContentTypeManagement/descriptors/controls/time.ts
ui/app/src/components/ContentTypeManagement/descriptors/controls/dateTime.ts

🧬 Code graph analysis (20)

ui/app/src/components/ContentTypeManagement/descriptors/controls/checkbox.ts (1)

ui/app/src/components/ContentTypeManagement/descriptors/controls/nodeSelector.ts (1)

ui/app/src/components/ContentTypeManagement/descriptors/controls/input.ts (2)

ui/app/src/components/ContentTypeManagement/descriptors/controls/dropdown.ts (1)

ui/app/src/components/ContentTypeManagement/descriptors/controls/videoPicker.ts (1)

ui/app/src/components/ContentTypeManagement/descriptors/controls/pageNavOrder.ts (1)

ui/app/src/components/ContentTypeManagement/descriptors/controls/linkInput.ts (1)

ui/app/src/components/ContentTypeManagement/descriptors/controls/imagePicker.ts (1)

ui/app/src/components/ContentTypeManagement/descriptors/controls/checkboxGroup.ts (1)

ui/app/src/components/ContentTypeManagement/descriptors/controls/fileName.ts (1)

ui/app/src/components/ContentTypeManagement/descriptors/controls/linkTextarea.ts (1)

ui/app/src/components/ContentTypeManagement/descriptors/controls/transcodedVideoPicker.ts (1)

ui/app/src/components/ContentTypeManagement/descriptors/controls/dateTime.ts (2)

ui/app/src/components/ContentTypeManagement/descriptors/controls/awsFileUpload.ts (1)

ui/app/src/components/ContentTypeManagement/descriptors/controls/rte.ts (1)

ui/app/src/components/ContentTypeManagement/descriptors/controls/localeSelector.ts (1)

ui/app/src/components/ContentTypeManagement/descriptors/controls/disabled.ts (1)

ui/app/src/components/ContentTypeManagement/descriptors/controls/textarea.ts (2)

ui/app/src/components/ContentTypeManagement/descriptors/controls/linkedDropdown.ts (2)

ui/app/src/components/ContentTypeManagement/descriptors/controls/forceHttps.ts (1)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)

GitHub Check: Codacy Static Code Analysis
GitHub Check: Travis CI - Pull Request

🔇 Additional comments (27)

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

rart

Can we refactor tokenize and possible other common control props for reuse? Perhaps export them out of the common control props file?

…o 7418-tokenized # Conflicts: # ui/app/src/components/ContentTypeManagement/descriptors/controls/input.ts # ui/app/src/components/ContentTypeManagement/descriptors/controls/internalName.ts # ui/app/src/components/ContentTypeManagement/descriptors/controls/linkInput.ts # ui/app/src/components/ContentTypeManagement/descriptors/controls/numericInput.ts

[7418] Update tokenized prop name

4b736c1

jvega190 requested a review from rart as a code owner October 24, 2025 23:00

rart requested changes Nov 13, 2025

View reviewed changes

jvega190 added 2 commits December 22, 2025 16:09

[7418] Create commonDescriptors to reuse

6128514

jvega190 requested a review from rart December 23, 2025 14:58

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[7418] Update tokenized prop name#4686

[7418] Update tokenized prop name#4686
jvega190 wants to merge 3 commits intocraftercms:developfrom
jvega190:7418-tokenized

jvega190 commented Oct 24, 2025 •

edited by coderabbitai bot

Loading

Uh oh!

coderabbitai bot commented Oct 24, 2025 •

edited

Loading

Uh oh!

rart left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

jvega190 commented Oct 24, 2025 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Uh oh!

coderabbitai bot commented Oct 24, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Sequence Diagram(s)

Estimated code review effort

Possibly related PRs

Suggested reviewers

Pre-merge checks and finishing touches

Uh oh!

rart left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

jvega190 commented Oct 24, 2025 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Oct 24, 2025 •

edited

Loading