instruments: update instruments dashboard

Summary:
Phase 1 of instruments dashboard updates, this revision
simply displays any instrument components that exist
on the table, as well as display their status on the instrument
details page.

The dashboard requires more updates once the instruments service
supports returning component operation histories.

Fix T34282

Test Plan:
update cypress tests
{F1083115}

{F1083116}

{F1083117}

{F1083118}

Reviewers: ecarrel, jzhao, O10 LIMS Server, O12 LIMS UI, O13 UI Common

Reviewed By: ecarrel, O10 LIMS Server, O12 LIMS UI, O13 UI Common

Subscribers: rhuang, aravind, amich, #lab_testing

Maniphest Tasks: T34282

Differential Revision: https://phabricator.grailbio.com/D43595

fbshipit-source-id: e58b288

Author: Naji Sawas

src/timeline-graph/__snapshots__/timeline-graph.spec.tsx.snap

@@ -20,12 +20,12 @@ exports[`render simple timeline graph 1`] = `
           >
             2018
           </p>
-          <p
+          <div
             class="MuiTypography-root timelineDate MuiTypography-body1 MuiTypography-alignCenter"
             data-testid="timeline-date-0"
           >
             20 Apr
-          </p>
+          </div>
         </div>
         <div
           class="timeline timelineStart"
@@ -60,12 +60,12 @@ exports[`render simple timeline graph 1`] = `
           >
             2018
           </p>
-          <p
+          <div
             class="MuiTypography-root timelineDate MuiTypography-body1 MuiTypography-alignCenter"
             data-testid="timeline-date-1"
           >
             20 Apr
-          </p>
+          </div>
         </div>
         <div
           class="timeline timelineEnd"
@@ -148,12 +148,12 @@ exports[`render simple timeline graph with time 1`] = `
           >
             2018
           </p>
-          <p
+          <div
             class="MuiTypography-root timelineDate MuiTypography-body1 MuiTypography-alignCenter"
             data-testid="timeline-date-0"
           >
             20 Apr
-          </p>
+          </div>
           <p
             class="MuiTypography-root smallDate MuiTypography-body1 MuiTypography-alignCenter"
             data-testid="timeline-time-0"
@@ -194,12 +194,12 @@ exports[`render simple timeline graph with time 1`] = `
           >
             2018
           </p>
-          <p
+          <div
             class="MuiTypography-root timelineDate MuiTypography-body1 MuiTypography-alignCenter"
             data-testid="timeline-date-1"
           >
             20 Apr
-          </p>
+          </div>
           <p
             class="MuiTypography-root smallDate MuiTypography-body1 MuiTypography-alignCenter"
             data-testid="timeline-time-1"
@@ -305,12 +305,12 @@ exports[`test selecting an item on the timeline card 1`] = `
               >
                 2018
               </p>
-              <p
+              <div
                 class="MuiTypography-root timelineDate MuiTypography-body1 MuiTypography-alignCenter"
                 data-testid="timeline-date-0"
               >
                 20 Apr
-              </p>
+              </div>
             </div>
             <div
               class="timeline timelineStart"
@@ -345,12 +345,12 @@ exports[`test selecting an item on the timeline card 1`] = `
               >
                 2018
               </p>
-              <p
+              <div
                 class="MuiTypography-root timelineDate MuiTypography-body1 MuiTypography-alignCenter"
                 data-testid="timeline-date-1"
               >
                 20 Apr
-              </p>
+              </div>
             </div>
             <div
               class="timeline timelineEnd"
@@ -500,12 +500,12 @@ exports[`test tabbed timeline cartd 1`] = `
               >
                 2018
               </p>
-              <p
+              <div
                 class="MuiTypography-root timelineDate MuiTypography-body1 MuiTypography-alignCenter"
                 data-testid="timeline-date-0"
               >
                 20 Apr
-              </p>
+              </div>
             </div>
             <div
               class="timeline timelineStart"
@@ -540,12 +540,12 @@ exports[`test tabbed timeline cartd 1`] = `
               >
                 2018
               </p>
-              <p
+              <div
                 class="MuiTypography-root timelineDate MuiTypography-body1 MuiTypography-alignCenter"
                 data-testid="timeline-date-1"
               >
                 20 Apr
-              </p>
+              </div>
             </div>
             <div
               class="timeline timelineEnd"
@@ -647,7 +647,7 @@ exports[`test unselecting an item on the timeline card 1`] = `
               >
                 2018
               </p>
-              <p
+              <div
                 class="MuiTypography-root timelineDate MuiTypography-body1 MuiTypography-alignCenter"
                 data-testid="timeline-date-0"
               >
@@ -657,7 +657,7 @@ exports[`test unselecting an item on the timeline card 1`] = `
                 >
                   Fri
                 </div>
-              </p>
+              </div>
             </div>
             <div
               class="timeline timelineStart"
@@ -692,7 +692,7 @@ exports[`test unselecting an item on the timeline card 1`] = `
               >
                 2018
               </p>
-              <p
+              <div
                 class="MuiTypography-root timelineDate MuiTypography-body1 MuiTypography-alignCenter"
                 data-testid="timeline-date-1"
               >
@@ -702,7 +702,7 @@ exports[`test unselecting an item on the timeline card 1`] = `
                 >
                   Fri
                 </div>
-              </p>
+              </div>
             </div>
             <div
               class="timeline timelineEnd"

src/timeline-graph/components/timeline-graph-component.tsx

@@ -33,7 +33,7 @@ export const TimelineGraphComponent = (props: Props) => {
     classes = {},
   } = props;
   const entries = rows.map((item, index) => {
-    const date = parseDate(item.date);
+    const date = parseDate(item.date) || 0;
     const year = format(date, "yyyy");
     const paperClass = onSelect
       ? styles.timelinePaperButton
@@ -91,6 +91,7 @@ export const TimelineGraphComponent = (props: Props) => {
             {year}
           </Typography>
           <Typography
+            component="div"
             classes={{
               root: styles.timelineDate,
             }}