Add latest changes from gitlab-org/gitlab@master

9 files changed, 291 insertions, 266 deletions

diff --git a/spec/features/issues/gfm_autocomplete_spec.rb b/spec/features/issues/gfm_autocomplete_spec.rb
index 0165fba9ace..e0a6e0fec1b 100644
--- a/spec/features/issues/gfm_autocomplete_spec.rb
+++ b/spec/features/issues/gfm_autocomplete_spec.rb
@@ -295,18 +295,21 @@ RSpec.describe 'GFM autocomplete', :js do
     end
 
     context 'assignees' do
-      let(:issue_assignee) { create(:issue, project: project) }
-      let(:unassigned_user) { create(:user) }
+      let_it_be(:issue_assignee) { create(:issue, project: project, assignees: [user]) }
+      let_it_be(:unassigned_user) { create(:user) }
 
-      before do
-        issue_assignee.update(assignees: [user])
+      let_it_be(:group) { create(:group) }
 
+      before_all do
         project.add_maintainer(unassigned_user)
+        group.add_developer(user)
       end
 
       it 'lists users who are currently not assigned to the issue when using /assign' do
         visit project_issue_path(project, issue_assignee)
 
+        wait_for_requests
+
         note = find('#note-body')
         page.within '.timeline-content-form' do
           note.native.send_keys('/as')
@@ -318,6 +321,7 @@ RSpec.describe 'GFM autocomplete', :js do
         wait_for_requests
 
         expect(find('#at-view-users .atwho-view-ul')).not_to have_content(user.username)
+        expect(find('#at-view-users .atwho-view-ul')).not_to have_content(group.name)
         expect(find('#at-view-users .atwho-view-ul')).to have_content(unassigned_user.username)
       end
 
@@ -330,6 +334,7 @@ RSpec.describe 'GFM autocomplete', :js do
         textarea.native.send_keys(:tab)
 
         expect(find('#at-view-users .atwho-view-ul')).to have_content(unassigned_user.username)
+        expect(find('#at-view-users .atwho-view-ul')).not_to have_content(group.name)
         expect(find('#at-view-users .atwho-view-ul')).to have_content(user.username)
       end
     end
@@ -644,18 +649,21 @@ RSpec.describe 'GFM autocomplete', :js do
     end
 
     context 'assignees' do
-      let(:issue_assignee) { create(:issue, project: project) }
-      let(:unassigned_user) { create(:user) }
+      let_it_be(:issue_assignee) { create(:issue, project: project, assignees: [user]) }
+      let_it_be(:unassigned_user) { create(:user) }
 
-      before do
-        issue_assignee.update(assignees: [user])
+      let_it_be(:group) { create(:group) }
 
+      before_all do
         project.add_maintainer(unassigned_user)
+        group.add_developer(user)
       end
 
       it 'lists users who are currently not assigned to the issue when using /assign' do
         visit project_issue_path(project, issue_assignee)
 
+        wait_for_requests
+
         note = find('#note-body')
         page.within '.timeline-content-form' do
           note.native.send_keys('/as')
@@ -668,12 +676,15 @@ RSpec.describe 'GFM autocomplete', :js do
         wait_for_requests
 
         expect(find('.tribute-container ul', visible: true)).not_to have_content(user.username)
+        expect(find('.tribute-container ul', visible: true)).not_to have_content(group.name)
         expect(find('.tribute-container ul', visible: true)).to have_content(unassigned_user.username)
       end
 
       it 'lists users who are currently not assigned to the issue when using /assign on the second line' do
         visit project_issue_path(project, issue_assignee)
 
+        wait_for_requests
+
         note = find('#note-body')
         page.within '.timeline-content-form' do
           note.native.send_keys('/assign @user2')
diff --git a/spec/frontend/alert_settings/__snapshots__/alert_settings_form_spec.js.snap b/spec/frontend/alert_settings/__snapshots__/alert_settings_form_spec.js.snap
index a65d1eae2e3..545be94dcaa 100644
--- a/spec/frontend/alert_settings/__snapshots__/alert_settings_form_spec.js.snap
+++ b/spec/frontend/alert_settings/__snapshots__/alert_settings_form_spec.js.snap
@@ -34,16 +34,14 @@ exports[`AlertsSettingsForm with default values renders the initial template 1`]
     <gl-form-group-stub label=\\"Alert test payload\\" label-for=\\"alert-json\\" label-class=\\"label-bold\\">
       <gl-form-textarea-stub noresize=\\"true\\" id=\\"alert-json\\" disabled=\\"true\\" state=\\"true\\" placeholder=\\"Enter test alert JSON....\\" rows=\\"6\\" max-rows=\\"10\\"></gl-form-textarea-stub>
     </gl-form-group-stub>
-    <div class=\\"gl-display-flex gl-justify-content-end\\">
-      <gl-button-stub category=\\"primary\\" variant=\\"default\\" size=\\"medium\\" icon=\\"\\" buttontextclasses=\\"\\" disabled=\\"true\\">Test alert payload</gl-button-stub>
-    </div>
+    <gl-button-stub category=\\"primary\\" variant=\\"default\\" size=\\"medium\\" icon=\\"\\" buttontextclasses=\\"\\" disabled=\\"true\\">Test alert payload</gl-button-stub>
     <div class=\\"footer-block row-content-block gl-display-flex gl-justify-content-space-between\\">
