reports name

web/src/pages/implementations/implementations.tsx

@@ -151,13 +151,11 @@ const ActionsRow: React.FC<ActionsRowProps> = ({
         />
       </Tooltip>
       <RunTestsButton implementation={implementation} pattern={pattern}>
-        <Tooltip hasArrow label={<Text>Correr tests</Text>}>
-          <IconButton
-            aria-label="test implementation"
-            variant="unstyled"
-            icon={<Icon as={FaPlay} />}
-          />
-        </Tooltip>
+        <IconButton
+          aria-label="test implementation"
+          variant="unstyled"
+          icon={<Icon as={FaPlay} />}
+        />
       </RunTestsButton>
       <Tooltip hasArrow label={<Text>Eliminar implementacion</Text>}>
         <IconButton

web/src/pages/implementations/query-builder/run-tests-step-2-mutation.ts

@@ -9,6 +9,7 @@ export namespace RunTestsStep2Mutation {
     id: Formalization['id']
     implementationId: Implementation['id']
     wrapperFile: File
+    name: string
   }
   export type Response = { path: string }
 

web/src/pages/implementations/run-tests/run-tests-button-modal.tsx

@@ -19,6 +19,7 @@ import {
   Spinner,
   Box,
   Badge,
+  Input,
 } from '@chakra-ui/react'
 import React from 'react'
 import { DropzoneState } from 'react-dropzone'
@@ -29,8 +30,6 @@ import { useRunTestsButton } from './use-run-tests-button'
 import prettyBytes from 'pretty-bytes'
 import { DownloadFileMutation } from 'src/utils/query-builder/download-file-mutation'
 
-const FORM_ID = 'run-tests-form'
-
 export type RunTestsButtonModalProps = {
   implementation: Implementation
   pattern: Pattern
@@ -44,6 +43,8 @@ export const RunTestsButtonModal: React.FC<RunTestsButtonModalProps> = ({
   ...props
 }) => {
   const {
+    name,
+    setName,
     formalizations,
     formalizationId,
     setFormalizationId,
@@ -89,7 +90,7 @@ export const RunTestsButtonModal: React.FC<RunTestsButtonModalProps> = ({
   return (
     <>
       {disclosure.isOpen && (
-        <Modal size="xl" {...disclosure}>
+        <Modal size="xl" {...disclosure} {...props}>
           <ModalOverlay />
           <ModalContent>
             {match(step)
@@ -102,9 +103,24 @@ export const RunTestsButtonModal: React.FC<RunTestsButtonModalProps> = ({
                     </Text>
                   </ModalHeader>
                   <ModalCloseButton mt="-2" mr="-2" />
-                  <form id={FORM_ID}>
-                    <ModalBody>
-                      <HStack spacing="4">
+                  <ModalBody>
+                    <VStack w="full">
+                      <HStack
+                        spacing="4"
+                        w="full"
+                        justifyContent="space-between"
+                      >
+                        <Text>Nombre:</Text>
+                        <Input
+                          value={name}
+                          onChange={(e) => setName(e.target.value)}
+                        />
+                      </HStack>
+                      <HStack
+                        spacing="4"
+                        w="full"
+                        justifyContent="space-between"
+                      >
                         <Text>Formalizacion:</Text>
                         <Select
                           name="formalizationId"
@@ -123,28 +139,27 @@ export const RunTestsButtonModal: React.FC<RunTestsButtonModalProps> = ({
                           })}
                         </Select>
                       </HStack>
-                      <FileSelector
-                        source="Strategy"
-                        fileWithName={strategy}
-                        dropzoneState={strategyDropzoneState}
-                        handleOnRemove={onRemoveStrategy}
-                      />
+                    </VStack>
+                    <FileSelector
+                      source="Strategy"
+                      fileWithName={strategy}
+                      dropzoneState={strategyDropzoneState}
+                      handleOnRemove={onRemoveStrategy}
+                    />
 
-                      <FileSelector
-                        source="Test cases instantiation"
-                        fileWithName={testCasesInstantiation}
-                        dropzoneState={testCasesInstantiationDropzoneState}
-                        handleOnRemove={onRemoveTestCasesInstantiation}
-                      />
-                    </ModalBody>
-                  </form>
+                    <FileSelector
+                      source="Test cases instantiation"
+                      fileWithName={testCasesInstantiation}
+                      dropzoneState={testCasesInstantiationDropzoneState}
+                      handleOnRemove={onRemoveTestCasesInstantiation}
+                    />
+                  </ModalBody>
                   <ModalFooter bottom="0">
                     <HStack>
                       <Button variant="outline" onClick={disclosure.onClose}>
                         Cancelar
                       </Button>
                       <Button
-                        form={FORM_ID}
                         onClick={handleOnRunTestsStep1}
                         variant="solid"
                         colorScheme="blue"

web/src/pages/implementations/run-tests/use-run-tests-button.ts

@@ -28,6 +28,8 @@ export function useRunTestsButton({
   const queryClient = useQueryClient()
   const toast = useToast()
 
+  const [name, setName] = React.useState('')
+
   React.useEffect(() => {
     queryClient.invalidateQueries(GetFormalizationsQuery.key)
   }, [])
@@ -159,9 +161,10 @@ export function useRunTestsButton({
     return (
       Boolean(formalizationId) &&
       Boolean(strategy) &&
-      Boolean(testCasesInstantiation)
+      Boolean(testCasesInstantiation) &&
+      Boolean(name)
     )
-  }, [formalizationId, strategy, testCasesInstantiation])
+  }, [formalizationId, strategy, testCasesInstantiation, name])
 
   const runTestsMutation = RunTestsStep1Mutation.useMutation()
 
@@ -184,15 +187,16 @@ export function useRunTestsButton({
   }
 
   const step2Mutation = RunTestsStep2Mutation.useMutation({
-    onSuccess: (data) => console.log({ data }),
+    // TODO: Navigate to Reports
   })
   const handleOnRunTestsStep2 = async () => {
     setStep('Loading')
 
-    const response = await step2Mutation.mutateAsync({
+    await step2Mutation.mutateAsync({
       id: formalizationId,
       implementationId,
       wrapperFile: wrapper.file,
+      name,
     })
 
     onClose()
@@ -205,6 +209,8 @@ export function useRunTestsButton({
   }
 
   return {
+    name,
+    setName,
     formalizations: formalizationsQuery.data ?? [],
     formalizationId,
     setFormalizationId,

web/src/pages/reports/reports.tsx

@@ -27,8 +27,6 @@ export const Reports = () => {
     id: implementationId,
   })
 
-  console.log({ d: reportsQuery.data })
-
   return (
     <VStack alignItems="flex-start" spacing="2">
       <Text fontWeight="bold" fontSize="x-large" px="1">