Merge branch 'jc/click-title-to-open-drawer-on-board' into 'master'

Open drawer when clicking board titles

See merge request https://gitlab.com/gitlab-org/gitlab/-/merge_requests/167178



Merged-by: Natalia Tepluhina <ntepluhina@gitlab.com>
Approved-by: Nick Brandt <nbrandt@gitlab.com>
Approved-by: Anastasia Khomchenko <akhomchenko@gitlab.com>
Approved-by: Natalia Tepluhina <ntepluhina@gitlab.com>
Reviewed-by: Natalia Tepluhina <ntepluhina@gitlab.com>
Co-authored-by: Jack Chapman <jachapman@gitlab.com>

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

@@ -91,6 +91,11 @@ export default {
       // Don't do anything if this happened on a no trigger element
       if (e.target.closest('.js-no-trigger')) return;
 
+      if (e.target.closest('.js-no-trigger-title') && (e.ctrlKey || e.metaKey || e.button === 1)) {
+        return;
+      }
+      e.preventDefault();
+
       const isMultiSelect = e.ctrlKey || e.metaKey;
       if (isMultiSelect && gon?.features?.boardMultiSelect) {
         this.toggleBoardItemMultiSelection(this.item);

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

@@ -3,6 +3,7 @@ import { GlLabel, GlTooltipDirective, GlIcon, GlLoadingIcon } from '@gitlab/ui';
 import { sortBy } from 'lodash';
 import boardCardInner from 'ee_else_ce/boards/mixins/board_card_inner';
 import { isScopedLabel, convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
+import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import { updateHistory, queryToObject } from '~/lib/utils/url_utility';
 import { sprintf, __, n__ } from '~/locale';
 import isShowingLabelsQuery from '~/graphql_shared/client/is_showing_labels.query.graphql';
@@ -36,7 +37,7 @@ export default {
   directives: {
     GlTooltip: GlTooltipDirective,
   },
-  mixins: [boardCardInner],
+  mixins: [boardCardInner, glFeatureFlagsMixin()],
   inject: [
     'allowSubEpics',
     'rootPath',
@@ -260,8 +261,13 @@ export default {
         <a
           :href="item.path || item.webUrl || ''"
           :title="item.title"
-          :class="{ '!gl-text-gray-400': isLoading }"
-          class="js-no-trigger gl-text-primary hover:gl-text-gray-900"
+          :class="{
+            '!gl-text-gray-400': isLoading,
+            'js-no-trigger': !glFeatures.issuesListDrawer,
+            'js-no-trigger-title': glFeatures.issuesListDrawer,
+          }"
+          class="gl-text-primary hover:gl-text-gray-900"
+          data-testid="board-card-title-link"
           @mousemove.stop
           >{{ item.title }}</a
         >

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

@@ -5,7 +5,6 @@ import produce from 'immer';
 import Draggable from 'vuedraggable';
 import BoardAddNewColumn from 'ee_else_ce/boards/components/board_add_new_column.vue';
 import BoardAddNewColumnTrigger from '~/boards/components/board_add_new_column_trigger.vue';
-import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import WorkItemDrawer from '~/work_items/components/work_item_drawer.vue';
 import { s__ } from '~/locale';
 import { defaultSortableOptions, DRAG_DELAY } from '~/sortable/constants';
@@ -39,7 +38,6 @@ export default {
     GlAlert,
     WorkItemDrawer,
   },
-  mixins: [glFeatureFlagsMixin()],
   inject: [
     'boardType',
     'canAdminList',

spec/frontend/boards/components/board_card_spec.js

@@ -96,15 +96,27 @@ describe('Board card', () => {
   });
 
   describe('when GlLabel is clicked in BoardCardInner', () => {
-    it("doesn't call setSelectedBoardItemsMutation", () => {
+    it("doesn't call setSelectedBoardItemsMutation", async () => {
       mountComponent();
 
-      wrapper.findComponent(GlLabel).trigger('mouseup');
+      await wrapper.findComponent(GlLabel).trigger('mouseup');
 
       expect(mockSetSelectedBoardItemsResolver).toHaveBeenCalledTimes(0);
     });
   });
 
+  describe('when issuable title is clicked in BoardCardInner and issuesListDrawer feature is enabled', () => {
+    it('calls mockSetSelectedBoardItemsResolver', async () => {
+      mountComponent({ provide: { glFeatures: { issuesListDrawer: true } } });
+
+      await wrapper.findByTestId('board-card-title-link').trigger('click');
+
+      await waitForPromises();
+
+      expect(mockSetActiveBoardItemResolver).toHaveBeenCalledTimes(1);
+    });
+  });
+
   it('should not highlight the card by default', () => {
     mountComponent();