Add latest changes from gitlab-org/gitlab@master

5 files changed, 102 insertions, 7 deletions

diff --git a/app/assets/javascripts/jobs/components/table/cells/actions_cell.vue b/app/assets/javascripts/jobs/components/table/cells/actions_cell.vue
index 6ef507126ec..51251c0cacc 100644
--- a/app/assets/javascripts/jobs/components/table/cells/actions_cell.vue
+++ b/app/assets/javascripts/jobs/components/table/cells/actions_cell.vue
@@ -18,6 +18,7 @@ import cancelJobMutation from '../graphql/mutations/job_cancel.mutation.graphql'
 import playJobMutation from '../graphql/mutations/job_play.mutation.graphql';
 import retryJobMutation from '../graphql/mutations/job_retry.mutation.graphql';
 import unscheduleJobMutation from '../graphql/mutations/job_unschedule.mutation.graphql';
+import { reportMessageToSentry } from '../../../utils';
 
 export default {
   ACTIONS_DOWNLOAD_ARTIFACTS,
@@ -34,6 +35,7 @@ export default {
   jobPlay: 'jobPlay',
   jobUnschedule: 'jobUnschedule',
   playJobModalId: 'play-job-modal',
+  name: 'JobActionsCell',
   components: {
     GlButton,
     GlButtonGroup,
@@ -99,15 +101,17 @@ export default {
           variables: { id: this.job.id },
         });
         if (errors.length > 0) {
-          this.reportFailure();
+          reportMessageToSentry(this.$options.name, errors.join(', '), {});
+          this.showToastMessage();
         } else {
           eventHub.$emit('jobActionPerformed');
         }
-      } catch {
-        this.reportFailure();
+      } catch (failure) {
+        reportMessageToSentry(this.$options.name, failure, {});
+        this.showToastMessage();
       }
     },
