Skip to content

Add Replace button to Blob Header

Samantha Ming requested to merge 323210-vue-blob-header-replace into master

What does this MR do?

This is part of a bigger effort to convert the entire BlobHeader from HAML to Vue. In this MR, we implement the replace buttons.

Replace button Modal
image image

Testing Case

This feature is behind a feature flag, to turn on:

rails c

Feature.enable(: refactor_blob_viewer)
  1. Navigate to Repository > Files
  2. Click on a file to get to the Blob page
  3. Click on the "Replace" button
  4. Upload a file

Same Target Branch

Do not change the "Target branch" field. And the file will be replaced on the current branch.

Upload Blob File Updated
image image

Create a new MR

Enter a different "Target branch" field and select "Start a new merge request with these changes". The uploaded file will make the changes in a new merge request.

Upload Blob New MR
image image

Follow up MR

Upload blob issues

I am re-using the app/assets/javascripts/repository/components/upload_blob_modal.vue here, but I noticed a few issues with the components.

  1. The drag & drop feature doesn't seem to work. But clicking the upload does.
  2. There is an Uncaught TypeError once a file is uploaded.

I don't think this should this should dissuade us from re-using this component. It just means it should be improved. But I think we can do this iteratively in another MR. Here's the follow-up to get these fixed > #332734 (closed) 😀

Switch to use GraphQL

The current upload_blob_modal.vue is using REST; ideally we can switch it to use GraphQL. There is an existing issue for the backend to make the port > #330406 (comment 572236568). Once that's done, we can upload this to use GraphQL 🙌

Screenshots (strongly suggested)

Does this MR meet the acceptance criteria?

Conformity

Availability and Testing

Security

Does this MR contain changes to processing or storing of credentials or tokens, authorization and authentication methods or other items described in the security review guidelines? If not, then delete this Security section.

  • Label as security and @ mention @gitlab-com/gl-security/appsec
  • The MR includes necessary changes to maintain consistency between UI, API, email, or other methods
  • Security reports checked/validated by a reviewer from the AppSec team

Related to #323210 (closed)

Edited by Samantha Ming

Merge request reports