From 4e6cd0e8fd39769762a788929345187414a6c0d0 Mon Sep 17 00:00:00 2001
From: Guillaume Peoc'h <guillaume.peoch@sonarsource.com>
Date: Tue, 3 May 2022 10:56:05 +0200
Subject: [PATCH] SONAR-16263 Revoke button UI fix

---
 .../apps/users/components/TokensFormItem.tsx  |  8 ++---
 .../TokensFormItem-test.tsx.snap              | 32 +++++++++----------
 2 files changed, 18 insertions(+), 22 deletions(-)

diff --git a/server/sonar-web/src/main/js/apps/users/components/TokensFormItem.tsx b/server/sonar-web/src/main/js/apps/users/components/TokensFormItem.tsx
index f88add6a9fa..71ddd474254 100644
--- a/server/sonar-web/src/main/js/apps/users/components/TokensFormItem.tsx
+++ b/server/sonar-web/src/main/js/apps/users/components/TokensFormItem.tsx
@@ -99,9 +99,6 @@ export default class TokensFormItem extends React.PureComponent<Props, State> {
           <DateFormatter date={token.createdAt} long={true} />
         </td>
         <td className="thin nowrap text-right">
-          <DeferredSpinner loading={loading}>
-            <i className="deferred-spinner-placeholder" />
-          </DeferredSpinner>
           {deleteConfirmation === 'modal' ? (
             <ConfirmButton
               confirmButtonText={translate('users.tokens.revoke_token')}
@@ -117,7 +114,7 @@ export default class TokensFormItem extends React.PureComponent<Props, State> {
               onConfirm={this.handleRevoke}>
               {({ onClick }) => (
                 <Button
-                  className="spacer-left button-red input-small"
+                  className="button-red input-small"
                   disabled={loading}
                   onClick={onClick}
                   title={translate('users.tokens.revoke_token')}>
@@ -127,9 +124,10 @@ export default class TokensFormItem extends React.PureComponent<Props, State> {
             </ConfirmButton>
           ) : (
             <Button
-              className="button-red input-small spacer-left"
+              className="button-red input-small"
               disabled={loading}
               onClick={this.handleClick}>
+              <DeferredSpinner className="little-spacer-right" loading={loading} />
               {showConfirmation ? translate('users.tokens.sure') : translate('users.tokens.revoke')}
             </Button>
           )}
diff --git a/server/sonar-web/src/main/js/apps/users/components/__tests__/__snapshots__/TokensFormItem-test.tsx.snap b/server/sonar-web/src/main/js/apps/users/components/__tests__/__snapshots__/TokensFormItem-test.tsx.snap
index e75d8c66ab3..1aa8ba418b7 100644
--- a/server/sonar-web/src/main/js/apps/users/components/__tests__/__snapshots__/TokensFormItem-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/users/components/__tests__/__snapshots__/TokensFormItem-test.tsx.snap
@@ -36,18 +36,15 @@ exports[`should render correctly 1`] = `
   <td
     className="thin nowrap text-right"
   >
-    <DeferredSpinner
-      loading={false}
-    >
-      <i
-        className="deferred-spinner-placeholder"
-      />
-    </DeferredSpinner>
     <Button
-      className="button-red input-small spacer-left"
+      className="button-red input-small"
       disabled={false}
       onClick={[Function]}
     >
+      <DeferredSpinner
+        className="little-spacer-right"
+        loading={false}
+      />
       users.tokens.revoke
     </Button>
   </td>
@@ -90,13 +87,6 @@ exports[`should render correctly 2`] = `
   <td
     className="thin nowrap text-right"
   >
-    <DeferredSpinner
-      loading={false}
-    >
-      <i
-        className="deferred-spinner-placeholder"
-      />
-    </DeferredSpinner>
     <ConfirmButton
       confirmButtonText="users.tokens.revoke_token"
       isDestructive={true}
@@ -124,20 +114,28 @@ exports[`should render correctly 2`] = `
 
 exports[`should revoke the token using inline confirmation 1`] = `
 <Button
-  className="button-red input-small spacer-left"
+  className="button-red input-small"
   disabled={false}
   onClick={[Function]}
 >
+  <DeferredSpinner
+    className="little-spacer-right"
+    loading={false}
+  />
   users.tokens.revoke
 </Button>
 `;
 
 exports[`should revoke the token using inline confirmation 2`] = `
 <Button
-  className="button-red input-small spacer-left"
+  className="button-red input-small"
   disabled={false}
   onClick={[Function]}
 >
+  <DeferredSpinner
+    className="little-spacer-right"
+    loading={false}
+  />
   users.tokens.sure
 </Button>
 `;
-- 
2.39.5