@oneuptime/common 9.4.13 → 9.5.1

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}

package/UI/Components/Forms/Fields/FormField.tsx

@@ -18,6 +18,7 @@ import RadioButtons from "../../RadioButtons/GroupRadioButtons";
 import TextArea from "../../TextArea/TextArea";
 import Toggle from "../../Toggle/Toggle";
 import ColorPicker from "../Fields/ColorPicker";
+import IconPicker from "../Fields/IconPicker";
 import FieldLabelElement from "../Fields/FieldLabel";
 import Field, { FormFieldStyleType } from "../Types/Field";
 import FormFieldSchemaType from "../Types/FormFieldSchemaType";
@@ -25,6 +26,7 @@ import FormValues from "../Types/FormValues";
 import FileModel from "../../../../Models/DatabaseModels/DatabaseBaseModel/FileModel";
 import CodeType from "../../../../Types/Code/CodeType";
 import Color from "../../../../Types/Color";
+import IconProp from "../../../../Types/Icon/IconProp";
 import OneUptimeDate from "../../../../Types/Date";
 import BadDataException from "../../../../Types/Exception/BadDataException";
 import MimeType from "../../../../Types/File/MimeType";
@@ -358,6 +360,26 @@ const FormField: <T extends GenericObject>(
             />
           )}
 
