diff --git a/src/Pages/Incidents/DescriptionContent/index.tsx b/src/Pages/Incidents/DescriptionContent/index.tsx index d4806ec..9374ffb 100644 --- a/src/Pages/Incidents/DescriptionContent/index.tsx +++ b/src/Pages/Incidents/DescriptionContent/index.tsx @@ -10,13 +10,13 @@ import styles from './DescriptionContent.module.scss'; const DescriptionContent: React.FC = () => { const { description, slackChannel, incidentName, rcaLink } = useSelector( - (state: IncidentPageState) => state.incidentLog.incidentData, + (state: IncidentPageState) => state.incidentLog.incidentData || {}, ); const incidentParticipants = useSelector( (state: IncidentPageState) => state.incidentLog.participantsData, ); - const renderParticipantList = (type: string): JSX.Element => { + const renderParticipantList = (type: string): JSX.Element | JSX.Element[] => { const list = type === 'participants' ? incidentParticipants?.participants diff --git a/src/Pages/Incidents/Dropdowns/AllDailogBox.tsx b/src/Pages/Incidents/Dropdowns/AllDailogBox.tsx index ef5ca07..9a8ccd1 100644 --- a/src/Pages/Incidents/Dropdowns/AllDailogBox.tsx +++ b/src/Pages/Incidents/Dropdowns/AllDailogBox.tsx @@ -58,7 +58,7 @@ const AllDailogBox: FC = () => { (state: IncidentPageState) => state.incidentLog.incidentData, ); const { updateIncident, startIncidentSearch } = useIncidentApis(); - const incidentId = incidentData?.id?.toString(); + const incidentId = incidentData?.id?.toString() || ''; const reduxDispatch = useDispatch(); const incidentName = incidentData?.incidentName; @@ -80,7 +80,7 @@ const AllDailogBox: FC = () => { return !incidentName || !validate(incidentName); }; - const extractIncidentId = (incidentName: string): number | null => { + const extractIncidentId = (incidentName: string | null): number | null => { if (!incidentName) { return null; } @@ -231,6 +231,16 @@ const AllDailogBox: FC = () => { } }; + const getLabelFromOption = ( + option: SelectPickerOptionProps | SelectPickerOptionProps[], + ): string | undefined => { + if (Array.isArray(option)) { + return option[0]?.label; + } else { + return option.label; + } + }; + return (
{openNotParticipants && ( @@ -372,7 +382,7 @@ const AllDailogBox: FC = () => { color="var(--navi-color-gray-c2)" className={styles['popup-style']} > - {UpdateData?.to?.label || '..'} + {getLabelFromOption(UpdateData?.to) || '..'}
diff --git a/src/Pages/Incidents/Dropdowns/index.tsx b/src/Pages/Incidents/Dropdowns/index.tsx index 93a4890..041f428 100644 --- a/src/Pages/Incidents/Dropdowns/index.tsx +++ b/src/Pages/Incidents/Dropdowns/index.tsx @@ -37,9 +37,11 @@ const Dropdowns: FC = () => { (state: IncidentPageState) => state.incidentLog.incidentData, ); const incidentParticipants = useSelector( - (state: IncidentPageState) => state.incidentLog?.participantsData, + (state: IncidentPageState) => state.incidentLog.participantsData, + ); + const headerData = useSelector( + (state: IncidentPageState) => state.incidentLog.headerData, ); - const headerData = useSelector((state: any) => state.incidentLog.headerData); const [state, dispatch] = useReducer(reducer, initialState); const updatedSeverities = generateOptions(headerData?.severities); @@ -109,7 +111,7 @@ const Dropdowns: FC = () => { }, ); - const handleDropdownClick = (changeType: string) => { + const handleDropdownClick = (changeType: string): (() => void) => { if (isUserParticipantList) { switch (changeType) { case 'severity': @@ -118,6 +120,8 @@ const Dropdowns: FC = () => { return () => handleStatusDropdownClick(); case 'team': return () => handleTeamDropdownClick(); + default: + throw new Error('Invalid change type'); } } else { return handleDisabledDropdownClick; @@ -156,7 +160,7 @@ const Dropdowns: FC = () => { : updateType === StatusType ? initialStatus?.value : initialTeam?.value; - const currentState = currentValue.toString(); + const currentState = currentValue?.toString(); const selectedvalue = Array.isArray(selectedOption) ? selectedOption[0].value : selectedOption.value; diff --git a/src/Pages/Incidents/Header/index.tsx b/src/Pages/Incidents/Header/index.tsx index 6637757..fc386a8 100644 --- a/src/Pages/Incidents/Header/index.tsx +++ b/src/Pages/Incidents/Header/index.tsx @@ -43,7 +43,7 @@ const Header: FC = () => {
- {incidentData?.incidentName} : {incidentData?.title} + {incidentData?.incidentName || '-'} : {incidentData?.title || '-'}
diff --git a/src/Pages/Incidents/JiraLinks/index.tsx b/src/Pages/Incidents/JiraLinks/index.tsx index 431abc2..e635e54 100644 --- a/src/Pages/Incidents/JiraLinks/index.tsx +++ b/src/Pages/Incidents/JiraLinks/index.tsx @@ -151,7 +151,7 @@ const JiraLinks: FC = () => { return (
-
+
  @@ -259,7 +259,7 @@ const JiraLinks: FC = () => {
)}
-
+
); }; diff --git a/src/Pages/Incidents/constants.ts b/src/Pages/Incidents/constants.ts index 3c8cbfd..44f81fd 100644 --- a/src/Pages/Incidents/constants.ts +++ b/src/Pages/Incidents/constants.ts @@ -70,7 +70,7 @@ export interface ResponseType { status: number; } export interface JiraLinkPayload { - incident_id: number; + incident_id: number | null; jira_link: string; user: string; } diff --git a/src/Pages/Incidents/utils.ts b/src/Pages/Incidents/utils.ts index 4328c6d..a11ff73 100644 --- a/src/Pages/Incidents/utils.ts +++ b/src/Pages/Incidents/utils.ts @@ -1,5 +1,4 @@ import { SeverityType, StatusType, TeamType } from './constants'; -import { useMatch } from 'react-router-dom'; export const getUpdateTypeText = (updateType: number): string => { switch (updateType) { case SeverityType: @@ -30,7 +29,7 @@ export const generateOptions = (data: DataItem[]): DataItemModified[] => { })); }; -export const truncateText = (text): string => { +export const truncateText = (text: string): string => { const jiraTicketMatch = text.match(/\/browse\/([^/]+)/); if (jiraTicketMatch && jiraTicketMatch[1]) { return jiraTicketMatch[1]; @@ -38,7 +37,7 @@ export const truncateText = (text): string => { return text; }; -export const linkSanitization = link => { +export const linkSanitization = (link: string): string => { const sanitizedLinkMatch = link.match( /(https:\/\/navihq.atlassian.net\/browse\/[^/]+)/, ); @@ -48,6 +47,10 @@ export const linkSanitization = link => { return link; }; -export const getCurrentData = (data, dataMap, key) => { +export const getCurrentData = ( + data: { [key: string]: any }, + dataMap: { [key: string]: string }, + key: string, +): string => { return dataMap && data[key] ? dataMap[data[key]] : '-'; }; diff --git a/src/slices/IncidentSlice.tsx b/src/slices/IncidentSlice.tsx index da65575..d101045 100644 --- a/src/slices/IncidentSlice.tsx +++ b/src/slices/IncidentSlice.tsx @@ -6,9 +6,10 @@ import { ParticipantsDatatype, UpdateDetailsType, IncidentLogDataType, + IncidentLogPageState, } from '@src/types'; -const initialState = { +const initialState: IncidentLogPageState = { incidentLogData: {} as IncidentLogDataType, incidentData: {} as IncidentDatatype, headerData: {} as HeaderDatatype, @@ -25,34 +26,43 @@ const incidentLogSlice = createSlice({ name: 'incidentLog', initialState, reducers: { - setIncidentLogData: (state, action: PayloadAction) => { + setIncidentLogData: ( + state, + action: PayloadAction, + ): void => { state.incidentLogData = action.payload; }, - setIncidentData: (state, action: PayloadAction) => { + setIncidentData: (state, action: PayloadAction): void => { state.incidentData = action.payload; }, - setHeaderData: (state, action: PayloadAction) => { + setHeaderData: (state, action: PayloadAction): void => { state.headerData = action.payload; }, setParticipantsData: ( state, action: PayloadAction, - ) => { + ): void => { state.participantsData = action.payload; }, - setOpenDialogUpdate: (state, action: PayloadAction) => { + setOpenDialogUpdate: (state, action: PayloadAction): void => { state.openDialogUpdate = action.payload; }, - setOpenDialogDuplicate: (state, action: PayloadAction) => { + setOpenDialogDuplicate: (state, action: PayloadAction): void => { state.openDialogDuplicate = action.payload; }, - setOpenDialogResolve: (state, action: PayloadAction) => { + setOpenDialogResolve: (state, action: PayloadAction): void => { state.openDialogResolve = action.payload; }, - setOpenDialognotParticipants: (state, action: PayloadAction) => { + setOpenDialognotParticipants: ( + state, + action: PayloadAction, + ): void => { state.openDialognotParticipants = action.payload; }, - setUpdateDetails: (state, action: PayloadAction) => { + setUpdateDetails: ( + state, + action: PayloadAction, + ): void => { state.updateDetails = { ...state.updateDetails, ...action.payload }; }, setSelectedOptions: ( @@ -60,9 +70,23 @@ const incidentLogSlice = createSlice({ action: PayloadAction< SelectPickerOptionProps | SelectPickerOptionProps[] >, - ) => { + ): void => { state.selectedOptions = action.payload; }, + resetIncidentLogState: (state): void => { + state.incidentLogData = {} as IncidentLogDataType; + state.incidentData = {} as IncidentDatatype; + state.headerData = {} as HeaderDatatype; + state.participantsData = {} as ParticipantsDatatype; + state.updateDetails = {} as UpdateDetailsType; + state.openDialogUpdate = false; + state.openDialogDuplicate = false; + state.openDialogResolve = false; + state.openDialognotParticipants = false; + state.selectedOptions = {} as + | SelectPickerOptionProps + | SelectPickerOptionProps[]; + }, }, }); diff --git a/src/types/index.d.ts b/src/types/index.d.ts index 37edf4b..9246e10 100644 --- a/src/types/index.d.ts +++ b/src/types/index.d.ts @@ -153,8 +153,8 @@ interface ChangeType { attribute: string; } -export interface IncidentPageState { - incidentLog: IncidentLogData; +export interface IncidentLogPageState { + incidentLogData: IncidentLogDatatype; incidentData: IncidentDatatype; headerData: HeaderDatatype; participantsData: ParticipantsDatatype; @@ -165,3 +165,7 @@ export interface IncidentPageState { openDialognotParticipants: boolean; selectedOptions: SelectPickerOptionProps | SelectPickerOptionProps[]; } + +export interface IncidentPageState { + incidentLog: IncidentLogPageState; +}