Add external links that make some content easier to discover (#2068)

* Add external links that make some content easier to discover * Use appropriate icons for each external link * Update snapshots * Fix lint errors * Add documentation link for compile pipeline in upload pipeline dialog * Update snapshots
kubeflow · Nov 6, 2019 · 4a0a420 · 4a0a420
1 parent d315bf6
commit 4a0a420
Show file tree

Hide file tree

Showing 9 changed files with 411 additions and 23 deletions.
diff --git a/frontend/src/assets.d.ts b/frontend/src/assets.d.ts
@@ -0,0 +1,3 @@
+// Needed to import png files directly.
+// Reference: https://github.com/wmonk/create-react-app-typescript/tree/master/template#adding-images-fonts-and-files
+declare module '*.png';
diff --git a/frontend/src/atoms/ExternalLink.tsx b/frontend/src/atoms/ExternalLink.tsx
@@ -0,0 +1,19 @@
+import React, { DetailedHTMLProps, AnchorHTMLAttributes } from 'react';
+import { stylesheet } from 'typestyle';
+import { color } from '../Css';
+
+const css = stylesheet({
+  link: {
+    $nest: {
+      '&:hover': {
+        textDecoration: 'underline',
+      },
+    },
+    color: color.theme,
+    textDecoration: 'none',
+  },
+});
+
+export const ExternalLink: React.FC<
+  DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>
+> = props => <a {...props} className={css.link} target='_blank' rel='noreferrer noopener' />;
diff --git a/frontend/src/components/Description.tsx b/frontend/src/components/Description.tsx
@@ -16,33 +16,14 @@
 
 import React from 'react';
 import Markdown from 'markdown-to-jsx';
-import { stylesheet } from 'typestyle';
-import { color } from '../Css';
+import { ExternalLink } from '../atoms/ExternalLink';
 
 function preventEventBubbling(e: React.MouseEvent): void {
   e.stopPropagation();
 }
 
-const css = stylesheet({
-  link: {
-    $nest: {
-      '&:hover': {
-        textDecoration: 'underline',
-      },
-    },
-    color: color.theme,
-    textDecoration: 'none',
-  },
-});
-
 const renderExternalLink = (props: {}) => (
-  <a
-    {...props}
-    className={css.link}
-    target='_blank'
-    rel='noreferrer noopener'
-    onClick={preventEventBubbling}
-  />
+  <ExternalLink {...props} onClick={preventEventBubbling} />
 );
 
 const options = {

diff --git a/frontend/src/components/Router.tsx b/frontend/src/components/Router.tsx
@@ -97,7 +97,6 @@ export const RoutePage = {
   RUN_DETAILS: `/runs/details/:${RouteParams.runId}`,
 };
 
-// tslint:disable-next-line:variable-name
 export const RoutePageFactory = {
   artifactDetails: (artifactType: string, artifactId: number) => {
     return RoutePage.ARTIFACT_DETAILS.replace(
@@ -107,6 +106,12 @@ export const RoutePageFactory = {
   },
 };
 
+export const ExternalLinks = {
+  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
@@ -24,12 +24,14 @@ import ExperimentsIcon from '../icons/experiments';
 import IconButton from '@material-ui/core/IconButton';
 import JupyterhubIcon from '@material-ui/icons/Code';
 import OpenInNewIcon from '@material-ui/icons/OpenInNew';
+import DescriptionIcon from '@material-ui/icons/Description';
+import GitHubIcon from '../icons/GitHub-Mark-120px-plus.png';
 import PipelinesIcon from '../icons/pipelines';
 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, ExternalLinks } from '../components/Router';
 import { RouterProps } from 'react-router';
 import { classes, stylesheet } from 'typestyle';
 import { fontsize, commonCss } from '../Css';
@@ -91,6 +93,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,
@@ -101,6 +109,13 @@ export const css = stylesheet({
   collapsedSeparator: {
     margin: '20px !important',
   },
+  icon: {
+    height: 20,
+    width: 20,
+  },
+  iconImage: {
+    opacity: 0.6, // Images are too colorful there by default, reduce their color.
+  },
   indicator: {
     borderBottom: '3px solid transparent',
     borderLeft: `3px solid ${sideNavColors.fgActive}`,
@@ -408,6 +423,32 @@ export default class SideNav extends React.Component<SideNavProps, SideNavState>
             </Link>
           </Tooltip>
           <hr className={classes(css.separator, collapsed && css.collapsedSeparator)} />
+          <ExternalUri
+            title={'Documentation'}
+            to={ExternalLinks.DOCUMENTATION}
+            collapsed={collapsed}
+            icon={className => <DescriptionIcon className={className} />}
+          />
+          <ExternalUri
+            title={'Github Repo'}
+            to={ExternalLinks.GITHUB}
+            collapsed={collapsed}
+            icon={className => (
+              <img src={GitHubIcon} className={classes(className, css.iconImage)} />
+            )}
+          />
+          <ExternalUri
+            title={'AI Hub Samples'}
+            to={ExternalLinks.AI_HUB}
+            collapsed={collapsed}
+            icon={className => (
+              <img
+                src='https://www.gstatic.com/aihub/aihub_favicon.png'
+                className={classes(className, css.iconImage)}
+              />
+            )}
+          />
+          <hr className={classes(css.separator, collapsed && css.collapsedSeparator)} />
           <IconButton
             className={classes(css.chevron, collapsed && css.collapsedChevron)}
             onClick={this._toggleNavClicked.bind(this)}
@@ -485,3 +526,30 @@ export default class SideNav extends React.Component<SideNavProps, SideNavState>
     }
   }
 }
+
+interface ExternalUriProps {
+  title: string;
+  to: string;
+  collapsed: boolean;
+  icon: (className: string) => React.ReactNode;
+}
+
+// tslint:disable-next-line:variable-name
+const ExternalUri: React.FC<ExternalUriProps> = ({ title, to, collapsed, icon }) => (
+  <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)}>
+        {icon(css.icon)}
+        <span className={classes(collapsed && css.collapsedLabel, css.label)}>{title}</span>
+        <OpenInNewIcon className={css.openInNewTabIcon} />
+      </Button>
+    </a>
+  </Tooltip>
+);
diff --git a/frontend/src/components/UploadPipelineDialog.tsx b/frontend/src/components/UploadPipelineDialog.tsx
@@ -28,6 +28,7 @@ import Radio from '@material-ui/core/Radio';
 import { TextFieldProps } from '@material-ui/core/TextField';
 import { padding, commonCss, zIndex, color } from '../Css';
 import { stylesheet, classes } from 'typestyle';
+import { ExternalLink } from '../atoms/ExternalLink';
 
 const css = stylesheet({
   dropOverlay: {
@@ -154,6 +155,7 @@ class UploadPipelineDialog extends React.Component<
                   <br />
                   You can also drag and drop the file here.
                 </div>
+                <DocumentationCompilePipeline />
                 <Input
                   onChange={this.handleChange('fileName')}
                   value={fileName}
@@ -182,6 +184,7 @@ class UploadPipelineDialog extends React.Component<
           {importMethod === ImportMethod.URL && (
             <React.Fragment>
               <div className={padding(10, 'b')}>URL must be publicly accessible.</div>
+              <DocumentationCompilePipeline />
               <Input
                 onChange={this.handleChange('fileUrl')}
                 value={fileUrl}
@@ -277,3 +280,13 @@ class UploadPipelineDialog extends React.Component<
 }
 
 export default UploadPipelineDialog;
+
+const DocumentationCompilePipeline: React.FC = () => (
+  <div className={padding(10, 'b')}>
+    For expected file format, refer to{' '}
+    <ExternalLink href='https://www.kubeflow.org/docs/pipelines/sdk/build-component/#compile-the-pipeline'>
+      Compile Pipeline Documentation
+    </ExternalLink>
+    .
+  </div>
+);