@kinvolk/headlamp-plugin/lib/components/common/Link.js

The needed infrastructure for building Headlamp plugins.

import { jsx as _jsx } 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 MuiLink from '@mui/material/Link';
import { useQueryClient } from '@tanstack/react-query';
import { Link as RouterLink } from 'react-router-dom';
import { formatClusterPathParam, getCluster, getSelectedClusters } from '../../lib/cluster';
import { kubeObjectQueryKey, useEndpoints } from '../../lib/k8s/api/v2/hooks';
import { createRouteURL } from '../../lib/router/createRouteURL';
import { useTypedSelector } from '../../redux/hooks';
import { Activity } from '../activity/Activity';
import { canRenderDetails, KubeObjectDetails } from '../resourceMap/details/KubeNodeDetails';
import { KubeIcon } from '../resourceMap/kubeIcon/KubeIcon';
import { LightTooltip } from './Tooltip';
function KubeObjectLink(props) {
    const { kubeObject, onClick, ...otherProps } = props;
    const client = useQueryClient();
    const { namespace, name } = kubeObject.metadata;
    const { endpoint } = useEndpoints(kubeObject._class().apiEndpoint.apiInfo, kubeObject.cluster);
    return (_jsx(MuiLink, { onClick: e => {
            const key = kubeObjectQueryKey({
                cluster: kubeObject.cluster,
                endpoint,
                namespace,
                name,
            });
            // prepopulate the query cache with existing object
            client.setQueryData(key, kubeObject);
            // and invalidate it (mark as stale)
            // so that the latest version will be downloaded in the background
            client.invalidateQueries({ queryKey: key });
            if (onClick) {
                e.preventDefault();
                onClick();
            }
        }, component: RouterLink, to: kubeObject.getDetailsLink(), ...otherProps, children: props.children || kubeObject.getName() }));
}
function PureLink(props) {
    if (props.kubeObject) {
        const { kubeObject, ...otherProps } = props;
        return _jsx(KubeObjectLink, { kubeObject: kubeObject, ...otherProps });
    }
    const { routeName, params = {}, search, state, 
    // eslint-disable-next-line no-unused-vars -- make sure not to pass it to the link
    kubeObject, activeCluster, ...otherProps } = props;
    if (activeCluster) {
        // eslint-disable-next-line react-hooks/immutability
        params.cluster = formatClusterPathParam(getSelectedClusters(), activeCluster);
    }
    const searchString = typeof search === 'object' ? new URLSearchParams(search).toString() : search;
    return (_jsx(MuiLink, { component: RouterLink, to: {
            pathname: createRouteURL(routeName, params),
            search: searchString,
            state,
        }, ...otherProps, onClick: e => {
            if (otherProps.onClick) {
                e.preventDefault();
                otherProps.onClick();
            }
        }, children: props.children }));
}
export default function Link(props) {
    const drawerEnabled = useTypedSelector(state => state?.drawerMode?.isDetailDrawerEnabled);
    const { tooltip, ...propsRest } = props;
    const kind = 'kubeObject' in props ? props.kubeObject?._class().kind : props?.routeName;
    const cluster = 'kubeObject' in props && props.kubeObject?.cluster
        ? props.kubeObject?.cluster
        : props.activeCluster ?? getCluster() ?? '';
    // When a class overrides detailsRoute (e.g. a plugin's custom resource class),
    // the drawer's kindComponentMap won't have the right component for it,
    // so we skip the drawer and let normal link navigation handle it.
    const hasCustomDetailsRoute = 'kubeObject' in props &&
        props.kubeObject &&
        props.kubeObject._class().detailsRoute !== props.kubeObject._class().kind;
    const openDrawer = drawerEnabled && !hasCustomDetailsRoute && canRenderDetails(kind)
        ? () => {
            // Object information can be provided throught kubeObject or route parameters
            const name = 'kubeObject' in props ? props.kubeObject?.getName() : props.params?.name;
            const namespace = 'kubeObject' in props ? props.kubeObject?.getNamespace() : props.params?.namespace;
            const selectedResource = kind === 'customresource'
                ? {
                    // Custom resource links don't follow the same convention
                    // so we need to create a different object
                    kind,
                    metadata: {
                        name: props.params?.crName,
                        namespace,
                    },
                    cluster,
                    customResourceDefinition: props.params?.crd,
                }
                : { kind, metadata: { name, namespace }, cluster };
            Activity.launch({
                id: 'details' +
                    selectedResource.kind +
                    ' ' +
                    selectedResource.metadata.name +
                    selectedResource.cluster,
                title: selectedResource.kind + ' ' + selectedResource.metadata.name,
                hideTitleInHeader: true,
                location: 'split-right',
                cluster: selectedResource.cluster,
                temporary: true,
                content: (_jsx(KubeObjectDetails, { resource: {
                        kind: selectedResource.kind,
                        metadata: {
                            name: selectedResource.metadata.name,
                            namespace: selectedResource.metadata.namespace,
                        },
                        cluster: selectedResource.cluster,
                    }, customResourceDefinition: selectedResource.customResourceDefinition })),
                icon: _jsx(KubeIcon, { kind: selectedResource.kind, width: "100%", height: "100%" }),
            });
        }
        : undefined;
    const link = _jsx(PureLink, { ...propsRest, onClick: openDrawer });
    if (tooltip) {
        let tooltipText = '';
        if (typeof tooltip === 'string') {
            tooltipText = tooltip;
        }
        else if (props.kubeObject) {
            tooltipText = props.getName();
        }
        else if (typeof props.children === 'string') {
            tooltipText = props.children;
        }
        if (!!tooltipText) {
            return (_jsx(LightTooltip, { title: tooltipText, interactive: true, children: link }));
        }
    }
    return link;
}