Fix wrong delete button usage in auto org import canceling

6 files changed, 25 insertions, 16 deletions

diff --git a/server/sonar-web/src/main/js/apps/create/organization/AutoOrganizationCreate.tsx b/server/sonar-web/src/main/js/apps/create/organization/AutoOrganizationCreate.tsx
index 08ad2ed676f..a9193117774 100644
--- a/server/sonar-web/src/main/js/apps/create/organization/AutoOrganizationCreate.tsx
+++ b/server/sonar-web/src/main/js/apps/create/organization/AutoOrganizationCreate.tsx
@@ -25,7 +25,8 @@ import OrganizationDetailsStep from './OrganizationDetailsStep';
 import PlanStep from './PlanStep';
 import { Step } from './utils';
 import { Alert } from '../../../components/ui/Alert';
-import { DeleteButton } from '../../../components/ui/buttons';
+import { ButtonIcon } from '../../../components/ui/buttons';
+import ClearIcon from '../../../components/icons-components/ClearIcon';
 import RadioToggle from '../../../components/controls/RadioToggle';
 import { bindAlmOrganization } from '../../../api/alm-integration';
 import { sanitizeAlmId, getAlmMembersUrl, isGithub } from '../../../helpers/almIntegrations';
@@ -136,10 +137,9 @@ export default class AutoOrganizationCreate extends React.PureComponent<Props, S
                   name: <strong>{almOrganization.name}</strong>
                 }}
               />
-              <DeleteButton
-                className="little-spacer-left"
-                onClick={this.props.handleCancelImport}
-              />
+              <ButtonIcon className="little-spacer-left" onClick={this.props.handleCancelImport}>
+                <ClearIcon />
+              </ButtonIcon>
             </p>
 
             {hasUnboundOrgs && (
diff --git a/server/sonar-web/src/main/js/apps/create/organization/AutoPersonalOrganizationBind.tsx b/server/sonar-web/src/main/js/apps/create/organization/AutoPersonalOrganizationBind.tsx
index c50cb5ff706..a97e49ed951 100644
--- a/server/sonar-web/src/main/js/apps/create/organization/AutoPersonalOrganizationBind.tsx
+++ b/server/sonar-web/src/main/js/apps/create/organization/AutoPersonalOrganizationBind.tsx
@@ -23,11 +23,12 @@ import OrganizationDetailsForm from './OrganizationDetailsForm';
 import OrganizationDetailsStep from './OrganizationDetailsStep';
 import PlanStep from './PlanStep';
 import { Step } from './utils';
-import { DeleteButton } from '../../../components/ui/buttons';
+import ClearIcon from '../../../components/icons-components/ClearIcon';
+import OrganizationAvatar from '../../../components/common/OrganizationAvatar';
+import { ButtonIcon } from '../../../components/ui/buttons';
 import { getBaseUrl } from '../../../helpers/urls';
 import { translate } from '../../../helpers/l10n';
 import { sanitizeAlmId } from '../../../helpers/almIntegrations';
-import OrganizationAvatar from '../../../components/common/OrganizationAvatar';
 
 interface Props {
   almApplication: T.AlmApplication;
@@ -97,7 +98,9 @@ export default class AutoPersonalOrganizationBind extends React.PureComponent<Pr
                 personalName: importPersonalOrg && <strong>{importPersonalOrg.name}</strong>
               }}
             />
-            <DeleteButton className="little-spacer-left" onClick={this.props.handleCancelImport} />
+            <ButtonIcon className="little-spacer-left" onClick={this.props.handleCancelImport}>
+              <ClearIcon />
+            </ButtonIcon>
           </div>
           <OrganizationDetailsForm
             keyReadOnly={true}
diff --git a/server/sonar-web/src/main/js/apps/create/organization/__tests__/AutoOrganizationCreate-test.tsx b/server/sonar-web/src/main/js/apps/create/organization/__tests__/AutoOrganizationCreate-test.tsx
index 151c5c51ed8..0e5500e5160 100644
--- a/server/sonar-web/src/main/js/apps/create/organization/__tests__/AutoOrganizationCreate-test.tsx
+++ b/server/sonar-web/src/main/js/apps/create/organization/__tests__/AutoOrganizationCreate-test.tsx
@@ -62,7 +62,7 @@ it('should allow to cancel org import', () => {
   const handleCancelImport = jest.fn().mockResolvedValue({ key: 'foo' });
   const wrapper = shallowRender({ handleCancelImport });
 
-  click(wrapper.find('DeleteButton'));
+  click(wrapper.find('ButtonIcon'));
   expect(handleCancelImport).toBeCalled();
 });
 
diff --git a/server/sonar-web/src/main/js/apps/create/organization/__tests__/AutoPersonalOrganizationBind-test.tsx b/server/sonar-web/src/main/js/apps/create/organization/__tests__/AutoPersonalOrganizationBind-test.tsx
index 7aec3fc2661..8d9282c3f10 100644
--- a/server/sonar-web/src/main/js/apps/create/organization/__tests__/AutoPersonalOrganizationBind-test.tsx
+++ b/server/sonar-web/src/main/js/apps/create/organization/__tests__/AutoPersonalOrganizationBind-test.tsx
@@ -56,7 +56,7 @@ it('should allow to cancel org import', () => {
     handleCancelImport
   });
 
-  click(wrapper.find('DeleteButton'));
+  click(wrapper.find('ButtonIcon'));
   expect(handleCancelImport).toBeCalled();
 });
 
