From 837318eb9a1d9af2fd44dc309ebea312b57e5907 Mon Sep 17 00:00:00 2001
From: Corey Farwell <coreyf@rwell.org>
Date: Tue, 16 Dec 2025 17:31:36 -0500
Subject: [PATCH] Migrate `DataQualityAssessment` component to TypeScript.
 (#3279)

* Migrate `DataQualityAssessment` component to TypeScript.

* Semicolon interface; update closure return type

---------

Co-authored-by: Johannes Klein <johannes.t.klein@gmail.com>
---
 ...ssessment.js => DataQualityAssessment.tsx} | 42 +++++++++----------
 1 file changed, 21 insertions(+), 21 deletions(-)
 rename src/components/ObsDetails/{DataQualityAssessment.js => DataQualityAssessment.tsx} (91%)

diff --git a/src/components/ObsDetails/DataQualityAssessment.js b/src/components/ObsDetails/DataQualityAssessment.tsx
similarity index 91%
rename from src/components/ObsDetails/DataQualityAssessment.js
rename to src/components/ObsDetails/DataQualityAssessment.tsx
index f441c760c..4e15b0d0d 100644
--- a/src/components/ObsDetails/DataQualityAssessment.js
+++ b/src/components/ObsDetails/DataQualityAssessment.tsx
@@ -1,4 +1,3 @@
-// @flow
 import DQAVoteButtons from "components/ObsDetails/DetailsTab/DQAVoteButtons";
 import {
   Body1,
@@ -15,11 +14,10 @@ import {
 import QualityGradeStatus from "components/SharedComponents/QualityGradeStatus/QualityGradeStatus";
 import { View } from "components/styledComponents";
 import { t } from "i18next";
-import type { Node } from "react";
 import React from "react";
 import colors from "styles/tailwindColors";
 
-const titleOption = option => {
+const titleOption = ( option: string ) => {
   switch ( option ) {
     case "research":
       return t( "Data-quality-assessment-title-research" );
@@ -30,7 +28,7 @@ const titleOption = option => {
   }
 };
 
-const titleDescription = option => {
+const titleDescription = ( option: string ) => {
   switch ( option ) {
     case "research":
       return t( "Data-quality-assessment-description-research" );
@@ -40,20 +38,22 @@ const titleDescription = option => {
       return t( "Data-quality-assessment-description-casual" );
   }
 };
-type Props = {
-  checkTest: Function,
-  ifMajorityAgree: Function,
-  isConnected?: boolean,
-  loadingAgree: boolean,
-  loadingDisagree: boolean,
-  loadingMetric: string,
-  qualityGrade: string,
-  qualityMetrics: Object,
-  recheckisConnected: Function,
-  removeMetricVote: Function,
-  removeNeedsIDVote: Function,
-  setMetricVote: Function,
-  setNeedsIDVote: Function,
+interface Props {
+  checkTest: ( metric: string ) => boolean;
+  ifMajorityAgree: ( metric: string ) => boolean | null;
+  isConnected?: boolean;
+  loadingAgree: boolean;
+  loadingDisagree: boolean;
+  loadingMetric: string;
+  qualityGrade: string;
+  // There's no type definition for qualityMetrics available yet;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  qualityMetrics: any;
+  recheckisConnected: ( ) => void;
+  removeMetricVote: ( ) => void;
+  removeNeedsIDVote: ( ) => void;
+  setMetricVote: ( ) => void;
+  setNeedsIDVote: ( ) => void;
 }
 
 const DataQualityAssessment = ( {
@@ -70,13 +70,13 @@ const DataQualityAssessment = ( {
   removeNeedsIDVote,
   setMetricVote,
   setNeedsIDVote
-}: Props ): Node => {
+}: Props ) => {
   const isResearchGrade = qualityGrade === "research";
   const sectionClass = "flex-row my-[14px] space-x-[11px]";
   const voteClass = "flex-row mr-[15px] my-[7px] justify-between";
   const listTextClass = "flex-row shrink space-x-[11px] mr-[11px] items-center";
 
-  const renderMetricIndicator = metric => {
+  const renderMetricIndicator = ( metric: string ) => {
     const ifAgree = ifMajorityAgree( metric );
     if ( ifAgree || ifAgree === null ) {
       return (
@@ -97,7 +97,7 @@ const DataQualityAssessment = ( {
     );
   };
 
-  const renderIndicator = metric => {
+  const renderIndicator = ( metric: string ) => {
     const ifAgree = checkTest( metric );
     if ( ifAgree || ifAgree === null ) {
       return (