Create BlobOverflowMenu component
What does this MR do and why?
This MR is a part of a bigger effort that aims to rearrange controls for w blob viewer.
The breakdown of #450774 MRs:
step | status |
---|---|
Change Preview and Code buttons to text based and move Table of content dropdown | |
Change BlobHeaderDefaultActions into dropdown items | |
Change BlobButtonGroup into a dropdown | |
Move Permalink button and add copy functionality |
- This MR introduces the overflow menu into which blob actions will be gradually moved.
- There's only a new component without using it in its final location. This is to minimise the diff. You'll find a snippet below that will help you test the component.
-
BlobHeaderDefaultActions component is replicated as a
GlDisclosureDropdown
component. Please review this MR against the functionality ofBlobHeaderDefaultActions
. - In the following MRs
BlobOverflowMenu
will be extended with other blob actions (like Lock file, Replace file, Delete file) and they will be arranged into groups in theGlDisclosureDropdown
.
The scope of this MR is:
these buttons | into this part of dropdown |
---|---|
References
Please include cross links to any resources that are relevant to this MR. This will give reviewers and future readers helpful context to give an efficient review of the changes introduced.
- main issue: #450774
- task this MR partially resolves: Change BlobHeaderDefaultActions into dropdown items #508310
MR acceptance checklist
Please evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.
Screenshots or screen recordings
Screenshots are required for UI changes, and strongly recommended for all other merge requests.
Before | After |
---|---|
How to set up and validate locally
Numbered steps to set up and validate the change are strongly suggested.
- Go to a Project / Repository
- Navigate to a file
- Apply the following diff and make sure the actions are working:
diff --git a/app/assets/javascripts/blob/components/blob_header.vue b/app/assets/javascripts/blob/components/blob_header.vue
index 63f84fd9e5dc..532140da6a88 100644
--- a/app/assets/javascripts/blob/components/blob_header.vue
+++ b/app/assets/javascripts/blob/components/blob_header.vue
@@ -8,11 +8,13 @@ import BlobFilepath from './blob_header_filepath.vue';
import ViewerSwitcher from './blob_header_viewer_switcher.vue';
import { SIMPLE_BLOB_VIEWER, BLAME_VIEWER } from './constants';
import TableOfContents from './table_contents.vue';
+import OverflowMenu from '~/repository/components/header_area/blob_overflow_menu.vue';
export default {
components: {
ViewerSwitcher,
DefaultActions,
+ OverflowMenu,
BlobFilepath,
TableOfContents,
WebIdeLink: () => import('ee_else_ce/vue_shared/components/web_ide_link.vue'),
@@ -205,7 +207,7 @@ export default {
<slot name="actions"></slot>
- <default-actions
+ <overflow-menu
v-if="showDefaultActions"
:raw-path="blob.externalStorageUrl || blob.rawPath"
:active-viewer="viewer"
Related to #450774