feat: users can view the associated process for a task #18460

douglasbouttell-camunda · 2024-05-13T12:51:49Z

Description

Allow users to view the associated process for a task. Highlight the activity which relates to the task.

This allows users to have increased visibility and context for a task.

Related issues

closes #17645 , #18706

github-actions · 2024-05-13T13:13:44Z

Tasklist Test Results

143 files 143 suites 1h 37m 28s ⏱️
549 tests 544 ✅ 5 💤 0 ❌
547 runs 542 ✅ 5 💤 0 ❌

Results for commit cf343d8.

♻️ This comment has been updated with latest results.

tasklist/client/src/modules/types/index.tsx

tasklist/client/src/modules/request.ts

tasklist/client/src/Tasks/Task/ProcessView/index.tsx

tasklist/client/src/Tasks/Task/ProcessView/index.module.scss

tasklist/client/src/modules/queries/useProcessDefinition.tsx

vsgoulart · 2024-05-13T15:59:17Z

tasklist/client/src/modules/queries/useProcessDefinition.tsx

+      if (error !== null && error.variant === 'failed-response') {
+        const {status} = error.response;
+        if (
+          status === HTTP_STATUS_FORBIDDEN ||
+          status === HTTP_STATUS_NOT_FOUND
+        ) {
+          return null;
+        }
+      }


Why do we need this special case? I think we should just throw the error like we do everywhere

The behaviour for a 404 Not Found error is different to a 500 Internal Server Error. I think we should explicitly handle business cases (not found and forbidden) since it makes it simpler to whoever consumes this hook.

The behaviour for a 404 Not Found error is different to a 500 Internal Server Error. I think we should explicitly handle business cases (not found and forbidden) since it makes it simpler to whoever consumes this hook.

but this is basically goes against react-query conventions of throwing errors and it makes harder for the hook to be reused if want to have a different behavior. It would be impossible to build a 404 page for this for example.

I believe this logic should exist in the view layer

tasklist/client/e2e/tests/task-details.spec.ts

vsgoulart · 2024-05-15T10:54:07Z

tasklist/client/src/Tasks/Task/ProcessView/index.tsx

