Implementation:ArroyoSystems Arroyo App Layout
| Knowledge Sources | |
|---|---|
| Domains | WebUI, React, Layout |
| Last Updated | 2026-02-08 08:00 GMT |
Overview
Root application component that provides the main grid layout with a collapsible sidebar, navigation context, tour context, and UDF state context for the Arroyo WebUI.
Description
The App component establishes the top-level layout as a CSS Grid with two areas: a sidebar navigation ("nav") and a main content area ("main"). It wraps the entire application in three context providers:
- TourContext -- Manages guided onboarding tour state.
- LocalUdfsContext -- Manages local UDF state persisted to localStorage.
- NavbarProvider -- Provides dynamic sidebar menu items via
useNavbar()hook.
The Sidebar component renders the Arroyo logo, three fixed navigation buttons (Home, Connections, Pipelines), an optional CloudSidebar section, dynamically injected menu items from child pages, and a collapse toggle. Sidebar collapse state is persisted to localStorage.
The component uses usePing to health-check the backend API; while loading it shows a Loading spinner, and if the API is unreachable it renders an ApiUnavailable page.
Exports include NavButton (a ghost button with icon, label, and route-matching active state), NavbarProvider and useNavbar (context for dynamic menu injection), and the SubnavType interface.
Usage
Root component rendered by the React Router, wrapping all route outlets.
Code Reference
Source Location
- Repository: ArroyoSystems_Arroyo
- File: webui/src/App.tsx
Signature
export const NavButton: (props: NavButtonProps) => JSX.Element;
export const NavbarProvider: React.FC<{ children: ReactNode }>;
export const useNavbar: () => NavbarContextType;
export type SubnavType = { icon: IconType; label: string; onClick: () => void; selected: boolean };
export default function App(): JSX.Element;
Import
import { useNavbar, NavButton, SubnavType } from '../../App';
I/O Contract
Inputs
| Name | Type | Required | Description |
|---|---|---|---|
| window.__ARROYO_BASENAME | string | Yes | Base path for assets and API |
Outputs
| Name | Type | Description |
|---|---|---|
| Layout | React element | Grid layout with sidebar + main outlet |
| NavbarContext | React Context | Allows child pages to inject sidebar menu items |
Usage Examples
// Injecting custom sidebar items from a child page
const { setMenuItems } = useNavbar();
useEffect(() => {
setMenuItems([
{ label: 'Catalog', icon: BiTable, onClick: () => setTab('catalog'), selected: tab === 'catalog' }
]);
}, [tab]);