Skip to content

Refactor to use rest API for edit blob

This task is to refactor edit blob to use the public REST API PUT /projects/:id/repository/files/:file_path instead of the internal controller endpoints.

Implementation plan

This turned out to be quite big in scope. I'm going to introduce a feature flag and split this into multiple MRs. I might extend that list as I go, if I need to split MRs into smaller chunks:

MR # Scope Status
1 Uses rest API to submit data !205529 (merged)
2 Reintroduce notifications !206943 (merged)
3 Editing file name is possible & handles special characters in file name !209168 (merged) - this needs different API /api/:version/projects/:id/repository/commits
4 File size validation !208992 (closed) Closing this MR. We don't need to move this from controller to frontend, because the message is shown on entering the edit, not submitting it.
5 Handle fork workflow

Implementation notes

Here is some implementation notes and based on the code in !174287 (merged)

  1. In handleBlobEdit in app/assets/javascripts/repository/pages/blob_edit_header.vue, update to use the rest endpoint
 handleBlobEdit (formData){
    ...
    const originalFormData = Object.fromEntries(formData);
    let response;
    response = await this.editBlob(originalFormData);
    ...
 },
 editBlob(originalFormData) {
      const url = buildApiUrl(this.$options.UPDATE_FILE_PATH)
        .replace(':id', this.projectId)
        .replace(':file_path', this.originalFilePath);

      const data = {
        branch: originalFormData.branch_name || originalFormData.original_branch,
        commit_message: originalFormData.commit_message,
        content: originalFormData.file,
        file_path: originalFormData.file_path,
        id: this.projectId,
        last_commit_id: originalFormData.last_commit_sha,
        start_branch: originalFormData.original_branch,
      };

      return axios({
        method: 'put',
        url,
        data,
      });
    },
  1. to make the call above, project_id needs to be injected through edit_blob_app_data in app/helpers/blob_helper.rb
  2. to support the case of updating file name, we need to get the original file path through app/assets/javascripts/blob_edit/edit_blob.js and use that in api url
// app/assets/javascripts/blob_edit/edit_blob.js
getOriginalFilePath() {
    return this.options.filePath;
}

// app/assets/javascripts/repository/pages/blob_edit_header.vue
openModal() {
      ...
      this.originalFilePath = this.editor.getOriginalFilePath();
      ...
    },
  1. the api will return an error message in error.response.data.message so we need to update catch block in In handleBlobEdit in app/assets/javascripts/repository/pages/blob_edit_header.vue
  2. if the call is successful, we need to route to the updated file path. this url can be assembled based on filePath and branch from the api response
handleBlobEdit (formData){
    ...
    visitUrl(this.getUpdatePath(branch, file_path));
    ...
 },
getUpdatePath(branch, filePath) {
   const url = new URL(window.location.href);
   url.pathname = joinPaths(this.projectPath, '-/blob', branch, filePath);
   return url.toString();
},
  1. for the route above, we need to inject project_path needs to be injected through edit_blob_app_data in app/helpers/blob_helper.rb
  2. to handle create merge request, we want to check the create_merge_request value from original form data and open the new merge request route -/merge_requests/new (note, i didn't dig deeper into how to make sure all necessary params are passed in correctly).
  3. this should leave us with unused injections in edit_blob_app_data in app/helpers/blob_helper.rb, which we can clean up.
  4. we should also be able to clean up logic to show error message in haml file, such as app/views/projects/blob/edit.html.haml

Test cases

Edited by Paulina Sedlak-Jakubowska