@oneuptime/common 7.0.3621 → 7.0.3655

package/Types/Workspace/NotificationRules/NotificationRuleCondition.ts

@@ -0,0 +1,355 @@
+import AlertSeverity from "../../../Models/DatabaseModels/AlertSeverity";
+import AlertState from "../../../Models/DatabaseModels/AlertState";
+import IncidentSeverity from "../../../Models/DatabaseModels/IncidentSeverity";
+import IncidentState from "../../../Models/DatabaseModels/IncidentState";
+import Label from "../../../Models/DatabaseModels/Label";
+import Monitor from "../../../Models/DatabaseModels/Monitor";
+import MonitorStatus from "../../../Models/DatabaseModels/MonitorStatus";
+import ScheduledMaintenanceState from "../../../Models/DatabaseModels/ScheduledMaintenanceState";
+import { DropdownOption } from "../../../UI/Components/Dropdown/Dropdown";
+import ObjectID from "../../ObjectID";
+import WorkspaceType from "../WorkspaceType";
+import NotificationRuleEventType from "./EventType";
+import SlackNotificationRule from "./SlackNotificationRule";
+
+export enum NotificationRuleConditionCheckOn {
+  MonitorName = "Monitor Name",
+  IncidentName = "Incident Name",
+  IncidentDescription = "Incident Description",
+  IncidentSeverity = "Incident Severity",
+  IncidentState = "Incident State",
+  MonitorType = "Monitor Type",
+  MonitorStatus = "Monitor Status",
+  AlertName = "Alert Name",
+  AlertDescription = "Alert Description",
+  AlertSeverity = "Alert Severity",
+  AlertState = "Alert State",
+  ScheduledMaintenanceName = "Scheduled Maintenance Name",
+  ScheduledMaintenanceDescription = "Scheduled Maintenance Description",
+  ScheduledMaintenanceState = "Scheduled Maintenance State",
+  IncidentLabels = "Incident Labels",
+  AlertLabels = "Alert Labels",
+  MonitorLabels = "Monitor Labels",
+  ScheduledMaintenanceLabels = "Scheduled Maintenance Labels",
+  Monitors = "Monitors", // like monitor contains in the incident or scheduled event.
+}
+
+export enum ConditionType {
+  EqualTo = "Equal To",
+  NotEqualTo = "Not Equal To",
+  GreaterThan = "Greater Than",
+  LessThan = "Less Than",
+  GreaterThanOrEqualTo = "Greater Than Or Equal To",
+  LessThanOrEqualTo = "Less Than Or Equal To",
+  Contains = "Contains",
+  NotContains = "Not Contains",
+  StartsWith = "Starts With",
+  EndsWith = "Ends With",
+  IsEmpty = "Is Empty",
+  IsNotEmpty = "Is Not Empty",
+  True = "True",
+  False = "False",
+
+  // could be used for labels.
+  ContainsAll = "Contains All",
+}
+
+export default interface NotificationRuleCondition {
+  checkOn: NotificationRuleConditionCheckOn;
+  conditionType: ConditionType | undefined;
+  value:
+    | string
+    | number
+    | boolean
+    | Array<string>
+    | Array<ObjectID>
+    | undefined;
+}
+
+export class NotificationRuleConditionUtil {
+  public static getValidationError(data: {
+    notificationRule: SlackNotificationRule;
+    eventType: NotificationRuleEventType;
+    workspaceType: WorkspaceType;
+  }): string | null {
+    const { notificationRule, eventType, workspaceType } = data;
+
+    for (const condition of notificationRule.filters) {
+      if (!condition.checkOn) {
+        return "Check On is required";
+      }
+
+      if (!condition.conditionType) {
+        return `Filter Condition is required for ${condition.checkOn}`;
+      }
+
+      if (!condition.value) {
+        return `Value is required for ${condition.checkOn}`;
+      }
+
+      if (Array.isArray(condition.value) && condition.value.length === 0) {
+        return `Value is required for ${condition.checkOn}`;
+      }
+    }
+
+    if (eventType === NotificationRuleEventType.Incident) {
+      // either create slack channel or select existing one should be active.
+
+      if (workspaceType === WorkspaceType.Slack) {
+        if (
+          !notificationRule.shouldCreateSlackChannel &&
+          !notificationRule.shouldPostToExistingSlackChannel
+        ) {
+          return "Please select either create slack channel or post to existing slack channel";
+        }
+
+        if (notificationRule.shouldPostToExistingSlackChannel) {
+          if (!notificationRule.existingSlackChannelName?.trim()) {
+            return "Existing Slack channel name is required";
+          }
+        }
+      }
+    }
+
+    return null;
+  }
+
+  public static hasValueField(data: {
+    checkOn: NotificationRuleConditionCheckOn;
+    conditionType: ConditionType | undefined;
+  }): boolean {
+    switch (data.conditionType) {
+      case ConditionType.IsEmpty:
+      case ConditionType.IsNotEmpty:
+      case ConditionType.True:
+      case ConditionType.False:
+        return false;
+      default:
+        return true;
+    }
+  }
+
+  public static isDropdownValueField(data: {
+    checkOn: NotificationRuleConditionCheckOn | undefined;
+    conditionType: ConditionType | undefined;
+  }): boolean {
+    // incident state, alert state, monitor status, scheduled maintenance state, severit, labels, monitors are all dropdowns.
+
+    if (!data.checkOn || !data.conditionType) {
+      return false;
+    }
+
+    switch (data.checkOn) {
+      case NotificationRuleConditionCheckOn.MonitorType:
+      case NotificationRuleConditionCheckOn.IncidentState:
+      case NotificationRuleConditionCheckOn.AlertState:
+      case NotificationRuleConditionCheckOn.MonitorStatus:
+      case NotificationRuleConditionCheckOn.ScheduledMaintenanceState:
+      case NotificationRuleConditionCheckOn.IncidentSeverity:
+      case NotificationRuleConditionCheckOn.AlertSeverity:
+      case NotificationRuleConditionCheckOn.MonitorLabels:
+      case NotificationRuleConditionCheckOn.IncidentLabels:
+      case NotificationRuleConditionCheckOn.AlertLabels:
+      case NotificationRuleConditionCheckOn.ScheduledMaintenanceLabels:
+      case NotificationRuleConditionCheckOn.Monitors:
+        return true;
+      default:
+        return false;
+    }
+  }
+
+  public static getDropdownOptionsByCheckOn(data: {
+    alertSeverities: Array<AlertSeverity>;
+    alertStates: Array<AlertState>;
+    incidentSeverities: Array<IncidentSeverity>;
+    monitorStatus: Array<MonitorStatus>;
+    incidentStates: Array<IncidentState>;
+    scheduledMaintenanceStates: Array<ScheduledMaintenanceState>;
+    labels: Array<Label>;
+    monitors: Array<Monitor>;
+    checkOn: NotificationRuleConditionCheckOn;
+  }): Array<DropdownOption> {
+    if (data.checkOn === NotificationRuleConditionCheckOn.AlertSeverity) {
+      return data.alertSeverities.map((severity: AlertSeverity) => {
+        return {
+          value: severity.id!.toString(),
+          label: severity.name || "",
+        };
+      });
+    }
+
+    if (data.checkOn === NotificationRuleConditionCheckOn.IncidentSeverity) {
+      return data.incidentSeverities.map((severity: IncidentSeverity) => {
+        return {
+          value: severity.id!.toString(),
+          label: severity.name || "",
+        };
+      });
+    }
+
+    if (data.checkOn === NotificationRuleConditionCheckOn.MonitorStatus) {
+      return data.monitorStatus.map((status: MonitorStatus) => {
+        return {
+          value: status.id!.toString(),
+          label: status.name || "",
+        };
+      });
+    }
+
+    if (data.checkOn === NotificationRuleConditionCheckOn.IncidentState) {
+      return data.incidentStates.map((state: IncidentState) => {
+        return {
+          value: state.id!.toString(),
+          label: state.name || "",
+        };
+      });
+    }
+
+    if (
+      data.checkOn ===
+      NotificationRuleConditionCheckOn.ScheduledMaintenanceState
+    ) {
+      return data.scheduledMaintenanceStates.map(
+        (state: ScheduledMaintenanceState) => {
+          return {
+            value: state.id!.toString(),
+            label: state.name || "",
+          };
+        },
+      );
+    }
+
+    if (
+      data.checkOn === NotificationRuleConditionCheckOn.MonitorLabels ||
+      data.checkOn === NotificationRuleConditionCheckOn.IncidentLabels ||
+      data.checkOn === NotificationRuleConditionCheckOn.AlertLabels ||
+      data.checkOn ===
+        NotificationRuleConditionCheckOn.ScheduledMaintenanceLabels
+    ) {
+      return data.labels.map((label: Label) => {
+        return {
+          value: label.id!.toString(),
+          label: label.name || "",
+        };
+      });
+    }
+
+    if (data.checkOn === NotificationRuleConditionCheckOn.Monitors) {
+      return data.monitors.map((monitor: Monitor) => {
+        return {
+          value: monitor.id!.toString(),
+          label: monitor.name || "",
+        };
+      });
+    }
+
+    // alert states
+    if (data.checkOn === NotificationRuleConditionCheckOn.AlertState) {
+      return data.alertStates.map((state: AlertState) => {
+        return {
+          value: state.id!.toString(),
+          label: state.name || "",
+        };
+      });
+    }
+
+    return [];
+  }
+
+  public static getCheckOnByEventType(
+    eventType: NotificationRuleEventType,
+  ): Array<NotificationRuleConditionCheckOn> {
+    switch (eventType) {
+      case NotificationRuleEventType.Incident:
+        return [
+          NotificationRuleConditionCheckOn.IncidentName,
+          NotificationRuleConditionCheckOn.IncidentDescription,
+          NotificationRuleConditionCheckOn.IncidentSeverity,
+          NotificationRuleConditionCheckOn.IncidentState,
+          NotificationRuleConditionCheckOn.IncidentLabels,
+          NotificationRuleConditionCheckOn.MonitorLabels,
+          NotificationRuleConditionCheckOn.Monitors,
+        ];
+      case NotificationRuleEventType.Alert:
+        return [
+          NotificationRuleConditionCheckOn.AlertName,
+          NotificationRuleConditionCheckOn.AlertDescription,
+          NotificationRuleConditionCheckOn.AlertSeverity,
+          NotificationRuleConditionCheckOn.AlertState,
+
+          NotificationRuleConditionCheckOn.AlertLabels,
+          NotificationRuleConditionCheckOn.MonitorLabels,
+
+          NotificationRuleConditionCheckOn.Monitors,
+        ];
+      case NotificationRuleEventType.MonitorStatus:
+        return [
+          NotificationRuleConditionCheckOn.MonitorName,
+          NotificationRuleConditionCheckOn.MonitorStatus,
+          NotificationRuleConditionCheckOn.MonitorType,
+          NotificationRuleConditionCheckOn.Monitors,
+          NotificationRuleConditionCheckOn.MonitorLabels,
+        ];
+      case NotificationRuleEventType.ScheduledMaintenance:
+        return [
+          NotificationRuleConditionCheckOn.ScheduledMaintenanceName,
+          NotificationRuleConditionCheckOn.ScheduledMaintenanceDescription,
+          NotificationRuleConditionCheckOn.ScheduledMaintenanceState,
+          NotificationRuleConditionCheckOn.ScheduledMaintenanceLabels,
+          NotificationRuleConditionCheckOn.MonitorLabels,
+          NotificationRuleConditionCheckOn.Monitors,
+        ];
+      default:
+        return [];
+    }
+  }
+
+  public static getConditionTypeByCheckOn(
+    checkOn: NotificationRuleConditionCheckOn,
+  ): Array<ConditionType> {
+    switch (checkOn) {
+      case NotificationRuleConditionCheckOn.MonitorName:
+      case NotificationRuleConditionCheckOn.IncidentName:
+      case NotificationRuleConditionCheckOn.IncidentDescription:
+      case NotificationRuleConditionCheckOn.AlertName:
+      case NotificationRuleConditionCheckOn.AlertDescription:
+      case NotificationRuleConditionCheckOn.ScheduledMaintenanceName:
+      case NotificationRuleConditionCheckOn.ScheduledMaintenanceDescription:
+        return [
+          ConditionType.EqualTo,
+          ConditionType.NotEqualTo,
+          ConditionType.Contains,
+          ConditionType.NotContains,
+          ConditionType.StartsWith,
+          ConditionType.EndsWith,
+        ];
+      case NotificationRuleConditionCheckOn.IncidentSeverity:
+      case NotificationRuleConditionCheckOn.AlertSeverity:
+        return [ConditionType.Contains, ConditionType.NotContains];
+      case NotificationRuleConditionCheckOn.IncidentState:
+      case NotificationRuleConditionCheckOn.AlertState:
+      case NotificationRuleConditionCheckOn.MonitorStatus:
+      case NotificationRuleConditionCheckOn.ScheduledMaintenanceState:
+        return [ConditionType.Contains, ConditionType.NotContains];
+      case NotificationRuleConditionCheckOn.MonitorType:
+        return [ConditionType.Contains, ConditionType.NotContains];
+      case NotificationRuleConditionCheckOn.AlertLabels:
+      case NotificationRuleConditionCheckOn.IncidentLabels:
+      case NotificationRuleConditionCheckOn.MonitorLabels:
+      case NotificationRuleConditionCheckOn.ScheduledMaintenanceLabels:
+        return [
+          ConditionType.Contains,
+          ConditionType.NotContains,
+          ConditionType.ContainsAll,
+        ];
+      case NotificationRuleConditionCheckOn.Monitors:
+        return [
+          ConditionType.Contains,
+          ConditionType.NotContains,
+          ConditionType.ContainsAll,
+        ];
+      default:
+        return [];
+    }
+  }
+}

