Add latest changes from gitlab-org/gitlab@master

25 files changed, 598 insertions, 304 deletions

diff --git a/spec/frontend/clusters/components/__snapshots__/remove_cluster_confirmation_spec.js.snap b/spec/frontend/clusters/components/__snapshots__/remove_cluster_confirmation_spec.js.snap
index 6f28573c808..ee4ec4636ea 100644
--- a/spec/frontend/clusters/components/__snapshots__/remove_cluster_confirmation_spec.js.snap
+++ b/spec/frontend/clusters/components/__snapshots__/remove_cluster_confirmation_spec.js.snap
@@ -41,109 +41,119 @@ exports[`Remove cluster confirmation modal renders splitbutton with modal includ
       role="menu"
       tabindex="-1"
     >
-      <!---->
-       
-      <li
-        class="gl-new-dropdown-item"
-        role="presentation"
+      <div
+        class="gl-new-dropdown-inner"
       >
-        <button
-          class="dropdown-item"
-          role="menuitem"
-          type="button"
+        <!---->
+         
+        <div
+          class="gl-new-dropdown-contents"
         >
-          <svg
-            aria-hidden="true"
-            class="gl-icon s16 gl-new-dropdown-item-check-icon"
-            data-testid="mobile-issue-close-icon"
-          >
-            <use
-              href="#mobile-issue-close"
-            />
-          </svg>
-           
-          <!---->
-           
-          <!---->
-           
-          <div
-            class="gl-new-dropdown-item-text-wrapper"
+          <li
+            class="gl-new-dropdown-item"
+            role="presentation"
           >
-            <p
-              class="gl-new-dropdown-item-text-primary"
+            <button
+              class="dropdown-item"
+              role="menuitem"
+              type="button"
             >
-              <strong>
-                Remove integration and resources
-              </strong>
+              <svg
+                aria-hidden="true"
+                class="gl-icon s16 gl-new-dropdown-item-check-icon"
+                data-testid="mobile-issue-close-icon"
+              >
+                <use
+                  href="#mobile-issue-close"
+                />
+              </svg>
+               
+              <!---->
+               
+              <!---->
                
-              <div>
-                Deletes all GitLab resources attached to this cluster during removal
+              <div
+                class="gl-new-dropdown-item-text-wrapper"
+              >
+                <p
+                  class="gl-new-dropdown-item-text-primary"
+                >
+                  <strong>
+                    Remove integration and resources
+                  </strong>
+                   
+                  <div>
+                    Deletes all GitLab resources attached to this cluster during removal
+                  </div>
+                </p>
+                 
+                <!---->
               </div>
-            </p>
-             
-            <!---->
-          </div>
+               
+              <!---->
+            </button>
+          </li>
            
-          <!---->
-        </button>
-      </li>
-       
-      <li
-        class="gl-new-dropdown-divider"
-        role="presentation"
-      >
-        <hr
-          aria-orientation="horizontal"
-          class="dropdown-divider"
-          role="separator"
-        />
-      </li>
-      <li
-        class="gl-new-dropdown-item"
-        role="presentation"
-      >
-        <button
-          class="dropdown-item"
-          role="menuitem"
-          type="button"
-        >
-          <svg
-            aria-hidden="true"
-            class="gl-icon s16 gl-new-dropdown-item-check-icon gl-visibility-hidden"
-            data-testid="mobile-issue-close-icon"
+          <li
+            class="gl-new-dropdown-divider"
+            role="presentation"
           >
-            <use
-              href="#mobile-issue-close"
+            <hr
+              aria-orientation="horizontal"
+              class="dropdown-divider"
+              role="separator"
             />
-          </svg>
-           
-          <!---->
-           
-          <!---->
-           
-          <div
-            class="gl-new-dropdown-item-text-wrapper"
+          </li>
+          <li
+            class="gl-new-dropdown-item"
+            role="presentation"
           >
-            <p
-              class="gl-new-dropdown-item-text-primary"
+            <button
+              class="dropdown-item"
+              role="menuitem"
+              type="button"
             >
-              <strong>
-                Remove integration
-              </strong>
+              <svg
+                aria-hidden="true"
+                class="gl-icon s16 gl-new-dropdown-item-check-icon gl-visibility-hidden"
+                data-testid="mobile-issue-close-icon"
+              >
+                <use
+                  href="#mobile-issue-close"
+                />
+              </svg>
+               
+              <!---->
+               
+              <!---->
                
-              <div>
-                Removes cluster from project but keeps associated resources
+              <div
+                class="gl-new-dropdown-item-text-wrapper"
+              >
+                <p
+                  class="gl-new-dropdown-item-text-primary"
+                >
+                  <strong>
+                    Remove integration
+                  </strong>
+                   
+                  <div>
+                    Removes cluster from project but keeps associated resources
+                  </div>
+                </p>
+                 
+                <!---->
               </div>
-            </p>
-             
-            <!---->
-          </div>
+               
+              <!---->
+            </button>
+          </li>
            
           <!---->
-        </button>
-      </li>
-       
-      <!---->
+        </div>
+         
+        <!---->
+      </div>
        
     </ul>
   </div>
diff --git a/spec/frontend/design_management/components/upload/__snapshots__/design_version_dropdown_spec.js.snap b/spec/frontend/design_management/components/upload/__snapshots__/design_version_dropdown_spec.js.snap
index 8c6b446794f..63afc3f000d 100644
--- a/spec/frontend/design_management/components/upload/__snapshots__/design_version_dropdown_spec.js.snap
+++ b/spec/frontend/design_management/components/upload/__snapshots__/design_version_dropdown_spec.js.snap
@@ -4,6 +4,7 @@ exports[`Design management design version dropdown component renders design vers
 <gl-dropdown-stub
   category="primary"
   headertext=""
+  hideheaderborder="true"
   issueiid=""
   projectpath=""
   size="small"
@@ -44,6 +45,7 @@ exports[`Design management design version dropdown component renders design vers
 <gl-dropdown-stub
   category="primary"
   headertext=""
+  hideheaderborder="true"
   issueiid=""
   projectpath=""
   size="small"
diff --git a/spec/frontend/diffs/components/app_spec.js b/spec/frontend/diffs/components/app_spec.js
index 0d9d1ad1293..7fbeb33dd93 100644
--- a/spec/frontend/diffs/components/app_spec.js
+++ b/spec/frontend/diffs/components/app_spec.js
@@ -282,14 +282,10 @@ describe('diffs/components/app', () => {
     let moveSpy;
     let jumpSpy;
 
-    function setup(componentProps, featureFlags) {
-      createComponent(
-        componentProps,
-        ({ state }) => {
-          state.diffs.commit = { id: 'SHA123' };
-        },
-        { glFeatures: featureFlags },
-      );
+    function setup(componentProps) {
+      createComponent(componentProps, ({ state }) => {
+        state.diffs.commit = { id: 'SHA123' };
+      });
 
       moveSpy = jest.spyOn(wrapper.vm, 'moveToNeighboringCommit').mockImplementation(() => {});
       jumpSpy = jest.spyOn(wrapper.vm, 'jumpToFile').mockImplementation(() => {});
@@ -298,17 +294,17 @@ describe('diffs/components/app', () => {
 
     describe('visible app', () => {
       it.each`
-        key    | name                         | spy  | args                           | featureFlags
-        ${'['} | ${'jumpToFile'}              | ${0} | ${[-1]}                        | ${{}}
-        ${'k'} | ${'jumpToFile'}              | ${0} | ${[-1]}                        | ${{}}
-        ${']'} | ${'jumpToFile'}              | ${0} | ${[+1]}                        | ${{}}
-        ${'j'} | ${'jumpToFile'}              | ${0} | ${[+1]}                        | ${{}}
-        ${'x'} | ${'moveToNeighboringCommit'} | ${1} | ${[{ direction: 'previous' }]} | ${{}}
-        ${'c'} | ${'moveToNeighboringCommit'} | ${1} | ${[{ direction: 'next' }]}     | ${{}}
+        key    | name                         | spy  | args
+        ${'['} | ${'jumpToFile'}              | ${0} | ${[-1]}
+        ${'k'} | ${'jumpToFile'}              | ${0} | ${[-1]}
+        ${']'} | ${'jumpToFile'}              | ${0} | ${[+1]}
+        ${'j'} | ${'jumpToFile'}              | ${0} | ${[+1]}
+        ${'x'} | ${'moveToNeighboringCommit'} | ${1} | ${[{ direction: 'previous' }]}
+        ${'c'} | ${'moveToNeighboringCommit'} | ${1} | ${[{ direction: 'next' }]}
       `(
         'calls `$name()` with correct parameters whenever the "$key" key is pressed',
-        async ({ key, spy, args, featureFlags }) => {
-          setup({ shouldShow: true }, featureFlags);
+        async ({ key, spy, args }) => {
+          setup({ shouldShow: true });
 
           await nextTick();
           expect(spies[spy]).not.toHaveBeenCalled();
diff --git a/spec/frontend/diffs/components/commit_item_spec.js b/spec/frontend/diffs/components/commit_item_spec.js
index ad515c17e61..f588f65dafd 100644
--- a/spec/frontend/diffs/components/commit_item_spec.js
+++ b/spec/frontend/diffs/components/commit_item_spec.js
@@ -37,15 +37,12 @@ describe('diffs/components/commit_item', () => {
   const getPrevCommitNavElement = () =>
     getCommitNavButtonsElement().find('.btn-group > *:first-child');
 
-  const mountComponent = (propsData, featureFlags = {}) => {
+  const mountComponent = (propsData) => {
     wrapper = mount(Component, {
       propsData: {
         commit,
         ...propsData,
       },
-      provide: {
-        glFeatures: featureFlags,
-      },
       stubs: {
         CommitPipelineStatus: true,
       },
diff --git a/spec/frontend/diffs/components/diff_line_note_form_spec.js b/spec/frontend/diffs/components/diff_line_note_form_spec.js
index 42815e63ef7..faa68159c58 100644
--- a/spec/frontend/diffs/components/diff_line_note_form_spec.js
+++ b/spec/frontend/diffs/components/diff_line_note_form_spec.js
@@ -11,14 +11,16 @@ describe('DiffLineNoteForm', () => {
   let diffLines;
   const getDiffFileMock = () => ({ ...diffFileMockData });
 
-  beforeEach(() => {
+  const createComponent = (args = {}) => {
     diffFile = getDiffFileMock();
     diffLines = diffFile.highlighted_diff_lines;
     const store = createStore();
     store.state.notes.userData.id = 1;
     store.state.notes.noteableData = noteableDataMock;
 
-    wrapper = shallowMount(DiffLineNoteForm, {
+    store.replaceState({ ...store.state, ...args.state });
+
+    return shallowMount(DiffLineNoteForm, {
       store,
       propsData: {
         diffFileHash: diffFile.file_hash,
@@ -27,9 +29,13 @@ describe('DiffLineNoteForm', () => {
         noteTargetLine: diffLines[0],
       },
     });
-  });
+  };
 
   describe('methods', () => {
+    beforeEach(() => {
+      wrapper = createComponent();
+    });
+
     describe('handleCancelCommentForm', () => {
       it('should ask for confirmation when shouldConfirm and isDirty passed as truthy', () => {
         jest.spyOn(window, 'confirm').mockReturnValue(false);
@@ -114,14 +120,39 @@ describe('DiffLineNoteForm', () => {
   describe('mounted', () => {
     it('should init autosave', () => {
       const key = 'autosave/Note/Issue/98//DiffNote//1c497fbb3a46b78edf04cc2a2fa33f67e3ffbe2a_1_1';
+      wrapper = createComponent();
 
       expect(wrapper.vm.autosave).toBeDefined();
       expect(wrapper.vm.autosave.key).toEqual(key);
     });
+
+    it('should set selectedCommentPosition', () => {
+      wrapper = createComponent();
+      let startLineCode = wrapper.vm.commentLineStart.line_code;
+      let lineCode = wrapper.vm.line.line_code;
+
+      expect(startLineCode).toEqual(lineCode);
+      wrapper.destroy();
+
+      const state = {
+        notes: {
+          selectedCommentPosition: {
+            start: {
+              line_code: 'test',
+            },
+          },
+        },
+      };
+      wrapper = createComponent({ state });
+      startLineCode = wrapper.vm.commentLineStart.line_code;
+      lineCode = state.notes.selectedCommentPosition.start.line_code;
+      expect(startLineCode).toEqual(lineCode);
+    });
   });
 
   describe('template', () => {
     it('should have note form', () => {
+      wrapper = createComponent();
       expect(wrapper.find(NoteForm).exists()).toBe(true);
     });
   });
diff --git a/spec/frontend/diffs/components/diff_row_spec.js b/spec/frontend/diffs/components/diff_row_spec.js
index 0ec075c8ad8..f0d335b88e5 100644
--- a/spec/frontend/diffs/components/diff_row_spec.js
+++ b/spec/frontend/diffs/components/diff_row_spec.js
@@ -1,4 +1,5 @@
 import { shallowMount, createLocalVue } from '@vue/test-utils';
+import { getByTestId, fireEvent } from '@testing-library/dom';
 import Vuex from 'vuex';
 import diffsModule from '~/diffs/store/modules';
 import DiffRow from '~/diffs/components/diff_row.vue';
@@ -42,16 +43,16 @@ describe('DiffRow', () => {
       fileHash: 'abc',
       filePath: 'abc',
       line: {},
+      index: 0,
       ...props,
     };
-    return shallowMount(DiffRow, { propsData, localVue, store });
-  };
 
-  it('isHighlighted returns true if isCommented is true', () => {
-    const props = { isCommented: true };
-    const wrapper = createWrapper({ props });
-    expect(wrapper.vm.isHighlighted).toBe(true);
-  });
+    const provide = {
+      glFeatures: { dragCommentSelection: true },
+    };
+
+    return shallowMount(DiffRow, { propsData, localVue, store, provide });
+  };
 
   it('isHighlighted returns true given line.left', () => {
     const props = {
@@ -124,4 +125,36 @@ describe('DiffRow', () => {
     const lineNumber = testLines[0].right.new_line;
     expect(wrapper.find(`[data-linenumber="${lineNumber}"]`).exists()).toBe(true);
   });
+
+  describe('drag operations', () => {
+    let line;
+
+    beforeEach(() => {
+      line = { ...testLines[0] };
+    });
+
+    it.each`
+      side
+      ${'left'}
+      ${'right'}
+    `('emits `enterdragging` onDragEnter $side side', ({ side }) => {
+      const expectation = { ...line[side], index: 0 };
+      const wrapper = createWrapper({ props: { line } });
+      fireEvent.dragEnter(getByTestId(wrapper.element, `${side}-side`));
+
+      expect(wrapper.emitted().enterdragging).toBeTruthy();
+      expect(wrapper.emitted().enterdragging[0]).toEqual([expectation]);
+    });
+
+    it.each`
+      side
+      ${'left'}
+      ${'right'}
+    `('emits `stopdragging` onDrop $side side', ({ side }) => {
+      const wrapper = createWrapper({ props: { line } });
+      fireEvent.dragEnd(getByTestId(wrapper.element, `${side}-side`));
+
+      expect(wrapper.emitted().stopdragging).toBeTruthy();
+    });
+  });
 });
diff --git a/spec/frontend/diffs/components/diff_row_utils_spec.js b/spec/frontend/diffs/components/diff_row_utils_spec.js
index f397c3dc012..d70d6b609ac 100644
--- a/spec/frontend/diffs/components/diff_row_utils_spec.js
+++ b/spec/frontend/diffs/components/diff_row_utils_spec.js
@@ -126,14 +126,14 @@ describe('lineCode', () => {
 
 describe('classNameMapCell', () => {
   it.each`
-    line               | hll      | loggedIn | hovered  | expectation
-    ${undefined}       | ${true}  | ${true}  | ${true}  | ${[]}
-    ${{ type: 'new' }} | ${false} | ${false} | ${false} | ${['new', { hll: false, 'is-over': false, new_line: true, old_line: false }]}
-    ${{ type: 'new' }} | ${true}  | ${true}  | ${false} | ${['new', { hll: true, 'is-over': false, new_line: true, old_line: false }]}
-    ${{ type: 'new' }} | ${true}  | ${false} | ${true}  | ${['new', { hll: true, 'is-over': false, new_line: true, old_line: false }]}
-    ${{ type: 'new' }} | ${true}  | ${true}  | ${true}  | ${['new', { hll: true, 'is-over': true, new_line: true, old_line: false }]}
-  `('should return $expectation', ({ line, hll, loggedIn, hovered, expectation }) => {
-    const classes = utils.classNameMapCell(line, hll, loggedIn, hovered);
+    line               | hll      | isLoggedIn | isHover  | expectation
+    ${undefined}       | ${true}  | ${true}    | ${true}  | ${[]}
+    ${{ type: 'new' }} | ${false} | ${false}   | ${false} | ${['new', { hll: false, 'is-over': false, new_line: true, old_line: false }]}
+    ${{ type: 'new' }} | ${true}  | ${true}    | ${false} | ${['new', { hll: true, 'is-over': false, new_line: true, old_line: false }]}
+    ${{ type: 'new' }} | ${true}  | ${false}   | ${true}  | ${['new', { hll: true, 'is-over': false, new_line: true, old_line: false }]}
+    ${{ type: 'new' }} | ${true}  | ${true}    | ${true}  | ${['new', { hll: true, 'is-over': true, new_line: true, old_line: false }]}
+  `('should return $expectation', ({ line, hll, isLoggedIn, isHover, expectation }) => {
+    const classes = utils.classNameMapCell({ line, hll, isLoggedIn, isHover });
     expect(classes).toEqual(expectation);
   });
 });
