Implement alert list feature

Add translation for alert menu

frontend/src/components/Alerts/AlertsBanner.tsx

@@ -18,15 +18,6 @@ const StyledCard = styled.div`
     }
 `
 
-const StyledListItem = styled.div`
-    display: flex;
-    width: 300px;
-    height: auto;
-    padding: 3px 10px 2px 10px;
-    justify-content: space-between;
-    align-items: center;
-`
-
 const Horizontal = styled.div`
     display: flex;
     flex-direction: row;
@@ -78,18 +69,3 @@ export const AlertBanner = ({ children, dismissAlert, alertCategory }: AlertProp
         </>
     )
 }
-
-export const AlertListItem = ({ children, dismissAlert, alertCategory }: AlertProps) => {
-    return (
-        <>
-            <StyledListItem>
-                <Horizontal>
-                    <Center>{children}</Center>
-                </Horizontal>
-                <Button variant="ghost_icon" onClick={dismissAlert}>
-                    <Icon name={Icons.Clear} size={24}></Icon>
-                </Button>
-            </StyledListItem>
-        </>
-    )
-}

frontend/src/components/Alerts/AlertsListItem.tsx

@@ -1,24 +1,63 @@
-import { Button, Icon } from '@equinor/eds-core-react'
+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'
 
-const StyledListItem = styled.div`
-    display: flex;
+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: center;
+    align-items: top;
 `
-const Center = styled.div`
-    align-items: center;
+
+const Right = styled.div`
+     display: flex;
+     align-items: right;
+     justify-content: right;
 `
 
 export enum AlertCategory {
@@ -27,23 +66,63 @@ export enum AlertCategory {
     INFO,
 }
 
+interface AlertListInfo {
+    icon: Icons
+    alertTitle: string
+    alertText: string
+    iconColor?: string
+    mission?: Mission
+}
+
 interface AlertProps {
     children: ReactNode
     dismissAlert: () => void
     alertCategory: AlertCategory
 }
 
-export const AlertListItem = ({ children, dismissAlert, alertCategory }: AlertProps) => {
+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 (
         <>
-            <StyledListItem>
-                <Horizontal>
-                    <Center>{children}</Center>
-                </Horizontal>
-                <Button variant="ghost_icon" onClick={dismissAlert}>
-                    <Icon name={Icons.Clear} size={24}></Icon>
+            <Horizontal>
+                {children}
+                <Button
+                    variant="ghost_icon"
+                    onClick={dismissAlert}
+                    style={{ marginTop: '0px', right: '25px', position: 'absolute' }}
+                >
+                    <Icon name={Icons.Clear}></Icon>
                 </Button>
-            </StyledListItem>
+            </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,15 @@ 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;
@@ -19,9 +20,14 @@ const Indent = styled.div`
     padding: 0px 9px;
 `
 
+
+
+
+
 export const FailedAlertContent = ({ title, message }: { title: string; message: string }) => {
     const { TranslateText } = useLanguageContext()
     const iconColor = tokens.colors.interactive.danger__resting.rgba
+    const bannerColor = tokens.colors.ui.background__danger.hex
 
     return (
         <StyledDiv>
@@ -30,10 +36,18 @@ export const FailedAlertContent = ({ title, message }: { title: string; message:
                 <Typography>{TranslateText(title)}</Typography>
             </StyledAlertTitle>
             <Indent>
-                <TextAlignedButton variant="ghost" color="secondary">
+                <TextAlignedButton variant="ghost" color="secondary" style={{ backgroundColor: bannerColor }}>
                     {TranslateText(message)}
                 </TextAlignedButton>
             </Indent>
         </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,14 @@ 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 (
+        <AlertListContents icon={Icons.Failed} alertTitle={TranslateText(MissionStatus.Failed)} alertText={message} iconColor={tokens.colors.interactive.danger__resting.rgba} mission={mission} />
+    )
+}

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,10 @@ export const FailedRequestAlertContent = ({ translatedMessage }: { translatedMes
         </StyledDiv>
     )
 }
+
+export const FailedRequestAlertListContent = ({ translatedMessage }: { translatedMessage: string }) => {
+    const { TranslateText } = useLanguageContext()
+    return (
+        <AlertListContents icon={Icons.Failed} alertTitle={translatedMessage} alertText={TranslateText('Request error')} 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,19 @@ 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} />
+    )
+}