From fbbc50efc4361836480a552043ed0d800d37fd24 Mon Sep 17 00:00:00 2001
From: PiTrem <pierre.tremouilhac@kit.edu>
Date: Fri, 8 Dec 2023 11:56:50 +0100
Subject: [PATCH] Unified attachment list #1608 Squashed commit of the
 following:

commit dedc9e506896e179139246b9468878e35a9efc1b
Author: mekkyz <mos.mekky@gmail.com>
Date:   Fri Dec 8 08:31:23 2023 +0000

    Fix: rspec test

commit b0d2c58f1c823f6f619f5e2ae5d3034182ac8720
Author: mekkyz <mos.mekky@gmail.com>
Date:   Fri Dec 8 07:34:50 2023 +0000

    Fix: spec test

commit d7b683b1443d5e60f647f813271313f4dc335963
Author: mekkyz <mos.mekky@gmail.com>
Date:   Fri Dec 8 07:08:38 2023 +0000

    Fix: show full attachment name on hover

commit b2ac3c33dab81108831574f205ead5406c0133ca
Author: mekkyz <mos.mekky@gmail.com>
Date:   Fri Dec 8 06:47:44 2023 +0000

    Enhance: hide sorting ui if no attachments

commit 56b08b2a42aebe26a177906eac84b1502ed0c1dc
Author: mekkyz <mos.mekky@gmail.com>
Date:   Fri Dec 8 06:41:41 2023 +0000

    Fix: invalid date

commit 659912143098ea3ec853748f972788d91f6dfad6
Author: mekkyz <mos.mekky@gmail.com>
Date:   Fri Dec 8 06:23:58 2023 +0000

    Removed discard btn for 1.9.0

commit ae611445fa34bc12d619d284132d8ce31c693465
Author: mekkyz <mos.mekky@gmail.com>
Date:   Fri Dec 8 06:21:14 2023 +0000

    Enhance: strike attachment name when deleted

commit 8e532e175b0c46c5a7bd1ecfd1653bd58d7b844f
Author: mekkyz <mos.mekky@gmail.com>
Date:   Fri Dec 8 06:06:33 2023 +0000

    Fix: uploaded attachment not showing

commit 8a391dec5f69bc620f11c00fc23661009f61c358
Author: mekkyz <mos.mekky@gmail.com>
Date:   Fri Dec 8 04:35:23 2023 +0000

    Fix: issues adapting new attach ls to datasets

commit 03624ae9c3b1c93211b1f12cab50c80520844cdd
Author: mekkyz <mos.mekky@gmail.com>
Date:   Fri Dec 8 02:43:15 2023 +0000

    Refactor: changing bad child name

commit b69691c920283cd7d7b2416b0b06e4802db58b64
Author: mekkyz <mos.mekky@gmail.com>
Date:   Fri Dec 8 00:54:13 2023 +0000

    Fix: eslint and Hyperlinks UI

commit 7648505631cb7b1e86b852256dda9baad0430d93
Author: mekkyz <mos.mekky@gmail.com>
Date:   Fri Dec 8 00:29:03 2023 +0000

    Fix: eslint

commit 72fa89f9743c987dea5c1a12f0102ac45022ce12
Author: mekkyz <mos.mekky@gmail.com>
Date:   Thu Dec 7 11:37:08 2023 +0000

    Applying feedback and adding dynamic tooltips

commit bc90f9782a848cb0e0753b7ddd08b27bde7b8fec
Author: mekkyz <mos.mekky@gmail.com>
Date:   Thu Nov 30 12:06:27 2023 +0000

    Fix: rspec

commit a5cab78ff95782bf38b04685e587027c35bdf4e6
Author: mekkyz <mos.mekky@gmail.com>
Date:   Thu Nov 30 11:27:16 2023 +0000

    Fix: rspec

commit 9e00dacc0042c4503ed12c1d544d844792c1a7b0
Author: mekkyz <mos.mekky@gmail.com>
Date:   Thu Nov 30 11:20:27 2023 +0000

    Feat: applying new attachment list to Datasets

commit 50379335ff6cdcfda127abd6f3c3d4e3cca26bda
Author: mekkyz <mos.mekky@gmail.com>
Date:   Tue Nov 28 16:07:05 2023 +0000

    Fix: instant update after dropping attachment

commit d5c945a82cb51f37e8cbc7dd7b18b0ef59436ec0
Author: mekkyz <mos.mekky@gmail.com>
Date:   Tue Nov 28 13:08:07 2023 +0000

    Fix: image warning css changes

commit 39c2f6ab36b2048aa7c20bc793ef878ffa1e07d0
Author: mekkyz <mos.mekky@gmail.com>
Date:   Tue Nov 28 12:11:03 2023 +0000

    Fix: annotating wellplate attachments

commit d70934ac1daff9a6b07384ea993eff5540202a43
Author: mekkyz <mos.mekky@gmail.com>
Date:   Tue Nov 28 12:03:16 2023 +0000

    Fix: eslint

commit 92b3b18d089144afa0ac7f0d32ca5b14b846a8c9
Author: mekkyz <mos.mekky@gmail.com>
Date:   Mon Nov 27 14:39:02 2023 +0000

    Refactor: renaming const for better readability

commit cbcc809c3306a953f27c16c9fa208fa2abcaf802
Author: mekkyz <mos.mekky@gmail.com>
Date:   Mon Nov 27 01:14:51 2023 +0000

    Fix: eslint

commit ad1adbd8eb976a133ebfb1caf4e9db49f59c0986
Author: mekkyz <mos.mekky@gmail.com>
Date:   Tue Nov 21 15:03:18 2023 +0000

    Fix: not importing as element data

commit 7f6181ef1932d35b60d5a34bc318376cd2940069
Author: mekkyz <mos.mekky@gmail.com>
Date:   Fri Nov 17 18:54:15 2023 +0000

    Fix: eslint

commit 563696e1e0a6f4753eb0d13ef1ff2e052abcd15b
Author: mekkyz <mos.mekky@gmail.com>
Date:   Fri Nov 17 17:27:30 2023 +0000

    Fix: eslint

commit d86a7de9c7cdb892820476e328831f3898a98a2c
Author: mekkyz <mos.mekky@gmail.com>
Date:   Thu Nov 16 16:28:01 2023 +0000

    Fix: adapting two tests and deleting obsolete test

commit 03a2ef4adb78e896d337b2cb3228e237bb890701
Author: mekkyz <mos.mekky@gmail.com>
Date:   Thu Nov 16 16:16:28 2023 +0000

    Refactor: wellplate to use the new attachment list

commit 571e6d5694b248262f6b1d7b03784f2511bdb1ee
Author: mekkyz <mos.mekky@gmail.com>
Date:   Thu Nov 16 11:15:16 2023 +0000

    Fix: eslint

commit 84719d99fbb8dfb19608cb0a2abb851c6d798d44
Author: mekkyz <mos.mekky@gmail.com>
Date:   Thu Nov 16 11:13:59 2023 +0000

    Style: adjusting time format

commit 40cf029f545263e39f5386e119c07836d0ac6ab4
Author: mekkyz <mos.mekky@gmail.com>
Date:   Wed Nov 15 22:51:14 2023 +0000

    Enhancing UI

commit 70bdf22a2cb62ab295986bd0d0986dfbdb228767
Author: mekkyz <mos.mekky@gmail.com>
Date:   Wed Nov 15 22:09:29 2023 +0000

    Feat: adding option to sort by upload date

commit 9a22083145c48a0ca87f42e28959732d7f3ac0ce
Author: mekkyz <mos.mekky@gmail.com>
Date:   Wed Nov 15 22:03:38 2023 +0000

    Fix: correct file sizes with correct units

commit 99c7201448465c18aa679b7587765631780b1000
Author: mekkyz <mos.mekky@gmail.com>
Date:   Wed Nov 15 21:37:07 2023 +0000

    Style: eslint fixes and css enhancements

commit 844cfc027ba561d05b0df2e04836fb7f3ee2e268
Author: mekkyz <mos.mekky@gmail.com>
Date:   Wed Nov 15 20:18:11 2023 +0000

    Refactor: introducing AttachmentList.js

commit 437635b6fcf3c745a96bdaff174ac735d7d3d7fb
Author: mekkyz <mos.mekky@gmail.com>
Date:   Wed Nov 15 20:17:12 2023 +0000

    Fix: adjusting to the new file name

commit 351bb336348274bb6b11f8b096cceba2158fc150
Author: mekkyz <mos.mekky@gmail.com>
Date:   Wed Nov 15 19:58:20 2023 +0000

    Style: unifying edited image warning text

commit 374772c4215135559a2f7d5073a8a14390903079
Author: mekkyz <mos.mekky@gmail.com>
Date:   Wed Nov 15 15:07:05 2023 +0000

    Style: remove redundant name field

commit c50c534b94fd9987ef6469a0b7e9c9e8d7d3437d
Author: mekkyz <mos.mekky@gmail.com>
Date:   Wed Nov 15 15:06:34 2023 +0000

    Fix: ensure consistent title name editing

commit bf61de7cd9e4194661e4efa5390894a3685e0689
Author: mekkyz <mos.mekky@gmail.com>
Date:   Wed Nov 15 10:33:44 2023 +0000

    Fix: eslint

commit 0bc248ed64de332b89ec8bae967c98a5142b6ff6
Author: mekkyz <mos.mekky@gmail.com>
Date:   Wed Nov 15 10:16:20 2023 +0000

    Style: converting inline styles to scss

commit 4da8aef4641169296c7f8246e480849eea6a7903
Author: mekkyz <mos.mekky@gmail.com>
Date:   Wed Nov 15 09:18:02 2023 +0000

    Fix: added on "date"

commit 613b94fd0cdd780f508a10d2190884cd096456be
Author: mekkyz <mos.mekky@gmail.com>
Date:   Wed Nov 15 08:59:51 2023 +0000

    UI changes and minor eslint fixes

commit 5494068f465883e68c54b678a6c100a463623efc
Author: mekkyz <mos.mekky@gmail.com>
Date:   Thu Nov 9 15:31:15 2023 +0000

    Fix: dataset modal discarding logic

commit 94d708b8f2b608297a9e8fadef8cd91305c41050
Author: mekkyz <mos.mekky@gmail.com>
Date:   Thu Nov 9 11:34:45 2023 +0000

    Style: cleaner code and linking to new css classes

commit 8a69e5bc63ba563d303ccecf0a78089145bcc0e9
Author: mekkyz <mos.mekky@gmail.com>
Date:   Thu Nov 9 11:34:06 2023 +0000

    Fix: enhance UI and linking to new css classes

commit 3c84770036ee4a8a8eb85c07353c55ec6790b863
Author: mekkyz <mos.mekky@gmail.com>
Date:   Thu Nov 9 11:33:04 2023 +0000

    Fix: better styling (Annotation & Attachments)

commit 559d5c40016d0c4da02482034f1126075e2193f9
Author: mekkyz <mos.mekky@gmail.com>
Date:   Wed Nov 8 11:07:53 2023 +0000

    Fix: ignore `.peak` when grouping

commit ad26b9c505c27c1db85c9c1f79b3a42519e8f9ab
Author: mekkyz <mos.mekky@gmail.com>
Date:   Mon Nov 6 14:09:51 2023 +0000

    Feat: introducing attachment grouping

commit 28d79f02fc8e1e6853cf8a84a16da429a92932a3
Author: mekkyz <mos.mekky@gmail.com>
Date:   Fri Nov 3 15:41:51 2023 +0000

    Fix: test error

commit e0b56fd0a8a0da3c26442b42d789862142a2ce8f
Author: mekkyz <mos.mekky@gmail.com>
Date:   Fri Nov 3 15:29:39 2023 +0000

    fix: discard and keep changes

commit 6c3ef9c5d0deb1a98d741a5192ea500e4d013fbc
Author: mekkyz <mos.mekky@gmail.com>
Date:   Fri Nov 3 06:56:54 2023 +0000

    Feature: Dataset Modal Redesign

commit 918d12944bd40526484e9caa8f0acbb62607a831
Author: mekkyz <mos.mekky@gmail.com>
Date:   Tue Oct 31 14:21:14 2023 +0000

    Fix: eslint errors

commit 764fbc1f1d3cf3471860bef9fae33dcb41129cf9
Author: mekkyz <mos.mekky@gmail.com>
Date:   Mon Oct 30 05:25:34 2023 +0000

    UI: enhancing attachment list

commit b914b9a070b7d799d9f4beffe5cbc627b4b4b459
Author: mekkyz <mos.mekky@gmail.com>
Date:   Mon Oct 30 05:24:53 2023 +0000

    Style: enabling style prop on component

commit b8cde5288c6829bce1f3accccf6d0f6dd8b8b1b1
Author: TasnimMehzabin <TasnimMehzabin@users.noreply.github.com>
Date:   Thu Dec 7 08:46:27 2023 +0100

    test: fix test with deviceBox sorting in inbox

    Co-authored-by: Tasnim Mehzabin <tasnim.mehzabin@live.com>

    Refs: #1657 , #1446
---
 app/assets/stylesheets/attachment-list.scss   | 137 ++++
 app/assets/stylesheets/format-container.scss  |  59 +-
 app/assets/stylesheets/research-plan.scss     |  33 +-
 .../ImageAnnotationEditButton.js              |  96 +--
 .../researchPlans/ImageAnnotationModalSVG.js  |  30 +-
 .../researchPlans/ResearchPlanDetails.js      | 130 ++--
 .../researchPlans/SaveEditedImageWarning.js   |  28 +
 .../researchPlans/SaveResearchPlanWarning.js  |  33 -
 .../ResearchPlanDetailsAttachments.js         | 521 +++++--------
 .../ResearchPlanDetailsFieldImage.js          |   8 +-
 .../wellplatesTab/EmbeddedWellplate.js        |  73 +-
 .../EmbeddedResearchPlanDetails.js            | 235 +++---
 .../details/wellplates/WellplateDetails.js    | 136 ++--
 .../WellplateDetailsAttachments.js            | 620 ++++++++-------
 .../apps/mydb/elements/list/AttachmentList.js | 227 ++++++
 .../components/common/HyperLinksSection.js    | 107 ++-
 app/packs/src/components/common/ImageModal.js | 147 ++--
 .../container/AttachmentDropzone.js           |  72 +-
 .../container/ContainerComponent.js           |  62 +-
 .../components/container/ContainerDataset.js  | 566 --------------
 .../container/ContainerDatasetField.js        | 163 ++--
 .../container/ContainerDatasetModal.js        | 179 ++++-
 .../container/ContainerDatasetModalContent.js | 719 ++++++++++++++++++
 .../components/container/ContainerDatasets.js | 168 ++--
 app/packs/src/fetchers/BaseFetcher.js         |  39 +-
 app/packs/src/fetchers/ReactionsFetcher.js    |  38 +-
 .../src/fetchers/ResearchPlansFetcher.js      |  31 +-
 app/packs/src/fetchers/SamplesFetcher.js      |  69 +-
 app/packs/src/fetchers/WellplatesFetcher.js   |  22 +-
 app/packs/src/models/Wellplate.js             |  42 +-
 spec/api/chemotion/attachment_api_spec.rb     |   6 +-
 spec/api/chemotion/sample_api_spec.rb         |   6 +-
 .../ImageAnnotationEditButton.spec.js         |  16 +-
 33 files changed, 2847 insertions(+), 1971 deletions(-)
 create mode 100644 app/assets/stylesheets/attachment-list.scss
 create mode 100644 app/packs/src/apps/mydb/elements/details/researchPlans/SaveEditedImageWarning.js
 delete mode 100644 app/packs/src/apps/mydb/elements/details/researchPlans/SaveResearchPlanWarning.js
 create mode 100644 app/packs/src/apps/mydb/elements/list/AttachmentList.js
 delete mode 100644 app/packs/src/components/container/ContainerDataset.js
 create mode 100644 app/packs/src/components/container/ContainerDatasetModalContent.js

diff --git a/app/assets/stylesheets/attachment-list.scss b/app/assets/stylesheets/attachment-list.scss
new file mode 100644
index 0000000000..6adf6773c9
--- /dev/null
+++ b/app/assets/stylesheets/attachment-list.scss
@@ -0,0 +1,137 @@
+.attachment-dropzone {
+  width: 100%;
+  padding: 20px;
+  border: 4px dashed #cccccc;
+  text-align: center;
+  margin-bottom: 20px;
+  background-color: #ffffff;
+  border-radius: 10px;
+  box-shadow: 0px 2px 4px rgba(0,0,0,0.1);
+  transition: all 0.3s ease;
+}
+
+.attachment-dropzone:hover {
+  border-color: #a0a0a0;
+  box-shadow: 0px 4px 8px rgba(0,0,0,0.15);
+}
+
+.sorting-row-style {
+  padding: 5px;
+  border-radius: 5px;
+  border: 1px solid #ccc;
+  height: 35px;
+}
+
+.sort-icon-style {
+  margin-left: 5px;
+  cursor: auto;
+  font-size: 20px !important;
+  color: #000;
+  border-radius: 50%;
+  padding: 5px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background-color 0.3s;
+  background: none !important;
+  border: none !important;
+  outline: inherit !important;
+}
+
+.sort-icon-style:focus {
+  box-shadow: none !important;
+}
+
+.sort-icon-style:hover {
+  color: #797979 !important;
+  transform: scale(1.1);
+  transition: color 0.3s, transform 0.3s
+}
+
+.attachment-row {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 5px;
+  padding: 5px;
+  border-radius: 5px;
+  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
+  transition: box-shadow 0.3s ease, transform 0.2s ease-out;
+  transform-origin: center;
+  position: relative;
+}
+
+.attachment-row:hover {
+  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
+}
+
+.attachment-row-image {
+  flex: 0.1;
+  margin-left: 5px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.attachment-row-text {
+  flex: 0.5;
+  margin-left: 20px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: #333;
+  font-size: 16px;
+  font-weight: bold;
+}
+
+.attachment-row-subtext {
+  font-size: 12px;
+  color: #777;
+}
+
+.attachment-row-size {
+  flex: 0.2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #777;
+  margin-left: 10px;
+}
+
+.attachment-row-actions {
+  flex: 0.4;
+  display: flex;
+  margin-right: 5px;
+  justify-content: flex-end;
+}
+
+.attachment-image-modal {
+  width: 50px;
+  height: 50px;
+  border-radius: 5px;
+  object-fit: cover;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
+}
+
+.attachment-button-size {
+  width: 30px !important;
+  height: 30px !important;
+}
+
+.attachment-gray-button {
+  background-color: #c0c0c0 !important;
+  border-color: #c0c0c0 !important;
+}
+
+.attachment-main-container {
+  padding: 20px;
+  background-color: #ffffff;
+  border-radius: 5px;
+}
+
+.no-attachments-text {
+  text-align: center;
+  font-size: 16px;
+  color: #888;
+}
diff --git a/app/assets/stylesheets/format-container.scss b/app/assets/stylesheets/format-container.scss
index ad1ae76e2b..f778e6739c 100644
--- a/app/assets/stylesheets/format-container.scss
+++ b/app/assets/stylesheets/format-container.scss
@@ -7,32 +7,59 @@
   max-height: calc(100vh - 250px);
 }
 
-.attachment-dataset-modal {
+.attachment-annotation-modal {
   height: 95%;
   top: 52% !important;
   margin: unset !important;
   width: calc(80vw) !important;
   .modal-content {
     height: 95%;
-    .modal-header .modal-title .btn-toolbar {
-      float: right;
+    .modal-title{
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      width: 100%;
     }
     .modal-body {
       height: 90%;
       overflow: auto;
-      .row {
-        height: 100%;
-        .col-base .desc {
-          min-height: 200px;
-        }
-        .col-full {
-          // height: 100%;
-          .list {
-            overflow: auto;
-            max-height: calc(100% - 70px) !important;
-          }
-        }
-      }
+      max-height: calc(100% - 130px) !important;
     }
   }
 }
+
+.attachment-modal {
+  top: 55% !important;
+  height: 90%;
+  margin: unset !important;
+  width: 50vw !important;
+  .modal-content {
+    height: 90%;
+    .modal-title{
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      width: 100%;
+    }
+    .modal-body {
+      height: 90%;
+      overflow: auto;
+      max-height: calc(100% - 170px) !important;
+    }
+  }
+}
+
+.attachment-name-input-div {
+  display: flex;
+  flex-grow: 1;
+  align-items: center;
+}
+
+.attachment-name-input {
+  font-weight: bold;
+  color: #495057;
+  width: 100%;
+  border: none;
+  border-bottom: 1px solid #ccc;
+  padding: 2px 0;
+}
diff --git a/app/assets/stylesheets/research-plan.scss b/app/assets/stylesheets/research-plan.scss
index 481fb1fbb6..bcfbc7b71c 100644
--- a/app/assets/stylesheets/research-plan.scss
+++ b/app/assets/stylesheets/research-plan.scss
@@ -164,20 +164,33 @@
     }
 }
 
