Merge pull request #1396 from Aravindh-Raju/aravindhr/copy-ids-to-clipboard

Copy group, batch and zone id to clipboard

modules/portal/app/views/dnsChanges/dnsChangeDetail.scala.html

@@ -42,6 +42,10 @@
         <div class="row">
             <div class="col-md-12">
                 <p><strong>ID:</strong> {{batch.id}}
+                    <span class="copy-button" ng-click="copyToClipboard()"
+                          data-toggle="tooltip" data-placement="top" title="Copy batch id to clipboard">
+                        <i class="fa fa-clone"></i> Copy
+                    </span>
                     <button class="btn-right-corner" ng-click="exportToCSV(batch.id)">Export CSV</button>
                 </p>
                 <p><strong>Submitted:</strong> {{batch.createdTimestamp}}</p>

modules/portal/app/views/dnsChanges/dnsChanges.scala.html

@@ -111,7 +111,13 @@
                                 <tr ng-repeat="batchChange in batchChanges|filter:query">
                                     <td ng-bind="batchChange.createdTimestamp"></td>
                                     <td ng-if="ignoreAccess" ng-bind="batchChange.userName"></td>
-                                    <td><a href="/dnschanges/{{batchChange.id}}">{{batchChange.id}}</a></td>
+                                    <td>
+                                        <a href="/dnschanges/{{batchChange.id}}">{{batchChange.id}}</a>
+                                        <span class="small-copy-button" ng-click="copyToClipboard(batchChange.id)"
+                                              data-toggle="tooltip" data-placement="top" title="Copy batch id to clipboard">
+                                            <i class="fa fa-clone"></i> Copy
+                                        </span>
+                                    </td>
                                     <td ng-bind="batchChange.totalChanges"></td>
                                     <td>
                                         <span ng-if="batchChange.status == 'Complete'" class="label label-success">{{batchChange.status}}</span>

modules/portal/app/views/groups/groupDetail.scala.html

@@ -16,13 +16,33 @@
 
             <!-- PAGE TITLE -->
             <div class="page-title">
-                <h3><span class="fa fa-group"></span> Group {{membership.group.name}}</h3>
+                <h3>
+                    <span class="fa fa-group"></span> Group: {{membership.group.name}}
+                </h3>
             </div>
             <!-- END PAGE TITLE -->
 
             <!-- PAGE CONTENT WRAPPER -->
             <div class="page-content-wrap">
 
+                <div class="row">
+                    <div class="col-md-12">
+                        <h3 class="batch-change-error-help">
+                            <i class="fa fa-info-circle" style="font-size:18px;color:red">
+                                Updates to group require a valid email. If group email is invalid please enter a valid email.
+                            </i>
+                        </h3>
+                        <p><strong>Group ID:</strong> {{membership.group.id}}
+                            <span class="copy-button" ng-click="copyToClipboard()"
+                                  data-toggle="tooltip" data-placement="top" title="Copy group id to clipboard">
+                                <i class="fa fa-clone"></i> Copy
+                            </span>
+                        </p>
+                        <p><strong>Group Email:</strong> {{membership.group.email}}</p>
+                        <p ng-if="membership.group.description"><strong>Description:</strong> {{membership.group.description}}</p>
+                    </div>
+                </div>
+
                 <div class="alert-wrapper">
                     <div ng-repeat="alert in alerts">
                         <notification ng-model="alert"></notification>
@@ -36,19 +56,9 @@
                         <li ng-if="canViewGroup"><a href="#tab2" data-toggle="tab">Change History</a></li>
                     </ul>
                     <div class="panel-body tab-content">
-
                         <div class="tab-pane active" id="tab1">
-
-                                <h3 class="batch-change-error-help">
-                                    <i class="fa fa-info-circle" style="font-size:18px;color:red">
-                                        Updates to group require a valid email. If group email is invalid please enter a valid email.
-                                    </i>
-                                </h3>
-
                             <div class="row">
                                 <div class="col-md-12">
-                                    <p ng-if="membership.group.description"><strong>Description:</strong> {{membership.group.description}}</p>
-                                    <p><strong>Group Email:</strong> {{membership.group.email}}</p>
                                     <!-- START SIMPLE DATATABLE -->
                                     <div class="panel panel-default">
                                         <div class="panel-heading">

modules/portal/app/views/zones/zoneDetail.scala.html

@@ -30,6 +30,17 @@
         <!-- PAGE CONTENT WRAPPER -->
         <div class="page-content-wrap">
 
+            <div class="row">
+                <div class="col-md-12">
+                    <p><strong>Zone ID:</strong> {{zoneInfo.id}}
+                        <span class="copy-button" ng-click="copyToClipboard()"
+                              data-toggle="tooltip" data-placement="top" title="Copy zone id to clipboard">
+                            <i class="fa fa-clone"></i> Copy
+                        </span>
+                    </p>
+                </div>
+            </div>
+
             <div class="alert-wrapper">
                 <div ng-repeat="alert in alerts">
                     <notification ng-model="alert"></notification>

modules/portal/public/css/vinyldns.css

