Only display merge commit SHA when it exists

app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merged.vue

@@ -162,6 +162,7 @@
           <span class="label-branch">
             <a :href="mr.targetBranchPath">{{ mr.targetBranch }}</a>
           </span>
+          <template v-if="mr.mergeCommitSha">
             with
             <a
               :href="mr.mergeCommitPath"
@@ -174,6 +175,7 @@
               :text="mr.mergeCommitSha"
               css-class="btn-default btn-transparent btn-clipboard js-mr-merged-copy-sha"
             />
+          </template>
         </p>
         <p v-if="mr.sourceBranchRemoved">
           {{ s__("mrWidget|The source branch has been removed") }}

changelogs/unreleased/48889-message-for-were-merged-into.yml

+---
+title: Fix 'merged with' UI being displayed when merge request has no merge commit
+merge_request: 22022
+author:
+type: fixed

spec/javascripts/vue_mr_widget/components/states/mr_widget_merged_spec.js

@@ -157,6 +157,16 @@ describe('MRWidgetMerged', () => {
     expect(selectors.copyMergeShaButton.getAttribute('data-clipboard-text')).toBe(vm.mr.mergeCommitSha);
   });
 
+  it('hides button to copy commit SHA if SHA does not exist', (done) => {
+    vm.mr.mergeCommitSha = null;
+
+    Vue.nextTick(() => {
+      expect(selectors.copyMergeShaButton).not.toExist();
+      expect(vm.$el.querySelector('.mr-info-list').innerText).not.toContain('with');
+      done();
+    });
+  });
+
   it('shows merge commit SHA link', () => {
     expect(selectors.mergeCommitShaLink).toExist();
     expect(selectors.mergeCommitShaLink.text).toContain(vm.mr.shortMergeCommitSha);