Access control: team UI improvements with FGAC (#45255)

* show teams page for user who can't list teams but can create teams

* Fixing buttons and routes

* Small refactor

Co-authored-by: gamab <gabi.mabs@gmail.com>

pkg/api/roles.go

@@ -301,12 +301,15 @@ var orgsCreateAccessEvaluator = accesscontrol.EvalAll(
 )
 
 // teamsAccessEvaluator is used to protect the "Configuration > Teams" page access
-var teamsAccessEvaluator = accesscontrol.EvalAll(
-	accesscontrol.EvalPermission(accesscontrol.ActionTeamsRead),
-	accesscontrol.EvalAny(
-		accesscontrol.EvalPermission(accesscontrol.ActionTeamsCreate),
-		accesscontrol.EvalPermission(accesscontrol.ActionTeamsWrite),
-		accesscontrol.EvalPermission(accesscontrol.ActionTeamsPermissionsWrite),
+// grants access to a user when they can either create teams or can read and update a team
+var teamsAccessEvaluator = accesscontrol.EvalAny(
+	accesscontrol.EvalPermission(accesscontrol.ActionTeamsCreate),
+	accesscontrol.EvalAll(
+		accesscontrol.EvalPermission(accesscontrol.ActionTeamsRead),
+		accesscontrol.EvalAny(
+			accesscontrol.EvalPermission(accesscontrol.ActionTeamsWrite),
+			accesscontrol.EvalPermission(accesscontrol.ActionTeamsPermissionsWrite),
+		),
 	),
 )
 
@@ -314,6 +317,7 @@ var teamsAccessEvaluator = accesscontrol.EvalAll(
 var teamsEditAccessEvaluator = accesscontrol.EvalAll(
 	accesscontrol.EvalPermission(accesscontrol.ActionTeamsRead),
 	accesscontrol.EvalAny(
+		accesscontrol.EvalPermission(accesscontrol.ActionTeamsCreate),
 		accesscontrol.EvalPermission(accesscontrol.ActionTeamsWrite),
 		accesscontrol.EvalPermission(accesscontrol.ActionTeamsPermissionsWrite),
 	),

public/app/features/teams/TeamList.tsx

@@ -42,7 +42,10 @@ export class TeamList extends PureComponent<Props, State> {
   }
 
   componentDidMount() {
-    this.fetchTeams();
+    // Don't fetch teams if the user cannot see any
+    if (contextSrv.hasAccess(AccessControlAction.ActionTeamsRead, true)) {
+      this.fetchTeams();
+    }
     if (contextSrv.licensedAccessControlEnabled() && contextSrv.hasPermission(AccessControlAction.ActionRolesList)) {
       this.fetchRoleOptions();
     }
@@ -195,8 +198,10 @@ export class TeamList extends PureComponent<Props, State> {
 
   renderList() {
     const { teamsCount, hasFetched } = this.props;
+    // If the user cannot read any team, we didn't fetch them
+    let isLoading = !hasFetched && contextSrv.hasAccess(AccessControlAction.ActionTeamsRead, true);
 
-    if (!hasFetched) {
+    if (isLoading) {
       return null;
     }
 
@@ -209,10 +214,12 @@ export class TeamList extends PureComponent<Props, State> {
 
   render() {
     const { hasFetched, navModel } = this.props;
+    // If the user cannot read any team, we didn't fetch them
+    let isLoading = !hasFetched && contextSrv.hasAccess(AccessControlAction.ActionTeamsRead, true);
 
     return (
       <Page navModel={navModel}>
-        <Page.Contents isLoading={!hasFetched}>{this.renderList()}</Page.Contents>
+        <Page.Contents isLoading={isLoading}>{this.renderList()}</Page.Contents>
       </Page>
     );
   }

public/app/features/teams/TeamSettings.tsx

@@ -33,17 +33,20 @@ export const TeamSettings: FC<Props> = ({ team, updateTeam }) => {
         >
           {({ register }) => (
             <>
-              <Field label="Name">
+              <Field label="Name" disabled={!canWriteTeamSettings}>
                 <Input {...register('name', { required: true })} id="name-input" />
               </Field>
 
               <Field
                 label="Email"
                 description="This is optional and is primarily used to set the team profile avatar (via gravatar service)."
+                disabled={!canWriteTeamSettings}
               >
                 <Input {...register('email')} placeholder="team@email.com" type="email" id="email-input" />
               </Field>
-              <Button type="submit">Update</Button>
+              <Button type="submit" disabled={!canWriteTeamSettings}>
+                Update
+              </Button>
             </>
           )}
         </Form>

public/app/routes/routes.tsx

@@ -219,7 +219,7 @@ export function getAppRoutes(): RouteDescriptor[] {
       roles: () =>
         contextSrv.evaluatePermission(
           () => (config.editorsCanAdmin ? ['Editor', 'Admin'] : ['Admin']),
-          [AccessControlAction.ActionTeamsRead]
+          [AccessControlAction.ActionTeamsRead, AccessControlAction.ActionTeamsCreate]
         ),
       component: SafeDynamicImport(() => import(/* webpackChunkName: "TeamList" */ 'app/features/teams/TeamList')),
     },
@@ -237,7 +237,7 @@ export function getAppRoutes(): RouteDescriptor[] {
       roles: () =>
         contextSrv.evaluatePermission(
           () => (config.editorsCanAdmin ? ['Editor', 'Admin'] : ['Admin']),
-          [AccessControlAction.ActionTeamsWrite, AccessControlAction.ActionTeamsPermissionsWrite]
+          [AccessControlAction.ActionTeamsRead]
         ),
       component: SafeDynamicImport(() => import(/* webpackChunkName: "TeamPages" */ 'app/features/teams/TeamPages')),
     },