Fix rendering failure for the 'Verified' badge

Changelog: fixed

app/assets/javascripts/diffs/components/commit_item.vue

@@ -103,7 +103,7 @@ export default {
       >
         <div
           v-if="commit.signature_html"
-          v-safe-html:[$options.safeHtmlConfig]="commit.signature_html"
+          v-html="commit.signature_html /* eslint-disable-line vue/no-v-html */"
         ></div>
         <commit-pipeline-status
           v-if="commit.pipeline_status_path"

app/assets/javascripts/repository/components/last_commit.vue

@@ -171,7 +171,7 @@ export default {
         <div class="commit-actions flex-row">
           <div
             v-if="commit.signatureHtml"
-            v-safe-html:[$options.safeHtmlConfig]="commit.signatureHtml"
+            v-html="commit.signatureHtml /* eslint-disable-line vue/no-v-html */"
           ></div>
           <div v-if="commit.pipeline" class="ci-status-link">
             <gl-link

lib/api/entities/commit_with_link.rb

@@ -29,7 +29,7 @@ module API
       end
 
       expose :signature_html, if: { type: :full } do |commit|
-        render('projects/commit/_signature', signature: commit.signature) if commit.has_signature?
+        ::CommitPresenter.new(commit).signature_html
       end
 
       expose :prev_commit_id, if: { type: :full } do |commit|
@@ -50,12 +50,6 @@ module API
 
         pipelines_project_commit_path(pipeline_project, commit.id, ref: pipeline_ref)
       end
-
-      def render(*args)
-        return unless request.respond_to?(:render) && request.render.respond_to?(:call)
-
-        request.render.call(*args)
-      end
     end
   end
 end

spec/frontend/diffs/components/commit_item_spec.js

@@ -11,7 +11,9 @@ jest.mock('~/user_popovers');
 const TEST_AUTHOR_NAME = 'test';
 const TEST_AUTHOR_EMAIL = 'test+test@gitlab.com';
 const TEST_AUTHOR_GRAVATAR = `${TEST_HOST}/avatar/test?s=40`;
-const TEST_SIGNATURE_HTML = '<a>Legit commit</a>';
+const TEST_SIGNATURE_HTML = `<a class="btn gpg-status-box valid" data-content="signature-content" data-html="true" data-placement="top" data-title="signature-title" data-toggle="popover" role="button" tabindex="0">
+  Verified
+</a>`;
 const TEST_PIPELINE_STATUS_PATH = `${TEST_HOST}/pipeline/status`;
 
 describe('diffs/components/commit_item', () => {
@@ -156,8 +158,9 @@ describe('diffs/components/commit_item', () => {
 
     it('renders signature html', () => {
       const actionsElement = getCommitActionsElement();
+      const signatureElement = actionsElement.find('.gpg-status-box');
 
-      expect(actionsElement.html()).toContain(TEST_SIGNATURE_HTML);
+      expect(signatureElement.html()).toBe(TEST_SIGNATURE_HTML);
     });
   });
 

spec/frontend/repository/components/__snapshots__/last_commit_spec.js.snap

@@ -106,114 +106,3 @@ exports[`Repository last commit component renders commit widget 1`] = `
   </div>
 </div>
 `;
-
-exports[`Repository last commit component renders the signature HTML as returned by the backend 1`] = `
-<div
-  class="well-segment commit gl-p-5 gl-w-full"
->
-  <user-avatar-link-stub
-    class="avatar-cell"
-    imgalt=""
-    imgcssclasses=""
-    imgsize="40"
-    imgsrc="https://test.com"
-    linkhref="/test"
-    tooltipplacement="top"
-    tooltiptext=""
-    username=""
-  />
-   
-  <div
-    class="commit-detail flex-list"
-  >
-    <div
-      class="commit-content qa-commit-content"
-    >
-      <gl-link-stub
-        class="commit-row-message item-title"
-        href="/commit/123"
-      >
-        Commit title
-      </gl-link-stub>
-       
-      <!---->
-       
-      <div
-        class="committer"
-      >
-        <gl-link-stub
-          class="commit-author-link js-user-link"
-          href="/test"
-        >
-          
-            Test
-        </gl-link-stub>
-        
-          authored
-          
-        <timeago-tooltip-stub
-          cssclass=""
-          time="2019-01-01"
-          tooltipplacement="bottom"
-        />
-      </div>
-       
-      <!---->
-    </div>
-     
-    <div
-      class="commit-actions flex-row"
-    >
-      <div>
-        <button>
-          Verified
-        </button>
-      </div>
-       
-      <div
-        class="ci-status-link"
-      >
-        <gl-link-stub
-          class="js-commit-pipeline"
-          href="https://test.com/pipeline"
-          title="Pipeline: failed"
-        >
-          <ci-icon-stub
-            aria-label="Pipeline: failed"
-            cssclasses=""
-            size="24"
-            status="[object Object]"
-          />
-        </gl-link-stub>
-      </div>
-       
-      <gl-button-group-stub
-        class="gl-ml-4 js-commit-sha-group"
-      >
-        <gl-button-stub
-          buttontextclasses=""
-          category="primary"
-          class="gl-font-monospace"
-          data-testid="last-commit-id-label"
-          icon=""
-          label="true"
-          size="medium"
-          variant="default"
-        >
-          12345678
-        </gl-button-stub>
-         
-        <clipboard-button-stub
-          category="secondary"
-          class="input-group-text"
-          size="medium"
-          text="123456789"
-          title="Copy commit SHA"
-          tooltipplacement="top"
-          variant="default"
-        />
-      </gl-button-group-stub>
-    </div>
-  </div>
-</div>
-`;

spec/frontend/repository/components/last_commit_spec.js

@@ -143,11 +143,30 @@ describe('Repository last commit component', () => {
   });
 
   it('renders the signature HTML as returned by the backend', async () => {
-    factory(createCommitData({ signatureHtml: '<button>Verified</button>' }));
+    factory(
+      createCommitData({
+        signatureHtml: `<a
+        class="btn gpg-status-box valid"
+        data-content="signature-content"
+        data-html="true"
+        data-placement="top"
+        data-title="signature-title"
+        data-toggle="popover"
+        role="button"
+        tabindex="0"
+        >
+          Verified
+        </a>`,
+      }),
+    );
 
     await nextTick();
 
-    expect(vm.element).toMatchSnapshot();
+    expect(vm.find('.gpg-status-box').html()).toBe(
+      `<a class="btn gpg-status-box valid" data-content="signature-content" data-html="true" data-placement="top" data-title="signature-title" data-toggle="popover" role="button" tabindex="0">
+  Verified
+</a>`,
+    );
   });
 
   it('sets correct CSS class if the commit message is empty', async () => {

spec/serializers/commit_entity_spec.rb

@@ -3,8 +3,6 @@
 require 'spec_helper'
 
 RSpec.describe CommitEntity do
-  let(:signature_html) { 'TEST' }
-
   let(:entity) do
     described_class.new(commit, request: request)
   end
@@ -16,11 +14,7 @@ RSpec.describe CommitEntity do
   subject { entity.as_json }
 
   before do
-    render = double('render')
-    allow(render).to receive(:call).and_return(signature_html)
-
     allow(request).to receive(:project).and_return(project)
-    allow(request).to receive(:render).and_return(render)
   end
 
   context 'when commit author is a user' do
@@ -83,8 +77,7 @@ RSpec.describe CommitEntity do
       let(:commit) { project.commit(TestEnv::BRANCH_SHA['signed-commits']) }
 
       it 'exposes "signature_html"' do
-        expect(request.render).to receive(:call)
-        expect(subject.fetch(:signature_html)).to be signature_html
+        expect(subject.fetch(:signature_html)).not_to be_nil
       end
     end