Merge branch '121612-remove-zero-width-hack' into 'master'

Fix whitesapce hack with corrected display value

Closes #121612

See merge request gitlab-org/gitlab!22553

app/assets/javascripts/vue_shared/components/markdown/suggestion_diff_row.vue

@@ -8,6 +8,9 @@ export default {
     },
   },
   computed: {
+    displayAsCell() {
+      return !(this.line.rich_text || this.line.text);
+    },
     lineType() {
       return this.line.type;
     },
@@ -23,11 +26,9 @@ export default {
     <td class="diff-line-num new_line border-top-0 border-bottom-0" :class="lineType">
       {{ line.new_line }}
     </td>
-    <td class="line_content" :class="lineType">
+    <td class="line_content" :class="[{ 'd-table-cell': displayAsCell }, lineType]">
       <span v-if="line.rich_text" v-html="line.rich_text"></span>
       <span v-else-if="line.text">{{ line.text }}</span>
-      <!-- TODO: replace this hack with zero-width whitespace when we have rich_text from BE -->
-      <span v-else>&#8203;</span>
     </td>
   </tr>
 </template>

spec/frontend/vue_shared/components/markdown/suggestion_diff_row_spec.js

@@ -63,21 +63,59 @@ describe('SuggestionDiffRow', () => {
     it('renders the plain text when it is available but rich text is not', () => {
       factory({
         propsData: {
-          line: Object.assign({}, newLine, { rich_text: undefined }),
+          line: {
+            ...newLine,
+            rich_text: undefined,
+          },
         },
       });
 
       expect(wrapper.find('td.line_content').text()).toEqual('newplaintext');
     });
 
-    it('renders a zero-width space when it has no plain or rich texts', () => {
+    it('switches to table-cell display when it has no plain or rich texts', () => {
       factory({
         propsData: {
-          line: Object.assign({}, newLine, { rich_text: undefined, text: undefined }),
+          line: {
+            ...newLine,
+            text: undefined,
+            rich_text: undefined,
+          },
         },
       });
 
-      expect(wrapper.find('td.line_content').text()).toEqual('\u200B');
+      const lineContent = wrapper.find('td.line_content');
+
+      expect(lineContent.classes()).toContain('d-table-cell');
+      expect(lineContent.text()).toEqual('');
+    });
+
+    it('does not switch to table-cell display if it has either plain or rich texts', () => {
+      let lineContent;
+
+      factory({
+        propsData: {
+          line: {
+            ...newLine,
+            text: undefined,
+          },
+        },
+      });
+
+      lineContent = wrapper.find('td.line_content');
+      expect(lineContent.classes()).not.toContain('d-table-cell');
+
+      factory({
+        propsData: {
+          line: {
+            ...newLine,
+            rich_text: undefined,
+          },
+        },
+      });
+
+      lineContent = wrapper.find('td.line_content');
+      expect(lineContent.classes()).not.toContain('d-table-cell');
     });
   });