@oneuptime/common 9.4.13 → 9.5.0

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;

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

@@ -0,0 +1,78 @@
+import Icon, { ThickProp } from "../../Icon/Icon";
+import React, { ReactElement } from "react";
+import { NotificationItem } from "./NotificationItem";
+import { HeaderAlertType } from "../HeaderAlert";
+
+export interface ComponentProps {
+  item: NotificationItem;
+  onClick?: () => void;
+}
+
+const NotificationBellItem: (props: ComponentProps) => ReactElement = (
+  props: ComponentProps,
+): ReactElement => {
+  const { item } = props;
+
+  let textColor: string = "text-indigo-600";
+  let bgColor: string = "bg-indigo-50";
+  let hoverBgColor: string = "hover:bg-indigo-100";
+  let borderColor: string = "border-indigo-200";
+
+  switch (item.alertType) {
+    case HeaderAlertType.SUCCESS:
+      textColor = "text-emerald-600";
+      bgColor = "bg-emerald-50";
+      hoverBgColor = "hover:bg-emerald-100";
+      borderColor = "border-emerald-200";
+      break;
+    case HeaderAlertType.ERROR:
+      textColor = "text-red-600";
+      bgColor = "bg-red-50";
+      hoverBgColor = "hover:bg-red-100";
+      borderColor = "border-red-200";
+      break;
+    case HeaderAlertType.WARNING:
+      textColor = "text-amber-600";
+      bgColor = "bg-amber-50";
+      hoverBgColor = "hover:bg-amber-100";
+      borderColor = "border-amber-200";
+      break;
+    case HeaderAlertType.INFO:
+      textColor = "text-gray-600";
+      bgColor = "bg-gray-50";
+      hoverBgColor = "hover:bg-gray-100";
+      borderColor = "border-gray-200";
+      break;
+  }
+
+  return (
+    <div
+      className={`cursor-pointer ${bgColor} ${hoverBgColor} border ${borderColor} py-2 px-3 rounded-lg transition-all duration-150`}
+      onClick={() => {
+        if (props.onClick) {
+          props.onClick();
+        } else if (item.onClick) {
+          item.onClick();
+        }
+      }}
+      title={item.tooltip}
+    >
+      <div className="flex items-center gap-2">
+        <div className={`flex-shrink-0 ${textColor}`}>
+          <Icon
+            icon={item.icon}
+            thick={ThickProp.Thick}
+            className={`h-4 w-4 stroke-[2.5px] ${textColor}`}
+          />
+        </div>
+        <div className="flex-1">
+          <span className={`text-sm font-medium ${textColor}`}>
+            {item.title}
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default NotificationBellItem;

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

@@ -0,0 +1,40 @@
+import React, { ReactElement, ReactNode } from "react";
+import { HeaderAlertType } from "../HeaderAlert";
+
+export interface ComponentProps {
+  title: string;
+  alertType: HeaderAlertType;
+  children: ReactNode;
+}
+
+const NotificationBellSection: (props: ComponentProps) => ReactElement = (
+  props: ComponentProps,
+): ReactElement => {
+  let textColor: string = "text-indigo-600";
+
+  switch (props.alertType) {
+    case HeaderAlertType.SUCCESS:
+      textColor = "text-emerald-600";
+      break;
+    case HeaderAlertType.ERROR:
+      textColor = "text-red-600";
+      break;
+    case HeaderAlertType.WARNING:
+      textColor = "text-amber-600";
+      break;
+    case HeaderAlertType.INFO:
+      textColor = "text-gray-500";
+      break;
+  }
+
+  return (
+    <div className="py-2">
+      <div className={`px-3 py-1 text-xs font-semibold uppercase ${textColor}`}>
+        {props.title}
+      </div>
+      <div className="space-y-2 px-3 py-1">{props.children}</div>
+    </div>
+  );
+};
+
+export default NotificationBellSection;

package/UI/Components/HeaderAlert/NotificationBell/NotificationItem.ts

@@ -0,0 +1,13 @@
+import IconProp from "../../../../Types/Icon/IconProp";
+import { HeaderAlertType } from "../HeaderAlert";
+
+export interface NotificationItem {
+  id: string;
+  icon: IconProp;
+  title: string;
+  count: number;
+  alertType: HeaderAlertType;
+  tooltip?: string;
+  onClick?: () => void;
+  suffix?: string;
+}

package/UI/Components/HeaderAlert/NotificationBell/index.ts

@@ -0,0 +1,5 @@
+export { default as NotificationBell } from "./NotificationBell";
+export { default as NotificationBellDropdown } from "./NotificationBellDropdown";
+export { default as NotificationBellItem } from "./NotificationBellItem";
+export { default as NotificationBellSection } from "./NotificationBellSection";
+export type { NotificationItem } from "./NotificationItem";

package/UI/Components/Icon/Icon.tsx

@@ -1378,6 +1378,29 @@ const Icon: FunctionComponent<ComponentProps> = ({
         <rect x="17" y="17" width="5" height="4" rx="0.5" />
       </>,
     );
+  } else if (icon === IconProp.Compass) {
+    return getSvgWrapper(
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2Zm3.5 13.5-5-2.5-2.5-5 5 2.5 2.5 5Z"
+      />,
+    );
+  } else if (icon === IconProp.Disc) {
+    return getSvgWrapper(
+      <>
+        <circle cx="12" cy="12" r="10" />
+        <circle cx="12" cy="12" r="3" />
+      </>,
+    );
+  } else if (icon === IconProp.Grid) {
+    return getSvgWrapper(
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M3.75 6A2.25 2.25 0 0 1 6 3.75h2.25A2.25 2.25 0 0 1 10.5 6v2.25a2.25 2.25 0 0 1-2.25 2.25H6a2.25 2.25 0 0 1-2.25-2.25V6ZM3.75 15.75A2.25 2.25 0 0 1 6 13.5h2.25a2.25 2.25 0 0 1 2.25 2.25V18a2.25 2.25 0 0 1-2.25 2.25H6A2.25 2.25 0 0 1 3.75 18v-2.25ZM13.5 6a2.25 2.25 0 0 1 2.25-2.25H18A2.25 2.25 0 0 1 20.25 6v2.25A2.25 2.25 0 0 1 18 10.5h-2.25a2.25 2.25 0 0 1-2.25-2.25V6ZM13.5 15.75a2.25 2.25 0 0 1 2.25-2.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-2.25A2.25 2.25 0 0 1 13.5 18v-2.25Z"
+      />,
+    );
   }
 
   return <></>;