[issue_tracker] Display attachments (#8346)

Display image attachments inline in the imaging browser.

Resolves #8005

Author: CamilleBeau

CHANGELOG.md

@@ -13,6 +13,7 @@ changes in the following format: PR #1234***
 #### Features
 - Added new interface intended to be used for querying module data from PHP (PR #8215) 
 - Added the NOT NULL constraint on Project Name (PR #8295)
+- Added ability to display images in issue tracker tickets (PR #8346)
 - Migrated instrument permissions from config.xml to database and added the ability
   to manage instrument permissions in the frontend from the `instrument_manager`
   module. (PR #8302)

modules/issue_tracker/jsx/attachments/attachmentsList.js

@@ -151,6 +151,15 @@ class AttachmentsList extends Component {
     );
   }
 
+  /**
+   * Sets event target src to null
+   *
+   * @param {Object} event
+   */
+  displayNone(event) {
+    event.target.src = null;
+  }
+
   /**
    * Renders the React component.
    *
@@ -187,6 +196,7 @@ class AttachmentsList extends Component {
     );
 
     let attachmentsRows = [];
+    let regexImg = /image/;
     for (const key in this.state.attachments) {
       if (this.state.attachments.hasOwnProperty(key)) {
         const item = this.state.attachments[key];
@@ -205,7 +215,26 @@ class AttachmentsList extends Component {
               </div>
               <div className='col-md-8'>
                 <div className='col-md-1'><b>File: </b></div>
-                <div className='col-md-11'><i>{item.file_name}</i></div>
+                <div className='col-md-11'>
+                  <i>{item.file_name}</i>
+                  {regexImg.test(item.mime_type) ?
+                    (<img
+                      src={this.props.baseURL +
+                      '/issue_tracker/Attachment' +
+                      '?ID=' + item.ID +
+                      '&file_hash=' + item.file_hash +
+                      '&issue=' + this.props.issue +
+                      '&filename=' + item.file_name +
+                      '&mime_type=' + item.mime_type
+                      }
+                      width='100%'
+                      height='100%'
+                      onError={this.displayNone}
+                    >
+                    </img>) :
+                    null
+                  }
+                </div>
               </div>
             </div>
             <div className='row'>