Improve mission queue placeholder

equinor · Dec 13, 2023 · 5261e61 · 5261e61
1 parent 1b3d8bc
commit 5261e61
Show file tree

Hide file tree

Showing 8 changed files with 20 additions and 36 deletions.
diff --git a/frontend/src/components/Displays/MissionButtons/MissionButton.tsx b/frontend/src/components/Displays/MissionButtons/MissionButton.tsx
@@ -55,7 +55,7 @@ export const MissionButton = (): JSX.Element => {
                     ref={anchorRef}
                 >
                     <Icon name={Icons.ExternalLink} size={16}></Icon>
-                    {TranslateText('Create a new mission')}
+                    {TranslateText('Create new Echo mission')}
                 </StyledButton>
             </div>
 

diff --git a/frontend/src/components/Pages/FrontPage/MissionOverview/MissionQueueView.tsx b/frontend/src/components/Pages/FrontPage/MissionOverview/MissionQueueView.tsx
@@ -5,15 +5,14 @@ import { BackendAPICaller } from 'api/ApiCaller'
 import { useEffect } from 'react'
 import { Mission, placeholderMission } from 'models/Mission'
 import { EmptyMissionQueuePlaceholder } from './NoMissionPlaceholder'
-import { ScheduleMissionDialog } from './ScheduleMissionDialog/ScheduleMissionDialog'
 import { useLanguageContext } from 'components/Contexts/LanguageContext'
 import { useMissionsContext } from 'components/Contexts/MissionListsContext'
 import { useInstallationContext } from 'components/Contexts/InstallationContext'
-import { MissionButton } from 'components/Displays/MissionButtons/MissionButton'
 
 const StyledMissionView = styled.div`
     display: grid;
     grid-column: 1/ -1;
+    align-content: start;
     gap: 1rem;
 `
 
@@ -24,11 +23,6 @@ const MissionTable = styled.div`
     gap: 1rem;
 `
 
-const MissionButtonView = styled.div`
-    display: flex;
-    gap: 1rem;
-`
-
 export const MissionQueueView = (): JSX.Element => {
     const { TranslateText } = useLanguageContext()
     const { missionQueue, ongoingMissions, loadingMissionSet, setLoadingMissionSet } = useMissionsContext()
@@ -73,10 +67,6 @@ export const MissionQueueView = (): JSX.Element => {
                 {loadingMissionSet.size > 0 && loadingQueueDisplay}
                 {loadingMissionSet.size === 0 && localMissionQueue.length === 0 && <EmptyMissionQueuePlaceholder />}
             </MissionTable>
-            <MissionButtonView>
-                <ScheduleMissionDialog />
-                <MissionButton />
-            </MissionButtonView>
         </StyledMissionView>
     )
 }
diff --git a/frontend/src/components/Pages/FrontPage/MissionOverview/NoMissionPlaceholder.tsx b/frontend/src/components/Pages/FrontPage/MissionOverview/NoMissionPlaceholder.tsx
@@ -1,22 +1,14 @@
-import { Typography } from '@equinor/eds-core-react'
+import { Card, Typography } from '@equinor/eds-core-react'
 import styled from 'styled-components'
 import { useLanguageContext } from 'components/Contexts/LanguageContext'
+import { tokens } from '@equinor/eds-tokens'
 
-const StyledPlaceholder = styled.div`
+const StyledPlaceholder = styled(Card)`
     display: flex;
     box-sizing: border-box;
-    flex-direction: row;
-    align-items: flex-start;
     padding: 24px;
-    gap: 8px;
-
-    border: 1px solid #dcdcdc;
-    border-radius: 4px;
-
-    flex: none;
-    order: 1;
-    align-self: stretch;
-    flex-grow: 1;
+    min-width: 250px;
+    border: 1px solid ${tokens.colors.interactive.disabled__border.hex};
 `
 
 export const NoOngoingMissionsPlaceholder = (): JSX.Element => {

diff --git a/...omponents/Pages/FrontPage/MissionOverview/ScheduleMissionDialog/ScheduleMissionDialog.tsx b/...omponents/Pages/FrontPage/MissionOverview/ScheduleMissionDialog/ScheduleMissionDialog.tsx
@@ -26,6 +26,7 @@ export const ScheduleMissionDialog = (): JSX.Element => {
     const { installationCode } = useInstallationContext()
     const { enabledRobots } = useRobotContext()
     const { setAlert } = useAlertContext()
+    const { setLoadingMissionSet } = useMissionsContext()
     const [isScheduleMissionDialogOpen, setIsScheduleMissionDialogOpen] = useState<boolean>(false)
     const [isEmptyEchoMissionsDialogOpen, setIsEmptyEchoMissionsDialogOpen] = useState<boolean>(false)
     const [isPopoverOpen, setIsPopoverOpen] = useState<boolean>(false)
@@ -35,7 +36,6 @@ export const ScheduleMissionDialog = (): JSX.Element => {
     const [echoMissions, setEchoMissions] = useState<Map<string, EchoMissionDefinition>>(
         new Map<string, EchoMissionDefinition>()
     )
-    const { setLoadingMissionSet } = useMissionsContext()
 
     const anchorRef = useRef<HTMLButtonElement>(null)
 
@@ -115,7 +115,7 @@ export const ScheduleMissionDialog = (): JSX.Element => {
                 >
                     <>
                         <Icon name={Icons.Add} size={16} />
-                        {TranslateText('Add mission')}
+                        {TranslateText('Add predefined Echo mission')}
                     </>
                 </Button>
             </div>

diff --git a/.../Pages/FrontPage/MissionOverview/ScheduleMissionDialog/SelectMissionsToScheduleDialog.tsx b/.../Pages/FrontPage/MissionOverview/ScheduleMissionDialog/SelectMissionsToScheduleDialog.tsx
@@ -81,7 +81,7 @@ export const SelectMissionsToScheduleDialog = ({
         <StyledMissionDialog>
             <StyledDialog open={true} isDismissable>
                 <StyledAutoComplete>
-                    <Typography variant="h3">{TranslateText('Add mission')}</Typography>
+                    <Typography variant="h3">{TranslateText('Add mission to the queue')}</Typography>
                     <Autocomplete
                         options={echoMissionsOptions}
                         onOptionsChange={(changes) => onChangeMissionSelections(changes.selectedItems)}
@@ -120,7 +120,7 @@ export const SelectMissionsToScheduleDialog = ({
                             disabled={scheduleButtonDisabled}
                         >
                             {' '}
-                            {TranslateText('Add mission')}
+                            {TranslateText('Add mission to the queue')}
                         </Button>
                     </StyledMissionSection>
                 </StyledAutoComplete>

diff --git a/frontend/src/components/Pages/InspectionPage/ScheduleMissionDialogs.tsx b/frontend/src/components/Pages/InspectionPage/ScheduleMissionDialogs.tsx
@@ -109,7 +109,7 @@ export const ScheduleMissionDialog = (props: IProps): JSX.Element => {
             <StyledMissionDialog>
                 <StyledDialog open={true}>
                     <StyledDialogContent>
-                        <Typography variant="h4">{TranslateText('Add mission')}</Typography>
+                        <Typography variant="h4">{TranslateText('Add mission to the queue')}</Typography>
                         {props.isAlreadyScheduled && (
                             <StyledDangerContent>
                                 <Icon name={Icons.Warning} size={16} color="red" />

diff --git a/frontend/src/language/en.json b/frontend/src/language/en.json
@@ -13,7 +13,7 @@
     "Please select installation": "Please select installation",
     "This installation does not have missions. Please create mission.": "This installation does not have missions. Please create mission.",
     "Cancel": "Cancel",
-    "Add mission": "Add mission",
+    "Add predefined Echo mission": "Add predefined Echo mission",
     "Select missions": "Select missions",
     "Select robot": "Select robot",
     "Select start time": "Select start time",
@@ -135,6 +135,7 @@
     "Last completed": "Last completed",
     "Deadline": "Deadline",
     "Add to queue": "Add to queue",
+    "Add mission to the queue": "Add mission to the queue",
     "Not yet performed": "Not yet performed",
     "Never": "Never",
     "Due this week": "Due this week",
@@ -184,7 +185,7 @@
     "Queue the missions": "Queue the missions",
     "Deck Overview": "Deck Overview",
     "Predefined Missions": "Predefined Missions",
-    "Create a new mission": "Create a new mission",
+    "Create new Echo mission": "Create new Echo mission",
     "Must be inspected this week": "Must be inspected this week",
     "Must be inspected within two weeks": "Must be inspected within two weeks",
     "Mission": "Mission",
@@ -204,7 +205,7 @@
     "Edit mission definition": "Edit mission definition",
     "Completed Tasks": "Completed Tasks",
     "Confirm plant": "Confirm plant",
-    "Failed to retrieve echo missions": "Failed to retrieve echo missions",
+    "Failed to retrieve Echo missions": "Failed to retrieve Echo missions",
     "Request error": "Request error",
     "No missions available": "No missions available"
 }
diff --git a/frontend/src/language/no.json b/frontend/src/language/no.json
@@ -13,7 +13,7 @@
     "Please select installation": "Vennligst velg anlegg",
     "This installation does not have missions. Please create mission.": "Dette anlegget har ingen oppdrag. Vennligst lag oppdrag.",
     "Cancel": "Avbryt",
-    "Add mission": "Legg til oppdrag",
+    "Add predefined Echo mission": "Legg til forhåndsdefinert Echo-oppdrag",
     "Select missions": "Velg oppdrag",
     "Select robot": "Velg robot",
     "Select start time": "Velg starttidspunkt",
@@ -135,6 +135,7 @@
     "Last completed": "Sist fullført",
     "Deadline": "Frist",
     "Add to queue": "Legg til i kø",
+    "Add mission to the queue": "Legg til oppdrag i kø",
     "Not yet performed": "Aldri kjørt",
     "Never": "Aldri",
     "Due this week": "Frist denne uken",
@@ -184,7 +185,7 @@
     "Queue the missions": "Legg oppdragene i kø",
     "Deck Overview": "Dekkoversikt",
     "Predefined Missions": "Forhåndsdefinerte oppdrag",
-    "Create a new mission": "Lag nytt oppdrag",
+    "Create new Echo mission": "Lag nytt Echo-oppdrag",
     "Must be inspected this week": "Må inspiseres denne uken",
     "Must be inspected within two weeks": "Må inspiseres innen to uker",
     "Mission": "Oppdrag",
@@ -204,7 +205,7 @@
     "Edit mission definition": "Rediger oppdragsdefinisjon",
     "Completed Tasks": "Fullførte oppgaver",
     "Confirm plant": "Bekreft anlegg",
-    "Failed to retrieve echo missions": "Kunne ikke hente ut oppdrag fra echo",
+    "Failed to retrieve Echo missions": "Kunne ikke hente ut oppdrag fra Echo",
     "Request error": "Forespørselsfeil",
     "No missions available": "Ingen oppdrag tilgjengelig"
 }