Add external links that make some content easier to discover

kubeflow · Sep 9, 2019 · 258fc95 · 258fc95
1 parent 3edaa38
commit 258fc95
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 2 deletions.
diff --git a/frontend/src/components/Router.tsx b/frontend/src/components/Router.tsx
@@ -97,6 +97,13 @@ export const RoutePage = {
   RUN_DETAILS: `/runs/details/:${RouteParams.runId}`,
 };
 
+// tslint:disable-next-line:variable-name
+export const ExternalLink = {
+  AI_HUB: 'https://aihub.cloud.google.com/u/0/s?category=pipeline',
+  DOCUMENTATION: 'https://www.kubeflow.org/docs/pipelines/',
+  GITHUB: 'https://github.com/kubeflow/pipelines',
+};
+
 export interface DialogProps {
   buttons?: Array<{ onClick?: () => any, text: string }>;
   // TODO: This should be generalized to any react component.

diff --git a/frontend/src/components/SideNav.tsx b/frontend/src/components/SideNav.tsx
@@ -29,7 +29,7 @@ import Tooltip from '@material-ui/core/Tooltip';
 import { Apis } from '../lib/Apis';
 import { Link } from 'react-router-dom';
 import { LocalStorage, LocalStorageKey } from '../lib/LocalStorage';
-import { RoutePage, RoutePrefix } from '../components/Router';
+import { RoutePage, RoutePrefix, ExternalLink as ExternalLink } from '../components/Router';
 import { RouterProps } from 'react-router';
 import { classes, stylesheet } from 'typestyle';
 import { fontsize, commonCss } from '../Css';
@@ -91,6 +91,12 @@ export const css = stylesheet({
   collapsedChevron: {
     transform: 'rotate(180deg)',
   },
+  collapsedExternalLabel: {
+    // Hide text when collapsing, but do it with a transition of both height and
+    // opacity
+    height: 0,
+    opacity: 0,
+  },
   collapsedLabel: {
     // Hide text when collapsing, but do it with a transition
     opacity: 0,
@@ -207,7 +213,7 @@ export default class SideNav extends React.Component<SideNavProps, SideNavState>
       logger.error('Failed to retrieve build info', err);
     }
 
-    this.setStateSafe({ displayBuildInfo});
+    this.setStateSafe({ displayBuildInfo });
   }
 
   public componentWillUnmount(): void {
@@ -308,6 +314,10 @@ export default class SideNav extends React.Component<SideNavProps, SideNavState>
             </Link>
           </Tooltip>
           <hr className={classes(css.separator, collapsed && css.collapsedSeparator)} />
+          <ExternalUri title={'Documentation'} to={ExternalLink.DOCUMENTATION} collapsed={collapsed} />
+          <ExternalUri title={'Github'} to={ExternalLink.GITHUB} collapsed={collapsed} />
+          <ExternalUri title={'AI Hub'} to={ExternalLink.AI_HUB} collapsed={collapsed} />
+          <hr className={classes(css.separator, collapsed && css.collapsedSeparator)} />
           <IconButton className={classes(css.chevron, collapsed && css.collapsedChevron)}
             onClick={this._toggleNavClicked.bind(this)}>
             <ChevronLeftIcon />
@@ -371,3 +381,27 @@ export default class SideNav extends React.Component<SideNavProps, SideNavState>
     }
   }
 }
+
+interface ExternalUriProps {
+  title: string;
+  to: string;
+  collapsed: boolean;
+}
+
+// tslint:disable-next-line:variable-name
+const ExternalUri: React.FC<ExternalUriProps> = ({ title, to, collapsed }) =>
+  <Tooltip
+    title={title}
+    enterDelay={300}
+    placement={'right-start'}
+    disableFocusListener={!collapsed}
+    disableHoverListener={!collapsed}
+    disableTouchListener={!collapsed}
+  >
+    <a href={to} className={commonCss.unstyled} target='_blank' rel='noopener noreferrer'>
+      <Button className={classes(css.button, collapsed && css.collapsedButton)}>
+        <OpenInNewIcon className={css.openInNewTabIcon} />
+        <span className={classes(collapsed && css.collapsedLabel, css.label)}>{title}</span>
+      </Button>
+    </a>
+  </Tooltip>;