Add helper buttons and message to panel preview

As a UI refinenment of the panel preview, and to follow the
UI design more closely, one more column of information is added
along with buttons and links.

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

@@ -72,10 +72,6 @@ export default {
       type: String,
       required: true,
     },
-    addDashboardDocumentationPath: {
-      type: String,
-      required: true,
-    },
     settingsPath: {
       type: String,
       required: true,
@@ -409,7 +405,6 @@ export default {
       v-if="showHeader"
       ref="prometheusGraphsHeader"
       class="prometheus-graphs-header d-sm-flex flex-sm-wrap pt-2 pr-1 pb-0 pl-2 border-bottom bg-gray-light"
-      :add-dashboard-documentation-path="addDashboardDocumentationPath"
       :default-branch="defaultBranch"
       :rearrange-panels-available="rearrangePanelsAvailable"
       :custom-metrics-available="customMetricsAvailable"

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

@@ -107,10 +107,6 @@ export default {
       type: Object,
       required: true,
     },
-    addDashboardDocumentationPath: {
-      type: String,
-      required: true,
-    },
   },
   data() {
     return {
@@ -128,6 +124,7 @@ export default {
       'canAccessOperationsSettings',
       'operationsSettingsPath',
       'currentDashboard',
+      'addDashboardDocumentationPath',
     ]),
     ...mapGetters('monitoringDashboard', ['selectedDashboard', 'filteredEnvironments']),
     isOutOfTheBoxDashboard() {

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

 <script>
 import { mapActions, mapState } from 'vuex';
-import { GlCard, GlForm, GlFormGroup, GlFormTextarea, GlButton, GlAlert } from '@gitlab/ui';
+import {
+  GlCard,
+  GlForm,
+  GlFormGroup,
+  GlFormTextarea,
+  GlButton,
+  GlSprintf,
+  GlAlert,
+} from '@gitlab/ui';
 import DashboardPanel from './dashboard_panel.vue';
 
 const initialYml = `title:
@@ -18,6 +26,7 @@ export default {
     GlFormGroup,
     GlFormTextarea,
     GlButton,
+    GlSprintf,
     GlAlert,
     DashboardPanel,
   },
@@ -31,6 +40,8 @@ export default {
       'panelPreviewIsLoading',
       'panelPreviewError',
       'panelPreviewGraphData',
+      'projectPath',
+      'addDashboardDocumentationPath',
     ]),
   },
   methods: {
@@ -43,17 +54,15 @@ export default {
 </script>
 <template>
   <div>
-    <gl-card>
+    <div class="gl-display-flex gl-mx-n3">
+      <gl-card class="gl-flex-grow-1 gl-flex-basis-0 gl-mx-3">
         <template #header>
-        <h2 class="gl-font-size-h2 gl-my-3">{{ s__('Metrics|Define and preview panel') }}</h2>
+          <h2 class="gl-font-size-h2 gl-my-3">{{ s__('Metrics|1. Define and preview panel') }}</h2>
         </template>
         <template #default>
+          <p>{{ s__('Metrics|Define panel YAML below to preview panel.') }}</p>
           <gl-form @submit.prevent="onSubmit">
-          <gl-form-group
-            :label="s__('Metrics|Panel YAML')"
-            :description="s__('Metrics|Define panel YAML to preview panel.')"
-            label-for="panel-yml-input"
-          >
+            <gl-form-group :label="s__('Metrics|Panel YAML')" label-for="panel-yml-input">
               <gl-form-textarea
                 id="panel-yml-input"
                 v-model="yml"
@@ -83,6 +92,54 @@ export default {
         </template>
       </gl-card>
 
+      <gl-card
+        class="gl-flex-grow-1 gl-flex-basis-0 gl-mx-3"
+        body-class="gl-display-flex gl-flex-direction-column"
+      >
+        <template #header>
+          <h2 class="gl-font-size-h2 gl-my-3">
+            {{ s__('Metrics|2. Paste panel YAML into dashboard') }}
+          </h2>
+        </template>
+        <template #default>
+          <div
+            class="gl-flex-grow-1 gl-display-flex gl-flex-direction-column gl-justify-content-center"
+          >
+            <p>
+              {{ s__('Metrics|Copy and paste the panel YAML into your dashboard YAML file.') }}
+              <br />
+              <gl-sprintf
+                :message="
+                  s__(
+                    'Metrics|Dashboard files can be found in %{codeStart}.gitlab/dashboards%{codeEnd} at the root of this project.',
+                  )
+                "
+              >
+                <template #code="{content}">
+                  <code>{{ content }}</code>
+                </template>
+              </gl-sprintf>
+            </p>
+          </div>
+
+          <div class="gl-text-right">
+            <gl-button
+              ref="viewDocumentationBtn"
+              category="secondary"
+              variant="info"
+              target="_blank"
+              :href="addDashboardDocumentationPath"
+            >
+              {{ s__('Metrics|View documentation') }}
+            </gl-button>
+            <gl-button ref="openRepositoryBtn" variant="success" :href="projectPath">
+              {{ s__('Metrics|Open repository') }}
+            </gl-button>
+          </div>
+        </template>
+      </gl-card>
+    </div>
+
     <gl-alert v-if="panelPreviewError" variant="warning" :dismissible="false">
       {{ panelPreviewError }}
     </gl-alert>

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

@@ -79,6 +79,7 @@ export default () => ({
   projectPath: null,
   operationsSettingsPath: '',
   logsPath: invalidUrl,
+  addDashboardDocumentationPath: '',
 
   // static paths
   customDashboardBasePath: '',

app/assets/javascripts/monitoring/utils.js

@@ -31,6 +31,7 @@ export const stateAndPropsFromDataset = (dataset = {}) => {
     logsPath,
     currentEnvironmentName,
     customDashboardBasePath,
+    addDashboardDocumentationPath,
     ...dataProps
   } = dataset;
 
@@ -52,6 +53,7 @@ export const stateAndPropsFromDataset = (dataset = {}) => {
       logsPath,
       currentEnvironmentName,
       customDashboardBasePath,
+      addDashboardDocumentationPath,
     },
     dataProps,
   };

locale/gitlab.pot

@@ -15014,6 +15014,12 @@ msgstr ""
 msgid "MetricsSettings|User's local timezone"
 msgstr ""
 
+msgid "Metrics|1. Define and preview panel"
+msgstr ""
+
+msgid "Metrics|2. Paste panel YAML into dashboard"
+msgstr ""
+
 msgid "Metrics|Add metric"
 msgstr ""
 
@@ -15035,6 +15041,9 @@ msgstr ""
 msgid "Metrics|Copy YAML"
 msgstr ""
 
+msgid "Metrics|Copy and paste the panel YAML into your dashboard YAML file."
+msgstr ""
+
 msgid "Metrics|Create custom dashboard %{fileName}"
 msgstr ""
 
@@ -15053,10 +15062,10 @@ msgstr ""
 msgid "Metrics|Current"
 msgstr ""
 
-msgid "Metrics|Define and preview panel"
+msgid "Metrics|Dashboard files can be found in %{codeStart}.gitlab/dashboards%{codeEnd} at the root of this project."
 msgstr ""
 
-msgid "Metrics|Define panel YAML to preview panel."
+msgid "Metrics|Define panel YAML below to preview panel."
 msgstr ""
 
 msgid "Metrics|Delete metric"

spec/frontend/monitoring/components/dashboard_header_spec.js

@@ -16,6 +16,7 @@ import {
 import { redirectTo } from '~/lib/utils/url_utility';
 
 const mockProjectPath = 'https://path/to/project';
+const mockAddDashboardDocPath = '/doc/add-dashboard';
 
 jest.mock('~/lib/utils/url_utility', () => ({
   redirectTo: jest.fn(),
@@ -304,6 +305,7 @@ describe('Dashboard header', () => {
   describe('actions menu modals', () => {
     beforeEach(() => {
       store.state.monitoringDashboard.projectPath = mockProjectPath;
+      store.state.monitoringDashboard.addDashboardDocumentationPath = mockAddDashboardDocPath;
       setupAllDashboards(store);
 
       createShallowWrapper();
@@ -323,6 +325,9 @@ describe('Dashboard header', () => {
 
     it('"Create new dashboard" modal contains correct buttons', () => {
       expect(findCreateDashboardModal().props('projectPath')).toBe(mockProjectPath);
+      expect(findCreateDashboardModal().props('addDashboardDocumentationPath')).toBe(
+        mockAddDashboardDocPath,
+      );
     });
 
     it('"Duplicate Dashboard" opens up a modal', () => {

spec/frontend/monitoring/components/dashboard_panel_builder_spec.js

@@ -34,6 +34,8 @@ describe('dashboard invalid url parameters', () => {
   const findTxtArea = () => findForm().find(GlFormTextarea);
   const findSubmitBtn = () => findForm().find('[type="submit"]');
   const findClipboardCopyBtn = () => wrapper.find({ ref: 'clipboardCopyBtn' });
+  const findViewDocumentationBtn = () => wrapper.find({ ref: 'viewDocumentationBtn' });
+  const findOpenRepositoryBtn = () => wrapper.find({ ref: 'openRepositoryBtn' });
   const findPanel = () => wrapper.find(DashboardPanel);
 
   beforeEach(() => {
@@ -108,6 +110,26 @@ describe('dashboard invalid url parameters', () => {
     });
   });
 
+  describe('instructions card', () => {
+    const mockDocsPath = '/docs-path';
+    const mockProjectPath = '/project-path';
+
+    beforeEach(() => {
+      store.state.monitoringDashboard.addDashboardDocumentationPath = mockDocsPath;
+      store.state.monitoringDashboard.projectPath = mockProjectPath;
+
+      createComponent();
+    });
+
+    it('displays next actions for the user', () => {
+      expect(findViewDocumentationBtn().exists()).toBe(true);
+      expect(findViewDocumentationBtn().attributes('href')).toBe(mockDocsPath);
+
+      expect(findOpenRepositoryBtn().exists()).toBe(true);
+      expect(findOpenRepositoryBtn().attributes('href')).toBe(mockProjectPath);
+    });
+  });
+
   describe('when there is an error', () => {
     const mockError = 'an error ocurred!';
 

spec/frontend/monitoring/fixture_data.js

@@ -29,7 +29,6 @@ const datasetState = stateAndPropsFromDataset(
 // https://gitlab.com/gitlab-org/gitlab/-/issues/229256
 export const dashboardProps = {
   ...datasetState.dataProps,
-  addDashboardDocumentationPath: 'https://path/to/docs',
   alertsEndpoint: null,
 };
 

spec/frontend/monitoring/mock_data.js

@@ -611,7 +611,6 @@ export const storeVariables = [
 
 export const dashboardHeaderProps = {
   defaultBranch: 'master',
-  addDashboardDocumentationPath: 'https://path/to/docs',
   isRearrangingPanels: false,
   selectedTimeRange: {
     start: '2020-01-01T00:00:00.000Z',