refactor: clean up formatting and improve readability in various comp…

…onents
OneUptime · Feb 7, 2025 · 1dd43a6 · 1dd43a6
1 parent e539cb7
commit 1dd43a6
Show file tree

Hide file tree

Showing 12 changed files with 103 additions and 96 deletions.
diff --git 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<T extends GenericObject> {
   field: Field<T>;
@@ -279,9 +280,6 @@ const FormField: <T extends GenericObject>(
             />
           )}
 
-
-
-
           {(props.field.fieldType === FormFieldSchemaType.Dropdown ||
             props.field.fieldType ===
               FormFieldSchemaType.MultiSelectDropdown) && (
@@ -356,7 +354,8 @@ const FormField: <T extends GenericObject>(
             />
           )}
 
-          {props.field.fieldType === FormFieldSchemaType.OptionChooserButton && (
+          {props.field.fieldType ===
+            FormFieldSchemaType.OptionChooserButton && (
             <RadioButtons
               error={props.touched && props.error ? props.error : undefined}
               dataTestId={props.field.dataTestId}
@@ -374,21 +373,22 @@ const FormField: <T extends GenericObject>(
             />
           )}
 
-
-{props.field.fieldType === FormFieldSchemaType.RadioButton && (
+          {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) => {
-                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
@@ -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
@@ -10,15 +10,13 @@ export interface ComponentProps {
   options: Array<RadioOption>;
   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<ComponentProps> = (
@@ -31,7 +29,10 @@ const Radio: FunctionComponent<ComponentProps> = (
   const groupName: string = Text.generateRandomText();
 
   return (
-    <div className={`mt-2 space-y-2 ${props.className}`} data-testid={props.dataTestId}>
+    <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">

diff --git a/Dashboard/src/Components/Monitor/MonitorSteps/CriteriaFilters.tsx b/Dashboard/src/Components/Monitor/MonitorSteps/CriteriaFilters.tsx
@@ -14,29 +14,31 @@ const CriteriaFilters: FunctionComponent<ComponentProps> = (
   return (
     <div className="ml-5 mt-5 mb-5 bg-gray-50 rounded rounded-xl p-5 border border-2 border-gray-100">
       <ul role="list" className="space-y-6">
-        {props.criteriaFilters.map((i: CriteriaFilter, index: number) => {
-          const isLastItem: boolean =
-            index === props.criteriaFilters.length - 1;
-          return (
-            <li className="relative flex gap-x-4" key={index}>
-              {!isLastItem && (
-                <div className="absolute left-0 top-0 flex w-6 justify-center -bottom-6">
-                  <div className="w-px bg-gray-200"></div>
+        {(props.criteriaFilters || []).map(
+          (i: CriteriaFilter, index: number) => {
+            const isLastItem: boolean =
+              index === props.criteriaFilters.length - 1;
+            return (
+              <li className="relative flex gap-x-4" key={index}>
+                {!isLastItem && (
+                  <div className="absolute left-0 top-0 flex w-6 justify-center -bottom-6">
+                    <div className="w-px bg-gray-200"></div>
+                  </div>
+                )}
+                <div className="relative flex h-6 w-6  flex-none items-center justify-center bg-gray-50">
+                  <div className="h-1.5 w-1.5 rounded-full bg-gray-100 ring-1 ring-gray-300"></div>
                 </div>
-              )}
-              <div className="relative flex h-6 w-6  flex-none items-center justify-center bg-gray-50">
-                <div className="h-1.5 w-1.5 rounded-full bg-gray-100 ring-1 ring-gray-300"></div>
-              </div>
-              <CriteriaFilterElement
-                key={index}
-                criteriaFilter={i}
-                filterCondition={
-                  !isLastItem ? props.filterCondition : undefined
-                }
-              />{" "}
-            </li>
-          );
-        })}
+                <CriteriaFilterElement
+                  key={index}
+                  criteriaFilter={i}
+                  filterCondition={
+                    !isLastItem ? props.filterCondition : undefined
+                  }
+                />{" "}
+              </li>
+            );
+          },
+        )}
       </ul>
     </div>
   );

diff --git 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,24 +215,27 @@ 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;
                   })}
                   onChange={(
                     value: DropdownValue | Array<DropdownValue> | 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
@@ -47,7 +47,10 @@ const NotificationRuleConditions: FunctionComponent<ComponentProps> = (
   return (
     <div>
       {notificationRuleConditions.length === 0 && (
-        <p className="text-sm text-gray-700">If no filters are added, then this rule will trigger for all {props.eventType}.</p>
+        <p className="text-sm text-gray-700">
+          If no filters are added, then this rule will trigger for all{" "}
+          {props.eventType}.
+        </p>
       )}
 
       {notificationRuleConditions.map(

diff --git a/Dashboard/src/Components/ServiceProvider/NotificationRuleForm/NotificationRuleForm.tsx b/Dashboard/src/Components/ServiceProvider/NotificationRuleForm/NotificationRuleForm.tsx
@@ -51,19 +51,18 @@ const NotificationRuleForm: FunctionComponent<ComponentProps> = (
         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/...Components/ServiceProvider/NotificationRuleViewElement/NotificationRuleViewConditions.tsx b/...Components/ServiceProvider/NotificationRuleViewElement/NotificationRuleViewConditions.tsx
@@ -32,7 +32,7 @@ const NotificationRuleConditions: FunctionComponent<ComponentProps> = (
   return (
     <div className="ml-5 mt-5 mb-5 bg-gray-50 rounded rounded-xl p-5 border border-2 border-gray-100">
       <ul role="list" className="space-y-6">
-        {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
@@ -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<User> = teamMembers.data.map(

diff --git 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<ComponentProps> = (props: ComponentProps): ReactElement => {
+const SlackIntegration: FunctionComponent<ComponentProps> = (
+  props: ComponentProps,
+): ReactElement => {
   const [error, setError] = React.useState<ReactElement | null>(null);
 
   const [isLoading, setIsLoading] = React.useState<boolean>(true);
@@ -48,21 +49,18 @@ const SlackIntegration: FunctionComponent<ComponentProps> = (props: ComponentPro
     React.useState<ObjectID | null>(null);
   const [projectAuthTokenId, setServiceProviderProjectAuthTokenId] =
     React.useState<ObjectID | null>(null);
-  const [
-    isProjectAccountConnected,
-    setIsProjectAccountConnected,
-  ] = React.useState<boolean>(false);
+  const [isProjectAccountConnected, setIsProjectAccountConnected] =
+    React.useState<boolean>(false);
   const [isButtonLoading, setIsButtonLoading] = React.useState<boolean>(false);
 
   useEffect(() => {
-    if(isProjectAccountConnected){
+    if (isProjectAccountConnected) {
       props.onConnected();
-    }else{
+    } else {
       props.onDisconnected();
     }
   }, [isProjectAccountConnected]);
 
-
   const loadItems: PromiseVoidFunction = async (): Promise<void> => {
     try {
       setError(null);

diff --git 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<PageComponentProps> = (
   _props: PageComponentProps,
 ): ReactElement => {
-
-  const [isSlackConnected, setIsSlackConnected] = React.useState<boolean>(false);
+  const [isSlackConnected, setIsSlackConnected] =
+    React.useState<boolean>(false);
 
   return (
     <div>
       <SlackIntegration
-        onConnected={() => setIsSlackConnected(true)}
-        onDisconnected={() => setIsSlackConnected(false)}
+        onConnected={() => {
+          return setIsSlackConnected(true);
+        }}
+        onDisconnected={() => {
+          return setIsSlackConnected(false);
+        }}
       />
-      {isSlackConnected && <ServiceProviderNotificationRuleTable
-        serviceProviderType={ServiceProviderType.Slack}
-        eventType={NotificationRuleEventType.Incident}
-      />}
+      {isSlackConnected && (
+        <ServiceProviderNotificationRuleTable
+          serviceProviderType={ServiceProviderType.Slack}
+          eventType={NotificationRuleEventType.Incident}
+        />
+      )}
     </div>
   );
 };

diff --git 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<PageComponentProps> = (): ReactElement => {
-  return <SlackIntegration
-    onConnected={()=>{}}
-    onDisconnected={()=>{}}
-  />;
+  return <SlackIntegration onConnected={() => {}} onDisconnected={() => {}} />;
 };
 
 export default Settings;