SONAR-19369 Add GitHub mark next to provisioned groups

6 files changed, 47 insertions, 9 deletions

diff --git a/server/sonar-web/src/main/js/api/mocks/GroupsServiceMock.ts b/server/sonar-web/src/main/js/api/mocks/GroupsServiceMock.ts
index 39f45084c16..f4211603eca 100644
--- a/server/sonar-web/src/main/js/api/mocks/GroupsServiceMock.ts
+++ b/server/sonar-web/src/main/js/api/mocks/GroupsServiceMock.ts
@@ -19,6 +19,7 @@
  */
 
 import { cloneDeep } from 'lodash';
+import { Provider } from '../../components/hooks/useManageProvider';
 import {
   mockClusterSysInfo,
   mockGroup,
@@ -50,6 +51,7 @@ jest.mock('../system');
 jest.mock('../user_groups');
 
 export default class GroupsServiceMock {
+  provider: Provider | undefined;
   isManaged = false;
   paging: Paging;
   groups: Group[];
@@ -66,6 +68,7 @@ export default class GroupsServiceMock {
   ];
 
   constructor() {
+    this.provider = Provider.Scim;
     this.groups = cloneDeep(this.readOnlyGroups);
     this.paging = mockPaging({
       pageIndex: 1,
@@ -90,6 +93,10 @@ export default class GroupsServiceMock {
     this.users = cloneDeep(this.defaultUsers);
   }
 
+  setProvider(provider: Provider) {
+    this.provider = provider;
+  }
+
   setIsManaged(managed: boolean) {
     this.isManaged = managed;
   }
@@ -212,7 +219,7 @@ export default class GroupsServiceMock {
               System: {
                 'High Availability': true,
                 'Server ID': 'asd564-asd54a-5dsfg45',
-                'External Users and Groups Provisioning': 'GitHub',
+                'External Users and Groups Provisioning': this.provider,
               },
             }
           : {}
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 42186abe045..30eeee5019b 100644
--- a/server/sonar-web/src/main/js/apps/groups/GroupsApp.tsx
+++ b/server/sonar-web/src/main/js/apps/groups/GroupsApp.tsx
@@ -33,7 +33,7 @@ import Header from './components/Header';
 import List from './components/List';
 import './groups.css';
 
-export default function App() {
+export default function GroupsApp() {
   const [loading, setLoading] = useState<boolean>(true);
   const [paging, setPaging] = useState<Paging>();
   const [search, setSearch] = useState<string>('');
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 15246f4dd59..b18762192b5 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
@@ -25,10 +25,11 @@ import { act } from 'react-dom/test-utils';
 import { byRole, byText } from 'testing-library-selector';
 import AuthenticationServiceMock from '../../../api/mocks/AuthenticationServiceMock';
 import GroupsServiceMock from '../../../api/mocks/GroupsServiceMock';
+import { Provider } from '../../../components/hooks/useManageProvider';
 import { renderApp } from '../../../helpers/testReactTestingUtils';
 import { Feature } from '../../../types/features';
 import { TaskStatuses } from '../../../types/tasks';
-import App from '../GroupsApp';
+import GroupsApp from '../GroupsApp';
 
 const handler = new GroupsServiceMock();
 const authenticationHandler = new AuthenticationServiceMock();
@@ -63,6 +64,7 @@ const ui = {
   getMembers: () => within(ui.membersDialog.get()).getAllByRole('checkbox'),
 
   managedGroupRow: byRole('row', { name: 'managed-group 1' }),
+  githubManagedGroupRow: byRole('row', { name: 'managed-group github 1' }),
   managedGroupEditMembersButton: byRole('button', { name: 'groups.users.edit.managed-group' }),
   managedGroupViewMembersButton: byRole('button', { name: 'groups.users.view.managed-group' }),
 
@@ -327,6 +329,7 @@ describe('in manage mode', () => {
   describe('Github Provisioning', () => {
     beforeEach(() => {
       authenticationHandler.handleActivateGithubProvisioning();
+      handler.setProvider(Provider.Github);
     });
 
     it('should display a success status when the synchronisation is a success', async () => {
@@ -380,9 +383,23 @@ describe('in manage mode', () => {
       expect(ui.githubProvisioningSuccess.query()).not.toBeInTheDocument();
       expect(ui.githubProvisioningInProgress.query()).not.toBeInTheDocument();
     });
+
+    it('should render a github icon for github groups', async () => {
+      handler.setProvider(Provider.Github);
+      const user = userEvent.setup();
+      renderGroupsApp();
+
+      await act(async () => {
+        await user.click(await ui.managedFilter.find());
+      });
+
+      expect(
+        within(ui.githubManagedGroupRow.get()).getByRole('img', { name: 'github' })
+      ).toBeInTheDocument();
+    });
   });
 });
 
 function renderGroupsApp(featureList: Feature[] = []) {
-  return renderApp('admin/groups', <App />, { featureList });
+  return renderApp('admin/groups', <GroupsApp />, { featureList });
 }
diff --git a/server/sonar-web/src/main/js/apps/groups/components/ListItem.tsx b/server/sonar-web/src/main/js/apps/groups/components/ListItem.tsx
index d6a19a6d225..c869c65c71c 100644
--- a/server/sonar-web/src/main/js/apps/groups/components/ListItem.tsx
+++ b/server/sonar-web/src/main/js/apps/groups/components/ListItem.tsx
@@ -23,7 +23,9 @@ import ActionsDropdown, {
   ActionsDropdownDivider,
   ActionsDropdownItem,
 } from '../../../components/controls/ActionsDropdown';
+import { Provider } from '../../../components/hooks/useManageProvider';
 import { translate, translateWithParameters } from '../../../helpers/l10n';
+import { getBaseUrl } from '../../../helpers/system';
 import { Group } from '../../../types/types';
 import DeleteGroupForm from './DeleteGroupForm';
 import GroupForm from './GroupForm';
@@ -50,11 +52,23 @@ export default function ListItem(props: ListItemProps) {
     return isManaged() && !managed;
   };
 
+  const isGithubGroup = () => {
+    return manageProvider === Provider.Github && managed;
+  };
+
   return (
     <tr data-id={name}>
       <td className="width-20" headers="list-group-name">
-        <strong>{name}</strong>
+        <b>{name}</b>
         {group.default && <span className="little-spacer-left">({translate('default')})</span>}
+        {isGithubGroup() && (
+          <img
+            alt="github"
+            className="spacer-left spacer-right"
+            height={16}
+            src={`${getBaseUrl()}/images/alm/github.svg`}
+          />
+        )}
         {isGroupLocal() && <span className="little-spacer-left badge">{translate('local')}</span>}
       </td>
 
diff --git a/server/sonar-web/src/main/js/apps/groups/routes.tsx b/server/sonar-web/src/main/js/apps/groups/routes.tsx
index 108ec3cf60d..966fbb3539c 100644
--- a/server/sonar-web/src/main/js/apps/groups/routes.tsx
+++ b/server/sonar-web/src/main/js/apps/groups/routes.tsx
@@ -19,8 +19,8 @@
  */
 import React from 'react';
 import { Route } from 'react-router-dom';
-import App from './GroupsApp';
+import GroupsApp from './GroupsApp';
 
-const routes = () => <Route path="groups" element={<App />} />;
+const routes = () => <Route path="groups" element={<GroupsApp />} />;
 
 export default routes;
diff --git a/server/sonar-web/src/main/js/components/hooks/useManageProvider.ts b/server/sonar-web/src/main/js/components/hooks/useManageProvider.ts
index db7c0a4c7b8..e91145365b1 100644
--- a/server/sonar-web/src/main/js/components/hooks/useManageProvider.ts
+++ b/server/sonar-web/src/main/js/components/hooks/useManageProvider.ts
@@ -29,12 +29,12 @@ export enum Provider {
 }
 
 export function useManageProvider(): string | undefined {
-  const [manageProvider, setManageProvider] = React.useState<string | undefined>();
+  const [manageProvider, setManageProvider] = React.useState<Provider | undefined>();
 
   useEffect(() => {
     (async () => {
       const info = (await getSystemInfo()) as SysInfoCluster;
-      setManageProvider(info.System['External Users and Groups Provisioning']);
+      setManageProvider(info.System['External Users and Groups Provisioning'] as Provider);
     })();
   }, []);