diff --git a/plugins/scaffolder/src/components/ScaffolderPage/ScaffolderPage.tsx b/plugins/scaffolder/src/components/ScaffolderPage/ScaffolderPage.tsx
index 4a482402f8..bc1bcefe1e 100644
--- a/plugins/scaffolder/src/components/ScaffolderPage/ScaffolderPage.tsx
+++ b/plugins/scaffolder/src/components/ScaffolderPage/ScaffolderPage.tsx
@@ -175,7 +175,10 @@ export const ScaffolderPageContents = () => {
{matchingEntities &&
matchingEntities?.length > 0 &&
matchingEntities.map(template => (
-
+
))}
diff --git a/plugins/scaffolder/src/components/TemplateCard/TemplateCard.tsx b/plugins/scaffolder/src/components/TemplateCard/TemplateCard.tsx
index 8c64d981ad..b529780842 100644
--- a/plugins/scaffolder/src/components/TemplateCard/TemplateCard.tsx
+++ b/plugins/scaffolder/src/components/TemplateCard/TemplateCard.tsx
@@ -22,10 +22,14 @@ import {
CardContent,
CardMedia,
Chip,
+ Link,
makeStyles,
+ Popover,
+ Typography,
useTheme,
} from '@material-ui/core';
import React from 'react';
+import WarningIcon from '@material-ui/icons/Warning';
import { generatePath } from 'react-router';
import { rootRouteRef } from '../../routes';
import { TemplateEntityV1alpha1 } from '@backstage/catalog-model';
@@ -47,8 +51,18 @@ const useStyles = makeStyles({
},
});
+const useDeprecationStyles = makeStyles(theme => ({
+ deprecationIcon: {
+ position: 'absolute',
+ top: theme.spacing(0.5),
+ right: theme.spacing(3.5),
+ padding: '0.25rem',
+ },
+}));
+
export type TemplateCardProps = {
template: TemplateEntityV1alpha1;
+ deprecated?: boolean;
};
type TemplateProps = {
@@ -72,7 +86,54 @@ const getTemplateCardProps = (
};
};
-export const TemplateCard = ({ template }: TemplateCardProps) => {
+const DeprecationWarning = () => {
+ const [anchorEl, setAnchorEl] = React.useState(null);
+
+ const handleClick = (event: React.MouseEvent) => {
+ setAnchorEl(event.currentTarget);
+ };
+
+ const styles = useDeprecationStyles();
+
+ const handleClose = () => {
+ setAnchorEl(null);
+ };
+
+ const open = Boolean(anchorEl);
+
+ const Title = (
+
+ This template syntax is deprecated. Please follow the documentation{' '}
+
+ here
+ {' '}
+ to migrate
+
+ );
+
+ return (
+
+ );
+};
+
+export const TemplateCard = ({ template, deprecated }: TemplateCardProps) => {
const backstageTheme = useTheme();
const rootLink = useRouteRef(rootRouteRef);
const templateProps = getTemplateCardProps(template);
@@ -88,6 +149,7 @@ export const TemplateCard = ({ template }: TemplateCardProps) => {
+ {deprecated && }