IDC-2064 & IDC-2059 add more options to debug extension (#2069)

* Add more to debug extension.

* Update and comment out unit tests broke from v3.

extensions/debugging/src/DebugReportModal.css

@@ -7,3 +7,8 @@
   display: flex;
   flex-direction: column;
 }
+
+.debug-report-modal-buttons-container {
+  display: flex;
+  flex-direction: row;
+}

extensions/debugging/src/DebugReportModal.js

@@ -9,12 +9,21 @@ const DubugReportModal = ({
   servers,
   extensionManager,
   mailTo,
+  debugModalMessage,
 }) => {
-  const mailToFunction = () => {
-    const StudyInstanceUID = Object.keys(studies.studyData)[0];
+  const copyDebugDataToClipboard = () => {
+    const body = getEmailBody();
 
-    const subject = encodeURI(`Issue with Study: ${StudyInstanceUID}`);
+    const textArea = document.createElement('textarea');
 
+    textArea.value = body;
+    document.body.appendChild(textArea);
+    textArea.select();
+    document.execCommand('copy');
+    document.body.removeChild(textArea);
+  };
+
+  const getEmailBody = () => {
     let body = `Enter the description of your problem here: \n\n\n`;
 
     body += `============= SESSION INFO =============\n\n`;
@@ -55,13 +64,11 @@ const DubugReportModal = ({
     body += `URL\t ${window.location.href}\n\n`;
 
     // Layout
-
     const { numRows, numColumns, viewportSpecificData } = viewports;
 
     body += '== Viewport Layout ==\n';
     body += `Rows\t${numRows}\n`;
     body += `Columns\t${numColumns}\n\n`;
-
     body += '== Viewports ==\n';
 
     Object.keys(viewportSpecificData).forEach(viewportIndex => {
@@ -75,6 +82,16 @@ const DubugReportModal = ({
       body += `[${row},${column}]\t${vsd.SeriesInstanceUID}\n`;
     });
 
+    return body;
+  };
+
+  const mailToFunction = () => {
+    const StudyInstanceUID = Object.keys(studies.studyData)[0];
+
+    const subject = encodeURI(`Issue with Study: ${StudyInstanceUID}`);
+
+    let body = getEmailBody();
+
     // TODO Text dump of rest of stuff.
 
     body = encodeURI(body);
@@ -84,16 +101,27 @@ const DubugReportModal = ({
 
   return (
     <div className="debug-report-modal-container">
-      {mailTo ? (
+      {debugModalMessage ? <p>{debugModalMessage}</p> : null}
+      <div className="debug-report-modal-buttons-container">
+        {mailTo ? (
+          <div>
+            <ToolbarButton
+              label={'Send Bug Report'}
+              onClick={mailToFunction}
+              icon={'envelope-square'}
+              isActive={false}
+            />
+          </div>
+        ) : null}
         <div>
           <ToolbarButton
-            label={'Send Bug Report'}
-            onClick={mailToFunction}
-            icon={'envelope-square'}
+            label={'Copy To Clipboard'}
+            onClick={copyDebugDataToClipboard}
+            icon={'clipboard'}
             isActive={false}
           />
         </div>
-      ) : null}
+      </div>
       <div>
         <table>
           {getAppVersion()}

extensions/debugging/src/commandsModule.js

@@ -102,6 +102,7 @@ export function getCommands(context, servicesManager, extensionManager) {
             servers={servers}
             extensionManager={extensionManager}
             mailTo={state.mailTo}
+            debugModalMessage={state.debugModalMessage}
           />
         );
       };

extensions/debugging/src/index.js

@@ -36,8 +36,14 @@ export default {
       sharedContext.dicomWebClient = dicomWebClient;
     }
 
-    if (configuration && configuration.mailTo) {
-      state.mailTo = configuration.mailTo;
+    if (configuration) {
+      if (configuration.mailTo) {
+        state.mailTo = configuration.mailTo;
+      }
+
+      if (configuration.debugModalMessage) {
+        state.debugModalMessage = configuration.debugModalMessage;
+      }
     }
   },
 

extensions/debugging/src/state.js

@@ -1,3 +1,3 @@
-const state = { mailTo: undefined };
+const state = { mailTo: undefined, message: undefined };
 
 export default state;