Cleanup TaskDetails #1464

camielvs · 2025-12-02T22:11:23Z

Description

Move TaskDetails onto UI primitives & ContextPanel Blocks.

To simplify this and provide better code quality, the links and urls have been split out of Details into their own GithubDetails component, as has also been done with the action buttons -> Actions component.

Related Issue and Pull requests

https://github.com/Shopify/oasis-frontend/issues/401

Type of Change

Cleanup/Refactor

Checklist

I have tested this does not break current pipelines / runs functionality
I have tested the changes on staging

Screenshots (if applicable)

Before:

After:

Test Instructions

No change to app functionality. UI update only. Confirm that the interface works and shows info as expected.

Additional Comments

camielvs · 2025-12-02T22:11:42Z

Break TaskActions into two sections #1550
Rework Pipeline Action Buttons into Action Framework #1544
Rework Task Action Buttons into Action Framework #1534
Rework Run Action Buttons into Action Framework #1524
Rework CodeViewer Implementation #1527
Cleanup RunDetails #1508
Cleanup PipelineDetails #1468
Cleanup TaskDetails #1464 👈 (View in Graphite)
Cleanup ExecutionDetails #1471
Add UI Blocks to Context Panel #1470
Update Link Component #1472
master

This stack of pull requests is managed by Graphite. Learn more about stacking.

src/components/shared/ExecutionDetails/ExecutionDetails.tsx

src/components/shared/TaskDetails/Blocks/ActionBlock.tsx

src/components/shared/ContextPanel/Blocks/ActionBlock.tsx

maxy-shpfy · 2025-12-04T00:41:33Z

src/components/shared/ExecutionDetails/ExecutionDetails.tsx

-  if (!hasExecutionData) {
-    return null;
-  }
+  } = useFetchContainerExecutionState(executionId, backendUrl);


NIT: by using useSuspenseQuery and withSuspenseWrapper you can clean up skeleton and error logic.

useFetchContainerExecutionState seems to be used only in this component, so refactoring is straight forward.

The code here has changed a fair amount, so it's worth taking another look and seeing if this NIT is still relevant

I think it is still relevant, not blocking though

src/components/shared/ContextPanel/Blocks/ActionBlock.tsx

src/components/shared/TaskDetails/Blocks/shared.ts

src/components/shared/ContextPanel/Blocks/ActionBlock.tsx

src/components/shared/TaskDetails/Blocks/LinkBlock.tsx

src/components/shared/ContextPanel/Blocks/TextBlock.tsx

maxy-shpfy

See some regression in Component Details Dialog.

Screen Recording 2025-12-03 at 4.52.59 PM.mov (uploaded via Graphite)

src/components/shared/ReactFlow/FlowCanvas/TaskNode/TaskNodeCard/TaskNodeCard.tsx

maxy-shpfy

Screen Recording 2025-12-18 at 8.37.56 AM.mov (uploaded via Graphite)

I see a problem with

return <div key={JSON.stringify(action)}>{action}</div>;

in ActionBlock

src/components/shared/ContextPanel/Blocks/ActionBlock.tsx

Mbeaulne · 2025-12-18T17:09:37Z

src/utils/URL.ts

+const downloadYamlFromComponentText = (
+  componentSpec: ComponentSpec,
+  displayName: string,
+) => {
+  const code = componentSpecToText(componentSpec);
+  downloadStringAsFile(code, `${displayName}.yaml`, "text/yaml");
+};
+


does this exist somewhere else?

I don't think so? But you may be confused because iirc one of @maxy-shpfy's open PRs also implements a similar method.

I'm not aware of similar methods. I dont see any bad signals coming from this method

src/components/shared/ContextPanel/Blocks/ActionBlock.tsx

camielvs · 2025-12-18T19:37:27Z

^ I think I have fixed this - let me know if not!

maxy-shpfy

Now it LGTM!

agreed to proceed in dev sync

camielvs · 2025-12-18T20:48:09Z

Merge activity

