Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(ui): enhance menu behavior and item visibility #4419

Merged
merged 1 commit into from
Dec 11, 2024

Conversation

luannmoreira
Copy link
Member

Description

This PR enhances the behavior and visibility management of menu items in the AppLayout component. The changes focus on dynamically enabling or disabling items, improving child filtering logic, and ensuring more accurate state handling.
Key Changes

Dynamic Menu Item States:
    Introduced a disableItem function to disable menu items based on specific conditions (e.g., namespaces or user permissions).
    Applied the :disabled attribute to relevant menu items.

Filtered Child Items:
    Added a getFilteredChildren function to exclude hidden child menu items from rendering.

Namespace Handling:
    Updated the namespacedInstance computed property to better control the visibility of the "Billing" submenu.
    Simplified and replaced hasNamespace with namespacedInstance logic.

Reactive Items:
    Converted items from a static array to a reactive object for better state management.

Snapshot Updates:
    Updated AppLayout.spec.ts.snap to reflect changes in the rendering of disabled menu items and filtered children.

Impact

Improved User Experience:
    Disabled items provide clearer feedback for unavailable actions.
    Hidden items no longer render unnecessarily, reducing UI clutter.
Simplified Logic:
    Consolidation of visibility and state-handling logic into reusable functions.

Testing

All related unit tests and snapshots have been updated to ensure compatibility with the changes.
Manual testing was conducted to verify the following scenarios:
    Items are correctly disabled based on namespace conditions.
    Hidden child items are properly excluded from the DOM.
    "Billing" submenu visibility reflects namespace state and environment variables.

How to Test

Navigate to the application and verify that items like "Billing" adhere to the updated visibility rules.
Check that menu items are disabled or enabled as expected based on user permissions or other conditions.
Ensure that hidden child items are no longer visible in the DOM or interactable.

Fixes

This PR fixes #4417

Added disableItem function to dynamically disable menu items based on
conditions.

Integrated getFilteredChildren to filter out hidden child items in menus.

Updated namespacedInstance logic for determining the visibility of the
"Billing" submenu.

Converted items to a reactive object for improved reactivity.

Adjusted snapshot tests to reflect updated menu rendering and visibility rules.
@luannmoreira luannmoreira added kind/bug Something isn't working area/ui javascript Pull requests that update Javascript code status/good-to-merge labels Dec 11, 2024
@luannmoreira luannmoreira self-assigned this Dec 11, 2024
@luannmoreira luannmoreira requested a review from a team as a code owner December 11, 2024 12:54
@gustavosbarreto gustavosbarreto merged commit 78aa99d into master Dec 11, 2024
15 of 16 checks passed
@gustavosbarreto gustavosbarreto deleted the fix/navdrawer-submenu-validation branch December 11, 2024 14:16
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area/ui javascript Pull requests that update Javascript code kind/bug Something isn't working status/good-to-merge
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Incorrect Enabled Fields in Sidebar for User Without Namespace
2 participants