Fix mappedStates case (apache#30916)

* Fix mappedStates case

* remove stray console log

Author: bbovenzi

airflow/www/static/js/dag/InstanceTooltip.tsx

@@ -19,6 +19,7 @@
 
 import React from "react";
 import { Box, Text } from "@chakra-ui/react";
+import { snakeCase } from "lodash";
 
 import { getGroupAndMapSummary } from "src/utils";
 import { formatDuration, getDuration } from "src/datetime_utils";
@@ -46,11 +47,11 @@ const InstanceTooltip = ({
   });
 
   childTaskMap.forEach((key, val) => {
+    const childState = snakeCase(val);
     if (key > 0) {
       summary.push(
-        // eslint-disable-next-line react/no-array-index-key
-        <Text key={val} ml="10px">
-          {val}
+        <Text key={childState} ml="10px">
+          {childState}
           {": "}
           {key}
         </Text>

airflow/www/static/js/dag/details/taskInstance/Details.tsx

@@ -19,6 +19,7 @@
 
 import React from "react";
 import { Text, Flex, Table, Tbody, Tr, Td, Divider } from "@chakra-ui/react";
+import { snakeCase } from "lodash";
 
 import { getGroupAndMapSummary } from "src/utils";
 import { getDuration, formatDuration } from "src/datetime_utils";
@@ -59,15 +60,15 @@ const Details = ({ instance, group, dagId }: Props) => {
   });
 
   childTaskMap.forEach((key, val) => {
+    const childState = snakeCase(val);
     if (key > 0) {
       summary.push(
-        // eslint-disable-next-line react/no-array-index-key
-        <Tr key={val}>
+        <Tr key={childState}>
           <Td />
           <Td>
             <Flex alignItems="center">
-              <SimpleStatus state={val as TaskState} mx={2} />
-              {val}
+              <SimpleStatus state={childState as TaskState} mx={2} />
+              {childState}
               {": "}
               {key}
             </Flex>