From 1ded4a69d47c28212297f51b0456a73ab6fbe63b Mon Sep 17 00:00:00 2001
From: Camiel van Schoonhoven <camiel.vanschoonhoven@shopify.com>
Date: Wed, 25 Mar 2026 13:50:19 -0700
Subject: [PATCH] chore: Add Artifact Deletion Warning

---
 .../TaskOverview/IOSection/IOSection.tsx      | 13 +++++++++++++
 src/utils/date.ts                             | 19 +++++++++++++++++++
 2 files changed, 32 insertions(+)

diff --git a/src/components/shared/ReactFlow/FlowCanvas/TaskNode/TaskOverview/IOSection/IOSection.tsx b/src/components/shared/ReactFlow/FlowCanvas/TaskNode/TaskOverview/IOSection/IOSection.tsx
index 151458b8d..09a8bf967 100644
--- a/src/components/shared/ReactFlow/FlowCanvas/TaskNode/TaskOverview/IOSection/IOSection.tsx
+++ b/src/components/shared/ReactFlow/FlowCanvas/TaskNode/TaskOverview/IOSection/IOSection.tsx
@@ -5,9 +5,11 @@ import { BlockStack } from "@/components/ui/layout";
 import { Spinner } from "@/components/ui/spinner";
 import { Paragraph } from "@/components/ui/typography";
 import { useBackend } from "@/providers/BackendProvider";
+import { useExecutionData } from "@/providers/ExecutionDataProvider";
 import { getExecutionArtifacts } from "@/services/executionService";
 import { getBackendStatusString } from "@/utils/backend";
 import type { TaskSpec } from "@/utils/componentSpec";
+import { isOlderThanDays } from "@/utils/date";
 
 import IOExtras from "./IOExtras";
 import IOInputs from "./IOInputs";
@@ -21,6 +23,7 @@ interface IOSectionProps {
 
 const IOSection = ({ taskSpec, executionId, readOnly }: IOSectionProps) => {
   const { backendUrl, configured, available } = useBackend();
+  const { metadata } = useExecutionData();
 
   const {
     data: artifacts,
@@ -74,8 +77,18 @@ const IOSection = ({ taskSpec, executionId, readOnly }: IOSectionProps) => {
     ? ["inputs", "outputs", "other"]
     : ["outputs", "inputs", "other"];
 
+  const isOlderThan30Days =
+    metadata?.created_at && isOlderThanDays(metadata.created_at, 30);
+
   return (
     <BlockStack gap="4" className="w-full">
+      {isOlderThan30Days && (
+        <InfoBox title="Artifact Storage" variant="warning">
+          Remote artifacts may be unavailable for runs older than 30 days. To
+          keep an artifact, download it using the provided link before it
+          expires.
+        </InfoBox>
+      )}
       {order.map((section) => {
         if (section === "inputs") {
           return (
diff --git a/src/utils/date.ts b/src/utils/date.ts
index 37a82e785..68a3420ab 100644
--- a/src/utils/date.ts
+++ b/src/utils/date.ts
@@ -76,6 +76,25 @@ export const formatDuration = (startTime: string, endTime: string): string => {
   }
 };
 
+/**
+ * Check whether a date is older than a given number of calendar days ago.
+ * @param date - Date string or object to check
+ * @param days - Number of calendar days to compare against
+ * @returns True if the date is older than the specified number of days, false otherwise
+ */
+export const isOlderThanDays = (date: string | Date, days: number): boolean => {
+  const today = new Date();
+  today.setHours(0, 0, 0, 0);
+
+  const cutoff = new Date(today);
+  cutoff.setDate(cutoff.getDate() - days);
+
+  const target = new Date(date);
+  target.setHours(0, 0, 0, 0);
+
+  return target < cutoff;
+};
+
 /**
  * Format relative time between a past date and now
  * @param date - past timestamp string