Add latest changes from gitlab-org/gitlab@15-4-stable-eev15.4.0-rc42

14 files changed, 245 insertions, 42 deletions

diff --git a/app/assets/javascripts/boards/components/board_add_new_column_form.vue b/app/assets/javascripts/boards/components/board_add_new_column_form.vue
index c4a2f83ab50..1899d42fa4d 100644
--- a/app/assets/javascripts/boards/components/board_add_new_column_form.vue
+++ b/app/assets/javascripts/boards/components/board_add_new_column_form.vue
@@ -102,7 +102,7 @@ export default {
     data-qa-selector="board_add_new_list"
   >
     <div
-      class="board-inner gl-display-flex gl-flex-direction-column gl-relative gl-h-full gl-rounded-base"
+      class="board-inner gl-display-flex gl-flex-direction-column gl-relative gl-h-full gl-rounded-base gl-bg-gray-50"
     >
       <h3 class="gl-font-size-h2 gl-px-5 gl-py-5 gl-m-0" data-testid="board-add-column-form-title">
         {{ $options.i18n.newList }}
diff --git a/app/assets/javascripts/boards/components/board_blocked_icon.vue b/app/assets/javascripts/boards/components/board_blocked_icon.vue
index b81edb4dfe6..3f8a596abd8 100644
--- a/app/assets/javascripts/boards/components/board_blocked_icon.vue
+++ b/app/assets/javascripts/boards/components/board_blocked_icon.vue
@@ -1,7 +1,7 @@
 <script>
 import { GlIcon, GlLink, GlPopover, GlLoadingIcon } from '@gitlab/ui';
 import { blockingIssuablesQueries, issuableTypes } from '~/boards/constants';
-import { TYPE_ISSUE } from '~/graphql_shared/constants';
+import { TYPE_ISSUE, TYPE_EPIC } from '~/graphql_shared/constants';
 import { convertToGraphQLId } from '~/graphql_shared/utils';
 import { truncate } from '~/lib/utils/text_utility';
 import { __, n__, s__, sprintf } from '~/locale';
@@ -10,10 +10,12 @@ export default {
   i18n: {
     issuableType: {
       [issuableTypes.issue]: __('issue'),
+      [issuableTypes.epic]: __('epic'),
     },
   },
   graphQLIdType: {
     [issuableTypes.issue]: TYPE_ISSUE,
+    [issuableTypes.epic]: TYPE_EPIC,
   },
   referenceFormatter: {
     [issuableTypes.issue]: (r) => r.split('/')[1],
@@ -40,7 +42,7 @@ export default {
       type: String,
       required: true,
       validator(value) {
-        return [issuableTypes.issue].includes(value);
+        return [issuableTypes.issue, issuableTypes.epic].includes(value);
       },
     },
   },
@@ -53,14 +55,21 @@ export default {
         return blockingIssuablesQueries[this.issuableType].query;
       },
       variables() {
+        if (this.isEpic) {
+          return {
+            fullPath: this.item.group.fullPath,
+            iid: Number(this.item.iid),
+          };
+        }
         return {
           id: convertToGraphQLId(this.$options.graphQLIdType[this.issuableType], this.item.id),
         };
       },
       update(data) {
         this.skip = true;
+        const issuable = this.isEpic ? data?.group?.issuable : data?.issuable;
 
-        return data?.issuable?.blockingIssuables?.nodes || [];
+        return issuable?.blockingIssuables?.nodes || [];
       },
       error(error) {
         const message = sprintf(s__('Boards|Failed to fetch blocking %{issuableType}s'), {
@@ -77,13 +86,16 @@ export default {
     };
   },
   computed: {
+    isEpic() {
+      return this.issuableType === issuableTypes.epic;
+    },
     displayedIssuables() {
       const { defaultDisplayLimit, referenceFormatter } = this.$options;
       return this.blockingIssuables.slice(0, defaultDisplayLimit).map((i) => {
         return {
           ...i,
           title: truncate(i.title, this.$options.textTruncateWidth),
-          reference: referenceFormatter[this.issuableType](i.reference),
+          reference: this.isEpic ? i.reference : referenceFormatter[this.issuableType](i.reference),
         };
       });
     },
@@ -106,6 +118,9 @@ export default {
         },
       );
     },
+    blockIcon() {
+      return this.issuableType === issuableTypes.issue ? 'issue-block' : 'entity-blocked';
+    },
     glIconId() {
       return `blocked-icon-${this.uniqueId}`;
     },
@@ -153,8 +168,8 @@ export default {
     <gl-icon
       :id="glIconId"
       ref="icon"
-      name="issue-block"
-      class="issue-blocked-icon gl-mr-2 gl-cursor-pointer"
+      :name="blockIcon"
+      class="issue-blocked-icon gl-mr-2 gl-cursor-pointer gl-text-red-500"
       data-testid="issue-blocked-icon"
       @mouseenter="handleMouseEnter"
     />
diff --git a/app/assets/javascripts/boards/components/board_card.vue b/app/assets/javascripts/boards/components/board_card.vue
index 3638fdd2ca5..44c16324950 100644
--- a/app/assets/javascripts/boards/components/board_card.vue
+++ b/app/assets/javascripts/boards/components/board_card.vue
@@ -30,6 +30,11 @@ export default {
       default: 0,
       required: false,
     },
+    showWorkItemTypeIcon: {
+      type: Boolean,
+      default: false,
+      required: false,
+    },
   },
   computed: {
     ...mapState(['selectedBoardItems', 'activeId']),
@@ -81,10 +86,10 @@ export default {
     data-qa-selector="board_card"
     :class="[
       {
-        'multi-select': multiSelectVisible,
+        'multi-select gl-bg-blue-50 gl-border-blue-200': multiSelectVisible,
         'gl-cursor-grab': isDraggable,
         'is-disabled': isDisabled,
-        'is-active': isActive,
+        'is-active gl-bg-blue-50': isActive,
         'gl-cursor-not-allowed gl-bg-gray-10': item.isLoading,
       },
       colorClass,
@@ -95,9 +100,15 @@ export default {
     :data-item-path="item.referencePath"
     :style="cardStyle"
     data-testid="board_card"
-    class="board-card gl-p-5 gl-rounded-base"
+    class="board-card gl-p-5 gl-rounded-base gl-line-height-normal gl-relative gl-mb-3"
     @click="toggleIssue($event)"
   >
-    <board-card-inner :list="list" :item="item" :update-filters="true" />
+    <board-card-inner
+      :list="list"
+      :item="item"
+      :update-filters="true"
+      :index="index"
+      :show-work-item-type-icon="showWorkItemTypeIcon"
+    />
   </li>
 </template>
diff --git a/app/assets/javascripts/boards/components/board_card_inner.vue b/app/assets/javascripts/boards/components/board_card_inner.vue
index 8dc521317cd..92a623d65d4 100644
--- a/app/assets/javascripts/boards/components/board_card_inner.vue
+++ b/app/assets/javascripts/boards/components/board_card_inner.vue
@@ -15,6 +15,8 @@ import { updateHistory } from '~/lib/utils/url_utility';
 import { sprintf, __, n__ } from '~/locale';
 import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate/tooltip_on_truncate.vue';
 import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue';
+import BoardCardMoveToPosition from '~/boards/components/board_card_move_to_position.vue';
+import WorkItemTypeIcon from '~/work_items/components/work_item_type_icon.vue';
 import { ListType } from '../constants';
 import eventHub from '../eventhub';
 import BoardBlockedIcon from './board_blocked_icon.vue';
@@ -34,6 +36,10 @@ export default {
     IssueCardWeight: () => import('ee_component/boards/components/issue_card_weight.vue'),
     BoardBlockedIcon,
     GlSprintf,
+    BoardCardMoveToPosition,
+    WorkItemTypeIcon,
+    IssueHealthStatus: () =>
+      import('ee_component/related_items_tree/components/issue_health_status.vue'),
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -55,6 +61,15 @@ export default {
       required: false,
       default: false,
     },
+    index: {
+      type: Number,
+      required: true,
+    },
+    showWorkItemTypeIcon: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   data() {
     return {
@@ -202,7 +217,7 @@ export default {
 <template>
   <div>
     <div class="gl-display-flex" dir="auto">
-      <h4 class="board-card-title gl-mb-0 gl-mt-0">
+      <h4 class="board-card-title gl-mb-0 gl-mt-0 gl-mr-3 gl-font-base gl-overflow-break-word">
         <board-blocked-icon
           v-if="item.blocked"
           :item="item"
@@ -215,7 +230,7 @@ export default {
           v-gl-tooltip
           name="eye-slash"
           :title="__('Confidential')"
-          class="confidential-icon gl-mr-2"
+          class="confidential-icon gl-mr-2 gl-text-orange-500 gl-cursor-help"
           :aria-label="__('Confidential')"
         />
         <gl-icon
@@ -223,24 +238,25 @@ export default {
           v-gl-tooltip
           name="spam"
           :title="__('This issue is hidden because its author has been banned')"
-          class="gl-mr-2 hidden-icon"
+          class="gl-mr-2 hidden-icon gl-text-orange-500 gl-cursor-help"
           data-testid="hidden-icon"
         />
         <a
           :href="item.path || item.webUrl || ''"
           :title="item.title"
           :class="{ 'gl-text-gray-400!': item.isLoading }"
-          class="js-no-trigger"
+          class="js-no-trigger gl-text-body gl-hover-text-gray-900"
           @mousemove.stop
           >{{ item.title }}</a
         >
       </h4>
+      <board-card-move-to-position :item="item" :list="list" :index="index" />
     </div>
     <div v-if="showLabelFooter" class="board-card-labels gl-mt-2 gl-display-flex gl-flex-wrap">
       <template v-for="label in orderedLabels">
         <gl-label
           :key="label.id"
-          class="js-no-trigger"
+          class="js-no-trigger gl-mt-2 gl-mr-2"
           :background-color="label.color"
           :title="label.title"
           :description="label.description"
@@ -260,9 +276,14 @@ export default {
         <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"
+          class="board-card-number gl-overflow-hidden gl-display-flex gl-mr-3 gl-mt-3 gl-text-secondary"
           :class="{ 'gl-font-base': isEpicBoard }"
         >
+          <work-item-type-icon
+            v-if="showWorkItemTypeIcon"
+            :work-item-type="item.type"
+            show-tooltip-on-hover
+          />
           <tooltip-on-truncate
             v-if="showReferencePath"
             :title="itemReferencePath"
@@ -321,7 +342,10 @@ export default {
               </p>
             </gl-tooltip>
 
-            <span ref="countBadge" class="board-card-info gl-mr-0 gl-pr-0 gl-pl-3">
+            <span
+              ref="countBadge"
+              class="board-card-info gl-mr-0 gl-pr-0 gl-pl-3 gl-text-secondary gl-cursor-help"
+            >
               <span v-if="allowSubEpics" class="gl-mr-3">
                 <gl-icon name="epic" />
                 {{ totalEpicsCount }}
@@ -339,7 +363,7 @@ export default {
             <span
               v-if="shouldRenderEpicProgress"
               ref="progressBadge"
-              class="board-card-info gl-pl-0"
+              class="board-card-info gl-pl-0 gl-text-secondary gl-cursor-help"
             >
               <span class="gl-mr-3" data-testid="epic-progress">
                 <gl-icon name="progress" />
@@ -359,10 +383,11 @@ export default {
               :weight="item.weight"
               @click="filterByWeight(item.weight)"
             />
+            <issue-health-status v-if="item.healthStatus" :health-status="item.healthStatus" />
           </span>
         </span>
       </div>
-      <div class="board-card-assignee gl-display-flex gl-gap-3">
+      <div class="board-card-assignee gl-display-flex gl-gap-3 gl-mb-n2">
         <user-avatar-link
           v-for="assignee in cappedAssignees"
           :key="assignee.id"
@@ -370,7 +395,7 @@ export default {
           :img-alt="avatarUrlTitle(assignee)"
           :img-src="avatarUrl(assignee)"
           :img-size="avatarSize"
-          class="js-no-trigger"
+          class="js-no-trigger user-avatar-link"
           tooltip-placement="bottom"
           :enforce-gl-avatar="true"
         >
@@ -384,7 +409,7 @@ export default {
           v-if="shouldRenderCounter"
           v-gl-tooltip
           :title="assigneeCounterTooltip"
-          class="avatar-counter"
+          class="avatar-counter gl-bg-gray-400 gl-cursor-help gl-font-weight-bold gl-ml-n4 gl-border-0 gl-line-height-24"
           data-placement="bottom"
           >{{ assigneeCounterLabel }}</span
         >
diff --git a/app/assets/javascripts/boards/components/board_card_move_to_position.vue b/app/assets/javascripts/boards/components/board_card_move_to_position.vue
new file mode 100644
index 00000000000..ff938219475
--- /dev/null
+++ b/app/assets/javascripts/boards/components/board_card_move_to_position.vue
@@ -0,0 +1,128 @@
+<script>
+import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
+import { mapActions, mapGetters, mapState } from 'vuex';
+import { s__ } from '~/locale';
+
+import Tracking from '~/tracking';
+
+export default {
+  i18n: {
+    moveToStartText: s__('Boards|Move to start of list'),
+    moveToEndText: s__('Boards|Move to end of list'),
+  },
+  name: 'BoardCardMoveToPosition',
+  components: {
+    GlDropdown,
+    GlDropdownItem,
+  },
+  mixins: [Tracking.mixin()],
+  props: {
+    item: {
+      type: Object,
+      required: true,
+      validator: (item) => ['id', 'iid', 'referencePath'].every((key) => item[key]),
+    },
+    list: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
+    index: {
+      type: Number,
+      required: true,
+    },
+  },
+  computed: {
+    ...mapState(['pageInfoByListId']),
+    ...mapGetters(['getBoardItemsByList']),
+    tracking() {
+      return {
+        category: 'boards:list',
+        label: 'move_to_position',
+        property: `type_card`,
+      };
+    },
+    listItems() {
+      return this.getBoardItemsByList(this.list.id);
+    },
+    listHasNextPage() {
+      return this.pageInfoByListId[this.list.id]?.hasNextPage;
+    },
+    lengthOfListItemsInBoard() {
+      return this.listItems?.length;
+    },
+    itemIdentifier() {
+      return `${this.item.id}-${this.item.iid}-${this.index}`;
+    },
+    isFirstItemInList() {
+      return this.index === 0;
+    },
+    isLastItemInList() {
+      return this.index === this.lengthOfListItemsInBoard - 1;
+    },
+  },
+  methods: {
+    ...mapActions(['moveItem']),
+    moveToStart() {
+      this.track('click_toggle_button', {
+        label: 'move_to_start',
+      });
+      /** in case it is the first in the list don't call any action/mutation * */
+      if (this.isFirstItemInList) {
+        return;
+      }
+      this.moveToPosition({
+        positionInList: 0,
+      });
+    },
+    moveToEnd() {
+      this.track('click_toggle_button', {
+        label: 'move_to_end',
+      });
+      /** in case it is the last in the list don't call any action/mutation * */
+      if (this.isLastItemInList) {
+        return;
+      }
+      this.moveToPosition({
+        positionInList: -1,
+      });
+    },
+    moveToPosition({ positionInList }) {
+      this.moveItem({
+        itemId: this.item.id,
+        itemIid: this.item.iid,
+        itemPath: this.item.referencePath,
+        fromListId: this.list.id,
+        toListId: this.list.id,
+        positionInList,
+        atIndex: this.index,
+        allItemsLoadedInList: !this.listHasNextPage,
+      });
+    },
+  },
+};
+</script>
+
+<template>
+  <gl-dropdown
+    ref="dropdown"
+    :key="itemIdentifier"
+    icon="ellipsis_v"
+    :text="s__('Boards|Move card')"
+    :text-sr-only="true"
+    class="move-to-position gl-display-block gl-mb-2 gl-ml-2 gl-mt-n3 gl-mr-n3"
+    category="tertiary"
+    :tabindex="index"
+    no-caret
+    @keydown.esc.native="$emit('hide')"
+  >
+    <div>
+      <gl-dropdown-item @click.stop="moveToStart">
+        {{ $options.i18n.moveToStartText }}
+      </gl-dropdown-item>
+      <gl-dropdown-item @click.stop="moveToEnd">
+        {{ $options.i18n.moveToEndText }}
+      </gl-dropdown-item>
+    </div>
+  </gl-dropdown>
+</template>
diff --git a/app/assets/javascripts/boards/components/board_column.vue b/app/assets/javascripts/boards/components/board_column.vue
index bcf5b12b209..8fc76c02e14 100644
--- a/app/assets/javascripts/boards/components/board_column.vue
+++ b/app/assets/javascripts/boards/components/board_column.vue
@@ -76,7 +76,7 @@ export default {
   <div
     :class="{
       'is-draggable': isListDraggable,
-      'is-collapsed': list.collapsed,
+      'is-collapsed gl-w-10': list.collapsed,
       'board-type-assignee': list.listType === 'assignee',
     }"
     :data-list-id="list.id"
@@ -84,7 +84,7 @@ export default {
     data-qa-selector="board_list"
   >
     <div
-      class="board-inner gl-display-flex gl-flex-direction-column gl-relative gl-h-full gl-rounded-base"
+      class="board-inner gl-display-flex gl-flex-direction-column gl-relative gl-h-full gl-rounded-base gl-bg-gray-50"
       :class="{ 'board-column-highlighted': highlighted }"
     >
       <board-list-header :list="list" :disabled="disabled" />
diff --git a/app/assets/javascripts/boards/components/board_content.vue b/app/assets/javascripts/boards/components/board_content.vue
index 8868b9b2f3e..d99afa8455d 100644
--- a/app/assets/javascripts/boards/components/board_content.vue
+++ b/app/assets/javascripts/boards/components/board_content.vue
@@ -75,7 +75,7 @@ export default {
       v-if="!isSwimlanesOn"
       ref="list"
       v-bind="draggableOptions"
-      class="boards-list gl-w-full gl-py-5 gl-pr-3 gl-white-space-nowrap"
+      class="boards-list gl-w-full gl-py-5 gl-pr-3 gl-white-space-nowrap gl-overflow-x-scroll"
       @end="moveList"
     >
       <board-column
diff --git a/app/assets/javascripts/boards/components/board_content_sidebar.vue b/app/assets/javascripts/boards/components/board_content_sidebar.vue
index d25169b5b9d..00b4e6c96a9 100644
--- a/app/assets/javascripts/boards/components/board_content_sidebar.vue
+++ b/app/assets/javascripts/boards/components/board_content_sidebar.vue
@@ -57,6 +57,9 @@ export default {
     labelsFilterBasePath: {
       default: '',
     },
+    canUpdate: {
+      default: false,
+    },
   },
   inheritAttrs: false,
   computed: {
@@ -163,6 +166,7 @@ export default {
           :full-path="fullPath"
           :initial-assignees="activeBoardItem.assignees"
           :allow-multiple-assignees="multipleAssigneesFeatureAvailable"
+          :editable="canUpdate"
           @assignees-updated="setAssignees"
         />
         <sidebar-dropdown-widget
diff --git a/app/assets/javascripts/boards/components/board_list.vue b/app/assets/javascripts/boards/components/board_list.vue
index 66388f4eb43..edf1a5ee7e6 100644
--- a/app/assets/javascripts/boards/components/board_list.vue
+++ b/app/assets/javascripts/boards/components/board_list.vue
@@ -66,7 +66,7 @@ export default {
     },
   },
   computed: {
-    ...mapState(['pageInfoByListId', 'listsFlags', 'filterParams']),
+    ...mapState(['pageInfoByListId', 'listsFlags', 'filterParams', 'isUpdateIssueOrderInProgress']),
     ...mapGetters(['isEpicBoard']),
     listItemsCount() {
       return this.isEpicBoard ? this.list.epicsCount : this.boardList?.issuesCount;
@@ -132,6 +132,9 @@ export default {
 
       return this.canMoveIssue ? options : {};
     },
+    disableScrollingWhenMutationInProgress() {
+      return this.hasNextPage && this.isUpdateIssueOrderInProgress;
+    },
   },
   watch: {
     boardItems() {
@@ -265,7 +268,7 @@ export default {
 <template>
   <div
     v-show="!list.collapsed"
-    class="board-list-component gl-relative gl-h-full gl-display-flex gl-flex-direction-column"
+    class="board-list-component gl-relative gl-h-full gl-display-flex gl-flex-direction-column gl-min-h-0"
     data-qa-selector="board_list_cards_area"
   >
     <div
@@ -285,9 +288,13 @@ export default {
       v-bind="treeRootOptions"
       :data-board="list.id"
       :data-board-type="list.listType"
-      :class="{ 'bg-danger-100': boardItemsSizeExceedsMax }"
+      :class="{
+        'bg-danger-100': boardItemsSizeExceedsMax,
+        'gl-overflow-hidden': disableScrollingWhenMutationInProgress,
+        'gl-overflow-y-auto': !disableScrollingWhenMutationInProgress,
+      }"
       draggable=".board-card"
-      class="board-list gl-w-full gl-h-full gl-list-style-none gl-mb-0 gl-p-3 gl-pt-0"
+      class="board-list gl-w-full gl-h-full gl-list-style-none gl-mb-0 gl-p-3 gl-pt-0 gl-overflow-x-hidden"
       data-testid="tree-root-wrapper"
       @start="handleDragOnStart"
       @end="handleDragOnEnd"
@@ -301,9 +308,14 @@ export default {
         :item="item"
         :data-draggable-item-type="$options.draggableItemTypes.card"
         :disabled="disabled"
+        :show-work-item-type-icon="!isEpicBoard"
       />
       <gl-intersection-observer @appear="onReachingListBottom">
-        <li v-if="showCount" class="board-list-count gl-text-center" data-issue-id="-1">
+        <li
+          v-if="showCount"
+          class="board-list-count gl-text-center gl-text-secondary gl-py-4"
+          data-issue-id="-1"
+        >
           <gl-loading-icon
             v-if="loadingMore"
             size="sm"
diff --git a/app/assets/javascripts/boards/components/board_list_header.vue b/app/assets/javascripts/boards/components/board_list_header.vue
index e3012f5b36d..230fa4e1e0f 100644
--- a/app/assets/javascripts/boards/components/board_list_header.vue
+++ b/app/assets/javascripts/boards/components/board_list_header.vue
@@ -252,7 +252,7 @@ export default {
   <header
     :class="{
       'gl-h-full': list.collapsed,
-      'board-inner gl-rounded-top-left-base gl-rounded-top-right-base': isSwimlanesHeader,
+      'board-inner gl-rounded-top-left-base gl-rounded-top-right-base gl-bg-gray-50': isSwimlanesHeader,
     }"
     :style="headerStyle"
     class="board-header gl-relative"
@@ -267,14 +267,15 @@ export default {
         'gl-py-2': list.collapsed && isSwimlanesHeader,
         'gl-flex-direction-column': list.collapsed,
       }"
-      class="board-title gl-m-0 gl-display-flex gl-align-items-center gl-font-base gl-px-3"
+      class="board-title gl-m-0 gl-display-flex gl-align-items-center gl-font-base gl-px-3 gl-h-9"
     >
       <gl-button
         v-gl-tooltip.hover
         :aria-label="chevronTooltip"
         :title="chevronTooltip"
         :icon="chevronIcon"
-        class="board-title-caret no-drag gl-cursor-pointer"
+        class="board-title-caret no-drag gl-cursor-pointer gl-hover-bg-gray-50"
+        :class="{ 'gl-mt-1': list.collapsed, 'gl-mr-2': !list.collapsed }"
         category="tertiary"
         size="small"
         data-testid="board-title-caret"
@@ -307,6 +308,7 @@ export default {
           'gl-display-none': list.collapsed && isSwimlanesHeader,
           'gl-flex-grow-0 gl-my-3 gl-mx-0': list.collapsed,
           'gl-flex-grow-1': !list.collapsed,
+          'gl-rotate-90': list.collapsed,
         }"
       >
         <!-- EE start -->
@@ -324,7 +326,7 @@ export default {
         <span
           v-if="listType === 'assignee'"
           v-show="!list.collapsed"
-          class="gl-ml-2 gl-font-weight-normal gl-text-gray-500"
+          class="gl-ml-2 gl-font-weight-normal gl-text-secondary"
         >
           @{{ listAssignee }}
         </span>
@@ -345,7 +347,7 @@ export default {
         v-if="isSwimlanesHeader && list.collapsed"
         ref="collapsedInfo"
         aria-hidden="true"
-        class="board-header-collapsed-info-icon gl-cursor-pointer gl-text-gray-500"
+        class="board-header-collapsed-info-icon gl-cursor-pointer gl-text-secondary gl-hover-text-gray-900"
       >
         <gl-icon name="information" />
       </span>
@@ -369,14 +371,14 @@ export default {
       <!-- EE end -->
 
       <div
-        class="issue-count-badge gl-display-inline-flex gl-pr-2 no-drag gl-text-gray-500"
+        class="issue-count-badge gl-display-inline-flex gl-pr-2 no-drag gl-text-secondary"
         data-testid="issue-count-badge"
         :class="{
           'gl-display-none!': list.collapsed && isSwimlanesHeader,
           'gl-p-0': list.collapsed,
         }"
       >
-        <span class="gl-display-inline-flex">
+        <span class="gl-display-inline-flex" :class="{ 'gl-rotate-90': list.collapsed }">
           <gl-tooltip :target="() => $refs.itemCount" :title="itemsTooltipLabel" />
           <span ref="itemCount" class="gl-display-inline-flex gl-align-items-center">
             <gl-icon class="gl-mr-2" :name="countIcon" :size="16" />
diff --git a/app/assets/javascripts/boards/components/board_new_item.vue b/app/assets/javascripts/boards/components/board_new_item.vue
index 600917683cd..084b7519d1f 100644
--- a/app/assets/javascripts/boards/components/board_new_item.vue
+++ b/app/assets/javascripts/boards/components/board_new_item.vue
@@ -69,7 +69,7 @@ export default {
 </script>
 
 <template>
-  <div class="board-new-issue-form">
+  <div class="board-new-issue-form gl-z-index-3 gl-m-3">
     <div class="board-card position-relative gl-p-5 rounded">
       <gl-form @submit.prevent="handleFormSubmit" @reset="handleFormCancel">
         <label :for="inputFieldId" class="gl-font-weight-bold">{{ __('Title') }}</label>
diff --git a/app/assets/javascripts/boards/components/issue_due_date.vue b/app/assets/javascripts/boards/components/issue_due_date.vue
index 73ec008c2b6..b09b1d48ca5 100644
--- a/app/assets/javascripts/boards/components/issue_due_date.vue
+++ b/app/assets/javascripts/boards/components/issue_due_date.vue
@@ -1,6 +1,6 @@
 <script>
 import { GlTooltip, GlIcon } from '@gitlab/ui';
-import dateFormat from 'dateformat';
+import dateFormat from '~/lib/dateformat';
 import {
   getDayDifference,
   getTimeago,
@@ -85,7 +85,11 @@ export default {
 
 <template>
   <span>
-    <span ref="issueDueDate" :class="cssClass" class="board-card-info card-number">
+    <span
+      ref="issueDueDate"
+      :class="cssClass"
+      class="board-card-info gl-mr-3 gl-text-secondary gl-cursor-help"
+    >
       <gl-icon
         :class="{ 'text-danger': isPastDue }"
         class="board-card-info-icon gl-mr-2"
diff --git a/app/assets/javascripts/boards/components/issue_time_estimate.vue b/app/assets/javascripts/boards/components/issue_time_estimate.vue
index 9312db06efe..bc12717a92d 100644
--- a/app/assets/javascripts/boards/components/issue_time_estimate.vue
+++ b/app/assets/javascripts/boards/components/issue_time_estimate.vue
@@ -36,7 +36,7 @@ export default {
 
 <template>
   <span>
-    <span ref="issueTimeEstimate" class="board-card-info card-number">
+    <span ref="issueTimeEstimate" class="board-card-info gl-mr-3 gl-text-secondary gl-cursor-help">
       <gl-icon name="hourglass" class="board-card-info-icon gl-mr-2" />
       <time class="board-card-info-text">{{ timeEstimate }}</time>
     </span>
diff --git a/app/assets/javascripts/boards/components/item_count.vue b/app/assets/javascripts/boards/components/item_count.vue
index a11c23e5625..dab82abb646 100644
--- a/app/assets/javascripts/boards/components/item_count.vue
+++ b/app/assets/javascripts/boards/components/item_count.vue
@@ -30,7 +30,9 @@ export default {
       {{ itemsSize }}
     </span>
     <span v-if="isMaxLimitSet" class="max-issue-size">
-      {{ maxIssueCount }}
+      <!-- eslint-disable @gitlab/vue-require-i18n-strings -->
+      {{ `/ ${maxIssueCount}` }}
+      <!-- eslint-enable @gitlab/vue-require-i18n-strings -->
     </span>
   </div>
 </template>