Simplify mission scheduling component interfaces

Author: nicholasdalhaug

frontend/src/pages/MissionSchedulingComponents/InspectionAreaCards.tsx

@@ -1,74 +1,66 @@
 import { InspectionArea } from 'models/InspectionArea'
-import { MissionDefinition } from 'models/MissionDefinition'
-import { InspectionAreaInspectionTuple } from './InspectionSection'
 import { useLanguageContext } from 'components/Contexts/LanguageContext'
 import {
     CardComponent,
     Content,
     InspectionAreaText,
-    Placeholder,
     StyledCard,
     StyledInspectionAreaCard,
-    StyledInspectionAreaCards,
     TopInspectionAreaText,
 } from './InspectionUtilities'
 import { Button, Icon, Tooltip, Typography } from '@equinor/eds-core-react'
 import { Icons } from 'utils/icons'
 import { tokens } from '@equinor/eds-tokens'
-import { useMissionsContext } from 'components/Contexts/MissionRunsContext'
 import { useAssetContext } from 'components/Contexts/AssetContext'
 
 interface InspectionAreaCardProps {
-    inspectionAreaData: InspectionAreaInspectionTuple
+    inspectionArea: InspectionArea
+    nMissions: number
     onClickInspectionArea: (inspectionArea: InspectionArea) => void
-    selectedInspectionArea: InspectionArea | undefined
-    handleScheduleAll: (missionDefinitions: MissionDefinition[]) => void
+    isSelected: boolean
+    isMissionOngoing: boolean
+    onClickScheduleAll: (inspectionArea: InspectionArea) => void
 }
 
