Detect system color theme and add active state to nav button (apache#…

…43041) * Detect system color theme and add active state to nav button * Clean up navbutton props
R7L208 · Oct 17, 2024 · ae5985e · ae5985e
1 parent d8c1edc
commit ae5985e
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 10 deletions.
diff --git a/airflow/ui/src/layouts/Nav/Nav.tsx b/airflow/ui/src/layouts/Nav/Nav.tsx
@@ -68,7 +68,12 @@ export const Nav = () => {
         >
           <Icon as={AirflowPin} height="35px" width="35px" />
         </Box>
-        <NavButton icon={<FiHome size="1.75rem" />} isDisabled title="Home" />
+        <NavButton
+          icon={<FiHome size="1.75rem" />}
+          isDisabled
+          title="Home"
+          to="/"
+        />
         <NavButton
           icon={<DagIcon height={7} width={7} />}
           title="DAGs"
@@ -78,29 +83,33 @@ export const Nav = () => {
           icon={<FiDatabase size="1.75rem" />}
           isDisabled
           title="Assets"
+          to="assets"
         />
         <NavButton
           icon={<FiBarChart2 size="1.75rem" />}
           isDisabled
           title="DAG Runs"
+          to="dag_runs"
         />
         <NavButton
           icon={<FiGlobe size="1.75rem" />}
           isDisabled
           title="Browse"
+          to="browse"
         />
         <NavButton
           icon={<FiSettings size="1.75rem" />}
           isDisabled
           title="Admin"
+          to="admin"
         />
       </Flex>
       <Flex flexDir="column">
         <NavButton
           as={Link}
-          href={import.meta.env.VITE_LEGACY_API_URL}
           icon={<FiCornerUpLeft size="1.5rem" />}
           title="Return to legacy UI"
+          to={import.meta.env.VITE_LEGACY_API_URL}
         />
         <DocsButton />
         <UserSettingsButton />

diff --git a/airflow/ui/src/layouts/Nav/NavButton.tsx b/airflow/ui/src/layouts/Nav/NavButton.tsx
@@ -18,21 +18,23 @@
  */
 import { Box, Button, type ButtonProps } from "@chakra-ui/react";
 import type { ReactElement } from "react";
-import { Link as RouterLink } from "react-router-dom";
+import { NavLink } from "react-router-dom";
 
 import { navButtonProps } from "./navButtonProps";
 
 type NavButtonProps = {
-  readonly href?: string;
   readonly icon: ReactElement;
-  readonly target?: string;
   readonly title?: string;
-  readonly to?: string;
+  readonly to: string;
 } & ButtonProps;
 
 export const NavButton = ({ icon, title, to, ...rest }: NavButtonProps) => (
-  <Button as={RouterLink} to={to} {...navButtonProps} {...rest}>
-    <Box alignSelf="center">{icon}</Box>
-    <Box fontSize="xs">{title}</Box>
-  </Button>
+  <Box as={NavLink} to={to}>
+    {({ isActive }: { readonly isActive: boolean }) => (
+      <Button isActive={isActive} {...navButtonProps} {...rest}>
+        <Box alignSelf="center">{icon}</Box>
+        <Box fontSize="xs">{title}</Box>
+      </Button>
+    )}
+  </Box>
 );
diff --git a/airflow/ui/src/theme.ts b/airflow/ui/src/theme.ts
@@ -64,6 +64,7 @@ const theme = extendTheme({
     },
   },
   config: {
+    initialColorMode: "system",
     useSystemColorMode: true,
   },
   semanticTokens: {