Skip to content

Move BlobDefaultActions to BlobControls

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 (closed) 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 🚧

BlobHeaderDefaultActions are changed from buttons to dropdown items. These are: Copy file contents / Open raw / Download / View on {environment_name}. The dropdown with actions is no places above the box with last commit information.

Please review this MR against the functionality of BlobHeaderDefaultActions.

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.

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.

Control Before After
Copy content Screen_Recording_2025-01-09_at_19.23.25 Screen_Recording_2025-01-09_at_17.16.01
Open raw Screen_Recording_2025-01-09_at_19.23.34 Screen_Recording_2025-01-09_at_16.57.29
Download Screen_Recording_2025-01-09_at_19.23.45 Screen_Recording_2025-01-09_at_16.57.48

How to set up and validate locally

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

  1. Enable the feature flag
   Feature.enable(:blob_overflow_menu)
  1. Go to a Project / Repository
  2. Navigate to a file
  3. Make sure the actions are working from the dropdown and are not visible on the file content viewer.
  4. Your navigator.clipboard might throw undefined locally. To check if the correct data is passed to it I logged it to the console before writeText() throws an error:
diff --git a/app/assets/javascripts/repository/components/header_area/blob_controls.vue b/app/assets/javascripts/repository/components/header_area/blob_controls.vue
index dad64043e4b4..6ae9e56eeaab 100644
--- a/app/assets/javascripts/repository/components/header_area/blob_controls.vue
+++ b/app/assets/javascripts/repository/components/header_area/blob_controls.vue
@@ -174,6 +174,7 @@ export default {
       Shortcuts.focusSearchFile();
     },
     onCopy() {
+      console.log('content to copy: ', this.blobInfo.rawTextBlob);
       navigator.clipboard.writeText(this.blobInfo.rawTextBlob);
     },
   },

Related to #450774 (closed) Closes #508310 (closed)

Edited by Paulina Sedlak-Jakubowska

Merge request reports

Loading