Skip to content

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 is a cherry-pick of one of the commits from Move BlobDefaultActions to BlobControls

  • 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 of BlobHeaderDefaultActions.
  • 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 the GlDisclosureDropdown.

The scope of this MR is:

these buttons into this part of dropdown
Screenshot_2024-12-27_at_11.03.59 Screenshot_2024-12-27_at_11.00.08

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
Screenshot_2024-12-27_at_11.07.09 Screenshot_2024-12-27_at_11.10.28

How to set up and validate locally

Numbered steps to set up and validate the change are strongly suggested.

  1. Go to a Project / Repository
  2. Navigate to a file
  3. 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

Edited by Paulina Sedlak-Jakubowska

Merge request reports

Loading