Add latest changes from gitlab-org/gitlab@master

6 files changed, 56 insertions, 31 deletions

diff --git a/app/assets/javascripts/integrations/overrides/components/integration_overrides.vue b/app/assets/javascripts/integrations/overrides/components/integration_overrides.vue
index 707ac946b98..85018f133cb 100644
--- a/app/assets/javascripts/integrations/overrides/components/integration_overrides.vue
+++ b/app/assets/javascripts/integrations/overrides/components/integration_overrides.vue
@@ -1,8 +1,8 @@
 <script>
-import { GlLink, GlLoadingIcon, GlPagination, GlTable } from '@gitlab/ui';
+import { GlLink, GlLoadingIcon, GlPagination, GlTable, GlAlert } from '@gitlab/ui';
+import * as Sentry from '@sentry/browser';
 
 import { DEFAULT_PER_PAGE } from '~/api';
-import createFlash from '~/flash';
 import { fetchOverrides } from '~/integrations/overrides/api';
 import { parseIntPagination, normalizeHeaders } from '~/lib/utils/common_utils';
 import { truncateNamespace } from '~/lib/utils/text_utility';
@@ -16,6 +16,7 @@ export default {
     GlLoadingIcon,
     GlPagination,
     GlTable,
+    GlAlert,
     ProjectAvatar,
   },
   props: {
@@ -36,6 +37,7 @@ export default {
       overrides: [],
       page: 1,
       totalItems: 0,
+      errorMessage: null,
     };
   },
   computed: {
@@ -49,6 +51,7 @@ export default {
   methods: {
     loadOverrides(page = this.page) {
       this.isLoading = true;
+      this.errorMessage = null;
 
       fetchOverrides(this.overridesPath, {
         page,
@@ -61,11 +64,9 @@ export default {
           this.overrides = data;
         })
         .catch((error) => {
-          createFlash({
-            message: this.$options.i18n.defaultErrorMessage,
-            error,
-            captureError: true,
-          });
+          this.errorMessage = this.$options.i18n.defaultErrorMessage;
+
+          Sentry.captureException(error);
         })
         .finally(() => {
           this.isLoading = false;
@@ -85,7 +86,11 @@ export default {
 
 <template>
   <div>
+    <gl-alert v-if="errorMessage" variant="danger" :dismissible="false">
+      {{ errorMessage }}
+    </gl-alert>
     <gl-table
+      v-else
       :items="overrides"
       :fields="$options.fields"
       :busy="isLoading"
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 bd531f0cc84..24f1c9c5bd0 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
@@ -1,5 +1,5 @@
 <script>
-import { GlButton, GlLoadingIcon, GlIcon, GlLink, GlBadge, GlSafeHtmlDirective } from '@gitlab/ui';
+import { GlButton, GlLoadingIcon, GlLink, GlBadge, GlSafeHtmlDirective } from '@gitlab/ui';
 import SmartVirtualList from '~/vue_shared/components/smart_virtual_list.vue';
 import { EXTENSION_ICON_CLASS } from '../../constants';
 import StatusIcon from './status_icon.vue';
@@ -14,7 +14,6 @@ export default {
   components: {
     GlButton,
     GlLoadingIcon,
-    GlIcon,
     GlLink,
     GlBadge,
     SmartVirtualList,
@@ -139,9 +138,7 @@ export default {
         class="report-block-container"
       >
         <li v-for="data in fullData" :key="data.id" class="d-flex align-items-center">
-          <div v-if="data.icon" :class="data.icon.class" class="d-flex">
-            <gl-icon :name="data.icon.name" :size="24" />
-          </div>
+          <status-icon v-if="data.icon" :icon-name="data.icon.name" :size="12" />
           <div
             class="gl-mt-2 gl-mb-2 align-content-around align-items-start flex-wrap align-self-center d-flex"
           >
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/extensions/status_icon.vue b/app/assets/javascripts/vue_merge_request_widget/components/extensions/status_icon.vue
index 5b41decc190..5e3f7a847c1 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/extensions/status_icon.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/extensions/status_icon.vue
@@ -1,7 +1,7 @@
 <script>
 import { GlLoadingIcon, GlIcon } from '@gitlab/ui';
 import { capitalizeFirstCharacter } from '~/lib/utils/text_utility';
-import { EXTENSION_ICON_CLASS, EXTENSION_ICONS } from '../../constants';
+import { EXTENSION_ICON_CLASS, EXTENSION_ICON_NAMES } from '../../constants';
 
 export default {
   components: {
@@ -11,41 +11,48 @@ export default {
   props: {
     name: {
       type: String,
-      required: true,
+      required: false,
+      default: '',
     },
     isLoading: {
       type: Boolean,
-      required: true,
+      required: false,
+      default: false,
     },
     iconName: {
       type: String,
       required: false,
       default: null,
     },
+    size: {
+      type: Number,
+      required: false,
+      default: 16,
+    },
   },
   computed: {
     iconAriaLabel() {
-      const statusLabel = Object.keys(EXTENSION_ICONS).find(
-        (k) => EXTENSION_ICONS[k] === this.iconName,
-      );
-
-      return `${capitalizeFirstCharacter(statusLabel)} ${this.name}`;
+      return `${capitalizeFirstCharacter(this.iconName)} ${this.name}`;
     },
   },
+  EXTENSION_ICON_NAMES,
   EXTENSION_ICON_CLASS,
 };
 </script>
 
 <template>
   <div
-    :class="[$options.EXTENSION_ICON_CLASS[iconName], { 'mr-widget-extension-icon': !isLoading }]"
+    :class="[
+      $options.EXTENSION_ICON_CLASS[iconName],
+      { 'mr-widget-extension-icon': !isLoading && size === 16 },
+    ]"
     class="align-self-center gl-rounded-full gl-mr-3 gl-relative gl-p-2"
   >
     <gl-loading-icon v-if="isLoading" size="md" inline class="gl-display-block" />
     <gl-icon
       v-else
-      :name="iconName"
-      :size="16"
+      :name="$options.EXTENSION_ICON_NAMES[iconName]"
+      :size="size"
       :aria-label="iconAriaLabel"
       class="gl-display-block"
     />
diff --git a/app/assets/javascripts/vue_merge_request_widget/constants.js b/app/assets/javascripts/vue_merge_request_widget/constants.js
index c02783be385..284c18b3fbd 100644
--- a/app/assets/javascripts/vue_merge_request_widget/constants.js
+++ b/app/assets/javascripts/vue_merge_request_widget/constants.js
@@ -93,17 +93,30 @@ export const stateToComponentMap = {
 };
 
 export const EXTENSION_ICONS = {
+  failed: 'failed',
+  warning: 'warning',
+  success: 'success',
+  neutral: 'neutral',
+  error: 'error',
+  notice: 'notice',
+};
+
+export const EXTENSION_ICON_NAMES = {
   failed: 'status-failed',
   warning: 'status-alert',
   success: 'status-success',
   neutral: 'status-neutral',
+  error: 'status-alert',
+  notice: 'status-alert',
 };
 
 export const EXTENSION_ICON_CLASS = {
-  [EXTENSION_ICONS.failed]: 'gl-text-red-500',
-  [EXTENSION_ICONS.warning]: 'gl-text-orange-500',
-  [EXTENSION_ICONS.success]: 'gl-text-green-500',
-  [EXTENSION_ICONS.neutral]: 'gl-text-gray-400',
+  failed: 'gl-text-red-500',
+  warning: 'gl-text-orange-500',
+  success: 'gl-text-green-500',
+  neutral: 'gl-text-gray-400',
+  error: 'gl-text-red-500',
+  notice: 'gl-text-gray-500',
 };
 
 export { STATE_MACHINE };
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 5eda5c0778f..3a07bd0c0fb 100644
--- a/app/assets/javascripts/vue_merge_request_widget/extensions/issues.js
+++ b/app/assets/javascripts/vue_merge_request_widget/extensions/issues.js
@@ -45,10 +45,7 @@ export default {
             // Icon to get rendered on the side of each row
             icon: {
               // Required: Name maps to an icon in GitLabs SVG
-              name:
-                issue.state === 'closed' ? 'status_failed_borderless' : 'status_success_borderless',
-              // Optional: An extra class to be added to the icon for additional styling
-              class: issue.state === 'closed' ? 'text-danger' : 'text-success',
+              name: issue.state === 'closed' ? EXTENSION_ICONS.error : EXTENSION_ICONS.success,
             },
             // Badges get rendered next to the text on each row
             badge: issue.state === 'closed' && {
diff --git a/app/assets/stylesheets/pages/login.scss b/app/assets/stylesheets/pages/login.scss
index 773935f4c76..45cbef2d1c2 100644
--- a/app/assets/stylesheets/pages/login.scss
+++ b/app/assets/stylesheets/pages/login.scss
@@ -206,6 +206,12 @@
   padding: 0;
   height: 100%;
 
+  &.with-system-header {
+    .login-page-broadcast {
+      margin-top: $system-header-height + $header-height;
+    }
+  }
+
   // Fixes footer container to bottom of viewport
   body {
     // offset height of fixed header + 1 to avoid scroll