fix(sidebar): wrap long menu item label in sidebar

[ciiay]

Description

• Modified Backstage SidebarItem styles to allow long menu item labels to wrap instead of being cut off.
• Refactored code to simplify the codebase and improve sidebar menu display, especially on smaller screens.

Figma reference

Which issue(s) does this PR fix

• Fixes RHIDP-6010

PR acceptance criteria

Please make sure that the following steps are complete:

• GitHub Actions are completed and successful
• Unit Tests are updated and passing
• E2E Tests are updated and passing
• Documentation is updated if necessary (requirement for new features)
• Add a screenshot if the change is UX/UI related

Screenshot

[openshift-ci]

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by:
Once this PR has been reviewed and has the lgtm label, please assign albarbaro for approval. For more information see the Code Review Process.

The full list of commands accepted by this bot can be found here.

Needs approval from an approver in each of these files:

• OWNERS

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

[github-actions]

The image is available at:

• quay.io/rhdh-community/rhdh:pr-2566 or
• quay.io/rhdh-community/rhdh:pr-2566-26acf423

[ciiay]

/test e2e-tests

[github-actions]

The image is available at:

• quay.io/rhdh-community/rhdh:pr-2566 or
• quay.io/rhdh-community/rhdh:pr-2566-d3979651

[ciiay]

/test e2e-tests

[ciiay]

/test e2e-tests

[ciiay]

/test e2e-tests

[ShiranHi]

Thank you, @ciiay, for this change! I have two questions:

1. Can we ensure the text at the second and third levels is aligned?

2. Is there a reason for the large padding below the second level?

[ciiay]

1. Can we ensure the text at the second and third levels is aligned?

Fixed it, thanks.

2. Is there a reason for the large padding below the second level?

It is not a gap, just end of the menu list. If I collapse the Administration dropdown it'll be empty space only. I moved "Docs" out of its parent menu item so you can see clearer how it is.

[github-actions]

The image is available at:

• quay.io/rhdh-community/rhdh:pr-2566 or
• quay.io/rhdh-community/rhdh:pr-2566-1cd3eb1d

[ciiay]

/test e2e-tests

[ciiay]

/test e2e-tests

[its-mitesh-kumar]

Tested the PR on cluster .
A. What I observed Littlelonglearningpathweneedtomange is getting trimmed followed by dots but same words with space ie. Little long learning path we need to mange getting wrapped to multiple lines .
B. Do we support grand child in menu items , everything seems fine , only icon is not visible if we have some grand child of menu item .

1. With below config

dynamicPlugins:
      frontend:
        default.main-menu-items:
          menuItems:
            default.home:
              title: Home
              icon: home
            default.list:
              title: References
              icon: bookmarks
            default.my-group:
              parent: default.list
            default.learning-path:
              title: asdfghjgfdsaDZFGHJBJHGZESRDTFYGUKHJDSADFZXGCHVNDHBGSZ≈CVBNMDFGHJKLHFGHJKL;KJHFGCUYYLIUYTKTDTGIKJH,GFDJFGDCGFILUYUYTRDXC,JHGBFDCJKHGCFGCJKKH
              parent: default.list
            default.homepage:
              title: HomePage 123
              icon: home
              parent: default.home
            default.create:
              title: Long Createing Title abcdefghjkllooiuysdfgvndfbhvjsbfs fcbdhjgvbhjkdsbchjdsbvjhdsb
              icon: add
              parent: default.home

2. with this config

dynamicPlugins:
      frontend:
        default.main-menu-items:
          menuItems:
            default.home:
              title: Home
              icon: home
            default.list:
              title: References
              icon: bookmarks
            default.my-group:
              parent: default.list
            default.learning-path:
              title: asdfghjgfdsaDZFGHJBJHGZESRDTFYGUKHJDSADFZXGCHVNDHBGSZ
              parent: default.my-group
            default.homepage:
              title: HomePage 123
              icon: home
              parent: default.home
            default.create:
              title: Long Creating Title Lets see 
              icon: add
              parent: default.homepage

[its-mitesh-kumar]

Please see the comment #2566 (comment)

[ciiay]

Hi @its-mitesh-kumar , thanks for the review.

A. What I observed Littlelonglearningpathweneedtomange is getting trimmed followed by dots but same words with space ie. Little long learning path we need to mange getting wrapped to multiple lines .

Fixed. Extreme long label or long words should be edge case that we don't need to worry about too much.

B. Do we support grand child in menu items , everything seems fine , only icon is not visible if we have some grand child of menu item .

This is designed like this, the third level menu items don't have an icon.

Hi @ShiranHi , I noticed that the previous Figma link you shared now always redirects to the cover link. I saw you update it in Bug ticket 188, and I attached that link to the PR description. It used to work before but now whatever I do it only goes to the cover page. Can you share the design page of sidebar menu here? And I wonder if there's a better way to navigate from the cover page to a specific page. I tried to figure it out from this RHDH core page, but I couldn't find it anywhere 😭

[github-actions]

The image is available at:

• quay.io/rhdh-community/rhdh:pr-2566 or
• quay.io/rhdh-community/rhdh:pr-2566-9667ceba

[ShiranHi]

Hi @ShiranHi , I noticed that the previous Figma link you shared now always redirects to the cover link. I saw you update it in Bug ticket 188, and I attached that link to the PR description. It used to work before but now whatever I do it only goes to the cover page. Can you share the design page of sidebar menu here? And I wonder if there's a better way to navigate from the cover page to a specific page. I tried to figure it out from this RHDH core page, but I couldn't find it anywhere 😭

Oh, sorry for that! Here’s the Figma link to the menu page.

You can try scrolling through the page list on the left in Figma to find all the components:

video.mov

[ciiay]

Thank you @ShiranHi for the recording 💯 I must have over looked "Main navigation" from the Pages list. I was a bit confused by the wording "Pages" and thought sidebar didn't below to any pages. And tried searching with "Sidebar" but got no luck 😅