export function ClusterSidebar()

in webui/src/app/ui/sidebar.tsx [121:176]
52 lines of code
3 McCabe index (conditional complexity)

export function ClusterSidebar({ namespace }: { namespace: string }) {
    const [clusters, setClusters] = useState<string[]>([]);
    const [error, setError] = useState<string | null>(null);
    const [isOpen, setIsOpen] = useState(true);

    useEffect(() => {
        const fetchData = async () => {
            try {
                const fetchedClusters = await fetchClusters(namespace);
                setClusters(fetchedClusters);
            } catch (err) {
                setError("Failed to fetch clusters");
            }
        };
        fetchData();
    }, [namespace]);

    return (
        <Paper
            className="flex h-full w-64 flex-col overflow-hidden border-r border-light-border shadow-sidebar dark:border-dark-border"
            elevation={0}
            square
        >
            <Box className="p-4">
                <ClusterCreation namespace={namespace} position="sidebar" />
            </Box>

            <SidebarHeader
                title="Clusters"
                count={clusters.length}
                isOpen={isOpen}
                toggleOpen={() => setIsOpen(!isOpen)}
                icon={<StorageIcon className="text-primary dark:text-primary-light" />}
            />

            <Collapse in={isOpen}>
                <List className="max-h-[calc(100vh-180px)] overflow-y-auto px-2">
                    {error && (
                        <Typography color="error" align="center" className="py-2 text-sm">
                            {error}
                        </Typography>
                    )}
                    {clusters.map((cluster) => (
                        <Link
                            href={`/namespaces/${namespace}/clusters/${cluster}`}
                            passHref
                            key={cluster}
                        >
                            <Item type="cluster" item={cluster} namespace={namespace} />
                        </Link>
                    ))}
                </List>
            </Collapse>
        </Paper>
    );
}