Added function signature to expand diff line

Changelog: added

Closes https://gitlab.com/gitlab-org/gitlab/-/issues/20116/

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

@@ -153,21 +153,38 @@ export default {
     @mousedown="handleParallelLineMouseDown"
   >
     <template v-for="(line, index) in diffLines">
-      <div
-        v-if="line.isMatchLineLeft || line.isMatchLineRight"
-        :key="`expand-${index}`"
-        class="diff-tr line_expansion match"
-      >
-        <div class="diff-td text-center gl-font-regular">
-          <diff-expansion-cell
-            :file-hash="diffFile.file_hash"
-            :context-lines-path="diffFile.context_lines_path"
-            :line="line.left"
-            :is-top="index === 0"
-            :is-bottom="index + 1 === diffLinesLength"
-          />
+      <template v-if="line.isMatchLineLeft || line.isMatchLineRight">
+        <div :key="`expand-${index}`" class="diff-tr line_expansion match">
+          <div class="diff-td text-center gl-font-regular">
+            <diff-expansion-cell
+              :file-hash="diffFile.file_hash"
+              :context-lines-path="diffFile.context_lines_path"
+              :line="line.left"
+              :is-top="index === 0"
+              :is-bottom="index + 1 === diffLinesLength"
+            />
+          </div>
         </div>
-      </div>
+        <div
+          v-if="line.left.rich_text"
+          :key="`expand-definition-${index}`"
+          class="diff-grid-row diff-tr line_holder match"
+        >
+          <div class="diff-grid-left diff-grid-3-col left-side">
+            <div class="diff-td diff-line-num"></div>
+            <div v-if="inline" class="diff-td diff-line-num"></div>
+            <div class="diff-td line_content left-side gl-white-space-normal!">
+              {{ line.left.rich_text }}
+            </div>
+          </div>
+          <div v-if="!inline" class="diff-grid-right diff-grid-3-col right-side">
+            <div class="diff-td diff-line-num"></div>
+            <div class="diff-td line_content right-side gl-white-space-normal!">
+              {{ line.left.rich_text }}
+            </div>
+          </div>
+        </div>
+      </template>
       <diff-row
         v-if="!line.isMatchLineLeft && !line.isMatchLineRight"
         :key="line.line_code"

app/assets/stylesheets/framework/diffs.scss

@@ -603,6 +603,14 @@ table.code {
     grid-template-columns: 50px 8px 0 1fr;
   }
 
+  .diff-grid-3-col {
+    grid-template-columns: 50px 1fr !important;
+  }
+
+  &.inline-diff-view .diff-grid-3-col {
+    grid-template-columns: 50px 50px 1fr !important;
+  }
+
   .diff-grid-comments {
     display: grid;
     grid-template-columns: 1fr 1fr;

app/assets/stylesheets/highlight/themes/dark.scss

@@ -168,8 +168,8 @@ $dark-il: #de935f;
       }
     }
 
-    .diff-grid-left:hover,
-    .diff-grid-right:hover,
+    &:not(.match) .diff-grid-left:hover,
+    &:not(.match) .diff-grid-right:hover,
     &.code-search-line:hover {
       .diff-line-num:not(.empty-cell) {
         @include line-number-hover;

app/assets/stylesheets/highlight/themes/monokai.scss

@@ -169,8 +169,8 @@ $monokai-gh: #75715e;
       }
     }
 
-    .diff-grid-left:hover,
-    .diff-grid-right:hover,
+    &:not(.match) .diff-grid-left:hover,
+    &:not(.match) .diff-grid-right:hover,
     &.code-search-line:hover {
       .diff-line-num:not(.empty-cell) {
         @include line-number-hover;

app/assets/stylesheets/highlight/themes/none.scss

@@ -66,9 +66,9 @@
       }
     }
 
-    .diff-grid-left:hover,
-    .diff-grid-right:hover,
-    &.code-search-line:hover {
+    &:not(.match) .diff-grid-left:hover,
+    &:not(.match) .diff-grid-right:hover,
+    &:not(.match) &.code-search-line:hover {
       .diff-line-num:not(.empty-cell) {
         @include line-number-hover;
       }

app/assets/stylesheets/highlight/themes/solarized-dark.scss

@@ -148,8 +148,8 @@ $solarized-dark-il: #2aa198;
       @include line-coverage-border-color($solarized-dark-coverage, $solarized-dark-no-coverage);
     }
 
-    .diff-grid-left:hover,
-    .diff-grid-right:hover,
+    &:not(.match) .diff-grid-left:hover,
+    &:not(.match) .diff-grid-right:hover,
     &.code-search-line:hover {
       .diff-line-num:not(.empty-cell) {
         @include line-number-hover;

app/assets/stylesheets/highlight/themes/solarized-light.scss

@@ -168,8 +168,8 @@ $solarized-light-il: #2aa198;
       }
     }
 
-    .diff-grid-left:hover,
-    .diff-grid-right:hover,
+    &:not(.match) .diff-grid-left:hover,
+    &:not(.match) .diff-grid-right:hover,
     &.code-search-line:hover {
       .diff-line-num:not(.empty-cell) {
         @include line-number-hover;

app/assets/stylesheets/highlight/white_base.scss

@@ -118,6 +118,15 @@ pre.code,
 
 .line_expansion {
   @include diff-expansion($gray-light, $border-color, $blue-600);
+
+  &.diff-tr:last-child {
+    border-bottom-right-radius: 4px;
+    border-bottom-left-radius: 4px;
+
+    .diff-td {
+      border-bottom: 0;
+    }
+  }
 }
 
 // Diff line
@@ -128,8 +137,8 @@ pre.code,
     @include match-line;
   }
 
-  .diff-grid-left:hover,
-  .diff-grid-right:hover,
+  &:not(.match) .diff-grid-left:hover,
+  &:not(.match) .diff-grid-right:hover,
   &.code-search-line:hover {
     .diff-line-num:not(.empty-cell):not(.conflict_marker_their):not(.conflict_marker_our) {
       @include line-number-hover;

spec/frontend/diffs/components/diff_view_spec.js

@@ -50,8 +50,11 @@ describe('DiffView', () => {
   };
 
   it('renders a match line', () => {
-    const wrapper = createWrapper({ diffLines: [{ isMatchLineLeft: true }] });
+    const wrapper = createWrapper({
+      diffLines: [{ isMatchLineLeft: true, left: { rich_text: 'matched text', lineDraft: {} } }],
+    });
     expect(wrapper.find(DiffExpansionCell).exists()).toBe(true);
+    expect(wrapper.text()).toContain('matched text');
   });
 
   it.each`