diff --git a/app/assets/javascripts/pages/projects/issues/index/index.js b/app/assets/javascripts/pages/projects/issues/index/index.js
index 322eaa845ec029b5ecb20b8639d7cfb18ab5b8f8..d9c640786ac34fc0bd4f55730152b871d9d5ad31 100644
--- a/app/assets/javascripts/pages/projects/issues/index/index.js
+++ b/app/assets/javascripts/pages/projects/issues/index/index.js
@@ -1,7 +1,10 @@
import { addShortcutsExtension } from '~/behaviors/shortcuts';
import ShortcutsNavigation from '~/behaviors/shortcuts/shortcuts_navigation';
import { mountIssuesListApp, mountJiraIssuesListApp } from '~/issues/list';
+import { initWorkItemsRoot } from '~/work_items';
mountIssuesListApp();
mountJiraIssuesListApp();
addShortcutsExtension(ShortcutsNavigation);
+
+initWorkItemsRoot();
diff --git a/app/assets/javascripts/vue_shared/issuable/list/components/issuable_item.vue b/app/assets/javascripts/vue_shared/issuable/list/components/issuable_item.vue
index f01f735bff6f8033b60a491dec41e404e504eca1..a600c63d7e7e2a1aace9aeb23a0a3abe4083b25c 100644
--- a/app/assets/javascripts/vue_shared/issuable/list/components/issuable_item.vue
+++ b/app/assets/javascripts/vue_shared/issuable/list/components/issuable_item.vue
@@ -16,6 +16,7 @@ import { isExternal, setUrlFragment, visitUrl } from '~/lib/utils/url_utility';
import { __, n__, sprintf } from '~/locale';
import IssuableAssignees from '~/issuable/components/issue_assignees.vue';
import timeagoMixin from '~/vue_shared/mixins/timeago';
+import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
import WorkItemTypeIcon from '~/work_items/components/work_item_type_icon.vue';
import WorkItemPrefetch from '~/work_items/components/work_item_prefetch.vue';
import { STATE_OPEN, STATE_CLOSED } from '~/work_items/constants';
@@ -36,7 +37,12 @@ export default {
directives: {
GlTooltip: GlTooltipDirective,
},
- mixins: [timeagoMixin],
+ mixins: [timeagoMixin, glFeatureFlagMixin()],
+ inject: {
+ isGroup: {
+ default: false,
+ },
+ },
props: {
hasScopedLabelsFeature: {
type: Boolean,
@@ -214,6 +220,13 @@ export default {
// eslint-disable-next-line no-underscore-dangle
return this.issuable.__typename === 'MergeRequest';
},
+ issueAsWorkItem() {
+ return (
+ !this.isGroup &&
+ this.glFeatures.workItemsViewPreference &&
+ gon.current_user_use_work_items_view
+ );
+ },
},
methods: {
hasSlotContents(slotName) {
@@ -269,7 +282,7 @@ export default {
const regex = new RegExp(`groups\/${escapedFullPath}\/-\/(work_items|epics)\/\\d+`);
const isWorkItemPath = regex.test(this.issuableLinkHref);
- if (isWorkItemPath) {
+ if (isWorkItemPath || this.issueAsWorkItem) {
this.$router.push({
name: 'workItem',
params: {
diff --git a/app/assets/javascripts/work_items/components/work_item_breadcrumb.vue b/app/assets/javascripts/work_items/components/work_item_breadcrumb.vue
index 1e32406caf9add9cd941356b1cc8728a702ee5b1..7a09aaacf7addd6faa8a6c2f59cc2efd5f10f339 100644
--- a/app/assets/javascripts/work_items/components/work_item_breadcrumb.vue
+++ b/app/assets/javascripts/work_items/components/work_item_breadcrumb.vue
@@ -36,12 +36,19 @@ export default {
return this.isGroup ? s__('WorkItem|Work items') : __('Issues');
},
+ issueAsWorkItem() {
+ return (
+ !this.isGroup &&
+ this.glFeatures.workItemsViewPreference &&
+ gon.current_user_use_work_items_view
+ );
+ },
crumbs() {
const indexCrumb = {
text: this.listName,
};
- if (this.glFeatures.workItemEpicsList) {
+ if (this.glFeatures.workItemEpicsList || this.issueAsWorkItem) {
indexCrumb.to = { name: ROUTES.index, query: this.$route.query };
} else {
indexCrumb.href = this.listPath;
@@ -70,5 +77,5 @@ export default {
</script>
<template>
- <gl-breadcrumb :items="crumbs" :auto-resize="false" />
+ <gl-breadcrumb :key="crumbs.length" :items="crumbs" :auto-resize="false" />
</template>
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 dc3ba25371f7d9b552df3f5be40f6b30eb2c4271..8476bf9727106623307356070d3146bdb2380812 100644
--- a/app/assets/javascripts/work_items/components/work_item_drawer.vue
+++ b/app/assets/javascripts/work_items/components/work_item_drawer.vue
@@ -3,6 +3,7 @@ import { GlLink, GlDrawer, GlButton, GlTooltipDirective, GlOutsideDirective } fr
import { escapeRegExp } from 'lodash';
import { __ } from '~/locale';
import deleteWorkItemMutation from '~/work_items/graphql/delete_work_item.mutation.graphql';
+import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
import { TYPE_EPIC, TYPE_ISSUE } from '~/issues/constants';
import * as Sentry from '~/sentry/sentry_browser_wrapper';
import { visitUrl } from '~/lib/utils/url_utility';
@@ -19,7 +20,8 @@ export default {
GlButton,
WorkItemDetail: () => import('~/work_items/components/work_item_detail.vue'),
},
- inject: ['fullPath'],
+ mixins: [glFeatureFlagMixin()],
+ inject: ['fullPath', 'isGroup'],
inheritAttrs: false,
props: {
open: {
@@ -65,6 +67,13 @@ export default {
const path = this.activeItemFullPath.substring(this.activeItemFullPath.lastIndexOf('/') + 1);
return `${path}#${this.activeItem.iid}`;
},
+ issueAsWorkItem() {
+ return (
+ !this.isGroup &&
+ this.glFeatures.workItemsViewPreference &&
+ gon.current_user_use_work_items_view
+ );
+ },
},
methods: {
async deleteWorkItem({ workItemId }) {
@@ -93,7 +102,7 @@ export default {
const regex = new RegExp(`groups\/${escapedFullPath}\/-\/(work_items|epics)\/\\d+`);
const isWorkItemPath = regex.test(workItem.webUrl);
- if (isWorkItemPath) {
+ if (isWorkItemPath || this.issueAsWorkItem) {
this.$router.push({
name: 'workItem',
params: {
diff --git a/app/assets/javascripts/work_items/graphql/list/get_work_item_state_counts.query.graphql b/app/assets/javascripts/work_items/graphql/list/get_work_item_state_counts.query.graphql
index d8282344f66806ada547ac04a443d397f99a8b2d..e04db0e694a2f46fdd2e221d1bbe38f51d17e8fd 100644
--- a/app/assets/javascripts/work_items/graphql/list/get_work_item_state_counts.query.graphql
+++ b/app/assets/javascripts/work_items/graphql/list/get_work_item_state_counts.query.graphql
@@ -14,8 +14,9 @@ query getWorkItemStateCounts(
$types: [IssueType!]
$not: NegatedWorkItemFilterInput
$or: UnionedWorkItemFilterInput
+ $isGroup: Boolean = true
) {
- group(fullPath: $fullPath) {
+ group(fullPath: $fullPath) @include(if: $isGroup) {
id
workItemStateCounts(
includeDescendants: $includeDescendants
@@ -38,4 +39,26 @@ query getWorkItemStateCounts(
opened
}
}
+ project(fullPath: $fullPath) @skip(if: $isGroup) {
+ id
+ workItemStateCounts(
+ sort: $sort
+ state: $state
+ assigneeUsernames: $assigneeUsernames
+ assigneeWildcardId: $assigneeWildcardId
+ authorUsername: $authorUsername
+ confidential: $confidential
+ labelName: $labelName
+ milestoneTitle: $milestoneTitle
+ milestoneWildcardId: $milestoneWildcardId
+ myReactionEmoji: $myReactionEmoji
+ types: $types
+ not: $not
+ or: $or
+ ) {
+ all
+ closed
+ opened
+ }
+ }
}
diff --git a/app/assets/javascripts/work_items/graphql/list/get_work_items.query.graphql b/app/assets/javascripts/work_items/graphql/list/get_work_items.query.graphql
index 71e19bd229e798e118e83bf2e0005ca7409e9d14..3f6f44cf129d16b40adbc7ea6b4ff55d4e39e0d6 100644
--- a/app/assets/javascripts/work_items/graphql/list/get_work_items.query.graphql
+++ b/app/assets/javascripts/work_items/graphql/list/get_work_items.query.graphql
@@ -22,8 +22,9 @@ query getWorkItems(
$beforeCursor: String
$firstPageSize: Int
$lastPageSize: Int
+ $isGroup: Boolean = true
) {
- group(fullPath: $fullPath) {
+ group(fullPath: $fullPath) @include(if: $isGroup) {
id
name
workItems(
@@ -85,4 +86,65 @@ query getWorkItems(
}
}
}
+ project(fullPath: $fullPath) @skip(if: $isGroup) {
+ id
+ name
+ workItems(
+ search: $search
+ sort: $sort
+ state: $state
+ assigneeUsernames: $assigneeUsernames
+ assigneeWildcardId: $assigneeWildcardId
+ authorUsername: $authorUsername
+ confidential: $confidential
+ labelName: $labelName
+ milestoneTitle: $milestoneTitle
+ milestoneWildcardId: $milestoneWildcardId
+ myReactionEmoji: $myReactionEmoji
+ types: $types
+ in: $in
+ not: $not
+ or: $or
+ after: $afterCursor
+ before: $beforeCursor
+ first: $firstPageSize
+ last: $lastPageSize
+ ) {
+ pageInfo {
+ ...PageInfo
+ }
+ nodes {
+ id
+ author {
+ id
+ avatarUrl
+ name
+ username
+ webUrl
+ webPath
+ }
+ closedAt
+ confidential
+ createdAt
+ iid
+ namespace {
+ id
+ fullPath
+ }
+ reference(full: true)
+ state
+ title
+ updatedAt
+ webUrl
+ widgets {
+ type
+ ...WorkItemWidgets
+ }
+ workItemType {
+ id
+ name
+ }
+ }
+ }
+ }
}
diff --git a/app/assets/javascripts/work_items/index.js b/app/assets/javascripts/work_items/index.js
index cad0f1d1e0a494a9e0284be3f9062fc9f2458853..30ff1b828bef41f46250da540c6bfca22b827298 100644
--- a/app/assets/javascripts/work_items/index.js
+++ b/app/assets/javascripts/work_items/index.js
@@ -84,7 +84,7 @@ export const initWorkItemsRoot = ({ workItemType, workspaceType } = {}) => {
},
});
- if (gon.features.workItemsViewPreference) {
+ if (gon.features.workItemsViewPreference && !isGroup) {
import(/* webpackChunkName: 'work_items_feedback' */ '~/work_items_feedback')
.then(({ initWorkItemsFeedback }) => {
initWorkItemsFeedback();
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 8901b3bcd6f747fb4d75d7e16e0e32031147b9b6..89f0fb74485568ddac6037843d42c3086957e85f 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
@@ -144,17 +144,24 @@ export default {
return this.queryVariables;
},
update(data) {
- return data?.group.workItems.nodes ?? [];
+ return data?.[this.namespace].workItems.nodes ?? [];
+ },
+ skip() {
+ return isEmpty(this.pageParams);
},
result({ data }) {
- this.pageInfo = data?.group.workItems.pageInfo ?? {};
-
- if (data?.group) {
- const rootBreadcrumbName =
- this.workItemType === WORK_ITEM_TYPE_ENUM_EPIC
- ? __('Epics')
- : s__('WorkItem|Work items');
- document.title = `${rootBreadcrumbName} · ${data.group.name} · GitLab`;
+ this.pageInfo = data?.[this.namespace].workItems.pageInfo ?? {};
+
+ if (data?.[this.namespace]) {
+ if (this.isGroup) {
+ const rootBreadcrumbName =
+ this.workItemType === WORK_ITEM_TYPE_ENUM_EPIC
+ ? __('Epics')
+ : s__('WorkItem|Work items');
+ document.title = `${rootBreadcrumbName} · ${data.group.name} · GitLab`;
+ } else {
+ document.title = `Issues · ${data.project.name} · GitLab`;
+ }
}
},
error(error) {
@@ -170,10 +177,13 @@ export default {
return this.queryVariables;
},
update(data) {
- return data?.group.workItemStateCounts ?? {};
+ return data?.[this.namespace].workItemStateCounts ?? {};
+ },
+ skip() {
+ return isEmpty(this.pageParams);
},
result({ data }) {
- const { all } = data?.group.workItemStateCounts ?? {};
+ const { all } = data?.[this.namespace].workItemStateCounts ?? {};
if (!this.isInitialLoadComplete) {
this.hasAnyIssues = Boolean(all);
@@ -225,6 +235,7 @@ export default {
...this.pageParams,
includeDescendants: !this.apiFilterParams.fullPath,
types: this.apiFilterParams.types || this.workItemType || this.defaultWorkItemTypes,
+ isGroup: this.isGroup,
};
},
searchQuery() {
@@ -268,15 +279,6 @@ export default {
recentSuggestionsStorageKey: `${this.fullPath}-issues-recent-tokens-author`,
preloadedUsers,
},
- {
- type: TOKEN_TYPE_GROUP,
- icon: 'group',
- title: TOKEN_TITLE_GROUP,
- unique: true,
- token: GroupToken,
- operators: OPERATORS_IS,
- fullPath: this.fullPath,
- },
{
type: TOKEN_TYPE_LABEL,
title: TOKEN_TITLE_LABEL,
@@ -311,6 +313,18 @@ export default {
},
];
+ if (this.isGroup) {
+ tokens.push({
+ type: TOKEN_TYPE_GROUP,
+ icon: 'group',
+ title: TOKEN_TITLE_GROUP,
+ unique: true,
+ token: GroupToken,
+ operators: OPERATORS_IS,
+ fullPath: this.fullPath,
+ });
+ }
+
if (!this.workItemType) {
tokens.push({
type: TOKEN_TYPE_TYPE,
diff --git a/app/assets/javascripts/work_items/router/routes.js b/app/assets/javascripts/work_items/router/routes.js
index 08238f983d302f6885aff955883f98c3feeb29ee..8326ec1c932dd2917e3abf353ffc95a6a2e7a229 100644
--- a/app/assets/javascripts/work_items/router/routes.js
+++ b/app/assets/javascripts/work_items/router/routes.js
@@ -25,7 +25,7 @@ function getRoutes(isGroup) {
},
];
- if (isGroup) {
+ if (isGroup || (gon.features.workItemsViewPreference && gon.current_user_use_work_items_view)) {
routes.unshift({
path: '/:type(issues|epics|work_items)',
name: ROUTES.index,
diff --git a/app/controllers/projects/issues_controller.rb b/app/controllers/projects/issues_controller.rb
index 0bec99a7e33b5de1314ca88c054f526755fddafe..67d61544843615712359efafdbe4b491fe6a5d0b 100644
--- a/app/controllers/projects/issues_controller.rb
+++ b/app/controllers/projects/issues_controller.rb
@@ -460,7 +460,7 @@ def add_related_issue
def create_vulnerability_issue_feedback(issue); end
def redirect_if_work_item
- return unless use_work_items_path?(issue)
+ return unless use_work_items_path?(issue) && !show_work_item?
redirect_to project_work_item_path(project, issue.iid, params: request.query_parameters)
end
diff --git a/app/views/projects/issues/index.html.haml b/app/views/projects/issues/index.html.haml
index bb96373407a6ab3ab186d3c30aa30d6fe2fb5b01..7a4d2ff7c27b61c4d77b9618357120827633efa6 100644
--- a/app/views/projects/issues/index.html.haml
+++ b/app/views/projects/issues/index.html.haml
@@ -12,6 +12,9 @@
issues_path: project_issues_path(@project),
project_path: @project.full_path } }
-.js-issues-list-root{ data: project_issues_list_data(@project, current_user) }
-- if can?(current_user, :admin_issue, @project)
- = render 'shared/issuable/bulk_update_sidebar', type: :issues
+- if Feature.enabled?(:work_items_view_preference, current_user) && current_user&.user_preference&.use_work_items_view
+ #js-work-items{ data: work_items_show_data(@project, current_user) }
+- else
+ .js-issues-list-root{ data: project_issues_list_data(@project, current_user) }
+ - if can?(current_user, :admin_issue, @project)
+ = render 'shared/issuable/bulk_update_sidebar', type: :issues
diff --git a/app/views/projects/work_items/show.html.haml b/app/views/projects/work_items/show.html.haml
index d950b279bdd19c9043461bb545324110f3ae6da6..9651fcf647233f12aff7b355da4c7483177df69b 100644
--- a/app/views/projects/work_items/show.html.haml
+++ b/app/views/projects/work_items/show.html.haml
@@ -1,5 +1,7 @@
- if @work_item.present?
= render 'shared/work_item_metadata', work_item: @work_item
+- add_page_specific_style 'page_bundles/issuable_list'
+- add_page_specific_style 'page_bundles/issues_list'
- add_page_specific_style 'page_bundles/issues_show'
- add_work_items_stylesheet
- add_page_specific_style 'page_bundles/design_management'
diff --git a/ee/app/assets/javascripts/work_items/pages/work_items_list_app.vue b/ee/app/assets/javascripts/work_items/pages/work_items_list_app.vue
index 0ba05a7dab85aa40c461604ee5ffe4a18ff7fdb8..55504103b5927d6cdc1267b1a36018851a0e986c 100644
--- a/ee/app/assets/javascripts/work_items/pages/work_items_list_app.vue
+++ b/ee/app/assets/javascripts/work_items/pages/work_items_list_app.vue
@@ -6,7 +6,7 @@ import { s__ } from '~/locale';
import { convertToGraphQLId } from '~/graphql_shared/utils';
import { TYPENAME_LABEL } from '~/graphql_shared/constants';
import EmptyStateWithAnyIssues from '~/issues/list/components/empty_state_with_any_issues.vue';
-import { WORK_ITEM_TYPE_ENUM_EPIC } from '~/work_items/constants';
+import { WORK_ITEM_TYPE_ENUM_EPIC, WORK_ITEM_TYPE_ENUM_ISSUE } from '~/work_items/constants';
import WorkItemsListApp from '~/work_items/pages/work_items_list_app.vue';
import CreateWorkItemModal from '~/work_items/components/create_work_item_modal.vue';
import EpicsListBulkEditSidebar from 'ee/epics_list/components/epics_list_bulk_edit_sidebar.vue';
@@ -65,6 +65,11 @@ export default {
this.glFeatures.bulkUpdateWorkItemsMutation
);
},
+ workItemTypeName() {
+ return this.workItemType === WORK_ITEM_TYPE_ENUM_EPIC
+ ? WORK_ITEM_TYPE_ENUM_EPIC
+ : WORK_ITEM_TYPE_ENUM_ISSUE;
+ },
},
methods: {
incrementUpdateCount() {
@@ -135,7 +140,7 @@ export default {
>
<create-work-item-modal
class="gl-grow"
- :work-item-type-name="$options.WORK_ITEM_TYPE_ENUM_EPIC"
+ :work-item-type-name="workItemTypeName"
@workItemCreated="incrementUpdateCount"
/>
</div>
diff --git a/spec/frontend/work_items/components/work_item_breadcrumb_spec.js b/spec/frontend/work_items/components/work_item_breadcrumb_spec.js
index 965f25910896a5031da15cfca4c39839087932c8..44dc4c47ef33a1a2bc6b6772617b6fc6bff286bf 100644
--- a/spec/frontend/work_items/components/work_item_breadcrumb_spec.js
+++ b/spec/frontend/work_items/components/work_item_breadcrumb_spec.js
@@ -14,12 +14,14 @@ describe('WorkItemBreadcrumb', () => {
$route = {},
listPath = '/epics',
isGroup = true,
+ workItemsViewPreference = false,
} = {}) => {
wrapper = shallowMount(WorkItemBreadcrumb, {
provide: {
workItemType,
glFeatures: {
workItemEpicsList,
+ workItemsViewPreference,
},
listPath,
isGroup,
@@ -72,20 +74,56 @@ describe('WorkItemBreadcrumb', () => {
});
describe('when the workspace is a project', () => {
- beforeEach(() => {
- createComponent({ isGroup: false, listPath: '/issues' });
+ describe('when work item view preference FF is disabled', () => {
+ it('renders root `Issues` breadcrumb with href on work items list page', () => {
+ createComponent({ isGroup: false, listPath: '/issues', workItemEpicsList: false });
+
+ expect(findBreadcrumb().props('items')).toEqual([
+ {
+ text: 'Issues',
+ href: '/issues',
+ },
+ ]);
+ });
});
- it('renders root `Issues` breadcrumb on work items list page', () => {
- expect(findBreadcrumb().props('items')).toEqual([
- {
- text: 'Issues',
- to: {
- name: 'workItemList',
- query: undefined,
+ describe('when work item view preference FF is enabled', () => {
+ it('renders root breadcrumb with href if user turned work item view off', () => {
+ createComponent({
+ isGroup: false,
+ listPath: '/issues',
+ workItemEpicsList: false,
+ workItemsViewPreference: true,
+ });
+
+ expect(findBreadcrumb().props('items')).toEqual([
+ {
+ text: 'Issues',
+ href: '/issues',
},
- },
- ]);
+ ]);
+ });
+
+ it('renders root breadcrumb with router link if user turned work item view on', () => {
+ window.gon.current_user_use_work_items_view = true;
+
+ createComponent({
+ isGroup: false,
+ listPath: '/issues',
+ workItemEpicsList: false,
+ workItemsViewPreference: true,
+ });
+
+ expect(findBreadcrumb().props('items')).toEqual([
+ {
+ text: 'Issues',
+ to: {
+ name: 'workItemList',
+ query: undefined,
+ },
+ },
+ ]);
+ });
});
});
diff --git a/spec/frontend/work_items/components/work_item_drawer_spec.js b/spec/frontend/work_items/components/work_item_drawer_spec.js
index 138a731ae40c65d46a0d644e008928626213c155..459531c6cc1701c6addae1381a4549a00a2061cd 100644
--- a/spec/frontend/work_items/components/work_item_drawer_spec.js
+++ b/spec/frontend/work_items/components/work_item_drawer_spec.js
@@ -11,8 +11,11 @@ import WorkItemDetail from '~/work_items/components/work_item_detail.vue';
import deleteWorkItemMutation from '~/work_items/graphql/delete_work_item.mutation.graphql';
import workspacePermissionsQuery from '~/work_items/graphql/workspace_permissions.query.graphql';
import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import { visitUrl } from '~/lib/utils/url_utility';
import { mockProjectPermissionsQueryResponse } from '../mock_data';
+jest.mock('~/lib/utils/url_utility');
+
Vue.use(VueApollo);
const deleteWorkItemMutationHandler = jest
@@ -26,16 +29,22 @@ describe('WorkItemDrawer', () => {
let wrapper;
const mockListener = jest.fn();
+ const mockRouterPush = jest.fn();
const findGlDrawer = () => wrapper.findComponent(GlDrawer);
const findWorkItem = () => wrapper.findComponent(WorkItemDetail);
+ const findLinkButton = () => wrapper.findByTestId('work-item-drawer-link-button');
const createComponent = ({
open = false,
activeItem = { iid: '1', webUrl: 'test', fullPath: 'gitlab-org/gitlab' },
issuableType = TYPE_ISSUE,
clickOutsideExcludeSelector = undefined,
+ isGroup = true,
+ workItemsViewPreference = false,
} = {}) => {
+ window.gon.current_user_use_work_items_view = true;
+
wrapper = shallowMountExtended(WorkItemDrawer, {
propsData: {
activeItem,
@@ -47,10 +56,19 @@ describe('WorkItemDrawer', () => {
customEvent: mockListener,
},
provide: {
- fullPath: '/gitlab-org',
+ fullPath: 'gitlab-org/gitlab',
reportAbusePath: '',
groupPath: '',
hasSubepicsFeature: false,
+ isGroup,
+ glFeatures: {
+ workItemsViewPreference,
+ },
+ },
+ mocks: {
+ $router: {
+ push: mockRouterPush,
+ },
},
apolloProvider: createMockApollo([
[deleteWorkItemMutation, deleteWorkItemMutationHandler],
@@ -215,4 +233,36 @@ describe('WorkItemDrawer', () => {
expect(findWorkItem().props('modalIsGroup')).toBe(true);
});
+
+ describe('when redirecting to full screen view', () => {
+ it('calls `visitUrl` when link is not a work item path', () => {
+ createComponent();
+ findLinkButton().vm.$emit('click', new MouseEvent('click'));
+
+ expect(visitUrl).toHaveBeenCalledWith('test');
+ });
+
+ it('calls `router.push` when link is a work item path', () => {
+ createComponent({
+ activeItem: {
+ iid: '1',
+ webUrl: '/groups/gitlab-org/gitlab/-/work_items/1',
+ fullPath: 'gitlab-org/gitlab',
+ },
+ });
+ findLinkButton().vm.$emit('click', new MouseEvent('click'));
+
+ expect(visitUrl).not.toHaveBeenCalled();
+ expect(mockRouterPush).toHaveBeenCalledWith({ name: 'workItem', params: { iid: '1' } });
+ });
+
+ it('calls `router.push` when issue as work item view is enabled', () => {
+ createComponent({ isGroup: false, workItemsViewPreference: true });
+
+ findLinkButton().vm.$emit('click', new MouseEvent('click'));
+
+ expect(visitUrl).not.toHaveBeenCalled();
+ expect(mockRouterPush).toHaveBeenCalledWith({ name: 'workItem', params: { iid: '1' } });
+ });
+ });
});
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 200a9bc80d79e3852f460e4166fea0199a0a3442..d7292d6e3202bb75f43620acbbc2f1dffe0ed82a 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
@@ -75,7 +75,15 @@ describeSkipVue3(skipReason, () => {
provide = {},
queryHandler = defaultQueryHandler,
sortPreferenceMutationResponse = mutationHandler,
+ workItemsViewPreference = false,
} = {}) => {
+ window.gon = {
+ ...window.gon,
+ features: {
+ workItemsViewPreference,
+ },
+ current_user_use_work_items_view: true,
+ };
wrapper = shallowMount(WorkItemsListApp, {
router: createRouter({ fullPath: '/work_item' }),
apolloProvider: createMockApollo([
@@ -146,14 +154,16 @@ describeSkipVue3(skipReason, () => {
});
it('calls query to fetch work items', () => {
- expect(defaultQueryHandler).toHaveBeenCalledWith({
- fullPath: 'full/path',
- includeDescendants: true,
- sort: CREATED_DESC,
- state: STATUS_OPEN,
- firstPageSize: 20,
- types: ['ISSUE', 'INCIDENT', 'TASK'],
- });
+ expect(defaultQueryHandler).toHaveBeenCalledWith(
+ expect.objectContaining({
+ fullPath: 'full/path',
+ includeDescendants: true,
+ sort: CREATED_DESC,
+ state: STATUS_OPEN,
+ firstPageSize: 20,
+ types: ['ISSUE', 'INCIDENT', 'TASK'],
+ }),
+ );
});
});
@@ -177,17 +187,21 @@ describeSkipVue3(skipReason, () => {
});
describe('when workItemType is provided', () => {
- it('filters work items by workItemType', () => {
+ it('filters work items by workItemType', async () => {
const type = 'EPIC';
mountComponent({ provide: { workItemType: type } });
- expect(defaultQueryHandler).toHaveBeenCalledWith({
- fullPath: 'full/path',
- includeDescendants: true,
- sort: CREATED_DESC,
- state: STATUS_OPEN,
- types: type,
- });
+ await waitForPromises();
+
+ expect(defaultQueryHandler).toHaveBeenCalledWith(
+ expect.objectContaining({
+ fullPath: 'full/path',
+ includeDescendants: true,
+ sort: CREATED_DESC,
+ state: STATUS_OPEN,
+ types: type,
+ }),
+ );
});
});
@@ -216,6 +230,7 @@ describeSkipVue3(skipReason, () => {
describe('when eeCreatedWorkItemsCount is updated', () => {
it('refetches work items', async () => {
mountComponent();
+ await waitForPromises();
expect(defaultQueryHandler).toHaveBeenCalledTimes(1);
@@ -308,17 +323,13 @@ describeSkipVue3(skipReason, () => {
]);
await nextTick();
- expect(defaultQueryHandler).toHaveBeenCalledWith({
- fullPath: 'full/path',
- includeDescendants: true,
- sort: CREATED_DESC,
- state: STATUS_OPEN,
- search: 'find issues',
- authorUsername: 'homer',
- in: 'TITLE',
- firstPageSize: 20,
- types: ['ISSUE', 'INCIDENT', 'TASK'],
- });
+ expect(defaultQueryHandler).toHaveBeenCalledWith(
+ expect.objectContaining({
+ search: 'find issues',
+ authorUsername: 'homer',
+ in: 'TITLE',
+ }),
+ );
});
});
@@ -480,7 +491,7 @@ describeSkipVue3(skipReason, () => {
});
it('refetches and resets when work item is deleted', async () => {
- expect(defaultQueryHandler).toHaveBeenCalledTimes(2);
+ expect(defaultQueryHandler).toHaveBeenCalledTimes(1);
findDrawer().vm.$emit('workItemDeleted');
@@ -488,11 +499,11 @@ describeSkipVue3(skipReason, () => {
checkThatDrawerPropsAreEmpty();
- expect(defaultQueryHandler).toHaveBeenCalledTimes(3);
+ expect(defaultQueryHandler).toHaveBeenCalledTimes(2);
});
it('refetches when the selected work item is closed', async () => {
- expect(defaultQueryHandler).toHaveBeenCalledTimes(2);
+ expect(defaultQueryHandler).toHaveBeenCalledTimes(1);
// component displays open work items by default
findDrawer().vm.$emit('work-item-updated', {
@@ -501,7 +512,7 @@ describeSkipVue3(skipReason, () => {
await nextTick();
- expect(defaultQueryHandler).toHaveBeenCalledTimes(3);
+ expect(defaultQueryHandler).toHaveBeenCalledTimes(2);
});
});
});