Better data fetchin in roles + ACL fix

Author: jvorcak

frontend/src/components/pages/security/tabs/roles-tab-new.tsx

@@ -55,12 +55,12 @@ import { ShieldCheckIcon } from 'lucide-react';
 import { parseAsString, useQueryStates } from 'nuqs';
 import { DeleteRoleRequestSchema } from 'protogen/redpanda/api/dataplane/v1/security_pb';
 import type { FC } from 'react';
-import { useLayoutEffect, useState } from 'react';
+import { useEffect, useLayoutEffect, useState } from 'react';
 import { useStore } from 'zustand';
 
 import ErrorResult from '../../../../components/misc/error-result';
 import { useDeleteRoleMutation, useListRolesQuery } from '../../../../react-query/api/security';
-import { useApiStoreHook, useRolesStore } from '../../../../state/backend-api';
+import { rolesApi, useApiStoreHook, useRolesStore } from '../../../../state/backend-api';
 import { useSupportedFeaturesStore } from '../../../../state/supported-features';
 import { setPageHeader } from '../../../../state/ui-state';
 import { FeatureLicenseNotification } from '../../../license/feature-license-notification';
@@ -93,6 +93,10 @@ export const RolesTabNew: FC = () => {
       { title: 'Roles', linkTo: '/security/roles' },
     ]);
   }, []);
+
+  useEffect(() => {
+    rolesApi.refreshRoleMembers().catch(() => {});
+  }, []);
   const featureRolesApi = useSupportedFeaturesStore((s) => s.rolesApi);
   const userData = useApiStoreHook((s) => s.userData);
   const roleMembers = useStore(useRolesStore, (s) => s.roleMembers);

frontend/src/components/pages/security/users/add-acl-dialog.tsx

@@ -132,7 +132,7 @@ export const AddAclDialog = ({ open, onOpenChange, principal }: AddAclDialogProp
       await createACL(
         create(CreateACLRequestSchema, {
           resourceType: values.resourceType,
-          resourceName: values.resourceName || '*',
+          resourceName: values.resourceType === ACL_ResourceType.CLUSTER ? 'kafka-cluster' : values.resourceName || '*',
           resourcePatternType: values.patternType,
           principal: effectivePrincipal,
           host: values.host || '*',

frontend/src/components/pages/security/users/user-details-new.tsx

@@ -21,12 +21,11 @@ import { useGetAclsByPrincipal } from '../../../../react-query/api/acl';
 import { useListRolesQuery } from '../../../../react-query/api/security';
 import { invalidateUsersCache, useDeleteUserMutation, useListUsersQuery } from '../../../../react-query/api/user';
 import { appGlobal } from '../../../../state/app-global';
-import { api, rolesApi, useRolesStore } from '../../../../state/backend-api';
+import { api, rolesApi } from '../../../../state/backend-api';
 import { AclRequestDefault } from '../../../../state/rest-interfaces';
 import { useSupportedFeaturesStore } from '../../../../state/supported-features';
 import { setPageHeader } from '../../../../state/ui-state';
 import { DefaultSkeleton } from '../../../../utils/tsx-utils';
-import { useStore } from 'zustand';
 import { DeleteUserConfirmModal } from '../shared/delete-user-confirm-modal';
 
 type UserDetailsPageProps = {
@@ -42,7 +41,6 @@ const formatMechanism = (mechanism?: SASLMechanism): string | null => {
 export const UserDetailsPageNew = ({ userName }: UserDetailsPageProps) => {
   const [isChangePasswordModalOpen, setIsChangePasswordModalOpen] = useState(false);
   const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
-  const roleMembers = useStore(useRolesStore, (s) => s.roleMembers);
 
   const { data: usersData, isLoading: isUsersLoading } = useListUsersQuery();
   const users = usersData?.users?.map((u) => u.name) ?? [];