From d8fdf33dbcecb204249d6f2e8856beb0187be293 Mon Sep 17 00:00:00 2001
From: Laura Fuentes Grau <laurafuentesgrau@gmail.com>
Date: Sun, 21 Jun 2020 16:43:21 +0200
Subject: [PATCH] Fix for edit files: table now has a fixed layout/ doesn't
 protrude out from dialog and close/cancel button closes dialog #219

---
 src/dashboard/dashboard.js |  2 +-
 src/file/edit-files.js     | 21 ++++++++++++---------
 src/styles/app.css         | 21 +++++++++++++++++++++
 3 files changed, 34 insertions(+), 10 deletions(-)

diff --git a/src/dashboard/dashboard.js b/src/dashboard/dashboard.js
index cf4e656..5000ede 100644
--- a/src/dashboard/dashboard.js
+++ b/src/dashboard/dashboard.js
@@ -273,7 +273,7 @@ class Dashboard extends Component {
   }
 
   closeEditFiles(){
-
+    this.setState({ filesEditModal: false });
     // TODO do we need this if the dispatches happen in the dialog?
   }
 
diff --git a/src/file/edit-files.js b/src/file/edit-files.js
index 4df19d5..047c2da 100644
--- a/src/file/edit-files.js
+++ b/src/file/edit-files.js
@@ -38,7 +38,7 @@ class EditFilesDialog extends React.Component {
 
   onClose(canceled) {
     if (canceled === false) {
-      if (this.validChanges()) {
+      if (true) {
         this.props.onClose();
       }
     } else {
@@ -64,6 +64,7 @@ class EditFilesDialog extends React.Component {
       scenarioID: this.props.scenarioID,
     });
 
+    this.setState({ uploadFile: null });
     // TODO make sure that dialog remains open after clicking "Upload" button
   };
 
@@ -118,21 +119,23 @@ class EditFilesDialog extends React.Component {
     };
 
     return (
-      <Dialog show={this.props.show} title="Edit Files of scenario" buttonTitle="Close" valid={true}>
+      <Dialog show={this.props.show} title="Edit Files of scenario" buttonTitle="Close" onClose={(c) => this.onClose(c)} valid={true}>
         <div>
-          <Table data={this.props.files}>
-            <TableColumn title='ID' dataKey='id'  />
-            <TableColumn title='Name' dataKey='name'  />
-            <TableColumn title='Size (bytes)' dataKey='size' />
-            <TableColumn title='Type' dataKey='type' />
+
+        <div className="edit-table">
+          <Table data={this.props.files} width = {467}>
+            <TableColumn title='ID' dataKey='id' width={42}  />
+            <TableColumn title='Name' dataKey='name'  width={107}/>
+            <TableColumn title='Size (bytes)' dataKey='size' width={83.3}/>
+            <TableColumn title='Type' dataKey='type' width={159.7}/>
             <TableColumn
               title='Delete'
-              width='50'
+              width='75'
               deleteButton
               onDelete={(index) => this.deleteFile(index)}
             />
           </Table>
-
+        </div>
 
           <FormGroup as={Col} >
             <FormControl
diff --git a/src/styles/app.css b/src/styles/app.css
index 672c505..e51cf0c 100644
--- a/src/styles/app.css
+++ b/src/styles/app.css
@@ -272,6 +272,27 @@ body {
                                              supported by Chrome and Opera */
 }
 
+.edit-table table {
+  background-color: #fff;
+  table-layout: fixed;
+  word-wrap: break-word;
+  width: 467px;
+}
+
+.edit-table th {
+  position: sticky; 
+  top: 0;
+  text-align: left;
+}
+
+.edit-table td{
+  text-align: left;
+}
+
+.edit-table td {
+  padding: 2px 8px !important;
+}
+
 /**
  * Toolbox
  */