start page updates according latest feedback (kubeflow#3175)

* done * start page done Co-authored-by: renmingu <40223865+renmingu@users.noreply.github.com>
Jeffwan · Dec 9, 2020 · 55be9dc · 55be9dc
1 parent 2ffc804
commit 55be9dc
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 83 deletions.
diff --git a/frontend/src/Css.tsx b/frontend/src/Css.tsx
@@ -15,8 +15,8 @@
  */
 
 import createMuiTheme from '@material-ui/core/styles/createMuiTheme';
-import { NestedCSSProperties } from 'typestyle/lib/types';
 import { style, stylesheet } from 'typestyle';
+import { NestedCSSProperties } from 'typestyle/lib/types';
 
 export const color = {
   activeBg: '#eaf1fd',
@@ -72,6 +72,7 @@ export const fontsize = {
   medium: 16,
   large: 18,
   title: 18,
+  pageTitle: 24,
 };
 // tslint:enable:object-literal-sort-keys
 

diff --git a/frontend/src/components/Toolbar.tsx b/frontend/src/components/Toolbar.tsx
@@ -14,17 +14,17 @@
  * limitations under the License.
  */
 
-import * as React from 'react';
-import ArrowBackIcon from '@material-ui/icons/ArrowBack';
-import BusyButton from '../atoms/BusyButton';
-import ChevronRightIcon from '@material-ui/icons/ChevronRight';
 import IconButton from '@material-ui/core/IconButton';
 import Tooltip from '@material-ui/core/Tooltip';
+import ArrowBackIcon from '@material-ui/icons/ArrowBack';
+import ChevronRightIcon from '@material-ui/icons/ChevronRight';
 import { History } from 'history';
+import * as React from 'react';
+import { CSSProperties } from 'react';
 import { Link } from 'react-router-dom';
 import { classes, stylesheet } from 'typestyle';
-import { spacing, fonts, fontsize, color, dimension, commonCss } from '../Css';
-import { CSSProperties } from 'react';
+import BusyButton from '../atoms/BusyButton';
+import { color, commonCss, dimension, fonts, fontsize, spacing } from '../Css';
 
 export interface ToolbarActionMap {
   [key: string]: ToolbarActionConfig;
@@ -92,8 +92,8 @@ const css = stylesheet({
   },
   pageName: {
     color: color.strong,
-    fontSize: fontsize.title,
-    lineHeight: `${backIconHeight}px`,
+    fontSize: fontsize.pageTitle,
+    lineHeight: '28px',
   },
   root: {
     alignItems: 'center',

diff --git a/frontend/src/pages/GettingStarted.tsx b/frontend/src/pages/GettingStarted.tsx
@@ -48,9 +48,10 @@ const PAGE_CONTENT_MD = ({
 }) => `
 <br/>
 
-## Build your own pipeline
+## Build your own pipeline with
 
-Build an end-to-end ML pipeline with TensorFlow Extended (TFX) [**Start Here!**](https://console.cloud.google.com/mlengine/notebooks/deploy-notebook?q=download_url%3Dhttps%253A%252F%252Fraw.githubusercontent.com%252Ftensorflow%252Ftfx%252Fmaster%252Fdocs%252Ftutorials%252Ftfx%252Ftemplate.ipynb) (Please make sure you pick a Tensorflow 2.1 notebook instance.)
+  * TensorFlow Extended (TFX) end-to-end ML Pipeline Template ([Open Notebook](https://console.cloud.google.com/mlengine/notebooks/deploy-notebook?q=download_url%3Dhttps%253A%252F%252Fraw.githubusercontent.com%252Ftensorflow%252Ftfx%252Fmaster%252Fdocs%252Ftutorials%252Ftfx%252Ftemplate.ipynb))
+  * Kubeflow Pipelines [SDK](https://www.kubeflow.org/docs/pipelines/sdk/)
 
 <br/>
 
@@ -70,14 +71,6 @@ This section contains demo and tutorial pipelines.
   * [DSL - Control structures](${control}) - Shows how to use conditional execution and exit handlers. [source code](https://github.com/kubeflow/pipelines/tree/master/samples/tutorials/DSL%20-%20Control%20structures)
 
 Want to learn more? [Learn from sample and tutorial pipelines.](https://www.kubeflow.org/docs/pipelines/tutorials/)
-
-<br/>
-
-### Additional resources and documentation
-  * [TFX documentation](https://www.tensorflow.org/tfx)
-  * [AI Platform Pipelines documentation](https://cloud.google.com/ai-platform/pipelines/docs/)
-  * [Troubleshooting guide](https://cloud.google.com/ai-platform/pipelines/docs/troubleshooting/)
-  * [Kubeflow Pipelines documentation](https://www.kubeflow.org/docs/pipelines/)
 `;
 
 cssRaw(`

diff --git a/frontend/src/pages/__snapshots__/GettingStarted.test.tsx.snap b/frontend/src/pages/__snapshots__/GettingStarted.test.tsx.snap
@@ -8,24 +8,35 @@ exports[`GettingStarted page initially renders documentation 1`] = `
     <div>
       <br />
       <h2
-        id="build-your-own-pipeline"
+        id="build-your-own-pipeline-with"
       >
-        Build your own pipeline
+        Build your own pipeline with
       </h2>
-      <p>
-        Build an end-to-end ML pipeline with TensorFlow Extended (TFX) 
-        <a
-          class="link"
-          href="https://console.cloud.google.com/mlengine/notebooks/deploy-notebook?q=download_url%3Dhttps%253A%252F%252Fraw.githubusercontent.com%252Ftensorflow%252Ftfx%252Fmaster%252Fdocs%252Ftutorials%252Ftfx%252Ftemplate.ipynb"
-          rel="noopener"
-          target="_blank"
-        >
-          <strong>
-            Start Here!
-          </strong>
-        </a>
-         (Please make sure you pick a Tensorflow 2.1 notebook instance.)
-      </p>
+      <ul>
+        <li>
+          TensorFlow Extended (TFX) end-to-end ML Pipeline Template (
+          <a
+            class="link"
+            href="https://console.cloud.google.com/mlengine/notebooks/deploy-notebook?q=download_url%3Dhttps%253A%252F%252Fraw.githubusercontent.com%252Ftensorflow%252Ftfx%252Fmaster%252Fdocs%252Ftutorials%252Ftfx%252Ftemplate.ipynb"
+            rel="noopener"
+            target="_blank"
+          >
+            Open Notebook
+          </a>
+          )
+        </li>
+        <li>
+          Kubeflow Pipelines 
+          <a
+            class="link"
+            href="https://www.kubeflow.org/docs/pipelines/sdk/"
+            rel="noopener"
+            target="_blank"
+          >
+            SDK
+          </a>
+        </li>
+      </ul>
       <br />
       <h2
         id="demonstrations-and-tutorials"
@@ -151,54 +162,6 @@ exports[`GettingStarted page initially renders documentation 1`] = `
           Learn from sample and tutorial pipelines.
         </a>
       </p>
-      <br />
-      <h3
-        id="additional-resources-and-documentation"
-      >
-        Additional resources and documentation
-      </h3>
-      <ul>
-        <li>
-          <a
-            class="link"
-            href="https://www.tensorflow.org/tfx"
-            rel="noopener"
-            target="_blank"
-          >
-            TFX documentation
-          </a>
-        </li>
-        <li>
-          <a
-            class="link"
-            href="https://cloud.google.com/ai-platform/pipelines/docs/"
-            rel="noopener"
-            target="_blank"
-          >
-            AI Platform Pipelines documentation
-          </a>
-        </li>
-        <li>
-          <a
-            class="link"
-            href="https://cloud.google.com/ai-platform/pipelines/docs/troubleshooting/"
-            rel="noopener"
-            target="_blank"
-          >
-            Troubleshooting guide
-          </a>
-        </li>
-        <li>
-          <a
-            class="link"
-            href="https://www.kubeflow.org/docs/pipelines/"
-            rel="noopener"
-            target="_blank"
-          >
-            Kubeflow Pipelines documentation
-          </a>
-        </li>
-      </ul>
     </div>
   </div>
 </div>