-.research-plan-attachments-annotation-download{   
-    button{ 
+.research-plan-attachments-annotation-download{
+    button{
         margin-right: 10px;
-    }     
-} 
+    }
+}
 
 .imageEditedWarning{
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 1000;
+    white-space: nowrap;
+
     div{
-        background-color: rgba(252, 252, 138, 0.952);
-        border-color: #d0d0d0;
-        color: rgba(102, 102, 60, 0.95);
-        margin-top: 3px;
-    } 
-} 
+        background-color: #ffcc00;
+        border: 1px solid #d0d0d0;
+        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+        color: #333;
+        padding: 10px;
+        margin: 0;
+        border-radius: 4px;
+        transition: all 0.3s ease;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+}
 
 .research-plan-table-grid.grid-with-collapsed-rows {
     .ag-body-viewport {
diff --git a/app/packs/src/apps/mydb/elements/details/researchPlans/ImageAnnotationEditButton.js b/app/packs/src/apps/mydb/elements/details/researchPlans/ImageAnnotationEditButton.js
index 59d6b990af..0c079a21fb 100644
--- a/app/packs/src/apps/mydb/elements/details/researchPlans/ImageAnnotationEditButton.js
+++ b/app/packs/src/apps/mydb/elements/details/researchPlans/ImageAnnotationEditButton.js
@@ -1,63 +1,36 @@
-/* eslint-disable react/prefer-stateless-function */
-import React, { Component } from "react";
-import PropTypes from "prop-types";
-import { Button, OverlayTrigger, Tooltip } from "react-bootstrap";
+/* eslint-disable react/destructuring-assignment */
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Button, OverlayTrigger, Tooltip } from 'react-bootstrap';
 import Attachment from 'src/models/Attachment';
 
 export default class ImageAnnotationEditButton extends Component {
-  allowedFileTypes = ['png', 'jpg', 'bmp', 'tif', 'svg', 'jpeg', 'tiff']
+  allowedFileTypes = ['png', 'jpg', 'bmp', 'tif', 'svg', 'jpeg', 'tiff'];
 
-  constructor(props) {
-    super(props);
-  }
-
-  renderActiveAnnotationButton() {
+  renderButton(isActive, tooltipText) {
     return (
       <OverlayTrigger
         placement="top"
-        overlay={<Tooltip id="annotate_tooltip">Annotate image</Tooltip>}
+        overlay={<Tooltip id="annotate_tooltip">{tooltipText}</Tooltip>}
       >
-        <Button
-          bsSize="xsmall"
-          bsStyle="warning"
-          className={
-            this.props.horizontalAlignment ? this.props.horizontalAlignment : ""
-          }
-          onClick={() => {
-            this.props.parent.setState({
-              imageEditModalShown: true,
-              choosenAttachment: this.props.attachment,
-              imageName: this.props.attachment.filename,
-            });
-          }}
-        >
-          <i className="fa fa-pencil" aria-hidden="true" />
-        </Button>
-      </OverlayTrigger>
-    );
-  }
-
-  renderInactiveAnnotationButton(attachment) {   
-    return (
-      <OverlayTrigger
-        overlay={
-          <Tooltip id="annotate_tooltip">
-            Please save the research plan to annotate the image
-          </Tooltip>
-        }
-      >
-        <span
-          className={
-            this.props.horizontalAlignment ? this.props.horizontalAlignment : ""
-          }
-        >
+        <span>
           <Button
-            disabled
-            style={{ pointerEvents: "none" }}
-            bsSize="xsmall"
+            bsSize="xs"
             bsStyle="warning"
+            style={this.props.style}
+            className={this.props.className}
+            onClick={() => {
+              if (isActive) {
+                this.props.parent.setState({
+                  imageEditModalShown: true,
+                  chosenAttachment: this.props.attachment,
+                  imageName: this.props.attachment.filename,
+                });
+              }
+            }}
+            disabled={!isActive}
           >
-            <i className="fa fa-pencil" aria-hidden="true" />
+            <i className="fa fa-pencil-square-o" aria-hidden="true" />
           </Button>
         </span>
       </OverlayTrigger>
@@ -65,22 +38,31 @@ export default class ImageAnnotationEditButton extends Component {
   }
 
   render() {
-    if (!this.props.attachment||!this.props.attachment.filename) {
+    if (!this.props.attachment || !this.props.attachment.filename) {
       return null;
     }
 
     const extension = this.props.attachment.filename.split('.').pop();
-    if (!this.allowedFileTypes.includes(extension)) {
-      return null;
-    }
+    const isAllowedFileType = this.allowedFileTypes.includes(extension);
+    const isActive = isAllowedFileType && !this.props.attachment.isNew;
+
+    const tooltipText = isActive
+      ? 'Annotate image'
+      : 'Cannot annotate - invalid file type or the image is new';
 
-    return this.props.attachment.isNew
-      ? this.renderInactiveAnnotationButton()
-      : this.renderActiveAnnotationButton();
+    return this.renderButton(isActive, tooltipText);
   }
 }
+
 ImageAnnotationEditButton.propTypes = {
   attachment: PropTypes.instanceOf(Attachment),
   parent: PropTypes.object.isRequired,
-  horizontalAlignment: PropTypes.string
+  style: PropTypes.object,
+  className: PropTypes.string
+};
+
+ImageAnnotationEditButton.defaultProps = {
+  attachment: null,
+  style: {},
+  className: ''
 };
diff --git a/app/packs/src/apps/mydb/elements/details/researchPlans/ImageAnnotationModalSVG.js b/app/packs/src/apps/mydb/elements/details/researchPlans/ImageAnnotationModalSVG.js
index 7077582399..80f193e442 100644
--- a/app/packs/src/apps/mydb/elements/details/researchPlans/ImageAnnotationModalSVG.js
+++ b/app/packs/src/apps/mydb/elements/details/researchPlans/ImageAnnotationModalSVG.js
@@ -1,3 +1,4 @@
+/* eslint-disable react/destructuring-assignment */
 /* eslint-disable react/prefer-stateless-function */
 import React, { Component } from 'react';
 import { Modal, Button } from 'react-bootstrap';
@@ -16,13 +17,13 @@ export default class ImageAnnotationModalSVG extends Component {
         backdrop="static"
         bsSize="large"
         show={this.props.isShow}
-        dialogClassName="attachment-dataset-modal"
+        dialogClassName="attachment-annotation-modal"
       >
 
         <Modal.Header>
           <Modal.Title>Image annotation</Modal.Title>
         </Modal.Header>
-        <Modal.Body>
+        <Modal.Body style={{ overflow: 'hidden' }}>
           <iframe
             title="SVGEditor"
             src="/svgedit/index.html"
@@ -58,7 +59,13 @@ export default class ImageAnnotationModalSVG extends Component {
                 paletteShadowDOM.querySelectorAll('#js-se-palette > div:nth-child(n+19)')
                   .forEach((elem) => { elem.setAttribute('style', 'display: none'); });
                 paletteShadowDOM.querySelector('#js-se-palette')?.setAttribute('style', 'width: auto');
-                paletteShadowDOM.querySelector('#palette_holder')?.setAttribute('style', 'display: flex; width: auto; flex-direction: row; margin-right: 12px;');
+                const paletteHolder = paletteShadowDOM.querySelector('#palette_holder');
+                if (paletteHolder) {
+                  paletteHolder.setAttribute(
+                    'style',
+                    'display: flex; width: auto; flex-direction: row; margin-right: 12px;'
+                  );
+                }
               }
 
               // hide some panels
@@ -153,7 +160,12 @@ export default class ImageAnnotationModalSVG extends Component {
               fetch(`/api/v1/attachments/${attachment.id}/annotation`).finally(() => {
                 // make sure the iframe is visible after the fetch is done
                 // no matter if it fails or not...
-                const newStyle = this.iframe?.getAttribute('style')?.replace('visibility: hidden', 'visibility: visible');
+                const iframeStyle = this.iframe?.getAttribute('style');
+                const visibleStyle = iframeStyle?.replace(
+                  'visibility: hidden',
+                  'visibility: visible'
+                );
+                const newStyle = visibleStyle;
                 this.iframe?.setAttribute('style', newStyle);
               }).then((res) => res.text())
                 .then((text) => {
@@ -174,7 +186,10 @@ export default class ImageAnnotationModalSVG extends Component {
                         return '';
                       }
                     };
-                    const errorSVG = '<svg xmlns="http://www.w3.org/2000/svg" width="1920" height="1080"><text fill="#000000" font-size="12" stroke="#FF0000" stroke-width="0" text-anchor="middle" transform="matrix(7.15604 0 0 7.15604 -3493.72 -3162.82)" x="622.37" xml:space="preserve" y="525.48">Loading error :(</text></svg>';
+                    const errorSVG = '<svg xmlns="http://www.w3.org/2000/svg" width="1920"'
+                    + ' height="1080"><text fill="#000000" font-size="12" stroke="#FF0000" stroke-width="0"'
+                    + ' text-anchor="middle" transform="matrix(7.15604 0 0 7.15604 -3493.72 -3162.82)"'
+                    + ' x="622.37" xml:space="preserve" y="525.48">Loading error :(</text></svg>';
                     const svgString = decodeURIComponent(safeParseJson(text)) || errorSVG;
                     svgEditor.svgCanvas.setSvgString(svgString);
                   }
@@ -185,9 +200,8 @@ export default class ImageAnnotationModalSVG extends Component {
             }}
           />
         </Modal.Body>
-        <Modal.Footer style={{ textAlign: 'left' }}>
+        <Modal.Footer style={{ textAlign: 'right' }}>
           <Button
-            bsStyle="primary"
             onClick={() => {
               this.setState({ canSave: false });
               const { handleOnClose } = this.props;
@@ -197,7 +211,7 @@ export default class ImageAnnotationModalSVG extends Component {
             Discard changes and close
           </Button>
           <Button
-            bsStyle="warning"
+            bsStyle="primary"
             disabled={!this.state.canSave}
             onClick={() => {
               this.setState({ canSave: false });
diff --git a/app/packs/src/apps/mydb/elements/details/researchPlans/ResearchPlanDetails.js b/app/packs/src/apps/mydb/elements/details/researchPlans/ResearchPlanDetails.js
index 8cc5904988..0b4f7ab2ef 100644
--- a/app/packs/src/apps/mydb/elements/details/researchPlans/ResearchPlanDetails.js
+++ b/app/packs/src/apps/mydb/elements/details/researchPlans/ResearchPlanDetails.js
@@ -1,7 +1,9 @@
+/* eslint-disable react/destructuring-assignment */
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import {
-  Panel, ListGroup, ListGroupItem, ButtonToolbar, Button, Tooltip, OverlayTrigger, Tabs, Tab, Dropdown, MenuItem, ButtonGroup
+  Panel, ListGroup, ListGroupItem, ButtonToolbar, Button,
+  Tooltip, OverlayTrigger, Tabs, Tab, Dropdown, MenuItem, ButtonGroup
 } from 'react-bootstrap';
 import { unionBy, findIndex } from 'lodash';
 import Immutable from 'immutable';
@@ -18,10 +20,14 @@ import Utils from 'src/utilities/Functions';
 import LoadingActions from 'src/stores/alt/actions/LoadingActions';
 import ConfirmClose from 'src/components/common/ConfirmClose';
 import ResearchPlan from 'src/models/ResearchPlan';
-import ResearchPlanDetailsAttachments from 'src/apps/mydb/elements/details/researchPlans/attachmentsTab/ResearchPlanDetailsAttachments';
-import ResearchPlanDetailsBody from 'src/apps/mydb/elements/details/researchPlans/researchPlanTab/ResearchPlanDetailsBody';
-import ResearchPlanDetailsName from 'src/apps/mydb/elements/details/researchPlans/researchPlanTab/ResearchPlanDetailsName';
-import ResearchPlanDetailsContainers from 'src/apps/mydb/elements/details/researchPlans/analysesTab/ResearchPlanDetailsContainers';
+import ResearchPlanDetailsAttachments from
+  'src/apps/mydb/elements/details/researchPlans/attachmentsTab/ResearchPlanDetailsAttachments';
+import ResearchPlanDetailsBody from
+  'src/apps/mydb/elements/details/researchPlans/researchPlanTab/ResearchPlanDetailsBody';
+import ResearchPlanDetailsName from
+  'src/apps/mydb/elements/details/researchPlans/researchPlanTab/ResearchPlanDetailsName';
+import ResearchPlanDetailsContainers from
+  'src/apps/mydb/elements/details/researchPlans/analysesTab/ResearchPlanDetailsContainers';
 import ElementDetailSortTab from 'src/apps/mydb/elements/details/ElementDetailSortTab';
 import { addSegmentTabs } from 'src/components/generic/SegmentDetails';
 import PrivateNoteElement from 'src/apps/mydb/elements/details/PrivateNoteElement';
@@ -64,17 +70,6 @@ export default class ResearchPlanDetails extends Component {
     this.setState({ researchPlan });
   }
 
-  onTabPositionChanged(visible) {
-    this.setState({ visible });
-  }
-
-  toggleFullScreen() {
-    this.props.toggleFullScreen();
-
-    // toogle update prop to notify react data grid for view change
-    this.setState({ update: !this.state.update });
-  }
-
   handleResearchPlanChange(el) {
     const researchPlan = el;
     researchPlan.changed = true;
@@ -159,22 +154,25 @@ export default class ResearchPlanDetails extends Component {
     this.setState({ researchPlan });
   }
 
-  handleBodyDelete(id, attachments) {
+  handleBodyDelete(id) {
     const { researchPlan } = this.state;
     researchPlan.removeFieldFromBody(id);
     this.setState({ researchPlan });
   }
 
   // handle attachment actions
-
   handleAttachmentDrop(files) {
-    const { researchPlan } = this.state;
-    researchPlan.changed = true;
-    files.forEach((file) => {
-      const attachment = Attachment.fromFile(file);
-      researchPlan.attachments.push(attachment);
+    this.setState((prevState) => {
+      const newAttachments = files.map((file) => Attachment.fromFile(file));
+      const updatedAttachments = prevState.researchPlan.attachments.concat(newAttachments);
+      const updatedResearchPlan = new ResearchPlan({
+        ...prevState.researchPlan,
+        attachments: updatedAttachments,
+        changed: true
+      });
+
+      return { researchPlan: updatedResearchPlan };
     });
-    this.setState({ researchPlan });
   }
 
   handleAttachmentDelete(attachment) {
@@ -217,6 +215,51 @@ export default class ResearchPlanDetails extends Component {
     ResearchPlansFetcher.exportTable(researchPlan, field);
   }
 
+  handleCopyToMetadata(id, fieldName) {
+    const { researchPlan } = this.state;
+    const researchPlanMetadata = researchPlan.research_plan_metadata;
+    const args = { research_plan_id: researchPlanMetadata.research_plan_id };
+    const index = researchPlan.body.findIndex((field) => field.id === id);
+    const value = researchPlan.body[index]?.value?.ops[0]?.insert?.trim() || '';
+    if (fieldName === 'name') {
+      researchPlanMetadata.title = researchPlan.name;
+      args.title = researchPlan.name.trim();
+    } else if (fieldName === 'subject') {
+      researchPlanMetadata.subject = value;
+      args.subject = value;
+    } else {
+      const type = researchPlan.body[index]?.title?.trim() || '';
+      const newItem = this.newItemByType(fieldName, value, type);
+
+      const currentCollection = researchPlanMetadata[fieldName]
+        ? researchPlanMetadata[fieldName] : [];
+      const newCollection = currentCollection.concat(newItem);
+      researchPlanMetadata[fieldName] = newCollection;
+      args[`${fieldName}`] = researchPlanMetadata[fieldName];
+    }
+
+    ResearchPlansFetcher.postResearchPlanMetadata(args).then((result) => {
+      if (result.error) {
+        alert(result.error);
+      }
+    });
+  }
+
+  handleAttachmentImportComplete() {
+    this.setState({ activeTab: 0 });
+  }
+
+  onTabPositionChanged(visible) {
+    this.setState({ visible });
+  }
+
+  toggleFullScreen() {
+    this.props.toggleFullScreen();
+
+    // toogle update prop to notify react data grid for view change
+    this.setState({ update: !this.state.update });
+  }
+
   dropWellplate(wellplate) {
     const { researchPlan } = this.state;
     researchPlan.changed = true;
@@ -270,39 +313,6 @@ export default class ResearchPlanDetails extends Component {
     }
   }
 
-  handleCopyToMetadata(id, fieldName) {
-    const { researchPlan } = this.state;
-    const researchPlanMetadata = researchPlan.research_plan_metadata;
-    const args = { research_plan_id: researchPlanMetadata.research_plan_id };
-    const index = researchPlan.body.findIndex((field) => field.id === id);
-    const value = researchPlan.body[index]?.value?.ops[0]?.insert?.trim() || '';
-    if (fieldName === 'name') {
-      researchPlanMetadata.title = researchPlan.name;
-      args.title = researchPlan.name.trim();
-    } else if (fieldName === 'subject') {
-      researchPlanMetadata.subject = value;
-      args.subject = value;
-    } else {
-      const type = researchPlan.body[index]?.title?.trim() || '';
-      const newItem = this.newItemByType(fieldName, value, type);
-
-      const currentCollection = researchPlanMetadata[fieldName]
-        ? researchPlanMetadata[fieldName] : [];
-      const newCollection = currentCollection.concat(newItem);
-      researchPlanMetadata[fieldName] = newCollection;
-      args[`${fieldName}`] = researchPlanMetadata[fieldName];
-    }
-
-    ResearchPlansFetcher.postResearchPlanMetadata(args).then((result) => {
-      if (result.error) {
-        alert(result.error);
-      }
-    });
-  }
-
-  handleAttachmentImportComplete() {
-    this.setState({ activeTab: 0 });
-  }
   // render functions
 
   renderExportButton(disabled) {
@@ -483,11 +493,9 @@ export default class ResearchPlanDetails extends Component {
         <OverlayTrigger placement="bottom" overlay={<Tooltip id="rpDates">{titleTooltip}</Tooltip>}>
           <span>
             <i className="fa fa-file-text-o" />
-            &nbsp;
-            {' '}
+            &nbsp;&nbsp;
             <span>{researchPlan.name}</span>
-            {' '}
-            &nbsp;
+            &nbsp;&nbsp;
           </span>
         </OverlayTrigger>
         <ElementCollectionLabels element={researchPlan} placement="right" />
diff --git a/app/packs/src/apps/mydb/elements/details/researchPlans/SaveEditedImageWarning.js b/app/packs/src/apps/mydb/elements/details/researchPlans/SaveEditedImageWarning.js
new file mode 100644
index 0000000000..240d640cad
--- /dev/null
+++ b/app/packs/src/apps/mydb/elements/details/researchPlans/SaveEditedImageWarning.js
@@ -0,0 +1,28 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Alert } from 'react-bootstrap';
+
+function SaveEditedImageWarning({ visible, warningStyle, warningMessage }) {
+  if (!visible) {
+    return null;
+  }
+
+  return (
+    <div className={warningStyle}>
+      <Alert>{warningMessage}</Alert>
+    </div>
+  );
+}
+
+SaveEditedImageWarning.propTypes = {
+  visible: PropTypes.bool.isRequired,
+  warningStyle: PropTypes.string,
+  warningMessage: PropTypes.string
+};
+
+SaveEditedImageWarning.defaultProps = {
+  warningStyle: 'imageEditedWarning',
+  warningMessage: 'Image was edited. Please save Element to apply changes.'
+};
+
+export default SaveEditedImageWarning;
diff --git a/app/packs/src/apps/mydb/elements/details/researchPlans/SaveResearchPlanWarning.js b/app/packs/src/apps/mydb/elements/details/researchPlans/SaveResearchPlanWarning.js
deleted file mode 100644
index 950cd4cfcf..0000000000
--- a/app/packs/src/apps/mydb/elements/details/researchPlans/SaveResearchPlanWarning.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from "prop-types";
-import {Alert} from 'react-bootstrap';
-
-export default class SaveResearchPlanWarning extends Component {
-
-    constructor(props) {
-        super(props);
-    }
-
-
-    render(){
-        if(!this.props.visible) {return null;}        
-        
-        return (
-          <div className={this.props.warningStyle}>
-            <Alert>{this.props.warningMessage}</Alert>
-          </div>
-        );
-    }
-}
-
-SaveResearchPlanWarning.propTypes = {
-    visible: PropTypes.bool.isRequired,
-    warningStyle: PropTypes.string,
-    warningMessage: PropTypes.string
-};
-
-SaveResearchPlanWarning.defaultProps={
-    warningStyle : 'imageEditedWarning',
-    warningMessage: 'Image was edited. Please save Researchplan to apply changes.'
-
-}
\ No newline at end of file
diff --git a/app/packs/src/apps/mydb/elements/details/researchPlans/attachmentsTab/ResearchPlanDetailsAttachments.js b/app/packs/src/apps/mydb/elements/details/researchPlans/attachmentsTab/ResearchPlanDetailsAttachments.js
index 037e0642d3..03804f1436 100644
--- a/app/packs/src/apps/mydb/elements/details/researchPlans/attachmentsTab/ResearchPlanDetailsAttachments.js
+++ b/app/packs/src/apps/mydb/elements/details/researchPlans/attachmentsTab/ResearchPlanDetailsAttachments.js
@@ -1,74 +1,32 @@
-import Dropzone from 'react-dropzone';
+/* eslint-disable no-param-reassign */
+/* eslint-disable react/destructuring-assignment */
 import EditorFetcher from 'src/fetchers/EditorFetcher';
 import ElementActions from 'src/stores/alt/actions/ElementActions';
 import ImageModal from 'src/components/common/ImageModal';
 import LoadingActions from 'src/stores/alt/actions/LoadingActions';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import SpinnerPencilIcon from 'src/components/common/SpinnerPencilIcon';
 import ImageAnnotationModalSVG from 'src/apps/mydb/elements/details/researchPlans/ImageAnnotationModalSVG';
-import ImageAnnotationEditButton from 'src/apps/mydb/elements/details/researchPlans/ImageAnnotationEditButton';
 import Utils from 'src/utilities/Functions';
-import {
-  Button, ButtonGroup,
-  Col, ControlLabel,
-  FormGroup,
-  Glyphicon,
-  ListGroup, ListGroupItem,
-  Overlay, OverlayTrigger,
-  Row,
-  Tooltip
-} from 'react-bootstrap';
-import { last, findKey, values } from 'lodash';
+import { Button } from 'react-bootstrap';
+import { last, findKey } from 'lodash';
 import AttachmentFetcher from 'src/fetchers/AttachmentFetcher';
 import ImageAttachmentFilter from 'src/utilities/ImageAttachmentFilter';
-import SaveResearchPlanWarning from 'src/apps/mydb/elements/details/researchPlans/SaveResearchPlanWarning';
-
-const editorTooltip = (exts) => (
-  <Tooltip id="editor_tooltip">
-    Available extensions:
-    {' '}
-    {exts}
-  </Tooltip>
-);
-const downloadTooltip = <Tooltip id="download_tooltip">Download original attachment</Tooltip>;
-const downloadAnnotationTooltip = <Tooltip id="download_tooltip">Download annotated attachment</Tooltip>;
+import SaveEditedImageWarning from 'src/apps/mydb/elements/details/researchPlans/SaveEditedImageWarning';
 
-const imageStyle = { position: 'absolute', width: 60, height: 60 };
+import {
+  downloadButton,
+  removeButton,
+  annotateButton,
+  editButton,
+  importButton,
+  customDropzone,
+  sortingAndFilteringUI,
+  formatFileSize,
+  isImageFile
+} from 'src/apps/mydb/elements/list/AttachmentList';
 
 export default class ResearchPlanDetailsAttachments extends Component {
-  static isImageFile(fileName) {
-    const acceptedImageTypes = ['png', 'jpg', 'bmp', 'tif', 'svg', 'jpeg', 'tiff'];
-    const dataType = last(fileName.split('.'));
-    return acceptedImageTypes.includes(dataType);
-  }
-
-  static renderDownloadAnnotatedImageButton(attachment) {
-    if (!ResearchPlanDetailsAttachments.isImageFile(attachment.filename)) {
-      return null;
-    }
-    return (
-      <OverlayTrigger placement="top" overlay={downloadAnnotationTooltip}>
-        <div className="research-plan-attachments-annotation-download">
-          <Button
-            bsSize="xsmall"
-            className="button-right"
-            bsStyle="primary"
-            disabled={attachment.isNew}
-            onClick={() => {
-              Utils.downloadFile({
-                contents: `/api/v1/attachments/${attachment.id}/annotated_image`,
-                name: attachment.filename
-              });
-            }}
-          >
-            <i className="fa fa-download" aria-hidden="true" />
-          </Button>
-        </div>
-      </OverlayTrigger>
-    );
-  }
-
   constructor(props) {
     super(props);
     this.importButtonRefs = [];
@@ -78,9 +36,24 @@ export default class ResearchPlanDetailsAttachments extends Component {
       extension: null,
       imageEditModalShown: false,
       showImportConfirm: [],
+      filteredAttachments: [...props.attachments],
+      filterText: '',
+      sortBy: 'name',
+      sortDirection: 'asc',
     };
     this.editorInitial = this.editorInitial.bind(this);
     this.createAttachmentPreviews = this.createAttachmentPreviews.bind(this);
+
+    this.handleDownloadOriginal = this.handleDownloadOriginal.bind(this);
+    this.handleDownloadAnnotated = this.handleDownloadAnnotated.bind(this);
+    this.handleEdit = this.handleEdit.bind(this);
+    this.onImport = this.onImport.bind(this);
+    this.handleFilterChange = this.handleFilterChange.bind(this);
+    this.handleSortChange = this.handleSortChange.bind(this);
+    this.toggleSortDirection = this.toggleSortDirection.bind(this);
+    this.confirmAttachmentImport = this.confirmAttachmentImport.bind(this);
+    this.showImportConfirm = this.showImportConfirm.bind(this);
+    this.hideImportConfirm = this.hideImportConfirm.bind(this);
   }
 
   componentDidMount() {
@@ -92,10 +65,10 @@ export default class ResearchPlanDetailsAttachments extends Component {
     const { attachments } = this.props;
     if (attachments !== prevProps.attachments) {
       this.createAttachmentPreviews();
+      this.setState({ filteredAttachments: [...attachments] }, this.filterAndSortAttachments);
     }
   }
 
-  /* eslint-disable no-param-reassign */
   handleEdit(attachment) {
     const fileType = last(attachment.filename.split('.'));
     const docType = this.documentType(attachment.filename);
@@ -117,7 +90,6 @@ export default class ResearchPlanDetailsAttachments extends Component {
         }
       });
   }
-  /* eslint-enable no-param-reassign */
 
   onImport(attachment) {
     const { researchPlan, onAttachmentImportComplete } = this.props;
@@ -131,7 +103,68 @@ export default class ResearchPlanDetailsAttachments extends Component {
     LoadingActions.stop();
   }
 
-  /* eslint-disable no-param-reassign */
+  handleFilterChange = (e) => {
+    this.setState({ filterText: e.target.value }, this.filterAndSortAttachments);
+  };
+
+  handleSortChange = (e) => {
+    this.setState({ sortBy: e.target.value }, this.filterAndSortAttachments);
+  };
+
+  toggleSortDirection = () => {
+    this.setState((prevState) => ({
+      sortDirection: prevState.sortDirection === 'asc' ? 'desc' : 'asc'
+    }), this.filterAndSortAttachments);
+  };
+
+  handleDownloadOriginal = (attachment) => {
+    this.props.onDownload(attachment);
+  };
+
+  handleDownloadAnnotated = (attachment) => {
+    const isImage = isImageFile(attachment.filename);
+    if (isImage && !attachment.isNew) {
+      Utils.downloadFile({
+        contents: `/api/v1/attachments/${attachment.id}/annotated_image`,
+        name: attachment.filename
+      });
+    }
+  };
+
+  filterAndSortAttachments() {
+    const { filterText, sortBy } = this.state;
+
+    const filter = new ImageAttachmentFilter();
+    let filteredAttachments = filter.filterAttachmentsWhichAreInBody(
+      this.props.researchPlan.body,
+      this.props.attachments
+    );
+
+    filteredAttachments = filteredAttachments.filter(
+      (attachment) => attachment.filename.toLowerCase().includes(filterText.toLowerCase())
+    );
+
+    filteredAttachments.sort((a, b) => {
+      let comparison = 0;
+      switch (sortBy) {
+        case 'name':
+          comparison = a.filename.localeCompare(b.filename);
+          break;
+        case 'size':
+          comparison = a.filesize - b.filesize;
+          break;
+        case 'date':
+          comparison = new Date(a.created_at) - new Date(b.created_at);
+          break;
+        default:
+          break;
+      }
+      return this.state.sortDirection === 'asc' ? comparison : -comparison;
+    });
+
+    this.setState({ filteredAttachments });
+  }
+
   createAttachmentPreviews() {
     const { attachments } = this.props;
     attachments.map((attachment) => {
@@ -151,7 +184,6 @@ export default class ResearchPlanDetailsAttachments extends Component {
       return attachment;
     });
   }
-  /* eslint-enable no-param-reassign */
 
   documentType(filename) {
     const { extension } = this.state;
@@ -192,34 +224,19 @@ export default class ResearchPlanDetailsAttachments extends Component {
     this.hideImportConfirm(attachment.id);
   }
 
-  renderRemoveAttachmentButton(attachment) {
-    const { onDelete, readOnly } = this.props;
-    return (
-      <Button
-        bsSize="xsmall"
-        bsStyle="danger"
-        className="button-right"
-        onClick={() => onDelete(attachment)}
-        disabled={readOnly}
-      >
-        <i className="fa fa-trash-o" aria-hidden="true" />
-      </Button>
-    );
-  }
-
   renderImageEditModal() {
-    const { choosenAttachment, imageEditModalShown } = this.state;
+    const { chosenAttachment, imageEditModalShown } = this.state;
     const { onEdit } = this.props;
     return (
       <ImageAnnotationModalSVG
-        attachment={choosenAttachment}
+        attachment={chosenAttachment}
         isShow={imageEditModalShown}
         handleSave={
           () => {
             const newAnnotation = document.getElementById('svgEditId').contentWindow.svgEditor.svgCanvas.getSvgString();
-            choosenAttachment.updatedAnnotation = newAnnotation;
+            chosenAttachment.updatedAnnotation = newAnnotation;
             this.setState({ imageEditModalShown: false });
-            onEdit(choosenAttachment);
+            onEdit(chosenAttachment);
           }
         }
         handleOnClose={() => { this.setState({ imageEditModalShown: false }); }}
@@ -227,259 +244,129 @@ export default class ResearchPlanDetailsAttachments extends Component {
     );
   }
 
-  renderAnnotateImageButton(attachment) {
-    return (
-      <ImageAnnotationEditButton
-        parent={this}
-        attachment={attachment}
-        horizontalAlignment="button-right"
-      />
-    );
-  }
-
-  renderListGroupItem(attachment) {
-    const { attachmentEditor, extension } = this.state;
+  render() {
+    const {
+      filteredAttachments, sortDirection, attachmentEditor, extension
+    } = this.state;
     const { onUndoDelete } = this.props;
 
-    const updateTime = new Date(attachment.updated_at);
-    updateTime.setTime(updateTime.getTime() + 15 * 60 * 1000);
-
-    const hasPop = false;
-    const fetchNeeded = false;
-    const fetchId = attachment.id;
-    const isEditing = attachment.aasm_state === 'oo_editing'
-      && new Date().getTime() < updateTime;
-
-    const docType = this.documentType(attachment.filename);
-    const editDisable = !attachmentEditor || isEditing || attachment.is_new || docType === null;
-    const styleEditorBtn = !attachmentEditor || docType === null ? 'none' : '';
-    const isAnnotationUpdated = attachment.updatedAnnotation;
-    if (attachment.is_deleted) {
-      return (
-        <div>
-          <Row>
-            <Col md={1} />
-            <Col md={9}>
-              <strike>{attachment.filename}</strike>
-            </Col>
-            <Col md={2}>
-              <Button
-                bsSize="xsmall"
-                bsStyle="danger"
-                className="button-right"
-                onClick={() => onUndoDelete(attachment)}
-              >
-                <i className="fa fa-undo" aria-hidden="true" />
-              </Button>
-            </Col>
-          </Row>
-        </div>
-      );
-    }
-
     return (
-      <div>
-        <SaveResearchPlanWarning visible={isAnnotationUpdated} />
-        <Row>
-          <Col md={1}>
-            <div className="analysis-header order" style={{ width: '60px', height: '60px' }}>
-              <div className="preview" style={{ width: '60px', height: '60px' }}>
+      <div className="attachment-main-container">
+        {this.renderImageEditModal()}
+        {customDropzone(this.props.onDrop)}
+        {filteredAttachments.length > 0
+        && sortingAndFilteringUI(
+          sortDirection,
+          this.handleSortChange,
+          this.toggleSortDirection,
+          this.handleFilterChange
+        )}
+        {filteredAttachments.length === 0 ? (
+          <div className="no-attachments-text">
+            There are currently no attachments.
+          </div>
+        ) : (
+          filteredAttachments.map((attachment) => (
+            <div className="attachment-row" key={attachment.id}>
+              <div className="attachment-row-image">
                 <ImageModal
-                  imageStyle={imageStyle}
-                  hasPop={hasPop}
+                  imageStyle={{
+                    width: '60px',
+                    height: '60px',
+                    borderRadius: '5px',
+                    objectFit: 'cover',
+                    boxShadow: '0 2px 10px rgba(0, 0, 0, 0.1)',
+                    transition: 'transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out',
+                  }}
+                  hasPop={false}
+                  alt="thumbnail"
                   previewObject={{
                     src: attachment.preview,
                   }}
                   popObject={{
                     title: attachment.filename,
                     src: attachment.preview,
-                    fetchNeeded,
-                    fetchId,
+                    fetchNeeded: false,
+                    fetchId: attachment.id,
                   }}
                 />
               </div>
+              <div className="attachment-row-text" title={attachment.filename}>
+                {attachment.is_deleted ? (
+                  <strike>{attachment.filename}</strike>
+                ) : (
+                  attachment.filename
+                )}
+                <div className="attachment-row-subtext">
+                  Added on:&nbsp;
+                  {attachment.created_at && !Number.isNaN(new Date(attachment.created_at).getTime()) ? (
+                    <>
+                      {new Date(attachment.created_at).toLocaleDateString('en-GB')}
+                      ,
+                      &nbsp;
+                      {new Date(attachment.created_at).toLocaleTimeString(
+                        'en-GB',
+                        { hour: '2-digit', minute: '2-digit', hour12: true }
+                      )}
+                    </>
+                  ) : (
+                    'now!'
+                  )}
+                </div>
+              </div>
+              <div className="attachment-row-size">
+                <span style={{ fontWeight: 'bold' }}>
+                  Size:&nbsp;
+                  <span style={{ fontWeight: 'bold', color: '#444' }}>
+                    {formatFileSize(attachment.filesize)}
+                  </span>
+                </span>
+              </div>
+              <div className="attachment-row-actions" style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
+                {attachment.is_deleted ? (
+                  <Button
+                    bsSize="xs"
+                    bsStyle="danger"
+                    className="attachment-button-size"
+                    onClick={() => onUndoDelete(attachment)}
+                  >
+                    <i className="fa fa-undo" aria-hidden="true" />
+                  </Button>
+                ) : (
+                  <>
+                    {downloadButton(attachment, this.handleDownloadOriginal, this.handleDownloadAnnotated)}
+                    {editButton(
+                      attachment,
+                      extension,
+                      attachmentEditor,
+                      attachment.aasm_state === 'oo_editing' && new Date().getTime()
+                          < (new Date(attachment.updated_at).getTime() + 15 * 60 * 1000),
+                      attachmentEditor ? '' : 'none',
+                      !attachmentEditor || attachment.aasm_state === 'oo_editing'
+                          || attachment.is_new || this.documentType(attachment.filename) === null,
+                      this.handleEdit
+                    )}
+                    {annotateButton(attachment, this)}
+                    {importButton(
+                      attachment,
+                      this.state.showImportConfirm,
+                      this.props.researchPlan.changed,
+                      this.importButtonRefs,
+                      this.showImportConfirm,
+                      this.hideImportConfirm,
+                      this.confirmAttachmentImport
+                    )}
+                    {removeButton(attachment, this.props.onDelete, this.props.readOnly)}
+                  </>
+                )}
+              </div>
+              {attachment.updatedAnnotation && <SaveEditedImageWarning visible />}
             </div>
-          </Col>
-          <Col md={8}>{attachment.filename}</Col>
-          <Col md={3}>
-            {this.renderRemoveAttachmentButton(attachment)}
-            {this.renderDownloadOriginalButton(attachment)}
-            {this.renderEditAttachmentButton(
-              attachment,
-              extension,
-              attachmentEditor,
-              isEditing,
-              styleEditorBtn,
-              styleEditorBtn,
-              editDisable
-            )}
-            {ResearchPlanDetailsAttachments.renderDownloadAnnotatedImageButton(attachment)}
-            {this.renderAnnotateImageButton(attachment)}
-            {this.renderImportAttachmentButton(attachment)}
-          </Col>
-        </Row>
+          ))
+        )}
       </div>
     );
   }
-
-  renderEditAttachmentButton(attachment, extension, attachmentEditor, isEditing, styleEditorBtn, editDisable) {
-    return (
-      <OverlayTrigger placement="left" overlay={editorTooltip(values(extension).join(','))}>
-        <Button
-          style={{ display: styleEditorBtn }}
-          bsSize="xsmall"
-          className="button-right"
-          bsStyle="success"
-          disabled={editDisable}
-          onClick={() => this.handleEdit(attachment)}
-        >
-
-          <SpinnerPencilIcon spinningLock={!attachmentEditor || isEditing} />
-        </Button>
-      </OverlayTrigger>
-
-    );
-  }
-
-  renderDownloadOriginalButton(attachment) {
-    const { onDownload } = this.props;
-    return (
-      <OverlayTrigger placement="top" overlay={downloadTooltip}>
-        <Button
-          bsSize="xsmall"
-          className="button-right"
-          bsStyle="primary"
-          onClick={() => onDownload(attachment)}
-        >
-          <i className="fa fa-download" aria-hidden="true" />
-        </Button>
-      </OverlayTrigger>
-    );
-  }
-
-  renderAttachments() {
-    const { attachments, researchPlan } = this.props;
-    if (attachments && attachments.length > 0) {
-      const filter = new ImageAttachmentFilter();
-      const filteredAttachments = filter.filterAttachmentsWhichAreInBody(
-        researchPlan.body,
-        researchPlan.attachments
-      );
-
-      return (
-        <ListGroup>
-          {filteredAttachments.map((attachment) => (
-            <ListGroupItem key={attachment.id}>
-              {this.renderListGroupItem(attachment)}
-            </ListGroupItem>
-          ))}
-        </ListGroup>
-      );
-    }
-    return (
-      <div>
-        There are currently no attachments.
-        <br />
-      </div>
-    );
-  }
-
-  renderDropzone() {
-    const { onDrop, readOnly } = this.props;
-    return (
-      <Dropzone
-        onDrop={(files) => onDrop(files)}
-        className={`research-plan-dropzone-${readOnly ? 'disable' : 'enable'}`}
-      >
-        <div className="zone">Drop Files, or Click to Select.</div>
-      </Dropzone>
-    );
-  }
-
-  renderImportAttachmentButton(attachment) {
-    const { showImportConfirm } = this.state;
-    const { researchPlan } = this.props;
-    const show = showImportConfirm[attachment.id];
-    // TODO: import disabled when?
-    const importDisabled = researchPlan.changed;
-    const extension = last(attachment.filename.split('.'));
-
-    const importTooltip = importDisabled
-      ? <Tooltip id="import_tooltip">Research Plan must be saved before import</Tooltip>
-      : <Tooltip id="import_tooltip">Import spreadsheet as research plan table</Tooltip>;
-
-    const confirmTooltip = (
-      <Tooltip placement="bottom" className="in" id="tooltip-bottom">
-        Import data from Spreadsheet?
-        <br />
-        <ButtonGroup>
-          <Button
-            bsStyle="success"
-            bsSize="xsmall"
-            onClick={() => this.confirmAttachmentImport(attachment)}
-          >
-            Yes
-          </Button>
-          <Button
-            bsStyle="warning"
-            bsSize="xsmall"
-            onClick={() => this.hideImportConfirm(attachment.id)}
-          >
-            No
-          </Button>
-        </ButtonGroup>
-      </Tooltip>
-    );
-
-    if (extension === 'xlsx') {
-      return (
-        <div>
-          <OverlayTrigger placement="top" overlay={importTooltip}>
-            <div style={{ float: 'right' }}>
-              <Button
-                bsSize="xsmall"
-                bsStyle="success"
-                className="button-right"
-                disabled={importDisabled}
-                ref={(ref) => {
-                  this.importButtonRefs[attachment.id] = ref;
-                }}
-                style={importDisabled ? { pointerEvents: 'none' } : {}}
-                onClick={() => this.showImportConfirm(attachment.id)}
-              >
-                <Glyphicon glyph="import" />
-              </Button>
-            </div>
-          </OverlayTrigger>
-          <Overlay
-            show={show}
-            placement="bottom"
-            rootClose
-            onHide={() => this.hideImportConfirm(attachment.id)}
-            target={this.importButtonRefs[attachment.id]}
-          >
-            {confirmTooltip}
-          </Overlay>
-        </div>
-      );
-    }
-    return true;
-  }
-
-  render() {
-    return (
-      <Row>
-        <Col md={12}>
-          <FormGroup>
-            <ControlLabel>Files</ControlLabel>
-            {this.renderImageEditModal()}
-            {this.renderAttachments()}
-            {this.renderDropzone()}
-          </FormGroup>
-        </Col>
-      </Row>
-    );
-  }
 }
 
 ResearchPlanDetailsAttachments.propTypes = {
diff --git a/app/packs/src/apps/mydb/elements/details/researchPlans/researchPlanTab/ResearchPlanDetailsFieldImage.js b/app/packs/src/apps/mydb/elements/details/researchPlans/researchPlanTab/ResearchPlanDetailsFieldImage.js
index 0e201d414a..014e5e33e1 100644
--- a/app/packs/src/apps/mydb/elements/details/researchPlans/researchPlanTab/ResearchPlanDetailsFieldImage.js
+++ b/app/packs/src/apps/mydb/elements/details/researchPlans/researchPlanTab/ResearchPlanDetailsFieldImage.js
@@ -8,7 +8,7 @@ import AttachmentFetcher from 'src/fetchers/AttachmentFetcher';
 import ImageFileDropHandler from 'src/apps/mydb/elements/details/researchPlans/researchPlanTab/ImageFileDropHandler';
 import ImageAnnotationEditButton from 'src/apps/mydb/elements/details/researchPlans/ImageAnnotationEditButton';
 import ImageAnnotationModalSVG from 'src/apps/mydb/elements/details/researchPlans/ImageAnnotationModalSVG';
-import SaveResearchPlanWarning from 'src/apps/mydb/elements/details/researchPlans/SaveResearchPlanWarning';
+import SaveEditedImageWarning from 'src/apps/mydb/elements/details/researchPlans/SaveEditedImageWarning';
 import ElementStore from 'src/stores/alt/stores/ElementStore';
 
 export default class ResearchPlanDetailsFieldImage extends Component {
@@ -104,7 +104,7 @@ export default class ResearchPlanDetailsFieldImage extends Component {
           </InputGroup>
 
         </FormGroup>
-        <SaveResearchPlanWarning visible={is_annotationUpdated} />
+        <SaveEditedImageWarning visible={is_annotationUpdated} />
         <Dropzone
           accept="image/*"
           multiple={false}
@@ -168,12 +168,12 @@ export default class ResearchPlanDetailsFieldImage extends Component {
 
     return (
       <ImageAnnotationModalSVG
-        attachment={this.state.choosenAttachment}
+        attachment={this.state.chosenAttachment}
         isShow={this.state.imageEditModalShown}
         handleSave={
           () => {
             const newAnnotation = document.getElementById('svgEditId').contentWindow.svgEditor.svgCanvas.getSvgString();
-            this.state.choosenAttachment.updatedAnnotation = newAnnotation;
+            this.state.chosenAttachment.updatedAnnotation = newAnnotation;
             this.setState({ imageEditModalShown: false });
             this.props.onChange(this.props.field.value, this.props.field.id, this.state.attachments);
           }
diff --git a/app/packs/src/apps/mydb/elements/details/researchPlans/wellplatesTab/EmbeddedWellplate.js b/app/packs/src/apps/mydb/elements/details/researchPlans/wellplatesTab/EmbeddedWellplate.js
index a4964e2f4d..fb8bd999e9 100644
--- a/app/packs/src/apps/mydb/elements/details/researchPlans/wellplatesTab/EmbeddedWellplate.js
+++ b/app/packs/src/apps/mydb/elements/details/researchPlans/wellplatesTab/EmbeddedWellplate.js
@@ -1,6 +1,9 @@
+/* eslint-disable react/destructuring-assignment */
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { Panel, Button, ButtonGroup, Tooltip, Overlay, OverlayTrigger, Table, Glyphicon } from 'react-bootstrap';
+import {
+  Panel, Button, ButtonGroup, Tooltip, Overlay, OverlayTrigger, Table, Glyphicon
+} from 'react-bootstrap';
 import Aviator from 'aviator';
 import UIStore from 'src/stores/alt/stores/UIStore';
 import { wellplateShowOrNew } from 'src/utilities/routesUtils';
@@ -51,8 +54,16 @@ export default class EmbeddedWellplate extends Component {
       readoutTitles && readoutTitles.map((title) => {
         const key = title.id;
         return ([
-          <th style={this.cellStyle} key={`v_${key}`} width="15%">{title} Value</th>,
-          <th style={this.cellStyle} key={`u_${key}`} width="10%">{title} Unit</th>
+          <th style={this.cellStyle} key={`v_${key}`} width="15%">
+            {title}
+            &nbsp;
+            Value
+          </th>,
+          <th style={this.cellStyle} key={`u_${key}`} width="10%">
+            {title}
+            &nbsp;
+            Unit
+          </th>
         ]);
       })
     );
@@ -61,13 +72,14 @@ export default class EmbeddedWellplate extends Component {
   renderImportWellplateButton() {
     const importDisabled = this.props.researchPlan.changed;
     const show = this.state.showImportConfirm;
-    const tooltipText = importDisabled ?
-      'Please save the research plan before importing' : 'Import Wellplate data to ResearchPlan table'
+    const tooltipText = importDisabled
+      ? 'Please save the research plan before importing' : 'Import Wellplate data to ResearchPlan table';
     const importTooltip = <Tooltip id="import_tooltip">{tooltipText}</Tooltip>;
 
     const confirmTooltip = (
       <Tooltip placement="bottom" className="in" id="tooltip-bottom">
-        Import data from Wellplate? This will create a table.<br />
+        Import data from Wellplate? This will create a table.
+        <br />
         <ButtonGroup>
           <Button bsStyle="success" bsSize="xsmall" onClick={() => this.confirmWellplateImport()}>
             Yes
@@ -80,7 +92,7 @@ export default class EmbeddedWellplate extends Component {
     );
 
     return ([
-      <OverlayTrigger key="overlay_trigger_import_button" placement="bottom" overlay={importTooltip} >
+      <OverlayTrigger key="overlay_trigger_import_button" placement="bottom" overlay={importTooltip}>
         <Button
           bsSize="xsmall"
           bsStyle="success"
@@ -130,7 +142,7 @@ export default class EmbeddedWellplate extends Component {
 
     // Wellplates that were just dragged in do not have samples assigned.
     // Saving the research plan and reloading it reloads the wellplates and fetches the samples as well
-    if (wells.every(well => well.is_new)) {
+    if (wells.every((well) => well.is_new)) {
       return (<p>Please save the newly assigned wellplate to the research plan first</p>);
     }
 
@@ -173,7 +185,10 @@ export default class EmbeddedWellplate extends Component {
 
     const popover = (
       <Tooltip placement="left" className="in" id="tooltip-bottom">
-        Remove {wellplate.name} from ResearchPlan?<br />
+        Remove&nbsp;
+        {wellplate.name}
+        &nbsp;from ResearchPlan?
+        <br />
         <ButtonGroup>
           <Button bsStyle="danger" bsSize="xsmall" onClick={() => deleteWellplate(wellplate.id)}>
             Yes
@@ -190,12 +205,27 @@ export default class EmbeddedWellplate extends Component {
         <OverlayTrigger placement="bottom" overlay={<Tooltip id="WellplateDatesx">{titleTooltip}</Tooltip>}>
           <span>
             <i className="icon-wellplate" />
-            &nbsp; <span>{wellplate.short_label} {wellplate.name}</span> &nbsp;
+            &nbsp;&nbsp;
+            <span>
+              {wellplate.short_label}
+              &nbsp;
+              {wellplate.name}
+            </span>
+            &nbsp;&nbsp;
           </span>
         </OverlayTrigger>
         <ElementCollectionLabels element={wellplate} placement="right" />
-        <OverlayTrigger placement="bottom" overlay={<Tooltip id="remove_wellplate">Remove Wellplate from Screen</Tooltip>}>
-          <Button ref={(button) => { this.target = button; }} bsStyle="danger" bsSize="xsmall" className="button-right" onClick={() => this.setState({ confirmRemove: !this.state.confirmRemove })}>
+        <OverlayTrigger
+          placement="bottom"
+          overlay={<Tooltip id="remove_wellplate">Remove Wellplate from Screen</Tooltip>}
+        >
+          <Button
+            ref={(button) => { this.target = button; }}
+            bsStyle="danger"
+            bsSize="xsmall"
+            className="button-right"
+            onClick={() => this.setState({ confirmRemove: !this.state.confirmRemove })}
+          >
             <i className="fa fa-trash-o" aria-hidden="true" />
           </Button>
         </OverlayTrigger>
@@ -213,8 +243,16 @@ export default class EmbeddedWellplate extends Component {
             <i className="fa fa-window-maximize" aria-hidden="true" />
           </Button>
         </OverlayTrigger>
-        <OverlayTrigger placement="bottom" overlay={<Tooltip id="expand_wellplate">Show/hide Wellplate details</Tooltip>}>
-          <Button bsStyle="info" bsSize="xsmall" className="button-right" onClick={() => this.setState({ expanded: !this.state.expanded })}>
+        <OverlayTrigger
+          placement="bottom"
+          overlay={<Tooltip id="expand_wellplate">Show/hide Wellplate details</Tooltip>}
+        >
+          <Button
+            bsStyle="info"
+            bsSize="xsmall"
+            className="button-right"
+            onClick={() => this.setState({ expanded: !this.state.expanded })}
+          >
             <i className={expandIconClass} aria-hidden="true" />
           </Button>
         </OverlayTrigger>
@@ -227,7 +265,12 @@ export default class EmbeddedWellplate extends Component {
     const { wellplate } = this.props;
 
     return (
-      <Panel expanded={this.state.expanded} onToggle={() => {}} bsStyle="primary" className="eln-panel-detail wellplate-details">
+      <Panel
+        expanded={this.state.expanded}
+        onToggle={() => {}}
+        bsStyle="primary"
+        className="eln-panel-detail wellplate-details"
+      >
         {this.renderPanelHeading(wellplate)}
         <Panel.Collapse>
           <Panel.Body>
diff --git a/app/packs/src/apps/mydb/elements/details/screens/researchPlansTab/EmbeddedResearchPlanDetails.js b/app/packs/src/apps/mydb/elements/details/screens/researchPlansTab/EmbeddedResearchPlanDetails.js
index c2e71cb194..b8d04c8dd4 100644
--- a/app/packs/src/apps/mydb/elements/details/screens/researchPlansTab/EmbeddedResearchPlanDetails.js
+++ b/app/packs/src/apps/mydb/elements/details/screens/researchPlansTab/EmbeddedResearchPlanDetails.js
@@ -1,24 +1,31 @@
+/* eslint-disable react/destructuring-assignment */
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { Panel, Label, ListGroup, ListGroupItem, Button, ButtonGroup, Tooltip, Overlay, OverlayTrigger, Dropdown, MenuItem } from 'react-bootstrap';
+import {
+  Panel, Label, ListGroup, ListGroupItem, Button, ButtonGroup, Tooltip, Overlay, OverlayTrigger, Dropdown, MenuItem
+} from 'react-bootstrap';
 import Aviator from 'aviator';
 import UIStore from 'src/stores/alt/stores/UIStore';
 import { researchPlanShowOrNew } from 'src/utilities/routesUtils';
 import ElementCollectionLabels from 'src/apps/mydb/elements/labels/ElementCollectionLabels';
 import ResearchPlansFetcher from 'src/fetchers/ResearchPlansFetcher';
 import ResearchPlan from 'src/models/ResearchPlan';
-import ResearchPlanDetailsBody from 'src/apps/mydb/elements/details/researchPlans/researchPlanTab/ResearchPlanDetailsBody';
-import ResearchPlanDetailsName from 'src/apps/mydb/elements/details/researchPlans/researchPlanTab/ResearchPlanDetailsName';
+import ResearchPlanDetailsBody from
+  'src/apps/mydb/elements/details/researchPlans/researchPlanTab/ResearchPlanDetailsBody';
+import ResearchPlanDetailsName from
+  'src/apps/mydb/elements/details/researchPlans/researchPlanTab/ResearchPlanDetailsName';
 import { formatTimeStampsOfElement } from 'src/utilities/timezoneHelper';
 
-const InfoLabel = ({ iconClass, text, style, tooltip }) => {
-  style ||= 'info'
+function InfoLabel({
+  iconClass, text, style, tooltip
+}) {
+  style ||= 'info';
   if (!(iconClass && text)) { return null; }
-  const icon = (<i className={`fa ${iconClass}`} />)
+  const icon = (<i className={`fa ${iconClass}`} />);
   const label = (
-    <Label bsStyle={style} style={{ "margin-right": "1em" }} tooltip={tooltip}>
+    <Label bsStyle={style} style={{ 'margin-right': '1em' }} tooltip={tooltip}>
       {icon}
-      {' ' + text}
+      {` ${text}`}
     </Label>
   );
   if (tooltip) {
@@ -27,9 +34,8 @@ const InfoLabel = ({ iconClass, text, style, tooltip }) => {
         {label}
       </OverlayTrigger>
     );
-  } else {
-    return label;
   }
+  return label;
 }
 
 export default class EmbeddedResearchPlanDetails extends Component {
@@ -84,7 +90,7 @@ export default class EmbeddedResearchPlanDetails extends Component {
   // handle body actions
   handleBodyChange(value, id) {
     const { researchPlan } = this.state;
-    const index = researchPlan.body.findIndex(field => field.id === id);
+    const index = researchPlan.body.findIndex((field) => field.id === id);
     researchPlan.body[index].value = value;
     researchPlan.changed = true;
     this.setState({ researchPlan });
@@ -106,7 +112,7 @@ export default class EmbeddedResearchPlanDetails extends Component {
 
   handleBodyDelete(id, attachments) {
     const { researchPlan } = this.state;
-    const index = researchPlan.body.findIndex(field => field.id === id);
+    const index = researchPlan.body.findIndex((field) => field.id === id);
     researchPlan.body.splice(index, 1);
     researchPlan.changed = true;
     this.setState({ researchPlan });
@@ -128,6 +134,36 @@ export default class EmbeddedResearchPlanDetails extends Component {
     ResearchPlansFetcher.exportTable(researchPlan, field);
   }
 
+  handleCopyToMetadata(id, fieldName) {
+    const { researchPlan } = this.state;
+    const researchPlanMetadata = researchPlan.research_plan_metadata;
+    const args = { research_plan_id: researchPlanMetadata.research_plan_id };
+    const index = researchPlan.body.findIndex((field) => field.id === id);
+    const value = researchPlan.body[index]?.value?.ops[0]?.insert?.trim() || '';
+    if (fieldName === 'name') {
+      researchPlanMetadata.title = researchPlan.name;
+      args.title = researchPlan.name.trim();
+    } else if (fieldName === 'subject') {
+      researchPlanMetadata.subject = value;
+      args.subject = value;
+    } else {
+      const type = researchPlan.body[index]?.title?.trim() || '';
+      const newItem = this.newItemByType(fieldName, value, type);
+
+      const currentCollection = researchPlanMetadata[fieldName]
+        ? researchPlanMetadata[fieldName] : [];
+      const newCollection = currentCollection.concat(newItem);
+      researchPlanMetadata[fieldName] = newCollection;
+      args[`${fieldName}`] = researchPlanMetadata[fieldName];
+    }
+
+    ResearchPlansFetcher.postResearchPlanMetadata(args).then((result) => {
+      if (result.error) {
+        alert(result.error);
+      }
+    });
+  }
+
   openResearchPlan() {
     const { currentCollection, isSync } = UIStore.getState();
     const researchPlanID = this.state.researchPlan.id;
@@ -136,36 +172,13 @@ export default class EmbeddedResearchPlanDetails extends Component {
     researchPlanShowOrNew({ params: { research_planID: researchPlanID } });
   }
 
-  // render functions
-  renderExportButton(disabled) {
-    return (
-      <Dropdown
-        id="research-plan-export-dropdown"
-        className="research-plan-export-dropdown dropdown-right pull-right"
-        disabled={disabled}
-      >
-        <Dropdown.Toggle>
-          Export
-        </Dropdown.Toggle>
-        <Dropdown.Menu>
-          <MenuItem onSelect={() => this.handleExport('docx')}>
-            as .docx
-          </MenuItem>
-          <MenuItem onSelect={() => this.handleExport('odt')}>
-            as .odt
-          </MenuItem>
-          <MenuItem onSelect={() => this.handleExport('html')}>
-            as HTML
-          </MenuItem>
-          <MenuItem onSelect={() => this.handleExport('markdown')}>
-            as Markdown
-          </MenuItem>
-          <MenuItem onSelect={() => this.handleExport('latex')}>
-            as LaTeX
-          </MenuItem>
-        </Dropdown.Menu>
-      </Dropdown>
-    );
+  numberOfAnalyses(researchPlan) {
+    if (!researchPlan.container) { return; }
+    const analyses_container = researchPlan.container.children
+      .find((subcontainer) => subcontainer.container_type == 'analyses');
+    if (!analyses_container) { return; }
+    if (analyses_container.children.length == 0) { return; }
+    return analyses_container.children.length;
   }
 
   renderResearchPlanMain(researchPlan, update) { /* eslint-disable react/jsx-no-bind */
@@ -173,7 +186,7 @@ export default class EmbeddedResearchPlanDetails extends Component {
     const edit = researchPlan.mode === 'edit';
     return (
       <ListGroup fill="true">
-        <ListGroupItem >
+        <ListGroupItem>
           {this.renderExportButton(changed)}
           <ResearchPlanDetailsName
             value={name}
@@ -199,42 +212,36 @@ export default class EmbeddedResearchPlanDetails extends Component {
     );
   } /* eslint-enable */
 
-  handleCopyToMetadata(id, fieldName) {
-    const { researchPlan } = this.state;
-    const researchPlanMetadata = researchPlan.research_plan_metadata;
-    const args = { research_plan_id: researchPlanMetadata.research_plan_id };
-    const index = researchPlan.body.findIndex(field => field.id === id);
-    const value = researchPlan.body[index]?.value?.ops[0]?.insert?.trim() || '';
-    if (fieldName === 'name') {
-      researchPlanMetadata.title = researchPlan.name;
-      args.title = researchPlan.name.trim();
-    } else if (fieldName === 'subject') {
-      researchPlanMetadata.subject = value;
-      args.subject = value;
-    } else {
-      const type = researchPlan.body[index]?.title?.trim() || '';
-      const newItem = this.newItemByType(fieldName, value, type);
-
-      const currentCollection = researchPlanMetadata[fieldName] ?
-        researchPlanMetadata[fieldName] : [];
-      const newCollection = currentCollection.concat(newItem);
-      researchPlanMetadata[fieldName] = newCollection;
-      args[`${fieldName}`] = researchPlanMetadata[fieldName];
-    }
-
-    ResearchPlansFetcher.postResearchPlanMetadata(args).then((result) => {
-      if (result.error) {
-        alert(result.error);
-      }
-    });
-  }
-
-  numberOfAnalyses(researchPlan) {
-    if (!researchPlan.container) { return; }
-    const analyses_container = researchPlan.container.children.find(subcontainer => subcontainer.container_type == 'analyses')
-    if (!analyses_container) { return; }
-    if (analyses_container.children.length == 0) { return; }
-    return analyses_container.children.length;
+  // render functions
+  renderExportButton(disabled) {
+    return (
+      <Dropdown
+        id="research-plan-export-dropdown"
+        className="research-plan-export-dropdown dropdown-right pull-right"
+        disabled={disabled}
+      >
+        <Dropdown.Toggle>
+          Export
+        </Dropdown.Toggle>
+        <Dropdown.Menu>
+          <MenuItem onSelect={() => this.handleExport('docx')}>
+            as .docx
+          </MenuItem>
+          <MenuItem onSelect={() => this.handleExport('odt')}>
+            as .odt
+          </MenuItem>
+          <MenuItem onSelect={() => this.handleExport('html')}>
+            as HTML
+          </MenuItem>
+          <MenuItem onSelect={() => this.handleExport('markdown')}>
+            as Markdown
+          </MenuItem>
+          <MenuItem onSelect={() => this.handleExport('latex')}>
+            as LaTeX
+          </MenuItem>
+        </Dropdown.Menu>
+      </Dropdown>
+    );
   }
 
   renderPanelHeading(researchPlan) {
@@ -244,19 +251,24 @@ export default class EmbeddedResearchPlanDetails extends Component {
 
     const popover = (
       <Tooltip placement="left" className="in" id="tooltip-bottom">
-        Remove {researchPlan.name} from Screen?<br />
+        Remove&nbsp;
+        {researchPlan.name}
+        &nbsp;from Screen?
+        <br />
         <ButtonGroup>
           <Button
             bsStyle="danger"
             bsSize="xsmall"
             onClick={() => deleteResearchPlan(researchPlan.id)}
-          >Yes
+          >
+            Yes
           </Button>
           <Button
             bsStyle="warning"
             bsSize="xsmall"
             onClick={() => this.setState({ confirmRemove: false })}
-          >No
+          >
+            No
           </Button>
         </ButtonGroup>
       </Tooltip>
@@ -267,7 +279,9 @@ export default class EmbeddedResearchPlanDetails extends Component {
         <OverlayTrigger placement="bottom" overlay={<Tooltip id="rpDates">{titleTooltip}</Tooltip>}>
           <span>
             <i className="fa fa-file-text-o" />
-            &nbsp; <span>{researchPlan.name}</span> &nbsp;
+            &nbsp;&nbsp;
+            <span>{researchPlan.name}</span>
+            &nbsp;&nbsp;
           </span>
         </OverlayTrigger>
 
@@ -275,8 +289,17 @@ export default class EmbeddedResearchPlanDetails extends Component {
         <InfoLabel iconClass="fa-file-text-o" text={researchPlan.attachmentCount} tooltip="Attachments" />
         <ElementCollectionLabels element={researchPlan} placement="right" />
 
-        <OverlayTrigger placement="bottom" overlay={<Tooltip id="remove_esearch_plan">Remove Research Plan from Screen</Tooltip>}>
-          <Button ref={(button) => { this.target = button; }} bsStyle="danger" bsSize="xsmall" className="button-right" onClick={() => this.setState({ confirmRemove: !this.state.confirmRemove })}>
+        <OverlayTrigger
+          placement="bottom"
+          overlay={<Tooltip id="remove_esearch_plan">Remove Research Plan from Screen</Tooltip>}
+        >
+          <Button
+            ref={(button) => { this.target = button; }}
+            bsStyle="danger"
+            bsSize="xsmall"
+            className="button-right"
+            onClick={() => this.setState({ confirmRemove: !this.state.confirmRemove })}
+          >
             <i className="fa fa-trash-o" aria-hidden="true" />
           </Button>
         </OverlayTrigger>
@@ -290,17 +313,34 @@ export default class EmbeddedResearchPlanDetails extends Component {
           {popover}
         </Overlay>
         <OverlayTrigger placement="bottom" overlay={<Tooltip id="save_research_plan">Save Research Plan</Tooltip>}>
-          <Button bsStyle="warning" bsSize="xsmall" className="button-right" onClick={() => saveResearchPlan(researchPlan)} style={{ display: (researchPlan.changed || false) ? '' : 'none' }}>
+          <Button
+            bsStyle="warning"
+            bsSize="xsmall"
+            className="button-right"
+            onClick={() => saveResearchPlan(researchPlan)}
+            style={{ display: (researchPlan.changed || false) ? '' : 'none' }}
+          >
             <i className="fa fa-floppy-o" aria-hidden="true" />
           </Button>
         </OverlayTrigger>
-        <OverlayTrigger placement="bottom" overlay={<Tooltip id="open_research_plan">Open Research Plan in Tab</Tooltip>}>
+        <OverlayTrigger
+          placement="bottom"
+          overlay={<Tooltip id="open_research_plan">Open Research Plan in Tab</Tooltip>}
+        >
           <Button bsStyle="info" bsSize="xsmall" className="button-right" onClick={() => this.openResearchPlan()}>
             <i className="fa fa-window-maximize" aria-hidden="true" />
           </Button>
         </OverlayTrigger>
-        <OverlayTrigger placement="bottom" overlay={<Tooltip id="expand_research_plan">Show/hide Research Plan details</Tooltip>}>
-          <Button bsStyle="info" bsSize="xsmall" className="button-right" onClick={() => this.setState({ expanded: !this.state.expanded })}>
+        <OverlayTrigger
+          placement="bottom"
+          overlay={<Tooltip id="expand_research_plan">Show/hide Research Plan details</Tooltip>}
+        >
+          <Button
+            bsStyle="info"
+            bsSize="xsmall"
+            className="button-right"
+            onClick={() => this.setState({ expanded: !this.state.expanded })}
+          >
             <i className={expandIconClass} aria-hidden="true" />
           </Button>
         </OverlayTrigger>
@@ -310,13 +350,26 @@ export default class EmbeddedResearchPlanDetails extends Component {
 
   render() {
     const { researchPlan, update } = this.state;
-    let btnMode = <Button bsSize="xs" bsStyle="success" onClick={() => this.handleSwitchMode('edit')}>click to edit</Button>;
+    let btnMode = (
+      <Button
+        bsSize="xs"
+        bsStyle="success"
+        onClick={() => this.handleSwitchMode('edit')}
+      >
+        click to edit
+      </Button>
+    );
     if (researchPlan.mode !== 'view') {
       btnMode = <Button bsSize="xs" bsStyle="info" onClick={() => this.handleSwitchMode('view')}>click to view</Button>;
     }
 
     return (
-      <Panel expanded={this.state.expanded} onToggle={() => {}} bsStyle={researchPlan.isPendingToSave ? 'info' : 'primary'} className="eln-panel-detail research-plan-details">
+      <Panel
+        expanded={this.state.expanded}
+        onToggle={() => {}}
+        bsStyle={researchPlan.isPendingToSave ? 'info' : 'primary'}
+        className="eln-panel-detail research-plan-details"
+      >
         {this.renderPanelHeading(researchPlan)}
         <Panel.Collapse>
           <Panel.Body>
diff --git a/app/packs/src/apps/mydb/elements/details/wellplates/WellplateDetails.js b/app/packs/src/apps/mydb/elements/details/wellplates/WellplateDetails.js
index c250281e7f..9c3a39e7b2 100644
--- a/app/packs/src/apps/mydb/elements/details/wellplates/WellplateDetails.js
+++ b/app/packs/src/apps/mydb/elements/details/wellplates/WellplateDetails.js
@@ -1,3 +1,4 @@
+/* eslint-disable react/destructuring-assignment */
 import React, { Component } from 'react';
 import html2pdf from 'html2pdf.js/src';
 import PropTypes from 'prop-types';
@@ -5,8 +6,8 @@ import {
   Well, Panel, ListGroup, ListGroupItem, ButtonToolbar, Button,
   Tabs, Tab, Tooltip, OverlayTrigger
 } from 'react-bootstrap';
-import Immutable from 'immutable';
 import { findIndex } from 'lodash';
+import Immutable from 'immutable';
 import LoadingActions from 'src/stores/alt/actions/LoadingActions';
 import ElementCollectionLabels from 'src/apps/mydb/elements/labels/ElementCollectionLabels';
 import ElementActions from 'src/stores/alt/actions/ElementActions';
@@ -14,8 +15,10 @@ import DetailActions from 'src/stores/alt/actions/DetailActions';
 import Wellplate from 'src/apps/mydb/elements/details/wellplates/designerTab/Wellplate';
 import WellplateList from 'src/apps/mydb/elements/details/wellplates/listTab/WellplateList';
 import WellplateProperties from 'src/apps/mydb/elements/details/wellplates/propertiesTab/WellplateProperties';
-import WellplateDetailsContainers from 'src/apps/mydb/elements/details/wellplates/analysesTab/WellplateDetailsContainers';
-import WellplateDetailsAttachments from 'src/apps/mydb/elements/details/wellplates/attachmentsTab/WellplateDetailsAttachments';
+import WellplateDetailsContainers from
+  'src/apps/mydb/elements/details/wellplates/analysesTab/WellplateDetailsContainers';
+import WellplateDetailsAttachments from
+  'src/apps/mydb/elements/details/wellplates/attachmentsTab/WellplateDetailsAttachments';
 import PrintCodeButton from 'src/components/common/PrintCodeButton';
 import Attachment from 'src/models/Attachment';
 import Utils from 'src/utilities/Functions';
@@ -25,15 +28,13 @@ import ConfirmClose from 'src/components/common/ConfirmClose';
 import ExportSamplesBtn from 'src/apps/mydb/elements/details/ExportSamplesBtn';
 import ElementDetailSortTab from 'src/apps/mydb/elements/details/ElementDetailSortTab';
 import { addSegmentTabs } from 'src/components/generic/SegmentDetails';
-import PrivateNoteElement from 'src/apps/mydb/elements/details/PrivateNoteElement'
+import PrivateNoteElement from 'src/apps/mydb/elements/details/PrivateNoteElement';
 import HeaderCommentSection from 'src/components/comments/HeaderCommentSection';
 import CommentSection from 'src/components/comments/CommentSection';
 import CommentActions from 'src/stores/alt/actions/CommentActions';
 import CommentModal from 'src/components/common/CommentModal';
 import { formatTimeStampsOfElement } from 'src/utilities/timezoneHelper';
 
-const cols = 12;
-
 export default class WellplateDetails extends Component {
   constructor(props) {
     super(props);
@@ -42,9 +43,11 @@ export default class WellplateDetails extends Component {
       wellplate,
       activeTab: UIStore.getState().wellplate.activeTab,
       showWellplate: true,
-      visible: Immutable.List(),
+      visible: Immutable.List(['']),
     };
+    this.handleWellplateChanged = this.handleWellplateChanged.bind(this);
     this.onUIStoreChange = this.onUIStoreChange.bind(this);
+    this.handleSubmit = this.handleSubmit.bind(this);
     this.onTabPositionChanged = this.onTabPositionChanged.bind(this);
     this.handleSegmentsChange = this.handleSegmentsChange.bind(this);
   }
@@ -71,22 +74,10 @@ export default class WellplateDetails extends Component {
     UIStore.unlisten(this.onUIStoreChange);
   }
 
-  onUIStoreChange(state) {
-    if (state.wellplate.activeTab !== this.state.activeTab) {
-      this.setState({
-        activeTab: state.wellplate.activeTab
-      });
-    }
-  }
-
-  onTabPositionChanged(visible) {
-    this.setState({ visible });
-  }
-
   handleSegmentsChange(se) {
     const { wellplate } = this.state;
     const { segments } = wellplate;
-    const idx = findIndex(segments, o => o.segment_klass_id === se.segment_klass_id);
+    const idx = findIndex(segments, (o) => o.segment_klass_id === se.segment_klass_id);
     if (idx >= 0) { segments.splice(idx, 1, se); } else { segments.push(se); }
     wellplate.segments = segments;
     wellplate.changed = true;
@@ -108,10 +99,10 @@ export default class WellplateDetails extends Component {
     wellplate.updateChecksum();
   }
 
-  handleWellplateChanged(wellplate) {
-    this.setState({
-      wellplate
-    });
+  handleWellplateChanged(el) {
+    const wellplate = el;
+    wellplate.changed = true;
+    this.setState({ wellplate });
   }
 
   handlePrint() {
@@ -165,20 +156,23 @@ export default class WellplateDetails extends Component {
 
   handleTabChange(eventKey) {
     const showWellplate = (eventKey === 0);
-    this.setState(previousState => ({ ...previousState, activeTab: eventKey, showWellplate }));
+    this.setState((previousState) => ({ ...previousState, activeTab: eventKey, showWellplate }));
     UIActions.selectTab({ tabKey: eventKey, type: 'wellplate' });
   }
 
   // handle attachment actions
-
   handleAttachmentDrop(files) {
-    const { wellplate } = this.state;
-    wellplate.changed = true;
-    files.forEach((file) => {
-      const attachment = Attachment.fromFile(file);
-      wellplate.attachments.push(attachment);
+    this.setState((prevState) => {
+      const newAttachments = files.map((file) => Attachment.fromFile(file));
+      prevState.wellplate.attachments = [
+        ...prevState.wellplate.attachments || [],
+        ...newAttachments
+      ];
+
+      prevState.wellplate.changed = true;
+
+      return { wellplate: prevState.wellplate };
     });
-    this.setState({ wellplate });
   }
 
   handleAttachmentDelete(attachment) {
@@ -211,15 +205,30 @@ export default class WellplateDetails extends Component {
 
   handleAttachmentEdit(attachment) {
     const { wellplate } = this.state;
-
+    wellplate.changed = true;
     // update only this attachment
     wellplate.attachments.map((currentAttachment) => {
-      if (currentAttachment.id === attachment.id) return attachment;
+      if (currentAttachment.id === attachment.id) {
+        return attachment;
+      }
+      return currentAttachment;
     });
     this.setState({ wellplate });
     this.forceUpdate();
   }
 
+  onTabPositionChanged(visible) {
+    this.setState({ visible });
+  }
+
+  onUIStoreChange(state) {
+    if (state.wellplate.activeTab !== this.state.activeTab) {
+      this.setState({
+        activeTab: state.wellplate.activeTab
+      });
+    }
+  }
+
   wellplateHeader(wellplate) {
     const saveBtnDisplay = wellplate.isEdited ? '' : 'none';
     const datetp = formatTimeStampsOfElement(wellplate || {});
@@ -230,14 +239,22 @@ export default class WellplateDetails extends Component {
         <OverlayTrigger placement="bottom" overlay={<Tooltip id="screenDatesx">{datetp}</Tooltip>}>
           <span>
             <i className="icon-wellplate" />
-            &nbsp; <span>{wellplate.name}</span> &nbsp;
+            &nbsp;&nbsp;
+            <span>{wellplate.name}</span>
+            &nbsp;&nbsp;
           </span>
         </OverlayTrigger>
         <ElementCollectionLabels element={wellplate} placement="right" />
         <HeaderCommentSection element={wellplate} />
         <ConfirmClose el={wellplate} />
         <OverlayTrigger placement="bottom" overlay={<Tooltip id="saveWellplate">Save Wellplate</Tooltip>}>
-          <Button bsStyle="warning" bsSize="xsmall" className="button-right" onClick={() => this.handleSubmit()} style={{ display: saveBtnDisplay }}>
+          <Button
+            bsStyle="warning"
+            bsSize="xsmall"
+            className="button-right"
+            onClick={() => this.handleSubmit()}
+            style={{ display: saveBtnDisplay }}
+          >
             <i className="fa fa-floppy-o " />
           </Button>
         </OverlayTrigger>
@@ -252,13 +269,12 @@ export default class WellplateDetails extends Component {
   }
 
   renderAttachmentsTab(wellplate) { /* eslint-disable react/jsx-no-bind */
-    const { attachments } = wellplate;
     return (
       <ListGroup fill="true">
-        <ListGroupItem >
+        <ListGroupItem>
           <WellplateDetailsAttachments
-            attachments={attachments}
-            wellplateChanged={wellplate.isEdited}
+            wellplate={wellplate}
+            attachments={wellplate.attachments}
             onDrop={this.handleAttachmentDrop.bind(this)}
             onDelete={this.handleAttachmentDelete.bind(this)}
             onUndoDelete={this.handleAttachmentUndoDelete.bind(this)}
@@ -272,7 +288,6 @@ export default class WellplateDetails extends Component {
     );
   } /* eslint-enable */
 
-
   render() {
     const {
       wellplate, showWellplate, visible
@@ -281,8 +296,8 @@ export default class WellplateDetails extends Component {
       wells, name, size, description
     } = wellplate;
     const readoutTitles = wellplate.readout_titles;
-    const submitLabel = wellplate.isNew ? 'Create' : 'Save';
-    const exportButton = (wellplate && wellplate.isNew) ? null : <ExportSamplesBtn type="wellplate" id={wellplate.id} />;
+    const exportButton = (wellplate && wellplate.isNew)
+      ? null : <ExportSamplesBtn type="wellplate" id={wellplate.id} />;
     const properties = {
       name, size, description, readoutTitles
     };
@@ -299,8 +314,8 @@ export default class WellplateDetails extends Component {
               size={size}
               readoutTitles={readoutTitles}
               wells={wells}
-              handleWellsChange={w => this.handleWellsChange(w)}
-              cols={cols}
+              handleWellsChange={(w) => this.handleWellsChange(w)}
+              cols={12}
               width={60}
             />
           </Well>
@@ -311,11 +326,11 @@ export default class WellplateDetails extends Component {
           {
             !wellplate.isNew && <CommentSection section="wellplate_list" element={wellplate} />
           }
-          <Well style={{ overflow: 'scroll', height: '100%', 'max-height': 'calc(100vh - 375px)' }}>
+          <Well style={{ overflow: 'scroll', height: '100%', maxHeight: 'calc(100vh - 375px)' }}>
             <WellplateList
               wells={wells}
               readoutTitles={readoutTitles}
-              handleWellsChange={w => this.handleWellsChange(w)}
+              handleWellsChange={(w) => this.handleWellsChange(w)}
             />
           </Well>
         </Tab>
@@ -327,11 +342,13 @@ export default class WellplateDetails extends Component {
           }
           <WellplateProperties
             {...properties}
-            changeProperties={c => this.handleChangeProperties(c)}
-            handleAddReadout={c => this.handleAddReadout(c)}
-            handleRemoveReadout={c => this.handleRemoveReadout(c)}
+            changeProperties={(c) => this.handleChangeProperties(c)}
+            handleAddReadout={(c) => this.handleAddReadout(c)}
+            handleRemoveReadout={(c) => this.handleRemoveReadout(c)}
           />
-          <PrivateNoteElement element={wellplate} disabled={wellplate.can_update} /> {/*For samples and reactions (<element>): disabled={!<element>.can_update} */}
+          <PrivateNoteElement element={wellplate} disabled={wellplate.can_update} />
+          {' '}
+          {/* For samples and reactions (<element>): disabled={!<element>.can_update} */}
         </Tab>
       ),
       analyses: (
@@ -364,6 +381,7 @@ export default class WellplateDetails extends Component {
       if (tabContent) { tabContents.push(tabContent); }
     });
 
+    // eslint-disable-next-line react/destructuring-assignment
     const activeTab = (this.state.activeTab !== 0 && this.state.activeTab) || visible[0];
 
     return (
@@ -376,16 +394,18 @@ export default class WellplateDetails extends Component {
             tabTitles={tabTitlesMap}
             onTabPositionChanged={this.onTabPositionChanged}
           />
-          <Tabs activeKey={activeTab} onSelect={event => this.handleTabChange(event)} id="wellplateDetailsTab">
+          <Tabs activeKey={activeTab} onSelect={(event) => this.handleTabChange(event)} id="wellplateDetailsTab">
             {tabContents}
           </Tabs>
           <ButtonToolbar>
-            <Button bsStyle="primary" onClick={() => DetailActions.close(wellplate)}>
-              Close
-            </Button>
-            <Button bsStyle="warning" onClick={() => this.handleSubmit()}>
-              {submitLabel}
-            </Button>
+            <Button bsStyle="primary" onClick={() => DetailActions.close(wellplate)}>Close</Button>
+            {
+              wellplate.changed ? (
+                <Button bsStyle="warning" onClick={() => this.handleSubmit()}>
+                  {wellplate.isNew ? 'Create' : 'Save'}
+                </Button>
+              ) : <div />
+            }
             {exportButton}
             <Button bsStyle="primary" onClick={() => this.handlePrint()}>
               Print Wells
diff --git a/app/packs/src/apps/mydb/elements/details/wellplates/attachmentsTab/WellplateDetailsAttachments.js b/app/packs/src/apps/mydb/elements/details/wellplates/attachmentsTab/WellplateDetailsAttachments.js
index 9ea6c177e6..4ceea1b354 100644
--- a/app/packs/src/apps/mydb/elements/details/wellplates/attachmentsTab/WellplateDetailsAttachments.js
+++ b/app/packs/src/apps/mydb/elements/details/wellplates/attachmentsTab/WellplateDetailsAttachments.js
@@ -1,25 +1,42 @@
+/* eslint-disable react/destructuring-assignment */
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import Dropzone from 'react-dropzone';
-import { FormGroup, Button, ButtonGroup, Row, Col, Tooltip, ControlLabel, ListGroup, ListGroupItem, OverlayTrigger, Glyphicon, Popover, Overlay } from 'react-bootstrap';
-import { last, findKey, values } from 'lodash';
 import EditorFetcher from 'src/fetchers/EditorFetcher';
 import ImageModal from 'src/components/common/ImageModal';
-import SpinnerPencilIcon from 'src/components/common/SpinnerPencilIcon';
-import { previewAttachmentImage } from 'src/utilities/imageHelper';
+import ImageAnnotationModalSVG from 'src/apps/mydb/elements/details/researchPlans/ImageAnnotationModalSVG';
 import Utils from 'src/utilities/Functions';
+import {
+  Button, ButtonGroup, OverlayTrigger, Popover
+} from 'react-bootstrap';
+import { last, findKey } from 'lodash';
+import AttachmentFetcher from 'src/fetchers/AttachmentFetcher';
+import SaveEditedImageWarning from 'src/apps/mydb/elements/details/researchPlans/SaveEditedImageWarning';
+
+import {
+  downloadButton,
+  removeButton,
+  annotateButton,
+  editButton,
+  importButton,
+  customDropzone,
+  sortingAndFilteringUI,
+  formatFileSize,
+  isImageFile
+} from 'src/apps/mydb/elements/list/AttachmentList';
 
-const editorTooltip = exts => <Tooltip id="editor_tooltip">Available extensions: {exts}</Tooltip>;
-const downloadTooltip = <Tooltip id="download_tooltip">Download attachment</Tooltip>;
-const imageStyle = { position: 'absolute', width: 60, height: 60 };
 const templateInfo = (
   <Popover id="popver-template-info" title="Template info">
-    This template should be used to import well readouts.<br />
-    The <strong>red</strong> column may not be altered at all.<br />
-    The contents of the <strong>yellow</strong> columns may be altered, the headers may not.<br />
-    The <strong>green</strong> columns must contain at least one <i>_Value</i> and <i>_Unit</i> pair
-    with a matching prefix before the underscore.
-    They may contain an arbitrary amount of readout pairs.
+    This template should be used to import well readouts. The&nbsp;
+    <strong>red</strong>
+    &nbsp;column may not be altered at all. The contents of the&nbsp;
+    <strong>yellow</strong>
+    &nbsp;columns may be altered, the headers may not. The&nbsp;
+    <strong>green</strong>
+    &nbsp;columns must contain at least one&nbsp;
+    <i>_Value</i>
+    &nbsp;and&nbsp;
+    <i>_Unit</i>
+    &nbsp;pair with a matching prefix before the underscore. They may contain an arbitrary amount of readout pairs.
   </Popover>
 );
 
@@ -28,64 +45,63 @@ export default class WellplateDetailsAttachments extends Component {
     super(props);
     this.importButtonRefs = [];
     const {
-      attachments, wellplateChanged, onDrop, onDelete, onUndoDelete, onDownload, onImport, onEdit
+      onImport
     } = props;
+
     this.state = {
-      onDrop,
-      onDelete,
-      onUndoDelete,
-      onDownload,
       onImport,
-      onEdit,
       attachmentEditor: false,
       extension: null,
+      imageEditModalShown: false,
       showImportConfirm: [],
+      filteredAttachments: [...props.attachments],
+      filterText: '',
+      sortBy: 'name',
+      sortDirection: 'asc',
     };
     this.editorInitial = this.editorInitial.bind(this);
+    this.createAttachmentPreviews = this.createAttachmentPreviews.bind(this);
+
+    this.handleDownloadOriginal = this.handleDownloadOriginal.bind(this);
+    this.handleDownloadAnnotated = this.handleDownloadAnnotated.bind(this);
+    this.handleEdit = this.handleEdit.bind(this);
+    this.handleFilterChange = this.handleFilterChange.bind(this);
+    this.handleSortChange = this.handleSortChange.bind(this);
+    this.toggleSortDirection = this.toggleSortDirection.bind(this);
+    this.confirmAttachmentImport = this.confirmAttachmentImport.bind(this);
+    this.showImportConfirm = this.showImportConfirm.bind(this);
+    this.hideImportConfirm = this.hideImportConfirm.bind(this);
   }
 
   componentDidMount() {
     this.editorInitial();
+    this.createAttachmentPreviews();
   }
 
-  editorInitial() {
-    EditorFetcher.initial()
-      .then((result) => {
-        this.setState({
-          attachmentEditor: result.installed,
-          extension: result.ext
-        });
-      });
-  }
-
-  documentType(filename) {
-    const { extension } = this.state;
-
-    const ext = last(filename.split('.'));
-    const docType = findKey(extension, o => o.includes(ext));
-
-    if (typeof (docType) === 'undefined' || !docType) {
-      return null;
+  componentDidUpdate(prevProps) {
+    const { attachments } = this.props;
+    if (attachments !== prevProps.attachments) {
+      this.createAttachmentPreviews();
+      this.setState({ filteredAttachments: [...attachments] }, this.filterAndSortAttachments);
     }
-
-    return docType;
   }
 
   handleEdit(attachment) {
-    const { onEdit } = this.state;
     const fileType = last(attachment.filename.split('.'));
     const docType = this.documentType(attachment.filename);
 
     EditorFetcher.startEditing({ attachment_id: attachment.id })
       .then((result) => {
         if (result.token) {
-          const url = `/editor?id=${attachment.id}&docType=${docType}&fileType=${fileType}&title=${attachment.filename}&key=${result.token}`;
+          const url = `/editor?id=${attachment.id}&docType=${docType}
+          &fileType=${fileType}&title=${attachment.filename}&key=${result.token}
+          &only_office_token=${result.only_office_token}`;
           window.open(url, '_blank');
 
           attachment.aasm_state = 'oo_editing';
           attachment.updated_at = new Date();
 
-          onEdit(attachment);
+          this.props.onEdit(attachment);
         } else {
           alert('Unauthorized to edit this file.');
         }
@@ -96,6 +112,104 @@ export default class WellplateDetailsAttachments extends Component {
     Utils.downloadFile({ contents: '/xlsx/wellplate_import_template.xlsx', name: 'wellplate_import_template.xlsx' });
   }
 
+  handleFilterChange = (e) => {
+    this.setState({ filterText: e.target.value }, this.filterAndSortAttachments);
+  };
+
+  handleSortChange = (e) => {
+    this.setState({ sortBy: e.target.value }, this.filterAndSortAttachments);
+  };
+
+  toggleSortDirection = () => {
+    this.setState((prevState) => ({
+      sortDirection: prevState.sortDirection === 'asc' ? 'desc' : 'asc'
+    }), this.filterAndSortAttachments);
+  };
+
+  handleDownloadOriginal = (attachment) => {
+    this.props.onDownload(attachment);
+  };
+
+  handleDownloadAnnotated = (attachment) => {
+    const isImage = isImageFile(attachment.filename);
+    if (isImage && !attachment.isNew) {
+      Utils.downloadFile({
+        contents: `/api/v1/attachments/${attachment.id}/annotated_image`,
+        name: attachment.filename
+      });
+    }
+  };
+
+  filterAndSortAttachments() {
+    const { filterText, sortBy } = this.state;
+
+    const filteredAttachments = this.props.attachments.filter((
+      attachment
+    ) => attachment.filename.toLowerCase().includes(filterText.toLowerCase()));
+
+    filteredAttachments.sort((a, b) => {
+      let comparison = 0;
+      switch (sortBy) {
+        case 'name':
+          comparison = a.filename.localeCompare(b.filename);
+          break;
+        case 'size':
+          comparison = a.filesize - b.filesize;
+          break;
+        case 'date':
+          comparison = new Date(a.created_at) - new Date(b.created_at);
+          break;
+        default:
+          break;
+      }
+      return this.state.sortDirection === 'asc' ? comparison : -comparison;
+    });
+
+    this.setState({ filteredAttachments });
+  }
+
+  createAttachmentPreviews() {
+    const { attachments } = this.props;
+    attachments.map((attachment) => {
+      if (attachment.thumb) {
+        AttachmentFetcher.fetchThumbnail({ id: attachment.id }).then(
+          (result) => {
+            if (result != null) {
+              attachment.preview = `data:image/png;base64,${result}`;
+              this.forceUpdate();
+            }
+          }
+        );
+      } else {
+        attachment.preview = '/images/wild_card/not_available.svg';
+        this.forceUpdate();
+      }
+      return attachment;
+    });
+  }
+
+  documentType(filename) {
+    const { extension } = this.state;
+
+    const ext = last(filename.split('.'));
+    const docType = findKey(extension, (o) => o.includes(ext));
+
+    if (typeof docType === 'undefined' || !docType) {
+      return null;
+    }
+
+    return docType;
+  }
+
+  editorInitial() {
+    EditorFetcher.initial().then((result) => {
+      this.setState({
+        attachmentEditor: result.installed,
+        extension: result.ext,
+      });
+    });
+  }
+
   showImportConfirm(attachmentId) {
     const { showImportConfirm } = this.state;
     showImportConfirm[attachmentId] = true;
@@ -114,266 +228,232 @@ export default class WellplateDetailsAttachments extends Component {
     this.hideImportConfirm(attachment.id);
   }
 
-  renderImportAttachmentButton(attachment) {
-    const show = this.state.showImportConfirm[attachment.id];
-    const importDisabled = this.props.wellplateChanged;
-    const extension = last(attachment.filename.split('.'));
-
-    const importTooltip = importDisabled ?
-      <Tooltip id="import_tooltip">Wellplate must be saved before import</Tooltip> :
-      <Tooltip id="import_tooltip">Import attachment as Wellplate data</Tooltip>;
+  renderImageEditModal() {
+    const { chosenAttachment, imageEditModalShown } = this.state;
+    const { onEdit } = this.props;
+    return (
+      <ImageAnnotationModalSVG
+        attachment={chosenAttachment}
+        isShow={imageEditModalShown}
+        handleSave={
+          () => {
+            const newAnnotation = document.getElementById('svgEditId').contentWindow.svgEditor.svgCanvas.getSvgString();
+            chosenAttachment.updatedAnnotation = newAnnotation;
+            this.setState({ imageEditModalShown: false });
+            onEdit(chosenAttachment);
+          }
+        }
+        handleOnClose={() => { this.setState({ imageEditModalShown: false }); }}
+      />
+    );
+  }
 
-    const confirmTooltip = (
-      <Tooltip placement="bottom" className="in" id="tooltip-bottom">
-        Import data from Spreadsheet? This will overwrite existing Wellplate data.<br />
-        <ButtonGroup>
-          <Button
-            bsStyle="danger"
-            bsSize="xsmall"
-            onClick={() => this.confirmAttachmentImport(attachment)}
-          >
-            Yes
-          </Button>
+  renderTemplateDownload() {
+    return (
+      <div>
+        <ButtonGroup style={{ marginBottom: '10px' }}>
           <Button
-            bsStyle="warning"
-            bsSize="xsmall"
-            onClick={() => this.hideImportConfirm(attachment.id)}
+            bsStyle="primary"
+            onClick={() => this.handleTemplateDownload()}
           >
-            No
+            <i className="fa fa-download" aria-hidden="true" />
+            &nbsp;
+            Download Import Template xlsx
           </Button>
-        </ButtonGroup>
-      </Tooltip>
-    );
-
-    if (extension === 'xlsx') {
-      return (
-        <div>
-          <OverlayTrigger placement="top" overlay={importTooltip} >
-            <div style={{ float: 'right' }}>
-              <Button
-                bsSize="xsmall"
-                bsStyle="success"
-                className="button-right"
-                disabled={importDisabled}
-                ref={(ref) => { this.importButtonRefs[attachment.id] = ref; }}
-                style={importDisabled ? { pointerEvents: 'none' } : {}}
-                onClick={() => this.showImportConfirm(attachment.id)}
-              >
-                <Glyphicon glyph="import" />
-              </Button>
-            </div>
+          <OverlayTrigger placement="bottom" overlay={templateInfo}>
+            <Button
+              bsStyle="info"
+            >
+              <i className="fa fa-info" aria-hidden="true" />
+            </Button>
           </OverlayTrigger>
-          <Overlay
-            show={show}
-            placement="bottom"
-            rootClose
-            onHide={() => this.hideImportConfirm(attachment.id)}
-            target={this.importButtonRefs[attachment.id]}
-          >
-            {confirmTooltip}
-          </Overlay>
-
-        </div>
-      );
-    }
-    return true;
-  }
-
-  renderRemoveAttachmentButton(attachment) {
-    const { onDelete } = this.state;
-
-    return (
-      <Button bsSize="xsmall" bsStyle="danger" className="button-right" onClick={() => onDelete(attachment)} disabled={this.props.readOnly}>
-        <i className="fa fa-trash-o" aria-hidden="true" />
-      </Button>
+        </ButtonGroup>
+      </div>
     );
   }
 
-  renderListGroupItem(attachment) {
+  render() {
     const {
-      attachmentEditor, extension, onUndoDelete, onDownload
+      filteredAttachments, sortDirection, attachmentEditor, extension
     } = this.state;
-
-    const updateTime = new Date(attachment.updated_at);
-    updateTime.setTime(updateTime.getTime() + (15 * 60 * 1000));
-
-    const hasPop = false;
-    const fetchNeeded = false;
-    const fetchId = attachment.id;
-
-    const previewImg = previewAttachmentImage(attachment);
-    const isEditing = attachment.aasm_state === 'oo_editing' && new Date().getTime() < updateTime;
-
-    const docType = this.documentType(attachment.filename);
-    const editDisable = !attachmentEditor || isEditing || attachment.is_new || docType === null;
-    const styleEditorBtn = !attachmentEditor || docType === null ? 'none' : '';
-
-    if (attachment.is_deleted) {
-      return (
-        <div>
-          <Row>
-            <Col md={1} />
-            <Col md={9}>
-              <strike>{attachment.filename}</strike>
-            </Col>
-            <Col md={2}>
-              <Button
-                bsSize="xsmall"
-                bsStyle="danger"
-                className="button-right"
-                onClick={() => onUndoDelete(attachment)}
-              >
-                <i className="fa fa-undo" aria-hidden="true" />
-              </Button>
-            </Col>
-          </Row>
-        </div>
-      );
-    }
+    const { onUndoDelete } = this.props;
 
     return (
-      <div>
-        <Row>
-          <Col md={1}>
-            <div className="analysis-header order" style={{ width: '60px', height: '60px' }}>
-              <div className="preview" style={{ width: '60px', height: '60px' }} >
+      <div className="attachment-main-container">
+        {this.renderTemplateDownload()}
+        {this.renderImageEditModal()}
+        {customDropzone(this.props.onDrop)}
+        {filteredAttachments.length > 0
+        && sortingAndFilteringUI(
+          sortDirection,
+          this.handleSortChange,
+          this.toggleSortDirection,
+          this.handleFilterChange
+        )}
+        {filteredAttachments.length === 0 ? (
+          <div className="no-attachments-text">
+            There are currently no attachments.
+          </div>
+        ) : (
+          filteredAttachments.map((attachment) => (
+            <div className="attachment-row" key={attachment.id}>
+              <div className="attachment-row-image">
                 <ImageModal
-                  imageStyle={imageStyle}
-                  hasPop={hasPop}
+                  imageStyle={{
+                    width: '60px',
+                    height: '60px',
+                    borderRadius: '5px',
+                    objectFit: 'cover',
+                    boxShadow: '0 2px 10px rgba(0, 0, 0, 0.1)',
+                    transition: 'transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out',
+                  }}
+                  hasPop={false}
+                  alt="thumbnail"
                   previewObject={{
-                    src: previewImg
+                    src: attachment.preview,
                   }}
                   popObject={{
                     title: attachment.filename,
-                    src: previewImg,
-                    fetchNeeded,
-                    fetchId
+                    src: attachment.preview,
+                    fetchNeeded: false,
+                    fetchId: attachment.id,
                   }}
                 />
               </div>
+              <div className="attachment-row-text" title={attachment.filename}>
+                {attachment.is_deleted ? (
+                  <strike>{attachment.filename}</strike>
+                ) : (
+                  attachment.filename
+                )}
+                <div className="attachment-row-subtext">
+                  Added on:&nbsp;
+                  {attachment.created_at && !Number.isNaN(new Date(attachment.created_at).getTime()) ? (
+                    <>
+                      {new Date(attachment.created_at).toLocaleDateString('en-GB')}
+                      ,
+                      &nbsp;
+                      {new Date(attachment.created_at).toLocaleTimeString(
+                        'en-GB',
+                        { hour: '2-digit', minute: '2-digit', hour12: true }
+                      )}
+                    </>
+                  ) : (
+                    'now!'
+                  )}
+                </div>
+              </div>
+              <div className="attachment-row-size">
+                <span style={{ fontWeight: 'bold' }}>
+                  Size:&nbsp;
+                  <span style={{ fontWeight: 'bold', color: '#444' }}>
+                    {formatFileSize(attachment.filesize)}
+                  </span>
+                </span>
+              </div>
+              <div className="attachment-row-actions" style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
+                {attachment.is_deleted ? (
+                  <Button
+                    bsSize="xs"
+                    bsStyle="danger"
+                    className="attachment-button-size"
+                    onClick={() => onUndoDelete(attachment)}
+                  >
+                    <i className="fa fa-undo" aria-hidden="true" />
+                  </Button>
+                ) : (
+                  <>
+                    {downloadButton(attachment, this.handleDownloadOriginal, this.handleDownloadAnnotated)}
+                    {editButton(
+                      attachment,
+                      extension,
+                      attachmentEditor,
+                      attachment.aasm_state === 'oo_editing' && new Date().getTime()
+                          < (new Date(attachment.updated_at).getTime() + 15 * 60 * 1000),
+                      attachmentEditor ? '' : 'none',
+                      !attachmentEditor || attachment.aasm_state === 'oo_editing'
+                          || attachment.is_new || this.documentType(attachment.filename) === null,
+                      this.handleEdit
+                    )}
+                    {annotateButton(attachment, this)}
+                    {importButton(
+                      attachment,
+                      this.state.showImportConfirm,
+                      this.props.wellplate.changed,
+                      this.importButtonRefs,
+                      this.showImportConfirm,
+                      this.hideImportConfirm,
+                      this.confirmAttachmentImport
+                    )}
+                    {removeButton(attachment, this.props.onDelete, this.props.readOnly)}
+                  </>
+                )}
+              </div>
+              {attachment.updatedAnnotation && <SaveEditedImageWarning visible />}
             </div>
-          </Col>
-          <Col md={9}>
-            {attachment.filename}
-          </Col>
-          <Col md={2}>
-            {this.renderRemoveAttachmentButton(attachment)}
-            <OverlayTrigger placement="top" overlay={downloadTooltip} >
-              <Button
-                bsSize="xsmall"
-                className="button-right"
-                bsStyle="primary"
-                onClick={() => onDownload(attachment)}
-              >
-                <i className="fa fa-download" aria-hidden="true" />
-              </Button>
-            </OverlayTrigger>
-            <OverlayTrigger placement="left" overlay={editorTooltip(values(extension).join(','))} >
-              <Button
-                style={{ display: styleEditorBtn }}
-                bsSize="xsmall"
-                className="button-right"
-                bsStyle="success"
-                disabled={editDisable}
-                onClick={() => this.handleEdit(attachment)}
-              >
-                <SpinnerPencilIcon spinningLock={!attachmentEditor || isEditing} />
-              </Button>
-            </OverlayTrigger>
-            {this.renderImportAttachmentButton(attachment)}
-          </Col>
-        </Row>
-      </div>
-    );
-  }
-
-  renderAttachments() {
-    const { attachments } = this.props;
-    if (attachments && attachments.length > 0) {
-      return (
-        <div>
-          {this.renderTemplateDownload()}
-          <ListGroup>
-            {attachments.map(attachment => (
-              <ListGroupItem key={attachment.id}>
-                {this.renderListGroupItem(attachment)}
-              </ListGroupItem>
-            ))}
-          </ListGroup>
-        </div>
-      );
-    }
-    return (
-      <div>
-        {this.renderTemplateDownload()}
-        <div>
-          There are currently no Datasets.<br />
-        </div>
-      </div>
-    );
-  }
-
-  renderTemplateDownload() {
-    return (
-      <div style={{ marginBottom: '5px' }}>
-        <Button
-          bsStyle="primary"
-          onClick={() => this.handleTemplateDownload()}
-        >
-          <i className="fa fa-download" aria-hidden="true" /> Download Wellplate import template xlsx
-        </Button>
-        <OverlayTrigger placement="bottom" overlay={templateInfo}>
-          <Button
-            bsStyle="info"
-          >
-            <i className="fa fa-info" aria-hidden="true" />
-          </Button>
-        </OverlayTrigger>
+          ))
+        )}
       </div>
     );
   }
-
-  renderDropzone() {
-    const { onDrop } = this.state;
-
-    return (
-      <div className={`research-plan-dropzone-${this.props.readOnly ? 'disable' : 'enable'}`}>
-        <Dropzone
-          onDrop={files => onDrop(files)}
-          className="zone"
-        >
-          Drop Files, or Click to Select.
-        </Dropzone>
-      </div>
-    );
-  }
-
-  render() {
-    return (
-      <Row>
-        <Col md={12}>
-          <FormGroup>
-            <ControlLabel>Files</ControlLabel>
-            {this.renderAttachments()}
-            {this.renderDropzone()}
-          </FormGroup>
-        </Col>
-      </Row>
-    );
-  }
 }
 
 WellplateDetailsAttachments.propTypes = {
-  attachments: PropTypes.arrayOf(PropTypes.object).isRequired,
-  wellplateChanged: PropTypes.bool.isRequired,
+  wellplate: PropTypes.shape({
+    id: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.number
+    ]).isRequired,
+    changed: PropTypes.bool.isRequired,
+    body: PropTypes.arrayOf(
+      PropTypes.shape({
+        id: PropTypes.string.isRequired,
+        title: PropTypes.string.isRequired,
+        type: PropTypes.string.isRequired,
+      })
+    ).isRequired,
+    attachments: PropTypes.arrayOf(
+      PropTypes.shape({
+        id: PropTypes.oneOfType([
+          PropTypes.string,
+          PropTypes.number
+        ]).isRequired,
+        aasm_state: PropTypes.string.isRequired,
+        content_type: PropTypes.string.isRequired,
+        filename: PropTypes.string.isRequired,
+        filesize: PropTypes.number.isRequired,
+        identifier: PropTypes.oneOfType([
+          PropTypes.string,
+          PropTypes.number
+        ]).isRequired,
+        thumb: PropTypes.bool.isRequired
+      })
+    )
+  }).isRequired,
+  attachments: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.number
+    ]).isRequired,
+    aasm_state: PropTypes.string.isRequired,
+    content_type: PropTypes.string.isRequired,
+    filename: PropTypes.string.isRequired,
+    filesize: PropTypes.number.isRequired,
+    identifier: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.number
+    ]).isRequired,
+    thumb: PropTypes.bool.isRequired
+  })),
   onDrop: PropTypes.func.isRequired,
   onDelete: PropTypes.func.isRequired,
   onUndoDelete: PropTypes.func.isRequired,
   onDownload: PropTypes.func.isRequired,
-  onImport: PropTypes.func.isRequired,
   onEdit: PropTypes.func.isRequired,
-  readOnly: PropTypes.bool.isRequired
+  readOnly: PropTypes.bool.isRequired,
+  onImport: PropTypes.func.isRequired,
 };
 
 WellplateDetailsAttachments.defaultProps = {
+  attachments: [],
 };
diff --git a/app/packs/src/apps/mydb/elements/list/AttachmentList.js b/app/packs/src/apps/mydb/elements/list/AttachmentList.js
new file mode 100644
index 0000000000..62c6ab1905
--- /dev/null
+++ b/app/packs/src/apps/mydb/elements/list/AttachmentList.js
@@ -0,0 +1,227 @@
+import React from 'react';
+import {
+  Button, OverlayTrigger, Tooltip, Dropdown, MenuItem, Glyphicon, Overlay, ButtonGroup
+} from 'react-bootstrap';
+import ImageAnnotationEditButton from 'src/apps/mydb/elements/details/researchPlans/ImageAnnotationEditButton';
+import { values } from 'lodash';
+import SpinnerPencilIcon from 'src/components/common/SpinnerPencilIcon';
+import Dropzone from 'react-dropzone';
+
+export const isImageFile = (fileName) => {
+  const acceptedImageTypes = ['png', 'jpg', 'bmp', 'tif', 'svg', 'jpeg', 'tiff'];
+  const dataType = fileName.split('.').pop().toLowerCase();
+  return acceptedImageTypes.includes(dataType);
+};
+
+export const formatFileSize = (sizeInB) => {
+  if (sizeInB >= 1024 * 1024) {
+    return `${(sizeInB / (1024 * 1024)).toFixed(2)} MB`;
+  } if (sizeInB >= 1024) {
+    return `${(sizeInB / 1024).toFixed(1)} kB`;
+  }
+  return `${sizeInB} bytes`;
+};
+
+export const downloadButton = (attachment, handleDownloadOriginal, handleDownloadAnnotated) => (
+  <Dropdown id={`dropdown-download-${attachment.id}`}>
+    <Dropdown.Toggle style={{ height: '30px' }} bsSize="xs" bsStyle="primary">
+      <i className="fa fa-download" aria-hidden="true" />
+    </Dropdown.Toggle>
+    <Dropdown.Menu>
+      <MenuItem eventKey="1" onClick={() => handleDownloadOriginal(attachment)}>
+        Download Original
+      </MenuItem>
+      <MenuItem
+        eventKey="2"
+        onClick={() => handleDownloadAnnotated(attachment)}
+        disabled={!isImageFile(attachment.filename) || attachment.isNew}
+      >
+        Download Annotated
+      </MenuItem>
+    </Dropdown.Menu>
+  </Dropdown>
+);
+
+export const removeButton = (attachment, onDelete, readOnly) => (
+  <OverlayTrigger placement="top" overlay={<Tooltip id="delete_tooltip">Delete attachment</Tooltip>}>
+    <Button
+      bsSize="xs"
+      bsStyle="danger"
+      className="attachment-button-size"
+      onClick={() => onDelete(attachment)}
+      disabled={readOnly}
+    >
+      <i className="fa fa-trash-o" aria-hidden="true" />
+    </Button>
+  </OverlayTrigger>
+);
+
+export const moveBackButton = (attachment, onBack, readOnly) => (
+  <OverlayTrigger placement="top" overlay={<Tooltip id="back_tooltip">Move attachment back to inbox</Tooltip>}>
+    <Button
+      bsSize="xs"
+      bsStyle="danger"
+      className="attachment-button-size"
+      onClick={() => onBack(attachment)}
+      disabled={readOnly}
+    >
+      <i className="fa fa-backward" aria-hidden="true" />
+    </Button>
+  </OverlayTrigger>
+
+);
+
+export const annotateButton = (attachment, parent) => (
+  <ImageAnnotationEditButton
+    parent={parent}
+    attachment={attachment}
+    className={`attachment-button-size ${!isImageFile(attachment.filename) ? 'attachment-gray-button' : ''}`}
+    disabled={!isImageFile(attachment.filename)}
+  />
+);
+
+export const editButton = (
+  attachment,
+  extension,
+  attachmentEditor,
+  isEditing,
+  styleEditorBtn,
+  editDisable,
+  handleEdit
+) => {
+  const editorTooltip = (exts) => (
+    <Tooltip id="editor_tooltip">
+      {editDisable ? (
+        <span>
+          Editing is only available for these files:
+          <strong>{exts}</strong>
+        </span>
+      ) : (
+        <span>Edit attachment</span>
+      )}
+    </Tooltip>
+  );
+  return (
+    <OverlayTrigger placement="top" overlay={editorTooltip(values(extension).join(','))}>
+      <Button
+        className={`attachment-button-size ${editDisable ? 'attachment-gray-button' : ''}`}
+        style={{ display: styleEditorBtn }}
+        bsSize="xs"
+        bsStyle="success"
+        disabled={editDisable}
+        onClick={() => handleEdit(attachment)}
+      >
+        <SpinnerPencilIcon spinningLock={!attachmentEditor || isEditing} />
+      </Button>
+    </OverlayTrigger>
+  );
+};
+
+export const importButton = (
+  attachment,
+  showImportConfirm,
+  importDisabled,
+  importButtonRefs,
+  showImportConfirmFunction,
+  hideImportConfirmFunction,
+  confirmAttachmentImportFunction
+) => {
+  const show = showImportConfirm[attachment.id];
+  const extension = attachment.filename.split('.').pop();
+
+  const importTooltip = importDisabled || extension !== 'xlsx'
+    ? <Tooltip id="import_tooltip">Invalid type for import or element must be saved before import</Tooltip>
+    : <Tooltip id="import_tooltip">Import as element data</Tooltip>;
+
+  const confirmTooltip = (
+    <Tooltip placement="bottom" className="in" id="tooltip-bottom">
+      Import data from Spreadsheet? This will overwrite existing data.
+      <br />
+      <ButtonGroup>
+        <Button
+          bsStyle="success"
+          bsSize="xs"
+          onClick={() => confirmAttachmentImportFunction(attachment)}
+        >
+          Yes
+        </Button>
+        <Button
+          bsStyle="warning"
+          bsSize="xs"
+          onClick={() => hideImportConfirmFunction(attachment.id)}
+        >
+          No
+        </Button>
+      </ButtonGroup>
+    </Tooltip>
+  );
+
+  return (
+    <div>
+      <OverlayTrigger placement="top" overlay={importTooltip}>
+        <div style={{ float: 'right' }}>
+          <Button
+            bsSize="xs"
+            bsStyle="success"
+            disabled={importDisabled || extension !== 'xlsx'}
+            ref={(ref) => { importButtonRefs[attachment.id] = ref; }}
+            className={`attachment-button-size ${importDisabled
+              || extension !== 'xlsx' ? 'attachment-gray-button' : ''}`}
+            onClick={() => showImportConfirmFunction(attachment.id)}
+          >
+            <Glyphicon glyph="import" />
+          </Button>
+        </div>
+      </OverlayTrigger>
+      <Overlay
+        show={show}
+        placement="bottom"
+        rootClose
+        onHide={() => hideImportConfirmFunction(attachment.id)}
+        target={importButtonRefs[attachment.id]}
+      >
+        {confirmTooltip}
+      </Overlay>
+    </div>
+  );
+};
+
+export const customDropzone = (onDrop) => (
+  <Dropzone onDrop={onDrop} className="attachment-dropzone">
+    Drop files here, or click to upload.
+  </Dropzone>
+);
+
+export const sortingAndFilteringUI = (
+  sortDirection,
+  handleSortChange,
+  toggleSortDirection,
+  handleFilterChange
+) => (
+  <div style={{
+    marginBottom: '25px', marginTop: '25px', display: 'flex', justifyContent: 'space-between'
+  }}
+  >
+    <div style={{ verticalAlign: 'center' }}>
+      <label style={{ marginRight: '10px' }}>Sort by: </label>
+      <select onChange={handleSortChange} className="sorting-row-style" style={{ width: '100px' }}>
+        <option value="name">Name</option>
+        <option value="size">Size</option>
+        <option value="date">Date</option>
+      </select>
+      <Button onClick={toggleSortDirection} className="sort-icon-style">
+        {sortDirection === 'asc' ? '▲' : '▼'}
+      </Button>
+    </div>
+    <div style={{ verticalAlign: 'center' }}>
+      <label style={{ marginRight: '10px' }}>Filter: </label>
+      <input
+        type="text"
+        placeholder="Filter by name..."
+        onChange={handleFilterChange}
+        className="sorting-row-style"
+        style={{ width: '250px' }}
+      />
+    </div>
+  </div>
+);
diff --git a/app/packs/src/components/common/HyperLinksSection.js b/app/packs/src/components/common/HyperLinksSection.js
index c691b443f4..3324e05a93 100644
--- a/app/packs/src/components/common/HyperLinksSection.js
+++ b/app/packs/src/components/common/HyperLinksSection.js
@@ -1,7 +1,9 @@
+/* eslint-disable react/destructuring-assignment */
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { FormGroup, FormControl, Table, ListGroup, ListGroupItem, Button } from 'react-bootstrap';
-
+import {
+  FormGroup, FormControl, ListGroup, ListGroupItem, Button
+} from 'react-bootstrap';
 
 export default class HyperLinksSection extends Component {
   constructor(props) {
@@ -18,13 +20,41 @@ export default class HyperLinksSection extends Component {
   handleLinkInputChange(event) {
     const { value } = event.target;
 
-    this.setState({ link: value })
+    this.setState({ link: value });
   }
 
   handleAddLink() {
     const { link } = this.state;
     this.props.onAddLink(link);
-    this.setState({ link: null })
+    this.setState({ link: null });
+  }
+
+  handleRemoveLink(link) {
+    this.props.onRemoveLink(link);
+  }
+
+  removeLinkButton(link) {
+    const { readOnly, disabled } = this.props;
+    if (!readOnly && !disabled) {
+      return (
+        <Button bsSize="xsmall" bsStyle="danger" onClick={() => this.handleRemoveLink(link)}>
+          <i className="fa fa-trash-o" />
+        </Button>
+      );
+    }
+    return null;
+  }
+
+  listLinkItem(link) {
+    return (
+      <div style={{
+        display: 'flex', justifyContent: 'space-between', alignItems: 'center', margin: '10px'
+      }}
+      >
+        <a href={link} style={{ cursor: 'pointer' }} target="_blank" rel="noreferrer">{link}</a>
+        {this.removeLinkButton(link)}
+      </div>
+    );
   }
 
   renderHyperLinkInput() {
@@ -32,15 +62,15 @@ export default class HyperLinksSection extends Component {
     const { disabled,readOnly } = this.props;
 
     if (disabled) {
-      return <div></div>;
+      return <div />;
     }
 
     return (
-      <FormGroup controlId='hyperlink' className="form-inline" >
+      <FormGroup controlId="hyperlink" className="form-inline">
         <FormControl
           type="text"
           value={link || ''}
-          onChange={event => this.handleLinkInputChange(event)}
+          onChange={(event) => this.handleLinkInputChange(event)}
           bsClass="form-control"
           bsSize="small"
           disabled={disabled || readOnly}
@@ -62,7 +92,7 @@ export default class HyperLinksSection extends Component {
 
   renderHyperLinkList() {
     const { data } = this.props;
-    let hyperLinks = data
+    let hyperLinks = data;
     if (typeof hyperLinks === 'string' || hyperLinks instanceof String) {
       hyperLinks = JSON.parse(hyperLinks);
     }
@@ -72,59 +102,24 @@ export default class HyperLinksSection extends Component {
         <div className="list">
           <ListGroup>
             {
-              hyperLinks.map((link) => {
-                return (
-                  <ListGroupItem style={{ margin: 'unset', padding: 'unset' }}>
-                    {this.listLinkItem(link)}
-                  </ListGroupItem>
-                );
-              })
+              hyperLinks.map((link) => (
+                <ListGroupItem key={link} style={{ margin: 'unset', padding: 'unset' }}>
+                  {this.listLinkItem(link)}
+                </ListGroupItem>
+              ))
             }
           </ListGroup>
         </div>
       );
     }
-    return (
-      <div style={{ padding: 15 }}>
-        There are currently no Datasets.<br />
-      </div>
-    );
-  }
-
-  handleRemoveLink(link) {
-    this.props.onRemoveLink(link);
-  }
-
-  removeLinkButton(link) {
-    const { readOnly, disabled } = this.props;
-    if (!readOnly && !disabled) {
-      return (
-        <Button bsSize="xsmall" bsStyle="danger" onClick={() => this.handleRemoveLink(link)}>
-          <i className="fa fa-trash-o" />
-        </Button>
-      );
-    }
-  }
-
-  listLinkItem(link) {
-    return (
-      <Table className="borderless" style={{ marginBottom: 'unset' }}>
-        <tbody>
-          <tr>
-            <td style={{ verticalAlign: 'middle' }}>
-              <a href={link} style={{ cursor: 'pointer' }} target="_blank">{link}</a><br />
-              {this.removeLinkButton(link)}
-            </td>
-          </tr>
-        </tbody>
-      </Table>
-    );
+    return null;
   }
 
   render() {
     return (
       <div>
-        <label>Hyperlinks: </label>
+        {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
+        <label>Hyperlinks</label>
         {this.renderHyperLinkInput()}
         {this.renderHyperLinkList()}
       </div>
@@ -137,9 +132,11 @@ HyperLinksSection.propTypes = {
   onAddLink: PropTypes.func.isRequired,
   onRemoveLink: PropTypes.func.isRequired,
   disabled: PropTypes.bool,
-  readOnly: PropTypes.bool.isRequired
+  readOnly: PropTypes.bool,
+};
+
+HyperLinksSection.defaultProps = {
+  disabled: false,
+  readOnly: false,
 };
 
-HyperLinksSection.defaultProps ={
-  readOnly: false
-}
diff --git a/app/packs/src/components/common/ImageModal.js b/app/packs/src/components/common/ImageModal.js
index 4eb4c2bc84..feaa321627 100644
--- a/app/packs/src/components/common/ImageModal.js
+++ b/app/packs/src/components/common/ImageModal.js
@@ -1,4 +1,5 @@
-import React, { Component, useState, useEffect } from 'react';
+/* eslint-disable react/destructuring-assignment */
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { Modal, Button } from 'react-bootstrap';
 import AttachmentFetcher from 'src/fetchers/AttachmentFetcher';
@@ -34,30 +35,44 @@ export default class ImageModal extends Component {
     }
   }
 
+  shouldComponentUpdate(nextState) {
+    if (this.state.numOfPages === nextState.numOfPages
+      && this.state.numOfPages !== 0
+      && this.state.pageIndex === nextState.pageIndex
+      && this.state.showModal === nextState.showModal) {
+      return false;
+    }
+
+    return true;
+  }
+
   componentDidUpdate(prevProps) {
-    if (this.props.popObject.fetchNeeded &&
-      (this.props.popObject.fetchId !== prevProps.popObject.fetchId)) {
+    if (this.props.popObject.fetchNeeded
+      && (this.props.popObject.fetchId !== prevProps.popObject.fetchId)) {
       this.fetchImage();
     }
   }
 
-  onDocumentLoadSuccess(numPages) {
-    this.setState({ numOfPages: numPages });
+  handleModalClose(e) {
+    stopEvent(e);
+    this.setState({ showModal: false });
   }
 
-  shouldComponentUpdate(nextProps, nextState) {
-    if (this.state.numOfPages == nextState.numOfPages
-      && this.state.numOfPages != 0
-      && this.state.pageIndex == nextState.pageIndex
-      && this.state.showModal == nextState.showModal) {
-      return false;
-    }
+  handleModalShow(e) {
+    stopEvent(e);
+    this.setState({ showModal: true });
+  }
 
-    return true;
+  handleImageError() {
+    this.setState({ fetchSrc: this.props.previewObject.src });
+  }
+
+  onDocumentLoadSuccess(numPages) {
+    this.setState({ numOfPages: numPages });
   }
 
   changePage(offset) {
-    this.setState({ pageIndex: (this.state.pageIndex + offset) });
+    this.setState((prevState) => ({ pageIndex: prevState.pageIndex + offset }));
   }
 
   previousPage() {
@@ -71,36 +86,36 @@ export default class ImageModal extends Component {
   fetchImage() {
     AttachmentFetcher.fetchImageAttachment({ id: this.props.popObject.fetchId })
       .then((result) => {
-        if (result.data != null) { this.setState({ fetchSrc: result.data, isPdf: (result.type === 'application/pdf') }); }
+        if (result.data != null) {
+          this.setState({ fetchSrc: result.data, isPdf: (result.type === 'application/pdf') });
+        }
       });
   }
 
-  handleModalClose(e) {
-    stopEvent(e);
-    this.setState({ showModal: false });
-  }
-
-  handleModalShow(e) {
-    stopEvent(e);
-    this.setState({ showModal: true });
-  }
-
-  handleImageError() {
-    this.setState({ fetchSrc: this.props.previewObject.src });
-  }
-
   render() {
     const {
       hasPop, previewObject, popObject, imageStyle
     } = this.props;
     const { pageIndex, numOfPages } = this.state;
     if (!hasPop) {
-      return (<div className="preview-table"><img src={previewObject.src} alt="" style={{ cursor: 'default', ...imageStyle }} /></div>);
+      return (
+        <div
+          className="preview-table"
+        >
+          <img src={previewObject.src} alt="" style={{ cursor: 'default', ...imageStyle }} />
+        </div>
+      );
     }
 
     return (
       <div>
-        <div className="preview-table" onClick={this.handleModalShow}>
+        <div
+          className="preview-table"
+          onClick={this.handleModalShow}
+          onKeyPress={this.handleModalShow}
+          role="button"
+          tabIndex={0}
+        >
           <img src={previewObject.src} alt="" style={{ cursor: 'pointer', ...imageStyle }} />
         </div>
         <Modal show={this.state.showModal} onHide={this.handleModalClose} dialogClassName="noticeModal">
@@ -108,34 +123,50 @@ export default class ImageModal extends Component {
             <Modal.Title>{popObject.title}</Modal.Title>
           </Modal.Header>
           <Modal.Body style={{ overflow: 'auto', position: 'relative' }}>
-            {this.state.isPdf ?
-              <div>
-                <Document file={{ url: this.state.fetchSrc }}
-                  onLoadSuccess={(pdf) => this.onDocumentLoadSuccess(pdf.numPages)}>
-                  <Page pageNumber={pageIndex} />
-                </Document>
+            {this.state.isPdf
+              ? (
                 <div>
-                  <p>
-                    Page {pageIndex || (numOfPages ? 1 : '--')} of {numOfPages || '--'}
-                  </p>
-                  <button
-                    type="button"
-                    disabled={pageIndex <= 1}
-                    onClick={() => this.previousPage()}
-                  >
-                    Previous
-                  </button>
-                  <button
-                    type="button"
-                    disabled={pageIndex >= numOfPages}
-                    onClick={() => this.nextPage()}
+                  <Document
+                    file={{ url: this.state.fetchSrc }}
+                    onLoadSuccess={(pdf) => this.onDocumentLoadSuccess(pdf.numPages)}
                   >
-                    Next
-                  </button>
+                    <Page pageNumber={pageIndex} />
+                  </Document>
+                  <div>
+                    <p>
+                      Page
+                      {' '}
+                      {pageIndex || (numOfPages ? 1 : '--')}
+                      {' '}
+                      of
+                      {' '}
+                      {numOfPages || '--'}
+                    </p>
+                    <button
+                      type="button"
+                      disabled={pageIndex <= 1}
+                      onClick={() => this.previousPage()}
+                    >
+                      Previous
+                    </button>
+                    <button
+                      type="button"
+                      disabled={pageIndex >= numOfPages}
+                      onClick={() => this.nextPage()}
+                    >
+                      Next
+                    </button>
+                  </div>
                 </div>
-              </div>
-              :
-              <img src={this.state.fetchSrc} style={{ display: 'block', maxHeight: '100%', maxWidth: '100%' }} alt="" onError={this.handleImageError} />}
+              )
+              : (
+                <img
+                  src={this.state.fetchSrc}
+                  style={{ display: 'block', maxHeight: '100%', maxWidth: '100%' }}
+                  alt=""
+                  onError={this.handleImageError}
+                />
+              )}
           </Modal.Body>
           <Modal.Footer>
             <Button bsStyle="primary" onClick={this.handleModalClose} className="pull-left">Close</Button>
@@ -159,3 +190,7 @@ ImageModal.propTypes = {
     fetchId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   }).isRequired,
 };
+
+ImageModal.defaultProps = {
+  imageStyle: {},
+};
diff --git a/app/packs/src/components/container/AttachmentDropzone.js b/app/packs/src/components/container/AttachmentDropzone.js
index 348120e0c9..5d45e79ed7 100644
--- a/app/packs/src/components/container/AttachmentDropzone.js
+++ b/app/packs/src/components/container/AttachmentDropzone.js
@@ -5,32 +5,36 @@ import DragDropItemTypes from 'src/components/DragDropItemTypes';
 import InboxActions from 'src/stores/alt/actions/InboxActions';
 
 const dataTarget = {
-  canDrop(props, monitor) {
+  canDrop(monitor) {
     const itemType = monitor.getItemType();
-    if(itemType == DragDropItemTypes.DATA ||
-      itemType == DragDropItemTypes.UNLINKED_DATA ||
-      itemType == DragDropItemTypes.DATASET){
+    if (itemType == DragDropItemTypes.DATA
+      || itemType == DragDropItemTypes.UNLINKED_DATA
+      || itemType == DragDropItemTypes.DATASET) {
       return true;
     }
+    return false;
   },
 
   drop(props, monitor) {
     const item = monitor.getItem();
     const itemType = monitor.getItemType();
-    const {dataset_container, handleAddWithAttachments} = props;
+    const { handleAddWithAttachments } = props;
 
     switch (itemType) {
       case DragDropItemTypes.DATA:
-        handleAddWithAttachments([item.attachment])
-        InboxActions.removeAttachmentFromList(item.attachment)
+        handleAddWithAttachments([item.attachment]);
+        InboxActions.removeAttachmentFromList(item.attachment);
         break;
       case DragDropItemTypes.UNLINKED_DATA:
-        handleAddWithAttachments([item.attachment])
-        InboxActions.removeUnlinkedAttachmentFromList(item.attachment)
+        handleAddWithAttachments([item.attachment]);
+        InboxActions.removeUnlinkedAttachmentFromList(item.attachment);
         break;
       case DragDropItemTypes.DATASET:
-        handleAddWithAttachments(item.dataset.attachments)
-        InboxActions.removeDatasetFromList(item.dataset)
+        handleAddWithAttachments(item.dataset.attachments);
+        InboxActions.removeDatasetFromList(item.dataset);
+        break;
+      default:
+        console.warn(`Unhandled itemType: ${itemType}`);
         break;
     }
   }
@@ -42,41 +46,37 @@ const collectTarget = (connect, monitor) => ({
   canDrop: monitor.canDrop()
 });
 
-class AttachmentDropzone extends Component{
-  constructor(props) {
-    super(props);
-  }
-
+class AttachmentDropzone extends Component {
   renderOverlay(color) {
-      return (
-        <div style={{
-          position: 'absolute',
-          top: 0,
-          left: 0,
-          height: '100%',
-          width: '100%',
-          zIndex: 1,
-          opacity: 0.5,
-          backgroundColor: color,
-        }} />
-      );
-    }
+    return (
+      <div style={{
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        height: '100%',
+        width: '100%',
+        zIndex: 1,
+        opacity: 0.5,
+        backgroundColor: color,
+      }}
+      />
+    );
+  }
 
-  render(){
-    const {connectDropTarget, isOver, canDrop} = this.props;
+  render() {
+    const { connectDropTarget, isOver, canDrop } = this.props;
 
     return connectDropTarget(
       <div>
-      <i style={{color: 'gray', padding: 2, textAlign: 'center'}}>
-      Drop File(s) from the inbox
-      {isOver && canDrop && this.renderOverlay('green')}
-      </i>
+        <i style={{ color: 'gray', padding: 2, textAlign: 'center' }}>
+          Drop File(s) from the inbox
+          {isOver && canDrop && this.renderOverlay('green')}
+        </i>
       </div>
     );
   }
 }
 
-
 export default DropTarget([DragDropItemTypes.DATA, DragDropItemTypes.UNLINKED_DATA, DragDropItemTypes.DATASET], dataTarget, collectTarget)(AttachmentDropzone);
 
 AttachmentDropzone.propTypes = {
diff --git a/app/packs/src/components/container/ContainerComponent.js b/app/packs/src/components/container/ContainerComponent.js
index b1e3aaf16c..47cc933eeb 100644
--- a/app/packs/src/components/container/ContainerComponent.js
+++ b/app/packs/src/components/container/ContainerComponent.js
@@ -1,3 +1,4 @@
+/* eslint-disable react/destructuring-assignment */
 import React, { Component } from 'react';
 import { Map } from 'immutable';
 import PropTypes from 'prop-types';
@@ -56,10 +57,6 @@ export default class ContainerComponent extends Component {
     TextTemplateStore.unlisten(this.handleTemplateChange);
   }
 
-  onChange(container) {
-    this.props.onChange(container);
-  }
-
   handleTemplateChange() {
     const { templateType } = this.props;
 
@@ -102,43 +99,48 @@ export default class ContainerComponent extends Component {
   }
 
   // eslint-disable-next-line class-methods-use-this
-  updateTextTemplates(textTemplate) {
-    const { templateType } = this.props;
-    TextTemplateActions.updateTextTemplates(templateType, textTemplate);
-  }
 
   handleAddLink(link) {
     const { container } = this.state;
-    let hyperlinks = container.extended_metadata['hyperlinks'];
+    let { hyperlinks } = container.extended_metadata;
     if (hyperlinks == null) {
-      container.extended_metadata['hyperlinks'] = [link];
+      container.extended_metadata.hyperlinks = [link];
     } else {
       if (typeof hyperlinks === 'string' || hyperlinks instanceof String) {
         hyperlinks = JSON.parse(hyperlinks);
       }
 
       hyperlinks.push(link);
-      container.extended_metadata['hyperlinks'] = hyperlinks;
+      container.extended_metadata.hyperlinks = hyperlinks;
     }
     this.setState({ container });
   }
 
   handleRemoveLink(link) {
     const { container } = this.state;
-    let hyperlinks = container.extended_metadata['hyperlinks'];
+    let { hyperlinks } = container.extended_metadata;
     if (typeof hyperlinks === 'string' || hyperlinks instanceof String) {
       hyperlinks = JSON.parse(hyperlinks);
     }
 
-    var index = hyperlinks.indexOf(link);
+    const index = hyperlinks.indexOf(link);
     if (index !== -1) {
       hyperlinks.splice(index, 1);
-      container.extended_metadata['hyperlinks'] = hyperlinks;
+      container.extended_metadata.hyperlinks = hyperlinks;
     }
 
     this.setState({ container });
   }
 
+  onChange(container) {
+    this.props.onChange(container);
+  }
+
+  updateTextTemplates(textTemplate) {
+    const { templateType } = this.props;
+    TextTemplateActions.updateTextTemplates(templateType, textTemplate);
+  }
+
   render() {
     const { container, textTemplate } = this.state;
     const { readOnly, disabled } = this.props;
@@ -164,6 +166,7 @@ export default class ContainerComponent extends Component {
     return (
       <div>
         <Col md={8}>
+          {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
           <label>Name</label>
           <FormControl
             type="text"
@@ -171,16 +174,18 @@ export default class ContainerComponent extends Component {
             value={container.name || '***'}
             // eslint-disable-next-line react/jsx-no-bind
             onChange={this.handleInputChange.bind(this, 'name')}
-            disabled={readOnly || disabled} />
+            disabled={readOnly || disabled}
+          />
         </Col>
         <Col md={4}>
           <div style={{ marginBottom: 11 }}>
+            {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
             <label>Status</label>
             <Select
-              name='status'
+              name="status"
               multi={false}
               options={confirmOptions}
-              value={container.extended_metadata['status']}
+              value={container.extended_metadata.status}
               disabled={readOnly || disabled}
               // eslint-disable-next-line react/jsx-no-bind
               onChange={this.handleInputChange.bind(this, 'status')}
@@ -193,7 +198,7 @@ export default class ContainerComponent extends Component {
             <OlsTreeSelect
               selectName={this.props.ontologyName}
               selectedValue={container.extended_metadata.kind || ''}
-              onSelectChange={event => this.handleInputChange('kind', event)}
+              onSelectChange={(event) => this.handleInputChange('kind', event)}
               selectedDisable={readOnly || disabled || false}
             />
           </div>
@@ -216,6 +221,7 @@ export default class ContainerComponent extends Component {
           </FormGroup>
         </Col>
         <Col md={12}>
+          {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
           <label>Datasets</label>
           <ContainerDatasets
             container={container}
@@ -225,13 +231,13 @@ export default class ContainerComponent extends Component {
           />
         </Col>
         <Col md={12}>
-          <HyperLinksSection 
-            data={container.extended_metadata['hyperlinks'] ?? []} 
-            onAddLink={this.handleAddLink} 
+          <HyperLinksSection
+            data={container.extended_metadata.hyperlinks ?? []}
+            onAddLink={this.handleAddLink}
             onRemoveLink={this.handleRemoveLink}
             readOnly={readOnly}
-            disabled={disabled}>  
-          </HyperLinksSection>
+            disabled={disabled}
+          />
         </Col>
       </div>
     );
@@ -249,4 +255,12 @@ ContainerComponent.propTypes = {
   readOnly: PropTypes.bool,
   disabled: PropTypes.bool,
   container: PropTypes.object
-}
+};
+
+ContainerComponent.defaultProps = {
+  templateType: '',
+  onChange: () => {},
+  readOnly: false,
+  disabled: false,
+  container: {}
+};
diff --git a/app/packs/src/components/container/ContainerDataset.js b/app/packs/src/components/container/ContainerDataset.js
deleted file mode 100644
index d7bea9ca3d..0000000000
--- a/app/packs/src/components/container/ContainerDataset.js
+++ /dev/null
@@ -1,566 +0,0 @@
-import React, { Component } from 'react';
-import {
-  Row,
-  Col,
-  FormGroup,
-  FormControl,
-  ControlLabel,
-  Table,
-  ListGroup,
-  ListGroupItem,
-  Button,
-  Overlay,
-} from 'react-bootstrap';
-import Dropzone from 'react-dropzone';
-import debounce from 'es6-promise-debounce';
-import { findIndex, cloneDeep } from 'lodash';
-import { absOlsTermId } from 'chem-generic-ui';
-
-import Utils from 'src/utilities/Functions';
-import { formatBytes } from 'src/utilities/MathUtils';
-import Attachment from 'src/models/Attachment';
-import AttachmentFetcher from 'src/fetchers/AttachmentFetcher';
-import UserStore from 'src/stores/alt/stores/UserStore';
-import GenericDS from 'src/models/GenericDS';
-import GenericDSDetails from 'src/components/generic/GenericDSDetails';
-import InboxActions from 'src/stores/alt/actions/InboxActions';
-import InstrumentsFetcher from 'src/fetchers/InstrumentsFetcher';
-import ChildOverlay from 'src/components/managingActions/ChildOverlay';
-import HyperLinksSection from 'src/components/common/HyperLinksSection';
-import ImageAnnotationEditButton from 'src/apps/mydb/elements/details/researchPlans/ImageAnnotationEditButton';
-import ImageAnnotationModalSVG from 'src/apps/mydb/elements/details/researchPlans/ImageAnnotationModalSVG';
-
-export default class ContainerDataset extends Component {
-  constructor(props) {
-    super();
-    let dataset_container = Object.assign({}, props.dataset_container);
-    this.state = {
-      dataset_container: dataset_container,
-      instruments: null,
-      valueBeforeFocus: null,
-      timeoutReference: null,
-      link: null,
-    };
-
-    this.timeout = 6e2; // 600ms timeout for input typing
-    this.doneInstrumentTyping = this.doneInstrumentTyping.bind(this);
-    this.handleInputChange = this.handleInputChange.bind(this);
-    this.handleAddLink = this.handleAddLink.bind(this);
-    this.handleRemoveLink = this.handleRemoveLink.bind(this);
-    this.handleDSChange = this.handleDSChange.bind(this);
-  }
-
-  createAttachmentPreviews(dataset_container) {
-    const { attachments } = dataset_container;
-    const newAttachments = attachments.filter(
-      attachment => !attachment.preview
-    );
-
-    const updatedAttachments = newAttachments.map(attachment => {
-      return attachment.thumb
-        ? AttachmentFetcher.fetchThumbnail({ id: attachment.id }).then(
-            result => {
-              if (result != null) {
-                attachment.preview = `data:image/png;base64,${result}`;
-              }
-              return attachment;
-            }
-          )
-        : attachment;
-    });
-
-    Promise.all(updatedAttachments).then(attachments => {
-      dataset_container.attachments = attachments;
-
-      this.setState({
-        dataset_container: dataset_container,
-      });
-    });
-  }
-
-  handleInputChange(type, event) {
-    const { dataset_container } = this.state;
-    const { value } = event.target;
-    switch (type) {
-      case 'name':
-        dataset_container.name = value;
-        break;
-      case 'instrument':
-        dataset_container.extended_metadata['instrument'] = value;
-        break;
-      case 'description':
-        dataset_container.description = value;
-        break;
-      case 'dataset':
-        dataset_container.dataset = value;
-        break;
-    }
-    this.setState({ dataset_container });
-  }
-
-  handleDSChange(ds) {
-    this.handleInputChange('dataset', { target: { value: ds } });
-  }
-
-  handleFileDrop(files) {
-    const { dataset_container } = this.state;
-    let attachments = files.map(f => Attachment.fromFile(f));
-    let first_attach = dataset_container.attachments.length == 0;
-    dataset_container.attachments =
-      dataset_container.attachments.concat(attachments);
-    if (first_attach) {
-      let attachment_list = dataset_container.attachments;
-      let attach_name = attachment_list[attachment_list.length - 1].filename;
-      let splitted = attach_name.split('.');
-      if (splitted.length > 1) {
-        splitted.splice(-1, 1);
-        attach_name = splitted.join('.');
-      }
-      dataset_container.name = attach_name;
-    }
-    this.setState({ dataset_container });
-  }
-
-  handleAttachmentDownload(attachment) {
-    Utils.downloadFile({
-      contents: `/api/v1/attachments/${attachment.id}`,
-      name: attachment.filename,
-    });
-  }
-
-  handleAttachmentRemove(attachment) {
-    const { dataset_container } = this.state;
-    const index = dataset_container.attachments.indexOf(attachment);
-    dataset_container.attachments[index].is_deleted = true;
-    this.setState({ dataset_container });
-  }
-
-  handleAttachmentBackToInbox(attachment) {
-    const { onChange } = this.props;
-    const { dataset_container } = this.state;
-    const index = dataset_container.attachments.indexOf(attachment);
-    if (index != -1) {
-      InboxActions.backToInbox(attachment);
-      dataset_container.attachments.splice(index, 1);
-      onChange(dataset_container);
-    }
-  }
-
-  handleUndo(attachment) {
-    const { dataset_container } = this.state;
-    const index = dataset_container.attachments.indexOf(attachment);
-
-    dataset_container.attachments[index].is_deleted = false;
-    this.setState({ dataset_container });
-  }
-
-  handleSave() {
-    const { dataset_container } = this.state;
-    const { onChange, onModalHide } = this.props;
-    onChange(dataset_container);
-    onModalHide();
-  }
-
-  listGroupItem(attachment) {
-    const { disabled } = this.props;
-    const preview = attachment.preview ? (
-      <tr>
-        <td rowSpan="2" width="128">
-          <img style={{ maxWidth: '100%', height: 'auto', display: 'block' }} src={attachment.preview} alt="" />
-        </td>
-      </tr>
-    ) : (
-      <tr>
-        <td rowSpan="2" width="128">
-          <img style={{ width: '128px', display: 'block' }} alt="" />
-        </td>
-      </tr>
-    );
-    if (attachment.is_deleted) {
-      return (
-        <Table className="borderless" style={{ marginBottom: 'unset', tableLayout: 'fixed' }}>
-          <tbody>
-            {preview}
-            <tr>
-              <td>
-                <strike>{attachment.filename}</strike>
-              </td>
-              <td>
-                <Button
-                  bsSize="xsmall"
-                  bsStyle="danger"
-                  onClick={() => this.handleUndo(attachment)}
-                  disabled={disabled}
-                >
-                  <i className="fa fa-undo" aria-hidden="true" />
-                </Button>
-              </td>
-            </tr>
-          </tbody>
-        </Table>
-      );
-    }
-    return (
-      <Table className="borderless" style={{ marginBottom: 'unset', tableLayout: 'fixed' }}>
-        <tbody>
-          {preview}
-          <tr>
-            <td style={{  wordWrap: 'break-word' }}>
-              <a onClick={() => this.handleAttachmentDownload(attachment)} style={{ cursor: 'pointer' }}>{attachment.filename}</a>
-            </td>
-            <td style={{ wordWrap: 'break-word' }}><span>{formatBytes(attachment.filesize)}</span></td>
-            <td style={{ wordWrap: 'break-word' }}>
-              {this.removeAttachmentButton(attachment)}
-              {this.attachmentBackToInboxButton(attachment)}
-            </td>
-          </tr>
-        </tbody>
-      </Table>
-    );
-  }
-
-  attachments() {
-    const { dataset_container } = this.state;
-    if (
-      dataset_container.attachments &&
-      dataset_container.attachments.length > 0
-    ) {
-      return (
-        <div className="list">
-          <ListGroup>
-            {dataset_container.attachments.map(attachment => {
-              return (
-                <ListGroupItem
-                  key={attachment.id}
-                  style={{ margin: 'unset', padding: 'unset' }}
-                >
-                  {this.listGroupItem(attachment)}
-                </ListGroupItem>
-              );
-            })}
-          </ListGroup>
-        </div>
-      );
-    }
-    return (
-      <div style={{ padding: 15 }}>
-        There are currently no Datasets.
-        <br />
-      </div>
-    );
-  }
-
-  removeAttachmentButton(attachment) {
-    const { readOnly, disabled } = this.props;
-    if (!readOnly && !disabled) {
-      return (
-        <Button
-          bsSize="xsmall"
-          bsStyle="danger"
-          style={{ marginRight: 10 }}
-          onClick={() => this.handleAttachmentRemove(attachment)}
-        >
-          <i className="fa fa-trash-o" />
-        </Button>
-      );
-    }
-  }
-
-  attachmentBackToInboxButton(attachment) {
-    const { readOnly } = this.props;
-    if (!readOnly && !attachment.is_new) {
-      return (
-        <Button
-          bsSize="xsmall"
-          bsStyle="danger"
-          onClick={() => this.handleAttachmentBackToInbox(attachment)}
-        >
-          <i className="fa fa-backward" />
-        </Button>
-      );
-    }
-  }
-
-  dropzone() {
-    const { readOnly, disabled } = this.props;
-    if (!readOnly && !disabled) {
-      return (
-        <Dropzone
-          onDrop={files => this.handleFileDrop(files)}
-          style={{ height: 50, width: '100%', border: '3px dashed lightgray' }}
-        >
-          <div style={{ textAlign: 'center', paddingTop: 12, color: 'gray' }}>
-            Drop Files, or Click to Select.
-          </div>
-        </Dropzone>
-      );
-    }
-  }
-
-  resetInstrumentComponent() {
-    const { dataset_container } = this.state;
-    this.setState({
-      value: '',
-      showInstruments: false,
-      instruments: null,
-      valueBeforeFocus: null,
-      error: '',
-    });
-    dataset_container.extended_metadata['instrument'] = '';
-  }
-
-  doneInstrumentTyping() {
-    const { value } = this.state;
-    if (!value) {
-      this.resetInstrumentComponent();
-    } else {
-      this.fetchInstruments(value);
-    }
-  }
-
-  fetchInstruments(value, show = true) {
-    const debounced = debounce(function (query) {
-      return InstrumentsFetcher.fetchInstrumentsForCurrentUser(query);
-    }, 200);
-    debounced(value)
-      .then(result => {
-        const newState = {};
-        if (result.length > 0) {
-          newState.instruments = result;
-          newState.showInstruments = show;
-        } else {
-          newState.instruments = null;
-          newState.error = '';
-          newState.showInstruments = false;
-        }
-        this.setState(newState);
-      })
-      .catch(error => console.log(error));
-  }
-
-  handleInstrumentValueChange(event, doneInstrumentTyping) {
-    const { value } = event.target;
-    const { timeoutReference } = this.state;
-    if (!value) {
-      this.resetInstrumentComponent();
-      return;
-    }
-    if (timeoutReference) {
-      clearTimeout(timeoutReference);
-    }
-    this.setState({
-      value,
-      timeoutReference: setTimeout(function () {
-        doneInstrumentTyping();
-      }, this.timeout),
-    });
-    this.handleInputChange('instrument', event);
-  }
-
-  selectInstrument() {
-    const { dataset_container, timeoutReference, value } = this.state;
-
-    this.setState({
-      showInstruments: false,
-      valueBeforeFocus: null,
-    });
-
-    if (!value || value.trim() === '') {
-      this.setState({ value: '' });
-      return 0;
-    }
-    dataset_container.extended_metadata.instrument = value;
-    clearTimeout(timeoutReference);
-    return value;
-  }
-
-  focusInstrument(newFocus) {
-    const { instruments, valueBeforeFocus } = this.state;
-    const newState = {};
-    if (!valueBeforeFocus) {
-      newState.valueBeforeFocus = instruments[newFocus].name;
-    }
-    newState.value = instruments[newFocus].name;
-    this.setState(newState);
-  }
-
-  abortAutoSelection() {
-    const { valueBeforeFocus } = this.state;
-    this.setState({
-      value: valueBeforeFocus,
-      valueBeforeFocus: null,
-    });
-  }
-
-  renderInstruments() {
-    const { instruments, error } = this.state;
-
-    if (instruments) {
-      return (
-        <div>
-          {instruments.map((instrument, index) => {
-            return (
-              <ListGroupItem
-                onClick={() => this.selectInstrument()}
-                onMouseEnter={() => this.focusInstrument(index)}
-                key={'instrument_' + index}
-                ref={'instrument_' + index}
-                header={instrument.name}
-              />
-            );
-          })}
-        </div>
-      );
-    } else if (error) {
-      return <ListGroupItem>{error}</ListGroupItem>;
-    }
-    return <div />;
-  }
-
-  handleAddLink(link) {
-    const { dataset_container } = this.state;
-    if (dataset_container.extended_metadata['hyperlinks'] == null) {
-      dataset_container.extended_metadata['hyperlinks'] = [link];
-    } else {
-      dataset_container.extended_metadata['hyperlinks'].push(link);
-    }
-    this.setState({ dataset_container });
-  }
-
-  handleRemoveLink(link) {
-    const { dataset_container } = this.state;
-    var index = dataset_container.extended_metadata['hyperlinks'].indexOf(link);
-    if (index !== -1) {
-      dataset_container.extended_metadata['hyperlinks'].splice(index, 1);
-    }
-    this.setState({ dataset_container });
-  }
-
-  render() {
-    const { dataset_container, showInstruments } = this.state;
-    const { readOnly, disabled, kind} = this.props;
-    const overlayAttributes = {
-      style: {
-        position: 'absolute',
-        width: 300,
-        marginTop: 144,
-        marginLeft: 17,
-      },
-    };
-    const termId = absOlsTermId(kind);
-    const klasses =
-      (UserStore.getState() && UserStore.getState().dsKlasses) || [];
-    let klass = {};
-    const idx = findIndex(klasses, o => o.ols_term_id === termId);
-    if (idx > -1) {
-      klass = klasses[idx];
-    }
-
-    let genericDS = {};
-    if (dataset_container?.dataset?.id) {
-      genericDS = dataset_container.dataset;
-    } else if (klass.ols_term_id !== undefined) {
-      genericDS = GenericDS.buildEmpty(cloneDeep(klass), dataset_container.id);
-    }
-    return (
-      <Row>
-        <Col md={6} className="col-base">
-          <FormGroup controlId="datasetName">
-            <ControlLabel>Name</ControlLabel>
-            <FormControl
-              type="text"
-              value={dataset_container.name || ''}
-              disabled={readOnly || disabled}
-              onChange={event => this.handleInputChange('name', event)}
-            />
-          </FormGroup>
-          <FormGroup controlId="datasetInstrument">
-            <ControlLabel>Instrument</ControlLabel>
-            <FormControl
-              type="text"
-              value={dataset_container.extended_metadata['instrument'] || ''}
-              disabled={readOnly || disabled}
-              onChange={event =>
-                this.handleInstrumentValueChange(
-                  event,
-                  this.doneInstrumentTyping
-                )
-              }
-              ref={input => {
-                this.autoComplete = input;
-              }}
-              autoComplete="off"
-            />
-            <Overlay
-              placement="bottom"
-              style={{
-                marginTop: 80,
-                width: 398,
-                height: 10,
-                maxHeight: 20,
-              }}
-              show={showInstruments}
-              container={this}
-              rootClose
-              onHide={() => this.abortAutoSelection()}
-            >
-              <ChildOverlay
-                dataList={this.renderInstruments()}
-                overlayAttributes={overlayAttributes}
-              />
-            </Overlay>
-          </FormGroup>
-          <FormGroup controlId="datasetDescription">
-            <ControlLabel>Description</ControlLabel>
-            <FormControl
-              componentClass="textarea"
-              value={dataset_container.description || ''}
-              disabled={readOnly || disabled}
-              onChange={event => this.handleInputChange('description', event)}
-              rows={4}
-            />
-          </FormGroup>
-        </Col>
-        <Col md={6} className="col-full">
-          <label>Attachments</label>
-          {this.dropzone()}
-          {this.attachments()}
-          <>
-            <HyperLinksSection
-              data={dataset_container.extended_metadata['hyperlinks']}
-              onAddLink={this.handleAddLink}
-              onRemoveLink={this.handleRemoveLink}
-              disabled={disabled}
-              readOnly={readOnly}
-            >
-
-            </HyperLinksSection>
-            <ImageAnnotationModalSVG
-              attachment={this.state.choosenAttachment}
-              isShow={this.state.imageEditModalShown}
-              handleSave={() => {
-                let newAnnotation = document
-                  .getElementById('svgEditId')
-                  .contentWindow.svgEditor.svgCanvas.getSvgString();
-                this.state.choosenAttachment.updatedAnnotation = newAnnotation;
-                this.setState({ imageEditModalShown: false });
-                this.props.onChange(this.props.dataset_container);
-              }}
-              handleOnClose={() => {
-                this.setState({ imageEditModalShown: false });
-              }}
-            />
-          </>
-        </Col>
-        <Col md={12}>
-          <GenericDSDetails
-            genericDS={genericDS}
-            klass={klass}
-            kind={kind}
-            onChange={this.handleDSChange}
-          />
-        </Col>
-      </Row>
-    );
-  }
-}
diff --git a/app/packs/src/components/container/ContainerDatasetField.js b/app/packs/src/components/container/ContainerDatasetField.js
index 3d7fe6be4f..fbf36f6e03 100644
--- a/app/packs/src/components/container/ContainerDatasetField.js
+++ b/app/packs/src/components/container/ContainerDatasetField.js
@@ -1,6 +1,8 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { Button, ButtonToolbar, OverlayTrigger, Tooltip } from 'react-bootstrap';
+import {
+  Button, ButtonToolbar, OverlayTrigger, Tooltip
+} from 'react-bootstrap';
 import { DropTarget } from 'react-dnd';
 import InboxActions from 'src/stores/alt/actions/InboxActions';
 import DragDropItemTypes from 'src/components/DragDropItemTypes';
@@ -9,39 +11,39 @@ import { absOlsTermId } from 'chem-generic-ui';
 import { GenericDSMisType } from 'src/apps/generic/Utils';
 
 const dataTarget = {
-  canDrop(props, monitor) {
+  canDrop(monitor) {
     const itemType = monitor.getItemType();
-    if (itemType == DragDropItemTypes.DATA ||
-      itemType == DragDropItemTypes.UNLINKED_DATA ||
-      itemType == DragDropItemTypes.DATASET) {
-      return true;
-    }
+    return itemType === DragDropItemTypes.DATA
+      || itemType === DragDropItemTypes.UNLINKED_DATA
+      || itemType === DragDropItemTypes.DATASET;
   },
 
   drop(props, monitor) {
     const item = monitor.getItem();
     const itemType = monitor.getItemType();
-    const { dataset_container, onChange } = props;
+    const { datasetContainer, onChange } = props;
 
     switch (itemType) {
       case DragDropItemTypes.DATA:
-        dataset_container.attachments.push(item.attachment)
-        onChange(dataset_container)
-        InboxActions.removeAttachmentFromList(item.attachment)
+        datasetContainer.attachments.push(item.attachment);
+        onChange(datasetContainer);
+        InboxActions.removeAttachmentFromList(item.attachment);
         break;
       case DragDropItemTypes.UNLINKED_DATA:
-        dataset_container.attachments.push(item.attachment)
-        InboxActions.removeUnlinkedAttachmentFromList(item.attachment)
+        datasetContainer.attachments.push(item.attachment);
+        InboxActions.removeUnlinkedAttachmentFromList(item.attachment);
         break;
       case DragDropItemTypes.DATASET:
-        item.dataset.attachments.forEach(attachment => {
-          dataset_container.attachments.push(attachment)
-        })
-        onChange(dataset_container)
-        InboxActions.removeDatasetFromList(item.dataset)
+        item.dataset.attachments.forEach((attachment) => {
+          datasetContainer.attachments.push(attachment);
+        });
+        onChange(datasetContainer);
+        InboxActions.removeDatasetFromList(item.dataset);
+        break;
+      default:
+        console.warn(`Unknown itemType: ${itemType}`);
         break;
     }
-
   }
 };
 
@@ -52,22 +54,24 @@ const collectTarget = (connect, monitor) => ({
 });
 
 class ContainerDatasetField extends Component {
-
-  removeButton(dataset_container) {
+  removeButton(datasetContainer) {
     const { readOnly, handleRemove, disabled } = this.props;
     if (!readOnly) {
       return (
-        <Button bsSize="xsmall"
+        <Button
+          bsSize="xsmall"
           bsStyle="danger"
-          onClick={() => handleRemove(dataset_container)}
-          disabled={disabled}>
-          <i className="fa fa-trash-o"></i>
+          onClick={() => handleRemove(datasetContainer)}
+          disabled={disabled}
+        >
+          <i className="fa fa-trash-o" />
         </Button>
       );
     }
+    return null;
   }
 
-  renderOverlay(color) {
+  static renderOverlay(color) {
     return (
       <div style={{
         position: 'absolute',
@@ -78,67 +82,100 @@ class ContainerDatasetField extends Component {
         zIndex: 1,
         opacity: 0.5,
         backgroundColor: color,
-      }} />
+      }}
+      />
     );
   }
 
   render() {
-    const { connectDropTarget, isOver, canDrop, dataset_container, handleUndo, kind,
-      handleModalOpen, disabled } = this.props;
-    if (dataset_container.is_deleted) {
+    const {
+      connectDropTarget, isOver, canDrop, datasetContainer, handleUndo, kind,
+      handleModalOpen, disabled
+    } = this.props;
+    if (datasetContainer.is_deleted) {
       return (
-        <div><strike>{dataset_container.name}</strike>
+        <div>
+          <strike>{datasetContainer.name}</strike>
 
           <Button
             className="pull-right"
             bsSize="xsmall"
             bsStyle="danger"
-            onClick={() => handleUndo(dataset_container)}
+            onClick={() => handleUndo(datasetContainer)}
             disabled={disabled}
           >
-            <i className="fa fa-undo"></i>
+            <i className="fa fa-undo" />
           </Button>
 
         </div>
-      )
-    } else {
-      const gds_download = (dataset_container.dataset == null || typeof dataset_container.dataset === 'undefined') ? (<span />) : (
+      );
+    }
+    const gdsDownload = (datasetContainer.dataset == null
+      || typeof datasetContainer.dataset === 'undefined') ? (<span />) : (
         <OverlayTrigger placement="top" overlay={<Tooltip id="download metadata">download metadata</Tooltip>}>
-          <Button bsSize="xsmall" bsStyle="success" onClick={() => AttachmentFetcher.downloadDataset(dataset_container.id)}>
-            <i className="fa fa-download"></i>
+          <Button
+            bsSize="xsmall"
+            bsStyle="success"
+            onClick={() => AttachmentFetcher.downloadDataset(datasetContainer.id)}
+          >
+            <i className="fa fa-download" />
           </Button>
         </OverlayTrigger>
       );
-      return connectDropTarget(
-        <div>
-          {dataset_container.dataset && dataset_container.dataset.klass_ols !== absOlsTermId(kind) ? <GenericDSMisType /> : null}
-          <a style={{ cursor: 'pointer' }} onClick={() => handleModalOpen(dataset_container)}>
-            {dataset_container.name || 'new'}
-          </a>
-          <ButtonToolbar className="pull-right">
-            {gds_download}
-            <OverlayTrigger placement="top" overlay={<Tooltip id="download data">download data + metadata</Tooltip>}>
-              <Button bsSize="xsmall" bsStyle="info" onClick={() => AttachmentFetcher.downloadZip(dataset_container.id)}>
-                <i className="fa fa-download"></i>
-              </Button>
-            </OverlayTrigger>
-            {this.removeButton(dataset_container)}
-          </ButtonToolbar>
-          {isOver && canDrop && this.renderOverlay('green')}
-        </div>
-      )
-    }
+    return connectDropTarget(
+      <div>
+        {datasetContainer.dataset && datasetContainer.dataset.klass_ols !== absOlsTermId(kind)
+          ? <GenericDSMisType /> : null}
+        <button
+          style={{ background: 'none', border: 'none', textDecoration: 'underline' }}
+          onClick={() => handleModalOpen(datasetContainer)}
+          type="button"
+        >
+          {datasetContainer.name || 'new'}
+        </button>
+        <ButtonToolbar className="pull-right">
+          {gdsDownload}
+          <OverlayTrigger placement="top" overlay={<Tooltip id="download data">download data + metadata</Tooltip>}>
+            <Button bsSize="xsmall" bsStyle="info" onClick={() => AttachmentFetcher.downloadZip(datasetContainer.id)}>
+              <i className="fa fa-download" />
+            </Button>
+          </OverlayTrigger>
+          {this.removeButton(datasetContainer)}
+        </ButtonToolbar>
+        {isOver && canDrop && this.renderOverlay('green')}
+      </div>
+    );
   }
 }
 
-export default DropTarget([DragDropItemTypes.DATA, DragDropItemTypes.UNLINKED_DATA, DragDropItemTypes.DATASET], dataTarget, collectTarget)(ContainerDatasetField);
-
 ContainerDatasetField.propTypes = {
   isOver: PropTypes.bool.isRequired,
   canDrop: PropTypes.bool.isRequired,
-  readOnly: PropTypes.bool
+  readOnly: PropTypes.bool,
+  handleRemove: PropTypes.func,
+  disabled: PropTypes.bool,
+  connectDropTarget: PropTypes.func.isRequired,
+  datasetContainer: PropTypes.shape({
+    is_deleted: PropTypes.bool,
+    name: PropTypes.string,
+    dataset: PropTypes.object,
+    id: PropTypes.number,
+  }).isRequired,
+  handleUndo: PropTypes.func.isRequired,
+  kind: PropTypes.string.isRequired,
+  handleModalOpen: PropTypes.func.isRequired,
 };
 
-ContainerDatasetField.defaultProps ={
-  readOnly: false
-}
+ContainerDatasetField.defaultProps = {
+  readOnly: false,
+  handleRemove: () => {},
+  disabled: false,
+};
+
+const dropTargetTypes = [
+  DragDropItemTypes.DATA,
+  DragDropItemTypes.UNLINKED_DATA,
+  DragDropItemTypes.DATASET
+];
+
+export default DropTarget(dropTargetTypes, dataTarget, collectTarget)(ContainerDatasetField);
diff --git a/app/packs/src/components/container/ContainerDatasetModal.js b/app/packs/src/components/container/ContainerDatasetModal.js
index bbd6703aab..88382602a4 100644
--- a/app/packs/src/components/container/ContainerDatasetModal.js
+++ b/app/packs/src/components/container/ContainerDatasetModal.js
@@ -1,49 +1,200 @@
+/* eslint-disable react/destructuring-assignment */
 import React, { Component } from 'react';
-import { Modal, ButtonToolbar, Button } from 'react-bootstrap';
-import ContainerDataset from 'src/components/container/ContainerDataset';
+import PropTypes from 'prop-types';
+import {
+  Modal, ButtonGroup, OverlayTrigger, Tooltip, Button,
+} from 'react-bootstrap';
+import ContainerDatasetModalContent from 'src/components/container/ContainerDatasetModalContent';
 
 export default class ContainerDatasetModal extends Component {
   constructor(props) {
     super(props);
 
     this.datasetInput = React.createRef();
+    this.state = {
+      mode: 'attachments',
+      isNameEditing: false,
+      localName: props.datasetContainer.name,
+    };
+
     this.handleSave = this.handleSave.bind(this);
+    this.handleDiscard = this.handleDiscard.bind(this);
+    this.handleSwitchMode = this.handleSwitchMode.bind(this);
+  }
+
+  handleDiscard() {
+    this.props.onDiscard();
+    this.props.onHide();
   }
 
   handleSave() {
     this.datasetInput.current.handleSave();
+    this.props.onChange({
+      ...this.props.datasetContainer,
+      ...this.datasetInput.current.state.datasetContainer,
+      name: this.state.localName
+    });
+  }
+
+  handleNameChange(newName) {
+    this.setState({ localName: newName });
   }
 
+  handleSwitchMode(mode) {
+    this.setState({ mode });
+  }
+
+  toggleNameEditing = () => {
+    this.setState((prevState) => ({
+      isNameEditing: !prevState.isNameEditing,
+    }));
+  };
+
   render() {
     const {
-      show, dataset_container, onHide, onChange, readOnly, disabled, kind
+      show, onHide, onChange, readOnly, disabled, kind, datasetContainer
     } = this.props;
+
+    const { mode } = this.state;
+
+    const attachmentTooltip = (<Tooltip id="attachment-tooltip">Click to view Attachments</Tooltip>);
+    const metadataTooltip = (<Tooltip id="metadata-tooltip">Click to view Metadata</Tooltip>);
+
+    const AttachmentsButton = (
+      <Button
+        bsStyle={mode === 'attachments' ? 'info' : 'default'}
+        style={{
+          pointerEvents: 'none',
+          backgroundColor: mode !== 'attachments' ? '#E8E8E8' : undefined,
+        }}
+        onClick={() => this.handleSwitchMode('attachments')}
+      >
+        <i className="fa fa-paperclip" aria-hidden="true" />
+      </Button>
+    );
+
+    const MetadataButton = (
+      <Button
+        bsStyle={mode === 'metadata' ? 'info' : 'default'}
+        onClick={() => this.handleSwitchMode('metadata')}
+        style={{
+          pointerEvents: 'none',
+          backgroundColor: mode !== 'metadata' ? '#E8E8E8' : undefined,
+        }}
+      >
+        <i className="fa fa-database" aria-hidden="true" />
+
+      </Button>
+    );
+
+    const btnMode = (
+      <div
+        role="button"
+        tabIndex={0}
+        style={{ cursor: 'pointer' }}
+        onClick={() => {
+          if (mode === 'attachments') {
+            this.handleSwitchMode('metadata');
+          } else {
+            this.handleSwitchMode('attachments');
+          }
+        }}
+        onKeyPress={() => {}}
+      >
+        <OverlayTrigger placement="top" overlay={mode === 'metadata' ? attachmentTooltip : metadataTooltip}>
+          <ButtonGroup>
+            {AttachmentsButton}
+            {MetadataButton}
+          </ButtonGroup>
+        </OverlayTrigger>
+      </div>
+    );
+
     if (show) {
       return (
-        <Modal show={show} backdrop="static" bsSize="large" dialogClassName="attachment-dataset-modal" onHide={() => (disabled ? onHide() : this.handleSave())}>
-          <Modal.Header>
+        <Modal
+          show={show}
+          bsSize="large"
+          dialogClassName="attachment-modal"
+          onHide={() => (disabled ? onHide() : this.handleSave())}
+        >
+          <Modal.Header style={{ flexShrink: 0 }}>
             <Modal.Title>
-              {dataset_container.name}
-              <ButtonToolbar>
-                <Button bsStyle="light" onClick={() => (disabled ? onHide() : this.handleSave())}>
-                  <i className="fa fa-times" />
-                </Button>
-              </ButtonToolbar>
+              {this.state.isNameEditing ? (
+                <div className="attachment-name-input-div">
+                  <input
+                    type="text"
+                    value={this.state.localName}
+                    onBlur={this.toggleNameEditing}
+                    onKeyPress={(event) => {
+                      if (event.key === 'Enter') {
+                        this.handleNameChange(event.target.value);
+                        this.toggleNameEditing();
+                      }
+                    }}
+                    onChange={(e) => { this.handleNameChange(e.target.value); }}
+                    className="attachment-name-input"
+                  />
+                </div>
+              ) : (
+                <div className="attachment-name-input-div">
+                  <span style={{ marginRight: '15px' }}>{this.state.localName}</span>
+                  {!readOnly && (
+                  <i
+                    className="fa fa-pencil"
+                    aria-hidden="true"
+                    onClick={this.toggleNameEditing}
+                    style={{ cursor: 'pointer', fontSize: '.8em', color: '#0275d8' }}
+                  />
+                  )}
+                </div>
+              )}
+              <div>{btnMode}</div>
             </Modal.Title>
+
           </Modal.Header>
           <Modal.Body>
-            <ContainerDataset
+            <ContainerDatasetModalContent
               ref={this.datasetInput}
               readOnly={readOnly}
-              dataset_container={dataset_container}
+              datasetContainer={datasetContainer}
               kind={kind}
               onModalHide={() => onHide()}
-              onChange={dataset_container => onChange(dataset_container)}
+              onChange={onChange}
+              mode={mode}
             />
           </Modal.Body>
+          <Modal.Footer style={{ flexShrink: 0, width: '100%' }}>
+            {/* <Button style={{ marginRight: '5px' }} onClick={this.handleDiscard}>Discard Changes</Button> */}
+            <Button bsStyle="primary" onClick={this.handleSave}>Keep Changes</Button>
+            <div style={{ textAlign: 'center', marginTop: '10px' }}>
+              <small>
+                Changes are kept for this session. Remember to save the element itself to persist changes.
+                {/* Discarding changes will discard changes for the entire session. */}
+              </small>
+            </div>
+          </Modal.Footer>
         </Modal>
       );
     }
     return <div />;
   }
 }
+
+ContainerDatasetModal.propTypes = {
+  show: PropTypes.bool.isRequired,
+  datasetContainer: PropTypes.shape({
+    name: PropTypes.string.isRequired,
+  }).isRequired,
+  onHide: PropTypes.func.isRequired,
+  onChange: PropTypes.func.isRequired,
+  readOnly: PropTypes.bool,
+  disabled: PropTypes.bool,
+  kind: PropTypes.string.isRequired,
+  onDiscard: PropTypes.func.isRequired,
+};
+
+ContainerDatasetModal.defaultProps = {
+  readOnly: false,
+  disabled: false,
+};
diff --git a/app/packs/src/components/container/ContainerDatasetModalContent.js b/app/packs/src/components/container/ContainerDatasetModalContent.js
new file mode 100644
index 0000000000..427951daff
--- /dev/null
+++ b/app/packs/src/components/container/ContainerDatasetModalContent.js
@@ -0,0 +1,719 @@
+/* eslint-disable react/destructuring-assignment */
+import React, { Component } from 'react';
+import {
+  Row, Col, FormGroup, FormControl, ControlLabel,
+  ListGroupItem, Button, Overlay
+} from 'react-bootstrap';
+import Dropzone from 'react-dropzone';
+import EditorFetcher from 'src/fetchers/EditorFetcher';
+import ImageModal from 'src/components/common/ImageModal';
+import SaveEditedImageWarning from 'src/apps/mydb/elements/details/researchPlans/SaveEditedImageWarning';
+import debounce from 'es6-promise-debounce';
+import {
+  findIndex, cloneDeep, last, findKey
+} from 'lodash';
+import { absOlsTermId } from 'chem-generic-ui';
+import Utils from 'src/utilities/Functions';
+import Attachment from 'src/models/Attachment';
+import AttachmentFetcher from 'src/fetchers/AttachmentFetcher';
+import UserStore from 'src/stores/alt/stores/UserStore';
+import GenericDS from 'src/models/GenericDS';
+import GenericDSDetails from 'src/components/generic/GenericDSDetails';
+import InboxActions from 'src/stores/alt/actions/InboxActions';
+import InstrumentsFetcher from 'src/fetchers/InstrumentsFetcher';
+import ChildOverlay from 'src/components/managingActions/ChildOverlay';
+import HyperLinksSection from 'src/components/common/HyperLinksSection';
+import ImageAnnotationModalSVG from 'src/apps/mydb/elements/details/researchPlans/ImageAnnotationModalSVG';
+import PropTypes from 'prop-types';
+
+import {
+  downloadButton,
+  removeButton,
+  annotateButton,
+  editButton,
+  sortingAndFilteringUI,
+  formatFileSize,
+  isImageFile,
+  moveBackButton
+} from 'src/apps/mydb/elements/list/AttachmentList';
+
+export default class ContainerDatasetModalContent extends Component {
+  constructor(props) {
+    super();
+    const datasetContainer = { ...props.datasetContainer };
+    this.state = {
+      datasetContainer,
+      instruments: null,
+      valueBeforeFocus: null,
+      timeoutReference: null,
+      attachmentEditor: false,
+      extension: null,
+      imageEditModalShown: false,
+      filteredAttachments: [...props.datasetContainer.attachments],
+      filterText: '',
+      sortBy: 'name',
+      sortDirection: 'asc',
+    };
+    this.timeout = 6e2; // 600ms timeout for input typing
+    this.doneInstrumentTyping = this.doneInstrumentTyping.bind(this);
+    this.handleInputChange = this.handleInputChange.bind(this);
+    this.handleAddLink = this.handleAddLink.bind(this);
+    this.handleRemoveLink = this.handleRemoveLink.bind(this);
+    this.handleDSChange = this.handleDSChange.bind(this);
+    this.editorInitial = this.editorInitial.bind(this);
+    this.createAttachmentPreviews = this.createAttachmentPreviews.bind(this);
+    this.handleDownloadOriginal = this.handleDownloadOriginal.bind(this);
+    this.handleDownloadAnnotated = this.handleDownloadAnnotated.bind(this);
+    this.handleEdit = this.handleEdit.bind(this);
+    this.handleFilterChange = this.handleFilterChange.bind(this);
+    this.handleSortChange = this.handleSortChange.bind(this);
+    this.toggleSortDirection = this.toggleSortDirection.bind(this);
+    this.handleAttachmentRemove = this.handleAttachmentRemove.bind(this);
+    this.handleAttachmentBackToInbox = this.handleAttachmentBackToInbox.bind(this);
+  }
+
+  componentDidMount() {
+    this.editorInitial();
+    this.createAttachmentPreviews();
+  }
+
+  componentDidUpdate(prevProps) {
+    const { datasetContainer } = this.props;
+    if (datasetContainer.attachments !== prevProps.datasetContainer.attachments) {
+      this.createAttachmentPreviews();
+      this.setState({ filteredAttachments: [...datasetContainer.attachments] }, this.filterAndSortAttachments);
+    }
+  }
+
+  handleInputChange(type, event) {
+    const { datasetContainer } = this.state;
+    const { value } = event.target;
+    switch (type) {
+      case 'name':
+        datasetContainer.name = value;
+        break;
+      case 'instrument':
+        datasetContainer.extended_metadata.instrument = value;
+        break;
+      case 'description':
+        datasetContainer.description = value;
+        break;
+      case 'dataset':
+        datasetContainer.dataset = value;
+        break;
+      default:
+        console.warn(`Unhandled input type: ${type}`);
+        break;
+    }
+    this.setState({ datasetContainer });
+  }
+
+  handleDSChange(ds) {
+    this.handleInputChange('dataset', { target: { value: ds } });
+  }
+
+  handleFileDrop(files) {
+    const { datasetContainer } = this.state;
+    const attachments = files.map((f) => Attachment.fromFile(f));
+    const firstAttach = datasetContainer.attachments.length === 0;
+    datasetContainer.attachments = datasetContainer.attachments.concat(attachments);
+    if (firstAttach) {
+      let attachName = attachments[0].filename;
+      const splitted = attachName.split('.');
+      if (splitted.length > 1) {
+        splitted.splice(-1, 1);
+        attachName = splitted.join('.');
+      }
+      datasetContainer.name = attachName;
+    }
+
+    this.setState({
+      datasetContainer,
+      filteredAttachments: [...datasetContainer.attachments]
+    }, () => {
+      this.props.onChange({ ...this.state.datasetContainer });
+    });
+  }
+
+  handleAttachmentRemove(attachment) {
+    const { datasetContainer } = this.state;
+    const index = datasetContainer.attachments.indexOf(attachment);
+    datasetContainer.attachments[index].is_deleted = true;
+    this.setState({ datasetContainer });
+  }
+
+  handleAttachmentBackToInbox(attachment) {
+    const { onChange } = this.props;
+    const { datasetContainer } = this.state;
+    const index = datasetContainer.attachments.indexOf(attachment);
+    if (index !== -1) {
+      InboxActions.backToInbox(attachment);
+      datasetContainer.attachments.splice(index, 1);
+      onChange(datasetContainer);
+    }
+  }
+
+  handleUndo(attachment) {
+    const { datasetContainer } = this.state;
+    const index = datasetContainer.attachments.indexOf(attachment);
+
+    datasetContainer.attachments[index].is_deleted = false;
+    this.setState({ datasetContainer });
+  }
+
+  // the next method is used in ContainerDatasetModal.js please ignore eslint warning
+  // eslint-disable-next-line react/no-unused-class-component-methods
+  handleSave() {
+    const { datasetContainer } = this.state;
+    const { onChange, onModalHide } = this.props;
+    onChange(datasetContainer);
+    onModalHide();
+  }
+
+  handleInstrumentValueChange(event, doneInstrumentTyping) {
+    const { value } = event.target;
+    const { timeoutReference } = this.state;
+    if (!value) {
+      this.resetInstrumentComponent();
+      return;
+    }
+    if (timeoutReference) {
+      clearTimeout(timeoutReference);
+    }
+    this.setState({
+      value,
+      timeoutReference: setTimeout(() => {
+        doneInstrumentTyping();
+      }, this.timeout),
+    });
+    this.handleInputChange('instrument', event);
+  }
+
+  handleAddLink(link) {
+    const { datasetContainer } = this.state;
+    if (datasetContainer.extended_metadata.hyperlinks == null) {
+      datasetContainer.extended_metadata.hyperlinks = [link];
+    } else {
+      datasetContainer.extended_metadata.hyperlinks.push(link);
+    }
+    this.setState({ datasetContainer });
+  }
+
+  handleRemoveLink(link) {
+    const { datasetContainer } = this.state;
+    const index = datasetContainer.extended_metadata.hyperlinks.indexOf(link);
+    if (index !== -1) {
+      datasetContainer.extended_metadata.hyperlinks.splice(index, 1);
+    }
+    this.setState({ datasetContainer });
+  }
+
+  handleDownloadAnnotated = (attachment) => {
+    const isImage = isImageFile(attachment.filename);
+    if (isImage && !attachment.isNew) {
+      Utils.downloadFile({
+        contents: `/api/v1/attachments/${attachment.id}/annotated_image`,
+        name: attachment.filename
+      });
+    }
+  };
+
+  handleDownloadOriginal = (attachment) => {
+    Utils.downloadFile({
+      contents: `/api/v1/attachments/${attachment.id}`,
+      name: attachment.filename,
+    });
+  };
+
+  handleEdit(attachment) {
+    const fileType = last(attachment.filename.split('.'));
+    const docType = this.documentType(attachment.filename);
+
+    EditorFetcher.startEditing({ attachment_id: attachment.id })
+      .then((result) => {
+        if (result.token) {
+          const url = `/editor?id=${attachment.id}&docType=${docType}
+          &fileType=${fileType}&title=${attachment.filename}&key=${result.token}
+          &only_office_token=${result.only_office_token}`;
+          window.open(url, '_blank');
+
+          attachment.aasm_state = 'oo_editing';
+          attachment.updated_at = new Date();
+
+          this.props.onChange(attachment);
+        } else {
+          alert('Unauthorized to edit this file.');
+        }
+      });
+  }
+
+  toggleSortDirection = () => {
+    this.setState((prevState) => ({
+      sortDirection: prevState.sortDirection === 'asc' ? 'desc' : 'asc'
+    }), this.filterAndSortAttachments);
+  };
+
+  handleFilterChange = (e) => {
+    this.setState({ filterText: e.target.value }, this.filterAndSortAttachments);
+  };
+
+  handleSortChange = (e) => {
+    this.setState({ sortBy: e.target.value }, this.filterAndSortAttachments);
+  };
+
+  filterAndSortAttachments() {
+    const { filterText, sortBy } = this.state;
+
+    const filteredAttachments = this.props.datasetContainer.attachments.filter((
+      attachment
+    ) => attachment.filename.toLowerCase().includes(filterText.toLowerCase()));
+
+    filteredAttachments.sort((a, b) => {
+      let comparison = 0;
+      switch (sortBy) {
+        case 'name':
+          comparison = a.filename.localeCompare(b.filename);
+          break;
+        case 'size':
+          comparison = a.filesize - b.filesize;
+          break;
+        case 'date':
+          comparison = new Date(a.created_at) - new Date(b.created_at);
+          break;
+        default:
+          break;
+      }
+      return this.state.sortDirection === 'asc' ? comparison : -comparison;
+    });
+
+    this.setState({ filteredAttachments });
+  }
+
+  resetInstrumentComponent() {
+    const { datasetContainer } = this.state;
+    this.setState({
+      value: '',
+      showInstruments: false,
+      instruments: null,
+      valueBeforeFocus: null,
+      error: '',
+    });
+    datasetContainer.extended_metadata.instrument = '';
+  }
+
+  doneInstrumentTyping() {
+    const { value } = this.state;
+    if (!value) {
+      this.resetInstrumentComponent();
+    } else {
+      this.fetchInstruments(value);
+    }
+  }
+
+  fetchInstruments(value, show = true) {
+    const debounced = debounce((query) => InstrumentsFetcher.fetchInstrumentsForCurrentUser(query), 200);
+    debounced(value)
+      .then((result) => {
+        const newState = {};
+        if (result.length > 0) {
+          newState.instruments = result;
+          newState.showInstruments = show;
+        } else {
+          newState.instruments = null;
+          newState.error = '';
+          newState.showInstruments = false;
+        }
+        this.setState(newState);
+      })
+      .catch((error) => console.log(error));
+  }
+
+  selectInstrument() {
+    const { datasetContainer, timeoutReference, value } = this.state;
+
+    this.setState({
+      showInstruments: false,
+      valueBeforeFocus: null,
+    });
+
+    if (!value || value.trim() === '') {
+      this.setState({ value: '' });
+      return 0;
+    }
+    datasetContainer.extended_metadata.instrument = value;
+    clearTimeout(timeoutReference);
+    return value;
+  }
+
+  focusInstrument(newFocus) {
+    const { instruments, valueBeforeFocus } = this.state;
+    const newState = {};
+    if (!valueBeforeFocus) {
+      newState.valueBeforeFocus = instruments[newFocus].name;
+    }
+    newState.value = instruments[newFocus].name;
+    this.setState(newState);
+  }
+
+  abortAutoSelection() {
+    const { valueBeforeFocus } = this.state;
+    this.setState({
+      value: valueBeforeFocus,
+      valueBeforeFocus: null,
+    });
+  }
+
+  createAttachmentPreviews() {
+    const { datasetContainer } = this.props;
+    datasetContainer.attachments.map((attachment) => {
+      if (attachment.thumb) {
+        AttachmentFetcher.fetchThumbnail({ id: attachment.id }).then(
+          (result) => {
+            if (result != null) {
+              attachment.preview = `data:image/png;base64,${result}`;
+              this.forceUpdate();
+            }
+          }
+        );
+      } else {
+        attachment.preview = '/images/wild_card/not_available.svg';
+        this.forceUpdate();
+      }
+      return attachment;
+    });
+  }
+
+  documentType(filename) {
+    const { extension } = this.state;
+
+    const ext = last(filename.split('.'));
+    const docType = findKey(extension, (o) => o.includes(ext));
+
+    if (typeof docType === 'undefined' || !docType) {
+      return null;
+    }
+
+    return docType;
+  }
+
+  editorInitial() {
+    EditorFetcher.initial().then((result) => {
+      this.setState({
+        attachmentEditor: result.installed,
+        extension: result.ext,
+      });
+    });
+  }
+
+  customDropzone() {
+    return (
+      <Dropzone
+        onDrop={(files) => this.handleFileDrop(files)}
+        className="attachment-dropzone"
+      >
+        Drop files here, or click to upload.
+      </Dropzone>
+    );
+  }
+
+  renderImageEditModal() {
+    const { chosenAttachment, imageEditModalShown } = this.state;
+    const { onChange } = this.props;
+    return (
+      <ImageAnnotationModalSVG
+        attachment={chosenAttachment}
+        isShow={imageEditModalShown}
+        handleSave={
+          () => {
+            const newAnnotation = document.getElementById('svgEditId').contentWindow.svgEditor.svgCanvas.getSvgString();
+            chosenAttachment.updatedAnnotation = newAnnotation;
+            this.setState({ imageEditModalShown: false });
+            onChange(chosenAttachment);
+          }
+        }
+        handleOnClose={() => { this.setState({ imageEditModalShown: false }); }}
+      />
+    );
+  }
+
+  renderInstruments() {
+    const { instruments, error } = this.state;
+
+    if (instruments) {
+      return (
+        <div>
+          {instruments.map((instrument, index) => (
+            <ListGroupItem
+              onClick={() => this.selectInstrument()}
+              onMouseEnter={() => this.focusInstrument(index)}
+              key={`instrument_${index}`}
+              ref={`instrument_${index}`}
+              header={instrument.name}
+            />
+          ))}
+        </div>
+      );
+    } if (error) {
+      return <ListGroupItem>{error}</ListGroupItem>;
+    }
+    return <div />;
+  }
+
+  renderAttachments() {
+    const {
+      filteredAttachments, sortDirection, attachmentEditor, extension
+    } = this.state;
+
+    return (
+      <div className="attachment-main-container">
+        {this.renderImageEditModal()}
+        {this.customDropzone()}
+        {filteredAttachments.length > 0
+        && sortingAndFilteringUI(
+          sortDirection,
+          this.handleSortChange,
+          this.toggleSortDirection,
+          this.handleFilterChange
+        )}
+        {filteredAttachments.length === 0 ? (
+          <div className="no-attachments-text">
+            There are currently no attachments.
+          </div>
+        ) : (
+          filteredAttachments.map((attachment) => (
+            <div className="attachment-row" key={attachment.id}>
+              <div className="attachment-row-image">
+                <ImageModal
+                  imageStyle={{
+                    width: '60px',
+                    height: '60px',
+                    borderRadius: '5px',
+                    objectFit: 'cover',
+                    boxShadow: '0 2px 10px rgba(0, 0, 0, 0.1)',
+                    transition: 'transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out',
+                  }}
+                  hasPop={false}
+                  alt="thumbnail"
+                  previewObject={{
+                    src: attachment.preview,
+                  }}
+                  popObject={{
+                    title: attachment.filename,
+                    src: attachment.preview,
+                    fetchNeeded: false,
+                    fetchId: attachment.id,
+                  }}
+                />
+              </div>
+              <div className="attachment-row-text" title={attachment.filename}>
+                {attachment.is_deleted ? (
+                  <strike>{attachment.filename}</strike>
+                ) : (
+                  attachment.filename
+                )}
+                <div className="attachment-row-subtext">
+                  Added on:&nbsp;
+                  {attachment.created_at && !Number.isNaN(new Date(attachment.created_at).getTime()) ? (
+                    <>
+                      {new Date(attachment.created_at).toLocaleDateString('en-GB')}
+                      ,
+                      &nbsp;
+                      {new Date(attachment.created_at).toLocaleTimeString(
+                        'en-GB',
+                        { hour: '2-digit', minute: '2-digit', hour12: true }
+                      )}
+                    </>
+                  ) : (
+                    'now!'
+                  )}
+                </div>
+
+              </div>
+              <div className="attachment-row-size">
+                <span style={{ fontWeight: 'bold' }}>
+                  Size:&nbsp;
+                  <span style={{ fontWeight: 'bold', color: '#444' }}>
+                    {formatFileSize(attachment.filesize)}
+                  </span>
+                </span>
+              </div>
+              <div className="attachment-row-actions" style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
+                {attachment.is_deleted ? (
+                  <Button
+                    bsSize="xs"
+                    bsStyle="danger"
+                    className="attachment-button-size"
+                    onClick={() => this.handleUndo(attachment)}
+                  >
+                    <i className="fa fa-undo" aria-hidden="true" />
+                  </Button>
+                ) : (
+                  <>
+                    {downloadButton(attachment, this.handleDownloadOriginal, this.handleDownloadAnnotated)}
+                    {editButton(
+                      attachment,
+                      extension,
+                      attachmentEditor,
+                      attachment.aasm_state === 'oo_editing' && new Date().getTime()
+                        < (new Date(attachment.updated_at).getTime() + 15 * 60 * 1000),
+                      attachmentEditor ? '' : 'none',
+                      !attachmentEditor || attachment.aasm_state === 'oo_editing'
+                        || attachment.is_new || this.documentType(attachment.filename) === null,
+                      this.handleEdit
+                    )}
+                    {annotateButton(attachment, this)}
+                    {moveBackButton(attachment, this.handleAttachmentBackToInbox, this.props.readOnly)}
+                    {removeButton(attachment, this.handleAttachmentRemove, this.props.readOnly)}
+                  </>
+                )}
+              </div>
+              {attachment.updatedAnnotation && <SaveEditedImageWarning visible />}
+            </div>
+          ))
+        )}
+        <HyperLinksSection
+          data={this.state.datasetContainer.extended_metadata.hyperlinks}
+          onAddLink={this.handleAddLink}
+          onRemoveLink={this.handleRemoveLink}
+          disabled={this.props.disabled}
+        />
+      </div>
+    );
+  }
+
+  renderMetadata() {
+    const { datasetContainer, showInstruments } = this.state;
+    const { readOnly, disabled, kind } = this.props;
+    const termId = absOlsTermId(kind);
+    const klasses = (UserStore.getState() && UserStore.getState().dsKlasses) || [];
+    let klass = {};
+    const idx = findIndex(klasses, (o) => o.ols_term_id === termId);
+    if (idx > -1) {
+      klass = klasses[idx];
+    }
+
+    let genericDS = {};
+    if (datasetContainer?.dataset?.id) {
+      genericDS = datasetContainer.dataset;
+    } else if (klass.ols_term_id !== undefined) {
+      genericDS = GenericDS.buildEmpty(cloneDeep(klass), datasetContainer.id);
+    }
+    return (
+      <>
+        <FormGroup controlId="datasetInstrument">
+          <ControlLabel>Instrument</ControlLabel>
+          <FormControl
+            type="text"
+            value={datasetContainer.extended_metadata.instrument || ''}
+            disabled={readOnly || disabled}
+            onChange={(event) => this.handleInstrumentValueChange(
+              event,
+              this.doneInstrumentTyping
+            )}
+            ref={(input) => {
+              this.autoComplete = input;
+            }}
+            autoComplete="off"
+          />
+          <Overlay
+            placement="bottom"
+            show={showInstruments}
+            container={this}
+            rootClose
+            onHide={() => this.abortAutoSelection()}
+          >
+            <ChildOverlay
+              dataList={this.renderInstruments()}
+              overlayAttributes={{
+                style: {
+                  position: 'absolute',
+                  width: 300,
+                  marginTop: 144,
+                  marginLeft: 17,
+                },
+              }}
+            />
+          </Overlay>
+        </FormGroup>
+        <FormGroup controlId="datasetDescription">
+          <ControlLabel>Description</ControlLabel>
+          <FormControl
+            componentClass="textarea"
+            value={datasetContainer.description || ''}
+            disabled={readOnly || disabled}
+            onChange={(event) => this.handleInputChange('description', event)}
+            rows={4}
+          />
+        </FormGroup>
+        <GenericDSDetails
+          genericDS={genericDS}
+          klass={klass}
+          kind={kind}
+          onChange={this.handleDSChange}
+        />
+      </>
+    );
+  }
+
+  render() {
+    const { mode } = this.props;
+
+    return (
+      <Row>
+        <Col md={12}>
+          {mode === 'attachments' && this.renderAttachments()}
+          {mode === 'metadata' && this.renderMetadata()}
+        </Col>
+      </Row>
+    );
+  }
+}
+
+ContainerDatasetModalContent.propTypes = {
+  datasetContainer: PropTypes.shape({
+    name: PropTypes.string.isRequired,
+    attachments: PropTypes.arrayOf(PropTypes.shape({
+      id: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.number
+      ]).isRequired,
+      aasm_state: PropTypes.string.isRequired,
+      content_type: PropTypes.string.isRequired,
+      filename: PropTypes.string.isRequired,
+      filesize: PropTypes.number.isRequired,
+      identifier: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.number
+      ]).isRequired,
+      thumb: PropTypes.bool.isRequired
+    })),
+  }).isRequired,
+  onChange: PropTypes.func.isRequired,
+  onModalHide: PropTypes.func.isRequired,
+  readOnly: PropTypes.bool,
+  disabled: PropTypes.bool,
+  kind: PropTypes.string.isRequired,
+  mode: PropTypes.oneOf(['attachments', 'metadata']),
+  attachments: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.number
+    ]).isRequired,
+    aasm_state: PropTypes.string.isRequired,
+    content_type: PropTypes.string.isRequired,
+    filename: PropTypes.string.isRequired,
+    filesize: PropTypes.number.isRequired,
+    identifier: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.number
+    ]).isRequired,
+    thumb: PropTypes.bool.isRequired
+  })),
+};
+
+ContainerDatasetModalContent.defaultProps = {
+  mode: 'attachments',
+  disabled: false,
+  readOnly: false,
+  attachments: [],
+};
diff --git a/app/packs/src/components/container/ContainerDatasets.js b/app/packs/src/components/container/ContainerDatasets.js
index 75b6827f7f..e7ad7f266a 100644
--- a/app/packs/src/components/container/ContainerDatasets.js
+++ b/app/packs/src/components/container/ContainerDatasets.js
@@ -1,5 +1,9 @@
+/* eslint-disable react/destructuring-assignment */
 import React, { Component } from 'react';
-import { ListGroup, ListGroupItem, Button, Well } from 'react-bootstrap';
+import PropTypes from 'prop-types';
+import {
+  ListGroup, ListGroupItem, Button, Well
+} from 'react-bootstrap';
 import ContainerDatasetModal from 'src/components/container/ContainerDatasetModal';
 import ContainerDatasetField from 'src/components/container/ContainerDatasetField';
 import Container from 'src/models/Container';
@@ -10,75 +14,77 @@ export default class ContainerDatasets extends Component {
     super(props);
     const { container } = props;
     this.state = {
+      originalContainer: JSON.parse(JSON.stringify(container)),
       container,
       modal: {
         show: false,
-        dataset_container: null
-      }
+        datasetContainer: null,
+      },
     };
   }
 
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    this.setState({
-      container: nextProps.container
-    })
+  componentDidUpdate(prevProps) {
+    if (this.props.container !== prevProps.container) {
+      this.setState({
+        container: this.props.container,
+        originalContainer: JSON.parse(JSON.stringify(this.props.container)),
+      });
+    }
   }
 
-  handleModalOpen(dataset_container) {
+  handleModalOpen(datasetContainer) {
     const { modal } = this.state;
-    modal.dataset_container = dataset_container;
+    modal.datasetContainer = datasetContainer || {};
     modal.show = true;
     this.setState({ modal });
   }
 
   handleAdd() {
     const { container } = this.state;
-    let dataset_container = Container.buildEmpty();
-    dataset_container.container_type = "dataset";
+    const datasetContainer = Container.buildEmpty();
+    datasetContainer.container_type = 'dataset';
 
-    container.children.push(dataset_container);
+    container.children.push(datasetContainer);
 
-    this.handleModalOpen(dataset_container);
+    this.handleModalOpen(datasetContainer);
     this.props.onChange(container);
-
   }
 
   handleAddWithAttachments(attachments) {
     const { container } = this.state;
-    let dataset_container = Container.buildEmpty();
-    dataset_container.container_type = "dataset";
+    const datasetContainer = Container.buildEmpty();
+    datasetContainer.container_type = 'dataset';
 
-    attachments.forEach(attachment => {
-      dataset_container.attachments.push(attachment)
-    })
-    container.children.push(dataset_container);
+    attachments.forEach((attachment) => {
+      datasetContainer.attachments.push(attachment);
+    });
+    container.children.push(datasetContainer);
 
-    this.handleModalOpen(dataset_container);
+    this.handleModalOpen(datasetContainer);
     this.props.onChange(container);
-
   }
 
-  handleRemove(dataset_container) {
-    let { container } = this.state;
+  handleRemove(datasetContainer) {
+    const { container } = this.state;
 
-    dataset_container.is_deleted = true;
+    datasetContainer.is_deleted = true;
     this.props.onChange(container);
   }
 
-  handleUndo(dataset_container) {
-    let { container } = this.state;
+  handleUndo(datasetContainer) {
+    const { container } = this.state;
 
-    dataset_container.is_deleted = false;
+    datasetContainer.is_deleted = false;
     this.props.onChange(container);
   }
 
-  handleChange(dataset_container) {
-    let { container } = this.state;
+  handleChange(datasetContainer) {
+    const { container } = this.state;
 
-    container.children.find(dataset => {
-      if (dataset.id == dataset_container.id) {
+    container.children.find((dataset) => {
+      if (dataset.id === datasetContainer.id) {
         const datasetId = container.children.indexOf(dataset);
-        container.children[datasetId] = dataset_container;
+        container.children[datasetId] = datasetContainer;
       }
     });
 
@@ -88,28 +94,32 @@ export default class ContainerDatasets extends Component {
   handleModalHide() {
     const { modal } = this.state;
     modal.show = false;
-    modal.dataset_container = null;
+    modal.datasetContainer = null;
     this.setState({ modal });
     // https://github.com/react-bootstrap/react-bootstrap/issues/1137
     document.body.className = document.body.className.replace('modal-open', '');
   }
 
+  discardChanges = () => {
+    this.setState((prevState) => ({
+      container: JSON.parse(JSON.stringify(prevState.originalContainer)),
+    }));
+  };
+
   addButton() {
     const { readOnly, disabled } = this.props;
-
     if (!readOnly && !disabled) {
       return (
         <div className="pull-right" style={{ marginTop: 5, marginBottom: 5 }}>
           <Button bsSize="xsmall" bsStyle="success" onClick={() => this.handleAdd()}>
-            <i className="fa fa-plus"></i>
+            <i className="fa fa-plus" />
           </Button>
         </div>
-      )
+      );
     }
+    return null;
   }
 
-
-
   render() {
     const { container, modal } = this.state;
     const { disabled,readOnly } = this.props;
@@ -120,22 +130,20 @@ export default class ContainerDatasets extends Component {
         <div>
           <Well style={{ minHeight: 70, padding: 5, paddingBottom: 31 }}>
             <ListGroup style={{ marginBottom: 0 }}>
-              {container.children.map((dataset_container, key) => {
-                return (
-                  <ListGroupItem key={key}>
-                    <ContainerDatasetField
-                      kind={kind}
-                      dataset_container={dataset_container}
-                      onChange={() => this.handleChange(dataset_container)}
-                      handleRemove={() => this.handleRemove(dataset_container)}
-                      handleUndo={() => this.handleUndo(dataset_container)}
-                      handleModalOpen={() => this.handleModalOpen(dataset_container)}
-                      disabled={disabled}
-                      readOnly={readOnly}
-                    />
-                  </ListGroupItem>
-                )
-              })}
+              {container.children.map((datasetContainer, key) => (
+                <ListGroupItem key={key}>
+                  <ContainerDatasetField
+                    kind={kind}
+                    datasetContainer={datasetContainer}
+                    onChange={() => this.handleChange(datasetContainer)}
+                    handleRemove={() => this.handleRemove(datasetContainer)}
+                    handleUndo={() => this.handleUndo(datasetContainer)}
+                    handleModalOpen={() => this.handleModalOpen(datasetContainer)}
+                    disabled={disabled}
+                    readOnly={readOnly}
+                  />
+                </ListGroupItem>
+              ))}
               <ListGroupItem key="attachmentdropzone" disabled>
                 <AttachmentDropzone
                   handleAddWithAttachments={(attachments) => this.handleAddWithAttachments(attachments)}
@@ -144,34 +152,48 @@ export default class ContainerDatasets extends Component {
             </ListGroup>
             {this.addButton()}
           </Well>
+          {modal.show && modal.datasetContainer && (
           <ContainerDatasetModal
             onHide={() => this.handleModalHide()}
-            onChange={dataset_container => this.handleChange(dataset_container)}
+            onChange={(datasetContainer) => this.handleChange(datasetContainer)}
             kind={kind}
             show={modal.show}
             readOnly={this.props.readOnly}
-            dataset_container={modal.dataset_container}
+            datasetContainer={modal.datasetContainer}
             analysisContainer={modal.analysisContainer}
             disabled={disabled}
+            onDiscard={this.discardChanges}
           />
+          )}
         </div>
       );
-    } else {
-      return (
-        <div>
-          <Well style={{ minHeight: 70, padding: 5, paddingBottom: 31 }}>
-            <p>There are currently no Datasets.</p>
-            <ListGroup style={{ marginBottom: 0 }}>
-              <ListGroupItem key="attachmentdropzone" disabled>
-                <AttachmentDropzone
-                  handleAddWithAttachments={(attachments) => this.handleAddWithAttachments(attachments)}
-                />
-              </ListGroupItem>
-            </ListGroup>
-            {this.addButton()}
-          </Well>
-        </div>
-      )
     }
+    return (
+      <div>
+        <Well style={{ minHeight: 70, padding: 5, paddingBottom: 31 }}>
+          <p>There are currently no Datasets.</p>
+          <ListGroup style={{ marginBottom: 0 }}>
+            <ListGroupItem key="attachmentdropzone" disabled>
+              <AttachmentDropzone
+                handleAddWithAttachments={(attachments) => this.handleAddWithAttachments(attachments)}
+              />
+            </ListGroupItem>
+          </ListGroup>
+          {this.addButton()}
+        </Well>
+      </div>
+    );
   }
 }
+
+ContainerDatasets.propTypes = {
+  container: PropTypes.object.isRequired,
+  onChange: PropTypes.func.isRequired,
+  readOnly: PropTypes.bool,
+  disabled: PropTypes.bool,
+};
+
+ContainerDatasets.defaultProps = {
+  readOnly: false,
+  disabled: false,
+};
diff --git a/app/packs/src/fetchers/BaseFetcher.js b/app/packs/src/fetchers/BaseFetcher.js
index d4015c3796..23dcf6286e 100644
--- a/app/packs/src/fetchers/BaseFetcher.js
+++ b/app/packs/src/fetchers/BaseFetcher.js
@@ -80,9 +80,13 @@ export default class BaseFetcher {
         sort = filters.reaction?.sort || false;
         direction = filters.reaction?.direction || 'DESC';
 
-        sortColumn = group === 'none'
-            ? sort ? 'created_at' : 'updated_at'
-            : sort && group ? group : 'updated_at';
+        if (group === 'none') {
+          sortColumn = sort ? 'created_at' : 'updated_at';
+        } else if (sort && group) {
+          sortColumn = group;
+        } else {
+          sortColumn = 'updated_at';
+        }
 
         addQuery = `&sort_column=${sortColumn}&sort_direction=${direction}`;
 
@@ -149,4 +153,33 @@ export default class BaseFetcher {
 
     return Promise.all(updateTasks);
   }
+
+  static updateAnnotationsOfAttachments(element) {
+    const updateTasks = [];
+    element.attachments
+      .filter(((attach) => attach.hasOwnProperty('updatedAnnotation')))
+      .forEach((attach) => {
+        const data = new FormData();
+        data.append('updated_svg_string', attach.updatedAnnotation);
+        updateTasks.push(fetch(`/api/v1/attachments/${attach.id}/annotation`, {
+          credentials: 'same-origin',
+          method: 'post',
+          body: data
+        })
+          .catch((errorMessage) => {
+            console.log(errorMessage);
+          }));
+      });
+
+    return Promise.all(updateTasks);
+  }
+
+  static updateAnnotations(element) {
+    return Promise.all(
+      [
+        BaseFetcher.updateAnnotationsOfAttachments(element),
+        BaseFetcher.updateAnnotationsInContainer(element, [])
+      ]
+    );
+  }
 }
diff --git a/app/packs/src/fetchers/ReactionsFetcher.js b/app/packs/src/fetchers/ReactionsFetcher.js
index 42b0b3fc2c..4d5ed60e7a 100644
--- a/app/packs/src/fetchers/ReactionsFetcher.js
+++ b/app/packs/src/fetchers/ReactionsFetcher.js
@@ -6,7 +6,7 @@ import Reaction from 'src/models/Reaction';
 import AttachmentFetcher from 'src/fetchers/AttachmentFetcher';
 import Literature from 'src/models/Literature';
 import GenericElsFetcher from 'src/fetchers/GenericElsFetcher';
-import ResearchPlansFetcher from './ResearchPlansFetcher';
+import ResearchPlansFetcher from 'src/fetchers/ResearchPlansFetcher';
 
 // TODO: Extract common base functionality into BaseFetcher
 export default class ReactionsFetcher {
@@ -14,12 +14,12 @@ export default class ReactionsFetcher {
     try {
       const response = await fetch(`/api/v1/reactions/${id}.json`, {
         credentials: 'same-origin'
-      }).then(response => response.json())
+      }).then((response) => response.json())
         .then((json) => {
-          if (json.hasOwnProperty("reaction")) {
+          if (json.hasOwnProperty('reaction')) {
             const reaction = new Reaction(json.reaction);
             if (json.literatures && json.literatures.length > 0) {
-              const tliteratures = json.literatures.map(literature => new Literature(literature));
+              const tliteratures = json.literatures.map((literature) => new Literature(literature));
               const lits = tliteratures.reduce((acc, l) => acc.set(l.literal_id, l), new Immutable.Map());
               reaction.literatures = lits;
             }
@@ -38,7 +38,7 @@ export default class ReactionsFetcher {
           console.log(errorMessage);
         });
       const researchPlans = await ResearchPlansFetcher.fetchResearchPlansForElements(id, response.type);
-      response['research_plans'] = researchPlans;
+      response.research_plans = researchPlans;
       return response;
     } catch (error) {
       console.error(error);
@@ -56,7 +56,7 @@ export default class ReactionsFetcher {
         credentials: 'same-origin',
         headers: { 'Content-Type': 'application/json' }
       }
-    ).then((response) => response.json()).catch(errorMessage => console.log(errorMessage))
+    ).then((response) => response.json()).catch((errorMessage) => console.log(errorMessage));
   }
 
   static create(reaction, method = 'post') {
@@ -76,28 +76,26 @@ export default class ReactionsFetcher {
         'Content-Type': 'application/json'
       },
       body: JSON.stringify(reaction.serialize())
-    }).then(response => response.json())
-      .then(json => GenericElsFetcher.uploadGenericFiles(reaction, json.reaction.id, 'Reaction')
-      .then(()=> ReactionsFetcher.updateAnnotationsInReaction(reaction))
+    }).then((response) => response.json())
+      .then((json) => GenericElsFetcher.uploadGenericFiles(reaction, json.reaction.id, 'Reaction')
+        .then(() => ReactionsFetcher.updateAnnotationsInReaction(reaction))
         .then(() => this.fetchById(json.reaction.id))).catch((errorMessage) => {
-          console.log(errorMessage);
-        });
+        console.log(errorMessage);
+      });
 
     if (allFiles.length > 0) {
-      let tasks = [];
-      allFiles.forEach(file => tasks.push(AttachmentFetcher.uploadFile(file).then()));
-      return Promise.all(tasks).then(() => {
-        return promise();
-      });
+      const tasks = [];
+      allFiles.forEach((file) => tasks.push(AttachmentFetcher.uploadFile(file).then()));
+      return Promise.all(tasks).then(() => promise());
     }
 
     return promise();
   }
 
-  static updateAnnotationsInReaction(reaction){
-     const tasks=[];
-     reaction.products.forEach( e =>  tasks.push(BaseFetcher.updateAnnotationsInContainer(e)));
-     return Promise.all(tasks);
+  static updateAnnotationsInReaction(reaction) {
+    const tasks = [];
+    reaction.products.forEach((e) => tasks.push(BaseFetcher.updateAnnotationsInContainer(e)));
+    return Promise.all(tasks);
   }
 
   static update(reaction) {
diff --git a/app/packs/src/fetchers/ResearchPlansFetcher.js b/app/packs/src/fetchers/ResearchPlansFetcher.js
index 752826049b..e012633b73 100644
--- a/app/packs/src/fetchers/ResearchPlansFetcher.js
+++ b/app/packs/src/fetchers/ResearchPlansFetcher.js
@@ -75,7 +75,7 @@ export default class ResearchPlansFetcher {
         json.research_plan.id,
         researchPlan.getMarkedAsDeletedAttachments()
       )().then(() => GenericElsFetcher.uploadGenericFiles(researchPlan, json.research_plan.id, 'ResearchPlan', true)
-        .then(() => ResearchPlansFetcher.updateAnnotations(researchPlan))
+        .then(() => BaseFetcher.updateAnnotations(researchPlan))
         .then(() => this.fetchById(researchPlan.id))))
       .catch((errorMessage) => { console.log(errorMessage); });
 
@@ -267,35 +267,6 @@ export default class ResearchPlansFetcher {
       }).catch((errorMessage) => { console.log(errorMessage); });
   }
 
-  static updateAnnotations(researchPlan) {
-    return Promise.all(
-      [
-        ResearchPlansFetcher.updateAnnotationsOfAttachments(researchPlan),
-        BaseFetcher.updateAnnotationsInContainer(researchPlan, [])
-      ]
-    );
-  }
-
-  static updateAnnotationsOfAttachments(researchPlan) {
-    const updateTasks = [];
-    researchPlan.attachments
-      .filter(((attach) => attach.hasOwnProperty('updatedAnnotation')))
-      .forEach((attach) => {
-        const data = new FormData();
-        data.append('updated_svg_string', attach.updatedAnnotation);
-        updateTasks.push(fetch(`/api/v1/attachments/${attach.id}/annotation`, {
-          credentials: 'same-origin',
-          method: 'post',
-          body: data
-        })
-          .catch((errorMessage) => {
-            console.log(errorMessage);
-          }));
-      });
-
-    return Promise.all(updateTasks);
-  }
-
   static fetchResearchPlansForElements(id, element) {
     return fetch(`/api/v1/research_plans/linked?id=${id}&element=${element}`, {
       credentials: 'same-origin',
diff --git a/app/packs/src/fetchers/SamplesFetcher.js b/app/packs/src/fetchers/SamplesFetcher.js
index c41b364e3c..a94a9cb1f5 100644
--- a/app/packs/src/fetchers/SamplesFetcher.js
+++ b/app/packs/src/fetchers/SamplesFetcher.js
@@ -6,7 +6,6 @@ import AttachmentFetcher from 'src/fetchers/AttachmentFetcher';
 import BaseFetcher from 'src/fetchers/BaseFetcher';
 import GenericElsFetcher from 'src/fetchers/GenericElsFetcher';
 
-
 export default class SamplesFetcher {
   static fetchSamplesByUIStateAndLimit(params) {
     const limit = params.limit ? limit : null;
@@ -15,7 +14,7 @@ export default class SamplesFetcher {
       credentials: 'same-origin',
       method: 'POST',
       headers: {
-        'Accept': 'application/json',
+        Accept: 'application/json',
         'Content-Type': 'application/json'
       },
       body: JSON.stringify({
@@ -27,22 +26,18 @@ export default class SamplesFetcher {
         },
         limit: params.limit
       })
-    }).then((response) => {
-      return response.json()
-    }).then((json) => {
-      return json.samples.map((s) => new Sample(s));
-    }).catch((errorMessage) => {
-      console.log(errorMessage);
-    });
+    }).then((response) => response.json())
+      .then((json) => json.samples.map((s) => new Sample(s)))
+      .catch((errorMessage) => {
+        console.log(errorMessage);
+      });
   }
 
   static fetchById(id) {
-    let promise = fetch('/api/v1/samples/' + id + '.json', {
+    const promise = fetch(`/api/v1/samples/${id}.json`, {
       credentials: 'same-origin'
     })
-      .then((response) => {
-        return response.json()
-      }).then((json) => {
+      .then((response) => response.json()).then((json) => {
         const rSample = new Sample(json.sample);
         if (json.error) {
           rSample.id = `${id}:error:Sample ${id} is not accessible!`;
@@ -55,8 +50,8 @@ export default class SamplesFetcher {
   }
 
   static fetchByCollectionId(id, queryParams = {}, isSync = false, moleculeSort = false) {
-    queryParams.moleculeSort = moleculeSort;
-    return BaseFetcher.fetchByCollectionId(id, queryParams, isSync, 'samples', Sample);
+    const updatedQueryParams = { ...queryParams, moleculeSort };
+    return BaseFetcher.fetchByCollectionId(id, updatedQueryParams, isSync, 'samples', Sample);
   }
 
   static findByShortLabel(shortLabel) {
@@ -66,7 +61,7 @@ export default class SamplesFetcher {
         credentials: 'same-origin',
         headers: { 'Content-Type': 'application/json' }
       }
-    ).then((response) => response.json()).catch(errorMessage => console.log(errorMessage))
+    ).then((response) => response.json()).catch((errorMessage) => console.log(errorMessage));
   }
 
   static update(sample) {
@@ -79,19 +74,17 @@ export default class SamplesFetcher {
         'Content-Type': 'application/json'
       },
       body: JSON.stringify(sample.serialize())
-    }).then(response => response.json())
-      .then(json => GenericElsFetcher.uploadGenericFiles(sample, json.sample.id, 'Sample')   
-      .then(() => BaseFetcher.updateAnnotationsInContainer(sample))
-      .then(() => this.fetchById(json.sample.id))).catch((errorMessage) => {
-          console.log(errorMessage);
+    }).then((response) => response.json())
+      .then((json) => GenericElsFetcher.uploadGenericFiles(sample, json.sample.id, 'Sample')
+        .then(() => BaseFetcher.updateAnnotationsInContainer(sample))
+        .then(() => this.fetchById(json.sample.id))).catch((errorMessage) => {
+        console.log(errorMessage);
       });
 
     if (files.length > 0) {
-      let tasks = [];
-      files.forEach(file => tasks.push(AttachmentFetcher.uploadFile(file).then()));
-      return Promise.all(tasks).then(() => {
-        return promise();
-      });
+      const tasks = [];
+      files.forEach((file) => tasks.push(AttachmentFetcher.uploadFile(file).then()));
+      return Promise.all(tasks).then(() => promise());
     }
 
     return promise();
@@ -107,24 +100,22 @@ export default class SamplesFetcher {
         'Content-Type': 'application/json'
       },
       body: JSON.stringify(sample.serialize())
-    }).then(response => response.json())
-      .then(json => GenericElsFetcher.uploadGenericFiles(sample, json.sample.id, 'Sample')
+    }).then((response) => response.json())
+      .then((json) => GenericElsFetcher.uploadGenericFiles(sample, json.sample.id, 'Sample')
         .then(() => this.fetchById(json.sample.id))).catch((errorMessage) => {
-          console.log(errorMessage);
-        });
-    if (files.length > 0) {
-      let tasks = [];
-      files.forEach(file => tasks.push(AttachmentFetcher.uploadFile(file)));
-      return Promise.all(tasks).then(() => {
-        return promise();
+        console.log(errorMessage);
       });
+    if (files.length > 0) {
+      const tasks = [];
+      files.forEach((file) => tasks.push(AttachmentFetcher.uploadFile(file)));
+      return Promise.all(tasks).then(() => promise());
     }
 
     return promise();
   }
 
   static splitAsSubsamples(params) {
-    let promise = fetch('/api/v1/samples/subsamples/', {
+    const promise = fetch('/api/v1/samples/subsamples/', {
       credentials: 'same-origin',
       method: 'POST',
       headers: {
@@ -141,11 +132,7 @@ export default class SamplesFetcher {
           currentCollectionId: params.currentCollection.id
         }
       })
-    }).then((response) => {
-      return response.json()
-    }).then((json) => {
-      return json;
-    }).catch((errorMessage) => {
+    }).then((response) => response.json()).then((json) => json).catch((errorMessage) => {
       console.log(errorMessage);
     });
 
diff --git a/app/packs/src/fetchers/WellplatesFetcher.js b/app/packs/src/fetchers/WellplatesFetcher.js
index a7e37ed1b2..2884362e40 100644
--- a/app/packs/src/fetchers/WellplatesFetcher.js
+++ b/app/packs/src/fetchers/WellplatesFetcher.js
@@ -62,7 +62,7 @@ export default class WellplatesFetcher {
       }
       return AttachmentFetcher.updateAttachables(newFiles, 'Wellplate', json.wellplate.id, delFiles)();
     })
-      .then(() => BaseFetcher.updateAnnotationsInContainer(wellplate))
+      .then(() => BaseFetcher.updateAnnotations(wellplate))
       .then(() => WellplatesFetcher.fetchById(wellplate.id))
       .catch((errorMessage) => {
         console.log(errorMessage);
@@ -89,16 +89,16 @@ export default class WellplatesFetcher {
       },
       body: JSON.stringify(wellplate.serialize())
     })
-    .then((response) => response.json())
-    .then((json) => {
-      if (files.length <= 0) {
-        return new Wellplate(json.wellplate);
-      }
-      return AttachmentFetcher.updateAttachables(files, 'Wellplate', json.wellplate.id, [])()
-        .then(() => new Wellplate(json.wellplate));
-    }).catch((errorMessage) => {
-      console.log(errorMessage);
-    });
+      .then((response) => response.json())
+      .then((json) => {
+        if (files.length <= 0) {
+          return new Wellplate(json.wellplate);
+        }
+        return AttachmentFetcher.updateAttachables(files, 'Wellplate', json.wellplate.id, [])()
+          .then(() => new Wellplate(json.wellplate));
+      }).catch((errorMessage) => {
+        console.log(errorMessage);
+      });
 
     if (containerFiles.length > 0) {
       const tasks = [];
diff --git a/app/packs/src/models/Wellplate.js b/app/packs/src/models/Wellplate.js
index b99e1b8c36..4aa86c2c21 100644
--- a/app/packs/src/models/Wellplate.js
+++ b/app/packs/src/models/Wellplate.js
@@ -1,6 +1,8 @@
+/* eslint-disable camelcase */
+/* eslint-disable no-underscore-dangle */
 import Element from 'src/models/Element';
 import Well from 'src/models/Well';
-import Container from 'src/models/Container.js';
+import Container from 'src/models/Container';
 import Segment from 'src/models/Segment';
 
 export default class Wellplate extends Element {
@@ -13,7 +15,7 @@ export default class Wellplate extends Element {
   static buildEmpty(collection_id) {
     return new Wellplate(
       {
-        collection_id: collection_id,
+        collection_id,
         type: 'wellplate',
         name: 'New Wellplate',
         size: 96,
@@ -24,35 +26,31 @@ export default class Wellplate extends Element {
         segments: [],
         attachments: []
       }
-    )
+    );
   }
 
   static buildFromSamplesAndCollectionId(clipboardSamples, collection_id) {
-    let samples = clipboardSamples.map(sample => {
-      return sample.buildChild();
-    });
+    const samples = clipboardSamples.map((sample) => sample.buildChild());
 
-    let wells = samples.map(sample => {
-      return new Well({
-        sample: sample,
-        readouts: []
-      });
-    })
+    const wells = samples.map((sample) => new Well({
+      sample,
+      readouts: []
+    }));
 
     return new Wellplate(
       {
-        collection_id: collection_id,
+        collection_id,
         type: 'wellplate',
         name: 'New Wellplate',
         size: 96,
         description: Wellplate.quillDefault(),
-        wells: wells,
+        wells,
         readout_titles: [],
         container: Container.init(),
         segments: [],
         attachments: [],
       }
-    )
+    );
   }
 
   get name() {
@@ -72,15 +70,15 @@ export default class Wellplate extends Element {
   }
 
   get wells() {
-    return this._wells
+    return this._wells;
   }
 
   set wells(wells) {
-    this._wells = wells.map(w => new Well(w));
+    this._wells = wells.map((w) => new Well(w));
   }
 
   set segments(segments) {
-    this._segments = (segments && segments.map(s => new Segment(s))) || [];
+    this._segments = (segments && segments.map((s) => new Segment(s))) || [];
   }
 
   get segments() {
@@ -92,11 +90,11 @@ export default class Wellplate extends Element {
       name: this.name,
       size: this.size,
       description: this.description,
-      wells: this.wells.map(w => w.serialize()),
+      wells: this.wells.map((w) => w.serialize()),
       readout_titles: this.readout_titles,
       container: this.container,
       attachments: this.attachments,
-      segments: this.segments.map(s => s.serialize())
+      segments: this.segments.map((s) => s.serialize())
     });
   }
 
@@ -127,7 +125,7 @@ export default class Wellplate extends Element {
   }
 
   title() {
-    const short_label = this.short_label ? this.short_label : ''
-    return this.name ? `${short_label} ${this.name}` : short_label
+    const short_label = this.short_label ? this.short_label : '';
+    return this.name ? `${short_label} ${this.name}` : short_label;
   }
 }
diff --git a/spec/api/chemotion/attachment_api_spec.rb b/spec/api/chemotion/attachment_api_spec.rb
index 73175ed8d7..8d0bd78b06 100644
--- a/spec/api/chemotion/attachment_api_spec.rb
+++ b/spec/api/chemotion/attachment_api_spec.rb
@@ -22,6 +22,8 @@
         'filesize' => attachment.filesize,
         'identifier' => attachment.identifier,
         'thumb' => attachment.thumb,
+        'created_at' => kind_of(String),
+        'updated_at' => kind_of(String),
       },
     }
   end
@@ -67,7 +69,7 @@
       end
 
       it 'returns the deleted attachment' do
-        expect(parsed_json_response).to eq(expected_response)
+        expect(parsed_json_response).to include(expected_response)
       end
 
       it 'deletes the attachment on database', :enable_usecases_attachments_delete do
@@ -116,7 +118,7 @@
       end
 
       it 'returns the deleted attachment' do
-        expect(parsed_json_response).to eq(expected_response)
+        expect(parsed_json_response).to include(expected_response)
       end
 
       it 'unlinks the attachment from container', :enable_usecases_attachments_unlink do
diff --git a/spec/api/chemotion/sample_api_spec.rb b/spec/api/chemotion/sample_api_spec.rb
index ab9c394ffb..79250c10c3 100644
--- a/spec/api/chemotion/sample_api_spec.rb
+++ b/spec/api/chemotion/sample_api_spec.rb
@@ -358,12 +358,12 @@
     end
 
     context 'when molecule_sort is enabled' do
-      let!(:sample) { create(:sample, collections: [personal_collection]) }
-      let!(:sample2) { create(:sample, collections: [personal_collection]) }
+      let!(:sample) { create(:sample, created_at: 1.day.ago, collections: [personal_collection]) }
+      let!(:sample2) { create(:sample, created_at: 2.days.ago, collections: [personal_collection]) }
 
       it 'returns samples in the right order' do
         get '/api/v1/samples', params: { molecule_sort: 1 }
-        expect(JSON.parse(response.body)['samples'].pluck('id')).to eq([sample.id, sample2.id])
+        expect(JSON.parse(response.body)['samples'].pluck('id')).to eq([sample2.id, sample.id])
       end
     end
 
diff --git a/spec/javascripts/packs/src/apps/mydb/elements/details/researchPlans/ImageAnnotationEditButton.spec.js b/spec/javascripts/packs/src/apps/mydb/elements/details/researchPlans/ImageAnnotationEditButton.spec.js
index 718d52ca3b..fa9a772dab 100644
--- a/spec/javascripts/packs/src/apps/mydb/elements/details/researchPlans/ImageAnnotationEditButton.spec.js
+++ b/spec/javascripts/packs/src/apps/mydb/elements/details/researchPlans/ImageAnnotationEditButton.spec.js
@@ -21,8 +21,8 @@ describe('ImageAnnotationEditButton', () => {
 
       it('button is rendered but disabled', () => {
         expect(wrapper.html())
-          .toEqual('<span class=""><button disabled="" style="pointer-events:none" type="button" '
-           + 'class="btn btn-xs btn-warning"><i class="fa fa-pencil" aria-hidden="true"></i></button></span>');
+          .toEqual('<span><button disabled="" type="button" '
+           + 'class="btn btn-xs btn-warning"><i class="fa fa-pencil-square-o" aria-hidden="true"></i></button></span>');
       });
     });
 
@@ -32,8 +32,8 @@ describe('ImageAnnotationEditButton', () => {
 
       it('button is rendered and not disabled', () => {
         expect(wrapper.html())
-          .toEqual('<button type="button" class="btn btn-xs btn-warning">'
-           + '<i class="fa fa-pencil" aria-hidden="true"></i></button>');
+          .toEqual('<span><button type="button" class="btn btn-xs btn-warning">'
+           + '<i class="fa fa-pencil-square-o" aria-hidden="true"></i></button></span>');
       });
     });
 
@@ -44,13 +44,5 @@ describe('ImageAnnotationEditButton', () => {
         expect(wrapper.html()).toEqual(null);
       });
     });
-
-    context('with not supported image type(gif)', () => {
-      const wrapper = shallow(<ImageAnnotationEditButton attachment={gifAttachment} parent={parent} />);
-
-      it('button is not rendered', () => {
-        expect(wrapper.html()).toEqual(null);
-      });
-    });
   });
 });