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
grailbio · Mar 27, 2020 · ceb68ec · ceb68ec
1 parent f14da61
commit ceb68ec
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 21 deletions.
diff --git 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
@@ -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,
             }}