Merge branch '335988-sidebar-weight-shows-none-when-setting-weight-to-zero' into 'master'

Fix issue sidebar weight not setting value of 0

See merge request gitlab-org/gitlab!66160

ee/app/assets/javascripts/sidebar/components/weight/sidebar_weight_widget.vue

@@ -2,6 +2,7 @@
 import {
   GlButton,
   GlForm,
+  GlFormGroup,
   GlFormInput,
   GlLoadingIcon,
   GlIcon,
@@ -23,6 +24,7 @@ export default {
   components: {
     GlButton,
     GlForm,
+    GlFormGroup,
     GlFormInput,
     GlIcon,
     GlLoadingIcon,
@@ -65,10 +67,10 @@ export default {
         };
       },
       update(data) {
-        return data.workspace?.issuable?.weight || null;
+        return data.workspace?.issuable?.weight;
       },
       result({ data }) {
-        this.$emit('weightUpdated', data.workspace?.issuable?.weight || null);
+        this.$emit('weightUpdated', data.workspace?.issuable?.weight);
       },
       error() {
         createFlash({
@@ -84,7 +86,7 @@ export default {
       return this.$apollo.queries?.weight?.loading || this.loading;
     },
     hasWeight() {
-      return this.weight !== null;
+      return this.weight != null;
     },
     weightLabel() {
       return this.hasWeight ? this.weight : this.$options.i18n.noWeightLabel;
@@ -106,7 +108,8 @@ export default {
   },
   methods: {
     setWeight(remove) {
-      const weight = remove ? null : this.weight;
+      const shouldRemoveWeight = remove || this.weight === '';
+      const weight = shouldRemoveWeight ? null : this.weight;
       this.loading = true;
       this.$apollo
         .mutate({
@@ -209,13 +212,16 @@ export default {
     </template>
     <template #default>
       <gl-form @submit.prevent="handleFormSubmit()">
+        <gl-form-group :label="__('Weight')" label-for="weight-input" label-sr-only>
           <gl-form-input
+            id="weight-input"
             v-model.number="weight"
             v-autofocusonshow
             type="number"
             min="0"
             :placeholder="$options.i18n.inputPlaceholder"
           />
+        </gl-form-group>
       </gl-form>
     </template>
   </sidebar-editable-item>

ee/spec/features/issues/issue_sidebar_spec.rb

@@ -39,31 +39,39 @@ RSpec.describe 'Issue Sidebar' do
       wait_for_all_requests
     end
 
-    it 'updates weight in sidebar to 1' do
+    it 'updates weight in sidebar to 0' do
       page.within '.weight' do
         click_button 'Edit'
-        find('input').send_keys 1, :enter
+        send_keys 0, :enter
 
-        page.within '[data-testid="sidebar-weight-value"]' do
-          expect(page).to have_content '1'
-        end
+        expect(page).to have_text '0 - remove weight'
       end
     end
 
-    it 'updates weight in sidebar to no weight' do
+    it 'updates weight in sidebar to no weight by clicking `remove weight`' do
       page.within '.weight' do
         click_button 'Edit'
-        find('input').send_keys 1, :enter
+        send_keys 1, :enter
 
-        page.within '[data-testid="sidebar-weight-value"]' do
-          expect(page).to have_content '1'
-        end
+        expect(page).to have_text '1 - remove weight'
 
         click_button 'remove weight'
 
-        page.within '[data-testid="sidebar-weight-value"]' do
-          expect(page).to have_content 'None'
+        expect(page).to have_text 'None'
+      end
     end
+
+    it 'updates weight in sidebar to no weight by setting an empty value' do
+      page.within '.weight' do
+        click_button 'Edit'
+        send_keys 1, :enter
+
+        expect(page).to have_text '1 - remove weight'
+
+        click_button 'Edit'
+        send_keys :backspace, :enter
+
+        expect(page).to have_text 'None'
       end
     end
   end

ee/spec/features/issues/issue_weight_spec.rb

-# frozen_string_literal: true
-
-require 'spec_helper'
-
-RSpec.describe 'Issue weight', :js do
-  let_it_be(:project) { create(:project, :public) }
-  let_it_be(:user) { create(:user) }
-
-  before do
-    project.add_developer(user)
-    sign_in(user)
-  end
-
-  it 'allows user to update weight from none to something' do
-    issue = create(:issue, author: user, project: project)
-
-    visit project_issue_path(project, issue)
-
-    page.within('.weight') do
-      expect(page).to have_content "None"
-
-      click_button 'Edit'
-
-      find('.block.weight input').send_keys 1, :enter
-
-      page.within('[data-testid="sidebar-weight-value"]') do
-        expect(page).to have_content "1"
-      end
-    end
-  end
-
-  it 'allows user to update weight from one value to another' do
-    issue = create(:issue, author: user, project: project, weight: 2)
-
-    visit project_issue_path(project, issue)
-
-    page.within('.weight') do
-      expect(page).to have_content "2"
-
-      click_button 'Edit'
-
-      find('.block.weight input').send_keys 3, :enter
-
-      page.within('[data-testid="sidebar-weight-value"]') do
-        expect(page).to have_content "3"
-      end
-    end
-  end
-
-  it 'allows user to remove weight' do
-    issue = create(:issue, author: user, project: project, weight: 5)
-
-    visit project_issue_path(project, issue)
-
-    page.within('.weight') do
-      expect(page).to have_content "5"
-
-      click_button 'remove weight'
-
-      page.within('[data-testid="sidebar-weight-value"]') do
-        expect(page).to have_content "None"
-      end
-    end
-  end
-end

ee/spec/frontend/sidebar/components/weight/sidebar_weight_widget_spec.js

@@ -87,11 +87,11 @@ describe('Sidebar Weight Widget', () => {
     });
 
     it('toggle is checked', () => {
-      expect(findWeightValue().text()).toBe('1');
+      expect(findWeightValue().text()).toBe('0');
     });
 
     it('emits `weightUpdated` event with a `true` payload', () => {
-      expect(wrapper.emitted('weightUpdated')).toEqual([[1]]);
+      expect(wrapper.emitted('weightUpdated')).toEqual([[0]]);
     });
   });
 

ee/spec/frontend/sidebar/mock_data.js

@@ -179,7 +179,7 @@ export const issueNoWeightResponse = () => ({
 export const issueWeightResponse = () => ({
   data: {
     workspace: {
-      issuable: { id: mockIssueId, weight: 1, __typename: 'Issue' },
+      issuable: { id: mockIssueId, weight: 0, __typename: 'Issue' },
       __typename: 'Project',
     },
   },