Only display merge commit SHA when it exists

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

@@ -162,18 +162,20 @@
           <span class="label-branch">
             <a :href="mr.targetBranchPath">{{ mr.targetBranch }}</a>
           </span>
-          with
-          <a
-            :href="mr.mergeCommitPath"
-            class="commit-sha js-mr-merged-commit-sha"
-            v-text="mr.shortMergeCommitSha"
-          >
-          </a>
-          <clipboard-button
-            :title="__('Copy commit SHA to clipboard')"
-            :text="mr.mergeCommitSha"
-            css-class="btn-default btn-transparent btn-clipboard js-mr-merged-copy-sha"
-          />
+          <template v-if="mr.mergeCommitSha">
+            with
+            <a
+              :href="mr.mergeCommitPath"
+              class="commit-sha js-mr-merged-commit-sha"
+              v-text="mr.shortMergeCommitSha"
+            >
+            </a>
+            <clipboard-button
+              :title="__('Copy commit SHA to clipboard')"
+              :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);