Remove external url from props in favor of store

As we want to allow users to switch between dashboard dynamically,
we should remove fixed props that a set from the HTML in favor of a
dynamic data that is fetched later.

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

@@ -48,11 +48,6 @@ export default {
     TrackEvent: TrackEventDirective,
   },
   props: {
-    externalDashboardUrl: {
-      type: String,
-      required: false,
-      default: '',
-    },
     hasMetrics: {
       type: Boolean,
       required: false,
@@ -410,8 +405,6 @@ export default {
       :custom-metrics-available="customMetricsAvailable"
       :custom-metrics-path="customMetricsPath"
       :validate-query-path="validateQueryPath"
-      :external-dashboard-url="externalDashboardUrl"
-      :has-metrics="hasMetrics"
       :is-rearranging-panels="isRearrangingPanels"
       :selected-time-range="selectedTimeRange"
       @dateTimePickerInvalid="onDateTimePickerInvalid"

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

@@ -85,16 +85,6 @@ export default {
       required: false,
       default: invalidUrl,
     },
-    externalDashboardUrl: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    hasMetrics: {
-      type: Boolean,
-      required: false,
-      default: true,
-    },
     isRearrangingPanels: {
       type: Boolean,
       required: true,
@@ -121,6 +111,7 @@ export default {
       'operationsSettingsPath',
       'currentDashboard',
       'addDashboardDocumentationPath',
+      'externalDashboardUrl',
     ]),
     ...mapGetters('monitoringDashboard', ['selectedDashboard', 'filteredEnvironments']),
     isOutOfTheBoxDashboard() {

app/assets/javascripts/monitoring/stores/state.js

@@ -77,6 +77,7 @@ export default () => ({
   currentEnvironmentName: null,
 
   // GitLab paths to other pages
+  externalDashboardUrl: '',
   projectPath: null,
   operationsSettingsPath: '',
   logsPath: invalidUrl,

app/assets/javascripts/monitoring/utils.js

@@ -30,6 +30,7 @@ export const stateAndPropsFromDataset = (dataset = {}) => {
     operationsSettingsPath,
     projectPath,
     logsPath,
+    externalDashboardUrl,
     currentEnvironmentName,
     customDashboardBasePath,
     addDashboardDocumentationPath,
@@ -53,6 +54,7 @@ export const stateAndPropsFromDataset = (dataset = {}) => {
       operationsSettingsPath,
       projectPath,
       logsPath,
+      externalDashboardUrl,
       currentEnvironmentName,
       customDashboardBasePath,
       addDashboardDocumentationPath,

spec/frontend/monitoring/components/dashboard_header_spec.js

 import { shallowMount } from '@vue/test-utils';
 import { createStore } from '~/monitoring/stores';
 import * as types from '~/monitoring/stores/mutation_types';
-import { GlDeprecatedDropdownItem, GlSearchBoxByType, GlLoadingIcon } from '@gitlab/ui';
+import { GlDeprecatedDropdownItem, GlSearchBoxByType, GlLoadingIcon, GlButton } from '@gitlab/ui';
 import DateTimePicker from '~/vue_shared/components/date_time_picker/date_time_picker.vue';
 import RefreshButton from '~/monitoring/components/refresh_button.vue';
 import DashboardHeader from '~/monitoring/components/dashboard_header.vue';
@@ -289,6 +289,23 @@ describe('Dashboard header', () => {
     });
   });
 
+  describe('external dashboard link', () => {
+    beforeEach(() => {
+      store.state.monitoringDashboard.externalDashboardUrl = '/mockUrl';
+      createShallowWrapper();
+
+      return wrapper.vm.$nextTick();
+    });
+
+    it('shows the link', () => {
+      const externalDashboardButton = wrapper.find('.js-external-dashboard-link');
+
+      expect(externalDashboardButton.exists()).toBe(true);
+      expect(externalDashboardButton.is(GlButton)).toBe(true);
+      expect(externalDashboardButton.text()).toContain('View full dashboard');
+    });
+  });
+
   describe('actions menu', () => {
     beforeEach(() => {
       store.state.monitoringDashboard.projectPath = '';

spec/frontend/monitoring/components/dashboard_spec.js

 import { shallowMount, mount } from '@vue/test-utils';
 import Tracking from '~/tracking';
 import { ESC_KEY, ESC_KEY_IE11 } from '~/lib/utils/keys';
-import { GlModal, GlButton } from '@gitlab/ui';
+import { GlModal } from '@gitlab/ui';
 import { objectToQuery } from '~/lib/utils/url_utility';
 import VueDraggable from 'vuedraggable';
 import MockAdapter from 'axios-mock-adapter';
@@ -883,27 +883,6 @@ describe('Dashboard', () => {
     });
   });
 
-  describe('external dashboard link', () => {
-    beforeEach(() => {
-      createMountedWrapper({
-        hasMetrics: true,
-        showPanels: false,
-        showTimeWindowDropdown: false,
-        externalDashboardUrl: '/mockUrl',
-      });
-
-      return wrapper.vm.$nextTick();
-    });
-
-    it('shows the link', () => {
-      const externalDashboardButton = wrapper.find('.js-external-dashboard-link');
-
-      expect(externalDashboardButton.exists()).toBe(true);
-      expect(externalDashboardButton.is(GlButton)).toBe(true);
-      expect(externalDashboardButton.text()).toContain('View full dashboard');
-    });
-  });
-
   describe('Clipboard text in panels', () => {
     const currentDashboard = dashboardGitResponse[1].path;
     const panelIndex = 1; // skip expanded panel