Teams: Use generated TS types (#60618)

* Teams: Use generated TS types

* Teams: Update types usage

* Teams: Update types import

* Teams: Move metadata to mock function

* Teams: Move TeamDTO to types

* Update kind

kinds/structured/team/team_kind.cue

@@ -27,7 +27,7 @@ lineage: seqs: [
 				// Updated indicates when the team was updated.
 				updated: int64 @grafanamaturity(ToMetadata="sys")
 
-				#Permission: 1 | 2 | 4 @cuetsy(kind="enum",memberNames="Viewer|Editor|Admin")
+				#Permission: 0 | 1 | 2 | 4 @cuetsy(kind="enum",memberNames="Member|Viewer|Editor|Admin")
 			},
 		]
 	},

packages/grafana-data/src/types/accesscontrol.ts

@@ -1,5 +1,3 @@
-import { KeyValue } from '.';
-
 /**
  * With RBAC, the backend will return additional access control metadata to objects.
  * These metadata will contain user permissions associated to a given resource.
@@ -10,5 +8,5 @@ import { KeyValue } from '.';
  * }
  */
 export interface WithAccessControlMetadata {
-  accessControl?: KeyValue<boolean>;
+  accessControl?: Record<string, boolean>;
 }

packages/grafana-schema/src/raw/team/x/team_types.gen.ts

@@ -11,6 +11,7 @@
 export enum Permission {
   Admin = 4,
   Editor = 2,
+  Member = 0,
   Viewer = 1,
 }
 

pkg/kinds/team/team_types_gen.go

