diff --git a/Common/UI/Components/Forms/Fields/FormField.tsx b/Common/UI/Components/Forms/Fields/FormField.tsx index 3ca5bdc525..e4b36fa829 100644 --- a/Common/UI/Components/Forms/Fields/FormField.tsx +++ b/Common/UI/Components/Forms/Fields/FormField.tsx @@ -32,6 +32,7 @@ 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"; export interface ComponentProps { field: Field; @@ -279,9 +280,6 @@ const FormField: ( /> )} - - - {(props.field.fieldType === FormFieldSchemaType.Dropdown || props.field.fieldType === FormFieldSchemaType.MultiSelectDropdown) && ( @@ -356,7 +354,8 @@ const FormField: ( /> )} - {props.field.fieldType === FormFieldSchemaType.OptionChooserButton && ( + {props.field.fieldType === + FormFieldSchemaType.OptionChooserButton && ( ( /> )} - -{props.field.fieldType === FormFieldSchemaType.RadioButton && ( + {props.field.fieldType === FormFieldSchemaType.RadioButton && ( ( props.field.onChange && props.field.onChange(value); props.setFieldValue(props.fieldName, value); }} - options={props.field.radioButtonOptions?.map((option) => { - return { - label: option.title, - value: option.value, - }; - }) || []} + options={ + props.field.radioButtonOptions?.map((option: BasicRadioButtonOption) => { + return { + label: option.title, + value: option.value, + }; + }) || [] + } initialValue={ props.currentValues && (props.currentValues as any)[props.fieldName] diff --git a/Common/UI/Components/Forms/Types/FormFieldSchemaType.ts b/Common/UI/Components/Forms/Types/FormFieldSchemaType.ts index bb804bd60a..4147aa9952 100644 --- a/Common/UI/Components/Forms/Types/FormFieldSchemaType.ts +++ b/Common/UI/Components/Forms/Types/FormFieldSchemaType.ts @@ -20,7 +20,7 @@ enum FormFieldSchemaType { Dropdown = "Dropdown", File = "File", MultiSelectDropdown = "MultiSelectDropdown", - OptionChooserButton = "OptionChooserButton", + OptionChooserButton = "OptionChooserButton", Toggle = "Boolean", Port = "Port", EncryptedText = "EncryptedText", diff --git a/Common/UI/Components/Radio/Radio.tsx b/Common/UI/Components/Radio/Radio.tsx index 48c97df93e..cc11f2e049 100644 --- a/Common/UI/Components/Radio/Radio.tsx +++ b/Common/UI/Components/Radio/Radio.tsx @@ -10,15 +10,13 @@ export interface ComponentProps { options: Array; initialValue?: undefined | RadioOption; className?: undefined | string; - onChange?: - | undefined - | ((value: RadioValue | null) => void); + onChange?: undefined | ((value: RadioValue | null) => void); value?: RadioOption | undefined; onFocus?: (() => void) | undefined; onBlur?: (() => void) | undefined; tabIndex?: number | undefined; error?: string | undefined; - dataTestId?: string | undefined; + dataTestId?: string | undefined; } const Radio: FunctionComponent = ( @@ -31,7 +29,10 @@ const Radio: FunctionComponent = ( const groupName: string = Text.generateRandomText(); return ( -
+
{props.options.map((option: RadioOption, index: number) => { return (
diff --git a/Dashboard/src/Components/Monitor/MonitorSteps/CriteriaFilters.tsx b/Dashboard/src/Components/Monitor/MonitorSteps/CriteriaFilters.tsx index c26f36f2e7..c59d5ee4f0 100644 --- a/Dashboard/src/Components/Monitor/MonitorSteps/CriteriaFilters.tsx +++ b/Dashboard/src/Components/Monitor/MonitorSteps/CriteriaFilters.tsx @@ -14,29 +14,31 @@ const CriteriaFilters: FunctionComponent = ( return (
    - {props.criteriaFilters.map((i: CriteriaFilter, index: number) => { - const isLastItem: boolean = - index === props.criteriaFilters.length - 1; - return ( -
  • - {!isLastItem && ( -
    -
    + {(props.criteriaFilters || []).map( + (i: CriteriaFilter, index: number) => { + const isLastItem: boolean = + index === props.criteriaFilters.length - 1; + return ( +
  • + {!isLastItem && ( +
    +
    +
    + )} +
    +
    - )} -
    -
    -
    - {" "} -
  • - ); - })} + {" "} + + ); + }, + )}
); diff --git a/Dashboard/src/Components/ServiceProvider/NotificationRuleForm/NotificationRuleCondition.tsx b/Dashboard/src/Components/ServiceProvider/NotificationRuleForm/NotificationRuleCondition.tsx index 9f00ade3e7..f822480ab7 100644 --- a/Dashboard/src/Components/ServiceProvider/NotificationRuleForm/NotificationRuleCondition.tsx +++ b/Dashboard/src/Components/ServiceProvider/NotificationRuleForm/NotificationRuleCondition.tsx @@ -24,6 +24,7 @@ import MonitorStatus from "Common/Models/DatabaseModels/MonitorStatus"; import NotificationRuleEventType from "Common/Types/ServiceProvider/NotificationRules/EventType"; import AlertSeverity from "Common/Models/DatabaseModels/AlertSeverity"; import IncidentSeverity from "Common/Models/DatabaseModels/IncidentSeverity"; +import ObjectID from "Common/Types/ObjectID"; export interface ComponentProps { initialValue: NotificationRuleCondition | undefined; @@ -80,13 +81,13 @@ const NotificationRuleConditionFormElement: FunctionComponent< setFilterTypeOptions( notificationRuleCondition?.checkOn ? NotificationRuleConditionUtil.getConditionTypeByCheckOn( - notificationRuleCondition?.checkOn, - ).map((item: ConditionType) => { - return { - value: item, - label: item, - }; - }) + notificationRuleCondition?.checkOn, + ).map((item: ConditionType) => { + return { + value: item, + label: item, + }; + }) : [], ); setValuePlaceholder(""); @@ -214,11 +215,15 @@ const NotificationRuleConditionFormElement: FunctionComponent< incidentSeverities: props.incidentSeverities, }, ).filter((i: DropdownOption) => { - - if(notificationRuleCondition?.value && Array.isArray(notificationRuleCondition?.value)) { - return notificationRuleCondition?.value.map((item)=>{ - return item.toString() - }).includes(i.value.toString()); + if ( + notificationRuleCondition?.value && + Array.isArray(notificationRuleCondition?.value) + ) { + return notificationRuleCondition?.value + .map((item: string | ObjectID) => { + return item.toString(); + }) + .includes(i.value.toString()); } return i.value === notificationRuleCondition?.value; @@ -226,12 +231,11 @@ const NotificationRuleConditionFormElement: FunctionComponent< onChange={( value: DropdownValue | Array | null, ) => { - - if(Array.isArray(value)) { + if (Array.isArray(value)) { setNotificationRuleCondition({ ...notificationRuleCondition, - value: value.map((item)=>{ - return item.toString() + value: value.map((item: DropdownValue) => { + return item.toString(); }), }); return; diff --git a/Dashboard/src/Components/ServiceProvider/NotificationRuleForm/NotificationRuleConditions.tsx b/Dashboard/src/Components/ServiceProvider/NotificationRuleForm/NotificationRuleConditions.tsx index 4c3d97c42d..6a83041ca1 100644 --- a/Dashboard/src/Components/ServiceProvider/NotificationRuleForm/NotificationRuleConditions.tsx +++ b/Dashboard/src/Components/ServiceProvider/NotificationRuleForm/NotificationRuleConditions.tsx @@ -47,7 +47,10 @@ const NotificationRuleConditions: FunctionComponent = ( return (
{notificationRuleConditions.length === 0 && ( -

If no filters are added, then this rule will trigger for all {props.eventType}.

+

+ If no filters are added, then this rule will trigger for all{" "} + {props.eventType}. +

)} {notificationRuleConditions.map( diff --git a/Dashboard/src/Components/ServiceProvider/NotificationRuleForm/NotificationRuleForm.tsx b/Dashboard/src/Components/ServiceProvider/NotificationRuleForm/NotificationRuleForm.tsx index e8e4a91e47..3edafcd8a5 100644 --- a/Dashboard/src/Components/ServiceProvider/NotificationRuleForm/NotificationRuleForm.tsx +++ b/Dashboard/src/Components/ServiceProvider/NotificationRuleForm/NotificationRuleForm.tsx @@ -51,19 +51,18 @@ const NotificationRuleForm: FunctionComponent = ( title: "Filter Condition", fieldType: FormFieldSchemaType.RadioButton, required: true, - radioButtonOptions: - [ - { - title: "Any", - - value: FilterCondition.Any, - }, - { - title: "All", - - value: FilterCondition.All, - } - ] + radioButtonOptions: [ + { + title: "Any", + + value: FilterCondition.Any, + }, + { + title: "All", + + value: FilterCondition.All, + }, + ], }, { field: { diff --git a/Dashboard/src/Components/ServiceProvider/NotificationRuleViewElement/NotificationRuleViewConditions.tsx b/Dashboard/src/Components/ServiceProvider/NotificationRuleViewElement/NotificationRuleViewConditions.tsx index 2d541c3edb..6a871fd8e9 100644 --- a/Dashboard/src/Components/ServiceProvider/NotificationRuleViewElement/NotificationRuleViewConditions.tsx +++ b/Dashboard/src/Components/ServiceProvider/NotificationRuleViewElement/NotificationRuleViewConditions.tsx @@ -32,7 +32,7 @@ const NotificationRuleConditions: FunctionComponent = ( return (
    - {props.criteriaFilters.map( + {(props.criteriaFilters || []).map( (i: NotificationRuleCondition, index: number) => { const isLastItem: boolean = index === props.criteriaFilters.length - 1; diff --git a/Dashboard/src/Components/ServiceProvider/ServiceProviderNotificationRulesTable.tsx b/Dashboard/src/Components/ServiceProvider/ServiceProviderNotificationRulesTable.tsx index 92642a2a8d..90a9e71a10 100644 --- a/Dashboard/src/Components/ServiceProvider/ServiceProviderNotificationRulesTable.tsx +++ b/Dashboard/src/Components/ServiceProvider/ServiceProviderNotificationRulesTable.tsx @@ -238,7 +238,6 @@ const ServiceProviderNotificationRuleTable: FunctionComponent< select: { name: true, _id: true, - }, skip: 0, limit: LIMIT_PER_PROJECT, @@ -264,9 +263,7 @@ const ServiceProviderNotificationRuleTable: FunctionComponent< }, skip: 0, limit: LIMIT_PER_PROJECT, - sort: { - - }, + sort: {}, }); const users: Array = teamMembers.data.map( diff --git a/Dashboard/src/Components/Slack/SlackIntegration.tsx b/Dashboard/src/Components/Slack/SlackIntegration.tsx index 7fcd9bf4f9..ae5701988c 100644 --- a/Dashboard/src/Components/Slack/SlackIntegration.tsx +++ b/Dashboard/src/Components/Slack/SlackIntegration.tsx @@ -30,13 +30,14 @@ import ServiceProviderUserAuthToken from "Common/Models/DatabaseModels/ServicePr import { PromiseVoidFunction } from "Common/Types/FunctionTypes"; import ServiceProviderType from "Common/Types/ServiceProvider/ServiceProviderType"; - export interface ComponentProps { onConnected: VoidFunction; onDisconnected: VoidFunction; } -const SlackIntegration: FunctionComponent = (props: ComponentProps): ReactElement => { +const SlackIntegration: FunctionComponent = ( + props: ComponentProps, +): ReactElement => { const [error, setError] = React.useState(null); const [isLoading, setIsLoading] = React.useState(true); @@ -48,21 +49,18 @@ const SlackIntegration: FunctionComponent = (props: ComponentPro React.useState(null); const [projectAuthTokenId, setServiceProviderProjectAuthTokenId] = React.useState(null); - const [ - isProjectAccountConnected, - setIsProjectAccountConnected, - ] = React.useState(false); + const [isProjectAccountConnected, setIsProjectAccountConnected] = + React.useState(false); const [isButtonLoading, setIsButtonLoading] = React.useState(false); useEffect(() => { - if(isProjectAccountConnected){ + if (isProjectAccountConnected) { props.onConnected(); - }else{ + } else { props.onDisconnected(); } }, [isProjectAccountConnected]); - const loadItems: PromiseVoidFunction = async (): Promise => { try { setError(null); diff --git a/Dashboard/src/Pages/Settings/SlackIntegration.tsx b/Dashboard/src/Pages/Settings/SlackIntegration.tsx index e5d1a562d2..1d947ba240 100644 --- a/Dashboard/src/Pages/Settings/SlackIntegration.tsx +++ b/Dashboard/src/Pages/Settings/SlackIntegration.tsx @@ -8,19 +8,25 @@ import ServiceProviderNotificationRuleTable from "../../Components/ServiceProvid const SlackIntegrationPage: FunctionComponent = ( _props: PageComponentProps, ): ReactElement => { - - const [isSlackConnected, setIsSlackConnected] = React.useState(false); + const [isSlackConnected, setIsSlackConnected] = + React.useState(false); return (
    setIsSlackConnected(true)} - onDisconnected={() => setIsSlackConnected(false)} + onConnected={() => { + return setIsSlackConnected(true); + }} + onDisconnected={() => { + return setIsSlackConnected(false); + }} /> - {isSlackConnected && } + {isSlackConnected && ( + + )}
    ); }; diff --git a/Dashboard/src/Pages/UserSettings/SlackIntegration.tsx b/Dashboard/src/Pages/UserSettings/SlackIntegration.tsx index 8c9ca24d85..10f2d15ce7 100644 --- a/Dashboard/src/Pages/UserSettings/SlackIntegration.tsx +++ b/Dashboard/src/Pages/UserSettings/SlackIntegration.tsx @@ -3,10 +3,7 @@ import React, { FunctionComponent, ReactElement } from "react"; import SlackIntegration from "../../Components/Slack/SlackIntegration"; const Settings: FunctionComponent = (): ReactElement => { - return {}} - onDisconnected={()=>{}} - />; + return {}} onDisconnected={() => {}} />; }; export default Settings;