Skip to content

Fix handling of dark icons for plugins in nav #54305

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jscheffl merged 3 commits into from
Aug 11, 2025
Merged

Fix handling of dark icons for plugins in nav #54305

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
34bd75a
Fix handling of dark icons for plugins in nav
jscheffl Aug 9, 2025
aa8245b
Review feedback
jscheffl Aug 10, 2025
d24398c
Review feedback v2
jscheffl Aug 10, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 13 additions & 3 deletions airflow-core/src/airflow/ui/src/layouts/Nav/PluginMenuItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,20 +23,30 @@ import { RiArchiveStackLine } from "react-icons/ri";
import { Link as RouterLink } from "react-router-dom";

import type { ExternalViewResponse } from "openapi/requests/types.gen";
import { useColorMode } from "src/context/colorMode";
import type { NavItemResponse } from "src/utils/types";

import { NavButton } from "./NavButton";

type Props = { readonly topLevel?: boolean } & NavItemResponse;

export const PluginMenuItem = ({ icon, name, topLevel = false, url_route: urlRoute, ...rest }: Props) => {
export const PluginMenuItem = ({
icon,
icon_dark_mode: iconDarkMode,
name,
topLevel = false,
url_route: urlRoute,
...rest
}: Props) => {
// Determine if this is an external view or react app based on the presence of href
const { colorMode } = useColorMode();
const isExternalView = "href" in rest;
const href = isExternalView ? (rest as ExternalViewResponse).href : undefined;

const displayIcon = colorMode === "dark" && typeof iconDarkMode === "string" ? iconDarkMode : icon;
const pluginIcon =
typeof icon === "string" ? (
<Image height="1.25rem" mr={topLevel ? 0 : 2} src={icon} width="1.25rem" />
typeof displayIcon === "string" ? (
<Image height="1.25rem" mr={topLevel ? 0 : 2} src={displayIcon} width="1.25rem" />
) : urlRoute === "legacy-fab-views" ? (
<RiArchiveStackLine size="1.25rem" style={{ marginRight: topLevel ? 0 : "8px" }} />
) : (
Expand Down
Loading