IconLinkVertical component to accept disabled prop

plugins/catalog/src/components/AboutCard/AboutCard.tsx

@@ -102,6 +102,9 @@ export function AboutCard({ entity }: AboutCardProps) {
           <nav className={classes.links}>
             <IconLinkVertical label="View Source" {...codeLink} />
             <IconLinkVertical
+              disabled={
+                !entity.metadata.annotations?.['backstage.io/techdocs-ref']
+              }
               label="View Techdocs"
               icon={<DocsIcon />}
               href={`/docs/${entity.kind}:${entity.metadata.namespace ?? ''}:${

plugins/catalog/src/components/AboutCard/IconLinkVertical/IconLinkVertical.tsx

@@ -20,6 +20,7 @@ import LinkIcon from '@material-ui/icons/Link';
 export type IconLinkVerticalProps = {
   icon?: React.ReactNode;
   href?: string;
+  disabled?: boolean;
   label: string;
 };
 
@@ -30,6 +31,13 @@ const useIconStyles = makeStyles({
     gridGap: 4,
     textAlign: 'center',
   },
+  disabled: {
+    display: 'grid',
+    justifyItems: 'center',
+    gridGap: 4,
+    textAlign: 'center',
+    color: 'gray',
+  },
   label: {
     fontSize: '0.7rem',
     textTransform: 'uppercase',
@@ -41,9 +49,20 @@ const useIconStyles = makeStyles({
 export function IconLinkVertical({
   icon = <LinkIcon />,
   href = '#',
+  disabled = false,
   ...props
 }: IconLinkVerticalProps) {
   const classes = useIconStyles();
+
+  if (disabled) {
+    return (
+      <Link className={classes.disabled} underline="none" {...props}>
+        {icon}
+        <span className={classes.label}>{props.label}</span>
+      </Link>
+    );
+  }
+
   return (
     <Link className={classes.link} href={href} {...props}>
       {icon}