Implement alert list feature

frontend/src/components/Alerts/AlertsBanner.tsx

@@ -51,21 +51,19 @@ export const AlertBanner = ({ children, dismissAlert, alertCategory }: AlertProp
     const [buttonBackgroundColor, setButtonBackgroundColor] = useState<string>(bannerColor)
 
     return (
-        <>
-            <StyledCard style={{ backgroundColor: bannerColor }}>
-                <Horizontal>
-                    <Center>{children}</Center>
-                </Horizontal>
-                <Button
-                    variant="ghost_icon"
-                    onClick={dismissAlert}
-                    style={{ backgroundColor: buttonBackgroundColor }}
-                    onPointerEnter={() => setButtonBackgroundColor(hoverColor)}
-                    onPointerLeave={() => setButtonBackgroundColor(bannerColor)}
-                >
-                    <Icon name={Icons.Clear} style={{ color: tokens.colors.text.static_icons__default.hex }}></Icon>
-                </Button>
-            </StyledCard>
-        </>
+        <StyledCard style={{ backgroundColor: bannerColor }}>
+            <Horizontal>
+                <Center>{children}</Center>
+            </Horizontal>
+            <Button
+                variant="ghost_icon"
+                onClick={dismissAlert}
+                style={{ backgroundColor: buttonBackgroundColor }}
+                onPointerEnter={() => setButtonBackgroundColor(hoverColor)}
+                onPointerLeave={() => setButtonBackgroundColor(bannerColor)}
+            >
+                <Icon name={Icons.Clear} style={{ color: tokens.colors.text.static_icons__default.hex }}></Icon>
+            </Button>
+        </StyledCard>
     )
 }

frontend/src/components/Alerts/AlertsListItem.tsx

@@ -0,0 +1,123 @@
+import { Button, Icon, Typography } from '@equinor/eds-core-react'
+import { MissionRestartButton } from 'components/Displays/MissionButtons/MissionRestartButton'
+import { Mission } from 'models/Mission'
+import { TaskStatus, TaskType } 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`
+    isplay: flex;
+    width: 300px;
+    height: auto;
+    justify-content: space-between;
+    align-items: center;
+    padding: 3px 10px 2px 10px;
+`
+
+const outline = styled.div`
+    outline: solid;
+    outline-width: 1px;
+    outline-color: lightgray;
+    padding: 6px 10px 6px 10px;
+`
+
+const StyledListHeading = styled(outline)`
+    display: flex;
+    justify-content: space-between;
+    padding: 6px 5px 6px 5px;
+`
+const StyledListItem = styled(outline)`
+    display: flex;
+    flex-direction: column;
+    align-items: left;
+    row-gap: 10px;
+`
+
+const VerticalContent = styled.div`
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    column-gap: 4px;
+`
+
+const StyledIcon = styled(Icon)`
+    width: 24px;
+    min-width: 24px;
+    height: 24px;
+`
+
+const Horizontal = styled.div`
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: top;
+`
+
+const Right = styled.div`
+    display: flex;
+    align-items: right;
+    justify-content: right;
+`
+
+interface AlertListInfo {
+    icon: Icons
+    alertTitle: string
+    alertText: string
+    iconColor?: string
+    mission?: Mission
+}
+
+interface AlertProps {
+    children: ReactNode
+    dismissAlert: () => void
+    alertCategory: AlertCategory
+}
+
+export const AlertListContents = ({ icon, iconColor, alertTitle, alertText, mission }: AlertListInfo) => {
+    let missionHasFailedTasks = false
+    if (mission !== undefined)
+        missionHasFailedTasks = mission.tasks.some(
+            (t) => t.status !== TaskStatus.PartiallySuccessful && t.status !== TaskStatus.Successful
+        )
+    return (
+        <StyledListContainer>
+            <StyledListHeading>
+                <VerticalContent>
+                    <StyledIcon name={icon} style={{ color: iconColor }} />
+                    <Typography variant="h6">{alertTitle}</Typography>
+                </VerticalContent>
+            </StyledListHeading>
+            <StyledListItem>
+                <Typography variant="caption">{alertText}</Typography>
+                <Right>
+                    {mission !== undefined &&
+                        mission.tasks[0]?.type !== TaskType.ReturnHome &&
+                        mission.tasks[0]?.type !== TaskType.Localization && (
+                            <MissionRestartButton
+                                mission={mission}
+                                hasFailedTasks={missionHasFailedTasks}
+                                smallButton={false}
+                            />
+                        )}
+                </Right>
+            </StyledListItem>
+        </StyledListContainer>
+    )
+}
+
+export const AlertListItem = ({ children, dismissAlert }: AlertProps) => {
+    return (
+        <Horizontal>
+            {children}
+            <Button
+                variant="ghost_icon"
+                onClick={dismissAlert}
+                style={{ marginTop: '0px', right: '25px', position: 'absolute' }}
+            >
+                <Icon name={Icons.Clear}></Icon>
+            </Button>
+        </Horizontal>
+    )
+}

