@kinvolk/headlamp-plugin/lib/components/project/ResourceCategoriesList.js

The needed infrastructure for building Headlamp plugins.

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/*
 * Copyright 2025 The Kubernetes Authors
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
import { Icon } from '@iconify/react';
import { List, ListItem, ListItemButton, ListItemIcon, ListItemText, Typography, } from '@mui/material';
import { Box } from '@mui/system';
import { getHealthIcon } from './projectUtils';
export function ResourceCategoriesList({ categoryList, selectedCategoryName, onCategoryClick, }) {
    return (_jsx(Box, { sx: {
            flexShrink: 0,
        }, children: _jsx(List, { dense: true, children: categoryList.map(({ category, items, health }) => {
                const healthColor = health.error > 0
                    ? 'error.main'
                    : health.warning > 0
                        ? 'warning.main'
                        : items.length > 0
                            ? 'success.main'
                            : 'grey.500';
                const healthIcon = getHealthIcon(health.success, health.error, health.warning);
                return (_jsx(ListItem, { disablePadding: true, children: _jsxs(ListItemButton, { onClick: () => onCategoryClick(category.label), selected: selectedCategoryName === category.label, children: [_jsx(ListItemIcon, { children: _jsx(Icon, { icon: category.icon, style: { fontSize: 32 } }) }), _jsx(ListItemText, { primary: category.label, secondary: category.description }), _jsx(ListItemIcon, { sx: { justifyContent: 'flex-end' }, children: _jsxs(Box, { display: "flex", alignItems: "center", gap: 0.5, children: [_jsx(Typography, { variant: "h6", sx: {
                                                color: items.length > 0 ? healthColor : 'text.primary',
                                                lineHeight: 1,
                                            }, children: items.length }), items.length > 0 && (_jsx(Icon, { icon: healthIcon, style: {
                                                fontSize: 20,
                                                color: healthColor,
                                            } }))] }) })] }) }, category.label));
            }) }) }));
}