From 73fd9ee5abb2da10a99454afd980372aa3392508 Mon Sep 17 00:00:00 2001 From: Chris Tse <2302191+christse@users.noreply.github.com> Date: Sat, 18 Jul 2026 12:54:10 -0400 Subject: [PATCH 1/3] Improve issue dependency blocking UI --- .../software-factory/realm/issue-tracker.gts | 73 +++++++++- .../realm/issue-tracker.test.gts | 129 +++++++++++++++++- 2 files changed, 194 insertions(+), 8 deletions(-) diff --git a/packages/software-factory/realm/issue-tracker.gts b/packages/software-factory/realm/issue-tracker.gts index 7ebdad9b4df..23a0d834e10 100644 --- a/packages/software-factory/realm/issue-tracker.gts +++ b/packages/software-factory/realm/issue-tracker.gts @@ -163,7 +163,7 @@ class IssueIsolated extends Component { @tracked showSidebar = true; @tracked descriptionOpen = true; @tracked acceptanceCriteriaOpen = true; - @tracked commentsOpen = false; + @tracked commentsOpen = true; get statusColor(): string | undefined { return getIssueStatusColor(this.args.model, this.args.model?.status); @@ -345,7 +345,12 @@ class IssueIsolated extends Component { {{#if @model.blockedBy.length}}
-

Blocked By

+

+ Depends On +

<@fields.blockedBy />
@@ -660,7 +665,7 @@ class IssueEdit extends Component { @tracked showSidebar = true; @tracked descriptionOpen = true; @tracked acceptanceCriteriaOpen = true; - @tracked commentsOpen = false; + @tracked commentsOpen = true; get statusColor(): string | undefined { return getIssueStatusColor(this.args.model, this.args.model?.status); @@ -835,7 +840,9 @@ class IssueEdit extends Component {
-

Blocked By

+

+ Depends On +

<@fields.blockedBy /> @@ -1097,6 +1104,35 @@ export class Issue extends CardDef { }); static fitted = class Fitted extends Component { + // Dependencies normally sequence work. Use the blocked warning state only + // when a direct dependency is itself in the blocked status. + get blockedDependencies() { + return (this.args.model?.blockedBy ?? []).filter( + (dependency) => dependency?.status === 'blocked', + ); + } + + get hasBlockedDependency(): boolean { + return this.blockedDependencies.length > 0; + } + + get dependencyLabel(): string { + let dependencies = this.args.model?.blockedBy ?? []; + let issueIds = (list: typeof dependencies): string => + list + .map((dependency) => dependency?.issueId) + .filter(Boolean) + .join(', '); + + if (this.hasBlockedDependency) { + return `Blocked by ${ + issueIds(this.blockedDependencies) || this.blockedDependencies.length + }`; + } + + return `Depends on ${issueIds(dependencies) || dependencies.length}`; + } + get statusColor(): string | undefined { return getIssueStatusColor(this.args.model, this.args.model?.status); } @@ -1144,9 +1180,22 @@ export class Issue extends CardDef {
{{/if}} {{#if @model.blockedBy.length}} -
+
- Blocked by {{@model.blockedBy.length}} + + {{this.dependencyLabel}} + + {{#if this.hasBlockedDependency}} + + {{/if}}
{{/if}} {{#if @model.relatedKnowledge.length}} @@ -1309,6 +1358,18 @@ export class Issue extends CardDef { color: var(--muted-foreground, var(--boxel-500)); overflow: hidden; } + .meta-depends-on.has-blocked-dependency { + color: var(--destructive, #b91c1c); + } + .blocked-dependency-dot { + display: inline-block; + width: 0.375rem; + height: 0.375rem; + border-radius: 50%; + background: var(--destructive, #dc2626); + margin-left: 0.125rem; + flex-shrink: 0; + } .meta-link-icon { width: 0.75rem; height: 0.75rem; diff --git a/packages/software-factory/realm/issue-tracker.test.gts b/packages/software-factory/realm/issue-tracker.test.gts index f8ed884c293..5b4c399cdc1 100644 --- a/packages/software-factory/realm/issue-tracker.test.gts +++ b/packages/software-factory/realm/issue-tracker.test.gts @@ -52,15 +52,19 @@ async function selectGroupBy(key: string) { function makeIssueWithFields( issueId: string, - attrs: Record, + attrs: Record, filename: string, + extraRelationships: Record = {}, ): Record> { return { [filename]: { data: { type: 'card', attributes: { issueId, summary: `${issueId} issue`, ...attrs }, - relationships: { project: { links: { self: projectId } } }, + relationships: { + project: { links: { self: projectId } }, + ...extraRelationships, + }, meta: { adoptsFrom: { module: issueTrackerModule, name: 'Issue' } }, }, }, @@ -130,6 +134,127 @@ function makeBoard( } export function runTests() { + module('Issue Tracker | issue formats', function (hooks) { + setupApplicationTest(hooks); + setupLocalIndexing(hooks); + setupOnSave(hooks); + + let mockMatrixUtils = setupMockMatrix(hooks, { + loggedInAs: '@testuser:localhost', + activeRealms: [testRealmURL], + }); + + hooks.beforeEach(async function () { + await setupAcceptanceTestRealm({ + realmURL: testRealmURL, + mockMatrixUtils, + contents: { + ...SYSTEM_CARD_FIXTURE_CONTENTS, + ...makeProject(), + ...makeIssueWithFields( + 'IT-1', + { status: 'done' }, + 'Issues/done-dependency.json', + ), + ...makeIssueWithFields( + 'IT-2', + { + status: 'in_progress', + comments: [ + { + author: 'Test User', + body: 'A visible comment by default.', + }, + ], + }, + 'Issues/sequenced-issue.json', + { + 'blockedBy.0': { + links: { self: `${testRealmURL}Issues/done-dependency` }, + }, + }, + ), + ...makeIssueWithFields( + 'IT-3', + { status: 'blocked' }, + 'Issues/blocked-dependency.json', + ), + ...makeIssueWithFields( + 'IT-4', + { status: 'backlog' }, + 'Issues/blocked-consumer.json', + { + 'blockedBy.0': { + links: { self: `${testRealmURL}Issues/blocked-dependency` }, + }, + }, + ), + ...makeBoard(), + }, + }); + }); + + test('comments and dependency details are expanded and labeled clearly by default', async function (assert) { + let issueId = `${testRealmURL}Issues/sequenced-issue`; + + await visitOperatorMode({ + stacks: [[{ id: issueId, format: 'isolated' }]], + }); + await waitFor('#comments'); + + assert + .dom('#comments') + .hasAttribute('aria-expanded', 'true', 'isolated comments are open'); + assert + .dom('#section-comments') + .hasAttribute('aria-hidden', 'false', 'isolated comments are visible'); + assert + .dom('[data-test-dependencies-heading]') + .hasText('Depends On', 'isolated view describes normal dependencies'); + + await visitOperatorMode({ + stacks: [[{ id: issueId, format: 'edit' }]], + }); + await waitFor('[data-test-issue-edit]'); + + assert + .dom('#comments') + .hasAttribute('aria-expanded', 'true', 'edit comments are open'); + assert + .dom('#section-comments') + .hasAttribute('aria-hidden', 'false', 'edit comments are visible'); + assert + .dom('[data-test-dependencies-heading]') + .hasText('Depends On', 'edit view describes normal dependencies'); + }); + + test('fitted cards distinguish dependencies from blocked dependencies', async function (assert) { + await visitOperatorMode({ + stacks: [[{ id: boardId, format: 'isolated' }]], + }); + await waitFor('[data-test-dependency-label="IT-4"]'); + + assert + .dom('[data-test-dependency-label="IT-2"]') + .hasText( + 'Depends on IT-1', + 'completed dependency is normal sequencing', + ); + assert + .dom('[data-test-blocked-dependency-dot="IT-2"]') + .doesNotExist('normal dependency has no blocked warning'); + assert + .dom('[data-test-dependency-label="IT-4"]') + .hasText( + 'Blocked by IT-3', + 'a directly blocked dependency prevents the issue from proceeding', + ); + assert + .dom('[data-test-blocked-dependency-dot="IT-4"]') + .exists('blocked dependency has a warning indicator'); + }); + }); + module('Issue Tracker | board interactions', function (hooks) { setupApplicationTest(hooks); setupLocalIndexing(hooks); From 3ec7eff3c71f4607d146d8788654f15ea8070f8d Mon Sep 17 00:00:00 2001 From: Burcu Noyan Date: Mon, 20 Jul 2026 13:29:05 -0400 Subject: [PATCH 2/3] Use token fallbacks for blocked-dependency colors and move tooltip to the meta row Co-Authored-By: Claude Fable 5 --- packages/software-factory/realm/issue-tracker.gts | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/packages/software-factory/realm/issue-tracker.gts b/packages/software-factory/realm/issue-tracker.gts index 23a0d834e10..ff3969d0e2c 100644 --- a/packages/software-factory/realm/issue-tracker.gts +++ b/packages/software-factory/realm/issue-tracker.gts @@ -1183,6 +1183,10 @@ export class Issue extends CardDef {
@@ -1191,9 +1195,8 @@ export class Issue extends CardDef { {{#if this.hasBlockedDependency}} {{/if}}
@@ -1359,14 +1362,14 @@ export class Issue extends CardDef { overflow: hidden; } .meta-depends-on.has-blocked-dependency { - color: var(--destructive, #b91c1c); + color: var(--destructive, var(--boxel-danger)); } .blocked-dependency-dot { display: inline-block; width: 0.375rem; height: 0.375rem; border-radius: 50%; - background: var(--destructive, #dc2626); + background: var(--destructive, var(--boxel-danger)); margin-left: 0.125rem; flex-shrink: 0; } From 78e382076571fd357924f57db5748b6b856b35de Mon Sep 17 00:00:00 2001 From: Burcu Noyan Date: Mon, 20 Jul 2026 13:37:18 -0400 Subject: [PATCH 3/3] Show a neutral link icon for non-blocked dependencies on fitted issue cards Co-Authored-By: Claude Fable 5 --- packages/software-factory/realm/issue-tracker.gts | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/software-factory/realm/issue-tracker.gts b/packages/software-factory/realm/issue-tracker.gts index ff3969d0e2c..63fd2d08189 100644 --- a/packages/software-factory/realm/issue-tracker.gts +++ b/packages/software-factory/realm/issue-tracker.gts @@ -42,6 +42,7 @@ import CheckboxIcon from '@cardstack/boxel-icons/checkbox'; import CircleAlert from '@cardstack/boxel-icons/circle-alert'; import Folder from '@cardstack/boxel-icons/folder'; import LayoutSidebarRightCollapse from '@cardstack/boxel-icons/layout-sidebar-right-collapse'; +import Link2 from '@cardstack/boxel-icons/link-2'; import LayoutSidebarRightExpand from '@cardstack/boxel-icons/layout-sidebar-right-expand'; import MessageSquare from '@cardstack/boxel-icons/message-square'; import Settings from '@cardstack/boxel-icons/settings'; @@ -1188,7 +1189,11 @@ export class Issue extends CardDef { 'A dependency is blocked — this issue cannot proceed until it unblocks' }} > - + {{#if this.hasBlockedDependency}} + + {{else}} + + {{/if}} {{this.dependencyLabel}}