feat: enhance DependencyBanner to support resolved dependencies and update display logic

This commit is contained in:
Abhimanyu Saharan
2026-02-13 15:57:27 +05:30
parent efa3587e77
commit 92c079410e
2 changed files with 62 additions and 9 deletions

View File

@@ -2239,6 +2239,28 @@ export default function BoardDetailPage() {
});
}, [openComments, selectedTask, taskById]);
const selectedTaskResolvedDependencies = useMemo<
DependencyBannerDependency[]
>(() => {
if (!selectedTask) return [];
return tasks
.filter((task) => task.depends_on_task_ids?.includes(selectedTask.id))
.map((task) => {
const statusLabel = task.status ? task.status.replace(/_/g, " ") : "unknown";
return {
id: task.id,
title: task.title,
statusLabel,
isBlocking: false,
isDone: task.status === "done",
onClick: () => {
openComments({ id: task.id });
},
disabled: false,
};
});
}, [openComments, selectedTask, tasks]);
useEffect(() => {
if (!taskIdFromUrl) return;
if (openedTaskIdFromUrlRef.current === taskIdFromUrl) return;
@@ -3410,15 +3432,44 @@ export default function BoardDetailPage() {
<p className="text-xs font-semibold uppercase tracking-wider text-slate-500">
Dependencies
</p>
<DependencyBanner
dependencies={selectedTaskDependencies}
emptyMessage="No dependencies."
>
{selectedTask?.is_blocked
? "Blocked by incomplete dependencies."
: null}
</DependencyBanner>
</div>
{(() => {
const hasDependencies =
(selectedTask?.depends_on_task_ids?.length ?? 0) > 0;
const hasResolvedDependencies =
selectedTaskResolvedDependencies.length > 0;
const isDependencyModeBlocked = hasDependencies
? selectedTask?.is_blocked === true
: false;
const bannerVariant =
hasDependencies || hasResolvedDependencies
? isDependencyModeBlocked
? "blocked"
: "resolved"
: "blocked";
const displayedDependencies =
hasDependencies && selectedTask
? selectedTaskDependencies
: selectedTaskResolvedDependencies;
const childrenMessage =
hasDependencies && selectedTask?.is_blocked
? "Blocked by incomplete dependencies."
: hasDependencies
? "Dependencies resolved."
: hasResolvedDependencies
? "This task resolves these tasks."
: null;
return (
<DependencyBanner
dependencies={displayedDependencies}
variant={bannerVariant}
emptyMessage="No dependencies."
>
{childrenMessage}
</DependencyBanner>
);
})()}
</div>
<div className="space-y-3">
<div className="flex items-center justify-between">
<p className="text-xs font-semibold uppercase tracking-wider text-slate-500">

View File

@@ -20,6 +20,8 @@ interface DependencyBannerProps {
emptyMessage?: string;
}
type DependencyBannerVariant = "blocked" | "resolved";
const toneClassByVariant: Record<DependencyBannerVariant, string> = {
blocked: "border-rose-200 bg-rose-50 text-rose-700",
resolved: "border-blue-200 bg-blue-50 text-blue-700",