-
-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.
+When you select an epic card from the epic board, the [epic opens in a drawer](manage_epics.md#open-epics-in-a-drawer).
There, you can edit all the fields, including the description, comments, or related items.
### Filter epics
diff --git a/doc/user/group/epics/manage_epics.md b/doc/user/group/epics/manage_epics.md
index c2993d6b2f02acf146a8ec74f60a58c88ffb03e6..af2251d082364fb1f0e59c2aa57fe67198dd1930 100644
--- a/doc/user/group/epics/manage_epics.md
+++ b/doc/user/group/epics/manage_epics.md
@@ -447,16 +447,10 @@ To configure epic display preferences:
- [Introduced](https://gitlab.com/gitlab-org/gitlab/-/issues/464698) in GitLab 17.4 [with a flag](../../../administration/feature_flags/_index.md) named `work_item_view_for_issues`. Enabled by default.
- Toggling between drawer and full page view [introduced](https://gitlab.com/gitlab-org/gitlab/-/issues/536620) in GitLab 18.2.
+- [Generally available](https://gitlab.com/gitlab-org/gitlab/-/issues/500367) in GitLab 18.6. Feature flag `epics_list_drawer` removed.
{{< /history >}}
-{{< alert type="flag" >}}
-
-The availability of this feature is controlled by a feature flag.
-For more information, see the history.
-
-{{< /alert >}}
-
When you select an epic from the Epics page or an epic board, it opens in a drawer.
You can then view and edit its details without losing context of the epic list or board.
diff --git a/doc/user/project/issue_board.md b/doc/user/project/issue_board.md
index 9ec5416ef5fe27106959335b1aabcaed57268b37..e6845d544790003dc41a5cbfd1342c0aba0c27bb 100644
--- a/doc/user/project/issue_board.md
+++ b/doc/user/project/issue_board.md
@@ -547,11 +547,7 @@ You can edit the following issue attributes in the right sidebar:
- [Weight](issues/issue_weight.md)
- Time tracking
-
-
-If your administrator enabled the [issue drawer](issues/managing_issues.md#open-issues-in-a-drawer),
-when you select an issue card from the issue board, the issue opens in a drawer.
+When you select an issue card from the issue board, the [issue opens in a drawer](issues/managing_issues.md#open-issues-in-a-drawer).
There, you can edit all the fields, including the description, comments, or related items.
### Create a new list
diff --git a/doc/user/project/issues/managing_issues.md b/doc/user/project/issues/managing_issues.md
index 34e7fe96290a25a527946eb4c6616bf7b7466b20..09f1f1c1675ede4655a1f76608ab905e198be3b4 100644
--- a/doc/user/project/issues/managing_issues.md
+++ b/doc/user/project/issues/managing_issues.md
@@ -822,17 +822,11 @@ You can use the OR operator (**is one of: `||`**) when you [filter the list of i
- [Introduced](https://gitlab.com/gitlab-org/gitlab/-/issues/464063) in GitLab 17.4 [with a flag](../../../administration/feature_flags/_index.md) named `issues_list_drawer`. Disabled by default.
- In GitLab 17.11 and later, if [the new look for issues](issue_work_items.md) is enabled, this feature is also enabled.
+- [Generally available](https://gitlab.com/gitlab-org/gitlab/-/issues/463829) in GitLab 18.6. Feature flag `issues_list_drawer` removed.
{{< /history >}}
-{{< alert type="flag" >}}
-
-The availability of this feature is controlled by a feature flag.
-For more information, see the history.
-
-{{< /alert >}}
-
-When this feature is enabled, when you select an issue from the list or issue board, it opens in a drawer.
+When you select an issue from the list or issue board, it opens in a drawer.
You can then edit the issue or create comments.
To open the issue in full view:
diff --git a/ee/app/assets/stylesheets/page_bundles/boards.scss b/ee/app/assets/stylesheets/page_bundles/boards.scss
index d6fb9c51def6174f7014304058f17f643b37fe80..4f6fa2e8bf2c45c735c355564c58fc3086120a60 100644
--- a/ee/app/assets/stylesheets/page_bundles/boards.scss
+++ b/ee/app/assets/stylesheets/page_bundles/boards.scss
@@ -55,10 +55,6 @@ $epic-icons-spacing: 40px;
.board-epic-lane,
.swimlanes-button {
max-width: calc(100vw - #{$super-sidebar-width} - #{$epic-icons-spacing});
-
- .is-compact & {
- max-width: calc(100vw - #{$super-sidebar-width} - #{$right-sidebar-width} - #{$epic-icons-spacing});
- }
}
.board-epic-lane-shadow.show {
diff --git a/ee/app/controllers/groups/epic_boards_controller.rb b/ee/app/controllers/groups/epic_boards_controller.rb
index e1d46e6943a2a6c871779bf94e9111ea8aee700d..18b8f6e5dbe9f26d2a9406ac65551a8aa4767c0e 100644
--- a/ee/app/controllers/groups/epic_boards_controller.rb
+++ b/ee/app/controllers/groups/epic_boards_controller.rb
@@ -8,7 +8,6 @@ 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(: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 4ab832fbd05fbd4c01624dc897b659ceb5d9ed3e..8affa01daf03738a59cd96f70f521579cd4386d7 100644
--- a/ee/app/controllers/groups/epics_controller.rb
+++ b/ee/app/controllers/groups/epics_controller.rb
@@ -23,7 +23,6 @@ class Groups::EpicsController < Groups::ApplicationController
push_force_frontend_feature_flag(:glql_load_on_click, !!@group&.glql_load_on_click_feature_flag_enabled?)
push_force_frontend_feature_flag(:work_items_alpha, !!group.work_items_alpha_feature_flag_enabled?)
- push_frontend_feature_flag(:epics_list_drawer, @group)
push_frontend_feature_flag(:use_cached_rolled_up_weights, @group&.root_ancestor)
end
diff --git a/ee/config/feature_flags/wip/epics_list_drawer.yml b/ee/config/feature_flags/wip/epics_list_drawer.yml
deleted file mode 100644
index c3ec86d6540aea5a709ff28058d191916845f00d..0000000000000000000000000000000000000000
--- a/ee/config/feature_flags/wip/epics_list_drawer.yml
+++ /dev/null
@@ -1,9 +0,0 @@
----
-name: epics_list_drawer
-feature_issue_url:
-introduced_by_url: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/170066
-rollout_issue_url:
-milestone: '17.6'
-group: group::product planning
-type: wip
-default_enabled: false
diff --git a/ee/spec/frontend/boards/components/board_app_spec.js b/ee/spec/frontend/boards/components/board_app_spec.js
index 214be001dd3ac25c1b24f6e56056b7db1270838e..c456a2427e0ed15229ddc7799803e6f876bd5139 100644
--- a/ee/spec/frontend/boards/components/board_app_spec.js
+++ b/ee/spec/frontend/boards/components/board_app_spec.js
@@ -5,14 +5,13 @@ 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;
+ let wrapper; // eslint-disable-line no-unused-vars
const boardListQueryHandler = jest.fn().mockResolvedValue(issueBoardListsQueryResponse);
const epicBoardListQueryHandler = jest.fn().mockResolvedValue(epicBoardListsQueryResponse);
@@ -21,8 +20,6 @@ describe('BoardApp', () => {
[epicBoardListsQuery, epicBoardListQueryHandler],
]);
- const findBoardContent = () => wrapper.findComponent(BoardContent);
-
Vue.use(VueApollo);
const createComponent = ({ issue = rawIssue, provide = {} } = {}) => {
@@ -65,38 +62,4 @@ 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/ee/spec/frontend/boards/components/board_content_spec.js b/ee/spec/frontend/boards/components/board_content_spec.js
deleted file mode 100644
index 78b2dc064431f722e70589d758b8946fb6d5773b..0000000000000000000000000000000000000000
--- a/ee/spec/frontend/boards/components/board_content_spec.js
+++ /dev/null
@@ -1,71 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-import EpicBoardContentSidebar from 'ee/boards/components/epic_board_content_sidebar.vue';
-import BoardContent from '~/boards/components/board_content.vue';
-import BoardContentSidebar from '~/boards/components/board_content_sidebar.vue';
-
-describe('ee/BoardContent', () => {
- let wrapper;
-
- const createComponent = ({
- issuableType = 'issue',
- isIssueBoard = true,
- isEpicBoard = false,
- isSwimlanesOn = false,
- }) => {
- wrapper = shallowMount(BoardContent, {
- provide: {
- timeTrackingLimitToHours: false,
- canAdminList: false,
- canUpdate: false,
- labelsFilterBasePath: '',
- boardType: 'group',
- fullPath: 'gitlab-org/gitlab',
- issuableType,
- isIssueBoard,
- isEpicBoard,
- allowSubEpics: isEpicBoard ?? false,
- isGroupBoard: true,
- disabled: false,
- },
- propsData: {
- boardLists: {},
- boardId: 'gid://gitlab/Board/1',
- filterParams: {},
- isSwimlanesOn,
- listQueryVariables: {},
- addColumnFormVisible: false,
- useWorkItemDrawer: false,
- },
- stubs: {
- 'board-content-sidebar': BoardContentSidebar,
- 'epic-board-content-sidebar': EpicBoardContentSidebar,
- },
- });
- };
-
- beforeEach(() => {
- window.gon = { licensed_features: {} };
- });
-
- describe.each`
- isSwimlanesOn | isIssueBoard | isEpicBoard | resultIssue | resultEpic
- ${true} | ${true} | ${false} | ${true} | ${false}
- ${false} | ${true} | ${false} | ${true} | ${false}
- ${false} | ${false} | ${true} | ${false} | ${true}
- `(
- 'with isSwimlanesOn=$isSwimlanesOn',
- ({ isSwimlanesOn, isIssueBoard, isEpicBoard, resultIssue, resultEpic }) => {
- beforeEach(() => {
- createComponent({ isIssueBoard, isEpicBoard, isSwimlanesOn });
- });
-
- it(`renders BoardContentSidebar = ${resultIssue}`, () => {
- expect(wrapper.findComponent(BoardContentSidebar).exists()).toBe(resultIssue);
- });
-
- it(`renders EpicBoardContentSidebar = ${resultEpic}`, () => {
- expect(wrapper.findComponent(EpicBoardContentSidebar).exists()).toBe(resultEpic);
- });
- },
- );
-});
diff --git a/spec/frontend/boards/board_list_spec.js b/spec/frontend/boards/board_list_spec.js
index cd13a3b7f3b39e60ae8314da25f0032c4db68efb..002e30f6cd935f9532793c77835e28dbd12e31fc 100644
--- a/spec/frontend/boards/board_list_spec.js
+++ b/spec/frontend/boards/board_list_spec.js
@@ -441,7 +441,6 @@ describe('Board list component', () => {
const { id, iid, referencePath } = mockIssues[0];
const mountForShowParamTests = async ({
showParams = { id, iid, full_path: referencePath },
- drawerEnabled = false,
} = {}) => {
const show = btoa(JSON.stringify(showParams));
setWindowLocation(`?${DETAIL_VIEW_QUERY_PARAM_NAME}=${show}`);
@@ -455,26 +454,18 @@ describe('Board list component', () => {
setActiveBoardItem: mutationHandler,
},
},
- provide: {
- glFeatures: { issuesListDrawer: drawerEnabled },
- },
});
await waitForPromises();
};
- it('does not call `getParameterByName` if the drawer is disabled', async () => {
- await mountForShowParamTests();
- expect(getParameterByName).not.toHaveBeenCalled();
- });
-
it('calls `getParameterByName` to get the `show` parameter', async () => {
- await mountForShowParamTests({ drawerEnabled: true });
+ await mountForShowParamTests();
expect(getParameterByName).toHaveBeenCalledWith(DETAIL_VIEW_QUERY_PARAM_NAME);
});
describe('when the item is found in the list', () => {
it('calls the `setActiveWorkItem` mutation', async () => {
- await mountForShowParamTests({ drawerEnabled: true });
+ await mountForShowParamTests();
expect(mutationHandler).toHaveBeenCalled();
});
});
@@ -487,7 +478,6 @@ describe('Board list component', () => {
iid: '9999',
full_path: 'does-not-match/at-all',
},
- drawerEnabled: true,
});
expect(wrapper.emitted('cannot-find-active-item')).toHaveLength(1);
});
@@ -501,7 +491,6 @@ describe('Board list component', () => {
iid: '9999',
full_path: 'does-not-match/at-all',
},
- drawerEnabled: true,
});
await wrapper.setProps({ filterParams: { first: 50 } });
expect(listResolver).toHaveBeenCalledTimes(2);
@@ -511,7 +500,7 @@ describe('Board list component', () => {
describe('on window `popstate` event', () => {
it('calls `getParameterByName` to get the `show` parameter', async () => {
- await mountForShowParamTests({ drawerEnabled: true });
+ await mountForShowParamTests();
window.dispatchEvent(new Event('popstate'));
expect(getParameterByName).toHaveBeenCalledWith(DETAIL_VIEW_QUERY_PARAM_NAME);
});
diff --git a/spec/frontend/boards/components/board_app_spec.js b/spec/frontend/boards/components/board_app_spec.js
index effa21f1cdbc265c90eae1a1a0846e70710f3975..2a52e5369ce27b3c84a9f8a0884283edfdc78307 100644
--- a/spec/frontend/boards/components/board_app_spec.js
+++ b/spec/frontend/boards/components/board_app_spec.js
@@ -28,7 +28,6 @@ describe('BoardApp', () => {
const createComponent = ({
issue = rawIssue,
handler = boardListQueryHandler,
- workItemDrawerEnabled = true,
isIssueBoard = true,
} = {}) => {
mockApollo = createMockApollo([[boardListsQuery, handler]]);
@@ -49,10 +48,6 @@ describe('BoardApp', () => {
boardType: isIssueBoard ? 'project' : 'group',
isIssueBoard,
isGroupBoard: false,
- glFeatures: {
- issuesListDrawer: workItemDrawerEnabled,
- epicsListDrawer: !workItemDrawerEnabled,
- },
hasCustomFieldsFeature: false,
},
stubs: ['router-view'],
@@ -104,26 +99,4 @@ 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);
- });
- });
- });
});
diff --git a/spec/frontend/boards/components/board_card_spec.js b/spec/frontend/boards/components/board_card_spec.js
index 062aa1138b8fc90d6075445978dea0da8b165586..5866d781622cf86f14b56e2f77e0a6e160ae8bb9 100644
--- a/spec/frontend/boards/components/board_card_spec.js
+++ b/spec/frontend/boards/components/board_card_spec.js
@@ -127,9 +127,9 @@ describe('Board card', () => {
});
});
- describe('when issuable title is clicked in BoardCardInner and issuesListDrawer feature is enabled', () => {
+ describe('when issuable title is clicked in BoardCardInner to show drawer', () => {
it('calls mockSetSelectedBoardItemsResolver', async () => {
- mountComponent({ provide: { glFeatures: { issuesListDrawer: true } } });
+ mountComponent();
await findBoardCardButton().trigger('click');
diff --git a/spec/frontend/boards/components/board_content_spec.js b/spec/frontend/boards/components/board_content_spec.js
index ce2f0301974d72b6e6be358b898ea479279ac7b4..4cef647a8968155bdee2d0b91c6651834ad1111b 100644
--- a/spec/frontend/boards/components/board_content_spec.js
+++ b/spec/frontend/boards/components/board_content_spec.js
@@ -12,7 +12,6 @@ import EpicsSwimlanes from 'ee_component/boards/components/epics_swimlanes.vue';
import * as cacheUpdates from '~/boards/graphql/cache_updates';
import BoardColumn from '~/boards/components/board_column.vue';
import BoardContent from '~/boards/components/board_content.vue';
-import BoardContentSidebar from '~/boards/components/board_content_sidebar.vue';
import updateBoardListMutation from '~/boards/graphql/board_list_update.mutation.graphql';
import BoardAddNewColumn from 'ee_else_ce/boards/components/board_add_new_column.vue';
import BoardAddNewColumnTrigger from '~/boards/components/board_add_new_column_trigger.vue';
@@ -49,7 +48,6 @@ describe('BoardContent', () => {
isIssueBoard = true,
isEpicBoard = false,
handler = updateListHandler,
- workItemDrawerEnabled = false,
} = {}) => {
mockApollo = createMockApollo([[updateBoardListMutation, handler]]);
mockApollo.clients.defaultClient.cache.updateQuery = mockUpdateCache;
@@ -70,7 +68,6 @@ describe('BoardContent', () => {
boardLists: mockListsById,
listQueryVariables,
addColumnFormVisible: false,
- useWorkItemDrawer: workItemDrawerEnabled,
...props,
},
provide: {
@@ -84,7 +81,6 @@ describe('BoardContent', () => {
fullPath: 'project-path',
},
stubs: {
- BoardContentSidebar,
BoardDrawerWrapper: stubComponent(BoardDrawerWrapper, {
template: `
@@ -133,12 +129,8 @@ describe('BoardContent', () => {
expect(wrapper.findAllComponents(BoardColumn)).toHaveLength(mockLists.length);
});
- it('renders BoardContentSidebar', () => {
- expect(wrapper.findComponent(BoardContentSidebar).exists()).toBe(true);
- });
-
- it('does not render board drawer wrapper', () => {
- expect(findDrawerWrapper().exists()).toBe(false);
+ it('renders board drawer wrapper', () => {
+ expect(findDrawerWrapper().exists()).toBe(true);
});
it('does not display EpicsSwimlanes component', () => {
@@ -192,20 +184,6 @@ describe('BoardContent', () => {
});
});
- describe('when issuableType is not issue', () => {
- beforeEach(() => {
- createComponent({ issuableType: 'foo', isIssueBoard: false });
- });
-
- it('does not render BoardContentSidebar', () => {
- expect(wrapper.findComponent(BoardContentSidebar).exists()).toBe(false);
- });
-
- it('does not render board drawer wrapper', () => {
- expect(findDrawerWrapper().exists()).toBe(false);
- });
- });
-
describe('can admin list', () => {
beforeEach(() => {
createComponent({ canAdminList: true });
@@ -249,16 +227,12 @@ describe('BoardContent', () => {
});
});
- describe('when work item drawer is enabled', () => {
+ describe('work item drawer', () => {
beforeEach(() => {
- createComponent({ workItemDrawerEnabled: true });
- });
-
- it('does not render board sidebar', () => {
- expect(wrapper.findComponent(BoardContentSidebar).exists()).toBe(false);
+ createComponent();
});
- it('renders board drawer wrapper', () => {
+ it('renders', () => {
expect(findDrawerWrapper().exists()).toBe(true);
});
@@ -271,7 +245,7 @@ describe('BoardContent', () => {
describe('when all columns cannot find active item', () => {
beforeEach(() => {
- createComponent({ workItemDrawerEnabled: true });
+ createComponent();
findBoardColumns().wrappers.forEach((column) => {
column.vm.$emit('cannot-find-active-item');
diff --git a/spec/frontend/issues/list/components/issues_list_app_spec.js b/spec/frontend/issues/list/components/issues_list_app_spec.js
index 0c78123fb638a4f7a63adcbec2d8c88d87b580f0..4cdf4e871770eed3d09441d8863c66b354b674bc 100644
--- a/spec/frontend/issues/list/components/issues_list_app_spec.js
+++ b/spec/frontend/issues/list/components/issues_list_app_spec.js
@@ -236,7 +236,10 @@ describe('CE IssuesListApp component', () => {
data() {
return data;
},
- stubs,
+ stubs: {
+ WorkItemDrawer: true,
+ ...stubs,
+ },
});
};
@@ -1144,20 +1147,10 @@ describe('CE IssuesListApp component', () => {
describe('when issue drawer is enabled', () => {
beforeEach(async () => {
- wrapper = mountComponent({
- provide: {
- glFeatures: {
- issuesListDrawer: true,
- },
- },
- });
+ wrapper = mountComponent();
await waitForPromises();
});
- it('renders issuable drawer component', () => {
- expect(findWorkItemDrawer().exists()).toBe(true);
- });
-
it('renders issuable drawer closed by default', () => {
expect(findWorkItemDrawer().props('open')).toBe(false);
});
@@ -1332,13 +1325,7 @@ describe('CE IssuesListApp component', () => {
});
it('shows an error when deleting from the drawer fails', async () => {
- wrapper = mountComponent({
- provide: {
- glFeatures: {
- issuesListDrawer: true,
- },
- },
- });
+ wrapper = mountComponent();
findIssuableList().vm.$emit(
'select-issuable',
@@ -1360,13 +1347,7 @@ describe('CE IssuesListApp component', () => {
const show = btoa(JSON.stringify(showParams));
setWindowLocation(`?${DETAIL_VIEW_QUERY_PARAM_NAME}=${show}`);
getParameterByName.mockReturnValue(show);
- wrapper = mountComponent({
- provide: {
- glFeatures: {
- issuesListDrawer: true,
- },
- },
- });
+ wrapper = mountComponent();
await waitForPromises();
};
it('calls `getParameterByName` to get the `show` param', async () => {
@@ -1403,13 +1384,7 @@ describe('CE IssuesListApp component', () => {
const show = btoa(JSON.stringify({ id: getIdFromGraphQLId(id), iid, full_path: fullPath }));
beforeEach(async () => {
getParameterByName.mockReturnValue(show);
- wrapper = mountComponent({
- provide: {
- glFeatures: {
- issuesListDrawer: true,
- },
- },
- });
+ wrapper = mountComponent();
await waitForPromises();
});
describe('and the query contains a `show` parameter', () => {
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 6095bf204cfea7df113788cc490d19fa42f2dc83..b61cf91db56d04eebafaabd0fab66fe5c8aef9e7 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
@@ -262,9 +262,6 @@ describeSkipVue3(skipReason, () => {
mountComponent({
provide: {
workItemType: WORK_ITEM_TYPE_NAME_ISSUE,
- glFeatures: {
- issuesListDrawer: true,
- },
},
});
await waitForPromises();
@@ -1099,85 +1096,104 @@ describeSkipVue3(skipReason, () => {
describe('work item drawer', () => {
describe('when rendering issues list', () => {
- describe('when issues_list_drawer feature is disabled', () => {
- it('is not rendered when feature is disabled', async () => {
- mountComponent({
- workItemsToggleEnabled: false,
- provide: {
- glFeatures: {
- issuesListDrawer: false,
- epicsListDrawer: true,
+ beforeEach(async () => {
+ mountComponent();
+ await waitForPromises();
+ });
+
+ it.each`
+ message | shouldOpenItemsInSidePanel | drawerExists
+ ${'is rendered'} | ${true} | ${true}
+ ${'is not rendered'} | ${false} | ${false}
+ `(
+ '$message when shouldOpenItemsInSidePanel is $shouldOpenItemsInSidePanel',
+ async ({ shouldOpenItemsInSidePanel, drawerExists }) => {
+ const mockHandler = jest.fn().mockResolvedValue({
+ data: {
+ currentUser: {
+ id: 'gid://gitlab/User/1',
+ userPreferences: {
+ workItemsDisplaySettings: { shouldOpenItemsInSidePanel },
+ },
+ workItemPreferences: {
+ displaySettings: { hiddenMetadataKeys: [] },
+ },
},
},
});
- await waitForPromises();
-
- expect(findDrawer().exists()).toBe(false);
- });
- });
- describe('when issues_list_drawer feature is enabled', () => {
- beforeEach(async () => {
mountComponent({
+ mockPreferencesHandler: mockHandler,
provide: {
glFeatures: {
- issuesListDrawer: true,
- epicsListDrawer: false,
+ workItemViewForIssues: false,
},
+ isSignedIn: true,
},
});
+
await waitForPromises();
- });
- it.each`
- message | shouldOpenItemsInSidePanel | drawerExists
- ${'is rendered'} | ${true} | ${true}
- ${'is not rendered'} | ${false} | ${false}
- `(
- '$message when shouldOpenItemsInSidePanel is $shouldOpenItemsInSidePanel',
- async ({ shouldOpenItemsInSidePanel, drawerExists }) => {
- const mockHandler = jest.fn().mockResolvedValue({
- data: {
- currentUser: {
- id: 'gid://gitlab/User/1',
- userPreferences: {
- workItemsDisplaySettings: { shouldOpenItemsInSidePanel },
- },
- workItemPreferences: {
- displaySettings: { hiddenMetadataKeys: [] },
- },
+ expect(findDrawer().exists()).toBe(drawerExists);
+ },
+ );
+ describe('display settings', () => {
+ it('passes hiddenMetadataKeys to IssuableList', async () => {
+ const mockHandler = jest.fn().mockResolvedValue({
+ data: {
+ currentUser: {
+ id: 'gid://gitlab/User/1',
+ userPreferences: {
+ workItemsDisplaySettings: { shouldOpenItemsInSidePanel: true },
+ },
+ workItemPreferences: {
+ displaySettings: { hiddenMetadataKeys: ['labels', 'milestone'] },
},
},
- });
+ },
+ });
- mountComponent({
- mockPreferencesHandler: mockHandler,
- provide: {
- glFeatures: {
- workItemViewForIssues: false,
- epicsListDrawer: false,
- issuesListDrawer: true,
+ mountComponent({ mockPreferencesHandler: mockHandler });
+ await waitForPromises();
+
+ expect(findIssuableList().props('hiddenMetadataKeys')).toEqual(['labels', 'milestone']);
+ });
+
+ it('passes hiddenMetadataKeys to IssueCardTimeInfo', async () => {
+ const mockHandler = jest.fn().mockResolvedValue({
+ data: {
+ currentUser: {
+ id: 'gid://gitlab/User/1',
+ userPreferences: {
+ workItemsDisplaySettings: { shouldOpenItemsInSidePanel: true },
+ },
+ workItemPreferences: {
+ displaySettings: { hiddenMetadataKeys: ['dates', 'milestone'] },
},
- isSignedIn: true,
},
- });
+ },
+ });
- await waitForPromises();
+ mountComponent({ mockPreferencesHandler: mockHandler });
+ await waitForPromises();
- expect(findDrawer().exists()).toBe(drawerExists);
- },
- );
- describe('display settings', () => {
- it('passes hiddenMetadataKeys to IssuableList', async () => {
+ expect(findIssueCardTimeInfo().props('hiddenMetadataKeys')).toEqual([
+ 'dates',
+ 'milestone',
+ ]);
+ });
+
+ describe('workItemDrawerEnabled', () => {
+ it('does not render drawer when shouldOpenItemsInSidePanel is false', async () => {
const mockHandler = jest.fn().mockResolvedValue({
data: {
currentUser: {
id: 'gid://gitlab/User/1',
userPreferences: {
- workItemsDisplaySettings: { shouldOpenItemsInSidePanel: true },
+ workItemsDisplaySettings: { shouldOpenItemsInSidePanel: false },
},
workItemPreferences: {
- displaySettings: { hiddenMetadataKeys: ['labels', 'milestone'] },
+ displaySettings: { hiddenMetadataKeys: [] },
},
},
},
@@ -1186,10 +1202,10 @@ describeSkipVue3(skipReason, () => {
mountComponent({ mockPreferencesHandler: mockHandler });
await waitForPromises();
- expect(findIssuableList().props('hiddenMetadataKeys')).toEqual(['labels', 'milestone']);
+ expect(findDrawer().exists()).toBe(false);
});
- it('passes hiddenMetadataKeys to IssueCardTimeInfo', async () => {
+ it('renders drawer when shouldOpenItemsInSidePanel is true and feature is enabled', async () => {
const mockHandler = jest.fn().mockResolvedValue({
data: {
currentUser: {
@@ -1198,179 +1214,106 @@ describeSkipVue3(skipReason, () => {
workItemsDisplaySettings: { shouldOpenItemsInSidePanel: true },
},
workItemPreferences: {
- displaySettings: { hiddenMetadataKeys: ['dates', 'milestone'] },
+ displaySettings: { hiddenMetadataKeys: [] },
},
},
},
});
- mountComponent({ mockPreferencesHandler: mockHandler });
- await waitForPromises();
-
- expect(findIssueCardTimeInfo().props('hiddenMetadataKeys')).toEqual([
- 'dates',
- 'milestone',
- ]);
- });
-
- describe('workItemDrawerEnabled', () => {
- it('does not render drawer when shouldOpenItemsInSidePanel is false', async () => {
- const mockHandler = jest.fn().mockResolvedValue({
- data: {
- currentUser: {
- id: 'gid://gitlab/User/1',
- userPreferences: {
- workItemsDisplaySettings: { shouldOpenItemsInSidePanel: false },
- },
- workItemPreferences: {
- displaySettings: { hiddenMetadataKeys: [] },
- },
- },
+ mountComponent({
+ mockPreferencesHandler: mockHandler,
+ provide: {
+ glFeatures: {
+ workItemViewForIssues: false,
},
- });
-
- mountComponent({ mockPreferencesHandler: mockHandler });
- await waitForPromises();
-
- expect(findDrawer().exists()).toBe(false);
+ },
});
+ await waitForPromises();
- it('renders drawer when shouldOpenItemsInSidePanel is true and feature is enabled', async () => {
- const mockHandler = jest.fn().mockResolvedValue({
- data: {
- currentUser: {
- id: 'gid://gitlab/User/1',
- userPreferences: {
- workItemsDisplaySettings: { shouldOpenItemsInSidePanel: true },
- },
- workItemPreferences: {
- displaySettings: { hiddenMetadataKeys: [] },
- },
- },
- },
- });
-
- mountComponent({
- mockPreferencesHandler: mockHandler,
- provide: {
- glFeatures: {
- workItemViewForIssues: false,
- epicsListDrawer: false,
- issuesListDrawer: true,
- },
- },
- });
- await waitForPromises();
-
- expect(findDrawer().exists()).toBe(true);
- });
+ expect(findDrawer().exists()).toBe(true);
});
});
+ });
- describe('selecting issues', () => {
- const issue = workItemsQueryResponseCombined.data.namespace.workItems.nodes[0];
- const payload = {
- iid: issue.iid,
- webUrl: issue.webUrl,
- fullPath: issue.namespace.fullPath,
- };
+ describe('selecting issues', () => {
+ const issue = workItemsQueryResponseCombined.data.namespace.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);
+ });
- it('closes drawer when work item is clicked again', async () => {
- findIssuableList().vm.$emit('select-issuable', payload);
- await nextTick();
+ it('closes drawer when work item is clicked again', async () => {
+ findIssuableList().vm.$emit('select-issuable', payload);
+ await nextTick();
- expect(findDrawer().props('open')).toBe(false);
- expect(findDrawer().props('activeItem')).toBeNull();
- });
+ expect(findDrawer().props('open')).toBe(false);
+ expect(findDrawer().props('activeItem')).toBeNull();
+ });
- 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 counts and resets when work item is deleted', async () => {
- expect(defaultCountsQueryHandler).toHaveBeenCalledTimes(1);
+ it('refetches counts and resets when work item is deleted', async () => {
+ expect(defaultCountsQueryHandler).toHaveBeenCalledTimes(1);
- findDrawer().vm.$emit('workItemDeleted');
+ findDrawer().vm.$emit('workItemDeleted');
- await nextTick();
+ await nextTick();
- checkThatDrawerPropsAreEmpty();
+ checkThatDrawerPropsAreEmpty();
- expect(defaultCountsQueryHandler).toHaveBeenCalledTimes(2);
- });
+ expect(defaultCountsQueryHandler).toHaveBeenCalledTimes(2);
+ });
- it('refetches counts when the selected work item is closed', async () => {
- expect(defaultCountsQueryHandler).toHaveBeenCalledTimes(1);
+ it('refetches counts when the selected work item is closed', async () => {
+ expect(defaultCountsQueryHandler).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();
+ await nextTick();
- expect(defaultCountsQueryHandler).toHaveBeenCalledTimes(2);
- });
+ expect(defaultCountsQueryHandler).toHaveBeenCalledTimes(2);
});
});
});
describe('when rendering epics list', () => {
- describe('when epics_list_drawer feature is disabled', () => {
- it('is not rendered when feature is disabled', async () => {
- mountComponent({
- workItemsToggleEnabled: false,
- provide: {
- glFeatures: {
- issuesListDrawer: true,
- epicsListDrawer: false,
- },
- workItemType: WORK_ITEM_TYPE_NAME_EPIC,
- },
- });
- await waitForPromises();
-
- expect(findDrawer().exists()).toBe(false);
+ beforeEach(async () => {
+ mountComponent({
+ provide: {
+ workItemType: WORK_ITEM_TYPE_NAME_EPIC,
+ },
});
+ await waitForPromises();
});
- describe('when issues_list_drawer feature is enabled', () => {
- beforeEach(async () => {
- mountComponent({
- provide: {
- glFeatures: {
- issuesListDrawer: false,
- epicsListDrawer: true,
- },
- workItemType: WORK_ITEM_TYPE_NAME_EPIC,
- },
- });
- await waitForPromises();
- });
-
- it('is rendered when feature is enabled', () => {
- expect(findDrawer().exists()).toBe(true);
- });
+ it('uses work item drawer', () => {
+ expect(findDrawer().exists()).toBe(true);
});
});
@@ -1393,9 +1336,6 @@ describeSkipVue3(skipReason, () => {
mountComponent({
provide: {
workItemType: WORK_ITEM_TYPE_NAME_ISSUE,
- glFeatures: {
- issuesListDrawer: true,
- },
},
});
await waitForPromises();