+          {props.field.fieldType === FormFieldSchemaType.Icon && (
+            <IconPicker
+              error={props.touched && props.error ? props.error : undefined}
+              dataTestId={props.field.dataTestId}
+              onChange={async (value: IconProp | null) => {
+                onChange(value);
+                props.setFieldValue(props.fieldName, value);
+                props.setFieldTouched(props.fieldName, true);
+              }}
+              tabIndex={index}
+              placeholder={props.field.placeholder || ""}
+              initialValue={
+                props.currentValues &&
+                (props.currentValues as any)[props.fieldName]
+                  ? (props.currentValues as any)[props.fieldName]
+                  : undefined
+              }
+            />
+          )}
+
           {(props.field.fieldType === FormFieldSchemaType.Dropdown ||
             props.field.fieldType ===
               FormFieldSchemaType.MultiSelectDropdown) && (

package/UI/Components/Forms/Fields/IconPicker.tsx

@@ -0,0 +1,175 @@
+import useComponentOutsideClick from "../../../Types/UseComponentOutsideClick";
+import Icon from "../../Icon/Icon";
+import Input, { InputType } from "../../Input/Input";
+import IconProp from "../../../../Types/Icon/IconProp";
+import React, {
+  FunctionComponent,
+  ReactElement,
+  useEffect,
+  useState,
+} from "react";
+
+export interface ComponentProps {
+  onChange: (value: IconProp | null) => void;
+  initialValue?: undefined | IconProp;
+  placeholder: string;
+  onFocus?: (() => void) | undefined;
+  tabIndex?: number | undefined;
+  value?: string | undefined;
+  readOnly?: boolean | undefined;
+  disabled?: boolean | undefined;
+  onBlur?: (() => void) | undefined;
+  dataTestId?: string | undefined;
+  onEnterPress?: (() => void) | undefined;
+  error?: string | undefined;
+}
+
+const IconPicker: FunctionComponent<ComponentProps> = (
+  props: ComponentProps,
+): ReactElement => {
+  const [selectedIcon, setSelectedIcon] = useState<IconProp | null>(null);
+  const [searchQuery, setSearchQuery] = useState<string>("");
+  const { ref, isComponentVisible, setIsComponentVisible } =
+    useComponentOutsideClick(false);
+
+  const [isInitialValuesInitialized, setIsInitialValuesInitialized] =
+    useState<boolean>(false);
+
+  useEffect(() => {
+    if (props.initialValue && !isInitialValuesInitialized) {
+      setSelectedIcon(props.initialValue);
+      setIsInitialValuesInitialized(true);
+    }
+  }, [props.initialValue]);
+
+  type HandleChangeFunction = (icon: IconProp | null) => void;
+
+  const handleChange: HandleChangeFunction = (icon: IconProp | null): void => {
+    setSelectedIcon(icon);
+    props.onChange(icon);
+    setIsComponentVisible(false);
+  };
+
+  // Get all icons from IconProp enum
+  const allIcons: Array<IconProp> = Object.values(IconProp);
+
+  // Filter icons based on search query
+  const filteredIcons: Array<IconProp> = allIcons.filter((icon: IconProp) => {
+    return icon.toLowerCase().includes(searchQuery.toLowerCase());
+  });
+
+  return (
+    <div>
+      <div className="flex block w-full rounded-md border border-gray-300 bg-white py-2 pl-3 pr-3 text-sm placeholder-gray-500 focus:border-indigo-500 focus:text-gray-900 focus:placeholder-gray-400 focus:outline-none focus:ring-1 focus:ring-indigo-500 sm:text-sm">
+        <div
+          onClick={() => {
+            if (!props.readOnly && !props.disabled) {
+              setIsComponentVisible(!isComponentVisible);
+            }
+          }}
+          className="flex items-center justify-center h-5 w-5 cursor-pointer"
+        >
+          {selectedIcon ? (
+            <Icon icon={selectedIcon} className="h-5 w-5 text-gray-600" />
+          ) : (
+            <div className="h-5 w-5 border border-dashed border-gray-300 rounded"></div>
+          )}
+        </div>
+
+        <Input
+          onClick={() => {
+            if (!props.readOnly && !props.disabled) {
+              setIsComponentVisible(!isComponentVisible);
+            }
+          }}
+          disabled={props.disabled}
+          dataTestId={props.dataTestId}
+          onBlur={props.onBlur}
+          onEnterPress={props.onEnterPress}
+          className="border-none focus:outline-none w-full pl-2 text-gray-500 cursor-pointer"
+          outerDivClassName='className="border-none focus:outline-none w-full pl-2 text-gray-500 cursor-pointer"'
+          placeholder={props.placeholder}
+          value={selectedIcon || props.value || ""}
+          readOnly={true}
+          type={InputType.TEXT}
+          tabIndex={props.tabIndex}
+          onChange={() => {}}
+          onFocus={props.onFocus || undefined}
+        />
+        {selectedIcon && !props.disabled && (
+          <Icon
+            icon={IconProp.Close}
+            className="text-gray-400 h-5 w-5 cursor-pointer hover:text-gray-600"
+            onClick={() => {
+              setSelectedIcon(null);
+              props.onChange(null);
+            }}
+          />
+        )}
+        {isComponentVisible ? (
+          <div
+            ref={ref}
+            className="absolute z-50 mt-8 bg-white border border-gray-200 rounded-lg shadow-lg p-3"
+            style={{
+              width: "320px",
+              maxHeight: "400px",
+            }}
+          >
+            {/* Search input */}
+            <div className="mb-3">
+              <Input
+                type={InputType.TEXT}
+                placeholder="Search icons..."
+                value={searchQuery}
+                onChange={(value: string) => {
+                  setSearchQuery(value);
+                }}
+                className="w-full px-3 py-2 border border-gray-300 rounded-md text-sm"
+              />
+            </div>
+
+            {/* Icons grid */}
+            <div
+              className="grid grid-cols-6 gap-2 overflow-y-auto"
+              style={{ maxHeight: "300px" }}
+            >
+              {filteredIcons.map((icon: IconProp) => {
+                return (
+                  <div
+                    key={icon}
+                    onClick={() => {
+                      handleChange(icon);
+                    }}
+                    className={`flex items-center justify-center p-2 rounded cursor-pointer hover:bg-gray-100 ${
+                      selectedIcon === icon
+                        ? "bg-indigo-100 ring-2 ring-indigo-500"
+                        : ""
+                    }`}
+                    title={icon}
+                  >
+                    <Icon icon={icon} className="h-5 w-5 text-gray-600" />
+                  </div>
+                );
+              })}
+            </div>
+
+            {filteredIcons.length === 0 && (
+              <div className="text-center text-gray-500 py-4">
+                No icons found
+              </div>
+            )}
+          </div>
+        ) : (
+          <></>
+        )}
+      </div>
+      {props.error && (
+        <p data-testid="error-message" className="mt-1 text-sm text-red-400">
+          {props.error}
+        </p>
+      )}
+    </div>
+  );
+};
+
+export default IconPicker;

package/UI/Components/Forms/Types/FormFieldSchemaType.ts

@@ -37,6 +37,7 @@ enum FormFieldSchemaType {
   CategoryCheckbox = "CategoryCheckbox",
   Dictionary = "Dictionary",
   CardSelect = "CardSelect",
+  Icon = "Icon",
 }
 
 export default FormFieldSchemaType;

package/UI/Components/Forms/Utils/FormFieldSchemaTypeUtil.ts

@@ -76,6 +76,8 @@ export default class FormFieldSchemaTypeUtil {
         return FieldType.Boolean;
       case FormFieldSchemaType.CategoryCheckbox:
         return FieldType.Boolean;
+      case FormFieldSchemaType.Icon:
+        return FieldType.Icon;
 
       default:
         return FieldType.Text;

package/UI/Components/HeaderAlert/NotificationBell/NotificationBell.tsx

@@ -0,0 +1,96 @@
+import React, { ReactElement } from "react";
+import Icon from "../../Icon/Icon";
+import IconProp from "../../../../Types/Icon/IconProp";
+import useComponentOutsideClick from "../../../Types/UseComponentOutsideClick";
+import { NotificationItem } from "./NotificationItem";
+import NotificationBellDropdown from "./NotificationBellDropdown";
+import { HeaderAlertType } from "../HeaderAlert";
+
+export interface ComponentProps {
+  items: Array<NotificationItem>;
+  onItemClick: (item: NotificationItem) => void;
+}
+
+const NotificationBell: (props: ComponentProps) => ReactElement = (
+  props: ComponentProps,
+): ReactElement => {
+  const { ref, isComponentVisible, setIsComponentVisible } =
+    useComponentOutsideClick(false);
+
+  const itemsWithCount: Array<NotificationItem> = props.items.filter(
+    (item: NotificationItem) => {
+      return item.count > 0;
+    },
+  );
+
+  // Count items by type
+  const criticalItemsCount: number = itemsWithCount.filter(
+    (item: NotificationItem) => {
+      return item.alertType === HeaderAlertType.ERROR;
+    },
+  ).length;
+
+  const successItemsCount: number = itemsWithCount.filter(
+    (item: NotificationItem) => {
+      return item.alertType === HeaderAlertType.SUCCESS;
+    },
+  ).length;
+
+  const infoItemsCount: number = itemsWithCount.filter(
+    (item: NotificationItem) => {
+      return item.alertType === HeaderAlertType.INFO;
+    },
+  ).length;
+
+  // Determine badge count and color based on priority: Critical > Success > Info
+  let badgeCount: number = 0;
+  let badgeColor: string = "bg-gray-500";
+
+  if (criticalItemsCount > 0) {
+    badgeCount = criticalItemsCount;
+    badgeColor = "bg-red-500";
+  } else if (successItemsCount > 0) {
+    badgeCount = successItemsCount;
+    badgeColor = "bg-emerald-500";
+  } else if (infoItemsCount > 0) {
+    badgeCount = infoItemsCount;
+    badgeColor = "bg-gray-500";
+  }
+
+  return (
+    <div className="relative ml-4 flex-shrink-0" ref={ref}>
+      <button
+        type="button"
+        className="flex items-center justify-center h-9 w-9 rounded-lg bg-gray-50 border border-gray-200 hover:bg-gray-100 hover:border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-1 transition-all duration-150"
+        onClick={() => {
+          setIsComponentVisible(!isComponentVisible);
+        }}
+        aria-expanded={isComponentVisible}
+        aria-haspopup="true"
+      >
+        <span className="sr-only">View notifications</span>
+        <Icon className="h-5 w-5 text-gray-500" icon={IconProp.Bell} />
+      </button>
+
+      {badgeCount > 0 && (
+        <span
+          className={`absolute -top-1 -right-1 flex h-5 w-5 items-center justify-center rounded-full ${badgeColor} text-xs font-semibold text-white ring-2 ring-white`}
+        >
+          {badgeCount > 99 ? "99+" : badgeCount}
+        </span>
+      )}
+
+      {isComponentVisible && (
+        <NotificationBellDropdown
+          items={props.items}
+          onItemClick={(item: NotificationItem) => {
+            setIsComponentVisible(false);
+            props.onItemClick(item);
+          }}
+        />
+      )}
+    </div>
+  );
+};
+
+export default NotificationBell;

package/UI/Components/HeaderAlert/NotificationBell/NotificationBellDropdown.tsx

@@ -0,0 +1,112 @@
+import React, { ReactElement } from "react";
+import { NotificationItem } from "./NotificationItem";
+import NotificationBellItem from "./NotificationBellItem";
+import NotificationBellSection from "./NotificationBellSection";
+import { HeaderAlertType } from "../HeaderAlert";
+
+export interface ComponentProps {
+  items: Array<NotificationItem>;
+  onItemClick: (item: NotificationItem) => void;
+}
+
+const NotificationBellDropdown: (props: ComponentProps) => ReactElement = (
+  props: ComponentProps,
+): ReactElement => {
+  const errorItems: Array<NotificationItem> = props.items.filter(
+    (item: NotificationItem) => {
+      return item.alertType === HeaderAlertType.ERROR && item.count > 0;
+    },
+  );
+
+  const infoItems: Array<NotificationItem> = props.items.filter(
+    (item: NotificationItem) => {
+      return item.alertType === HeaderAlertType.INFO && item.count > 0;
+    },
+  );
+
+  const successItems: Array<NotificationItem> = props.items.filter(
+    (item: NotificationItem) => {
+      return item.alertType === HeaderAlertType.SUCCESS && item.count > 0;
+    },
+  );
+
+  const hasItems: boolean =
+    errorItems.length > 0 || infoItems.length > 0 || successItems.length > 0;
+
+  return (
+    <div className="absolute right-0 z-10 mt-2 w-80 rounded-xl bg-white shadow-lg ring-1 ring-gray-200 max-h-96 overflow-y-auto">
+      <div className="py-2">
+        <div className="px-4 py-2 border-b border-gray-100">
+          <span className="text-sm font-semibold text-gray-900">
+            Notifications
+          </span>
+        </div>
+
+        {!hasItems && (
+          <div className="px-4 py-6 text-center text-sm text-gray-500">
+            No notifications
+          </div>
+        )}
+
+        {errorItems.length > 0 && (
+          <NotificationBellSection
+            title="Critical"
+            alertType={HeaderAlertType.ERROR}
+          >
+            {errorItems.map((item: NotificationItem) => {
+              return (
+                <NotificationBellItem
+                  key={item.id}
+                  item={item}
+                  onClick={() => {
+                    props.onItemClick(item);
+                  }}
+                />
+              );
+            })}
+          </NotificationBellSection>
+        )}
+
+        {successItems.length > 0 && (
+          <NotificationBellSection
+            title="On-Call"
+            alertType={HeaderAlertType.SUCCESS}
+          >
+            {successItems.map((item: NotificationItem) => {
+              return (
+                <NotificationBellItem
+                  key={item.id}
+                  item={item}
+                  onClick={() => {
+                    props.onItemClick(item);
+                  }}
+                />
+              );
+            })}
+          </NotificationBellSection>
+        )}
+
+        {infoItems.length > 0 && (
+          <NotificationBellSection
+            title="Information"
+            alertType={HeaderAlertType.INFO}
+          >
+            {infoItems.map((item: NotificationItem) => {
+              return (
+                <NotificationBellItem
+                  key={item.id}
+                  item={item}
+                  onClick={() => {
+                    props.onItemClick(item);
+                  }}
+                />
+              );
+            })}
+          </NotificationBellSection>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default NotificationBellDropdown;