From 2030000541b3cf60aab1e46f4eb8ada887497395 Mon Sep 17 00:00:00 2001
From: Aditya Thebe <contact@adityathebe.com>
Date: Mon, 10 Feb 2025 20:43:03 +0545
Subject: [PATCH] feat: add indefinitely option to duration picker

---
 src/api/services/notifications.ts                     |  4 ++++
 src/api/types/notifications.ts                        |  4 ++--
 .../Notifications/SilenceNotificationsList.tsx        |  1 +
 src/ui/Age/Age.tsx                                    | 11 ++++++++---
 src/ui/Dates/TimeRangePicker/TimeRangePicker.tsx      |  5 +++++
 src/ui/Dates/TimeRangePicker/rangeOptions.ts          |  5 +++++
 6 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/src/api/services/notifications.ts b/src/api/services/notifications.ts
index b3b959580..729293ae9 100644
--- a/src/api/services/notifications.ts
+++ b/src/api/services/notifications.ts
@@ -94,6 +94,10 @@ export const silenceNotification = async (
 export const updateNotificationSilence = async (
   data: Omit<NotificationSilenceItem, "created_at">
 ) => {
+  if (data.until === "indefinitely") {
+    data["until"] = null;
+  }
+
   const res = await IncidentCommander.patch(
     `/notification_silences?id=eq.${data.id}`,
     data
diff --git a/src/api/types/notifications.ts b/src/api/types/notifications.ts
index 40cd401f9..ec760ebd2 100644
--- a/src/api/types/notifications.ts
+++ b/src/api/types/notifications.ts
@@ -53,7 +53,7 @@ export type SilenceNotificationResponse = {
   check_id?: string;
   canary_id?: string;
   from: string;
-  until: string;
+  until: string | null;
   description?: string;
   recursive?: boolean;
   namespace?: string;
@@ -94,7 +94,7 @@ export type NotificationSilenceItem = {
   filter?: string;
   error?: string;
   from: string;
-  until: string;
+  until: string | null;
   recursive?: boolean;
   config_id?: string;
   check_id?: string;
diff --git a/src/components/Notifications/SilenceNotificationsList.tsx b/src/components/Notifications/SilenceNotificationsList.tsx
index d8bda909f..584929682 100644
--- a/src/components/Notifications/SilenceNotificationsList.tsx
+++ b/src/components/Notifications/SilenceNotificationsList.tsx
@@ -48,6 +48,7 @@ const silenceNotificationListColumns: MRT_ColumnDef<NotificationSilenceItemApiRe
               className={clsx(isExpired && "line-through")}
               from={from}
               to={until}
+              displayType={"duration"}
             ></Age>
             {isExpired && <span className="pl-1 text-red-500">Expired</span>}
           </span>
diff --git a/src/ui/Age/Age.tsx b/src/ui/Age/Age.tsx
index f9ea04b70..381995514 100644
--- a/src/ui/Age/Age.tsx
+++ b/src/ui/Age/Age.tsx
@@ -13,15 +13,18 @@ dayjs.extend(LocalizedFormat);
 type AgeProps = {
   className?: string;
   from?: Date | string;
-  to?: Date | string;
+  to?: Date | string | null;
   suffix?: boolean;
+  // duration handles null "to" time differently.
+  displayType?: "age" | "duration";
 };
 
 export default function Age({
   className = "",
   from,
   to,
-  suffix = false
+  suffix = false,
+  displayType = "age"
 }: AgeProps) {
   if (isEmpty(from)) {
     return null;
@@ -36,7 +39,9 @@ export default function Age({
           data-tooltip-id={`age-tooltip-${_from.local().fromNow(!suffix)}`}
           className={className}
         >
-          {_from.local().fromNow(!suffix)}
+          {displayType === "duration"
+            ? "Indefinitely"
+            : _from.local().fromNow(!suffix)}
         </span>
         <Tooltip
           id={`age-tooltip-${_from.local().fromNow(!suffix)}`}
diff --git a/src/ui/Dates/TimeRangePicker/TimeRangePicker.tsx b/src/ui/Dates/TimeRangePicker/TimeRangePicker.tsx
index 52f91ecc0..0e9f21a42 100644
--- a/src/ui/Dates/TimeRangePicker/TimeRangePicker.tsx
+++ b/src/ui/Dates/TimeRangePicker/TimeRangePicker.tsx
@@ -37,6 +37,11 @@ export function TimeRangePicker({
     if (currentRange?.type === "absolute") {
       return `${currentRange.from} - ${currentRange.to}`;
     }
+
+    if (!currentRange?.display) {
+      return "Indefinitely";
+    }
+
     return currentRange?.display;
   }, [currentRange]);
 
diff --git a/src/ui/Dates/TimeRangePicker/rangeOptions.ts b/src/ui/Dates/TimeRangePicker/rangeOptions.ts
index b49138850..a2ea70018 100644
--- a/src/ui/Dates/TimeRangePicker/rangeOptions.ts
+++ b/src/ui/Dates/TimeRangePicker/rangeOptions.ts
@@ -120,6 +120,11 @@ export const rangeOptionsCategories: RangeOptionsCategory[] = [
     name: "Relative time ranges",
     type: "future",
     options: [
+      {
+        type: "relative",
+        display: "Indefinitely",
+        range: "indefinitely"
+      },
       {
         type: "relative",
         display: "5 minutes",