-
Notifications
You must be signed in to change notification settings - Fork 5.5k
/
EntityRefLink.tsx
89 lines (80 loc) · 2.39 KB
/
EntityRefLink.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
/*
* Copyright 2020 The Backstage 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 {
Entity,
EntityName,
DEFAULT_NAMESPACE,
} from '@backstage/catalog-model';
import React, { forwardRef } from 'react';
import { entityRouteRef } from '../../routes';
import { formatEntityRefTitle } from './format';
import { Link, LinkProps } from '@backstage/core-components';
import { useRouteRef } from '@backstage/core-plugin-api';
import { Tooltip } from '@material-ui/core';
/**
* Props for {@link EntityRefLink}.
*
* @public
*/
export type EntityRefLinkProps = {
entityRef: Entity | EntityName;
defaultKind?: string;
title?: string;
children?: React.ReactNode;
} & Omit<LinkProps, 'to'>;
/**
* Shows a clickable link to an entity.
*
* @public
*/
export const EntityRefLink = forwardRef<any, EntityRefLinkProps>(
(props, ref) => {
const { entityRef, defaultKind, title, children, ...linkProps } = props;
const entityRoute = useRouteRef(entityRouteRef);
let kind;
let namespace;
let name;
if ('metadata' in entityRef) {
kind = entityRef.kind;
namespace = entityRef.metadata.namespace;
name = entityRef.metadata.name;
} else {
kind = entityRef.kind;
namespace = entityRef.namespace;
name = entityRef.name;
}
kind = kind.toLocaleLowerCase('en-US');
const routeParams = {
kind,
namespace: namespace?.toLocaleLowerCase('en-US') ?? DEFAULT_NAMESPACE,
name,
};
const formattedEntityRefTitle = formatEntityRefTitle(entityRef, {
defaultKind,
});
const link = (
<Link {...linkProps} ref={ref} to={entityRoute(routeParams)}>
{children}
{!children && (title ?? formattedEntityRefTitle)}
</Link>
);
return title ? (
<Tooltip title={formattedEntityRefTitle}>{link}</Tooltip>
) : (
link
);
},
) as (props: EntityRefLinkProps) => JSX.Element;