Dec 18, 8:48 PM UTC: A user started a stack merge that includes this pull request via Graphite.
Dec 18, 8:48 PM UTC: @camielvs merged this pull request with Graphite.

camielvs force-pushed the 12-02-cleanup_taskdetails branch from cf86a9d to 6c22aea Compare December 2, 2025 23:54

camielvs marked this pull request as ready for review December 2, 2025 23:56

camielvs requested review from Mbeaulne and maxy-shpfy December 2, 2025 23:56

Mbeaulne reviewed Dec 3, 2025

View reviewed changes

camielvs force-pushed the 12-02-cleanup_taskdetails branch from 6c22aea to f1fefa5 Compare December 3, 2025 20:35

camielvs requested a review from Mbeaulne December 3, 2025 20:47

maxy-shpfy reviewed Dec 4, 2025

View reviewed changes

src/components/shared/ContextPanel/Blocks/ActionBlock.tsx Outdated Show resolved Hide resolved

maxy-shpfy reviewed Dec 4, 2025

View reviewed changes

src/components/shared/TaskDetails/Blocks/shared.ts Outdated Show resolved Hide resolved

maxy-shpfy reviewed Dec 4, 2025

View reviewed changes

src/components/shared/ContextPanel/Blocks/ActionBlock.tsx Show resolved Hide resolved

maxy-shpfy reviewed Dec 4, 2025

View reviewed changes

src/components/shared/TaskDetails/Blocks/LinkBlock.tsx Outdated Show resolved Hide resolved

maxy-shpfy reviewed Dec 4, 2025

View reviewed changes

src/components/shared/ContextPanel/Blocks/TextBlock.tsx Outdated Show resolved Hide resolved

maxy-shpfy requested changes Dec 4, 2025

View reviewed changes

camielvs mentioned this pull request Dec 4, 2025

Cleanup PipelineDetails #1468

Merged

3 tasks

camielvs force-pushed the 12-02-cleanup_taskdetails branch from f1fefa5 to 17c6996 Compare December 4, 2025 21:26

camielvs marked this pull request as draft December 4, 2025 21:44

camielvs changed the base branch from master to graphite-base/1464 December 4, 2025 21:52

camielvs force-pushed the 12-02-cleanup_taskdetails branch from 17c6996 to 748d25b Compare December 4, 2025 21:52

camielvs changed the base branch from graphite-base/1464 to 12-04-add_ui_blocks_to_context_panel December 4, 2025 21:53

camielvs mentioned this pull request Dec 4, 2025

Add UI Blocks to Context Panel #1470

Merged

4 tasks

camielvs changed the base branch from 12-04-add_ui_blocks_to_context_panel to graphite-base/1464 December 4, 2025 21:59

camielvs force-pushed the 12-02-cleanup_taskdetails branch from 748d25b to 4f787bc Compare December 4, 2025 21:59

camielvs force-pushed the graphite-base/1464 branch from e08a5ab to 49d4edd Compare December 4, 2025 21:59

camielvs changed the base branch from graphite-base/1464 to 12-04-cleanup_executiondetails December 4, 2025 21:59

camielvs mentioned this pull request Dec 4, 2025

Cleanup ExecutionDetails #1471

Merged

3 tasks

camielvs force-pushed the 12-02-cleanup_taskdetails branch from 4f787bc to ef11837 Compare December 4, 2025 22:29

camielvs force-pushed the 12-04-cleanup_executiondetails branch from 49d4edd to 533c465 Compare December 4, 2025 22:44

camielvs force-pushed the 12-02-cleanup_taskdetails branch from ef11837 to 04c9d4b Compare December 4, 2025 22:44

camielvs force-pushed the 12-04-cleanup_executiondetails branch from 80a0367 to 8aed7ce Compare December 17, 2025 20:32

camielvs force-pushed the 12-02-cleanup_taskdetails branch from 8d6e5bd to 9f12c4f Compare December 17, 2025 20:32

camielvs force-pushed the 12-04-cleanup_executiondetails branch from 8aed7ce to da919d7 Compare December 17, 2025 20:34

