Highlight Assessment tab if project list is empty

plugins/orion/src/components/ParodosPage.tsx

@@ -1,13 +1,16 @@
 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,
   NotificationsIcon,
   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: <TrainingIcon /> },
 ];
 
-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 && <StarIcon className={styles.highlightedTab} />}
+      {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 }) => {
       <HeaderTabs
         selectedIndex={selectedTab}
         onChange={onChangeTab}
-        tabs={navigationMap.map(({ label, icon }, index) => ({
-          id: index.toString(),
-          label: (
-            <TabLabel icon={icon} label={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: (
+              <TabLabel icon={icon} label={label} highlighted={highlighted} />
+            ) 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
+          };
+        })}
       />
 
       <Content>{children}</Content>