Add UI Blocks to Context Panel #1470

camielvs · 2025-12-04T21:41:45Z

Description

Adds standard UI blocks for use inside the ContextPanel. Hopefully this will allow us a bit more visual consistency going forward. Each block has a header/title and some content. The header is the same for all blocks, but the content will be different depending on the block.

Implementation of the Blocks into existing Context Panel use cases is done upstack.

Blocks Added:

ActionBlock: Renders a horizontal array of identical buttons based on an input label, icon and callback. Custom configuration options allow buttons to be hidden or disabled upon certain conditions, or to have two-step confirmation.
ContentBlock: Renders any given ReactNode content. An optional prop allows the block to be collapsed.
ListBlock: Renders a list of key:value pair items. Items can be with or without markers. Items without a value will not render in the list
TextBlock: Renders text. Text can be copyable or collapsible via optional props

Additionally, the Attribute component was added, which simply renders a given label and associated value. Value can be a string or a link.

This PR also adds unit tests to the new Blocks.

Related Issue and Pull requests

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

Type of Change

Improvement
Cleanup/Refactor

Checklist

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

Screenshots (if applicable)

Test Instructions

This PR adds new UI blocks but does not implement them in the interface. If you want to test them and see what they look like visual:

Add a test component in the code and see how it renders, or
Go upstack to the cleanup PRs and see them in action

(wouldn't it be neat to have a UI playground?)

Additional Comments

camielvs · 2025-12-04T21:42:02Z

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
Cleanup ExecutionDetails #1471
Add UI Blocks to Context Panel #1470 👈 (View in Graphite)
Update Link Component #1472
master

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

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

maxy-shpfy · 2025-12-16T01:18:38Z

src/components/ui/icon.tsx

  },
 });

+export type IconName = keyof typeof icons;


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

maxy-shpfy

LGTM!

maxy-shpfy · 2025-12-18T16:16:37Z

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

+            <CollapsibleTrigger asChild>
+              <Button variant="ghost" size="sm">
+                <Icon name="ChevronsUpDown" />
+                <span className="sr-only">Toggle</span>


For future: interesting, that we may need to take it further one day, and apply a11y

maxy-shpfy · 2025-12-18T16:20:46Z

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

+    <BlockStack className={className}>
+      <Collapsible className="w-full">
+        <InlineStack blockAlign="center" gap="1">
+          {title && <Heading level={3}>{title}</Heading>}
+          {collapsible && (
+            <CollapsibleTrigger asChild>
+              <Button variant="ghost" size="sm">
+                <Icon name="ChevronsUpDown" />
+                <span className="sr-only">Toggle</span>
+              </Button>
+            </CollapsibleTrigger>
+          )}
+        </InlineStack>
+
+        {collapsible ? (
+          <CollapsibleContent className="w-full mt-1">
+            {content}
+          </CollapsibleContent>


NIT: this block looks really similar to the ContentBlock - maybe we can re-use code pieces?

I thought about it but didn't want to over-complicate things. We can do as a follow-up if we feel it's necessary

maxy-shpfy · 2025-12-18T19:48:51Z

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

+              const key =
+                isValidElement(action) && action.key != null
+                  ? `action-node-${String(action.key)}`
+                  : `action-node-${index}`;


I'm ok with this for now (since in nature action list is pretty static, so we should not see issues related to key messed up), but I would revisit and see if we can use smth like "ID" on the Action structure

In the long-term this may likely be removed - i.e. in #1544

camielvs · 2025-12-18T20:34:03Z

Merge activity

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

camielvs force-pushed the 12-04-add_ui_blocks_to_context_panel branch from ed2e0a6 to e08a5ab Compare December 4, 2025 21:52

This was referenced Dec 4, 2025

Cleanup TaskDetails #1464

Merged

Cleanup PipelineDetails #1468

Merged

camielvs force-pushed the 12-04-add_ui_blocks_to_context_panel branch from e08a5ab to 54e3528 Compare December 4, 2025 21:59

camielvs mentioned this pull request Dec 4, 2025

Cleanup ExecutionDetails #1471

Merged

3 tasks

camielvs changed the base branch from master to graphite-base/1470 December 4, 2025 22:44

camielvs force-pushed the 12-04-add_ui_blocks_to_context_panel branch from 54e3528 to e6ea5d1 Compare December 4, 2025 22:44

camielvs changed the base branch from graphite-base/1470 to 12-04-update_link_component December 4, 2025 22:44

camielvs mentioned this pull request Dec 4, 2025

Update Link Component #1472

Merged

3 tasks

camielvs force-pushed the 12-04-add_ui_blocks_to_context_panel branch from e6ea5d1 to 87a5600 Compare December 4, 2025 22:47

camielvs force-pushed the 12-04-update_link_component branch from ecc2b18 to ebfc92f Compare December 5, 2025 01:53

camielvs force-pushed the 12-04-add_ui_blocks_to_context_panel branch from 87a5600 to 8f16f7a Compare December 5, 2025 01:53

camielvs changed the base branch from 12-04-update_link_component to graphite-base/1470 December 5, 2025 20:26

camielvs force-pushed the graphite-base/1470 branch from ebfc92f to f40863c Compare December 8, 2025 23:41

camielvs force-pushed the 12-04-add_ui_blocks_to_context_panel branch from 8f16f7a to a526425 Compare December 8, 2025 23:41

camielvs changed the base branch from graphite-base/1470 to master December 8, 2025 23:41

camielvs force-pushed the 12-04-add_ui_blocks_to_context_panel branch 3 times, most recently from d385e99 to 66a011a Compare December 9, 2025 02:09

camielvs mentioned this pull request Dec 9, 2025

Cleanup RunDetails #1508

Merged

3 tasks

camielvs force-pushed the 12-04-add_ui_blocks_to_context_panel branch 5 times, most recently from 1d45169 to 1cb8f58 Compare December 10, 2025 21:28

This was referenced Dec 10, 2025

Rework Run Action Buttons into Action Framework #1524

Open

Rework CodeViewer Implementation #1527

Open

camielvs force-pushed the 12-04-add_ui_blocks_to_context_panel branch 2 times, most recently from 4814e7c to 4821940 Compare December 11, 2025 00:34

camielvs mentioned this pull request Dec 11, 2025

Rework Task Action Buttons into Action Framework #1534

Open

3 tasks

camielvs force-pushed the 12-04-add_ui_blocks_to_context_panel branch 2 times, most recently from 7f0ee6f to f3260f1 Compare December 12, 2025 00:44

camielvs mentioned this pull request Dec 12, 2025

Rework Pipeline Action Buttons into Action Framework #1544

Open

3 tasks

camielvs force-pushed the 12-04-add_ui_blocks_to_context_panel branch 2 times, most recently from 436b867 to d89ccdb Compare December 13, 2025 00:23

camielvs mentioned this pull request Dec 13, 2025

Break TaskActions into two sections #1550

Draft

3 tasks

camielvs force-pushed the 12-04-add_ui_blocks_to_context_panel branch 2 times, most recently from 6dcfcb1 to c063c0a Compare December 15, 2025 20:25

camielvs marked this pull request as ready for review December 15, 2025 21:14

camielvs requested review from Mbeaulne and maxy-shpfy December 15, 2025 21:15

morgan-wowk reviewed Dec 16, 2025

View reviewed changes

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

morgan-wowk approved these changes Dec 16, 2025

View reviewed changes

maxy-shpfy reviewed Dec 16, 2025

View reviewed changes

src/components/ui/icon.tsx

},

});