@@ -12,6 +12,8 @@ package team
 
 // Defines values for Permission.
 const (
+	PermissionN0 Permission = 0
+
 	PermissionN1 Permission = 1
 
 	PermissionN2 Permission = 2

public/app/features/profile/UserProfileEditPage.test.tsx

@@ -11,6 +11,7 @@ import TestProvider from '../../../test/helpers/TestProvider';
 import { backendSrv } from '../../core/services/backend_srv';
 import { configureStore } from '../../store/configureStore';
 import { TeamPermissionLevel } from '../../types';
+import { getMockTeam } from '../teams/__mocks__/teamMocks';
 
 import { Props, UserProfileEditPage } from './UserProfileEditPage';
 import { initialUserState } from './state/reducers';
@@ -27,14 +28,13 @@ const defaultProps: Props = {
     orgId: 0,
   },
   teams: [
-    {
-      id: 0,
+    getMockTeam(0, {
       name: 'Team One',
       email: 'team.one@test.com',
       avatarUrl: '/avatar/07d881f402480a2a511a9a15b5fa82c0',
       memberCount: 2000,
       permission: TeamPermissionLevel.Admin,
-    },
+    }),
   ],
   orgs: [
     {

public/app/features/profile/state/reducers.test.ts

@@ -1,5 +1,6 @@
 import { reducerTester } from '../../../../test/core/redux/reducerTester';
 import { OrgRole, TeamPermissionLevel } from '../../../types';
+import { getMockTeam } from '../../teams/__mocks__/teamMocks';
 
 import {
   initialUserState,
@@ -89,31 +90,13 @@ describe('userReducer', () => {
         .givenReducer(userReducer, { ...initialUserState, teamsAreLoading: true })
         .whenActionIsDispatched(
           teamsLoaded({
-            teams: [
-              {
-                id: 1,
-                email: 'team@team.com',
-                name: 'Team',
-                avatarUrl: '/avatar/12345',
-                memberCount: 4,
-                permission: TeamPermissionLevel.Admin,
-              },
-            ],
+            teams: [getMockTeam(1, { permission: TeamPermissionLevel.Admin })],
           })
         )
         .thenStateShouldEqual({
           ...initialUserState,
           teamsAreLoading: false,
-          teams: [
-            {
-              id: 1,
-              email: 'team@team.com',
-              name: 'Team',
-              avatarUrl: '/avatar/12345',
-              memberCount: 4,
-              permission: TeamPermissionLevel.Admin,
-            },
-          ],
+          teams: [getMockTeam(1, { permission: TeamPermissionLevel.Admin })],
         });
     });
   });

public/app/features/teams/CreateTeam.tsx

@@ -8,12 +8,7 @@ import { TeamRolePicker } from 'app/core/components/RolePicker/TeamRolePicker';
 import { updateTeamRoles } from 'app/core/components/RolePicker/api';
 import { useRoleOptions } from 'app/core/components/RolePicker/hooks';
 import { contextSrv } from 'app/core/core';
-import { AccessControlAction, Role } from 'app/types';
-
-interface TeamDTO {
-  email: string;
-  name: string;
-}
+import { AccessControlAction, Role, TeamDTO } from 'app/types';
 
 const pageNav: NavModelItem = {
   icon: 'users-alt',

public/app/features/teams/TeamListRow.tsx

@@ -35,11 +35,11 @@ export const TeamListRow = ({ team, roleOptions, isTeamAdmin, displayRolePicker,
       </td>
       <td className="link-td">
         {canReadTeam ? (
-          <a href={teamUrl} aria-label={team.email?.length > 0 ? undefined : 'Empty email cell'}>
+          <a href={teamUrl} aria-label={team.email || 'Empty email cell'}>
             {team.email}
           </a>
         ) : (
-          <div style={{ padding: '0px 8px' }} aria-label={team.email?.length > 0 ? undefined : 'Empty email cell'}>
+          <div style={{ padding: '0px 8px' }} aria-label={team.email || 'Empty email cell'}>
             {team.email}
           </div>
         )}

public/app/features/teams/TeamSettings.tsx

@@ -41,7 +41,7 @@ export const TeamSettings: FC<Props> = ({ team, updateTeam }) => {
           if (contextSrv.licensedAccessControlEnabled() && canUpdateRoles) {
             await updateTeamRoles(pendingRoles, team.id);
           }
-          updateTeam(formTeam.name, formTeam.email);
+          updateTeam(formTeam.name, formTeam.email || '');
         }}
         disabled={!canWriteTeamSettings}
       >

public/app/features/teams/__mocks__/teamMocks.ts

@@ -3,27 +3,25 @@ import { Team, TeamGroup, TeamMember, TeamPermissionLevel } from 'app/types';
 export const getMultipleMockTeams = (numberOfTeams: number): Team[] => {
   const teams: Team[] = [];
   for (let i = 1; i <= numberOfTeams; i++) {
-    teams.push({
-      id: i,
-      name: `test-${i}`,
-      avatarUrl: 'some/url/',
-      email: `test-${i}@test.com`,
-      memberCount: i,
-      permission: TeamPermissionLevel.Member,
-    });
+    teams.push(getMockTeam(i));
   }
 
   return teams;
 };
 
-export const getMockTeam = (): Team => {
+export const getMockTeam = (i = 1, overrides = {}): Team => {
   return {
-    id: 1,
-    name: 'test',
+    id: i,
+    name: `test-${i}`,
     avatarUrl: 'some/url/',
-    email: 'test@test.com',
-    memberCount: 1,
+    email: `test-${i}@test.com`,
+    memberCount: i,
     permission: TeamPermissionLevel.Member,
+    accessControl: { isEditor: false },
+    created: 0,
+    orgId: 0,
+    updated: 0,
+    ...overrides,
   };
 };
 

public/app/features/teams/state/navModel.ts

@@ -13,6 +13,10 @@ const loadingTeam = {
   email: 'loading',
   memberCount: 0,
   permission: TeamPermissionLevel.Member,
+  accessControl: { isEditor: false },
+  created: 0,
+  orgId: 0,
+  updated: 0,
 };
 
 export function buildNavModel(team: Team): NavModelItem {

public/app/types/acl.ts

@@ -1,3 +1,8 @@
+import { Permission } from '@grafana/schema';
+
+// Alias to an existing type to reduce the number of changes
+export { Permission as TeamPermissionLevel };
+
 export enum OrgRole {
   Viewer = 'Viewer',
   Editor = 'Editor',
@@ -111,21 +116,16 @@ export const dashboardPermissionLevels: DashboardPermissionInfo[] = [
   },
 ];
 
-export enum TeamPermissionLevel {
-  Member = 0,
-  Admin = 4,
-}
-
 export interface TeamPermissionInfo {
-  value: TeamPermissionLevel;
+  value: Permission;
   label: string;
   description: string;
 }
 
 export const teamsPermissionLevels: TeamPermissionInfo[] = [
-  { value: TeamPermissionLevel.Member, label: 'Member', description: 'Is team member' },
+  { value: Permission.Member, label: 'Member', description: 'Is team member' },
   {
-    value: TeamPermissionLevel.Admin,
+    value: Permission.Admin,
     label: 'Admin',
     description: 'Can add/remove permissions, members and delete team.',
   },

public/app/types/teams.ts

@@ -1,16 +1,12 @@
-import { WithAccessControlMetadata } from '@grafana/data';
+import { Team as TeamBase } from '@grafana/schema';
 
-import { TeamPermissionLevel } from './acl';
-
-export interface Team extends WithAccessControlMetadata {
-  id: number;
-  name: string;
-  avatarUrl: string;
-  email: string;
-  memberCount: number;
-  permission: TeamPermissionLevel;
+export interface Team extends TeamBase {
+  id: number; // TODO switch to UUID
 }
 
+// Represents the data sent via an API to create a team
+export interface TeamDTO extends Pick<TeamBase, 'name' | 'email'> {}
+
 export interface TeamMember {
   userId: number;
   teamId: number;