SONAR-16263 Revoke button UI fix

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 f88add6a9fa72114da55dea7745b3b42b3fad3ca..71ddd4742547c10492827874ffabed533da49542 100644 (file)
--- 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 e75d8c66ab33271e22de9e91acc600f0eead9a32..1aa8ba418b7950bb987988ff23da971fb3333e21 100644 (file)
--- 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>
 `;