From 50f7731bdfb593db17d3ef7654145912986f42bd Mon Sep 17 00:00:00 2001
From: Philippe Perrin <philippe.perrin@sonarsource.com>
Date: Mon, 20 Apr 2020 09:53:42 +0200
Subject: [PATCH] SONAR-13102 Use radio component consistently across the
 application

---
 .../src/main/js/app/styles/init/icons.css     |  38 ----
 .../create/project/ManualProjectCreate.css    |  17 --
 .../create/project/ManualProjectCreate.tsx    |  15 --
 .../components/BranchAnalysisList.tsx         |   9 +-
 .../BranchAnalysisList-test.tsx.snap          |  24 +-
 .../ChangeDefaultVisibilityForm.tsx           |  49 ++--
 .../ChangeDefaultVisibilityForm-test.tsx      |  12 +-
 .../ChangeDefaultVisibilityForm-test.tsx.snap | 213 +++++++-----------
 .../apps/tutorials/components/TokenStep.tsx   |  36 ++-
 .../__snapshots__/TokenStep-test.tsx.snap     |  78 +++----
 .../components/common/VisibilitySelector.tsx  |  88 ++------
 .../__tests__/VisibilitySelector-test.tsx     |  36 ++-
 .../VisibilitySelector-test.tsx.snap          | 170 +++++++-------
 13 files changed, 306 insertions(+), 479 deletions(-)

diff --git a/server/sonar-web/src/main/js/app/styles/init/icons.css b/server/sonar-web/src/main/js/app/styles/init/icons.css
index 7a04513fabd..b20ad3d96d0 100644
--- a/server/sonar-web/src/main/js/app/styles/init/icons.css
+++ b/server/sonar-web/src/main/js/app/styles/init/icons.css
@@ -47,44 +47,6 @@ a[class*=' icon-'] {
   color: var(--darkBlue);
 }
 
-/*
- * Radio
- */
-.icon-radio {
-  position: relative;
-  display: inline-block;
-  vertical-align: top;
-  width: 14px;
-  height: 14px;
-  margin: 1px;
-  border: 1px solid var(--gray80);
-  border-radius: 12px;
-  box-sizing: border-box;
-  transition: border-color 0.3s ease;
-}
-
-.icon-radio:after {
-  position: absolute;
-  top: 2px;
-  left: 2px;
-  display: block;
-  width: 8px;
-  height: 8px;
-  border-radius: 8px;
-  background-color: var(--darkBlue);
-  content: '';
-  opacity: 0;
-  transition: opacity 0.3s ease;
-}
-
-a:not(.disabled):hover > .icon-radio {
-  border-color: var(--blue);
-}
-
-.icon-radio.is-checked:after {
-  opacity: 1;
-}
-
 /*
  * Common
  */
diff --git a/server/sonar-web/src/main/js/apps/create/project/ManualProjectCreate.css b/server/sonar-web/src/main/js/apps/create/project/ManualProjectCreate.css
index 5e078878994..1cc4d2e6d3d 100644
--- a/server/sonar-web/src/main/js/apps/create/project/ManualProjectCreate.css
+++ b/server/sonar-web/src/main/js/apps/create/project/ManualProjectCreate.css
@@ -21,23 +21,6 @@
   max-width: 700px;
 }
 
-.manual-project-create .visibility-select-option {
-  margin-left: 0 !important;
-  margin-bottom: var(--gridSize);
-  display: flex;
-  align-items: center;
-  font-size: var(--mediumFontSize);
-}
-
-.manual-project-create .visibility-details {
-  display: block;
-  margin: var(--gridSize) 0;
-}
-
-.manual-project-create .visibility-select-wrapper {
-  padding: var(--gridSize) 0 calc(2 * var(--gridSize)) 0;
-}
-
 .manual-project-create .button {
   margin-top: var(--gridSize);
 }
diff --git a/server/sonar-web/src/main/js/apps/create/project/ManualProjectCreate.tsx b/server/sonar-web/src/main/js/apps/create/project/ManualProjectCreate.tsx
index 3d983abd485..b14cf5d70da 100644
--- a/server/sonar-web/src/main/js/apps/create/project/ManualProjectCreate.tsx
+++ b/server/sonar-web/src/main/js/apps/create/project/ManualProjectCreate.tsx
@@ -25,7 +25,6 @@ import ValidationInput from 'sonar-ui-common/components/controls/ValidationInput
 import DeferredSpinner from 'sonar-ui-common/components/ui/DeferredSpinner';
 import { translate } from 'sonar-ui-common/helpers/l10n';
 import { createProject, doesComponentExists } from '../../../api/components';
