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 c9748461aedc716491ba2a2ddd1ca7aa083a6393..d717d7428a84d571e8052fd5f0883265904c66b1 100644 (file)
--- 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 8a97f98d03a12d8dc53b248b6d70f2514325877b..d58b820d48935f8e5cde59e4e784b44629692908 100644 (file)
--- 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 249ce930773c1339a2ac08ba395cba4f53f6e54a..1f291c94188f969fb21778d4ceab7bf1371b1788 100644 (file)
--- 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 73b39423a4c1d4d11e1e002159c7a7da96581cdf..59323401c05c079cee8c6848c172461619cb76f0 100644 (file)
--- 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 25db2168c50bcf7ff98bdd3088521cba0654208f..992479d0e489ebf15e1d8f5b3d2134e7b27c1315 100644 (file)
--- 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 (file)
index ebfa4bb..0000000
--- 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 (file)
index d8b5509..0000000
--- 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>
-`;