Add latest changes from gitlab-org/gitlab@13-10-stable-eev13.10.0-rc40

1 files changed, 143 insertions, 0 deletions

diff --git a/app/assets/javascripts/boards/components/board_add_new_column.vue b/app/assets/javascripts/boards/components/board_add_new_column.vue
new file mode 100644
index 00000000000..3c7c792b787
--- /dev/null
+++ b/app/assets/javascripts/boards/components/board_add_new_column.vue
@@ -0,0 +1,143 @@
+<script>
+import {
+  GlFormRadio,
+  GlFormRadioGroup,
+  GlLabel,
+  GlTooltipDirective as GlTooltip,
+} from '@gitlab/ui';
+import { mapActions, mapGetters, mapState } from 'vuex';
+import BoardAddNewColumnForm from '~/boards/components/board_add_new_column_form.vue';
+import { ListType } from '~/boards/constants';
+import boardsStore from '~/boards/stores/boards_store';
+import { getIdFromGraphQLId } from '~/graphql_shared/utils';
+import { isScopedLabel } from '~/lib/utils/common_utils';
+
+export default {
+  components: {
+    BoardAddNewColumnForm,
+    GlFormRadio,
+    GlFormRadioGroup,
+    GlLabel,
+  },
+  directives: {
+    GlTooltip,
+  },
+  inject: ['scopedLabelsAvailable'],
+  data() {
+    return {
+      selectedId: null,
+    };
+  },
+  computed: {
+    ...mapState(['labels', 'labelsLoading']),
+    ...mapGetters(['getListByLabelId', 'shouldUseGraphQL']),
+    selectedLabel() {
+      if (!this.selectedId) {
+        return null;
+      }
+      return this.labels.find(({ id }) => id === this.selectedId);
+    },
+    columnForSelected() {
+      return this.getListByLabelId(this.selectedId);
+    },
+  },
+  created() {
+    this.filterItems();
+  },
+  methods: {
+    ...mapActions(['createList', 'fetchLabels', 'highlightList', 'setAddColumnFormVisibility']),
+    highlight(listId) {
+      if (this.shouldUseGraphQL) {
+        this.highlightList(listId);
+      } else {
+        const list = boardsStore.state.lists.find(({ id }) => id === listId);
+        list.highlighted = true;
+        setTimeout(() => {
+          list.highlighted = false;
+        }, 2000);
+      }
+    },
+    addList() {
+      if (!this.selectedLabel) {
+        return;
+      }
+
+      this.setAddColumnFormVisibility(false);
+
+      if (this.columnForSelected) {
+        const listId = this.columnForSelected.id;
+        this.highlight(listId);
+        return;
+      }
+
+      if (this.shouldUseGraphQL) {
+        this.createList({ labelId: this.selectedId });
+      } else {
+        const listObj = {
+          labelId: getIdFromGraphQLId(this.selectedId),
+          title: this.selectedLabel.title,
+          position: boardsStore.state.lists.length - 2,
+          list_type: ListType.label,
+          label: this.selectedLabel,
+        };
+
+        boardsStore.new(listObj);
+      }
+    },
+
+    filterItems(searchTerm) {
+      this.fetchLabels(searchTerm);
+    },
+
+    showScopedLabels(label) {
+      return this.scopedLabelsAvailable && isScopedLabel(label);
+    },
+  },
+};
+</script>
+
+<template>
+  <board-add-new-column-form
+    :loading="labelsLoading"
+    :form-description="__('A label list displays issues with the selected label.')"
+    :search-label="__('Select label')"
+    :search-placeholder="__('Search labels')"
+    :selected-id="selectedId"
+    @filter-items="filterItems"
+    @add-list="addList"
+  >
+    <template slot="selected">
+      <gl-label
+        v-if="selectedLabel"
+        v-gl-tooltip
+        :title="selectedLabel.title"
+        :description="selectedLabel.description"
+        :background-color="selectedLabel.color"
+        :scoped="showScopedLabels(selectedLabel)"
+      />
+    </template>
+
+    <template slot="items">
+      <gl-form-radio-group
+        v-if="labels.length > 0"
+        v-model="selectedId"
+        class="gl-overflow-y-auto gl-px-5 gl-pt-3"
+      >
+        <label
+          v-for="label in labels"
+          :key="label.id"
+          class="gl-display-flex gl-flex-align-items-center gl-mb-5 gl-font-weight-normal"
+        >
+          <gl-form-radio :value="label.id" class="gl-mb-0" />
+          <span
+            class="dropdown-label-box gl-top-0"
+            :style="{
+              backgroundColor: label.color,
+            }"
+          ></span>
+          <span>{{ label.title }}</span>
+        </label>
+      </gl-form-radio-group>
+    </template>
+  </board-add-new-column-form>
+</template>