Skip to content

Commit

Permalink
[UI] Show tooltip on long version names (#3750)
Browse files Browse the repository at this point in the history 
* [UI] Show tooltip on version name in selector

* Update snapshots

* Add tooltip for pipeline version in run list

* refactor code
  • Loading branch information
@Bobgy
Bobgy authored May 13, 2020
1 parent 06cd029 commit bb0c4d9
Show file tree
Hide file tree
Showing 4 changed files with 82 additions and 43 deletions.
9 changes: 7 additions & 2 deletions frontend/src/pages/NewRun.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -148,10 +148,15 @@ export class NewRun extends Page<{ namespace?: string }, NewRunState> {
];

private pipelineVersionSelectorColumns = [
{ label: 'Version name', flex: 1, sortKey: PipelineVersionSortKeys.NAME },
{
customRenderer: NameWithTooltip,
flex: 2,
label: 'Version name',
sortKey: PipelineVersionSortKeys.NAME,
},
// TODO(jingzhang36): version doesn't have description field; remove it and
// fix the rendering.
{ label: 'Description', flex: 2, customRenderer: descriptionCustomRenderer },
{ label: 'Description', flex: 1, customRenderer: descriptionCustomRenderer },
{ label: 'Uploaded on', flex: 1, sortKey: PipelineVersionSortKeys.CREATED_AT },
];

Expand Down
21 changes: 16 additions & 5 deletions frontend/src/pages/RunList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -246,11 +246,22 @@ class RunList extends React.PureComponent<RunListProps, RunListState> {
':' + RouteParams.pipelineId,
props.value.pipelineId || '',
);
return (
<Link className={commonCss.link} onClick={e => e.stopPropagation()} to={url}>
{props.value.usePlaceholder ? '[View pipeline]' : props.value.displayName}
</Link>
);
if (props.value.usePlaceholder) {
return (
<Link className={commonCss.link} onClick={e => e.stopPropagation()} to={url}>
[View pipeline]
</Link>
);
} else {
// Display name could be too long, so we show the full content in tooltip on hover.
return (
<Tooltip title={props.value.displayName || ''} enterDelay={300} placement='top-start'>
<Link className={commonCss.link} onClick={e => e.stopPropagation()} to={url}>
{props.value.displayName}
</Link>
</Tooltip>
);
}
};

