Fix several admin UI issues (#10869)

### What problem does this PR solve?

- Fix login card will overlap title in admin login page.
- Disable unnecessary `listRoles()` query in user management page and
create user form
- Disable admin UI API queries and mutations retry mechanism
- Fix page not redirect to login page automatically if API reports
unauthorized (401)
- Fix change password form not reset when change password modal close
- Resolve admin UI content (mostly long texts) may break layout main box
issue

### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)

web/src/pages/admin/forms/user-form.tsx

@@ -24,7 +24,9 @@ import {
   SelectValue,
 } from '@/components/ui/select';
 import { listRoles } from '@/services/admin-service';
+
 import EnterpriseFeature from '../components/enterprise-feature';
+import { IS_ENTERPRISE } from '../utils';
 
 interface CreateUserFormData {
   email: string;
@@ -49,6 +51,8 @@ export const CreateUserForm = ({
   const { data: roleList } = useQuery({
     queryKey: ['admin/listRoles'],
     queryFn: async () => (await listRoles()).data.data.roles,
+    enabled: IS_ENTERPRISE,
+    retry: false,
   });
 
   return (

web/src/pages/admin/index.tsx

@@ -1,3 +1,16 @@
+import { type AxiosResponseHeaders } from 'axios';
+import { useEffect, useId, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'umi';
+
+import { LucideEye, LucideEyeOff } from 'lucide-react';
+
+import { useMutation } from '@tanstack/react-query';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
+
 import Spotlight from '@/components/spotlight';
 import { ButtonLoading } from '@/components/ui/button';
 import { Card, CardContent, CardFooter } from '@/components/ui/card';
@@ -11,22 +24,17 @@ import {
   FormMessage,
 } from '@/components/ui/form';
 import { Input } from '@/components/ui/input';
+import { ScrollArea } from '@/components/ui/scroll-area';
 import { Authorization } from '@/constants/authorization';
+
 import { useAuth } from '@/hooks/auth-hooks';
 import { cn } from '@/lib/utils';
 import { Routes } from '@/routes';
-import adminService from '@/services/admin-service';
 import { rsaPsw } from '@/utils';
 import authorizationUtil from '@/utils/authorization-util';
-import { zodResolver } from '@hookform/resolvers/zod';
+
-import { useMutation } from '@tanstack/react-query';
+import { login } from '@/services/admin-service';
-import { AxiosResponseHeaders } from 'axios';
+
-import { LucideEye, LucideEyeOff } from 'lucide-react';
-import { useEffect, useId, useState } from 'react';
-import { SubmitHandler, useForm } from 'react-hook-form';
-import { useTranslation } from 'react-i18next';
-import { useNavigate } from 'umi';
-import { z } from 'zod';
 import { BgSvg } from '../login-next/bg';
 import ThemeSwitch from './components/theme-switch';
 
@@ -37,13 +45,19 @@ function AdminLogin() {
 
   const [showPassword, setShowPassword] = useState(false);
 
-  const { isPending: signLoading, mutateAsync: login } = useMutation({
+  const loginMutation = useMutation({
     mutationKey: ['adminLogin'],
     mutationFn: async (params: { email: string; password: string }) => {
-      const request = await adminService.login(params);
+      const rsaPassWord = rsaPsw(params.password) as string;
+      return await login({
+        email: params.email,
+        password: rsaPassWord,
+      });
+    },
+    onSuccess: (request) => {
       const { data: req, headers } = request;
 
-      if (req.code === 0) {
+      if (req?.code === 0) {
         const authorization = (headers as AxiosResponseHeaders)?.get(
           Authorization,
         );
@@ -60,13 +74,17 @@ function AdminLogin() {
           Token: token,
           userInfo: JSON.stringify(userInfo),
         });
-      }
 
-      return req;
+        navigate('/admin/services');
+      }
     },
+    onError: (error) => {
+      console.log('Failed:', error);
+    },
+    retry: false,
   });
 
-  const loading = signLoading;
+  const loading = loginMutation.isPending;
 
   useEffect(() => {
     if (isLogin) {
@@ -93,25 +111,9 @@ function AdminLogin() {
     resolver: zodResolver(FormSchema),
   });
 
-  const onCheck: SubmitHandler<z.infer<typeof FormSchema>> = async (params) => {
-    try {
-      const rsaPassWord = rsaPsw(params.password) as string;
-
-      const { code } = await login({
-        email: `${params.email}`.trim(),
-        password: rsaPassWord,
-      });
-
-      if (code === 0) {
-        navigate('/admin/services');
-      }
-    } catch (errorInfo) {
-      console.log('Failed:', errorInfo);
-    }
-  };
-
   return (
-    <div className="relative w-screen h-screen">
+    <ScrollArea className="w-screen h-screen">
+      <div className="relative">
         <Spotlight opcity={0.4} coverage={60} color="rgb(128, 255, 248)" />
         <Spotlight
           opcity={0.3}
@@ -141,7 +143,7 @@ function AdminLogin() {
           </h1>
         </div>
 
-      <div className="flex items-center justify-center w-screen h-screen">
+        <div className="flex items-center justify-center w-screen min-h-[1050px]">
           <div className="w-full max-w-[540px]">
             <Card className="w-full bg-bg-component backdrop-blur-sm rounded-2xl border border-border-button">
               <CardContent className="px-10 pt-14 pb-10">
@@ -149,7 +151,9 @@ function AdminLogin() {
                   <form
                     id={formId}
                     className="space-y-8 text-text-primary"
-                  onSubmit={form.handleSubmit(onCheck)}
+                    onSubmit={form.handleSubmit((data) =>
+                      loginMutation.mutate(data),
+                    )}
                   >
                     <FormField
                       control={form.control}
@@ -259,6 +263,7 @@ function AdminLogin() {
           </div>
         </div>
       </div>
+    </ScrollArea>
   );
 }
 

web/src/pages/admin/layout.tsx

@@ -14,13 +14,12 @@ import {
 } from 'lucide-react';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { NavLink, Outlet, useLocation, useNavigate } from 'umi';
+import { NavLink, Outlet, useNavigate } from 'umi';
 import ThemeSwitch from './components/theme-switch';
 import { IS_ENTERPRISE } from './utils';
 
 const AdminLayout = () => {
   const { t } = useTranslation();
-  const { pathname } = useLocation();
   const navigate = useNavigate();
 
   const navItems = useMemo(
@@ -58,11 +57,7 @@ const AdminLayout = () => {
     [t],
   );
 
-  const {
+  const logoutMutation = useMutation({
-    data,
-    isPending,
-    mutateAsync: logout,
-  } = useMutation({
     mutationKey: ['adminLogout'],
     mutationFn: async () => {
       await adminService.logout();
@@ -71,11 +66,12 @@ const AdminLayout = () => {
       authorizationUtil.removeAll();
       navigate(Routes.Admin);
     },
+    retry: false,
   });
 
   return (
     <main className="w-screen h-screen flex flex-row px-6 pt-12 pb-6 dark:*:focus-visible:ring-white">
-      <aside className="w-[28rem] mr-6 flex flex-col gap-6">
+      <aside className="w-72 mr-6 flex flex-col gap-6">
         <div className="flex items-center mb-6">
           <img className="size-8 mr-5" src="/logo.svg" alt="logo" />
           <span className="text-xl font-bold">{t('admin.title')}</span>
@@ -87,17 +83,18 @@ const AdminLayout = () => {
               <li key={it.path}>
                 <NavLink
                   to={it.path}
-                  className={cn(
+                  className={({ isActive }) =>
+                    cn(
                       'px-4 py-3 rounded-lg',
                       'text-base w-full flex items-center justify-start text-text-secondary',
                       'hover:bg-bg-card focus:bg-bg-card focus-visible:bg-bg-card',
                       'hover:text-text-primary focus:text-text-primary focus-visible:text-text-primary',
                       'active:text-text-primary',
                       {
-                      'bg-bg-card text-text-primary':
+                        'bg-bg-card text-text-primary': isActive,
-                        it.path && pathname.startsWith(it.path),
                       },
-                  )}
+                    )
+                  }
                 >
                   {it.icon}
                   <span className="ml-3">{it.name}</span>
@@ -116,14 +113,14 @@ const AdminLayout = () => {
             size="lg"
             variant="transparent"
             className="block w-full dark:border-border-button"
-            onClick={() => logout()}
+            onClick={() => logoutMutation.mutate()}
           >
             {t('header.logout')}
           </Button>
         </div>
       </aside>
 
-      <section className="w-full h-full">
+      <section className="flex-1 h-full">
         <Outlet />
       </section>
     </main>

web/src/pages/admin/user-detail.tsx

@@ -307,6 +307,7 @@ function AdminUserDetail() {
       };
     },
     enabled: !!id,
+    retry: false,
   });
 
   return (

web/src/pages/admin/users.tsx

@@ -126,11 +126,14 @@ function AdminUserManagement() {
   const { data: roleList } = useQuery({
     queryKey: ['admin/listRoles'],
     queryFn: async () => (await listRoles()).data.data.roles,
+    enabled: IS_ENTERPRISE,
+    retry: false,
   });
 
   const { data: usersList, isPending } = useQuery({
     queryKey: ['admin/listUsers'],
     queryFn: async () => (await listUsers()).data.data,
+    retry: false,
   });
 
   // Delete user mutation
@@ -142,17 +145,19 @@ function AdminUserManagement() {
       setDeleteModalOpen(false);
       setUserToMakeAction(null);
     },
+    retry: false,
   });
 
   // Change password mutation
   const changePasswordMutation = useMutation({
     mutationFn: ({ email, password }: { email: string; password: string }) =>
-      updateUserPassword(email, password),
+      updateUserPassword(email, rsaPsw(password) as string),
     onSuccess: () => {
       // message.success(t('admin.passwordChangedSuccessfully'));
       setPasswordModalOpen(false);
       setUserToMakeAction(null);
     },
+    retry: false,
   });
 
   // Update user role mutation
@@ -162,6 +167,7 @@ function AdminUserManagement() {
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['admin/listUsers'] });
     },
+    retry: false,
   });
 
   // Create user mutation
@@ -175,7 +181,7 @@ function AdminUserManagement() {
       password: string;
       role?: string;
     }) => {
-      await createUser(email, password);
+      await createUser(email, rsaPsw(password) as string);
 
       if (IS_ENTERPRISE && role) {
         await updateUserRoleMutation.mutateAsync({ email, role });
@@ -187,6 +193,7 @@ function AdminUserManagement() {
       setCreateUserModalOpen(false);
       createUserForm.form.reset();
     },
+    retry: false,
   });
 
   // Update user status mutation
@@ -196,6 +203,7 @@ function AdminUserManagement() {
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['admin/listUsers'] });
     },
+    retry: false,
   });
 
   const columnDefs = useMemo(
@@ -573,7 +581,8 @@ function AdminUserManagement() {
               className="px-4 h-10"
               variant="destructive"
               onClick={() =>
-                deleteUserMutation.mutate(userToMakeAction?.email || '')
+                userToMakeAction &&
+                deleteUserMutation.mutate(userToMakeAction?.email)
               }
               disabled={deleteUserMutation.isPending}
               loading={deleteUserMutation.isPending}
@@ -586,7 +595,14 @@ function AdminUserManagement() {
 
       {/* Change Password Modal */}
       <Dialog open={passwordModalOpen} onOpenChange={setPasswordModalOpen}>
-        <DialogContent className="p-0 border-border-button">
+        <DialogContent
+          className="p-0 border-border-button"
+          onAnimationEnd={() => {
+            if (!passwordModalOpen) {
+              changePasswordForm.form.reset();
+            }
+          }}
+        >
           <DialogHeader className="p-6 border-b border-border-button">
             <DialogTitle>{t('admin.changePassword')}</DialogTitle>
           </DialogHeader>
@@ -599,7 +615,7 @@ function AdminUserManagement() {
                 if (userToMakeAction) {
                   changePasswordMutation.mutate({
                     email: userToMakeAction.email,
-                    password: rsaPsw(newPassword) as string,
+                    password: newPassword,
                   });
                 }
               }}
@@ -649,12 +665,7 @@ function AdminUserManagement() {
           <section className="px-12 py-4">
             <createUserForm.FormComponent
               id={createUserForm.id}
-              onSubmit={({ email, password }) => {
+              onSubmit={createUserMutation.mutate}
-                createUserMutation.mutate({
-                  email: email,
-                  password: rsaPsw(password) as string,
-                });
-              }}
             />
           </section>
 

web/src/services/admin-service.ts

@@ -1,6 +1,6 @@
 import { message, notification } from 'antd';
 import axios from 'axios';
-import { Navigate } from 'umi';
+import { history } from 'umi';
 
 import { Authorization } from '@/constants/authorization';
 import i18n from '@/locales/config';
@@ -48,7 +48,7 @@ request.interceptors.response.use(
       });
 
       authorizationUtil.removeAll();
-      Navigate({ to: Routes.Admin });
+      history.push(Routes.Admin);
     } else if (data?.code && data.code !== 0) {
       notification.error({
         message: `${i18n.t('message.hint')}: ${data?.code}`,
@@ -70,15 +70,16 @@ request.interceptors.response.use(
       });
     } else if (data?.code === 100) {
       message.error(data?.message);
-    } else if (data?.code === 401) {
+    } else if (response.status === 401 || data?.code === 401) {
       notification.error({
-        message: data?.message,
+        message: data?.message || response.statusText,
-        description: data?.message,
+        description:
+          data?.message || RetcodeMessage[response?.status as ResultCode],
         duration: 3,
       });
 
       authorizationUtil.removeAll();
-      Navigate({ to: Routes.Admin });
+      history.push(Routes.Admin);
     } else if (data?.code && data.code !== 0) {
       notification.error({
         message: `${i18n.t('message.hint')}: ${data?.code}`,
@@ -93,17 +94,9 @@ request.interceptors.response.use(
       });
     } else if (response.status === 413 || response?.status === 504) {
       message.error(RetcodeMessage[response?.status as ResultCode]);
-    } else if (response.status === 401) {
-      notification.error({
-        message: response.data.message,
-        description: response.data.message,
-        duration: 3,
-      });
-      authorizationUtil.removeAll();
-      window.location.href = location.origin + '/admin';
     }
 
-    return error;
+    throw error;
   },
 );
 
@@ -112,7 +105,7 @@ const {
   adminLogout,
   adminListUsers,
   adminCreateUser,
-  adminGetUserDetails: adminShowUserDetails,
+  adminGetUserDetails,
   adminUpdateUserStatus,
   adminUpdateUserPassword,
   adminDeleteUser,
@@ -260,11 +253,11 @@ export namespace AdminService {
     update_date: string;
   };
 
-  export type AssignRolePermissionInput = {
+  export type AssignRolePermissionsInput = Record<
-    permissions: Record<string, Partial<PermissionData>>;
+    string,
-  };
+    Partial<PermissionData>
-
+  >;
-  export type RevokeRolePermissionInput = AssignRolePermissionInput;
+  export type RevokeRolePermissionInput = AssignRolePermissionsInput;
 
   export type UserDetailWithPermission = {
     user: {
@@ -293,7 +286,7 @@ export const createUser = (email: string, password: string) =>
   });
 export const getUserDetails = (email: string) =>
   request.get<ResponseData<[AdminService.UserDetail]>>(
-    adminShowUserDetails(email),
+    adminGetUserDetails(email),
   );
 export const listUserDatasets = (email: string) =>
   request.get<ResponseData<AdminService.ListUserDatasetItem[]>>(
@@ -317,7 +310,10 @@ export const showServiceDetails = (serviceId: number) =>
     adminShowServiceDetails(String(serviceId)),
   );
 
-export const createRole = (params: { roleName: string; description: string }) =>
+export const createRole = (params: {
+  roleName: string;
+  description?: string;
+}) =>
   request.post<ResponseData<AdminService.RoleDetail>>(adminCreateRole, params);
 export const updateRoleDescription = (role: string, description: string) =>
   request.put<ResponseData<AdminService.RoleDetail>>(
@@ -343,15 +339,17 @@ export const getRolePermissions = (role: string) =>
   );
 export const assignRolePermissions = (
   role: string,
-  params: AdminService.AssignRolePermissionInput,
+  permissions: Partial<AdminService.AssignRolePermissionsInput>,
 ) =>
-  request.post<ResponseData<never>>(adminAssignRolePermissions(role), params);
+  request.post<ResponseData<never>>(adminAssignRolePermissions(role), {
+    new_permissions: permissions,
+  });
 export const revokeRolePermissions = (
   role: string,
-  params: AdminService.RevokeRolePermissionInput,
+  permissions: Partial<AdminService.RevokeRolePermissionInput>,
 ) =>
   request.delete<ResponseData<never>>(adminRevokeRolePermissions(role), {
-    data: params,
+    data: { revoke_permissions: permissions },
   });
 
 export const updateUserRole = (username: string, role: string) =>
@@ -365,12 +363,23 @@ export const getUserPermissions = (username: string) =>
 export const listResources = () =>
   request.get<ResponseData<AdminService.ResourceType>>(adminListResources);
 
+export const whitelistImportFromExcel = (file: File) => {
+  const fd = new FormData();
+
+  fd.append('file', file);
+
+  return request.post<ResponseData<never>>(
+    '/api/v1/admin/whitelist/import',
+    fd,
+  );
+};
+
 export default {
   login,
   logout,
   listUsers,
   createUser,
-  showUserDetails: getUserDetails,
+  getUserDetails,
   updateUserStatus,
   updateUserPassword,
   deleteUser,