Merge branch '214768-add-metrics-button-is-missing-in-ce' into 'master'

Enable the Add metric button for CE users

See merge request gitlab-org/gitlab!29769

app/assets/javascripts/monitoring/components/dashboard.vue

@@ -18,6 +18,7 @@ import PanelType from 'ee_else_ce/monitoring/components/panel_type.vue';
 import { s__ } from '~/locale';
 import createFlash from '~/flash';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
+import CustomMetricsFormFields from '~/custom_metrics/components/custom_metrics_form_fields.vue';
 import { mergeUrlParams, redirectTo, updateHistory } from '~/lib/utils/url_utility';
 import invalidUrl from '~/lib/utils/invalid_url';
 import Icon from '~/vue_shared/components/icon.vue';
@@ -46,6 +47,7 @@ export default {
     GlDropdownDivider,
     GlSearchBoxByType,
     GlModal,
+    CustomMetricsFormFields,
 
     DateTimePicker,
     GraphGroup,
@@ -204,9 +206,6 @@ export default {
     };
   },
   computed: {
-    canAddMetrics() {
-      return this.customMetricsAvailable && this.customMetricsPath.length;
-    },
     ...mapState('monitoringDashboard', [
       'dashboard',
       'emptyState',
@@ -228,8 +227,7 @@ export default {
     },
     addingMetricsAvailable() {
       return (
-        IS_EE &&
-        this.canAddMetrics &&
+        this.customMetricsAvailable &&
         !this.showEmptyState &&
         this.firstDashboard === this.selectedDashboard
       );

changelogs/unreleased/214768-add-metrics-button-is-missing-in-ce.yml

+---
+title: Enable the Add metric button for CE users
+merge_request: 29769
+author:
+type: fixed

ee/app/assets/javascripts/monitoring/components/dashboard.vue

 <script>
-import CustomMetricsFormFields from '~/custom_metrics/components/custom_metrics_form_fields.vue';
 import CeDashboard from '~/monitoring/components/dashboard.vue';
 import AlertWidget from './alert_widget.vue';
 
 export default {
   components: {
     AlertWidget,
-    CustomMetricsFormFields,
   },
   extends: CeDashboard,
   data() {

ee/spec/frontend/monitoring/components/dashboard_spec.js

-import { shallowMount } from '@vue/test-utils';
-import MockAdapter from 'axios-mock-adapter';
-import { GlModal, GlDeprecatedButton } from '@gitlab/ui';
-import Dashboard from 'ee/monitoring/components/dashboard.vue';
-import { mockApiEndpoint, propsData } from 'jest/monitoring/mock_data';
-import { metricsDashboardResponse } from 'jest/monitoring/fixture_data';
-import { setupStoreWithData } from 'jest/monitoring/store_utils';
-import CustomMetricsFormFields from '~/custom_metrics/components/custom_metrics_form_fields.vue';
-import Tracking from '~/tracking';
-import { createStore } from '~/monitoring/stores';
-import axios from '~/lib/utils/axios_utils';
-
-describe('Dashboard', () => {
-  let mock;
-  let store;
-  let wrapper;
-
-  const findAddMetricButton = () => wrapper.vm.$refs.addMetricBtn;
-
-  const createComponent = (props = {}) => {
-    wrapper = shallowMount(Dashboard, {
-      propsData: { ...propsData, ...props },
-      stubs: {
-        GlDeprecatedButton,
-      },
-      store,
-    });
-  };
-
-  beforeEach(() => {
-    setFixtures(`
-      <div class="prometheus-graphs"></div>
-      <div class="layout-page"></div>
-    `);
-    window.gon = { ...window.gon, ee: true };
-    store = createStore();
-    mock = new MockAdapter(axios);
-    mock.onGet(mockApiEndpoint).reply(200, metricsDashboardResponse);
-  });
-
-  afterEach(() => {
-    mock.restore();
-  });
-
-  describe('add custom metrics', () => {
-    describe('when not available', () => {
-      beforeEach(() => {
-        createComponent({
-          hasMetrics: true,
-          customMetricsPath: '/endpoint',
-        });
-      });
-      it('does not render add button on the dashboard', () => {
-        expect(findAddMetricButton()).toBeUndefined();
-      });
-    });
-    describe('when available', () => {
-      let origPage;
-      beforeEach(done => {
-        jest.spyOn(Tracking, 'event').mockReturnValue();
-        createComponent({
-          hasMetrics: true,
-          customMetricsPath: '/endpoint',
-          customMetricsAvailable: true,
-        });
-        setupStoreWithData(wrapper.vm.$store);
-
-        origPage = document.body.dataset.page;
-        document.body.dataset.page = 'projects:environments:metrics';
-
-        wrapper.vm.$nextTick(done);
-      });
-      afterEach(() => {
-        document.body.dataset.page = origPage;
-      });
-
-      it('renders add button on the dashboard', () => {
-        expect(findAddMetricButton()).toBeDefined();
-      });
-
-      it('uses modal for custom metrics form', () => {
-        expect(wrapper.find(GlModal).exists()).toBe(true);
-        expect(wrapper.find(GlModal).attributes().modalid).toBe('add-metric');
-      });
-      it('adding new metric is tracked', done => {
-        const submitButton = wrapper.vm.$refs.submitCustomMetricsFormBtn;
-        wrapper.setData({
-          formIsValid: true,
-        });
-        wrapper.vm.$nextTick(() => {
-          submitButton.$el.click();
-          wrapper.vm.$nextTick(() => {
-            expect(Tracking.event).toHaveBeenCalledWith(
-              document.body.dataset.page,
-              'click_button',
-              {
-                label: 'add_new_metric',
-                property: 'modal',
-                value: undefined,
-              },
-            );
-            done();
-          });
-        });
-      });
-
-      it('renders custom metrics form fields', () => {
-        expect(wrapper.find(CustomMetricsFormFields).exists()).toBe(true);
-      });
-    });
-  });
-});

spec/frontend/monitoring/components/dashboard_spec.js

 import { shallowMount, mount } from '@vue/test-utils';
-import { GlDropdownItem, GlDeprecatedButton } from '@gitlab/ui';
+import Tracking from '~/tracking';
+import { GlModal, GlDropdownItem, GlDeprecatedButton } from '@gitlab/ui';
 import VueDraggable from 'vuedraggable';
 import MockAdapter from 'axios-mock-adapter';
 import axios from '~/lib/utils/axios_utils';
@@ -8,6 +9,7 @@ import { metricStates } from '~/monitoring/constants';
 import Dashboard from '~/monitoring/components/dashboard.vue';
 
 import DateTimePicker from '~/vue_shared/components/date_time_picker/date_time_picker.vue';
+import CustomMetricsFormFields from '~/custom_metrics/components/custom_metrics_form_fields.vue';
 import DashboardsDropdown from '~/monitoring/components/dashboards_dropdown.vue';
 import GroupEmptyState from '~/monitoring/components/group_empty_state.vue';
 import PanelType from 'ee_else_ce/monitoring/components/panel_type.vue';
@@ -546,4 +548,74 @@ describe('Dashboard', () => {
       });
     });
   });
+
+  describe('add custom metrics', () => {
+    const findAddMetricButton = () => wrapper.vm.$refs.addMetricBtn;
+    describe('when not available', () => {
+      beforeEach(() => {
+        createShallowWrapper({
+          hasMetrics: true,
+          customMetricsPath: '/endpoint',
+        });
+      });
+      it('does not render add button on the dashboard', () => {
+        expect(findAddMetricButton()).toBeUndefined();
+      });
+    });
+
+    describe('when available', () => {
+      let origPage;
+      beforeEach(done => {
+        jest.spyOn(Tracking, 'event').mockReturnValue();
+        createShallowWrapper({
+          hasMetrics: true,
+          customMetricsPath: '/endpoint',
+          customMetricsAvailable: true,
+        });
+        setupStoreWithData(wrapper.vm.$store);
+
+        origPage = document.body.dataset.page;
+        document.body.dataset.page = 'projects:environments:metrics';
+
+        wrapper.vm.$nextTick(done);
+      });
+      afterEach(() => {
+        document.body.dataset.page = origPage;
+      });
+
+      it('renders add button on the dashboard', () => {
+        expect(findAddMetricButton()).toBeDefined();
+      });
+
+      it('uses modal for custom metrics form', () => {
+        expect(wrapper.find(GlModal).exists()).toBe(true);
+        expect(wrapper.find(GlModal).attributes().modalid).toBe('add-metric');
+      });
+      it('adding new metric is tracked', done => {
+        const submitButton = wrapper.vm.$refs.submitCustomMetricsFormBtn;
+        wrapper.setData({
+          formIsValid: true,
+        });
+        wrapper.vm.$nextTick(() => {
+          submitButton.$el.click();
+          wrapper.vm.$nextTick(() => {
+            expect(Tracking.event).toHaveBeenCalledWith(
+              document.body.dataset.page,
+              'click_button',
+              {
+                label: 'add_new_metric',
+                property: 'modal',
+                value: undefined,
+              },
+            );
+            done();
+          });
+        });
+      });
+
+      it('renders custom metrics form fields', () => {
+        expect(wrapper.find(CustomMetricsFormFields).exists()).toBe(true);
+      });
+    });
+  });
 });