use jenkins buttons and dialog (#1597)

small UI update for the access tokens replace yui-button with jenkins-button to be synv with the overall jenkins styling Use a dialog to confirm revocation of access tokens
jenkinsci · Jul 26, 2024 · b71dd01 · b71dd01
1 parent 2b86b58
commit b71dd01
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 26 deletions.
diff --git a/src/main/resources/hudson/plugins/git/ApiTokenPropertyConfiguration/config.jelly b/src/main/resources/hudson/plugins/git/ApiTokenPropertyConfiguration/config.jelly
@@ -16,11 +16,11 @@
                             <div class="api-token-list-item-row api-token-list-existing-token">
                                 <f:textbox readonly="true" value="${apiToken.name}" />
                                 <!-- onclick handler for that button is defined in resources.js -->
-                                <a href="#" class="yui-button api-token-revoke-button"
+                                <button type="button" class="jenkins-button api-token-revoke-button"
                                    data-confirm="${%Are you sure you want to revoke this access token?}"
                                    data-target-url="${descriptor.descriptorFullUrl}/revoke">
                                     ${%Revoke}
-                                </a>
+                                </button>
                             </div>
                         </j:when>
                         <j:otherwise>
@@ -29,23 +29,21 @@
                                     <input type="hidden" class="api-token-uuid-input" name="apiTokenUuid" value="${apiToken.uuid}" />
                                     <f:textbox clazz="api-token-name-input" name="apiTokenName" placeholder="${%Access token name}"/>
                                     <span class="new-api-token-value hidden"><!-- to be filled by JS --></span>
-                                    <span class="yui-button api-token-save-button">
-                                        <!-- onclick handler for that button is defined in resources.js -->
-                                        <button type="button" tabindex="0" data-target-url="${descriptor.descriptorFullUrl}/generate">
-                                            ${%Generate}
-                                        </button>
-                                    </span>
-                                    <span class="api-token-cancel-button">
-                                        <f:repeatableDeleteButton value="${%Cancel}" />
-                                    </span>
+                                    <!-- onclick handler for that button is defined in resources.js -->
+                                    <button type="button" class="jenkins-button api-token-save-button" tabindex="0" data-target-url="${descriptor.descriptorFullUrl}/generate">
+                                        ${%Generate}
+                                    </button>
                                     <l:copyButton message="${%Copied}" text="" clazz="hidden" tooltip="${%Copy to clipboard}" />
                                     <!-- onclick handler for that button is defined in resources.js -->
-                                    <a href="#" class="yui-button api-token-revoke-button hidden"
+                                    <button type="button" class="jenkins-button api-token-revoke-button hidden"
                                        data-confirm="${%Are you sure you want to revoke this access token?}"
                                        data-target-url="${descriptor.descriptorFullUrl}/revoke">
                                         ${%Revoke}
-                                    </a>
+                                    </button>
                                 </div>
+                                <span class="api-token-cancel-button">
+                                  <f:repeatableDeleteButton value="${%Cancel}" />
+                                </span>
                                 <span class="warning api-token-warning-message hidden">${%Access token will only be displayed once.}</span>
                             </div>
                         </j:otherwise>

diff --git a/src/main/resources/hudson/plugins/git/ApiTokenPropertyConfiguration/resources.css b/src/main/resources/hudson/plugins/git/ApiTokenPropertyConfiguration/resources.css
@@ -2,17 +2,9 @@
     display: flex;
     align-items: center;
     max-width: 700px;
-}
-.api-token-list .api-token-list-item-row.api-token-list-existing-api-token {
-    justify-content: space-between;
+    gap: 10px;
 }
 .api-token-list .api-token-list-item .hidden, .api-token-list .api-token-list-empty-item.hidden {
     display: none;
 }
 
-.api-token-list .api-token-revoke-button, .api-token-list .new-api-token-value {
-    padding: 0 0.5rem;
-}
-.api-token-list .api-token-warning-message, .api-token-list .api-token-save-button {
-    margin: 0.5rem 0;
-}
diff --git a/src/main/resources/hudson/plugins/git/ApiTokenPropertyConfiguration/resources.js b/src/main/resources/hudson/plugins/git/ApiTokenPropertyConfiguration/resources.js
@@ -19,7 +19,7 @@ function revokeApiToken(anchorRevoke) {
     const inputUuid = repeatedChunk.querySelector('.api-token-uuid-input');
     const apiTokenUuid = inputUuid.value;
 
-    if (confirm(confirmMessage)) {
+    dialog.confirm(confirmMessage).then( () => {
         fetch(targetUrl, {
             headers: crumb.wrap({
               "Content-Type": "application/x-www-form-urlencoded",
@@ -32,21 +32,20 @@ function revokeApiToken(anchorRevoke) {
                 adjustEmptyListMessage(apiTokenList);
             }
         });
-    }
+    });
 
     return false;
 }
 
 /**
 * Registering the onclick handler on all the "Generate" buttons for API Token.
 */
-Behaviour.specify(".api-token-save-button", 'ApiTokenPropertyConfiguration', 0, function(buttonContainer) {
+Behaviour.specify(".api-token-save-button", 'ApiTokenPropertyConfiguration', 0, function(button) {
     // DEV MEMO:
     // While un-inlining the onclick handler, we are trying to avoid modifying the existing source code and functions.
     // In order to keep consistency with the existing code, we add our onclick handler on the button element which is contained in the
     // api-token-save-button that we identify. While this could be refactored to directly identify the button, this would need to be done in an other
     // contribution.
-    const button = buttonContainer.getElementsByTagName('button')[0];
     button.onclick = (_) => saveApiToken(button);
 })