feat: Refactor OnCallDutyScheduleElement and SchedulesElement for improved schedule handling and navigation

Dashboard/src/Components/OnCallDutySchedule/ScheduleElement.tsx

@@ -1,42 +1,98 @@
+import OnCallDutySchedule from "Common/Models/DatabaseModels/OnCallDutyPolicySchedule";
+import BaseModel from "Common/Models/DatabaseModels/DatabaseBaseModel/DatabaseBaseModel";
+import { JSONObject } from "Common/Types/JSON";
+import JSONFunctions from "Common/Types/JSONFunctions";
+import Icon from "Common/UI/Components/Icon/Icon";
+import IconProp from "Common/Types/Icon/IconProp";
 import Route from "Common/Types/API/Route";
 import AppLink from "../AppLink/AppLink";
-import OnCallDutySchedule from "Common/Models/DatabaseModels/OnCallDutyPolicySchedule";
 import React, { FunctionComponent, ReactElement } from "react";
 
 export interface ComponentProps {
-  schedule: OnCallDutySchedule;
+  schedule?: OnCallDutySchedule | JSONObject | undefined | null;
+  prefix?: string | undefined;
+  suffix?: string | undefined;
+  suffixClassName?: string | undefined;
+  scheduleNameClassName?: string | undefined;
+  prefixClassName?: string | undefined;
   onNavigateComplete?: (() => void) | undefined;
 }
 
 const OnCallDutyScheduleElement: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
-  if (
-    props.schedule._id &&
-    (props.schedule.projectId ||
-      (props.schedule.project && props.schedule.project._id))
-  ) {
-    const projectId: string | undefined = props.schedule.projectId
-      ? props.schedule.projectId.toString()
-      : props.schedule.project
-        ? props.schedule.project._id
-        : "";
-    return (
-      <AppLink
-        onNavigateComplete={props.onNavigateComplete}
-        className="hover:underline"
-        to={
-          new Route(
-            `/dashboard/${projectId?.toString()}/on-call-duty/schedules/${props.schedule._id.toString()}`,
-          )
-        }
-      >
-        <span>{props.schedule.name}</span>
-      </AppLink>
-    );
+  let schedule: JSONObject | null | undefined = null;
+
+  if (props.schedule instanceof OnCallDutySchedule) {
+    schedule = BaseModel.toJSONObject(props.schedule, OnCallDutySchedule);
+  } else {
+    schedule = props.schedule;
   }
 
-  return <span>{props.schedule.name}</span>;
+  if (JSONFunctions.isEmptyObject(schedule)) {
+    return <></>;
+  }
+
+  if (schedule) {
+    const scheduleName: string =
+      (schedule["name"]?.toString() as string) || "On-Call Schedule";
+
+    const scheduleId: string | undefined =
+      schedule["_id"]?.toString() || schedule["id"]?.toString();
+
+    const projectId: string | undefined =
+      schedule["projectId"]?.toString() ||
+      (schedule["project"] as JSONObject)?.["_id"]?.toString();
+
+    const content: ReactElement = (
+      <div className="flex">
+        <div className="h-8 w-8 rounded-full bg-indigo-100 flex items-center justify-center">
+          <Icon icon={IconProp.Calendar} className="h-4 w-4 text-indigo-600" />
+        </div>
+        <div className="mt-1 mr-1 ml-3">
+          <div>
+            <span
+              className={props.prefixClassName ? props.prefixClassName : ""}
+            >
+              {props.prefix}
+            </span>{" "}
+            <span
+              className={
+                props.scheduleNameClassName ? props.scheduleNameClassName : ""
+              }
+            >
+              {scheduleName}
+            </span>{" "}
+          </div>
+        </div>
+        {props.suffix && (
+          <div>
+            <p className={props.suffixClassName}>{props.suffix}</p>
+          </div>
+        )}
+      </div>
+    );
+
+    if (scheduleId && projectId) {
+      return (
+        <AppLink
+          onNavigateComplete={props.onNavigateComplete}
+          className="hover:underline"
+          to={
+            new Route(
+              `/dashboard/${projectId}/on-call-duty/schedules/${scheduleId}`,
+            )
+          }
+        >
+          {content}
+        </AppLink>
+      );
+    }
+
+    return content;
+  }
+
+  return <></>;
 };
 
 export default OnCallDutyScheduleElement;

Dashboard/src/Components/OnCallDutySchedule/SchedulesElement.tsx

@@ -4,7 +4,6 @@ import React, { FunctionComponent, ReactElement } from "react";
 
 export interface ComponentProps {
   schedules: Array<OnCallDutySchedule>;
-  onNavigateComplete?: (() => void) | undefined;
 }
 
 const OnCallDutySchedulesElement: FunctionComponent<ComponentProps> = (
@@ -19,10 +18,7 @@ const OnCallDutySchedulesElement: FunctionComponent<ComponentProps> = (
       {props.schedules.map((schedule: OnCallDutySchedule, i: number) => {
         return (
           <span key={i}>
-            <OnCallDutyScheduleElement
-              schedule={schedule}
-              onNavigateComplete={props.onNavigateComplete}
-            />
+            <OnCallDutyScheduleElement schedule={schedule} />
             {i !== props.schedules.length - 1 && <span>,&nbsp;</span>}
           </span>
         );

Dashboard/src/Pages/OnCallDuty/IncomingCallPolicy/Escalation.tsx

@@ -11,6 +11,7 @@ import FormFieldSchemaType from "Common/UI/Components/Forms/Types/FormFieldSchem
 import FormValues from "Common/UI/Components/Forms/Types/FormValues";
 import FieldType from "Common/UI/Components/Types/FieldType";
 import UserElement from "../../../Components/User/User";
+import OnCallDutyScheduleElement from "../../../Components/OnCallDutySchedule/ScheduleElement";
 import BadDataException from "Common/Types/Exception/BadDataException";
 import ProjectUtil from "Common/UI/Utils/Project";
 import SortOrder from "Common/Types/BaseDatabase/SortOrder";
@@ -250,7 +251,9 @@ const IncomingCallPolicyEscalationPage: FunctionComponent<
           {
             field: {
               onCallDutyPolicySchedule: {
+                _id: true,
                 name: true,
+                projectId: true,
               },
             },
             title: "On-Call Schedule",
@@ -260,8 +263,12 @@ const IncomingCallPolicyEscalationPage: FunctionComponent<
             getElement: (
               item: IncomingCallPolicyEscalationRule,
             ): ReactElement => {
-              if (item.onCallDutyPolicySchedule?.name) {
-                return <span>{item.onCallDutyPolicySchedule.name}</span>;
+              if (item.onCallDutyPolicySchedule) {
+                return (
+                  <OnCallDutyScheduleElement
+                    schedule={item.onCallDutyPolicySchedule}
+                  />
+                );
               }
               return <></>;
             },