Add latest changes from gitlab-org/gitlab@master

24 files changed, 388 insertions, 111 deletions

diff --git a/spec/frontend/jobs/components/artifacts_block_spec.js b/spec/frontend/jobs/components/job/artifacts_block_spec.js
index 0c7c0a6c311..c75deb64d84 100644
--- a/spec/frontend/jobs/components/artifacts_block_spec.js
+++ b/spec/frontend/jobs/components/job/artifacts_block_spec.js
@@ -1,6 +1,6 @@
 import { mount } from '@vue/test-utils';
 import { trimText } from 'helpers/text_helper';
-import ArtifactsBlock from '~/jobs/components/artifacts_block.vue';
+import ArtifactsBlock from '~/jobs/components/job/sidebar/artifacts_block.vue';
 import { getTimeago } from '~/lib/utils/datetime_utility';
 
 describe('Artifacts block', () => {
diff --git a/spec/frontend/jobs/components/commit_block_spec.js b/spec/frontend/jobs/components/job/commit_block_spec.js
index 8a6d48cecb8..4fcc754c82c 100644
--- a/spec/frontend/jobs/components/commit_block_spec.js
+++ b/spec/frontend/jobs/components/job/commit_block_spec.js
@@ -1,6 +1,6 @@
 import { shallowMount } from '@vue/test-utils';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
-import CommitBlock from '~/jobs/components/commit_block.vue';
+import CommitBlock from '~/jobs/components/job/sidebar/commit_block.vue';
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
 
 describe('Commit block', () => {
diff --git a/spec/frontend/jobs/components/empty_state_spec.js b/spec/frontend/jobs/components/job/empty_state_spec.js
index 9738fd14275..299b607ad78 100644
--- a/spec/frontend/jobs/components/empty_state_spec.js
+++ b/spec/frontend/jobs/components/job/empty_state_spec.js
@@ -1,5 +1,5 @@
 import { mount } from '@vue/test-utils';
-import EmptyState from '~/jobs/components/empty_state.vue';
+import EmptyState from '~/jobs/components/job/empty_state.vue';
 
 describe('Empty State', () => {
   let wrapper;
diff --git a/spec/frontend/jobs/components/environments_block_spec.js b/spec/frontend/jobs/components/job/environments_block_spec.js
index 5a2b6988224..134533e2af8 100644
--- a/spec/frontend/jobs/components/environments_block_spec.js
+++ b/spec/frontend/jobs/components/job/environments_block_spec.js
@@ -1,5 +1,5 @@
 import { mount } from '@vue/test-utils';
-import EnvironmentsBlock from '~/jobs/components/environments_block.vue';
+import EnvironmentsBlock from '~/jobs/components/job/environments_block.vue';
 
 const TEST_CLUSTER_NAME = 'test_cluster';
 const TEST_CLUSTER_PATH = 'path/to/test_cluster';
diff --git a/spec/frontend/jobs/components/erased_block_spec.js b/spec/frontend/jobs/components/job/erased_block_spec.js
index 7b44458c18b..c6aba01fa53 100644
--- a/spec/frontend/jobs/components/erased_block_spec.js
+++ b/spec/frontend/jobs/components/job/erased_block_spec.js
@@ -1,6 +1,6 @@
 import { GlLink } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
-import ErasedBlock from '~/jobs/components/erased_block.vue';
+import ErasedBlock from '~/jobs/components/job/erased_block.vue';
 import { getTimeago } from '~/lib/utils/datetime_utility';
 
 describe('Erased block', () => {
diff --git a/spec/frontend/jobs/components/job_app_spec.js b/spec/frontend/jobs/components/job/job_app_spec.js
index d028b65f075..822528403cf 100644
--- a/spec/frontend/jobs/components/job_app_spec.js
+++ b/spec/frontend/jobs/components/job/job_app_spec.js
@@ -5,16 +5,16 @@ import MockAdapter from 'axios-mock-adapter';
 import Vuex from 'vuex';
 import delayedJobFixture from 'test_fixtures/jobs/delayed.json';
 import { TEST_HOST } from 'helpers/test_constants';
-import EmptyState from '~/jobs/components/empty_state.vue';
-import EnvironmentsBlock from '~/jobs/components/environments_block.vue';
-import ErasedBlock from '~/jobs/components/erased_block.vue';
-import JobApp from '~/jobs/components/job_app.vue';
-import Sidebar from '~/jobs/components/sidebar.vue';
-import StuckBlock from '~/jobs/components/stuck_block.vue';
-import UnmetPrerequisitesBlock from '~/jobs/components/unmet_prerequisites_block.vue';
+import EmptyState from '~/jobs/components/job/empty_state.vue';
+import EnvironmentsBlock from '~/jobs/components/job/environments_block.vue';
+import ErasedBlock from '~/jobs/components/job/erased_block.vue';
+import JobApp from '~/jobs/components/job/job_app.vue';
+import Sidebar from '~/jobs/components/job/sidebar/sidebar.vue';
+import StuckBlock from '~/jobs/components/job/stuck_block.vue';
+import UnmetPrerequisitesBlock from '~/jobs/components/job/unmet_prerequisites_block.vue';
 import createStore from '~/jobs/store';
 import axios from '~/lib/utils/axios_utils';
-import job from '../mock_data';
+import job from '../../mock_data';
 
 describe('Job App', () => {
   Vue.use(Vuex);
diff --git a/spec/frontend/jobs/components/job_container_item_spec.js b/spec/frontend/jobs/components/job/job_container_item_spec.js
index eb2b0184e5f..05c38dd74b7 100644
--- a/spec/frontend/jobs/components/job_container_item_spec.js
+++ b/spec/frontend/jobs/components/job/job_container_item_spec.js
@@ -2,9 +2,9 @@ import { GlIcon, GlLink } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import { nextTick } from 'vue';
 import delayedJobFixture from 'test_fixtures/jobs/delayed.json';
-import JobContainerItem from '~/jobs/components/job_container_item.vue';
+import JobContainerItem from '~/jobs/components/job/sidebar/job_container_item.vue';
 import CiIcon from '~/vue_shared/components/ci_icon.vue';
-import job from '../mock_data';
+import job from '../../mock_data';
 
 describe('JobContainerItem', () => {
   let wrapper;
diff --git a/spec/frontend/jobs/components/job_log_controllers_spec.js b/spec/frontend/jobs/components/job/job_log_controllers_spec.js
index aa85253a177..5e9a73b4387 100644
--- a/spec/frontend/jobs/components/job_log_controllers_spec.js
+++ b/spec/frontend/jobs/components/job/job_log_controllers_spec.js
@@ -1,10 +1,10 @@
 import { GlSearchBoxByClick } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
-import JobLogControllers from '~/jobs/components/job_log_controllers.vue';
+import JobLogControllers from '~/jobs/components/job/job_log_controllers.vue';
 import HelpPopover from '~/vue_shared/components/help_popover.vue';
 import { backoffMockImplementation } from 'helpers/backoff_helper';
 import * as commonUtils from '~/lib/utils/common_utils';
-import { mockJobLog } from '../mock_data';
+import { mockJobLog } from '../../mock_data';
 
 const mockToastShow = jest.fn();
 
diff --git a/spec/frontend/jobs/components/job_retry_forward_deployment_modal_spec.js b/spec/frontend/jobs/components/job/job_retry_forward_deployment_modal_spec.js
index fa6a3b5d350..d60043f33f7 100644
--- a/spec/frontend/jobs/components/job_retry_forward_deployment_modal_spec.js
+++ b/spec/frontend/jobs/components/job/job_retry_forward_deployment_modal_spec.js
@@ -1,9 +1,9 @@
 import { GlLink, GlModal } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
-import JobRetryForwardDeploymentModal from '~/jobs/components/job_retry_forward_deployment_modal.vue';
+import JobRetryForwardDeploymentModal from '~/jobs/components/job/sidebar/job_retry_forward_deployment_modal.vue';
 import { JOB_RETRY_FORWARD_DEPLOYMENT_MODAL } from '~/jobs/constants';
 import createStore from '~/jobs/store';
-import job from '../mock_data';
+import job from '../../mock_data';
 
 describe('Job Retry Forward Deployment Modal', () => {
   let store;
diff --git a/spec/frontend/jobs/components/job_sidebar_details_container_spec.js b/spec/frontend/jobs/components/job/job_sidebar_details_container_spec.js
index a398f998dff..4da17ed8366 100644
--- a/spec/frontend/jobs/components/job_sidebar_details_container_spec.js
+++ b/spec/frontend/jobs/components/job/job_sidebar_details_container_spec.js
@@ -1,9 +1,9 @@
 import { shallowMount } from '@vue/test-utils';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
-import DetailRow from '~/jobs/components/sidebar_detail_row.vue';
-import SidebarJobDetailsContainer from '~/jobs/components/sidebar_job_details_container.vue';
+import DetailRow from '~/jobs/components/job/sidebar/sidebar_detail_row.vue';
+import SidebarJobDetailsContainer from '~/jobs/components/job/sidebar/sidebar_job_details_container.vue';
 import createStore from '~/jobs/store';
-import job from '../mock_data';
+import job from '../../mock_data';
 
 describe('Job Sidebar Details Container', () => {
   let store;
diff --git a/spec/frontend/jobs/components/job_sidebar_retry_button_spec.js b/spec/frontend/jobs/components/job/job_sidebar_retry_button_spec.js
index ad72b9be261..18d5f35bde4 100644
--- a/spec/frontend/jobs/components/job_sidebar_retry_button_spec.js
+++ b/spec/frontend/jobs/components/job/job_sidebar_retry_button_spec.js
@@ -1,7 +1,7 @@
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
-import JobsSidebarRetryButton from '~/jobs/components/job_sidebar_retry_button.vue';
+import JobsSidebarRetryButton from '~/jobs/components/job/sidebar/job_sidebar_retry_button.vue';
 import createStore from '~/jobs/store';
-import job from '../mock_data';
+import job from '../../mock_data';
 
 describe('Job Sidebar Retry Button', () => {
   let store;
diff --git a/spec/frontend/jobs/components/jobs_container_spec.js b/spec/frontend/jobs/components/job/jobs_container_spec.js
index 127570b8184..2fde4d3020b 100644
--- a/spec/frontend/jobs/components/jobs_container_spec.js
+++ b/spec/frontend/jobs/components/job/jobs_container_spec.js
@@ -1,7 +1,7 @@
 import { GlLink } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
-import JobsContainer from '~/jobs/components/jobs_container.vue';
+import JobsContainer from '~/jobs/components/job/sidebar/jobs_container.vue';
 
 describe('Jobs List block', () => {
   let wrapper;
diff --git a/spec/frontend/jobs/components/job/legacy_manual_variables_form_spec.js b/spec/frontend/jobs/components/job/legacy_manual_variables_form_spec.js
new file mode 100644
index 00000000000..184562b2968
--- /dev/null
+++ b/spec/frontend/jobs/components/job/legacy_manual_variables_form_spec.js
@@ -0,0 +1,156 @@
+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 LegacyManualVariablesForm from '~/jobs/components/job/legacy_manual_variables_form.vue';
+
+Vue.use(Vuex);
+
+describe('Manual Variables Form', () => {
+  let wrapper;
+  let store;
+
+  const requiredProps = {
+    action: {
+      path: '/play',
+      method: 'post',
+      button_title: 'Trigger this manual action',
+    },
+  };
+
+  const createComponent = (props = {}) => {
+    store = new Vuex.Store({
+      actions: {
+        triggerManualJob: jest.fn(),
+      },
+    });
+
+    wrapper = extendedWrapper(
+      mount(LegacyManualVariablesForm, {
+        propsData: { ...requiredProps, ...props },
+        store,
+        stubs: {
+          GlSprintf,
+        },
+      }),
+    );
+  };
+
+  const findHelpText = () => wrapper.findComponent(GlSprintf);
+  const findHelpLink = () => wrapper.findComponent(GlLink);
+
+  const findTriggerBtn = () => wrapper.findByTestId('trigger-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');
+  const findCiVariableKey = () => wrapper.findByTestId('ci-variable-key');
+  const findAllCiVariableKeys = () => wrapper.findAllByTestId('ci-variable-key');
+  const findCiVariableValue = () => wrapper.findByTestId('ci-variable-value');
+  const findAllVariables = () => wrapper.findAllByTestId('ci-variable-row');
+
+  const setCiVariableKey = () => {
+    findCiVariableKey().setValue('new key');
+    findCiVariableKey().vm.$emit('change');
+    nextTick();
+  };
+
+  const setCiVariableKeyByPosition = (position, value) => {
+    findAllCiVariableKeys().at(position).setValue(value);
+    findAllCiVariableKeys().at(position).vm.$emit('change');
+    nextTick();
+  };
+
+  beforeEach(() => {
+    createComponent();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('creates a new variable when user enters a new key value', async () => {
+    expect(findAllVariables()).toHaveLength(1);
+
+    await setCiVariableKey();
+
+    expect(findAllVariables()).toHaveLength(2);
+  });
+
+  it('does not create extra empty variables', async () => {
+    expect(findAllVariables()).toHaveLength(1);
+
+    await setCiVariableKey();
+
+    expect(findAllVariables()).toHaveLength(2);
+
+    await setCiVariableKey();
+
+    expect(findAllVariables()).toHaveLength(2);
+  });
+
+  it('removes the correct variable row', async () => {
+    const variableKeyNameOne = 'key-one';
+    const variableKeyNameThree = 'key-three';
+
+    await setCiVariableKeyByPosition(0, variableKeyNameOne);
+
+    await setCiVariableKeyByPosition(1, 'key-two');
+
+    await setCiVariableKeyByPosition(2, variableKeyNameThree);
+
+    expect(findAllVariables()).toHaveLength(4);
+
+    await findAllDeleteVarBtns().at(1).trigger('click');
+
+    expect(findAllVariables()).toHaveLength(3);
+
+    expect(findAllCiVariableKeys().at(0).element.value).toBe(variableKeyNameOne);
+    expect(findAllCiVariableKeys().at(1).element.value).toBe(variableKeyNameThree);
+    expect(findAllCiVariableKeys().at(2).element.value).toBe('');
+  });
+
+  it('trigger button is disabled after trigger action', async () => {
+    expect(findTriggerBtn().props('disabled')).toBe(false);
+
+    await findTriggerBtn().trigger('click');
+
+    expect(findTriggerBtn().props('disabled')).toBe(true);
+  });
+
+  it('delete variable button should only show when there is more than one variable', async () => {
+    expect(findDeleteVarBtn().exists()).toBe(false);
+
+    await setCiVariableKey();
+
+    expect(findDeleteVarBtn().exists()).toBe(true);
+  });
+
+  it('delete variable button placeholder should only exist when a user cannot remove', async () => {
+    expect(findDeleteVarBtnPlaceholder().exists()).toBe(true);
+  });
+
+  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('passes variables in correct format', async () => {
+    jest.spyOn(store, 'dispatch');
+
+    await setCiVariableKey();
+
+    await findCiVariableValue().setValue('new value');
+
+    await findTriggerBtn().trigger('click');
+
+    expect(store.dispatch).toHaveBeenCalledWith('triggerManualJob', [
+      {
+        key: 'new key',
+        secret_value: 'new value',
+      },
+    ]);
+  });
+});
diff --git a/spec/frontend/jobs/components/job/legacy_sidebar_header_spec.js b/spec/frontend/jobs/components/job/legacy_sidebar_header_spec.js
new file mode 100644
index 00000000000..cb32ca9d3dc
--- /dev/null
+++ b/spec/frontend/jobs/components/job/legacy_sidebar_header_spec.js
@@ -0,0 +1,91 @@
+import { shallowMount } from '@vue/test-utils';
+import { extendedWrapper } from 'helpers/vue_test_utils_helper';
+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';
+
+describe('Legacy Sidebar Header', () => {
+  let store;
+  let wrapper;
+
+  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,
+      }),
+    );
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('when job log is erasable', () => {
+    const path = '/root/ci-project/-/jobs/1447/erase';
+
+    beforeEach(() => {
+      createWrapper({
+        erasePath: path,
+      });
+    });
+
+    it('renders erase job link', () => {
+      expect(findEraseLink().exists()).toBe(true);
+    });
+
+    it('erase job link has correct path', () => {
+      expect(findEraseLink().attributes('href')).toBe(path);
+    });
+  });
+
+  describe('when job log is not erasable', () => {
+    beforeEach(() => {
+      createWrapper();
+    });
+
+    it('does not render erase button', () => {
+      expect(findEraseLink().exists()).toBe(false);
+    });
+  });
+
+  describe('when the job is retryable', () => {
+    beforeEach(() => {
+      createWrapper();
+    });
+
+    it('should render the retry button', () => {
+      expect(findRetryButton().props('href')).toBe(job.retry_path);
+    });
+  });
+
+  describe('when there is no retry path', () => {
+    it('should not render a retry button', async () => {
+      const copy = { ...job, retry_path: null };
+      createWrapper({ job: copy });
+
+      expect(findRetryButton().exists()).toBe(false);
+    });
+  });
+
+  describe('when the job is cancelable', () => {
+    beforeEach(() => {
+      createWrapper();
+    });
+
+    it('should render link to cancel job', () => {
+      expect(findCancelButton().props('icon')).toBe('cancel');
+      expect(findCancelButton().attributes('href')).toBe(job.cancel_path);
+    });
+  });
+});
diff --git a/spec/frontend/jobs/components/manual_variables_form_spec.js b/spec/frontend/jobs/components/job/manual_variables_form_spec.js
index 6faab3ddf31..5806f9f75f9 100644
--- a/spec/frontend/jobs/components/manual_variables_form_spec.js
+++ b/spec/frontend/jobs/components/job/manual_variables_form_spec.js
@@ -3,7 +3,7 @@ import { mount } from '@vue/test-utils';
 import Vue, { nextTick } from 'vue';
 import Vuex from 'vuex';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
-import ManualVariablesForm from '~/jobs/components/manual_variables_form.vue';
+import ManualVariablesForm from '~/jobs/components/job/manual_variables_form.vue';
 
 Vue.use(Vuex);
 
diff --git a/spec/frontend/jobs/components/sidebar_detail_row_spec.js b/spec/frontend/jobs/components/job/sidebar_detail_row_spec.js
index 8d2680608ab..5c9c011b4ab 100644
--- a/spec/frontend/jobs/components/sidebar_detail_row_spec.js
+++ b/spec/frontend/jobs/components/job/sidebar_detail_row_spec.js
@@ -1,6 +1,6 @@
 import { GlLink } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
-import SidebarDetailRow from '~/jobs/components/sidebar_detail_row.vue';
+import SidebarDetailRow from '~/jobs/components/job/sidebar/sidebar_detail_row.vue';
 
 describe('Sidebar detail row', () => {
   let wrapper;
diff --git a/spec/frontend/jobs/components/job/sidebar_header_spec.js b/spec/frontend/jobs/components/job/sidebar_header_spec.js
new file mode 100644
index 00000000000..cb32ca9d3dc
--- /dev/null
+++ b/spec/frontend/jobs/components/job/sidebar_header_spec.js
@@ -0,0 +1,91 @@
+import { shallowMount } from '@vue/test-utils';
+import { extendedWrapper } from 'helpers/vue_test_utils_helper';
+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';
+
+describe('Legacy Sidebar Header', () => {
+  let store;
+  let wrapper;
+
+  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,
+      }),
+    );
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('when job log is erasable', () => {
+    const path = '/root/ci-project/-/jobs/1447/erase';
+
+    beforeEach(() => {
+      createWrapper({
+        erasePath: path,
+      });
+    });
+
+    it('renders erase job link', () => {
+      expect(findEraseLink().exists()).toBe(true);
+    });
+
+    it('erase job link has correct path', () => {
+      expect(findEraseLink().attributes('href')).toBe(path);
+    });
+  });
+
+  describe('when job log is not erasable', () => {
+    beforeEach(() => {
+      createWrapper();
+    });
+
+    it('does not render erase button', () => {
+      expect(findEraseLink().exists()).toBe(false);
+    });
+  });
+
+  describe('when the job is retryable', () => {
+    beforeEach(() => {
+      createWrapper();
+    });
+
+    it('should render the retry button', () => {
+      expect(findRetryButton().props('href')).toBe(job.retry_path);
+    });
+  });
+
+  describe('when there is no retry path', () => {
+    it('should not render a retry button', async () => {
+      const copy = { ...job, retry_path: null };
+      createWrapper({ job: copy });
+
+      expect(findRetryButton().exists()).toBe(false);
+    });
+  });
+
+  describe('when the job is cancelable', () => {
+    beforeEach(() => {
+      createWrapper();
+    });
+
+    it('should render link to cancel job', () => {
+      expect(findCancelButton().props('icon')).toBe('cancel');
+      expect(findCancelButton().attributes('href')).toBe(job.cancel_path);
+    });
+  });
+});
diff --git a/spec/frontend/jobs/components/sidebar_spec.js b/spec/frontend/jobs/components/job/sidebar_spec.js
index 9a4720bf97b..dc1aa67489d 100644
--- a/spec/frontend/jobs/components/sidebar_spec.js
+++ b/spec/frontend/jobs/components/job/sidebar_spec.js
@@ -1,14 +1,13 @@
 import { shallowMount } from '@vue/test-utils';
 import { nextTick } from 'vue';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
-import ArtifactsBlock from '~/jobs/components/artifacts_block.vue';
-import JobRetryForwardDeploymentModal from '~/jobs/components/job_retry_forward_deployment_modal.vue';
-import JobRetryButton from '~/jobs/components/job_sidebar_retry_button.vue';
-import JobsContainer from '~/jobs/components/jobs_container.vue';
-import Sidebar, { forwardDeploymentFailureModalId } from '~/jobs/components/sidebar.vue';
-import StagesDropdown from '~/jobs/components/stages_dropdown.vue';
+import ArtifactsBlock from '~/jobs/components/job/sidebar/artifacts_block.vue';
+import JobRetryForwardDeploymentModal from '~/jobs/components/job/sidebar/job_retry_forward_deployment_modal.vue';
+import JobsContainer from '~/jobs/components/job/sidebar/jobs_container.vue';
+import Sidebar from '~/jobs/components/job/sidebar/sidebar.vue';
+import StagesDropdown from '~/jobs/components/job/sidebar/stages_dropdown.vue';
 import createStore from '~/jobs/store';
-import job, { jobsInStage } from '../mock_data';
+import job, { jobsInStage } from '../../mock_data';
 
 describe('Sidebar details block', () => {
   let store;
@@ -17,11 +16,8 @@ describe('Sidebar details block', () => {
   const forwardDeploymentFailure = 'forward_deployment_failure';
   const findModal = () => wrapper.findComponent(JobRetryForwardDeploymentModal);
   const findArtifactsBlock = () => wrapper.findComponent(ArtifactsBlock);
-  const findCancelButton = () => wrapper.findByTestId('cancel-button');
   const findNewIssueButton = () => wrapper.findByTestId('job-new-issue');
-  const findRetryButton = () => wrapper.findComponent(JobRetryButton);
   const findTerminalLink = () => wrapper.findByTestId('terminal-link');
-  const findEraseLink = () => wrapper.findByTestId('job-log-erase-link');
 
   const createWrapper = (props) => {
     store = createStore();
@@ -43,44 +39,6 @@ describe('Sidebar details block', () => {
     wrapper.destroy();
   });
 
-  describe('when job log is erasable', () => {
-    const path = '/root/ci-project/-/jobs/1447/erase';
-
-    beforeEach(() => {
-      createWrapper({
-        erasePath: path,
-      });
-    });
-
-    it('renders erase job link', () => {
-      expect(findEraseLink().exists()).toBe(true);
-    });
-
-    it('erase job link has correct path', () => {
-      expect(findEraseLink().attributes('href')).toBe(path);
-    });
-  });
-
-  describe('when job log is not erasable', () => {
-    beforeEach(() => {
-      createWrapper();
-    });
-
-    it('does not render erase button', () => {
-      expect(findEraseLink().exists()).toBe(false);
-    });
-  });
-
-  describe('when there is no retry path retry', () => {
-    it('should not render a retry button', async () => {
-      createWrapper();
-      const copy = { ...job, retry_path: null };
-      await store.dispatch('receiveJobSuccess', copy);
-
-      expect(findRetryButton().exists()).toBe(false);
-    });
-  });
-
   describe('without terminal path', () => {
     it('does not render terminal link', async () => {
       createWrapper();
@@ -109,15 +67,6 @@ describe('Sidebar details block', () => {
       expect(findNewIssueButton().attributes('href')).toBe(job.new_issue_path);
       expect(findNewIssueButton().text()).toBe('New issue');
     });
-
-    it('should render the retry button', () => {
-      expect(findRetryButton().props('href')).toBe(job.retry_path);
-    });
-
-    it('should render link to cancel job', () => {
-      expect(findCancelButton().props('icon')).toBe('cancel');
-      expect(findCancelButton().attributes('href')).toBe(job.cancel_path);
-    });
   });
 
   describe('forward deployment failure', () => {
@@ -155,16 +104,6 @@ describe('Sidebar details block', () => {
       it('should render the modal', () => {
         expect(findModal().exists()).toBe(true);
       });
-
-      it('should provide the modal id to the button and modal', () => {
-        expect(findRetryButton().props('modalId')).toBe(forwardDeploymentFailureModalId);
-        expect(findModal().props('modalId')).toBe(forwardDeploymentFailureModalId);
-      });
-
-      it('should provide the retry path to the button and modal', () => {
-        expect(findRetryButton().props('href')).toBe(job.retry_path);
-        expect(findModal().props('href')).toBe(job.retry_path);
-      });
     });
   });
 
diff --git a/spec/frontend/jobs/components/stages_dropdown_spec.js b/spec/frontend/jobs/components/job/stages_dropdown_spec.js
index f638213ef0c..61dec585e82 100644
--- a/spec/frontend/jobs/components/stages_dropdown_spec.js
+++ b/spec/frontend/jobs/components/job/stages_dropdown_spec.js
@@ -2,7 +2,7 @@ import { GlDropdown, GlDropdownItem, GlLink, GlSprintf } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import Mousetrap from 'mousetrap';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
-import StagesDropdown from '~/jobs/components/stages_dropdown.vue';
+import StagesDropdown from '~/jobs/components/job/sidebar/stages_dropdown.vue';
 import CiIcon from '~/vue_shared/components/ci_icon.vue';
 import * as copyToClipboard from '~/behaviors/copy_to_clipboard';
 import {
@@ -10,7 +10,7 @@ import {
   mockPipelineWithoutMR,
   mockPipelineWithAttachedMR,
   mockPipelineDetached,
-} from '../mock_data';
+} from '../../mock_data';
 
 describe('Stages Dropdown', () => {
   let wrapper;
diff --git a/spec/frontend/jobs/components/stuck_block_spec.js b/spec/frontend/jobs/components/job/stuck_block_spec.js
index 119255cc1e9..8dc570cce27 100644
--- a/spec/frontend/jobs/components/stuck_block_spec.js
+++ b/spec/frontend/jobs/components/job/stuck_block_spec.js
@@ -1,6 +1,6 @@
 import { GlBadge, GlLink } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
-import StuckBlock from '~/jobs/components/stuck_block.vue';
+import StuckBlock from '~/jobs/components/job/stuck_block.vue';
 
 describe('Stuck Block Job component', () => {
   let wrapper;
diff --git a/spec/frontend/jobs/components/trigger_block_spec.js b/spec/frontend/jobs/components/job/trigger_block_spec.js
index 78596612d23..a1de8fd143f 100644
--- a/spec/frontend/jobs/components/trigger_block_spec.js
+++ b/spec/frontend/jobs/components/job/trigger_block_spec.js
@@ -1,6 +1,6 @@
 import { GlButton, GlTableLite } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
-import TriggerBlock from '~/jobs/components/trigger_block.vue';
+import TriggerBlock from '~/jobs/components/job/sidebar/trigger_block.vue';
 
 describe('Trigger block', () => {
   let wrapper;
diff --git a/spec/frontend/jobs/components/unmet_prerequisites_block_spec.js b/spec/frontend/jobs/components/job/unmet_prerequisites_block_spec.js
index d1dbd65bd17..fb7d389c4d6 100644
--- a/spec/frontend/jobs/components/unmet_prerequisites_block_spec.js
+++ b/spec/frontend/jobs/components/job/unmet_prerequisites_block_spec.js
@@ -1,6 +1,6 @@
 import { GlAlert, GlLink } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
-import UnmetPrerequisitesBlock from '~/jobs/components/unmet_prerequisites_block.vue';
+import UnmetPrerequisitesBlock from '~/jobs/components/job/unmet_prerequisites_block.vue';
 
 describe('Unmet Prerequisites Block Job component', () => {
   let wrapper;
diff --git a/spec/frontend/jobs/store/actions_spec.js b/spec/frontend/jobs/store/actions_spec.js
index b9f97a3c3ae..0d11c4d56bf 100644
--- a/spec/frontend/jobs/store/actions_spec.js
+++ b/spec/frontend/jobs/store/actions_spec.js
@@ -111,7 +111,7 @@ describe('Job State actions', () => {
     });
 
     describe('success', () => {
-      it('dispatches requestJob and receiveJobSuccess ', () => {
+      it('dispatches requestJob and receiveJobSuccess', () => {
         mock.onGet(`${TEST_HOST}/endpoint.json`).replyOnce(200, { id: 121212, name: 'karma' });
 
         return testAction(
@@ -137,7 +137,7 @@ describe('Job State actions', () => {
         mock.onGet(`${TEST_HOST}/endpoint.json`).reply(500);
       });
 
-      it('dispatches requestJob and receiveJobError ', () => {
+      it('dispatches requestJob and receiveJobError', () => {
         return testAction(
           fetchJob,
           null,
@@ -291,7 +291,7 @@ describe('Job State actions', () => {
         mock.onGet(`${TEST_HOST}/endpoint/trace.json`).reply(500);
       });
 
-      it('dispatches requestJobLog and receiveJobLogError ', () => {
+      it('dispatches requestJobLog and receiveJobLogError', () => {
         return testAction(
           fetchJobLog,
           null,
@@ -355,7 +355,7 @@ describe('Job State actions', () => {
       window.clearTimeout = origTimeout;
     });
 
-    it('should commit STOP_POLLING_JOB_LOG mutation ', async () => {
+    it('should commit STOP_POLLING_JOB_LOG mutation', async () => {
       const jobLogTimeout = 7;
 
       await testAction(
@@ -370,7 +370,7 @@ describe('Job State actions', () => {
   });
 
   describe('receiveJobLogSuccess', () => {
-    it('should commit RECEIVE_JOB_LOG_SUCCESS mutation ', () => {
+    it('should commit RECEIVE_JOB_LOG_SUCCESS mutation', () => {
       return testAction(
         receiveJobLogSuccess,
         'hello world',
@@ -388,7 +388,7 @@ describe('Job State actions', () => {
   });
 
   describe('toggleCollapsibleLine', () => {
-    it('should commit TOGGLE_COLLAPSIBLE_LINE mutation ', () => {
+    it('should commit TOGGLE_COLLAPSIBLE_LINE mutation', () => {
       return testAction(
         toggleCollapsibleLine,
         { isClosed: true },
@@ -400,7 +400,7 @@ describe('Job State actions', () => {
   });
 
   describe('requestJobsForStage', () => {
-    it('should commit REQUEST_JOBS_FOR_STAGE mutation ', () => {
+    it('should commit REQUEST_JOBS_FOR_STAGE mutation', () => {
       return testAction(
         requestJobsForStage,
         { name: 'deploy' },
@@ -423,7 +423,7 @@ describe('Job State actions', () => {
     });
 
     describe('success', () => {
-      it('dispatches requestJobsForStage and receiveJobsForStageSuccess ', () => {
+      it('dispatches requestJobsForStage and receiveJobsForStageSuccess', () => {
         mock
           .onGet(`${TEST_HOST}/jobs.json`)
           .replyOnce(200, { latest_statuses: [{ id: 121212, name: 'build' }], retried: [] });
@@ -473,7 +473,7 @@ describe('Job State actions', () => {
   });
 
   describe('receiveJobsForStageSuccess', () => {
-    it('should commit RECEIVE_JOBS_FOR_STAGE_SUCCESS mutation ', () => {
+    it('should commit RECEIVE_JOBS_FOR_STAGE_SUCCESS mutation', () => {
       return testAction(
         receiveJobsForStageSuccess,
         [{ id: 121212, name: 'karma' }],
@@ -485,7 +485,7 @@ describe('Job State actions', () => {
   });
 
   describe('receiveJobsForStageError', () => {
-    it('should commit RECEIVE_JOBS_FOR_STAGE_ERROR mutation ', () => {
+    it('should commit RECEIVE_JOBS_FOR_STAGE_ERROR mutation', () => {
       return testAction(
         receiveJobsForStageError,
         null,
diff --git a/spec/frontend/jobs/store/mutations_spec.js b/spec/frontend/jobs/store/mutations_spec.js
index ea1ec383d6e..89cda3b0544 100644
--- a/spec/frontend/jobs/store/mutations_spec.js
+++ b/spec/frontend/jobs/store/mutations_spec.js
@@ -83,7 +83,7 @@ describe('Jobs Store Mutations', () => {
     describe('with new job log', () => {
       describe('log.lines', () => {
         describe('when append is true', () => {
-          it('sets the parsed log ', () => {
+          it('sets the parsed log', () => {
             mutations[types.RECEIVE_JOB_LOG_SUCCESS](stateCopy, {
               append: true,
               size: 511846,
@@ -107,7 +107,7 @@ describe('Jobs Store Mutations', () => {
         });
 
         describe('when it is defined', () => {
-          it('sets the parsed log ', () => {
+          it('sets the parsed log', () => {
             mutations[types.RECEIVE_JOB_LOG_SUCCESS](stateCopy, {
               append: false,
               size: 511846,