@@ -288,6 +288,7 @@ body {
 
 .page-title {
     padding: 10px 20px 0;
+    height: 100%;
 }
 
 .page-content-wrap {
@@ -632,3 +633,42 @@ input[type="file"] {
     display: flex;
     flex-direction: column;
 }
+
+.copy-button {
+    display: inline-flex;
+    align-items: center;
+    padding: 2px 6px;
+    border: 1px solid #d1d5da;
+    background-color: #f6f8fa;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 12px;
+    color: #24292e;
+    margin-left: 8px;
+    transition: background-color 0.3s ease;
+}
+
+.copy-button:hover {
+    background-color: #e1e4e8;
+}
+
+.copy-button i {
+    margin-right: 4px;
+    font-size: 12px;
+}
+
+.small-copy-button {
+    font-size: 12px;
+    padding: 2px 6px;
+    display: inline-block;
+    cursor: pointer;
+}
+
+.small-copy-button i {
+    font-size: 12px;
+}
+
+.small-copy-button:hover {
+    background-color: #f0f0f0;
+    border-radius: 4px;
+}

modules/portal/public/lib/controllers/controller.membership.js

@@ -41,6 +41,19 @@ angular.module('controller.membership', []).controller('MembershipController', f
         return $sce.trustAsHtml(message);
     };
 
+    // Initialize Bootstrap tooltips
+    $(document).ready(function() {
+        $('[data-toggle="tooltip"]').tooltip();
+    });
+
+    // Function to copy the ID to clipboard
+    $scope.copyToClipboard = function() {
+        utilityService.copyToClipboard($scope.membership.group.id);
+        // Trigger success alert using utilityService
+        var alert = utilityService.success('Successfully copied group id to clipboard');
+        $scope.alerts.push(alert);
+    };
+
     // paging status for group changes
     var changePaging = pagingService.getNewPagingParams(100);
 

modules/portal/public/lib/controllers/controller.records.js

@@ -99,6 +99,19 @@ angular.module('controller.records', [])
     // paging status for record changes
     var changePaging = pagingService.getNewPagingParams(100);
 
+    // Initialize Bootstrap tooltips
+    $(document).ready(function() {
+        $('[data-toggle="tooltip"]').tooltip();
+    });
+
+    // Function to copy the ID to clipboard
+    $scope.copyToClipboard = function() {
+        utilityService.copyToClipboard($scope.zoneInfo.id);
+        // Trigger success alert using utilityService
+        var alert = utilityService.success('Successfully copied zone id to clipboard');
+        $scope.alerts.push(alert);
+    };
+
     /**
       * Modal control functions
       */

modules/portal/public/lib/dns-change/dns-change-detail.controller.js

@@ -26,6 +26,19 @@
             $scope.reviewConfirmationMsg;
             $scope.reviewType;
 
+            // Initialize Bootstrap tooltips
+            $(document).ready(function() {
+                $('[data-toggle="tooltip"]').tooltip();
+            });
+
+            // Function to copy the ID to clipboard
+            $scope.copyToClipboard = function() {
+                utilityService.copyToClipboard($scope.batch.id);
+                // Trigger success alert using utilityService
+                var alert = utilityService.success('Successfully copied batch id to clipboard');
+                $scope.alerts.push(alert);
+            };
+
             $scope.getBatchChange = function(batchChangeId) {
                 function success(response) {
                     $scope.batch = response.data;

modules/portal/public/lib/dns-change/dns-change-new.controller.js

@@ -44,6 +44,11 @@
             $scope.manualReviewEnabled;
             $scope.naptrFlags = ["U", "S", "A", "P"];
 
+            // Initialize Bootstrap tooltips
+            $(document).ready(function() {
+                $('[data-toggle="tooltip"]').tooltip();
+            });
+
 
             $scope.addSingleChange = function() {
                 $scope.newBatch.changes.push({changeType: "Add", type: "A+PTR"});

modules/portal/public/lib/dns-change/dns-changes.controller.js

@@ -50,6 +50,19 @@
                 $scope.alerts.push(alert);
             }
 
+            // Initialize tooltips after the view has rendered
+            $timeout(function() {
+                $('[data-toggle="tooltip"]').tooltip();
+            }, 0);
+
+            // Function to copy the ID to clipboard
+            $scope.copyToClipboard = function(copyText) {
+                utilityService.copyToClipboard(copyText);
+                // Trigger success alert using utilityService
+                var alert = utilityService.success('Successfully copied batch id to clipboard');
+                $scope.alerts.push(alert);
+            };
+
             $scope.refreshBatchChanges = function() {
                 batchChangePaging = pagingService.resetPaging(batchChangePaging);
 

modules/portal/public/lib/recordset/recordsets.controller.js

@@ -80,6 +80,11 @@
             var recordType = [];
             var recordName = [];
 
+            // Initialize Bootstrap tooltips
+            $(document).ready(function() {
+                $('[data-toggle="tooltip"]').tooltip();
+            });
+
             $( "#record-search-text" ).autocomplete({
               source: function( request, response ) {
                 $.ajax({

modules/portal/public/lib/services/utility/service.utility.js

@@ -46,12 +46,38 @@ angular.module('service.utility', [])
     };
 
     this.success = function(message, response, type) {
+        if (response && type) {
             var msg = "HTTP " + response.status + " (" + response.statusText + "): " + message;
             $log.debug(type, response);
             return {
-            type: "success", content: msg
+                type: "success",
+                content: msg
             };
+        } else {
+            return {
+                type: "success",
+                content: message
             };
+        }
+    };
+
+    // Function to copy the ID to clipboard
+    this.copyToClipboard = function(id) {
+        // Create a temporary input element to hold the ID
+        var tempInput = document.createElement("input");
+        tempInput.style.position = "absolute";
+        tempInput.style.left = "-9999px";
+        tempInput.value = id;
+        document.body.appendChild(tempInput);
+
+        // Select the input value and copy it
+        tempInput.select();
+        document.execCommand("copy");
+
+        // Remove the temporary input
+        document.body.removeChild(tempInput);
+    };
+
 
     this.urlBuilder = function (url, obj) {
         var result = [];