Keep "peek" sidebar open while mouse hovers flyout menu

What does this MR do and why?

Fixes #419769 (closed)

Screenshots or screen recordings

Before	After
recording_1690373355	recording_1690373203

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 sections with flyouts.
• Now make sure your sidebar is closed.
• Move your mouse cursor to the left edge of the window to make the sidebar go into "peek" mode.
• Move your mouse cursor over a section title (like "Plan", "Settings", etc.) to see its flyout menu.
• Hover over to the flyout menu.
  • On master, the flyout menu will disappear together with the sidebar, because you moved your cursor away from the sidebar.
  • In this branch, the flyout menu and sidebar will stay open while the cursor is in either of the two.

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.

added bugfunctional devopsmanage groupfoundations sectiondev typebug labels

assigned to @thutterer

added frontend label

	1 Warning
	f96ebe43: Commits that change 30 or more lines across at least 3 files should describe these changes in the commit body. For more information, take a look at our Commit message guidelines.

	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	Stanislav Lashmanov (@slashmanov) (UTC+4, 2 hours ahead of @thutterer)	Ezekiel Kigbo (@ekigbo) (UTC+10, 8 hours ahead of @thutterer)

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 88d782de and f96ebe43

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 88d782de. So we have used data from: cb9902b0.
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

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

mentioned in issue #419769 (closed)

mentioned in issue #415343 (closed)

Allure report

allure-report-publisher generated test report!

e2e-test-on-gdk: test report for f96ebe43

expand test summary

+------------------------------------------------------------------+
|                          suites summary                          |
+-------------+--------+--------+---------+-------+-------+--------+
|             | passed | failed | skipped | flaky | total | result |
+-------------+--------+--------+---------+-------+-------+--------+
| Plan        | 47     | 0      | 0       | 0     | 47    | ✅     |
| Manage      | 13     | 0      | 1       | 0     | 14    | ✅     |
| Data Stores | 20     | 0      | 0       | 0     | 20    | ✅     |
| Create      | 19     | 0      | 0       | 0     | 19    | ✅     |
| Govern      | 19     | 0      | 0       | 0     | 19    | ✅     |
| Verify      | 8      | 0      | 0       | 0     | 8     | ✅     |
+-------------+--------+--------+---------+-------+-------+--------+
| Total       | 126    | 0      | 1       | 0     | 127   | ✅     |
+-------------+--------+--------+---------+-------+-------+--------+

e2e-review-qa: test report for f96ebe43

expand test summary

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

e2e-package-and-test: test report for f96ebe43

expand test summary

+-----------------------------------------------------------------------+
|                            suites summary                             |
+------------------+--------+--------+---------+-------+-------+--------+
|                  | passed | failed | skipped | flaky | total | result |
+------------------+--------+--------+---------+-------+-------+--------+
| Create           | 150    | 0      | 35      | 0     | 185   | ✅     |
| Manage           | 159    | 0      | 12      | 4     | 171   | ❗     |
| Configure        | 1      | 0      | 0       | 0     | 1     | ✅     |
| Govern           | 4      | 0      | 0       | 0     | 4     | ✅     |
| Package          | 0      | 0      | 2       | 0     | 2     | ➖     |
| Plan             | 8      | 0      | 0       | 0     | 8     | ✅     |
| Framework sanity | 0      | 0      | 2       | 0     | 2     | ➖     |
| Data Stores      | 4      | 0      | 0       | 0     | 4     | ✅     |
| Monitor          | 8      | 0      | 0       | 0     | 8     | ✅     |
+------------------+--------+--------+---------+-------+-------+--------+
| Total            | 334    | 0      | 51      | 4     | 385   | ❗     |
+------------------+--------+--------+---------+-------+-------+--------+

changed milestone to %16.3

Hi @markrian Would you like to do the first frontend review here? The implementation is based on your idea in !124863 (comment 1463517285) WDYT?

requested review from @markrian

praise: I'm pleased to see that my concern about the gap between the flyout and the sidebar is already solved, thanks to the flyout having a padding that bridges the gap!

approved this merge request

removed review request for @markrian

assigned to @afontaine

@markrian, 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.