29 files changed, 472 insertions, 140 deletions

diff --git a/spec/frontend/jobs/components/filtered_search/jobs_filtered_search_spec.js b/spec/frontend/jobs/components/filtered_search/jobs_filtered_search_spec.js
index 322cfa3ba1f..98bdfc3fcbc 100644
--- a/spec/frontend/jobs/components/filtered_search/jobs_filtered_search_spec.js
+++ b/spec/frontend/jobs/components/filtered_search/jobs_filtered_search_spec.js
@@ -15,23 +15,27 @@ describe('Jobs filtered search', () => {
 
   const findStatusToken = () => getSearchToken('status');
 
-  const createComponent = () => {
-    wrapper = shallowMount(JobsFilteredSearch);
+  const createComponent = (props) => {
+    wrapper = shallowMount(JobsFilteredSearch, {
+      propsData: {
+        ...props,
+      },
+    });
   };
 
-  beforeEach(() => {
-    createComponent();
-  });
-
   afterEach(() => {
     wrapper.destroy();
   });
 
   it('displays filtered search', () => {
+    createComponent();
+
     expect(findFilteredSearch().exists()).toBe(true);
   });
 
   it('displays status token', () => {
+    createComponent();
+
     expect(findStatusToken()).toMatchObject({
       type: 'status',
       icon: 'status',
@@ -42,8 +46,26 @@ describe('Jobs filtered search', () => {
   });
 
   it('emits filter token to parent component', () => {
+    createComponent();
+
     findFilteredSearch().vm.$emit('submit', mockFailedSearchToken);
 
     expect(wrapper.emitted('filterJobsBySearch')).toEqual([[mockFailedSearchToken]]);
   });
+
+  it('filtered search value is empty array when no query string is passed', () => {
+    createComponent();
+
+    expect(findFilteredSearch().props('value')).toEqual([]);
+  });
+
+  it('filtered search returns correct data shape when passed query string', () => {
+    const value = 'SUCCESS';
+
+    createComponent({ queryString: { statuses: value } });
+
+    expect(findFilteredSearch().props('value')).toEqual([
+      { type: 'status', value: { data: value, operator: '=' } },
+    ]);
+  });
 });
diff --git a/spec/frontend/jobs/components/filtered_search/utils_spec.js b/spec/frontend/jobs/components/filtered_search/utils_spec.js
new file mode 100644
index 00000000000..8440ab42b86
--- /dev/null
+++ b/spec/frontend/jobs/components/filtered_search/utils_spec.js
@@ -0,0 +1,19 @@
+import { validateQueryString } from '~/jobs/components/filtered_search/utils';
+
+describe('Filtered search utils', () => {
+  describe('validateQueryString', () => {
+    it.each`
+      queryStringObject          | expected
+      ${{ statuses: 'SUCCESS' }} | ${{ statuses: 'SUCCESS' }}
+      ${{ statuses: 'failed' }}  | ${{ statuses: 'FAILED' }}
+      ${{ wrong: 'SUCCESS' }}    | ${null}
+      ${{ statuses: 'wrong' }}   | ${null}
+      ${{ wrong: 'wrong' }}      | ${null}
+    `(
+      'when provided $queryStringObject, the expected result is $expected',
+      ({ queryStringObject, expected }) => {
+        expect(validateQueryString(queryStringObject)).toEqual(expected);
+      },
+    );
+  });
+});
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 d90c9137a8f..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';
@@ -46,7 +46,7 @@ describe('Environments block', () => {
     });
   };
 
-  const findText = () => wrapper.find(EnvironmentsBlock).text();
+  const findText = () => wrapper.findComponent(EnvironmentsBlock).text();
   const findJobDeploymentLink = () => wrapper.find('[data-testid="job-deployment-link"]');
   const findEnvironmentLink = () => wrapper.find('[data-testid="job-environment-link"]');
   const findClusterLink = () => wrapper.find('[data-testid="job-cluster-link"]');
diff --git a/spec/frontend/jobs/components/erased_block_spec.js b/spec/frontend/jobs/components/job/erased_block_spec.js
index 057df20ccc2..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', () => {
@@ -10,7 +10,7 @@ describe('Erased block', () => {
   const timeago = getTimeago();
   const formattedDate = timeago.format(erasedAt);
 
-  const findLink = () => wrapper.find(GlLink);
+  const findLink = () => wrapper.findComponent(GlLink);
 
   const createComponent = (props) => {
     wrapper = mount(ErasedBlock, {
diff --git a/spec/frontend/jobs/components/job_app_spec.js b/spec/frontend/jobs/components/job/job_app_spec.js
index b4b5bc4669d..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);
@@ -57,18 +57,18 @@ describe('Job App', () => {
     await nextTick();
   };
 
-  const findLoadingComponent = () => wrapper.find(GlLoadingIcon);
-  const findSidebar = () => wrapper.find(Sidebar);
+  const findLoadingComponent = () => wrapper.findComponent(GlLoadingIcon);
+  const findSidebar = () => wrapper.findComponent(Sidebar);
   const findJobContent = () => wrapper.find('[data-testid="job-content"');
-  const findStuckBlockComponent = () => wrapper.find(StuckBlock);
+  const findStuckBlockComponent = () => wrapper.findComponent(StuckBlock);
   const findStuckBlockWithTags = () => wrapper.find('[data-testid="job-stuck-with-tags"');
   const findStuckBlockNoActiveRunners = () =>
     wrapper.find('[data-testid="job-stuck-no-active-runners"');
-  const findFailedJobComponent = () => wrapper.find(UnmetPrerequisitesBlock);
-  const findEnvironmentsBlockComponent = () => wrapper.find(EnvironmentsBlock);
-  const findErasedBlock = () => wrapper.find(ErasedBlock);
+  const findFailedJobComponent = () => wrapper.findComponent(UnmetPrerequisitesBlock);
+  const findEnvironmentsBlockComponent = () => wrapper.findComponent(EnvironmentsBlock);
+  const findErasedBlock = () => wrapper.findComponent(ErasedBlock);
   const findArchivedJob = () => wrapper.find('[data-testid="archived-job"]');
-  const findEmptyState = () => wrapper.find(EmptyState);
+  const findEmptyState = () => wrapper.findComponent(EmptyState);
   const findJobNewIssueLink = () => wrapper.find('[data-testid="job-new-issue"]');
   const findJobEmptyStateTitle = () => wrapper.find('[data-testid="job-empty-state-title"]');
   const findJobLogScrollTop = () => wrapper.find('[data-testid="job-controller-scroll-top"]');
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 08973223c08..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,17 +1,17 @@
 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;
   let wrapper;
 
   const retryOutdatedJobDocsUrl = 'url-to-docs';
-  const findLink = () => wrapper.find(GlLink);
-  const findModal = () => wrapper.find(GlModal);
+  const findLink = () => wrapper.findComponent(GlLink);
+  const findModal = () => wrapper.findComponent(GlModal);
 
   const createWrapper = ({ props = {}, provide = {}, stubs = {} } = {}) => {
     store = createStore();
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 4046f0269dd..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;
@@ -11,7 +11,7 @@ describe('Job Sidebar Details Container', () => {
 
   const findJobTimeout = () => wrapper.findByTestId('job-timeout');
   const findJobTags = () => wrapper.findByTestId('job-tags');
-  const findAllDetailsRow = () => wrapper.findAll(DetailRow);
+  const findAllDetailsRow = () => wrapper.findAllComponents(DetailRow);
 
   const createWrapper = ({ props = {} } = {}) => {
     store = createStore();
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 39c71986ce4..dc1aa67489d 100644
--- a/spec/frontend/jobs/components/sidebar_spec.js
+++ b/spec/frontend/jobs/components/job/sidebar_spec.js
@@ -1,27 +1,23 @@
 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;
   let wrapper;
 
   const forwardDeploymentFailure = 'forward_deployment_failure';
-  const findModal = () => wrapper.find(JobRetryForwardDeploymentModal);
+  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.find(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);
-      });
     });
   });
 
@@ -176,7 +115,7 @@ describe('Sidebar details block', () => {
 
     describe('with stages', () => {
       it('renders value provided as selectedStage as selected', () => {
-        expect(wrapper.find(StagesDropdown).props('selectedStage')).toBe('aStage');
+        expect(wrapper.findComponent(StagesDropdown).props('selectedStage')).toBe('aStage');
       });
     });
 
@@ -184,7 +123,7 @@ describe('Sidebar details block', () => {
       beforeEach(() => store.dispatch('receiveJobSuccess', job));
 
       it('does not render jobs container', () => {
-        expect(wrapper.find(JobsContainer).exists()).toBe(false);
+        expect(wrapper.findComponent(JobsContainer).exists()).toBe(false);
       });
     });
 
@@ -195,7 +134,7 @@ describe('Sidebar details block', () => {
       });
 
       it('renders list of jobs', () => {
-        expect(wrapper.find(JobsContainer).exists()).toBe(true);
+        expect(wrapper.findComponent(JobsContainer).exists()).toBe(true);
       });
     });
   });
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 1580ed45e46..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;
@@ -26,8 +26,8 @@ describe('Stuck Block Job component', () => {
     wrapper.find('[data-testid="job-stuck-no-active-runners"]');
   const findStuckNoRunners = () => wrapper.find('[data-testid="job-stuck-no-runners"]');
   const findStuckWithTags = () => wrapper.find('[data-testid="job-stuck-with-tags"]');
-  const findRunnerPathLink = () => wrapper.find(GlLink);
-  const findAllBadges = () => wrapper.findAll(GlBadge);
+  const findRunnerPathLink = () => wrapper.findComponent(GlLink);
+  const findAllBadges = () => wrapper.findAllComponents(GlBadge);
 
   describe('with no runners for project', () => {
     beforeEach(() => {
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 aeb85694e60..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;
@@ -23,7 +23,7 @@ describe('Unmet Prerequisites Block Job component', () => {
   });
 
   it('renders an alert with the correct message', () => {
-    const container = wrapper.find(GlAlert);
+    const container = wrapper.findComponent(GlAlert);
     const alertMessage =
       'This job failed because the necessary resources were not successfully created.';
 
@@ -32,7 +32,7 @@ describe('Unmet Prerequisites Block Job component', () => {
   });
 
   it('renders link to help page', () => {
-    const helpLink = wrapper.find(GlLink);
+    const helpLink = wrapper.findComponent(GlLink);
 
     expect(helpLink).not.toBeNull();
     expect(helpLink.text()).toContain('More information');
diff --git a/spec/frontend/jobs/components/log/line_header_spec.js b/spec/frontend/jobs/components/log/line_header_spec.js
index bdc8ae0eef0..ec8e79bba13 100644
--- a/spec/frontend/jobs/components/log/line_header_spec.js
+++ b/spec/frontend/jobs/components/log/line_header_spec.js
@@ -39,7 +39,7 @@ describe('Job Log Header Line', () => {
     });
 
     it('renders the line number component', () => {
-      expect(wrapper.find(LineNumber).exists()).toBe(true);
+      expect(wrapper.findComponent(LineNumber).exists()).toBe(true);
     });
 
     it('renders a span the provided text', () => {
@@ -90,7 +90,7 @@ describe('Job Log Header Line', () => {
     });
 
     it('renders the duration badge', () => {
-      expect(wrapper.find(DurationBadge).exists()).toBe(true);
+      expect(wrapper.findComponent(DurationBadge).exists()).toBe(true);
     });
   });
 });
diff --git a/spec/frontend/jobs/components/log/line_spec.js b/spec/frontend/jobs/components/log/line_spec.js
index bf80d90e299..50ebd1610d2 100644
--- a/spec/frontend/jobs/components/log/line_spec.js
+++ b/spec/frontend/jobs/components/log/line_spec.js
@@ -42,7 +42,7 @@ describe('Job Log Line', () => {
   });
 
   it('renders the line number component', () => {
-    expect(wrapper.find(LineNumber).exists()).toBe(true);
+    expect(wrapper.findComponent(LineNumber).exists()).toBe(true);
   });
 
   it('renders a span the provided text', () => {
diff --git a/spec/frontend/jobs/components/table/job_table_app_spec.js b/spec/frontend/jobs/components/table/job_table_app_spec.js
index 374768c3ee4..8c724a8030b 100644
--- a/spec/frontend/jobs/components/table/job_table_app_spec.js
+++ b/spec/frontend/jobs/components/table/job_table_app_spec.js
@@ -11,12 +11,14 @@ import VueApollo from 'vue-apollo';
 import { s__ } from '~/locale';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
+import { TEST_HOST } from 'spec/test_constants';
 import createFlash from '~/flash';
 import getJobsQuery from '~/jobs/components/table/graphql/queries/get_jobs.query.graphql';
 import JobsTable from '~/jobs/components/table/jobs_table.vue';
 import JobsTableApp from '~/jobs/components/table/jobs_table_app.vue';
 import JobsTableTabs from '~/jobs/components/table/jobs_table_tabs.vue';
 import JobsFilteredSearch from '~/jobs/components/filtered_search/jobs_filtered_search.vue';
+import * as urlUtils from '~/lib/utils/url_utility';
 import {
   mockJobsResponsePaginated,
   mockJobsResponseEmpty,
@@ -230,5 +232,17 @@ describe('Job table app', () => {
       expect(createFlash).toHaveBeenCalledWith(expectedWarning);
       expect(wrapper.vm.$apollo.queries.jobs.refetch).toHaveBeenCalledTimes(0);
     });
+
+    it('updates URL query string when filtering jobs by status', async () => {
+      createComponent();
+
+      jest.spyOn(urlUtils, 'updateHistory');
+
+      await findFilteredSearch().vm.$emit('filterJobsBySearch', [mockFailedSearchToken]);
+
+      expect(urlUtils.updateHistory).toHaveBeenCalledWith({
+        url: `${TEST_HOST}/?statuses=FAILED`,
+      });
+    });
   });
 });
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,