summaryrefslogtreecommitdiff
path: root/app/assets/javascripts/boards/components
diff options
context:
space:
mode:
authorGitLab Bot <gitlab-bot@gitlab.com>2020-08-20 18:42:06 +0000
committerGitLab Bot <gitlab-bot@gitlab.com>2020-08-20 18:42:06 +0000
commit6e4e1050d9dba2b7b2523fdd1768823ab85feef4 (patch)
tree78be5963ec075d80116a932011d695dd33910b4e /app/assets/javascripts/boards/components
parent1ce776de4ae122aba3f349c02c17cebeaa8ecf07 (diff)
downloadgitlab-ce-6e4e1050d9dba2b7b2523fdd1768823ab85feef4.tar.gz
Add latest changes from gitlab-org/gitlab@13-3-stable-ee
Diffstat (limited to 'app/assets/javascripts/boards/components')
-rw-r--r--app/assets/javascripts/boards/components/board_column.vue2
-rw-r--r--app/assets/javascripts/boards/components/board_content.vue7
-rw-r--r--app/assets/javascripts/boards/components/board_form.vue2
-rw-r--r--app/assets/javascripts/boards/components/board_list.vue2
-rw-r--r--app/assets/javascripts/boards/components/board_list_header.vue4
-rw-r--r--app/assets/javascripts/boards/components/board_new_issue.vue2
-rw-r--r--app/assets/javascripts/boards/components/board_settings_sidebar.vue92
-rw-r--r--app/assets/javascripts/boards/components/board_sidebar.js2
-rw-r--r--app/assets/javascripts/boards/components/boards_selector.vue50
-rw-r--r--app/assets/javascripts/boards/components/issue_due_date.vue6
-rw-r--r--app/assets/javascripts/boards/components/issue_time_estimate.vue7
-rw-r--r--app/assets/javascripts/boards/components/modal/footer.vue2
-rw-r--r--app/assets/javascripts/boards/components/modal/header.vue2
-rw-r--r--app/assets/javascripts/boards/components/modal/tabs.vue2
-rw-r--r--app/assets/javascripts/boards/components/new_list_dropdown.js2
-rw-r--r--app/assets/javascripts/boards/components/project_select.vue4
-rw-r--r--app/assets/javascripts/boards/components/sidebar/remove_issue.vue10
17 files changed, 145 insertions, 53 deletions
diff --git a/app/assets/javascripts/boards/components/board_column.vue b/app/assets/javascripts/boards/components/board_column.vue
index 0ed7579e8e1..dae24338e45 100644
--- a/app/assets/javascripts/boards/components/board_column.vue
+++ b/app/assets/javascripts/boards/components/board_column.vue
@@ -1,10 +1,10 @@
<script>
import Sortable from 'sortablejs';
import isWipLimitsOn from 'ee_else_ce/boards/mixins/is_wip_limits';
+import BoardListHeader from 'ee_else_ce/boards/components/board_list_header.vue';
import Tooltip from '~/vue_shared/directives/tooltip';
import EmptyComponent from '~/vue_shared/components/empty_component';
import BoardBlankState from './board_blank_state.vue';
-import BoardListHeader from 'ee_else_ce/boards/components/board_list_header.vue';
import BoardList from './board_list.vue';
import boardsStore from '../stores/boards_store';
import eventHub from '../eventhub';
diff --git a/app/assets/javascripts/boards/components/board_content.vue b/app/assets/javascripts/boards/components/board_content.vue
index 6ac7fdce6a7..c42295792f1 100644
--- a/app/assets/javascripts/boards/components/board_content.vue
+++ b/app/assets/javascripts/boards/components/board_content.vue
@@ -1,8 +1,8 @@
<script>
import { mapState } from 'vuex';
-import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
import BoardColumn from 'ee_else_ce/boards/components/board_column.vue';
import EpicsSwimlanes from 'ee_component/boards/components/epics_swimlanes.vue';
+import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
export default {
components: {
@@ -42,7 +42,7 @@ export default {
},
},
computed: {
- ...mapState(['isShowingEpicsSwimlanes']),
+ ...mapState(['isShowingEpicsSwimlanes', 'boardLists']),
isSwimlanesOn() {
return this.glFeatures.boardsWithSwimlanes && this.isShowingEpicsSwimlanes;
},
@@ -73,11 +73,12 @@ export default {
<epics-swimlanes
v-else
ref="swimlanes"
- :lists="lists"
+ :lists="boardLists"
:can-admin-list="canAdminList"
:disabled="disabled"
:board-id="boardId"
:group-id="groupId"
+ :root-path="rootPath"
/>
</div>
</template>
diff --git a/app/assets/javascripts/boards/components/board_form.vue b/app/assets/javascripts/boards/components/board_form.vue
index fbe221041c1..231059b895e 100644
--- a/app/assets/javascripts/boards/components/board_form.vue
+++ b/app/assets/javascripts/boards/components/board_form.vue
@@ -1,6 +1,6 @@
<script>
import { __ } from '~/locale';
-import Flash from '~/flash';
+import { deprecatedCreateFlash as Flash } from '~/flash';
import DeprecatedModal from '~/vue_shared/components/deprecated_modal.vue';
import { visitUrl } from '~/lib/utils/url_utility';
import boardsStore from '~/boards/stores/boards_store';
diff --git a/app/assets/javascripts/boards/components/board_list.vue b/app/assets/javascripts/boards/components/board_list.vue
index 4270ad5783d..1a26782f6f0 100644
--- a/app/assets/javascripts/boards/components/board_list.vue
+++ b/app/assets/javascripts/boards/components/board_list.vue
@@ -6,7 +6,7 @@ import boardCard from './board_card.vue';
import eventHub from '../eventhub';
import boardsStore from '../stores/boards_store';
import { sprintf, __ } from '~/locale';
-import createFlash from '~/flash';
+import { deprecatedCreateFlash as createFlash } from '~/flash';
import {
getBoardSortableDefaultOptions,
sortableStart,
diff --git a/app/assets/javascripts/boards/components/board_list_header.vue b/app/assets/javascripts/boards/components/board_list_header.vue
index 02a04cb4e46..bafe07afb48 100644
--- a/app/assets/javascripts/boards/components/board_list_header.vue
+++ b/app/assets/javascripts/boards/components/board_list_header.vue
@@ -241,7 +241,7 @@ export default {
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-700"
+ class="board-header-collapsed-info-icon gl-mt-2 gl-cursor-pointer gl-text-gray-500"
>
<gl-icon name="information" />
</span>
@@ -282,7 +282,7 @@ export default {
<div
v-if="showBoardListAndBoardInfo"
class="issue-count-badge gl-display-inline-flex gl-pr-0 no-drag text-secondary"
- :class="{ 'gl-display-none': !list.isExpanded && isSwimlanesHeader }"
+ :class="{ 'gl-display-none!': !list.isExpanded && isSwimlanesHeader }"
>
<span class="gl-display-inline-flex">
<gl-tooltip :target="() => $refs.issueCount" :title="issuesTooltipLabel" />
diff --git a/app/assets/javascripts/boards/components/board_new_issue.vue b/app/assets/javascripts/boards/components/board_new_issue.vue
index 02ac45f8ef9..34e8438ba4c 100644
--- a/app/assets/javascripts/boards/components/board_new_issue.vue
+++ b/app/assets/javascripts/boards/components/board_new_issue.vue
@@ -119,7 +119,7 @@ export default {
autocomplete="off"
/>
<project-select v-if="groupId" :group-id="groupId" :list="list" />
- <div class="clearfix prepend-top-10">
+ <div class="clearfix gl-mt-3">
<gl-button
ref="submit-button"
:disabled="disabled"
diff --git a/app/assets/javascripts/boards/components/board_settings_sidebar.vue b/app/assets/javascripts/boards/components/board_settings_sidebar.vue
new file mode 100644
index 00000000000..3149762ecdf
--- /dev/null
+++ b/app/assets/javascripts/boards/components/board_settings_sidebar.vue
@@ -0,0 +1,92 @@
+<script>
+import { GlDrawer, GlLabel } from '@gitlab/ui';
+import { mapActions, mapState } from 'vuex';
+import { __ } from '~/locale';
+import boardsStore from '~/boards/stores/boards_store';
+import eventHub from '~/sidebar/event_hub';
+import { isScopedLabel } from '~/lib/utils/common_utils';
+import { inactiveId } from '~/boards/constants';
+
+// NOTE: need to revisit how we handle headerHeight, because we have so many different header and footer options.
+export default {
+ headerHeight: process.env.NODE_ENV === 'development' ? '75px' : '40px',
+ listSettingsText: __('List settings'),
+ assignee: 'assignee',
+ milestone: 'milestone',
+ label: 'label',
+ labelListText: __('Label'),
+ components: {
+ GlDrawer,
+ GlLabel,
+ BoardSettingsSidebarWipLimit: () =>
+ import('ee_component/boards/components/board_settings_wip_limit.vue'),
+ BoardSettingsListTypes: () =>
+ import('ee_component/boards/components/board_settings_list_types.vue'),
+ },
+ computed: {
+ ...mapState(['activeId']),
+ activeList() {
+ /*
+ Warning: Though a computed property it is not reactive because we are
+ referencing a List Model class. Reactivity only applies to plain JS objects
+ */
+ return boardsStore.state.lists.find(({ id }) => id === this.activeId);
+ },
+ isSidebarOpen() {
+ return this.activeId !== inactiveId;
+ },
+ activeListLabel() {
+ return this.activeList.label;
+ },
+ boardListType() {
+ return this.activeList.type || null;
+ },
+ listTypeTitle() {
+ return this.$options.labelListText;
+ },
+ },
+ created() {
+ eventHub.$on('sidebar.closeAll', this.closeSidebar);
+ },
+ beforeDestroy() {
+ eventHub.$off('sidebar.closeAll', this.closeSidebar);
+ },
+ methods: {
+ ...mapActions(['setActiveId']),
+ closeSidebar() {
+ this.setActiveId(inactiveId);
+ },
+ showScopedLabels(label) {
+ return boardsStore.scopedLabels.enabled && isScopedLabel(label);
+ },
+ },
+};
+</script>
+
+<template>
+ <gl-drawer
+ class="js-board-settings-sidebar"
+ :open="isSidebarOpen"
+ :header-height="$options.headerHeight"
+ @close="closeSidebar"
+ >
+ <template #header>{{ $options.listSettingsText }}</template>
+ <template v-if="isSidebarOpen">
+ <div v-if="boardListType === $options.label">
+ <label class="js-list-label gl-display-block">{{ listTypeTitle }}</label>
+ <gl-label
+ :title="activeListLabel.title"
+ :background-color="activeListLabel.color"
+ :scoped="showScopedLabels(activeListLabel)"
+ />
+ </div>
+
+ <board-settings-list-types
+ v-else
+ :active-list="activeList"
+ :board-list-type="boardListType"
+ />
+ <board-settings-sidebar-wip-limit :max-issue-count="activeList.maxIssueCount" />
+ </template>
+ </gl-drawer>
+</template>
diff --git a/app/assets/javascripts/boards/components/board_sidebar.js b/app/assets/javascripts/boards/components/board_sidebar.js
index 056a7b48212..3790c494085 100644
--- a/app/assets/javascripts/boards/components/board_sidebar.js
+++ b/app/assets/javascripts/boards/components/board_sidebar.js
@@ -3,7 +3,7 @@
import $ from 'jquery';
import Vue from 'vue';
import { GlLabel } from '@gitlab/ui';
-import Flash from '~/flash';
+import { deprecatedCreateFlash as Flash } from '~/flash';
import { sprintf, __ } from '~/locale';
import Sidebar from '~/right_sidebar';
import eventHub from '~/sidebar/event_hub';
diff --git a/app/assets/javascripts/boards/components/boards_selector.vue b/app/assets/javascripts/boards/components/boards_selector.vue
index dbe3e0790f6..48f6ba6cfc7 100644
--- a/app/assets/javascripts/boards/components/boards_selector.vue
+++ b/app/assets/javascripts/boards/components/boards_selector.vue
@@ -3,10 +3,10 @@ import { throttle } from 'lodash';
import {
GlLoadingIcon,
GlSearchBoxByType,
- GlDropdown,
- GlDropdownDivider,
- GlDropdownHeader,
- GlDropdownItem,
+ GlDeprecatedDropdown,
+ GlDeprecatedDropdownDivider,
+ GlDeprecatedDropdownHeader,
+ GlDeprecatedDropdownItem,
} from '@gitlab/ui';
import httpStatusCodes from '~/lib/utils/http_status';
@@ -26,10 +26,10 @@ export default {
BoardForm,
GlLoadingIcon,
GlSearchBoxByType,
- GlDropdown,
- GlDropdownDivider,
- GlDropdownHeader,
- GlDropdownItem,
+ GlDeprecatedDropdown,
+ GlDeprecatedDropdownDivider,
+ GlDeprecatedDropdownHeader,
+ GlDeprecatedDropdownItem,
},
props: {
currentBoard: {
@@ -235,7 +235,7 @@ export default {
<template>
<div class="boards-switcher js-boards-selector gl-mr-3">
<span class="boards-selector-wrapper js-boards-selector-wrapper">
- <gl-dropdown
+ <gl-deprecated-dropdown
data-qa-selector="boards_dropdown"
toggle-class="dropdown-menu-toggle js-dropdown-toggle"
menu-class="flex-column dropdown-extended-height"
@@ -248,9 +248,9 @@ export default {
</div>
</div>
- <gl-dropdown-header class="mt-0">
+ <gl-deprecated-dropdown-header class="mt-0">
<gl-search-box-by-type ref="searchBox" v-model="filterTerm" />
- </gl-dropdown-header>
+ </gl-deprecated-dropdown-header>
<div
v-if="!loading"
@@ -259,26 +259,26 @@ export default {
class="dropdown-content flex-fill"
@scroll.passive="throttledSetScrollFade"
>
- <gl-dropdown-item
+ <gl-deprecated-dropdown-item
v-show="filteredBoards.length === 0"
class="no-pointer-events text-secondary"
>
{{ s__('IssueBoards|No matching boards found') }}
- </gl-dropdown-item>
+ </gl-deprecated-dropdown-item>
<h6 v-if="showRecentSection" class="dropdown-bold-header my-0">
{{ __('Recent') }}
</h6>
<template v-if="showRecentSection">
- <gl-dropdown-item
+ <gl-deprecated-dropdown-item
v-for="recentBoard in recentBoards"
:key="`recent-${recentBoard.id}`"
class="js-dropdown-item"
:href="`${boardBaseUrl}/${recentBoard.id}`"
>
{{ recentBoard.name }}
- </gl-dropdown-item>
+ </gl-deprecated-dropdown-item>
</template>
<hr v-if="showRecentSection" class="my-1" />
@@ -287,21 +287,21 @@ export default {
{{ __('All') }}
</h6>
- <gl-dropdown-item
+ <gl-deprecated-dropdown-item
v-for="otherBoard in filteredBoards"
:key="otherBoard.id"
class="js-dropdown-item"
:href="`${boardBaseUrl}/${otherBoard.id}`"
>
{{ otherBoard.name }}
- </gl-dropdown-item>
- <gl-dropdown-item v-if="hasMissingBoards" class="small unclickable">
+ </gl-deprecated-dropdown-item>
+ <gl-deprecated-dropdown-item v-if="hasMissingBoards" class="small unclickable">
{{
s__(
'IssueBoards|Some of your boards are hidden, activate a license to see them again.',
)
}}
- </gl-dropdown-item>
+ </gl-deprecated-dropdown-item>
</div>
<div
@@ -313,25 +313,25 @@ export default {
<gl-loading-icon v-if="loading" />
<div v-if="canAdminBoard">
- <gl-dropdown-divider />
+ <gl-deprecated-dropdown-divider />
- <gl-dropdown-item
+ <gl-deprecated-dropdown-item
v-if="multipleIssueBoardsAvailable"
data-qa-selector="create_new_board_button"
@click.prevent="showPage('new')"
>
{{ s__('IssueBoards|Create new board') }}
- </gl-dropdown-item>
+ </gl-deprecated-dropdown-item>
- <gl-dropdown-item
+ <gl-deprecated-dropdown-item
v-if="showDelete"
class="text-danger js-delete-board"
@click.prevent="showPage('delete')"
>
{{ s__('IssueBoards|Delete board') }}
- </gl-dropdown-item>
+ </gl-deprecated-dropdown-item>
</div>
- </gl-dropdown>
+ </gl-deprecated-dropdown>
<board-form
v-if="currentPage"
diff --git a/app/assets/javascripts/boards/components/issue_due_date.vue b/app/assets/javascripts/boards/components/issue_due_date.vue
index 1d70c635c18..4add5ee646a 100644
--- a/app/assets/javascripts/boards/components/issue_due_date.vue
+++ b/app/assets/javascripts/boards/components/issue_due_date.vue
@@ -87,11 +87,7 @@ export default {
<template>
<span>
<span ref="issueDueDate" :class="cssClass" class="board-card-info card-number">
- <icon
- :class="{ 'text-danger': isPastDue }"
- class="board-card-info-icon align-top"
- name="calendar"
- />
+ <icon :class="{ 'text-danger': isPastDue }" class="board-card-info-icon" name="calendar" />
<time :class="{ 'text-danger': isPastDue }" datetime="date" class="board-card-info-text">{{
body
}}</time>
diff --git a/app/assets/javascripts/boards/components/issue_time_estimate.vue b/app/assets/javascripts/boards/components/issue_time_estimate.vue
index 5c33ba9461c..e8b7689da13 100644
--- a/app/assets/javascripts/boards/components/issue_time_estimate.vue
+++ b/app/assets/javascripts/boards/components/issue_time_estimate.vue
@@ -34,10 +34,9 @@ export default {
<template>
<span>
<span ref="issueTimeEstimate" class="board-card-info card-number">
- <icon name="hourglass" class="board-card-info-icon align-top" /><time
- class="board-card-info-text"
- >{{ timeEstimate }}</time
- >
+ <icon name="hourglass" class="board-card-info-icon" /><time class="board-card-info-text">{{
+ timeEstimate
+ }}</time>
</span>
<gl-tooltip
:target="() => $refs.issueTimeEstimate"
diff --git a/app/assets/javascripts/boards/components/modal/footer.vue b/app/assets/javascripts/boards/components/modal/footer.vue
index 5f100c617a0..c4953dda793 100644
--- a/app/assets/javascripts/boards/components/modal/footer.vue
+++ b/app/assets/javascripts/boards/components/modal/footer.vue
@@ -1,6 +1,6 @@
<script>
import footerEEMixin from 'ee_else_ce/boards/mixins/modal_footer';
-import Flash from '../../../flash';
+import { deprecatedCreateFlash as Flash } from '../../../flash';
import { __, n__ } from '../../../locale';
import ListsDropdown from './lists_dropdown.vue';
import ModalStore from '../../stores/modal_store';
diff --git a/app/assets/javascripts/boards/components/modal/header.vue b/app/assets/javascripts/boards/components/modal/header.vue
index 8eae8e4726f..573284d2b44 100644
--- a/app/assets/javascripts/boards/components/modal/header.vue
+++ b/app/assets/javascripts/boards/components/modal/header.vue
@@ -67,7 +67,7 @@ export default {
</h2>
</header>
<modal-tabs v-if="!loading && issuesCount > 0" />
- <div v-if="showSearch" class="d-flex append-bottom-10">
+ <div v-if="showSearch" class="d-flex gl-mb-3">
<modal-filters :store="filter" />
<button
ref="selectAllBtn"
diff --git a/app/assets/javascripts/boards/components/modal/tabs.vue b/app/assets/javascripts/boards/components/modal/tabs.vue
index ed67206218e..a71fda9d7c5 100644
--- a/app/assets/javascripts/boards/components/modal/tabs.vue
+++ b/app/assets/javascripts/boards/components/modal/tabs.vue
@@ -19,7 +19,7 @@ export default {
};
</script>
<template>
- <div class="top-area prepend-top-10 append-bottom-10">
+ <div class="top-area gl-mt-3 gl-mb-3">
<ul class="nav-links issues-state-filters">
<li :class="{ active: activeTab == 'all' }">
<a href="#" role="button" @click.prevent="changeTab('all')">
diff --git a/app/assets/javascripts/boards/components/new_list_dropdown.js b/app/assets/javascripts/boards/components/new_list_dropdown.js
index 229bb82152b..2b9fdf11b37 100644
--- a/app/assets/javascripts/boards/components/new_list_dropdown.js
+++ b/app/assets/javascripts/boards/components/new_list_dropdown.js
@@ -3,7 +3,7 @@
import $ from 'jquery';
import { __ } from '~/locale';
import axios from '~/lib/utils/axios_utils';
-import flash from '~/flash';
+import { deprecatedCreateFlash as flash } from '~/flash';
import CreateLabelDropdown from '../../create_label';
import boardsStore from '../stores/boards_store';
diff --git a/app/assets/javascripts/boards/components/project_select.vue b/app/assets/javascripts/boards/components/project_select.vue
index 8fd377938b4..598e92726c1 100644
--- a/app/assets/javascripts/boards/components/project_select.vue
+++ b/app/assets/javascripts/boards/components/project_select.vue
@@ -64,10 +64,10 @@ export default {
this.groupId,
term,
{
- search_namespaces: true,
with_issues_enabled: true,
with_shared: false,
include_subgroups: true,
+ order_by: 'similarity',
...additionalAttrs,
},
projects => {
@@ -97,7 +97,7 @@ export default {
<template>
<div>
- <label class="label-bold prepend-top-10">{{ __('Project') }}</label>
+ <label class="label-bold gl-mt-3">{{ __('Project') }}</label>
<div ref="projectsDropdown" class="dropdown dropdown-projects">
<button
class="dropdown-menu-toggle wide"
diff --git a/app/assets/javascripts/boards/components/sidebar/remove_issue.vue b/app/assets/javascripts/boards/components/sidebar/remove_issue.vue
index 71e5d8058da..4e5a6609042 100644
--- a/app/assets/javascripts/boards/components/sidebar/remove_issue.vue
+++ b/app/assets/javascripts/boards/components/sidebar/remove_issue.vue
@@ -1,10 +1,14 @@
<script>
+import { GlButton } from '@gitlab/ui';
import axios from '~/lib/utils/axios_utils';
-import Flash from '../../../flash';
+import { deprecatedCreateFlash as Flash } from '../../../flash';
import { __ } from '../../../locale';
import boardsStore from '../../stores/boards_store';
export default {
+ components: {
+ GlButton,
+ },
props: {
issue: {
type: Object,
@@ -75,8 +79,8 @@ export default {
</script>
<template>
<div class="block list">
- <button class="btn btn-default btn-block" type="button" @click="removeIssue">
+ <gl-button variant="default" category="secondary" block="block" @click="removeIssue">
{{ __('Remove from board') }}
- </button>
+ </gl-button>
</div>
</template>