Boards - Hide EE components in CE

Use licensed features and add rspec tests

app/assets/javascripts/boards/components/board_content.vue

@@ -16,7 +16,7 @@ export default {
       gon.features?.graphqlBoardLists || gon.features?.epicBoards
         ? BoardColumn
         : BoardColumnDeprecated,
-    BoardContentSidebar: () => import('ee_else_ce/boards/components/board_content_sidebar.vue'),
+    BoardContentSidebar: () => import('~/boards/components/board_content_sidebar.vue'),
     EpicBoardContentSidebar: () =>
       import('ee_component/boards/components/epic_board_content_sidebar.vue'),
     EpicsSwimlanes: () => import('ee_component/boards/components/epics_swimlanes.vue'),

app/assets/javascripts/boards/components/board_content_sidebar.vue

@@ -32,6 +32,12 @@ export default {
       import('ee_component/sidebar/components/sidebar_iteration_widget.vue'),
   },
   inject: {
+    epicFeatureAvailable: {
+      default: false,
+    },
+    iterationFeatureAvailable: {
+      default: false,
+    },
     weightFeatureAvailable: {
       default: false,
     },
@@ -53,15 +59,6 @@ export default {
     fullPath() {
       return this.activeBoardItem?.referencePath?.split('#')[0] || '';
     },
-    showEpicSelector() {
-      return false;
-    },
-    showIterationSelector() {
-      return false;
-    },
-    showWeightSelector() {
-      return false;
-    },
   },
   methods: {
     ...mapActions(['toggleBoardItem', 'setAssignees', 'setActiveItemConfidential']),
@@ -89,11 +86,11 @@ export default {
         class="assignee"
         @assignees-updated="setAssignees"
       />
-      <board-sidebar-epic-select v-if="showEpicSelector" class="epic" />
+      <board-sidebar-epic-select v-if="epicFeatureAvailable" class="epic" />
       <div>
         <board-sidebar-milestone-select />
         <sidebar-iteration-widget
-          v-if="showIterationSelector"
+          v-if="iterationFeatureAvailable"
           :iid="activeBoardItem.iid"
           :workspace-path="projectPathForActiveIssue"
           :iterations-workspace-path="groupPathForActiveIssue"
@@ -104,10 +101,7 @@ export default {
       <board-sidebar-time-tracker class="swimlanes-sidebar-time-tracker" />
       <board-sidebar-due-date />
       <board-sidebar-labels-select class="labels" />
-      <board-sidebar-weight-input
-        v-if="weightFeatureAvailable && showWeightSelector"
-        class="weight"
-      />
+      <board-sidebar-weight-input v-if="weightFeatureAvailable" class="weight" />
       <sidebar-confidentiality-widget
         :iid="activeBoardItem.iid"
         :full-path="fullPath"

app/assets/javascripts/boards/index.js

@@ -101,6 +101,8 @@ export default () => {
       labelsManagePath: $boardApp.dataset.labelsManagePath,
       labelsFilterBasePath: $boardApp.dataset.labelsFilterBasePath,
       timeTrackingLimitToHours: parseBoolean($boardApp.dataset.timeTrackingLimitToHours),
+      epicFeatureAvailable: parseBoolean($boardApp.dataset.epicFeatureAvailable),
+      iterationFeatureAvailable: parseBoolean($boardApp.dataset.iterationFeatureAvailable),
       weightFeatureAvailable: parseBoolean($boardApp.dataset.weightFeatureAvailable),
       boardWeight: $boardApp.dataset.boardWeight
         ? parseInt($boardApp.dataset.boardWeight, 10)

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

-<script>
-// This is a false violation of @gitlab/no-runtime-template-compiler, since it
-// extends a valid Vue single file component.
-/* eslint-disable @gitlab/no-runtime-template-compiler */
-import BoardContentSidebarFoss from '~/boards/components/board_content_sidebar.vue';
-
-export default {
-  extends: BoardContentSidebarFoss,
-  computed: {
-    showEpicSelector() {
-      return true;
-    },
-    showIterationSelector() {
-      return true;
-    },
-    showWeightSelector() {
-      return true;
-    },
-  },
-};
-</script>

ee/app/helpers/ee/boards_helper.rb

@@ -29,6 +29,8 @@ module EE
         milestone_lists_available: current_board_parent.feature_available?(:board_milestone_lists).to_s,
         assignee_lists_available: current_board_parent.feature_available?(:board_assignee_lists).to_s,
         iteration_lists_available: current_board_parent.feature_available?(:board_iteration_lists).to_s,
+        epic_feature_available: current_board_parent.feature_available?(:epics).to_s,
+        iteration_feature_available: current_board_parent.feature_available?(:iterations).to_s,
         show_promotion: show_feature_promotion,
         scoped_labels: current_board_parent.feature_available?(:scoped_labels)&.to_s,
         can_update: can_update?.to_s,

ee/spec/frontend/boards/components/__snapshots__/board_content_sidebar_spec.js.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ee/BoardContentSidebar matches the snapshot 1`] = `
+<div>
+  Issue details
+  <board-sidebar-title-stub />
+   
+  <sidebar-assignees-widget-stub
+    allowmultipleassignees="true"
+    class="assignee"
+    fullpath="gitlab-org/gitlab-test"
+    iid="27"
+    initialassignees="[object Object],[object Object]"
+    issuabletype="issue"
+  />
+   
+  <board-editable-item-stub
+    class="epic"
+    data-testid="sidebar-epic"
+    handleoffclick="true"
+    title="Epic"
+  >
+     
+    <epics-select-stub
+      canedit="true"
+      class="gl-w-full"
+      epicissueid="0"
+      groupid="1"
+      initialepic="[object Object]"
+      issueid="0"
+      variant="standalone"
+    />
+  </board-editable-item-stub>
+   
+  <div>
+    <board-sidebar-milestone-select-stub />
+     
+    <div
+      class="gl-mt-5"
+      data-qa-selector="iteration_container"
+    >
+      <sidebar-editable-item-stub
+        canedit="true"
+        data-testid="iteration-edit-link"
+        title="Iteration"
+        tracking="[object Object]"
+      />
+    </div>
+  </div>
+   
+  <board-sidebar-time-tracker-stub
+    class="swimlanes-sidebar-time-tracker"
+  />
+   
+  <board-sidebar-due-date-stub />
+   
+  <board-sidebar-labels-select-stub
+    class="labels"
+  />
+   
+  <board-editable-item-stub
+    class="weight"
+    data-testid="sidebar-weight"
+    handleoffclick="true"
+    title="Weight"
+  >
+     
+    <gl-form-stub>
+      <gl-form-input-stub
+        min="0"
+        placeholder="Enter a number"
+        type="number"
+      />
+    </gl-form-stub>
+  </board-editable-item-stub>
+   
+  <sidebar-confidentiality-widget-stub
+    fullpath="gitlab-org/gitlab-test"
+    iid="27"
+    issuabletype="issue"
+  />
+   
+  <sidebar-subscriptions-widget-stub
+    data-testid="sidebar-notifications"
+    fullpath="gitlab-org/gitlab-test"
+    iid="27"
+    issuabletype="issue"
+  />
+</div>
+`;

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

 import { GlDrawer } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import Vuex from 'vuex';
-import BoardContentSidebar from 'ee_component/boards/components/board_content_sidebar.vue';
-import BoardSidebarEpicSelect from 'ee_component/boards/components/sidebar/board_sidebar_epic_select.vue';
-import BoardSidebarWeightInput from 'ee_component/boards/components/sidebar/board_sidebar_weight_input.vue';
-import SidebarIterationWidget from 'ee_component/sidebar/components/sidebar_iteration_widget';
 import { stubComponent } from 'helpers/stub_component';
+import BoardContentSidebar from '~/boards/components/board_content_sidebar.vue';
 import { ISSUABLE, issuableTypes } from '~/boards/constants';
 import { mockIssue, mockIssueGroupPath, mockIssueProjectPath } from '../mock_data';
 
@@ -47,6 +44,8 @@ describe('ee/BoardContentSidebar', () => {
         canUpdate: true,
         rootPath: '/',
         groupId: 1,
+        epicFeatureAvailable: true,
+        iterationFeatureAvailable: true,
         weightFeatureAvailable: true,
       },
       store,
@@ -83,15 +82,7 @@ describe('ee/BoardContentSidebar', () => {
     wrapper = null;
   });
 
-  it('renders SidebarIterationWidget', () => {
-    expect(wrapper.find(SidebarIterationWidget).exists()).toBe(true);
-  });
-
-  it('renders BoardSidebarEpicSelect', () => {
-    expect(wrapper.find(BoardSidebarEpicSelect).exists()).toBe(true);
-  });
-
-  it('renders BoardSidebarWeightInput', () => {
-    expect(wrapper.find(BoardSidebarWeightInput).exists()).toBe(true);
+  it('matches the snapshot', () => {
+    expect(wrapper.element).toMatchSnapshot();
   });
 });

ee/spec/support/shared_examples/features/sidebar_shared_examples.rb

 # frozen_string_literal: true
 
 RSpec.shared_examples 'issue boards sidebar EE' do
-  context 'epic dropdown' do
+  context 'epics' do
+    context 'when epic feature available' do
       let_it_be(:epic1) { create(:epic, group: group) }
       let_it_be(:epic2) { create(:epic, group: group) }
 
@@ -9,6 +10,8 @@ RSpec.shared_examples 'issue boards sidebar EE' do
 
       context 'when the issue is associated with an epic' do
         before do
+          stub_licensed_features(epics: true)
+
           first_card_with_epic.click
         end
 
@@ -31,6 +34,118 @@ RSpec.shared_examples 'issue boards sidebar EE' do
             expect(page).to have_link(epic2.title, href: epic_path(epic2))
           end
         end
+
+        context 'when epics feature is not available' do
+          before do
+            stub_licensed_features(epics: false)
+
+            first_card_with_epic.click
+
+            wait_for_all_requests
+          end
+
+          it 'cannot find sidebar-epic' do
+            expect(page).not_to have_selector('[data-testid="sidebar-epic"]')
+          end
+        end
+      end
+    end
+
+    context 'iterations' do
+      context 'when iterations feature available' do
+        let_it_be(:iteration) { create(:iteration, group: group, start_date: 1.day.from_now, due_date: 2.days.from_now, title: 'Iteration 1') }
+        let_it_be(:iteration2) { create(:iteration, group: group, start_date: 2.days.ago, due_date: 1.day.ago, title: 'Iteration 2', state: 'closed', skip_future_date_validation: true) }
+
+        before do
+          iteration
+          stub_licensed_features(iterations: true)
+
+          first_card.click
+
+          wait_for_all_requests
+        end
+
+        it 'selects and updates the right iteration' do
+          find_and_click_edit_iteration
+
+          select_iteration(iteration.title)
+
+          expect(page.find('[data-testid="iteration-edit-link"]')).to have_content('Iteration 1')
+
+          find_and_click_edit_iteration
+
+          select_iteration('No iteration')
+
+          expect(page.find('[data-testid="iteration-edit-link"]')).to have_content('None')
+        end
+
+        context 'when iteration feature is not available' do
+          before do
+            stub_licensed_features(iterations: false)
+
+            first_card.click
+
+            wait_for_all_requests
+          end
+
+          it 'cannot find the iteration-edit-link' do
+            expect(page).not_to have_selector('[data-testid="iteration-edit-link"]')
+          end
+        end
+      end
+    end
+
+    def find_and_click_edit_iteration
+      page.find('[data-testid="iteration-edit-link"] [data-testid="edit-button"]').click
+
+      wait_for_all_requests
+    end
+
+    def select_iteration(iteration_name)
+      click_button(iteration_name)
+
+      wait_for_all_requests
+    end
+  end
+
+  context 'weight' do
+    context 'when issue weight feature available' do
+      before do
+        stub_licensed_features(issue_weights: true)
+
+        first_card.click
+
+        wait_for_all_requests
+      end
+
+      it 'selects and updates weight' do
+        page.within('[data-testid="sidebar-weight"]') do
+          expect(page).to have_content('None')
+
+          click_button('Edit')
+
+          fill_in 'Enter a number', with: '2'
+          find_field('Enter a number').native.send_keys :enter
+
+          wait_for_all_requests
+
+          expect(page).to have_content('2')
+        end
+      end
+
+      context 'when issue weight feature is not available' do
+        before do
+          stub_licensed_features(issue_weights: false)
+
+          first_card.click
+
+          wait_for_all_requests
+        end
+
+        it 'cannot find the sidebar-weight' do
+          expect(page).not_to have_selector('[data-testid="sidebar-weight"]')
+        end
+      end
     end
   end
 end