public _recurringRunCustomRenderer: React.FC<CustomRendererProps<RecurringRunInfo>> = (
Expand Down
55 changes: 33 additions & 22 deletions frontend/src/pages/__snapshots__/NewRun.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -148,13 +148,14 @@ exports[`NewRun arriving from pipeline details page indicates that a pipeline is
columns={
Array [
Object {
"flex": 1,
"customRenderer": [Function],
"flex": 2,
"label": "Version name",
"sortKey": "name",
},
Object {
"customRenderer": [Function],
"flex": 2,
"flex": 1,
"label": "Description",
},
Object {
Expand Down Expand Up @@ -668,13 +669,14 @@ exports[`NewRun changes the exit button's text if query params indicate this is
columns={
Array [
Object {
"flex": 1,
"customRenderer": [Function],
"flex": 2,
"label": "Version name",
"sortKey": "name",
},
Object {
"customRenderer": [Function],
"flex": 2,
"flex": 1,
"label": "Description",
},
Object {
Expand Down Expand Up @@ -1188,13 +1190,14 @@ exports[`NewRun changes title and form if the new run will recur, based on the r
columns={
Array [
Object {
"flex": 1,
"customRenderer": [Function],
"flex": 2,
"label": "Version name",
"sortKey": "name",
},
Object {
"customRenderer": [Function],
"flex": 2,
"flex": 1,
"label": "Description",
},
Object {
Expand Down Expand Up @@ -1719,13 +1722,14 @@ exports[`NewRun changes title and form to default state if the new run is a one-
columns={
Array [
Object {
"flex": 1,
"customRenderer": [Function],
"flex": 2,
"label": "Version name",
"sortKey": "name",
},
Object {
"customRenderer": [Function],
"flex": 2,
"flex": 1,
"label": "Description",
},
Object {
Expand Down Expand Up @@ -2239,13 +2243,14 @@ exports[`NewRun fetches the associated pipeline if one is present in the query p
columns={
Array [
Object {
"flex": 1,
"customRenderer": [Function],
"flex": 2,
"label": "Version name",
"sortKey": "name",
},
Object {
"customRenderer": [Function],
"flex": 2,
"flex": 1,
"label": "Description",
},
Object {
Expand Down Expand Up @@ -2757,13 +2762,14 @@ exports[`NewRun renders the new run page 1`] = `
columns={
Array [
Object {
"flex": 1,
"customRenderer": [Function],
"flex": 2,
"label": "Version name",
"sortKey": "name",
},
Object {
"customRenderer": [Function],
"flex": 2,
"flex": 1,
"label": "Description",
},
Object {
Expand Down Expand Up @@ -3277,13 +3283,14 @@ exports[`NewRun starting a new recurring run includes additional trigger input f
columns={
Array [
Object {
"flex": 1,
"customRenderer": [Function],
"flex": 2,
"label": "Version name",
"sortKey": "name",
},
Object {
"customRenderer": [Function],
"flex": 2,
"flex": 1,
"label": "Description",
},
Object {
Expand Down Expand Up @@ -3808,13 +3815,14 @@ exports[`NewRun starting a new run updates the pipeline params as user selects d
columns={
Array [
Object {
"flex": 1,
"customRenderer": [Function],
"flex": 2,
"label": "Version name",
"sortKey": "name",
},
Object {
"customRenderer": [Function],
"flex": 2,
"flex": 1,
"label": "Description",
},
Object {
Expand Down Expand Up @@ -4328,13 +4336,14 @@ exports[`NewRun starting a new run updates the pipeline params as user selects d
columns={
Array [
Object {
"flex": 1,
"customRenderer": [Function],
"flex": 2,
"label": "Version name",
"sortKey": "name",
},
Object {
"customRenderer": [Function],
"flex": 2,
"flex": 1,
"label": "Description",
},
Object {
Expand Down Expand Up @@ -4859,13 +4868,14 @@ exports[`NewRun starting a new run updates the pipeline params as user selects d
columns={
Array [
Object {
"flex": 1,
"customRenderer": [Function],
"flex": 2,
"label": "Version name",
"sortKey": "name",
},
Object {
"customRenderer": [Function],
"flex": 2,
"flex": 1,
"label": "Description",
},
Object {
Expand Down Expand Up @@ -5379,13 +5389,14 @@ exports[`NewRun updates the run's state with the associated experiment if one is
columns={
Array [
Object {
"flex": 1,
"customRenderer": [Function],
"flex": 2,
"label": "Version name",
"sortKey": "name",
},
Object {
"customRenderer": [Function],
"flex": 2,
"flex": 1,
"label": "Description",
},
Object {
Expand Down
40 changes: 26 additions & 14 deletions frontend/src/pages/__snapshots__/RunList.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7570,14 +7570,20 @@ exports[`RunList renders percentage metric 1`] = `
`;

exports[`RunList renders pipeline name as link to its details page 1`] = `
<Link
className="link"
onClick={[Function]}
replace={false}
to="/pipelines/details/pipeline-id?"
<WithStyles(Tooltip)
enterDelay={300}
placement="top-start"
title="test pipeline"
>
test pipeline
</Link>
<Link
className="link"
onClick={[Function]}
replace={false}
to="/pipelines/details/pipeline-id?"
>
test pipeline
</Link>
</WithStyles(Tooltip)>
`;

exports[`RunList renders pipeline name as link to its details page 2`] = `
Expand All @@ -7592,14 +7598,20 @@ exports[`RunList renders pipeline name as link to its details page 2`] = `
`;

exports[`RunList renders pipeline version name as link to its details page 1`] = `
<Link
className="link"
onClick={[Function]}
replace={false}
to="/pipelines/details/pipeline-id/version/version-id?"
<WithStyles(Tooltip)
enterDelay={300}
placement="top-start"
title="test pipeline version"
>
test pipeline version
</Link>
<Link
className="link"
onClick={[Function]}
replace={false}
to="/pipelines/details/pipeline-id/version/version-id?"
>
test pipeline version
</Link>
</WithStyles(Tooltip)>
`;

exports[`RunList renders raw metric 1`] = `
Expand Down

0 comments on commit bb0c4d9

Please sign in to comment.