SONAR-22614 Groups page - adjust flag message and table header

Fix validation issues and tests

6 files changed, 31 insertions, 21 deletions

diff --git a/server/sonar-web/src/main/js/app/components/admin/StickyTable.tsx b/server/sonar-web/src/main/js/app/components/admin/StickyTable.tsx
index 4bf9ac09abc..8110023b26e 100644
--- a/server/sonar-web/src/main/js/app/components/admin/StickyTable.tsx
+++ b/server/sonar-web/src/main/js/app/components/admin/StickyTable.tsx
@@ -28,5 +28,6 @@ export const StickyTable = styled(Table)`
     position: sticky;
     top: ${LAYOUT_ADMIN_NAV_HEIGHT + LAYOUT_GLOBAL_NAV_HEIGHT}px;
     background: ${themeColor('backgroundSecondary')};
+    z-index: 1;
   }
 `;
diff --git a/server/sonar-web/src/main/js/apps/groups/__tests__/GroupsApp-it.tsx b/server/sonar-web/src/main/js/apps/groups/__tests__/GroupsApp-it.tsx
index d42cec978a0..e1186e4b538 100644
--- a/server/sonar-web/src/main/js/apps/groups/__tests__/GroupsApp-it.tsx
+++ b/server/sonar-web/src/main/js/apps/groups/__tests__/GroupsApp-it.tsx
@@ -45,13 +45,14 @@ const githubHandler = new GithubProvisioningServiceMock(dopTranslationHandler);
 
 const ui = {
   createGroupButton: byRole('button', { name: 'groups.create_group' }),
-  infoManageMode: byText(/groups\.page\.managed_description/),
+  infoManageMode: byText(/groups\.page\.managed_description2/),
   description: byText('user_groups.page.description'),
   allFilter: byRole('radio', { name: 'all' }),
   selectedFilter: byRole('radio', { name: 'selected' }),
   unselectedFilter: byRole('radio', { name: 'unselected' }),
   localAndManagedFilter: byRole('radio', { name: 'all' }),
-  managedFilter: byRole('radio', { name: 'managed' }),
+  managedByScimFilter: byRole('radio', { name: 'managed.managed.SCIM' }),
+  managedByGithubFilter: byRole('radio', { name: 'managed.managed.github' }),
   localFilter: byRole('radio', { name: 'local' }),
   searchInput: byRole('searchbox', { name: 'search.search_by_name' }),
   updateButton: byRole('menuitem', { name: 'update_details' }),
@@ -344,7 +345,7 @@ describe('in manage mode', () => {
     const user = userEvent.setup();
     renderGroupsApp();
 
-    await user.click(await ui.managedFilter.find());
+    await user.click(await ui.managedByScimFilter.find());
 
     expect(await ui.managedGroupRow.find()).toBeInTheDocument();
     expect(ui.localGroupRow.query()).not.toBeInTheDocument();
@@ -428,7 +429,7 @@ describe('in manage mode', () => {
       const user = userEvent.setup();
       renderGroupsApp();
 
-      await user.click(await ui.managedFilter.find());
+      await user.click(await ui.managedByGithubFilter.find());
 
       expect(
         within(await ui.githubManagedGroupRow.find()).getByRole('img', { name: 'github' }),
diff --git a/server/sonar-web/src/main/js/apps/groups/components/Header.tsx b/server/sonar-web/src/main/js/apps/groups/components/Header.tsx
index 513562c1633..2159446f0bc 100644
--- a/server/sonar-web/src/main/js/apps/groups/components/Header.tsx
+++ b/server/sonar-web/src/main/js/apps/groups/components/Header.tsx
@@ -19,7 +19,7 @@
  */
 
 import { Button, ButtonVariety } from '@sonarsource/echoes-react';
-import { FlagMessage, Title } from 'design-system';
+import { Title } from 'design-system';
 import * as React from 'react';
 import { FormattedMessage } from 'react-intl';
 import DocumentationLink from '../../../components/common/DocumentationLink';
@@ -53,22 +53,28 @@ export default function Header({ manageProvider }: Readonly<HeaderProps>) {
         {manageProvider === undefined ? (
           <p className="sw-mb-4">{translate('user_groups.page.description')}</p>
         ) : (
-          <FlagMessage className="sw-mb-4 sw-max-w-full sw-w-full" variant="info">
-            <div>
+          <div className="sw-max-w-3/4 sw-mb-4">
+            <FormattedMessage
+              defaultMessage={translate('user_groups.page.managed_description')}
+              id="user_groups.page.managed_description"
+              values={{
+                provider: translate(`managed.${manageProvider}`),
+              }}
+            />
+            <div className="sw-mt-2">
               <FormattedMessage
-                defaultMessage={translate('user_groups.page.managed_description')}
-                id="user_groups.page.managed_description"
+                defaultMessage={translate('user_groups.page.managed_description2')}
+                id="user_groups.page.managed_description2"
                 values={{
-                  provider: manageProvider,
                   link: (
                     <DocumentationLink to={DocLink.AuthOverview}>
-                      {translate('documentation')}
+                      {translate('user_groups.page.managing_groups')}
                     </DocumentationLink>
                   ),
                 }}
               />
             </div>
-          </FlagMessage>
+          </div>
         )}
       </div>
       {createModal && <GroupForm onClose={() => setCreateModal(false)} create />}
diff --git a/server/sonar-web/src/main/js/apps/groups/components/List.tsx b/server/sonar-web/src/main/js/apps/groups/components/List.tsx
index 4ccb9359685..fa780549169 100644
--- a/server/sonar-web/src/main/js/apps/groups/components/List.tsx
+++ b/server/sonar-web/src/main/js/apps/groups/components/List.tsx
@@ -17,9 +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 { ContentCell, NumericalCell, Table, TableRow } from 'design-system';
+import { ContentCell, NumericalCell, TableRow } from 'design-system';
 import { sortBy } from 'lodash';
 import * as React from 'react';
+import { StickyTable } from '../../../app/components/admin/StickyTable';
 import { translate } from '../../../helpers/l10n';
 import { Group, Provider } from '../../../types/types';
 import ListItem from './ListItem';
@@ -44,10 +45,10 @@ export default function List(props: Readonly<Props>) {
   const { groups, manageProvider } = props;
 
   return (
-    <Table columnCount={4} header={<Header />} id="groups-list">
+    <StickyTable columnCount={4} header={<Header />} id="groups-list">
       {sortBy(groups, (group) => group.name.toLowerCase()).map((group) => (
         <ListItem group={group} key={group.name} manageProvider={manageProvider} />
       ))}
-    </Table>
+    </StickyTable>
   );
 }
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 b8886856ade..d373d9d4049 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
@@ -60,7 +60,8 @@ const groupsHandler = new GroupsServiceMock();
 const ui = {
   createUserButton: byRole('button', { name: 'users.create_user' }),
   localAndManagedFilter: byRole('radio', { name: 'all' }),
-  managedFilter: byRole('radio', { name: 'managed' }),
+  managedByScimFilter: byRole('radio', { name: 'managed.managed.SCIM' }),
+  managedByGithubFilter: byRole('radio', { name: 'managed.managed.github' }),
   localFilter: byRole('radio', { name: 'local' }),
   showMore: byRole('button', { name: 'show_more' }),
   aliceUpdateGroupButton: byRole('button', { name: 'users.update_users_groups.alice.merveille' }),
@@ -128,7 +129,7 @@ const ui = {
   dialogCreateUser: byRole('dialog', { name: 'users.create_user' }),
   dialogDeactivateUser: byRole('dialog', { name: 'users.deactivate_user' }),
 
-  infoManageMode: byText(/users\.page\.managed_description/),
+  infoManageMode: byText(/users\.page\.managed_description2/),
   description: byText('users.page.description'),
   deleteUserAlert: byText('delete-user-warning'),
 
@@ -218,7 +219,7 @@ describe('different filters combinations', () => {
     const user = userEvent.setup();
     renderUsersApp();
 
-    await user.click(await ui.managedFilter.find());
+    await user.click(await ui.managedByScimFilter.find());
     await waitFor(() => expect(ui.activityFilter.get()).toBeEnabled());
 
     await selectEvent.select(
@@ -499,7 +500,7 @@ describe('in manage mode', () => {
     systemHandler.setProvider(Provider.Github);
   });
 
-  it('should not be able to create a user"', async () => {
+  it('should not be able to create a user', async () => {
     renderUsersApp();
 
     expect(await ui.infoManageMode.find()).toBeInTheDocument();
@@ -568,7 +569,7 @@ describe('in manage mode', () => {
 
     expect(await ui.aliceRowWithLocalBadge.find()).toBeInTheDocument();
 
-    await user.click(await ui.managedFilter.find());
+    await user.click(await ui.managedByGithubFilter.find());
 
     expect(await ui.bobRow.find()).toBeInTheDocument();
     expect(ui.aliceRowWithLocalBadge.query()).not.toBeInTheDocument();
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 1d28a8e172b..cea36543a27 100644
--- a/server/sonar-web/src/main/js/components/controls/ManagedFilter.tsx
+++ b/server/sonar-web/src/main/js/components/controls/ManagedFilter.tsx
@@ -49,7 +49,7 @@ export function ManagedFilter(props: Readonly<ManagedFilterProps>) {
           },
           { label: translate('local'), value: false },
         ]}
-        onChange={(filterOption: 'all' | boolean | undefined) => {
+        onChange={(filterOption) => {
           if (filterOption === 'all') {
             props.setManaged(undefined);
           } else {