Add button to star/unstar dashboards

Connectes the Vuex store action and the UI to allow users to star
and unstar their dashboards.

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

@@ -226,6 +226,7 @@ export default {
       'environmentsLoading',
       'expandedPanel',
       'promVariables',
+      'isUpdatingStarredValue',
     ]),
     ...mapGetters('monitoringDashboard', ['getMetricStates', 'filteredEnvironments']),
     firstDashboard() {
@@ -312,6 +313,7 @@ export default {
       'filterEnvironments',
       'setExpandedPanel',
       'clearExpandedPanel',
+      'toggleStarredValue',
     ]),
     updatePanels(key, panels) {
       this.setPanelGroupMetrics({
@@ -422,6 +424,8 @@ export default {
   },
   i18n: {
     goBackLabel: s__('Metrics|Go back (Esc)'),
+    starDashboard: s__('Metrics|Star dashboard'),
+    unstarDashboard: s__('Metrics|Unstar dashboard'),
   },
 };
 </script>
@@ -518,6 +522,32 @@ export default {
       <div class="flex-grow-1"></div>
 
       <div class="d-sm-flex">
+        <div v-if="selectedDashboard" class="mb-2 mr-2 d-flex">
+          <!--
+            wrapper for tooltip as button can be `disabled`
+            https://bootstrap-vue.org/docs/components/tooltip#disabled-elements
+          -->
+          <div
+            v-gl-tooltip
+            class="flex-grow-1"
+            :title="
+              selectedDashboard.starred
+                ? $options.i18n.unstarDashboard
+                : $options.i18n.starDashboard
+            "
+          >
+            <gl-deprecated-button
+              ref="toggleStarBtn"
+              class="w-100"
+              :disabled="isUpdatingStarredValue"
+              variant="default"
+              @click="toggleStarredValue()"
+            >
+              <gl-icon :name="selectedDashboard.starred ? 'star' : 'star-o'" />
+            </gl-deprecated-button>
+          </div>
+        </div>
+
         <div v-if="showRearrangePanelsBtn" class="mb-2 mr-2 d-flex">
           <gl-deprecated-button
             :pressed="isRearrangingPanels"

changelogs/unreleased/214581-star-dashboard-btn.yml

+---
+title: Allow users to star/unstar dashboards which will appear at the top of their
+  dashboards options
+merge_request: 31597
+author:
+type: added

locale/gitlab.pot

@@ -13474,6 +13474,9 @@ msgstr ""
 msgid "Metrics|Refresh dashboard"
 msgstr ""
 
+msgid "Metrics|Star dashboard"
+msgstr ""
+
 msgid "Metrics|There was an error creating the dashboard."
 msgstr ""
 
@@ -13510,6 +13513,9 @@ msgstr ""
 msgid "Metrics|Unit label"
 msgstr ""
 
+msgid "Metrics|Unstar dashboard"
+msgstr ""
+
 msgid "Metrics|Used as a title for the chart"
 msgstr ""
 

spec/frontend/monitoring/components/__snapshots__/dashboard_template_spec.js.snap

@@ -100,6 +100,26 @@ exports[`Dashboard template matches the default snapshot 1`] = `
     <div
       class="d-sm-flex"
     >
+      <div
+        class="mb-2 mr-2 d-flex"
+      >
+        <div
+          class="flex-grow-1"
+          title="Star dashboard"
+        >
+          <gl-deprecated-button-stub
+            class="w-100"
+            size="md"
+            variant="default"
+          >
+            <gl-icon-stub
+              name="star-o"
+              size="16"
+            />
+          </gl-deprecated-button-stub>
+        </div>
+      </div>
+       
       <!---->
        
       <!---->

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, GlDropdownItem, GlDeprecatedButton } from '@gitlab/ui';
+import { GlModal, GlDropdownItem, GlDeprecatedButton, GlIcon } from '@gitlab/ui';
 import { objectToQuery } from '~/lib/utils/url_utility';
 import VueDraggable from 'vuedraggable';
 import MockAdapter from 'axios-mock-adapter';
@@ -353,6 +353,83 @@ describe('Dashboard', () => {
     });
   });
 
+  describe('star dashboards', () => {
+    const findToggleStar = () => wrapper.find({ ref: 'toggleStarBtn' });
+    const findToggleStarIcon = () => findToggleStar().find(GlIcon);
+
+    beforeEach(() => {
+      createShallowWrapper();
+    });
+
+    it('toggle star button is shown', () => {
+      expect(findToggleStar().exists()).toBe(true);
+      expect(findToggleStar().props('disabled')).toBe(false);
+    });
+
+    it('toggle star button is disabled when starring is taking place', () => {
+      store.commit(`monitoringDashboard/${types.REQUEST_DASHBOARD_STARRING}`);
+
+      return wrapper.vm.$nextTick(() => {
+        expect(findToggleStar().exists()).toBe(true);
+        expect(findToggleStar().props('disabled')).toBe(true);
+      });
+    });
+
+    describe('when the dashboard list is loaded', () => {
+      // Tooltip element should wrap directly
+      const getToggleTooltip = () => findToggleStar().element.parentElement.getAttribute('title');
+
+      beforeEach(() => {
+        wrapper.vm.$store.commit(
+          `monitoringDashboard/${types.SET_ALL_DASHBOARDS}`,
+          dashboardGitResponse,
+        );
+        jest.spyOn(store, 'dispatch');
+      });
+
+      it('dispatches a toggle star action', () => {
+        findToggleStar().vm.$emit('click');
+
+        return wrapper.vm.$nextTick().then(() => {
+          expect(store.dispatch).toHaveBeenCalledWith(
+            'monitoringDashboard/toggleStarredValue',
+            undefined,
+          );
+        });
+      });
+
+      describe('when dashboard is not starred', () => {
+        beforeEach(() => {
+          wrapper.setProps({ currentDashboard: dashboardGitResponse[0].path });
+          return wrapper.vm.$nextTick();
+        });
+
+        it('toggle star button shows "Star dashboard"', () => {
+          expect(getToggleTooltip()).toBe('Star dashboard');
+        });
+
+        it('toggle star button shows  an unstarred state', () => {
+          expect(findToggleStarIcon().attributes('name')).toBe('star-o');
+        });
+      });
+
+      describe('when dashboard is starred', () => {
+        beforeEach(() => {
+          wrapper.setProps({ currentDashboard: dashboardGitResponse[1].path });
+          return wrapper.vm.$nextTick();
+        });
+
+        it('toggle star button shows "Star dashboard"', () => {
+          expect(getToggleTooltip()).toBe('Unstar dashboard');
+        });
+
+        it('toggle star button shows a starred state', () => {
+          expect(findToggleStarIcon().attributes('name')).toBe('star');
+        });
+      });
+    });
+  });
+
   it('hides the environments dropdown list when there is no environments', () => {
     createMountedWrapper({ hasMetrics: true });