diff --git a/plugins/orion/src/components/ParodosPage.tsx b/plugins/orion/src/components/ParodosPage.tsx index 132372918f..d6b417181c 100644 --- a/plugins/orion/src/components/ParodosPage.tsx +++ b/plugins/orion/src/components/ParodosPage.tsx @@ -1,6 +1,8 @@ import React from 'react'; import { Content, HeaderTabs, Page } from '@backstage/core-components'; import { useLocation } from 'react-router-dom'; +import StarIcon from '@material-ui/icons/Star'; +import { makeStyles } from '@material-ui/core'; import { PageHeader } from './PageHeader'; import { AssessmentIcon, @@ -8,6 +10,7 @@ import { ProjectsIcon, TrainingIcon, } from './icons'; +import { mockProjects } from './projectOverview/mockData'; export const pluginRoutePrefix = '/parodos'; @@ -22,19 +25,39 @@ export const navigationMap = [ { label: 'Training', route: '/training', icon: }, ]; -export const TabLabel: React.FC<{ icon?: React.ReactNode; label: string }> = ({ - icon, - label, -}) => ( - <> - {icon} - {label} - -); +const useStyles = makeStyles({ + highlightedTab: { + position: 'absolute', + top: '1rem', + right: 0, + color: '#F70D1A', + }, +}); + +export const TabLabel: React.FC<{ + icon?: React.ReactNode; + label: string; + highlighted?: boolean; +}> = ({ icon, label, highlighted }) => { + const styles = useStyles(); + return ( + <> + {icon} + {highlighted && } + {label} + + ); +}; export const ParodosPage: React.FC = ({ children }) => { const [selectedTab, setSelectedTab] = React.useState(0); const { pathname } = useLocation(); + const [isProject, setIsProject] = React.useState(true); + + React.useEffect(() => { + // TODO: load the data + setIsProject(mockProjects.length > 0); + }, [setIsProject]); React.useEffect(() => { const index = @@ -53,14 +76,21 @@ export const ParodosPage: React.FC = ({ children }) => { ({ - id: index.toString(), - label: ( - - ) as unknown as string /* Hack, since HeaderTabs accept string only. Contrary to Tabs coponent. */, + tabs={navigationMap.map(({ label, icon }, index) => { + const highlighted = + selectedTab === 0 /* When on Projects tab only */ && + index === 1 /* for the Assessment tab only */ && + !isProject; + + return { + id: index.toString(), + label: ( + + ) as unknown as string /* Hack, since HeaderTabs accept string only. Contrary to Tabs coponent. */, - // To consider: we can use Content here over react-router, the behavior would be smoother - }))} + // To consider: we can use Content here over react-router, the behavior would be smoother + }; + })} /> {children}