Add latest changes from gitlab-org/gitlab@master

5 files changed, 60 insertions, 14 deletions

diff --git a/app/assets/javascripts/boards/components/sidebar/board_sidebar_labels_select.vue b/app/assets/javascripts/boards/components/sidebar/board_sidebar_labels_select.vue
index aedd695d07b..919ef0d3783 100644
--- a/app/assets/javascripts/boards/components/sidebar/board_sidebar_labels_select.vue
+++ b/app/assets/javascripts/boards/components/sidebar/board_sidebar_labels_select.vue
@@ -1,10 +1,12 @@
 <script>
 import { GlLabel } from '@gitlab/ui';
 import { mapGetters, mapActions } from 'vuex';
+import Api from '~/api';
 import BoardEditableItem from '~/boards/components/sidebar/board_editable_item.vue';
 import createFlash from '~/flash';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import { isScopedLabel } from '~/lib/utils/common_utils';
+import { mergeUrlParams } from '~/lib/utils/url_utility';
 import { __ } from '~/locale';
 import LabelsSelect from '~/vue_shared/components/sidebar/labels_select_vue/labels_select_root.vue';
 
@@ -14,7 +16,13 @@ export default {
     LabelsSelect,
     GlLabel,
   },
-  inject: ['labelsFetchPath', 'labelsManagePath', 'labelsFilterBasePath'],
+  inject: {
+    labelsFetchPath: {
+      default: null,
+    },
+    labelsManagePath: {},
+    labelsFilterBasePath: {},
+  },
   data() {
     return {
       loading: false,
@@ -38,6 +46,32 @@ export default {
         scoped: isScopedLabel(label),
       }));
     },