-      <gl-button-stub category=\\"primary\\" variant=\\"default\\" size=\\"medium\\" icon=\\"\\" buttontextclasses=\\"\\" disabled=\\"true\\">
-        Cancel
-      </gl-button-stub>
       <gl-button-stub category=\\"primary\\" variant=\\"success\\" size=\\"medium\\" icon=\\"\\" buttontextclasses=\\"\\" disabled=\\"true\\">
         Save changes
       </gl-button-stub>
+      <gl-button-stub category=\\"primary\\" variant=\\"default\\" size=\\"medium\\" icon=\\"\\" buttontextclasses=\\"\\" disabled=\\"true\\">
+        Cancel
+      </gl-button-stub>
     </div>
   </gl-form-stub>
 </div>"
diff --git a/spec/frontend/gfm_auto_complete_spec.js b/spec/frontend/gfm_auto_complete_spec.js
index 6c40b1ba3a7..d6d050dd815 100644
--- a/spec/frontend/gfm_auto_complete_spec.js
+++ b/spec/frontend/gfm_auto_complete_spec.js
@@ -278,6 +278,7 @@ describe('GfmAutoComplete', () => {
     it('should set the text avatar if avatar_url is null', () => {
       expect(membersBeforeSave([{ ...mockGroup, avatar_url: null }])).toEqual([
         {
+          type: 'Group',
           username: 'my-group',
           avatarTag: '<div class="avatar rect-avatar center avatar-inline s26">M</div>',
           title: 'My Group (2)',
@@ -290,6 +291,7 @@ describe('GfmAutoComplete', () => {
     it('should set the image avatar if avatar_url is given', () => {
       expect(membersBeforeSave([mockGroup])).toEqual([
         {
+          type: 'Group',
           username: 'my-group',
           avatarTag:
             '<img src="./group.jpg" alt="my-group" class="avatar rect-avatar avatar-inline center s26"/>',
@@ -303,6 +305,7 @@ describe('GfmAutoComplete', () => {
     it('should set mentions disabled icon if mentionsDisabled is set', () => {
       expect(membersBeforeSave([{ ...mockGroup, mentionsDisabled: true }])).toEqual([
         {
+          type: 'Group',
           username: 'my-group',
           avatarTag:
             '<img src="./group.jpg" alt="my-group" class="avatar rect-avatar avatar-inline center s26"/>',
@@ -321,6 +324,7 @@ describe('GfmAutoComplete', () => {
         ]),
       ).toEqual([
         {
+          type: 'User',
           username: 'my-user',
           avatarTag:
             '<img src="./users.jpg" alt="my-user" class="avatar  avatar-inline center s26"/>',
diff --git a/spec/frontend/grafana_integration/components/__snapshots__/grafana_integration_spec.js.snap b/spec/frontend/grafana_integration/components/__snapshots__/grafana_integration_spec.js.snap
index dd889e2ab6f..e880f585daa 100644
--- a/spec/frontend/grafana_integration/components/__snapshots__/grafana_integration_spec.js.snap
+++ b/spec/frontend/grafana_integration/components/__snapshots__/grafana_integration_spec.js.snap
@@ -93,21 +93,17 @@ exports[`grafana integration component default state to match the default snapsh
         </p>
       </gl-form-group-stub>
        
-      <div
-        class="gl-display-flex gl-justify-content-end"
+      <gl-button-stub
+        buttontextclasses=""
+        category="primary"
+        icon=""
+        size="medium"
+        variant="success"
       >
-        <gl-button-stub
-          buttontextclasses=""
-          category="primary"
-          icon=""
-          size="medium"
-          variant="success"
-        >
-          
-          Save Changes
         
-        </gl-button-stub>
-      </div>
+        Save Changes
+      
+      </gl-button-stub>
     </form>
   </div>
 </section>
diff --git a/spec/frontend/incidents_settings/components/__snapshots__/alerts_form_spec.js.snap b/spec/frontend/incidents_settings/components/__snapshots__/alerts_form_spec.js.snap
index cd8a3d7a381..e4620590e62 100644
--- a/spec/frontend/incidents_settings/components/__snapshots__/alerts_form_spec.js.snap
+++ b/spec/frontend/incidents_settings/components/__snapshots__/alerts_form_spec.js.snap
@@ -93,24 +93,20 @@ exports[`Alert integration settings form default state should match the default
       </gl-form-checkbox-stub>
     </gl-form-group-stub>
      
-    <div
-      class="gl-display-flex gl-justify-content-end"
+    <gl-button-stub
+      buttontextclasses=""
+      category="primary"
+      class="js-no-auto-disable"
+      data-qa-selector="save_changes_button"
+      icon=""
+      size="medium"
+      type="submit"
+      variant="success"
     >
-      <gl-button-stub
-        buttontextclasses=""
-        category="primary"
-        class="js-no-auto-disable"
-        data-qa-selector="save_changes_button"
-        icon=""
-        size="medium"
-        type="submit"
-        variant="success"
-      >
-        
-        Save changes
       
-      </gl-button-stub>
-    </div>
+      Save changes
+    
+    </gl-button-stub>
   </form>
 </div>
 `;
diff --git a/spec/frontend/incidents_settings/components/__snapshots__/pagerduty_form_spec.js.snap b/spec/frontend/incidents_settings/components/__snapshots__/pagerduty_form_spec.js.snap
index a6c910f9023..ea2c512bf40 100644
--- a/spec/frontend/incidents_settings/components/__snapshots__/pagerduty_form_spec.js.snap
+++ b/spec/frontend/incidents_settings/components/__snapshots__/pagerduty_form_spec.js.snap
@@ -42,25 +42,21 @@ exports[`Alert integration settings form should match the default snapshot 1`] =
         />
       </div>
        
-      <div
-        class="gl-display-flex gl-justify-content-end"
+      <gl-button-stub
+        buttontextclasses=""
+        category="primary"
+        class="gl-mt-3"
+        data-testid="webhook-reset-btn"
+        icon=""
+        role="button"
+        size="medium"
+        tabindex="0"
+        variant="default"
       >
-        <gl-button-stub
-          buttontextclasses=""
-          category="primary"
-          class="gl-mt-3"
-          data-testid="webhook-reset-btn"
-          icon=""
-          role="button"
-          size="medium"
-          tabindex="0"
-          variant="default"
-        >
-          
-          Reset webhook URL
         
-        </gl-button-stub>
-      </div>
+        Reset webhook URL
+      
+      </gl-button-stub>
        
       <gl-modal-stub
         modalclass=""
@@ -77,23 +73,19 @@ exports[`Alert integration settings form should match the default snapshot 1`] =
       </gl-modal-stub>
     </gl-form-group-stub>
      
-    <div
-      class="gl-display-flex gl-justify-content-end"
+    <gl-button-stub
+      buttontextclasses=""
+      category="primary"
+      class="js-no-auto-disable"
+      icon=""
+      size="medium"
+      type="submit"
+      variant="success"
     >
-      <gl-button-stub
-        buttontextclasses=""
-        category="primary"
-        class="js-no-auto-disable"
-        icon=""
-        size="medium"
-        type="submit"
-        variant="success"
-      >
-        
-        Save changes
       
-      </gl-button-stub>
-    </div>
+      Save changes
+    
+    </gl-button-stub>
   </form>
 </div>
 `;
diff --git a/spec/frontend/pipelines/pipelines_spec.js b/spec/frontend/pipelines/pipelines_spec.js
index b0ad6bbd228..1298a2a1524 100644
--- a/spec/frontend/pipelines/pipelines_spec.js
+++ b/spec/frontend/pipelines/pipelines_spec.js
@@ -1,9 +1,17 @@
 import { mount } from '@vue/test-utils';
 import MockAdapter from 'axios-mock-adapter';
 import waitForPromises from 'helpers/wait_for_promises';
-import { GlFilteredSearch } from '@gitlab/ui';
+import { GlFilteredSearch, GlButton, GlLoadingIcon } from '@gitlab/ui';
 import Api from '~/api';
 import axios from '~/lib/utils/axios_utils';
+import NavigationTabs from '~/vue_shared/components/navigation_tabs.vue';
+import TablePagination from '~/vue_shared/components/pagination/table_pagination.vue';
+
+import NavigationControls from '~/pipelines/components/pipelines_list/nav_controls.vue';
+import EmptyState from '~/pipelines/components/pipelines_list/empty_state.vue';
+import BlankState from '~/pipelines/components/pipelines_list/blank_state.vue';
+import PipelinesTableComponent from '~/pipelines/components/pipelines_list/pipelines_table.vue';
+
 import PipelinesComponent from '~/pipelines/components/pipelines_list/pipelines.vue';
 import Store from '~/pipelines/stores/pipelines_store';
 import { pipelineWithStages, stageReply, users, mockSearch, branches } from './mock_data';
@@ -49,6 +57,20 @@ describe('Pipelines', () => {
   };
 
   const findFilteredSearch = () => wrapper.find(GlFilteredSearch);
+  const findByTestId = id => wrapper.find(`[data-testid="${id}"]`);
+  const findNavigationTabs = () => wrapper.find(NavigationTabs);
+  const findNavigationControls = () => wrapper.find(NavigationControls);
+  const findTab = tab => findByTestId(`pipelines-tab-${tab}`);
+
+  const findRunPipelineButton = () => findByTestId('run-pipeline-button');
+  const findCiLintButton = () => findByTestId('ci-lint-button');
+  const findCleanCacheButton = () => findByTestId('clear-cache-button');
+
+  const findEmptyState = () => wrapper.find(EmptyState);
+  const findBlankState = () => wrapper.find(BlankState);
+  const findStagesDropdown = () => wrapper.find('.js-builds-dropdown-button');
+
+  const findTablePagination = () => wrapper.find(TablePagination);
 
   const createComponent = (props = defaultProps, methods) => {
     wrapper = mount(PipelinesComponent, {
@@ -87,19 +109,19 @@ describe('Pipelines', () => {
       });
 
       it('renders tabs', () => {
-        expect(wrapper.find('.js-pipelines-tab-all').text()).toContain('All');
+        expect(findTab('all').text()).toContain('All');
       });
 
       it('renders Run Pipeline link', () => {
-        expect(wrapper.find('.js-run-pipeline').attributes('href')).toBe(paths.newPipelinePath);
+        expect(findRunPipelineButton().attributes('href')).toBe(paths.newPipelinePath);
       });
 
       it('renders CI Lint link', () => {
-        expect(wrapper.find('.js-ci-lint').attributes('href')).toBe(paths.ciLintPath);
+        expect(findCiLintButton().attributes('href')).toBe(paths.ciLintPath);
       });
 
       it('renders Clear Runner Cache button', () => {
-        expect(wrapper.find('.js-clear-cache').text()).toBe('Clear Runner Caches');
+        expect(findCleanCacheButton().text()).toBe('Clear Runner Caches');
       });
 
       it('renders pipelines table', () => {
@@ -127,23 +149,31 @@ describe('Pipelines', () => {
       });
 
       it('renders tabs', () => {
-        expect(wrapper.find('.js-pipelines-tab-all').text()).toContain('All');
+        expect(findTab('all').text()).toContain('All');
       });
 
       it('renders Run Pipeline link', () => {
-        expect(wrapper.find('.js-run-pipeline').attributes('href')).toEqual(paths.newPipelinePath);
+        expect(findRunPipelineButton().attributes('href')).toBe(paths.newPipelinePath);
       });
 
       it('renders CI Lint link', () => {
-        expect(wrapper.find('.js-ci-lint').attributes('href')).toEqual(paths.ciLintPath);
+        expect(findCiLintButton().attributes('href')).toBe(paths.ciLintPath);
       });
 
       it('renders Clear Runner Cache button', () => {
-        expect(wrapper.find('.js-clear-cache').text()).toEqual('Clear Runner Caches');
+        expect(findCleanCacheButton().text()).toBe('Clear Runner Caches');
       });
 
       it('renders tab empty state', () => {
-        expect(wrapper.find('.empty-state h4').text()).toEqual('There are currently no pipelines.');
+        expect(findBlankState().text()).toBe('There are currently no pipelines.');
+      });
+
+      it('renders tab empty state finished scope', () => {
+        wrapper.vm.scope = 'finished';
+
+        return wrapper.vm.$nextTick().then(() => {
+          expect(findBlankState().text()).toBe('There are currently no finished pipelines.');
+        });
       });
     });
 
@@ -165,18 +195,23 @@ describe('Pipelines', () => {
       });
 
       it('renders empty state', () => {
-        expect(wrapper.find('.js-empty-state h4').text()).toEqual('Build with confidence');
-
-        expect(wrapper.find('.js-get-started-pipelines').attributes('href')).toEqual(
-          paths.helpPagePath,
-        );
+        expect(
+          findEmptyState()
+            .find('h4')
+            .text(),
+        ).toBe('Build with confidence');
+        expect(
+          findEmptyState()
+            .find(GlButton)
+            .attributes('href'),
+        ).toBe(paths.helpPagePath);
       });
 
       it('does not render tabs nor buttons', () => {
-        expect(wrapper.find('.js-pipelines-tab-all').exists()).toBeFalsy();
-        expect(wrapper.find('.js-run-pipeline').exists()).toBeFalsy();
-        expect(wrapper.find('.js-ci-lint').exists()).toBeFalsy();
-        expect(wrapper.find('.js-clear-cache').exists()).toBeFalsy();
+        expect(findTab('all').exists()).toBe(false);
+        expect(findRunPipelineButton().exists()).toBeFalsy();
+        expect(findCiLintButton().exists()).toBeFalsy();
+        expect(findCleanCacheButton().exists()).toBeFalsy();
       });
     });
 
@@ -189,20 +224,18 @@ describe('Pipelines', () => {
       });
 
       it('renders tabs', () => {
-        expect(wrapper.find('.js-pipelines-tab-all').text()).toContain('All');
+        expect(findTab('all').text()).toContain('All');
       });
 
       it('renders buttons', () => {
-        expect(wrapper.find('.js-run-pipeline').attributes('href')).toEqual(paths.newPipelinePath);
+        expect(findRunPipelineButton().attributes('href')).toBe(paths.newPipelinePath);
 
-        expect(wrapper.find('.js-ci-lint').attributes('href')).toEqual(paths.ciLintPath);
-        expect(wrapper.find('.js-clear-cache').text()).toEqual('Clear Runner Caches');
+        expect(findCiLintButton().attributes('href')).toBe(paths.ciLintPath);
+        expect(findCleanCacheButton().text()).toBe('Clear Runner Caches');
       });
 
       it('renders error state', () => {
-        expect(wrapper.find('.empty-state').text()).toContain(
-          'There was an error fetching the pipelines.',
-        );
+        expect(findBlankState().text()).toContain('There was an error fetching the pipelines.');
       });
     });
   });
@@ -218,13 +251,13 @@ describe('Pipelines', () => {
       });
 
       it('renders tabs', () => {
-        expect(wrapper.find('.js-pipelines-tab-all').text()).toContain('All');
+        expect(findTab('all').text()).toContain('All');
       });
 
       it('does not render buttons', () => {
-        expect(wrapper.find('.js-run-pipeline').exists()).toBeFalsy();
-        expect(wrapper.find('.js-ci-lint').exists()).toBeFalsy();
-        expect(wrapper.find('.js-clear-cache').exists()).toBeFalsy();
+        expect(findRunPipelineButton().exists()).toBeFalsy();
+        expect(findCiLintButton().exists()).toBeFalsy();
+        expect(findCleanCacheButton().exists()).toBeFalsy();
       });
 
       it('renders pipelines table', () => {
@@ -252,17 +285,17 @@ describe('Pipelines', () => {
       });
 
       it('renders tabs', () => {
-        expect(wrapper.find('.js-pipelines-tab-all').text()).toContain('All');
+        expect(findTab('all').text()).toContain('All');
       });
 
       it('does not render buttons', () => {
-        expect(wrapper.find('.js-run-pipeline').exists()).toBeFalsy();
-        expect(wrapper.find('.js-ci-lint').exists()).toBeFalsy();
-        expect(wrapper.find('.js-clear-cache').exists()).toBeFalsy();
+        expect(findRunPipelineButton().exists()).toBeFalsy();
+        expect(findCiLintButton().exists()).toBeFalsy();
+        expect(findCleanCacheButton().exists()).toBeFalsy();
       });
 
       it('renders tab empty state', () => {
-        expect(wrapper.find('.empty-state h4').text()).toEqual('There are currently no pipelines.');
+        expect(wrapper.find('.empty-state h4').text()).toBe('There are currently no pipelines.');
       });
     });
 
@@ -284,18 +317,22 @@ describe('Pipelines', () => {
       });
 
       it('renders empty state without button to set CI', () => {
-        expect(wrapper.find('.js-empty-state').text()).toEqual(
+        expect(findEmptyState().text()).toBe(
           'This project is not currently set up to run pipelines.',
         );
 
-        expect(wrapper.find('.js-get-started-pipelines').exists()).toBeFalsy();
+        expect(
+          findEmptyState()
+            .find(GlButton)
+            .exists(),
+        ).toBeFalsy();
       });
 
       it('does not render tabs or buttons', () => {
-        expect(wrapper.find('.js-pipelines-tab-all').exists()).toBeFalsy();
-        expect(wrapper.find('.js-run-pipeline').exists()).toBeFalsy();
-        expect(wrapper.find('.js-ci-lint').exists()).toBeFalsy();
-        expect(wrapper.find('.js-clear-cache').exists()).toBeFalsy();
+        expect(findTab('all').exists()).toBe(false);
+        expect(findRunPipelineButton().exists()).toBeFalsy();
+        expect(findCiLintButton().exists()).toBeFalsy();
+        expect(findCleanCacheButton().exists()).toBeFalsy();
       });
     });
 
@@ -309,13 +346,13 @@ describe('Pipelines', () => {
       });
 
       it('renders tabs', () => {
-        expect(wrapper.find('.js-pipelines-tab-all').text()).toContain('All');
+        expect(findTab('all').text()).toContain('All');
       });
 
       it('does not renders buttons', () => {
-        expect(wrapper.find('.js-run-pipeline').exists()).toBeFalsy();
-        expect(wrapper.find('.js-ci-lint').exists()).toBeFalsy();
-        expect(wrapper.find('.js-clear-cache').exists()).toBeFalsy();
+        expect(findRunPipelineButton().exists()).toBeFalsy();
+        expect(findCiLintButton().exists()).toBeFalsy();
+        expect(findCleanCacheButton().exists()).toBeFalsy();
       });
 
       it('renders error state', () => {
@@ -342,14 +379,20 @@ describe('Pipelines', () => {
         );
       });
 
-      it('should render navigation tabs', () => {
-        expect(wrapper.find('.js-pipelines-tab-all').text()).toContain('All');
-
-        expect(wrapper.find('.js-pipelines-tab-finished').text()).toContain('Finished');
-
-        expect(wrapper.find('.js-pipelines-tab-branches').text()).toContain('Branches');
+      it('should set up navigation tabs', () => {
+        expect(findNavigationTabs().props('tabs')).toEqual([
+          { name: 'All', scope: 'all', count: '3', isActive: true },
+          { name: 'Finished', scope: 'finished', count: undefined, isActive: false },
+          { name: 'Branches', scope: 'branches', isActive: false },
+          { name: 'Tags', scope: 'tags', isActive: false },
+        ]);
+      });
 
-        expect(wrapper.find('.js-pipelines-tab-tags').text()).toContain('Tags');
+      it('should render navigation tabs', () => {
+        expect(findTab('all').html()).toContain('All');
+        expect(findTab('finished').text()).toContain('Finished');
+        expect(findTab('branches').text()).toContain('Branches');
+        expect(findTab('tags').text()).toContain('Tags');
       });
 
       it('should make an API request when using tabs', () => {
@@ -362,7 +405,7 @@ describe('Pipelines', () => {
         );
 
         return waitForPromises().then(() => {
-          wrapper.find('.js-pipelines-tab-finished').trigger('click');
+          findTab('finished').trigger('click');
 
           expect(updateContentMock).toHaveBeenCalledWith({ scope: 'finished', page: '1' });
         });
@@ -401,133 +444,172 @@ describe('Pipelines', () => {
     });
   });
 
-  describe('methods', () => {
+  describe('User Interaction', () => {
+    let updateContentMock;
+
     beforeEach(() => {
       jest.spyOn(window.history, 'pushState').mockImplementation(() => null);
     });
 
-    describe('onChangeTab', () => {
-      it('should set page to 1', () => {
-        const updateContentMock = jest.fn(() => {});
-        createComponent(
-          { hasGitlabCi: true, canCreatePipeline: true, ...paths },
-          {
-            updateContent: updateContentMock,
-          },
-        );
+    beforeEach(() => {
+      mock.onGet(paths.endpoint).reply(200, pipelines);
+      createComponent();
 
-        wrapper.vm.onChangeTab('running');
+      updateContentMock = jest.spyOn(wrapper.vm, 'updateContent');
+
+      return waitForPromises();
+    });
+
+    describe('when user changes tabs', () => {
+      it('should set page to 1', () => {
+        findNavigationTabs().vm.$emit('onChangeTab', 'running');
 
         expect(updateContentMock).toHaveBeenCalledWith({ scope: 'running', page: '1' });
       });
     });
 
-    describe('onChangePage', () => {
+    describe('when user changes page', () => {
       it('should update page and keep scope', () => {
-        const updateContentMock = jest.fn(() => {});
-        createComponent(
-          { hasGitlabCi: true, canCreatePipeline: true, ...paths },
-          {
-            updateContent: updateContentMock,
-          },
-        );
-
-        wrapper.vm.onChangePage(4);
+        findTablePagination().vm.change(4);
 
         expect(updateContentMock).toHaveBeenCalledWith({ scope: wrapper.vm.scope, page: '4' });
       });
     });
-  });
 
-  describe('computed properties', () => {
-    beforeEach(() => {
-      createComponent();
-    });
+    describe('updates results when a staged is clicked', () => {
+      beforeEach(() => {
+        const copyPipeline = { ...pipelineWithStages };
+        copyPipeline.id += 1;
+        mock
+          .onGet('twitter/flight/pipelines.json')
+          .reply(
+            200,
+            {
+              pipelines: [pipelineWithStages],
+              count: {
+                all: 1,
+                finished: 1,
+                pending: 0,
+                running: 0,
+              },
+            },
+            {
+              'POLL-INTERVAL': 100,
+            },
+          )
+          .onGet(pipelineWithStages.details.stages[0].dropdown_path)
+          .reply(200, stageReply);
 
-    describe('tabs', () => {
-      it('returns default tabs', () => {
-        expect(wrapper.vm.tabs).toEqual([
-          { name: 'All', scope: 'all', count: undefined, isActive: true },
-          { name: 'Finished', scope: 'finished', count: undefined, isActive: false },
-          { name: 'Branches', scope: 'branches', isActive: false },
-          { name: 'Tags', scope: 'tags', isActive: false },
-        ]);
+        createComponent();
       });
-    });
 
-    describe('emptyTabMessage', () => {
-      it('returns message with finished scope', () => {
-        wrapper.vm.scope = 'finished';
+      describe('when a request is being made', () => {
+        it('stops polling, cancels the request, & restarts polling', () => {
+          const stopMock = jest.spyOn(wrapper.vm.poll, 'stop');
+          const restartMock = jest.spyOn(wrapper.vm.poll, 'restart');
+          const cancelMock = jest.spyOn(wrapper.vm.service.cancelationSource, 'cancel');
+          mock.onGet('twitter/flight/pipelines.json').reply(200, pipelines);
 
-        return wrapper.vm.$nextTick().then(() => {
-          expect(wrapper.vm.emptyTabMessage).toEqual('There are currently no finished pipelines.');
+          return waitForPromises()
+            .then(() => {
+              wrapper.vm.isMakingRequest = true;
+              findStagesDropdown().trigger('click');
+            })
+            .then(() => {
+              expect(cancelMock).toHaveBeenCalled();
+              expect(stopMock).toHaveBeenCalled();
+              expect(restartMock).toHaveBeenCalled();
+            });
         });
       });
 
-      it('returns message without scope when scope is `all`', () => {
-        expect(wrapper.vm.emptyTabMessage).toEqual('There are currently no pipelines.');
+      describe('when no request is being made', () => {
+        it('stops polling & restarts polling', () => {
+          const stopMock = jest.spyOn(wrapper.vm.poll, 'stop');
+          const restartMock = jest.spyOn(wrapper.vm.poll, 'restart');
+          mock.onGet('twitter/flight/pipelines.json').reply(200, pipelines);
+
+          return waitForPromises()
+            .then(() => {
+              findStagesDropdown().trigger('click');
+              expect(stopMock).toHaveBeenCalled();
+            })
+            .then(() => {
+              expect(restartMock).toHaveBeenCalled();
+            });
+        });
       });
     });
+  });
 
-    describe('stateToRender', () => {
-      it('returns loading state when the app is loading', () => {
-        expect(wrapper.vm.stateToRender).toEqual('loading');
+  describe('Rendered content', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+
+    describe('displays different content', () => {
+      it('shows loading state when the app is loading', () => {
+        expect(wrapper.find(GlLoadingIcon).exists()).toBe(true);
       });
 
-      it('returns error state when app has error', () => {
+      it('shows error state when app has error', () => {
         wrapper.vm.hasError = true;
         wrapper.vm.isLoading = false;
 
         return wrapper.vm.$nextTick().then(() => {
-          expect(wrapper.vm.stateToRender).toEqual('error');
+          expect(findBlankState().props('message')).toBe(
+            'There was an error fetching the pipelines. Try again in a few moments or contact your support team.',
+          );
         });
       });
 
-      it('returns table list when app has pipelines', () => {
+      it('shows table list when app has pipelines', () => {
         wrapper.vm.isLoading = false;
         wrapper.vm.hasError = false;
         wrapper.vm.state.pipelines = pipelines.pipelines;
 
         return wrapper.vm.$nextTick().then(() => {
-          expect(wrapper.vm.stateToRender).toEqual('tableList');
+          expect(wrapper.find(PipelinesTableComponent).exists()).toBe(true);
         });
       });
 
-      it('returns empty tab when app does not have pipelines but project has pipelines', () => {
+      it('shows empty tab when app does not have pipelines but project has pipelines', () => {
         wrapper.vm.state.count.all = 10;
         wrapper.vm.isLoading = false;
 
         return wrapper.vm.$nextTick().then(() => {
-          expect(wrapper.vm.stateToRender).toEqual('emptyTab');
+          expect(findBlankState().exists()).toBe(true);
+          expect(findBlankState().props('message')).toBe('There are currently no pipelines.');
         });
       });
 
-      it('returns empty tab when project has CI', () => {
+      it('shows empty tab when project has CI', () => {
         wrapper.vm.isLoading = false;
 
         return wrapper.vm.$nextTick().then(() => {
-          expect(wrapper.vm.stateToRender).toEqual('emptyTab');
+          expect(findBlankState().exists()).toBe(true);
+          expect(findBlankState().props('message')).toBe('There are currently no pipelines.');
         });
       });
 
-      it('returns empty state when project does not have pipelines nor CI', () => {
+      it('shows empty state when project does not have pipelines nor CI', () => {
         createComponent({ hasGitlabCi: false, canCreatePipeline: true, ...paths });
 
         wrapper.vm.isLoading = false;
 
         return wrapper.vm.$nextTick().then(() => {
-          expect(wrapper.vm.stateToRender).toEqual('emptyState');
+          expect(wrapper.find(EmptyState).exists()).toBe(true);
         });
       });
     });
 
-    describe('shouldRenderTabs', () => {
+    describe('displays tabs', () => {
       it('returns true when state is loading & has already made the first request', () => {
         wrapper.vm.isLoading = true;
         wrapper.vm.hasMadeRequest = true;
 
         return wrapper.vm.$nextTick().then(() => {
-          expect(wrapper.vm.shouldRenderTabs).toEqual(true);
+          expect(findNavigationTabs().exists()).toBe(true);
         });
       });
 
@@ -537,7 +619,7 @@ describe('Pipelines', () => {
         wrapper.vm.hasMadeRequest = true;
 
         return wrapper.vm.$nextTick().then(() => {
-          expect(wrapper.vm.shouldRenderTabs).toEqual(true);
+          expect(findNavigationTabs().exists()).toBe(true);
         });
       });
 
@@ -547,7 +629,7 @@ describe('Pipelines', () => {
         wrapper.vm.hasMadeRequest = true;
 
         return wrapper.vm.$nextTick().then(() => {
-          expect(wrapper.vm.shouldRenderTabs).toEqual(true);
+          expect(findNavigationTabs().exists()).toBe(true);
         });
       });
 
@@ -557,7 +639,7 @@ describe('Pipelines', () => {
         wrapper.vm.hasMadeRequest = true;
 
         return wrapper.vm.$nextTick().then(() => {
-          expect(wrapper.vm.shouldRenderTabs).toEqual(true);
+          expect(findNavigationTabs().exists()).toBe(true);
         });
       });
 
@@ -565,7 +647,7 @@ describe('Pipelines', () => {
         wrapper.vm.hasMadeRequest = false;
 
         return wrapper.vm.$nextTick().then(() => {
-          expect(wrapper.vm.shouldRenderTabs).toEqual(false);
+          expect(findNavigationTabs().exists()).toBe(false);
         });
       });
 
@@ -576,17 +658,17 @@ describe('Pipelines', () => {
         wrapper.vm.hasMadeRequest = true;
 
         return wrapper.vm.$nextTick().then(() => {
-          expect(wrapper.vm.shouldRenderTabs).toEqual(false);
+          expect(findNavigationTabs().exists()).toBe(false);
         });
       });
     });
 
-    describe('shouldRenderButtons', () => {
+    describe('displays buttons', () => {
       it('returns true when it has paths & has made the first request', () => {
         wrapper.vm.hasMadeRequest = true;
 
         return wrapper.vm.$nextTick().then(() => {
-          expect(wrapper.vm.shouldRenderButtons).toEqual(true);
+          expect(findNavigationControls().exists()).toBe(true);
         });
       });
 
@@ -594,77 +676,12 @@ describe('Pipelines', () => {
         wrapper.vm.hasMadeRequest = false;
 
         return wrapper.vm.$nextTick().then(() => {
-          expect(wrapper.vm.shouldRenderButtons).toEqual(false);
+          expect(findNavigationControls().exists()).toBe(false);
         });
       });
     });
   });
 
-  describe('updates results when a staged is clicked', () => {
-    beforeEach(() => {
-      const copyPipeline = { ...pipelineWithStages };
-      copyPipeline.id += 1;
-      mock
-        .onGet('twitter/flight/pipelines.json')
-        .reply(
-          200,
-          {
-            pipelines: [pipelineWithStages],
-            count: {
-              all: 1,
-              finished: 1,
-              pending: 0,
-              running: 0,
-            },
-          },
-          {
-            'POLL-INTERVAL': 100,
-          },
-        )
-        .onGet(pipelineWithStages.details.stages[0].dropdown_path)
-        .reply(200, stageReply);
-
-      createComponent();
-    });
-
-    describe('when a request is being made', () => {
-      it('stops polling, cancels the request, & restarts polling', () => {
-        const stopMock = jest.spyOn(wrapper.vm.poll, 'stop');
-        const restartMock = jest.spyOn(wrapper.vm.poll, 'restart');
-        const cancelMock = jest.spyOn(wrapper.vm.service.cancelationSource, 'cancel');
-        mock.onGet('twitter/flight/pipelines.json').reply(200, pipelines);
-
-        return waitForPromises()
-          .then(() => {
-            wrapper.vm.isMakingRequest = true;
-            wrapper.find('.js-builds-dropdown-button').trigger('click');
-          })
-          .then(() => {
-            expect(cancelMock).toHaveBeenCalled();
-            expect(stopMock).toHaveBeenCalled();
-            expect(restartMock).toHaveBeenCalled();
-          });
-      });
-    });
-
-    describe('when no request is being made', () => {
-      it('stops polling & restarts polling', () => {
-        const stopMock = jest.spyOn(wrapper.vm.poll, 'stop');
-        const restartMock = jest.spyOn(wrapper.vm.poll, 'restart');
-        mock.onGet('twitter/flight/pipelines.json').reply(200, pipelines);
-
-        return waitForPromises()
-          .then(() => {
-            wrapper.find('.js-builds-dropdown-button').trigger('click');
-            expect(stopMock).toHaveBeenCalled();
-          })
-          .then(() => {
-            expect(restartMock).toHaveBeenCalled();
-          });
-      });
-    });
-  });
-
   describe('Pipeline filters', () => {
     let updateContentMock;
 
diff --git a/spec/frontend/sidebar/lock/edit_form_buttons_spec.js b/spec/frontend/sidebar/lock/edit_form_buttons_spec.js
index de1da3456f8..913646c8f8d 100644
--- a/spec/frontend/sidebar/lock/edit_form_buttons_spec.js
+++ b/spec/frontend/sidebar/lock/edit_form_buttons_spec.js
@@ -1,5 +1,4 @@
-import { shallowMount } from '@vue/test-utils';
-import { GlLoadingIcon } from '@gitlab/ui';
+import { mount } from '@vue/test-utils';
 import EditFormButtons from '~/sidebar/components/lock/edit_form_buttons.vue';
 import eventHub from '~/sidebar/event_hub';
 import { deprecatedCreateFlash as flash } from '~/flash';
@@ -22,7 +21,6 @@ describe('EditFormButtons', () => {
   };
 
   const findLockToggle = () => wrapper.find('[data-testid="lock-toggle"]');
-  const findGlLoadingIcon = () => wrapper.find(GlLoadingIcon);
 
   const createComponent = ({ props = {}, data = {}, resolved = true }) => {
     store = issuableType === ISSUABLE_TYPE_ISSUE ? createStore() : createMrStore();
@@ -33,7 +31,7 @@ describe('EditFormButtons', () => {
       jest.spyOn(store, 'dispatch').mockRejectedValue();
     }
 
-    wrapper = shallowMount(EditFormButtons, {
+    wrapper = mount(EditFormButtons, {
       store,
       provide: {
         fullPath: '',
@@ -78,8 +76,8 @@ describe('EditFormButtons', () => {
         expect(findLockToggle().attributes('disabled')).toBe('disabled');
       });
 
-      it('displays the GlLoadingIcon', () => {
-        expect(findGlLoadingIcon().exists()).toBe(true);
+      it('sets loading on the toggle button', () => {
+        expect(findLockToggle().props('loading')).toBe(true);
       });
     });
 
@@ -121,7 +119,7 @@ describe('EditFormButtons', () => {
 
           it('resets loading', async () => {
             await wrapper.vm.$nextTick().then(() => {
-              expect(findGlLoadingIcon().exists()).toBe(false);
+              expect(findLockToggle().props('loading')).toBe(false);
             });
           });
 
@@ -156,7 +154,7 @@ describe('EditFormButtons', () => {
 
           it('resets loading', async () => {
             await wrapper.vm.$nextTick().then(() => {
-              expect(findGlLoadingIcon().exists()).toBe(false);
+              expect(findLockToggle().props('loading')).toBe(false);
             });
           });
 
diff --git a/spec/services/quick_actions/interpret_service_spec.rb b/spec/services/quick_actions/interpret_service_spec.rb
index 93eca2edb5e..f38df029b2e 100644
--- a/spec/services/quick_actions/interpret_service_spec.rb
+++ b/spec/services/quick_actions/interpret_service_spec.rb
@@ -834,6 +834,19 @@ RSpec.describe QuickActions::InterpretService do
       let(:issuable) { issue }
     end
 
+    context 'assigning to a group' do
+      let_it_be(:group) { create(:group, :public) }
+
+      before_all do
+        group.add_developer(create(:user))
+      end
+
+      it_behaves_like 'empty command', "Failed to assign a user because no user was found." do
+        let(:content) { "/assign #{group.to_reference}" }
+        let(:issuable) { issue }
+      end
+    end
+
     context 'unassign command' do
       let(:content) { '/unassign' }