diff --git a/packages/catalog-model/src/kinds/TemplateEntityV1alpha1.ts b/packages/catalog-model/src/kinds/TemplateEntityV1alpha1.ts index 72479c7efa..457ac93484 100644 --- a/packages/catalog-model/src/kinds/TemplateEntityV1alpha1.ts +++ b/packages/catalog-model/src/kinds/TemplateEntityV1alpha1.ts @@ -33,6 +33,7 @@ export interface TemplateEntityV1alpha1 extends Entity { templater: string; path?: string; schema: JSONSchema; + owner: string; }; } diff --git a/plugins/scaffolder/src/components/TemplateCard/TemplateCard.tsx b/plugins/scaffolder/src/components/TemplateCard/TemplateCard.tsx index 8c64d981ad..36dcb6d73b 100644 --- a/plugins/scaffolder/src/components/TemplateCard/TemplateCard.tsx +++ b/plugins/scaffolder/src/components/TemplateCard/TemplateCard.tsx @@ -23,6 +23,7 @@ import { CardMedia, Chip, makeStyles, + Typography, useTheme, } from '@material-ui/core'; import React from 'react'; @@ -31,21 +32,32 @@ import { rootRouteRef } from '../../routes'; import { TemplateEntityV1alpha1 } from '@backstage/catalog-model'; import { FavouriteTemplate } from '../FavouriteTemplate/FavouriteTemplate'; -const useStyles = makeStyles({ +const useStyles = makeStyles(theme => ({ cardHeader: { position: 'relative', }, title: { backgroundImage: ({ backgroundImage }: any) => backgroundImage, }, - description: { + box: { overflow: 'hidden', textOverflow: 'ellipsis', display: '-webkit-box', '-webkit-line-clamp': 10, '-webkit-box-orient': 'vertical', + paddingBottom: '0.8em', }, -}); + label: { + color: theme.palette.text.secondary, + textTransform: 'uppercase', + fontSize: '10px', + fontWeight: 'bold', + letterSpacing: 0.5, + overflow: 'hidden', + whiteSpace: 'nowrap', + paddingBottom: '0.2rem', + }, +})); export type TemplateCardProps = { template: TemplateEntityV1alpha1; @@ -57,6 +69,7 @@ type TemplateProps = { title: string; type: string; name: string; + owner: string; }; const getTemplateCardProps = ( @@ -68,6 +81,7 @@ const getTemplateCardProps = ( title: `${(template.metadata.title || template.metadata.name) ?? ''}`, type: template.spec.type ?? '', description: template.metadata.description ?? '-', + owner: template.spec.owner ?? '-', tags: (template.metadata?.tags as string[]) ?? [], }; }; @@ -94,13 +108,27 @@ export const TemplateCard = ({ template }: TemplateCardProps) => { classes={{ root: classes.title }} /> - + + + + Description + + {templateProps.description} + + + + Owner + + {templateProps.owner} + + + Tags + {templateProps.tags?.map(tag => ( ))} - {templateProps.description}