hotfix: clearer wait for trace behaviour

public/locales/de/translation.json

@@ -163,6 +163,7 @@
 		"download_trace": "Klicke hier zum herunterladen",
 		"packets": "Pakete",
 		"title": "Trace-Gerät",
+		"waiting_directions": "Sie können dieses Modal jederzeit schließen und die Datei später im Befehlsprotokoll abrufen",
 		"waiting_seconds": "Verstrichene Zeit: {{seconds}} Sekunden"
 	},
 	"upgrade": {

public/locales/en/translation.json

@@ -163,6 +163,7 @@
 		"download_trace": "Click here to download",
 		"packets": "Packets",
 		"title": "Trace Device",
+		"waiting_directions": "You can close this modal at any time and retrieve the file later in the Commands log",
 		"waiting_seconds": "Time Elapsed: {{seconds}} seconds"
 	},
 	"upgrade": {

public/locales/es/translation.json

@@ -163,6 +163,7 @@
 		"download_trace": "Haga click aquí para descargar",
 		"packets": "Paquetes",
 		"title": "Dispositivo de seguimiento",
+		"waiting_directions": "Puede cerrar este modal en cualquier momento y recuperar el archivo más tarde en el registro de comandos",
 		"waiting_seconds": "Tiempo transcurrido: {{seconds}} segundos"
 	},
 	"upgrade": {

public/locales/fr/translation.json

@@ -163,6 +163,7 @@
 		"download_trace": "Cliquez ici pour télécharger",
 		"packets": "Paquets",
 		"title": "Dispositif de traçage",
+		"waiting_directions": "Vous pouvez fermer ce modal à tout moment et récupérer le fichier plus tard dans le journal des commandes",
 		"waiting_seconds": "Temps écoulé : {{seconds}} secondes"
 	},
 	"upgrade": {

public/locales/pt/translation.json

@@ -163,6 +163,7 @@
 		"download_trace": "Clique aqui para baixar",
 		"packets": "Pacotes",
 		"title": "Dispositivo de rastreamento",
+		"waiting_directions": "Você pode fechar este modal a qualquer momento e recuperar o arquivo mais tarde no registro de comandos",
 		"waiting_seconds": "Tempo decorrido: {{seconds}} segundos"
 	},
 	"upgrade": {

src/components/TraceModal/WaitingForTraceBody.js

@@ -1,13 +1,13 @@
 import React, { useState, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import PropTypes from 'prop-types';
-import { CModalBody, CButton, CSpinner } from '@coreui/react';
+import { CModalBody, CButton, CSpinner, CModalFooter } from '@coreui/react';
 import { getToken } from 'utils/authHelper';
 import axiosInstance from 'utils/axiosInstance';
 
 import styles from './index.module.scss';
 
-const WaitingForTraceBody = ({serialNumber, commandUuid}) => {
+const WaitingForTraceBody = ({serialNumber, commandUuid, toggle}) => {
   const { t } = useTranslation();
   const [secondsElapsed, setSecondsElapsed] = useState(0);
   const [waitingForFile, setWaitingForFile] = useState(true);
@@ -75,27 +75,37 @@ const WaitingForTraceBody = ({serialNumber, commandUuid}) => {
   }, [waitingForFile]);
 
   return (
-    <CModalBody>
-      <p>{t('trace.waiting_seconds', {seconds: secondsElapsed})}</p>
-      <div className={styles.centerDiv}>
-        <CSpinner hidden={!waitingForFile} />
-      </div>
-      <CButton
-        hidden={waitingForFile}
-        onClick={downloadTrace}
-        disabled={waitingForFile}
-        color="link"
-        block
-      >
-        {t('trace.download_trace')}
-      </CButton>
-    </CModalBody>
+    <div>
+      <CModalBody>
+        <h6>{t('trace.waiting_seconds', {seconds: secondsElapsed})}</h6>
+        <p>{t('trace.waiting_directions')}</p>
+        <div className={styles.centerDiv}>
+          <CSpinner hidden={!waitingForFile} />
+        </div>
+        <CButton
+          hidden={waitingForFile}
+          onClick={downloadTrace}
+          disabled={waitingForFile}
+          color="link"
+          block
+        >
+          {t('trace.download_trace')}
+        </CButton>
+      </CModalBody>
+      <CModalFooter>
+        <CButton color="secondary" block onClick={toggle}>
+          {t('common.close')}
+        </CButton>
+      </CModalFooter>
+    </div>
+
   );
 }
 
 WaitingForTraceBody.propTypes = {
   serialNumber: PropTypes.string.isRequired,
   commandUuid: PropTypes.string.isRequired,
+  toggle: PropTypes.func.isRequired
 };
 
 export default WaitingForTraceBody;

src/components/TraceModal/index.js

@@ -134,7 +134,7 @@ const TraceModal = ({ show, toggleModal }) => {
   const getBody = () => {
     if(waitingForTrace){
       return (
-        <WaitingForTraceBody serialNumber={selectedDeviceId} commandUuid={commandUuid}/>
+        <WaitingForTraceBody toggle={toggleModal} serialNumber={selectedDeviceId} commandUuid={commandUuid}/>
       );
     }
     if(hadSuccess){

src/components/TraceModal/index.module.scss

@@ -7,5 +7,8 @@
 }
 
 .centerDiv {
-  text-align: center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 20px;
 }