Add latest changes from gitlab-org/gitlab@master

10 files changed, 157 insertions, 110 deletions

diff --git a/spec/frontend/content_editor/components/content_editor_error_spec.js b/spec/frontend/content_editor/components/content_editor_alert_spec.js
index 8723fb5a338..2ddcd8f024e 100644
--- a/spec/frontend/content_editor/components/content_editor_error_spec.js
+++ b/spec/frontend/content_editor/components/content_editor_alert_spec.js
@@ -1,11 +1,11 @@
 import { GlAlert } from '@gitlab/ui';
 import { nextTick } from 'vue';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
-import ContentEditorError from '~/content_editor/components/content_editor_error.vue';
+import ContentEditorAlert from '~/content_editor/components/content_editor_alert.vue';
 import EditorStateObserver from '~/content_editor/components/editor_state_observer.vue';
 import { createTestEditor, emitEditorEvent } from '../test_utils';
 
-describe('content_editor/components/content_editor_error', () => {
+describe('content_editor/components/content_editor_alert', () => {
   let wrapper;
   let tiptapEditor;
 
@@ -14,7 +14,7 @@ describe('content_editor/components/content_editor_error', () => {
   const createWrapper = async () => {
     tiptapEditor = createTestEditor();
 
-    wrapper = shallowMountExtended(ContentEditorError, {
+    wrapper = shallowMountExtended(ContentEditorAlert, {
       provide: {
         tiptapEditor,
       },
@@ -28,22 +28,28 @@ describe('content_editor/components/content_editor_error', () => {
     wrapper.destroy();
   });
 
-  it('renders error when content editor emits an error event', async () => {
-    const error = 'error message';
+  it.each`
+    variant      | message
+    ${'danger'}  | ${'An error occurred'}
+    ${'warning'} | ${'A warning'}
+  `(
+    'renders error when content editor emits an error event for variant: $variant',
+    async ({ message, variant }) => {
+      createWrapper();
 
-    createWrapper();
-
-    await emitEditorEvent({ tiptapEditor, event: 'error', params: { error } });
+      await emitEditorEvent({ tiptapEditor, event: 'alert', params: { message, variant } });
 
-    expect(findErrorAlert().text()).toBe(error);
-  });
+      expect(findErrorAlert().text()).toBe(message);
+      expect(findErrorAlert().attributes().variant).toBe(variant);
+    },
+  );
 
   it('allows dismissing the error', async () => {
-    const error = 'error message';
+    const message = 'error message';
 
     createWrapper();
 
-    await emitEditorEvent({ tiptapEditor, event: 'error', params: { error } });
+    await emitEditorEvent({ tiptapEditor, event: 'alert', params: { message } });
 
     findErrorAlert().vm.$emit('dismiss');
 
diff --git a/spec/frontend/content_editor/components/content_editor_spec.js b/spec/frontend/content_editor/components/content_editor_spec.js
index 3d1ef03083d..9a772c41e52 100644
--- a/spec/frontend/content_editor/components/content_editor_spec.js
+++ b/spec/frontend/content_editor/components/content_editor_spec.js
@@ -3,7 +3,7 @@ import { EditorContent } from '@tiptap/vue-2';
 import { nextTick } from 'vue';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import ContentEditor from '~/content_editor/components/content_editor.vue';
-import ContentEditorError from '~/content_editor/components/content_editor_error.vue';
+import ContentEditorAlert from '~/content_editor/components/content_editor_alert.vue';
 import ContentEditorProvider from '~/content_editor/components/content_editor_provider.vue';
 import EditorStateObserver from '~/content_editor/components/editor_state_observer.vue';
 import FormattingBubbleMenu from '~/content_editor/components/formatting_bubble_menu.vue';
@@ -111,10 +111,10 @@ describe('ContentEditor', () => {
     ]);
   });
 
-  it('renders content_editor_error component', () => {
+  it('renders content_editor_alert component', () => {
     createWrapper();
 
-    expect(wrapper.findComponent(ContentEditorError).exists()).toBe(true);
+    expect(wrapper.findComponent(ContentEditorAlert).exists()).toBe(true);
   });
 
   describe('when loading content', () => {
diff --git a/spec/frontend/content_editor/components/wrappers/table_cell_base_spec.js b/spec/frontend/content_editor/components/wrappers/table_cell_base_spec.js
index e48f59f6d9c..6017a145a87 100644
--- a/spec/frontend/content_editor/components/wrappers/table_cell_base_spec.js
+++ b/spec/frontend/content_editor/components/wrappers/table_cell_base_spec.js
@@ -11,13 +11,13 @@ jest.mock('prosemirror-tables');
 describe('content/components/wrappers/table_cell_base', () => {
   let wrapper;
   let editor;
-  let getPos;
+  let node;
 
   const createWrapper = async (propsData = { cellType: 'td' }) => {
     wrapper = shallowMountExtended(TableCellBaseWrapper, {
       propsData: {
         editor,
-        getPos,
+        node,
         ...propsData,
       },
     });
@@ -36,7 +36,7 @@ describe('content/components/wrappers/table_cell_base', () => {
   const setCurrentPositionInCell = () => {
     const { $cursor } = editor.state.selection;
 
-    getPos.mockReturnValue($cursor.pos - $cursor.parentOffset - 1);
+    jest.spyOn($cursor, 'node').mockReturnValue(node);
   };
   const mockDropdownHide = () => {
     /*
@@ -48,7 +48,7 @@ describe('content/components/wrappers/table_cell_base', () => {
   };
 
   beforeEach(() => {
-    getPos = jest.fn();
+    node = {};
     editor = createTestEditor({});
   });
 
diff --git a/spec/frontend/content_editor/components/wrappers/table_cell_body_spec.js b/spec/frontend/content_editor/components/wrappers/table_cell_body_spec.js
index 5d26c44ba03..2aefbc77545 100644
--- a/spec/frontend/content_editor/components/wrappers/table_cell_body_spec.js
+++ b/spec/frontend/content_editor/components/wrappers/table_cell_body_spec.js
@@ -6,19 +6,19 @@ import { createTestEditor } from '../../test_utils';
 describe('content/components/wrappers/table_cell_body', () => {
   let wrapper;
   let editor;
-  let getPos;
+  let node;
 
   const createWrapper = async () => {
     wrapper = shallowMount(TableCellBodyWrapper, {
       propsData: {
         editor,
-        getPos,
+        node,
       },
     });
   };
 
   beforeEach(() => {
-    getPos = jest.fn();
+    node = {};
     editor = createTestEditor({});
   });
 
@@ -30,7 +30,7 @@ describe('content/components/wrappers/table_cell_body', () => {
     createWrapper();
     expect(wrapper.findComponent(TableCellBaseWrapper).props()).toEqual({
       editor,
-      getPos,
+      node,
       cellType: 'td',
     });
   });
diff --git a/spec/frontend/content_editor/components/wrappers/table_cell_header_spec.js b/spec/frontend/content_editor/components/wrappers/table_cell_header_spec.js
index e561191418d..e48df8734a6 100644
--- a/spec/frontend/content_editor/components/wrappers/table_cell_header_spec.js
+++ b/spec/frontend/content_editor/components/wrappers/table_cell_header_spec.js
@@ -6,19 +6,19 @@ import { createTestEditor } from '../../test_utils';
 describe('content/components/wrappers/table_cell_header', () => {
   let wrapper;
   let editor;
-  let getPos;
+  let node;
 
   const createWrapper = async () => {
     wrapper = shallowMount(TableCellHeaderWrapper, {
       propsData: {
         editor,
-        getPos,
+        node,
       },
     });
   };
 
   beforeEach(() => {
-    getPos = jest.fn();
+    node = {};
     editor = createTestEditor({});
   });
 
@@ -30,7 +30,7 @@ describe('content/components/wrappers/table_cell_header', () => {
     createWrapper();
     expect(wrapper.findComponent(TableCellBaseWrapper).props()).toEqual({
       editor,
-      getPos,
+      node,
       cellType: 'th',
     });
   });
diff --git a/spec/frontend/content_editor/extensions/attachment_spec.js b/spec/frontend/content_editor/extensions/attachment_spec.js
index 48dab91709e..d2d2cd98a78 100644
--- a/spec/frontend/content_editor/extensions/attachment_spec.js
+++ b/spec/frontend/content_editor/extensions/attachment_spec.js
@@ -157,11 +157,11 @@ describe('content_editor/extensions/attachment', () => {
           });
         });
 
-        it('emits an error event that includes an error message', (done) => {
+        it('emits an alert event that includes an error message', (done) => {
           tiptapEditor.commands.uploadAttachment({ file: imageFile });
 
-          tiptapEditor.on('error', ({ error }) => {
-            expect(error).toBe('An error occurred while uploading the image. Please try again.');
+          tiptapEditor.on('alert', ({ message }) => {
+            expect(message).toBe('An error occurred while uploading the image. Please try again.');
             done();
           });
         });
@@ -233,11 +233,11 @@ describe('content_editor/extensions/attachment', () => {
           });
         });
 
-        it('emits an error event that includes an error message', (done) => {
+        it('emits an alert event that includes an error message', (done) => {
           tiptapEditor.commands.uploadAttachment({ file: attachmentFile });
 
-          tiptapEditor.on('error', ({ error }) => {
-            expect(error).toBe('An error occurred while uploading the file. Please try again.');
+          tiptapEditor.on('alert', ({ message }) => {
+            expect(message).toBe('An error occurred while uploading the file. Please try again.');
             done();
           });
         });
diff --git a/spec/frontend/content_editor/extensions/table_spec.js b/spec/frontend/content_editor/extensions/table_spec.js
new file mode 100644
index 00000000000..121fe9192db
--- /dev/null
+++ b/spec/frontend/content_editor/extensions/table_spec.js
@@ -0,0 +1,102 @@
+import Bold from '~/content_editor/extensions/bold';
+import BulletList from '~/content_editor/extensions/bullet_list';
+import ListItem from '~/content_editor/extensions/list_item';
+import Table from '~/content_editor/extensions/table';
+import TableCell from '~/content_editor/extensions/table_cell';
+import TableRow from '~/content_editor/extensions/table_row';
+import TableHeader from '~/content_editor/extensions/table_header';
+import { createTestEditor, createDocBuilder } from '../test_utils';
+
+describe('content_editor/extensions/table', () => {
+  let tiptapEditor;
+  let doc;
+  let p;
+  let table;
+  let tableHeader;
+  let tableCell;
+  let tableRow;
+  let initialDoc;
+  let mockAlert;
+
+  beforeEach(() => {
+    tiptapEditor = createTestEditor({
+      extensions: [Table, TableCell, TableRow, TableHeader, BulletList, Bold, ListItem],
+    });
+
+    ({
+      builders: { doc, p, table, tableCell, tableHeader, tableRow },
+    } = createDocBuilder({
+      tiptapEditor,
+      names: {
+        bold: { markType: Bold.name },
+        table: { nodeType: Table.name },
+        tableHeader: { nodeType: TableHeader.name },
+        tableCell: { nodeType: TableCell.name },
+        tableRow: { nodeType: TableRow.name },
+        bulletList: { nodeType: BulletList.name },
+        listItem: { nodeType: ListItem.name },
+      },
+    }));
+
+    initialDoc = doc(
+      table(
+        { isMarkdown: true },
+        tableRow(tableHeader(p('This is')), tableHeader(p('a table'))),
+        tableRow(tableCell(p('this is')), tableCell(p('the first row'))),
+      ),
+    );
+
+    mockAlert = jest.fn();
+  });
+
+  it('triggers a warning (just once) if the table is markdown, but the changes in the document will render an HTML table instead', () => {
+    tiptapEditor.commands.setContent(initialDoc.toJSON());
+
+    tiptapEditor.on('alert', mockAlert);
+
+    tiptapEditor.commands.setTextSelection({ from: 20, to: 22 });
+    tiptapEditor.commands.toggleBulletList();
+
+    jest.advanceTimersByTime(1001);
+    expect(mockAlert).toHaveBeenCalled();
+
+    mockAlert.mockReset();
+
+    tiptapEditor.commands.setTextSelection({ from: 4, to: 6 });
+    tiptapEditor.commands.toggleBulletList();
+
+    jest.advanceTimersByTime(1001);
+    expect(mockAlert).not.toHaveBeenCalled();
+  });
+
+  it('does not trigger a warning if the table is markdown, and the changes in the document can generate a markdown table', () => {
+    tiptapEditor.commands.setContent(initialDoc.toJSON());
+
+    tiptapEditor.on('alert', mockAlert);
+
+    tiptapEditor.commands.setTextSelection({ from: 20, to: 22 });
+    tiptapEditor.commands.toggleBold();
+
+    jest.advanceTimersByTime(1001);
+    expect(mockAlert).not.toHaveBeenCalled();
+  });
+
+  it('does not trigger any warnings if the table is not markdown', () => {
+    initialDoc = doc(
+      table(
+        tableRow(tableHeader(p('This is')), tableHeader(p('a table'))),
+        tableRow(tableCell(p('this is')), tableCell(p('the first row'))),
+      ),
+    );
+
+    tiptapEditor.commands.setContent(initialDoc.toJSON());
+
+    tiptapEditor.on('alert', mockAlert);
+
+    tiptapEditor.commands.setTextSelection({ from: 20, to: 22 });
+    tiptapEditor.commands.toggleBulletList();
+
+    jest.advanceTimersByTime(1001);
+    expect(mockAlert).not.toHaveBeenCalled();
+  });
+});
diff --git a/spec/frontend/content_editor/services/markdown_serializer_spec.js b/spec/frontend/content_editor/services/markdown_serializer_spec.js
index 33056ab9e4a..cfd93c2df10 100644
--- a/spec/frontend/content_editor/services/markdown_serializer_spec.js
+++ b/spec/frontend/content_editor/services/markdown_serializer_spec.js
@@ -34,10 +34,6 @@ import { createTestEditor, createDocBuilder } from '../test_utils';
 
 jest.mock('~/emoji');
 
-jest.mock('~/content_editor/services/feature_flags', () => ({
-  isBlockTablesFeatureEnabled: jest.fn().mockReturnValue(true),
-}));
-
 const tiptapEditor = createTestEditor({
   extensions: [
     Blockquote,
diff --git a/spec/frontend/pipelines/pipelines_artifacts_spec.js b/spec/frontend/pipelines/pipelines_artifacts_spec.js
index f33c66dedf3..2d876841e06 100644
--- a/spec/frontend/pipelines/pipelines_artifacts_spec.js
+++ b/spec/frontend/pipelines/pipelines_artifacts_spec.js
@@ -1,15 +1,9 @@
-import { GlAlert, GlDropdown, GlDropdownItem, GlLoadingIcon, GlSprintf } from '@gitlab/ui';
+import { GlDropdown, GlDropdownItem, GlSprintf } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
-import MockAdapter from 'axios-mock-adapter';
-import waitForPromises from 'helpers/wait_for_promises';
-import axios from '~/lib/utils/axios_utils';
-import PipelineArtifacts, {
-  i18n,
-} from '~/pipelines/components/pipelines_list/pipelines_artifacts.vue';
+import PipelineArtifacts from '~/pipelines/components/pipelines_list/pipelines_artifacts.vue';
 
 describe('Pipelines Artifacts dropdown', () => {
   let wrapper;
-  let mockAxios;
 
   const artifacts = [
     {
@@ -21,23 +15,13 @@ describe('Pipelines Artifacts dropdown', () => {
       path: '/download/path-two',
     },
   ];
-  const artifactsEndpointPlaceholder = ':pipeline_artifacts_id';
-  const artifactsEndpoint = `endpoint/${artifactsEndpointPlaceholder}/artifacts.json`;
   const pipelineId = 108;
 
-  const createComponent = ({ mockData = {} } = {}) => {
+  const createComponent = ({ mockArtifacts = artifacts } = {}) => {
     wrapper = shallowMount(PipelineArtifacts, {
-      provide: {
-        artifactsEndpoint,
-        artifactsEndpointPlaceholder,
-      },
       propsData: {
         pipelineId,
-      },
-      data() {
-        return {
-          ...mockData,
-        };
+        artifacts: mockArtifacts,
       },
       stubs: {
         GlSprintf,
@@ -45,80 +29,33 @@ describe('Pipelines Artifacts dropdown', () => {
     });
   };
 
-  const findAlert = () => wrapper.findComponent(GlAlert);
   const findDropdown = () => wrapper.findComponent(GlDropdown);
-  const findLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
   const findFirstGlDropdownItem = () => wrapper.find(GlDropdownItem);
   const findAllGlDropdownItems = () => wrapper.find(GlDropdown).findAll(GlDropdownItem);
 
-  beforeEach(() => {
-    mockAxios = new MockAdapter(axios);
-  });
-
   afterEach(() => {
     wrapper.destroy();
     wrapper = null;
   });
 
-  it('should render the dropdown', () => {
-    createComponent();
-
-    expect(findDropdown().exists()).toBe(true);
-  });
-
-  it('should fetch artifacts on dropdown click', async () => {
-    const endpoint = artifactsEndpoint.replace(artifactsEndpointPlaceholder, pipelineId);
-    mockAxios.onGet(endpoint).replyOnce(200, { artifacts });
-    createComponent();
-    findDropdown().vm.$emit('show');
-    await waitForPromises();
-
-    expect(mockAxios.history.get).toHaveLength(1);
-    expect(wrapper.vm.artifacts).toEqual(artifacts);
-  });
-
   it('should render a dropdown with all the provided artifacts', () => {
-    createComponent({ mockData: { artifacts } });
+    createComponent();
 
     expect(findAllGlDropdownItems()).toHaveLength(artifacts.length);
   });
 
   it('should render a link with the provided path', () => {
-    createComponent({ mockData: { artifacts } });
+    createComponent();
 
     expect(findFirstGlDropdownItem().attributes('href')).toBe(artifacts[0].path);
     expect(findFirstGlDropdownItem().text()).toBe(artifacts[0].name);
   });
 
-  describe('with a failing request', () => {
-    it('should render an error message', async () => {
-      const endpoint = artifactsEndpoint.replace(artifactsEndpointPlaceholder, pipelineId);
-      mockAxios.onGet(endpoint).replyOnce(500);
-      createComponent();
-      findDropdown().vm.$emit('show');
-      await waitForPromises();
-
-      const error = findAlert();
-      expect(error.exists()).toBe(true);
-      expect(error.text()).toBe(i18n.artifactsFetchErrorMessage);
-    });
-  });
-
-  describe('with no artifacts received', () => {
-    it('should render empty alert message', () => {
-      createComponent({ mockData: { artifacts: [] } });
-
-      const emptyAlert = findAlert();
-      expect(emptyAlert.exists()).toBe(true);
-      expect(emptyAlert.text()).toBe(i18n.noArtifacts);
-    });
-  });
-
-  describe('when artifacts are loading', () => {
-    it('should show loading icon', () => {
-      createComponent({ mockData: { isLoading: true } });
+  describe('with no artifacts', () => {
+    it('should not render the dropdown', () => {
+      createComponent({ mockArtifacts: [] });
 
-      expect(findLoadingIcon().exists()).toBe(true);
+      expect(findDropdown().exists()).toBe(false);
     });
   });
 });
diff --git a/spec/frontend/vue_mr_widget/components/mr_widget_pipeline_spec.js b/spec/frontend/vue_mr_widget/components/mr_widget_pipeline_spec.js
index ecaca16a2cd..6347e3c3be3 100644
--- a/spec/frontend/vue_mr_widget/components/mr_widget_pipeline_spec.js
+++ b/spec/frontend/vue_mr_widget/components/mr_widget_pipeline_spec.js
@@ -1,5 +1,7 @@
 import { GlLoadingIcon } from '@gitlab/ui';
 import { shallowMount, mount } from '@vue/test-utils';
+import axios from 'axios';
+import MockAdapter from 'axios-mock-adapter';
 import { trimText } from 'helpers/text_helper';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import PipelineMiniGraph from '~/pipelines/components/pipelines_list/pipeline_mini_graph.vue';
@@ -39,6 +41,8 @@ describe('MRWidgetPipeline', () => {
   const findMonitoringPipelineMessage = () => wrapper.findByTestId('monitoring-pipeline-message');
   const findLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
 
+  const mockArtifactsRequest = () => new MockAdapter(axios).onGet().reply(200, []);
+
   const createWrapper = (props = {}, mountFn = shallowMount) => {
     wrapper = extendedWrapper(
       mountFn(PipelineComponent, {
@@ -71,6 +75,8 @@ describe('MRWidgetPipeline', () => {
 
   describe('with a pipeline', () => {
     beforeEach(() => {
+      mockArtifactsRequest();
+
       createWrapper(
         {
           pipelineCoverageDelta: mockData.pipelineCoverageDelta,