SONAR-19369 Add GitHub mark next to provisioned groups

4 files changed, 37 insertions, 6 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 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;