-const InspectionAreaCard = ({
-    inspectionAreaData,
+export const InspectionAreaCard = ({
+    inspectionArea,
+    nMissions,
     onClickInspectionArea,
-    selectedInspectionArea,
-    handleScheduleAll,
+    isSelected,
+    isMissionOngoing,
+    onClickScheduleAll,
 }: InspectionAreaCardProps) => {
     const { TranslateText } = useLanguageContext()
-    const { ongoingMissions } = useMissionsContext()
     const { enabledRobots } = useAssetContext()
 
-    const isScheduleMissionsDisabled = enabledRobots.length === 0 || inspectionAreaData.missionDefinitions.length === 0
+    const isScheduleMissionsDisabled = enabledRobots.length === 0 || nMissions === 0
 
     let queueMissionsTooltip = ''
-    if (inspectionAreaData.missionDefinitions.length === 0) queueMissionsTooltip = TranslateText('No available mission')
+    if (nMissions === 0) queueMissionsTooltip = TranslateText('No available mission')
     else if (isScheduleMissionsDisabled) queueMissionsTooltip = TranslateText('No robot available')
 
     return (
-        <StyledInspectionAreaCard key={inspectionAreaData.inspectionArea.inspectionAreaName}>
+        <StyledInspectionAreaCard key={inspectionArea.inspectionAreaName}>
             <StyledCard
-                key={inspectionAreaData.inspectionArea.inspectionAreaName}
-                onClick={() => onClickInspectionArea(inspectionAreaData.inspectionArea)}
-                style={
-                    selectedInspectionArea === inspectionAreaData.inspectionArea
-                        ? { border: `solid ${tokens.colors.interactive.focus.hex} 1px` }
-                        : {}
-                }
+                key={inspectionArea.inspectionAreaName}
+                onClick={() => onClickInspectionArea(inspectionArea)}
+                style={isSelected ? { border: `solid ${tokens.colors.interactive.focus.hex} 1px` } : {}}
             >
                 <InspectionAreaText>
                     <TopInspectionAreaText>
                         <Typography variant={'body_short_bold'}>
-                            {inspectionAreaData.inspectionArea.inspectionAreaName.toString()}
+                            {inspectionArea.inspectionAreaName.toString()}
                         </Typography>
-                        {inspectionAreaData.missionDefinitions
-                            .filter((m) => ongoingMissions.find((om) => om.missionId === m.id))
-                            .map((mission) => (
-                                <Content key={mission.id}>
-                                    <Icon name={Icons.Ongoing} size={16} />
-                                    {TranslateText('InProgress')}
-                                </Content>
-                            ))}
+                        {isMissionOngoing && (
+                            <Content>
+                                <Icon name={Icons.Ongoing} size={16} />
+                                {TranslateText('InProgress')}
+                            </Content>
+                        )}
                     </TopInspectionAreaText>
                     <Typography color={tokens.colors.text.static_icons__secondary.hex}>
-                        {inspectionAreaData.missionDefinitions.length}{' '}
-                        {inspectionAreaData.missionDefinitions.length === 1
+                        {nMissions}{' '}
+                        {nMissions === 1
                             ? TranslateText('Mission').toLowerCase()
                             : TranslateText('Missions').toLowerCase()}
                     </Typography>
@@ -78,13 +70,10 @@ const InspectionAreaCard = ({
                         <Button
                             disabled={isScheduleMissionsDisabled}
                             variant="ghost"
-                            onClick={() => handleScheduleAll(inspectionAreaData.missionDefinitions)}
+                            onClick={() => onClickScheduleAll(inspectionArea)}
                             color="secondary"
                         >
-                            <Icon
-                                name={Icons.Add}
-                                color={inspectionAreaData.missionDefinitions.length > 0 ? '' : 'grey'}
-                            />
+                            <Icon name={Icons.Add} color={nMissions > 0 ? '' : 'grey'} />
                             <Typography color={tokens.colors.text.static_icons__secondary.hex}>
                                 {TranslateText('Queue the missions')}
                             </Typography>
@@ -95,43 +84,3 @@ const InspectionAreaCard = ({
         </StyledInspectionAreaCard>
     )
 }
-
-interface IInspectionAreaCardProps {
-    inspectionAreaMissions: InspectionAreaInspectionTuple[]
-    onClickInspectionArea: (inspectionArea: InspectionArea) => void
-    selectedInspectionArea: InspectionArea | undefined
-    handleScheduleAll: (missionDefinitions: MissionDefinition[]) => void
-}
-
-export const InspectionAreaCards = ({
-    inspectionAreaMissions,
-    onClickInspectionArea,
-    selectedInspectionArea,
-    handleScheduleAll,
-}: IInspectionAreaCardProps) => {
-    const { TranslateText } = useLanguageContext()
-
-    return (
-        <>
-            {Object.keys(inspectionAreaMissions).length > 0 ? (
-                <StyledInspectionAreaCards>
-                    {inspectionAreaMissions.map((inspectionAreaMission) => (
-                        <InspectionAreaCard
-                            key={'inspectionAreaCard' + inspectionAreaMission.inspectionArea.inspectionAreaName}
-                            inspectionAreaData={inspectionAreaMission}
-                            onClickInspectionArea={onClickInspectionArea}
-                            selectedInspectionArea={selectedInspectionArea}
-                            handleScheduleAll={handleScheduleAll}
-                        />
-                    ))}
-                </StyledInspectionAreaCards>
-            ) : (
-                <Placeholder>
-                    <Typography variant="h4" color="disabled">
-                        {TranslateText('No inspections available')}
-                    </Typography>
-                </Placeholder>
-            )}
-        </>
-    )
-}

frontend/src/pages/MissionSchedulingComponents/InspectionSection.tsx

@@ -1,7 +1,6 @@
 import { Card } from '@equinor/eds-core-react'
 import styled from 'styled-components'
 import { MissionDefinition } from 'models/MissionDefinition'
-import { tokens } from '@equinor/eds-tokens'
 import { cardShadow } from 'components/Styles/StyledComponents'
 
 export const StyledCard = styled(Card)`
@@ -52,11 +51,6 @@ export const InspectionAreaOverview = styled.div`
     flex-direction: column;
     gap: 48px;
 `
-export const Placeholder = styled.div`
-    padding: 24px;
-    border: 1px solid ${tokens.colors.ui.background__medium.hex};
-    border-radius: 4px;
-`
 export const Content = styled.div`
     display: flex;
     align-items: centre;

frontend/src/pages/MissionSchedulingComponents/InspectionUtilities.tsx

@@ -8,9 +8,7 @@ import { useNavigate } from 'react-router'
 import { Icons } from 'utils/icons'
 import { compareMissionDefinitions } from './InspectionUtilities'
 import { formatDateTime } from 'utils/StringFormatting'
-import { AlreadyScheduledMissionDialog } from './ScheduleMissionDialogs'
-import { useContext, useState } from 'react'
-import { useMissionsContext } from 'components/Contexts/MissionRunsContext'
+import { useContext } from 'react'
 import { useAssetContext } from 'components/Contexts/AssetContext'
 import { FrontPageSectionId } from 'models/FrontPageSectionId'
 import { SmallScreenInfoText } from 'utils/InfoText'
@@ -74,37 +72,23 @@ const HideColumnsOnSmallScreen = styled.div`
     }
 `
 
-interface IProps {
-    inspectionArea: InspectionArea
-    missionDefinitions: MissionDefinition[]
-    scrollOnToggle: boolean
-    openDialog: () => void
-    setSelectedMissions: (selectedMissions: MissionDefinition[]) => void
-}
-
 interface IMissionRowProps {
     mission: MissionDefinition
-    openDialog: () => void
     setMissions: (selectedMissions: MissionDefinition[]) => void
-    openScheduledDialog: () => void
 }
 
-const MissionRow = ({ mission, openDialog, setMissions, openScheduledDialog }: IMissionRowProps) => {
+const MissionRow = ({ mission, setMissions }: IMissionRowProps) => {
     const { TranslateText } = useLanguageContext()
-    const { missionQueue } = useMissionsContext()
     const { enabledRobots } = useAssetContext()
     const { installation } = useContext(InstallationContext)
     const navigate = useNavigate()
 
-    const isScheduled = missionQueue.map((m) => m.missionId).includes(mission.id)
     const isScheduleButtonDisabled = enabledRobots.length === 0
 
     const lastCompleted = mission.lastSuccessfulRun?.endTime
         ? formatDateTime(mission.lastSuccessfulRun.endTime)
         : TranslateText('Never')
 
-    const noRobotReadyForMissionsText = TranslateText('No robot available')
-
     return (
         <StyledTableRow key={mission.id}>
             <Table.Cell id={Columns.Name}>
@@ -121,55 +105,31 @@ const MissionRow = ({ mission, openDialog, setMissions, openScheduledDialog }: I
             <Table.Cell id={Columns.LastCompleted}>{lastCompleted}</Table.Cell>
             <Table.Cell id={Columns.AddToQueue}>
                 <Centered>
-                    {!isScheduled && (
-                        <Button
-                            style={{ width: isScheduleButtonDisabled ? '110px' : '' }}
-                            variant="ghost_icon"
-                            disabled={isScheduleButtonDisabled}
-                            onClick={() => {
-                                openDialog()
-                                setMissions([mission])
-                            }}
-                        >
-                            <StyledIcon color={`${tokens.colors.interactive.focus.hex}`} name={Icons.Add} size={24} />
-                            {isScheduleButtonDisabled && noRobotReadyForMissionsText}
-                        </Button>
-                    )}
-                    {isScheduled && (
-                        <Button
-                            variant="ghost_icon"
-                            disabled={enabledRobots.length === 0}
-                            onClick={() => {
-                                openScheduledDialog()
-                                setMissions([mission])
-                            }}
-                        >
-                            <StyledIcon color={`${tokens.colors.interactive.focus.hex}`} name={Icons.Add} size={24} />
-                        </Button>
-                    )}
+                    <Button
+                        style={{ width: isScheduleButtonDisabled ? '110px' : '' }}
+                        variant="ghost_icon"
+                        disabled={isScheduleButtonDisabled}
+                        onClick={() => {
+                            setMissions([mission])
+                        }}
+                    >
+                        <StyledIcon color={`${tokens.colors.interactive.focus.hex}`} name={Icons.Add} size={24} />
+                        {isScheduleButtonDisabled && <>{TranslateText('No robot available')}</>}
+                    </Button>
                 </Centered>
             </Table.Cell>
         </StyledTableRow>
     )
 }
 
-export const MissionSchedulingTable = ({
-    inspectionArea,
-    missionDefinitions,
-    openDialog,
-    setSelectedMissions,
-}: IProps) => {
-    const { TranslateText } = useLanguageContext()
-
-    const [isScheduledDialogOpen, setIsScheduledDialogOpen] = useState<boolean>(false)
-
-    const openScheduleDialog = () => {
-        setIsScheduledDialogOpen(true)
-    }
+interface IProps {
+    inspectionArea: InspectionArea
+    missionDefinitions: MissionDefinition[]
+    setSelectedMissions: (selectedMissions: MissionDefinition[]) => void
+}
 
-    const closeScheduleDialog = () => {
-        setIsScheduledDialogOpen(false)
-    }
+export const MissionSchedulingTable = ({ inspectionArea, missionDefinitions, setSelectedMissions }: IProps) => {
+    const { TranslateText } = useLanguageContext()
 
     return (
         <StyledTable id={FrontPageSectionId.InspectionTable}>
@@ -190,20 +150,11 @@ export const MissionSchedulingTable = ({
                     </Table.Head>
                     <Table.Body style={{ backgroundColor: tokens.colors.ui.background__default.hex }}>
                         {missionDefinitions.sort(compareMissionDefinitions).map((mission) => (
-                            <MissionRow
-                                key={mission.id}
-                                mission={mission}
-                                openDialog={openDialog}
-                                setMissions={setSelectedMissions}
-                                openScheduledDialog={openScheduleDialog}
-                            />
+                            <MissionRow key={mission.id} mission={mission} setMissions={setSelectedMissions} />
                         ))}
                     </Table.Body>
                 </Table>
             </HideColumnsOnSmallScreen>
-            {isScheduledDialogOpen && (
-                <AlreadyScheduledMissionDialog openDialog={openDialog} closeDialog={closeScheduleDialog} />
-            )}
         </StyledTable>
     )
 }