From 335be279b54667ec29e965e89235f886b934c0b2 Mon Sep 17 00:00:00 2001
From: Jan Vorcak <jan.vorcak@redpanda.com>
Date: Thu, 2 Jan 2025 14:59:39 +0100
Subject: [PATCH] Solves infinite loading case

---
 frontend/src/components/pages/acls/Acl.List.tsx   | 8 ++++++++
 frontend/src/components/pages/acls/RoleCreate.tsx | 9 +--------
 frontend/src/state/backendApi.ts                  | 4 ++++
 frontend/src/state/restInterfaces.ts              | 1 +
 4 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/pages/acls/Acl.List.tsx b/frontend/src/components/pages/acls/Acl.List.tsx
index 096d65a01..3a7810dbb 100644
--- a/frontend/src/components/pages/acls/Acl.List.tsx
+++ b/frontend/src/components/pages/acls/Acl.List.tsx
@@ -450,6 +450,14 @@ const RolesTab = observer(() => {
           data-testid="create-role-button"
           variant="outline"
           onClick={() => appGlobal.history.push('/security/roles/create')}
+          isDisabled={api.userData.canCreateRoles === false || !api.isAdminApiConfigured}
+          tooltip={[
+            api.userData?.canCreateRoles === false &&
+              'You need KafkaAclOperation.KAFKA_ACL_OPERATION_ALTER and RedpandaCapability.MANAGE_RBAC permissions.',
+            !api.isAdminApiConfigured && 'You need to enable Admin API.',
+          ]
+            .filter(Boolean)
+            .join(' ')}
         >
           Create role
         </Button>
diff --git a/frontend/src/components/pages/acls/RoleCreate.tsx b/frontend/src/components/pages/acls/RoleCreate.tsx
index ce4d33a59..74786dc72 100644
--- a/frontend/src/components/pages/acls/RoleCreate.tsx
+++ b/frontend/src/components/pages/acls/RoleCreate.tsx
@@ -32,17 +32,10 @@ class RoleCreatePage extends PageComponent {
   }
 
   async refreshData(force: boolean) {
-    if (api.userData != null && !api.userData.canListAcls) return;
-
-    await Promise.allSettled([
-      api.refreshAcls(AclRequestDefault, force),
-      api.refreshServiceAccounts(true),
-      rolesApi.refreshRoles(),
-    ]);
+    await Promise.allSettled([api.refreshServiceAccounts(true), rolesApi.refreshRoles()]);
   }
 
   render() {
-    if (api.ACLs?.aclResources === undefined) return DefaultSkeleton;
     if (!api.serviceAccounts || !api.serviceAccounts.users) return DefaultSkeleton;
 
     return (
diff --git a/frontend/src/state/backendApi.ts b/frontend/src/state/backendApi.ts
index d0b6f79b6..b479bfe45 100644
--- a/frontend/src/state/backendApi.ts
+++ b/frontend/src/state/backendApi.ts
@@ -339,6 +339,7 @@ export async function handleExpiredLicenseError(r: Response) {
       canListAcls: true,
       canListQuotas: true,
       canPatchConfigs: true,
+      canCreateRoles: true,
       canReassignPartitions: true,
       canCreateSchemas: true,
       canDeleteSchemas: true,
@@ -442,6 +443,9 @@ const apiStore = {
           canReassignPartitions:
             r.permissions?.kafkaClusterOperations.includes(KafkaAclOperation.ALTER_CONFIGS) &&
             r.permissions?.kafkaClusterOperations.includes(KafkaAclOperation.DESCRIBE_CONFIGS),
+          canCreateRoles:
+            r.permissions?.kafkaClusterOperations.includes(KafkaAclOperation.ALTER) &&
+            r.permissions?.redpanda.includes(RedpandaCapability.MANAGE_RBAC),
           canCreateSchemas: r.permissions?.schemaRegistry.includes(SchemaRegistryCapability.WRITE),
           canDeleteSchemas: r.permissions?.schemaRegistry.includes(SchemaRegistryCapability.DELETE),
           canManageSchemaRegistry: r.permissions?.schemaRegistry.includes(SchemaRegistryCapability.WRITE),
diff --git a/frontend/src/state/restInterfaces.ts b/frontend/src/state/restInterfaces.ts
index 2f7e3eb60..98f55e813 100644
--- a/frontend/src/state/restInterfaces.ts
+++ b/frontend/src/state/restInterfaces.ts
@@ -534,6 +534,7 @@ export interface UserData {
   canListQuotas: boolean;
   canReassignPartitions: boolean;
   canPatchConfigs: boolean;
+  canCreateRoles: boolean;
 
   canViewSchemas: boolean;
   canCreateSchemas: boolean;