-import VisibilitySelector from '../../../components/common/VisibilitySelector';
 import { isSonarCloud } from '../../../helpers/system';
 import UpgradeOrganizationBox from '../components/UpgradeOrganizationBox';
 import CreateProjectPageHeader from './CreateProjectPageHeader';
@@ -324,20 +323,6 @@ export default class ManualProjectCreate extends React.PureComponent<Props, Stat
                 />
               </ValidationInput>
 
-              {isSonarCloud() && selectedOrganization && (
-                <div
-                  className={classNames('visibility-select-wrapper', {
-                    open: Boolean(this.state.selectedOrganization)
-                  })}>
-                  <VisibilitySelector
-                    canTurnToPrivate={canChoosePrivate}
-                    onChange={this.handleVisibilityChange}
-                    showDetails={true}
-                    visibility={canChoosePrivate ? this.state.selectedVisibility : 'public'}
-                  />
-                </div>
-              )}
-
               <SubmitButton disabled={!this.canSubmit(this.state) || submitting}>
                 {translate('set_up')}
               </SubmitButton>
diff --git a/server/sonar-web/src/main/js/apps/projectBaseline/components/BranchAnalysisList.tsx b/server/sonar-web/src/main/js/apps/projectBaseline/components/BranchAnalysisList.tsx
index f90565f4dbd..3d5388bdafb 100644
--- a/server/sonar-web/src/main/js/apps/projectBaseline/components/BranchAnalysisList.tsx
+++ b/server/sonar-web/src/main/js/apps/projectBaseline/components/BranchAnalysisList.tsx
@@ -21,6 +21,7 @@ import * as classNames from 'classnames';
 import { subDays } from 'date-fns';
 import { throttle } from 'lodash';
 import * as React from 'react';
+import Radio from 'sonar-ui-common/components/controls/Radio';
 import Select from 'sonar-ui-common/components/controls/Select';
 import Tooltip from 'sonar-ui-common/components/controls/Tooltip';
 import DateFormatter from 'sonar-ui-common/components/intl/DateFormatter';
@@ -251,10 +252,10 @@ export default class BranchAnalysisList extends React.PureComponent<Props, State
                                     )}
 
                                     <div className="analysis-selection-button">
-                                      <i
-                                        className={classNames('icon-radio', {
-                                          'is-checked': analysis.key === this.props.analysis
-                                        })}
+                                      <Radio
+                                        checked={analysis.key === this.props.analysis}
+                                        onCheck={() => {}}
+                                        value=""
                                       />
                                     </div>
                                   </li>
diff --git a/server/sonar-web/src/main/js/apps/projectBaseline/components/__tests__/__snapshots__/BranchAnalysisList-test.tsx.snap b/server/sonar-web/src/main/js/apps/projectBaseline/components/__tests__/__snapshots__/BranchAnalysisList-test.tsx.snap
index 46a6219e94d..6bdc18ba481 100644
--- a/server/sonar-web/src/main/js/apps/projectBaseline/components/__tests__/__snapshots__/BranchAnalysisList-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/projectBaseline/components/__tests__/__snapshots__/BranchAnalysisList-test.tsx.snap
@@ -76,8 +76,10 @@ exports[`should render correctly 1`] = `
                   <div
                     className="analysis-selection-button"
                   >
-                    <i
-                      className="icon-radio"
+                    <Radio
+                      checked={false}
+                      onCheck={[Function]}
+                      value=""
                     />
                   </div>
                 </li>
@@ -130,8 +132,10 @@ exports[`should render correctly 1`] = `
                   <div
                     className="analysis-selection-button"
                   >
-                    <i
-                      className="icon-radio"
+                    <Radio
+                      checked={false}
+                      onCheck={[Function]}
+                      value=""
                     />
                   </div>
                 </li>
@@ -231,8 +235,10 @@ exports[`should render correctly 1`] = `
                   <div
                     className="analysis-selection-button"
                   >
-                    <i
-                      className="icon-radio"
+                    <Radio
+                      checked={false}
+                      onCheck={[Function]}
+                      value=""
                     />
                   </div>
                 </li>
@@ -255,8 +261,10 @@ exports[`should render correctly 1`] = `
                   <div
                     className="analysis-selection-button"
                   >
-                    <i
-                      className="icon-radio"
+                    <Radio
+                      checked={false}
+                      onCheck={[Function]}
+                      value=""
                     />
                   </div>
                 </li>
