Add latest changes from gitlab-org/gitlab@master

8 files changed, 66 insertions, 611 deletions

diff --git a/spec/frontend/sidebar/__snapshots__/confidential_issue_sidebar_spec.js.snap b/spec/frontend/sidebar/__snapshots__/confidential_issue_sidebar_spec.js.snap
deleted file mode 100644
index 2367667544d..00000000000
--- a/spec/frontend/sidebar/__snapshots__/confidential_issue_sidebar_spec.js.snap
+++ /dev/null
@@ -1,199 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Confidential Issue Sidebar Block renders for confidential = false and isEditable = false 1`] = `
-<div
-  class="block issuable-sidebar-item confidentiality"
-  iid=""
->
-  <div
-    class="sidebar-collapsed-icon"
-    title="Not confidential"
-  >
-    <gl-icon-stub
-      name="eye"
-      size="16"
-    />
-  </div>
-   
-  <div
-    class="title hide-collapsed"
-  >
-    
-    Confidentiality
-    
-    <!---->
-  </div>
-   
-  <div
-    class="value sidebar-item-value hide-collapsed"
-  >
-    <!---->
-     
-    <div
-      class="no-value sidebar-item-value"
-      data-testid="not-confidential"
-    >
-      <gl-icon-stub
-        class="sidebar-item-icon inline"
-        name="eye"
-        size="16"
-      />
-      
-      Not confidential
-    
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Confidential Issue Sidebar Block renders for confidential = false and isEditable = true 1`] = `
-<div
-  class="block issuable-sidebar-item confidentiality"
-  iid=""
->
-  <div
-    class="sidebar-collapsed-icon"
-    title="Not confidential"
-  >
-    <gl-icon-stub
-      name="eye"
-      size="16"
-    />
-  </div>
-   
-  <div
-    class="title hide-collapsed"
-  >
-    
-    Confidentiality
-    
-    <a
-      class="float-right confidential-edit"
-      data-track-event="click_edit_button"
-      data-track-label="right_sidebar"
-      data-track-property="confidentiality"
-      href="#"
-    >
-      Edit
-    </a>
-  </div>
-   
-  <div
-    class="value sidebar-item-value hide-collapsed"
-  >
-    <!---->
-     
-    <div
-      class="no-value sidebar-item-value"
-      data-testid="not-confidential"
-    >
-      <gl-icon-stub
-        class="sidebar-item-icon inline"
-        name="eye"
-        size="16"
-      />
-      
-      Not confidential
-    
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Confidential Issue Sidebar Block renders for confidential = true and isEditable = false 1`] = `
-<div
-  class="block issuable-sidebar-item confidentiality"
-  iid=""
->
-  <div
-    class="sidebar-collapsed-icon"
-    title="Confidential"
-  >
-    <gl-icon-stub
-      name="eye-slash"
-      size="16"
-    />
-  </div>
-   
-  <div
-    class="title hide-collapsed"
-  >
-    
-    Confidentiality
-    
-    <!---->
-  </div>
-   
-  <div
-    class="value sidebar-item-value hide-collapsed"
-  >
-    <!---->
-     
-    <div
-      class="value sidebar-item-value hide-collapsed"
-    >
-      <gl-icon-stub
-        class="sidebar-item-icon inline is-active"
-        name="eye-slash"
-        size="16"
-      />
-      
-      This issue is confidential
-    
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Confidential Issue Sidebar Block renders for confidential = true and isEditable = true 1`] = `
-<div
-  class="block issuable-sidebar-item confidentiality"
-  iid=""
->
-  <div
-    class="sidebar-collapsed-icon"
-    title="Confidential"
-  >
-    <gl-icon-stub
-      name="eye-slash"
-      size="16"
-    />
-  </div>
-   
-  <div
-    class="title hide-collapsed"
-  >
-    
-    Confidentiality
-    
-    <a
-      class="float-right confidential-edit"
-      data-track-event="click_edit_button"
-      data-track-label="right_sidebar"
-      data-track-property="confidentiality"
-      href="#"
-    >
-      Edit
-    </a>
-  </div>
-   
-  <div
-    class="value sidebar-item-value hide-collapsed"
-  >
-    <!---->
-     
-    <div
-      class="value sidebar-item-value hide-collapsed"
-    >
-      <gl-icon-stub
-        class="sidebar-item-icon inline is-active"
-        name="eye-slash"
-        size="16"
-      />
-      
-      This issue is confidential
-    
-    </div>
-  </div>
-</div>
-`;
diff --git a/spec/frontend/sidebar/components/confidential/__snapshots__/edit_form_spec.js.snap b/spec/frontend/sidebar/components/confidential/__snapshots__/edit_form_spec.js.snap
deleted file mode 100644
index d33f6c7f389..00000000000
--- a/spec/frontend/sidebar/components/confidential/__snapshots__/edit_form_spec.js.snap
+++ /dev/null
@@ -1,50 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Edit Form Dropdown when confidential renders on or off text based on confidentiality 1`] = `
-<div
-  class="dropdown show"
-  toggleform="function () {}"
-  updateconfidentialattribute="function () {}"
->
-  <div
-    class="dropdown-menu sidebar-item-warning-message"
-  >
-    <div>
-      <p>
-        <gl-sprintf-stub
-          message="You are going to turn off the confidentiality. This means %{strongStart}everyone%{strongEnd} will be able to see and leave a comment on this %{issuableType}."
-        />
-      </p>
-       
-      <edit-form-buttons-stub
-        confidential="true"
-        fullpath=""
-      />
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Edit Form Dropdown when not confidential renders "You are going to turn on the confidentiality." in the  1`] = `
-<div
-  class="dropdown show"
-  toggleform="function () {}"
-  updateconfidentialattribute="function () {}"
->
-  <div
-    class="dropdown-menu sidebar-item-warning-message"
-  >
-    <div>
-      <p>
-        <gl-sprintf-stub
-          message="You are going to turn on the confidentiality. This means that only team members with %{strongStart}at least Reporter access%{strongEnd} are able to see and leave comments on the %{issuableType}."
-        />
-      </p>
-       
-      <edit-form-buttons-stub
-        fullpath=""
-      />
-    </div>
-  </div>
-</div>
-`;
diff --git a/spec/frontend/sidebar/components/confidential/edit_form_buttons_spec.js b/spec/frontend/sidebar/components/confidential/edit_form_buttons_spec.js
deleted file mode 100644
index 427e3a89c29..00000000000
--- a/spec/frontend/sidebar/components/confidential/edit_form_buttons_spec.js
+++ /dev/null
@@ -1,146 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-import waitForPromises from 'helpers/wait_for_promises';
-import { deprecatedCreateFlash as flash } from '~/flash';
-import createStore from '~/notes/stores';
-import EditFormButtons from '~/sidebar/components/confidential/edit_form_buttons.vue';
-import eventHub from '~/sidebar/event_hub';
-
-jest.mock('~/sidebar/event_hub', () => ({ $emit: jest.fn() }));
-jest.mock('~/flash');
-
-describe('Edit Form Buttons', () => {
-  let wrapper;
-  let store;
-  const findConfidentialToggle = () => wrapper.find('[data-testid="confidential-toggle"]');
-
-  const createComponent = ({ props = {}, data = {}, resolved = true }) => {
-    store = createStore();
-    if (resolved) {
-      jest.spyOn(store, 'dispatch').mockResolvedValue();
-    } else {
-      jest.spyOn(store, 'dispatch').mockRejectedValue();
-    }
-
-    wrapper = shallowMount(EditFormButtons, {
-      propsData: {
-        fullPath: '',
-        ...props,
-      },
-      data() {
-        return {
-          isLoading: true,
-          ...data,
-        };
-      },
-      store,
-    });
-  };
-
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
-  describe('when isLoading', () => {
-    beforeEach(() => {
-      createComponent({
-        props: {
-          confidential: false,
-        },
-      });
-    });
-
-    it('renders "Applying" in the toggle button', () => {
-      expect(findConfidentialToggle().text()).toBe('Applying');
-    });
-
-    it('disables the toggle button', () => {
-      expect(findConfidentialToggle().props('disabled')).toBe(true);
-    });
-
-    it('sets loading on the toggle button', () => {
-      expect(findConfidentialToggle().props('loading')).toBe(true);
-    });
-  });
-
-  describe('when not confidential', () => {
-    it('renders Turn On in the toggle button', () => {
-      createComponent({
-        data: {
-          isLoading: false,
-        },
-        props: {
-          confidential: false,
-        },
-      });
-
-      expect(findConfidentialToggle().text()).toBe('Turn On');
-    });
-  });
-
-  describe('when confidential', () => {
-    beforeEach(() => {
-      createComponent({
-        data: {
-          isLoading: false,
-        },
-        props: {
-          confidential: true,
-        },
-      });
-    });
-
-    it('renders on or off text based on confidentiality', () => {
-      expect(findConfidentialToggle().text()).toBe('Turn Off');
-    });
-  });
-
-  describe('when succeeds', () => {
-    beforeEach(() => {
-      createComponent({ data: { isLoading: false }, props: { confidential: true } });
-      findConfidentialToggle().vm.$emit('click', new Event('click'));
-    });
-
-    it('dispatches the correct action', () => {
-      expect(store.dispatch).toHaveBeenCalledWith('updateConfidentialityOnIssuable', {
-        confidential: false,
-        fullPath: '',
-      });
-    });
-
-    it('resets loading on the toggle button', () => {
-      return waitForPromises().then(() => {
-        expect(findConfidentialToggle().props('loading')).toBe(false);
-      });
-    });
-
-    it('emits close form', () => {
-      return waitForPromises().then(() => {
-        expect(eventHub.$emit).toHaveBeenCalledWith('closeConfidentialityForm');
-      });
-    });
-
-    it('emits updateOnConfidentiality event', () => {
-      return waitForPromises().then(() => {
-        expect(eventHub.$emit).toHaveBeenCalledWith('updateIssuableConfidentiality', false);
-      });
-    });
-  });
-
-  describe('when fails', () => {
-    beforeEach(() => {
-      createComponent({
-        data: { isLoading: false },
-        props: { confidential: true },
-        resolved: false,
-      });
-      findConfidentialToggle().vm.$emit('click', new Event('click'));
-    });
-
-    it('calls flash with the correct message', () => {
-      expect(flash).toHaveBeenCalledWith(
-        'Something went wrong trying to change the confidentiality of this issue',
-      );
-    });
-  });
-});
diff --git a/spec/frontend/sidebar/components/confidential/edit_form_spec.js b/spec/frontend/sidebar/components/confidential/edit_form_spec.js
deleted file mode 100644
index 6b571df10ae..00000000000
--- a/spec/frontend/sidebar/components/confidential/edit_form_spec.js
+++ /dev/null
@@ -1,48 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-import EditForm from '~/sidebar/components/confidential/edit_form.vue';
-
-describe('Edit Form Dropdown', () => {
-  let wrapper;
-  const toggleForm = () => {};
-  const updateConfidentialAttribute = () => {};
-
-  const createComponent = (props) => {
-    wrapper = shallowMount(EditForm, {
-      propsData: {
-        ...props,
-        isLoading: false,
-        fullPath: '',
-        issuableType: 'issue',
-      },
-    });
-  };
-
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
-  describe('when not confidential', () => {
-    it('renders "You are going to turn on the confidentiality." in the ', () => {
-      createComponent({
-        confidential: false,
-        toggleForm,
-        updateConfidentialAttribute,
-      });
-
-      expect(wrapper.element).toMatchSnapshot();
-    });
-  });
-
-  describe('when confidential', () => {
-    it('renders on or off text based on confidentiality', () => {
-      createComponent({
-        confidential: true,
-        toggleForm,
-        updateConfidentialAttribute,
-      });
-
-      expect(wrapper.element).toMatchSnapshot();
-    });
-  });
-});
diff --git a/spec/frontend/sidebar/components/confidential/sidebar_confidentiality_content_spec.js b/spec/frontend/sidebar/components/confidential/sidebar_confidentiality_content_spec.js
index 5887afb703b..8844e1626cd 100644
--- a/spec/frontend/sidebar/components/confidential/sidebar_confidentiality_content_spec.js
+++ b/spec/frontend/sidebar/components/confidential/sidebar_confidentiality_content_spec.js
@@ -7,11 +7,13 @@ describe('Sidebar Confidentiality Content', () => {
 
   const findIcon = () => wrapper.findComponent(GlIcon);
   const findText = () => wrapper.find('[data-testid="confidential-text"]');
+  const findCollapsedIcon = () => wrapper.find('[data-testid="sidebar-collapsed-icon"]');
 
-  const createComponent = (confidential = false) => {
+  const createComponent = ({ confidential = false, issuableType = 'issue' } = {}) => {
     wrapper = shallowMount(SidebarConfidentialityContent, {
       propsData: {
         confidential,
+        issuableType,
       },
     });
   };
@@ -20,6 +22,13 @@ describe('Sidebar Confidentiality Content', () => {
     wrapper.destroy();
   });
 
+  it('emits `expandSidebar` event on collapsed icon click', () => {
+    createComponent();
+    findCollapsedIcon().trigger('click');
+
+    expect(wrapper.emitted('expandSidebar')).toHaveLength(1);
+  });
+
   describe('when issue is non-confidential', () => {
     beforeEach(() => {
       createComponent();
@@ -39,20 +48,24 @@ describe('Sidebar Confidentiality Content', () => {
   });
 
   describe('when issue is confidential', () => {
-    beforeEach(() => {
-      createComponent(true);
-    });
-
-    it('renders a non-confidential icon', () => {
+    it('renders a confidential icon', () => {
+      createComponent({ confidential: true });
       expect(findIcon().props('name')).toBe('eye-slash');
     });
 
-    it('does not add `is-active` class to the icon', () => {
+    it('adds `is-active` class to the icon', () => {
+      createComponent({ confidential: true });
       expect(findIcon().classes()).toContain('is-active');
     });
 
-    it('displays a non-confidential text', () => {
-      expect(findText().text()).toBe('This  is confidential');
+    it('displays a correct confidential text for issue', () => {
+      createComponent({ confidential: true });
+      expect(findText().text()).toBe('This issue is confidential');
+    });
+
+    it('displays a correct confidential text for epic', () => {
+      createComponent({ confidential: true, issuableType: 'epic' });
+      expect(findText().text()).toBe('This epic is confidential');
     });
   });
 });
diff --git a/spec/frontend/sidebar/components/confidential/sidebar_confidentiality_form_spec.js b/spec/frontend/sidebar/components/confidential/sidebar_confidentiality_form_spec.js
index 2d102331272..d5e6310ed38 100644
--- a/spec/frontend/sidebar/components/confidential/sidebar_confidentiality_form_spec.js
+++ b/spec/frontend/sidebar/components/confidential/sidebar_confidentiality_form_spec.js
@@ -143,4 +143,31 @@ describe('Sidebar Confidentiality Form', () => {
       });
     });
   });
+
+  describe('when issuable type is `epic`', () => {
+    beforeEach(() => {
+      createComponent({ props: { confidential: true, issuableType: 'epic' } });
+    });
+
+    it('renders a message about making an epic non-confidential', () => {
+      expect(findWarningMessage().text()).toBe(
+        'You are going to turn off the confidentiality. This means everyone will be able to see and leave a comment on this epic.',
+      );
+    });
+
+    it('calls a mutation to set epic confidentiality with correct parameters', () => {
+      findConfidentialToggle().vm.$emit('click', new MouseEvent('click'));
+
+      expect(wrapper.vm.$apollo.mutate).toHaveBeenCalledWith({
+        mutation: confidentialityQueries[wrapper.vm.issuableType].mutation,
+        variables: {
+          input: {
+            confidential: false,
+            iid: '1',
+            groupPath: 'group/project',
+          },
+        },
+      });
+    });
+  });
 });
diff --git a/spec/frontend/sidebar/components/confidential/sidebar_confidentiality_widget_spec.js b/spec/frontend/sidebar/components/confidential/sidebar_confidentiality_widget_spec.js
index 7dc1fe62cfd..20a5be9b518 100644
--- a/spec/frontend/sidebar/components/confidential/sidebar_confidentiality_widget_spec.js
+++ b/spec/frontend/sidebar/components/confidential/sidebar_confidentiality_widget_spec.js
@@ -86,6 +86,10 @@ describe('Sidebar Confidentiality Widget', () => {
       expect(findConfidentialityForm().props('confidential')).toBe(true);
       expect(findConfidentialityContent().props('confidential')).toBe(true);
     });
+
+    it('emits `confidentialityUpdated` event with a `false` payload', () => {
+      expect(wrapper.emitted('confidentialityUpdated')).toEqual([[false]]);
+    });
   });
 
   describe('when issue is confidential', () => {
@@ -111,6 +115,10 @@ describe('Sidebar Confidentiality Widget', () => {
       expect(findConfidentialityForm().props('confidential')).toBe(false);
       expect(findConfidentialityContent().props('confidential')).toBe(false);
     });
+
+    it('emits `confidentialityUpdated` event with a `true` payload', () => {
+      expect(wrapper.emitted('confidentialityUpdated')).toEqual([[true]]);
+    });
   });
 
   it('displays a flash message when query is rejected', async () => {
@@ -138,5 +146,14 @@ describe('Sidebar Confidentiality Widget', () => {
     expect(findConfidentialityForm().isVisible()).toBe(false);
 
     expect(el.dispatchEvent).toHaveBeenCalled();
+    expect(wrapper.emitted('closeForm')).toHaveLength(1);
+  });
+
+  it('emits `expandSidebar` event when it is emitted from child component', async () => {
+    createComponent();
+    await waitForPromises();
+    findConfidentialityContent().vm.$emit('expandSidebar');
+
+    expect(wrapper.emitted('expandSidebar')).toHaveLength(1);
   });
 });
diff --git a/spec/frontend/sidebar/confidential_issue_sidebar_spec.js b/spec/frontend/sidebar/confidential_issue_sidebar_spec.js
deleted file mode 100644
index 93a6401b1fc..00000000000
--- a/spec/frontend/sidebar/confidential_issue_sidebar_spec.js
+++ /dev/null
@@ -1,159 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-import { useMockLocationHelper } from 'helpers/mock_window_location_helper';
-import { mockTracking, triggerEvent } from 'helpers/tracking_helper';
-import createStore from '~/notes/stores';
-import * as types from '~/notes/stores/mutation_types';
-import ConfidentialIssueSidebar from '~/sidebar/components/confidential/confidential_issue_sidebar.vue';
-import EditForm from '~/sidebar/components/confidential/edit_form.vue';
-
-jest.mock('~/flash');
-jest.mock('~/sidebar/services/sidebar_service');
-
-describe('Confidential Issue Sidebar Block', () => {
-  useMockLocationHelper();
-
-  let wrapper;
-  const mutate = jest
-    .fn()
-    .mockResolvedValue({ data: { issueSetConfidential: { issue: { confidential: true } } } });
-
-  const createComponent = ({ propsData, data = {} }) => {
-    const store = createStore();
-    wrapper = shallowMount(ConfidentialIssueSidebar, {
-      store,
-      data() {
-        return data;
-      },
-      propsData: {
-        iid: '',
-        fullPath: '',
-        ...propsData,
-      },
-      mocks: {
-        $apollo: {
-          mutate,
-        },
-      },
-    });
-  };
-
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
-  it.each`
-    confidential | isEditable
-    ${false}     | ${false}
-    ${false}     | ${true}
-    ${true}      | ${false}
-    ${true}      | ${true}
-  `(
-    'renders for confidential = $confidential and isEditable = $isEditable',
-    ({ confidential, isEditable }) => {
-      createComponent({
-        propsData: {
-          isEditable,
-        },
-      });
-      wrapper.vm.$store.state.noteableData.confidential = confidential;
-
-      return wrapper.vm.$nextTick().then(() => {
-        expect(wrapper.element).toMatchSnapshot();
-      });
-    },
-  );
-
-  describe('if editable', () => {
-    beforeEach(() => {
-      createComponent({
-        propsData: {
-          isEditable: true,
-        },
-      });
-      wrapper.vm.$store.state.noteableData.confidential = true;
-    });
-
-    it('displays the edit form when editable', () => {
-      wrapper.setData({ edit: false });
-
-      return wrapper.vm
-        .$nextTick()
-        .then(() => {
-          wrapper.find({ ref: 'editLink' }).trigger('click');
-          return wrapper.vm.$nextTick();
-        })
-        .then(() => {
-          expect(wrapper.find(EditForm).exists()).toBe(true);
-        });
-    });
-
-    it('displays the edit form when opened from collapsed state', () => {
-      wrapper.setData({ edit: false });
-
-      return wrapper.vm
-        .$nextTick()
-        .then(() => {
-          wrapper.find({ ref: 'collapseIcon' }).trigger('click');
-          return wrapper.vm.$nextTick();
-        })
-        .then(() => {
-          expect(wrapper.find(EditForm).exists()).toBe(true);
-        });
-    });
-
-    it('tracks the event when "Edit" is clicked', () => {
-      const spy = mockTracking('_category_', wrapper.element, jest.spyOn);
-
-      const editLink = wrapper.find({ ref: 'editLink' });
-      triggerEvent(editLink.element);
-
-      expect(spy).toHaveBeenCalledWith('_category_', 'click_edit_button', {
-        label: 'right_sidebar',
-        property: 'confidentiality',
-      });
-    });
-  });
-  describe('computed confidential', () => {
-    beforeEach(() => {
-      createComponent({
-        propsData: {
-          isEditable: true,
-        },
-      });
-    });
-
-    it('returns false when noteableData is not present', () => {
-      wrapper.vm.$store.commit(types.SET_NOTEABLE_DATA, null);
-
-      expect(wrapper.vm.confidential).toBe(false);
-    });
-
-    it('returns true when noteableData has confidential attr as true', () => {
-      wrapper.vm.$store.commit(types.SET_NOTEABLE_DATA, {});
-      wrapper.vm.$store.commit(types.SET_ISSUE_CONFIDENTIAL, true);
-
-      expect(wrapper.vm.confidential).toBe(true);
-    });
-
-    it('returns false when noteableData has confidential attr as false', () => {
-      wrapper.vm.$store.commit(types.SET_NOTEABLE_DATA, {});
-      wrapper.vm.$store.commit(types.SET_ISSUE_CONFIDENTIAL, false);
-
-      expect(wrapper.vm.confidential).toBe(false);
-    });
-
-    it('returns true when confidential attr is true', () => {
-      wrapper.vm.$store.commit(types.SET_NOTEABLE_DATA, {});
-      wrapper.vm.$store.commit(types.SET_ISSUE_CONFIDENTIAL, true);
-
-      expect(wrapper.vm.confidential).toBe(true);
-    });
-
-    it('returns false when confidential attr is false', () => {
-      wrapper.vm.$store.commit(types.SET_NOTEABLE_DATA, {});
-      wrapper.vm.$store.commit(types.SET_ISSUE_CONFIDENTIAL, false);
-
-      expect(wrapper.vm.confidential).toBe(false);
-    });
-  });
-});