Add latest changes from gitlab-org/gitlab@13-1-stable-ee

2 files changed, 90 insertions, 34 deletions

diff --git a/spec/frontend/operation_settings/components/external_dashboard_spec.js b/spec/frontend/operation_settings/components/metrics_settings_spec.js
index 19214d1d954..398b61ec693 100644
--- a/spec/frontend/operation_settings/components/external_dashboard_spec.js
+++ b/spec/frontend/operation_settings/components/metrics_settings_spec.js
@@ -1,7 +1,11 @@
 import { mount, shallowMount } from '@vue/test-utils';
-import { GlDeprecatedButton, GlLink, GlFormGroup, GlFormInput } from '@gitlab/ui';
+import { GlDeprecatedButton, GlLink, GlFormGroup, GlFormInput, GlFormSelect } from '@gitlab/ui';
 import { TEST_HOST } from 'helpers/test_constants';
-import ExternalDashboard from '~/operation_settings/components/external_dashboard.vue';
+import MetricsSettings from '~/operation_settings/components/metrics_settings.vue';
+
+import ExternalDashboard from '~/operation_settings/components/form_group/external_dashboard.vue';
+import DashboardTimezone from '~/operation_settings/components/form_group/dashboard_timezone.vue';
+import { timezones } from '~/monitoring/format_date';
 import store from '~/operation_settings/store';
 import axios from '~/lib/utils/axios_utils';
 import { refreshCurrentPage } from '~/lib/utils/url_utility';
