@kinvolk/headlamp-plugin/lib/components/advancedSearch/SearchSettings.js

The needed infrastructure for building Headlamp plugins.

import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } 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 { Box, Button, FormControl, InputLabel, MenuItem, Popover, Select, TextField, } from '@mui/material';
import { useRef, useState } from 'react';
import { Trans } from 'react-i18next';
export function SearchSettings({ maxItemsPerResource, setMaxItemsPerResource, refetchIntervalMs, setRefetchIntervalMs, }) {
    const [anchorEl, setAnchorEl] = useState(null);
    const maxItemsInputRef = useRef(null);
    const refetchInputRef = useRef(null);
    return (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "contained", color: "secondary", startIcon: _jsx(Icon, { icon: "mdi:settings" }), onClick: e => setAnchorEl(e.currentTarget), children: "Settings" }), _jsx(Popover, { elevation: 4, anchorOrigin: {
                    vertical: 'bottom',
                    horizontal: 'left',
                }, onClose: () => setAnchorEl(null), anchorEl: anchorEl, open: Boolean(anchorEl), children: _jsxs(Box, { sx: { padding: 2, width: '400px', display: 'flex', flexDirection: 'column', gap: 3 }, children: [_jsx(TextField, { label: _jsx(Trans, { children: "Max items per Resource" }), variant: "outlined", size: "small", inputRef: maxItemsInputRef, helperText: _jsx(Trans, { children: "If a resource has more items than this amount they will be excluded from Search. Helps reduce memory usage and slowdowns for large clusters." }), defaultValue: maxItemsPerResource, type: "number" }), _jsxs(FormControl, { fullWidth: true, variant: "outlined", size: "small", children: [_jsx(InputLabel, { id: "refetch-label", children: _jsx(Trans, { children: "Refetch Interval" }) }), _jsxs(Select, { labelId: "refetch-label", id: "refetch-select", label: "Refetch Interval", defaultValue: refetchIntervalMs, inputRef: refetchInputRef, children: [_jsx(MenuItem, { value: 30000, children: _jsx(Trans, { children: "30 seconds" }) }), _jsx(MenuItem, { value: 60000, children: _jsx(Trans, { children: "1 minute" }) }), _jsx(MenuItem, { value: 5 * 60000, children: _jsx(Trans, { children: "5 minutes" }) })] })] }), _jsx(Button, { variant: "contained", color: "primary", sx: { alignSelf: 'flex-end' }, onClick: () => {
                                if (maxItemsInputRef.current && refetchInputRef.current) {
                                    setMaxItemsPerResource(parseInt(maxItemsInputRef.current.value));
                                    setRefetchIntervalMs(parseInt(refetchInputRef.current.value));
                                    setAnchorEl(null);
                                }
                            }, children: _jsx(Trans, { children: "Save" }) })] }) })] }));
}