Skip to content

Commit 7fe00c2

Browse files
andchiindandchiind
committed
Use colon instead of forward slash in URL
1 parent 5333ac0 commit 7fe00c2

File tree

20 files changed

+227
-143
lines changed

20 files changed

+227
-143
lines changed

‎frontend/src/App.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { ApplicationInsights } from '@microsoft/applicationinsights-web'
22
import { AuthenticatedTemplate, UnauthenticatedTemplate } from '@azure/msal-react'
3-
import { AssetSelectionPage } from 'pages/AssetSelectionPage/AssetSelectionPage'
3+
import { LoginPage } from 'pages/LoginPage/LoginPage'
44
import { FlotillaSite } from 'pages/FlotillaSite'
55
import { LanguageProvider } from 'components/Contexts/LanguageContext'
66
import { MissionControlProvider } from 'components/Contexts/MissionControlContext'
@@ -42,7 +42,7 @@ const App = () => (
4242
<MissionControlProvider>
4343
<UnauthenticatedTemplate>
4444
<div className="sign-in-page">
45-
<AssetSelectionPage></AssetSelectionPage>
45+
<LoginPage />
4646
</div>
4747
</UnauthenticatedTemplate>
4848
<AuthenticatedTemplate>

‎frontend/src/components/Alerts/FailedMissionAlert.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { AlertListContents } from './AlertsListItem'
77
import { Icons } from 'utils/icons'
88
import { tokens } from '@equinor/eds-tokens'
99
import { AlertContainer, AlertButton } from './AlertStyles'
10+
import { useAssetContext } from 'components/Contexts/AssetContext'
1011

1112
interface MissionsProps {
1213
missions: Mission[]
@@ -15,9 +16,10 @@ interface MissionsProps {
1516
const FailedMission = ({ missions }: MissionsProps) => {
1617
const mission = missions[0]
1718
const { TranslateText } = useLanguageContext()
19+
const { installationCode } = useAssetContext()
1820
const navigate = useNavigate()
1921
const goToMission = () => {
20-
const path = `${config.FRONTEND_BASE_ROUTE}/mission-${mission.id}`
22+
const path = `${config.FRONTEND_BASE_ROUTE}/${installationCode}:mission?id=${mission.id}`
2123
navigate(path)
2224
}
2325

@@ -31,9 +33,10 @@ const FailedMission = ({ missions }: MissionsProps) => {
3133

3234
const SeveralFailedMissions = ({ missions }: MissionsProps) => {
3335
const { TranslateText } = useLanguageContext()
36+
const { installationCode } = useAssetContext()
3437
const navigate = useNavigate()
3538
const goToHistory = () => {
36-
const path = `${config.FRONTEND_BASE_ROUTE}/history`
39+
const path = `${config.FRONTEND_BASE_ROUTE}/${installationCode}:history`
3740
navigate(path)
3841
}
3942

‎frontend/src/components/Dialogs/MissionEditDialog.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@ const useMissionUpdater = () => {
7979
.then((missionDefinition) => {
8080
onSuccess()
8181
if (missionDefinition.isDeprecated)
82-
navigate(`${config.FRONTEND_BASE_ROUTE}/${installationCode}/front-page`)
82+
navigate(`${config.FRONTEND_BASE_ROUTE}/${installationCode}:front-page`)
8383
})
8484
.catch(() => {
8585
setAlert(

‎frontend/src/components/Displays/MissionButtons/MissionRestartButton.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ export const MissionRestartButton = ({ mission, hasFailedTasks, smallButton }: M
4646

4747
const navigate = useNavigate()
4848
const navigateToHome = () => {
49-
const path = `${config.FRONTEND_BASE_ROUTE}/${installationCode}/front-page`
49+
const path = `${config.FRONTEND_BASE_ROUTE}/${installationCode}:front-page`
5050
navigate(path)
5151
}
5252

‎frontend/src/components/NavigationMenu/NavigationMenu.tsx‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ const StyledButton = styled(Button)`
1414

1515
export const NavigationMenu = () => {
1616
const { TranslateText } = useLanguageContext()
17-
const { installationInspectionAreas } = useAssetContext()
17+
const { installationInspectionAreas, installationCode } = useAssetContext()
1818
const [isOpen, setIsOpen] = useState(false)
1919
const [anchorEl, setAnchorEl] = useState(null)
2020
const openMenu = () => {
@@ -43,11 +43,6 @@ export const NavigationMenu = () => {
4343
]
4444

4545
const navigate = useNavigate()
46-
const routeChange = (routePath: string) => {
47-
const path = `${config.FRONTEND_BASE_ROUTE}/${routePath}`
48-
navigate(path)
49-
return
50-
}
5146

5247
return (
5348
<>
@@ -66,7 +61,10 @@ export const NavigationMenu = () => {
6661
</StyledButton>
6762
<Menu open={isOpen} id="menu" aria-labelledby="menu" onClose={closeMenu} anchorEl={anchorEl}>
6863
{paths.map((page) => (
69-
<Menu.Item key={page.label} onClick={() => routeChange(page.path)}>
64+
<Menu.Item
65+
key={page.label}
66+
onClick={() => navigate(`${config.FRONTEND_BASE_ROUTE}/${installationCode}:${page.path}`)}
67+
>
7068
{TranslateText(page.label)}
7169
</Menu.Item>
7270
))}

‎frontend/src/pages/AssetSelectionPage/AssetSelectionPage.tsx‎

Lines changed: 23 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,5 @@
1-
import { useEffect, useState, useRef } from 'react'
2-
import { useIsAuthenticated } from '@azure/msal-react'
3-
import { useMsal } from '@azure/msal-react'
4-
import { loginRequest } from 'api/AuthConfig'
5-
import { Autocomplete, Button, CircularProgress, Typography } from '@equinor/eds-core-react'
6-
import { InteractionStatus, IPublicClientApplication } from '@azure/msal-browser'
1+
import { useEffect, useState } from 'react'
2+
import { Autocomplete, Button } from '@equinor/eds-core-react'
73
import styled from 'styled-components'
84
import { useLanguageContext } from 'components/Contexts/LanguageContext'
95
import { Header } from 'components/Header/Header'
@@ -13,12 +9,6 @@ import { useNavigate } from 'react-router-dom'
139
import { phone_width } from '../../utils/constants'
1410
import { useAssetContext } from 'components/Contexts/AssetContext'
1511

16-
const Centered = styled.div`
17-
display: flex;
18-
flex-direction: column;
19-
align-items: center;
20-
padding-top: 10px;
21-
`
2212
const StyledAssetSelection = styled.div`
2313
display: flex;
2414
flex-direction: column;
@@ -44,87 +34,44 @@ const StyledContent = styled.div`
4434
gap: 80px;
4535
`
4636

47-
const handleLogin = (instance: IPublicClientApplication) => {
48-
const accounts = instance.getAllAccounts()
49-
if (accounts.length > 0) {
50-
console.log('Active account found, skipping login')
51-
return
52-
}
53-
54-
instance.loginRedirect(loginRequest).catch((e) => {
55-
console.error('Login error:', e)
56-
})
57-
}
58-
59-
export const AssetSelectionPage = () => {
60-
const isAuthenticated = useIsAuthenticated()
61-
const { instance, inProgress } = useMsal()
62-
const loginInitiatedRef = useRef(false)
63-
64-
useEffect(() => {
65-
// Trigger login when not authenticated and no interaction is in progress
66-
// Use ref to prevent double-triggering in StrictMode
67-
if (!isAuthenticated && inProgress === InteractionStatus.None && !loginInitiatedRef.current) {
68-
console.log('Not authenticated, initiating login...')
69-
loginInitiatedRef.current = true
70-
handleLogin(instance)
71-
}
72-
}, [isAuthenticated, inProgress, instance])
73-
74-
// Show loading while authentication is in progress
75-
if (inProgress !== InteractionStatus.None) {
76-
return (
77-
<Centered>
78-
<Typography variant="body_long_bold" color="primary">
79-
Authentication in progress...
80-
</Typography>
81-
<CircularProgress size={48} />
82-
</Centered>
83-
)
84-
}
85-
86-
return (
87-
<>
88-
{isAuthenticated ? (
89-
<>
90-
<Header page={'root'} />
91-
<StyledContent>
92-
<InstallationPicker />
93-
<StyledImage src={assetImage} />
94-
</StyledContent>
95-
</>
96-
) : (
97-
<Centered>
98-
<Typography variant="body_long_bold" color="primary">
99-
Redirecting to login...
100-
</Typography>
101-
<CircularProgress size={48} />
102-
</Centered>
103-
)}
104-
</>
105-
)
106-
}
37+
export const AssetSelectionPage = () => (
38+
<>
39+
<Header page={'root'} />
40+
<StyledContent>
41+
<InstallationPicker />
42+
<StyledImage src={assetImage} />
43+
</StyledContent>
44+
</>
45+
)
10746

10847
export const findNavigationPage = (installationCode: string) => {
10948
if (window.innerWidth <= 600) {
110-
return `${config.FRONTEND_BASE_ROUTE}/${installationCode}/mission-control`
49+
return `${config.FRONTEND_BASE_ROUTE}/${installationCode}:mission-control`
11150
} else {
112-
return `${config.FRONTEND_BASE_ROUTE}/${installationCode}/front-page`
51+
return `${config.FRONTEND_BASE_ROUTE}/${installationCode}:front-page`
11352
}
11453
}
11554

11655
const InstallationPicker = () => {
11756
const { installationName, switchInstallation, activeInstallations, installationCode } = useAssetContext()
11857
const { TranslateText } = useLanguageContext()
11958
const [selectedInstallation, setSelectedInstallation] = useState<string>(installationName)
59+
const [shouldNavigate, setShouldNavigate] = useState<boolean>(false)
12060
const navigate = useNavigate()
12161

12262
const handleClick = () => {
12363
switchInstallation(selectedInstallation)
124-
const target = findNavigationPage(installationCode)
125-
navigate(target)
64+
setShouldNavigate(true)
12665
}
12766

67+
useEffect(() => {
68+
if (shouldNavigate) {
69+
setShouldNavigate(false)
70+
const target = findNavigationPage(installationCode)
71+
navigate(target)
72+
}
73+
}, [shouldNavigate, installationCode])
74+
12875
const installationNames = activeInstallations.map((i) => i.name)
12976

13077
return (

‎frontend/src/pages/FlotillaSite.tsx‎

Lines changed: 32 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -12,34 +12,51 @@ import {
1212
RobotStatusPage,
1313
} from '../components/NavigationMenu/NavigationMenuPages'
1414
import { InfoPage } from './InfoPage'
15-
import { PageRouter } from './PageRouter'
15+
import { MissionDefinitionPageRouter, MissionPageRouter, RobotPageRouter } from './PageRouter'
1616
import { PageNotFound } from './NotFoundPage'
1717
import { useAssetContext } from 'components/Contexts/AssetContext'
1818

1919
export const FlotillaSite = () => {
2020
const frontPageTabOptions = Object.values(TabNames)
2121
const { installationCode } = useAssetContext()
2222

23+
const installationCodePath = `${config.FRONTEND_BASE_ROUTE}/${installationCode}`
24+
25+
// This needs to be a normal object so that it isn't interpreted as a non "Route" object
26+
const installationSpecificPages = (
27+
<>
28+
<Route
29+
path={`${installationCodePath}:front-page`}
30+
element={<FrontPage activeTab={frontPageTabOptions[0]} />}
31+
/>
32+
{frontPageTabOptions.map((tab) => (
33+
<Route
34+
key={tab}
35+
path={`${installationCodePath}:front-page-${tab}`}
36+
element={<FrontPage activeTab={tab} />}
37+
/>
38+
))}
39+
<Route path={`${installationCodePath}:history`} element={<MissionHistoryPage />} />
40+
<Route path={`${installationCodePath}:mission-control`} element={<MissionControlPage />} />
41+
<Route path={`${installationCodePath}:inspection-overview`} element={<AreaOverviewPage />} />
42+
<Route path={`${installationCodePath}:predefined-missions`} element={<PredefinedMissionsPage />} />
43+
<Route path={`${installationCodePath}:auto-schedule`} element={<AutoSchedulePage />} />
44+
<Route path={`${installationCodePath}:robots`} element={<RobotStatusPage />} />
45+
<Route path={`${installationCodePath}:mission`} element={<MissionPageRouter />} />
46+
<Route path={`${installationCodePath}:missiondefinition`} element={<MissionDefinitionPageRouter />} />
47+
<Route path={`${installationCodePath}:robot`} element={<RobotPageRouter />} />
48+
</>
49+
)
50+
2351
return (
2452
<>
2553
<APIUpdater>
2654
<BrowserRouter>
2755
<Routes>
28-
<Route path={`${config.FRONTEND_BASE_ROUTE}`} element={<AssetSelectionPage />} />
2956
<Route path={`${config.FRONTEND_BASE_ROUTE}/`} element={<AssetSelectionPage />} />
30-
<Route path={`${config.FRONTEND_BASE_ROUTE}/${installationCode}/`}>
31-
<Route path={`front-page`} element={<FrontPage activeTab={frontPageTabOptions[0]} />} />
32-
{frontPageTabOptions.map((tab) => (
33-
<Route key={tab} path={`front-page-${tab}`} element={<FrontPage activeTab={tab} />} />
34-
))}
35-
<Route path={`history`} element={<MissionHistoryPage />} />
36-
<Route path={`mission-control`} element={<MissionControlPage />} />
37-
<Route path={`inspection-overview`} element={<AreaOverviewPage />} />
38-
<Route path={`predefined-missions`} element={<PredefinedMissionsPage />} />
39-
<Route path={`auto-schedule`} element={<AutoSchedulePage />} />
40-
<Route path={`robots`} element={<RobotStatusPage />} />
41-
</Route>
42-
<Route path={`${config.FRONTEND_BASE_ROUTE}/:page`} element={<PageRouter />} />
57+
58+
{installationCode ? installationSpecificPages : <></>}
59+
4360
<Route path={`${config.FRONTEND_BASE_ROUTE}/info`} element={<InfoPage />} />
4461
<Route path="*" element={<PageNotFound />} />
4562
</Routes>

‎frontend/src/pages/FrontPage/AutoScheduleSection/AutoScheduleCalendar.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import { config } from 'config'
1313
import { useLanguageContext } from 'components/Contexts/LanguageContext'
1414
import { Button, Typography } from '@equinor/eds-core-react'
1515
import { StyledDialog } from 'components/Styles/StyledComponents'
16+
import { useAssetContext } from 'components/Contexts/AssetContext'
1617

1718
const locales = { nb }
1819
const localizer = dateFnsLocalizer({ format, parse, startOfWeek, getDay, locales })
@@ -176,6 +177,7 @@ const legendItems = [
176177
export const CalendarPro = () => {
177178
const { missionDefinitions } = useMissionDefinitionsContext()
178179
const { TranslateText } = useLanguageContext()
180+
const { installationCode } = useAssetContext()
179181
const navigate = useNavigate()
180182
const [dialogOpen, setDialogOpen] = useState<boolean>(false)
181183
const [selectedEvent, setSelectedEvent] = useState<any>(null)
@@ -320,7 +322,9 @@ export const CalendarPro = () => {
320322
},
321323
})}
322324
onDoubleClickEvent={(event) =>
323-
navigate(`${config.FRONTEND_BASE_ROUTE}/missiondefinition-${event.metadata.missionId}`)
325+
navigate(
326+
`${config.FRONTEND_BASE_ROUTE}/${installationCode}:missiondefinition?id=${event.metadata.missionId}`
327+
)
324328
}
325329
/>
326330
</CalendarWrapper>

‎frontend/src/pages/FrontPage/FrontPage.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -147,7 +147,7 @@ export const FrontPage = ({ activeTab }: { activeTab: TabNames }) => {
147147
else tab = tabs.find((t) => t.name === index)
148148

149149
if (tab === undefined) return
150-
navigate(`${config.FRONTEND_BASE_ROUTE}/${installationCode}/front-page-${tab.name}`)
150+
navigate(`${config.FRONTEND_BASE_ROUTE}/${installationCode}:front-page-${tab.name}`)
151151
}
152152

153153
const setActiveTabToMissionControl = () => goToTab(tabs.findIndex((t) => t.name === TabNames.MissionControl))

‎frontend/src/pages/FrontPage/MissionOverview/MissionQueueCard.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import { Icons } from 'utils/icons'
99
import { StyledDialog } from 'components/Styles/StyledComponents'
1010
import { tokens } from '@equinor/eds-tokens'
1111
import { calculateRemaindingTimeInMinutes } from 'utils/CalculateRemaingingTime'
12+
import { useAssetContext } from 'components/Contexts/AssetContext'
1213

1314
interface MissionQueueCardProps {
1415
order: number
@@ -66,8 +67,9 @@ const StyledButton = styled(Button)`
6667

6768
export const MissionQueueCard = ({ order, mission, onDeleteMission }: MissionQueueCardProps) => {
6869
const navigate = useNavigate()
70+
const { installationCode } = useAssetContext()
6971
const routeChange = () => {
70-
const path = `${config.FRONTEND_BASE_ROUTE}/mission-${mission.id}`
72+
const path = `${config.FRONTEND_BASE_ROUTE}/${installationCode}:mission?id=${mission.id}`
7173
navigate(path)
7274
}
7375
const [confirmDeleteDialogOpen, setConfirmDeleteDialogOpen] = useState<boolean>(false)

0 commit comments

Comments
 (0)