Skip to content

G
gitlab-ce
Commit 3621ff92 authored by Kushal Pandya's avatar Kushal Pandya
Browse files
Options

Merge branch 'winh-extract-board-scope-component' into 'master' 

Extract BoardScope component

See merge request gitlab-org/gitlab-ee!14556
parents 70088db2 3ef9daf2
Hide whitespace changes
Inline Side-by-side
Showing with 227 additions and 121 deletions
ee/app/assets/javascripts/boards/components/board_form.vue
View file @ 3621ff92
<script> <script>
/* global ListLabel */
import Flash from '~/flash'; import Flash from '~/flash';
import DeprecatedModal from '~/vue_shared/components/deprecated_modal.vue'; import DeprecatedModal from '~/vue_shared/components/deprecated_modal.vue';
import BoardLabelsSelect from '~/vue_shared/components/sidebar/labels_select/base.vue'; import BoardScope from './board_scope.vue';
import { visitUrl } from '~/lib/utils/url_utility'; import { visitUrl } from '~/lib/utils/url_utility';
import BoardMilestoneSelect from './milestone_select.vue';
import BoardWeightSelect from './weight_select.vue';
import AssigneeSelect from './assignee_select.vue';
import boardsStore from '~/boards/stores/boards_store'; import boardsStore from '~/boards/stores/boards_store';
const boardDefaults = { const boardDefaults = {
...@@ -22,10 +17,7 @@ const boardDefaults = { ...@@ -22,10 +17,7 @@ const boardDefaults = {
export default { export default {
components: { components: {
AssigneeSelect, BoardScope,
BoardLabelsSelect,
BoardMilestoneSelect,
BoardWeightSelect,
DeprecatedModal, DeprecatedModal,
}, },
props: { props: {
...@@ -75,12 +67,8 @@ export default { ...@@ -75,12 +67,8 @@ export default {
data() { data() {
return { return {
board: { ...boardDefaults, ...this.currentBoard }, board: { ...boardDefaults, ...this.currentBoard },
expanded: false,
issue: {},
currentBoard: boardsStore.state.currentBoard, currentBoard: boardsStore.state.currentBoard,
currentPage: boardsStore.state.currentPage, currentPage: boardsStore.state.currentPage,
milestones: [],
milestoneDropdownOpen: false,
isLoading: false, isLoading: false,
}; };
}, },
...@@ -127,12 +115,6 @@ export default { ...@@ -127,12 +115,6 @@ export default {
} }
return 'Edit board'; return 'Edit board';
}, },
expandButtonText() {
return this.expanded ? 'Collapse' : 'Expand';
},
collapseScope() {
return this.isNewForm;
},
readonly() { readonly() {
return !this.canAdminBoard; return !this.canAdminBoard;
}, },
...@@ -147,24 +129,6 @@ export default { ...@@ -147,24 +129,6 @@ export default {
} }
}, },
methods: { methods: {
handleLabelClick(label) {
if (label.isAny) {
this.board.labels = [];
} else if (!this.board.labels.find(l => l.id === label.id)) {
this.board.labels.push(
new ListLabel({
id: label.id,
title: label.title,
color: label.color[0],
textColor: label.text_color,
}),
);
} else {
let { labels } = this.board;
labels = labels.filter(selected => selected.id !== label.id);
this.board.labels = labels;
}
},
submit() { submit() {
if (this.board.name.length === 0) return; if (this.board.name.length === 0) return;
this.isLoading = true; this.isLoading = true;
...@@ -233,56 +197,20 @@ export default { ...@@ -233,56 +197,20 @@ export default {
@keyup.enter="submit" @keyup.enter="submit"
/> />
</div> </div>
<div v-if="scopedIssueBoardFeatureEnabled">
<div v-if="canAdminBoard" class="media append-bottom-10">
<label class="form-section-title label-bold media-body"> Board scope </label>
<button v-if="collapseScope" type="button" class="btn" @click="expanded = !expanded">
{{ expandButtonText }}
</button>
</div>
<p class="text-secondary append-bottom-10">
Board scope affects which issues are displayed for anyone who visits this board
</p>
<div v-if="!collapseScope || expanded">
<board-milestone-select
:board="board"
:milestone-path="milestonePath"
:can-edit="canAdminBoard"
/>
<board-labels-select
:context="board"
:labels-path="labelsPath"
:can-edit="canAdminBoard"
:scoped-labels-documentation-link="scopedLabelsDocumentationLink"
:enable-scoped-labels="enableScopedLabels"
ability-name="issue"
@onLabelClick="handleLabelClick"
>
{{ __('Any Label') }}
</board-labels-select>
<assignee-select <board-scope
:board="board" v-if="scopedIssueBoardFeatureEnabled"
:selected="board.assignee" :collapse-scope="isNewForm"
:can-edit="canAdminBoard" :board="board"
:project-id="projectId" :can-admin-board="canAdminBoard"
:group-id="groupId" :milestone-path="milestonePath"
any-user-text="Any assignee" :labels-path="labelsPath"
field-name="assignee_id" :scoped-labels-documentation-link="scopedLabelsDocumentationLink"
label="Assignee" :enable-scoped-labels="enableScopedLabels"
placeholder-text="Select assignee" :project-id="projectId"
wrapper-class="assignee" :group-id="groupId"
/> :weights="weights"
/>
<board-weight-select
v-model="board.weight"
:board="board"
:weights="weights"
:can-edit="canAdminBoard"
/>
</div>
</div>
</form> </form>
</template> </template>
</deprecated-modal> </deprecated-modal>
......
ee/app/assets/javascripts/boards/components/board_scope.vue 0 → 100644
View file @ 3621ff92
<script>
import ListLabel from '~/boards/models/label';
import BoardLabelsSelect from '~/vue_shared/components/sidebar/labels_select/base.vue';
import BoardMilestoneSelect from './milestone_select.vue';
import BoardWeightSelect from './weight_select.vue';
import AssigneeSelect from './assignee_select.vue';
export default {
components: {
AssigneeSelect,
BoardLabelsSelect,
BoardMilestoneSelect,
BoardWeightSelect,
},
props: {
collapseScope: {
type: Boolean,
required: true,
},
canAdminBoard: {
type: Boolean,
required: true,
},
board: {
type: Object,
required: true,
},
milestonePath: {
type: String,
required: true,
},
labelsPath: {
type: String,
required: true,
},
scopedLabelsDocumentationLink: {
type: String,
required: false,
default: '#',
},
enableScopedLabels: {
type: Boolean,
required: false,
default: false,
},
projectId: {
type: Number,
required: false,
default: 0,
},
groupId: {
type: Number,
required: false,
default: 0,
},
weights: {
type: Array,
required: false,
default: () => [],
},
},
data() {
return {
expanded: false,
};
},
computed: {
expandButtonText() {
return this.expanded ? 'Collapse' : 'Expand';
},
},
methods: {
handleLabelClick(label) {
if (label.isAny) {
this.board.labels = [];
} else if (!this.board.labels.find(l => l.id === label.id)) {
this.board.labels.push(
new ListLabel({
id: label.id,
title: label.title,
color: label.color[0],
textColor: label.text_color,
}),
);
} else {
let { labels } = this.board;
labels = labels.filter(selected => selected.id !== label.id);
this.board.labels = labels;
}
},
},
};
</script>
<template>
<div>
<div v-if="canAdminBoard" class="media append-bottom-10">
<label class="form-section-title label-bold media-body"> Board scope </label>
<button v-if="collapseScope" type="button" class="btn" @click="expanded = !expanded">
{{ expandButtonText }}
</button>
</div>
<p class="text-secondary append-bottom-10">
Board scope affects which issues are displayed for anyone who visits this board
</p>
<div v-if="!collapseScope || expanded">
<board-milestone-select
:board="board"
:milestone-path="milestonePath"
:can-edit="canAdminBoard"
/>
<board-labels-select
:context="board"
:labels-path="labelsPath"
:can-edit="canAdminBoard"
:scoped-labels-documentation-link="scopedLabelsDocumentationLink"
:enable-scoped-labels="enableScopedLabels"
ability-name="issue"
@onLabelClick="handleLabelClick"
>
{{ __('Any Label') }}
</board-labels-select>
<assignee-select
:board="board"
:selected="board.assignee"
:can-edit="canAdminBoard"
:project-id="projectId"
:group-id="groupId"
any-user-text="Any assignee"
field-name="assignee_id"
label="Assignee"
placeholder-text="Select assignee"
wrapper-class="assignee"
/>
<board-weight-select
v-model="board.weight"
:board="board"
:weights="weights"
:can-edit="canAdminBoard"
/>
</div>
</div>
</template>
ee/spec/frontend/boards/components/board_scope_spec.js 0 → 100644
View file @ 3621ff92
import { createLocalVue, mount } from '@vue/test-utils';
import BoardScope from 'ee/boards/components/board_scope.vue';
import { TEST_HOST } from 'helpers/test_constants';
describe('BoardScope', () => {
let wrapper;
let vm;
beforeEach(() => {
const localVue = createLocalVue();
const propsData = {
collapseScope: false,
canAdminBoard: false,
board: {
labels: [],
assignee: {},
},
milestonePath: `${TEST_HOST}/milestones`,
labelsPath: `${TEST_HOST}/labels`,
};
wrapper = mount(BoardScope, {
propsData,
localVue,
sync: false,
});
({ vm } = wrapper);
});
afterEach(() => {
wrapper.destroy();
});
describe('methods', () => {
describe('handleLabelClick', () => {
const label = {
id: 1,
title: 'Foo',
color: ['#BADA55'],
text_color: '#FFFFFF',
};
it('initializes `board.labels` as empty array when `label.isAny` is `true`', () => {
const labelIsAny = { isAny: true };
vm.handleLabelClick(labelIsAny);
expect(Array.isArray(vm.board.labels)).toBe(true);
expect(vm.board.labels.length).toBe(0);
});
it('adds provided `label` to board.labels', () => {
vm.handleLabelClick(label);
expect(vm.board.labels.length).toBe(1);
expect(vm.board.labels[0].id).toBe(label.id);
vm.handleLabelClick(label);
});
});
});
});
ee/spec/javascripts/boards/components/board_form_spec.js
View file @ 3621ff92
...@@ -24,40 +24,6 @@ describe('board_form.vue', () => { ...@@ -24,40 +24,6 @@ describe('board_form.vue', () => {
}); });
describe('methods', () => { describe('methods', () => {
describe('handleLabelClick', () => {
const label = {
id: 1,
title: 'Foo',
color: ['#BADA55'],
text_color: '#FFFFFF',
};
it('initializes `board.labels` as empty array when `label.isAny` is `true`', () => {
const labelIsAny = { isAny: true };
vm.handleLabelClick(labelIsAny);
expect(Array.isArray(vm.board.labels)).toBe(true);
expect(vm.board.labels.length).toBe(0);
});
it('adds provided `label` to board.labels', () => {
vm.handleLabelClick(label);
expect(vm.board.labels.length).toBe(1);
expect(vm.board.labels[0].id).toBe(label.id);
vm.handleLabelClick(label);
});
it('filters board.labels to exclude provided `label` if it is already present in `board.labels`', () => {
const label2 = Object.assign({}, label, { id: 2 });
vm.handleLabelClick(label);
vm.handleLabelClick(label2);
expect(vm.board.labels.length).toBe(1);
expect(vm.board.labels[0].id).toBe(label2.id);
});
});
describe('cancel', () => { describe('cancel', () => {
it('resets currentPage', done => { it('resets currentPage', done => {
vm.cancel(); vm.cancel();
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7