diff --git a/spec/frontend/diffs/components/diff_view_spec.js b/spec/frontend/diffs/components/diff_view_spec.js
index 9d1242e4b77..3d36ebf14a3 100644
--- a/spec/frontend/diffs/components/diff_view_spec.js
+++ b/spec/frontend/diffs/components/diff_view_spec.js
@@ -1,19 +1,19 @@
-import { shallowMount, createLocalVue } from '@vue/test-utils';
+import Vue from 'vue';
+import { shallowMount } from '@vue/test-utils';
 import Vuex from 'vuex';
 import DiffView from '~/diffs/components/diff_view.vue';
-// import DraftNote from '~/batch_comments/components/draft_note.vue';
-// import DiffRow from '~/diffs/components/diff_row.vue';
-// import DiffCommentCell from '~/diffs/components/diff_comment_cell.vue';
-// import DiffExpansionCell from '~/diffs/components/diff_expansion_cell.vue';
 
 describe('DiffView', () => {
   const DiffExpansionCell = { template: `<div/>` };
   const DiffRow = { template: `<div/>` };
   const DiffCommentCell = { template: `<div/>` };
   const DraftNote = { template: `<div/>` };
+  const showCommentForm = jest.fn();
+  const setSelectedCommentPosition = jest.fn();
+  const getDiffRow = (wrapper) => wrapper.findComponent(DiffRow).vm;
+
   const createWrapper = (props) => {
-    const localVue = createLocalVue();
-    localVue.use(Vuex);
+    Vue.use(Vuex);
 
     const batchComments = {
       getters: {
@@ -26,8 +26,13 @@ describe('DiffView', () => {
       },
       namespaced: true,
     };
-    const diffs = { getters: { commitId: () => 'abc123' }, namespaced: true };
+    const diffs = {
+      actions: { showCommentForm },
+      getters: { commitId: () => 'abc123' },
+      namespaced: true,
+    };
     const notes = {
+      actions: { setSelectedCommentPosition },
       state: { selectedCommentPosition: null, selectedCommentPositionHover: null },
     };
 
@@ -41,7 +46,7 @@ describe('DiffView', () => {
       ...props,
     };
     const stubs = { DiffExpansionCell, DiffRow, DiffCommentCell, DraftNote };
-    return shallowMount(DiffView, { propsData, store, localVue, stubs });
+    return shallowMount(DiffView, { propsData, store, stubs });
   };
 
   it('renders a match line', () => {
@@ -74,4 +79,55 @@ describe('DiffView', () => {
     });
     expect(wrapper.find(DraftNote).exists()).toBe(true);
   });
+
+  describe('drag operations', () => {
+    it('sets `dragStart` onStartDragging', () => {
+      const wrapper = createWrapper({ diffLines: [{}] });
+
+      wrapper.findComponent(DiffRow).vm.$emit('startdragging', { test: true });
+      expect(wrapper.vm.dragStart).toEqual({ test: true });
+    });
+
+    it('does not call `setSelectedCommentPosition` on different chunks onDragOver', () => {
+      const wrapper = createWrapper({ diffLines: [{}] });
+      const diffRow = getDiffRow(wrapper);
+
+      diffRow.$emit('startdragging', { chunk: 0 });
+      diffRow.$emit('enterdragging', { chunk: 1 });
+
+      expect(setSelectedCommentPosition).not.toHaveBeenCalled();
+    });
+
+    it.each`
+      start | end  | expectation
+      ${1}  | ${2} | ${{ start: { index: 1 }, end: { index: 2 } }}
+      ${2}  | ${1} | ${{ start: { index: 1 }, end: { index: 2 } }}
+      ${1}  | ${1} | ${{ start: { index: 1 }, end: { index: 1 } }}
+    `(
+      'calls `setSelectedCommentPosition` with correct `updatedLineRange`',
+      ({ start, end, expectation }) => {
+        const wrapper = createWrapper({ diffLines: [{}] });
+        const diffRow = getDiffRow(wrapper);
+
+        diffRow.$emit('startdragging', { chunk: 1, index: start });
+        diffRow.$emit('enterdragging', { chunk: 1, index: end });
+
+        const arg = setSelectedCommentPosition.mock.calls[0][1];
+
+        expect(arg).toMatchObject(expectation);
+      },
+    );
+
+    it('sets `dragStart` to null onStopDragging', () => {
+      const wrapper = createWrapper({ diffLines: [{}] });
+      const diffRow = getDiffRow(wrapper);
+
+      diffRow.$emit('startdragging', { test: true });
+      expect(wrapper.vm.dragStart).toEqual({ test: true });
+
+      diffRow.$emit('stopdragging');
+      expect(wrapper.vm.dragStart).toBeNull();
+      expect(showCommentForm).toHaveBeenCalled();
+    });
+  });
 });
diff --git a/spec/frontend/diffs/store/utils_spec.js b/spec/frontend/diffs/store/utils_spec.js
index 9fef48ccf42..a19e5e91677 100644
--- a/spec/frontend/diffs/store/utils_spec.js
+++ b/spec/frontend/diffs/store/utils_spec.js
@@ -1159,7 +1159,7 @@ describe('DiffsStoreUtils', () => {
     it('converts inline diff lines to parallel diff lines', () => {
       const file = getDiffFileMock();
 
-      expect(utils.parallelizeDiffLines(file[INLINE_DIFF_LINES_KEY])).toEqual(
+      expect(utils.parallelizeDiffLines(file[INLINE_DIFF_LINES_KEY])).toMatchObject(
         file.parallel_diff_lines,
       );
     });
@@ -1178,16 +1178,17 @@ describe('DiffsStoreUtils', () => {
         {
           left: null,
           right: {
+            chunk: 0,
             type: 'new',
           },
         },
         {
-          left: { type: 'conflict_marker_our' },
-          right: { type: 'conflict_marker_their' },
+          left: { chunk: 0, type: 'conflict_marker_our' },
+          right: { chunk: 0, type: 'conflict_marker_their' },
         },
         {
-          left: { type: 'conflict_our' },
-          right: { type: 'conflict_their' },
+          left: { chunk: 0, type: 'conflict_our' },
+          right: { chunk: 0, type: 'conflict_their' },
         },
       ]);
     });
@@ -1196,9 +1197,9 @@ describe('DiffsStoreUtils', () => {
       const file = getDiffFileMock();
       const files = utils.parallelizeDiffLines(file.highlighted_diff_lines, true);
 
-      expect(files[5].left).toEqual(file.parallel_diff_lines[5].left);
+      expect(files[5].left).toMatchObject(file.parallel_diff_lines[5].left);
       expect(files[5].right).toBeNull();
-      expect(files[6].left).toEqual(file.parallel_diff_lines[5].right);
+      expect(files[6].left).toMatchObject(file.parallel_diff_lines[5].right);
       expect(files[6].right).toBeNull();
     });
   });
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 c3fd4a9bab2..82d7f691efd 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
@@ -50,6 +50,7 @@ exports[`Alert integration settings form default state should match the default
         category="primary"
         data-qa-selector="incident_templates_dropdown"
         headertext=""
+        hideheaderborder="true"
         id="alert-integration-settings-issue-template"
         size="medium"
         text="selecte_tmpl"
diff --git a/spec/frontend/jira_import/components/__snapshots__/jira_import_form_spec.js.snap b/spec/frontend/jira_import/components/__snapshots__/jira_import_form_spec.js.snap
index c40b7c90c72..bea27c8877d 100644
--- a/spec/frontend/jira_import/components/__snapshots__/jira_import_form_spec.js.snap
+++ b/spec/frontend/jira_import/components/__snapshots__/jira_import_form_spec.js.snap
@@ -114,49 +114,59 @@ exports[`JiraImportForm table body shows correct information in each cell 1`] =
             role="menu"
             tabindex="-1"
           >
-            <!---->
-             
             <div
-              class="gl-search-box-by-type"
+              class="gl-new-dropdown-inner"
             >
-              <svg
-                aria-hidden="true"
-                class="gl-search-box-by-type-search-icon gl-icon s16"
-                data-testid="search-icon"
-              >
-                <use
-                  href="#search"
-                />
-              </svg>
-               
-              <input
-                aria-label="Search"
-                class="gl-form-input gl-search-box-by-type-input form-control"
-                placeholder="Search"
-                type="text"
-              />
+              <!---->
                
               <div
-                class="gl-search-box-by-type-right-icons"
-              >
-                <!---->
-                 
-                <!---->
-              </div>
-            </div>
-              
-            <li
-              class="gl-new-dropdown-text text-secondary"
-              role="presentation"
-            >
-              <p
-                class="b-dropdown-text"
+                class="gl-new-dropdown-contents"
               >
-                
+                <div
+                  class="gl-search-box-by-type"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="gl-search-box-by-type-search-icon gl-icon s16"
+                    data-testid="search-icon"
+                  >
+                    <use
+                      href="#search"
+                    />
+                  </svg>
+                   
+                  <input
+                    aria-label="Search"
+                    class="gl-form-input gl-search-box-by-type-input form-control"
+                    placeholder="Search"
+                    type="text"
+                  />
+                   
+                  <div
+                    class="gl-search-box-by-type-right-icons"
+                  >
+                    <!---->
+                     
+                    <!---->
+                  </div>
+                </div>
+                  
+                <li
+                  class="gl-new-dropdown-text text-secondary"
+                  role="presentation"
+                >
+                  <p
+                    class="b-dropdown-text"
+                  >
+                    
             No matches found
           
-              </p>
-            </li>
+                  </p>
+                </li>
+              </div>
+               
+              <!---->
+            </div>
              
           </ul>
         </div>
@@ -229,49 +239,59 @@ exports[`JiraImportForm table body shows correct information in each cell 1`] =
             role="menu"
             tabindex="-1"
           >
-            <!---->
-             
             <div
-              class="gl-search-box-by-type"
+              class="gl-new-dropdown-inner"
             >
-              <svg
-                aria-hidden="true"
-                class="gl-search-box-by-type-search-icon gl-icon s16"
-                data-testid="search-icon"
-              >
-                <use
-                  href="#search"
-                />
-              </svg>
-               
-              <input
-                aria-label="Search"
-                class="gl-form-input gl-search-box-by-type-input form-control"
-                placeholder="Search"
-                type="text"
-              />
+              <!---->
                
               <div
-                class="gl-search-box-by-type-right-icons"
-              >
-                <!---->
-                 
-                <!---->
-              </div>
-            </div>
-              
-            <li
-              class="gl-new-dropdown-text text-secondary"
-              role="presentation"
-            >
-              <p
-                class="b-dropdown-text"
+                class="gl-new-dropdown-contents"
               >
-                
+                <div
+                  class="gl-search-box-by-type"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="gl-search-box-by-type-search-icon gl-icon s16"
+                    data-testid="search-icon"
+                  >
+                    <use
+                      href="#search"
+                    />
+                  </svg>
+                   
+                  <input
+                    aria-label="Search"
+                    class="gl-form-input gl-search-box-by-type-input form-control"
+                    placeholder="Search"
+                    type="text"
+                  />
+                   
+                  <div
+                    class="gl-search-box-by-type-right-icons"
+                  >
+                    <!---->
+                     
+                    <!---->
+                  </div>
+                </div>
+                  
+                <li
+                  class="gl-new-dropdown-text text-secondary"
+                  role="presentation"
+                >
+                  <p
+                    class="b-dropdown-text"
+                  >
+                    
             No matches found
           
-              </p>
-            </li>
+                  </p>
+                </li>
+              </div>
+               
+              <!---->
+            </div>
              
           </ul>
         </div>
diff --git a/spec/frontend/members/components/action_buttons/access_request_action_buttons_spec.js b/spec/frontend/members/components/action_buttons/access_request_action_buttons_spec.js
index 9a8434a1222..30166e2d5ae 100644
--- a/spec/frontend/members/components/action_buttons/access_request_action_buttons_spec.js
+++ b/spec/frontend/members/components/action_buttons/access_request_action_buttons_spec.js
@@ -49,7 +49,7 @@ describe('AccessRequestActionButtons', () => {
     describe('when member is the current user', () => {
       it('sets `message` prop correctly', () => {
         expect(findRemoveMemberButton().props('message')).toBe(
-          `Are you sure you want to withdraw your access request for "${member.source.name}"`,
+          `Are you sure you want to withdraw your access request for "${member.source.fullName}"`,
         );
       });
     });
@@ -64,7 +64,7 @@ describe('AccessRequestActionButtons', () => {
         });
 
         expect(findRemoveMemberButton().props('message')).toBe(
-          `Are you sure you want to deny ${member.user.name}'s request to join "${member.source.name}"`,
+          `Are you sure you want to deny ${member.user.name}'s request to join "${member.source.fullName}"`,
         );
       });
     });
