add copy button in batches page

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/public/css/vinyldns.css

@@ -656,3 +656,19 @@ input[type="file"] {
     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/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);