From 3bfa0d7832cab62ee2f89d945f3df6157a1f2b29 Mon Sep 17 00:00:00 2001
From: Emma Indal <emmai@spotify.com>
Date: Thu, 10 Sep 2020 12:50:58 +0200
Subject: [PATCH] IconLinkVertical component to accept disabled prop

---
 .../src/components/AboutCard/AboutCard.tsx    |  3 +++
 .../IconLinkVertical/IconLinkVertical.tsx     | 19 +++++++++++++++++++
 2 files changed, 22 insertions(+)

diff --git a/plugins/catalog/src/components/AboutCard/AboutCard.tsx b/plugins/catalog/src/components/AboutCard/AboutCard.tsx
index 0ab918dd6f..939449f719 100644
--- a/plugins/catalog/src/components/AboutCard/AboutCard.tsx
+++ b/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 ?? ''}:${
diff --git a/plugins/catalog/src/components/AboutCard/IconLinkVertical/IconLinkVertical.tsx b/plugins/catalog/src/components/AboutCard/IconLinkVertical/IconLinkVertical.tsx
index 91a5211925..b6526985a0 100644
--- a/plugins/catalog/src/components/AboutCard/IconLinkVertical/IconLinkVertical.tsx
+++ b/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}