Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[KED-2973] & [KED-2974] - fix metadata alignment and overlapping text #643

Merged
merged 3 commits into from
Nov 24, 2021
Merged

[KED-2973] & [KED-2974] - fix metadata alignment and overlapping text #643

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
b293930
fixed alignment issue, added '-' to empty values and setup tests
studioswong Nov 23, 2021
a299aca
small modification to test
studioswong Nov 23, 2021
5253217
update function naming and comments
studioswong Nov 24, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions src/components/experiment-tracking/run-dataset/run-dataset.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,7 @@
display: block;
flex-shrink: 0;
width: 310px;
word-wrap: break-word;

&--single {
width: 50%;
Expand Down
40 changes: 25 additions & 15 deletions src/components/experiment-tracking/run-metadata/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,10 @@ import { toHumanReadableTime } from '../../../utils/date-utils';

import './run-metadata.css';

// We are only checking for an empty string as it is the default value
// returned by the graphql endpoint for empty values ( not null or undefined )
const sanitiseEmptyValue = (value) => (value !== '' ? value : '-');

const RunMetadata = ({ isSingleRun, runs = [] }) => {
let initialState = {};
for (let i = 0; i < runs.length; i++) {
Expand All @@ -16,13 +20,12 @@ const RunMetadata = ({ isSingleRun, runs = [] }) => {
setToggleNotes({ ...toggleNotes, [index]: !toggleNotes[index] });
};

return runs.length === 0 ? (
<div>Loading...</div>
) : (
return (
<div
className={classnames('details-metadata', {
'details-metadata--single': isSingleRun,
})}>
})}
>
{runs.map((run, i) => {
const humanReadableTime = toHumanReadableTime(run.timestamp);

Expand All @@ -31,53 +34,60 @@ const RunMetadata = ({ isSingleRun, runs = [] }) => {
className={classnames('details-metadata__run', {
'details-metadata__run--single': isSingleRun,
})}
key={run.gitSha}>
key={run.title + i} // note: this should revert back to use gitSha once the BE returns the actual value
>
<table className="details-metadata__table">
<tbody>
{isSingleRun ? (
<tr>
<td className="details-metadata__title" colSpan="2">
{run.title}
{sanitiseEmptyValue(run.title)}
</td>
</tr>
) : (
<tr>
{i === 0 ? <td></td> : null}
<td className="details-metadata__title">{run.title}</td>
<td className="details-metadata__title">
{sanitiseEmptyValue(run.title)}
</td>
</tr>
)}
<tr>
{i === 0 ? <td>Created By</td> : null}
<td>{run.author}</td>
<td>{sanitiseEmptyValue(run.author)}</td>
</tr>
<tr>
{i === 0 ? <td>Creation Date</td> : null}
<td>{`${humanReadableTime} (${run.timestamp})`}</td>
<td>{`${humanReadableTime} (${sanitiseEmptyValue(
run.timestamp
)})`}</td>
</tr>
<tr>
{i === 0 ? <td>Git SHA</td> : null}
<td>{run.gitSha}</td>
<td>{sanitiseEmptyValue(run.gitSha)}</td>
</tr>
<tr>
{i === 0 ? <td>Git Branch</td> : null}
<td>{run.gitBranch}</td>
<td>{sanitiseEmptyValue(run.gitBranch)}</td>
</tr>
<tr>
{i === 0 ? <td>Run Command</td> : null}
<td>{run.runCommand}</td>
<td>{sanitiseEmptyValue(run.runCommand)}</td>
</tr>
<tr>
{i === 0 ? <td>Notes</td> : null}
<td>
<p
className="details-metadata__notes"
style={toggleNotes[i] ? { display: 'block' } : null}>
{run.notes}
style={toggleNotes[i] ? { display: 'block' } : null}
>
{sanitiseEmptyValue(run.notes)}
</p>
{run.notes.length > 100 ? (
<button
className="details-metadata__show-more kedro"
onClick={() => onToggleNoteExpand(i)}>
onClick={() => onToggleNoteExpand(i)}
>
{toggleNotes[i] ? 'Show less' : 'Show more'}
</button>
) : null}
Expand Down
1 change: 1 addition & 0 deletions src/components/experiment-tracking/run-metadata/run-metadata.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@
font-size: 1.4em;
padding-bottom: 16px;
vertical-align: top;
word-wrap: break-word; // For breaking potential long text, such as as git branch, title, etc

&:first-of-type {
width: 230px;
Expand Down
19 changes: 19 additions & 0 deletions src/components/experiment-tracking/run-metadata/run-metadata.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,20 @@ import { configure, mount, shallow } from 'enzyme';

configure({ adapter: new Adapter() });

const emptyRun = [
{
id: '',
author: '',
bookmark: true,
timestamp: '',
gitSha: '',
gitBranch: '',
runCommand: '',
notes: '',
title: '',
},
];

describe('RunMetadata', () => {
it('renders without crashing', () => {
const wrapper = shallow(
Expand All @@ -28,6 +42,11 @@ describe('RunMetadata', () => {
expect(wrapper.find('.details-metadata__run--single').length).toBe(1);
});

it('shows a "-" for empty values ', () => {
const wrapper = mount(<RunMetadata isSingleRun={true} runs={emptyRun} />);
expect(wrapper.find('.details-metadata__title').text()).toMatch('-');
});

it('handles show more/less button click event', () => {
const setToggleNotes = jest.fn();
const wrapper = mount(
Expand Down