@oneuptime/common 9.5.7 → 9.5.9

package/Types/PushNotification/PushDeviceType.ts

@@ -0,0 +1,7 @@
+enum PushDeviceType {
+  Web = "web",
+  iOS = "ios",
+  Android = "android",
+}
+
+export default PushDeviceType;

package/Types/PushNotification/PushNotificationRequest.ts

@@ -1,3 +1,5 @@
+import PushDeviceType from "./PushDeviceType";
+
 interface PushNotificationRequest {
   devices: Array<{
     token: string;
@@ -19,7 +21,7 @@ interface PushNotificationRequest {
     clickAction?: string;
     url?: string;
   };
-  deviceType: "web";
+  deviceType: PushDeviceType;
 }
 
 export default PushNotificationRequest;

package/UI/Components/Detail/Detail.tsx

@@ -4,7 +4,7 @@ import CodeBlock from "../CodeBlock/CodeBlock";
 import ColorViewer from "../ColorViewer/ColorViewer";
 import CopyableButton from "../CopyableButton/CopyableButton";
 import DictionaryOfStringsViewer from "../Dictionary/DictionaryOfStingsViewer";
-import { DropdownOption } from "../Dropdown/Dropdown";
+import { DropdownOption, DropdownOptionGroup } from "../Dropdown/Dropdown";
 import HiddenText from "../HiddenText/HiddenText";
 import MarkdownViewer from "../Markdown.tsx/LazyMarkdownViewer";
 import ObjectIDView from "../ObjectID/ObjectIDView";
@@ -72,13 +72,13 @@ const Detail: DetailFunction = <T extends GenericObject>(
 
   type GetDropdownViewerFunction = (
     data: string,
-    options: Array<DropdownOption>,
+    options: Array<DropdownOption | DropdownOptionGroup>,
     placeholder: string,
   ) => ReactElement;
 
   const getDropdownViewer: GetDropdownViewerFunction = (
     data: string,
-    options: Array<DropdownOption>,
+    options: Array<DropdownOption | DropdownOptionGroup>,
     placeholder: string,
   ): ReactElement => {
     if (!options) {
@@ -87,7 +87,16 @@ const Detail: DetailFunction = <T extends GenericObject>(
       );
     }
 
-    const selectedOption: DropdownOption | undefined = options.find(
+    const flatOptions: Array<DropdownOption> = options.flatMap(
+      (item: DropdownOption | DropdownOptionGroup) => {
+        if ("options" in item && Array.isArray(item.options)) {
+          return item.options;
+        }
+        return [item as DropdownOption];
+      },
+    );
+
+    const selectedOption: DropdownOption | undefined = flatOptions.find(
       (i: DropdownOption) => {
         return i.value === data;
       },

package/UI/Components/Detail/Field.ts

@@ -1,5 +1,5 @@
 import AlignItem from "../../Types/AlignItem";
-import { DropdownOption } from "../Dropdown/Dropdown";
+import { DropdownOption, DropdownOptionGroup } from "../Dropdown/Dropdown";
 import FieldType from "../Types/FieldType";
 import { Size } from "./FieldLabel";
 import Route from "../../../Types/API/Route";
@@ -18,7 +18,7 @@ export interface FieldBase<T> {
   description?: string | ReactElement;
   fieldTitleSize?: Size | undefined;
   fieldType?: FieldType;
-  dropdownOptions?: Array<DropdownOption> | undefined;
+  dropdownOptions?: Array<DropdownOption | DropdownOptionGroup> | undefined;
   colSpan?: number | undefined;
   alignItem?: AlignItem | undefined;
   contentClassName?: string | undefined;

package/UI/Components/Dropdown/Dropdown.tsx

@@ -35,8 +35,13 @@ export interface DropdownOption {
   color?: Color;
 }
 
-export interface ComponentProps {
+export interface DropdownOptionGroup {
+  label: string;
   options: Array<DropdownOption>;
+}
+
+export interface ComponentProps {
+  options: Array<DropdownOption | DropdownOptionGroup>;
   initialValue?: undefined | DropdownOption | Array<DropdownOption>;
   onClick?: undefined | (() => void);
   placeholder?: undefined | string;
@@ -61,6 +66,25 @@ const Dropdown: FunctionComponent<ComponentProps> = (
   const uniqueId: string = useId();
   const errorId: string = `dropdown-error-${uniqueId}`;
 
+  const isDropdownOptionGroup: (
+    item: DropdownOption | DropdownOptionGroup,
+  ) => item is DropdownOptionGroup = (
+    item: DropdownOption | DropdownOptionGroup,
+  ): item is DropdownOptionGroup => {
+    return (
+      "options" in item && Array.isArray((item as DropdownOptionGroup).options)
+    );
+  };
+
+  const flatOptions: Array<DropdownOption> = props.options.flatMap(
+    (item: DropdownOption | DropdownOptionGroup) => {
+      if (isDropdownOptionGroup(item)) {
+        return item.options;
+      }
+      return [item];
+    },
+  );
+
   type GetDropdownOptionFromValueFunctionProps =
     | undefined
     | DropdownValue
@@ -103,13 +127,14 @@ const Dropdown: FunctionComponent<ComponentProps> = (
           !Array.isArray(item) &&
           (typeof item === "string" || typeof item === "number")
         ) {
-          const option: DropdownOption | undefined | Array<DropdownOption> =
-            props.options.find((option: DropdownOption) => {
+          const option: DropdownOption | undefined = flatOptions.find(
+            (option: DropdownOption) => {
               return option.value === item;
-            }) as DropdownOption | Array<DropdownOption>;
+            },
+          );
 
           if (option) {
-            options.push(option as DropdownOption);
+            options.push(option);
           }
         }
       }
@@ -121,9 +146,9 @@ const Dropdown: FunctionComponent<ComponentProps> = (
       !Array.isArray(value) &&
       (typeof value === "string" || typeof value === "number")
     ) {
-      return props.options.find((option: DropdownOption) => {
+      return flatOptions.find((option: DropdownOption) => {
         return option.value === value;
-      }) as DropdownOption | Array<DropdownOption>;
+      });
     }
 
     return value as DropdownOption | Array<DropdownOption>;
@@ -569,6 +594,12 @@ const Dropdown: FunctionComponent<ComponentProps> = (
 
             return "px-3 py-2 text-sm text-gray-700";
           },
+          group: () => {
+            return "py-1";
+          },
+          groupHeading: () => {
+            return "px-3 py-2 text-xs font-semibold uppercase tracking-wider text-gray-500";
+          },
           noOptionsMessage: () => {
             return "px-3 py-2 text-sm text-gray-500";
           },

package/UI/Components/Forms/BasicForm.tsx

@@ -4,7 +4,11 @@ import Alert, { AlertType } from "../Alerts/Alert";
 import Button, { ButtonStyleType } from "../Button/Button";
 import ButtonTypes from "../Button/ButtonTypes";
 
-import { DropdownOption, DropdownValue } from "../Dropdown/Dropdown";
+import {
+  DropdownOption,
+  DropdownOptionGroup,
+  DropdownValue,
+} from "../Dropdown/Dropdown";
 import ErrorMessage from "../ErrorMessage/ErrorMessage";
 import FormField from "./Fields/FormField";
 import FormSummary from "./FormSummary";
@@ -301,7 +305,7 @@ const BasicForm: ForwardRefExoticComponent<any> = forwardRef(
           setIsDropdownOptionsLoading(true);
           // If a dropdown has fetch optiosn then we need to fetch them
           try {
-            const options: Array<DropdownOption> =
+            const options: Array<DropdownOption | DropdownOptionGroup> =
               await item.fetchDropdownOptions(refCurrentValue.current);
             item.dropdownOptions = options;
           } catch (err) {
@@ -501,8 +505,21 @@ const BasicForm: ForwardRefExoticComponent<any> = forwardRef(
           field.fieldType === FormFieldSchemaType.Dropdown &&
           (values as any)[fieldName]
         ) {
+          const flatDropdownOptions: Array<DropdownOption> =
+            field.dropdownOptions?.flatMap(
+              (item: DropdownOption | DropdownOptionGroup) => {
+                if (
+                  "options" in item &&
+                  Array.isArray((item as DropdownOptionGroup).options)
+                ) {
+                  return (item as DropdownOptionGroup).options;
+                }
+                return [item as DropdownOption];
+              },
+            ) || [];
+
           const dropdownOption: DropdownOption | undefined =
-            field.dropdownOptions?.find((option: DropdownOption) => {
+            flatDropdownOptions.find((option: DropdownOption) => {
               let valueToCompare: DropdownValue = (values as any)[fieldName];
 
               if ((valueToCompare as any) instanceof ObjectID) {
@@ -519,8 +536,21 @@ const BasicForm: ForwardRefExoticComponent<any> = forwardRef(
           field.fieldType === FormFieldSchemaType.MultiSelectDropdown &&
           (values as any)[fieldName]
         ) {
+          const flatDropdownOptions: Array<DropdownOption> =
+            field.dropdownOptions?.flatMap(
+              (item: DropdownOption | DropdownOptionGroup) => {
+                if (
+                  "options" in item &&
+                  Array.isArray((item as DropdownOptionGroup).options)
+                ) {
+                  return (item as DropdownOptionGroup).options;
+                }
+                return [item as DropdownOption];
+              },
+            ) || [];
+
           const dropdownOptions: Array<DropdownOption> =
-            field.dropdownOptions?.filter((option: DropdownOption) => {
+            flatDropdownOptions.filter((option: DropdownOption) => {
               let valueToCompare: Array<DropdownValue> = [
                 ...(values as any)[fieldName],
               ];
@@ -534,7 +564,7 @@ const BasicForm: ForwardRefExoticComponent<any> = forwardRef(
               });
 
               return valueToCompare.includes(option.value);
-            }) || [];
+            });
 
           (values as any)[fieldName] = dropdownOptions.map(
             (option: DropdownOption) => {

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

@@ -0,0 +1,261 @@
+import Permission, {
+  PermissionGroup,
+  PermissionHelper,
+  PermissionProps,
+} from "../../../../Types/Permission";
+import React, {
+  FunctionComponent,
+  ReactElement,
+  useEffect,
+  useMemo,
+  useState,
+} from "react";
+
+export interface ComponentProps {
+  onChange: (value: Permission | null) => void;
+  initialValue?: Permission | undefined;
+  placeholder?: string | undefined;
+  onFocus?: (() => void) | undefined;
+  tabIndex?: number | undefined;
+  onBlur?: (() => void) | undefined;
+  error?: string | undefined;
+}
+
+const PermissionPicker: FunctionComponent<ComponentProps> = (
+  props: ComponentProps,
+): ReactElement => {
+  const [selectedPermission, setSelectedPermission] =
+    useState<Permission | null>(props.initialValue || null);
+  const [activeGroup, setActiveGroup] = useState<PermissionGroup | null>(null);
+  const [searchQuery, setSearchQuery] = useState<string>("");
+
+  const allPermissions: Array<PermissionProps> = useMemo(() => {
+    return PermissionHelper.getTenantPermissionProps();
+  }, []);
+
+  const groupedPermissions: Map<
+    PermissionGroup,
+    Array<PermissionProps>
+  > = useMemo(() => {
+    const map: Map<PermissionGroup, Array<PermissionProps>> = new Map();
+    for (const perm of allPermissions) {
+      if (!map.has(perm.group)) {
+        map.set(perm.group, []);
+      }
+      map.get(perm.group)!.push(perm);
+    }
+    return map;
+  }, [allPermissions]);
+
+  const groups: Array<PermissionGroup> = useMemo(() => {
+    return Array.from(groupedPermissions.keys());
+  }, [groupedPermissions]);
+
+  // Auto-select the group for the initial value
+  useEffect(() => {
+    if (props.initialValue && !activeGroup) {
+      const match: PermissionProps | undefined = allPermissions.find(
+        (p: PermissionProps) => {
+          return p.permission === props.initialValue;
+        },
+      );
+      if (match) {
+        setActiveGroup(match.group);
+      }
+    }
+  }, [props.initialValue, allPermissions, activeGroup]);
+
+  // Default to first group if none selected
+  useEffect(() => {
+    if (!activeGroup && groups.length > 0 && !props.initialValue) {
+      setActiveGroup(groups[0]!);
+    }
+  }, [activeGroup, groups, props.initialValue]);
+
+  const isSearching: boolean = searchQuery.trim().length > 0;
+  const lowerQuery: string = searchQuery.toLowerCase();
+
+  const filteredPermissions: Array<PermissionProps> = useMemo(() => {
+    if (!isSearching) {
+      return [];
+    }
+    return allPermissions.filter((p: PermissionProps) => {
+      return (
+        p.title.toLowerCase().includes(lowerQuery) ||
+        p.description.toLowerCase().includes(lowerQuery)
+      );
+    });
+  }, [allPermissions, isSearching, lowerQuery]);
+
+  const searchMatchCountByGroup: Map<PermissionGroup, number> = useMemo(() => {
+    const counts: Map<PermissionGroup, number> = new Map();
+    if (!isSearching) {
+      return counts;
+    }
+    for (const perm of filteredPermissions) {
+      counts.set(perm.group, (counts.get(perm.group) || 0) + 1);
+    }
+    return counts;
+  }, [filteredPermissions, isSearching]);
+
+  const visiblePermissions: Array<PermissionProps> = useMemo(() => {
+    if (isSearching) {
+      if (activeGroup) {
+        return filteredPermissions.filter((p: PermissionProps) => {
+          return p.group === activeGroup;
+        });
+      }
+      return filteredPermissions;
+    }
+    if (!activeGroup) {
+      return [];
+    }
+    return groupedPermissions.get(activeGroup) || [];
+  }, [isSearching, activeGroup, filteredPermissions, groupedPermissions]);
+
+  type HandlePermissionClickFunction = (perm: PermissionProps) => void;
+
+  const handlePermissionClick: HandlePermissionClickFunction = (
+    perm: PermissionProps,
+  ): void => {
+    setSelectedPermission(perm.permission);
+    props.onChange(perm.permission);
+  };
+
+  type GetGroupCountFunction = (group: PermissionGroup) => number;
+
+  const getGroupCount: GetGroupCountFunction = (
+    group: PermissionGroup,
+  ): number => {
+    if (isSearching) {
+      return searchMatchCountByGroup.get(group) || 0;
+    }
+    return groupedPermissions.get(group)?.length || 0;
+  };
+
+  return (
+    <div
+      tabIndex={props.tabIndex}
+      onFocus={props.onFocus}
+      onBlur={props.onBlur}
+    >
+      <div
+        className={`border rounded-md overflow-hidden ${
+          props.error ? "border-red-400" : "border-gray-300"
+        }`}
+        style={{ height: "400px" }}
+      >
+        {/* Search bar */}
+        <div className="border-b border-gray-200 p-2">
+          <input
+            type="text"
+            className="w-full rounded-md border border-gray-300 px-3 py-1.5 text-sm focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 focus:outline-none"
+            placeholder={props.placeholder || "Search permissions..."}
+            value={searchQuery}
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+              setSearchQuery(e.target.value);
+            }}
+          />
+        </div>
+
+        <div className="flex" style={{ height: "calc(100% - 45px)" }}>
+          {/* Left sidebar - groups */}
+          <div
+            className="border-r border-gray-200 overflow-y-auto bg-gray-50 flex-shrink-0"
+            style={{ width: "200px" }}
+          >
+            {groups.map((group: PermissionGroup) => {
+              const count: number = getGroupCount(group);
+              const isActive: boolean = activeGroup === group;
+              const isDimmed: boolean = isSearching && count === 0;
+
+              return (
+                <button
+                  key={group}
+                  type="button"
+                  className={`w-full text-left px-3 py-2 text-sm flex items-center justify-between border-b border-gray-100 transition-colors ${
+                    isActive
+                      ? "bg-indigo-50 text-indigo-700 font-medium"
+                      : isDimmed
+                        ? "text-gray-300 cursor-default"
+                        : "text-gray-700 hover:bg-gray-100"
+                  }`}
+                  onClick={() => {
+                    if (!isDimmed) {
+                      setActiveGroup(group);
+                    }
+                  }}
+                >
+                  <span className="truncate">{group}</span>
+                  <span
+                    className={`ml-1 text-xs flex-shrink-0 ${
+                      isActive ? "text-indigo-500" : "text-gray-400"
+                    }`}
+                  >
+                    {count}
+                  </span>
+                </button>
+              );
+            })}
+          </div>
+
+          {/* Right panel - permissions */}
+          <div className="flex-1 overflow-y-auto">
+            {visiblePermissions.length === 0 && (
+              <div className="flex items-center justify-center h-full text-gray-400 text-sm">
+                {isSearching
+                  ? "No permissions match your search."
+                  : "Select a group to view permissions."}
+              </div>
+            )}
+
+            {visiblePermissions.map((perm: PermissionProps) => {
+              const isSelected: boolean =
+                selectedPermission === perm.permission;
+              return (
+                <button
+                  key={perm.permission}
+                  type="button"
+                  className={`w-full text-left px-4 py-2.5 border-b border-gray-100 transition-colors ${
+                    isSelected
+                      ? "bg-indigo-50 border-l-2 border-l-indigo-500"
+                      : "hover:bg-gray-50"
+                  }`}
+                  onClick={() => {
+                    handlePermissionClick(perm);
+                  }}
+                >
+                  <div className="flex items-start gap-2">
+                    <div className="flex-1 min-w-0">
+                      <div
+                        className={`text-sm font-medium ${
+                          isSelected ? "text-indigo-700" : "text-gray-900"
+                        }`}
+                      >
+                        {perm.title}
+                      </div>
+                      <div className="text-xs text-gray-500 mt-0.5">
+                        {perm.description}
+                      </div>
+                    </div>
+                    {isSearching && (
+                      <span className="inline-flex items-center rounded bg-gray-100 px-1.5 py-0.5 text-xs text-gray-600 flex-shrink-0">
+                        {perm.group}
+                      </span>
+                    )}
+                  </div>
+                </button>
+              );
+            })}
+          </div>
+        </div>
+      </div>
+
+      {props.error && (
+        <p className="mt-1 text-sm text-red-400">{props.error}</p>
+      )}
+    </div>
+  );
+};
+
+export default PermissionPicker;

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

@@ -4,7 +4,7 @@ import {
   CheckboxCategory,
 } from "../../CategoryCheckbox/CategoryCheckboxTypes";
 import { CardSelectOption } from "../../CardSelect/CardSelect";
-import { DropdownOption } from "../../Dropdown/Dropdown";
+import { DropdownOption, DropdownOptionGroup } from "../../Dropdown/Dropdown";
 import { RadioButton } from "../../RadioButtons/GroupRadioButtons";
 import FormFieldSchemaType from "./FormFieldSchemaType";
 import FormValues from "./FormValues";
@@ -50,10 +50,12 @@ export default interface Field<TEntity> {
   disabled?: boolean;
   stepId?: string | undefined;
   required?: boolean | ((item: FormValues<TEntity>) => boolean) | undefined;
-  dropdownOptions?: Array<DropdownOption> | undefined;
+  dropdownOptions?: Array<DropdownOption | DropdownOptionGroup> | undefined;
   cardSelectOptions?: Array<CardSelectOption> | undefined;
   fetchDropdownOptions?:
-    | ((item: FormValues<TEntity>) => Promise<Array<DropdownOption>>)
+    | ((
+        item: FormValues<TEntity>,
+      ) => Promise<Array<DropdownOption | DropdownOptionGroup>>)
     | undefined;
   showHorizontalRuleBelow?: boolean | undefined;
   showHorizontalRuleAbove?: boolean | undefined;

package/UI/Components/ModelDelete/ModelDelete.tsx

@@ -12,6 +12,7 @@ import React, { ReactElement, useState } from "react";
 export interface ComponentProps<TBaseModel extends BaseModel> {
   modelType: { new (): TBaseModel };
   modelId: ObjectID;
+  modelAPI?: typeof ModelAPI | undefined;
   onDeleteSuccess: () => void;
 }
 
@@ -29,7 +30,9 @@ const ModelDelete: <TBaseModel extends BaseModel>(
   const deleteItem: PromiseVoidFunction = async (): Promise<void> => {
     setIsLoading(true);
     try {
-      await ModelAPI.deleteItem<TBaseModel>({
+      const modelAPI: typeof ModelAPI = props.modelAPI || ModelAPI;
+
+      await modelAPI.deleteItem<TBaseModel>({
         modelType: props.modelType,
         id: props.modelId,
       });

package/UI/Components/ModelDetail/CardModelDetail.tsx

@@ -1,3 +1,4 @@
+import ModelAPI from "../../Utils/ModelAPI/ModelAPI";
 import PermissionUtil from "../../Utils/Permission";
 import User from "../../Utils/User";
 import Navigation from "../../Utils/Navigation";
@@ -33,6 +34,7 @@ export interface ComponentProps<TBaseModel extends BaseModel> {
   formFields?: undefined | Fields<TBaseModel>;
   className?: string | undefined;
   name: string;
+  modelAPI?: typeof ModelAPI | undefined;
   createEditModalWidth?: ModalWidth | undefined;
   refresher?: boolean;
   createOrUpdateApiUrl?: URL | undefined;
@@ -130,6 +132,7 @@ const CardModelDetail: <TBaseModel extends BaseModel>(
           <ModelDetail
             refresher={refresher}
             {...props.modelDetailProps}
+            modelAPI={props.modelAPI}
             onItemLoaded={(item: TBaseModel) => {
               setItem(item);
               if (props.modelDetailProps.onItemLoaded) {
@@ -144,6 +147,7 @@ const CardModelDetail: <TBaseModel extends BaseModel>(
         <ModelFormModal<TBaseModel>
           title={`Edit ${model.singularName}`}
           modalWidth={props.createEditModalWidth}
+          modelAPI={props.modelAPI}
           onClose={() => {
             setShowModal(false);
           }}

package/UI/Components/ModelDetail/ModelDetail.tsx

@@ -28,6 +28,7 @@ export interface ComponentProps<TBaseModel extends BaseModel> {
   fields: Array<Field<TBaseModel>>;
   onLoadingChange?: undefined | ((isLoading: boolean) => void);
   modelId: ObjectID;
+  modelAPI?: typeof ModelAPI | undefined;
   onError?: ((error: string) => void) | undefined;
   onItemLoaded?: (item: TBaseModel) => void | undefined;
   refresher?: undefined | boolean;
@@ -179,7 +180,9 @@ const ModelDetail: <TBaseModel extends BaseModel>(
         setOnBeforeFetchData(model);
       }
 
-      const item: TBaseModel | null = await ModelAPI.getItem({
+      const modelAPI: typeof ModelAPI = props.modelAPI || ModelAPI;
+
+      const item: TBaseModel | null = await modelAPI.getItem({
         modelType: props.modelType,
         id: props.modelId,
         select: {

package/UI/Components/Page/ModelPage.tsx

@@ -20,6 +20,7 @@ export interface ComponentProps<TBaseModel extends BaseModel> {
   modelType: { new (): TBaseModel };
   modelId: ObjectID;
   modelNameField: string;
+  modelAPI?: typeof ModelAPI | undefined;
 }
 
 const ModelPage: <TBaseModel extends BaseModel>(
@@ -54,7 +55,9 @@ const ModelPage: <TBaseModel extends BaseModel>(
         } as Select<TBaseModel>;
       }
 
-      const item: TBaseModel | null = await ModelAPI.getItem({
+      const modelAPI: typeof ModelAPI = props.modelAPI || ModelAPI;
+
+      const item: TBaseModel | null = await modelAPI.getItem({
         modelType: props.modelType,
         id: props.modelId,
         select: select as Select<TBaseModel>,

package/UI/Utils/Permission.ts

@@ -1,7 +1,11 @@
-import { DropdownOption } from "../Components/Dropdown/Dropdown";
+import {
+  DropdownOption,
+  DropdownOptionGroup,
+} from "../Components/Dropdown/Dropdown";
 import LocalStorage from "./LocalStorage";
 import { JSONObject } from "../../Types/JSON";
 import Permission, {
+  PermissionGroup,
   PermissionHelper,
   PermissionProps,
   UserGlobalAccessPermission,
@@ -60,16 +64,35 @@ export default class PermissionUtil {
     return userTenantAccessPermission;
   }
 
-  public static projectPermissionsAsDropdownOptions(): Array<DropdownOption> {
+  public static projectPermissionsAsDropdownOptions(): Array<DropdownOptionGroup> {
     const permissions: Array<PermissionProps> =
       PermissionHelper.getTenantPermissionProps();
 
-    return permissions.map((permissionProp: PermissionProps) => {
-      return {
+    const groupMap: Map<PermissionGroup, Array<DropdownOption>> = new Map();
+
+    for (const permissionProp of permissions) {
+      const group: PermissionGroup = permissionProp.group;
+
+      if (!groupMap.has(group)) {
+        groupMap.set(group, []);
+      }
+
+      groupMap.get(group)!.push({
         value: permissionProp.permission,
         label: permissionProp.title,
-      };
-    });
+      });
+    }
+
+    const groups: Array<DropdownOptionGroup> = [];
+
+    for (const [group, options] of groupMap) {
+      groups.push({
+        label: group,
+        options,
+      });
+    }
+
+    return groups;
   }
 
   public static setGlobalPermissions(