From d04aa43b6d5e4a5b8a2d0c2a55f303a936ab4d4b Mon Sep 17 00:00:00 2001 From: Simon Larsen Date: Sun, 21 Apr 2024 18:37:15 +0100 Subject: [PATCH] Refactor component types and import statements in multiple files --- CommonUI/src/Components/Detail/Detail.tsx | 4 +- CommonUI/src/Components/Detail/Field.ts | 3 +- CommonUI/src/Components/List/List.tsx | 4 +- CommonUI/src/Components/List/ListBody.tsx | 4 +- .../Components/ModelDetail/ModelDetail.tsx | 386 +++++++++--------- .../src/Components/OrderedStatesList/Item.tsx | 4 +- .../OrderedStatesList/OrderedStatesList.tsx | 2 +- CommonUI/src/Components/Table/Table.tsx | 4 +- CommonUI/src/Components/Table/TableCard.tsx | 6 +- .../Components/CustomSMTP/CustomSMTPTable.tsx | 4 +- .../Components/Incident/IncidentsTable.tsx | 47 +-- Dashboard/src/Components/Span/SpanViewer.tsx | 29 +- Dashboard/src/Pages/Incidents/View/Index.tsx | 59 +-- .../src/Pages/StatusPages/View/Owners.tsx | 4 +- .../Pages/StatusPages/View/PrivateUser.tsx | 2 +- 15 files changed, 266 insertions(+), 296 deletions(-) diff --git a/CommonUI/src/Components/Detail/Detail.tsx b/CommonUI/src/Components/Detail/Detail.tsx index 68eb3f95b5c..abb4cb8bfbb 100644 --- a/CommonUI/src/Components/Detail/Detail.tsx +++ b/CommonUI/src/Components/Detail/Detail.tsx @@ -27,7 +27,9 @@ export interface ComponentProps { showDetailsInNumberOfColumns?: number | undefined; } -type DetailFunction = (props: ComponentProps) => ReactElement; +type DetailFunction = ( + props: ComponentProps +) => ReactElement; const Detail: DetailFunction = ( props: ComponentProps diff --git a/CommonUI/src/Components/Detail/Field.ts b/CommonUI/src/Components/Detail/Field.ts index d96b537062b..ce03e00a9e0 100644 --- a/CommonUI/src/Components/Detail/Field.ts +++ b/CommonUI/src/Components/Detail/Field.ts @@ -5,6 +5,7 @@ import AlignItem from '../../Types/AlignItem'; import FieldType from '../Types/FieldType'; import { DropdownOption } from '../Dropdown/Dropdown'; import { Size } from './FieldLabel'; +import { JSONObject } from 'Common/Types/JSON'; export interface DetailSideLink { text: string; @@ -25,7 +26,7 @@ export interface FieldBase { getElement?: | (( item: T, - onBeforeFetchData?: T, + onBeforeFetchData?: JSONObject | undefined, fetchItems?: VoidFunction ) => ReactElement) | undefined; diff --git a/CommonUI/src/Components/List/List.tsx b/CommonUI/src/Components/List/List.tsx index d47bd7791ef..e2e059ec5f8 100644 --- a/CommonUI/src/Components/List/List.tsx +++ b/CommonUI/src/Components/List/List.tsx @@ -42,7 +42,9 @@ export interface ComponentProps { onFilterRefreshClick?: undefined | (() => void); } -type ListFunction = (props: ComponentProps) => ReactElement; +type ListFunction = ( + props: ComponentProps +) => ReactElement; const List: ListFunction = ( props: ComponentProps diff --git a/CommonUI/src/Components/List/ListBody.tsx b/CommonUI/src/Components/List/ListBody.tsx index 2fd6f1b97a2..3bcaa162a18 100644 --- a/CommonUI/src/Components/List/ListBody.tsx +++ b/CommonUI/src/Components/List/ListBody.tsx @@ -17,7 +17,9 @@ export interface ComponentProps { listDetailOptions?: undefined | ListDetailProps; } -type ListBodyFunction = (props: ComponentProps) => ReactElement; +type ListBodyFunction = ( + props: ComponentProps +) => ReactElement; const ListBody: ListBodyFunction = ( props: ComponentProps diff --git a/CommonUI/src/Components/ModelDetail/ModelDetail.tsx b/CommonUI/src/Components/ModelDetail/ModelDetail.tsx index e626b1031cb..ed973d56f85 100644 --- a/CommonUI/src/Components/ModelDetail/ModelDetail.tsx +++ b/CommonUI/src/Components/ModelDetail/ModelDetail.tsx @@ -20,7 +20,7 @@ import User from '../../Utils/User'; import { VoidFunction, PromiseVoidFunction } from 'Common/Types/FunctionTypes'; export interface ComponentProps { - modelType: { new (): TBaseModel }; + modelType: { new(): TBaseModel }; id: string; fields: Array>; onLoadingChange?: undefined | ((isLoading: boolean) => void); @@ -29,7 +29,7 @@ export interface ComponentProps { onItemLoaded?: (item: TBaseModel) => void | undefined; refresher?: undefined | boolean; showDetailsInNumberOfColumns?: number | undefined; - onBeforeFetch?: (() => Promise) | undefined; + onBeforeFetch?: (() => Promise) | undefined; selectMoreFields?: Select; } @@ -38,238 +38,238 @@ const ModelDetail: ( ) => ReactElement = ( props: ComponentProps ): ReactElement => { - const [fields, setFields] = useState>>([]); - const [isLoading, setIsLoading] = useState(true); - const [error, setError] = useState(''); - const [item, setItem] = useState(null); - - const [onBeforeFetchData, setOnBeforeFetchData] = useState< - TBaseModel | undefined - >(undefined); - - type GetSelectFields = () => Select; - - const getSelectFields: GetSelectFields = (): Select => { - const select: Select = {}; - for (const field of props.fields) { - const key: string | null = field.field - ? (Object.keys(field.field)[0] as string) - : null; - - if (key) { - (select as Dictionary)[key] = true; - } - } - - for (const field of Object.keys(props.selectMoreFields || {})) { - (select as Dictionary)[field] = true; - } - - return select; - }; + const [fields, setFields] = useState>>([]); + const [isLoading, setIsLoading] = useState(true); + const [error, setError] = useState(''); + const [item, setItem] = useState(null); - type GetRelationSelectFunction = () => Select; + const [onBeforeFetchData, setOnBeforeFetchData] = useState< + JSONObject | undefined + >(undefined); - const getRelationSelect: GetRelationSelectFunction = - (): Select => { - const relationSelect: Select = {}; + type GetSelectFields = () => Select; - for (const field of props.fields || []) { + const getSelectFields: GetSelectFields = (): Select => { + const select: Select = {}; + for (const field of props.fields) { const key: string | null = field.field ? (Object.keys(field.field)[0] as string) : null; - if (key && new props.modelType()?.isFileColumn(key)) { - (relationSelect as JSONObject)[key] = { - file: true, - _id: true, - type: true, - name: true, - }; - } else if (key && new props.modelType()?.isEntityColumn(key)) { - (relationSelect as JSONObject)[key] = (field.field as any)[ - key - ]; + if (key) { + (select as Dictionary)[key] = true; } } - return relationSelect; - }; - - const setDetailFields: VoidFunction = (): void => { - // set fields. + for (const field of Object.keys(props.selectMoreFields || {})) { + (select as Dictionary)[field] = true; + } - const userPermissions: Array = - PermissionUtil.getAllPermissions(); + return select; + }; - const model: BaseModel = new props.modelType(); + type GetRelationSelectFunction = () => Select; + + const getRelationSelect: GetRelationSelectFunction = + (): Select => { + const relationSelect: Select = {}; + + for (const field of props.fields || []) { + const key: string | null = field.field + ? (Object.keys(field.field)[0] as string) + : null; + + if (key && new props.modelType()?.isFileColumn(key)) { + (relationSelect as JSONObject)[key] = { + file: true, + _id: true, + type: true, + name: true, + }; + } else if (key && new props.modelType()?.isEntityColumn(key)) { + (relationSelect as JSONObject)[key] = (field.field as any)[ + key + ]; + } + } - const accessControl: Dictionary = - model.getColumnAccessControlForAllColumns() || {}; + return relationSelect; + }; - const fieldsToSet: Array> = []; + const setDetailFields: VoidFunction = (): void => { + // set fields. - for (const field of props.fields) { - const keys: Array = Object.keys( - field.field ? field.field : {} - ); + const userPermissions: Array = + PermissionUtil.getAllPermissions(); - if (keys.length > 0) { - const key: keyof TBaseModel = keys[0] as keyof TBaseModel; + const model: BaseModel = new props.modelType(); - let fieldPermissions: Array = []; + const accessControl: Dictionary = + model.getColumnAccessControlForAllColumns() || {}; - fieldPermissions = accessControl[key]?.read || []; + const fieldsToSet: Array> = []; - const hasPermissions: boolean = - fieldPermissions && - PermissionHelper.doesPermissionsIntersect( - userPermissions, - fieldPermissions - ); + for (const field of props.fields) { + const keys: Array = Object.keys( + field.field ? field.field : {} + ); - if (hasPermissions || User.isMasterAdmin()) { + if (keys.length > 0) { + const key: keyof TBaseModel = keys[0] as keyof TBaseModel; + + let fieldPermissions: Array = []; + + fieldPermissions = accessControl[key]?.read || []; + + const hasPermissions: boolean = + fieldPermissions && + PermissionHelper.doesPermissionsIntersect( + userPermissions, + fieldPermissions + ); + + if (hasPermissions || User.isMasterAdmin()) { + fieldsToSet.push({ + ...field, + key: key, + getElement: field.getElement + ? (item: TBaseModel): ReactElement => { + return field.getElement!( + item, + onBeforeFetchData, + fetchItem + ); + } + : undefined, + }); + } + } else { fieldsToSet.push({ ...field, - key: key, + key: null, getElement: field.getElement ? (item: TBaseModel): ReactElement => { - return field.getElement!( - item, - onBeforeFetchData, - fetchItem - ); - } + return field.getElement!( + item, + onBeforeFetchData, + fetchItem + ); + } : undefined, }); } - } else { - fieldsToSet.push({ - ...field, - key: null, - getElement: field.getElement - ? (item: TBaseModel): ReactElement => { - return field.getElement!( - item, - onBeforeFetchData, - fetchItem - ); - } - : undefined, - }); } - } - setFields(fieldsToSet); - }; + setFields(fieldsToSet); + }; - useEffect(() => { - if (props.modelType) { - setDetailFields(); - } - }, [onBeforeFetchData, props.modelType]); - - const fetchItem: PromiseVoidFunction = async (): Promise => { - // get item. - setIsLoading(true); - props.onLoadingChange && props.onLoadingChange(true); - setError(''); - try { - if (props.onBeforeFetch) { - const model: TBaseModel = await props.onBeforeFetch(); - setOnBeforeFetchData(model); + useEffect(() => { + if (props.modelType) { + setDetailFields(); } + }, [onBeforeFetchData, props.modelType]); + + const fetchItem: PromiseVoidFunction = async (): Promise => { + // get item. + setIsLoading(true); + props.onLoadingChange && props.onLoadingChange(true); + setError(''); + try { + if (props.onBeforeFetch) { + const model: JSONObject = await props.onBeforeFetch(); + setOnBeforeFetchData(model); + } - const item: TBaseModel | null = await ModelAPI.getItem({ - modelType: props.modelType, - id: props.modelId, - select: { - ...getSelectFields(), - ...getRelationSelect(), - }, - }); - - if (!item) { - setError( - `Cannot load ${( - new props.modelType()?.singularName || 'item' - ).toLowerCase()}. It could be because you don't have enough permissions to read this ${( - new props.modelType()?.singularName || 'item' - ).toLowerCase()}.` - ); - } + const item: TBaseModel | null = await ModelAPI.getItem({ + modelType: props.modelType, + id: props.modelId, + select: { + ...getSelectFields(), + ...getRelationSelect(), + }, + }); + + if (!item) { + setError( + `Cannot load ${( + new props.modelType()?.singularName || 'item' + ).toLowerCase()}. It could be because you don't have enough permissions to read this ${( + new props.modelType()?.singularName || 'item' + ).toLowerCase()}.` + ); + } + + if (props.onItemLoaded && item) { + props.onItemLoaded(item); + } - if (props.onItemLoaded && item) { - props.onItemLoaded(item); + setItem(item); + } catch (err) { + setError(API.getFriendlyMessage(err)); + props.onError && props.onError(API.getFriendlyMessage(err)); } + setIsLoading(false); + props.onLoadingChange && props.onLoadingChange(false); + }; - setItem(item); - } catch (err) { - setError(API.getFriendlyMessage(err)); - props.onError && props.onError(API.getFriendlyMessage(err)); + useAsyncEffect(async () => { + if (props.modelId && props.modelType) { + await fetchItem(); + } + }, [props.modelId, props.refresher, props.modelType]); + + if (isLoading) { + return ( +
+ +
+ ); } - setIsLoading(false); - props.onLoadingChange && props.onLoadingChange(false); - }; - useAsyncEffect(async () => { - if (props.modelId && props.modelType) { - await fetchItem(); + if (error) { + return ( +

+ {error}
{' '} + { + await fetchItem(); + }} + className="underline primary-on-hover" + > + Refresh? + +

+ ); } - }, [props.modelId, props.refresher, props.modelType]); - if (isLoading) { - return ( -
- -
- ); - } + if (!item) { + return ; + } - if (error) { return ( -

- {error}
{' '} - { - await fetchItem(); - }} - className="underline primary-on-hover" - > - Refresh? - -

+ ); - } - - if (!item) { - return ; - } - - return ( - - ); -}; + }; export default ModelDetail; diff --git a/CommonUI/src/Components/OrderedStatesList/Item.tsx b/CommonUI/src/Components/OrderedStatesList/Item.tsx index a579940ff1a..c63f2f0a73c 100644 --- a/CommonUI/src/Components/OrderedStatesList/Item.tsx +++ b/CommonUI/src/Components/OrderedStatesList/Item.tsx @@ -13,7 +13,9 @@ export interface ComponentProps { getDescriptionElement?: ((item: T) => ReactElement) | undefined; } -type ItemFunction = (props: ComponentProps) => ReactElement; +type ItemFunction = ( + props: ComponentProps +) => ReactElement; const Item: ItemFunction = ( props: ComponentProps diff --git a/CommonUI/src/Components/OrderedStatesList/OrderedStatesList.tsx b/CommonUI/src/Components/OrderedStatesList/OrderedStatesList.tsx index d1d7500e0a8..12b78934ba7 100644 --- a/CommonUI/src/Components/OrderedStatesList/OrderedStatesList.tsx +++ b/CommonUI/src/Components/OrderedStatesList/OrderedStatesList.tsx @@ -26,7 +26,7 @@ export interface ComponentProps { shouldAddItemInTheBeginning?: boolean | undefined; } -type OrderedStatesListFunction = ( +type OrderedStatesListFunction = ( props: ComponentProps ) => ReactElement; diff --git a/CommonUI/src/Components/Table/Table.tsx b/CommonUI/src/Components/Table/Table.tsx index 6d9bfd7c1c0..4783bf94ce6 100644 --- a/CommonUI/src/Components/Table/Table.tsx +++ b/CommonUI/src/Components/Table/Table.tsx @@ -46,7 +46,9 @@ export interface ComponentProps { onDragDrop?: ((id: string, newIndex: number) => void) | undefined; } -const Table = ( +type TableFunction = (props: ComponentProps) => ReactElement; + +const Table: TableFunction = ( props: ComponentProps ): ReactElement => { let colspan: number = props.columns.length || 0; diff --git a/CommonUI/src/Components/Table/TableCard.tsx b/CommonUI/src/Components/Table/TableCard.tsx index 0cfa0e95ddd..d61ad9b7428 100644 --- a/CommonUI/src/Components/Table/TableCard.tsx +++ b/CommonUI/src/Components/Table/TableCard.tsx @@ -10,7 +10,11 @@ export interface ComponentProps { tableProps: TableComponentProps; } -const TableRow = ( +type TableRowFunction = ( + props: ComponentProps +) => ReactElement; + +const TableRow: TableRowFunction = ( props: ComponentProps ): ReactElement => { return ( diff --git a/Dashboard/src/Components/CustomSMTP/CustomSMTPTable.tsx b/Dashboard/src/Components/CustomSMTP/CustomSMTPTable.tsx index 4d028ca2727..33b16eff06c 100644 --- a/Dashboard/src/Components/CustomSMTP/CustomSMTPTable.tsx +++ b/Dashboard/src/Components/CustomSMTP/CustomSMTPTable.tsx @@ -27,7 +27,7 @@ const CustomSMTPTable: FunctionComponent = (): ReactElement => { const [showSMTPTestModal, setShowSMTPTestModal] = useState(false); const [error, setError] = useState(''); const [currentSMTPTestConfig, setCurrentSMTPTestConfig] = - useState(null); + useState(null); const [isSMTPTestLoading, setIsSMTPTestLoading] = useState(false); const [showSuccessModal, setShowSuccessModal] = useState(false); @@ -47,7 +47,7 @@ const CustomSMTPTable: FunctionComponent = (): ReactElement => { buttonStyleType: ButtonStyleType.OUTLINE, icon: IconProp.Play, onClick: async ( - item: JSONObject, + item: ProjectSmtpConfig, onCompleteAction: VoidFunction, onError: ErrorFunction ) => { diff --git a/Dashboard/src/Components/Incident/IncidentsTable.tsx b/Dashboard/src/Components/Incident/IncidentsTable.tsx index 8f738cbc685..a3a61822d2f 100644 --- a/Dashboard/src/Components/Incident/IncidentsTable.tsx +++ b/Dashboard/src/Components/Incident/IncidentsTable.tsx @@ -4,9 +4,8 @@ import React, { FunctionComponent, ReactElement, useState } from 'react'; import Incident from 'Model/Models/Incident'; import ModelTable from 'CommonUI/src/Components/ModelTable/ModelTable'; import MonitorStatus from 'Model/Models/MonitorStatus'; -import { JSONArray, JSONObject } from 'Common/Types/JSON'; +import { JSONObject } from 'Common/Types/JSON'; import Pill from 'CommonUI/src/Components/Pill/Pill'; -import Color from 'Common/Types/Color'; import Monitor from 'Model/Models/Monitor'; import MonitorsElement from '../../Components/Monitor/Monitors'; import IncidentState from 'Model/Models/IncidentState'; @@ -35,6 +34,7 @@ import ObjectID from 'Common/Types/ObjectID'; import { ButtonStyleType } from 'CommonUI/src/Components/Button/Button'; import BaseModel from 'Common/Models/BaseModel'; import FormValues from 'CommonUI/src/Components/Forms/Types/FormValues'; +import { Black } from 'Common/Types/BrandColors'; export interface ComponentProps { query?: Query | undefined; @@ -532,24 +532,16 @@ const IncidentsTable: FunctionComponent = ( title: 'State', type: FieldType.Entity, - getElement: (item: JSONObject): ReactElement => { + getElement: (item: Incident): ReactElement => { if (item['currentIncidentState']) { return ( ); @@ -568,24 +560,16 @@ const IncidentsTable: FunctionComponent = ( title: 'Severity', type: FieldType.Entity, - getElement: (item: JSONObject): ReactElement => { + getElement: (item: Incident): ReactElement => { if (item['incidentSeverity']) { return ( ); @@ -605,15 +589,11 @@ const IncidentsTable: FunctionComponent = ( title: 'Monitors Affected', type: FieldType.EntityArray, - getElement: (item: JSONObject): ReactElement => { + getElement: (item: Incident): ReactElement => { return ( + item['monitors'] || [] } /> ); @@ -636,14 +616,11 @@ const IncidentsTable: FunctionComponent = ( title: 'Labels', type: FieldType.EntityArray, - getElement: (item: JSONObject): ReactElement => { + getElement: (item: Incident): ReactElement => { return ( + item['labels'] || [] } /> ); diff --git a/Dashboard/src/Components/Span/SpanViewer.tsx b/Dashboard/src/Components/Span/SpanViewer.tsx index 5c94846bad0..95d12207395 100644 --- a/Dashboard/src/Components/Span/SpanViewer.tsx +++ b/Dashboard/src/Components/Span/SpanViewer.tsx @@ -157,9 +157,14 @@ const SpanViewer: FunctionComponent = ( }; const getBasicInfo: GetReactElementFunction = (): ReactElement => { + + if (!span) { + return <>; + } + return ( - + item={span} fields={[ { key: 'spanId', @@ -209,11 +214,7 @@ const SpanViewer: FunctionComponent = ( title: 'Starts At', description: 'When did this span start in this trace?', fieldType: FieldType.Element, - getElement: (item: JSONObject) => { - const span = AnalyticsBaseModel.fromJSON( - item, - Span - ) as Span; + getElement: (span: Span) => { return (
@@ -234,11 +235,7 @@ const SpanViewer: FunctionComponent = ( title: 'Ends At', description: 'When did this span end in this trace?', fieldType: FieldType.Element, - getElement: (item: JSONObject) => { - const span = AnalyticsBaseModel.fromJSON( - item, - Span - ) as Span; + getElement: (span: Span) => { return (
@@ -259,11 +256,7 @@ const SpanViewer: FunctionComponent = ( title: 'Duration', description: 'The duration of the span.', fieldType: FieldType.Element, - getElement: (item: JSONObject) => { - const span = AnalyticsBaseModel.fromJSON( - item, - Span - ) as Span; + getElement: (span: Span) => { return (
@@ -278,7 +271,7 @@ const SpanViewer: FunctionComponent = ( }, }, { - key: 'spanKind', + key: 'kind', title: 'Span Kind', description: 'The kind of span.', fieldType: FieldType.Text, diff --git a/Dashboard/src/Pages/Incidents/View/Index.tsx b/Dashboard/src/Pages/Incidents/View/Index.tsx index a777b0c8cbb..43bcab559c2 100644 --- a/Dashboard/src/Pages/Incidents/View/Index.tsx +++ b/Dashboard/src/Pages/Incidents/View/Index.tsx @@ -28,6 +28,7 @@ import OnCallDutyPolicy from 'Model/Models/OnCallDutyPolicy'; import { LIMIT_PER_PROJECT } from 'Common/Types/Database/LimitMax'; import CheckboxViewer from 'CommonUI/src/Components/Checkbox/CheckboxViewer'; import { VoidFunction } from 'Common/Types/FunctionTypes'; +import { Black } from 'Common/Types/BrandColors'; const IncidentView: FunctionComponent = ( _props: PageComponentProps @@ -37,7 +38,7 @@ const IncidentView: FunctionComponent = ( return ( {/* Incident View */} - name="Incident Details" cardProps={{ title: 'Incident Details', @@ -163,7 +164,7 @@ const IncidentView: FunctionComponent = ( }, title: 'Current State', fieldType: FieldType.Entity, - getElement: (item: JSONObject): ReactElement => { + getElement: (item: Incident): ReactElement => { if (!item['currentIncidentState']) { throw new BadDataException( 'Incident Status not found' @@ -174,17 +175,13 @@ const IncidentView: FunctionComponent = ( ); @@ -199,7 +196,7 @@ const IncidentView: FunctionComponent = ( }, title: 'Incident Severity', fieldType: FieldType.Entity, - getElement: (item: JSONObject): ReactElement => { + getElement: (item: Incident): ReactElement => { if (!item['incidentSeverity']) { throw new BadDataException( 'Incident Severity not found' @@ -210,17 +207,13 @@ const IncidentView: FunctionComponent = ( ); @@ -235,16 +228,13 @@ const IncidentView: FunctionComponent = ( }, title: 'Monitors Affected', fieldType: FieldType.Element, - getElement: (item: JSONObject): ReactElement => { + getElement: (item: Incident): ReactElement => { return ( + item[ + 'monitors' + ] || [] } /> ); @@ -259,16 +249,11 @@ const IncidentView: FunctionComponent = ( }, title: 'On-Call Duty Policies', fieldType: FieldType.Element, - getElement: (item: JSONObject): ReactElement => { + getElement: (item: Incident): ReactElement => { return ( + item.onCallDutyPolicies || [] } /> ); @@ -288,7 +273,7 @@ const IncidentView: FunctionComponent = ( }, title: 'Notify Status Page Subscribers', fieldType: FieldType.Boolean, - getElement: (item: JSONObject): ReactElement => { + getElement: (item: Incident): ReactElement => { return (
= ( }, title: 'Labels', fieldType: FieldType.Element, - getElement: (item: JSONObject): ReactElement => { + getElement: (item: Incident): ReactElement => { return ( = ( title: 'Acknowledge Incident', fieldType: FieldType.Element, getElement: ( - _item: JSONObject, + _item: Incident, onBeforeFetchData: JSONObject | undefined, fetchItems: VoidFunction | undefined ): ReactElement => { @@ -356,7 +341,7 @@ const IncidentView: FunctionComponent = ( title: 'Resolve Incident', fieldType: FieldType.Element, getElement: ( - _item: JSONObject, + _item: Incident, onBeforeFetchData: JSONObject | undefined, fetchItems: VoidFunction | undefined ): ReactElement => { diff --git a/Dashboard/src/Pages/StatusPages/View/Owners.tsx b/Dashboard/src/Pages/StatusPages/View/Owners.tsx index 3df5a72c99e..863a51b0be3 100644 --- a/Dashboard/src/Pages/StatusPages/View/Owners.tsx +++ b/Dashboard/src/Pages/StatusPages/View/Owners.tsx @@ -105,7 +105,7 @@ const StatusPageOwners: FunctionComponent = ( title: 'Team', type: FieldType.Entity, - getElement: (item: JSONObject): ReactElement => { + getElement: (item: StatusPageOwnerTeam): ReactElement => { if (!item['team']) { throw new BadDataException('Team not found'); } @@ -208,7 +208,7 @@ const StatusPageOwners: FunctionComponent = ( title: 'User', type: FieldType.Entity, - getElement: (item: JSONObject): ReactElement => { + getElement: (item: StatusPageOwnerUser): ReactElement => { if (!item['user']) { throw new BadDataException('User not found'); } diff --git a/Dashboard/src/Pages/StatusPages/View/PrivateUser.tsx b/Dashboard/src/Pages/StatusPages/View/PrivateUser.tsx index c310ceea6f8..ae340d5aa38 100644 --- a/Dashboard/src/Pages/StatusPages/View/PrivateUser.tsx +++ b/Dashboard/src/Pages/StatusPages/View/PrivateUser.tsx @@ -81,7 +81,7 @@ const StatusPageDelete: FunctionComponent = ( title: 'Status', type: FieldType.Password, - getElement: (item: JSONObject): ReactElement => { + getElement: (item: StatusPagePrivateUser): ReactElement => { if (item['password']) { return (