Add latest changes from gitlab-org/gitlab@15-2-stable-eev15.2.0-rc42

3 files changed, 23 insertions, 9 deletions

diff --git a/app/assets/javascripts/boards/components/board_card.vue b/app/assets/javascripts/boards/components/board_card.vue
index dc821cb9f58..3638fdd2ca5 100644
--- a/app/assets/javascripts/boards/components/board_card.vue
+++ b/app/assets/javascripts/boards/components/board_card.vue
@@ -48,6 +48,15 @@ export default {
     isDraggable() {
       return !this.disabled && this.item.id && !this.item.isLoading;
     },
+    cardStyle() {
+      return this.isColorful && this.item.color ? { borderColor: this.item.color } : '';
+    },
+    isColorful() {
+      return gon?.features?.epicColorHighlight;
+    },
+    colorClass() {
+      return this.isColorful ? 'gl-pl-4 gl-border-l-solid gl-border-4' : '';
+    },
   },
   methods: {
     ...mapActions(['toggleBoardItemMultiSelection', 'toggleBoardItem']),
@@ -70,17 +79,21 @@ export default {
 <template>
   <li
     data-qa-selector="board_card"
-    :class="{
-      'multi-select': multiSelectVisible,
-      'gl-cursor-grab': isDraggable,
-      'is-disabled': isDisabled,
-      'is-active': isActive,
-      'gl-cursor-not-allowed gl-bg-gray-10': item.isLoading,
-    }"
+    :class="[
+      {
+        'multi-select': multiSelectVisible,
+        'gl-cursor-grab': isDraggable,
+        'is-disabled': isDisabled,
+        'is-active': isActive,
+        'gl-cursor-not-allowed gl-bg-gray-10': item.isLoading,
+      },
+      colorClass,
+    ]"
     :index="index"
     :data-item-id="item.id"
     :data-item-iid="item.iid"
     :data-item-path="item.referencePath"
+    :style="cardStyle"
     data-testid="board_card"
     class="board-card gl-p-5 gl-rounded-base"
     @click="toggleIssue($event)"
diff --git a/app/assets/javascripts/boards/components/board_card_inner.vue b/app/assets/javascripts/boards/components/board_card_inner.vue
index 98ce1ac7f97..a632f5ae0ed 100644
--- a/app/assets/javascripts/boards/components/board_card_inner.vue
+++ b/app/assets/javascripts/boards/components/board_card_inner.vue
@@ -243,6 +243,7 @@ export default {
           :description="label.description"
           size="sm"
           :scoped="showScopedLabel(label)"
+          target="#"
           @click="filterByLabel(label)"
         />
       </template>
@@ -253,7 +254,7 @@ export default {
       <div
         class="gl-display-flex align-items-start flex-wrap-reverse board-card-number-container gl-overflow-hidden"
       >
-        <gl-loading-icon v-if="item.isLoading" size="lg" class="mt-3" />
+        <gl-loading-icon v-if="item.isLoading" size="lg" class="gl-mt-5" />
         <span
           v-if="item.referencePath"
           class="board-card-number gl-overflow-hidden gl-display-flex gl-mr-3 gl-mt-3"
diff --git a/app/assets/javascripts/boards/components/toggle_focus.vue b/app/assets/javascripts/boards/components/toggle_focus.vue
index 71612e0742f..990a6fa63d4 100644
--- a/app/assets/javascripts/boards/components/toggle_focus.vue
+++ b/app/assets/javascripts/boards/components/toggle_focus.vue
@@ -20,7 +20,7 @@ export default {
       hide(this.$refs.toggleFocusModeButton);
 
       const issueBoardsContent = document.querySelector('.content-wrapper > .js-focus-mode-board');
-      issueBoardsContent.classList.toggle('is-focused');
+      issueBoardsContent?.classList.toggle('is-focused');
 
       this.isFullscreen = !this.isFullscreen;
     },