[ui] Nav updates: highlight Automation, Jobs (dagster-io#21362)

## Summary & Motivation This is for the new navigation/settings flag. - When viewing a schedule or sensor, highlight "Automation" in the top nav. - When viewing a job, highlight "Jobs" in the top nav. ## How I Tested These Changes View these pages in the app, verify that the correct top nav item is highlighted in each case.
nikomancy · May 1, 2024 · 05297eb · 05297eb
1 parent eaa9d9f
commit 05297eb
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 11 deletions.
diff --git a/js_modules/dagster-ui/packages/ui-core/src/app/AppTopNav/AppTopNavLinks.tsx b/js_modules/dagster-ui/packages/ui-core/src/app/AppTopNav/AppTopNavLinks.tsx
@@ -3,7 +3,13 @@ import {ReactNode} from 'react';
 import {useHistory} from 'react-router-dom';
 
 import {TopNavLink} from './AppTopNav';
-import {assetsPathMatcher, locationPathMatcher, settingsPathMatcher} from './activePathMatchers';
+import {
+  assetsPathMatcher,
+  automationPathMatcher,
+  jobsPathMatcher,
+  locationPathMatcher,
+  settingsPathMatcher,
+} from './activePathMatchers';
 import {DeploymentStatusIcon} from '../../nav/DeploymentStatusIcon';
 import {FeatureFlag, featureEnabled} from '../Flags';
 import {ShortcutHandler} from '../ShortcutHandler';
@@ -60,7 +66,7 @@ export const navLinks = () => {
     key: 'jobs',
     path: '/jobs',
     element: (
-      <TopNavLink to="/jobs" data-cy="AppTopNav_JobsLink">
+      <TopNavLink to="/jobs" data-cy="AppTopNav_JobsLink" isActive={jobsPathMatcher}>
         Jobs
       </TopNavLink>
     ),
@@ -70,12 +76,7 @@ export const navLinks = () => {
     key: 'assets',
     path: '/assets',
     element: (
-      <TopNavLink
-        to="/assets"
-        data-cy="AppTopNav_AssetsLink"
-        isActive={assetsPathMatcher}
-        exact={false}
-      >
+      <TopNavLink to="/assets" data-cy="AppTopNav_AssetsLink" isActive={assetsPathMatcher}>
         Assets
       </TopNavLink>
     ),
@@ -85,7 +86,11 @@ export const navLinks = () => {
     key: 'automation',
     path: '/automation',
     element: (
-      <TopNavLink to="/automation" data-cy="AppTopNav_AutomationLink">
+      <TopNavLink
+        to="/automation"
+        data-cy="AppTopNav_AutomationLink"
+        isActive={automationPathMatcher}
+      >
         Automation
       </TopNavLink>
     ),

diff --git a/js_modules/dagster-ui/packages/ui-core/src/app/AppTopNav/activePathMatchers.tsx b/js_modules/dagster-ui/packages/ui-core/src/app/AppTopNav/activePathMatchers.tsx
@@ -1,8 +1,15 @@
 import {ComponentProps} from 'react';
-import {NavLink} from 'react-router-dom';
+import {NavLink, matchPath} from 'react-router-dom';
 
 type MatcherFn = NonNullable<ComponentProps<typeof NavLink>['isActive']>;
 
+export const jobsPathMatcher: MatcherFn = (_, currentLocation) => {
+  const {pathname} = currentLocation;
+  return !!matchPath(pathname, {
+    path: ['/jobs', '/locations/:codeLocation/jobs/:jobName'],
+  });
+};
+
 export const assetsPathMatcher: MatcherFn = (_, currentLocation) => {
   const {pathname} = currentLocation;
   return (
@@ -17,7 +24,10 @@ export const settingsPathMatcher: MatcherFn = (_, currentLocation) => {
   const {pathname} = currentLocation;
   return (
     pathname.startsWith('/settings') ||
-    (pathname.startsWith('/locations') && !pathname.includes('/asset-groups/'))
+    (pathname.startsWith('/locations') &&
+      !pathname.includes('/asset-groups/') &&
+      !automationPathMatcher(_, currentLocation) &&
+      !jobsPathMatcher(_, currentLocation))
   );
 };
 
@@ -29,3 +39,14 @@ export const locationPathMatcher: MatcherFn = (_, currentLocation) => {
     pathname.startsWith('/config')
   );
 };
+
+export const automationPathMatcher: MatcherFn = (_, currentLocation) => {
+  const {pathname} = currentLocation;
+  return !!matchPath(pathname, {
+    path: [
+      '/automation',
+      '/locations/:codeLocation/sensors/:sensorName',
+      '/locations/:codeLocation/schedules/:scheduleName',
+    ],
+  });
+};