feat(frontend): Add version description to pipelineVersionList. Part of #6256 (#6405)

* add version description to pipelineVersionList

* remove extra tests and reduce flex for version name

* add tooltip and mock version data

frontend/mock-backend/fixed-data.ts

@@ -59,6 +59,7 @@ const PIPELINE_UNSTRUCTED_TEXT_DEFAULT: ApiPipelineVersion = {
   created_at: new Date('2018-04-01T20:58:23.000Z'),
   id: '8fbe3bd6-a01f-11e8-98d0-529269fb1459',
   name: 'Unstructured text',
+  description: 'Pipeline version description',
   parameters: [
     {
       name: 'x',
@@ -336,6 +337,8 @@ const experiments: ApiExperiment[] = [
   },
 ];
 
+const versions: ApiPipelineVersion[] = [PIPELINE_UNSTRUCTED_TEXT_DEFAULT];
+
 const runs: ApiRunDetail[] = [
   {
     pipeline_runtime: {
@@ -869,6 +872,7 @@ export const data = {
   experiments,
   jobs,
   pipelines,
+  versions,
   runs,
 };
 

frontend/mock-backend/mock-api-middleware.ts

@@ -21,7 +21,12 @@ import proxyMiddleware from './proxy-middleware';
 import { ApiFilter, PredicateOp } from '../src/apis/filter';
 import { ApiListExperimentsResponse, ApiExperiment } from '../src/apis/experiment';
 import { ApiListJobsResponse, ApiJob } from '../src/apis/job';
-import { ApiListPipelinesResponse, ApiPipeline } from '../src/apis/pipeline';
+import {
+  ApiListPipelinesResponse,
+  ApiPipeline,
+  ApiListPipelineVersionsResponse,
+  ApiPipelineVersion,
+} from '../src/apis/pipeline';
 import { ApiListRunsResponse, ApiResourceType, ApiRun, ApiRunStorageState } from '../src/apis/run';
 import { ExperimentSortKeys, PipelineSortKeys, RunSortKeys } from '../src/lib/Apis';
 import { Response } from 'express-serve-static-core';
@@ -463,6 +468,26 @@ export default (app: express.Application) => {
     res.json(response);
   });
 
+  app.get(v1beta1Prefix + '/pipeline_versions', (req, res) => {
+    res.header('Content-Type', 'application/json');
+    const response: ApiListPipelineVersionsResponse = {
+      next_page_token: '',
+      versions: [],
+    };
+
+    let versions: ApiPipelineVersion[] = fixedData.versions;
+
+    const start = req.query.page_token ? +req.query.page_token : 0;
+    const end = start + (+req.query.page_size || 20);
+    response.versions = versions.slice(start, end);
+
+    if (end < versions.length) {
+      response.next_page_token = end + '';
+    }
+
+    res.json(response);
+  });
+
   app.delete(v1beta1Prefix + '/pipelines/:pid', (req, res) => {
     res.header('Content-Type', 'application/json');
     const i = fixedData.pipelines.findIndex(p => p.id === req.params.pid);

frontend/src/pages/PipelineVersionList.test.tsx

@@ -88,6 +88,21 @@ describe('PipelineVersionList', () => {
     expect(tree).toMatchSnapshot();
   });
 
+  it('renders a list of one pipeline version with description', async () => {
+    tree = shallow(<PipelineVersionList {...generateProps()} />);
+    tree.setState({
+      pipelineVersions: [
+        {
+          created_at: new Date(2018, 8, 22, 11, 5, 48),
+          name: 'pipelineversion1',
+          description: 'pipelineversion1 description',
+        } as ApiPipelineVersion,
+      ],
+    });
+    await listPipelineVersionsSpy;
+    expect(tree).toMatchSnapshot();
+  });
+
   it('renders a list of one pipeline version without created date', async () => {
     tree = shallow(<PipelineVersionList {...generateProps()} />);
     tree.setState({

frontend/src/pages/PipelineVersionList.tsx

@@ -14,10 +14,12 @@
  * limitations under the License.
  */
 
+import Tooltip from '@material-ui/core/Tooltip';
 import CustomTable, { Column, CustomRendererProps, Row } from '../components/CustomTable';
 import * as React from 'react';
 import { Link, RouteComponentProps } from 'react-router-dom';
 import { ApiPipelineVersion, ApiListPipelineVersionsResponse } from '../apis/pipeline';
+import { Description } from '../components/Description';
 import { Apis, ListRequest, PipelineVersionSortKeys } from '../lib/Apis';
 import { errorToMessage, formatDateString } from '../lib/Utils';
 import { RoutePage, RouteParams } from '../components/Router';
@@ -38,6 +40,17 @@ interface PipelineVersionListState {
   pipelineVersions: ApiPipelineVersion[];
 }
 
+const descriptionCustomRenderer: React.FC<CustomRendererProps<string>> = (
+  props: CustomRendererProps<string>,
+) => {
+  return (
+    <Tooltip title={props.value || ''} enterDelay={300} placement='bottom-start'>
+      <span>
+        <Description description={props.value || ''} forceInline={true} />
+      </span>
+    </Tooltip>
+  );
+};
 class PipelineVersionList extends React.PureComponent<
   PipelineVersionListProps,
   PipelineVersionListState
@@ -55,47 +68,48 @@ class PipelineVersionList extends React.PureComponent<
   public _nameCustomRenderer: React.FC<CustomRendererProps<string>> = (
     props: CustomRendererProps<string>,
   ) => {
-    if (this.props.pipelineId) {
-      return (
-        <Link
-          className={commonCss.link}
-          onClick={e => e.stopPropagation()}
-          to={RoutePage.PIPELINE_DETAILS.replace(
-            ':' + RouteParams.pipelineId,
-            this.props.pipelineId,
-          ).replace(':' + RouteParams.pipelineVersionId, props.id)}
-        >
-          {props.value}
-        </Link>
-      );
-    } else {
-      return (
-        <Link
-          className={commonCss.link}
-          onClick={e => e.stopPropagation()}
-          to={RoutePage.PIPELINE_DETAILS.replace(':' + RouteParams.pipelineVersionId, props.id)}
-        >
-          {props.value}
-        </Link>
-      );
-    }
+    return (
+      <Tooltip title={props.value || ''} enterDelay={300} placement='bottom-start'>
+        {this.props.pipelineId ? (
+          <Link
+            className={commonCss.link}
+            onClick={e => e.stopPropagation()}
+            to={RoutePage.PIPELINE_DETAILS.replace(
+              ':' + RouteParams.pipelineId,
+              this.props.pipelineId,
+            ).replace(':' + RouteParams.pipelineVersionId, props.id)}
+          >
+            {props.value}
+          </Link>
+        ) : (
+          <Link
+            className={commonCss.link}
+            onClick={e => e.stopPropagation()}
+            to={RoutePage.PIPELINE_DETAILS.replace(':' + RouteParams.pipelineVersionId, props.id)}
+          >
+            {props.value}
+          </Link>
+        )}
+      </Tooltip>
+    );
   };
 
   public render(): JSX.Element {
     const columns: Column[] = [
       {
         customRenderer: this._nameCustomRenderer,
-        flex: 2,
+        flex: 1,
         label: 'Version name',
         sortKey: PipelineVersionSortKeys.NAME,
       },
+      { label: 'Description', flex: 3, customRenderer: descriptionCustomRenderer },
       { label: 'Uploaded on', flex: 1, sortKey: PipelineVersionSortKeys.CREATED_AT },
     ];
 
     const rows: Row[] = this.state.pipelineVersions.map(r => {
       const row = {
         id: r.id!,
-        otherFields: [r.name, formatDateString(r.created_at)] as any,
+        otherFields: [r.name, r.description, formatDateString(r.created_at)] as any,
       };
       return row;
     });