diff --git a/frontend/src/components/Alerts/AlertBannerLayout.tsx b/frontend/src/components/Alerts/AlertBannerLayout.tsx new file mode 100644 index 000000000..f4f88f97b --- /dev/null +++ b/frontend/src/components/Alerts/AlertBannerLayout.tsx @@ -0,0 +1,28 @@ +import { ReactNode } from 'react' +import { Typography } from '@equinor/eds-core-react' +import { Icons } from 'utils/icons' +import { AlertContainer, AlertIndent, StyledAlertIcon, StyledAlertTitle } from './AlertStyles' + +export const AlertBannerLayout = ({ + icon, + iconColor, + title, + message, +}: { + icon: Icons + iconColor: string + title: string + message: ReactNode +}) => ( + + + + {title} + + + + {message} + + + +) diff --git a/frontend/src/components/Alerts/AlertContent.tsx b/frontend/src/components/Alerts/AlertContent.tsx new file mode 100644 index 000000000..3c9230f51 --- /dev/null +++ b/frontend/src/components/Alerts/AlertContent.tsx @@ -0,0 +1,112 @@ +import { ReactElement } from 'react' +import { tokens } from '@equinor/eds-tokens' +import { Mission } from 'models/Mission' +import { Icons } from 'utils/icons' +import { AlertType, AutoScheduleFailedMissionDict } from 'components/Contexts/AlertContext' +import { useLanguageContext } from 'components/Contexts/LanguageContext' +import { AlertCategory } from './AlertsBanner' +import { AlertListContents } from './AlertsListItem' +import { AlertBannerLayout } from './AlertBannerLayout' +import { AutoScheduleFailContent } from './AutoScheduleFailAlert' +import { FailedMissionAlertContent, FailedMissionAlertListContent } from './FailedMissionAlert' +import { DockAlertContent, DockAlertListContent } from './DockAlert' + +const dangerColor = tokens.colors.interactive.danger__resting.hex +const infoColor = tokens.colors.interactive.primary__resting.hex + +export type AlertContent = + | { kind: 'failedMissions'; missions: Mission[] } + | { kind: 'autoScheduleFail'; failedMissions: AutoScheduleFailedMissionDict } + | { kind: 'dock'; dockType: AlertType } + | { kind: 'requestFail'; message: string } + | { kind: 'failure'; title: string; message: string } + | { kind: 'info'; title: string; message: string } + +export const getAlertCategory = (content: AlertContent): AlertCategory => { + switch (content.kind) { + case 'dock': + return content.dockType === AlertType.RequestDock ? AlertCategory.WARNING : AlertCategory.INFO + case 'info': + return AlertCategory.INFO + default: + return AlertCategory.ERROR + } +} + +export const AlertBannerContent = ({ content }: { content: AlertContent }): ReactElement => { + const { TranslateText } = useLanguageContext() + switch (content.kind) { + case 'failedMissions': + return + case 'autoScheduleFail': + return + case 'dock': + return + case 'requestFail': + return ( + + ) + case 'failure': + return ( + + ) + case 'info': + return ( + + ) + } +} + +export const AlertListItemContent = ({ content }: { content: AlertContent }): ReactElement => { + const { TranslateText } = useLanguageContext() + switch (content.kind) { + case 'failedMissions': + return + case 'autoScheduleFail': + return + case 'dock': + return + case 'requestFail': + return ( + + ) + case 'failure': + return ( + + ) + case 'info': + return ( + + ) + } +} diff --git a/frontend/src/components/Alerts/AlertsListItem.tsx b/frontend/src/components/Alerts/AlertsListItem.tsx index 4cb79d5ed..283ebf52c 100644 --- a/frontend/src/components/Alerts/AlertsListItem.tsx +++ b/frontend/src/components/Alerts/AlertsListItem.tsx @@ -5,7 +5,6 @@ import { TaskStatus } from 'models/Task' import { ReactNode } from 'react' import styled from 'styled-components' import { Icons } from 'utils/icons' -import { AlertCategory } from './AlertsBanner' const StyledListContainer = styled.div` width: 330px; @@ -70,7 +69,6 @@ interface AlertListInfo { interface AlertProps { children: ReactNode dismissAlert: () => void - alertCategory: AlertCategory } export const AlertListContents = ({ icon, iconColor, alertTitle, alertText, mission }: AlertListInfo) => { diff --git a/frontend/src/components/Alerts/AutoScheduleFailAlert.tsx b/frontend/src/components/Alerts/AutoScheduleFailAlert.tsx new file mode 100644 index 000000000..30521c876 --- /dev/null +++ b/frontend/src/components/Alerts/AutoScheduleFailAlert.tsx @@ -0,0 +1,26 @@ +import { Typography } from '@equinor/eds-core-react' +import { tokens } from '@equinor/eds-tokens' +import { Icons } from 'utils/icons' +import { AutoScheduleFailedMissionDict } from 'components/Contexts/AlertContext' +import { useLanguageContext } from 'components/Contexts/LanguageContext' +import { AlertContainer, AlertIndent, StyledAlertIcon, StyledAlertTitle } from './AlertStyles' + +export const AutoScheduleFailContent = ({ failedMissions }: { failedMissions: AutoScheduleFailedMissionDict }) => { + const { TranslateText } = useLanguageContext() + const iconColor = tokens.colors.interactive.danger__resting.hex + return ( + + + + {TranslateText('Failed to Auto Schedule Missions')} + + + {Object.keys(failedMissions).map((missionId) => ( + + {failedMissions[missionId]} + + ))} + + + ) +} diff --git a/frontend/src/components/Alerts/FailedAlertContent.tsx b/frontend/src/components/Alerts/FailedAlertContent.tsx deleted file mode 100644 index 6acd844a1..000000000 --- a/frontend/src/components/Alerts/FailedAlertContent.tsx +++ /dev/null @@ -1,62 +0,0 @@ -import { Typography } from '@equinor/eds-core-react' -import { useLanguageContext } from 'components/Contexts/LanguageContext' -import { Icons } from 'utils/icons' -import { tokens } from '@equinor/eds-tokens' -import { AlertListContents } from './AlertsListItem' -import { AutoScheduleFailedMissionDict } from 'components/Contexts/AlertContext' -import { AlertContainer, AlertIndent, StyledAlertIcon, StyledAlertTitle } from './AlertStyles' - -export const FailedAlertContent = ({ title, message }: { title: string; message: string }) => { - const iconColor = tokens.colors.interactive.danger__resting.hex - - return ( - - - - {title} - - - - {message} - - - - ) -} - -export const FailedAlertListContent = ({ title, message }: { title: string; message: string }) => { - const { TranslateText } = useLanguageContext() - return ( - - ) -} - -export const FailedAutoMissionAlertContent = ({ - autoScheduleFailedMissionDict, -}: { - autoScheduleFailedMissionDict: AutoScheduleFailedMissionDict -}) => { - const { TranslateText } = useLanguageContext() - const iconColor = tokens.colors.interactive.danger__resting.hex - - return ( - - - - {TranslateText('Failed to Auto Schedule Missions')} - - - {Object.keys(autoScheduleFailedMissionDict).map((missionId) => ( - - {autoScheduleFailedMissionDict[missionId]} - - ))} - - - ) -} diff --git a/frontend/src/components/Alerts/FailedRequestAlert.tsx b/frontend/src/components/Alerts/FailedRequestAlert.tsx deleted file mode 100644 index f07b631bb..000000000 --- a/frontend/src/components/Alerts/FailedRequestAlert.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import { useLanguageContext } from 'components/Contexts/LanguageContext' -import { Icons } from 'utils/icons' -import { tokens } from '@equinor/eds-tokens' -import { AlertListContents } from './AlertsListItem' -import { FailedAlertContent } from './FailedAlertContent' - -export const FailedRequestAlertContent = ({ translatedMessage }: { translatedMessage: string }) => { - const { TranslateText } = useLanguageContext() - return -} - -export const FailedRequestAlertListContent = ({ translatedMessage }: { translatedMessage: string }) => { - const { TranslateText } = useLanguageContext() - return ( - - ) -} diff --git a/frontend/src/components/Alerts/InfoAlertContent.tsx b/frontend/src/components/Alerts/InfoAlertContent.tsx deleted file mode 100644 index ab267b970..000000000 --- a/frontend/src/components/Alerts/InfoAlertContent.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import { Typography } from '@equinor/eds-core-react' -import { Icons } from 'utils/icons' -import { tokens } from '@equinor/eds-tokens' -import { AlertListContents } from './AlertsListItem' -import { AlertContainer, AlertIndent, StyledAlertIcon, StyledAlertTitle } from './AlertStyles' - -export const InfoAlertContent = ({ title, message }: { title: string; message: string }) => { - const iconColor = tokens.colors.interactive.danger__resting.hex - return ( - - - - {title} - - - - {message} - - - - ) -} - -export const InfoAlertListContent = ({ title, message }: { title: string; message: string }) => { - return ( - - ) -} diff --git a/frontend/src/components/Contexts/AlertContext.tsx b/frontend/src/components/Contexts/AlertContext.tsx index c1a1d351e..47ef58a6e 100644 --- a/frontend/src/components/Contexts/AlertContext.tsx +++ b/frontend/src/components/Contexts/AlertContext.tsx @@ -1,25 +1,16 @@ -import { createContext, FC, ReactNode, useContext, useEffect, useState } from 'react' +import { createContext, FC, useContext, useEffect, useState } from 'react' import { addMinutes, max } from 'date-fns' import { Mission, MissionStatus } from 'models/Mission' -import { FailedMissionAlertContent, FailedMissionAlertListContent } from 'components/Alerts/FailedMissionAlert' import { SignalREventLabels, useSignalRContext } from './SignalRContext' import { Alert } from 'models/Alert' import { useAssetContext } from './AssetContext' import { RobotStatus } from 'models/Robot' -import { - FailedAlertContent, - FailedAlertListContent, - FailedAutoMissionAlertContent, -} from 'components/Alerts/FailedAlertContent' import { convertUTCDateToLocalDate } from 'utils/StringFormatting' -import { AlertCategory } from 'components/Alerts/AlertsBanner' -import { DockAlertContent, DockAlertListContent } from 'components/Alerts/DockAlert' import { useLanguageContext } from './LanguageContext' -import { FailedRequestAlertContent, FailedRequestAlertListContent } from 'components/Alerts/FailedRequestAlert' -import { InfoAlertContent, InfoAlertListContent } from 'components/Alerts/InfoAlertContent' import { useBackendApi } from 'api/UseBackendApi' import { AuthContext } from './AuthContext' import { InstallationContext } from './InstallationContext' +import type { AlertContent } from 'components/Alerts/AlertContent' export enum AlertType { MissionFail, @@ -40,52 +31,48 @@ const alertTypeEnumMap: { [key: string]: AlertType } = { skipAutoMission: AlertType.InfoAlert, } -export type AlertDictionaryType = { - [key in AlertType]?: { content: ReactNode | undefined; dismissFunction: () => void; alertCategory: AlertCategory } +interface ActiveAlert { + content: AlertContent + dismiss: () => void } +export type AlertMap = Partial> + interface IAlertContext { - alerts: AlertDictionaryType - setAlert: (source: AlertType, alert: ReactNode, category: AlertCategory) => void - clearAlerts: () => void + alerts: AlertMap + raiseAlert: (source: AlertType, content: AlertContent) => void clearAlert: (source: AlertType) => void - listAlerts: AlertDictionaryType - setListAlert: (source: AlertType, listAlert: ReactNode, category: AlertCategory) => void - clearListAlerts: () => void - clearListAlert: (source: AlertType) => void + clearAlerts: () => void } interface Props { children: React.ReactNode } -const defaultAlertInterface = { +const defaultAlertInterface: IAlertContext = { alerts: {}, - setAlert: () => {}, - clearAlerts: () => {}, + raiseAlert: () => {}, clearAlert: () => {}, - listAlerts: {}, - setListAlert: () => {}, - clearListAlerts: () => {}, - clearListAlert: () => {}, + clearAlerts: () => {}, } export interface AutoScheduleFailedMissionDict { [key: string]: string } +const autoScheduleStorageKey = 'autoScheduleFailedMissionDict' + const AlertContext = createContext(defaultAlertInterface) export const AlertProvider: FC = ({ children }) => { - const [alerts, setAlerts] = useState(defaultAlertInterface.alerts) - const [listAlerts, setListAlerts] = useState(defaultAlertInterface.listAlerts) + const [alerts, setAlerts] = useState({}) const [recentFailedMissions, setRecentFailedMissions] = useState([]) const { registerEvent, connectionReady } = useSignalRContext() const { TranslateText } = useLanguageContext() const { enabledRobots } = useAssetContext() const { installation } = useContext(InstallationContext) const [autoScheduleFailedMissionDict, setAutoScheduleFailedMissionDict] = useState( - JSON.parse(window.localStorage.getItem('autoScheduleFailedMissionDict') || '{}') + JSON.parse(window.localStorage.getItem(autoScheduleStorageKey) || '{}') ) const backendApi = useBackendApi() const { isAuthenticated } = useContext(AuthContext) @@ -97,28 +84,19 @@ export const AlertProvider: FC = ({ children }) => { const maxTimeInterval: number = 60 const dismissMissionFailTimeKey: string = 'lastMissionFailDismissalTime' - const setAlert = (source: AlertType, alert: ReactNode, category: AlertCategory) => { - setAlerts((oldAlerts) => { - return { - ...oldAlerts, - [source]: { content: alert, dismissFunction: () => clearAlert(source), alertCategory: category }, - } - }) - } - - const clearAlerts = () => setAlerts({}) - - const clearAlert = (source: AlertType) => { + const applyDismissSideEffects = (source: AlertType) => { if (source === AlertType.MissionFail) { sessionStorage.setItem(dismissMissionFailTimeKey, JSON.stringify(Date.now())) setRecentFailedMissions([]) } - if (source === AlertType.AutoScheduleFail) { setAutoScheduleFailedMissionDict({}) - window.localStorage.setItem('autoScheduleFailedMissionDict', JSON.stringify({})) + window.localStorage.setItem(autoScheduleStorageKey, JSON.stringify({})) } + } + const clearAlert = (source: AlertType) => { + applyDismissSideEffects(source) setAlerts((oldAlerts) => { const newAlerts = { ...oldAlerts } delete newAlerts[source] @@ -126,36 +104,14 @@ export const AlertProvider: FC = ({ children }) => { }) } - const setListAlert = (source: AlertType, listAlert: ReactNode, category: AlertCategory) => { - setListAlerts((oldListAlerts) => { - return { - ...oldListAlerts, - [source]: { - content: listAlert, - dismissFunction: () => clearListAlert(source), - alertCategory: category, - }, - } - }) + const raiseAlert = (source: AlertType, content: AlertContent) => { + setAlerts((oldAlerts) => ({ + ...oldAlerts, + [source]: { content, dismiss: () => clearAlert(source) }, + })) } - const clearListAlerts = () => setListAlerts({}) - - const clearListAlert = (source: AlertType) => { - if (source === AlertType.MissionFail) - sessionStorage.setItem(dismissMissionFailTimeKey, JSON.stringify(Date.now())) - - if (source === AlertType.AutoScheduleFail) { - setAutoScheduleFailedMissionDict({}) - window.localStorage.setItem('autoScheduleFailedMissionDict', JSON.stringify({})) - } - - setListAlerts((oldListAlerts) => { - const newListAlerts = { ...oldListAlerts } - delete newListAlerts[source] - return newListAlerts - }) - } + const clearAlerts = () => setAlerts({}) const getLastDismissalTime = (): Date => { const sessionValue = sessionStorage.getItem(dismissMissionFailTimeKey) @@ -188,20 +144,10 @@ export const AlertProvider: FC = ({ children }) => { setRecentFailedMissions(newRecentFailedMissions) }) .catch(() => { - setAlert( - AlertType.RequestFail, - , - AlertCategory.ERROR - ) - setListAlert( - AlertType.RequestFail, - , - AlertCategory.ERROR - ) + raiseAlert(AlertType.RequestFail, { + kind: 'requestFail', + message: TranslateText('Failed to retrieve failed missions'), + }) }) } if (!recentFailedMissions || recentFailedMissions.length === 0) updateRecentFailedMissions() @@ -247,40 +193,26 @@ export const AlertProvider: FC = ({ children }) => { if (backendAlert.robotId !== null && !enabledRobots.filter((r) => r.id === backendAlert.robotId)) return if (alertType === AlertType.AutoScheduleFail) { - const newAutoScheduleFailedMissionDict: AutoScheduleFailedMissionDict = { - ...autoScheduleFailedMissionDict, - } - newAutoScheduleFailedMissionDict[backendAlert.alertTitle] = backendAlert.alertMessage - setAutoScheduleFailedMissionDict(newAutoScheduleFailedMissionDict) - window.localStorage.setItem( - 'autoScheduleFailedMissionDict', - JSON.stringify(newAutoScheduleFailedMissionDict) - ) + setAutoScheduleFailedMissionDict((oldDict) => { + const newDict = { ...oldDict, [backendAlert.alertTitle]: backendAlert.alertMessage } + window.localStorage.setItem(autoScheduleStorageKey, JSON.stringify(newDict)) + return newDict + }) return } if (alertType === AlertType.InfoAlert) { - setAlert( - alertType, - , - AlertCategory.INFO - ) - setListAlert( - alertType, - , - AlertCategory.INFO - ) + raiseAlert(alertType, { + kind: 'info', + title: backendAlert.alertTitle, + message: backendAlert.alertMessage, + }) } else { - setAlert( - alertType, - , - AlertCategory.ERROR - ) - setListAlert( - alertType, - , - AlertCategory.ERROR - ) + raiseAlert(alertType, { + kind: 'failure', + title: backendAlert.alertTitle, + message: backendAlert.alertMessage, + }) } }) } @@ -316,63 +248,31 @@ export const AlertProvider: FC = ({ children }) => { const showDockAlert = activeSendToDockAlertType !== undefined && activeSendToDockAlertType !== dismissedDockAlertType - const combinedAlerts: AlertDictionaryType = { ...alerts } - const combinedListAlerts: AlertDictionaryType = { ...listAlerts } + const allAlerts: AlertMap = { ...alerts } if (recentFailedMissions.length > 0) { - combinedAlerts[AlertType.MissionFail] = { - content: , - dismissFunction: () => clearAlert(AlertType.MissionFail), - alertCategory: AlertCategory.ERROR, - } - combinedListAlerts[AlertType.MissionFail] = { - content: , - dismissFunction: () => clearListAlert(AlertType.MissionFail), - alertCategory: AlertCategory.ERROR, + allAlerts[AlertType.MissionFail] = { + content: { kind: 'failedMissions', missions: recentFailedMissions }, + dismiss: () => clearAlert(AlertType.MissionFail), } } if (Object.keys(autoScheduleFailedMissionDict).length > 0) { - combinedAlerts[AlertType.AutoScheduleFail] = { - content: , - dismissFunction: () => clearAlert(AlertType.AutoScheduleFail), - alertCategory: AlertCategory.ERROR, - } - combinedListAlerts[AlertType.AutoScheduleFail] = { - content: , - dismissFunction: () => clearListAlert(AlertType.AutoScheduleFail), - alertCategory: AlertCategory.ERROR, + allAlerts[AlertType.AutoScheduleFail] = { + content: { kind: 'autoScheduleFail', failedMissions: autoScheduleFailedMissionDict }, + dismiss: () => clearAlert(AlertType.AutoScheduleFail), } } if (showDockAlert) { - const dockAlertCategory = - activeSendToDockAlertType === AlertType.RequestDock ? AlertCategory.WARNING : AlertCategory.INFO - combinedAlerts[AlertType.RequestDock] = { - content: , - dismissFunction: () => setDismissedDockAlertType(activeSendToDockAlertType), - alertCategory: dockAlertCategory, - } - combinedListAlerts[AlertType.RequestDock] = { - content: , - dismissFunction: () => setDismissedDockAlertType(activeSendToDockAlertType), - alertCategory: dockAlertCategory, + allAlerts[AlertType.RequestDock] = { + content: { kind: 'dock', dockType: activeSendToDockAlertType! }, + dismiss: () => setDismissedDockAlertType(activeSendToDockAlertType), } } return ( - + {children} ) diff --git a/frontend/src/components/Contexts/AssetContext.tsx b/frontend/src/components/Contexts/AssetContext.tsx index ff153fd6d..781be557e 100644 --- a/frontend/src/components/Contexts/AssetContext.tsx +++ b/frontend/src/components/Contexts/AssetContext.tsx @@ -3,8 +3,6 @@ import { RobotPropertyUpdate, RobotWithoutTelemetry, robotTelemetryPropsList } f import { SignalREventLabels, useSignalRContext } from './SignalRContext' import { useLanguageContext } from './LanguageContext' import { AlertType, useAlertContext } from './AlertContext' -import { FailedRequestAlertContent, FailedRequestAlertListContent } from 'components/Alerts/FailedRequestAlert' -import { AlertCategory } from 'components/Alerts/AlertsBanner' import { InspectionArea } from 'models/InspectionArea' import { useBackendApi } from 'api/UseBackendApi' import { InstallationContext } from './InstallationContext' @@ -40,7 +38,7 @@ export const AssetProvider: FC = ({ children }) => { const { registerEvent, connectionReady } = useSignalRContext() const { TranslateText } = useLanguageContext() - const { setAlert, setListAlert } = useAlertContext() + const { raiseAlert } = useAlertContext() const backendApi = useBackendApi() @@ -106,18 +104,10 @@ export const AssetProvider: FC = ({ children }) => { setEnabledRobots(robots) }) .catch(() => { - setAlert( - AlertType.RequestFail, - , - AlertCategory.ERROR - ) - setListAlert( - AlertType.RequestFail, - , - AlertCategory.ERROR - ) + raiseAlert(AlertType.RequestFail, { + kind: 'requestFail', + message: TranslateText('Failed to retrieve robots'), + }) }) }, []) @@ -133,24 +123,12 @@ export const AssetProvider: FC = ({ children }) => { setInstallationInspectionAreas(inspectionAreas) }) .catch(() => { - setAlert( - AlertType.RequestFail, - , - AlertCategory.ERROR - ) - setListAlert( - AlertType.RequestFail, - , - AlertCategory.ERROR - ) + raiseAlert(AlertType.RequestFail, { + kind: 'requestFail', + message: TranslateText('Failed to retrieve inspection areas on installation {0}', [ + installation.installationCode, + ]), + }) }) }, []) diff --git a/frontend/src/components/Contexts/MissionControlContext.tsx b/frontend/src/components/Contexts/MissionControlContext.tsx index 8ac6e9560..2bd0d1658 100644 --- a/frontend/src/components/Contexts/MissionControlContext.tsx +++ b/frontend/src/components/Contexts/MissionControlContext.tsx @@ -1,7 +1,5 @@ import { createContext, useContext, useState, FC } from 'react' import { AlertType, useAlertContext } from './AlertContext' -import { FailedRequestAlertContent, FailedRequestAlertListContent } from 'components/Alerts/FailedRequestAlert' -import { AlertCategory } from 'components/Alerts/AlertsBanner' import { useLanguageContext } from './LanguageContext' import { useAssetContext } from './AssetContext' import { MissionStatusRequest } from 'pages/FrontPage/MissionOverview/StopDialogs' @@ -33,7 +31,7 @@ const defaultManagementState: IMissionControlState = { export const MissionControlProvider: FC = ({ children }) => { const { TranslateText } = useLanguageContext() const { enabledRobots } = useAssetContext() - const { setAlert, setListAlert } = useAlertContext() + const { raiseAlert } = useAlertContext() const [missionControlState, setMissionControlState] = useState(defaultManagementState) const backendApi = useBackendApi() @@ -46,20 +44,10 @@ export const MissionControlProvider: FC = ({ children }) => { const updateRobotMissionState = (newState: MissionStatusRequest, robotId: string) => { const robot = enabledRobots.find((r) => r.id === robotId) if (!robot) { - setAlert( - AlertType.RequestFail, - , - AlertCategory.ERROR - ) - setListAlert( - AlertType.RequestFail, - , - AlertCategory.ERROR - ) + raiseAlert(AlertType.RequestFail, { + kind: 'requestFail', + message: TranslateText('Unable to find robot with ID {0}', [robotId]), + }) return } @@ -70,20 +58,10 @@ export const MissionControlProvider: FC = ({ children }) => { backendApi .pauseMission(robotId) .catch(() => { - setAlert( - AlertType.RequestFail, - , - AlertCategory.ERROR - ) - setListAlert( - AlertType.RequestFail, - , - AlertCategory.ERROR - ) + raiseAlert(AlertType.RequestFail, { + kind: 'requestFail', + message: TranslateText('Failed to pause mission on {0}', [robotName]), + }) }) .finally(() => { setIsWaitingForResponse(robotId, false) @@ -95,20 +73,10 @@ export const MissionControlProvider: FC = ({ children }) => { backendApi .resumeMission(robotId) .catch(() => { - setAlert( - AlertType.RequestFail, - , - AlertCategory.ERROR - ) - setListAlert( - AlertType.RequestFail, - , - AlertCategory.ERROR - ) + raiseAlert(AlertType.RequestFail, { + kind: 'requestFail', + message: TranslateText('Failed to resume mission on {0}', [robotName]), + }) }) .finally(() => { setIsWaitingForResponse(robotId, false) @@ -120,20 +88,10 @@ export const MissionControlProvider: FC = ({ children }) => { backendApi .stopMission(robotId) .catch(() => { - setAlert( - AlertType.RequestFail, - , - AlertCategory.ERROR - ) - setListAlert( - AlertType.RequestFail, - , - AlertCategory.ERROR - ) + raiseAlert(AlertType.RequestFail, { + kind: 'requestFail', + message: TranslateText('Failed to stop mission on {0}', [robotName]), + }) }) .finally(() => { setIsWaitingForResponse(robotId, false) diff --git a/frontend/src/components/Contexts/MissionDefinitionsContext.tsx b/frontend/src/components/Contexts/MissionDefinitionsContext.tsx index e9fde2401..ce50b0983 100644 --- a/frontend/src/components/Contexts/MissionDefinitionsContext.tsx +++ b/frontend/src/components/Contexts/MissionDefinitionsContext.tsx @@ -3,8 +3,6 @@ import { SignalREventLabels, useSignalRContext } from './SignalRContext' import { MissionDefinition } from 'models/MissionDefinition' import { useLanguageContext } from './LanguageContext' import { AlertType, useAlertContext } from './AlertContext' -import { FailedRequestAlertContent, FailedRequestAlertListContent } from 'components/Alerts/FailedRequestAlert' -import { AlertCategory } from 'components/Alerts/AlertsBanner' import { useBackendApi } from 'api/UseBackendApi' import { InstallationContext } from './InstallationContext' @@ -38,7 +36,7 @@ const useMissionDefinitions = (): IMissionDefinitionsContext => { const { registerEvent, connectionReady } = useSignalRContext() const { installation } = useContext(InstallationContext) const { TranslateText } = useLanguageContext() - const { setAlert, setListAlert } = useAlertContext() + const { raiseAlert } = useAlertContext() const backendApi = useBackendApi() useEffect(() => { @@ -80,20 +78,10 @@ const useMissionDefinitions = (): IMissionDefinitionsContext => { setMissionDefinitions(missionDefinitionsInInstallation ?? []) }) .catch(() => { - setAlert( - AlertType.RequestFail, - , - AlertCategory.ERROR - ) - setListAlert( - AlertType.RequestFail, - , - AlertCategory.ERROR - ) + raiseAlert(AlertType.RequestFail, { + kind: 'requestFail', + message: TranslateText('Failed to retrieve inspection plans'), + }) }) } fetchAndUpdateMissionDefinitions() diff --git a/frontend/src/components/Contexts/MissionRunsContext.tsx b/frontend/src/components/Contexts/MissionRunsContext.tsx index 2f30a1570..33367b089 100644 --- a/frontend/src/components/Contexts/MissionRunsContext.tsx +++ b/frontend/src/components/Contexts/MissionRunsContext.tsx @@ -4,8 +4,6 @@ import { SignalREventLabels, useSignalRContext } from './SignalRContext' import { TaskStatus } from 'models/Task' import { useLanguageContext } from './LanguageContext' import { AlertType, useAlertContext } from './AlertContext' -import { FailedRequestAlertContent, FailedRequestAlertListContent } from 'components/Alerts/FailedRequestAlert' -import { AlertCategory } from 'components/Alerts/AlertsBanner' import { useBackendApi } from 'api/UseBackendApi' import { AuthContext } from './AuthContext' import { InstallationContext } from './InstallationContext' @@ -81,7 +79,7 @@ const useMissionRuns = (): IMissionRunsContext => { const [loadingRobotMissionSet, setLoadingRobotMissionSet] = useState>(new Set()) const { registerEvent, connectionReady } = useSignalRContext() const { TranslateText } = useLanguageContext() - const { setAlert, setListAlert } = useAlertContext() + const { raiseAlert } = useAlertContext() const { installation } = useContext(InstallationContext) const { isAuthenticated } = useContext(AuthContext) const backendApi = useBackendApi() @@ -144,18 +142,10 @@ const useMissionRuns = (): IMissionRunsContext => { pageSize: 100, orderBy: 'StartTime desc', }).catch(() => { - setAlert( - AlertType.RequestFail, - , - AlertCategory.ERROR - ) - setListAlert( - AlertType.RequestFail, - , - AlertCategory.ERROR - ) + raiseAlert(AlertType.RequestFail, { + kind: 'requestFail', + message: TranslateText('Failed to retrieve mission runs'), + }) }) setOngoingMissions(ongoing ?? []) @@ -166,18 +156,10 @@ const useMissionRuns = (): IMissionRunsContext => { pageSize: 100, orderBy: 'CreationTime', }).catch(() => { - setAlert( - AlertType.RequestFail, - , - AlertCategory.ERROR - ) - setListAlert( - AlertType.RequestFail, - , - AlertCategory.ERROR - ) + raiseAlert(AlertType.RequestFail, { + kind: 'requestFail', + message: TranslateText('Failed to retrieve mission runs'), + }) }) setMissionQueue(queue ?? []) diff --git a/frontend/src/components/Dialogs/MissionEditDialog.tsx b/frontend/src/components/Dialogs/MissionEditDialog.tsx index 67da173a4..919ac0faf 100644 --- a/frontend/src/components/Dialogs/MissionEditDialog.tsx +++ b/frontend/src/components/Dialogs/MissionEditDialog.tsx @@ -1,7 +1,5 @@ import { Button, Checkbox, Chip, Textarea, TextField, Typography } from '@equinor/eds-core-react' import { tokens } from '@equinor/eds-tokens' -import { AlertCategory } from 'components/Alerts/AlertsBanner' -import { FailedRequestAlertContent, FailedRequestAlertListContent } from 'components/Alerts/FailedRequestAlert' import { AlertType, useAlertContext } from 'components/Contexts/AlertContext' import { useLanguageContext } from 'components/Contexts/LanguageContext' import { @@ -76,7 +74,7 @@ const SectionLabel = styled.p` const useMissionUpdater = () => { const { TranslateText } = useLanguageContext() - const { setAlert, setListAlert } = useAlertContext() + const { raiseAlert } = useAlertContext() const backendApi = useBackendApi() const updateMission = ( @@ -95,16 +93,10 @@ const useMissionUpdater = () => { .updateMissionDefinition(mission.id, form) .then(onSuccess) .catch(() => { - setAlert( - AlertType.RequestFail, - , - AlertCategory.ERROR - ) - setListAlert( - AlertType.RequestFail, - , - AlertCategory.ERROR - ) + raiseAlert(AlertType.RequestFail, { + kind: 'requestFail', + message: TranslateText('Failed to update inspection'), + }) }) } diff --git a/frontend/src/components/Displays/MissionButtons/MissionRestartButton.tsx b/frontend/src/components/Displays/MissionButtons/MissionRestartButton.tsx index 521782fcd..5c9593665 100644 --- a/frontend/src/components/Displays/MissionButtons/MissionRestartButton.tsx +++ b/frontend/src/components/Displays/MissionButtons/MissionRestartButton.tsx @@ -5,9 +5,7 @@ import { useLanguageContext } from 'components/Contexts/LanguageContext' import styled from 'styled-components' import { useContext, useState } from 'react' import { AlertType, useAlertContext } from 'components/Contexts/AlertContext' -import { FailedRequestAlertContent, FailedRequestAlertListContent } from 'components/Alerts/FailedRequestAlert' import { Mission } from 'models/Mission' -import { AlertCategory } from 'components/Alerts/AlertsBanner' import { ScheduleMissionWithInspectionAreaVerification } from '../InspectionAreaVerificationDialogs/ScheduleMissionWithInspectionAreaVerification' import { useBackendApi } from 'api/UseBackendApi' import { InstallationContext } from 'components/Contexts/InstallationContext' @@ -37,7 +35,7 @@ enum ReRunOptions { export const MissionRestartButton = ({ mission, hasFailedTasks, smallButton }: MissionProps) => { const { TranslateText } = useLanguageContext() const { installation } = useContext(InstallationContext) - const { setAlert, setListAlert } = useAlertContext() + const { raiseAlert } = useAlertContext() const [isOpen, setIsOpen] = useState(false) const [isLocationVerificationOpen, setIsLocationVerificationOpen] = useState(false) const [selectedRerunOption, setSelectedRerunOption] = useState() @@ -55,16 +53,10 @@ export const MissionRestartButton = ({ mission, hasFailedTasks, smallButton }: M .reRunMission(mission.id, option === ReRunOptions.ReRunFailed) .then(() => navigateToHome()) .catch(() => { - setAlert( - AlertType.RequestFail, - , - AlertCategory.ERROR - ) - setListAlert( - AlertType.RequestFail, - , - AlertCategory.ERROR - ) + raiseAlert(AlertType.RequestFail, { + kind: 'requestFail', + message: TranslateText('Failed to rerun mission'), + }) }) setIsLocationVerificationOpen(false) } diff --git a/frontend/src/components/Header/AlertIcon.tsx b/frontend/src/components/Header/AlertIcon.tsx index 9d4d76fde..34a1c7076 100644 --- a/frontend/src/components/Header/AlertIcon.tsx +++ b/frontend/src/components/Header/AlertIcon.tsx @@ -6,6 +6,7 @@ import { useState } from 'react' import styled from 'styled-components' import { Icons } from 'utils/icons' import { AlertListItem } from 'components/Alerts/AlertsListItem' +import { AlertListItemContent } from 'components/Alerts/AlertContent' const Circle = styled.div` position: absolute; @@ -36,7 +37,7 @@ const StyledPopover = styled(Popover)` ` export const AlertIcon = () => { - const { listAlerts } = useAlertContext() + const { alerts } = useAlertContext() const { TranslateText } = useLanguageContext() const [isAlertDialogOpen, setIsAlertDialogOpen] = useState(false) @@ -58,7 +59,7 @@ export const AlertIcon = () => { ref={setReferenceElementNotifications} > - {Object.entries(listAlerts).length !== 0 && ( //Alert banners + {Object.entries(alerts).length !== 0 && ( //Alert banners )} @@ -75,18 +76,14 @@ export const AlertIcon = () => { - {Object.entries(listAlerts).length === 0 && ( + {Object.entries(alerts).length === 0 && ( {TranslateText('No alerts')} )} - {Object.entries(listAlerts).length > 0 && ( + {Object.entries(alerts).length > 0 && ( - {Object.entries(listAlerts).map(([key, value]) => ( - - {value.content} + {Object.entries(alerts).map(([key, value]) => ( + + ))} diff --git a/frontend/src/components/Header/Header.tsx b/frontend/src/components/Header/Header.tsx index fbd55facc..c85430b4c 100644 --- a/frontend/src/components/Header/Header.tsx +++ b/frontend/src/components/Header/Header.tsx @@ -3,8 +3,9 @@ import { tokens } from '@equinor/eds-tokens' import styled from 'styled-components' import { SelectLanguage } from 'components/Header/LanguageSelector' import { Icons } from 'utils/icons' -import { AlertDictionaryType } from 'components/Contexts/AlertContext' +import { AlertMap } from 'components/Contexts/AlertContext' import { AlertBanner } from 'components/Alerts/AlertsBanner' +import { AlertBannerContent, getAlertCategory } from 'components/Alerts/AlertContent' import { FrontPageSectionId } from 'models/FrontPageSectionId' import { AlertIcon } from 'components/Header/AlertIcon' import { useNavigate } from 'react-router-dom' @@ -77,7 +78,7 @@ const AppWrapper = styled.div` ` interface Props { - alertDict?: AlertDictionaryType + alertDict?: AlertMap installation?: Installation } @@ -111,8 +112,12 @@ export const Header = ({ alertDict, installation }: Props) => { {alertDict && Object.entries(alertDict).length > 0 && ( {Object.entries(alertDict).map(([key, value]) => ( - - {value.content} + + ))} diff --git a/frontend/src/pages/FrontPage/MissionOverview/MissionQueueView.tsx b/frontend/src/pages/FrontPage/MissionOverview/MissionQueueView.tsx index 346280ad6..2bd63952d 100644 --- a/frontend/src/pages/FrontPage/MissionOverview/MissionQueueView.tsx +++ b/frontend/src/pages/FrontPage/MissionOverview/MissionQueueView.tsx @@ -4,8 +4,6 @@ import { Mission, placeholderMission } from 'models/Mission' import { useLanguageContext } from 'components/Contexts/LanguageContext' import { useMissionsContext } from 'components/Contexts/MissionRunsContext' import { AlertType, useAlertContext } from 'components/Contexts/AlertContext' -import { FailedRequestAlertContent, FailedRequestAlertListContent } from 'components/Alerts/FailedRequestAlert' -import { AlertCategory } from 'components/Alerts/AlertsBanner' import { RobotWithoutTelemetry } from 'models/Robot' import { tokens } from '@equinor/eds-tokens' import { useEffect, useState } from 'react' @@ -36,7 +34,7 @@ const StyledWrapper = styled.div` export const RobotMissionQueueView = ({ robot }: { robot: RobotWithoutTelemetry }) => { const { TranslateText } = useLanguageContext() const { missionQueue, ongoingMissions, loadingRobotMissionSet, setLoadingRobotMissionSet } = useMissionsContext() - const { setAlert, setListAlert } = useAlertContext() + const { raiseAlert } = useAlertContext() const [isdialogOpen, setIsDialogOpen] = useState(false) const robotMissionQueue = missionQueue.filter((mission) => mission.robot.id === robot.id) @@ -48,36 +46,18 @@ export const RobotMissionQueueView = ({ robot }: { robot: RobotWithoutTelemetry const onDeleteMission = (mission: Mission) => backendApi.deleteMission(mission.id).catch(() => { - setAlert( - AlertType.RequestFail, - , - AlertCategory.ERROR - ) - setListAlert( - AlertType.RequestFail, - , - AlertCategory.ERROR - ) + raiseAlert(AlertType.RequestFail, { + kind: 'requestFail', + message: TranslateText('Failed to delete mission from queue'), + }) }) const onDeleteAllMissions = () => backendApi.deleteAllMissions().catch(() => { - setAlert( - AlertType.RequestFail, - , - AlertCategory.ERROR - ) - setListAlert( - AlertType.RequestFail, - , - AlertCategory.ERROR - ) + raiseAlert(AlertType.RequestFail, { + kind: 'requestFail', + message: TranslateText('Failed to delete all missions from queue'), + }) }) const handleButton = () => { diff --git a/frontend/src/pages/FrontPage/MissionOverview/StopDialogs.tsx b/frontend/src/pages/FrontPage/MissionOverview/StopDialogs.tsx index a1e64b502..dbca3b0a1 100644 --- a/frontend/src/pages/FrontPage/MissionOverview/StopDialogs.tsx +++ b/frontend/src/pages/FrontPage/MissionOverview/StopDialogs.tsx @@ -5,8 +5,6 @@ import { useLanguageContext } from 'components/Contexts/LanguageContext' import { useContext, useState } from 'react' import { useMissionControlContext } from 'components/Contexts/MissionControlContext' import { AlertType, useAlertContext } from 'components/Contexts/AlertContext' -import { FailedRequestAlertContent, FailedRequestAlertListContent } from 'components/Alerts/FailedRequestAlert' -import { AlertCategory } from 'components/Alerts/AlertsBanner' import { useAssetContext } from 'components/Contexts/AssetContext' import { RobotStatus } from 'models/Robot' import { useBackendApi } from 'api/UseBackendApi' @@ -106,7 +104,7 @@ export const StopRobotDialog = () => { const { enabledRobots } = useAssetContext() const { installation } = useContext(InstallationContext) const { TranslateText } = useLanguageContext() - const { setAlert, setListAlert } = useAlertContext() + const { raiseAlert } = useAlertContext() const backendApi = useBackendApi() const dockActivated = @@ -123,16 +121,10 @@ export const StopRobotDialog = () => { const stopAll = () => { backendApi.sendRobotsToDockingPosition(installation.installationCode).catch(() => { - setAlert( - AlertType.RequestFail, - , - AlertCategory.ERROR - ) - setListAlert( - AlertType.RequestFail, - , - AlertCategory.ERROR - ) + raiseAlert(AlertType.RequestFail, { + kind: 'requestFail', + message: TranslateText('Failed to send robots to a dock'), + }) }) closeDialog() return @@ -140,18 +132,10 @@ export const StopRobotDialog = () => { const resetRobots = () => { backendApi.clearEmergencyState(installation.installationCode).catch(() => { - setAlert( - AlertType.RequestFail, - , - AlertCategory.ERROR - ) - setListAlert( - AlertType.RequestFail, - , - AlertCategory.ERROR - ) + raiseAlert(AlertType.RequestFail, { + kind: 'requestFail', + message: TranslateText('Failed to release robots from dock'), + }) }) closeDialog() } diff --git a/frontend/src/pages/InspectionPage/ScheduleMissionDialogs.tsx b/frontend/src/pages/InspectionPage/ScheduleMissionDialogs.tsx index 3c210c132..54e8ade67 100644 --- a/frontend/src/pages/InspectionPage/ScheduleMissionDialogs.tsx +++ b/frontend/src/pages/InspectionPage/ScheduleMissionDialogs.tsx @@ -8,9 +8,7 @@ import { Icons } from 'utils/icons' import { useAssetContext } from 'components/Contexts/AssetContext' import { StyledAutoComplete, StyledButton, StyledDialog } from 'components/Styles/StyledComponents' import { useMissionsContext } from 'components/Contexts/MissionRunsContext' -import { FailedRequestAlertContent, FailedRequestAlertListContent } from 'components/Alerts/FailedRequestAlert' import { AlertType, useAlertContext } from 'components/Contexts/AlertContext' -import { AlertCategory } from 'components/Alerts/AlertsBanner' import { ScheduleMissionWithInspectionAreaVerification } from 'components/Displays/InspectionAreaVerificationDialogs/ScheduleMissionWithInspectionAreaVerification' import { phone_width } from 'utils/constants' import { useBackendApi } from 'api/UseBackendApi' @@ -59,7 +57,7 @@ export const ScheduleMissionDialog = (props: IProps) => { const { TranslateText } = useLanguageContext() const { enabledRobots } = useAssetContext() const { setLoadingRobotMissionSet } = useMissionsContext() - const { setAlert, setListAlert } = useAlertContext() + const { raiseAlert } = useAlertContext() const [isInspectionAreaVerificationDialogOpen, setIsInspectionAreaVerificationDialogOpen] = useState(false) const [missionsToSchedule, setMissionsToSchedule] = useState() const backendApi = useBackendApi() @@ -93,24 +91,10 @@ export const ScheduleMissionDialog = (props: IProps) => { missionsToSchedule.forEach((mission) => { backendApi.scheduleMissionDefinition(mission.id, selectedRobot.id).catch((e) => { - setAlert( - AlertType.RequestFail, - , - AlertCategory.ERROR - ) - setListAlert( - AlertType.RequestFail, - , - AlertCategory.ERROR - ) + raiseAlert(AlertType.RequestFail, { + kind: 'requestFail', + message: TranslateText('Failed to schedule mission') + ` '${mission.name}'. ${e.message}`, + }) setLoadingRobotMissionSet((currentSet: Set) => { const updatedSet: Set = new Set(currentSet) updatedSet.delete(String(mission.name + selectedRobot.id)) diff --git a/frontend/src/pages/MissionDefinitionPage/MissionDefinitionPage.tsx b/frontend/src/pages/MissionDefinitionPage/MissionDefinitionPage.tsx index f4dfec8ce..93fcd5711 100644 --- a/frontend/src/pages/MissionDefinitionPage/MissionDefinitionPage.tsx +++ b/frontend/src/pages/MissionDefinitionPage/MissionDefinitionPage.tsx @@ -12,8 +12,6 @@ import { useMissionDefinitionsContext } from 'components/Contexts/MissionDefinit import { StyledPage, subtleCardShadow } from 'components/Styles/StyledComponents' import styled from 'styled-components' import { AlertType, useAlertContext } from 'components/Contexts/AlertContext' -import { FailedRequestAlertContent, FailedRequestAlertListContent } from 'components/Alerts/FailedRequestAlert' -import { AlertCategory } from 'components/Alerts/AlertsBanner' import { MissionDefinitionTaskTableAndMap } from '../MissionPage/TaskTableAndMap' import { EditButton, FormContainer, FormItem, TitleComponent } from './MissionDefinitionStyledComponents' import { @@ -111,7 +109,7 @@ const MetadataItem = ({ const MissionDefinitionPageBody = ({ missionDefinition }: { missionDefinition: MissionDefinition }) => { const { TranslateText } = useLanguageContext() - const { setAlert, setListAlert } = useAlertContext() + const { raiseAlert } = useAlertContext() const backendApi = useBackendApi() const [isEditingName, setIsEditingName] = useState(false) @@ -125,20 +123,10 @@ const MissionDefinitionPageBody = ({ missionDefinition }: { missionDefinition: M name: missionDefinition.name, } backendApi.updateMissionDefinition(missionDefinition.id, defaultMissionDefinitionForm).catch(() => { - setAlert( - AlertType.RequestFail, - , - AlertCategory.ERROR - ) - setListAlert( - AlertType.RequestFail, - , - AlertCategory.ERROR - ) + raiseAlert(AlertType.RequestFail, { + kind: 'requestFail', + message: TranslateText('Failed to delete auto schedule frequency'), + }) }) } diff --git a/frontend/src/pages/MissionHistoryPage.tsx b/frontend/src/pages/MissionHistoryPage.tsx index d5eb5b870..a4116632f 100644 --- a/frontend/src/pages/MissionHistoryPage.tsx +++ b/frontend/src/pages/MissionHistoryPage.tsx @@ -13,8 +13,6 @@ import { SensorType } from 'models/Inspection' import { tokens } from '@equinor/eds-tokens' import { SmallScreenInfoText } from 'utils/InfoText' import { AlertType, useAlertContext } from 'components/Contexts/AlertContext' -import { FailedRequestAlertContent, FailedRequestAlertListContent } from 'components/Alerts/FailedRequestAlert' -import { AlertCategory } from 'components/Alerts/AlertsBanner' import { StyledLoading, StyledPage, @@ -126,7 +124,7 @@ const MissionHistoryViewComponent = () => { const { installation } = useContext(InstallationContext) const { page, switchPage, filterState, filterIsSet, filterFunctions, filterError, clearFilterError } = useMissionFilterContext() - const { setAlert, setListAlert } = useAlertContext() + const { raiseAlert } = useAlertContext() const { registerEvent, connectionReady } = useSignalRContext() const [filteredMissions, setFilteredMissions] = useState([]) const [paginationDetails, setPaginationDetails] = useState() @@ -192,20 +190,10 @@ const MissionHistoryViewComponent = () => { setIsLoading(false) }) .catch(() => { - setAlert( - AlertType.RequestFail, - , - AlertCategory.ERROR - ) - setListAlert( - AlertType.RequestFail, - , - AlertCategory.ERROR - ) + raiseAlert(AlertType.RequestFail, { + kind: 'requestFail', + message: TranslateText('Failed to retrieve previous mission runs'), + }) }) }, [page, pageSize, filterFunctions]) diff --git a/frontend/src/pages/MissionPage/MissionPage.tsx b/frontend/src/pages/MissionPage/MissionPage.tsx index f6af4b378..17cd0435b 100644 --- a/frontend/src/pages/MissionPage/MissionPage.tsx +++ b/frontend/src/pages/MissionPage/MissionPage.tsx @@ -7,8 +7,6 @@ import { Header } from 'components/Header/Header' import { SignalREventLabels, useSignalRContext } from 'components/Contexts/SignalRContext' import { AlertType, useAlertContext } from 'components/Contexts/AlertContext' import { useLanguageContext } from 'components/Contexts/LanguageContext' -import { FailedRequestAlertContent, FailedRequestAlertListContent } from 'components/Alerts/FailedRequestAlert' -import { AlertCategory } from 'components/Alerts/AlertsBanner' import { useMediaStreamContext } from 'components/Contexts/MediaStreamContext' import { StyledCardsWidth, VideoStreamSection } from 'components/Styles/StyledComponents' import { InspectionDialogView } from '../InspectionReportPage/InspectionView' @@ -47,7 +45,7 @@ const useMissionSelector = (missionId: string | undefined, inspectionId: string const [searchParams, setSearchParams] = useSearchParams() const navigate = useNavigate() const { TranslateText } = useLanguageContext() - const { setAlert, setListAlert } = useAlertContext() + const { raiseAlert } = useAlertContext() const [selectedMission, setSelectedMission] = useState() const { registerEvent, connectionReady } = useSignalRContext() const { mediaStreams, addMediaStreamConfigIfItDoesNotExist } = useMediaStreamContext() @@ -77,20 +75,10 @@ const useMissionSelector = (missionId: string | undefined, inspectionId: string setSelectedMission(mission) }) .catch(() => { - setAlert( - AlertType.RequestFail, - , - AlertCategory.ERROR - ) - setListAlert( - AlertType.RequestFail, - , - AlertCategory.ERROR - ) + raiseAlert(AlertType.RequestFail, { + kind: 'requestFail', + message: TranslateText('Failed to find mission with ID {0}', [missionId]), + }) }) else if (inspectionId) { backendApi diff --git a/frontend/src/pages/RobotPage/InterventionNeededButton.tsx b/frontend/src/pages/RobotPage/InterventionNeededButton.tsx index 4b225a218..3bfd8b819 100644 --- a/frontend/src/pages/RobotPage/InterventionNeededButton.tsx +++ b/frontend/src/pages/RobotPage/InterventionNeededButton.tsx @@ -1,8 +1,6 @@ import { useLanguageContext } from 'components/Contexts/LanguageContext' import { RobotWithoutTelemetry } from 'models/Robot' import { AlertType, useAlertContext } from 'components/Contexts/AlertContext' -import { FailedRequestAlertContent, FailedRequestAlertListContent } from 'components/Alerts/FailedRequestAlert' -import { AlertCategory } from 'components/Alerts/AlertsBanner' import { StyledDialog } from 'components/Styles/StyledComponents' import styled from 'styled-components' import { useState } from 'react' @@ -19,7 +17,7 @@ const StyledTextButton = styled(Button)` export const InterventionNeededButton = ({ robot }: { robot: RobotWithoutTelemetry }) => { const { TranslateText } = useLanguageContext() - const { setAlert, setListAlert } = useAlertContext() + const { raiseAlert } = useAlertContext() const [isDisabled, setIsDisabled] = useState(false) const [isDialogOpen, setIsDialogOpen] = useState(false) const backendApi = useBackendApi() @@ -28,24 +26,10 @@ export const InterventionNeededButton = ({ robot }: { robot: RobotWithoutTelemet disableButton() backendApi.releaseInterventionNeeded(robot.id).catch(() => { - setAlert( - AlertType.RequestFail, - , - AlertCategory.ERROR - ) - setListAlert( - AlertType.RequestFail, - , - AlertCategory.ERROR - ) + raiseAlert(AlertType.RequestFail, { + kind: 'requestFail', + message: TranslateText('Unable to release robot {0} from intervention mode', [robot.name ?? '']), + }) }) } diff --git a/frontend/src/pages/RobotPage/ReturnHomeButton.tsx b/frontend/src/pages/RobotPage/ReturnHomeButton.tsx index 95f4e5123..ef007f063 100644 --- a/frontend/src/pages/RobotPage/ReturnHomeButton.tsx +++ b/frontend/src/pages/RobotPage/ReturnHomeButton.tsx @@ -1,8 +1,6 @@ import { useLanguageContext } from 'components/Contexts/LanguageContext' import { RobotWithoutTelemetry } from 'models/Robot' import { AlertType, useAlertContext } from 'components/Contexts/AlertContext' -import { FailedRequestAlertContent, FailedRequestAlertListContent } from 'components/Alerts/FailedRequestAlert' -import { AlertCategory } from 'components/Alerts/AlertsBanner' import { Button } from '@equinor/eds-core-react' import { tokens } from '@equinor/eds-tokens' import styled from 'styled-components' @@ -18,7 +16,7 @@ const StyledTextButton = styled(Button)` export const ReturnHomeButton = ({ robot }: { robot: RobotWithoutTelemetry }) => { const { TranslateText } = useLanguageContext() - const { setAlert, setListAlert } = useAlertContext() + const { raiseAlert } = useAlertContext() const [isDisabled, setIsDisabled] = useState(false) const backendApi = useBackendApi() @@ -26,20 +24,10 @@ export const ReturnHomeButton = ({ robot }: { robot: RobotWithoutTelemetry }) => disableButton() backendApi.returnRobotToHome(robot.id).catch(() => { - setAlert( - AlertType.RequestFail, - , - AlertCategory.ERROR - ) - setListAlert( - AlertType.RequestFail, - , - AlertCategory.ERROR - ) + raiseAlert(AlertType.RequestFail, { + kind: 'requestFail', + message: TranslateText('Failed to send robot {0} home', [robot.name ?? '']), + }) }) }