Merge branch 'add-board-sidebar-item-wrapper' into 'master'

Add board sidebar item wrapper

See merge request gitlab-org/gitlab!42029

app/assets/javascripts/boards/components/sidebar/board_editable_item.vue

+<script>
+import { GlButton, GlLoadingIcon } from '@gitlab/ui';
+
+export default {
+  components: { GlButton, GlLoadingIcon },
+  props: {
+    title: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    loading: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  inject: ['canUpdate'],
+  data() {
+    return {
+      edit: false,
+    };
+  },
+  destroyed() {
+    window.removeEventListener('click', this.collapseWhenOffClick);
+  },
+  methods: {
+    collapseWhenOffClick({ target }) {
+      if (!this.$el.contains(target)) {
+        this.collapse();
+      }
+    },
+    expand() {
+      if (this.edit) {
+        return;
+      }
+
+      this.edit = true;
+      this.$emit('changed', this.edit);
+      window.addEventListener('click', this.collapseWhenOffClick);
+    },
+    collapse() {
+      if (!this.edit) {
+        return;
+      }
+
+      this.edit = false;
+      this.$emit('changed', this.edit);
+      window.removeEventListener('click', this.collapseWhenOffClick);
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <div class="gl-display-flex gl-justify-content-space-between gl-mb-3">
+      <span class="gl-vertical-align-middle">
+        <span data-testid="title">{{ title }}</span>
+        <gl-loading-icon v-if="loading" inline class="gl-ml-2" />
+      </span>
+      <gl-button
+        v-if="canUpdate"
+        variant="link"
+        class="gl-text-gray-900!"
+        data-testid="edit-button"
+        @click="expand()"
+      >
+        {{ __('Edit') }}
+      </gl-button>
+    </div>
+    <div v-show="!edit" class="gl-text-gray-400" data-testid="collapsed-content">
+      <slot name="collapsed">{{ __('None') }}</slot>
+    </div>
+    <div v-show="edit" data-testid="expanded-content">
+      <slot></slot>
+    </div>
+  </div>
+</template>

spec/frontend/boards/components/sidebar/board_editable_item_spec.js

+import { shallowMount } from '@vue/test-utils';
+import { GlLoadingIcon } from '@gitlab/ui';
+import BoardSidebarItem from '~/boards/components/sidebar/board_editable_item.vue';
+
+describe('boards sidebar remove issue', () => {
+  let wrapper;
+
+  const findLoader = () => wrapper.find(GlLoadingIcon);
+  const findEditButton = () => wrapper.find('[data-testid="edit-button"]');
+  const findTitle = () => wrapper.find('[data-testid="title"]');
+  const findCollapsed = () => wrapper.find('[data-testid="collapsed-content"]');
+  const findExpanded = () => wrapper.find('[data-testid="expanded-content"]');
+
+  const createComponent = ({ props = {}, slots = {}, canUpdate = false } = {}) => {
+    wrapper = shallowMount(BoardSidebarItem, {
+      attachTo: document.body,
+      provide: { canUpdate },
+      propsData: props,
+      slots,
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  describe('template', () => {
+    it('renders title', () => {
+      const title = 'Sidebar item title';
+      createComponent({ props: { title } });
+
+      expect(findTitle().text()).toBe(title);
+    });
+
+    it('hides edit button, loader and expanded content by default', () => {
+      createComponent();
+
+      expect(findEditButton().exists()).toBe(false);
+      expect(findLoader().exists()).toBe(false);
+      expect(findExpanded().isVisible()).toBe(false);
+    });
+
+    it('shows "None" if empty collapsed slot', () => {
+      createComponent({});
+
+      expect(findCollapsed().text()).toBe('None');
+    });
+
+    it('renders collapsed content by default', () => {
+      const slots = { collapsed: '<div>Collapsed content</div>' };
+      createComponent({ slots });
+
+      expect(findCollapsed().text()).toBe('Collapsed content');
+    });
+
+    it('shows edit button if can update', () => {
+      createComponent({ canUpdate: true });
+
+      expect(findEditButton().exists()).toBe(true);
+    });
+
+    it('shows loading icon if loading', () => {
+      createComponent({ props: { loading: true } });
+
+      expect(findLoader().exists()).toBe(true);
+    });
+
+    it('shows expanded content and hides collapsed content when clicking edit button', async () => {
+      const slots = { default: '<div>Select item</div>' };
+      createComponent({ canUpdate: true, slots });
+      findEditButton().vm.$emit('click');
+
+      return wrapper.vm.$nextTick().then(() => {
+        expect(findCollapsed().isVisible()).toBe(false);
+        expect(findExpanded().isVisible()).toBe(true);
+        expect(findExpanded().text()).toBe('Select item');
+      });
+    });
+  });
+
+  describe('collapsing an item by offclicking', () => {
+    beforeEach(async () => {
+      createComponent({ canUpdate: true });
+      findEditButton().vm.$emit('click');
+      await wrapper.vm.$nextTick();
+    });
+
+    it('hides expanded section and displays collapsed section', async () => {
+      expect(findExpanded().isVisible()).toBe(true);
+      document.body.click();
+
+      await wrapper.vm.$nextTick();
+
+      expect(findCollapsed().isVisible()).toBe(true);
+      expect(findExpanded().isVisible()).toBe(false);
+    });
+
+    it('emits changed event', async () => {
+      document.body.click();
+
+      await wrapper.vm.$nextTick();
+
+      expect(wrapper.emitted().changed[1][0]).toBe(false);
+    });
+  });
+});