github/oneuptime
1
1
Fork 0
mirror of https://github.com/OneUptime/oneuptime.git synced 2026-04-06 00:32:12 +02:00
Code Issues 193 Packages Projects Releases Wiki Activity

fix: refactor conditional checks for onChange props across multiple components

Browse Source
This commit is contained in:
Simon Larsen
2025-06-11 14:25:35 +01:00
parent a7f00105ac
commit a069fa97df
14 changed files with 80 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
Common/Tests/UI/Components/404.test.tsx
View File

@@ -18,7 +18,7 @@ jest.mock("../../../UI/Utils/Navigation", () => {
});
// Type assertion for the mocked Navigation module
const MockedNavigation = Navigation as jest.Mocked<typeof Navigation>;
const MockedNavigation: jest.Mocked<typeof Navigation> = Navigation as jest.Mocked<typeof Navigation>;
describe("NotFound Component", () => {
const mockProps: ComponentProps = {

2
Common/Tests/UI/Components/DuplicateModel.test.tsx
View File

@@ -69,7 +69,7 @@ jest.mock("../../../UI/Utils/Navigation", () => {
});
// Type assertion for the mocked Navigation module
const MockedNavigation = Navigation as jest.Mocked<typeof Navigation>;
const MockedNavigation: jest.Mocked<typeof Navigation> = Navigation as jest.Mocked<typeof Navigation>;
describe("DuplicateModel", () => {
const fieldsToDuplicate: Select<TestModel> = {};

3
Common/UI/Components/Forms/Fields/FormField.tsx
View File

@@ -58,7 +58,7 @@ const FormField: <T extends GenericObject>(
type onChangeFunction = (value: JSONValue) => void;
const onChange: onChangeFunction = (value: JSONValue): void => {
props.field.onChange &&
if (props.field.onChange) {
props.field.onChange(
value,
props.currentValues,
@@ -66,6 +66,7 @@ const FormField: <T extends GenericObject>(
props.setFormValues?.(newFormValues);
},
);
}
};
type GetFieldTypeFunction = (fieldType: FormFieldSchemaType) => string;

4
Common/UI/Components/Icon/Icon.tsx
View File

@@ -116,7 +116,9 @@ const Icon: FunctionComponent<ComponentProps> = ({
<div role="icon">
<svg
onClick={() => {
onClick && onClick();
if (onClick) {
onClick();
}
}}
className={`${textColor} ${sizeClassName} ${strokeWidth} ${className}`}
style={color ? { color: color.toString(), ...style } : { ...style }}

4
Common/UI/Components/List/List.tsx
View File

@@ -123,9 +123,9 @@ const List: ListFunction = <T extends GenericObject>(
<div className="">
<DragDropContext
onDragEnd={(result: DropResult) => {
result.destination?.index &&
props.onDragDrop &&
if (result.destination?.index && props.onDragDrop) {
props.onDragDrop(result.draggableId, result.destination.index);
}
}}
>
{getListbody()}

3
Common/UI/Components/ModelFormModal/ModelFormModal.tsx
View File

@@ -95,10 +95,11 @@ const ModelFormModal: <TBaseModel extends BaseModel>(
}}
initialValues={props.initialValues}
onSuccess={(data: TBaseModel) => {
props.onSuccess &&
if (props.onSuccess) {
props.onSuccess(
BaseModel.fromJSONObject(data as TBaseModel, props.modelType),
);
}
}}
onError={(error: string) => {
setError(error);

4
Common/UI/Components/ModelList/StaticModelList.tsx
View File

@@ -177,9 +177,9 @@ const StaticModelList: <TBaseModel extends BaseModel>(
return (
<DragDropContext
onDragEnd={(result: DropResult) => {
result.destination?.index &&
props.onDragDrop &&
if (result.destination?.index && props.onDragDrop) {
props.onDragDrop(result.draggableId, result.destination.index);
}
}}
>
{getComponent()}

6
Common/UI/Components/OrderedStatesList/OrderedStatesList.tsx
View File

@@ -78,12 +78,13 @@ const OrderedStatesList: OrderedStatesListFunction = <T extends GenericObject>(
<div
className="m-auto rounded-full items-center cursor-pointer text-gray-400 hover:bg-gray-50 hover:text-gray-600 items-center border border-gray-300 p-5 w-fit"
onClick={() => {
props.onCreateNewItem &&
if (props.onCreateNewItem) {
props.onCreateNewItem(
item[props.orderField]
? (item[props.orderField] as number) + 1
: 0,
);
}
}}
>
<div className="flex text-center">
@@ -124,12 +125,13 @@ const OrderedStatesList: OrderedStatesListFunction = <T extends GenericObject>(
<div
className="m-auto items-center cursor-pointer text-gray-400 hover:bg-gray-50 border hover:text-gray-600 rounded-full border-gray-300 p-5 w-fit"
onClick={() => {
props.onCreateNewItem &&
if (props.onCreateNewItem) {
props.onCreateNewItem(
item[props.orderField]
? (item[props.orderField] as number) + 1
: 0,
);
}
}}
>
<div className="flex items-center ">

7
Common/UI/Components/Table/Table.tsx
View File

@@ -254,9 +254,9 @@ const Table: TableFunction = <T extends GenericObject>(
)}
<DragDropContext
onDragEnd={(result: DropResult) => {
result.destination?.index &&
props.onDragDrop &&
if (result.destination?.index && props.onDragDrop) {
props.onDragDrop(result.draggableId, result.destination.index);
}
}}
>
<div className="-my-2 overflow-x-auto -mx-6">
@@ -282,8 +282,9 @@ const Table: TableFunction = <T extends GenericObject>(
props.onBulkClearAllItems?.();
}}
onAllItemsOnThePageSelected={() => {
props.onBulkSelectItemsOnCurrentPage &&
if (props.onBulkSelectItemsOnCurrentPage) {
props.onBulkSelectItemsOnCurrentPage();
}
}}
isAllItemsOnThePageSelected={isAllItemsOnThePageSelected}
hasTableItems={props.data.length > 0}

30
Dashboard/src/Components/Form/Monitor/MonitorCriteriaInstance.tsx
View File

@@ -131,10 +131,11 @@ const MonitorCriteriaInstanceElement: FunctionComponent<ComponentProps> = (
}
monitorCriteriaInstance.setName(value);
props.onChange &&
if (props.onChange) {
props.onChange(
MonitorCriteriaInstance.clone(monitorCriteriaInstance),
);
}
}}
/>
</div>
@@ -184,10 +185,11 @@ const MonitorCriteriaInstanceElement: FunctionComponent<ComponentProps> = (
});
}
monitorCriteriaInstance.setDescription(value);
props.onChange &&
if (props.onChange) {
props.onChange(
MonitorCriteriaInstance.clone(monitorCriteriaInstance),
);
}
}}
placeholder="This criteria checks if the monitor is online."
/>
@@ -208,10 +210,11 @@ const MonitorCriteriaInstanceElement: FunctionComponent<ComponentProps> = (
monitorCriteriaInstance.setFilterCondition(
value as FilterCondition,
);
props.onChange &&
if (props.onChange) {
props.onChange(
MonitorCriteriaInstance.clone(monitorCriteriaInstance),
);
}
}}
/>
</div>
@@ -228,10 +231,11 @@ const MonitorCriteriaInstanceElement: FunctionComponent<ComponentProps> = (
value={monitorCriteriaInstance?.data?.filters || []}
onChange={(value: Array<CriteriaFilter>) => {
monitorCriteriaInstance.setFilters(value);
props.onChange &&
if (props.onChange) {
props.onChange(
MonitorCriteriaInstance.clone(monitorCriteriaInstance),
);
}
}}
/>
</div>
@@ -248,10 +252,11 @@ const MonitorCriteriaInstanceElement: FunctionComponent<ComponentProps> = (
monitorCriteriaInstance.setMonitorStatusId(undefined);
}
props.onChange &&
if (props.onChange) {
props.onChange(
MonitorCriteriaInstance.clone(monitorCriteriaInstance),
);
}
}}
/>
</div>
@@ -277,10 +282,11 @@ const MonitorCriteriaInstanceElement: FunctionComponent<ComponentProps> = (
monitorCriteriaInstance.setMonitorStatusId(
value ? new ObjectID(value.toString()) : undefined,
);
props.onChange &&
if (props.onChange) {
props.onChange(
MonitorCriteriaInstance.clone(monitorCriteriaInstance),
);
}
}}
/>
</div>
@@ -309,10 +315,11 @@ const MonitorCriteriaInstanceElement: FunctionComponent<ComponentProps> = (
]);
}
props.onChange &&
if (props.onChange) {
props.onChange(
MonitorCriteriaInstance.clone(monitorCriteriaInstance),
);
}
}}
/>
</div>
@@ -327,10 +334,11 @@ const MonitorCriteriaInstanceElement: FunctionComponent<ComponentProps> = (
onCallPolicyDropdownOptions={props.onCallPolicyDropdownOptions}
onChange={(value: Array<CriteriaAlert>) => {
monitorCriteriaInstance.setAlerts(value);
props.onChange &&
if (props.onChange) {
props.onChange(
MonitorCriteriaInstance.clone(monitorCriteriaInstance),
);
}
}}
/>
</div>
@@ -359,10 +367,11 @@ const MonitorCriteriaInstanceElement: FunctionComponent<ComponentProps> = (
]);
}
props.onChange &&
if (props.onChange) {
props.onChange(
MonitorCriteriaInstance.clone(monitorCriteriaInstance),
);
}
}}
/>
</div>
@@ -379,10 +388,11 @@ const MonitorCriteriaInstanceElement: FunctionComponent<ComponentProps> = (
onCallPolicyDropdownOptions={props.onCallPolicyDropdownOptions}
onChange={(value: Array<CriteriaIncident>) => {
monitorCriteriaInstance.setIncidents(value);
props.onChange &&
if (props.onChange) {
props.onChange(
MonitorCriteriaInstance.clone(monitorCriteriaInstance),
);
}
}}
/>
</div>

27
Dashboard/src/Components/Form/Monitor/MonitorStep.tsx
View File

@@ -398,8 +398,9 @@ return {
}
setDestinationInputValue(value);
props.onChange &&
if (props.onChange) {
props.onChange(MonitorStep.clone(monitorStep));
}
}}
/>
</div>
@@ -415,8 +416,9 @@ return {
onChange={(value: string) => {
const port: Port = new Port(value);
monitorStep.setPort(port);
props.onChange &&
if (props.onChange) {
props.onChange(MonitorStep.clone(monitorStep));
}
}}
/>
</div>
@@ -445,8 +447,9 @@ return {
monitorStep.setRequestType(
(value?.toString() as HTTPMethod) || HTTPMethod.GET,
);
props.onChange &&
if (props.onChange) {
props.onChange(MonitorStep.clone(monitorStep));
}
}}
/>
</div>
@@ -506,8 +509,9 @@ return {
initialValue={monitorStep.data?.requestHeaders || {}}
onChange={(value: Dictionary<string>) => {
monitorStep.setRequestHeaders(value);
props.onChange &&
if (props.onChange) {
props.onChange(MonitorStep.clone(monitorStep));
}
}}
/>
</div>
@@ -563,8 +567,9 @@ return {
}
monitorStep.setRequestBody(value);
props.onChange &&
if (props.onChange) {
props.onChange(MonitorStep.clone(monitorStep));
}
}}
/>
</div>
@@ -581,8 +586,9 @@ return {
description="Please check this if you do not want to follow redirects."
onChange={(value: boolean) => {
monitorStep.setDoNotFollowRedirects(value);
props.onChange &&
if (props.onChange) {
props.onChange(MonitorStep.clone(monitorStep));
}
}}
/>
</div>
@@ -688,8 +694,9 @@ return {
type={CodeType.JavaScript}
onChange={(value: string) => {
monitorStep.setCustomCode(value);
props.onChange &&
if (props.onChange) {
props.onChange(MonitorStep.clone(monitorStep));
}
}}
placeholder={codeEditorPlaceholder}
/>
@@ -710,8 +717,9 @@ return {
initialValue={props.value?.data?.browserTypes || []}
onChange={(values: Array<CategoryCheckboxValue>) => {
monitorStep.setBrowserTypes(values as Array<BrowserType>);
props.onChange &&
if (props.onChange) {
props.onChange(MonitorStep.clone(monitorStep));
}
}}
/>
</div>
@@ -731,8 +739,9 @@ return {
initialValue={props.value?.data?.screenSizeTypes || []}
onChange={(values: Array<CategoryCheckboxValue>) => {
monitorStep.setScreenSizeTypes(values as Array<ScreenSizeType>);
props.onChange &&
if (props.onChange) {
props.onChange(MonitorStep.clone(monitorStep));
}
}}
/>
</div>

6
Dashboard/src/Components/Metrics/MetricQueryConfig.tsx
View File

@@ -37,8 +37,9 @@ const MetricGraphConfig: FunctionComponent<ComponentProps> = (
onDataChanged={(data: MetricAliasData) => {
props.onBlur?.();
props.onFocus?.();
props.onChange &&
if (props.onChange) {
props.onChange({ ...props.data, metricAliasData: data });
}
}}
isFormula={false}
/>
@@ -49,8 +50,9 @@ const MetricGraphConfig: FunctionComponent<ComponentProps> = (
onDataChanged={(data: MetricQueryData) => {
props.onBlur?.();
props.onFocus?.();
props.onChange &&
if (props.onChange) {
props.onChange({ ...props.data, metricQueryData: data });
}
}}
metricTypes={props.metricTypes}
telemetryAttributes={props.telemetryAttributes}

21
Dashboard/src/Components/Metrics/MetricView.tsx
View File

@@ -160,7 +160,7 @@ const MetricView: FunctionComponent<ComponentProps> = (
metricTypes[0].name
) {
// then add a default query which would be the first
props.onChange &&
if (props.onChange) {
props.onChange({
...props.data,
queryConfigs: [
@@ -181,6 +181,7 @@ const MetricView: FunctionComponent<ComponentProps> = (
},
],
});
}
}
if (props.data) {
@@ -239,11 +240,12 @@ const MetricView: FunctionComponent<ComponentProps> = (
type={StartAndEndDateType.DateTime}
value={props.data.startAndEndDate || undefined}
onValueChanged={(startAndEndDate: InBetween<Date> | null) => {
props.onChange &&
if (props.onChange) {
props.onChange({
...props.data,
startAndEndDate: startAndEndDate,
});
}
}}
/>
</div>
@@ -263,11 +265,12 @@ const MetricView: FunctionComponent<ComponentProps> = (
...props.data.queryConfigs,
];
newGraphConfigs[index] = data;
props.onChange &&
if (props.onChange) {
props.onChange({
...props.data,
queryConfigs: newGraphConfigs,
});
}
}}
data={queryConfig}
hideCard={props.hideCardInQueryElements}
@@ -284,11 +287,12 @@ const MetricView: FunctionComponent<ComponentProps> = (
];
newGraphConfigs.splice(index, 1);
props.onChange &&
if (props.onChange) {
props.onChange({
...props.data,
queryConfigs: newGraphConfigs,
});
}
}}
/>
);
@@ -311,11 +315,12 @@ const MetricView: FunctionComponent<ComponentProps> = (
...props.data.formulaConfigs,
];
newGraphConfigs[index] = data;
props.onChange &&
if (props.onChange) {
props.onChange({
...props.data,
formulaConfigs: newGraphConfigs,
});
}
}}
data={formulaConfig}
onRemove={() => {
@@ -323,11 +328,12 @@ const MetricView: FunctionComponent<ComponentProps> = (
...props.data.formulaConfigs,
];
newGraphConfigs.splice(index, 1);
props.onChange &&
if (props.onChange) {
props.onChange({
...props.data,
formulaConfigs: newGraphConfigs,
});
}
}}
/>
);
@@ -341,7 +347,7 @@ const MetricView: FunctionComponent<ComponentProps> = (
title="Add Metric"
buttonSize={ButtonSize.Small}
onClick={() => {
props.onChange &&
if (props.onChange) {
props.onChange({
...props.data,
queryConfigs: [
@@ -349,6 +355,7 @@ const MetricView: FunctionComponent<ComponentProps> = (
getEmptyQueryConfigData(),
],
});
}
}}
/>
{/* <Button

4
Dashboard/src/Pages/Global/UserProfile/TwoFactorAuth.tsx
View File

@@ -156,7 +156,9 @@ const Home: FunctionComponent<PageComponentProps> = (): ReactElement => {
props: CustomElementProps,
) => {
if (value && !value["qr"]) {
props?.onChange && props.onChange("code"); // set temporary value to trigger validation. This is a hack to make the form valid.
if (props?.onChange) {
props.onChange("code"); // set temporary value to trigger validation. This is a hack to make the form valid.
}
}
return (
<QRCodeElement