fix(app): Separate ValidationResults into loading and display components

OpenNeuroOrg · Feb 5, 2025 · 3729f05 · 3729f05
1 parent 83a1f42
commit 3729f05
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 19 deletions.
diff --git a/packages/openneuro-app/src/scripts/uploader/upload-issues.tsx b/packages/openneuro-app/src/scripts/uploader/upload-issues.tsx
@@ -1,7 +1,7 @@
 import React from "react"
 import pluralize from "pluralize"
 import { Loading } from "@openneuro/components/loading"
-import { ValidationResults } from "../validation/validation-results"
+import { ValidationResultsDisplay } from "../validation/validation-results"
 import UploaderContext from "./uploader-context.js"
 import { validation } from "../workers/schema.js"
 import type { ValidationResult } from "@bids/validator/main"
@@ -106,7 +106,7 @@ class UploadValidator
             next={this.props.next}
             reset={this.props.reset}
           />
-          <ValidationResults
+          <ValidationResultsDisplay
             issues={this.state.issues}
           />
           <span className="bids-link">

diff --git a/packages/openneuro-app/src/scripts/validation/validation-results.tsx b/packages/openneuro-app/src/scripts/validation/validation-results.tsx
@@ -4,6 +4,7 @@ import { Issues } from "./validation-issues"
 import { RadioGroup } from "@openneuro/components/radio"
 import { Loading } from "@openneuro/components/loading"
 import styled from "@emotion/styled"
+import type { DatasetIssues } from "@bids/validator/issues"
 import { useValidationResults } from "./validation-results-query"
 
 const RadioSpan = styled.span`
@@ -25,24 +26,14 @@ interface ValidationResultsProps {
 
 type ValidationGroupBy = "code" | "location"
 
-/**
- * Display ValidationResults with collapsing panels
- */
-export function ValidationResults(
-  { datasetId, version }: ValidationResultsProps,
+interface ValidationResultsDisplayProps {
+  issues: DatasetIssues
+}
+
+export function ValidationResultsDisplay(
+  { issues }: ValidationResultsDisplayProps,
 ) {
-  const { issues, loading } = useValidationResults(datasetId, version)
   const [groupBy, setGroupBy] = React.useState<ValidationGroupBy>("code")
-
-  if (loading) {
-    return (
-      <>
-        <Loading />
-        <span className="message">Loading validation results...</span>
-      </>
-    )
-  }
-
   const groupedIssues = issues.groupBy("severity")
   const errors = groupedIssues.get("error")
   const warnings = groupedIssues.get("warning")
@@ -106,4 +97,24 @@ export function ValidationResults(
   )
 }
 
+/**
+ * Display ValidationResults with collapsing panels
+ */
+export function ValidationResults(
+  { datasetId, version }: ValidationResultsProps,
+) {
+  const { issues, loading } = useValidationResults(datasetId, version)
+
+  if (loading) {
+    return (
+      <>
+        <Loading />
+        <span className="message">Loading validation results...</span>
+      </>
+    )
+  } else {
+    return <ValidationResultsDisplay issues={issues} />
+  }
+}
+
 export default ValidationResults
diff --git a/packages/openneuro-app/src/scripts/validation/validation.tsx b/packages/openneuro-app/src/scripts/validation/validation.tsx
@@ -53,7 +53,7 @@ interface WarningsProps {
 }
 
 const Warnings = ({ datasetId, version, warnings }: WarningsProps) => (
-  <ValidationPanel heading={warningHeader(warnings.size)}>
+  <ValidationPanel heading={warningHeader(warnings)}>
     <div>
       <span className="message error fade-in">
         We found{" "}