Add latest changes from gitlab-org/gitlab@master

2 files changed, 104 insertions, 26 deletions

diff --git a/spec/frontend/monitoring/components/dashboards_dropdown_spec.js b/spec/frontend/monitoring/components/dashboards_dropdown_spec.js
index 0bcfabe6415..25b31a793f7 100644
--- a/spec/frontend/monitoring/components/dashboards_dropdown_spec.js
+++ b/spec/frontend/monitoring/components/dashboards_dropdown_spec.js
@@ -1,5 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
-import { GlDropdownItem, GlModal, GlLoadingIcon, GlAlert } from '@gitlab/ui';
+import { GlDropdownItem, GlModal, GlLoadingIcon, GlAlert, GlIcon } from '@gitlab/ui';
 import waitForPromises from 'helpers/wait_for_promises';
 
 import DashboardsDropdown from '~/monitoring/components/dashboards_dropdown.vue';
@@ -9,36 +9,45 @@ import { dashboardGitResponse } from '../mock_data';
 
 const defaultBranch = 'master';
 
-function createComponent(props, opts = {}) {
-  const storeOpts = {
-    methods: {
-      duplicateSystemDashboard: jest.fn(),
-    },
-    computed: {
-      allDashboards: () => dashboardGitResponse,
-    },
-  };
-
-  return shallowMount(DashboardsDropdown, {
-    propsData: {
-      ...props,
-      defaultBranch,
-    },
-    sync: false,
-    ...storeOpts,
-    ...opts,
-  });
-}
+const starredDashboards = dashboardGitResponse.filter(({ starred }) => starred);
+const notStarredDashboards = dashboardGitResponse.filter(({ starred }) => !starred);
 
 describe('DashboardsDropdown', () => {
   let wrapper;
+  let mockDashboards;
+
+  function createComponent(props, opts = {}) {
+    const storeOpts = {
+      methods: {
+        duplicateSystemDashboard: jest.fn(),
+      },
+      computed: {
+        allDashboards: () => mockDashboards,
+      },
+    };
+
+    return shallowMount(DashboardsDropdown, {
+      propsData: {
+        ...props,
+        defaultBranch,
+      },
+      sync: false,
+      ...storeOpts,
+      ...opts,
+    });
+  }
 
   const findItems = () => wrapper.findAll(GlDropdownItem);
   const findItemAt = i => wrapper.findAll(GlDropdownItem).at(i);
   const findSearchInput = () => wrapper.find({ ref: 'monitorDashboardsDropdownSearch' });
   const findNoItemsMsg = () => wrapper.find({ ref: 'monitorDashboardsDropdownMsg' });
+  const findStarredListDivider = () => wrapper.find({ ref: 'starredListDivider' });
   const setSearchTerm = searchTerm => wrapper.setData({ searchTerm });
 
+  beforeEach(() => {
+    mockDashboards = dashboardGitResponse;
+  });
+
   describe('when it receives dashboards data', () => {
     beforeEach(() => {
       wrapper = createComponent();
@@ -48,10 +57,14 @@ describe('DashboardsDropdown', () => {
       expect(findItems().length).toEqual(dashboardGitResponse.length);
     });
 
-    it('displays items with the dashboard display name', () => {
-      expect(findItemAt(0).text()).toBe(dashboardGitResponse[0].display_name);
-      expect(findItemAt(1).text()).toBe(dashboardGitResponse[1].display_name);
-      expect(findItemAt(2).text()).toBe(dashboardGitResponse[2].display_name);
+    it('displays items with the dashboard display name, with starred dashboards first', () => {
+      expect(findItemAt(0).text()).toBe(starredDashboards[0].display_name);
+      expect(findItemAt(1).text()).toBe(notStarredDashboards[0].display_name);
+      expect(findItemAt(2).text()).toBe(notStarredDashboards[1].display_name);
+    });
+
+    it('displays separator between starred and not starred dashboards', () => {
+      expect(findStarredListDivider().exists()).toBe(true);
     });
 
     it('displays a search input', () => {
@@ -81,6 +94,60 @@ describe('DashboardsDropdown', () => {
     });
   });
 
+  describe('when the dashboard is missing a display name', () => {
+    beforeEach(() => {
+      mockDashboards = dashboardGitResponse.map(d => ({ ...d, display_name: undefined }));
+      wrapper = createComponent();
+    });
+
+    it('displays items with the dashboard path, with starred dashboards first', () => {
+      expect(findItemAt(0).text()).toBe(starredDashboards[0].path);
+      expect(findItemAt(1).text()).toBe(notStarredDashboards[0].path);
+      expect(findItemAt(2).text()).toBe(notStarredDashboards[1].path);
+    });
+  });
+
+  describe('when it receives starred dashboards', () => {
+    beforeEach(() => {
+      mockDashboards = starredDashboards;
+      wrapper = createComponent();
+    });
+
+    it('displays an item for each dashboard', () => {
+      expect(findItems().length).toEqual(starredDashboards.length);
+    });
+
+    it('displays a star icon', () => {
+      const star = findItemAt(0).find(GlIcon);
+      expect(star.exists()).toBe(true);
+      expect(star.attributes('name')).toBe('star');
+    });
+
+    it('displays no separator between starred and not starred dashboards', () => {
+      expect(findStarredListDivider().exists()).toBe(false);
+    });
+  });
+
+  describe('when it receives only not-starred dashboards', () => {
+    beforeEach(() => {
+      mockDashboards = notStarredDashboards;
+      wrapper = createComponent();
+    });
+
+    it('displays an item for each dashboard', () => {
+      expect(findItems().length).toEqual(notStarredDashboards.length);
+    });
+
+    it('displays no star icon', () => {
+      const star = findItemAt(0).find(GlIcon);
+      expect(star.exists()).toBe(false);
+    });
+
+    it('displays no separator between starred and not starred dashboards', () => {
+      expect(findStarredListDivider().exists()).toBe(false);
+    });
+  });
+
   describe('when a system dashboard is selected', () => {
     let duplicateDashboardAction;
     let modalDirective;
@@ -260,7 +327,7 @@ describe('DashboardsDropdown', () => {
       expect(wrapper.emitted().selectDashboard).toBeTruthy();
     });
     it('emits a "selectDashboard" event with dashboard information', () => {
-      expect(wrapper.emitted().selectDashboard[0]).toEqual([dashboardGitResponse[1]]);
+      expect(wrapper.emitted().selectDashboard[0]).toEqual([dashboardGitResponse[0]]);
     });
   });
 });
diff --git a/spec/frontend/monitoring/mock_data.js b/spec/frontend/monitoring/mock_data.js
index 0db69ca7d8d..f846d5aaea5 100644
--- a/spec/frontend/monitoring/mock_data.js
+++ b/spec/frontend/monitoring/mock_data.js
@@ -34,6 +34,7 @@ const customDashboardsData = new Array(30).fill(null).map((_, idx) => ({
   system_dashboard: false,
   project_blob_path: `${mockProjectDir}/blob/master/dashboards/.gitlab/dashboards/dashboard_${idx}.yml`,
   path: `.gitlab/dashboards/dashboard_${idx}.yml`,
+  starred: false,
 }));
 
 export const mockDashboardsErrorResponse = {
@@ -323,6 +324,16 @@ export const dashboardGitResponse = [
     system_dashboard: true,
     project_blob_path: null,
     path: 'config/prometheus/common_metrics.yml',
+    starred: false,
+  },
+  {
+    default: false,
+    display_name: 'dashboard.yml',
+    can_edit: true,
+    system_dashboard: false,
+    project_blob_path: `${mockProjectDir}/-/blob/master/.gitlab/dashboards/dashboard.yml`,
+    path: '.gitlab/dashboards/dashboard.yml',
+    starred: true,
   },
   ...customDashboardsData,
 ];