+        <Tag className={styles.version}>Version: {version}</Tag>
+      </div>
+      {bpmnXml !== null ? (
+        <Layer level={1} className={styles.diagramFrame}>


Did you have to explicitly add it because it's was already at level 3?

--cds-layer only uses the current layer which is the same as the background at level 0. So I need to increase it to level 1 to get the grey background.

Then the proper fix should be to wrap somewhere with <Layer /> component

@douglasbouttell-camunda This was left unanswered

tasklist/client/e2e/visual/tasks-page.spec.ts

vsgoulart · 2024-05-15T11:51:39Z

tasklist/client/src/Tasks/Task/Details/TabListNav.module.scss

@@ -10,3 +10,8 @@
  border-top: 1px solid var(--cds-border-subtle);
  border-bottom: 1px solid var(--cds-border-subtle);
 }
+
+.hidden {
+  display: none !important;


Let's remove the important please. We can use CSS specificity to achieve the same

tasklist/client/e2e/pages/TaskDetailsPage.ts

tasklist/client/src/Tasks/Task/ProcessView/index.tsx

vsgoulart · 2024-05-15T12:04:19Z

tasklist/client/src/modules/queries/useProcessDefinition.tsx

+        return response.json();
+      }
+
+      throw error ?? new Error('Failed to fetch process instances');


error is never null when response is null

Suggested change

throw error ?? new Error('Failed to fetch process instances');

throw error;

vsgoulart · 2024-05-15T12:13:29Z

tasklist/client/src/modules/queries/useProcessDefinition.tsx

+      if (error !== null && error.variant === 'failed-response') {
+        const {status} = error.response;
+        if (
+          status === HTTP_STATUS_FORBIDDEN ||
+          status === HTTP_STATUS_NOT_FOUND
+        ) {
+          return null;
+        }
+      }


The behaviour for a 404 Not Found error is different to a 500 Internal Server Error. I think we should explicitly handle business cases (not found and forbidden) since it makes it simpler to whoever consumes this hook.

but this is basically goes against react-query conventions of throwing errors and it makes harder for the hook to be reused if want to have a different behavior. It would be impossible to build a 404 page for this for example.

I believe this logic should exist in the view layer

vsgoulart · 2024-05-15T12:14:16Z

@douglasbouttell-camunda Could you also rebase this branch?

vsgoulart · 2024-05-15T19:19:55Z

@douglasbouttell-camunda Could you fix this tooltip issue I mentioned somedays ago on this PR too?

There's also an issue with the labels appearing on new vars, which is the wrong behavior. This must have come from a Carbon update, it should be a onliner too:

douglasbouttell-camunda · 2024-05-16T08:58:19Z

@douglasbouttell-camunda Could you fix this tooltip issue I mentioned somedays ago on this PR too?

These have been fixed in the latest commit and I added some visual regression snapshots so we catch this in the future.

vsgoulart

@douglasbouttell-camunda Just some small comments that were left, but it seems like there are some issues with the E2E tests that need to be attended too

tasklist/client/e2e/pages/TaskDetailsPage.ts

vsgoulart · 2024-05-16T15:39:42Z

tasklist/client/src/Tasks/Task/ProcessView/index.tsx

+        <Tag className={styles.version}>Version: {version}</Tag>
+      </div>
+      {bpmnXml !== null ? (
+        <Layer level={1} className={styles.diagramFrame}>


@douglasbouttell-camunda This was left unanswered

tasklist/client/src/Tasks/Task/Details/TabListNav.tsx

volodymyr-melnykc · 2024-05-17T09:10:04Z

As we discussed in Slack, when a task doesn't have the form but only task variables, then the content with task variables should occupy the full width.

@douglasbouttell-camunda @vsgoulart

vsgoulart · 2024-05-21T16:00:20Z

@esraagamal6 Can you please test this PR?

douglasbouttell-camunda added the component/tasklist Related to the Tasklist component/team label May 13, 2024

douglasbouttell-camunda requested a review from a team May 13, 2024 12:51

douglasbouttell-camunda self-assigned this May 13, 2024

douglasbouttell-camunda marked this pull request as ready for review May 13, 2024 15:24

vsgoulart reviewed May 13, 2024

View reviewed changes

douglasbouttell-camunda requested a review from vsgoulart May 14, 2024 12:50

vsgoulart reviewed May 15, 2024

View reviewed changes

douglasbouttell-camunda requested a review from vsgoulart May 16, 2024 13:28

vsgoulart reviewed May 16, 2024

View reviewed changes

douglasbouttell-camunda requested review from vsgoulart and removed request for vsgoulart May 17, 2024 08:43

douglasbouttell-camunda assigned vsgoulart May 17, 2024

vsgoulart force-pushed the tasklist/17645-process-view branch from bc241e8 to 524d5b2 Compare May 21, 2024 15:48

vsgoulart requested a review from esraagamal6 May 21, 2024 16:00

vsgoulart approved these changes May 21, 2024

View reviewed changes

vsgoulart force-pushed the tasklist/17645-process-view branch 3 times, most recently from 9b70b12 to c22e3f7 Compare May 23, 2024 11:48

douglasbouttell-camunda added 5 commits May 27, 2024 15:11

feat: users can view the associated process for a task

f843004

fix: types

ed71503

fix: don't show diagram if the BPMN XML does not exist

3141666

fix: only pass a string to useProcessDefinition

9079b27

fix: types

95d8f68

douglasbouttell-camunda and others added 17 commits May 27, 2024 15:11

fix: e2e tests

18cbc21

fix: tests

bbada95

fix: pr comments

4b032de

fix: variable editor regressions

a136d8c

fix: make visual regression tests more consistent

ec5d206

fix: tests

a1e2802

fix: tests

22e14c3

fix: pr comments

8d02818

fix: make the variable view full width

654e84a

fix: Enable tab index on task tabs

bf5567e

feat: Hide bpmn.io logo

f597f4a

refactor: Remove console.log

4531d9b

test: Create extra instance

a3e4aa4

test: Fix E2E tests

819a99f

test: Update screenshot

1ccde2f

fix: Preserve URL when clicking details tab

c4dc5d2

fix: Keep task card active when process tab is open

cf343d8

vsgoulart force-pushed the tasklist/17645-process-view branch from c22e3f7 to cf343d8 Compare May 27, 2024 13:27

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: users can view the associated process for a task #18460

feat: users can view the associated process for a task #18460

douglasbouttell-camunda commented May 13, 2024 •

edited by vsgoulart

github-actions bot commented May 13, 2024 •

edited

vsgoulart May 13, 2024

douglasbouttell-camunda May 14, 2024

vsgoulart May 15, 2024

vsgoulart May 15, 2024

douglasbouttell-camunda May 15, 2024

vsgoulart May 15, 2024

vsgoulart May 16, 2024

vsgoulart May 15, 2024 •

edited

vsgoulart May 15, 2024

vsgoulart May 15, 2024

vsgoulart commented May 15, 2024

vsgoulart commented May 15, 2024

douglasbouttell-camunda commented May 16, 2024

vsgoulart left a comment

vsgoulart May 16, 2024

volodymyr-melnykc commented May 17, 2024 •

edited

vsgoulart commented May 21, 2024

	throw error ?? new Error('Failed to fetch process instances');
	throw error;

feat: users can view the associated process for a task #18460

Are you sure you want to change the base?

feat: users can view the associated process for a task #18460

Conversation

douglasbouttell-camunda commented May 13, 2024 • edited by vsgoulart

Description

Related issues

github-actions bot commented May 13, 2024 • edited

Tasklist Test Results

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

vsgoulart May 15, 2024 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

vsgoulart commented May 15, 2024

vsgoulart commented May 15, 2024

douglasbouttell-camunda commented May 16, 2024

vsgoulart left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

volodymyr-melnykc commented May 17, 2024 • edited

vsgoulart commented May 21, 2024

douglasbouttell-camunda commented May 13, 2024 •

edited by vsgoulart

github-actions bot commented May 13, 2024 •

edited

vsgoulart May 15, 2024 •

edited

volodymyr-melnykc commented May 17, 2024 •

edited