package/Types/Workspace/NotificationRules/SlackNotificationRule.ts

@@ -0,0 +1,19 @@
+import FilterCondition from "../../Filter/FilterCondition";
+import ObjectID from "../../ObjectID";
+import BaseNotificationRule from "./BaseNotificationRule";
+import NotificationRuleCondition from "./NotificationRuleCondition";
+
+export default interface SlackNotificationRule extends BaseNotificationRule {
+  _type: "SlackNotificationRule";
+  filterCondition: FilterCondition; // and OR or. Default is AND
+  filters: Array<NotificationRuleCondition>; // if this array is empty then it will be considered as all filters are matched.
+
+  // if filters match then do:
+  shouldCreateSlackChannel: boolean;
+  inviteTeamsToNewSlackChannel: Array<ObjectID>;
+  inviteUsersToNewSlackChannel: Array<ObjectID>;
+  shouldAutomaticallyInviteOnCallUsersToNewSlackChannel: boolean;
+
+  shouldPostToExistingSlackChannel: boolean;
+  existingSlackChannelName: string; // seperate by comma
+}

package/Types/Workspace/WorkspaceNotificationPayload.ts

@@ -0,0 +1,29 @@
+export interface WorkspacePayloadBlocks {
+  _type: string;
+}
+
+export interface WorkspaceNotificationPayloadButton {
+  title: string; // Button title.
+}
+
+export interface WorkspacePayloadHeader extends WorkspacePayloadBlocks {
+  _type: "WorkspacePayloadHeader";
+  text: string;
+}
+
+export interface WorkspacePayloadMarkdown extends WorkspacePayloadBlocks {
+  _type: "WorkspacePayloadMarkdown";
+  text: string;
+}
+
+export interface WorkspacePayloadButtons extends WorkspacePayloadBlocks {
+  _type: "WorkspacePayloadButtons";
+  buttons: Array<WorkspaceNotificationPayloadButton>;
+}
+
+export default interface WorkspaceNotificationPayload {
+  _type: "WorkspaceNotificationPayload";
+  channelNames: Array<string>; // which channels to post to.
+  blocks: Array<WorkspacePayloadBlocks>; // Buttons to add to the message.
+  createChannelsIfItDoesNotExist: boolean; // Should we create the channels if they don't exist.
+}

