Merge pull request #2294 from jaimergp/fix-version-update-contrast

Fix version updates badge contrast in dark mode and make this section full-width, below Migrations

Author: beckermr

src/components/StatusDashboard/incidents.jsx

@@ -92,7 +92,12 @@ export default function Incidents({ ongoing, onLoad, ...props }) {
       </div>
       <div className={`card__body ${styles.incidents}`}>
         {open.map((issue, i) => <Incident key={i}>{issue}</Incident>)}
-        {closed.map((issue, i) => <Incident key={i}>{issue}</Incident>)}
+        {closed.length ? (
+          <details>
+            <summary>See previous incidents</summary>
+            {closed.map((issue, i) => <Incident key={i}>{issue}</Incident>)}
+          </details>
+        ) : null}
       </div>
     </div>
   );

src/components/StatusDashboard/index.jsx

@@ -35,7 +35,7 @@ export default function StatusDashboard() {
   const onLoadIncidents = incidents =>
     setState((prev) => ({ ...prev, incidents, loaded: prev.loaded + 1 }));
   return (
-    <main className="container">
+    <main className="container" style={{ paddingBottom: "1em" }}>
       <div className="row row--no-gutters">
         <div className="col col--2"><TOC /></div>
         <div className="col col--10">
@@ -59,6 +59,12 @@ export default function StatusDashboard() {
               <CurrentMigrations onLoad={onLoad} />
             </div>
           </div>
+          <div className="row row--no-gutters">
+            <div className="col col--12">
+              <div id="version" className={styles.toc_anchor}></div>
+              <VersionUpdates onLoad={onLoad} />
+            </div>
+          </div>
           <div className="row row--no-gutters">
             <div className="col col--12">
               <div id="azure" className={styles.toc_anchor}></div>
@@ -90,14 +96,10 @@ export default function StatusDashboard() {
             </div>
           </div>
           <div className="row row--no-gutters">
-            <div className="col col--6">
+            <div className="col col--12">
               <div id="incidents" className={styles.toc_anchor}></div>
               <Incidents onLoad={onLoadIncidents} />
             </div>
-            <div className="col col--6">
-              <div id="version" className={styles.toc_anchor}></div>
-              <VersionUpdates onLoad={onLoad} />
-            </div>
           </div>
         </div>
       </div>

src/components/StatusDashboard/styles.module.css

@@ -193,11 +193,20 @@
   font-weight: 600;
 }
 
+[data-theme="dark"] .version_updates_content .badge a {
+  color: var(--ifm-color-primary-darkest);
+}
+
 .version_updates_content .badge:hover {
   border-width: var(--ifm-badge-border-width);
   border-color: var(--ifm-color-primary);
 }
 
+[data-theme="dark"] .version_updates_content .badge:hover {
+  border-width: var(--ifm-badge-border-width);
+  border-color: var(--ifm-color-primary-light);
+}
+
 .errored_item {
   border: var(--ifm-table-border-width) solid transparent;
   cursor: pointer;
@@ -262,3 +271,7 @@
   right: 0;
   text-align: right;
 }
+
+.progress_bar progress {
+  accent-color: var(--ifm-color-primary);
+}

src/components/StatusDashboard/toc.jsx

@@ -14,6 +14,9 @@ export default function TOC({ incident }) {
         <li className="menu__list-item">
           <a className="menu__link" href="#migrations">Current Migrations</a>
         </li>
+        <li className="menu__list-item">
+          <a className="menu__link" href="#version">Version Updates</a>
+        </li>
         <li className="menu__list-item">
           <a className="menu__link" href="#azure">Azure Pipelines Usage</a>
         </li>
@@ -26,9 +29,6 @@ export default function TOC({ incident }) {
         <li className="menu__list-item">
           <a className="menu__link" href="#incidents">Incidents</a>
         </li>
-        <li className="menu__list-item">
-          <a className="menu__link" href="#version">Version Updates</a>
-        </li>
       </ul>
     </aside>
   );

src/components/StatusDashboard/version_updates.jsx

@@ -4,13 +4,12 @@ import React, { useEffect, useState } from "react";
 import styles from "./styles.module.css";
 
 export default function VersionUpdates({ onLoad }) {
-  const [{ collapsed, errored, expanded, errors, queued }, setState] =
+  const [{ collapsed, expanded, errors, queued }, setState] =
     useState({
-      collapsed: { queued: true, errored: true },
+      collapsed: { queued: false, errored: true },
       expanded: {},
-      errored: [],
       errors: {},
-      queued: []
+      queued: {}
     });
   const toggleItem = item => () => setState(prev => (
     { ...prev, expanded: { ...prev.expanded, [item]: !prev.expanded[item] } }
@@ -35,9 +34,9 @@ export default function VersionUpdates({ onLoad }) {
         <h3>
           Version Updates
             {" "}
-            <span className="badge badge--secondary">{queued.length}</span>
+            <span className="badge badge--secondary">{Object.keys(queued).length}</span>
             {" "}
-            <span className="badge badge--warning">{errored.length}</span>
+            <span className="badge badge--warning">{Object.keys(errors).length}</span>
         </h3>
       </div>
       <div className="card__body">
@@ -47,19 +46,19 @@ export default function VersionUpdates({ onLoad }) {
             (collapsed.queued ? styles.collapsed : styles.expanded)
           }>
           Queued Version Updates{" "}
-          <span className="badge badge--secondary">{queued.length}</span>
+          <span className="badge badge--secondary">{Object.keys(queued).length}</span>
         </div>
         <div className={styles.version_updates_content}
           style={collapsed.queued ?
             { display: "none" } :
             { display: "flex", flexDirection: "row" }
           }>
-          {queued.map((item, index) => (
+          {Object.entries(queued).map(([name, version], index) => (
             <div key={index}
               style={{ margin: 2 }}
               className={`${styles.badge} badge badge--secondary`}>
-              <Link href={urls.versions.pr.replace("<NAME>", item)}>
-                {item}
+              <Link href={urls.versions.pr.replace("<NAME>", name)}>
+                {`${name} ${version}`}
               </Link>
             </div>
           ))}
@@ -70,29 +69,29 @@ export default function VersionUpdates({ onLoad }) {
             (collapsed.errored ? styles.collapsed : styles.expanded)
           }>
           Errored Version Updates{" "}
-          <span className="badge badge--warning">{errored.length}</span>
+          <span className="badge badge--warning">{Object.keys(errors).length}</span>
         </div>
         <div className={styles.version_updates_content}
           style={collapsed.errored ?
             { display: "none" } :
             { display: "flex", flexDirection: "column" }}>
-          {errored.map((item, index) => (
+          {Object.entries(errors).map(([name, message], index) => (
             <React.Fragment key={index}>
               <div className={
                 styles.errored_item + " " +
-                (expanded[item] ? styles.expanded : styles.collapsed)}
-                onClick={toggleItem(item)}>
+                (expanded[name] ? styles.expanded : styles.collapsed)}
+                onClick={toggleItem(name)}>
                 <HoverEllipsis />
                 <div className={`${styles.badge} badge badge--secondary`}>
                   {/* Prevent link clicks from expanding/collapsing. */}
                   <Link onClick={event => event.stopPropagation()}
-                    href={urls.versions.pr.replace("<NAME>", item)}>{item}
+                    href={urls.versions.pr.replace("<NAME>", name)}>{name}
                   </Link>
                 </div>
               </div>
               <div className={styles.errored_item_content}
-                style={{ display: !expanded[item] && "none" }}>
-                <pre dangerouslySetInnerHTML={{ __html: errors[item]}} />
+                style={{ display: !expanded[name] && "none" }}>
+                <pre dangerouslySetInnerHTML={{ __html: message}} />
               </div>
             </React.Fragment>
           ))}

src/constants.js

@@ -138,8 +138,8 @@ export const urls = {
     usage: "https://conda-forge.herokuapp.com/status-monitor/report/travis-ci",
   },
   versions: {
-    api: "https://raw.githubusercontent.com/regro/cf-graph-countyfair/master/status/version_status.json",
-    pr: "https://github.com/conda-forge/<NAME>-feedstock/blob/main/recipe/meta.yaml",
+    api: "https://raw.githubusercontent.com/regro/cf-graph-countyfair/master/status/version_status.v2.json",
+    pr: "https://github.com/conda-forge/<NAME>-feedstock/tree/main/recipe",
   },
   schemas: {
     "conda-forge.yml":

src/pages/status/index.jsx

@@ -8,7 +8,7 @@ export default function Home() {
       title="Status dashboard"
       description="Status dashboard for conda-forge"
     >
-      <StatusDashboard />
+      <StatusDashboard/>
     </Layout>
   );
 }