Keep flyout menu closed when section just got collapsed

What does this MR do and why?

Improves the new flyout menus for the new nav, based on these feedback comments:

• !124863 (comment 1458809901)
• !124863 (comment 1462142465)

Now, when clicking a section title to close its expanded items below, the flyout menu won't appear anymore. It will appear again after the mouse moved away and back onto the section title.

Screenshots or screen recordings

Before	After
recording_1690293035	recording_1690292963

How to set up and validate locally

• These flyout menus were initially not part of the navigation redesign. They are currently still behind their own feature flag, so in your gdk rails console, run:

Feature.enable(:super_sidebar_flyout_menus)

• Then, make sure you have the new navigation toggled on in your user dropdown.
• Browse to any project or group, or the admin page, because their sidebars all have a lot of expandable sections.
• Hover over a collapsed section. You should see the flyout (also on master)
• Click the section title to open it up. The flyout menu disappears (also on master)
• Click the section title again to close it. The flyout should also stay hidden ()
• Hover away and back onto the same section title. It shows its flyout again.

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

• I have evaluated the MR acceptance checklist for this MR.

Related to #415343 (closed)

changed milestone to %16.3

added Category:Navigation & Settings Navigation redesign UX devopsmanage featureenhancement frontend groupfoundations sectiondev typefeature + 1 deleted label

assigned to @thutterer

	2 Warnings
	0cdacd41: The commit subject must contain at least 3 words. For more information, take a look at our Commit message guidelines.
	featureaddition and featureenhancement merge requests normally have a documentation change. Consider adding a documentation update or confirming the documentation plan with the Technical Writer counterpart. For more information, see: The Handbook page on merge request types. The definition of done documentation.

	1 Message
	CHANGELOG missing: If you want to create a changelog entry for GitLab FOSS, add the Changelog trailer to the commit message you want to add to the changelog. If you want to create a changelog entry for GitLab EE, also add the EE: true trailer to your commit message. If this merge request doesn't need a CHANGELOG entry, feel free to ignore this message.

Reviewer roulette

Changes that require review have been detected!

Please refer to the table below for assigning reviewers and maintainers suggested by Danger in the specified category:

Category	Reviewer	Maintainer
frontend	Ammar Alakkad (@aalakkad) (UTC+3, 1 hour ahead of @thutterer)	Frédéric Caplette (@f_caplette) (UTC-4, 6 hours behind @thutterer)
UX	Kevin Comoli (@kcomoli) (UTC+2, same timezone as @thutterer)	Maintainer review is optional for UX

To spread load more evenly across eligible reviewers, Danger has picked a candidate for each review slot, based on their timezone. Feel free to override these selections if you think someone else would be better-suited or use the GitLab Review Workload Dashboard to find other available reviewers.

To read more on how to use the reviewer roulette, please take a look at the Engineering workflow and code review guidelines. Please consider assigning a reviewer or maintainer who is a domain expert in the area of the merge request.

Once you've decided who will review this merge request, assign them as a reviewer! Danger does not automatically notify them for you.

If needed, you can retry the danger-review job that generated this comment.

Generated by Danger

@thutterer Some end-to-end (E2E) tests have been selected based on the stage label on this MR.

Please start the trigger-omnibus-and-follow-up-e2e job in the qa stage and ensure the tests in follow-up-e2e:package-and-test-ee pipeline are passing before this MR is merged.

If you would like to run all e2e tests, please apply the pipeline:run-all-e2e label and trigger a new pipeline. This will run all tests in e2e:package-and-test pipeline.

For the list of known failures please refer to the latest pipeline triage issue.

Once done, please apply the emoji on this comment.

For any questions or help in reviewing the E2E test results, please reach out on the internal #quality Slack channel.

Bundle size analysis [beta]

This compares changes in bundle size for entry points between the commits 8be57cc4 and 0cdacd41

Special assets

Entrypoint / Name	Size before	Size after	Diff	Diff in percent
average	4.15 MB	4.15 MB	-	0.0 %
mainChunk	3.01 MB	3.01 MB	-	0.0 %

---

Note: We do not have exact data for 8be57cc4. So we have used data from: 02e9a461.
The intended commit has no webpack pipeline, so we chose the last commit with one before it.

Please look at the full report for more details

---

Read more about how this report works.

Generated by Danger

Allure report

allure-report-publisher generated test report!

e2e-test-on-gdk: test report for 0cdacd41

expand test summary

+------------------------------------------------------------------+
|                          suites summary                          |
+-------------+--------+--------+---------+-------+-------+--------+
|             | passed | failed | skipped | flaky | total | result |
+-------------+--------+--------+---------+-------+-------+--------+
| Govern      | 19     | 0      | 0       | 12    | 19    | ❗     |
| Manage      | 13     | 0      | 1       | 12    | 14    | ❗     |
| Plan        | 47     | 0      | 0       | 11    | 47    | ❗     |
| Create      | 19     | 0      | 0       | 18    | 19    | ❗     |
| Data Stores | 20     | 0      | 0       | 10    | 20    | ❗     |
| Verify      | 8      | 0      | 0       | 5     | 8     | ❗     |
+-------------+--------+--------+---------+-------+-------+--------+
| Total       | 126    | 0      | 1       | 68    | 127   | ❗     |
+-------------+--------+--------+---------+-------+-------+--------+

e2e-review-qa: test report for 0cdacd41

expand test summary

+-----------------------------------------------------------------------+
|                            suites summary                             |
+------------------+--------+--------+---------+-------+-------+--------+
|                  | passed | failed | skipped | flaky | total | result |
+------------------+--------+--------+---------+-------+-------+--------+
| Manage           | 8      | 0      | 3       | 0     | 11    | ✅     |
| Plan             | 3      | 0      | 1       | 0     | 4     | ✅     |
| Monitor          | 4      | 0      | 0       | 0     | 4     | ✅     |
| Create           | 8      | 0      | 1       | 0     | 9     | ✅     |
| Framework sanity | 0      | 0      | 1       | 0     | 1     | ➖     |
| Data Stores      | 2      | 0      | 0       | 0     | 2     | ✅     |
| Package          | 0      | 0      | 1       | 0     | 1     | ➖     |
| Govern           | 2      | 0      | 0       | 0     | 2     | ✅     |
+------------------+--------+--------+---------+-------+-------+--------+
| Total            | 27     | 0      | 7       | 0     | 34    | ✅     |
+------------------+--------+--------+---------+-------+-------+--------+

added 1 commit

• 721560df - Keep flyout menu closed when section just got collapsed

Compare with previous version

added 1 commit

• 4dadcfca - Keep flyout menu closed when section just got collapsed

Compare with previous version

marked the checklist item I have evaluated the MR acceptance checklist for this MR. as completed

@aalakkad Hi! Can you please review the frontend changes here?

@kcomoli Hi! Can you please check the UX?

Thanks!

requested review from @aalakkad and @kcomoli

marked this merge request as ready

mentioned in issue #415343 (closed)

approved this merge request

@kcomoli, thanks for approving this merge request.

This is the first time the merge request is approved. To ensure full test coverage, a new pipeline will be started shortly.

For more info, please refer to the following links:

• rspec predictive jobs
• jest predictive jobs
• merging a merge request.

added pipeline:mr-approved label

removed review request for @kcomoli

approved this merge request

requested review from @f_caplette and removed review request for @aalakkad