package/Types/Workspace/WorkspaceType.ts

@@ -0,0 +1,6 @@
+enum WorkspaceType {
+  Slack = "Slack",
+  MicrosoftTeams = "MicrosoftTeams",
+}
+
+export default WorkspaceType;

package/UI/Components/Forms/BasicForm.tsx

@@ -620,6 +620,15 @@ const BasicForm: ForwardRefExoticComponent<any> = forwardRef(
 
                           return true;
                         })
+                        .filter((field: Field<T>) => {
+                          const currentValues: FormValues<T> =
+                            refCurrentValue.current;
+                          if (field.showIf && !field.showIf(currentValues)) {
+                            return false;
+                          }
+
+                          return true;
+                        })
                         .map((field: Field<T>, i: number) => {
                           return (
                             <div key={getFieldName(field)}>

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

@@ -31,6 +31,9 @@ import { JSONValue } from "Common/Types/JSON";
 import ObjectID from "Common/Types/ObjectID";
 import Typeof from "Common/Types/Typeof";
 import React, { ReactElement, useEffect } from "react";
+import Radio, { RadioValue } from "../../Radio/Radio";
+import { BasicRadioButtonOption } from "../../RadioButtons/BasicRadioButtons";
+import HorizontalRule from "../../HorizontalRule/HorizontalRule";
 
 export interface ComponentProps<T extends GenericObject> {
   field: Field<T>;
@@ -246,6 +249,8 @@ const FormField: <T extends GenericObject>(
       <div className="sm:col-span-4 mt-0 mb-2" key={props.fieldName}>
         {/*** Do not display label on checkbox because checkbox can display its own label */}
 
+        {props.field.showHorizontalRuleAbove && <HorizontalRule />}
+
         {props.field.fieldType !== FormFieldSchemaType.Checkbox && (
           <FieldLabelElement
             title={props.field.title || ""}
@@ -352,7 +357,8 @@ const FormField: <T extends GenericObject>(
             />
           )}
 
-          {props.field.fieldType === FormFieldSchemaType.RadioButton && (
+          {props.field.fieldType ===
+            FormFieldSchemaType.OptionChooserButton && (
             <RadioButtons
               error={props.touched && props.error ? props.error : undefined}
               dataTestId={props.field.dataTestId}
@@ -370,6 +376,33 @@ const FormField: <T extends GenericObject>(
             />
           )}
 
+          {props.field.fieldType === FormFieldSchemaType.RadioButton && (
+            <Radio
+              error={props.touched && props.error ? props.error : undefined}
+              dataTestId={props.field.dataTestId}
+              onChange={async (value: RadioValue | null) => {
+                props.field.onChange && props.field.onChange(value);
+                props.setFieldValue(props.fieldName, value);
+              }}
+              options={
+                props.field.radioButtonOptions?.map(
+                  (option: BasicRadioButtonOption) => {
+                    return {
+                      label: option.title,
+                      value: option.value,
+                    };
+                  },
+                ) || []
+              }
+              initialValue={
+                props.currentValues &&
+                (props.currentValues as any)[props.fieldName]
+                  ? (props.currentValues as any)[props.fieldName]
+                  : ""
+              }
+            />
+          )}
+
           {props.field.fieldType === FormFieldSchemaType.LongText && (
             <TextArea
               autoFocus={!props.disableAutofocus && index === 1}
@@ -646,6 +679,8 @@ const FormField: <T extends GenericObject>(
 
         {showMultiSelectCheckboxCategoryModal &&
           getMultiSelectCheckboxCategoryModal()}
+
+        {props.field.showHorizontalRuleBelow && <HorizontalRule />}
       </div>
     );
   };

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

@@ -53,6 +53,8 @@ export default interface Field<TEntity> {
   fetchDropdownOptions?:
     | ((item: FormValues<TEntity>) => Promise<Array<DropdownOption>>)
     | undefined;
+  showHorizontalRuleBelow?: boolean | undefined;
+  showHorizontalRuleAbove?: boolean | undefined;
   dropdownModal?: {
     type: DatabaseBaseModelType;
     labelField: string;

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

@@ -18,9 +18,9 @@ enum FormFieldSchemaType {
   LongText = "LongText",
   Color = "Color",
   Dropdown = "Dropdown",
-  Radio = "Radio",
   File = "File",
   MultiSelectDropdown = "MultiSelectDropdown",
+  OptionChooserButton = "OptionChooserButton",
   Toggle = "Boolean",
   Port = "Port",
   EncryptedText = "EncryptedText",

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

@@ -44,7 +44,7 @@ export default class FormFieldSchemaTypeUtil {
         return FieldType.Color;
       case FormFieldSchemaType.Dropdown:
         return FieldType.Dropdown;
-      case FormFieldSchemaType.Radio:
+      case FormFieldSchemaType.RadioButton:
         return FieldType.Text;
       case FormFieldSchemaType.File:
         return FieldType.File;
@@ -64,7 +64,7 @@ export default class FormFieldSchemaTypeUtil {
         return FieldType.CSS;
       case FormFieldSchemaType.HTML:
         return FieldType.HTML;
-      case FormFieldSchemaType.RadioButton:
+      case FormFieldSchemaType.OptionChooserButton:
         return FieldType.Element;
       case FormFieldSchemaType.JSON:
         return FieldType.JSON;

package/UI/Components/Icon/Icon.tsx

@@ -1109,11 +1109,24 @@ const Icon: FunctionComponent<ComponentProps> = ({
     );
   } else if (icon === IconProp.Slack) {
     return getSvgWrapper(
-      <path
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        d="M20.25 8.511c.884.284 1.5 1.128 1.5 2.097v4.286c0 1.136-.847 2.1-1.98 2.193-.34.027-.68.052-1.02.072v3.091l-3-3c-1.354 0-2.694-.055-4.02-.163a2.115 2.115 0 01-.825-.242m9.345-8.334a2.126 2.126 0 00-.476-.095 48.64 48.64 0 00-8.048 0c-1.131.094-1.976 1.057-1.976 2.192v4.286c0 .837.46 1.58 1.155 1.951m9.345-8.334V6.637c0-1.621-1.152-3.026-2.76-3.235A48.455 48.455 0 0011.25 3c-2.115 0-4.198.137-6.24.402-1.608.209-2.76 1.614-2.76 3.235v6.226c0 1.621 1.152 3.026 2.76 3.235.577.075 1.157.14 1.74.194V21l4.155-4.155"
-      />,
+      <>
+        <path
+          d="M9.33315 2C8.22858 2 7.33328 2.89731 7.33328 4.00388C7.33302 4.26677 7.38454 4.52714 7.4849 4.77012C7.58526 5.0131 7.73249 5.23393 7.9182 5.42001C8.1039 5.60609 8.32444 5.75377 8.56722 5.85462C8.80999 5.95546 9.07026 6.0075 9.33315 6.00777H11.3333V4.00388C11.3338 3.47292 11.1233 2.96353 10.7482 2.58774C10.3731 2.21194 9.86411 2.00053 9.33315 2ZM9.33315 7.34369H3.99984C2.89527 7.34369 1.99997 8.241 1.99997 9.34791C1.99997 10.4545 2.89527 11.3518 3.99984 11.3518H9.33348C10.4377 11.3518 11.3333 10.4545 11.3333 9.34791C11.3333 8.241 10.4377 7.34369 9.33315 7.34369Z"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M22 9.34791C22 8.241 21.1043 7.34369 19.9998 7.34369C18.8952 7.34369 17.9999 8.241 17.9999 9.34791V11.3518H19.9998C20.5307 11.3513 21.0397 11.1398 21.4148 10.7641C21.7899 10.3883 22.0004 9.87887 22 9.34791ZM16.6667 9.34791V4.00388C16.6671 3.47292 16.4566 2.96353 16.0815 2.58774C15.7064 2.21194 15.1974 2.00053 14.6665 2C13.5619 2 12.6666 2.89731 12.6666 4.00388V9.34757C12.6666 10.4548 13.5619 11.3521 14.6665 11.3521C15.1974 11.3516 15.7064 11.1402 16.0815 10.7644C16.4566 10.3886 16.6671 9.87887 16.6667 9.34791Z"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M14.6665 22.0395C15.1974 22.039 15.7064 21.8276 16.0815 21.4518C16.4566 21.076 16.6671 20.5666 16.6667 20.0356C16.6671 19.5047 16.4566 18.9953 16.0815 18.6195C15.7064 18.2437 15.1974 18.0323 14.6665 18.0317H12.6666V20.0356C12.6666 21.1422 13.5619 22.0395 14.6665 22.0395ZM14.6665 16.6958H20.0001C21.1043 16.6958 22 15.7985 22 14.6916C22.0004 14.1606 21.7899 13.6512 21.4148 13.2755C21.0397 12.8997 20.5307 12.6882 19.9998 12.6877H14.6665C13.5619 12.6877 12.6666 13.585 12.6666 14.6916C12.6663 14.9545 12.7178 15.2149 12.8182 15.4578C12.9186 15.7008 13.0658 15.9216 13.2515 16.1077C13.4372 16.2938 13.6577 16.4415 13.9005 16.5423C14.1433 16.6432 14.4036 16.6956 14.6665 16.6958Z"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M1.99997 14.6916C1.99971 14.9545 2.05123 15.2149 2.15159 15.4578C2.25194 15.7008 2.39918 15.9216 2.58489 16.1077C2.77059 16.2938 2.99113 16.4415 3.2339 16.5423C3.47668 16.6432 3.73695 16.6952 3.99984 16.6955C4.5308 16.6949 5.0398 16.4835 5.41491 16.1077C5.79001 15.732 6.00048 15.2226 6.00004 14.6916V12.6877H3.99984C2.89527 12.6877 1.99997 13.585 1.99997 14.6916ZM7.33328 14.6916V20.0353C7.33328 21.1422 8.22858 22.0395 9.33315 22.0395C9.86411 22.039 10.3731 21.8276 10.7482 21.4518C11.1233 21.076 11.3338 20.5666 11.3333 20.0356V14.6916C11.3336 14.4287 11.2821 14.1683 11.1817 13.9253C11.0813 13.6823 10.9341 13.4614 10.7483 13.2754C10.5626 13.0893 10.342 12.9416 10.0992 12.8408C9.85636 12.7399 9.59606 12.6879 9.33315 12.6877C8.22858 12.6877 7.33328 13.585 7.33328 14.6916Z"
+          strokeLinejoin="round"
+        />
+      </>,
     );
   } else if (icon === IconProp.Drag) {
     return getSvgWrapper(

package/UI/Components/Radio/Radio.tsx

@@ -8,37 +8,39 @@ export type RadioValue = DropdownValue;
 
 export interface ComponentProps {
   options: Array<RadioOption>;
-  initialValue?: undefined | RadioOption;
+  initialValue?: undefined | RadioValue;
   className?: undefined | string;
-  onChange?:
-    | undefined
-    | ((value: RadioValue | Array<RadioValue> | null) => void);
-  value?: RadioOption | undefined;
+  onChange?: undefined | ((value: RadioValue | null) => void);
+  value?: RadioValue | undefined;
   onFocus?: (() => void) | undefined;
   onBlur?: (() => void) | undefined;
   tabIndex?: number | undefined;
   error?: string | undefined;
+  dataTestId?: string | undefined;
 }
 
 const Radio: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
-  const [value, setValue] = useState<RadioOption | undefined>(
-    props.initialValue || props.value,
+  const [value, setValue] = useState<RadioValue | undefined>(
+    props.initialValue || props.value || undefined,
   );
 
   const groupName: string = Text.generateRandomText();
 
   return (
-    <div className={`mt-2 space-y-2 ${props.className}`}>
+    <div
+      className={`mt-2 space-y-2 ${props.className}`}
+      data-testid={props.dataTestId}
+    >
       {props.options.map((option: RadioOption, index: number) => {
         return (
           <div key={index} className="flex items-center gap-x-3">
             <input
               tabIndex={props.tabIndex}
-              defaultChecked={value?.value === option.value}
+              defaultChecked={value === option.value}
               onClick={() => {
-                setValue(option);
+                setValue(option.value);
                 props.onChange && props.onChange(option.value);
                 props.onBlur && props.onBlur();
                 props.onFocus && props.onFocus();

package/UI/Config.ts

@@ -240,3 +240,6 @@ export const OpenTelemetryExporterOtlpHeaders: Dictionary<string> =
   getOpenTelemetryExporterOtlpHeaders();
 
 export const DisableTelemetry: boolean = env("DISABLE_TELEMETRY") === "true";
+
+export const SlackAppClientId: string | null =
+  env("SLACK_APP_CLIENT_ID") || null;