From ceb68ecbee0091f28135eb81d424e84d07e58c92 Mon Sep 17 00:00:00 2001
From: Naji Sawas <nsawas@grailbio.com>
Date: Mon, 16 Mar 2020 11:11:00 -0700
Subject: [PATCH] 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
---
 .../timeline-graph.spec.tsx.snap              | 40 +++++++++----------
 .../components/timeline-graph-component.tsx   |  3 +-
 2 files changed, 22 insertions(+), 21 deletions(-)

diff --git a/src/timeline-graph/__snapshots__/timeline-graph.spec.tsx.snap b/src/timeline-graph/__snapshots__/timeline-graph.spec.tsx.snap
index 905b361..cba463f 100644
--- a/src/timeline-graph/__snapshots__/timeline-graph.spec.tsx.snap
+++ b/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"
diff --git a/src/timeline-graph/components/timeline-graph-component.tsx b/src/timeline-graph/components/timeline-graph-component.tsx
index 680138c..358a17d 100644
--- a/src/timeline-graph/components/timeline-graph-component.tsx
+++ b/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,
             }}