diff --git a/.changeset/real-lions-crash.md b/.changeset/real-lions-crash.md new file mode 100644 index 0000000000..f3087a1bc0 --- /dev/null +++ b/.changeset/real-lions-crash.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-catalog-react': patch +--- + +Update the rendering of links in the entity inspector so that values starting with `https?://` are rendered as links as well. diff --git a/plugins/catalog-react/src/components/InspectEntityDialog/components/common.tsx b/plugins/catalog-react/src/components/InspectEntityDialog/components/common.tsx index 79a3c69955..d2bc6312dd 100644 --- a/plugins/catalog-react/src/components/InspectEntityDialog/components/common.tsx +++ b/plugins/catalog-react/src/components/InspectEntityDialog/components/common.tsx @@ -89,26 +89,30 @@ export function Container(props: { ); } +// Extracts a link from a value, if possible +function findLink(value: string): string | undefined { + if (value.match(/^url:https?:\/\//)) { + return value.slice('url:'.length); + } + if (value.match(/^https?:\/\//)) { + return value; + } + return undefined; +} + export function KeyValueListItem(props: { indent?: boolean; entry: [string, string]; }) { const [key, value] = props.entry; + const link = findLink(value); + return ( {props.indent && } - {value.substring(0, 4)} - {value.substring(4)} - - ) - } + secondary={link ? {value} : value} /> );