Add file path parameter to preview markdown endpoint

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

@@ -301,6 +301,7 @@ export default {
       v-if="showContentViewer"
       :content="file.content || file.raw"
       :path="file.rawPath || file.path"
+      :file-path="file.path"
       :file-size="file.size"
       :project-path="file.projectId"
       :type="fileType"

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

@@ -18,6 +18,11 @@ export default {
       required: false,
       default: 0,
     },
+    filePath: {
+      type: String,
+      required: false,
+      default: '',
+    },
     projectPath: {
       type: String,
       required: false,
@@ -52,6 +57,7 @@ export default {
     <component
       :is="viewer"
       :path="path"
+      :file-path="filePath"
       :file-size="fileSize"
       :project-path="projectPath"
       :content="content"

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

@@ -16,6 +16,11 @@ export default {
       type: String,
       required: true,
     },
+    filePath: {
+      type: String,
+      required: false,
+      default: '',
+    },
     projectPath: {
       type: String,
       required: true,
@@ -48,6 +53,7 @@ export default {
         this.isLoading = true;
         const postBody = {
           text: this.content,
+          path: this.filePath,
         };
         const postOptions = {
           cancelToken: axiosSource.token,

app/controllers/concerns/preview_markdown.rb

@@ -7,17 +7,8 @@ module PreviewMarkdown
   def preview_markdown
     result = PreviewMarkdownService.new(@project, current_user, markdown_service_params).execute
 
-    markdown_params =
-      case controller_name
-      when 'wikis'    then { pipeline: :wiki, project_wiki: @project_wiki, page_slug: params[:id] }
-      when 'snippets' then { skip_project_check: true }
-      when 'groups'   then { group: group }
-      when 'projects' then projects_filter_params
-      else {}
-      end
-
     render json: {
-      body: view_context.markdown(result[:text], markdown_params),
+      body: view_context.markdown(result[:text], markdown_context_params),
       references: {
         users: result[:users],
         suggestions: SuggestionSerializer.new.represent_diff(result[:suggestions]),
@@ -38,5 +29,16 @@ module PreviewMarkdown
   def markdown_service_params
     params
   end
+
+  def markdown_context_params
+    case controller_name
+    when 'wikis'    then { pipeline: :wiki, project_wiki: @project_wiki, page_slug: params[:id] }
+    when 'snippets' then { skip_project_check: true }
+    when 'groups'   then { group: group }
+    when 'projects' then projects_filter_params
+    else {}
+    end.merge(requested_path: params[:path])
+  end
+
   # rubocop:enable Gitlab/ModuleWithInstanceVariables
 end

changelogs/unreleased/fj-32057-web-ide-preview-markdown-image-bug.yml

+---
+title: Fix broken images when previewing markdown files in Web IDE
+merge_request: 18899
+author:
+type: fixed

spec/controllers/projects_controller_spec.rb

@@ -927,6 +927,30 @@ describe ProjectsController do
         expect(json_response['body']).to match(/\!#{merge_request.iid} \(closed\)/)
       end
     end
+
+    context 'when path parameter is 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",
+          path: 'files/images/README.md'
+        }
+      end
+
+      before do
+        project_with_repo.add_maintainer(user)
+      end
+
+      it 'renders JSON body with image links expanded' do
+        expanded_path = "/#{project_with_repo.full_path}/raw/master/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

@@ -89,6 +89,35 @@ describe MarkupHelper do
         end
       end
     end
+
+    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) }
+
+      subject { Nokogiri::HTML.parse(generated_html) }
+
+      context 'when requested_path is provided in the context' do
+        let(:requested_path) { 'files/images/README.md' }
+
+        it 'returns the correct HTML for the image' do
+          expanded_path = "/#{project.full_path}/raw/master/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 requested_path parameter is not provided' do
+        let(:requested_path) { nil }
+
+        it 'returns the link to the image path as a relative path' do
+          expanded_path = "/#{project.full_path}/master/./#{image_file}"
+
+          expect(subject.css('a')[0].attr('href')).to eq(expanded_path)
+        end
+      end
+    end
   end
 
   describe '#markdown_field' do

spec/javascripts/vue_shared/components/content_viewer/content_viewer_spec.js

@@ -70,4 +70,30 @@ describe('ContentViewer', () => {
       done();
     });
   });
+
+  it('markdown preview receives the file path as a parameter', done => {
+    mock = new MockAdapter(axios);
+    spyOn(axios, 'post').and.callThrough();
+    mock.onPost(`${gon.relative_url_root}/testproject/preview_markdown`).reply(200, {
+      body: '<b>testing</b>',
+    });
+
+    createComponent({
+      path: 'test.md',
+      content: '*  Test',
+      projectPath: 'testproject',
+      type: 'markdown',
+      filePath: 'foo/test.md',
+    });
+
+    setTimeout(() => {
+      expect(axios.post).toHaveBeenCalledWith(
+        `${gon.relative_url_root}/testproject/preview_markdown`,
+        { path: 'foo/test.md', text: '*  Test' },
+        jasmine.any(Object),
+      );
+
+      done();
+    });
+  });
 });