Refactor alert context to data-driven model

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
+}) => (
+    <AlertContainer>
+        <StyledAlertTitle>
+            <StyledAlertIcon name={icon} style={{ color: iconColor }} />
+            <Typography>{title}</Typography>
+        </StyledAlertTitle>
+        <AlertIndent>
+            <Typography group="navigation" variant="button">
+                {message}
+            </Typography>
+        </AlertIndent>
+    </AlertContainer>
+)

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 <FailedMissionAlertContent missions={content.missions} />
+        case 'autoScheduleFail':
+            return <AutoScheduleFailContent failedMissions={content.failedMissions} />
+        case 'dock':
+            return <DockAlertContent alertType={content.dockType} />
+        case 'requestFail':
+            return (
+                <AlertBannerLayout
+                    icon={Icons.Failed}
+                    iconColor={dangerColor}
+                    title={TranslateText('Request error')}
+                    message={content.message}
+                />
+            )
+        case 'failure':
+            return (
+                <AlertBannerLayout
+                    icon={Icons.Failed}
+                    iconColor={dangerColor}
+                    title={content.title}
+                    message={content.message}
+                />
+            )
+        case 'info':
+            return (
+                <AlertBannerLayout
+                    icon={Icons.Info}
+                    iconColor={infoColor}
+                    title={content.title}
+                    message={content.message}
+                />
+            )
+    }
+}
+
+export const AlertListItemContent = ({ content }: { content: AlertContent }): ReactElement => {
+    const { TranslateText } = useLanguageContext()
+    switch (content.kind) {
+        case 'failedMissions':
+            return <FailedMissionAlertListContent missions={content.missions} />
+        case 'autoScheduleFail':
+            return <AutoScheduleFailContent failedMissions={content.failedMissions} />
+        case 'dock':
+            return <DockAlertListContent alertType={content.dockType} />
+        case 'requestFail':
+            return (
+                <AlertListContents
+                    icon={Icons.Failed}
+                    iconColor={dangerColor}
+                    alertTitle={TranslateText('Request error')}
+                    alertText={content.message}
+                />
+            )
+        case 'failure':
+            return (
+                <AlertListContents
+                    icon={Icons.Failed}
+                    iconColor={dangerColor}
+                    alertTitle={TranslateText(content.title)}
+                    alertText={TranslateText(content.message)}
+                />
+            )
+        case 'info':
+            return (
+                <AlertListContents
+                    icon={Icons.Info}
+                    iconColor={infoColor}
+                    alertTitle={content.title}
+                    alertText={content.message}
+                />
+            )
+    }
+}

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) => {

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 (
+        <AlertContainer>
+            <StyledAlertTitle>
+                <StyledAlertIcon name={Icons.Failed} style={{ color: iconColor }} />
+                <Typography>{TranslateText('Failed to Auto Schedule Missions')}</Typography>
+            </StyledAlertTitle>
+            <AlertIndent>
+                {Object.keys(failedMissions).map((missionId) => (
+                    <Typography variant="caption" key={missionId}>
+                        {failedMissions[missionId]}
+                    </Typography>
+                ))}
+            </AlertIndent>
+        </AlertContainer>
+    )
+}