Use the new APIs if the ft is enabled

public/app/features/teams/TeamGroupSync.tsx

@@ -1,12 +1,7 @@
 import { css, cx } from '@emotion/css';
 import { FormEventHandler, useState } from 'react';
 
-import {
-  TeamGroupDto,
-  useAddTeamGroupApiMutation,
-  useGetTeamGroupsApiQuery,
-  useRemoveTeamGroupApiQueryMutation,
-} from '@grafana/api-clients/rtkq/legacy';
+import { TeamGroupDto } from '@grafana/api-clients/rtkq/legacy';
 import { Trans, t } from '@grafana/i18n';
 import { Input, Tooltip, Icon, Button, useTheme2, InlineField, InlineFieldRow, useStyles2 } from '@grafana/ui';
 import { SlideDown } from 'app/core/components/Animations/SlideDown';
@@ -15,6 +10,8 @@ import EmptyListCTA from 'app/core/components/EmptyListCTA/EmptyListCTA';
 import { UpgradeBox, UpgradeContent, UpgradeContentProps } from 'app/core/components/Upgrade/UpgradeBox';
 import { highlightTrial } from 'app/features/admin/utils';
 
+import { useAddExternalGroupMapping, useGetExternalGroupMappings, useRemoveExternalGroupMapping } from './hooks';
+
 interface Props {
   isReadOnly: boolean;
   teamUid: string;
@@ -27,9 +24,9 @@ export const TeamGroupSync = ({ isReadOnly, teamUid }: Props) => {
   const [newGroupId, setNewGroupId] = useState('');
   const styles = useStyles2(getStyles);
 
-  const { data: groups = [] } = useGetTeamGroupsApiQuery({ teamId: teamUid });
-  const [addTeamGroup] = useAddTeamGroupApiMutation();
-  const [removeTeamGroup] = useRemoveTeamGroupApiQueryMutation();
+  const { data: groups = [] } = useGetExternalGroupMappings({ teamId: teamUid });
+  const [addTeamGroup] = useAddExternalGroupMapping();
+  const [removeTeamGroup] = useRemoveExternalGroupMapping();
 
   const onToggleAdding = () => {
     setIsAddBoxVisible(!isAddBoxVisible);
@@ -46,11 +43,12 @@ export const TeamGroupSync = ({ isReadOnly, teamUid }: Props) => {
     setNewGroupId('');
   };
 
-  const onRemoveGroup = async (groupId: string | undefined) => {
-    if (!groupId) {
+  const onRemoveGroup = async (group: TeamGroupDto) => {
+    if (!group.groupId) {
       return;
     }
-    await removeTeamGroup({ teamId: teamUid, groupId });
+    // @ts-ignore
+    await removeTeamGroup({ teamId: teamUid, groupId: group.groupId, uid: group.uid });
   };
 
   const isNewGroupValid = () => {
@@ -65,7 +63,7 @@ export const TeamGroupSync = ({ isReadOnly, teamUid }: Props) => {
           <Button
             size="sm"
             variant="destructive"
-            onClick={() => onRemoveGroup(group.groupId)}
+            onClick={() => onRemoveGroup(group)}
             disabled={isReadOnly}
             aria-label={t('teams.team-group-sync.aria-label-remove', 'Remove group {{groupName}}', {
               groupName: group.groupId,

public/app/features/teams/hooks.ts

@@ -1,6 +1,19 @@
+/* eslint-disable react-hooks/rules-of-hooks */
 import { skipToken } from '@reduxjs/toolkit/query';
 import { useEffect, useMemo } from 'react';
 
+import {
+  useCreateExternalGroupMappingMutation,
+  useListExternalGroupMappingQuery,
+  useDeleteExternalGroupMappingMutation,
+} from '@grafana/api-clients/rtkq/iam/v0alpha1';
+import {
+  useAddTeamGroupApiMutation,
+  useGetTeamGroupsApiQuery,
+  useRemoveTeamGroupApiQueryMutation,
+  TeamGroupDto,
+} from '@grafana/api-clients/rtkq/legacy';
+import { config } from '@grafana/runtime';
 import {
   useSearchTeamsQuery as useLegacySearchTeamsQuery,
   useCreateTeamMutation,
@@ -152,3 +165,75 @@ export const useCreateTeam = () => {
 
   return [trigger, response] as const;
 };
+
+export const useGetExternalGroupMappings = (args: { teamId: string }) => {
+  if (!config.featureToggles.kubernetesExternalGroupMapping) {
+    return useGetTeamGroupsApiQuery(args);
+  }
+
+  const { data: newApiData, ...newApiRest } = useListExternalGroupMappingQuery({});
+
+  const groups: TeamGroupDto[] = useMemo(() => {
+    return (newApiData?.items || [])
+      .filter((item) => item.spec.teamRef.name === args.teamId)
+      .map(
+        (item) =>
+          // eslint-disable-next-line
+          ({
+            groupId: item.spec.externalGroupId,
+            teamId: item.spec.teamRef.name,
+            uid: item.metadata.name,
+          }) as unknown as TeamGroupDto
+      );
+  }, [newApiData, args.teamId]);
+
+  return {
+    ...newApiRest,
+    data: groups,
+  };
+};
+
+export const useAddExternalGroupMapping = () => {
+  if (!config.featureToggles.kubernetesExternalGroupMapping) {
+    return useAddTeamGroupApiMutation();
+  }
+
+  const [addNew, newResult] = useCreateExternalGroupMappingMutation();
+
+  const add = async (args: { teamId: string; teamGroupMapping: { groupId: string } }) => {
+    return addNew({
+      externalGroupMapping: {
+        apiVersion: 'iam.grafana.app/v0alpha1',
+        kind: 'ExternalGroupMapping',
+        metadata: {
+          generateName: 'external-group-mapping-',
+        },
+        spec: {
+          externalGroupId: args.teamGroupMapping.groupId,
+          teamRef: {
+            name: args.teamId,
+          },
+        },
+      },
+    });
+  };
+
+  return [add, newResult] as const;
+};
+
+export const useRemoveExternalGroupMapping = () => {
+  if (!config.featureToggles.kubernetesExternalGroupMapping) {
+    return useRemoveTeamGroupApiQueryMutation();
+  }
+
+  const [deleteMapping, deleteResult] = useDeleteExternalGroupMappingMutation();
+
+  const remove = async (args: { teamId: string; groupId: string; uid?: string }) => {
+    if (args.uid) {
+      return deleteMapping({ name: args.uid });
+    }
+    return { data: {} };
+  };
+
+  return [remove, deleteResult] as const;
+};