Add latest changes from gitlab-org/gitlab@master

3 files changed, 99 insertions, 12 deletions

diff --git a/app/assets/javascripts/vue_merge_request_widget/components/widget/dynamic_content.vue b/app/assets/javascripts/vue_merge_request_widget/components/widget/dynamic_content.vue
index d1ade2886f4..4d66c75719b 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/widget/dynamic_content.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/widget/dynamic_content.vue
@@ -58,6 +58,7 @@ export default {
     :status-icon-name="statusIcon"
     :widget-name="widgetName"
     :header="data.header"
+    :help-popover="data.helpPopover"
   >
     <template #body>
       <div class="gl-display-flex gl-flex-direction-column">
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/widget/widget.vue b/app/assets/javascripts/vue_merge_request_widget/components/widget/widget.vue
index 7b0230ff438..cea7fb8260a 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/widget/widget.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/widget/widget.vue
@@ -1,9 +1,16 @@
 <script>
-import { GlButton, GlTooltipDirective, GlLoadingIcon } from '@gitlab/ui';
+import {
+  GlButton,
+  GlLink,
+  GlTooltipDirective,
+  GlLoadingIcon,
+  GlSafeHtmlDirective,
+} from '@gitlab/ui';
 import * as Sentry from '@sentry/browser';
 import { normalizeHeaders } from '~/lib/utils/common_utils';
 import { sprintf, __ } from '~/locale';
 import Poll from '~/lib/utils/poll';
+import HelpPopover from '~/vue_shared/components/help_popover.vue';
 import ActionButtons from '../action_buttons.vue';
 import { EXTENSION_ICONS } from '../../constants';
 import { createTelemetryHub } from '../extensions/telemetry';
@@ -19,13 +26,16 @@ export default {
   components: {
     ActionButtons,
     StatusIcon,
+    GlLink,
     GlButton,
     GlLoadingIcon,
     ContentRow,
     DynamicContent,
+    HelpPopover,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
+    SafeHtml: GlSafeHtmlDirective,
   },
   props: {
     /**
@@ -74,8 +84,8 @@ export default {
     },
     statusIconName: {
       type: String,
-      default: 'neutral',
       required: false,
+      default: 'neutral',
       validator: (value) => Object.keys(EXTENSION_ICONS).indexOf(value) > -1,
     },
     isCollapsible: {
@@ -98,6 +108,19 @@ export default {
       required: false,
       default: true,
     },
+    /**
+     * @typedef {Object} helpPopover
+     * @property {Object} options
+     * @property {String} options.title
+     * @property {Object} content
+     * @property {String} content.text
+     * @property {String} content.learnMorePath
+     */
+    helpPopover: {
+      type: Object,
+      required: false,
+      default: null,
+    },
   },
   data() {
     return {
@@ -209,6 +232,9 @@ export default {
     },
   },
   failedStatusIcon: EXTENSION_ICONS.failed,
+  i18n: {
+    learnMore: __('Learn more'),
+  },
 };
 </script>
 
@@ -229,12 +255,34 @@ export default {
           <span v-if="summaryError">{{ summaryError }}</span>
           <slot v-else name="summary">{{ isLoading ? loadingText : summary }}</slot>
         </div>
-        <action-buttons
-          v-if="actionButtons.length > 0"
-          :widget="widgetName"
-          :tertiary-buttons="actionButtons"
-          @clickedAction="onActionClick"
-        />
+        <div class="gl-display-flex">
+          <help-popover
+            v-if="helpPopover"
+            :options="helpPopover.options"
+            :class="{ 'gl-mr-3': actionButtons.length > 0 }"
+          >
+            <template v-if="helpPopover.content">
+              <p
+                v-if="helpPopover.content.text"
+                v-safe-html="helpPopover.content.text"
+                class="gl-mb-0"
+              ></p>
+              <gl-link
+                v-if="helpPopover.content.learnMorePath"
+                :href="helpPopover.content.learnMorePath"
+                target="_blank"
+                class="gl-font-sm"
+                >{{ $options.i18n.learnMore }}</gl-link
+              >
+            </template>
+          </help-popover>
+          <action-buttons
+            v-if="actionButtons.length > 0"
+            :widget="widgetName"
+            :tertiary-buttons="actionButtons"
+            @clickedAction="onActionClick"
+          />
+        </div>
         <div
           v-if="isCollapsible"
           class="gl-border-l-1 gl-border-l-solid gl-border-gray-100 gl-ml-3 gl-pl-3 gl-h-6"
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/widget/widget_content_row.vue b/app/assets/javascripts/vue_merge_request_widget/components/widget/widget_content_row.vue
index 81cd3ef3ae1..b0d7e8dc006 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/widget/widget_content_row.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/widget/widget_content_row.vue
@@ -1,5 +1,7 @@
 <script>
-import { GlSafeHtmlDirective } from '@gitlab/ui';
+import { GlSafeHtmlDirective, GlLink } from '@gitlab/ui';
+import { __ } from '~/locale';
+import HelpPopover from '~/vue_shared/components/help_popover.vue';
 import { EXTENSION_ICONS } from '../../constants';
 import { generateText } from '../extensions/utils';
 import StatusIcon from './status_icon.vue';
@@ -7,6 +9,8 @@ import StatusIcon from './status_icon.vue';
 export default {
   components: {
     StatusIcon,
+    HelpPopover,
+    GlLink,
   },
   directives: {
     SafeHtml: GlSafeHtmlDirective,
@@ -19,8 +23,8 @@ export default {
     },
     statusIconName: {
       type: String,
-      default: '',
       required: false,
+      default: '',
       validator: (value) => value === '' || Object.keys(EXTENSION_ICONS).includes(value),
     },
     widgetName: {
@@ -29,8 +33,21 @@ export default {
     },
     header: {
       type: [String, Array],
+      required: false,
       default: '',
+    },
+    /**
+     * @typedef {Object} helpPopover
+     * @property {Object} options
+     * @property {String} options.title
+     * @property {Object} content
+     * @property {String} content.text
+     * @property {String} content.learnMorePath
+     */
+    helpPopover: {
+      type: Object,
       required: false,
+      default: null,
     },
   },
   computed: {
@@ -40,6 +57,12 @@ export default {
     generatedSubheader() {
       return Array.isArray(this.header) && this.header[1] ? generateText(this.header[1]) : '';
     },
+    shouldShowHeaderActions() {
+      return Boolean(this.helpPopover);
+    },
+  },
+  i18n: {
+    learnMore: __('Learn more'),
   },
 };
 </script>
@@ -61,8 +84,23 @@ export default {
             ></span>
           </div>
         </slot>
-        <div v-if="$scopedSlots['header-actions']" class="gl-ml-auto">
-          <slot name="header-actions"></slot>
+        <div v-if="shouldShowHeaderActions" class="gl-ml-auto">
+          <help-popover :options="helpPopover.options">
+            <template v-if="helpPopover.content">
+              <p
+                v-if="helpPopover.content.text"
+                v-safe-html="helpPopover.content.text"
+                class="gl-mb-0"
+              ></p>
+              <gl-link
+                v-if="helpPopover.content.learnMorePath"
+                :href="helpPopover.content.learnMorePath"
+                target="_blank"
+                class="gl-font-sm"
+                >{{ $options.i18n.learnMore }}</gl-link
+              >
+            </template>
+          </help-popover>
         </div>
       </div>
       <div class="gl-display-flex gl-align-items-baseline gl-w-full">