link highlighting

nucleuscloud · Nov 15, 2023 · e1aaed1 · e1aaed1
1 parent 77ca4d0
commit e1aaed1
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 12 deletions.
diff --git a/frontend/app/jobs/[id]/components/JobPauseButton.tsx b/frontend/app/jobs/[id]/components/JobPauseButton.tsx
@@ -28,11 +28,14 @@ export default function JobPauseButton({
     status === JobStatus.PAUSED ? 'Resume Job' : 'Pause Job'
   );
 
+  const [buttonIcon, setButtonIcon] = useState<JSX.Element>(
+    status === JobStatus.PAUSED ? <PlayIcon /> : <PauseIcon />
+  );
   const [isTrying, setIsTrying] = useState<boolean>(false);
 
   useEffect(() => {
     setButtonText(status === JobStatus.PAUSED ? 'Resume Job' : 'Pause Job');
-    console.log('status in useeffect', status);
+    setButtonIcon(status === JobStatus.PAUSED ? <PlayIcon /> : <PauseIcon />);
   }, [status]);
 
   async function updateJobStatus(isPaused: boolean) {
@@ -46,6 +49,7 @@ export default function JobPauseButton({
       mutate();
       setIsTrying(false);
       setButtonText((val) => (val == 'Pause Job' ? 'Resume Job' : 'Pause Job'));
+      setButtonIcon(handleIcon());
     } catch (err) {
       console.error(err);
       toast({
@@ -60,7 +64,7 @@ export default function JobPauseButton({
   const handleIcon = () => {
     if (isTrying) {
       return <Spinner />;
-    } else if (!isTrying && buttonText != 'Pause Job') {
+    } else if (!isTrying && buttonText == 'Resume Job') {
       return <PlayIcon />;
     } else {
       return <PauseIcon />;
@@ -76,7 +80,7 @@ export default function JobPauseButton({
           updateJobStatus(!isCurrentlyPaused);
         }}
       >
-        <ButtonText leftIcon={handleIcon()} text={buttonText} />
+        <ButtonText leftIcon={buttonIcon} text={buttonText} />
       </Button>
     </div>
   );

diff --git a/frontend/app/jobs/[id]/layout.tsx b/frontend/app/jobs/[id]/layout.tsx
@@ -103,9 +103,8 @@ export default function JobIdLayout({ children, params }: LayoutProps) {
       <OverviewContainer
         Header={
           <div>
-            <h2 className="text-2xl font-bold tracking-tight">Job Overview</h2>
             <PageHeader
-              pageHeaderContainerClassName="gap-4"
+              pageHeaderContainerClassName="gap-2"
               header={data?.job?.name || ''}
               description={data?.job?.id || ''}
               extraHeading={
@@ -142,7 +141,7 @@ export default function JobIdLayout({ children, params }: LayoutProps) {
       >
         <div className="flex flex-col gap-6">
           <SubNav items={sidebarNavItems} />
-          <div>{children}</div>
+          <div className="mt-10">{children}</div>
         </div>
       </OverviewContainer>
     </div>

diff --git a/frontend/components/MainNav.tsx b/frontend/components/MainNav.tsx
@@ -12,6 +12,13 @@ export function MainNav({
   ...props
 }: React.HTMLAttributes<HTMLElement>) {
   const pathname = usePathname();
+
+  const highlightPathName = (href: string): boolean => {
+    if (href === '/' && pathname === '/') {
+      return true;
+    }
+    return href !== '/' && pathname.startsWith(href);
+  };
   return (
     <div className="mr-4 hidden md:flex">
       <Link href="/" className="mr-6 flex items-center space-x-2">
@@ -28,7 +35,7 @@ export function MainNav({
           href="/"
           className={cn(
             'text-sm font-medium transition-colors hover:text-primary',
-            pathname === '/' ? 'text-foreground' : 'text-foreground/60'
+            highlightPathName('/') ? 'text-foreground' : 'text-foreground/60'
           )}
         >
           Overview
@@ -37,7 +44,9 @@ export function MainNav({
           href="/jobs"
           className={cn(
             'text-sm font-medium text-muted-foreground transition-colors hover:text-primary',
-            pathname === '/jobs' ? 'text-foreground' : 'text-foreground/60'
+            highlightPathName('/jobs')
+              ? 'text-foreground'
+              : 'text-foreground/60'
           )}
         >
           Jobs
@@ -46,7 +55,9 @@ export function MainNav({
           href="/runs"
           className={cn(
             'text-sm font-medium text-muted-foreground transition-colors hover:text-primary',
-            pathname === '/runs' ? 'text-foreground' : 'text-foreground/60'
+            highlightPathName('/runs')
+              ? 'text-foreground'
+              : 'text-foreground/60'
           )}
         >
           Runs
@@ -55,7 +66,7 @@ export function MainNav({
           href="/transformers"
           className={cn(
             'text-sm font-medium text-muted-foreground transition-colors hover:text-primary',
-            pathname === '/transformers'
+            highlightPathName('/transformers')
               ? 'text-foreground'
               : 'text-foreground/60'
           )}
@@ -66,7 +77,7 @@ export function MainNav({
           href="/connections"
           className={cn(
             'text-sm font-medium text-muted-foreground transition-colors hover:text-primary',
-            pathname === '/connections'
+            highlightPathName('/connections')
               ? 'text-foreground'
               : 'text-foreground/60'
           )}
@@ -78,7 +89,9 @@ export function MainNav({
           href="/settings"
           className={cn(
             'text-sm font-medium text-muted-foreground transition-colors hover:text-primary',
-            pathname === '/settings' ? 'text-foreground' : 'text-foreground/60'
+            highlightPathName('/settings')
+              ? 'text-foreground'
+              : 'text-foreground/60'
           )}
         >
           Settings