download formalization

web/src/pages/Patterns/details/formalizations-list.tsx

@@ -16,7 +16,7 @@ import {
 } from '@chakra-ui/react'
 import React from 'react'
 import { FaDownload, FaTrash } from 'react-icons/fa'
-import { Pattern } from 'src/models'
+import { Formalization, Pattern } from 'src/models'
 import { DeleteFormalizationMutation } from '../query-builder/delete-formalization-mutation'
 import { useQueryClient } from 'react-query'
 import { GetFormalizationsQuery } from '../query-builder/get-formalizations-query'
@@ -26,6 +26,7 @@ import {
   SIZE_TOO_LARGE,
 } from '../add-pattern/use-add-formalizations'
 import { CreateFormalizationMutation } from '../query-builder'
+import { DownloadFileMutation } from 'src/utils/query-builder/download-file-mutation'
 
 export type FormalizationListProps = {
   patternId: Pattern['id']
@@ -99,7 +100,27 @@ export const FormalizationList: React.FC<FormalizationListProps> = ({
     },
   })
 
-  const formalizations = formalizationsQuery.data
+  const downloadFileMutation = DownloadFileMutation.useMutation({
+    onSuccess: (blob) => {
+      // Create a URL for the blob and trigger a download
+      const url = window.URL.createObjectURL(blob)
+      const link = document.createElement('a')
+      link.href = url
+      link.setAttribute('download', 'formalization.eventb')
+      document.body.appendChild(link)
+      link.click()
+      link.remove()
+    },
+  })
+
+  const handleOnDownloadFormalization = (formalization: Formalization) => {
+    const filePath = formalization.url.split('/remote.php/webdav/')[1]
+
+    downloadFileMutation.mutate({ filePath })
+  }
+
+  const formalizations = formalizationsQuery.data ?? []
+
   return (
     <VStack w="full">
       <Box w="full">
@@ -107,6 +128,7 @@ export const FormalizationList: React.FC<FormalizationListProps> = ({
           {formalizations &&
             formalizations.map((formalization, index) => {
               const fileExtension = formalization.fileName.split('.')[1] ?? ''
+              console.log({ formalization })
               return (
                 <ListItem
                   pt="8"
@@ -186,7 +208,9 @@ export const FormalizationList: React.FC<FormalizationListProps> = ({
                               aria-label="download formalization"
                               variant="unstyled"
                               color="blue.400"
-                              onClick={() => console.log('TODO')}
+                              onClick={() =>
+                                handleOnDownloadFormalization(formalization)
+                              }
                               icon={<Icon as={FaDownload} />}
                             />
                           </Tooltip>

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

@@ -77,7 +77,7 @@ export const RunTestsButtonModal: React.FC<RunTestsButtonModalProps> = ({
       link.setAttribute(
         'download',
         genericJUnitPath.substring(genericJUnitPath.lastIndexOf('/') + 1)
-      ) // Set the file name
+      )
       document.body.appendChild(link)
       link.click()
       link.remove()

web/src/utils/query-builder/download-file-mutation.ts

@@ -13,7 +13,7 @@ export namespace DownloadFileMutation {
 
   export const mutationFn = async (params: Params) => {
     const response = await axiosService.post(`/files/download`, params, {
-      responseType: 'blob', // Important to handle binary data
+      responseType: 'blob',
     })
     return response.data
   }