TMSS-997 - updated the code for copy to clipboard function

SAS/TMSS/frontend/tmss_webapp/src/layout/_overrides.scss

@@ -199,6 +199,7 @@
 } 
 .p-growl {
     z-index: 3000 !important;
+    width: 40em;
 }
 .viewtable .p-hidden-accessible {
     position: relative;
@@ -282,9 +283,8 @@ In Excel View the for Accordion  background color override
     padding-left: 10px;
     background-color: black;
     margin-left: -3px;
-}
+} 
 .show_error {
-    width: 40em;
     margin-left: 67em;
     height: auto !important;
 }

SAS/TMSS/frontend/tmss_webapp/src/show.error.details.js

 import React, {Component} from 'react';
 import UIConstants from './utils/ui.constants';
+import { Growl } from 'primereact/components/growl/Growl';
 
 export class ShowErrorDetails extends Component {
     constructor(props) {
@@ -9,6 +10,7 @@ export class ShowErrorDetails extends Component {
             showDetails: false
         }
         this.showHideErrorDetails = this.showHideErrorDetails.bind(this);
+        this.copyErrorDetailsToClipboard = this.copyErrorDetailsToClipboard.bind(this);
     }
 
     /**
@@ -30,23 +32,48 @@ export class ShowErrorDetails extends Component {
         }
     }
 
+    /**
+     * Copy the error details to clipboard
+     */
+    async copyErrorDetailsToClipboard() {
+        try {
+            const queryOpts = { name: 'clipboard-write', allowWithoutGesture: true };
+            await navigator.permissions.query(queryOpts);
+            await navigator.clipboard.writeText(this.props.response.request.response);
+        }   catch(error) {
+            try{
+                const elem = document.createElement('textarea');
+                elem.value = this.props.response.request.response;
+                document.body.appendChild(elem);
+                elem.select();
+                document.execCommand('copy');
+                document.body.removeChild(elem);
+            } catch (error) {
+                this.growl.show({severity: 'error', summary: 'Warning', detail: 'Unable to copy the data to clipboard'});
+            }
+        }
+        this.growl.show({severity: 'success', summary: '', detail: 'Error details is copied to clipboard'});
+    }
+
     render() {
         const httpStatusMsg = UIConstants.httpStatusMessages[this.props.response.status];
         const data = httpStatusMsg? httpStatusMsg.detail: '';
         var message = '['+this.props.response.status+'] '+JSON.stringify(this.props.response.statusText)+ ' ['+data+']';
         return (
             <div>
+                 <Growl ref={(el) => this.growl = el} />
                 <div>
                     {message}
                 </div>
                 <div>
                     <div className="show_error_hide" >
                         <a href='#' onClick={this.showHideErrorDetails} > {this.state.buttonLabel} </a>
+                        <a href='#' onClick={this.copyErrorDetailsToClipboard} style={{marginLeft: '1em'}} title="Copy the error details to clipboard" > <i class="fas fa-copy"></i> </a>
                     </div>
                     {this.state.showDetails &&
                         <div>
-                            <p style={{fontWeight: 'bold'}}> Error Details: </p>
-                            <div className="show_error_details" >
+                            <p style={{fontWeight: 'bold'}}> Error Details:</p>
+                            <div id="showError" className="show_error_details" >
                                 {this.props.response.request.response}
                             </div>
                         </div>