Refactor some code59974-multidash

This commits refactors some test code, moving some
setup code from an `it` block, also this uses the
naming props for the available dashboards

8 files changed, 71 insertions, 58 deletions

diff --git a/app/assets/javascripts/monitoring/components/dashboard.vue b/app/assets/javascripts/monitoring/components/dashboard.vue
index ae3c214c99f..daba191f20b 100644
--- a/app/assets/javascripts/monitoring/components/dashboard.vue
+++ b/app/assets/javascripts/monitoring/components/dashboard.vue
@@ -147,11 +147,14 @@ export default {
       'metricsWithData',
       'useDashboardEndpoint',
       'allDashboards',
-      'multipleDashboards',
+      'multipleDashboardsEnabled',
     ]),
     groupsWithData() {
       return this.groups.filter(group => this.chartsWithData(group.metrics).length > 0);
     },
+    selectedDashboardText() {
+      return this.currentDashboard || (this.allDashboards[0] && this.allDashboards[0].display_name);
+    },
   },
   created() {
     this.setEndpoints({
@@ -250,15 +253,12 @@ export default {
         v-if="environmentsEndpoint"
         class="dropdowns d-flex align-items-center justify-content-between"
       >
-        <div v-if="multipleDashboards" class="d-flex align-items-center">
+        <div v-if="multipleDashboardsEnabled" class="d-flex align-items-center">
           <label class="mb-0">{{ __('Dashboard') }}</label>
           <gl-dropdown
             class="ml-2 mr-3 js-dashboards-dropdown"
             toggle-class="dropdown-menu-toggle"
-            :text="
-              currentDashboard ||
-                (allDashboards[0] && allDashboards[0].path) /* todo this is gross */
-            "
+            :text="selectedDashboardText"
           >
             <gl-dropdown-item
               v-for="dashboard in allDashboards"
@@ -267,7 +267,7 @@ export default {
               active-class="is-active"
               :href="`?dashboard=${dashboard.path}`"
             >
-              {{ dashboard.name || dashboard.path }}
+              {{ dashboard.display_name || dashboard.path }}
             </gl-dropdown-item>
           </gl-dropdown>
         </div>
diff --git a/app/assets/javascripts/monitoring/monitoring_bundle.js b/app/assets/javascripts/monitoring/monitoring_bundle.js
index cf7c4fd10a9..edbcf84b342 100644
--- a/app/assets/javascripts/monitoring/monitoring_bundle.js
+++ b/app/assets/javascripts/monitoring/monitoring_bundle.js
@@ -9,8 +9,8 @@ export default (props = {}) => {
 
   if (el && el.dataset) {
     store.dispatch('monitoringDashboard/setFeatureFlags', {
-      prometheusEndpoint: gon.features.environmentMetricsUsePrometheusEndpoint,
-      multipleDashboards: gon.features.environmentMetricsShowMultipleDashboards,
+      prometheusEndpointEnabled: gon.features.environmentMetricsUsePrometheusEndpoint,
+      multipleDashboardsEnabled: gon.features.environmentMetricsShowMultipleDashboards,
     });
 
     const [currentDashboard] = getParameterValues('dashboard');
diff --git a/app/assets/javascripts/monitoring/stores/actions.js b/app/assets/javascripts/monitoring/stores/actions.js
index 858b0d1b561..0fa2a5d6370 100644
--- a/app/assets/javascripts/monitoring/stores/actions.js
+++ b/app/assets/javascripts/monitoring/stores/actions.js
@@ -35,9 +35,12 @@ export const setEndpoints = ({ commit }, endpoints) => {
   commit(types.SET_ENDPOINTS, endpoints);
 };
 
-export const setFeatureFlags = ({ commit }, { prometheusEndpoint, multipleDashboards }) => {
-  commit(types.SET_DASHBOARD_ENABLED, prometheusEndpoint);
-  commit(types.SET_MULTIPLE_DASHBOARDS_ENABLED, multipleDashboards);
+export const setFeatureFlags = (
+  { commit },
+  { prometheusEndpointEnabled, multipleDashboardsEnabled },
+) => {
+  commit(types.SET_DASHBOARD_ENABLED, prometheusEndpointEnabled);
+  commit(types.SET_MULTIPLE_DASHBOARDS_ENABLED, multipleDashboardsEnabled);
 };
 
 export const requestMetricsDashboard = ({ commit }) => {
@@ -47,7 +50,9 @@ export const receiveMetricsDashboardSuccess = (
   { state, commit, dispatch },
   { response, params },
 ) => {
-  if (state.multipleDashboards) commit(types.SET_ALL_DASHBOARDS, response.all_dashboards);
+  if (state.multipleDashboardsEnabled) {
+    commit(types.SET_ALL_DASHBOARDS, response.all_dashboards);
+  }
   commit(types.RECEIVE_METRICS_DATA_SUCCESS, response.dashboard.panel_groups);
   dispatch('fetchPrometheusMetrics', params);
 };
@@ -99,14 +104,14 @@ export const fetchMetricsData = ({ state, dispatch }, params) => {
 
 export const fetchDashboard = ({ state, dispatch }, params) => {
   dispatch('requestMetricsDashboard');
-  const newParams = params;
 
   if (state.currentDashboard) {
-    newParams.dashboard = state.currentDashboard;
+    // eslint-disable-next-line no-param-reassign
+    params.dashboard = state.currentDashboard;
   }
 
   return axios
-    .get(state.dashboardEndpoint, { params: newParams })
+    .get(state.dashboardEndpoint, { params })
     .then(resp => resp.data)
     .then(response => {
       dispatch('receiveMetricsDashboardSuccess', { response, params });
diff --git a/app/assets/javascripts/monitoring/stores/mutations.js b/app/assets/javascripts/monitoring/stores/mutations.js
index ec1566834c8..a85a7723c1f 100644
--- a/app/assets/javascripts/monitoring/stores/mutations.js
+++ b/app/assets/javascripts/monitoring/stores/mutations.js
@@ -80,7 +80,7 @@ export default {
     state.useDashboardEndpoint = enabled;
   },
   [types.SET_MULTIPLE_DASHBOARDS_ENABLED](state, enabled) {
-    state.multipleDashboards = enabled;
+    state.multipleDashboardsEnabled = enabled;
   },
   [types.SET_GETTING_STARTED_EMPTY_STATE](state) {
     state.emptyState = 'gettingStarted';
diff --git a/app/assets/javascripts/monitoring/stores/state.js b/app/assets/javascripts/monitoring/stores/state.js
index 16810885460..de711d6ccae 100644
--- a/app/assets/javascripts/monitoring/stores/state.js
+++ b/app/assets/javascripts/monitoring/stores/state.js
@@ -8,7 +8,7 @@ export default () => ({
   deploymentsEndpoint: null,
   dashboardEndpoint: invalidUrl,
   useDashboardEndpoint: false,
-  multipleDashboards: false,
+  multipleDashboardsEnabled: false,
   emptyState: 'gettingStarted',
   showEmptyState: true,
   groups: [],
diff --git a/spec/javascripts/monitoring/dashboard_spec.js b/spec/javascripts/monitoring/dashboard_spec.js
index a74d7a914e2..637352ac347 100644
--- a/spec/javascripts/monitoring/dashboard_spec.js
+++ b/spec/javascripts/monitoring/dashboard_spec.js
@@ -332,45 +332,6 @@ describe('Dashboard', () => {
         done();
       });
     });
-
-    it('shows the dashboard dropdown', done => {
-      component = new DashboardComponent({
-        el: document.querySelector('.prometheus-graphs'),
-        propsData: {
-          ...propsData,
-          hasMetrics: true,
-          showPanels: false,
-        },
-        store,
-      });
-
-      component.$store.dispatch('monitoringDashboard/setFeatureFlags', {
-        prometheusEndpoint: false,
-        multipleDashboards: true,
-      });
-
-      component.$store.commit(
-        `monitoringDashboard/${types.RECEIVE_ENVIRONMENTS_DATA_SUCCESS}`,
-        environmentData,
-      );
-
-      component.$store.commit(
-        `monitoringDashboard/${types.RECEIVE_METRICS_DATA_SUCCESS}`,
-        singleGroupResponse,
-      );
-
-      component.$store.commit(
-        `monitoringDashboard/${types.SET_ALL_DASHBOARDS}`,
-        dashboardGitResponse,
-      );
-
-      setTimeout(() => {
-        const dashboardDropdown = component.$el.querySelector('.js-dashboards-dropdown');
-
-        expect(dashboardDropdown).not.toEqual(null);
-        done();
-      });
-    });
   });
 
   describe('when the window resizes', () => {
@@ -438,4 +399,49 @@ describe('Dashboard', () => {
       });
     });
   });
+
+  describe('Dashboard dropdown', () => {
+    beforeEach(() => {
+      mock.onGet(mockApiEndpoint).reply(200, metricsGroupsAPIResponse);
+
+      component = new DashboardComponent({
+        el: document.querySelector('.prometheus-graphs'),
+        propsData: {
+          ...propsData,
+          hasMetrics: true,
+          showPanels: false,
+        },
+        store,
+      });
+
+      component.$store.dispatch('monitoringDashboard/setFeatureFlags', {
+        prometheusEndpoint: false,
+        multipleDashboardsEnabled: true,
+      });
+
+      component.$store.commit(
+        `monitoringDashboard/${types.RECEIVE_ENVIRONMENTS_DATA_SUCCESS}`,
+        environmentData,
+      );
+
+      component.$store.commit(
+        `monitoringDashboard/${types.RECEIVE_METRICS_DATA_SUCCESS}`,
+        singleGroupResponse,
+      );
+
+      component.$store.commit(
+        `monitoringDashboard/${types.SET_ALL_DASHBOARDS}`,
+        dashboardGitResponse,
+      );
+    });
+
+    it('shows the dashboard dropdown', done => {
+      setTimeout(() => {
+        const dashboardDropdown = component.$el.querySelector('.js-dashboards-dropdown');
+
+        expect(dashboardDropdown).not.toEqual(null);
+        done();
+      });
+    });
+  });
 });
diff --git a/spec/javascripts/monitoring/mock_data.js b/spec/javascripts/monitoring/mock_data.js
index 7e0c542a001..7bbb215475a 100644
--- a/spec/javascripts/monitoring/mock_data.js
+++ b/spec/javascripts/monitoring/mock_data.js
@@ -926,10 +926,12 @@ export const metricsDashboardResponse = {
 export const dashboardGitResponse = [
   {
     path: 'config/prometheus/common_metrics.yml',
+    display_name: 'Common Metrics',
     default: true,
   },
   {
     path: '.gitlab/dashboards/super.yml',
+    display_name: 'Custom Dashboard 1',
     default: false,
   },
 ];
diff --git a/spec/javascripts/monitoring/store/actions_spec.js b/spec/javascripts/monitoring/store/actions_spec.js
index 897a745433b..677455275de 100644
--- a/spec/javascripts/monitoring/store/actions_spec.js
+++ b/spec/javascripts/monitoring/store/actions_spec.js
@@ -240,7 +240,7 @@ describe('Monitoring store actions', () => {
       const response = metricsDashboardResponse;
 
       response.all_dashboards = dashboardGitResponse;
-      state.multipleDashboards = true;
+      state.multipleDashboardsEnabled = true;
 
       receiveMetricsDashboardSuccess({ state, commit, dispatch }, { response, params });