Merge branch '300647-clean-up-weight-sidebar-board-code' into 'master'

Clean up weight board sidebar related code [RUN AS-IF-FOSS]

See merge request gitlab-org/gitlab!65694

ee/app/assets/javascripts/boards/components/sidebar/board_sidebar_weight_input.vue

-<script>
-import { GlButton, GlForm, GlFormInput } from '@gitlab/ui';
-import { mapGetters, mapActions } from 'vuex';
-import BoardEditableItem from '~/boards/components/sidebar/board_editable_item.vue';
-import { __ } from '~/locale';
-import autofocusonshow from '~/vue_shared/directives/autofocusonshow';
-
-export default {
-  components: {
-    BoardEditableItem,
-    GlForm,
-    GlButton,
-    GlFormInput,
-  },
-  directives: {
-    autofocusonshow,
-  },
-  data() {
-    return {
-      weight: null,
-      loading: false,
-    };
-  },
-  computed: {
-    ...mapGetters(['activeBoardItem', 'projectPathForActiveIssue']),
-    hasWeight() {
-      return this.activeBoardItem.weight > 0;
-    },
-  },
-  watch: {
-    activeBoardItem: {
-      handler(updatedIssue) {
-        this.weight = updatedIssue.weight;
-      },
-      immediate: true,
-    },
-  },
-  methods: {
-    ...mapActions(['setActiveItemWeight', 'setError']),
-    handleFormSubmit() {
-      this.$refs.sidebarItem.collapse({ emitEvent: false });
-      this.setWeight();
-    },
-    async setWeight(provided) {
-      const weight = provided ?? this.weight;
-
-      if (this.loading || weight === this.activeBoardItem.weight) {
-        return;
-      }
-
-      this.loading = true;
-
-      try {
-        await this.setActiveItemWeight({ weight, projectPath: this.projectPathForActiveIssue });
-        this.weight = weight;
-      } catch (e) {
-        this.weight = this.activeBoardItem.weight;
-        this.setError({ message: __('An error occurred when updating the issue weight') });
-      } finally {
-        this.loading = false;
-      }
-    },
-  },
-};
-</script>
-
-<template>
-  <board-editable-item
-    ref="sidebarItem"
-    :title="__('Weight')"
-    :loading="loading"
-    data-testid="sidebar-weight"
-    @close="setWeight()"
-  >
-    <template v-if="hasWeight" #collapsed>
-      <div class="gl-display-flex gl-align-items-center">
-        <strong
-          class="gl-text-gray-900 js-weight-weight-label-value"
-          data-qa-selector="weight_label_value"
-          >{{ activeBoardItem.weight }}</strong
-        >
-        <span class="gl-mx-2">-</span>
-        <gl-button
-          variant="link"
-          class="gl-text-gray-500!"
-          data-testid="reset-button"
-          :disabled="loading"
-          @click="setWeight(0)"
-        >
-          {{ __('remove weight') }}
-        </gl-button>
-      </div>
-    </template>
-    <gl-form @submit.prevent="handleFormSubmit()">
-      <gl-form-input
-        v-model.number="weight"
-        v-autofocusonshow
-        type="number"
-        min="0"
-        :placeholder="__('Enter a number')"
-      />
-    </gl-form>
-  </board-editable-item>
-</template>

ee/app/assets/javascripts/boards/graphql/issue_set_weight.mutation.graphql

-mutation issueSetWeight($input: IssueSetWeightInput!) {
-  issueSetWeight(input: $input) {
-    issue {
-      weight
-    }
-    errors
-  }
-}

ee/spec/frontend/boards/components/sidebar/board_sidebar_weight_input_spec.js

