Add latest changes from gitlab-org/gitlab@master

9 files changed, 402 insertions, 164 deletions

diff --git a/spec/frontend/alerts_settings/components/__snapshots__/alerts_form_spec.js.snap b/spec/frontend/alerts_settings/components/__snapshots__/alerts_form_spec.js.snap
index 4693d5a47e4..bff4905a12c 100644
--- a/spec/frontend/alerts_settings/components/__snapshots__/alerts_form_spec.js.snap
+++ b/spec/frontend/alerts_settings/components/__snapshots__/alerts_form_spec.js.snap
@@ -16,7 +16,7 @@ exports[`Alert integration settings form default state should match the default
     >
       <gl-form-checkbox-stub
         checked="true"
-        data-qa-selector="create_issue_checkbox"
+        data-qa-selector="create_incident_checkbox"
         id="2"
       >
         <span>
diff --git a/spec/frontend/ide/components/repo_editor_spec.js b/spec/frontend/ide/components/repo_editor_spec.js
index 9921d8cba18..2f9fd957c6b 100644
--- a/spec/frontend/ide/components/repo_editor_spec.js
+++ b/spec/frontend/ide/components/repo_editor_spec.js
@@ -8,9 +8,14 @@ import '~/behaviors/markdown/render_gfm';
 import waitForPromises from 'helpers/wait_for_promises';
 import { stubPerformanceWebAPI } from 'helpers/performance';
 import { exampleConfigs, exampleFiles } from 'jest/ide/lib/editorconfig/mock_data';
-import { EDITOR_CODE_INSTANCE_FN, EDITOR_DIFF_INSTANCE_FN } from '~/editor/constants';
+import {
+  EDITOR_CODE_INSTANCE_FN,
+  EDITOR_DIFF_INSTANCE_FN,
+  EXTENSION_CI_SCHEMA_FILE_NAME_MATCH,
+} from '~/editor/constants';
 import { EditorMarkdownExtension } from '~/editor/extensions/source_editor_markdown_ext';
 import { EditorMarkdownPreviewExtension } from '~/editor/extensions/source_editor_markdown_livepreview_ext';
+import { CiSchemaExtension } from '~/editor/extensions/source_editor_ci_schema_ext';
 import SourceEditor from '~/editor/source_editor';
 import RepoEditor from '~/ide/components/repo_editor.vue';
 import { leftSidebarViews, FILE_VIEW_MODE_PREVIEW, viewerTypes } from '~/ide/constants';
@@ -22,6 +27,8 @@ import ContentViewer from '~/vue_shared/components/content_viewer/content_viewer
 import SourceEditorInstance from '~/editor/source_editor_instance';
 import { file } from '../helpers';
 
+jest.mock('~/editor/extensions/source_editor_ci_schema_ext');
+
 const PREVIEW_MARKDOWN_PATH = '/foo/bar/preview_markdown';
 const CURRENT_PROJECT_ID = 'gitlab-org/gitlab';
 
@@ -46,6 +53,12 @@ const dummyFile = {
     tempFile: true,
     active: true,
   },
+  ciConfig: {
+    ...file(EXTENSION_CI_SCHEMA_FILE_NAME_MATCH),
+    content: '',
+    tempFile: true,
+    active: true,
+  },
   empty: {
     ...file('empty'),
     tempFile: false,
@@ -101,6 +114,7 @@ describe('RepoEditor', () => {
   let createDiffInstanceSpy;
   let createModelSpy;
   let applyExtensionSpy;
+  let removeExtensionSpy;
   let extensionsStore;
 
   const waitForEditorSetup = () =>
@@ -108,7 +122,7 @@ describe('RepoEditor', () => {
       vm.$once('editorSetup', resolve);
     });
 
-  const createComponent = async ({ state = {}, activeFile = dummyFile.text } = {}) => {
+  const createComponent = async ({ state = {}, activeFile = dummyFile.text, flags = {} } = {}) => {
     const store = prepareStore(state, activeFile);
     wrapper = shallowMount(RepoEditor, {
       store,
@@ -118,6 +132,9 @@ describe('RepoEditor', () => {
       mocks: {
         ContentViewer,
       },
+      provide: {
+        glFeatures: flags,
+      },
     });
     await waitForPromises();
     vm = wrapper.vm;
@@ -137,6 +154,7 @@ describe('RepoEditor', () => {
     createDiffInstanceSpy = jest.spyOn(SourceEditor.prototype, EDITOR_DIFF_INSTANCE_FN);
     createModelSpy = jest.spyOn(monacoEditor, 'createModel');
     applyExtensionSpy = jest.spyOn(SourceEditorInstance.prototype, 'use');
+    removeExtensionSpy = jest.spyOn(SourceEditorInstance.prototype, 'unuse');
     jest.spyOn(service, 'getFileData').mockResolvedValue();
     jest.spyOn(service, 'getRawFileData').mockResolvedValue();
   });
@@ -177,6 +195,76 @@ describe('RepoEditor', () => {
     });
   });
 
+  describe('schema registration for .gitlab-ci.yml', () => {
+    const setup = async (activeFile, flagIsOn = true) => {
+      await createComponent({
+        flags: {
+          schemaLinting: flagIsOn,
+        },
+      });
+      vm.editor.registerCiSchema = jest.fn();
+      if (activeFile) {
+        wrapper.setProps({ file: activeFile });
+      }
+      await waitForPromises();
+      await nextTick();
+    };
+    it.each`
+      flagIsOn | activeFile            | shouldUseExtension | desc
+      ${false} | ${dummyFile.markdown} | ${false}           | ${`file is not CI config; should NOT`}
+      ${true}  | ${dummyFile.markdown} | ${false}           | ${`file is not CI config; should NOT`}
+      ${false} | ${dummyFile.ciConfig} | ${false}           | ${`file is CI config; should NOT`}
+      ${true}  | ${dummyFile.ciConfig} | ${true}            | ${`file is CI config; should`}
+    `(
+      'when the flag is "$flagIsOn", $desc use extension',
+      async ({ flagIsOn, activeFile, shouldUseExtension }) => {
+        await setup(activeFile, flagIsOn);
+
+        if (shouldUseExtension) {
+          expect(applyExtensionSpy).toHaveBeenCalledWith({
+            definition: CiSchemaExtension,
+          });
+        } else {
+          expect(applyExtensionSpy).not.toHaveBeenCalledWith({
+            definition: CiSchemaExtension,
+          });
+        }
+      },
+    );
+    it('stores the fetched extension and does not double-fetch the schema', async () => {
+      await setup();
+      expect(CiSchemaExtension).toHaveBeenCalledTimes(0);
+
+      wrapper.setProps({ file: dummyFile.ciConfig });
+      await waitForPromises();
+      await nextTick();
+      expect(CiSchemaExtension).toHaveBeenCalledTimes(1);
+      expect(vm.CiSchemaExtension).toEqual(CiSchemaExtension);
+      expect(vm.editor.registerCiSchema).toHaveBeenCalledTimes(1);
+
+      wrapper.setProps({ file: dummyFile.markdown });
+      await waitForPromises();
+      await nextTick();
+      expect(CiSchemaExtension).toHaveBeenCalledTimes(1);
+      expect(vm.editor.registerCiSchema).toHaveBeenCalledTimes(1);
+
+      wrapper.setProps({ file: dummyFile.ciConfig });
+      await waitForPromises();
+      await nextTick();
+      expect(CiSchemaExtension).toHaveBeenCalledTimes(1);
+      expect(vm.editor.registerCiSchema).toHaveBeenCalledTimes(2);
+    });
+    it('unuses the existing CI extension if the new model is not CI config', async () => {
+      await setup(dummyFile.ciConfig);
+
+      expect(removeExtensionSpy).not.toHaveBeenCalled();
+      wrapper.setProps({ file: dummyFile.markdown });
+      await waitForPromises();
+      await nextTick();
+      expect(removeExtensionSpy).toHaveBeenCalledWith(CiSchemaExtension);
+    });
+  });
+
   describe('when file is markdown', () => {
     let mock;
     let activeFile;
diff --git a/spec/frontend/jobs/components/job/empty_state_spec.js b/spec/frontend/jobs/components/job/empty_state_spec.js
index 299b607ad78..e1b9aa743e0 100644
--- a/spec/frontend/jobs/components/job/empty_state_spec.js
+++ b/spec/frontend/jobs/components/job/empty_state_spec.js
@@ -1,5 +1,6 @@
 import { mount } from '@vue/test-utils';
 import EmptyState from '~/jobs/components/job/empty_state.vue';
+import { mockId } from './mock_data';
 
 describe('Empty State', () => {
   let wrapper;
@@ -7,6 +8,7 @@ describe('Empty State', () => {
   const defaultProps = {
     illustrationPath: 'illustrations/pending_job_empty.svg',
     illustrationSizeClass: 'svg-430',
+    jobId: mockId,
     title: 'This job has not started yet',
     playable: false,
   };
diff --git a/spec/frontend/jobs/components/job/job_sidebar_retry_button_spec.js b/spec/frontend/jobs/components/job/job_sidebar_retry_button_spec.js
index 18d5f35bde4..b04a5e07ea5 100644
--- a/spec/frontend/jobs/components/job/job_sidebar_retry_button_spec.js
+++ b/spec/frontend/jobs/components/job/job_sidebar_retry_button_spec.js
@@ -16,6 +16,7 @@ describe('Job Sidebar Retry Button', () => {
     wrapper = shallowMountExtended(JobsSidebarRetryButton, {
       propsData: {
         href: job.retry_path,
+        isManualJob: true,
         modalId: 'modal-id',
         ...props,
       },
diff --git a/spec/frontend/jobs/components/job/legacy_sidebar_header_spec.js b/spec/frontend/jobs/components/job/legacy_sidebar_header_spec.js
index 95eb10118ee..8fbb418232b 100644
--- a/spec/frontend/jobs/components/job/legacy_sidebar_header_spec.js
+++ b/spec/frontend/jobs/components/job/legacy_sidebar_header_spec.js
@@ -32,12 +32,8 @@ describe('Legacy Sidebar Header', () => {
   });
 
   describe('when job log is erasable', () => {
-    const path = '/root/ci-project/-/jobs/1447/erase';
-
     beforeEach(() => {
-      createWrapper({
-        erasePath: path,
-      });
+      createWrapper();
     });
 
     it('renders erase job link', () => {
@@ -45,13 +41,13 @@ describe('Legacy Sidebar Header', () => {
     });
 
     it('erase job link has correct path', () => {
-      expect(findEraseLink().attributes('href')).toBe(path);
+      expect(findEraseLink().attributes('href')).toBe(job.erase_path);
     });
   });
 
   describe('when job log is not erasable', () => {
     beforeEach(() => {
-      createWrapper();
+      createWrapper({ job: { ...job, erase_path: null } });
     });
 
     it('does not render erase button', () => {
@@ -77,8 +73,7 @@ describe('Legacy Sidebar Header', () => {
 
   describe('when there is no retry path', () => {
     it('should not render a retry button', async () => {
-      const copy = { ...job, retry_path: null };
-      createWrapper({ job: copy });
+      createWrapper({ job: { ...job, retry_path: null } });
 
       expect(findRetryButton().exists()).toBe(false);
     });
@@ -100,9 +95,7 @@ describe('Legacy Sidebar Header', () => {
       it('should have a different label when the job status is failed', () => {
         createWrapper({ job: { ...job, status: failedJobStatus } });
 
-        expect(findRetryButton().attributes('title')).toBe(
-          LegacySidebarHeader.i18n.retryJobButtonLabel,
-        );
+        expect(findRetryButton().attributes('title')).toBe(LegacySidebarHeader.i18n.retryJobLabel);
       });
     });
   });
diff --git a/spec/frontend/jobs/components/job/manual_variables_form_spec.js b/spec/frontend/jobs/components/job/manual_variables_form_spec.js
index 5806f9f75f9..4384b2f4d7f 100644
--- a/spec/frontend/jobs/components/job/manual_variables_form_spec.js
+++ b/spec/frontend/jobs/components/job/manual_variables_form_spec.js
@@ -1,46 +1,70 @@
 import { GlSprintf, GlLink } from '@gitlab/ui';
-import { mount } from '@vue/test-utils';
-import Vue, { nextTick } from 'vue';
-import Vuex from 'vuex';
-import { extendedWrapper } from 'helpers/vue_test_utils_helper';
+import { createLocalVue } from '@vue/test-utils';
+import VueApollo from 'vue-apollo';
+import { nextTick } from 'vue';
+import { mountExtended } from 'helpers/vue_test_utils_helper';
+import createMockApollo from 'helpers/mock_apollo_helper';
+import { convertToGraphQLId } from '~/graphql_shared/utils';
+import { GRAPHQL_ID_TYPES } from '~/jobs/constants';
+import waitForPromises from 'helpers/wait_for_promises';
 import ManualVariablesForm from '~/jobs/components/job/manual_variables_form.vue';
-
-Vue.use(Vuex);
+import getJobQuery from '~/jobs/components/job/graphql/queries/get_job.query.graphql';
+import retryJobMutation from '~/jobs/components/job/graphql/mutations/job_retry_with_variables.mutation.graphql';
+import {
+  mockFullPath,
+  mockId,
+  mockJobResponse,
+  mockJobWithVariablesResponse,
+  mockJobMutationData,
+} from './mock_data';
+
+const localVue = createLocalVue();
+localVue.use(VueApollo);
+
+const defaultProvide = {
+  projectPath: mockFullPath,
+};
 
 describe('Manual Variables Form', () => {
   let wrapper;
-  let store;
-
-  const requiredProps = {
-    action: {
-      path: '/play',
-      method: 'post',
-      button_title: 'Trigger this manual action',
-    },
+  let mockApollo;
+  let getJobQueryResponse;
+
+  const createComponent = ({ options = {}, props = {} } = {}) => {
+    wrapper = mountExtended(ManualVariablesForm, {
+      propsData: {
+        ...props,
+        jobId: mockId,
+      },
+      provide: {
+        ...defaultProvide,
+      },
+      ...options,
+    });
   };
 
-  const createComponent = (props = {}) => {
-    store = new Vuex.Store({
-      actions: {
-        triggerManualJob: jest.fn(),
-      },
+  const createComponentWithApollo = async ({ props = {} } = {}) => {
+    const requestHandlers = [[getJobQuery, getJobQueryResponse]];
+
+    mockApollo = createMockApollo(requestHandlers);
+
+    const options = {
+      localVue,
+      apolloProvider: mockApollo,
+    };
+
+    createComponent({
+      props,
+      options,
     });
 
-    wrapper = extendedWrapper(
-      mount(ManualVariablesForm, {
-        propsData: { ...requiredProps, ...props },
-        store,
-        stubs: {
-          GlSprintf,
-        },
-      }),
-    );
+    return waitForPromises();
   };
 
   const findHelpText = () => wrapper.findComponent(GlSprintf);
   const findHelpLink = () => wrapper.findComponent(GlLink);
-
-  const findTriggerBtn = () => wrapper.findByTestId('trigger-manual-job-btn');
+  const findCancelBtn = () => wrapper.findByTestId('cancel-btn');
+  const findRerunBtn = () => wrapper.findByTestId('run-manual-job-btn');
   const findDeleteVarBtn = () => wrapper.findByTestId('delete-variable-btn');
   const findAllDeleteVarBtns = () => wrapper.findAllByTestId('delete-variable-btn');
   const findDeleteVarBtnPlaceholder = () => wrapper.findByTestId('delete-variable-btn-placeholder');
@@ -62,95 +86,134 @@ describe('Manual Variables Form', () => {
   };
 
   beforeEach(() => {
-    createComponent();
+    getJobQueryResponse = jest.fn();
   });
 
   afterEach(() => {
     wrapper.destroy();
   });
 
-  it('creates a new variable when user enters a new key value', async () => {
-    expect(findAllVariables()).toHaveLength(1);
+  describe('when page renders', () => {
+    beforeEach(async () => {
+      getJobQueryResponse.mockResolvedValue(mockJobResponse);
+      await createComponentWithApollo();
+    });
+
+    it('renders help text with provided link', () => {
+      expect(findHelpText().exists()).toBe(true);
+      expect(findHelpLink().attributes('href')).toBe(
+        '/help/ci/variables/index#add-a-cicd-variable-to-a-project',
+      );
+    });
+
+    it('renders buttons', () => {
+      expect(findCancelBtn().exists()).toBe(true);
+      expect(findRerunBtn().exists()).toBe(true);
+    });
+  });
+
+  describe('when job has variables', () => {
+    beforeEach(async () => {
+      getJobQueryResponse.mockResolvedValue(mockJobWithVariablesResponse);
+      await createComponentWithApollo();
+    });
 
-    await setCiVariableKey();
+    it('sets manual job variables', () => {
+      const queryKey = mockJobWithVariablesResponse.data.project.job.manualVariables.nodes[0].key;
+      const queryValue =
+        mockJobWithVariablesResponse.data.project.job.manualVariables.nodes[0].value;
 
-    expect(findAllVariables()).toHaveLength(2);
+      expect(findCiVariableKey().element.value).toBe(queryKey);
+      expect(findCiVariableValue().element.value).toBe(queryValue);
+    });
   });
 
-  it('does not create extra empty variables', async () => {
-    expect(findAllVariables()).toHaveLength(1);
+  describe('when mutation fires', () => {
+    beforeEach(async () => {
+      await createComponentWithApollo();
+      jest.spyOn(wrapper.vm.$apollo, 'mutate').mockResolvedValue(mockJobMutationData);
+    });
 
-    await setCiVariableKey();
+    it('passes variables in correct format', async () => {
+      await setCiVariableKey();
 
-    expect(findAllVariables()).toHaveLength(2);
+      await findCiVariableValue().setValue('new value');
 
-    await setCiVariableKey();
+      await findRerunBtn().vm.$emit('click');
 
-    expect(findAllVariables()).toHaveLength(2);
+      expect(wrapper.vm.$apollo.mutate).toHaveBeenCalledTimes(1);
+      expect(wrapper.vm.$apollo.mutate).toHaveBeenCalledWith({
+        mutation: retryJobMutation,
+        variables: {
+          id: convertToGraphQLId(GRAPHQL_ID_TYPES.ciBuild, mockId),
+          variables: [
+            {
+              key: 'new key',
+              value: 'new value',
+            },
+          ],
+        },
+      });
+    });
   });
 
-  it('removes the correct variable row', async () => {
-    const variableKeyNameOne = 'key-one';
-    const variableKeyNameThree = 'key-three';
+  describe('updating variables in UI', () => {
+    beforeEach(async () => {
+      getJobQueryResponse.mockResolvedValue(mockJobResponse);
+      await createComponentWithApollo();
+    });
 
-    await setCiVariableKeyByPosition(0, variableKeyNameOne);
+    it('creates a new variable when user enters a new key value', async () => {
+      expect(findAllVariables()).toHaveLength(1);
 
-    await setCiVariableKeyByPosition(1, 'key-two');
+      await setCiVariableKey();
 
-    await setCiVariableKeyByPosition(2, variableKeyNameThree);
+      expect(findAllVariables()).toHaveLength(2);
+    });
 
-    expect(findAllVariables()).toHaveLength(4);
+    it('does not create extra empty variables', async () => {
+      expect(findAllVariables()).toHaveLength(1);
 
-    await findAllDeleteVarBtns().at(1).trigger('click');
+      await setCiVariableKey();
 
-    expect(findAllVariables()).toHaveLength(3);
+      expect(findAllVariables()).toHaveLength(2);
 
-    expect(findAllCiVariableKeys().at(0).element.value).toBe(variableKeyNameOne);
-    expect(findAllCiVariableKeys().at(1).element.value).toBe(variableKeyNameThree);
-    expect(findAllCiVariableKeys().at(2).element.value).toBe('');
-  });
+      await setCiVariableKey();
 
-  it('trigger button is disabled after trigger action', async () => {
-    expect(findTriggerBtn().props('disabled')).toBe(false);
+      expect(findAllVariables()).toHaveLength(2);
+    });
 
-    await findTriggerBtn().trigger('click');
+    it('removes the correct variable row', async () => {
+      const variableKeyNameOne = 'key-one';
+      const variableKeyNameThree = 'key-three';
 
-    expect(findTriggerBtn().props('disabled')).toBe(true);
-  });
+      await setCiVariableKeyByPosition(0, variableKeyNameOne);
 
-  it('delete variable button should only show when there is more than one variable', async () => {
-    expect(findDeleteVarBtn().exists()).toBe(false);
+      await setCiVariableKeyByPosition(1, 'key-two');
 
-    await setCiVariableKey();
+      await setCiVariableKeyByPosition(2, variableKeyNameThree);
 
-    expect(findDeleteVarBtn().exists()).toBe(true);
-  });
+      expect(findAllVariables()).toHaveLength(4);
 
-  it('delete variable button placeholder should only exist when a user cannot remove', async () => {
-    expect(findDeleteVarBtnPlaceholder().exists()).toBe(true);
-  });
+      await findAllDeleteVarBtns().at(1).trigger('click');
 
-  it('renders help text with provided link', () => {
-    expect(findHelpText().exists()).toBe(true);
-    expect(findHelpLink().attributes('href')).toBe(
-      '/help/ci/variables/index#add-a-cicd-variable-to-a-project',
-    );
-  });
+      expect(findAllVariables()).toHaveLength(3);
 
-  it('passes variables in correct format', async () => {
-    jest.spyOn(store, 'dispatch');
+      expect(findAllCiVariableKeys().at(0).element.value).toBe(variableKeyNameOne);
+      expect(findAllCiVariableKeys().at(1).element.value).toBe(variableKeyNameThree);
+      expect(findAllCiVariableKeys().at(2).element.value).toBe('');
+    });
 
-    await setCiVariableKey();
+    it('delete variable button should only show when there is more than one variable', async () => {
+      expect(findDeleteVarBtn().exists()).toBe(false);
 
-    await findCiVariableValue().setValue('new value');
+      await setCiVariableKey();
 
-    await findTriggerBtn().trigger('click');
+      expect(findDeleteVarBtn().exists()).toBe(true);
+    });
 
-    expect(store.dispatch).toHaveBeenCalledWith('triggerManualJob', [
-      {
-        key: 'new key',
-        secret_value: 'new value',
-      },
-    ]);
+    it('delete variable button placeholder should only exist when a user cannot remove', async () => {
+      expect(findDeleteVarBtnPlaceholder().exists()).toBe(true);
+    });
   });
 });
diff --git a/spec/frontend/jobs/components/job/mock_data.js b/spec/frontend/jobs/components/job/mock_data.js
new file mode 100644
index 00000000000..9596e859475
--- /dev/null
+++ b/spec/frontend/jobs/components/job/mock_data.js
@@ -0,0 +1,76 @@
+export const mockFullPath = 'Commit451/lab-coat';
+export const mockId = 401;
+
+export const mockJobResponse = {
+  data: {
+    project: {
+      id: 'gid://gitlab/Project/4',
+      job: {
+        id: 'gid://gitlab/Ci::Build/401',
+        manualJob: true,
+        manualVariables: {
+          nodes: [],
+          __typename: 'CiManualVariableConnection',
+        },
+        name: 'manual_job',
+        retryable: true,
+        status: 'SUCCESS',
+        __typename: 'CiJob',
+      },
+      __typename: 'Project',
+    },
+  },
+};
+
+export const mockJobWithVariablesResponse = {
+  data: {
+    project: {
+      id: 'gid://gitlab/Project/4',
+      job: {
+        id: 'gid://gitlab/Ci::Build/401',
+        manualJob: true,
+        manualVariables: {
+          nodes: [
+            {
+              id: 'gid://gitlab/Ci::JobVariable/150',
+              key: 'new key',
+              value: 'new value',
+              __typename: 'CiManualVariable',
+            },
+          ],
+          __typename: 'CiManualVariableConnection',
+        },
+        name: 'manual_job',
+        retryable: true,
+        status: 'SUCCESS',
+        __typename: 'CiJob',
+      },
+      __typename: 'Project',
+    },
+  },
+};
+
+export const mockJobMutationData = {
+  data: {
+    jobRetry: {
+      job: {
+        id: 'gid://gitlab/Ci::Build/401',
+        manualVariables: {
+          nodes: [
+            {
+              id: 'gid://gitlab/Ci::JobVariable/151',
+              key: 'new key',
+              value: 'new value',
+              __typename: 'CiManualVariable',
+            },
+          ],
+          __typename: 'CiManualVariableConnection',
+        },
+        webPath: '/Commit451/lab-coat/-/jobs/401',
+        __typename: 'CiJob',
+      },
+      errors: [],
+      __typename: 'JobRetryPayload',
+    },
+  },
+};
diff --git a/spec/frontend/jobs/components/job/sidebar_header_spec.js b/spec/frontend/jobs/components/job/sidebar_header_spec.js
index cb32ca9d3dc..422e2f6207c 100644
--- a/spec/frontend/jobs/components/job/sidebar_header_spec.js
+++ b/spec/frontend/jobs/components/job/sidebar_header_spec.js
@@ -1,91 +1,101 @@
-import { shallowMount } from '@vue/test-utils';
-import { extendedWrapper } from 'helpers/vue_test_utils_helper';
+import { createLocalVue } from '@vue/test-utils';
+import VueApollo from 'vue-apollo';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import createMockApollo from 'helpers/mock_apollo_helper';
+import waitForPromises from 'helpers/wait_for_promises';
+import SidebarHeader from '~/jobs/components/job/sidebar/sidebar_header.vue';
 import JobRetryButton from '~/jobs/components/job/sidebar/job_sidebar_retry_button.vue';
-import LegacySidebarHeader from '~/jobs/components/job/sidebar/legacy_sidebar_header.vue';
-import createStore from '~/jobs/store';
-import job from '../../mock_data';
+import getJobQuery from '~/jobs/components/job/graphql/queries/get_job.query.graphql';
+import { mockFullPath, mockId, mockJobResponse } from './mock_data';
 
-describe('Legacy Sidebar Header', () => {
-  let store;
-  let wrapper;
+const localVue = createLocalVue();
+localVue.use(VueApollo);
 
-  const findCancelButton = () => wrapper.findByTestId('cancel-button');
-  const findRetryButton = () => wrapper.findComponent(JobRetryButton);
-  const findEraseLink = () => wrapper.findByTestId('job-log-erase-link');
-
-  const createWrapper = (props) => {
-    store = createStore();
-
-    wrapper = extendedWrapper(
-      shallowMount(LegacySidebarHeader, {
-        propsData: {
-          job,
-          ...props,
-        },
-        store,
-      }),
-    );
+const defaultProvide = {
+  projectPath: mockFullPath,
+};
+
+describe('Sidebar Header', () => {
+  let wrapper;
+  let mockApollo;
+  let getJobQueryResponse;
+
+  const createComponent = ({ options = {}, props = {}, restJob = {} } = {}) => {
+    wrapper = shallowMountExtended(SidebarHeader, {
+      propsData: {
+        ...props,
+        jobId: mockId,
+        restJob,
+      },
+      provide: {
+        ...defaultProvide,
+      },
+      ...options,
+    });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
+  const createComponentWithApollo = async ({ props = {}, restJob = {} } = {}) => {
+    const requestHandlers = [[getJobQuery, getJobQueryResponse]];
 
-  describe('when job log is erasable', () => {
-    const path = '/root/ci-project/-/jobs/1447/erase';
+    mockApollo = createMockApollo(requestHandlers);
 
-    beforeEach(() => {
-      createWrapper({
-        erasePath: path,
-      });
-    });
+    const options = {
+      localVue,
+      apolloProvider: mockApollo,
+    };
 
-    it('renders erase job link', () => {
-      expect(findEraseLink().exists()).toBe(true);
+    createComponent({
+      props,
+      restJob,
+      options,
     });
 
-    it('erase job link has correct path', () => {
-      expect(findEraseLink().attributes('href')).toBe(path);
-    });
-  });
+    return waitForPromises();
+  };
 
-  describe('when job log is not erasable', () => {
-    beforeEach(() => {
-      createWrapper();
-    });
+  const findCancelButton = () => wrapper.findByTestId('cancel-button');
+  const findEraseButton = () => wrapper.findByTestId('job-log-erase-link');
+  const findJobName = () => wrapper.findByTestId('job-name');
+  const findRetryButton = () => wrapper.findComponent(JobRetryButton);
 
-    it('does not render erase button', () => {
-      expect(findEraseLink().exists()).toBe(false);
-    });
+  beforeEach(async () => {
+    getJobQueryResponse = jest.fn();
   });
 
-  describe('when the job is retryable', () => {
-    beforeEach(() => {
-      createWrapper();
-    });
+  afterEach(() => {
+    wrapper.destroy();
+  });
 
-    it('should render the retry button', () => {
-      expect(findRetryButton().props('href')).toBe(job.retry_path);
+  describe('when rendering contents', () => {
+    beforeEach(async () => {
+      getJobQueryResponse.mockResolvedValue(mockJobResponse);
     });
-  });
 
-  describe('when there is no retry path', () => {
-    it('should not render a retry button', async () => {
-      const copy = { ...job, retry_path: null };
-      createWrapper({ job: copy });
+    it('renders the correct job name', async () => {
+      await createComponentWithApollo();
+      expect(findJobName().text()).toBe(mockJobResponse.data.project.job.name);
+    });
 
+    it('does not render buttons with no paths', async () => {
+      await createComponentWithApollo();
+      expect(findCancelButton().exists()).toBe(false);
+      expect(findEraseButton().exists()).toBe(false);
       expect(findRetryButton().exists()).toBe(false);
     });
-  });
 
-  describe('when the job is cancelable', () => {
-    beforeEach(() => {
-      createWrapper();
+    it('renders a retry button with a path', async () => {
+      await createComponentWithApollo({ restJob: { retry_path: 'retry/path' } });
+      expect(findRetryButton().exists()).toBe(true);
+    });
+
+    it('renders a cancel button with a path', async () => {
+      await createComponentWithApollo({ restJob: { cancel_path: 'cancel/path' } });
+      expect(findCancelButton().exists()).toBe(true);
     });
 
-    it('should render link to cancel job', () => {
-      expect(findCancelButton().props('icon')).toBe('cancel');
-      expect(findCancelButton().attributes('href')).toBe(job.cancel_path);
+    it('renders an erase button with a path', async () => {
+      await createComponentWithApollo({ restJob: { erase_path: 'erase/path' } });
+      expect(findEraseButton().exists()).toBe(true);
     });
   });
 });
diff --git a/spec/frontend/lib/dompurify_spec.js b/spec/frontend/lib/dompurify_spec.js
index 412408ce377..f767a673553 100644
--- a/spec/frontend/lib/dompurify_spec.js
+++ b/spec/frontend/lib/dompurify_spec.js
@@ -94,6 +94,11 @@ describe('~/lib/dompurify', () => {
     expect(sanitize('<link rel="stylesheet" href="styles.css">')).toBe('');
   });
 
+  it("doesn't allow form tags", () => {
+    expect(sanitize('<form>')).toBe('');
+    expect(sanitize('<form method="post" action="path"></form>')).toBe('');
+  });
+
   describe.each`
     type          | gon
     ${'root'}     | ${rootGon}