[KED-2973] & [KED-2974] - fix metadata alignment and overlapping text (…

…#643)

* fixed alignment issue, added '-' to empty values and setup tests

* small modification to test

* update function naming and comments

src/components/experiment-tracking/run-dataset/run-dataset.scss

@@ -61,6 +61,7 @@
   display: block;
   flex-shrink: 0;
   width: 310px;
+  word-wrap: break-word;
 
   &--single {
     width: 50%;

src/components/experiment-tracking/run-metadata/index.js

@@ -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++) {
@@ -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);
 
@@ -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}

src/components/experiment-tracking/run-metadata/run-metadata.scss

@@ -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;

src/components/experiment-tracking/run-metadata/run-metadata.test.js

@@ -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(
@@ -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(