From a1f7facb4a6ddb0fd6d3e3c06f9ff390f2a4651a Mon Sep 17 00:00:00 2001
From: Simon Knox <simon@gitlab.com>
Date: Wed, 21 Feb 2024 04:59:32 +0000
Subject: [PATCH] Fix work item /new page for groups
---
.../pages/groups/work_items/show/index.js | 2 +-
app/assets/javascripts/work_items/index.js | 13 ++++++------
.../work_items/pages/create_work_item.vue | 5 ++++-
.../javascripts/work_items/router/index.js | 11 ++++++++--
spec/frontend/work_items/router_spec.js | 21 ++++++++++++++++++-
5 files changed, 40 insertions(+), 12 deletions(-)
diff --git a/app/assets/javascripts/pages/groups/work_items/show/index.js b/app/assets/javascripts/pages/groups/work_items/show/index.js
index c091fbcc2b200..0e8ee3aa7c162 100644
--- a/app/assets/javascripts/pages/groups/work_items/show/index.js
+++ b/app/assets/javascripts/pages/groups/work_items/show/index.js
@@ -1,4 +1,4 @@
import { WORKSPACE_GROUP } from '~/issues/constants';
import { initWorkItemsRoot } from '~/work_items';
-initWorkItemsRoot(WORKSPACE_GROUP);
+initWorkItemsRoot({ workspaceType: WORKSPACE_GROUP });
diff --git a/app/assets/javascripts/work_items/index.js b/app/assets/javascripts/work_items/index.js
index 0b7f9290d6e93..1ef5e851d4fde 100644
--- a/app/assets/javascripts/work_items/index.js
+++ b/app/assets/javascripts/work_items/index.js
@@ -4,12 +4,11 @@ import { WORKSPACE_GROUP } from '~/issues/constants';
import { parseBoolean } from '~/lib/utils/common_utils';
import { apolloProvider } from '~/graphql_shared/issuable_client';
import App from './components/app.vue';
-import WorkItemRoot from './pages/work_item_root.vue';
import { createRouter } from './router';
Vue.use(VueApollo);
-export const initWorkItemsRoot = (workspace) => {
+export const initWorkItemsRoot = ({ workItemType, workspaceType } = {}) => {
const el = document.querySelector('#js-work-items');
if (!el) {
@@ -30,16 +29,16 @@ export const initWorkItemsRoot = (workspace) => {
reportAbusePath,
} = el.dataset;
- const Component = workspace === WORKSPACE_GROUP ? WorkItemRoot : App;
+ const isGroup = workspaceType === WORKSPACE_GROUP;
return new Vue({
el,
name: 'WorkItemsRoot',
- router: createRouter(el.dataset.fullPath),
+ router: createRouter({ fullPath, workItemType, workspaceType }),
apolloProvider,
provide: {
fullPath,
- isGroup: workspace === WORKSPACE_GROUP,
+ isGroup,
hasIssueWeightsFeature: parseBoolean(hasIssueWeightsFeature),
hasOkrsFeature: parseBoolean(hasOkrsFeature),
issuesListPath,
@@ -51,9 +50,9 @@ export const initWorkItemsRoot = (workspace) => {
reportAbusePath,
},
render(createElement) {
- return createElement(Component, {
+ return createElement(App, {
props: {
- iid: workspace === WORKSPACE_GROUP ? iid : undefined,
+ iid: isGroup ? iid : undefined,
},
});
},
diff --git a/app/assets/javascripts/work_items/pages/create_work_item.vue b/app/assets/javascripts/work_items/pages/create_work_item.vue
index 435a1233dce1f..10c76cab8781d 100644
--- a/app/assets/javascripts/work_items/pages/create_work_item.vue
+++ b/app/assets/javascripts/work_items/pages/create_work_item.vue
@@ -9,6 +9,7 @@ import {
sprintfWorkItem,
} from '../constants';
import createWorkItemMutation from '../graphql/create_work_item.mutation.graphql';
+import groupWorkItemTypesQuery from '../graphql/group_work_item_types.query.graphql';
import projectWorkItemTypesQuery from '../graphql/project_work_item_types.query.graphql';
import groupWorkItemByIidQuery from '../graphql/group_work_item_by_iid.query.graphql';
import workItemByIidQuery from '../graphql/work_item_by_iid.query.graphql';
@@ -42,7 +43,9 @@ export default {
},
apollo: {
workItemTypes: {
- query: projectWorkItemTypesQuery,
+ query() {
+ return this.isGroup ? groupWorkItemTypesQuery : projectWorkItemTypesQuery;
+ },
variables() {
return {
fullPath: this.fullPath,
diff --git a/app/assets/javascripts/work_items/router/index.js b/app/assets/javascripts/work_items/router/index.js
index 8d67bcaf84ff5..dcf9dcb10f5fd 100644
--- a/app/assets/javascripts/work_items/router/index.js
+++ b/app/assets/javascripts/work_items/router/index.js
@@ -1,16 +1,23 @@
import { GlToast } from '@gitlab/ui';
import Vue from 'vue';
import VueRouter from 'vue-router';
+import { WORKSPACE_GROUP, WORKSPACE_PROJECT } from '~/issues/constants';
import { joinPaths } from '~/lib/utils/url_utility';
import { routes } from './routes';
Vue.use(GlToast);
Vue.use(VueRouter);
-export function createRouter(fullPath) {
+export function createRouter({
+ fullPath,
+ workItemType = 'work_items',
+ workspaceType = WORKSPACE_PROJECT,
+}) {
+ const workspacePath = workspaceType === WORKSPACE_GROUP ? '/groups' : '';
+
return new VueRouter({
routes: routes(),
mode: 'history',
- base: joinPaths(gon?.relative_url_root, fullPath, '-', 'work_items'),
+ base: joinPaths(gon?.relative_url_root, workspacePath, fullPath, '-', workItemType),
});
}
diff --git a/spec/frontend/work_items/router_spec.js b/spec/frontend/work_items/router_spec.js
index d4efcf7818910..cb609fac882b0 100644
--- a/spec/frontend/work_items/router_spec.js
+++ b/spec/frontend/work_items/router_spec.js
@@ -25,7 +25,7 @@ describe('Work items router', () => {
.mockResolvedValue({ data: { workItemUpdated: null } });
const createComponent = async (routeArg) => {
- const router = createRouter('/work_item');
+ const router = createRouter({ fullPath: '/work_item' });
if (routeArg !== undefined) {
await router.push(routeArg);
}
@@ -89,4 +89,23 @@ describe('Work items router', () => {
expect(wrapper.findComponent(CreateWorkItem).exists()).toBe(true);
});
+
+ it('includes relative_url_root', () => {
+ gon.relative_url_root = '/my-org';
+ const router = createRouter({ fullPath: '/work_item' });
+
+ expect(router.options.base).toBe('/my-org/work_item/-/work_items');
+ });
+
+ it('includes groups in path for groups', () => {
+ const router = createRouter({ fullPath: '/work_item', workspaceType: 'group' });
+
+ expect(router.options.base).toBe('/groups/work_item/-/work_items');
+ });
+
+ it('includes workItemType if provided', () => {
+ const router = createRouter({ fullPath: '/work_item', workItemType: 'epics' });
+
+ expect(router.options.base).toBe('/work_item/-/epics');
+ });
});
--
GitLab