-    reportFailure() {
+    showToastMessage() {
       const toastProps = {
         text: this.$options.GENERIC_ERROR,
         variant: 'danger',
diff --git a/app/assets/javascripts/jobs/utils.js b/app/assets/javascripts/jobs/utils.js
index bb27658369f..a4e695518f1 100644
--- a/app/assets/javascripts/jobs/utils.js
+++ b/app/assets/javascripts/jobs/utils.js
@@ -19,3 +19,12 @@ export const reportToSentry = (component, failureType) => {
     Sentry.captureException(failureType);
   });
 };
+
+export const reportMessageToSentry = (component, message, context) => {
+  Sentry.withScope((scope) => {
+    // eslint-disable-next-line @gitlab/require-i18n-strings
+    scope.setContext('Vue data', context);
+    scope.setTag('component', component);
+    Sentry.captureMessage(message);
+  });
+};
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/extensions/actions.vue b/app/assets/javascripts/vue_merge_request_widget/components/extensions/actions.vue
new file mode 100644
index 00000000000..fb883af330e
--- /dev/null
+++ b/app/assets/javascripts/vue_merge_request_widget/components/extensions/actions.vue
@@ -0,0 +1,68 @@
+<script>
+import { GlButton, GlDropdown, GlDropdownItem } from '@gitlab/ui';
+import { sprintf, __ } from '~/locale';
+
+export default {
+  components: {
+    GlButton,
+    GlDropdown,
+    GlDropdownItem,
+  },
+  props: {
+    widget: {
+      type: String,
+      required: true,
+    },
+    tertiaryButtons: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+  },
+  computed: {
+    dropdownLabel() {
+      return sprintf(__('%{widget} options'), { widget: this.widget });
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <gl-dropdown
+      :text="dropdownLabel"
+      icon="ellipsis_v"
+      no-caret
+      category="tertiary"
+      right
+      lazy
+      text-sr-only
+      size="small"
+      class="gl-display-block gl-md-display-none!"
+    >
+      <gl-dropdown-item
+        v-for="(btn, index) in tertiaryButtons"
+        :key="index"
+        :href="btn.href"
+        :target="btn.target"
+      >
+        {{ btn.text }}
+      </gl-dropdown-item>
+    </gl-dropdown>
+    <template v-if="tertiaryButtons.length">
+      <gl-button
+        v-for="(btn, index) in tertiaryButtons"
+        :key="index"
+        :href="btn.href"
+        :target="btn.target"
+        :class="{ 'gl-mr-3': index > 1 }"
+        category="tertiary"
+        variant="confirm"
+        size="small"
+        class="gl-display-none gl-md-display-block"
+      >
+        {{ btn.text }}
+      </gl-button>
+    </template>
+  </div>
+</template>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/extensions/base.vue b/app/assets/javascripts/vue_merge_request_widget/components/extensions/base.vue
index 1347586c738..7ea24171aa8 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/extensions/base.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/extensions/base.vue
@@ -11,6 +11,7 @@ import { sprintf, s__ } from '~/locale';
 import SmartVirtualList from '~/vue_shared/components/smart_virtual_list.vue';
 import { EXTENSION_ICON_CLASS } from '../../constants';
 import StatusIcon from './status_icon.vue';
+import Actions from './actions.vue';
 
 export const LOADING_STATES = {
   collapsedLoading: 'collapsedLoading',
@@ -26,6 +27,7 @@ export default {
     GlBadge,
     SmartVirtualList,
     StatusIcon,
+    Actions,
   },
   directives: {
     SafeHtml: GlSafeHtmlDirective,
@@ -66,6 +68,9 @@ export default {
 
       return this.statusIcon(this.collapsedData);
     },
+    tertiaryActionsButtons() {
+      return this.tertiaryButtons ? this.tertiaryButtons() : undefined;
+    },
   },
   watch: {
     isCollapsed(newVal) {
@@ -119,13 +124,16 @@ export default {
         :is-loading="isLoadingSummary"
         :icon-name="statusIconName"
       />
-      <div class="media-body gl-display-flex gl-align-self-center gl-align-items-center">
-        <div class="code-text">
+      <div
+        class="media-body gl-display-flex gl-align-self-center gl-align-items-center gl-flex-direction-row!"
+      >
+        <div class="gl-flex-grow-1">
           <template v-if="isLoadingSummary">
             {{ __('Loading...') }}
           </template>
           <div v-else v-safe-html="summary(collapsedData)"></div>
         </div>
+        <actions :widget="$options.name" :tertiary-buttons="tertiaryActionsButtons" />
         <div
           class="gl-float-right gl-align-self-center gl-border-l-1 gl-border-l-solid gl-border-gray-100 gl-ml-3 gl-pl-3"
         >
@@ -138,6 +146,7 @@ export default {
             :icon="isCollapsed ? 'chevron-lg-down' : 'chevron-lg-up'"
             category="tertiary"
             data-testid="toggle-button"
+            size="small"
             @click="toggleCollapsed"
           />
         </div>
diff --git a/app/assets/javascripts/vue_merge_request_widget/extensions/issues.js b/app/assets/javascripts/vue_merge_request_widget/extensions/issues.js
index 3a07bd0c0fb..0b96b2844c2 100644
--- a/app/assets/javascripts/vue_merge_request_widget/extensions/issues.js
+++ b/app/assets/javascripts/vue_merge_request_widget/extensions/issues.js
@@ -9,7 +9,7 @@ export default {
   name: 'Issues',
   // Add an array of props
   // These then get mapped to values stored in the MR Widget store
-  props: ['targetProjectFullPath'],
+  props: ['targetProjectFullPath', 'conflictsDocsPath'],
   // Add any extra computed props in here
   computed: {
     // Small summary text to be displayed in the collapsed state
@@ -22,6 +22,11 @@ export default {
     statusIcon(count) {
       return EXTENSION_ICONS.warning;
     },
+    // Tertiary action buttons that will take the user elsewhere
+    // in the GitLab app
+    tertiaryButtons() {
+      return [{ text: 'Full report', href: this.conflictsDocsPath, target: '_blank' }];
+    },
   },
   methods: {
     // Fetches the collapsed data