frontend/src/components/Alerts/BlockedRobotAlert.tsx

@@ -4,6 +4,7 @@ import { useLanguageContext } from 'components/Contexts/LanguageContext'
 import { Icons } from 'utils/icons'
 import { tokens } from '@equinor/eds-tokens'
 import { TextAlignedButton } from 'components/Styles/StyledComponents'
+import { AlertListContents } from './AlertsListItem'
 
 const StyledDiv = styled.div`
     align-items: center;
@@ -43,3 +44,19 @@ export const BlockedRobotAlertContent = ({ robotNames }: AlertProps) => {
         </StyledDiv>
     )
 }
+
+export const BlockedRobotAlertListContent = ({ robotNames }: AlertProps) => {
+    const { TranslateText } = useLanguageContext()
+    let message = `${TranslateText('The robot')} ${robotNames[0]} ${TranslateText('is blocked and cannot perform tasks')}.`
+
+    if (robotNames.length > 1) message = `${TranslateText('Several robots are blocked and cannot perform tasks')}.`
+
+    return (
+        <AlertListContents
+            icon={Icons.Warning}
+            iconColor={tokens.colors.interactive.danger__resting.rgba}
+            alertTitle={TranslateText('Robot is blocked')}
+            alertText={message}
+        />
+    )
+}

frontend/src/components/Alerts/FailedAlertContent.tsx

@@ -4,6 +4,7 @@ import { useLanguageContext } from 'components/Contexts/LanguageContext'
 import { Icons } from 'utils/icons'
 import { tokens } from '@equinor/eds-tokens'
 import { TextAlignedButton } from 'components/Styles/StyledComponents'
+import { AlertListContents } from './AlertsListItem'
 
 const StyledDiv = styled.div`
     align-items: center;
@@ -38,3 +39,15 @@ export const FailedAlertContent = ({ title, message }: { title: string; message:
         </StyledDiv>
     )
 }
+
+export const FailedAlertListContent = ({ title, message }: { title: string; message: string }) => {
+    const { TranslateText } = useLanguageContext()
+    return (
+        <AlertListContents
+            icon={Icons.Failed}
+            iconColor={tokens.colors.interactive.danger__resting.rgba}
+            alertTitle={TranslateText(title)}
+            alertText={TranslateText(message)}
+        />
+    )
+}

frontend/src/components/Alerts/FailedMissionAlert.tsx

@@ -5,6 +5,9 @@ import { MissionStatusDisplay } from 'components/Displays/MissionDisplays/Missio
 import { useNavigate } from 'react-router-dom'
 import { useLanguageContext } from 'components/Contexts/LanguageContext'
 import { TextAlignedButton } from 'components/Styles/StyledComponents'
