mod-arch-shared
Version:
Shared library for modular architecture micro-frontend projects
53 lines • 3.74 kB
JavaScript
import React from 'react';
import { Brand, Dropdown, DropdownItem, DropdownList, Masthead, MastheadBrand, MastheadContent, MastheadLogo, MastheadMain, MastheadToggle, MenuToggle, PageToggleButton, Toolbar, ToolbarContent, ToolbarGroup, ToolbarItem, } from '@patternfly/react-core';
import { SimpleSelect } from '@patternfly/react-templates';
import { BarsIcon } from '@patternfly/react-icons';
import { useNamespaceSelector } from '../hooks/useNamespaceSelector';
import { useModularArchContext } from '../hooks/useModularArchContext';
import logoDarkTheme from '../images/logo-dark-theme.svg';
import { useThemeContext } from '../hooks/useThemeContext';
const NavBar = ({ username, onLogout }) => {
const { namespaces, preferredNamespace, updatePreferredNamespace } = useNamespaceSelector();
const { config } = useModularArchContext();
const { isMUITheme } = useThemeContext();
const [userMenuOpen, setUserMenuOpen] = React.useState(false);
// Check if mandatory namespace is configured
const isMandatoryNamespace = Boolean(config.mandatoryNamespace);
const options = namespaces.map((namespace) => ({
content: namespace.name,
value: namespace.name,
selected: namespace.name === preferredNamespace?.name,
}));
const handleLogout = () => {
setUserMenuOpen(false);
onLogout();
};
const userMenuItems = [
React.createElement(DropdownItem, { key: "logout", onClick: handleLogout }, "Log out"),
];
return (React.createElement(Masthead, null,
React.createElement(MastheadMain, null,
React.createElement(MastheadToggle, null,
React.createElement(PageToggleButton, { id: "page-nav-toggle", variant: "plain", "aria-label": "Dashboard navigation" },
React.createElement(BarsIcon, null))),
!isMUITheme ? (React.createElement(MastheadBrand, null,
React.createElement(MastheadLogo, { component: "a" },
React.createElement(Brand, { src: logoDarkTheme, alt: "Kubeflow", heights: { default: '36px' } })))) : null),
React.createElement(MastheadContent, null,
React.createElement(Toolbar, null,
React.createElement(ToolbarContent, null,
React.createElement(ToolbarGroup, { variant: "action-group-plain", align: { default: 'alignStart' } },
React.createElement(ToolbarItem, { className: "kubeflow-u-namespace-select" },
React.createElement(SimpleSelect, { initialOptions: options, isDisabled: isMandatoryNamespace, onSelect: (_ev, selection) => {
// Only allow selection if not mandatory namespace
if (!isMandatoryNamespace) {
updatePreferredNamespace({ name: String(selection) });
}
} }))),
username && (React.createElement(ToolbarGroup, { variant: "action-group-plain", align: { default: 'alignEnd' } },
React.createElement(ToolbarItem, null,
React.createElement(Dropdown, { popperProps: { position: 'right' }, onOpenChange: (isOpen) => setUserMenuOpen(isOpen), toggle: (toggleRef) => (React.createElement(MenuToggle, { "aria-label": "User menu", id: "user-menu-toggle", "data-testid": "user-menu-toggle-button", ref: toggleRef, onClick: () => setUserMenuOpen(!userMenuOpen), isExpanded: userMenuOpen }, username)), isOpen: userMenuOpen },
React.createElement(DropdownList, null, userMenuItems))))))))));
};
export default NavBar;
//# sourceMappingURL=NavBar.js.map