diff --git a/plugins/catalog/src/data/component.ts b/plugins/catalog/src/data/component.ts index 1a7935a196..692176a468 100644 --- a/plugins/catalog/src/data/component.ts +++ b/plugins/catalog/src/data/component.ts @@ -13,11 +13,12 @@ * See the License for the specific language governing permissions and * limitations under the License. */ +import React from 'react'; import { Location } from '@backstage/catalog-model'; export type Component = { name: string; kind: string; - description: string; + description: React.ReactNode; location?: Location; }; diff --git a/plugins/catalog/src/data/utils.ts b/plugins/catalog/src/data/utils.tsx similarity index 55% rename from plugins/catalog/src/data/utils.ts rename to plugins/catalog/src/data/utils.tsx index fe2ec62493..8c2476f867 100644 --- a/plugins/catalog/src/data/utils.ts +++ b/plugins/catalog/src/data/utils.tsx @@ -13,8 +13,19 @@ * See the License for the specific language governing permissions and * limitations under the License. */ +import React from 'react'; import { Component } from './component'; import { Entity, Location } from '@backstage/catalog-model'; +import Edit from '@material-ui/icons/Edit'; +import IconButton from '@material-ui/core/IconButton'; +import { styled } from '@material-ui/core/styles'; + +const DescriptionWrapper = styled('span')({ + display: 'flex', + alignItems: 'center', +}); + +const createEditLink = (url: string): string => url.replace('blob', 'edit'); export function envelopeToComponent( envelope: Entity, @@ -23,7 +34,18 @@ export function envelopeToComponent( return { name: envelope.metadata?.name ?? '', kind: envelope.kind ?? 'unknown', - description: envelope.metadata?.annotations?.description ?? 'placeholder', + description: ( + + {envelope.metadata?.annotations?.description ?? 'placeholder'} + {location?.target ? ( + + + + + + ) : null} + + ), location, }; }