+import { AlertListContents } from './AlertsListItem'
+import { Icons } from 'utils/icons'
+import { tokens } from '@equinor/eds-tokens'
 
 const Indent = styled.div`
     padding: 0px 0px 0px 5px;
@@ -63,3 +66,29 @@ export const FailedMissionAlertContent = ({ missions }: MissionsProps) => {
         </Indent>
     )
 }
+
+export const FailedMissionAlertListContent = ({ missions }: MissionsProps) => {
+    const { TranslateText } = useLanguageContext()
+    const mission = missions[0]
+    let message = `${mission.name} ${TranslateText('failed on robot')} ${mission.robot.name}: ${mission.statusReason}`
+    if (mission.statusReason === null)
+        message = `${mission.name} ${TranslateText('failed on robot')} ${mission.robot.name}`
+    if (missions.length > 1)
+        message = `${missions.length.toString()} ${TranslateText("missions failed recently. See 'Mission History' for more information.")}.`
+    return missions.length === 1 ? (
+        <AlertListContents
+            icon={Icons.Failed}
+            alertTitle={TranslateText(MissionStatus.Failed)}
+            alertText={message}
+            iconColor={tokens.colors.interactive.danger__resting.rgba}
+            mission={mission}
+        />
+    ) : (
+        <AlertListContents
+            icon={Icons.Failed}
+            alertTitle={TranslateText(MissionStatus.Failed)}
+            alertText={message}
+            iconColor={tokens.colors.interactive.danger__resting.rgba}
+        />
+    )
+}

frontend/src/components/Alerts/FailedRequestAlert.tsx

@@ -4,6 +4,7 @@ import { useLanguageContext } from 'components/Contexts/LanguageContext'
 import { Icons } from 'utils/icons'
 import { tokens } from '@equinor/eds-tokens'
 import { TextAlignedButton } from 'components/Styles/StyledComponents'
+import { AlertListContents } from './AlertsListItem'
 
 const StyledDiv = styled.div`
     flex-direction: column;
@@ -33,3 +34,15 @@ export const FailedRequestAlertContent = ({ translatedMessage }: { translatedMes
         </StyledDiv>
     )
 }
+
+export const FailedRequestAlertListContent = ({ translatedMessage }: { translatedMessage: string }) => {
+    const { TranslateText } = useLanguageContext()
+    return (
+        <AlertListContents
+            icon={Icons.Failed}
+            alertTitle={TranslateText('Request error')}
+            alertText={translatedMessage}
+            iconColor={tokens.colors.interactive.danger__resting.rgba}
+        />
+    )
+}

frontend/src/components/Alerts/SafeZoneAlert.tsx

@@ -5,6 +5,8 @@ import { AlertType } from 'components/Contexts/AlertContext'
 import { useLanguageContext } from 'components/Contexts/LanguageContext'
 import { TextAlignedButton } from 'components/Styles/StyledComponents'
 import styled from 'styled-components'
+import { AlertListContents } from './AlertsListItem'
+import { Icons } from 'utils/icons'
 
 const StyledDiv = styled.div`
     flex-direction: column;
@@ -47,3 +49,26 @@ export const SafeZoneAlertContent = ({ alertType, alertCategory }: SafeZoneBanne
         </StyledDiv>
     )
 }
+
+export const SafeZoneAlertListContent = ({ alertType, alertCategory }: SafeZoneBannerProps): JSX.Element => {
+    const { TranslateText } = useLanguageContext()
+    let titleMessage = TranslateText('INFO')
+    let message = TranslateText('Safe zone banner text')
+    let icon = Icons.Warning
+    let iconColor = tokens.colors.interactive.danger__resting.rgba
+    if (alertCategory === AlertCategory.WARNING) titleMessage = TranslateText('WARNING')
+    if (alertCategory === AlertCategory.INFO && alertType === AlertType.SafeZoneSuccess)
+        [message, icon, iconColor] = [
+            TranslateText('Safe Zone successful text'),
+            Icons.Info,
+            tokens.colors.text.static_icons__default.rgba,
+        ]
+    if (alertCategory === AlertCategory.INFO && alertType === AlertType.DismissSafeZone)
+        [message, icon, iconColor] = [
+            TranslateText('Dismiss safe zone banner text'),
+            Icons.Info,
+            tokens.colors.text.static_icons__default.rgba,
+        ]
+
+    return <AlertListContents icon={icon} alertTitle={titleMessage} alertText={message} iconColor={iconColor} />
+}