diff --git a/spec/frontend/members/components/action_buttons/invite_action_buttons_spec.js b/spec/frontend/members/components/action_buttons/invite_action_buttons_spec.js
index 887b21dc1d0..fe63f9bfaa7 100644
--- a/spec/frontend/members/components/action_buttons/invite_action_buttons_spec.js
+++ b/spec/frontend/members/components/action_buttons/invite_action_buttons_spec.js
@@ -39,7 +39,7 @@ describe('InviteActionButtons', () => {
     it('sets props correctly', () => {
       expect(findRemoveMemberButton().props()).toEqual({
         memberId: member.id,
-        message: `Are you sure you want to revoke the invitation for ${member.invite.email} to join "${member.source.name}"`,
+        message: `Are you sure you want to revoke the invitation for ${member.invite.email} to join "${member.source.fullName}"`,
         title: 'Revoke invite',
         isAccessRequest: false,
         icon: 'remove',
diff --git a/spec/frontend/members/components/action_buttons/user_action_buttons_spec.js b/spec/frontend/members/components/action_buttons/user_action_buttons_spec.js
index b03e80a537d..f28e5040006 100644
--- a/spec/frontend/members/components/action_buttons/user_action_buttons_spec.js
+++ b/spec/frontend/members/components/action_buttons/user_action_buttons_spec.js
@@ -39,7 +39,7 @@ describe('UserActionButtons', () => {
     it('sets props correctly', () => {
       expect(findRemoveMemberButton().props()).toEqual({
         memberId: member.id,
-        message: `Are you sure you want to remove ${member.user.name} from "${member.source.name}"`,
+        message: `Are you sure you want to remove ${member.user.name} from "${member.source.fullName}"`,
         title: 'Remove member',
         isAccessRequest: false,
         icon: 'remove',
@@ -56,7 +56,7 @@ describe('UserActionButtons', () => {
         });
 
         expect(findRemoveMemberButton().props('message')).toBe(
-          `Are you sure you want to remove this orphaned member from "${orphanedMember.source.name}"`,
+          `Are you sure you want to remove this orphaned member from "${orphanedMember.source.fullName}"`,
         );
       });
     });
diff --git a/spec/frontend/members/components/modals/leave_modal_spec.js b/spec/frontend/members/components/modals/leave_modal_spec.js
index d7acf12212c..dca47d1f6af 100644
--- a/spec/frontend/members/components/modals/leave_modal_spec.js
+++ b/spec/frontend/members/components/modals/leave_modal_spec.js
@@ -60,11 +60,11 @@ describe('LeaveModal', () => {
   });
 
   it('displays modal title', () => {
-    expect(getByText(`Leave "${member.source.name}"`).exists()).toBe(true);
+    expect(getByText(`Leave "${member.source.fullName}"`).exists()).toBe(true);
   });
 
   it('displays modal body', () => {
-    expect(getByText(`Are you sure you want to leave "${member.source.name}"?`).exists()).toBe(
+    expect(getByText(`Are you sure you want to leave "${member.source.fullName}"?`).exists()).toBe(
       true,
     );
   });
diff --git a/spec/frontend/members/components/table/member_source_spec.js b/spec/frontend/members/components/table/member_source_spec.js
index 2580f36cd64..95547090aed 100644
--- a/spec/frontend/members/components/table/member_source_spec.js
+++ b/spec/frontend/members/components/table/member_source_spec.js
@@ -11,7 +11,7 @@ describe('MemberSource', () => {
       propsData: {
         memberSource: {
           id: 102,
-          name: 'Foo bar',
+          fullName: 'Foo bar',
           webUrl: 'https://gitlab.com/groups/foo-bar',
         },
         ...propsData,
diff --git a/spec/frontend/members/mock_data.js b/spec/frontend/members/mock_data.js
index 5674929716d..e668f2a1998 100644
--- a/spec/frontend/members/mock_data.js
+++ b/spec/frontend/members/mock_data.js
@@ -7,7 +7,7 @@ export const member = {
   accessLevel: { integerValue: 50, stringValue: 'Owner' },
   source: {
     id: 178,
-    name: 'Foo Bar',
+    fullName: 'Foo Bar',
     webUrl: 'https://gitlab.com/groups/foo-bar',
   },
   user: {
diff --git a/spec/frontend/monitoring/components/__snapshots__/dashboard_template_spec.js.snap b/spec/frontend/monitoring/components/__snapshots__/dashboard_template_spec.js.snap
index 17720aeb702..e873edaad3b 100644
--- a/spec/frontend/monitoring/components/__snapshots__/dashboard_template_spec.js.snap
+++ b/spec/frontend/monitoring/components/__snapshots__/dashboard_template_spec.js.snap
@@ -37,6 +37,7 @@ exports[`Dashboard template matches the default snapshot 1`] = `
         class="flex-grow-1"
         data-qa-selector="environments_dropdown"
         headertext=""
+        hideheaderborder="true"
         id="monitor-environments-dropdown"
         menu-class="monitor-environment-dropdown-menu"
         size="medium"
diff --git a/spec/frontend/notes/components/multiline_comment_form_spec.js b/spec/frontend/notes/components/multiline_comment_form_spec.js
new file mode 100644
index 00000000000..081fd6e10ef
--- /dev/null
+++ b/spec/frontend/notes/components/multiline_comment_form_spec.js
@@ -0,0 +1,89 @@
+import Vue from 'vue';
+import Vuex from 'vuex';
+import { mount } from '@vue/test-utils';
+import { GlFormSelect } from '@gitlab/ui';
+import MultilineCommentForm from '~/notes/components/multiline_comment_form.vue';
+import notesModule from '~/notes/stores/modules';
+
+describe('MultilineCommentForm', () => {
+  Vue.use(Vuex);
+  const setSelectedCommentPosition = jest.fn();
+  const testLine = {
+    line_code: 'test',
+    type: 'test',
+    old_line: 'test',
+    new_line: 'test',
+  };
+
+  const createWrapper = (props = {}, state) => {
+    setSelectedCommentPosition.mockReset();
+
+    const store = new Vuex.Store({
+      modules: { notes: notesModule() },
+      actions: { setSelectedCommentPosition },
+    });
+    if (state) store.replaceState({ ...store.state, ...state });
+
+    const propsData = {
+      line: { ...testLine },
+      commentLineOptions: [{ text: '1' }],
+      ...props,
+    };
+    return mount(MultilineCommentForm, { propsData, store });
+  };
+
+  describe('created', () => {
+    it('sets commentLineStart to line', () => {
+      const line = { ...testLine };
+      const wrapper = createWrapper({ line });
+
+      expect(wrapper.vm.commentLineStart).toEqual(line);
+      expect(setSelectedCommentPosition).toHaveBeenCalled();
+    });
+
+    it('sets commentLineStart to lineRange', () => {
+      const lineRange = {
+        start: { ...testLine },
+      };
+      const wrapper = createWrapper({ lineRange });
+
+      expect(wrapper.vm.commentLineStart).toEqual(lineRange.start);
+      expect(setSelectedCommentPosition).toHaveBeenCalled();
+    });
+
+    it('sets commentLineStart to selectedCommentPosition', () => {
+      const notes = {
+        selectedCommentPosition: {
+          start: { ...testLine },
+        },
+      };
+      const wrapper = createWrapper({}, { notes });
+
+      expect(wrapper.vm.commentLineStart).toEqual(wrapper.vm.selectedCommentPosition.start);
+      expect(setSelectedCommentPosition).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('destroyed', () => {
+    it('calls setSelectedCommentPosition', () => {
+      const wrapper = createWrapper();
+      wrapper.destroy();
+
+      // Once during created, once during destroyed
+      expect(setSelectedCommentPosition).toHaveBeenCalledTimes(2);
+    });
+  });
+
+  it('handles changing the start line', () => {
+    const line = { ...testLine };
+    const wrapper = createWrapper({ line });
+    const glSelect = wrapper.findComponent(GlFormSelect);
+
+    glSelect.vm.$emit('change', { ...testLine });
+
+    expect(wrapper.vm.commentLineStart).toEqual(line);
+    expect(wrapper.emitted('input')).toBeTruthy();
+    // Once during created, once during updateCommentLineStart
+    expect(setSelectedCommentPosition).toHaveBeenCalledTimes(2);
+  });
+});
diff --git a/spec/frontend/pages/projects/graphs/__snapshots__/code_coverage_spec.js.snap b/spec/frontend/pages/projects/graphs/__snapshots__/code_coverage_spec.js.snap
index 324c9788309..c4c48ea7517 100644
--- a/spec/frontend/pages/projects/graphs/__snapshots__/code_coverage_spec.js.snap
+++ b/spec/frontend/pages/projects/graphs/__snapshots__/code_coverage_spec.js.snap
@@ -12,6 +12,7 @@ exports[`Code Coverage when fetching data is successful matches the snapshot 1`]
     <gl-dropdown-stub
       category="primary"
       headertext=""
+      hideheaderborder="true"
       size="medium"
       text="rspec"
       variant="default"
diff --git a/spec/frontend/projects/pipelines/charts/components/app_legacy_spec.js b/spec/frontend/projects/pipelines/charts/components/app_legacy_spec.js
index 99d0e910485..23f37073a0f 100644
--- a/spec/frontend/projects/pipelines/charts/components/app_legacy_spec.js
+++ b/spec/frontend/projects/pipelines/charts/components/app_legacy_spec.js
@@ -1,8 +1,6 @@
 import { shallowMount } from '@vue/test-utils';
-import { GlColumnChart } from '@gitlab/ui/dist/charts';
 import Component from '~/projects/pipelines/charts/components/app_legacy.vue';
-import StatisticsList from '~/projects/pipelines/charts/components/statistics_list.vue';
-import CiCdAnalyticsAreaChart from '~/projects/pipelines/charts/components/ci_cd_analytics_area_chart.vue';
+import PipelineCharts from '~/projects/pipelines/charts/components/pipeline_charts.vue';
 import {
   counts,
   timesChartData,
@@ -38,41 +36,17 @@ describe('ProjectsPipelinesChartsApp', () => {
     wrapper = null;
   });
 
-  describe('overall statistics', () => {
-    it('displays the statistics list', () => {
-      const list = wrapper.find(StatisticsList);
-
-      expect(list.exists()).toBeTruthy();
-      expect(list.props('counts')).toBe(counts);
-    });
-
-    it('displays the commit duration chart', () => {
-      const chart = wrapper.find(GlColumnChart);
-
-      expect(chart.exists()).toBeTruthy();
-      expect(chart.props('yAxisTitle')).toBe('Minutes');
-      expect(chart.props('xAxisTitle')).toBe('Commit');
-      expect(chart.props('bars')).toBe(wrapper.vm.timesChartTransformedData);
-      expect(chart.props('option')).toBe(wrapper.vm.$options.timesChartOptions);
-    });
-  });
-
   describe('pipelines charts', () => {
-    it('displays 3 area charts', () => {
-      expect(wrapper.findAll(CiCdAnalyticsAreaChart).length).toBe(3);
-    });
-
-    describe('displays individual correctly', () => {
-      it('renders with the correct data', () => {
-        const charts = wrapper.findAll(CiCdAnalyticsAreaChart);
+    it('displays the pipeline charts', () => {
+      const chart = wrapper.find(PipelineCharts);
 
-        for (let i = 0; i < charts.length; i += 1) {
-          const chart = charts.at(i);
-
-          expect(chart.exists()).toBeTruthy();
-          expect(chart.props('chartData')).toBe(wrapper.vm.areaCharts[i].data);
-          expect(chart.text()).toBe(wrapper.vm.areaCharts[i].title);
-        }
+      expect(chart.exists()).toBe(true);
+      expect(chart.props()).toMatchObject({
+        counts,
+        lastWeek: lastWeekChartData,
+        lastMonth: lastMonthChartData,
+        lastYear: lastYearChartData,
+        timesChart: timesChartData,
       });
     });
   });
diff --git a/spec/frontend/projects/pipelines/charts/components/app_spec.js b/spec/frontend/projects/pipelines/charts/components/app_spec.js
index 1313a549f02..e1f84d7bf01 100644
--- a/spec/frontend/projects/pipelines/charts/components/app_spec.js
+++ b/spec/frontend/projects/pipelines/charts/components/app_spec.js
@@ -1,11 +1,10 @@
 import { merge } from 'lodash';
 import { createLocalVue, shallowMount } from '@vue/test-utils';
 import VueApollo from 'vue-apollo';
+import { GlTabs, GlTab } from '@gitlab/ui';
 import createMockApollo from 'jest/helpers/mock_apollo_helper';
-import { GlColumnChart } from '@gitlab/ui/dist/charts';
 import Component from '~/projects/pipelines/charts/components/app.vue';
-import StatisticsList from '~/projects/pipelines/charts/components/statistics_list.vue';
-import CiCdAnalyticsAreaChart from '~/projects/pipelines/charts/components/ci_cd_analytics_area_chart.vue';
+import PipelineCharts from '~/projects/pipelines/charts/components/pipeline_charts.vue';
 import getPipelineCountByStatus from '~/projects/pipelines/charts/graphql/queries/get_pipeline_count_by_status.query.graphql';
 import getProjectPipelineStatistics from '~/projects/pipelines/charts/graphql/queries/get_project_pipeline_statistics.query.graphql';
 import { mockPipelineCount, mockPipelineStatistics } from '../mock_data';
@@ -58,60 +57,62 @@ describe('ProjectsPipelinesChartsApp', () => {
     wrapper = null;
   });
 
-  describe('overall statistics', () => {
-    it('displays the statistics list', () => {
-      const list = wrapper.find(StatisticsList);
-
-      expect(list.exists()).toBe(true);
-      expect(list.props('counts')).toMatchObject({
-        failed: 1,
-        success: 23,
-        total: 34,
-        successRatio: 95.83333333333334,
-      });
-    });
-
-    it('displays the commit duration chart', () => {
-      const chart = wrapper.find(GlColumnChart);
-
-      expect(chart.exists()).toBe(true);
-      expect(chart.props('yAxisTitle')).toBe('Minutes');
-      expect(chart.props('xAxisTitle')).toBe('Commit');
-      expect(chart.props('bars')).toBe(wrapper.vm.timesChartTransformedData);
-      expect(chart.props('option')).toBe(wrapper.vm.$options.timesChartOptions);
-    });
-  });
-
   describe('pipelines charts', () => {
-    it('displays 3 area charts', () => {
-      expect(wrapper.findAll(CiCdAnalyticsAreaChart)).toHaveLength(3);
-    });
-
-    describe('displays individual correctly', () => {
-      it('renders with the correct data', () => {
-        const charts = wrapper.findAll(CiCdAnalyticsAreaChart);
+    it('displays the pipeline charts', () => {
+      const chart = wrapper.find(PipelineCharts);
+      const analytics = mockPipelineStatistics.data.project.pipelineAnalytics;
 
-        for (let i = 0; i < charts.length; i += 1) {
-          const chart = charts.at(i);
+      const {
+        totalPipelines: total,
+        successfulPipelines: success,
+        failedPipelines: failed,
+      } = mockPipelineCount.data.project;
 
-          expect(chart.exists()).toBe(true);
-          // TODO: Refactor this to use the mocked data instead of the vm data
-          // https://gitlab.com/gitlab-org/gitlab/-/issues/292085
-          expect(chart.props('chartData')).toBe(wrapper.vm.areaCharts[i].data);
-          expect(chart.text()).toBe(wrapper.vm.areaCharts[i].title);
-        }
+      expect(chart.exists()).toBe(true);
+      expect(chart.props()).toMatchObject({
+        counts: {
+          failed: failed.count,
+          success: success.count,
+          total: total.count,
+          successRatio: (success.count / (success.count + failed.count)) * 100,
+        },
+        lastWeek: {
+          labels: analytics.weekPipelinesLabels,
+          totals: analytics.weekPipelinesTotals,
+          success: analytics.weekPipelinesSuccessful,
+        },
+        lastMonth: {
+          labels: analytics.monthPipelinesLabels,
+          totals: analytics.monthPipelinesTotals,
+          success: analytics.monthPipelinesSuccessful,
+        },
+        lastYear: {
+          labels: analytics.yearPipelinesLabels,
+          totals: analytics.yearPipelinesTotals,
+          success: analytics.yearPipelinesSuccessful,
+        },
+        timesChart: {
+          labels: analytics.pipelineTimesLabels,
+          values: analytics.pipelineTimesValues,
+        },
       });
     });
   });
 
   const findDeploymentFrequencyCharts = () => wrapper.find(DeploymentFrequencyChartsStub);
+  const findGlTabs = () => wrapper.find(GlTabs);
+  const findAllGlTab = () => wrapper.findAll(GlTab);
+  const findGlTabAt = (i) => findAllGlTab().at(i);
 
   describe('when shouldRenderDeploymentFrequencyCharts is true', () => {
     beforeEach(() => {
       createComponent({ provide: { shouldRenderDeploymentFrequencyCharts: true } });
     });
 
-    it('renders the deployment frequency charts', () => {
+    it('renders the deployment frequency charts in a tab', () => {
+      expect(findGlTabs().exists()).toBe(true);
+      expect(findGlTabAt(0).attributes('title')).toBe('Pipelines');
+      expect(findGlTabAt(1).attributes('title')).toBe('Deployments');
       expect(findDeploymentFrequencyCharts().exists()).toBe(true);
     });
   });
@@ -121,7 +122,8 @@ describe('ProjectsPipelinesChartsApp', () => {
       createComponent({ provide: { shouldRenderDeploymentFrequencyCharts: false } });
     });
 
-    it('does not render the deployment frequency charts', () => {
+    it('does not render the deployment frequency charts in a tab', () => {
+      expect(findGlTabs().exists()).toBe(false);
       expect(findDeploymentFrequencyCharts().exists()).toBe(false);
     });
   });
diff --git a/spec/frontend/projects/pipelines/charts/components/pipeline_charts_spec.js b/spec/frontend/projects/pipelines/charts/components/pipeline_charts_spec.js
new file mode 100644
index 00000000000..598055d5828
--- /dev/null
+++ b/spec/frontend/projects/pipelines/charts/components/pipeline_charts_spec.js
@@ -0,0 +1,78 @@
+import { shallowMount } from '@vue/test-utils';
+import { GlColumnChart } from '@gitlab/ui/dist/charts';
+import StatisticsList from '~/projects/pipelines/charts/components/statistics_list.vue';
+import CiCdAnalyticsAreaChart from '~/projects/pipelines/charts/components/ci_cd_analytics_area_chart.vue';
+import PipelineCharts from '~/projects/pipelines/charts/components/pipeline_charts.vue';
+import {
+  counts,
+  timesChartData as timesChart,
+  areaChartData as lastWeek,
+  areaChartData as lastMonth,
+  lastYearChartData as lastYear,
+} from '../mock_data';
+
+describe('ProjectsPipelinesChartsApp', () => {
+  let wrapper;
+
+  beforeEach(() => {
+    wrapper = shallowMount(PipelineCharts, {
+      propsData: {
+        counts,
+        timesChart,
+        lastWeek,
+        lastMonth,
+        lastYear,
+      },
+      provide: {
+        projectPath: 'test/project',
+        shouldRenderDeploymentFrequencyCharts: true,
+      },
+      stubs: {
+        DeploymentFrequencyCharts: true,
+      },
+    });
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  describe('overall statistics', () => {
+    it('displays the statistics list', () => {
+      const list = wrapper.find(StatisticsList);
+
+      expect(list.exists()).toBe(true);
+      expect(list.props('counts')).toBe(counts);
+    });
+
+    it('displays the commit duration chart', () => {
+      const chart = wrapper.find(GlColumnChart);
+
+      expect(chart.exists()).toBeTruthy();
+      expect(chart.props('yAxisTitle')).toBe('Minutes');
+      expect(chart.props('xAxisTitle')).toBe('Commit');
+      expect(chart.props('bars')).toBe(wrapper.vm.timesChartTransformedData);
+      expect(chart.props('option')).toBe(wrapper.vm.$options.timesChartOptions);
+    });
+  });
+
+  describe('pipelines charts', () => {
+    it('displays 3 area charts', () => {
+      expect(wrapper.findAll(CiCdAnalyticsAreaChart)).toHaveLength(3);
+    });
+
+    describe('displays individual correctly', () => {
+      it('renders with the correct data', () => {
+        const charts = wrapper.findAll(CiCdAnalyticsAreaChart);
+        for (let i = 0; i < charts.length; i += 1) {
+          const chart = charts.at(i);
+
+          expect(chart.exists()).toBeTruthy();
+          expect(chart.props('chartData')).toBe(wrapper.vm.areaCharts[i].data);
+          expect(chart.text()).toBe(wrapper.vm.areaCharts[i].title);
+        }
+      });
+    });
+  });
+});
diff --git a/spec/frontend/vue_shared/components/__snapshots__/clone_dropdown_spec.js.snap b/spec/frontend/vue_shared/components/__snapshots__/clone_dropdown_spec.js.snap
index 63d38e7587a..1bf757ea312 100644
--- a/spec/frontend/vue_shared/components/__snapshots__/clone_dropdown_spec.js.snap
+++ b/spec/frontend/vue_shared/components/__snapshots__/clone_dropdown_spec.js.snap
@@ -4,6 +4,7 @@ exports[`Clone Dropdown Button rendering matches the snapshot 1`] = `
 <gl-dropdown-stub
   category="primary"
   headertext=""
+  hideheaderborder="true"
   right="true"
   size="medium"
   text="Clone"
diff --git a/spec/frontend/vue_shared/components/__snapshots__/split_button_spec.js.snap b/spec/frontend/vue_shared/components/__snapshots__/split_button_spec.js.snap
index dd88ba9a6fb..c4f351eb58d 100644
--- a/spec/frontend/vue_shared/components/__snapshots__/split_button_spec.js.snap
+++ b/spec/frontend/vue_shared/components/__snapshots__/split_button_spec.js.snap
@@ -4,6 +4,7 @@ exports[`SplitButton renders actionItems 1`] = `
 <gl-dropdown-stub
   category="primary"
   headertext=""
+  hideheaderborder="true"
   menu-class=""
   size="medium"
   split="true"