From f84b69dee5ff4da3e521e2e06be5512671286f80 Mon Sep 17 00:00:00 2001
From: Muthukrishnanmatriot
<76949556+muthukrishnanmatriot@users.noreply.github.com>
Date: Mon, 27 Sep 2021 15:13:01 +0530
Subject: [PATCH] TMSS-997 - updated the code for copy to clipboard function
---
.../tmss_webapp/src/layout/_overrides.scss | 4 +--
.../tmss_webapp/src/show.error.details.js | 31 +++++++++++++++++--
2 files changed, 31 insertions(+), 4 deletions(-)
diff --git a/SAS/TMSS/frontend/tmss_webapp/src/layout/_overrides.scss b/SAS/TMSS/frontend/tmss_webapp/src/layout/_overrides.scss
index d2f3d46ba9d..cbb4d51872c 100644
--- a/SAS/TMSS/frontend/tmss_webapp/src/layout/_overrides.scss
+++ b/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;
}
diff --git a/SAS/TMSS/frontend/tmss_webapp/src/show.error.details.js b/SAS/TMSS/frontend/tmss_webapp/src/show.error.details.js
index 33f2ead8eca..9745e914eaa 100644
--- a/SAS/TMSS/frontend/tmss_webapp/src/show.error.details.js
+++ b/SAS/TMSS/frontend/tmss_webapp/src/show.error.details.js
@@ -1,5 +1,6 @@
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>
--
GitLab