Add latest changes from gitlab-org/gitlab@master

6 files changed, 421 insertions, 15 deletions

diff --git a/app/assets/javascripts/boards/components/board.js b/app/assets/javascripts/boards/components/board.js
index b68a6ad0ef5..48f5614cefe 100644
--- a/app/assets/javascripts/boards/components/board.js
+++ b/app/assets/javascripts/boards/components/board.js
@@ -16,6 +16,14 @@ import { getBoardSortableDefaultOptions, sortableEnd } from '../mixins/sortable_
 import { ListType } from '../constants';
 import { isScopedLabel } from '~/lib/utils/common_utils';
 
+/**
+ * Please don't edit this file, have a look at:
+ * ./board_column.vue
+ * https://gitlab.com/gitlab-org/gitlab/-/issues/212300
+ *
+ * This file here will be deleted soon
+ * @deprecated
+ */
 export default Vue.extend({
   components: {
     BoardBlankState,
@@ -54,6 +62,13 @@ export default Vue.extend({
       type: String,
       required: true,
     },
+    // Does not do anything but is used
+    // to support the API of the new board_column.vue
+    canAdminList: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   data() {
     return {
diff --git a/app/assets/javascripts/boards/components/board_column.vue b/app/assets/javascripts/boards/components/board_column.vue
new file mode 100644
index 00000000000..693b1f9d7b1
--- /dev/null
+++ b/app/assets/javascripts/boards/components/board_column.vue
@@ -0,0 +1,384 @@
+<script>
+import $ from 'jquery';
+import Sortable from 'sortablejs';
+import { GlButtonGroup, GlButton, GlLabel, GlTooltip, GlIcon } from '@gitlab/ui';
+import isWipLimitsOn from 'ee_else_ce/boards/mixins/is_wip_limits';
+import { s__, __, sprintf } from '~/locale';
+import Tooltip from '~/vue_shared/directives/tooltip';
+import EmptyComponent from '~/vue_shared/components/empty_component';
+import AccessorUtilities from '../../lib/utils/accessor';
+import BoardBlankState from './board_blank_state.vue';
+import BoardDelete from './board_delete';
+import BoardList from './board_list.vue';
+import IssueCount from './issue_count.vue';
+import boardsStore from '../stores/boards_store';
+import { getBoardSortableDefaultOptions, sortableEnd } from '../mixins/sortable_default_options';
+import { ListType } from '../constants';
+import { isScopedLabel } from '~/lib/utils/common_utils';
+
+export default {
+  components: {
+    BoardPromotionState: EmptyComponent,
+    BoardBlankState,
+    BoardDelete,
+    BoardList,
+    GlButtonGroup,
+    IssueCount,
+    GlButton,
+    GlLabel,
+    GlTooltip,
+    GlIcon,
+  },
+  directives: {
+    Tooltip,
+  },
+  mixins: [isWipLimitsOn],
+  props: {
+    list: {
+      type: Object,
+      default: () => ({}),
+      required: false,
+    },
+    disabled: {
+      type: Boolean,
+      required: true,
+    },
+    issueLinkBase: {
+      type: String,
+      required: true,
+    },
+    rootPath: {
+      type: String,
+      required: true,
+    },
+    boardId: {
+      type: String,
+      required: true,
+    },
+    canAdminList: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    groupId: {
+      type: Number,
+      required: false,
+      default: null,
+    },
+  },
+  data() {
+    return {
+      detailIssue: boardsStore.detail,
+      filter: boardsStore.filter,
+      weightFeatureAvailable: false,
+    };
+  },
+  computed: {
+    isLoggedIn() {
+      return Boolean(gon.current_user_id);
+    },
+    showListHeaderButton() {
+      return (
+        !this.disabled &&
+        this.list.type !== ListType.closed &&
+        this.list.type !== ListType.blank &&
+        this.list.type !== ListType.promotion
+      );
+    },
+    issuesTooltip() {
+      const { issuesSize } = this.list;
+
+      return sprintf(__('%{issuesSize} issues'), { issuesSize });
+    },
+    // Only needed to make karma pass.
+    weightCountToolTip() {}, // eslint-disable-line vue/return-in-computed-property
+    caretTooltip() {
+      return this.list.isExpanded ? s__('Boards|Collapse') : s__('Boards|Expand');
+    },
+    isNewIssueShown() {
+      return this.list.type === ListType.backlog || this.showListHeaderButton;
+    },
+    isSettingsShown() {
+      return (
+        this.list.type !== ListType.backlog &&
+        this.showListHeaderButton &&
+        this.list.isExpanded &&
+        this.isWipLimitsOn
+      );
+    },
+    showBoardListAndBoardInfo() {
+      return this.list.type !== ListType.blank && this.list.type !== ListType.promotion;
+    },
+    uniqueKey() {
+      // eslint-disable-next-line @gitlab/require-i18n-strings
+      return `boards.${this.boardId}.${this.list.type}.${this.list.id}`;
+    },
+    helpLink() {
+      return boardsStore.scopedLabels.helpLink;
+    },
+  },
+  watch: {
+    filter: {
+      handler() {
+        this.list.page = 1;
+        this.list.getIssues(true).catch(() => {
+          // TODO: handle request error
+        });
+      },
+      deep: true,
+    },
+  },
+  mounted() {
+    const instance = this;
+
+    const sortableOptions = getBoardSortableDefaultOptions({
+      disabled: this.disabled,
+      group: 'boards',
+      draggable: '.is-draggable',
+      handle: '.js-board-handle',
+      onEnd(e) {
+        sortableEnd();
+
+        const sortable = this;
+
+        if (e.newIndex !== undefined && e.oldIndex !== e.newIndex) {
+          const order = sortable.toArray();
+          const list = boardsStore.findList('id', parseInt(e.item.dataset.id, 10));
+
+          instance.$nextTick(() => {
+            boardsStore.moveList(list, order);
+          });
+        }
+      },
+    });
+
+    Sortable.create(this.$el.parentNode, sortableOptions);
+  },
+  created() {
+    if (
+      this.list.isExpandable &&
+      AccessorUtilities.isLocalStorageAccessSafe() &&
+      !this.isLoggedIn
+    ) {
+      const isCollapsed = localStorage.getItem(`${this.uniqueKey}.expanded`) === 'false';
+
+      this.list.isExpanded = !isCollapsed;
+    }
+  },
+  methods: {
+    showScopedLabels(label) {
+      return boardsStore.scopedLabels.enabled && isScopedLabel(label);
+    },
+
+    showNewIssueForm() {
+      this.$refs['board-list'].showIssueForm = !this.$refs['board-list'].showIssueForm;
+    },
+    toggleExpanded() {
+      if (this.list.isExpandable) {
+        this.list.isExpanded = !this.list.isExpanded;
+
+        if (AccessorUtilities.isLocalStorageAccessSafe() && !this.isLoggedIn) {
+          localStorage.setItem(`${this.uniqueKey}.expanded`, this.list.isExpanded);
+        }
+
+        if (this.isLoggedIn) {
+          this.list.update();
+        }
+
+        // When expanding/collapsing, the tooltip on the caret button sometimes stays open.
+        // Close all tooltips manually to prevent dangling tooltips.
+        $('.tooltip').tooltip('hide');
+      }
+    },
+  },
+};
+</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 h-100 px-2 align-top ws-normal"
+    data-qa-selector="board_list"
+  >
+    <div class="board-inner d-flex flex-column position-relative h-100 rounded">
+      <header
+        :class="{
+          'has-border': list.label && list.label.color,
+          'position-relative': list.isExpanded,
+          'position-absolute position-top-0 position-left-0 w-100 h-100': !list.isExpanded,
+        }"
+        :style="{ borderTopColor: list.label && list.label.color ? list.label.color : null }"
+        class="board-header"
+        data-qa-selector="board_list_header"
+      >
+        <h3
+          :class="{
+            'user-can-drag': !disabled && !list.preset,
+            'border-bottom-0': !list.isExpanded,
+          }"
+          class="board-title m-0 d-flex js-board-handle"
+        >
+          <div
+            v-if="list.isExpandable"
+            v-tooltip=""
+            :aria-label="caretTooltip"
+            :title="caretTooltip"
+            aria-hidden="true"
+            class="board-title-caret no-drag"
+            data-placement="bottom"
+            @click="toggleExpanded"
+          >
+            <i
+              :class="{ 'fa-caret-right': list.isExpanded, 'fa-caret-down': !list.isExpanded }"
+              class="fa fa-fw"
+            ></i>
+          </div>
+          <!-- The following is only true in EE and if it is a milestone -->
+          <span
+            v-if="list.type === 'milestone' && list.milestone"
+            aria-hidden="true"
+            class="append-right-5 milestone-icon"
+          >
+            <gl-icon name="timer" />
+          </span>
+
+          <a
+            v-if="list.type === 'assignee'"
+            :href="list.assignee.path"
+            class="user-avatar-link js-no-trigger"
+          >
+            <img
+              :alt="list.assignee.name"
+              :src="list.assignee.avatar"
+              class="avatar s20 has-tooltip"
+              height="20"
+              width="20"
+            />
+          </a>
+          <div class="board-title-text">
+            <span
+              v-if="list.type !== 'label'"
+              :class="{
+                'has-tooltip': !['backlog', 'closed'].includes(list.type),
+                'd-block': list.type === 'milestone',
+              }"
+              :title="(list.label && list.label.description) || list.title || ''"
+              class="board-title-main-text block-truncated"
+              data-container="body"
+            >
+              {{ list.title }}
+            </span>
+            <span
+              v-if="list.type === 'assignee'"
+              :title="(list.assignee && list.assignee.username) || ''"
+              class="board-title-sub-text prepend-left-5 has-tooltip"
+            >
+              @{{ list.assignee.username }}
+            </span>
+            <gl-label
+              v-if="list.type === 'label'"
+              :background-color="list.label.color"
+              :description="list.label.description"
+              :scoped="showScopedLabels(list.label)"
+              :scoped-labels-documentation-link="helpLink"
+              :size="!list.isExpanded ? 'sm' : ''"
+              :title="list.label.title"
+              tooltip-placement="bottom"
+            />
+          </div>
+          <board-delete
+            v-if="canAdminList && !list.preset && list.id"
+            :list="list"
+            inline-template="true"
+          >
+            <button
+              :class="{ 'd-none': !list.isExpanded }"
+              :aria-label="__(`Delete list`)"
+              class="board-delete no-drag p-0 border-0 has-tooltip float-right"
+              data-placement="bottom"
+              title="Delete list"
+              type="button"
+              @click.stop="deleteBoard"
+            >
+              <i aria-hidden="true" data-hidden="true" class="fa fa-trash"></i>
+            </button>
+          </board-delete>
+          <div
+            v-if="showBoardListAndBoardInfo"
+            class="issue-count-badge pr-0 no-drag text-secondary"
+          >
+            <span class="d-inline-flex">
+              <gl-tooltip :target="() => $refs.issueCount" :title="issuesTooltip" />
+              <span ref="issueCount" class="issue-count-badge-count">
+                <gl-icon class="mr-1" name="issues" />
+                <issue-count :issues-size="list.issuesSize" :max-issue-count="list.maxIssueCount" />
+              </span>
+              <!-- The following is only true in EE. -->
+              <template v-if="weightFeatureAvailable">
+                <gl-tooltip :target="() => $refs.weightTooltip" :title="weightCountToolTip" />
+                <span ref="weightTooltip" class="d-inline-flex ml-2">
+                  <gl-icon class="mr-1" name="weight" />
+                  {{ list.totalWeight }}
+                </span>
+              </template>
+            </span>
+          </div>
+          <gl-button-group
+            v-if="isNewIssueShown || isSettingsShown"
+            class="board-list-button-group pl-2"
+          >
+            <gl-button
+              v-if="isNewIssueShown"
+              ref="newIssueBtn"
+              :class="{
+                'd-none': !list.isExpanded,
+                'rounded-right': isNewIssueShown && !isSettingsShown,
+              }"
+              :aria-label="__(`New issue`)"
+              class="issue-count-badge-add-button no-drag"
+              type="button"
+              @click="showNewIssueForm"
+            >
+              <i aria-hidden="true" data-hidden="true" class="fa fa-plus"></i>
+            </gl-button>
+            <gl-tooltip :target="() => $refs.newIssueBtn">{{ __('New Issue') }}</gl-tooltip>
+
+            <gl-button
+              v-if="isSettingsShown"
+              ref="settingsBtn"
+              :aria-label="__(`List settings`)"
+              class="no-drag rounded-right"
+              title="List settings"
+              type="button"
+              @click="openSidebarSettings"
+            >
+              <gl-icon name="settings" />
+            </gl-button>
+            <gl-tooltip :target="() => $refs.settingsBtn">{{ __('List settings') }}</gl-tooltip>
+          </gl-button-group>
+        </h3>
+      </header>
+      <board-list
+        v-if="showBoardListAndBoardInfo"
+        ref="board-list"
+        :disabled="disabled"
+        :group-id="groupId || null"
+        :issue-link-base="issueLinkBase"
+        :issues="list.issues"
+        :list="list"
+        :loading="list.loading"
+        :root-path="rootPath"
+      />
+      <board-blank-state v-if="canAdminList && list.id === 'blank'" />
+
+      <!-- Will be only available in EE -->
+      <board-promotion-state v-if="list.id === 'promotion'" />
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/boards/index.js b/app/assets/javascripts/boards/index.js
index 781cb0c1cc9..a12db7a5f1a 100644
--- a/app/assets/javascripts/boards/index.js
+++ b/app/assets/javascripts/boards/index.js
@@ -3,7 +3,6 @@ import Vue from 'vue';
 
 import 'ee_else_ce/boards/models/issue';
 import 'ee_else_ce/boards/models/list';
-import Board from 'ee_else_ce/boards/components/board';
 import BoardSidebar from 'ee_else_ce/boards/components/board_sidebar';
 import initNewListDropdown from 'ee_else_ce/boards/components/new_list_dropdown';
 import boardConfigToggle from 'ee_else_ce/boards/config_toggle';
@@ -65,7 +64,15 @@ export default () => {
   issueBoardsApp = new Vue({
     el: $boardApp,
     components: {
-      Board,
+      Board: () =>
+        window?.gon?.features?.sfcIssueBoards
+          ? import('ee_else_ce/boards/components/board_column.vue')
+          : /**
+             * Please have a look at, we are moving to the SFC soon:
+             * https://gitlab.com/gitlab-org/gitlab/-/issues/212300
+             * @deprecated
+             */
+            import('ee_else_ce/boards/components/board'),
       BoardSidebar,
       BoardAddIssuesModal,
       BoardSettingsSidebar: () =>
diff --git a/app/assets/javascripts/dropzone_input.js b/app/assets/javascripts/dropzone_input.js
index 0e2dd59092a..6c158ad8990 100644
--- a/app/assets/javascripts/dropzone_input.js
+++ b/app/assets/javascripts/dropzone_input.js
@@ -6,6 +6,7 @@ import PasteMarkdownTable from './behaviors/markdown/paste_markdown_table';
 import csrf from './lib/utils/csrf';
 import axios from './lib/utils/axios_utils';
 import { n__, __ } from '~/locale';
+import { getFilename } from '~/lib/utils/file_upload';
 
 Dropzone.autoDiscover = false;
 
@@ -41,7 +42,6 @@ export default function dropzoneInput(form) {
   let addFileToForm;
   let updateAttachingMessage;
   let isImage;
-  let getFilename;
   let uploadFile;
 
   formTextarea.wrap('<div class="div-dropzone"></div>');
@@ -235,17 +235,6 @@ export default function dropzoneInput(form) {
     $(form).append(`<input type="hidden" name="files[]" value="${_.escape(path)}">`);
   };
 
-  getFilename = e => {
-    let value;
-    if (window.clipboardData && window.clipboardData.getData) {
-      value = window.clipboardData.getData('Text');
-    } else if (e.clipboardData && e.clipboardData.getData) {
-      value = e.clipboardData.getData('text/plain');
-    }
-    value = value.split('\r');
-    return value[0];
-  };
-
   const showSpinner = () => $uploadingProgressContainer.removeClass('hide');
 
   const closeSpinner = () => $uploadingProgressContainer.addClass('hide');
diff --git a/app/assets/javascripts/lib/utils/file_upload.js b/app/assets/javascripts/lib/utils/file_upload.js
index 82ee83e4348..b8b63bf58d4 100644
--- a/app/assets/javascripts/lib/utils/file_upload.js
+++ b/app/assets/javascripts/lib/utils/file_upload.js
@@ -14,3 +14,14 @@ export default (buttonSelector, fileSelector) => {
     form.querySelector('.js-filename').textContent = fileInput.value.replace(/^.*[\\\/]/, ''); // eslint-disable-line no-useless-escape
   });
 };
+
+export const getFilename = ({ clipboardData }) => {
+  let value;
+  if (window.clipboardData && window.clipboardData.getData) {
+    value = window.clipboardData.getData('Text');
+  } else if (clipboardData && clipboardData.getData) {
+    value = clipboardData.getData('text/plain');
+  }
+  value = value.split('\r');
+  return value[0];
+};
diff --git a/app/assets/javascripts/notes/components/diff_with_note.vue b/app/assets/javascripts/notes/components/diff_with_note.vue
index c3915ef299b..a58a040fb4e 100644
--- a/app/assets/javascripts/notes/components/diff_with_note.vue
+++ b/app/assets/javascripts/notes/components/diff_with_note.vue
@@ -48,7 +48,7 @@ export default {
     },
   },
   mounted() {
-    if (!this.hasTruncatedDiffLines) {
+    if (this.isTextFile && !this.hasTruncatedDiffLines) {
       this.fetchDiff();
     }
   },