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

Author: mawinter69

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>

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;
-}

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);
 })