Merge pull request #2398 from spotify/emmai/view-techdocs-disabled

IconLinkVertical component to accept disabled prop

plugins/catalog/package.json

@@ -32,6 +32,7 @@
     "@material-ui/core": "^4.11.0",
     "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "4.0.0-alpha.45",
+    "classnames": "^2.2.6",
     "moment": "^2.26.0",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",

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

@@ -14,12 +14,14 @@
  * limitations under the License.
  */
 import * as React from 'react';
+import classnames from 'classnames';
 import { makeStyles, Link } from '@material-ui/core';
 import LinkIcon from '@material-ui/icons/Link';
 
 export type IconLinkVerticalProps = {
   icon?: React.ReactNode;
   href?: string;
+  disabled?: boolean;
   label: string;
 };
 
@@ -30,6 +32,9 @@ const useIconStyles = makeStyles({
     gridGap: 4,
     textAlign: 'center',
   },
+  disabled: {
+    color: 'gray',
+  },
   label: {
     fontSize: '0.7rem',
     textTransform: 'uppercase',
@@ -41,9 +46,24 @@ const useIconStyles = makeStyles({
 export function IconLinkVertical({
   icon = <LinkIcon />,
   href = '#',
+  disabled = false,
   ...props
 }: IconLinkVerticalProps) {
   const classes = useIconStyles();
+
+  if (disabled) {
+    return (
+      <Link
+        className={classnames(classes.link, classes.disabled)}
+        underline="none"
+        {...props}
+      >
+        {icon}
+        <span className={classes.label}>{props.label}</span>
+      </Link>
+    );
+  }
+
   return (
     <Link className={classes.link} href={href} {...props}>
       {icon}