fix(edit-content): side panel UX fixes for new Edit Contentlet mode#35671
Open
adrianjm-dotCMS wants to merge 9 commits into
Open
fix(edit-content): side panel UX fixes for new Edit Contentlet mode#35671adrianjm-dotCMS wants to merge 9 commits into
adrianjm-dotCMS wants to merge 9 commits into
Conversation
…state model - Updated `DotContentState` model to make `hasLiveVersion` optional. - Added tooltips to sidebar tabs in `dot-edit-content-sidebar.component.html` for better user guidance. - Integrated `TooltipModule` in the sidebar component to support the new tooltip functionality. - Replaced the status tag with a contentlet status chip in `dot-edit-content-sidebar-information.component.html` for improved visual representation. - Updated tests to reflect changes in the sidebar component and its interactions. This commit improves the user experience in the edit content sidebar by providing additional context through tooltips and enhancing the content state model.
…grate binary option selector - Deleted the `DotEditContentSidebarUntranslatedLocaleComponent` and its associated HTML, SCSS, and spec files. - Updated the `locales.feature.ts` to utilize `DotBinaryOptionSelectorComponent` for handling untranslated locales. - Enhanced the language properties for better user guidance on untranslated content. - Adjusted the binary option selector to include descriptions and improved handling of locale options. This refactor streamlines the handling of untranslated locales by replacing the previous component with a more flexible binary option selector, improving the user experience in the edit content sidebar.
…5-side-panel-fixes-edit-contentlet
This comment was marked as resolved.
This comment was marked as resolved.
github-actions
Bot
added
Area : Backend
- Replace @ViewChild with viewChild() signal syntax in DotCopyButtonComponent - Refactor copy state from string comparison to typed signal ('idle'|'copied'|'error') - Fix setTimeout race on rapid clicks by storing and clearing the reset timer - Add closeOnEscape: true to untranslated locale dialog - Fix asymmetric country guard (countryCode instead of country) in locale label - Add isoCode fallback to languageLabel; use languageLabel in both label and message - Remove DotIsoCodePipe (no longer needed after using languageLabel) - Add BinaryOptionDialogData interface to type DynamicDialogConfig.data contract - Add satisfies BinaryOptionDialogData to dialog data for compile-time check - Delete dead ContentletStatusTagPipe and its spec (no production usages) - Add tests for optional description and optional icon in DotBinaryOptionSelectorComponent - Add JSDoc to OPTION, BINARY_OPTION, BinaryOptionDialogData interfaces Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Add DestroyRef.onDestroy cleanup for reset timer in DotCopyButtonComponent - Change $resetTimer type to undefined (avoids clearTimeout(null) TS issue) - Update BinaryOptionDialogData.description JSDoc to reflect that it accepts both i18n keys and pre-translated strings (consistent with label/message) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…nce locale handling - Simplified the rendering of the contentlet status chip in the sidebar component by removing unnecessary conditional checks. - Updated the `DotContentletStatusChipComponent` to handle null states more gracefully, displaying a default "New" status when no state is provided. - Enhanced the locale feature to return null if the current locale is not set, preventing potential errors in locale-dependent functionality. These changes improve the clarity and reliability of the contentlet status display and locale management in the edit content sidebar.
…hLocale The null guard added to switchLocale requires currentLocale to be populated, which only happens after flushEffects() runs the onInit effect. Replace tick() with flushEffects() in the two untranslated locale tests. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Updated the `BinaryOptionDialogData.description` JSDoc to clarify that it accepts i18n keys rendered via the dm pipe. - Refactored the `DotContentletStatusChipComponent` to utilize the dm pipe for the "New" label, improving localization support. - Adjusted the `DotCopyButtonComponent` to use a static icon instead of a computed property for better performance and clarity in tooltip behavior. These changes improve the localization handling and performance of the UI components.
adrianjm-dotCMS
requested review from
KevinDavilaDotCMS,
hmoreras,
nicobytes,
oidacra,
rjvelazco and
zJaaal
- Added a `data-testid` attribute to the description paragraph in the `DotBinaryOptionSelectorComponent` template for improved testability. - Updated corresponding unit tests to query the description using the new `data-testid` selector. These changes enhance the component's testability and maintainability.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #35535
Four UX improvements to the sidebar panel in the new Edit Contentlet mode.
identify each tab without labels.
<p-tag>+ContentletStatusTagPipewith the shared<dot-contentlet-status-chip>component (already used in Content Drive). The old pipe has been deleted. The chip now also handles thenullstate, rendering a "New" badge for unsaved contentlets.DotEditContentSidebarUntranslatedLocaleComponenthas been removed and replaced with the sharedDotBinaryOptionSelectorComponent. The dialog now shows locale-aware copy options (e.g. "Copy from English (US)" vs "Start from scratch") with a description text above the cards.Summary
Screen.Recording.2026-05-12.at.3.32.51.PM.mov
Side panel UX improvements for the new Edit Contentlet mode:
pTooltipto sidebar tab icons (Information, History, Comments, Settings) so users know what each tab does.<p-tag>+ContentletStatusTagPipein the sidebar information panel with<dot-contentlet-status-chip>for consistent styling. MadehasLiveVersionoptional inDotContentStateto allow directDotCMSContentletassignment.DotEditContentSidebarUntranslatedLocaleComponentwith the sharedDotBinaryOptionSelectorComponent. The dialog now shows locale-specific copy (e.g. "Copy from en-US" vs "Start from scratch") and includes a description text. The old component has been deleted.Changes
dot-edit-content-sidebar.component.html/ts— tab tooltips + TooltipModuledot-copy-button.component.ts/html/spec.ts— programmatic tooltip show on click, dynamic icondot-edit-content-sidebar-information.component.ts/html— swap tag for status chipdot-content-state.model.ts—hasLiveVersionmade optionallocales.feature.ts— openDotBinaryOptionSelectorComponentdirectly with locale-aware copydot-binary-option-selector.component.ts/html— optionalicon, optionaldescriptionpropdot-edit-content-sidebar-untranslated-locale/— deleted (no longer used)Language.properties— 4 new i18n keys for tab tooltips + updated untranslated locale keysTest plan