Display documentation info on robot page

frontend/src/components/Pages/RobotPage/Documentation.tsx

@@ -0,0 +1,34 @@
+import { Typography, Icon } from '@equinor/eds-core-react'
+import { Icons } from 'utils/icons'
+import { tokens } from '@equinor/eds-tokens'
+import { useLanguageContext } from 'components/Contexts/LanguageContext'
+import styled from 'styled-components'
+import { DocumentInfo } from 'models/DocumentInfo'
+
+const DocumentStyle = styled.div`
+    display: flex;
+    gap: 1rem;
+    align-items: center;
+`
+
+export const DocumentationSection = ({ documentation }: { documentation: DocumentInfo[] }) => {
+    const { TranslateText } = useLanguageContext()
+
+    return (
+        <>
+            <Typography variant="h2">{TranslateText('Documentation')}</Typography>
+            {documentation.map((documentInfo, index) => (
+                <DocumentStyle key={index}>
+                    <Icon
+                        name={Icons.FileDescription}
+                        color={tokens.colors.interactive.primary__resting.hex}
+                        size={24}
+                    />
+                    <Typography variant="h4" color={tokens.colors.interactive.primary__resting.hex}>
+                        <a href={documentInfo.url}>{documentInfo.name}</a>
+                    </Typography>
+                </DocumentStyle>
+            ))}
+        </>
+    )
+}

frontend/src/components/Pages/RobotPage/RobotPage.tsx

@@ -18,6 +18,7 @@ import { StyledButton, StyledPage } from 'components/Styles/StyledComponents'
 import { AlertType, useAlertContext } from 'components/Contexts/AlertContext'
 import { FailedRequestAlertContent, FailedRequestAlertListContent } from 'components/Alerts/FailedRequestAlert'
 import { AlertCategory } from 'components/Alerts/AlertsBanner'
+import { DocumentationSection } from './Documentation'
 
 const RobotArmMovementSection = styled.div`
     display: flex;
@@ -155,6 +156,9 @@ export const RobotPage = () => {
                                 </RobotArmMovementSection>
                             </>
                         )}
+                        {selectedRobot.documentation && selectedRobot.documentation.length > 0 && (
+                            <DocumentationSection documentation={selectedRobot.documentation} />
+                        )}
                     </>
                 )}
             </StyledPage>

frontend/src/language/en.json

@@ -264,5 +264,6 @@
     "Alerts": "Alerts",
     "No alerts": "No alerts",
     "minutes ago": "minutes ago",
-    "Failed to retrieve previous mission runs": "Failed to retrieve previous mission runs"
+    "Failed to retrieve previous mission runs": "Failed to retrieve previous mission runs",
+    "Documentation": "Documentation"
 }

frontend/src/language/no.json

@@ -264,5 +264,6 @@
     "Alerts": "Varsler",
     "No alerts": "Ingen varsler",
     "minutes ago": "minutter siden",
-    "Failed to retrieve previous mission runs": "Kunne ikke hente tildigere oppdragskjøringer"
+    "Failed to retrieve previous mission runs": "Kunne ikke hente tildigere oppdragskjøringer",
+    "Documentation": "Dokumentasjon"
 }

frontend/src/models/DocumentInfo.ts

@@ -0,0 +1,4 @@
+export interface DocumentInfo {
+    name: string
+    url: string
+}

frontend/src/models/Robot.ts

@@ -1,5 +1,6 @@
 import { Area } from './Area'
 import { BatteryStatus } from './Battery'
+import { DocumentInfo } from './DocumentInfo'
 import { Installation, placeholderInstallation } from './Installation'
 import { Pose } from './Pose'
 import { RobotModel, placeholderRobotModel } from './RobotModel'
@@ -37,6 +38,7 @@ export interface Robot {
     host?: string
     logs?: string
     port?: number
+    documentation?: DocumentInfo[]
     videoStreams?: VideoStream[]
     isarUri?: string
     currentArea?: Area

frontend/src/utils/icons.tsx

@@ -42,6 +42,7 @@ import {
     info_circle,
     blocked,
     close_circle_outlined,
+    file_description,
 } from '@equinor/eds-icons'
 
 Icon.add({
@@ -87,6 +88,7 @@ Icon.add({
     info_circle,
     blocked,
     close_circle_outlined,
+    file_description,
 })
 
 export enum Icons {
@@ -132,4 +134,5 @@ export enum Icons {
     Info = 'info_circle',
     Blocked = 'blocked',
     ClosedCircleOutlined = 'close_circle_outlined',
+    FileDescription = 'file_description',
 }