@oneuptime/common 9.4.13 → 9.5.0

package/Tests/Server/Services/AlertGroupingEngineService.test.ts

@@ -461,8 +461,9 @@ describe("Template Variable Replacement Logic", () => {
 
   describe("Default Title Generation", () => {
     test("should use monitor name when no template provided", () => {
-      const defaultTitle: string = `Alert Episode: ${mockAlert.monitor?.name || mockAlert.title || "Alert Episode"}`;
-      expect(defaultTitle).toBe("Alert Episode: API Server");
+      const defaultTitle: string =
+        mockAlert.monitor?.name || mockAlert.title || "Untitled Episode";
+      expect(defaultTitle).toBe("API Server");
     });
 
     test("should use alert title when no monitor", () => {
@@ -473,8 +474,11 @@ describe("Template Variable Replacement Logic", () => {
       alertNoMonitor.title = "High CPU Usage";
       // monitor is intentionally not set
 
-      const defaultTitle: string = `Alert Episode: ${alertNoMonitor.monitor?.name || alertNoMonitor.title || "Alert Episode"}`;
-      expect(defaultTitle).toBe("Alert Episode: High CPU Usage");
+      const defaultTitle: string =
+        alertNoMonitor.monitor?.name ||
+        alertNoMonitor.title ||
+        "Untitled Episode";
+      expect(defaultTitle).toBe("High CPU Usage");
     });
 
     test("should use generic title when no monitor and no alert title", () => {
@@ -484,8 +488,9 @@ describe("Template Variable Replacement Logic", () => {
       alertMinimal.id = alertId;
       // monitor and title are intentionally not set
 
-      const defaultTitle: string = `Alert Episode: ${alertMinimal.monitor?.name || alertMinimal.title || "Alert Episode"}`;
-      expect(defaultTitle).toBe("Alert Episode: Alert Episode");
+      const defaultTitle: string =
+        alertMinimal.monitor?.name || alertMinimal.title || "Untitled Episode";
+      expect(defaultTitle).toBe("Untitled Episode");
     });
   });
 });

package/Types/Email/EmailTemplateType.ts

@@ -36,6 +36,7 @@ enum EmailTemplateType {
   IncidentOwnerStateChanged = "IncidentOwnerStateChanged.hbs",
   IncidentOwnerNotePosted = "IncidentOwnerNotePosted.hbs",
   IncidentOwnerResourceCreated = "IncidentOwnerResourceCreated.hbs",
+  IncidentMemberAdded = "IncidentMemberAdded.hbs",
 
   AlertOwnerAdded = "AlertOwnerAdded.hbs",
   AlertOwnerStateChanged = "AlertOwnerStateChanged.hbs",

package/Types/Incident/IncidentSlaStatus.ts

@@ -0,0 +1,9 @@
+enum IncidentSlaStatus {
+  OnTrack = "On Track",
+  AtRisk = "At Risk",
+  ResponseBreached = "Response Breached",
+  ResolutionBreached = "Resolution Breached",
+  Met = "Met",
+}
+
+export default IncidentSlaStatus;

package/Types/Monitor/CriteriaAlert.ts

@@ -9,6 +9,9 @@ export interface CriteriaAlert {
   remediationNotes?: string | undefined;
   id: string;
   onCallPolicyIds?: Array<ObjectID> | undefined;
+  labelIds?: Array<ObjectID> | undefined;
+  ownerTeamIds?: Array<ObjectID> | undefined;
+  ownerUserIds?: Array<ObjectID> | undefined;
 }
 
 export const CriteriaAlertSchema: ZodSchema = Zod.object({
@@ -19,4 +22,7 @@ export const CriteriaAlertSchema: ZodSchema = Zod.object({
   remediationNotes: Zod.string().optional(),
   id: Zod.string(),
   onCallPolicyIds: Zod.array(Zod.any()).optional(),
+  labelIds: Zod.array(Zod.any()).optional(),
+  ownerTeamIds: Zod.array(Zod.any()).optional(),
+  ownerUserIds: Zod.array(Zod.any()).optional(),
 });

package/Types/Monitor/CriteriaIncident.ts

@@ -1,6 +1,11 @@
 import ObjectID from "../ObjectID";
 import Zod, { ZodSchema } from "../../Utils/Schema/Zod";
 
+export interface IncidentMemberRoleAssignment {
+  roleId: ObjectID;
+  userId: ObjectID;
+}
+
 export interface CriteriaIncident {
   title: string;
   description: string;
@@ -9,6 +14,10 @@ export interface CriteriaIncident {
   remediationNotes?: string | undefined;
   id: string;
   onCallPolicyIds?: Array<ObjectID> | undefined;
+  labelIds?: Array<ObjectID> | undefined;
+  ownerTeamIds?: Array<ObjectID> | undefined;
+  ownerUserIds?: Array<ObjectID> | undefined;
+  incidentMemberRoles?: Array<IncidentMemberRoleAssignment> | undefined;
 }
 
 export const CriteriaIncidentSchema: ZodSchema = Zod.object({
@@ -19,4 +28,13 @@ export const CriteriaIncidentSchema: ZodSchema = Zod.object({
   remediationNotes: Zod.string().optional(),
   id: Zod.string(),
   onCallPolicyIds: Zod.array(Zod.any()).optional(),
+  labelIds: Zod.array(Zod.any()).optional(),
+  ownerTeamIds: Zod.array(Zod.any()).optional(),
+  ownerUserIds: Zod.array(Zod.any()).optional(),
+  incidentMemberRoles: Zod.array(
+    Zod.object({
+      roleId: Zod.any(),
+      userId: Zod.any(),
+    }),
+  ).optional(),
 });

package/Types/NotificationRule/NotificationRuleType.ts

@@ -2,6 +2,7 @@ enum NotificationRuleType {
   ON_CALL_EXECUTED_INCIDENT = "When incident on-call policy is executed",
   ON_CALL_EXECUTED_ALERT = "When alert on-call policy is executed",
   ON_CALL_EXECUTED_ALERT_EPISODE = "When alert episode on-call policy is executed",
+  ON_CALL_EXECUTED_INCIDENT_EPISODE = "When incident episode on-call policy is executed",
   WHEN_USER_GOES_ON_CALL = "When user goes on call",
   WHEN_USER_GOES_OFF_CALL = "When user goes off call",
 }

package/Types/NotificationSetting/NotificationSettingEventType.ts

@@ -4,6 +4,7 @@ enum NotificationSettingEventType {
   SEND_INCIDENT_NOTE_POSTED_OWNER_NOTIFICATION = "Send incident note posted notification when I am the owner of the incident",
   SEND_INCIDENT_STATE_CHANGED_OWNER_NOTIFICATION = "Send incident state changed notification when I am the owner of the incident",
   SEND_INCIDENT_OWNER_ADDED_NOTIFICATION = "Send notification when I am added as a owner to the incident",
+  SEND_INCIDENT_MEMBER_ADDED_NOTIFICATION = "Send notification when I am assigned to an incident as a member",
 
   // Alerts
 

package/Types/Permission.ts

@@ -187,6 +187,21 @@ enum Permission {
   EditIncidentOwnerUser = "EditIncidentOwnerUser",
   ReadIncidentOwnerUser = "ReadIncidentOwnerUser",
 
+  CreateIncidentRole = "CreateIncidentRole",
+  DeleteIncidentRole = "DeleteIncidentRole",
+  EditIncidentRole = "EditIncidentRole",
+  ReadIncidentRole = "ReadIncidentRole",
+
+  CreateIncidentMember = "CreateIncidentMember",
+  DeleteIncidentMember = "DeleteIncidentMember",
+  EditIncidentMember = "EditIncidentMember",
+  ReadIncidentMember = "ReadIncidentMember",
+
+  CreateIncidentEpisodeRoleMember = "CreateIncidentEpisodeRoleMember",
+  DeleteIncidentEpisodeRoleMember = "DeleteIncidentEpisodeRoleMember",
+  EditIncidentEpisodeRoleMember = "EditIncidentEpisodeRoleMember",
+  ReadIncidentEpisodeRoleMember = "ReadIncidentEpisodeRoleMember",
+
   CreateIncidentTemplate = "CreateIncidentTemplate",
   DeleteIncidentTemplate = "DeleteIncidentTemplate",
   EditIncidentTemplate = "EditIncidentTemplate",
@@ -302,6 +317,11 @@ enum Permission {
   EditAlertCustomField = "EditAlertCustomField",
   ReadAlertCustomField = "ReadAlertCustomField",
 
+  CreateTeamMemberCustomField = "CreateTeamMemberCustomField",
+  DeleteTeamMemberCustomField = "DeleteTeamMemberCustomField",
+  EditTeamMemberCustomField = "EditTeamMemberCustomField",
+  ReadTeamMemberCustomField = "ReadTeamMemberCustomField",
+
   CreateProjectIncident = "CreateProjectIncident",
   DeleteProjectIncident = "DeleteProjectIncident",
   EditProjectIncident = "EditProjectIncident",
@@ -795,6 +815,21 @@ enum Permission {
   DeleteIncidentGroupingRule = "DeleteIncidentGroupingRule",
   EditIncidentGroupingRule = "EditIncidentGroupingRule",
   ReadIncidentGroupingRule = "ReadIncidentGroupingRule",
+
+  // Incident SLA Rule Permissions
+  CreateIncidentSlaRule = "CreateIncidentSlaRule",
+  DeleteIncidentSlaRule = "DeleteIncidentSlaRule",
+  EditIncidentSlaRule = "EditIncidentSlaRule",
+  ReadIncidentSlaRule = "ReadIncidentSlaRule",
+
+  // Incident SLA Permissions
+  CreateIncidentSla = "CreateIncidentSla",
+  DeleteIncidentSla = "DeleteIncidentSla",
+  EditIncidentSla = "EditIncidentSla",
+  ReadIncidentSla = "ReadIncidentSla",
+
+  // Read All Project Resources Permission - Grants read access to all project resources
+  ReadAllProjectResources = "ReadAllProjectResources",
 }
 
 export class PermissionHelper {
@@ -3374,6 +3409,39 @@ export class PermissionHelper {
         isAccessControlPermission: false,
       },
 
+      {
+        permission: Permission.CreateTeamMemberCustomField,
+        title: "Create Team Member Custom Field",
+        description:
+          "This permission can create Team Member Custom Field for this project.",
+        isAssignableToTenant: true,
+        isAccessControlPermission: false,
+      },
+      {
+        permission: Permission.DeleteTeamMemberCustomField,
+        title: "Delete Team Member Custom Field",
+        description:
+          "This permission can delete Team Member Custom Field of this project.",
+        isAssignableToTenant: true,
+        isAccessControlPermission: false,
+      },
+      {
+        permission: Permission.EditTeamMemberCustomField,
+        title: "Edit Team Member Custom Field",
+        description:
+          "This permission can edit Team Member Custom Field of this project.",
+        isAssignableToTenant: true,
+        isAccessControlPermission: false,
+      },
+      {
+        permission: Permission.ReadTeamMemberCustomField,
+        title: "Read Team Member Custom Field",
+        description:
+          "This permission can read Team Member Custom Field of this project.",
+        isAssignableToTenant: true,
+        isAccessControlPermission: false,
+      },
+
       {
         permission: Permission.CreateStatusPageCustomField,
         title: "Create Status Page Custom Field",
@@ -4326,6 +4394,103 @@ export class PermissionHelper {
         isAccessControlPermission: false,
       },
 
+      {
+        permission: Permission.CreateIncidentRole,
+        title: "Create Incident Role",
+        description:
+          "This permission can create Incident Roles for this project.",
+        isAssignableToTenant: true,
+        isAccessControlPermission: false,
+      },
+      {
+        permission: Permission.DeleteIncidentRole,
+        title: "Delete Incident Role",
+        description:
+          "This permission can delete Incident Roles of this project.",
+        isAssignableToTenant: true,
+        isAccessControlPermission: false,
+      },
+      {
+        permission: Permission.EditIncidentRole,
+        title: "Edit Incident Role",
+        description: "This permission can edit Incident Roles of this project.",
+        isAssignableToTenant: true,
+        isAccessControlPermission: false,
+      },
+      {
+        permission: Permission.ReadIncidentRole,
+        title: "Read Incident Role",
+        description: "This permission can read Incident Roles of this project.",
+        isAssignableToTenant: true,
+        isAccessControlPermission: false,
+      },
+
+      {
+        permission: Permission.CreateIncidentMember,
+        title: "Create Incident Member",
+        description:
+          "This permission can create Incident Members for this project.",
+        isAssignableToTenant: true,
+        isAccessControlPermission: false,
+      },
+      {
+        permission: Permission.DeleteIncidentMember,
+        title: "Delete Incident Member",
+        description:
+          "This permission can delete Incident Members of this project.",
+        isAssignableToTenant: true,
+        isAccessControlPermission: false,
+      },
+      {
+        permission: Permission.EditIncidentMember,
+        title: "Edit Incident Member",
+        description:
+          "This permission can edit Incident Members of this project.",
+        isAssignableToTenant: true,
+        isAccessControlPermission: false,
+      },
+      {
+        permission: Permission.ReadIncidentMember,
+        title: "Read Incident Member",
+        description:
+          "This permission can read Incident Members of this project.",
+        isAssignableToTenant: true,
+        isAccessControlPermission: false,
+      },
+
+      {
+        permission: Permission.CreateIncidentEpisodeRoleMember,
+        title: "Create Incident Episode Role Member",
+        description:
+          "This permission can create Incident Episode Role Members for this project.",
+        isAssignableToTenant: true,
+        isAccessControlPermission: false,
+      },
+      {
+        permission: Permission.DeleteIncidentEpisodeRoleMember,
+        title: "Delete Incident Episode Role Member",
+        description:
+          "This permission can delete Incident Episode Role Members of this project.",
+        isAssignableToTenant: true,
+        isAccessControlPermission: false,
+      },
+      {
+        permission: Permission.EditIncidentEpisodeRoleMember,
+        title: "Edit Incident Episode Role Member",
+        description:
+          "This permission can edit Incident Episode Role Members of this project.",
+        isAssignableToTenant: true,
+        isAccessControlPermission: false,
+      },
+      {
+        permission: Permission.ReadIncidentEpisodeRoleMember,
+        title: "Read Incident Episode Role Member",
+        description:
+          "This permission can read Incident Episode Role Members of this project.",
+        isAssignableToTenant: true,
+        isAccessControlPermission: false,
+      },
+
       {
         permission: Permission.CreateAlertOwnerUser,
         title: "Create Alert User Owner",
@@ -5637,6 +5802,84 @@ export class PermissionHelper {
         isAssignableToTenant: true,
         isAccessControlPermission: false,
       },
+
+      // Incident SLA Rule Permissions
+      {
+        permission: Permission.CreateIncidentSlaRule,
+        title: "Create Incident SLA Rule",
+        description:
+          "This permission can create Incident SLA Rules in this project.",
+        isAssignableToTenant: true,
+        isAccessControlPermission: false,
+      },
+      {
+        permission: Permission.DeleteIncidentSlaRule,
+        title: "Delete Incident SLA Rule",
+        description:
+          "This permission can delete Incident SLA Rules of this project.",
+        isAssignableToTenant: true,
+        isAccessControlPermission: false,
+      },
+      {
+        permission: Permission.EditIncidentSlaRule,
+        title: "Edit Incident SLA Rule",
+        description:
+          "This permission can edit Incident SLA Rules of this project.",
+        isAssignableToTenant: true,
+        isAccessControlPermission: false,
+      },
+      {
+        permission: Permission.ReadIncidentSlaRule,
+        title: "Read Incident SLA Rule",
+        description:
+          "This permission can read Incident SLA Rules of this project.",
+        isAssignableToTenant: true,
+        isAccessControlPermission: false,
+      },
+
+      // Incident SLA Permissions
+      {
+        permission: Permission.CreateIncidentSla,
+        title: "Create Incident SLA",
+        description:
+          "This permission can create Incident SLA records in this project.",
+        isAssignableToTenant: true,
+        isAccessControlPermission: false,
+      },
+      {
+        permission: Permission.DeleteIncidentSla,
+        title: "Delete Incident SLA",
+        description:
+          "This permission can delete Incident SLA records of this project.",
+        isAssignableToTenant: true,
+        isAccessControlPermission: false,
+      },
+      {
+        permission: Permission.EditIncidentSla,
+        title: "Edit Incident SLA",
+        description:
+          "This permission can edit Incident SLA records of this project.",
+        isAssignableToTenant: true,
+        isAccessControlPermission: false,
+      },
+      {
+        permission: Permission.ReadIncidentSla,
+        title: "Read Incident SLA",
+        description:
+          "This permission can read Incident SLA records of this project.",
+        isAssignableToTenant: true,
+        isAccessControlPermission: false,
+      },
+
+      // Read All Project Resources Permission
+      {
+        permission: Permission.ReadAllProjectResources,
+        title: "Read All Project Resources",
+        description:
+          "This permission grants read access to all resources in this project. Users with this permission can view all project data including monitors, incidents, alerts, status pages, on-call policies, and other project resources.",
+        isAssignableToTenant: true,
+        isAccessControlPermission: false,
+      },
     ];
 
     return permissions;

package/Types/WhatsApp/WhatsAppTemplates.ts

@@ -9,6 +9,7 @@ type TemplateIdsMap = {
   readonly IncidentNotePostedOwnerNotification: "oneuptime_incident_note_posted_owner_notification";
   readonly IncidentStateChangedOwnerNotification: "oneuptime_incident_state_change_owner_notification";
   readonly IncidentOwnerAddedNotification: "oneuptime_incident_owner_added_notification";
+  readonly IncidentMemberAddedNotification: "oneuptime_incident_member_added_notification";
   readonly AlertCreatedOwnerNotification: "oneuptime_alert_created_owner_notification";
   readonly AlertNotePostedOwnerNotification: "oneuptime_alert_note_posted_owner_notification";
   readonly AlertStateChangedOwnerNotification: "oneuptime_alert_state_changed_owner_notification";
@@ -58,6 +59,8 @@ const templateIds: TemplateIdsMap = {
   IncidentStateChangedOwnerNotification:
     "oneuptime_incident_state_change_owner_notification",
   IncidentOwnerAddedNotification: "oneuptime_incident_owner_added_notification",
+  IncidentMemberAddedNotification:
+    "oneuptime_incident_member_added_notification",
   AlertCreatedOwnerNotification: "oneuptime_alert_created_owner_notification",
   AlertNotePostedOwnerNotification:
     "oneuptime_alert_note_posted_owner_notification",
@@ -144,6 +147,7 @@ export const WhatsAppTemplateMessages: WhatsAppTemplateMessagesDefinition = {
   [WhatsAppTemplateIds.IncidentNotePostedOwnerNotification]: `A new note was posted on incident #{{incident_number}} ({{incident_title}}). Review the incident using {{incident_link}} on the OneUptime dashboard for more context.`,
   [WhatsAppTemplateIds.IncidentStateChangedOwnerNotification]: `Incident #{{incident_number}} ({{incident_title}}) state changed to {{incident_state}}. Track the incident status using {{incident_link}} on the OneUptime dashboard for more context.`,
   [WhatsAppTemplateIds.IncidentOwnerAddedNotification]: `You have been added as an owner of incident #{{incident_number}} ({{incident_title}}). Manage the incident using {{incident_link}} on the OneUptime dashboard.`,
+  [WhatsAppTemplateIds.IncidentMemberAddedNotification]: `You have been assigned as {{incident_role}} to incident #{{incident_number}} ({{incident_title}}). Manage the incident using {{incident_link}} on the OneUptime dashboard.`,
   [WhatsAppTemplateIds.AlertCreatedOwnerNotification]: `Alert #{{alert_number}} ({{alert_title}}) has been created for project {{project_name}}. View alert details using {{alert_link}} on the OneUptime dashboard `,
   [WhatsAppTemplateIds.AlertNotePostedOwnerNotification]: `A new note was posted on alert #{{alert_number}} ({{alert_title}}). Review the alert using {{alert_link}} on the OneUptime dashboard for updates.`,
   [WhatsAppTemplateIds.AlertStateChangedOwnerNotification]: `Alert #{{alert_number}} ({{alert_title}}) state changed to {{alert_state}}. Track the alert status using {{alert_link}} on the OneUptime dashboard to stay informed.`,
@@ -190,6 +194,7 @@ export const WhatsAppTemplateLanguage: Record<WhatsAppTemplateId, string> = {
   [WhatsAppTemplateIds.IncidentNotePostedOwnerNotification]: "en",
   [WhatsAppTemplateIds.IncidentStateChangedOwnerNotification]: "en",
   [WhatsAppTemplateIds.IncidentOwnerAddedNotification]: "en",
+  [WhatsAppTemplateIds.IncidentMemberAddedNotification]: "en",
   [WhatsAppTemplateIds.AlertCreatedOwnerNotification]: "en",
   [WhatsAppTemplateIds.AlertNotePostedOwnerNotification]: "en",
   [WhatsAppTemplateIds.AlertStateChangedOwnerNotification]: "en",

package/UI/Components/CollapsibleSection/CollapsibleSection.tsx

@@ -0,0 +1,153 @@
+import Icon from "../Icon/Icon";
+import IconProp from "../../../Types/Icon/IconProp";
+import React, {
+  FunctionComponent,
+  ReactElement,
+  useEffect,
+  useState,
+} from "react";
+
+export type CollapsibleSectionVariant = "default" | "card" | "bordered";
+
+export interface ComponentProps {
+  title: string;
+  description?: string | ReactElement | undefined;
+  children: ReactElement;
+  isCollapsed?: boolean | undefined;
+  onToggle?: ((isCollapsed: boolean) => void) | undefined;
+  badge?: string | ReactElement | undefined;
+  rightElement?: ReactElement | undefined;
+  className?: string | undefined;
+  headerClassName?: string | undefined;
+  variant?: CollapsibleSectionVariant | undefined;
+  defaultCollapsed?: boolean | undefined;
+}
+
+const CollapsibleSection: FunctionComponent<ComponentProps> = (
+  props: ComponentProps,
+): ReactElement => {
+  const [isCollapsed, setIsCollapsed] = useState<boolean>(
+    props.defaultCollapsed ?? props.isCollapsed ?? false,
+  );
+
+  useEffect(() => {
+    if (props.isCollapsed !== undefined) {
+      setIsCollapsed(props.isCollapsed);
+    }
+  }, [props.isCollapsed]);
+
+  const handleToggle: () => void = (): void => {
+    const newCollapsedState: boolean = !isCollapsed;
+    setIsCollapsed(newCollapsedState);
+    if (props.onToggle) {
+      props.onToggle(newCollapsedState);
+    }
+  };
+
+  const variant: CollapsibleSectionVariant = props.variant || "default";
+
+  const getContainerClassName: () => string = (): string => {
+    const baseClassName: string = props.className || "";
+
+    switch (variant) {
+      case "card":
+        return `bg-white border border-gray-200 rounded-lg shadow-sm overflow-hidden ${baseClassName}`;
+      case "bordered":
+        return `border border-gray-200 rounded-lg overflow-hidden ${baseClassName}`;
+      default:
+        return baseClassName;
+    }
+  };
+
+  const getHeaderClassName: () => string = (): string => {
+    const baseHeaderClassName: string = props.headerClassName || "";
+
+    switch (variant) {
+      case "card":
+        return `px-4 py-3 bg-gray-50 ${baseHeaderClassName}`;
+      case "bordered":
+        return `px-4 py-3 bg-gray-50 ${baseHeaderClassName}`;
+      default:
+        return `py-2 ${baseHeaderClassName}`;
+    }
+  };
+
+  const getContentClassName: () => string = (): string => {
+    switch (variant) {
+      case "card":
+        return "px-4 py-3";
+      case "bordered":
+        return "px-4 py-3";
+      default:
+        return "py-2";
+    }
+  };
+
+  return (
+    <div className={getContainerClassName()}>
+      <div
+        className={`flex items-center justify-between cursor-pointer select-none ${getHeaderClassName()}`}
+        onClick={handleToggle}
+        role="button"
+        tabIndex={0}
+        onKeyDown={(e: React.KeyboardEvent) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            handleToggle();
+          }
+        }}
+        aria-expanded={!isCollapsed}
+      >
+        <div className="flex items-center flex-1 min-w-0">
+          <Icon
+            icon={isCollapsed ? IconProp.ChevronRight : IconProp.ChevronDown}
+            className="w-4 h-4 text-gray-500 mr-2 flex-shrink-0 transition-transform duration-200"
+          />
+          <div className="flex-1 min-w-0">
+            <div className="flex items-center">
+              <span className="text-sm font-medium text-gray-900 truncate">
+                {props.title}
+              </span>
+              {isCollapsed && props.badge && (
+                <span className="ml-2 flex-shrink-0">
+                  {typeof props.badge === "string" ? (
+                    <span className="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-100 text-gray-600">
+                      {props.badge}
+                    </span>
+                  ) : (
+                    props.badge
+                  )}
+                </span>
+              )}
+            </div>
+            {props.description && !isCollapsed && (
+              <p className="text-xs text-gray-500 mt-0.5 truncate">
+                {props.description}
+              </p>
+            )}
+          </div>
+        </div>
+        {props.rightElement && (
+          <div
+            className="ml-2 flex-shrink-0"
+            onClick={(e: React.MouseEvent) => {
+              e.stopPropagation();
+            }}
+          >
+            {props.rightElement}
+          </div>
+        )}
+      </div>
+
+      <div
+        className={`transition-all duration-200 ease-in-out overflow-hidden ${
+          isCollapsed ? "max-h-0 opacity-0" : "max-h-[5000px] opacity-100"
+        }`}
+      >
+        <div className={getContentClassName()}>{props.children}</div>
+      </div>
+    </div>
+  );
+};
+
+export default CollapsibleSection;

package/UI/Components/CustomFields/CustomFieldsDetail.tsx

@@ -25,6 +25,7 @@ export interface ComponentProps {
   customFieldType: DatabaseBaseModelType;
   projectId: ObjectID;
   name: string;
+  isEditable?: boolean;
 }
 
 const CustomFieldsDetail: FunctionComponent<ComponentProps> = (
@@ -102,20 +103,26 @@ const CustomFieldsDetail: FunctionComponent<ComponentProps> = (
     await onLoad();
   }, []);
 
+  const isEditable: boolean = props.isEditable !== false;
+
   return (
     <Card
       title={props.title}
       description={props.description}
-      buttons={[
-        {
-          title: "Edit Fields",
-          buttonStyle: ButtonStyleType.NORMAL,
-          onClick: () => {
-            setShowModelForm(true);
-          },
-          icon: IconProp.Edit,
-        },
-      ]}
+      buttons={
+        isEditable
+          ? [
+              {
+                title: "Edit Fields",
+                buttonStyle: ButtonStyleType.NORMAL,
+                onClick: () => {
+                  setShowModelForm(true);
+                },
+                icon: IconProp.Edit,
+              },
+            ]
+          : []
+      }
     >
       <div className="border-t border-gray-200 px-4 py-5 sm:px-6 -m-6 -mt-2">
         {isLoading && !error && <ComponentLoader />}

package/UI/Components/Dropdown/Dropdown.tsx

@@ -672,6 +672,8 @@ const Dropdown: FunctionComponent<ComponentProps> = (
             };
           },
         }}
+        menuPortalTarget={document.body}
+        menuPosition="fixed"
         isClearable={true}
         isSearchable={true}
         placeholder={props.placeholder}