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}