Add latest changes from gitlab-org/gitlab@master

8 files changed, 472 insertions, 51 deletions

diff --git a/app/assets/javascripts/boards/components/board_column.vue b/app/assets/javascripts/boards/components/board_column.vue
index c8b713b0c5a..cb93340bcf8 100644
--- a/app/assets/javascripts/boards/components/board_column.vue
+++ b/app/assets/javascripts/boards/components/board_column.vue
@@ -1,13 +1,10 @@
 <script>
-import { mapGetters, mapActions } from 'vuex';
+// This component is being replaced in favor of './board_column_new.vue' for GraphQL boards
 import Sortable from 'sortablejs';
 import BoardListHeader from 'ee_else_ce/boards/components/board_list_header.vue';
 import EmptyComponent from '~/vue_shared/components/empty_component';
-import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import BoardList from './board_list.vue';
-import BoardListNew from './board_list_new.vue';
 import boardsStore from '../stores/boards_store';
-import eventHub from '../eventhub';
 import { getBoardSortableDefaultOptions, sortableEnd } from '../mixins/sortable_default_options';
 import { ListType } from '../constants';
 
@@ -15,9 +12,8 @@ export default {
   components: {
     BoardPromotionState: EmptyComponent,
     BoardListHeader,
-    BoardList: gon.features?.graphqlBoardLists ? BoardListNew : BoardList,
+    BoardList,
   },
-  mixins: [glFeatureFlagMixin()],
   props: {
     list: {
       type: Object,
@@ -46,44 +42,25 @@ export default {
     };
   },
   computed: {
-    ...mapGetters(['getIssuesByList']),
     showBoardListAndBoardInfo() {
       return this.list.type !== ListType.promotion;
     },
-    uniqueKey() {
-      // eslint-disable-next-line @gitlab/require-i18n-strings
-      return `boards.${this.boardId}.${this.list.type}.${this.list.id}`;
-    },
     listIssues() {
-      if (!this.glFeatures.graphqlBoardLists) {
-        return this.list.issues;
-      }
-      return this.getIssuesByList(this.list.id);
-    },
-    shouldFetchIssues() {
-      return this.glFeatures.graphqlBoardLists && this.list.type !== ListType.blank;
+      return this.list.issues;
     },
   },
   watch: {
     filter: {
       handler() {
-        if (this.shouldFetchIssues) {
-          this.fetchIssuesForList({ listId: this.list.id });
-        } else {
-          this.list.page = 1;
-          this.list.getIssues(true).catch(() => {
-            // TODO: handle request error
-          });
-        }
+        this.list.page = 1;
+        this.list.getIssues(true).catch(() => {
+          // TODO: handle request error
+        });
       },
       deep: true,
     },
   },
   mounted() {
-    if (this.shouldFetchIssues) {
-      this.fetchIssuesForList({ listId: this.list.id });
-    }
-
     const instance = this;
 
     const sortableOptions = getBoardSortableDefaultOptions({
@@ -109,12 +86,6 @@ export default {
 
     Sortable.create(this.$el.parentNode, sortableOptions);
   },
-  methods: {
-    ...mapActions(['fetchIssuesForList']),
-    showListNewIssueForm(listId) {
-      eventHub.$emit('showForm', listId);
-    },
-  },
 };
 </script>
 
diff --git a/app/assets/javascripts/boards/components/board_column_new.vue b/app/assets/javascripts/boards/components/board_column_new.vue
new file mode 100644
index 00000000000..8a59355eb83
--- /dev/null
+++ b/app/assets/javascripts/boards/components/board_column_new.vue
@@ -0,0 +1,94 @@
+<script>
+import { mapGetters, mapActions, mapState } from 'vuex';
+import BoardListHeader from 'ee_else_ce/boards/components/board_list_header_new.vue';
+import BoardPromotionState from 'ee_else_ce/boards/components/board_promotion_state';
+import BoardList from './board_list_new.vue';
+import { ListType } from '../constants';
+
+export default {
+  components: {
+    BoardPromotionState,
+    BoardListHeader,
+    BoardList,
+  },
+  props: {
+    list: {
+      type: Object,
+      default: () => ({}),
+      required: false,
+    },
+    disabled: {
+      type: Boolean,
+      required: true,
+    },
+    canAdminList: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  inject: {
+    boardId: {
+      default: '',
+    },
+  },
+  computed: {
+    ...mapState(['filterParams']),
+    ...mapGetters(['getIssuesByList']),
+    showBoardListAndBoardInfo() {
+      return this.list.type !== ListType.promotion;
+    },
+    listIssues() {
+      return this.getIssuesByList(this.list.id);
+    },
+    shouldFetchIssues() {
+      return this.list.type !== ListType.blank;
+    },
+  },
+  watch: {
+    filterParams: {
+      handler() {
+        if (this.shouldFetchIssues) {
+          this.fetchIssuesForList({ listId: this.list.id });
+        }
+      },
+      deep: true,
+      immediate: true,
+    },
+  },
+  methods: {
+    ...mapActions(['fetchIssuesForList']),
+    // TODO: Reordering of lists https://gitlab.com/gitlab-org/gitlab/-/issues/280515
+  },
+};
+</script>
+
+<template>
+  <div
+    :class="{
+      'is-draggable': !list.preset,
+      'is-expandable': list.isExpandable,
+      'is-collapsed': !list.isExpanded,
+      'board-type-assignee': list.type === 'assignee',
+    }"
+    :data-id="list.id"
+    class="board gl-display-inline-block gl-h-full gl-px-3 gl-vertical-align-top gl-white-space-normal"
+    data-qa-selector="board_list"
+  >
+    <div
+      class="board-inner gl-display-flex gl-flex-direction-column gl-relative gl-h-full gl-rounded-base"
+    >
+      <board-list-header :can-admin-list="canAdminList" :list="list" :disabled="disabled" />
+      <board-list
+        v-if="showBoardListAndBoardInfo"
+        ref="board-list"
+        :disabled="disabled"
+        :issues="listIssues"
+        :list="list"
+      />
+
+      <!-- Will be only available in EE -->
+      <board-promotion-state v-if="list.id === 'promotion'" />
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/boards/components/board_content.vue b/app/assets/javascripts/boards/components/board_content.vue
index 201b2b2350f..92976574efb 100644
--- a/app/assets/javascripts/boards/components/board_content.vue
+++ b/app/assets/javascripts/boards/components/board_content.vue
@@ -1,13 +1,14 @@
 <script>
 import { mapState, mapGetters, mapActions } from 'vuex';
 import { sortBy } from 'lodash';
-import BoardColumn from 'ee_else_ce/boards/components/board_column.vue';
 import { GlAlert } from '@gitlab/ui';
+import BoardColumn from 'ee_else_ce/boards/components/board_column.vue';
+import BoardColumnNew from './board_column_new.vue';
 import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 
 export default {
   components: {
-    BoardColumn,
+    BoardColumn: gon.features?.graphqlBoardLists ? BoardColumnNew : BoardColumn,
     BoardContentSidebar: () => import('ee_component/boards/components/board_content_sidebar.vue'),
     EpicsSwimlanes: () => import('ee_component/boards/components/epics_swimlanes.vue'),
     GlAlert,
diff --git a/app/assets/javascripts/boards/components/board_list_header.vue b/app/assets/javascripts/boards/components/board_list_header.vue
index 65ee73547f9..d85ba2038a7 100644
--- a/app/assets/javascripts/boards/components/board_list_header.vue
+++ b/app/assets/javascripts/boards/components/board_list_header.vue
@@ -17,7 +17,6 @@ import eventHub from '../eventhub';
 import sidebarEventHub from '~/sidebar/event_hub';
 import { inactiveId, LIST, ListType } from '../constants';
 import { isScopedLabel } from '~/lib/utils/common_utils';
-import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 
 export default {
   components: {
@@ -32,7 +31,6 @@ export default {
   directives: {
     GlTooltip: GlTooltipDirective,
   },
-  mixins: [glFeatureFlagMixin()],
   props: {
     list: {
       type: Object,
@@ -121,12 +119,9 @@ export default {
     collapsedTooltipTitle() {
       return this.listTitle || this.listAssignee;
     },
-    shouldDisplaySwimlanes() {
-      return this.glFeatures.boardsWithSwimlanes && this.isSwimlanesOn;
-    },
   },
   methods: {
-    ...mapActions(['updateList', 'setActiveId']),
+    ...mapActions(['setActiveId']),
     openSidebarSettings() {
       if (this.activeId === inactiveId) {
         sidebarEventHub.$emit('sidebar.closeAll');
@@ -160,11 +155,7 @@ export default {
       }
     },
     updateListFunction() {
-      if (this.shouldDisplaySwimlanes || this.glFeatures.graphqlBoardLists) {
-        this.updateList({ listId: this.list.id, collapsed: !this.list.isExpanded });
-      } else {
-        this.list.update();
-      }
+      this.list.update();
     },
   },
 };
@@ -254,7 +245,7 @@ export default {
         </span>
         <span
           v-if="list.type === 'assignee'"
-          class="board-title-sub-text gl-ml-2 gl-font-weight-normal"
+          class="gl-ml-2 gl-font-weight-normal gl-text-gray-500"
           :class="{ 'gl-display-none': !list.isExpanded }"
         >
           @{{ listAssignee }}
diff --git a/app/assets/javascripts/boards/components/board_list_header_new.vue b/app/assets/javascripts/boards/components/board_list_header_new.vue
new file mode 100644
index 00000000000..99347a4cd4d
--- /dev/null
+++ b/app/assets/javascripts/boards/components/board_list_header_new.vue
@@ -0,0 +1,358 @@
+<script>
+import { mapActions, mapState } from 'vuex';
+import {
+  GlButton,
+  GlButtonGroup,
+  GlLabel,
+  GlTooltip,
+  GlIcon,
+  GlSprintf,
+  GlTooltipDirective,
+} from '@gitlab/ui';
+import { n__, s__ } from '~/locale';
+import AccessorUtilities from '../../lib/utils/accessor';
+import IssueCount from './issue_count.vue';
+import eventHub from '../eventhub';
+import sidebarEventHub from '~/sidebar/event_hub';
+import { inactiveId, LIST, ListType } from '../constants';
+import { isScopedLabel } from '~/lib/utils/common_utils';
+
+export default {
+  components: {
+    GlButtonGroup,
+    GlButton,
+    GlLabel,
+    GlTooltip,
+    GlIcon,
+    GlSprintf,
+    IssueCount,
+  },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
+  props: {
+    list: {
+      type: Object,
+      default: () => ({}),
+      required: false,
+    },
+    disabled: {
+      type: Boolean,
+      required: true,
+    },
+    isSwimlanesHeader: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  inject: {
+    boardId: {
+      default: '',
+    },
+    weightFeatureAvailable: {
+      default: false,
+    },
+    scopedLabelsAvailable: {
+      default: false,
+    },
+    currentUserId: {
+      default: null,
+    },
+  },
+  computed: {
+    ...mapState(['activeId']),
+    isLoggedIn() {
+      return Boolean(this.currentUserId);
+    },
+    listType() {
+      return this.list.type;
+    },
+    listAssignee() {
+      return this.list?.assignee?.username || '';
+    },
+    listTitle() {
+      return this.list?.label?.description || this.list.title || '';
+    },
+    showListHeaderButton() {
+      return (
+        !this.disabled &&
+        this.listType !== ListType.closed &&
+        this.listType !== ListType.blank &&
+        this.listType !== ListType.promotion
+      );
+    },
+    showMilestoneListDetails() {
+      return (
+        this.list.type === ListType.milestone &&
+        this.list.milestone &&
+        (this.list.isExpanded || !this.isSwimlanesHeader)
+      );
+    },
+    showAssigneeListDetails() {
+      return (
+        this.list.type === ListType.assignee && (this.list.isExpanded || !this.isSwimlanesHeader)
+      );
+    },
+    issuesCount() {
+      return this.list.issuesSize;
+    },
+    issuesTooltipLabel() {
+      return n__(`%d issue`, `%d issues`, this.issuesCount);
+    },
+    chevronTooltip() {
+      return this.list.isExpanded ? s__('Boards|Collapse') : s__('Boards|Expand');
+    },
+    chevronIcon() {
+      return this.list.isExpanded ? 'chevron-right' : 'chevron-down';
+    },
+    isNewIssueShown() {
+      return this.listType === ListType.backlog || this.showListHeaderButton;
+    },
+    isSettingsShown() {
+      return (
+        this.listType !== ListType.backlog && this.showListHeaderButton && this.list.isExpanded
+      );
+    },
+    showBoardListAndBoardInfo() {
+      return this.listType !== ListType.blank && this.listType !== ListType.promotion;
+    },
+    uniqueKey() {
+      // eslint-disable-next-line @gitlab/require-i18n-strings
+      return `boards.${this.boardId}.${this.listType}.${this.list.id}`;
+    },
+    collapsedTooltipTitle() {
+      return this.listTitle || this.listAssignee;
+    },
+    headerStyle() {
+      return { borderTopColor: this.list?.label?.color };
+    },
+  },
+  methods: {
+    ...mapActions(['updateList', 'setActiveId']),
+    openSidebarSettings() {
+      if (this.activeId === inactiveId) {
+        sidebarEventHub.$emit('sidebar.closeAll');
+      }
+
+      this.setActiveId({ id: this.list.id, sidebarType: LIST });
+    },
+    showScopedLabels(label) {
+      return this.scopedLabelsAvailable && isScopedLabel(label);
+    },
+
+    showNewIssueForm() {
+      eventHub.$emit(`toggle-issue-form-${this.list.id}`);
+    },
+    toggleExpanded() {
+      this.list.isExpanded = !this.list.isExpanded;
+
+      if (!this.isLoggedIn) {
+        this.addToLocalStorage();
+      } else {
+        this.updateListFunction();
+      }
+
+      // When expanding/collapsing, the tooltip on the caret button sometimes stays open.
+      // Close all tooltips manually to prevent dangling tooltips.
+      this.$root.$emit('bv::hide::tooltip');
+    },
+    addToLocalStorage() {
+      if (AccessorUtilities.isLocalStorageAccessSafe()) {
+        localStorage.setItem(`${this.uniqueKey}.expanded`, this.list.isExpanded);
+      }
+    },
+    updateListFunction() {
+      this.updateList({ listId: this.list.id, collapsed: !this.list.isExpanded });
+    },
+  },
+};
+</script>
+
+<template>
+  <header
+    :class="{
+      'has-border': list.label && list.label.color,
+      'gl-h-full': !list.isExpanded,
+      'board-inner gl-rounded-top-left-base gl-rounded-top-right-base': isSwimlanesHeader,
+    }"
+    :style="headerStyle"
+    class="board-header gl-relative"
+    data-qa-selector="board_list_header"
+    data-testid="board-list-header"
+  >
+    <h3
+      :class="{
+        'user-can-drag': !disabled && !list.preset,
+        'gl-py-3 gl-h-full': !list.isExpanded && !isSwimlanesHeader,
+        'gl-border-b-0': !list.isExpanded || isSwimlanesHeader,
+        'gl-py-2': !list.isExpanded && isSwimlanesHeader,
+        'gl-flex-direction-column': !list.isExpanded,
+      }"
+      class="board-title gl-m-0 gl-display-flex gl-align-items-center gl-font-base gl-px-3 js-board-handle"
+    >
+      <gl-button
+        v-if="list.isExpandable"
+        v-gl-tooltip.hover
+        :aria-label="chevronTooltip"
+        :title="chevronTooltip"
+        :icon="chevronIcon"
+        class="board-title-caret no-drag gl-cursor-pointer"
+        variant="link"
+        @click="toggleExpanded"
+      />
+      <!-- EE start -->
+      <span
+        v-if="showMilestoneListDetails"
+        aria-hidden="true"
+        class="milestone-icon"
+        :class="{
+          'gl-mt-3 gl-rotate-90': !list.isExpanded,
+          'gl-mr-2': list.isExpanded,
+        }"
+      >
+        <gl-icon name="timer" />
+      </span>
+
+      <a
+        v-if="showAssigneeListDetails"
+        :href="list.assignee.path"
+        class="user-avatar-link js-no-trigger"
+        :class="{
+          'gl-mt-3 gl-rotate-90': !list.isExpanded,
+        }"
+      >
+        <img
+          v-gl-tooltip.hover.bottom
+          :title="listAssignee"
+          :alt="list.assignee.name"
+          :src="list.assignee.avatar"
+          class="avatar s20"
+          height="20"
+          width="20"
+        />
+      </a>
+      <!-- EE end -->
+      <div
+        class="board-title-text"
+        :class="{
+          'gl-display-none': !list.isExpanded && isSwimlanesHeader,
+          'gl-flex-grow-0 gl-my-3 gl-mx-0': !list.isExpanded,
+          'gl-flex-grow-1': list.isExpanded,
+        }"
+      >
+        <!-- EE start -->
+        <span
+          v-if="listType !== 'label'"
+          v-gl-tooltip.hover
+          :class="{
+            'gl-display-block': !list.isExpanded || listType === 'milestone',
+          }"
+          :title="listTitle"
+          class="board-title-main-text gl-text-truncate"
+        >
+          {{ list.title }}
+        </span>
+        <span
+          v-if="listType === 'assignee'"
+          v-show="list.isExpanded"
+          class="gl-ml-2 gl-font-weight-normal gl-text-gray-500"
+        >
+          @{{ listAssignee }}
+        </span>
+        <!-- EE end -->
+        <gl-label
+          v-if="listType === 'label'"
+          v-gl-tooltip.hover.bottom
+          :background-color="list.label.color"
+          :description="list.label.description"
+          :scoped="showScopedLabels(list.label)"
+          :size="!list.isExpanded ? 'sm' : ''"
+          :title="list.label.title"
+        />
+      </div>
+
+      <!-- EE start -->
+      <span
+        v-if="isSwimlanesHeader && !list.isExpanded"
+        ref="collapsedInfo"
+        aria-hidden="true"
+        class="board-header-collapsed-info-icon gl-mt-2 gl-cursor-pointer gl-text-gray-500"
+      >
+        <gl-icon name="information" />
+      </span>
+      <gl-tooltip v-if="isSwimlanesHeader && !list.isExpanded" :target="() => $refs.collapsedInfo">
+        <div class="gl-font-weight-bold gl-pb-2">{{ collapsedTooltipTitle }}</div>
+        <div v-if="list.maxIssueCount !== 0">
+          •
+          <gl-sprintf :message="__('%{issuesSize} with a limit of %{maxIssueCount}')">
+            <template #issuesSize>{{ issuesTooltipLabel }}</template>
+            <template #maxIssueCount>{{ list.maxIssueCount }}</template>
+          </gl-sprintf>
+        </div>
+        <div v-else>• {{ issuesTooltipLabel }}</div>
+        <div v-if="weightFeatureAvailable">
+          •
+          <gl-sprintf :message="__('%{totalWeight} total weight')">
+            <template #totalWeight>{{ list.totalWeight }}</template>
+          </gl-sprintf>
+        </div>
+      </gl-tooltip>
+      <!-- EE end -->
+
+      <div
+        v-if="showBoardListAndBoardInfo"
+        class="issue-count-badge gl-display-inline-flex gl-pr-0 no-drag gl-text-gray-500"
+        :class="{
+          'gl-display-none!': !list.isExpanded && isSwimlanesHeader,
+          'gl-p-0': !list.isExpanded,
+        }"
+      >
+        <span class="gl-display-inline-flex">
+          <gl-tooltip :target="() => $refs.issueCount" :title="issuesTooltipLabel" />
+          <span ref="issueCount" class="issue-count-badge-count">
+            <gl-icon class="gl-mr-2" name="issues" />
+            <issue-count :issues-size="issuesCount" :max-issue-count="list.maxIssueCount" />
+          </span>
+          <!-- EE start -->
+          <template v-if="weightFeatureAvailable">
+            <gl-tooltip :target="() => $refs.weightTooltip" :title="weightCountToolTip" />
+            <span ref="weightTooltip" class="gl-display-inline-flex gl-ml-3">
+              <gl-icon class="gl-mr-2" name="weight" />
+              {{ list.totalWeight }}
+            </span>
+          </template>
+          <!-- EE end -->
+        </span>
+      </div>
+      <gl-button-group
+        v-if="isNewIssueShown || isSettingsShown"
+        class="board-list-button-group pl-2"
+      >
+        <gl-button
+          v-if="isNewIssueShown"
+          v-show="list.isExpanded"
+          ref="newIssueBtn"
+          v-gl-tooltip.hover
+          :aria-label="__('New issue')"
+          :title="__('New issue')"
+          class="issue-count-badge-add-button no-drag"
+          icon="plus"
+          @click="showNewIssueForm"
+        />
+
+        <gl-button
+          v-if="isSettingsShown"
+          ref="settingsBtn"
+          v-gl-tooltip.hover
+          :aria-label="__('List settings')"
+          class="no-drag js-board-settings-button"
+          :title="__('List settings')"
+          icon="settings"
+          @click="openSidebarSettings"
+        />
+        <gl-tooltip :target="() => $refs.settingsBtn">{{ __('List settings') }}</gl-tooltip>
+      </gl-button-group>
+    </h3>
+  </header>
+</template>
diff --git a/app/assets/javascripts/boards/components/board_promotion_state.js b/app/assets/javascripts/boards/components/board_promotion_state.js
new file mode 100644
index 00000000000..ff8b4c56321
--- /dev/null
+++ b/app/assets/javascripts/boards/components/board_promotion_state.js
@@ -0,0 +1 @@
+export default {};
diff --git a/app/assets/javascripts/boards/index.js b/app/assets/javascripts/boards/index.js
index 395a27b42d3..d3e40299d8d 100644
--- a/app/assets/javascripts/boards/index.js
+++ b/app/assets/javascripts/boards/index.js
@@ -86,6 +86,7 @@ export default () => {
       boardId: $boardApp.dataset.boardId,
       groupId: Number($boardApp.dataset.groupId),
       rootPath: $boardApp.dataset.rootPath,
+      currentUserId: gon.current_user_id || null,
       canUpdate: $boardApp.dataset.canUpdate,
       labelsFetchPath: $boardApp.dataset.labelsFetchPath,
       labelsManagePath: $boardApp.dataset.labelsManagePath,
@@ -95,6 +96,7 @@ export default () => {
       boardWeight: $boardApp.dataset.boardWeight
         ? parseInt($boardApp.dataset.boardWeight, 10)
         : null,
+      scopedLabelsAvailable: parseBoolean($boardApp.dataset.scopedLabels),
     },
     store,
     apolloProvider,
diff --git a/app/assets/javascripts/boards/stores/actions.js b/app/assets/javascripts/boards/stores/actions.js
index 92c93323a33..2552a3a4113 100644
--- a/app/assets/javascripts/boards/stores/actions.js
+++ b/app/assets/javascripts/boards/stores/actions.js
@@ -365,7 +365,10 @@ export default {
 
     dispatch('createNewIssue', issueInput)
       .then(res => {
-        commit(types.ADD_ISSUE_TO_LIST, { list, issue: formatIssue(res) });
+        commit(types.ADD_ISSUE_TO_LIST, {
+          list,
+          issue: formatIssue({ ...res, id: getIdFromGraphQLId(res.id) }),
+        });
         commit(types.REMOVE_ISSUE_FROM_LIST, { list, issue });
       })
       .catch(() => commit(types.ADD_ISSUE_TO_LIST_FAILURE, { list, issueId: issueInput.id }));