Add latest changes from gitlab-org/gitlab@master

6 files changed, 106 insertions, 19 deletions

diff --git a/spec/frontend/content_editor/components/bubble_menus/code_block_spec.js b/spec/frontend/content_editor/components/bubble_menus/code_block_spec.js
index 646d068e795..154035a46ed 100644
--- a/spec/frontend/content_editor/components/bubble_menus/code_block_spec.js
+++ b/spec/frontend/content_editor/components/bubble_menus/code_block_spec.js
@@ -44,6 +44,12 @@ describe('content_editor/components/bubble_menus/code_block', () => {
     });
   };
 
+  const preTag = ({ language, content = 'test' } = {}) => {
+    const languageAttr = language ? ` lang="${language}"` : '';
+
+    return `<pre class="js-syntax-highlight"${languageAttr}>${content}</pre>`;
+  };
+
   const findDropdownItems = () => wrapper.findAllComponents(GlDropdownItem);
   const findDropdownItemsData = () =>
     findDropdownItems().wrappers.map((x) => ({
@@ -62,7 +68,7 @@ describe('content_editor/components/bubble_menus/code_block', () => {
   });
 
   it('renders bubble menu component', async () => {
-    tiptapEditor.commands.insertContent('<pre>test</pre>');
+    tiptapEditor.commands.insertContent(preTag());
     bubbleMenu = wrapper.findComponent(BubbleMenu);
 
     await emitEditorEvent({ event: 'transaction', tiptapEditor });
@@ -72,7 +78,7 @@ describe('content_editor/components/bubble_menus/code_block', () => {
   });
 
   it('selects plaintext language by default', async () => {
-    tiptapEditor.commands.insertContent('<pre>test</pre>');
+    tiptapEditor.commands.insertContent(preTag());
     bubbleMenu = wrapper.findComponent(BubbleMenu);
 
     await emitEditorEvent({ event: 'transaction', tiptapEditor });
@@ -81,7 +87,7 @@ describe('content_editor/components/bubble_menus/code_block', () => {
   });
 
   it('selects appropriate language based on the code block', async () => {
-    tiptapEditor.commands.insertContent('<pre lang="javascript">var a = 2;</pre>');
+    tiptapEditor.commands.insertContent(preTag({ language: 'javascript' }));
     bubbleMenu = wrapper.findComponent(BubbleMenu);
 
     await emitEditorEvent({ event: 'transaction', tiptapEditor });
@@ -90,7 +96,7 @@ describe('content_editor/components/bubble_menus/code_block', () => {
   });
 
   it('selects diagram sytnax for mermaid', async () => {
-    tiptapEditor.commands.insertContent('<pre lang="mermaid">test</pre>');
+    tiptapEditor.commands.insertContent(preTag({ language: 'mermaid' }));
     bubbleMenu = wrapper.findComponent(BubbleMenu);
 
     await emitEditorEvent({ event: 'transaction', tiptapEditor });
@@ -99,7 +105,7 @@ describe('content_editor/components/bubble_menus/code_block', () => {
   });
 
   it("selects Custom (syntax) if the language doesn't exist in the list", async () => {
-    tiptapEditor.commands.insertContent('<pre lang="nomnoml">test</pre>');
+    tiptapEditor.commands.insertContent(preTag({ language: 'nomnoml' }));
     bubbleMenu = wrapper.findComponent(BubbleMenu);
 
     await emitEditorEvent({ event: 'transaction', tiptapEditor });
@@ -109,19 +115,20 @@ describe('content_editor/components/bubble_menus/code_block', () => {
 
   describe('copy button', () => {
     it('copies the text of the code block', async () => {
+      const content = 'var a = Math.PI / 2;';
       jest.spyOn(navigator.clipboard, 'writeText');
 
-      tiptapEditor.commands.insertContent('<pre lang="javascript">var a = Math.PI / 2;</pre>');
+      tiptapEditor.commands.insertContent(preTag({ language: 'javascript', content }));
 
       await wrapper.findByTestId('copy-code-block').vm.$emit('click');
 
-      expect(navigator.clipboard.writeText).toHaveBeenCalledWith('var a = Math.PI / 2;');
+      expect(navigator.clipboard.writeText).toHaveBeenCalledWith(content);
     });
   });
 
   describe('delete button', () => {
     it('deletes the code block', async () => {
-      tiptapEditor.commands.insertContent('<pre lang="javascript">var a = 2;</pre>');
+      tiptapEditor.commands.insertContent(preTag({ language: 'javascript' }));
 
       await wrapper.findByTestId('delete-code-block').vm.$emit('click');
 
@@ -164,7 +171,7 @@ describe('content_editor/components/bubble_menus/code_block', () => {
 
   describe('when opened and search is changed', () => {
     beforeEach(async () => {
-      tiptapEditor.commands.insertContent('<pre lang="javascript">var a = 2;</pre>');
+      tiptapEditor.commands.insertContent(preTag({ language: 'javascript' }));
 
       wrapper.findComponent(GlSearchBoxByType).vm.$emit('input', 'js');
 
diff --git a/spec/frontend/content_editor/extensions/html_nodes_spec.js b/spec/frontend/content_editor/extensions/html_nodes_spec.js
new file mode 100644
index 00000000000..24c68239025
--- /dev/null
+++ b/spec/frontend/content_editor/extensions/html_nodes_spec.js
@@ -0,0 +1,42 @@
+import HTMLNodes from '~/content_editor/extensions/html_nodes';
+import { createTestEditor, createDocBuilder } from '../test_utils';
+
+describe('content_editor/extensions/html_nodes', () => {
+  let tiptapEditor;
+  let doc;
+  let div;
+  let pre;
+  let p;
+
+  beforeEach(() => {
+    tiptapEditor = createTestEditor({ extensions: [...HTMLNodes] });
+
+    ({
+      builders: { doc, p, pre, div },
+    } = createDocBuilder({
+      tiptapEditor,
+      names: {
+        ...HTMLNodes.reduce(
+          (builders, htmlNode) => ({
+            ...builders,
+            [htmlNode.name]: { nodeType: htmlNode.name },
+          }),
+          {},
+        ),
+      },
+    }));
+  });
+
+  it.each`
+    input                      | insertedNodes
+    ${'<div><p>foo</p></div>'} | ${() => div(p('foo'))}
+    ${'<pre><p>foo</p></pre>'} | ${() => pre(p('foo'))}
+  `('parses and creates nodes for $input', ({ input, insertedNodes }) => {
+    const expectedDoc = doc(insertedNodes());
+
+    tiptapEditor.commands.setContent(input);
+
+    expect(tiptapEditor.getJSON()).toEqual(expectedDoc.toJSON());
+    expect(tiptapEditor.getHTML()).toEqual(input);
+  });
+});
diff --git a/spec/frontend/content_editor/extensions/paste_markdown_spec.js b/spec/frontend/content_editor/extensions/paste_markdown_spec.js
index 5d46c2c0650..53efda6aee2 100644
--- a/spec/frontend/content_editor/extensions/paste_markdown_spec.js
+++ b/spec/frontend/content_editor/extensions/paste_markdown_spec.js
@@ -14,7 +14,7 @@ import {
 import waitForPromises from 'helpers/wait_for_promises';
 import { createTestEditor, createDocBuilder, waitUntilNextDocTransaction } from '../test_utils';
 
-const CODE_BLOCK_HTML = '<pre lang="javascript">var a = 2;</pre>';
+const CODE_BLOCK_HTML = '<pre class="js-syntax-highlight" lang="javascript">var a = 2;</pre>';
 const DIAGRAM_HTML =
   '<img data-diagram="nomnoml" data-diagram-src="data:text/plain;base64,WzxmcmFtZT5EZWNvcmF0b3IgcGF0dGVybl0=">';
 const FRONTMATTER_HTML = '<pre lang="yaml" data-lang-params="frontmatter">key: value</pre>';
diff --git a/spec/frontend/content_editor/render_html_and_json_for_all_examples.js b/spec/frontend/content_editor/render_html_and_json_for_all_examples.js
index 8ec1307d9b8..0ac6fdb9ce4 100644
--- a/spec/frontend/content_editor/render_html_and_json_for_all_examples.js
+++ b/spec/frontend/content_editor/render_html_and_json_for_all_examples.js
@@ -10,7 +10,6 @@ import DescriptionItem from '~/content_editor/extensions/description_item';
 import DescriptionList from '~/content_editor/extensions/description_list';
 import Details from '~/content_editor/extensions/details';
 import DetailsContent from '~/content_editor/extensions/details_content';
-import Division from '~/content_editor/extensions/division';
 import Emoji from '~/content_editor/extensions/emoji';
 import Figure from '~/content_editor/extensions/figure';
 import FigureCaption from '~/content_editor/extensions/figure_caption';
@@ -20,6 +19,7 @@ import FootnotesSection from '~/content_editor/extensions/footnotes_section';
 import HardBreak from '~/content_editor/extensions/hard_break';
 import Heading from '~/content_editor/extensions/heading';
 import HorizontalRule from '~/content_editor/extensions/horizontal_rule';
+import HTMLNodes from '~/content_editor/extensions/html_nodes';
 import Image from '~/content_editor/extensions/image';
 import InlineDiff from '~/content_editor/extensions/inline_diff';
 import Italic from '~/content_editor/extensions/italic';
@@ -47,7 +47,6 @@ const tiptapEditor = createTestEditor({
     DescriptionList,
     Details,
     DetailsContent,
-    Division,
     Emoji,
     FootnoteDefinition,
     FootnoteReference,
@@ -57,6 +56,7 @@ const tiptapEditor = createTestEditor({
     HardBreak,
     Heading,
     HorizontalRule,
+    ...HTMLNodes,
     Image,
     InlineDiff,
     Italic,
diff --git a/spec/frontend/content_editor/services/markdown_serializer_spec.js b/spec/frontend/content_editor/services/markdown_serializer_spec.js
index 13e9efaea59..156095dad14 100644
--- a/spec/frontend/content_editor/services/markdown_serializer_spec.js
+++ b/spec/frontend/content_editor/services/markdown_serializer_spec.js
@@ -7,7 +7,6 @@ import DescriptionItem from '~/content_editor/extensions/description_item';
 import DescriptionList from '~/content_editor/extensions/description_list';
 import Details from '~/content_editor/extensions/details';
 import DetailsContent from '~/content_editor/extensions/details_content';
-import Division from '~/content_editor/extensions/division';
 import Emoji from '~/content_editor/extensions/emoji';
 import Figure from '~/content_editor/extensions/figure';
 import FigureCaption from '~/content_editor/extensions/figure_caption';
@@ -16,6 +15,8 @@ import FootnoteReference from '~/content_editor/extensions/footnote_reference';
 import HardBreak from '~/content_editor/extensions/hard_break';
 import Heading from '~/content_editor/extensions/heading';
 import HorizontalRule from '~/content_editor/extensions/horizontal_rule';
+import HTMLMarks from '~/content_editor/extensions/html_marks';
+import HTMLNodes from '~/content_editor/extensions/html_nodes';
 import Image from '~/content_editor/extensions/image';
 import InlineDiff from '~/content_editor/extensions/inline_diff';
 import Italic from '~/content_editor/extensions/italic';
@@ -48,7 +49,6 @@ const tiptapEditor = createTestEditor({
     DescriptionList,
     Details,
     DetailsContent,
-    Division,
     Emoji,
     FootnoteDefinition,
     FootnoteReference,
@@ -57,6 +57,8 @@ const tiptapEditor = createTestEditor({
     HardBreak,
     Heading,
     HorizontalRule,
+    ...HTMLMarks,
+    ...HTMLNodes,
     Image,
     InlineDiff,
     Italic,
@@ -84,7 +86,7 @@ const {
     codeBlock,
     details,
     detailsContent,
-    division,
+    div,
     descriptionItem,
     descriptionList,
     emoji,
@@ -120,7 +122,13 @@ const {
     codeBlock: { nodeType: CodeBlockHighlight.name },
     details: { nodeType: Details.name },
     detailsContent: { nodeType: DetailsContent.name },
-    division: { nodeType: Division.name },
+    ...HTMLNodes.reduce(
+      (builders, htmlNode) => ({
+        ...builders,
+        [htmlNode.name]: { nodeType: htmlNode.name },
+      }),
+      {},
+    ),
     descriptionItem: { nodeType: DescriptionItem.name },
     descriptionList: { nodeType: DescriptionList.name },
     emoji: { markType: Emoji.name },
@@ -725,8 +733,8 @@ _inception_
   it('correctly renders div', () => {
     expect(
       serialize(
-        division(paragraph('just a paragraph in a div')),
-        division(paragraph('just some ', bold('styled'), ' ', italic('content'), ' in a div')),
+        div(paragraph('just a paragraph in a div')),
+        div(paragraph('just some ', bold('styled'), ' ', italic('content'), ' in a div')),
       ),
     ).toBe(
       '<div>just a paragraph in a div</div>\n<div>\n\njust some **styled** _content_ in a div\n\n</div>',
diff --git a/spec/frontend/diffs/components/tree_list_spec.js b/spec/frontend/diffs/components/tree_list_spec.js
index 963805f4792..931a9562d36 100644
--- a/spec/frontend/diffs/components/tree_list_spec.js
+++ b/spec/frontend/diffs/components/tree_list_spec.js
@@ -50,6 +50,19 @@ describe('Diffs tree list component', () => {
         type: 'blob',
         parentPath: 'app',
       },
+      'test.rb': {
+        addedLines: 0,
+        changed: true,
+        deleted: false,
+        fileHash: 'test',
+        key: 'test.rb',
+        name: 'test.rb',
+        path: 'app/test.rb',
+        removedLines: 0,
+        tempFile: true,
+        type: 'blob',
+        parentPath: 'app',
+      },
       app: {
         key: 'app',
         path: 'app',
@@ -85,6 +98,23 @@ describe('Diffs tree list component', () => {
       createComponent();
     });
 
+    describe('search by file extension', () => {
+      it.each`
+        extension       | itemSize
+        ${'*.md'}       | ${0}
+        ${'*.js'}       | ${1}
+        ${'index.js'}   | ${1}
+        ${'app/*.js'}   | ${1}
+        ${'*.js, *.rb'} | ${2}
+      `('it returns $itemSize item for $extension', async ({ extension, itemSize }) => {
+        wrapper.find('[data-testid="diff-tree-search"]').setValue(extension);
+
+        await nextTick();
+
+        expect(getFileRows()).toHaveLength(itemSize);
+      });
+    });
+
     it('renders tree', () => {
       expect(getFileRows()).toHaveLength(2);
       expect(getFileRows().at(0).html()).toContain('index.js');
@@ -120,7 +150,7 @@ describe('Diffs tree list component', () => {
       wrapper.vm.$store.state.diffs.renderTreeList = false;
 
       await nextTick();
-      expect(getFileRows()).toHaveLength(1);
+      expect(getFileRows()).toHaveLength(2);
     });
 
     it('renders file paths when renderTreeList is false', async () => {