Merge branch '292456-refactor-board-scope-weight-select-stop-mutating-props' into 'master'

Refactor weight select in board scope

See merge request gitlab-org/gitlab!67928

app/assets/javascripts/boards/components/board_form.vue

@@ -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>

app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_title.vue

@@ -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"
       >

ee/app/assets/javascripts/boards/components/assignee_select.vue

@@ -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 }}

ee/app/assets/javascripts/boards/components/board_scope.vue

@@ -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>

ee/app/assets/javascripts/boards/components/milestone_select.vue

@@ -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 }}

ee/app/assets/javascripts/boards/components/weight_select.vue

 <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"

ee/spec/features/boards/scoped_issue_board_spec.rb

@@ -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

ee/spec/frontend/boards/components/weight_select_spec.js

@@ -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);
         });
       });
 

locale/gitlab.pot

@@ -5437,12 +5437,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 ""