Epic board sidebar - Confidentiality [RUN AS-IF-FOSS]

app/assets/javascripts/sidebar/components/confidential/sidebar_confidentiality_form.vue

@@ -18,8 +18,15 @@ export default {
     GlSprintf,
     GlButton,
   },
-  inject: ['fullPath', 'iid'],
   props: {
+    iid: {
+      type: String,
+      required: true,
+    },
+    fullPath: {
+      type: String,
+      required: true,
+    },
     confidential: {
       required: true,
       type: Boolean,

app/assets/javascripts/sidebar/components/confidential/sidebar_confidentiality_widget.vue

@@ -27,8 +27,20 @@ export default {
     SidebarConfidentialityContent,
     SidebarConfidentialityForm,
   },
-  inject: ['fullPath', 'iid'],
+  inject: {
+    isClassicSidebar: {
+      default: false,
+    },
+  },
   props: {
+    iid: {
+      type: String,
+      required: true,
+    },
+    fullPath: {
+      type: String,
+      required: true,
+    },
     issuableType: {
       required: true,
       type: String,
@@ -126,6 +138,7 @@ export default {
           v-if="!isLoading"
           :confidential="confidential"
           :issuable-type="issuableType"
+          :class="{ 'gl-mt-3': !isClassicSidebar }"
           @expandSidebar="expandSidebar"
         />
       </div>
@@ -133,6 +146,8 @@ export default {
     <template #default>
       <sidebar-confidentiality-content :confidential="confidential" :issuable-type="issuableType" />
       <sidebar-confidentiality-form
+        :iid="iid"
+        :full-path="fullPath"
         :confidential="confidential"
         :issuable-type="issuableType"
         @closeForm="closeForm"

app/assets/javascripts/sidebar/mount_sidebar.js

@@ -151,14 +151,14 @@ function mountConfidentialComponent() {
       SidebarConfidentialityWidget,
     },
     provide: {
-      iid: String(iid),
-      fullPath,
       canUpdate: initialData.is_editable,
     },
 
     render: (createElement) =>
       createElement('sidebar-confidentiality-widget', {
         props: {
+          iid: String(iid),
+          fullPath,
           issuableType:
             isInIssuePage() || isInIncidentPage() || isInDesignPage()
               ? IssuableType.Issue

app/assets/stylesheets/page_bundles/boards.scss

@@ -468,6 +468,12 @@
   }
 }
 
+.boards-sidebar {
+  .sidebar-collapsed-icon {
+    display: none;
+  }
+}
+
 .board-header-collapsed-info-icon:hover {
   color: var(--gray-900, $gray-900);
 }

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

@@ -5,6 +5,7 @@ import BoardSidebarLabelsSelect from '~/boards/components/sidebar/board_sidebar_
 import BoardSidebarTitle from '~/boards/components/sidebar/board_sidebar_title.vue';
 import { ISSUABLE } from '~/boards/constants';
 import { contentTop } from '~/lib/utils/common_utils';
+import SidebarConfidentialityWidget from '~/sidebar/components/confidential/sidebar_confidentiality_widget.vue';
 
 export default {
   headerHeight: `${contentTop()}px`,
@@ -12,10 +13,11 @@ export default {
     GlDrawer,
     BoardSidebarLabelsSelect,
     BoardSidebarTitle,
+    SidebarConfidentialityWidget,
   },
   computed: {
     ...mapGetters(['isSidebarOpen', 'activeBoardItem']),
-    ...mapState(['sidebarType']),
+    ...mapState(['sidebarType', 'fullPath']),
     isIssuableSidebar() {
       return this.sidebarType === ISSUABLE;
     },
@@ -24,7 +26,7 @@ export default {
     },
   },
   methods: {
-    ...mapActions(['toggleBoardItem']),
+    ...mapActions(['toggleBoardItem', 'setActiveEpicConfidential']),
     handleClose() {
       this.toggleBoardItem({ boardItem: this.activeBoardItem, sidebarType: this.sidebarType });
     },
@@ -43,6 +45,12 @@ export default {
     <template #default>
       <board-sidebar-title data-testid="sidebar-title" />
       <board-sidebar-labels-select class="labels" />
+      <sidebar-confidentiality-widget
+        :iid="activeBoardItem.iid"
+        :full-path="fullPath"
+        issuable-type="epic"
+        @confidentialityUpdated="setActiveEpicConfidential($event)"
+      />
     </template>
   </gl-drawer>
 </template>

ee/app/assets/javascripts/boards/stores/actions.js

@@ -799,4 +799,13 @@ export default {
       value: data.updateEpic.epic.labels.nodes,
     });
   },
+
+  setActiveEpicConfidential: ({ commit, getters }, confidential) => {
+    const { activeBoardItem } = getters;
+    commit(typesCE.UPDATE_BOARD_ITEM_BY_ID, {
+      itemId: activeBoardItem.id,
+      prop: 'confidential',
+      value: confidential,
+    });
+  },
 };

ee/app/assets/javascripts/epic/components/epic_sidebar.vue

@@ -30,6 +30,7 @@ export default {
     SidebarSubscription,
     SidebarConfidentialityWidget,
   },
+  inject: ['iid'],
   data() {
     return {
       sidebarExpandedOnClick: false,
@@ -225,6 +226,8 @@ export default {
         <ancestors-tree :ancestors="ancestors" :is-fetching="false" data-testid="ancestors" />
       </div>
       <sidebar-confidentiality-widget
+        :iid="String(iid)"
+        :full-path="fullPath"
         issuable-type="epic"
         @closeForm="handleSidebarToggle"
         @expandSidebar="handleSidebarToggle"

ee/spec/features/epic_boards/epic_boards_sidebar_spec.rb

@@ -106,4 +106,25 @@ RSpec.describe 'Epic boards sidebar', :js do
       expect(card).to have_content(bug.title)
     end
   end
+
+  context 'confidentiality' do
+    it 'make epic confidential' do
+      click_card(card)
+
+      page.within('.confidentiality') do
+        expect(page).to have_content('Not confidential')
+
+        find('[data-testid="edit-button"]').click
+        expect(page).to have_css('.sidebar-item-warning-message')
+
+        within('.sidebar-item-warning-message') do
+          find('[data-testid="confidential-toggle"]').click
+        end
+
+        wait_for_requests
+
+        expect(page).to have_content('This epic is confidential')
+      end
+    end
+  end
 end

ee/spec/frontend/boards/components/epic_board_content_sidebar_spec.js

@@ -5,6 +5,7 @@ import EpicBoardContentSidebar from 'ee_component/boards/components/epic_board_c
 import { stubComponent } from 'helpers/stub_component';
 import BoardSidebarLabelsSelect from '~/boards/components/sidebar/board_sidebar_labels_select.vue';
 import { ISSUABLE } from '~/boards/constants';
+import SidebarConfidentialityWidget from '~/sidebar/components/confidential/sidebar_confidentiality_widget.vue';
 import { mockEpic } from '../mock_data';
 
 describe('EpicBoardContentSidebar', () => {
@@ -18,6 +19,7 @@ describe('EpicBoardContentSidebar', () => {
         boardItems: { [mockEpic.id]: mockEpic },
         activeId: mockEpic.id,
         issuableType: 'epic',
+        fullPath: 'gitlab-org',
       },
       getters: {
         activeBoardItem: () => {
@@ -74,6 +76,10 @@ describe('EpicBoardContentSidebar', () => {
     expect(wrapper.find(BoardSidebarLabelsSelect).exists()).toBe(true);
   });
 
+  it('renders SidebarConfidentialityWidget', () => {
+    expect(wrapper.find(SidebarConfidentialityWidget).exists()).toBe(true);
+  });
+
   describe('when we emit close', () => {
     let toggleBoardItem;
 

ee/spec/frontend/boards/mock_data.js

@@ -225,7 +225,7 @@ export const mockIssues = [mockIssue, mockIssue2];
 
 export const mockEpic = {
   id: 'gid://gitlab/Epic/41',
-  iid: 1,
+  iid: '1',
   title: 'Epic title',
   state: 'opened',
   webUrl: '/groups/gitlab-org/-/epics/1',

ee/spec/frontend/boards/stores/actions_spec.js

@@ -1413,3 +1413,30 @@ describe('setActiveEpicLabels', () => {
     await expect(actions.setActiveEpicLabels({ getters }, input)).rejects.toThrow(Error);
   });
 });
+
+describe('setActiveEpicConfidential', () => {
+  const state = { boardItems: { [mockEpic.id]: mockEpic } };
+  const getters = { activeBoardItem: mockEpic };
+
+  it('set confidential value on epic', (done) => {
+    const payload = {
+      itemId: getters.activeBoardItem.id,
+      prop: 'confidential',
+      value: true,
+    };
+
+    testAction(
+      actions.setActiveEpicConfidential,
+      true,
+      { ...state, ...getters },
+      [
+        {
+          type: typesCE.UPDATE_BOARD_ITEM_BY_ID,
+          payload,
+        },
+      ],
+      [],
+      done,
+    );
+  });
+});

ee/spec/frontend/epic/components/epic_sidebar_spec.js

@@ -33,6 +33,9 @@ describe('EpicSidebarComponent', () => {
 
     return shallowMount(EpicSidebar, {
       store,
+      provide: {
+        iid: '1',
+      },
     });
   };
 

spec/frontend/sidebar/components/confidential/sidebar_confidentiality_form_spec.js

@@ -20,11 +20,9 @@ describe('Sidebar Confidentiality Form', () => {
     mutate = jest.fn().mockResolvedValue('Success'),
   } = {}) => {
     wrapper = shallowMount(SidebarConfidentialityForm, {
-      provide: {
+      propsData: {
         fullPath: 'group/project',
         iid: '1',
-      },
-      propsData: {
         confidential: false,
         issuableType: 'issue',
         ...props,

spec/frontend/sidebar/components/confidential/sidebar_confidentiality_widget_spec.js

@@ -35,11 +35,11 @@ describe('Sidebar Confidentiality Widget', () => {
       localVue,
       apolloProvider: fakeApollo,
       provide: {
-        fullPath: 'group/project',
-        iid: '1',
         canUpdate: true,
       },
       propsData: {
+        fullPath: 'group/project',
+        iid: '1',
         issuableType: 'issue',
       },
       stubs: {