fix(task): provide back button when opening task detail (#1475)

frontend/cypress/e2e/task/task.spec.ts

@@ -194,6 +194,68 @@ describe('Task', () => {
 			LabelTaskFactory.truncate()
 			TaskAttachmentFactory.truncate()
 		})
+		
+		it('provides back navigation to the project in the list view', () => {
+			const tasks = TaskFactory.create(1)
+			cy.intercept('**/projects/1/views/*/tasks**').as('loadTasks')
+			cy.visit('/projects/1/1')
+			cy.wait('@loadTasks')
+			cy.get('.list-view .task')
+				.first()
+				.find('a.task-link')
+				.click()
+			cy.get('.task-view .back-button')
+				.should('be.visible')
+				.click()
+			cy.location('pathname').should('match', /\/projects\/1\/\d+/)
+		})
+
+		it('provides back navigation to the project in the table view', () => {
+			const tasks = TaskFactory.create(1)
+			cy.intercept('**/projects/1/views/*/tasks**').as('loadTasks')
+			cy.visit('/projects/1/3')
+			cy.wait('@loadTasks')
+			cy.get('tbody tr')
+				.first()
+				.find('a')
+				.first()
+				.click()
+			cy.get('.task-view .back-button')
+				.should('be.visible')
+				.click()
+			cy.location('pathname').should('match', /\/projects\/1\/\d+/)
+		})
+
+		it('provides back navigation to the project in the kanban view on mobile', () => {
+			cy.viewport('iphone-8')
+
+			const tasks = TaskFactory.create(1)
+			cy.intercept('**/projects/1/views/*/tasks**').as('loadTasks')
+			cy.visit('/projects/1/4')
+			cy.wait('@loadTasks')
+			cy.get('.kanban-view .tasks .task')
+				.first()
+				.click()
+			cy.get('.task-view .back-button')
+				.should('be.visible')
+				.click()
+			cy.location('pathname').should('match', /\/projects\/1\/\d+/)
+		})
+		
+		it('does not provide back navigation to the project in the kanban view on desktop', () => {
+			cy.viewport('macbook-15')
+
+			const tasks = TaskFactory.create(1)
+			cy.intercept('**/projects/1/views/*/tasks**').as('loadTasks')
+			cy.visit('/projects/1/4')
+			cy.wait('@loadTasks')
+			cy.get('.kanban-view .tasks .task')
+				.first()
+				.click()
+			cy.get('.task-view .back-button')
+				.should('not.exist')
+		})
+
 		it('Shows a 404 page for nonexisting tasks', () => {
 
 			cy.visit('/tasks/9999')
@@ -201,6 +263,7 @@ describe('Task', () => {
 			cy.contains('Not found')
 				.should('be.visible')
 		})
+
 		it('Shows all task details', () => {
 			const tasks = TaskFactory.create(1, {
 				id: 1,

frontend/src/i18n/lang/en.json

@@ -813,6 +813,7 @@
       "updateSuccess": "The task was saved successfully.",
       "deleteSuccess": "The task has been deleted successfully.",
       "belongsToProject": "This task belongs to project '{project}'",
+      "back": "Back to project",
       "due": "Due {at}",
       "closePopup": "Close popup",
       "organization": "Organization",

frontend/src/views/tasks/TaskDetailView.vue

@@ -11,6 +11,14 @@
 			v-if="visible"
 			class="task-view"
 		>
+			<BaseButton
+				v-if="!isModal || isMobile"
+				class="back-button mbs-2"
+				:to="projectRoute"
+			>
+				<Icon icon="arrow-left" />
+				{{ $t('task.detail.back') }}
+			</BaseButton>
 			<Heading
 				ref="heading"
 				:task="task"
@@ -592,7 +600,7 @@ import {ref, reactive, shallowReactive, computed, watch, nextTick, onMounted, on
 import {useRouter, type RouteLocation, onBeforeRouteLeave} from 'vue-router'
 import {storeToRefs} from 'pinia'
 import {useI18n} from 'vue-i18n'
-import {unrefElement} from '@vueuse/core'
+import {unrefElement, useMediaQuery} from '@vueuse/core'
 import {klona} from 'klona/lite'
 import {eventToHotkeyString} from '@github/hotkey'
 
@@ -730,6 +738,11 @@ const visible = ref(false)
 
 const project = computed(() => projectStore.projects[task.value.projectId])
 
+const projectRoute = computed(() => ({
+	name: 'project.index',
+	params: {projectId: task.value.projectId},
+}))
+
 const canWrite = computed(() => (
 	task.value.maxPermission !== null &&
 	task.value.maxPermission > PERMISSIONS.READ
@@ -744,6 +757,7 @@ const color = computed(() => {
 })
 
 const isModal = computed(() => Boolean(props.backdropView))
+const isMobile = useMediaQuery('(max-width: 1024px)')
 
 function attachmentUpload(file: File, onSuccess?: (url: string) => void) {
 	return uploadFile(props.taskId, file, onSuccess)