feat: rename Delivery to Attempt in UI components

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Author: alexluong

…ryDeliveryButton/RetryDeliveryButton.tsx …etryAttemptButton/RetryAttemptButton.tsxinternal/portal/src/common/RetryDeliveryButton/RetryDeliveryButton.tsx renamed to internal/portal/src/common/RetryAttemptButton/RetryAttemptButton.tsx internal/portal/src/common/RetryDeliveryButton/RetryDeliveryButton.tsx renamed to internal/portal/src/common/RetryAttemptButton/RetryAttemptButton.tsx

@@ -4,17 +4,17 @@ import { ReplayIcon } from "../Icons";
 import { showToast } from "../Toast/Toast";
 import { ApiContext, formatError } from "../../app";
 
-interface RetryDeliveryButtonProps {
-  deliveryId: string;
+interface RetryAttemptButtonProps {
+  attemptId: string;
   disabled: boolean;
   loading: boolean;
   completed: (success: boolean) => void;
   icon?: boolean;
   iconLabel?: string;
 }
 
-const RetryDeliveryButton: React.FC<RetryDeliveryButtonProps> = ({
-  deliveryId,
+const RetryAttemptButton: React.FC<RetryAttemptButtonProps> = ({
+  attemptId,
   disabled,
   loading,
   completed,
@@ -24,12 +24,12 @@ const RetryDeliveryButton: React.FC<RetryDeliveryButtonProps> = ({
   const apiClient = useContext(ApiContext);
   const [retrying, setRetrying] = useState<boolean>(false);
 
-  const retryDelivery = useCallback(
+  const retryAttempt = useCallback(
     async (e: MouseEvent<HTMLButtonElement>) => {
       e.stopPropagation();
       setRetrying(true);
       try {
-        await apiClient.fetch(`deliveries/${deliveryId}/retry`, {
+        await apiClient.fetch(`attempts/${attemptId}/retry`, {
           method: "POST",
         });
         showToast("success", "Retry successful.");
@@ -41,15 +41,15 @@ const RetryDeliveryButton: React.FC<RetryDeliveryButtonProps> = ({
 
       setRetrying(false);
     },
-    [apiClient, deliveryId, completed],
+    [apiClient, attemptId, completed],
   );
 
   return (
     <Button
       minimal
       icon={icon}
       iconLabel={iconLabel}
-      onClick={(e) => retryDelivery(e)}
+      onClick={(e) => retryAttempt(e)}
       disabled={disabled || retrying}
       loading={loading || retrying}
     >
@@ -58,4 +58,4 @@ const RetryDeliveryButton: React.FC<RetryDeliveryButtonProps> = ({
   );
 };
 
-export default RetryDeliveryButton;
+export default RetryAttemptButton;

internal/portal/src/scenes/Destination/Destination.tsx

@@ -14,7 +14,7 @@ import {
 } from "../../typings/Destination";
 import getLogo from "../../utils/logo";
 import DestinationSettings from "./DestinationSettings/DestinationSettings";
-import { DeliveryRoutes } from "./Events/Deliveries";
+import { AttemptRoutes } from "./Events/Attempts";
 
 // Define the tab interface
 interface Tab {
@@ -26,7 +26,7 @@ interface Tab {
 const tabs: Tab[] = [
   { label: "Overview", path: "" },
   { label: "Settings", path: "/settings" },
-  { label: "Deliveries", path: "/deliveries" },
+  { label: "Attempts", path: "/attempts" },
 ];
 
 const Destination = () => {
@@ -133,8 +133,8 @@ const Destination = () => {
               }
             />
             <Route
-              path="/deliveries/*"
-              element={<DeliveryRoutes destination={destination} />}
+              path="/attempts/*"
+              element={<AttemptRoutes destination={destination} />}
             />
             <Route
               path="/"

…s/Destination/Events/DeliveryDetails.tsx …es/Destination/Events/AttemptDetails.tsxinternal/portal/src/scenes/Destination/Events/DeliveryDetails.tsx renamed to internal/portal/src/scenes/Destination/Events/AttemptDetails.tsx internal/portal/src/scenes/Destination/Events/DeliveryDetails.tsx renamed to internal/portal/src/scenes/Destination/Events/AttemptDetails.tsx

@@ -2,38 +2,38 @@ import { useParams } from "react-router-dom";
 import Button from "../../../common/Button/Button";
 import { CloseIcon } from "../../../common/Icons";
 import useSWR from "swr";
-import { Delivery, EventFull } from "../../../typings/Event";
+import { Attempt, EventFull } from "../../../typings/Event";
 import Badge from "../../../common/Badge/Badge";
-import RetryDeliveryButton from "../../../common/RetryDeliveryButton/RetryDeliveryButton";
+import RetryAttemptButton from "../../../common/RetryAttemptButton/RetryAttemptButton";
 import { CopyButton } from "../../../common/CopyButton/CopyButton";
 
-const DeliveryDetails = ({
-  navigateDelivery,
+const AttemptDetails = ({
+  navigateAttempt,
 }: {
-  navigateDelivery: (path: string, params?: any) => void;
+  navigateAttempt: (path: string, params?: any) => void;
 }) => {
-  const { delivery_id: deliveryId } = useParams();
+  const { attempt_id: attemptId } = useParams();
 
-  const { data: delivery } = useSWR<Delivery>(
-    `deliveries/${deliveryId}?include=event.data,response_data`,
+  const { data: attempt } = useSWR<Attempt>(
+    `attempts/${attemptId}?include=event.data,response_data`,
   );
 
-  if (!delivery) {
+  if (!attempt) {
     return <div>Loading...</div>;
   }
 
   const event =
-    typeof delivery.event === "object" ? (delivery.event as EventFull) : null;
+    typeof attempt.event === "object" ? (attempt.event as EventFull) : null;
 
   return (
     <div className="drawer">
       <div className="drawer__header">
         <h3 className="drawer__header-title mono-s">
-          {event?.topic || "Delivery"}
+          {event?.topic || "Attempt"}
         </h3>
         <div className="drawer__header-actions">
-          <RetryDeliveryButton
-            deliveryId={delivery.id}
+          <RetryAttemptButton
+            attemptId={attempt.id}
             disabled={false}
             loading={false}
             completed={() => {}}
@@ -45,38 +45,38 @@ const DeliveryDetails = ({
             icon
             iconLabel="Close"
             minimal
-            onClick={() => navigateDelivery("/")}
+            onClick={() => navigateAttempt("/")}
           >
             <CloseIcon />
           </Button>
         </div>
       </div>
 
       <div className="drawer__body">
-        <div className="delivery-data">
-          <div className="delivery-data__section">
+        <div className="attempt-data">
+          <div className="attempt-data__section">
             <dl className="body-m description-list">
               <div>
                 <dt>Status</dt>
                 <dd>
                   <Badge
                     text={
-                      delivery.status === "success" ? "Successful" : "Failed"
+                      attempt.status === "success" ? "Successful" : "Failed"
                     }
-                    success={delivery.status === "success"}
-                    danger={delivery.status === "failed"}
+                    success={attempt.status === "success"}
+                    danger={attempt.status === "failed"}
                   />
                 </dd>
               </div>
-              {delivery.code && (
+              {attempt.code && (
                 <div>
                   <dt>Response Code</dt>
-                  <dd className="mono-s">{delivery.code}</dd>
+                  <dd className="mono-s">{attempt.code}</dd>
                 </div>
               )}
               <div>
                 <dt>Attempt</dt>
-                <dd className="mono-s">{delivery.attempt}</dd>
+                <dd className="mono-s">{attempt.attempt}</dd>
               </div>
               {event && (
                 <div>
@@ -87,7 +87,7 @@ const DeliveryDetails = ({
               <div>
                 <dt>Delivered at</dt>
                 <dd className="mono-s time">
-                  {new Date(delivery.delivered_at).toLocaleString("en-US", {
+                  {new Date(attempt.delivered_at).toLocaleString("en-US", {
                     year: "numeric",
                     month: "numeric",
                     day: "numeric",
@@ -99,10 +99,10 @@ const DeliveryDetails = ({
                 </dd>
               </div>
               <div>
-                <dt>Delivery ID</dt>
+                <dt>Attempt ID</dt>
                 <dd className="mono-s id-field">
-                  <span>{delivery.id}</span>
-                  <CopyButton value={delivery.id} />
+                  <span>{attempt.id}</span>
+                  <CopyButton value={attempt.id} />
                 </dd>
               </div>
               {event && (
@@ -118,7 +118,7 @@ const DeliveryDetails = ({
           </div>
 
           {event?.data && (
-            <div className="delivery-data__section">
+            <div className="attempt-data__section">
               <h3 className="subtitle-m">Data</h3>
               <pre className="mono-s">
                 {JSON.stringify(event.data, null, 2)}
@@ -127,19 +127,19 @@ const DeliveryDetails = ({
           )}
 
           {event?.metadata && Object.keys(event.metadata).length > 0 && (
-            <div className="delivery-data__section">
+            <div className="attempt-data__section">
               <h3 className="subtitle-m">Metadata</h3>
               <pre className="mono-s">
                 {JSON.stringify(event.metadata, null, 2)}
               </pre>
             </div>
           )}
 
-          {delivery.response_data && (
-            <div className="delivery-data__section">
+          {attempt.response_data && (
+            <div className="attempt-data__section">
               <h3 className="subtitle-m">Response</h3>
               <pre className="mono-s">
-                {JSON.stringify(delivery.response_data, null, 2)}
+                {JSON.stringify(attempt.response_data, null, 2)}
               </pre>
             </div>
           )}
@@ -149,4 +149,4 @@ const DeliveryDetails = ({
   );
 };
 
-export default DeliveryDetails;
+export default AttemptDetails;

…cenes/Destination/Events/Deliveries.scss …/scenes/Destination/Events/Attempts.scssinternal/portal/src/scenes/Destination/Events/Deliveries.scss renamed to internal/portal/src/scenes/Destination/Events/Attempts.scss internal/portal/src/scenes/Destination/Events/Deliveries.scss renamed to internal/portal/src/scenes/Destination/Events/Attempts.scss

@@ -1,4 +1,4 @@
-.destination-deliveries {
+.destination-attempts {
   margin-top: var(--spacing-5);
   margin-bottom: var(--spacing-20);
 
@@ -32,7 +32,7 @@
     display: grid;
     min-height: 713px;
 
-    .delivery-time-cell {
+    .attempt-time-cell {
       text-transform: uppercase;
     }
 
@@ -117,7 +117,7 @@
   }
 }
 
-.delivery-data {
+.attempt-data {
   height: 100%;
   box-sizing: border-box;