import { useCallback, useState, type ComponentType, type FC, type PropsWithChildren } from 'react' import { mdiClose, mdiMenu } from '@mdi/js' import classNames from 'classnames' import BarChartIcon from 'mdi-react/BarChartIcon' import MagnifyIcon from 'mdi-react/MagnifyIcon' import ToolsIcon from 'mdi-react/ToolsIcon' import { NavLink, useLocation, useNavigate, useSearchParams, type RouteObject } from 'react-router-dom' import shallow from 'zustand/shallow' import { Toggles } from '@sourcegraph/branded/src/search-ui/input/toggles/Toggles' import type { SearchQueryState, SubmitSearchParameters } from '@sourcegraph/shared/src/search' import type { TelemetryV2Props } from '@sourcegraph/shared/src/telemetry' import type { TelemetryProps } from '@sourcegraph/shared/src/telemetry/telemetryService' import { useIsLightTheme } from '@sourcegraph/shared/src/theme' import { Button, ButtonLink, Icon, Link, Modal, Text } from '@sourcegraph/wildcard' import type { AuthenticatedUser } from '../../auth' import { BatchChangesIconNav } from '../../batches/icons' import { CodyLogo } from '../../cody/components/CodyLogo' import { BrandLogo } from '../../components/branding/BrandLogo' import { DeveloperSettingsGlobalNavItem } from '../../devsettings/DeveloperSettingsGlobalNavItem' import { useRoutesMatch } from '../../hooks' import { PageRoutes } from '../../routes.constants' import { LazyV2SearchInput } from '../../search/input/LazyV2SearchInput' import { setSearchCaseSensitivity, setSearchMode, setSearchPatternType, useNavbarQueryState } from '../../stores' import { InlineNavigationPanel, linkForCodyNavItem } from '../GlobalNavbar' import { UserNavItem } from '../UserNavItem' import styles from './NewGlobalNavigationBar.module.scss' interface NewGlobalNavigationBar extends TelemetryProps, TelemetryV2Props { authenticatedUser: AuthenticatedUser | null isSourcegraphDotCom: boolean notebooksEnabled: boolean searchContextsEnabled: boolean codeMonitoringEnabled: boolean batchChangesEnabled: boolean codeInsightsEnabled: boolean searchJobsEnabled: boolean showSearchBox: boolean selectedSearchContextSpec?: string showFeedbackModal: () => void routes: RouteObject[] } /** * New experimental global navigation bar with inline search bar and * dynamic navigation items. */ export const NewGlobalNavigationBar: FC< NewGlobalNavigationBar & { __testing__initialSideMenuOpen?: boolean } > = props => { const { isSourcegraphDotCom, notebooksEnabled, searchContextsEnabled, codeMonitoringEnabled, batchChangesEnabled, codeInsightsEnabled, authenticatedUser, selectedSearchContextSpec, showSearchBox, showFeedbackModal, telemetryService, telemetryRecorder, __testing__initialSideMenuOpen, searchJobsEnabled, } = props const isLightTheme = useIsLightTheme() const [params] = useSearchParams() const [isSideMenuOpen, setSideMenuOpen] = useState(__testing__initialSideMenuOpen ?? false) const routeMatch = useRoutesMatch(props.routes) // Features enablement flags and conditions const isLicensed = !!window.context?.licenseInfo const showSearchContext = searchContextsEnabled const showSearchJobs = searchJobsEnabled const showSearchNotebook = notebooksEnabled const showCodeMonitoring = codeMonitoringEnabled const showBatchChanges = batchChangesEnabled && isLicensed const showCodeInsights = codeInsightsEnabled // We only show the hamburger icon on a repo page and search results page const showHamburger = routeMatch === PageRoutes.RepoContainer || (routeMatch === PageRoutes.Search && params.get('q')) return ( <>

{showHamburger && ( )} {showSearchBox ? ( ) : ( )} {authenticatedUser ? ( {}} telemetryService={telemetryService} /> ) : ( )}

{isSideMenuOpen && ( setSideMenuOpen(false)} /> )} ) } type NavigationSearchBoxState = Pick< SearchQueryState, | 'queryState' | 'setQueryState' | 'submitSearch' | 'searchCaseSensitivity' | 'searchPatternType' | 'defaultPatternType' | 'searchMode' > /** * Search query state selector to filter out only needed state fields from * global search query state store. (Re-render nav search box only whenever one * of these fields has been changed) */ const selectQueryState = (state: SearchQueryState): NavigationSearchBoxState => ({ queryState: state.queryState, setQueryState: state.setQueryState, submitSearch: state.submitSearch, searchCaseSensitivity: state.searchCaseSensitivity, searchPatternType: state.searchPatternType, defaultPatternType: state.defaultPatternType, searchMode: state.searchMode, }) interface NavigationSearchBoxProps extends TelemetryProps, TelemetryV2Props { authenticatedUser: AuthenticatedUser | null isSourcegraphDotCom: boolean selectedSearchContextSpec?: string } /** * Compact version of search box UI, shows expanded version when the * search box gets focus. */ const NavigationSearchBox: FC = props => { const { authenticatedUser, isSourcegraphDotCom, selectedSearchContextSpec, telemetryService, telemetryRecorder } = props const navigate = useNavigate() const location = useLocation() const { searchMode, queryState, searchPatternType, defaultPatternType, searchCaseSensitivity, setQueryState, submitSearch, } = useNavbarQueryState(selectQueryState, shallow) const submitSearchOnChange = useCallback( (parameters: Partial = {}) => { submitSearch({ location, source: 'nav', historyOrNavigate: navigate, selectedSearchContextSpec, telemetryRecorder, ...parameters, }) }, [submitSearch, navigate, location, selectedSearchContextSpec, telemetryRecorder] ) // TODO: Move this check outside of navigation component and share it via context const structuralSearchDisabled = window.context?.experimentalFeatures?.structuralSearch !== 'enabled' return ( ) } interface SignInUpButtonsProps { isSourcegraphDotCom: boolean } const SignInUpButtons: FC = props => { const { isSourcegraphDotCom } = props const location = useLocation() return (

{!isSourcegraphDotCom && window.context?.allowSignup && ( Sign up )}

) } interface SidebarNavigationProps { isSourcegraphDotCom: boolean showSearchContext: boolean showSearchJobs: boolean showSearchNotebook: boolean showCodeMonitoring: boolean showBatchChanges: boolean showCodeInsights: boolean onClose: () => void } const SidebarNavigation: FC = props => { const { showSearchContext, showSearchJobs, showSearchNotebook, showCodeMonitoring, showBatchChanges, showCodeInsights, isSourcegraphDotCom, onClose, } = props const isLightTheme = useIsLightTheme() const handleNavigationClick = (): void => { // Close the navigation modal/sidebar on any navigation transition // But leave it open in case of any other click (like developer link open event) onClose() } return (

Code Search

Cody

Batch Changes

Insights

Tools

About Sourcegraph

) } interface NavItemLinkProps { url: string external?: boolean icon?: ComponentType<{ className?: string }> onClick?: () => void } const NavItemLink: FC> = props => { const { url, external, icon: IconComponent, children, onClick } = props return (

) }