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

Extract BoardScope component

See merge request gitlab-org/gitlab-ee!14556

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

 <script>
-/* global ListLabel */
-
 import Flash from '~/flash';
 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 BoardMilestoneSelect from './milestone_select.vue';
-import BoardWeightSelect from './weight_select.vue';
-import AssigneeSelect from './assignee_select.vue';
 import boardsStore from '~/boards/stores/boards_store';
 
 const boardDefaults = {
@@ -22,10 +17,7 @@ const boardDefaults = {
 
 export default {
   components: {
-    AssigneeSelect,
-    BoardLabelsSelect,
-    BoardMilestoneSelect,
-    BoardWeightSelect,
+    BoardScope,
     DeprecatedModal,
   },
   props: {
@@ -75,12 +67,8 @@ export default {
   data() {
     return {
       board: { ...boardDefaults, ...this.currentBoard },
-      expanded: false,
-      issue: {},
       currentBoard: boardsStore.state.currentBoard,
       currentPage: boardsStore.state.currentPage,
-      milestones: [],
-      milestoneDropdownOpen: false,
       isLoading: false,
     };
   },
@@ -127,12 +115,6 @@ export default {
       }
       return 'Edit board';
     },
-    expandButtonText() {
-      return this.expanded ? 'Collapse' : 'Expand';
-    },
-    collapseScope() {
-      return this.isNewForm;
-    },
     readonly() {
       return !this.canAdminBoard;
     },
@@ -147,24 +129,6 @@ export default {
     }
   },
   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() {
       if (this.board.name.length === 0) return;
       this.isLoading = true;
@@ -233,56 +197,20 @@ export default {
             @keyup.enter="submit"
           />
         </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="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>
+        <board-scope
+          v-if="scopedIssueBoardFeatureEnabled"
+          :collapse-scope="isNewForm"
+          :board="board"
+          :can-admin-board="canAdminBoard"
+          :milestone-path="milestonePath"
+          :labels-path="labelsPath"
+          :scoped-labels-documentation-link="scopedLabelsDocumentationLink"
+          :enable-scoped-labels="enableScopedLabels"
+          :project-id="projectId"
+          :group-id="groupId"
+          :weights="weights"
+        />
       </form>
     </template>
   </deprecated-modal>

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

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

+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

@@ -24,40 +24,6 @@ describe('board_form.vue', () => {
   });
 
   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', () => {
       it('resets currentPage', done => {
         vm.cancel();