From 69bc873eee5ddc9e01d6657f816b6d3af6a11eeb Mon Sep 17 00:00:00 2001
From: Roman Rodionov <rrodionov91@mail.ru>
Date: Thu, 6 Feb 2025 18:31:39 +0100
Subject: [PATCH] Feature/EPMUII-8047 'Save' option doesn't save any files
 (#218)

* EPMUII-8047:
- fixed nifti file saving dialog appearance
- fixed file extension setting during first download
- fixed styles of nifti saving window
---
 src/ui/Button/Button.module.css    |  4 ++++
 src/ui/Modals/Modals.module.css    |  4 ++++
 src/ui/Modals/UiModalSaveNifti.jsx | 28 ++++++++++++++++++----------
 3 files changed, 26 insertions(+), 10 deletions(-)

diff --git a/src/ui/Button/Button.module.css b/src/ui/Button/Button.module.css
index 9b8900d3..6aed73ee 100644
--- a/src/ui/Button/Button.module.css
+++ b/src/ui/Button/Button.module.css
@@ -236,3 +236,7 @@ button:hover,
 .button_select_file svg {
   margin-right: 10px;
 }
+
+.cancel {
+  border-radius: 4px;
+}
\ No newline at end of file
diff --git a/src/ui/Modals/Modals.module.css b/src/ui/Modals/Modals.module.css
index 70d9c9f2..8c0e5950 100644
--- a/src/ui/Modals/Modals.module.css
+++ b/src/ui/Modals/Modals.module.css
@@ -133,6 +133,10 @@
   flex-direction: column;
 }
 
+.input_label_left {
+  margin-right: 5px;
+}
+
 .input {
   flex-grow: 1;
   border: 1px solid var(--dark-gray);
diff --git a/src/ui/Modals/UiModalSaveNifti.jsx b/src/ui/Modals/UiModalSaveNifti.jsx
index 6c0dd00c..bf03dd1c 100644
--- a/src/ui/Modals/UiModalSaveNifti.jsx
+++ b/src/ui/Modals/UiModalSaveNifti.jsx
@@ -7,8 +7,10 @@ import React, { useState } from 'react';
 import { useSelector } from 'react-redux';
 
 import SaverNifti from '../../engine/savers/SaverNifti';
-import { Modal, ModalBody, ModalHeader } from './ModalBase';
+import { Modal, ModalBody, ModalFooter, ModalHeader } from './ModalBase';
 import { UIButton } from '../Button/Button';
+import buttonCss from '../Button/Button.module.css';
+import modalCss from './Modals.module.css';
 
 export function UiModalSaveNifti(props) {
   const { stateVis, onHide } = props;
@@ -40,14 +42,17 @@ export function UiModalSaveNifti(props) {
     const niiArr = SaverNifti.writeBuffer(volData, volSize);
     const textToSaveAsBlob = new Blob([niiArr], { type: 'application/octet-stream' });
     const textToSaveAsURL = window.URL.createObjectURL(textToSaveAsBlob);
-    const goodSuffix = fileName.trim().endsWith('.nii');
-    if (!goodSuffix) {
-      setFileName((prev) => `${prev.trim()}.nii`);
+    const isExtensionValid = fileName.trim().endsWith('.nii');
+    let fileNameWithExtension = fileName;
+
+    if (!isExtensionValid) {
+      fileNameWithExtension = `${fileName}.nii`;
+      setFileName(fileNameWithExtension);
     }
     // console.log(`Save to file ${fileName}`);
 
     const downloadLink = document.createElement('a');
-    downloadLink.download = fileName;
+    downloadLink.download = fileNameWithExtension;
     downloadLink.innerHTML = 'Download File';
     downloadLink.href = textToSaveAsURL;
     downloadLink.onclick = (event) => document.body.removeChild(event.target);
@@ -68,23 +73,26 @@ export function UiModalSaveNifti(props) {
   };
 
   return (
-    <Modal show={stateVis} onHide={onHide}>
+    <Modal isOpen={stateVis} onHide={onHide}>
+      <ModalHeader title="Save to Nifty" />
       <ModalBody>
-        <ModalHeader title="Save to Nifty" />
+        <label className={modalCss.input_label_left}>Enter file name:</label>
         <input
           required
           type="text"
           placeholder="Enter file name here"
+          className={modalCss.input}
           value={fileName}
           onChange={onTexChange}
           onKeyUp={(evt) => {
             handleFormSubmit(evt);
           }}
         />
-        .nii
-        <UIButton handler={onSaveNifti} caption="Save" />
-        <UIButton handler={onHide} caption="Cancel" />
       </ModalBody>
+      <ModalFooter>
+        <UIButton handler={onSaveNifti} caption="Save" mode={'accent'} cx={buttonCss.apply} />
+        <UIButton handler={onHide} caption="Cancel" cx={buttonCss.cancel} />
+      </ModalFooter>
     </Modal>
   );
 }