import * as React from 'react' ; import { NavLink , Redirect , Route , Switch } from 'react-router-dom' ; import styled from 'styled-components' ; import { Box , Flex , BORDER_SOLID_LIGHT , C_NEAR_WHITE , DIRECTION_COLUMN , FLEX_NONE , POSITION_RELATIVE , SIZE_4 , SPACING_2 , } from '@opentrons/components' ; import { AppSettings } from '../pages/More/AppSettings' ; import { DevicesLanding } from '../pages/Devices/DevicesLanding' ; interface RouteProps { /**
     * the component rendered by a route match
     * drop developed components into slots held by placeholder div components
     */ component : ( ) => JSX . Element ; exact ? : boolean ; /**
     * a route/page name to render in the temp nav bar
     */ name : string ; /**
     * the path for navigation linking, for example to push to a default tab
     * some of these links are temp (and params hardcoded) until final nav and breadcrumbs implemented
     */ navLinkTo ? : string ; path : string ; /**
     * navigational tier, for temp nav and perhaps breadcrumb when implemented
     */ tier : number ; } const TempNavBarLink = styled ( NavLink ) < { tier : number ; lastRoute : boolean ; } > `
  padding-left: ${ props => ( props . tier - 1 ) * 5 }px;
  margin-top: ${ props => ( props . lastRoute ? 'auto' : 0 ) };
` ; param routes returns { JSX . Element } function TempNavBar ( { routes } ) { const navRoutes = routes . filter ( ( { navLinkTo } ) => navLinkTo != null ) ; return ( < Flex flexDirection = { DIRECTION_COLUMN } flex = { FLEX_NONE } width = { SIZE_4 } borderRight = { BORDER_SOLID_LIGHT } margin = { SPACING_2 } > { navRoutes . map ( ( { name , navLinkTo , tier } , i ) => ( < TempNavBarLink key = { name } to = { navLinkTo as string } lastRoute = { i === navRoutes . length - 1 } tier = { tier } > { name } < /TempNavBarLink>))} < /Flex>); } returns { JSX . Element } export function NextGenApp ( ) { const nextGenRoutes = [ { component : ( ) => < div > protocols landing < / div > , exact : true , name : 'Protocols' , navLinkTo : '/protocols' , path : '/protocols' , tier : 1 , } , { component : ( ) => < div > protocol details < /div>, exact : true , name : 'Protocol Details' , navLinkTo : '/protocols/1' , path : '/protocols/:protocolId' , tier : 2 , } , { component : ( ) => < div > deck setup < /div>, name : 'Deck Setup' , navLinkTo : '/protocols/1/deck-setup' , path : '/protocols/:protocolId/deck-setup' , tier : 3 , } , { component : ( ) => < div > labware landing < /div>, name : 'Labware' , navLinkTo : '/labware' , path : '/labware/:labwareId?' , tier : 1 , } , { component : DevicesLanding , exact : true , name : 'Devices' , navLinkTo : '/devices' , path : '/devices' , tier : 1 , } , { component : ( ) => < div > device details < /div>, exact : true , name : 'Device Details' , navLinkTo : '/devices/otie' , path : '/devices/:deviceName' , tier : 2 , } , { component : ( ) => < div > robot settings < /div>, exact : true , name : 'Robot Settings' , navLinkTo : '/devices/otie/robot-settings/calibration' , path : '/devices/:deviceName/robot-settings/:robotSettingsTab' , tier : 3 , } , { component : ( ) => < div > protocol runs landing < /div>, exact : true , name : 'Protocol Runs' , navLinkTo : '/devices/otie/protocol-runs' , path : '/devices/:deviceName/protocol-runs' , tier : 3 , } , { component : ( ) => < div > protocol run details page < /div>, name : 'Run Details' , path : '/devices/:deviceName/protocol-runs/:runDetailsTab' , tier : 4 , } , { component : AppSettings , name : 'App Settings' , navLinkTo : '/app-settings/feature-flags' , path : '/app-settings/:appSettingsTab' , tier : 1 , } , ] ; return ( < > < TempNavBar routes = { nextGenRoutes } / > < Box position = { POSITION_RELATIVE } width = "100%" height = "100%" backgroundColor = { C_NEAR_WHITE } > < Switch > { nextGenRoutes . map ( ( { component , exact , path } ) => { return ( < Route key = { path } component = { component } exact = { exact } path = { path } / > ) ; } ) } { } < Redirect from = "/robots" to = "/devices" / > { } < Redirect from = "/more" to = "/app-settings/feature-flags" / > < /Switch> < /Box> < />); }