SONAR-21428 - User list in security with provider adopts new UI

4 files changed, 23 insertions, 44 deletions

diff --git a/server/sonar-web/src/main/js/apps/groups/GroupsApp.tsx b/server/sonar-web/src/main/js/apps/groups/GroupsApp.tsx
index b03999481ba..7a37e33d652 100644
--- a/server/sonar-web/src/main/js/apps/groups/GroupsApp.tsx
+++ b/server/sonar-web/src/main/js/apps/groups/GroupsApp.tsx
@@ -61,7 +61,6 @@ export default function GroupsApp() {
               loading={isLoading}
               managed={managed}
               setManaged={setManaged}
-              miui
             />
             <InputSearch
               minLength={2}
diff --git a/server/sonar-web/src/main/js/apps/users/__tests__/UsersApp-it.tsx b/server/sonar-web/src/main/js/apps/users/__tests__/UsersApp-it.tsx
index 7057c0b9bd7..103e0836228 100644
--- a/server/sonar-web/src/main/js/apps/users/__tests__/UsersApp-it.tsx
+++ b/server/sonar-web/src/main/js/apps/users/__tests__/UsersApp-it.tsx
@@ -45,9 +45,9 @@ const githubHandler = new GithubProvisioningServiceMock();
 
 const ui = {
   createUserButton: byRole('button', { name: 'users.create_user' }),
-  localAndManagedFilter: byRole('button', { name: 'all' }),
-  managedFilter: byRole('button', { name: 'managed' }),
-  localFilter: byRole('button', { name: 'local' }),
+  localAndManagedFilter: byRole('radio', { name: 'all' }),
+  managedFilter: byRole('radio', { name: 'managed' }),
+  localFilter: byRole('radio', { name: 'local' }),
   showMore: byRole('button', { name: 'show_more' }),
   aliceUpdateGroupButton: byRole('button', { name: 'users.update_users_groups.alice.merveille' }),
   aliceUpdateButton: byRole('button', { name: 'users.manage_user.alice.merveille' }),
diff --git a/server/sonar-web/src/main/js/apps/users/components/UserListItemIdentity.tsx b/server/sonar-web/src/main/js/apps/users/components/UserListItemIdentity.tsx
index 60de244e2ae..ad93135f5aa 100644
--- a/server/sonar-web/src/main/js/apps/users/components/UserListItemIdentity.tsx
+++ b/server/sonar-web/src/main/js/apps/users/components/UserListItemIdentity.tsx
@@ -61,7 +61,8 @@ export function ExternalProvider({ identityProvider, user }: Omit<Props, 'manage
 
   return (
     <div className="it__user-identity-provider sw-mt-1">
-      <div
+      <span
+        className="sw-inline-flex sw-items-center sw-px-1"
         style={{
           backgroundColor: identityProvider.backgroundColor,
           color: getTextColor(identityProvider.backgroundColor, colors.secondFontColor),
@@ -75,7 +76,7 @@ export function ExternalProvider({ identityProvider, user }: Omit<Props, 'manage
           width="14"
         />
         {user.externalLogin}
-      </div>
+      </span>
     </div>
   );
 }
diff --git a/server/sonar-web/src/main/js/components/controls/ManagedFilter.tsx b/server/sonar-web/src/main/js/components/controls/ManagedFilter.tsx
index b0444143794..1f3e82c8f2a 100644
--- a/server/sonar-web/src/main/js/components/controls/ManagedFilter.tsx
+++ b/server/sonar-web/src/main/js/components/controls/ManagedFilter.tsx
@@ -21,18 +21,16 @@ import { ToggleButton } from 'design-system';
 import * as React from 'react';
 import { translate } from '../../helpers/l10n';
 import { Provider } from '../../types/types';
-import ButtonToggle from './ButtonToggle';
 
 interface ManagedFilterProps {
   manageProvider: Provider | undefined;
   loading: boolean;
   managed: boolean | undefined;
-  miui?: boolean;
   setManaged: (managed: boolean | undefined) => void;
 }
 
 export function ManagedFilter(props: Readonly<ManagedFilterProps>) {
-  const { manageProvider, loading, managed, miui } = props;
+  const { manageProvider, loading, managed } = props;
 
   if (manageProvider === undefined) {
     return null;
@@ -40,41 +38,22 @@ export function ManagedFilter(props: Readonly<ManagedFilterProps>) {
 
   return (
     <div className="sw-mr-4">
-      {miui ? (
-        <ToggleButton
-          value={managed ?? 'all'}
-          disabled={loading}
-          options={[
-            { label: translate('all'), value: 'all' },
-            { label: translate('managed'), value: true },
-            { label: translate('local'), value: false },
-          ]}
-          onChange={(filterOption) => {
-            if (filterOption === 'all') {
-              props.setManaged(undefined);
-            } else {
-              props.setManaged(filterOption);
-            }
-          }}
-        />
-      ) : (
-        <ButtonToggle
-          value={managed ?? 'all'}
-          disabled={loading}
-          options={[
-            { label: translate('all'), value: 'all' },
-            { label: translate('managed'), value: true },
-            { label: translate('local'), value: false },
-          ]}
-          onCheck={(filterOption) => {
-            if (filterOption === 'all') {
-              props.setManaged(undefined);
-            } else {
-              props.setManaged(filterOption as boolean);
-            }
-          }}
-        />
-      )}
+      <ToggleButton
+        value={managed ?? 'all'}
+        disabled={loading}
+        options={[
+          { label: translate('all'), value: 'all' },
+          { label: translate('managed'), value: true },
+          { label: translate('local'), value: false },
+        ]}
+        onChange={(filterOption) => {
+          if (filterOption === 'all') {
+            props.setManaged(undefined);
+          } else {
+            props.setManaged(filterOption);
+          }
+        }}
+      />
     </div>
   );
 }