-import { GlFormInput, GlForm } from '@gitlab/ui';
-import { shallowMount } from '@vue/test-utils';
-import BoardSidebarWeightInput from 'ee/boards/components/sidebar/board_sidebar_weight_input.vue';
-import BoardEditableItem from '~/boards/components/sidebar/board_editable_item.vue';
-import { createStore } from '~/boards/stores';
-
-const TEST_WEIGHT = 1;
-const TEST_ISSUE = { id: 'gid://gitlab/Issue/1', iid: 9, weight: 0, referencePath: 'h/b#2' };
-
-describe('ee/boards/components/sidebar/board_sidebar_weight_input.vue', () => {
-  let wrapper;
-  let store;
-
-  afterEach(() => {
-    wrapper.destroy();
-    store = null;
-    wrapper = null;
-  });
-
-  const createWrapper = ({ weight = 0 } = {}) => {
-    store = createStore();
-    store.state.boardItems = { [TEST_ISSUE.id]: { ...TEST_ISSUE, weight } };
-    store.state.activeId = TEST_ISSUE.id;
-
-    wrapper = shallowMount(BoardSidebarWeightInput, {
-      store,
-      provide: {
-        canUpdate: true,
-      },
-      stubs: {
-        'board-editable-item': BoardEditableItem,
-      },
-    });
-  };
-
-  const findWeightForm = () => wrapper.find(GlForm);
-  const findWeightInput = () => wrapper.find(GlFormInput);
-  const findResetButton = () => wrapper.find('[data-testid="reset-button"]');
-  const findCollapsed = () => wrapper.find('[data-testid="collapsed-content"]');
-
-  it('renders "None" when no weight is selected', () => {
-    createWrapper();
-    expect(findCollapsed().text()).toBe('None');
-  });
-
-  it('renders weight with reset button when weight is set', () => {
-    createWrapper({ weight: TEST_WEIGHT });
-    expect(findCollapsed().text()).toContain(TEST_WEIGHT);
-    expect(findResetButton().exists()).toBe(true);
-  });
-
-  describe('when weight is submitted', () => {
-    beforeEach(async () => {
-      createWrapper();
-      jest.spyOn(wrapper.vm, 'setActiveItemWeight');
-      findWeightInput().vm.$emit('input', TEST_WEIGHT);
-      findWeightForm().vm.$emit('submit', { preventDefault: () => {} });
-      store.state.boardItems[TEST_ISSUE.id].weight = TEST_WEIGHT;
-      await wrapper.vm.$nextTick();
-    });
-
-    it('collapses sidebar and renders weight with reset button', () => {
-      expect(findCollapsed().isVisible()).toBe(true);
-      expect(findCollapsed().text()).toContain(TEST_WEIGHT);
-      expect(findResetButton().exists()).toBe(true);
-    });
-
-    it('commits change to the server', () => {
-      expect(wrapper.vm.setActiveItemWeight).toHaveBeenCalledWith({
-        weight: TEST_WEIGHT,
-        projectPath: 'h/b',
-      });
-    });
-  });
-
-  describe('when weight is set to 0', () => {
-    beforeEach(async () => {
-      createWrapper({ weight: TEST_WEIGHT });
-      jest.spyOn(wrapper.vm, 'setActiveItemWeight');
-      findWeightInput().vm.$emit('input', 0);
-      findWeightForm().vm.$emit('submit', { preventDefault: () => {} });
-      store.state.boardItems[TEST_ISSUE.id].weight = 0;
-      await wrapper.vm.$nextTick();
-    });
-
-    it('collapses sidebar and renders "None"', () => {
-      expect(wrapper.vm.setActiveItemWeight).toHaveBeenCalled();
-      expect(findCollapsed().isVisible()).toBe(true);
-      expect(findCollapsed().text()).toBe('None');
-    });
-  });
-
-  describe('when weight is resetted', () => {
-    beforeEach(async () => {
-      createWrapper({ weight: TEST_WEIGHT });
-      jest.spyOn(wrapper.vm, 'setActiveItemWeight');
-      findResetButton().vm.$emit('click');
-      store.state.boardItems[TEST_ISSUE.id].weight = 0;
-      await wrapper.vm.$nextTick();
-    });
-
-    it('collapses sidebar and renders "None"', () => {
-      expect(wrapper.vm.setActiveItemWeight).toHaveBeenCalled();
-      expect(findCollapsed().isVisible()).toBe(true);
-      expect(findCollapsed().text()).toBe('None');
-    });
-  });
-
-  describe('when the mutation fails', () => {
-    beforeEach(async () => {
-      createWrapper({ weight: TEST_WEIGHT });
-      jest.spyOn(wrapper.vm, 'setActiveItemWeight').mockImplementation(() => {
-        throw new Error(['failed mutation']);
-      });
-      jest.spyOn(wrapper.vm, 'setError').mockImplementation(() => {});
-      findWeightInput().vm.$emit('input', -1);
-      findWeightForm().vm.$emit('submit', { preventDefault: () => {} });
-      await wrapper.vm.$nextTick();
-    });
-
-    it('collapses sidebar and renders former issue weight', () => {
-      expect(findCollapsed().isVisible()).toBe(true);
-      expect(findCollapsed().text()).toContain(TEST_WEIGHT);
-      expect(wrapper.vm.setError).toHaveBeenCalled();
-    });
-  });
-});