camielvs force-pushed the 12-02-cleanup_taskdetails branch from 9f12c4f to 5257308 Compare December 17, 2025 20:34

camielvs force-pushed the 12-04-cleanup_executiondetails branch from da919d7 to d36c503 Compare December 18, 2025 16:03

camielvs force-pushed the 12-02-cleanup_taskdetails branch from 5257308 to 5231971 Compare December 18, 2025 16:03

camielvs force-pushed the 12-04-cleanup_executiondetails branch from d36c503 to 6630e43 Compare December 18, 2025 16:10

camielvs force-pushed the 12-02-cleanup_taskdetails branch from 5231971 to 2a594fc Compare December 18, 2025 16:10

maxy-shpfy reviewed Dec 18, 2025

View reviewed changes

src/components/shared/ReactFlow/FlowCanvas/TaskNode/TaskNodeCard/TaskNodeCard.tsx Outdated Show resolved Hide resolved

maxy-shpfy requested changes Dec 18, 2025

View reviewed changes

Mbeaulne previously requested changes Dec 18, 2025

View reviewed changes

camielvs force-pushed the 12-02-cleanup_taskdetails branch from 2a594fc to 8633795 Compare December 18, 2025 19:28

camielvs force-pushed the 12-04-cleanup_executiondetails branch from 6630e43 to 87a8b15 Compare December 18, 2025 19:28

camielvs force-pushed the 12-02-cleanup_taskdetails branch from 8633795 to a14d94e Compare December 18, 2025 19:34

camielvs requested review from Mbeaulne and maxy-shpfy December 18, 2025 19:36

maxy-shpfy approved these changes Dec 18, 2025

View reviewed changes

camielvs force-pushed the 12-04-cleanup_executiondetails branch 2 times, most recently from 0bf0e98 to 9c9af85 Compare December 18, 2025 20:35

camielvs force-pushed the 12-02-cleanup_taskdetails branch from a14d94e to 1bdd5d3 Compare December 18, 2025 20:35

camielvs changed the base branch from 12-04-cleanup_executiondetails to graphite-base/1464 December 18, 2025 20:42

camielvs force-pushed the 12-02-cleanup_taskdetails branch from 1bdd5d3 to 540b3d3 Compare December 18, 2025 20:42

camielvs force-pushed the graphite-base/1464 branch from 9c9af85 to 14f0476 Compare December 18, 2025 20:42

graphite-app bot changed the base branch from graphite-base/1464 to master December 18, 2025 20:42

Cleanup TaskDetails

2d25276

camielvs force-pushed the 12-02-cleanup_taskdetails branch from 540b3d3 to 2d25276 Compare December 18, 2025 20:43

camielvs merged commit 41e0814 into master Dec 18, 2025
7 of 8 checks passed

Cleanup TaskDetails #1464

Cleanup TaskDetails #1464

Uh oh!

Conversation

camielvs commented Dec 2, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Related Issue and Pull requests

Type of Change

Checklist

Screenshots (if applicable)

Test Instructions

Additional Comments

Uh oh!

camielvs commented Dec 2, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

maxy-shpfy Dec 4, 2025

Choose a reason for hiding this comment

Uh oh!

camielvs Dec 15, 2025

Choose a reason for hiding this comment

Uh oh!

maxy-shpfy Dec 18, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

maxy-shpfy left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

maxy-shpfy left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Mbeaulne Dec 18, 2025

Choose a reason for hiding this comment

Uh oh!

camielvs Dec 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

maxy-shpfy Dec 18, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

camielvs commented Dec 18, 2025

Uh oh!

maxy-shpfy left a comment

Choose a reason for hiding this comment

Uh oh!

camielvs commented Dec 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Merge activity

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

camielvs commented Dec 2, 2025 •

edited

Loading

camielvs commented Dec 2, 2025 •

edited

Loading

camielvs Dec 18, 2025 •

edited

Loading

camielvs commented Dec 18, 2025 •

edited

Loading