From: guillaume-peoch-sonarsource <guillaume.peoch@sonarsource.com>
Date: Wed, 23 Aug 2023 12:21:12 +0000 (+0200)
Subject: SONAR-19958 Replace "Public / private" radio buttons by their MIUI counterpart.
X-Git-Tag: 10.2.0.77647~57
X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=1d0524618ec041c92afbede3be83fffbf135ef37;p=sonarqube.git

SONAR-19958 Replace "Public / private" radio buttons by their MIUI counterpart.
---

diff --git a/server/sonar-web/design-system/src/components/input/RadioButton.tsx b/server/sonar-web/design-system/src/components/input/RadioButton.tsx
index c9748461aed..d717d7428a8 100644
--- a/server/sonar-web/design-system/src/components/input/RadioButton.tsx
+++ b/server/sonar-web/design-system/src/components/input/RadioButton.tsx
@@ -55,12 +55,10 @@ export function RadioButton({
   };
 
   return (
-    <label
+    <LabelStyled
       className={classNames(
-        'sw-flex sw-items-center',
         {
-          'sw-cursor-pointer': !disabled,
-          'sw-cursor-not-allowed': disabled,
+          disabled,
         },
         className
       )}
@@ -75,10 +73,20 @@ export function RadioButton({
         {...htmlProps}
       />
       {children}
-    </label>
+    </LabelStyled>
   );
 }
 
+const LabelStyled = styled.label<{ disabled?: boolean }>`
+  ${tw`sw-flex sw-items-center`}
+  ${tw`sw-cursor-pointer`}
+
+  &.disabled {
+    color: ${themeColor('radioDisabledLabel')};
+    ${tw`sw-cursor-not-allowed`}
+  }
+`;
+
 export const RadioButtonStyled = styled.input`
   appearance: none; //disables native style
   border: ${themeBorder('default', 'radioBorder')};
diff --git a/server/sonar-web/design-system/src/theme/light.ts b/server/sonar-web/design-system/src/theme/light.ts
index 8a97f98d03a..d58b820d489 100644
--- a/server/sonar-web/design-system/src/theme/light.ts
+++ b/server/sonar-web/design-system/src/theme/light.ts
@@ -135,6 +135,7 @@ export const lightTheme = {
     radioDisabled: secondary.default,
     radioDisabledBackground: secondary.light,
     radioDisabledBorder: secondary.default,
+    radioDisabledLabel: COLORS.blueGrey[300],
 
     // switch
     switch: secondary.default,
diff --git a/server/sonar-web/src/main/js/apps/permissions/project/components/PermissionsProjectApp.tsx b/server/sonar-web/src/main/js/apps/permissions/project/components/PermissionsProjectApp.tsx
index 249ce930773..1f291c94188 100644
--- a/server/sonar-web/src/main/js/apps/permissions/project/components/PermissionsProjectApp.tsx
+++ b/server/sonar-web/src/main/js/apps/permissions/project/components/PermissionsProjectApp.tsx
@@ -359,7 +359,7 @@ class PermissionsProjectApp extends React.PureComponent<Props, State> {
             {({ data: githubProvisioningStatus, isFetching }) => (
               <VisibilitySelector
                 canTurnToPrivate={canTurnToPrivate}
-                className="big-spacer-top big-spacer-bottom"
+                className="sw-flex big-spacer-top big-spacer-bottom"
                 onChange={this.handleVisibilityChange}
                 loading={loading || isFetching}
                 disabled={isGitHubProject && !!githubProvisioningStatus}
diff --git a/server/sonar-web/src/main/js/apps/permissions/project/components/__tests__/PermissionsProject-it.tsx b/server/sonar-web/src/main/js/apps/permissions/project/components/__tests__/PermissionsProject-it.tsx
index 73b39423a4c..59323401c05 100644
--- a/server/sonar-web/src/main/js/apps/permissions/project/components/__tests__/PermissionsProject-it.tsx
+++ b/server/sonar-web/src/main/js/apps/permissions/project/components/__tests__/PermissionsProject-it.tsx
@@ -244,9 +244,9 @@ it('should not allow to change visibility for GH Project with auto-provisioning'
   );
   await ui.appLoaded();
 
-  expect(ui.visibilityRadio(Visibility.Public).get()).toHaveClass('disabled');
+  expect(ui.visibilityRadio(Visibility.Public).get()).toBeDisabled();
   expect(ui.visibilityRadio(Visibility.Public).get()).toBeChecked();
-  expect(ui.visibilityRadio(Visibility.Private).get()).toHaveClass('disabled');
+  expect(ui.visibilityRadio(Visibility.Private).get()).toBeDisabled();
   await act(async () => {
     await ui.turnProjectPrivate();
   });
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 25db2168c50..992479d0e48 100644
--- a/server/sonar-web/src/main/js/components/common/VisibilitySelector.tsx
+++ b/server/sonar-web/src/main/js/components/common/VisibilitySelector.tsx
@@ -18,8 +18,8 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import classNames from 'classnames';
+import { RadioButton } from 'design-system';
 import * as React from 'react';
-import Radio from '../../components/controls/Radio';
 import { translate } from '../../helpers/l10n';
 import { Visibility } from '../../types/component';
 
@@ -38,7 +38,7 @@ export default function VisibilitySelector(props: VisibilitySelectorProps) {
   return (
     <div className={classNames(className)}>
       {Object.values(Visibility).map((v) => (
-        <Radio
+        <RadioButton
           className={`huge-spacer-right visibility-${v}`}
           key={v}
           value={v}
@@ -52,7 +52,7 @@ export default function VisibilitySelector(props: VisibilitySelectorProps) {
               <p className="note">{translate('visibility', v, 'description.long')}</p>
             )}
           </div>
-        </Radio>
+        </RadioButton>
       ))}
     </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
deleted file mode 100644
index ebfa4bb13f1..00000000000
--- a/server/sonar-web/src/main/js/components/common/__tests__/VisibilitySelector-test.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-/*
- * SonarQube
- * Copyright (C) 2009-2023 SonarSource SA
- * mailto:info AT sonarsource DOT com
- *
- * This program is free software; you can redistribute it and/or
- * modify it under the terms of the GNU Lesser General Public
- * License as published by the Free Software Foundation; either
- * version 3 of the License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
- * Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public License
- * along with this program; if not, write to the Free Software Foundation,
- * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
- */
-import { shallow } from 'enzyme';
-import * as React from 'react';
-import Radio from '../../../components/controls/Radio';
-import { Visibility } from '../../../types/component';
-import VisibilitySelector, { VisibilitySelectorProps } from '../VisibilitySelector';
-
-it('changes visibility', () => {
-  const onChange = jest.fn();
-  const wrapper = shallowRender({ onChange });
-  expect(wrapper).toMatchSnapshot();
-
-  wrapper.find(Radio).first().props().onCheck(Visibility.Private);
-  expect(onChange).toHaveBeenCalledWith(Visibility.Private);
-
-  wrapper.setProps({ visibility: Visibility.Private });
-  expect(wrapper).toMatchSnapshot();
-
-  wrapper.find(Radio).first().props().onCheck(Visibility.Public);
-  expect(onChange).toHaveBeenCalledWith(Visibility.Public);
-});
-
-it('renders disabled', () => {
-  expect(shallowRender({ canTurnToPrivate: false })).toMatchSnapshot();
-});
-
-function shallowRender(props?: Partial<VisibilitySelectorProps>) {
-  return shallow<VisibilitySelectorProps>(
-    <VisibilitySelector
-      className="test-classname"
-      canTurnToPrivate
-      onChange={jest.fn()}
-      visibility={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
deleted file mode 100644
index d8b5509acbd..00000000000
--- a/server/sonar-web/src/main/js/components/common/__tests__/__snapshots__/VisibilitySelector-test.tsx.snap
+++ /dev/null
@@ -1,122 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`changes visibility 1`] = `
-<div
-  className="test-classname"
->
-  <Radio
-    checked={true}
-    className="huge-spacer-right visibility-public"
-    disabled={false}
-    key="public"
-    onCheck={[MockFunction]}
-    value="public"
-  >
-    <div>
-      visibility.public
-    </div>
-  </Radio>
-  <Radio
-    checked={false}
-    className="huge-spacer-right visibility-private"
-    disabled={false}
-    key="private"
-    onCheck={[MockFunction]}
-    value="private"
-  >
-    <div>
-      visibility.private
-    </div>
-  </Radio>
-</div>
-`;
-
-exports[`changes visibility 2`] = `
-<div
-  className="test-classname"
->
-  <Radio
-    checked={false}
-    className="huge-spacer-right visibility-public"
-    disabled={false}
-    key="public"
-    onCheck={
-      [MockFunction] {
-        "calls": [
-          [
-            "private",
-          ],
-        ],
-        "results": [
-          {
-            "type": "return",
-            "value": undefined,
-          },
-        ],
-      }
-    }
-    value="public"
-  >
-    <div>
-      visibility.public
-    </div>
-  </Radio>
-  <Radio
-    checked={true}
-    className="huge-spacer-right visibility-private"
-    disabled={false}
-    key="private"
-    onCheck={
-      [MockFunction] {
-        "calls": [
-          [
-            "private",
-          ],
-        ],
-        "results": [
-          {
-            "type": "return",
-            "value": undefined,
-          },
-        ],
-      }
-    }
-    value="private"
-  >
-    <div>
-      visibility.private
-    </div>
-  </Radio>
-</div>
-`;
-
-exports[`renders disabled 1`] = `
-<div
-  className="test-classname"
->
-  <Radio
-    checked={true}
-    className="huge-spacer-right visibility-public"
-    disabled={false}
-    key="public"
-    onCheck={[MockFunction]}
-    value="public"
-  >
-    <div>
-      visibility.public
-    </div>
-  </Radio>
-  <Radio
-    checked={false}
-    className="huge-spacer-right visibility-private"
-    disabled={true}
-    key="private"
-    onCheck={[MockFunction]}
-    value="private"
-  >
-    <div>
-      visibility.private
-    </div>
-  </Radio>
-</div>
-`;