From 36721b31d193538e7deafeeb3320ec624bfa3bcc Mon Sep 17 00:00:00 2001 From: NataliaTepluhina Date: Tue, 22 Oct 2024 11:23:50 +0200 Subject: [PATCH 01/11] Added initial changes for new wip feature flag --- .../work_items/pages/work_items_list_app.vue | 12 ++++++------ doc/user/group/epics/epic_boards.md | 2 +- doc/user/group/epics/manage_epics.md | 1 + ee/app/controllers/groups/epic_boards_controller.rb | 2 +- ee/app/controllers/groups/epics_controller.rb | 2 +- ee/db/embedding/schema_migrations/20240608215318 | 1 + .../swimlanes/epics_swimlanes_sidebar_labels_spec.rb | 2 +- .../features/epic_boards/epic_boards_sidebar_spec.rb | 2 +- 8 files changed, 13 insertions(+), 11 deletions(-) create mode 100644 ee/db/embedding/schema_migrations/20240608215318 diff --git a/app/assets/javascripts/work_items/pages/work_items_list_app.vue b/app/assets/javascripts/work_items/pages/work_items_list_app.vue index e9f219e221d8a1..9d7a6b68184ab9 100644 --- a/app/assets/javascripts/work_items/pages/work_items_list_app.vue +++ b/app/assets/javascripts/work_items/pages/work_items_list_app.vue @@ -159,10 +159,7 @@ export default { if (data?.[this.namespace]) { if (this.isGroup) { - const rootBreadcrumbName = - this.workItemType === WORK_ITEM_TYPE_ENUM_EPIC - ? __('Epics') - : s__('WorkItem|Work items'); + const rootBreadcrumbName = this.isEpicsList ? __('Epics') : s__('WorkItem|Work items'); document.title = `${rootBreadcrumbName} · ${data.group.name} · GitLab`; } else { document.title = `Issues · ${data.project.name} · GitLab`; @@ -217,7 +214,10 @@ export default { }); }, workItemDrawerEnabled() { - return this.glFeatures?.issuesListDrawer; + return this.isEpicsList ? this.glFeatures.epicsListDrawer : this.glFeatures.issuesListDrawer; + }, + isEpicsList() { + return this.workItemType === WORK_ITEM_TYPE_ENUM_EPIC; }, hasSearch() { return Boolean(this.searchQuery); @@ -239,7 +239,7 @@ export default { search: this.searchQuery, ...this.apiFilterParams, ...this.pageParams, - excludeProjects: this.workItemType === WORK_ITEM_TYPE_ENUM_EPIC, + excludeProjects: this.isEpicsList, includeDescendants: !this.apiFilterParams.fullPath, types: this.apiFilterParams.types || this.workItemType || this.defaultWorkItemTypes, isGroup: this.isGroup, diff --git a/doc/user/group/epics/epic_boards.md b/doc/user/group/epics/epic_boards.md index 26c5f3fd3300c0..680e2ed83f53e0 100644 --- a/doc/user/group/epics/epic_boards.md +++ b/doc/user/group/epics/epic_boards.md @@ -127,7 +127,7 @@ To create an epic from a list in epic board: ### Edit an epic - + If your administrator enabled the [epic drawer](manage_epics.md#open-epics-in-a-drawer), when you select an epic card from the epic board, the epic opens in a drawer. diff --git a/doc/user/group/epics/manage_epics.md b/doc/user/group/epics/manage_epics.md index 969b50eb23d686..7d0e76b0607566 100644 --- a/doc/user/group/epics/manage_epics.md +++ b/doc/user/group/epics/manage_epics.md @@ -130,6 +130,7 @@ DETAILS: **Offering:** Self-managed > - [Introduced](https://gitlab.com/gitlab-org/gitlab/-/issues/464063) in GitLab 17.4 [with a flag](../../../administration/feature_flags.md) named `issues_list_drawer`. Disabled by default. +> - Feature flag name was [changed] to `epics_list_drawer` in GitLab 17.6. FLAG: The availability of this feature is controlled by a feature flag. diff --git a/ee/app/controllers/groups/epic_boards_controller.rb b/ee/app/controllers/groups/epic_boards_controller.rb index 3fed72882e929f..e1d46e6943a2a6 100644 --- a/ee/app/controllers/groups/epic_boards_controller.rb +++ b/ee/app/controllers/groups/epic_boards_controller.rb @@ -8,7 +8,7 @@ class Groups::EpicBoardsController < Groups::ApplicationController before_action do push_force_frontend_feature_flag(:work_item_epics, group.work_item_epics_enabled?) - push_frontend_feature_flag(:issues_list_drawer, group) + push_frontend_feature_flag(:epics_list_drawer, group) end track_event :index, :show, name: 'g_project_management_users_viewing_epic_boards' diff --git a/ee/app/controllers/groups/epics_controller.rb b/ee/app/controllers/groups/epics_controller.rb index afcaf292b99e2d..96ae4b4cb747bd 100644 --- a/ee/app/controllers/groups/epics_controller.rb +++ b/ee/app/controllers/groups/epics_controller.rb @@ -25,7 +25,7 @@ class Groups::EpicsController < Groups::ApplicationController push_force_frontend_feature_flag(:glql_integration, @group&.glql_integration_feature_flag_enabled?) push_frontend_feature_flag(:work_item_epics_list, @group) push_force_frontend_feature_flag(:work_items_alpha, group.work_items_alpha_feature_flag_enabled?) - push_frontend_feature_flag(:issues_list_drawer, @group) + push_frontend_feature_flag(:epics_list_drawer, @group) push_frontend_feature_flag(:bulk_update_work_items_mutation, @group) end diff --git a/ee/db/embedding/schema_migrations/20240608215318 b/ee/db/embedding/schema_migrations/20240608215318 new file mode 100644 index 00000000000000..31cbcfc12da72a --- /dev/null +++ b/ee/db/embedding/schema_migrations/20240608215318 @@ -0,0 +1 @@ +f094f4f9cb933f9544f7b35f844ac66b019b8acaa025fd62648fdeef04df2596 \ No newline at end of file diff --git a/ee/spec/features/boards/swimlanes/epics_swimlanes_sidebar_labels_spec.rb b/ee/spec/features/boards/swimlanes/epics_swimlanes_sidebar_labels_spec.rb index b7f3d0d37a1d71..d310a1065f2a8a 100644 --- a/ee/spec/features/boards/swimlanes/epics_swimlanes_sidebar_labels_spec.rb +++ b/ee/spec/features/boards/swimlanes/epics_swimlanes_sidebar_labels_spec.rb @@ -20,7 +20,7 @@ context 'when work item drawer is disabled' do before do - stub_feature_flags(issues_list_drawer: false) + stub_feature_flags(epics_list_drawer: false) load_board group_board_path(group, group_board) load_epic_swimlanes load_unassigned_issues diff --git a/ee/spec/features/epic_boards/epic_boards_sidebar_spec.rb b/ee/spec/features/epic_boards/epic_boards_sidebar_spec.rb index ff9051d4213ca4..e002873f0703be 100644 --- a/ee/spec/features/epic_boards/epic_boards_sidebar_spec.rb +++ b/ee/spec/features/epic_boards/epic_boards_sidebar_spec.rb @@ -24,7 +24,7 @@ context 'when work item drawer is disabled' do before do stub_feature_flags(work_item_epics: false) - stub_feature_flags(issues_list_drawer: false) + stub_feature_flags(epics_list_drawer: false) sign_in(user) visit group_epic_boards_path(group) -- GitLab From d210e143481abb0c7ad2d4f4a910f4bc3473bba2 Mon Sep 17 00:00:00 2001 From: NataliaTepluhina Date: Tue, 22 Oct 2024 11:40:08 +0200 Subject: [PATCH 02/11] Added correct feature flag to boards --- app/assets/javascripts/boards/components/board_app.vue | 2 +- ee/config/feature_flags/wip/epics_list_drawer.yml | 9 +++++++++ ee/db/embedding/schema_migrations/20240608215318 | 1 - 3 files changed, 10 insertions(+), 2 deletions(-) create mode 100644 ee/config/feature_flags/wip/epics_list_drawer.yml delete mode 100644 ee/db/embedding/schema_migrations/20240608215318 diff --git a/app/assets/javascripts/boards/components/board_app.vue b/app/assets/javascripts/boards/components/board_app.vue index fec1bcf6ba1299..d6eeb82f8b9710 100644 --- a/app/assets/javascripts/boards/components/board_app.vue +++ b/app/assets/javascripts/boards/components/board_app.vue @@ -92,7 +92,7 @@ export default { computed: { issuesDrawerEnabled() { - return Boolean(this.glFeatures.issuesListDrawer); + return this.isIssueBoard ? this.glFeatures.issuesListDrawer : this.glFeatures.epicsListDrawer; }, listQueryVariables() { return { diff --git a/ee/config/feature_flags/wip/epics_list_drawer.yml b/ee/config/feature_flags/wip/epics_list_drawer.yml new file mode 100644 index 00000000000000..501e12dde2a895 --- /dev/null +++ b/ee/config/feature_flags/wip/epics_list_drawer.yml @@ -0,0 +1,9 @@ +--- +name: epics_list_drawer +feature_issue_url: +introduced_by_url: +rollout_issue_url: +milestone: '17.6' +group: group::product planning +type: wip +default_enabled: false diff --git a/ee/db/embedding/schema_migrations/20240608215318 b/ee/db/embedding/schema_migrations/20240608215318 deleted file mode 100644 index 31cbcfc12da72a..00000000000000 --- a/ee/db/embedding/schema_migrations/20240608215318 +++ /dev/null @@ -1 +0,0 @@ -f094f4f9cb933f9544f7b35f844ac66b019b8acaa025fd62648fdeef04df2596 \ No newline at end of file -- GitLab From dbda3a91268af9e870f5eeaf82818b3100cac31c Mon Sep 17 00:00:00 2001 From: NataliaTepluhina Date: Tue, 22 Oct 2024 11:42:52 +0200 Subject: [PATCH 03/11] Added correct classes to board card --- .../javascripts/boards/components/board_card_inner.vue | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/app/assets/javascripts/boards/components/board_card_inner.vue b/app/assets/javascripts/boards/components/board_card_inner.vue index f89cb85339bba5..e0bd73983dc87b 100644 --- a/app/assets/javascripts/boards/components/board_card_inner.vue +++ b/app/assets/javascripts/boards/components/board_card_inner.vue @@ -181,6 +181,9 @@ export default { hasActions() { return !this.disabled && this.list.listType !== ListType.closed; }, + workItemDrawerEnabled() { + return this.isEpicBoard ? this.glFeatures.epicsListDrawer : this.glFeatures.issuesListDrawer; + }, }, methods: { setError, @@ -263,8 +266,8 @@ export default { :title="item.title" :class="{ '!gl-text-gray-400': isLoading, - 'js-no-trigger': !glFeatures.issuesListDrawer, - 'js-no-trigger-title': glFeatures.issuesListDrawer, + 'js-no-trigger': !workItemDrawerEnabled, + 'js-no-trigger-title': workItemDrawerEnabled, }" class="gl-text-primary hover:gl-text-gray-900" data-testid="board-card-title-link" -- GitLab From 798fa912a7aaaedf6a0818a432306e941c45dd20 Mon Sep 17 00:00:00 2001 From: NataliaTepluhina Date: Tue, 22 Oct 2024 11:52:57 +0200 Subject: [PATCH 04/11] Fixed a bug for "full screen" on boards --- .../javascripts/work_items/components/work_item_drawer.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/assets/javascripts/work_items/components/work_item_drawer.vue b/app/assets/javascripts/work_items/components/work_item_drawer.vue index 995395a469ab9e..8786d48ee6a0a5 100644 --- a/app/assets/javascripts/work_items/components/work_item_drawer.vue +++ b/app/assets/javascripts/work_items/components/work_item_drawer.vue @@ -108,7 +108,7 @@ export default { const regex = new RegExp(`groups\/${escapedFullPath}\/-\/(work_items|epics)\/\\d+`); const isWorkItemPath = regex.test(workItem.webUrl); - if (isWorkItemPath || this.issueAsWorkItem) { + if (this.$router && (isWorkItemPath || this.issueAsWorkItem)) { this.$router.push({ name: 'workItem', params: { -- GitLab From 3801c3f3b508b1aa5e668c13be9d87f0abbc16b9 Mon Sep 17 00:00:00 2001 From: Natalia Tepluhina Date: Tue, 22 Oct 2024 10:44:14 +0000 Subject: [PATCH 05/11] Apply 1 suggestion(s) to 1 file(s) Co-authored-by: DANGER_GITLAB_API_TOKEN --- ee/config/feature_flags/wip/epics_list_drawer.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ee/config/feature_flags/wip/epics_list_drawer.yml b/ee/config/feature_flags/wip/epics_list_drawer.yml index 501e12dde2a895..c3ec86d6540aea 100644 --- a/ee/config/feature_flags/wip/epics_list_drawer.yml +++ b/ee/config/feature_flags/wip/epics_list_drawer.yml @@ -1,7 +1,7 @@ --- name: epics_list_drawer feature_issue_url: -introduced_by_url: +introduced_by_url: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/170066 rollout_issue_url: milestone: '17.6' group: group::product planning -- GitLab From 8cde306e025a904e97b2dd4236e34cd1cd3c03a6 Mon Sep 17 00:00:00 2001 From: NataliaTepluhina Date: Tue, 22 Oct 2024 12:56:00 +0200 Subject: [PATCH 06/11] Fixed wrong FF being used in the test --- .../boards/swimlanes/epics_swimlanes_sidebar_labels_spec.rb | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ee/spec/features/boards/swimlanes/epics_swimlanes_sidebar_labels_spec.rb b/ee/spec/features/boards/swimlanes/epics_swimlanes_sidebar_labels_spec.rb index d310a1065f2a8a..b7f3d0d37a1d71 100644 --- a/ee/spec/features/boards/swimlanes/epics_swimlanes_sidebar_labels_spec.rb +++ b/ee/spec/features/boards/swimlanes/epics_swimlanes_sidebar_labels_spec.rb @@ -20,7 +20,7 @@ context 'when work item drawer is disabled' do before do - stub_feature_flags(epics_list_drawer: false) + stub_feature_flags(issues_list_drawer: false) load_board group_board_path(group, group_board) load_epic_swimlanes load_unassigned_issues -- GitLab From bdb287952e36c2b1fed2df853badae8fcabf8c74 Mon Sep 17 00:00:00 2001 From: NataliaTepluhina Date: Wed, 23 Oct 2024 12:52:45 +0200 Subject: [PATCH 07/11] Added tests for board app --- .../boards/components/board_app.vue | 4 +- .../boards/components/board_app_spec.js | 52 +++++++++++++++++-- 2 files changed, 52 insertions(+), 4 deletions(-) diff --git a/app/assets/javascripts/boards/components/board_app.vue b/app/assets/javascripts/boards/components/board_app.vue index d6eeb82f8b9710..e93c5fbb8db525 100644 --- a/app/assets/javascripts/boards/components/board_app.vue +++ b/app/assets/javascripts/boards/components/board_app.vue @@ -92,7 +92,9 @@ export default { computed: { issuesDrawerEnabled() { - return this.isIssueBoard ? this.glFeatures.issuesListDrawer : this.glFeatures.epicsListDrawer; + return Boolean( + this.isIssueBoard ? this.glFeatures.issuesListDrawer : this.glFeatures.epicsListDrawer, + ); }, listQueryVariables() { return { diff --git a/spec/frontend/boards/components/board_app_spec.js b/spec/frontend/boards/components/board_app_spec.js index 4db572d1f58fb2..f8c20b787ac466 100644 --- a/spec/frontend/boards/components/board_app_spec.js +++ b/spec/frontend/boards/components/board_app_spec.js @@ -29,6 +29,7 @@ describe('BoardApp', () => { issue = rawIssue, handler = boardListQueryHandler, workItemDrawerEnabled = true, + isIssueBoard = true, } = {}) => { mockApollo = createMockApollo([[boardListsQuery, handler]]); mockApollo.clients.defaultClient.cache.writeQuery({ @@ -44,12 +45,13 @@ describe('BoardApp', () => { fullPath: 'gitlab-org', initialBoardId: 'gid://gitlab/Board/1', initialFilterParams: {}, - issuableType: 'issue', - boardType: 'project', - isIssueBoard: true, + issuableType: isIssueBoard ? 'issue' : 'epic', + boardType: isIssueBoard ? 'project' : 'group', + isIssueBoard, isGroupBoard: false, glFeatures: { issuesListDrawer: workItemDrawerEnabled, + epicsListDrawer: workItemDrawerEnabled, }, }, }); @@ -98,4 +100,48 @@ describe('BoardApp', () => { expect(cacheUpdates.setError).toHaveBeenCalled(); }); + + describe('when on issue board', () => { + describe('when `issuesListDrawer` feature is disabled', () => { + beforeEach(() => { + createComponent({ workItemDrawerEnabled: false }); + }); + + it('passes `useWorkItemDrawer` as false', () => { + expect(findBoardContent().props('useWorkItemDrawer')).toBe(false); + }); + }); + + describe('when `issuesListDrawer` feature is enabled', () => { + beforeEach(() => { + createComponent({ workItemDrawerEnabled: true }); + }); + + it('passes `useWorkItemDrawer` as true', () => { + expect(findBoardContent().props('useWorkItemDrawer')).toBe(true); + }); + }); + }); + + describe('when on epic board', () => { + describe('when `epicsListDrawer` feature is disabled', () => { + beforeEach(() => { + createComponent({ isIssueBoard: false, workItemDrawerEnabled: false }); + }); + + it('passes `useWorkItemDrawer` as false', () => { + expect(findBoardContent().props('useWorkItemDrawer')).toBe(false); + }); + }); + + describe('when issues when `issuesListDrawer` feature is enabled', () => { + beforeEach(() => { + createComponent({ isIssueBoard: false, workItemDrawerEnabled: true }); + }); + + it('passes `useWorkItemDrawer` as true', () => { + expect(findBoardContent().props('useWorkItemDrawer')).toBe(true); + }); + }); + }); }); -- GitLab From 9930fa439ddf837d2d3145e5e82fecdcf1db7f07 Mon Sep 17 00:00:00 2001 From: NataliaTepluhina Date: Wed, 23 Oct 2024 13:31:08 +0200 Subject: [PATCH 08/11] Added tests for work items app --- .../components/work_items_list_app_spec.js | 171 +++++++++++------- 1 file changed, 109 insertions(+), 62 deletions(-) diff --git a/spec/frontend/work_items/list/components/work_items_list_app_spec.js b/spec/frontend/work_items/list/components/work_items_list_app_spec.js index 326e04fd7f97f5..66e2befcf2edf4 100644 --- a/spec/frontend/work_items/list/components/work_items_list_app_spec.js +++ b/spec/frontend/work_items/list/components/work_items_list_app_spec.js @@ -41,7 +41,12 @@ import { sortOptions, urlSortParams } from '~/work_items/pages/list/constants'; import getWorkItemStateCountsQuery from '~/work_items/graphql/list/get_work_item_state_counts.query.graphql'; import getWorkItemsQuery from '~/work_items/graphql/list/get_work_items.query.graphql'; import WorkItemDrawer from '~/work_items/components/work_item_drawer.vue'; -import { STATE_CLOSED, DETAIL_VIEW_QUERY_PARAM_NAME } from '~/work_items/constants'; +import { + STATE_CLOSED, + DETAIL_VIEW_QUERY_PARAM_NAME, + WORK_ITEM_TYPE_ENUM_EPIC, + WORK_ITEM_TYPE_ENUM_ISSUE, +} from '~/work_items/constants'; import { createRouter } from '~/work_items/router'; import { groupWorkItemsQueryResponse, @@ -461,92 +466,134 @@ describeSkipVue3(skipReason, () => { }); describe('work item drawer', () => { - describe('when issues_list_drawer feature is disabled', () => { - it('is not rendered when feature is disabled', async () => { - mountComponent({ - provide: { - glFeatures: { - issuesListDrawer: false, + describe('when rendering issues list', () => { + describe('when issues_list_drawer feature is disabled', () => { + it('is not rendered when feature is disabled', async () => { + mountComponent({ + provide: { + glFeatures: { + issuesListDrawer: false, + epicsListDrawer: true, + }, }, - }, - }); - await waitForPromises(); + }); + await waitForPromises(); - expect(findDrawer().exists()).toBe(false); + expect(findDrawer().exists()).toBe(false); + }); }); - }); - describe('when issues_list_drawer feature is enabled', () => { - beforeEach(async () => { - mountComponent({ - provide: { - glFeatures: { - issuesListDrawer: true, + describe('when issues_list_drawer feature is enabled', () => { + beforeEach(async () => { + mountComponent({ + provide: { + glFeatures: { + issuesListDrawer: true, + epicsListDrawer: false, + }, }, - }, + }); + await waitForPromises(); }); - await waitForPromises(); - }); - it('is rendered when feature is enabled', () => { - expect(findDrawer().exists()).toBe(true); - }); + it('is rendered when feature is enabled', () => { + expect(findDrawer().exists()).toBe(true); + }); - describe('selecting issues', () => { - const issue = groupWorkItemsQueryResponse.data.group.workItems.nodes[0]; - const payload = { - iid: issue.iid, - webUrl: issue.webUrl, - fullPath: issue.namespace.fullPath, - }; + describe('selecting issues', () => { + const issue = groupWorkItemsQueryResponse.data.group.workItems.nodes[0]; + const payload = { + iid: issue.iid, + webUrl: issue.webUrl, + fullPath: issue.namespace.fullPath, + }; - beforeEach(async () => { - findIssuableList().vm.$emit('select-issuable', payload); + beforeEach(async () => { + findIssuableList().vm.$emit('select-issuable', payload); - await nextTick(); - }); + await nextTick(); + }); - it('opens drawer when work item is selected', () => { - expect(findDrawer().props('open')).toBe(true); - expect(findDrawer().props('activeItem')).toEqual(payload); - }); + it('opens drawer when work item is selected', () => { + expect(findDrawer().props('open')).toBe(true); + expect(findDrawer().props('activeItem')).toEqual(payload); + }); - const checkThatDrawerPropsAreEmpty = () => { - expect(findDrawer().props('activeItem')).toBeNull(); - expect(findDrawer().props('open')).toBe(false); - }; + const checkThatDrawerPropsAreEmpty = () => { + expect(findDrawer().props('activeItem')).toBeNull(); + expect(findDrawer().props('open')).toBe(false); + }; - it('resets the selected item when the drawer is closed', async () => { - findDrawer().vm.$emit('close'); + it('resets the selected item when the drawer is closed', async () => { + findDrawer().vm.$emit('close'); - await nextTick(); + await nextTick(); - checkThatDrawerPropsAreEmpty(); - }); + checkThatDrawerPropsAreEmpty(); + }); - it('refetches and resets when work item is deleted', async () => { - expect(defaultQueryHandler).toHaveBeenCalledTimes(1); + it('refetches and resets when work item is deleted', async () => { + expect(defaultQueryHandler).toHaveBeenCalledTimes(1); - findDrawer().vm.$emit('workItemDeleted'); + findDrawer().vm.$emit('workItemDeleted'); - await nextTick(); + await nextTick(); - checkThatDrawerPropsAreEmpty(); + checkThatDrawerPropsAreEmpty(); - expect(defaultQueryHandler).toHaveBeenCalledTimes(2); - }); + expect(defaultQueryHandler).toHaveBeenCalledTimes(2); + }); + + it('refetches when the selected work item is closed', async () => { + expect(defaultQueryHandler).toHaveBeenCalledTimes(1); - it('refetches when the selected work item is closed', async () => { - expect(defaultQueryHandler).toHaveBeenCalledTimes(1); + // component displays open work items by default + findDrawer().vm.$emit('work-item-updated', { + state: STATE_CLOSED, + }); - // component displays open work items by default - findDrawer().vm.$emit('work-item-updated', { - state: STATE_CLOSED, + await nextTick(); + + expect(defaultQueryHandler).toHaveBeenCalledTimes(2); }); + }); + }); + }); - await nextTick(); + describe('when rendering epics list', () => { + describe('when epics_list_drawer feature is disabled', () => { + it('is not rendered when feature is disabled', async () => { + mountComponent({ + provide: { + glFeatures: { + issuesListDrawer: true, + epicsListDrawer: false, + }, + workItemType: WORK_ITEM_TYPE_ENUM_EPIC, + }, + }); + await waitForPromises(); + + expect(findDrawer().exists()).toBe(false); + }); + }); + + describe('when issues_list_drawer feature is enabled', () => { + beforeEach(async () => { + mountComponent({ + provide: { + glFeatures: { + issuesListDrawer: false, + epicsListDrawer: true, + }, + workItemType: WORK_ITEM_TYPE_ENUM_EPIC, + }, + }); + await waitForPromises(); + }); - expect(defaultQueryHandler).toHaveBeenCalledTimes(2); + it('is rendered when feature is enabled', () => { + expect(findDrawer().exists()).toBe(true); }); }); }); -- GitLab From f956b0bda38ec56bc401ea8b915ef60ce3017cf4 Mon Sep 17 00:00:00 2001 From: NataliaTepluhina Date: Wed, 23 Oct 2024 14:36:15 +0200 Subject: [PATCH 09/11] Fixed board app spec --- .../boards/components/board_app_spec.js | 41 ++++++++++++++++++- .../boards/components/board_app_spec.js | 22 ---------- .../components/work_items_list_app_spec.js | 1 - 3 files changed, 40 insertions(+), 24 deletions(-) diff --git a/ee/spec/frontend/boards/components/board_app_spec.js b/ee/spec/frontend/boards/components/board_app_spec.js index 3e8c2c7af1d696..97b78d11a762e3 100644 --- a/ee/spec/frontend/boards/components/board_app_spec.js +++ b/ee/spec/frontend/boards/components/board_app_spec.js @@ -5,12 +5,15 @@ import VueApollo from 'vue-apollo'; import { issueBoardListsQueryResponse } from 'jest/boards/mock_data'; import createMockApollo from 'helpers/mock_apollo_helper'; import BoardApp from '~/boards/components/board_app.vue'; +import BoardContent from '~/boards/components/board_content.vue'; import epicBoardListsQuery from 'ee_component/boards/graphql/epic_board_lists.query.graphql'; import activeBoardItemQuery from 'ee_else_ce/boards/graphql/client/active_board_item.query.graphql'; import boardListsQuery from 'ee_else_ce/boards/graphql/board_lists.query.graphql'; import { rawIssue, epicBoardListsQueryResponse } from '../mock_data'; describe('BoardApp', () => { + let wrapper; + const boardListQueryHandler = jest.fn().mockResolvedValue(issueBoardListsQueryResponse); const epicBoardListQueryHandler = jest.fn().mockResolvedValue(epicBoardListsQueryResponse); const mockApollo = createMockApollo([ @@ -18,6 +21,8 @@ describe('BoardApp', () => { [epicBoardListsQuery, epicBoardListQueryHandler], ]); + const findBoardContent = () => wrapper.findComponent(BoardContent); + Vue.use(VueApollo); const createComponent = ({ issue = rawIssue, provide = {} } = {}) => { @@ -28,7 +33,7 @@ describe('BoardApp', () => { }, }); - shallowMount(BoardApp, { + wrapper = shallowMount(BoardApp, { apolloProvider: mockApollo, provide: { fullPath: 'gitlab-org', @@ -58,4 +63,38 @@ describe('BoardApp', () => { expect(notCalledHandler).not.toHaveBeenCalled(); }, ); + + describe('when on epic board', () => { + describe('when `epicsListDrawer` feature is disabled', () => { + beforeEach(() => { + createComponent({ + provide: { + isIssueBoard: false, + issuableType: 'epic', + glFeatures: { issuesListDrawer: true, epicsListDrawer: false }, + }, + }); + }); + + it('passes `useWorkItemDrawer` as false', () => { + expect(findBoardContent().props('useWorkItemDrawer')).toBe(false); + }); + }); + + describe('when issues when `issuesListDrawer` feature is enabled', () => { + beforeEach(() => { + createComponent({ + provide: { + isIssueBoard: false, + issuableType: 'epic', + glFeatures: { issuesListDrawer: false, epicsListDrawer: true }, + }, + }); + }); + + it('passes `useWorkItemDrawer` as true', () => { + expect(findBoardContent().props('useWorkItemDrawer')).toBe(true); + }); + }); + }); }); diff --git a/spec/frontend/boards/components/board_app_spec.js b/spec/frontend/boards/components/board_app_spec.js index f8c20b787ac466..cb98da4e0b2825 100644 --- a/spec/frontend/boards/components/board_app_spec.js +++ b/spec/frontend/boards/components/board_app_spec.js @@ -122,26 +122,4 @@ describe('BoardApp', () => { }); }); }); - - describe('when on epic board', () => { - describe('when `epicsListDrawer` feature is disabled', () => { - beforeEach(() => { - createComponent({ isIssueBoard: false, workItemDrawerEnabled: false }); - }); - - it('passes `useWorkItemDrawer` as false', () => { - expect(findBoardContent().props('useWorkItemDrawer')).toBe(false); - }); - }); - - describe('when issues when `issuesListDrawer` feature is enabled', () => { - beforeEach(() => { - createComponent({ isIssueBoard: false, workItemDrawerEnabled: true }); - }); - - it('passes `useWorkItemDrawer` as true', () => { - expect(findBoardContent().props('useWorkItemDrawer')).toBe(true); - }); - }); - }); }); diff --git a/spec/frontend/work_items/list/components/work_items_list_app_spec.js b/spec/frontend/work_items/list/components/work_items_list_app_spec.js index 66e2befcf2edf4..dbd87c5e42cd8f 100644 --- a/spec/frontend/work_items/list/components/work_items_list_app_spec.js +++ b/spec/frontend/work_items/list/components/work_items_list_app_spec.js @@ -45,7 +45,6 @@ import { STATE_CLOSED, DETAIL_VIEW_QUERY_PARAM_NAME, WORK_ITEM_TYPE_ENUM_EPIC, - WORK_ITEM_TYPE_ENUM_ISSUE, } from '~/work_items/constants'; import { createRouter } from '~/work_items/router'; import { -- GitLab From 9ad7599ae15650d84793825f495a9ef92a68ff41 Mon Sep 17 00:00:00 2001 From: NataliaTepluhina Date: Wed, 23 Oct 2024 14:37:50 +0200 Subject: [PATCH 10/11] Removed unused parameter --- spec/frontend/boards/components/board_app_spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/spec/frontend/boards/components/board_app_spec.js b/spec/frontend/boards/components/board_app_spec.js index cb98da4e0b2825..3fa4cb5b82471f 100644 --- a/spec/frontend/boards/components/board_app_spec.js +++ b/spec/frontend/boards/components/board_app_spec.js @@ -51,7 +51,7 @@ describe('BoardApp', () => { isGroupBoard: false, glFeatures: { issuesListDrawer: workItemDrawerEnabled, - epicsListDrawer: workItemDrawerEnabled, + epicsListDrawer: !workItemDrawerEnabled, }, }, }); -- GitLab From 8bd776e57aeeb25439d9867c9b5728152813a471 Mon Sep 17 00:00:00 2001 From: NataliaTepluhina Date: Wed, 23 Oct 2024 18:46:53 +0200 Subject: [PATCH 11/11] Added a check for object type --- .../javascripts/work_items/pages/work_items_list_app.vue | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/app/assets/javascripts/work_items/pages/work_items_list_app.vue b/app/assets/javascripts/work_items/pages/work_items_list_app.vue index 9d7a6b68184ab9..a35606b21d9f26 100644 --- a/app/assets/javascripts/work_items/pages/work_items_list_app.vue +++ b/app/assets/javascripts/work_items/pages/work_items_list_app.vue @@ -408,7 +408,11 @@ export default { }; }, activeWorkItemType() { - return this.workItemType || this.activeItem?.workItemType; + const activeWorkItemTypeName = + typeof this.activeItem?.workItemType === 'object' + ? this.activeItem?.workItemType?.name + : this.activeItem?.workItemType; + return this.workItemType || activeWorkItemTypeName; }, }, watch: { -- GitLab