@@ -12,18 +16,26 @@ jest.mock('~/flash');
 
 describe('operation settings external dashboard component', () => {
   let wrapper;
+
   const operationsSettingsEndpoint = `${TEST_HOST}/mock/ops/settings/endpoint`;
+  const helpPage = `${TEST_HOST}/help/metrics/page/path`;
   const externalDashboardUrl = `http://mock-external-domain.com/external/dashboard/url`;
-  const externalDashboardHelpPagePath = `${TEST_HOST}/help/page/path`;
+  const dashboardTimezoneSetting = timezones.LOCAL;
+
   const mountComponent = (shallow = true) => {
     const config = [
-      ExternalDashboard,
+      MetricsSettings,
       {
         store: store({
           operationsSettingsEndpoint,
+          helpPage,
           externalDashboardUrl,
-          externalDashboardHelpPagePath,
+          dashboardTimezoneSetting,
         }),
+        stubs: {
+          ExternalDashboard,
+          DashboardTimezone,
+        },
       },
     ];
     wrapper = shallow ? shallowMount(...config) : mount(...config);
@@ -44,7 +56,7 @@ describe('operation settings external dashboard component', () => {
 
   it('renders header text', () => {
     mountComponent();
-    expect(wrapper.find('.js-section-header').text()).toBe('External Dashboard');
+    expect(wrapper.find('.js-section-header').text()).toBe('Metrics Dashboard');
   });
 
   describe('expand/collapse button', () => {
@@ -64,53 +76,86 @@ describe('operation settings external dashboard component', () => {
     });
 
     it('renders descriptive text', () => {
-      expect(subHeader.text()).toContain(
-        'Add a button to the metrics dashboard linking directly to your existing external dashboards.',
-      );
+      expect(subHeader.text()).toContain('Manage Metrics Dashboard settings.');
     });
 
     it('renders help page link', () => {
       const link = subHeader.find(GlLink);
 
       expect(link.text()).toBe('Learn more');
-      expect(link.attributes().href).toBe(externalDashboardHelpPagePath);
+      expect(link.attributes().href).toBe(helpPage);
     });
   });
 
   describe('form', () => {
-    describe('input label', () => {
-      let formGroup;
-
-      beforeEach(() => {
-        mountComponent();
-        formGroup = wrapper.find(GlFormGroup);
+    describe('dashboard timezone', () => {
+      describe('field label', () => {
+        let formGroup;
+
+        beforeEach(() => {
+          mountComponent(false);
+          formGroup = wrapper.find(DashboardTimezone).find(GlFormGroup);
+        });
+
+        it('uses label text', () => {
+          expect(formGroup.find('label').text()).toBe('Dashboard timezone');
+        });
+
+        it('uses description text', () => {
+          const description = formGroup.find('small');
+          expect(description.text()).not.toBeFalsy();
+        });
       });
 
-      it('uses label text', () => {
-        expect(formGroup.attributes().label).toBe('Full dashboard URL');
-      });
+      describe('select field', () => {
+        let select;
 
-      it('uses description text', () => {
-        expect(formGroup.attributes().description).toBe(
-          'Enter the URL of the dashboard you want to link to',
-        );
+        beforeEach(() => {
+          mountComponent();
+          select = wrapper.find(DashboardTimezone).find(GlFormSelect);
+        });
+
+        it('defaults to externalDashboardUrl', () => {
+          expect(select.attributes('value')).toBe(dashboardTimezoneSetting);
+        });
       });
     });
 
-    describe('input field', () => {
-      let input;
+    describe('external dashboard', () => {
+      describe('input label', () => {
+        let formGroup;
 
-      beforeEach(() => {
-        mountComponent();
-        input = wrapper.find(GlFormInput);
-      });
+        beforeEach(() => {
+          mountComponent(false);
+          formGroup = wrapper.find(ExternalDashboard).find(GlFormGroup);
+        });
+
+        it('uses label text', () => {
+          expect(formGroup.find('label').text()).toBe('External dashboard URL');
+        });
 
-      it('defaults to externalDashboardUrl', () => {
-        expect(input.attributes().value).toBe(externalDashboardUrl);
+        it('uses description text', () => {
+          const description = formGroup.find('small');
+          expect(description.text()).not.toBeFalsy();
+        });
       });
 
-      it('uses a placeholder', () => {
-        expect(input.attributes().placeholder).toBe('https://my-org.gitlab.io/my-dashboards');
+      describe('input field', () => {
+        let input;
+
+        beforeEach(() => {
+          mountComponent();
+          input = wrapper.find(ExternalDashboard).find(GlFormInput);
+        });
+
+        it('defaults to externalDashboardUrl', () => {
+          expect(input.attributes().value).toBeTruthy();
+          expect(input.attributes().value).toBe(externalDashboardUrl);
+        });
+
+        it('uses a placeholder', () => {
+          expect(input.attributes().placeholder).toBe('https://my-org.gitlab.io/my-dashboards');
+        });
       });
     });
 
@@ -123,6 +168,7 @@ describe('operation settings external dashboard component', () => {
         {
           project: {
             metrics_setting_attributes: {
+              dashboard_timezone: dashboardTimezoneSetting,
               external_dashboard_url: externalDashboardUrl,
             },
           },
diff --git a/spec/frontend/operation_settings/store/mutations_spec.js b/spec/frontend/operation_settings/store/mutations_spec.js
index 1854142c89a..88eb66095ad 100644
--- a/spec/frontend/operation_settings/store/mutations_spec.js
+++ b/spec/frontend/operation_settings/store/mutations_spec.js
@@ -1,5 +1,6 @@
 import mutations from '~/operation_settings/store/mutations';
 import createState from '~/operation_settings/store/state';
+import { timezones } from '~/monitoring/format_date';
 
 describe('operation settings mutations', () => {
   let localState;
@@ -13,7 +14,16 @@ describe('operation settings mutations', () => {
       const mockUrl = 'mockUrl';
       mutations.SET_EXTERNAL_DASHBOARD_URL(localState, mockUrl);
 
-      expect(localState.externalDashboardUrl).toBe(mockUrl);
+      expect(localState.externalDashboard.url).toBe(mockUrl);
+    });
+  });
+
+  describe('SET_DASHBOARD_TIMEZONE', () => {
+    it('sets dashboardTimezoneSetting', () => {
+      mutations.SET_DASHBOARD_TIMEZONE(localState, timezones.LOCAL);
+
+      expect(localState.dashboardTimezone.selected).not.toBeUndefined();
+      expect(localState.dashboardTimezone.selected).toBe(timezones.LOCAL);
     });
   });
 });