export type IconName = keyof typeof icons;

Copy link

Collaborator

maxy-shpfy Dec 16, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

love it!

camielvs reacted with heart emoji

camielvs force-pushed the 12-04-add_ui_blocks_to_context_panel branch from c063c0a to d93cd57 Compare December 17, 2025 19:02

camielvs requested a review from a team as a code owner December 17, 2025 19:02

camielvs requested a review from maxy-shpfy December 17, 2025 20:27

camielvs force-pushed the 12-04-add_ui_blocks_to_context_panel branch 2 times, most recently from da65e9c to abf1484 Compare December 17, 2025 20:34

maxy-shpfy reviewed Dec 18, 2025

View reviewed changes

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

camielvs force-pushed the 12-04-add_ui_blocks_to_context_panel branch from abf1484 to 49b752e Compare December 18, 2025 16:03

maxy-shpfy approved these changes Dec 18, 2025

View reviewed changes

maxy-shpfy reviewed Dec 18, 2025

View reviewed changes

Add UI Blocks to Context Panel

a8add58

camielvs force-pushed the 12-04-add_ui_blocks_to_context_panel branch from 49b752e to a8add58 Compare December 18, 2025 19:28

maxy-shpfy reviewed Dec 18, 2025

View reviewed changes

camielvs merged commit 18afa99 into master Dec 18, 2025
7 of 9 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Add UI Blocks to Context Panel #1470

Add UI Blocks to Context Panel #1470

Uh oh!

camielvs commented Dec 4, 2025 •

edited

Loading

Uh oh!

camielvs commented Dec 4, 2025 •

edited

Loading

Uh oh!

Uh oh!

maxy-shpfy Dec 16, 2025

Uh oh!

Uh oh!

maxy-shpfy left a comment

Uh oh!

maxy-shpfy Dec 18, 2025

Uh oh!

maxy-shpfy Dec 18, 2025

Uh oh!

camielvs Dec 18, 2025

Uh oh!

maxy-shpfy Dec 18, 2025

Uh oh!

camielvs Dec 18, 2025

Uh oh!

camielvs commented Dec 18, 2025 •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Add UI Blocks to Context Panel #1470

Add UI Blocks to Context Panel #1470

Uh oh!

Conversation

camielvs commented Dec 4, 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 4, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

maxy-shpfy Dec 16, 2025

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!

maxy-shpfy Dec 18, 2025

Choose a reason for hiding this comment

Uh oh!

maxy-shpfy Dec 18, 2025

Choose a reason for hiding this comment

Uh oh!

camielvs Dec 18, 2025

Choose a reason for hiding this comment

Uh oh!

maxy-shpfy Dec 18, 2025

Choose a reason for hiding this comment

Uh oh!

camielvs Dec 18, 2025

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!

4 participants

camielvs commented Dec 4, 2025 •

edited

Loading

camielvs commented Dec 4, 2025 •

edited

Loading

camielvs commented Dec 18, 2025 •

edited

Loading