+    fetchPath() {
+      /*
+       Labels fetched in epic boards are always group-level labels
+       and the correct path are passed from the backend (injected through labelsFetchPath)
+    
+       For issue boards, we should always include project-level labels and use a different endpoint.
+       (it requires knowing the project path of a selected issue.)
+    
+       Note 1. that we will be using GraphQL to fetch labels when we create a labels select widget.
+       And this component will be removed _wholesale_ https://gitlab.com/gitlab-org/gitlab/-/issues/300653.
+
+       Note 2. Moreover, 'fetchPath' needs to be used as a key for 'labels-select' component to force updates.
+       'labels-select' has its own vuex store and initializes the passed props as states
+       and these states aren't reactively bound to the passed props.
+      */
+
+      const projectLabelsFetchPath = mergeUrlParams(
+        { include_ancestor_groups: true },
+        Api.buildUrl(Api.projectLabelsPath).replace(
+          ':namespace_path/:project_path',
+          this.projectPathForActiveIssue,
+        ),
+      );
+
+      return this.labelsFetchPath || projectLabelsFetchPath;
+    },
   },
   methods: {
     ...mapActions(['setActiveBoardItemLabels']),
@@ -100,12 +134,13 @@ export default {
     <template #default="{ edit }">
       <labels-select
         ref="labelsSelect"
+        :key="fetchPath"
         :allow-label-edit="false"
         :allow-label-create="false"
         :allow-multiselect="true"
         :allow-scoped-labels="true"
         :selected-labels="selectedLabels"
-        :labels-fetch-path="labelsFetchPath"
+        :labels-fetch-path="fetchPath"
         :labels-manage-path="labelsManagePath"
         :labels-filter-base-path="labelsFilterBasePath"
         :labels-list-title="__('Select label')"
diff --git a/app/assets/javascripts/boards/index.js b/app/assets/javascripts/boards/index.js
index 53825d2c045..1888645ef78 100644
--- a/app/assets/javascripts/boards/index.js
+++ b/app/assets/javascripts/boards/index.js
@@ -97,7 +97,6 @@ export default () => {
       currentUserId: gon.current_user_id || null,
       canUpdate: parseBoolean($boardApp.dataset.canUpdate),
       canAdminList: parseBoolean($boardApp.dataset.canAdminList),
-      labelsFetchPath: $boardApp.dataset.labelsFetchPath,
       labelsManagePath: $boardApp.dataset.labelsManagePath,
       labelsFilterBasePath: $boardApp.dataset.labelsFilterBasePath,
       timeTrackingLimitToHours: parseBoolean($boardApp.dataset.timeTrackingLimitToHours),
diff --git a/app/assets/javascripts/pipelines/components/graph/graph_component_wrapper.vue b/app/assets/javascripts/pipelines/components/graph/graph_component_wrapper.vue
index 4bef6f66be2..9329a35ba99 100644
--- a/app/assets/javascripts/pipelines/components/graph/graph_component_wrapper.vue
+++ b/app/assets/javascripts/pipelines/components/graph/graph_component_wrapper.vue
@@ -7,7 +7,7 @@ import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import { DEFAULT, DRAW_FAILURE, LOAD_FAILURE } from '../../constants';
 import DismissPipelineGraphCallout from '../../graphql/mutations/dismiss_pipeline_notification.graphql';
 import getUserCallouts from '../../graphql/queries/get_user_callouts.query.graphql';
-import { reportToSentry } from '../../utils';
+import { reportToSentry, reportMessageToSentry } from '../../utils';
 import { listByLayers } from '../parsing_utils';
 import { IID_FAILURE, LAYER_VIEW, STAGE_VIEW, VIEW_TYPE_KEY } from './constants';
 import PipelineGraph from './graph_component.vue';
@@ -109,14 +109,16 @@ export default {
       },
       error(err) {
         this.reportFailure({ type: LOAD_FAILURE, skipSentry: true });
-        reportToSentry(
+
+        reportMessageToSentry(
           this.$options.name,
-          `| type: ${LOAD_FAILURE} |  
-          | rawError: ${JSON.stringify(err)} | 
-          | info: ${serializeLoadErrors(err)} | 
-          | graphqlResourceEtag: ${this.graphqlResourceEtag} | 
-          | projectPath: ${this.projectPath} | 
-          | iid: ${this.pipelineIid} |`,
+          `| type: ${LOAD_FAILURE} , info: ${serializeLoadErrors(err)}`,
+          {
+            projectPath: this.projectPath,
+            pipelineIid: this.pipelineIid,
+            pipelineStages: this.pipeline?.stages?.length || 0,
+            nbOfDownstreams: this.pipeline?.downstream?.length || 0,
+          },
         );
       },
       result({ error }) {
diff --git a/app/assets/javascripts/pipelines/components/graph/utils.js b/app/assets/javascripts/pipelines/components/graph/utils.js
index 373aa6bf9a1..163b3898c28 100644
--- a/app/assets/javascripts/pipelines/components/graph/utils.js
+++ b/app/assets/javascripts/pipelines/components/graph/utils.js
@@ -1,3 +1,4 @@
+import { isEmpty } from 'lodash';
 import Visibility from 'visibilityjs';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import { unwrapStagesWithNeedsAndLookup } from '../unwrapping_utils';
@@ -39,15 +40,15 @@ const serializeGqlErr = (gqlError) => {
 const serializeLoadErrors = (errors) => {
   const { gqlError, graphQLErrors, networkError, message } = errors;
 
-  if (graphQLErrors) {
+  if (!isEmpty(graphQLErrors)) {
     return graphQLErrors.map((err) => serializeGqlErr(err)).join('; ');
   }
 
-  if (gqlError) {
+  if (!isEmpty(gqlError)) {
     return serializeGqlErr(gqlError);
   }
 
-  if (networkError) {
+  if (!isEmpty(networkError)) {
     return `Network error: ${networkError.message}`;
   }
 
diff --git a/app/assets/javascripts/pipelines/utils.js b/app/assets/javascripts/pipelines/utils.js
index 0a6c326fa3d..800a363cada 100644
--- a/app/assets/javascripts/pipelines/utils.js
+++ b/app/assets/javascripts/pipelines/utils.js
@@ -73,3 +73,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);
+  });
+};