Commit e50be6b3 authored by Florie Guibert's avatar Florie Guibert Committed by Enrique Alcántara

Refactor weight select in board scope

Prevent mutating props and make selector more consistent with other
selectors
Changelog: changed
MR: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/67928/
EE: true
parent 0cf05541
......@@ -312,6 +312,9 @@ export default {
id: milestoneId,
});
},
setWeight(weight) {
this.$set(this.board, 'weight', weight);
},
},
};
</script>
......@@ -381,6 +384,7 @@ export default {
@set-board-labels="setBoardLabels"
@set-assignee="setAssignee"
@set-milestone="setMilestone"
@set-weight="setWeight"
/>
</form>
</gl-modal>
......
......@@ -30,7 +30,7 @@ export default {
<gl-button
category="tertiary"
size="small"
class="float-right gl-text-gray-900! js-sidebar-dropdown-toggle gl-mr-n2"
class="float-right js-sidebar-dropdown-toggle gl-mr-n2"
data-qa-selector="labels_edit_button"
@click="toggleDropdownContents"
>
......
......@@ -162,8 +162,9 @@ export default {
{{ $options.i18n.label }}
<gl-button
v-if="canEdit"
variant="link"
class="edit-link float-right gl-text-gray-900!"
category="tertiary"
size="small"
class="edit-link float-right"
@click="toggleEdit"
>
{{ $options.i18n.edit }}
......
......@@ -141,15 +141,13 @@ export default {
@set-assignee="$emit('set-assignee', $event)"
/>
<!-- eslint-disable vue/no-mutating-props -->
<board-weight-select
v-if="isIssueBoard"
v-model="board.weight"
:board="board"
:weights="weights"
:can-edit="canAdminBoard"
@set-weight="$emit('set-weight', $event)"
/>
<!-- eslint-enable vue/no-mutating-props -->
</div>
</div>
</template>
......@@ -136,8 +136,9 @@ export default {
{{ $options.i18n.label }}
<gl-button
v-if="canEdit"
variant="link"
class="edit-link float-right gl-text-gray-900!"
category="tertiary"
size="small"
class="edit-link float-right"
@click="toggleEdit"
>
{{ $options.i18n.edit }}
......
<script>
import { GlButton, GlDropdown, GlDropdownItem } from '@gitlab/ui';
import { s__ } from '~/locale';
const ANY_WEIGHT = 'Any weight';
const NO_WEIGHT = 'None';
......@@ -28,6 +29,7 @@ export default {
data() {
return {
dropdownHidden: true,
selected: this.board.weight,
};
},
computed: {
......@@ -38,7 +40,7 @@ export default {
return 'bold';
},
valueText() {
const { weight } = this.board;
const weight = this.selected;
if (weight > 0 || weight === 0) return weight.toString();
if (weight === -2) return NO_WEIGHT;
return ANY_WEIGHT;
......@@ -49,10 +51,11 @@ export default {
this.dropdownHidden = false;
this.$refs.dropdown.$children[0].show();
},
selectWeight(weight) {
// eslint-disable-next-line vue/no-mutating-props
this.board.weight = this.weightInt(weight);
selectWeight(rawWeight) {
const weight = this.weightInt(rawWeight);
this.selected = weight;
this.dropdownHidden = true;
this.$emit('set-weight', weight);
},
weightInt(weight) {
if (weight >= 0) {
......@@ -62,6 +65,18 @@ export default {
}
return -1;
},
toggleEdit() {
if (this.dropdownHidden) {
this.showDropdown();
} else {
this.dropdownHidden = true;
}
},
},
i18n: {
label: s__('BoardScope|Weight'),
selectWeight: s__('BoardScope|Select weight'),
edit: s__('BoardScope|Edit'),
},
};
</script>
......@@ -69,24 +84,27 @@ export default {
<template>
<div class="block weight">
<div class="title gl-mb-3">
{{ __('Weight') }}
{{ $options.i18n.label }}
<gl-button
v-if="canEdit"
variant="link"
class="float-right gl-text-gray-800!"
@click="showDropdown"
category="tertiary"
size="small"
class="edit-link float-right"
@click="toggleEdit"
>
{{ __('Edit') }}
{{ $options.i18n.edit }}
</gl-button>
</div>
<div :class="valueClass" :hidden="!dropdownHidden" class="value">{{ valueText }}</div>
<div v-if="dropdownHidden" :class="valueClass" data-testid="selected-weight">
{{ valueText }}
</div>
<gl-dropdown
ref="dropdown"
:hidden="dropdownHidden"
:text="valueText"
block
toggle-class="d-flex justify-content-between"
menu-class="gl-w-full!"
class="gl-w-full"
>
<gl-dropdown-item
v-for="weight in weights"
......
......@@ -230,7 +230,7 @@ RSpec.describe 'Scoped issue boards', :js do
expect(find('[data-testid="selected-milestone"]')).to have_content(milestone.title)
expect(find('[data-testid="selected-assignee"]')).to have_content(user.name)
expect(find('.weight .value')).to have_content(2)
expect(find('[data-testid="selected-weight"]')).to have_content(2)
end
context 'milestone' do
......
......@@ -6,7 +6,7 @@ describe('WeightSelect', () => {
let wrapper;
const editButton = () => wrapper.find(GlButton);
const valueContainer = () => wrapper.find('.value');
const valueContainer = () => wrapper.find('[data-testid="selected-weight"]');
const weightDropdown = () => wrapper.find(GlDropdown);
const getWeightItemAtIndex = (index) => weightDropdown().findAll(GlDropdownItem).at(index);
const defaultProps = {
......@@ -40,7 +40,7 @@ describe('WeightSelect', () => {
});
it('hides the weight dropdown', () => {
expect(weightDropdown().isVisible()).toBeFalsy();
expect(weightDropdown().isVisible()).toBe(false);
});
});
......@@ -50,7 +50,7 @@ describe('WeightSelect', () => {
});
it('does not render the edit button', () => {
expect(editButton().exists()).toBeFalsy();
expect(editButton().exists()).toBe(false);
});
});
......@@ -60,7 +60,7 @@ describe('WeightSelect', () => {
});
it('shows the edit button', () => {
expect(editButton().isVisible()).toBeTruthy();
expect(editButton().isVisible()).toBe(true);
});
describe('and the edit button is clicked', () => {
......@@ -70,11 +70,11 @@ describe('WeightSelect', () => {
describe('and no weight has been selected yet', () => {
it('hides the value text', () => {
expect(valueContainer().isVisible()).toBeFalsy();
expect(valueContainer().exists()).toBe(false);
});
it('shows the weight dropdown', () => {
expect(weightDropdown().isVisible()).toBeTruthy();
expect(weightDropdown().isVisible()).toBe(true);
});
});
......
......@@ -5434,12 +5434,18 @@ msgstr ""
msgid "BoardScope|Select milestone"
msgstr ""
msgid "BoardScope|Select weight"
msgstr ""
msgid "BoardScope|Started"
msgstr ""
msgid "BoardScope|Upcoming"
msgstr ""
msgid "BoardScope|Weight"
msgstr ""
msgid "Boards"
msgstr ""
......
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