diff --git a/server/sonar-web/src/main/js/apps/create/organization/__tests__/__snapshots__/AutoOrganizationCreate-test.tsx.snap b/server/sonar-web/src/main/js/apps/create/organization/__tests__/__snapshots__/AutoOrganizationCreate-test.tsx.snap
index 1af9195ea68..89856c1c8b3 100644
--- a/server/sonar-web/src/main/js/apps/create/organization/__tests__/__snapshots__/AutoOrganizationCreate-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/create/organization/__tests__/__snapshots__/AutoOrganizationCreate-test.tsx.snap
@@ -31,10 +31,12 @@ exports[`should display choice between import or creation 1`] = `
             }
           }
         />
-        <DeleteButton
+        <ButtonIcon
           className="little-spacer-left"
           onClick={[MockFunction]}
-        />
+        >
+          <ClearIcon />
+        </ButtonIcon>
       </p>
       <RadioToggle
         disabled={false}
@@ -130,10 +132,12 @@ exports[`should render prefilled and create org 1`] = `
             }
           }
         />
-        <DeleteButton
+        <ButtonIcon
           className="little-spacer-left"
           onClick={[MockFunction]}
-        />
+        >
+          <ClearIcon />
+        </ButtonIcon>
       </p>
     </div>
     <OrganizationDetailsForm
diff --git a/server/sonar-web/src/main/js/apps/create/organization/__tests__/__snapshots__/AutoPersonalOrganizationBind-test.tsx.snap b/server/sonar-web/src/main/js/apps/create/organization/__tests__/__snapshots__/AutoPersonalOrganizationBind-test.tsx.snap
index d465e5f0ac8..0d4420b06ce 100644
--- a/server/sonar-web/src/main/js/apps/create/organization/__tests__/__snapshots__/AutoPersonalOrganizationBind-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/create/organization/__tests__/__snapshots__/AutoPersonalOrganizationBind-test.tsx.snap
@@ -40,10 +40,12 @@ exports[`should render correctly 1`] = `
           }
         }
       />
-      <DeleteButton
+      <ButtonIcon
         className="little-spacer-left"
         onClick={[MockFunction]}
-      />
+      >
+        <ClearIcon />
+      </ButtonIcon>
     </div>
     <OrganizationDetailsForm
       keyReadOnly={true}