diff --git a/server/sonar-web/src/main/js/apps/projectsManagement/ChangeDefaultVisibilityForm.tsx b/server/sonar-web/src/main/js/apps/projectsManagement/ChangeDefaultVisibilityForm.tsx
index 0f495b6410d..f7d4c2e89c6 100644
--- a/server/sonar-web/src/main/js/apps/projectsManagement/ChangeDefaultVisibilityForm.tsx
+++ b/server/sonar-web/src/main/js/apps/projectsManagement/ChangeDefaultVisibilityForm.tsx
@@ -17,10 +17,10 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-import * as classNames from 'classnames';
 import * as React from 'react';
 import { Button, ResetButtonLink } from 'sonar-ui-common/components/controls/buttons';
 import Modal from 'sonar-ui-common/components/controls/Modal';
+import Radio from 'sonar-ui-common/components/controls/Radio';
 import { Alert } from 'sonar-ui-common/components/ui/Alert';
 import { translate } from 'sonar-ui-common/helpers/l10n';
 
@@ -45,10 +45,7 @@ export default class ChangeDefaultVisibilityForm extends React.PureComponent<Pro
     this.props.onClose();
   };
 
-  handleVisibilityClick = (event: React.SyntheticEvent<HTMLAnchorElement>) => {
-    event.preventDefault();
-    event.currentTarget.blur();
-    const visibility = event.currentTarget.dataset.visibility as T.Visibility;
+  handleVisibilityChange = (visibility: T.Visibility) => {
     this.setState({ visibility });
   };
 
@@ -63,34 +60,20 @@ export default class ChangeDefaultVisibilityForm extends React.PureComponent<Pro
         <div className="modal-body">
           {['public', 'private'].map(visibility => (
             <div className="big-spacer-bottom" key={visibility}>
-              <p>
-                {visibility === 'private' && !organization.canUpdateProjectsVisibilityToPrivate ? (
-                  <span className="text-muted cursor-not-allowed">
-                    <i
-                      className={classNames('icon-radio', 'spacer-right', {
-                        'is-checked': this.state.visibility === visibility
-                      })}
-                    />
-                    {translate('visibility', visibility)}
-                  </span>
-                ) : (
-                  <a
-                    className="link-base-color link-no-underline"
-                    data-visibility={visibility}
-                    href="#"
-                    onClick={this.handleVisibilityClick}>
-                    <i
-                      className={classNames('icon-radio', 'spacer-right', {
-                        'is-checked': this.state.visibility === visibility
-                      })}
-                    />
-                    {translate('visibility', visibility)}
-                  </a>
-                )}
-              </p>
-              <p className="text-muted spacer-top" style={{ paddingLeft: 22 }}>
-                {translate('visibility', visibility, 'description.short')}
-              </p>
+              <Radio
+                value={visibility}
+                checked={this.state.visibility === visibility}
+                onCheck={this.handleVisibilityChange}
+                disabled={
+                  visibility === 'private' && !organization.canUpdateProjectsVisibilityToPrivate
+                }>
+                <div>
+                  {translate('visibility', visibility)}
+                  <p className="text-muted spacer-top">
+                    {translate('visibility', visibility, 'description.short')}
+                  </p>
+                </div>
+              </Radio>
             </div>
           ))}
 
diff --git a/server/sonar-web/src/main/js/apps/projectsManagement/__tests__/ChangeDefaultVisibilityForm-test.tsx b/server/sonar-web/src/main/js/apps/projectsManagement/__tests__/ChangeDefaultVisibilityForm-test.tsx
index f7f334cf2aa..d83e82d95c4 100644
--- a/server/sonar-web/src/main/js/apps/projectsManagement/__tests__/ChangeDefaultVisibilityForm-test.tsx
+++ b/server/sonar-web/src/main/js/apps/projectsManagement/__tests__/ChangeDefaultVisibilityForm-test.tsx
@@ -19,6 +19,7 @@
  */
 import { shallow } from 'enzyme';
 import * as React from 'react';
+import Radio from 'sonar-ui-common/components/controls/Radio';
 import { click } from 'sonar-ui-common/helpers/testUtils';
 import ChangeDefaultVisibilityForm from '../ChangeDefaultVisibilityForm';
 
@@ -49,12 +50,11 @@ it('changes visibility', () => {
   const wrapper = shallowRender({ onConfirm });
   expect(wrapper).toMatchSnapshot();
 
-  click(wrapper.find('a[data-visibility="private"]'), {
-    currentTarget: {
-      blur() {},
-      dataset: { visibility: 'private' }
-    }
-  });
+  wrapper
+    .find(Radio)
+    .first()
+    .props()
+    .onCheck('private');
   expect(wrapper).toMatchSnapshot();
 
   click(wrapper.find('.js-confirm'));
diff --git a/server/sonar-web/src/main/js/apps/projectsManagement/__tests__/__snapshots__/ChangeDefaultVisibilityForm-test.tsx.snap b/server/sonar-web/src/main/js/apps/projectsManagement/__tests__/__snapshots__/ChangeDefaultVisibilityForm-test.tsx.snap
index a80e794b95a..756189b1ca5 100644
--- a/server/sonar-web/src/main/js/apps/projectsManagement/__tests__/__snapshots__/ChangeDefaultVisibilityForm-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/projectsManagement/__tests__/__snapshots__/ChangeDefaultVisibilityForm-test.tsx.snap
@@ -19,57 +19,41 @@ exports[`changes visibility 1`] = `
       className="big-spacer-bottom"
       key="public"
     >
-      <p>
-        <a
-          className="link-base-color link-no-underline"
-          data-visibility="public"
-          href="#"
-          onClick={[Function]}
-        >
-          <i
-            className="icon-radio spacer-right is-checked"
-          />
-          visibility.public
-        </a>
-      </p>
-      <p
-        className="text-muted spacer-top"
-        style={
-          Object {
-            "paddingLeft": 22,
-          }
-        }
+      <Radio
+        checked={true}
+        disabled={false}
+        onCheck={[Function]}
+        value="public"
       >
-        visibility.public.description.short
-      </p>
+        <div>
+          visibility.public
+          <p
+            className="text-muted spacer-top"
+          >
+            visibility.public.description.short
+          </p>
+        </div>
+      </Radio>
     </div>
     <div
       className="big-spacer-bottom"
       key="private"
     >
-      <p>
-        <a
-          className="link-base-color link-no-underline"
-          data-visibility="private"
-          href="#"
-          onClick={[Function]}
-        >
-          <i
-            className="icon-radio spacer-right"
-          />
-          visibility.private
-        </a>
-      </p>
-      <p
-        className="text-muted spacer-top"
-        style={
-          Object {
-            "paddingLeft": 22,
-          }
-        }
+      <Radio
+        checked={false}
+        disabled={false}
+        onCheck={[Function]}
+        value="private"
       >
-        visibility.private.description.short
-      </p>
+        <div>
+          visibility.private
+          <p
+            className="text-muted spacer-top"
+          >
+            visibility.private.description.short
+          </p>
+        </div>
+      </Radio>
     </div>
     <Alert
       variant="warning"
@@ -115,57 +99,41 @@ exports[`changes visibility 2`] = `
       className="big-spacer-bottom"
       key="public"
     >
-      <p>
-        <a
-          className="link-base-color link-no-underline"
-          data-visibility="public"
-          href="#"
-          onClick={[Function]}
-        >
-          <i
-            className="icon-radio spacer-right"
-          />
-          visibility.public
-        </a>
-      </p>
-      <p
-        className="text-muted spacer-top"
-        style={
-          Object {
-            "paddingLeft": 22,
-          }
-        }
+      <Radio
+        checked={false}
+        disabled={false}
+        onCheck={[Function]}
+        value="public"
       >
-        visibility.public.description.short
-      </p>
+        <div>
+          visibility.public
+          <p
+            className="text-muted spacer-top"
+          >
+            visibility.public.description.short
+          </p>
+        </div>
+      </Radio>
     </div>
     <div
       className="big-spacer-bottom"
       key="private"
     >
-      <p>
-        <a
-          className="link-base-color link-no-underline"
-          data-visibility="private"
-          href="#"
-          onClick={[Function]}
-        >
-          <i
-            className="icon-radio spacer-right is-checked"
-          />
-          visibility.private
-        </a>
-      </p>
-      <p
-        className="text-muted spacer-top"
-        style={
-          Object {
-            "paddingLeft": 22,
-          }
-        }
+      <Radio
+        checked={true}
+        disabled={false}
+        onCheck={[Function]}
+        value="private"
       >
-        visibility.private.description.short
-      </p>
+        <div>
+          visibility.private
+          <p
+            className="text-muted spacer-top"
+          >
+            visibility.private.description.short
+          </p>
+        </div>
+      </Radio>
     </div>
     <Alert
       variant="warning"
@@ -211,54 +179,41 @@ exports[`renders disabled 1`] = `
       className="big-spacer-bottom"
       key="public"
     >
-      <p>
-        <a
-          className="link-base-color link-no-underline"
-          data-visibility="public"
-          href="#"
-          onClick={[Function]}
-        >
-          <i
-            className="icon-radio spacer-right is-checked"
-          />
-          visibility.public
-        </a>
-      </p>
-      <p
-        className="text-muted spacer-top"
-        style={
-          Object {
-            "paddingLeft": 22,
-          }
-        }
+      <Radio
+        checked={true}
+        disabled={false}
+        onCheck={[Function]}
+        value="public"
       >
-        visibility.public.description.short
-      </p>
+        <div>
+          visibility.public
+          <p
+            className="text-muted spacer-top"
+          >
+            visibility.public.description.short
+          </p>
+        </div>
+      </Radio>
     </div>
     <div
       className="big-spacer-bottom"
       key="private"
     >
-      <p>
-        <span
-          className="text-muted cursor-not-allowed"
-        >
-          <i
-            className="icon-radio spacer-right"
-          />
-          visibility.private
-        </span>
-      </p>
-      <p
-        className="text-muted spacer-top"
-        style={
-          Object {
-            "paddingLeft": 22,
-          }
-        }
+      <Radio
+        checked={false}
+        disabled={true}
+        onCheck={[Function]}
+        value="private"
       >
-        visibility.private.description.short
-      </p>
+        <div>
+          visibility.private
+          <p
+            className="text-muted spacer-top"
+          >
+            visibility.private.description.short
+          </p>
+        </div>
+      </Radio>
     </div>
   </div>
   <footer
diff --git a/server/sonar-web/src/main/js/apps/tutorials/components/TokenStep.tsx b/server/sonar-web/src/main/js/apps/tutorials/components/TokenStep.tsx
index 1b5c20a3b5c..32da736ed30 100644
--- a/server/sonar-web/src/main/js/apps/tutorials/components/TokenStep.tsx
+++ b/server/sonar-web/src/main/js/apps/tutorials/components/TokenStep.tsx
@@ -17,11 +17,11 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-import * as classNames from 'classnames';
 import * as React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { Link } from 'react-router';
 import { Button, DeleteButton, SubmitButton } from 'sonar-ui-common/components/controls/buttons';
+import Radio from 'sonar-ui-common/components/controls/Radio';
 import AlertErrorIcon from 'sonar-ui-common/components/icons/AlertErrorIcon';
 import AlertSuccessIcon from 'sonar-ui-common/components/icons/AlertSuccessIcon';
 import { translate } from 'sonar-ui-common/helpers/l10n';
@@ -141,6 +141,10 @@ export default class TokenStep extends React.PureComponent<Props, State> {
     this.setState({ selection: 'use-existing' });
   };
 
+  handleModeChange = (mode: string) => {
+    this.setState({ selection: mode });
+  };
+
   handleExisingTokenChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     this.setState({ existingToken: event.currentTarget.value });
   };
@@ -154,17 +158,12 @@ export default class TokenStep extends React.PureComponent<Props, State> {
   renderGenerateOption = () => (
     <div>
       {this.state.tokens !== undefined && this.state.tokens.length > 0 ? (
-        <a
-          className="js-new link-base-color link-no-underline"
-          href="#"
-          onClick={this.handleGenerateClick}>
-          <i
-            className={classNames('icon-radio', 'spacer-right', {
-              'is-checked': this.state.selection === 'generate'
-            })}
-          />
+        <Radio
+          checked={this.state.selection === 'generate'}
+          onCheck={this.handleModeChange}
+          value="generate">
           {translate('onboarding.token.generate_token')}
-        </a>
+        </Radio>
       ) : (
         translate('onboarding.token.generate_token')
       )}
@@ -199,17 +198,12 @@ export default class TokenStep extends React.PureComponent<Props, State> {
 
     return (
       <div className="big-spacer-top">
-        <a
-          className="js-new link-base-color link-no-underline"
-          href="#"
-          onClick={this.handleUseExistingClick}>
-          <i
-            className={classNames('icon-radio', 'spacer-right', {
-              'is-checked': this.state.selection === 'use-existing'
-            })}
-          />
+        <Radio
+          checked={this.state.selection === 'use-existing'}
+          onCheck={this.handleModeChange}
+          value="use-existing">
           {translate('onboarding.token.use_existing_token')}
-        </a>
+        </Radio>
         {this.state.selection === 'use-existing' && (
           <div className="big-spacer-top">
             <input
diff --git a/server/sonar-web/src/main/js/apps/tutorials/components/__tests__/__snapshots__/TokenStep-test.tsx.snap b/server/sonar-web/src/main/js/apps/tutorials/components/__tests__/__snapshots__/TokenStep-test.tsx.snap
index 7748869a351..6ad2bfc2e0c 100644
--- a/server/sonar-web/src/main/js/apps/tutorials/components/__tests__/__snapshots__/TokenStep-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/tutorials/components/__tests__/__snapshots__/TokenStep-test.tsx.snap
@@ -24,16 +24,13 @@ exports[`generates token 1`] = `
     >
       <div>
         <div>
-          <a
-            className="js-new link-base-color link-no-underline"
-            href="#"
-            onClick={[Function]}
+          <Radio
+            checked={true}
+            onCheck={[Function]}
+            value="generate"
           >
-            <i
-              className="icon-radio spacer-right is-checked"
-            />
             onboarding.token.generate_token
-          </a>
+          </Radio>
           <div
             className="big-spacer-top"
           >
@@ -61,16 +58,13 @@ exports[`generates token 1`] = `
         <div
           className="big-spacer-top"
         >
-          <a
-            className="js-new link-base-color link-no-underline"
-            href="#"
-            onClick={[Function]}
+          <Radio
+            checked={false}
+            onCheck={[Function]}
+            value="use-existing"
           >
-            <i
-              className="icon-radio spacer-right"
-            />
             onboarding.token.use_existing_token
-          </a>
+          </Radio>
         </div>
       </div>
       <div
@@ -122,16 +116,13 @@ exports[`generates token 2`] = `
     >
       <div>
         <div>
-          <a
-            className="js-new link-base-color link-no-underline"
-            href="#"
-            onClick={[Function]}
+          <Radio
+            checked={true}
+            onCheck={[Function]}
+            value="generate"
           >
-            <i
-              className="icon-radio spacer-right is-checked"
-            />
             onboarding.token.generate_token
-          </a>
+          </Radio>
           <div
             className="big-spacer-top"
           >
@@ -156,16 +147,13 @@ exports[`generates token 2`] = `
         <div
           className="big-spacer-top"
         >
-          <a
-            className="js-new link-base-color link-no-underline"
-            href="#"
-            onClick={[Function]}
+          <Radio
+            checked={false}
+            onCheck={[Function]}
+            value="use-existing"
           >
-            <i
-              className="icon-radio spacer-right"
-            />
             onboarding.token.use_existing_token
-          </a>
+          </Radio>
         </div>
       </div>
       <div
@@ -444,16 +432,13 @@ exports[`revokes token 3`] = `
     >
       <div>
         <div>
-          <a
-            className="js-new link-base-color link-no-underline"
-            href="#"
-            onClick={[Function]}
+          <Radio
+            checked={true}
+            onCheck={[Function]}
+            value="generate"
           >
-            <i
-              className="icon-radio spacer-right is-checked"
-            />
             onboarding.token.generate_token
-          </a>
+          </Radio>
           <div
             className="big-spacer-top"
           >
@@ -481,16 +466,13 @@ exports[`revokes token 3`] = `
         <div
           className="big-spacer-top"
         >
-          <a
-            className="js-new link-base-color link-no-underline"
-            href="#"
-            onClick={[Function]}
+          <Radio
+            checked={false}
+            onCheck={[Function]}
+            value="use-existing"
           >
-            <i
-              className="icon-radio spacer-right"
-            />
             onboarding.token.use_existing_token
-          </a>
+          </Radio>
         </div>
       </div>
       <div
diff --git a/server/sonar-web/src/main/js/components/common/VisibilitySelector.tsx b/server/sonar-web/src/main/js/components/common/VisibilitySelector.tsx
index d9e6457f081..d33c12aba33 100644
--- a/server/sonar-web/src/main/js/components/common/VisibilitySelector.tsx
+++ b/server/sonar-web/src/main/js/components/common/VisibilitySelector.tsx
@@ -19,6 +19,7 @@
  */
 import * as classNames from 'classnames';
 import * as React from 'react';
+import Radio from 'sonar-ui-common/components/controls/Radio';
 import { translate } from 'sonar-ui-common/helpers/l10n';
 
 interface Props {
@@ -30,78 +31,25 @@ interface Props {
 }
 
 export default class VisibilitySelector extends React.PureComponent<Props> {
-  handlePublicClick = (event: React.SyntheticEvent<HTMLAnchorElement>) => {
-    event.preventDefault();
-    event.currentTarget.blur();
-    this.props.onChange('public');
-  };
-
-  handlePrivateClick = (event: React.SyntheticEvent<HTMLAnchorElement>) => {
-    event.preventDefault();
-    event.currentTarget.blur();
-    this.props.onChange('private');
-  };
-
   render() {
     return (
-      <div className={classNames('visibility-select', this.props.className)}>
-        <a
-          className="link-base-color link-no-underline visibility-select-option"
-          href="#"
-          id="visibility-public"
-          onClick={this.handlePublicClick}>
-          <i
-            className={classNames('icon-radio', {
-              'is-checked': this.props.visibility === 'public'
-            })}
-          />
-          <span className="spacer-left">{translate('visibility.public')}</span>
-        </a>
-        {this.props.showDetails && (
-          <span className="visibility-details note">
-            {translate('visibility.public.description.long')}
-          </span>
-        )}
-
-        {this.props.canTurnToPrivate ? (
-          <>
-            <a
-              className="link-base-color link-no-underline huge-spacer-left visibility-select-option"
-              href="#"
-              id="visibility-private"
-              onClick={this.handlePrivateClick}>
-              <i
-                className={classNames('icon-radio', {
-                  'is-checked': this.props.visibility === 'private'
-                })}
-              />
-              <span className="spacer-left">{translate('visibility.private')}</span>
-            </a>
-            {this.props.showDetails && (
-              <span className="visibility-details note">
-                {translate('visibility.private.description.long')}
-              </span>
-            )}
-          </>
-        ) : (
-          <>
-            <span
-              className="huge-spacer-left text-muted cursor-not-allowed visibility-select-option"
-              id="visibility-private">
-              <i
-                className={classNames('icon-radio', {
-                  'is-checked': this.props.visibility === 'private'
-                })}
-              />
-              <span className="spacer-left">{translate('visibility.private')}</span>
-            </span>
-            {this.props.showDetails && (
-              <span className="visibility-details note">
-                {translate('visibility.private.description.long')}
-              </span>
-            )}
-          </>
-        )}
+      <div className={classNames(this.props.className)}>
+        {['public', 'private'].map(visibility => (
+          <Radio
+            className={`huge-spacer-right visibility-${visibility}`}
+            key={visibility}
+            value={visibility}
+            checked={this.props.visibility === visibility}
+            onCheck={this.props.onChange}
+            disabled={visibility === 'private' && !this.props.canTurnToPrivate}>
+            <div>
+              {translate('visibility', visibility)}
+              {this.props.showDetails && (
+                <p className="note">{translate('visibility', visibility, 'description.long')}</p>
+              )}
+            </div>
+          </Radio>
+        ))}
       </div>
     );
   }
diff --git a/server/sonar-web/src/main/js/components/common/__tests__/VisibilitySelector-test.tsx b/server/sonar-web/src/main/js/components/common/__tests__/VisibilitySelector-test.tsx
index 99a77e37ff7..e42338a66af 100644
--- a/server/sonar-web/src/main/js/components/common/__tests__/VisibilitySelector-test.tsx
+++ b/server/sonar-web/src/main/js/components/common/__tests__/VisibilitySelector-test.tsx
@@ -19,30 +19,44 @@
  */
 import { shallow } from 'enzyme';
 import * as React from 'react';
-import { click } from 'sonar-ui-common/helpers/testUtils';
+import Radio from 'sonar-ui-common/components/controls/Radio';
 import VisibilitySelector from '../VisibilitySelector';
 
 it('changes visibility', () => {
   const onChange = jest.fn();
-  const wrapper = shallow(
-    <VisibilitySelector canTurnToPrivate={true} onChange={onChange} visibility="public" />
-  );
+  const wrapper = shallowRender({ onChange });
   expect(wrapper).toMatchSnapshot();
 
-  click(wrapper.find('#visibility-private'));
+  wrapper
+    .find(Radio)
+    .first()
+    .props()
+    .onCheck('private');
   expect(onChange).toBeCalledWith('private');
 
   wrapper.setProps({ visibility: 'private' });
   expect(wrapper).toMatchSnapshot();
 
-  click(wrapper.find('#visibility-public'));
+  wrapper
+    .find(Radio)
+    .first()
+    .props()
+    .onCheck('public');
   expect(onChange).toBeCalledWith('public');
 });
 
 it('renders disabled', () => {
-  expect(
-    shallow(
-      <VisibilitySelector canTurnToPrivate={false} onChange={jest.fn()} visibility="public" />
-    )
-  ).toMatchSnapshot();
+  expect(shallowRender({ canTurnToPrivate: false })).toMatchSnapshot();
 });
+
+function shallowRender(props?: Partial<VisibilitySelector['props']>) {
+  return shallow<VisibilitySelector>(
+    <VisibilitySelector
+      className="test-classname"
+      canTurnToPrivate={true}
+      onChange={jest.fn()}
+      visibility="public"
+      {...props}
+    />
+  );
+}
diff --git a/server/sonar-web/src/main/js/components/common/__tests__/__snapshots__/VisibilitySelector-test.tsx.snap b/server/sonar-web/src/main/js/components/common/__tests__/__snapshots__/VisibilitySelector-test.tsx.snap
index 98a9be4035c..4ee16f1a218 100644
--- a/server/sonar-web/src/main/js/components/common/__tests__/__snapshots__/VisibilitySelector-test.tsx.snap
+++ b/server/sonar-web/src/main/js/components/common/__tests__/__snapshots__/VisibilitySelector-test.tsx.snap
@@ -2,109 +2,121 @@
 
 exports[`changes visibility 1`] = `
 <div
-  className="visibility-select"
+  className="test-classname"
 >
-  <a
-    className="link-base-color link-no-underline visibility-select-option"
-    href="#"
-    id="visibility-public"
-    onClick={[Function]}
+  <Radio
+    checked={true}
+    className="huge-spacer-right visibility-public"
+    disabled={false}
+    key="public"
+    onCheck={[MockFunction]}
+    value="public"
   >
-    <i
-      className="icon-radio is-checked"
-    />
-    <span
-      className="spacer-left"
-    >
+    <div>
       visibility.public
-    </span>
-  </a>
-  <a
-    className="link-base-color link-no-underline huge-spacer-left visibility-select-option"
-    href="#"
-    id="visibility-private"
-    onClick={[Function]}
+    </div>
+  </Radio>
+  <Radio
+    checked={false}
+    className="huge-spacer-right visibility-private"
+    disabled={false}
+    key="private"
+    onCheck={[MockFunction]}
+    value="private"
   >
-    <i
-      className="icon-radio"
-    />
-    <span
-      className="spacer-left"
-    >
+    <div>
       visibility.private
-    </span>
-  </a>
+    </div>
+  </Radio>
 </div>
 `;
 
 exports[`changes visibility 2`] = `
 <div
-  className="visibility-select"
+  className="test-classname"
 >
-  <a
-    className="link-base-color link-no-underline visibility-select-option"
-    href="#"
-    id="visibility-public"
-    onClick={[Function]}
+  <Radio
+    checked={false}
+    className="huge-spacer-right visibility-public"
+    disabled={false}
+    key="public"
+    onCheck={
+      [MockFunction] {
+        "calls": Array [
+          Array [
+            "private",
+          ],
+        ],
+        "results": Array [
+          Object {
+            "type": "return",
+            "value": undefined,
+          },
+        ],
+      }
+    }
+    value="public"
   >
-    <i
-      className="icon-radio"
-    />
-    <span
-      className="spacer-left"
-    >
+    <div>
       visibility.public
-    </span>
-  </a>
-  <a
-    className="link-base-color link-no-underline huge-spacer-left visibility-select-option"
-    href="#"
-    id="visibility-private"
-    onClick={[Function]}
+    </div>
+  </Radio>
+  <Radio
+    checked={true}
+    className="huge-spacer-right visibility-private"
+    disabled={false}
+    key="private"
+    onCheck={
+      [MockFunction] {
+        "calls": Array [
+          Array [
+            "private",
+          ],
+        ],
+        "results": Array [
+          Object {
+            "type": "return",
+            "value": undefined,
+          },
+        ],
+      }
+    }
+    value="private"
   >
-    <i
-      className="icon-radio is-checked"
-    />
-    <span
-      className="spacer-left"
-    >
+    <div>
       visibility.private
-    </span>
-  </a>
+    </div>
+  </Radio>
 </div>
 `;
 
 exports[`renders disabled 1`] = `
 <div
-  className="visibility-select"
+  className="test-classname"
 >
-  <a
-    className="link-base-color link-no-underline visibility-select-option"
-    href="#"
-    id="visibility-public"
-    onClick={[Function]}
+  <Radio
+    checked={true}
+    className="huge-spacer-right visibility-public"
+    disabled={false}
+    key="public"
+    onCheck={[MockFunction]}
+    value="public"
   >
-    <i
-      className="icon-radio is-checked"
-    />
-    <span
-      className="spacer-left"
-    >
+    <div>
       visibility.public
-    </span>
-  </a>
-  <span
-    className="huge-spacer-left text-muted cursor-not-allowed visibility-select-option"
-    id="visibility-private"
+    </div>
+  </Radio>
+  <Radio
+    checked={false}
+    className="huge-spacer-right visibility-private"
+    disabled={true}
+    key="private"
+    onCheck={[MockFunction]}
+    value="private"
   >
-    <i
-      className="icon-radio"
-    />
-    <span
-      className="spacer-left"
-    >
+    <div>
       visibility.private
-    </span>
-  </span>
+    </div>
+  </Radio>
 </div>
 `;
-- 
2.39.5