Fix issue with broken images in Web IDE markdown

Fixes issues with cases when images exist on a different branch than
master. In such cases, allow a `ref` parameter to the `preview_markdown`
endpoint to reference the image from a branch name (or commit hash)
instead.

app/assets/javascripts/ide/components/repo_editor.vue

@@ -44,6 +44,7 @@ export default {
       'isEditModeActive',
       'isCommitModeActive',
       'isReviewModeActive',
+      'currentBranch',
     ]),
     ...mapGetters('fileTemplates', ['showFileTemplatesBar']),
     shouldHideEditor() {
@@ -87,6 +88,9 @@ export default {
         theme: this.editorTheme,
       };
     },
+    currentBranchCommit() {
+      return this.currentBranch?.commit.id;
+    },
   },
   watch: {
     file(newVal, oldVal) {
@@ -315,6 +319,7 @@ export default {
       :file-path="file.path"
       :file-size="file.size"
       :project-path="file.projectId"
+      :commit-sha="currentBranchCommit"
       :type="fileType"
     />
     <diff-viewer

app/assets/javascripts/vue_shared/components/content_viewer/content_viewer.vue

@@ -24,6 +24,11 @@ export default {
       required: false,
       default: '',
     },
+    commitSha: {
+      type: String,
+      required: false,
+      default: '',
+    },
     projectPath: {
       type: String,
       required: false,
@@ -62,6 +67,7 @@ export default {
       :file-size="fileSize"
       :project-path="projectPath"
       :content="content"
+      :commit-sha="commitSha"
     />
   </div>
 </template>

app/assets/javascripts/vue_shared/components/content_viewer/viewers/markdown_viewer.vue

@@ -16,6 +16,11 @@ export default {
       type: String,
       required: true,
     },
+    commitSha: {
+      type: String,
+      required: false,
+      default: '',
+    },
     filePath: {
       type: String,
       required: false,
@@ -55,6 +60,9 @@ export default {
           text: this.content,
           path: this.filePath,
         };
+        if (this.commitSha) {
+          postBody.ref = this.commitSha;
+        }
         const postOptions = {
           cancelToken: axiosSource.token,
         };

app/controllers/concerns/preview_markdown.rb

@@ -37,7 +37,7 @@ module PreviewMarkdown
     when 'groups'   then { group: group }
     when 'projects' then projects_filter_params
     else {}
-    end.merge(requested_path: params[:path])
+    end.merge(requested_path: params[:path], ref: params[:ref])
   end
 
   # rubocop:enable Gitlab/ModuleWithInstanceVariables

changelogs/unreleased/25375-webide-markdown-broken-images.yml

+---
+title: Fix issue with broken images in Web IDE markdown
+merge_request: 31638
+author:
+type: fixed

spec/controllers/projects_controller_spec.rb

@@ -1020,6 +1020,32 @@ describe ProjectsController do
         expect(json_response['body']).to include(expanded_path)
       end
     end
+
+    context 'when path and ref parameters are provided' do
+      let(:project_with_repo) { create(:project, :repository) }
+      let(:preview_markdown_params) do
+        {
+          namespace_id: project_with_repo.namespace,
+          id: project_with_repo,
+          text: "![](./logo-white.png)\n",
+          ref: 'other_branch',
+          path: 'files/images/README.md'
+        }
+      end
+
+      before do
+        project_with_repo.add_maintainer(user)
+        project_with_repo.repository.create_branch('other_branch')
+      end
+
+      it 'renders JSON body with image links expanded' do
+        expanded_path = "/#{project_with_repo.full_path}/-/raw/other_branch/files/images/logo-white.png"
+
+        post :preview_markdown, params: preview_markdown_params
+
+        expect(json_response['body']).to include(expanded_path)
+      end
+    end
   end
 
   describe '#ensure_canonical_path' do

spec/helpers/markup_helper_spec.rb

@@ -95,12 +95,13 @@ describe MarkupHelper do
     context 'when text contains a relative link to an image in the repository' do
       let(:image_file) { "logo-white.png" }
       let(:text_with_relative_path) { "![](./#{image_file})\n" }
-      let(:generated_html) { helper.markdown(text_with_relative_path, requested_path: requested_path) }
+      let(:generated_html) { helper.markdown(text_with_relative_path, requested_path: requested_path, ref: ref) }
 
       subject { Nokogiri::HTML.parse(generated_html) }
 
-      context 'when requested_path is provided in the context' do
+      context 'when requested_path is provided, but ref isn\'t' do
         let(:requested_path) { 'files/images/README.md' }
+        let(:ref) { nil }
 
         it 'returns the correct HTML for the image' do
           expanded_path = "/#{project.full_path}/-/raw/master/files/images/#{image_file}"
@@ -110,13 +111,43 @@ describe MarkupHelper do
         end
       end
 
-      context 'when requested_path parameter is not provided' do
+      context 'when requested_path and ref parameters are both provided' do
+        let(:requested_path) { 'files/images/README.md' }
+        let(:ref) { 'other_branch' }
+
+        it 'returns the correct HTML for the image' do
+          project.repository.create_branch('other_branch')
+
+          expanded_path = "/#{project.full_path}/-/raw/#{ref}/files/images/#{image_file}"
+
+          expect(subject.css('a')[0].attr('href')).to eq(expanded_path)
+          expect(subject.css('img')[0].attr('data-src')).to eq(expanded_path)
+        end
+      end
+
+      context 'when ref is provided, but requested_path isn\'t' do
+        let(:ref) { 'other_branch' }
+        let(:requested_path) { nil }
+
+        it 'returns the correct HTML for the image' do
+          project.repository.create_branch('other_branch')
+
+          expanded_path = "/#{project.full_path}/-/blob/#{ref}/./#{image_file}"
+
+          expect(subject.css('a')[0].attr('href')).to eq(expanded_path)
+          expect(subject.css('img')[0].attr('data-src')).to eq(expanded_path)
+        end
+      end
+
+      context 'when neither requested_path, nor ref parameter is provided' do
+        let(:ref) { nil }
         let(:requested_path) { nil }
 
-        it 'returns the link to the image path as a relative path' do
+        it 'returns the correct HTML for the image' do
           expanded_path = "/#{project.full_path}/-/blob/master/./#{image_file}"
 
           expect(subject.css('a')[0].attr('href')).to eq(expanded_path)
+          expect(subject.css('img')[0].attr('data-src')).to eq(expanded_path)
         end
       end
     end

spec/javascripts/ide/components/repo_editor_spec.js

@@ -26,7 +26,23 @@ describe('RepoEditor', () => {
 
     f.active = true;
     f.tempFile = true;
+
     vm.$store.state.openFiles.push(f);
+    vm.$store.state.projects = {
+      'gitlab-org/gitlab': {
+        branches: {
+          master: {
+            name: 'master',
+            commit: {
+              id: 'abcdefgh',
+            },
+          },
+        },
+      },
+    };
+    vm.$store.state.currentProjectId = 'gitlab-org/gitlab';
+    vm.$store.state.currentBranchId = 'master';
+
     Vue.set(vm.$store.state.entries, f.path, f);
 
     spyOn(vm, 'getFileData').and.returnValue(Promise.resolve());