Add Metric Explorer copy to clipboard (#1859)

* Add copy to clipboard for metric explorer charts

* Update documentation for enhancements in this PR and PR #1745

* Remove browser recommendation

Author: aestoltm

CHANGELOG.md

@@ -12,6 +12,10 @@
         - Changed user manual source pages from .docx to .rst. These pages are now stored in version control in the base XDMoD repository.
         - Improved user manual build process from internal scripts to Sphinx. This build process is now done as part of the base XDMoD build.
         - Updated theme from ExtJS to ReadTheDocs.
+    - Metric Explorer
+        - Added copy to clipboard option when generating a link to the current chart.
+    - Job Viewer
+        - Added copy to clipboard option when getting a shareable link to a job.
 - Uncategorized
     - Chart Feature Changes
         - For line charts, the context menu for a data series is brought up by clicking on its points, not its lines. As before, the context menu can also be brought up by clicking on it in the legend.

html/about/release_notes/xdmod.html

@@ -14,6 +14,18 @@ <h2 id="2024-XX-XX-v11-0-0">2024-XX-XX v11.0.0</h2>
             </li>
         </ul>
     </li>
+    <li><p>Enhancements</p>
+        <ul>
+            <li>Metric Explorer<ul>
+                <li>Added copy to clipboard option when generating a link to the current chart.</li>
+            </ul>
+            </li>
+            <li>Job Viewer<ul>
+                <li>Added copy to clipboard option when getting a shareable link to a job.</li>
+            </ul>
+            </li>
+        </ul>
+    </li>
     <li>Uncategorized<ul>
         <li>Chart Feature Changes<ul>
             <li>For line charts, the context menu for a data series is brought up by clicking on its points, not its lines. As before, the context menu can also be brought up by clicking on it in the legend.</li>

html/gui/js/modules/metric_explorer/MetricExplorer.js

@@ -6255,14 +6255,20 @@ Ext.extend(XDMoD.Module.MetricExplorer, XDMoD.PortalModule, {
         // ---------------------------------------------------------
 
         self.on('chart_link_clicked', function () {
-            var encodedData = window.btoa(JSON.stringify(this.getConfig()));
-            var link = window.location.protocol + '//' + window.location.host + '/#main_tab_panel:metric_explorer?config=' + encodedData;
-            var msg = 'Use the following link to share the current chart. Note that the link does not override the access controls. So if you send the link to someone who does not have access to the data, they will still not be able to see the data. <br> We recommend using Chrome or Firefox if the link does not work in Internet Explorer.<br><b>' + link + '</b>';
+            const encodedData = window.btoa(JSON.stringify(this.getConfig()));
+            const link = `${window.location.protocol}//${window.location.host}/#main_tab_panel:metric_explorer?config=${encodedData}`;
+            const msg = `Use the following link to share the current chart. Note that the link does not override the access controls. So if you send the link to someone who does not have access to the data, they will still not be able to see the data. <br><b>${link}</b>`;
             Ext.Msg.show({
                 title: 'Link to Chart',
                 minWidth: 700,
                 msg: msg,
-                buttons: Ext.Msg.OK
+                buttons: { ok: 'Copy', cancel: 'Cancel' },
+                icon: Ext.MessageBox.INFO,
+                fn: (buttonId) => {
+                    if (buttonId === 'ok') {
+                        navigator.clipboard.writeText(link);
+                    }
+                }
             });
         }); // self.on('chart_link_clicked', ...