Ms2/unify styles

src/management-system-v2/app/(dashboard)/iam/roles/[roleId]/role-members.tsx

@@ -10,7 +10,8 @@ import {
   usePostAsset,
 } from '@/lib/fetch-data';
 import UserList, { UserListProps } from '@/components/user-list';
-import { Button, Modal, Popconfirm, Tooltip } from 'antd';
+import { Button, Modal, Tooltip } from 'antd';
+import ConfirmationButton from '@/components/confirmation-button';
 
 type Role = ApiData<'/roles', 'get'>[number];
 
@@ -60,15 +61,18 @@ const AddUserModal: FC<{ role: Role; open: boolean; close: () => void }> = ({
       <UserList
         users={usersNotInRole}
         loading={isLoadingUsers || isLoadingMutation}
-        columns={(clearSelected) => [
+        columns={(clearSelected, hoveredId, selectedRowKeys) => [
           {
             dataIndex: 'id',
-            render: (_, user) => (
+            render: (id, user) => (
               <Tooltip placement="top" title="Add to role">
                 <Button
                   icon={<PlusOutlined />}
                   type="text"
                   onClick={() => addUsers([user], clearSelected)}
+                  style={{
+                    opacity: hoveredId === id && selectedRowKeys.length === 0 ? 1 : 0,
+                  }}
                 />
               </Tooltip>
             ),
@@ -112,34 +116,39 @@ const RoleMembers: FC<{ role: Role; isLoadingRole?: boolean }> = ({ role, isLoad
       <UserList
         users={role.members.map((member) => ({ ...member, id: member.userId }))}
         loading={isLoadingDelete || isLoadingRole}
-        columns={(clearSelected) => [
+        columns={(clearSelected, hoveredId, selectedRowKeys) => [
           {
             dataIndex: 'id',
             key: 'remove',
             title: '',
             width: 100,
             render: (id: string) => (
-              <Tooltip placement="top" title="Remove member">
-                <Popconfirm
-                  title="Remove member"
+              <Tooltip placement="top" title="Remove Member">
+                <ConfirmationButton
+                  title="Remove Member"
                   description="Are you sure you want to remove this member?"
                   onConfirm={() => deleteMembers([id], clearSelected)}
-                >
-                  <Button icon={<DeleteOutlined />} type="text" />
-                </Popconfirm>
+                  buttonProps={{
+                    style: { opacity: hoveredId == id && selectedRowKeys.length === 0 ? 1 : 0 },
+                    icon: <DeleteOutlined />,
+                    type: 'text',
+                  }}
+                />
               </Tooltip>
             ),
           },
         ]}
         selectedRowActions={(ids, clearIds) => (
-          <Tooltip placement="top" title="Remove members">
-            <Popconfirm
-              title="Remove member"
-              description="Are you sure you want to remove this member?"
+          <Tooltip placement="top" title="Remove Members">
+            <ConfirmationButton
+              title="Remove Members"
+              description="Are you sure you want to remove the selected members?"
               onConfirm={() => deleteMembers(ids, clearIds)}
-            >
-              <Button icon={<DeleteOutlined />} type="text" />
-            </Popconfirm>
+              buttonProps={{
+                icon: <DeleteOutlined />,
+                type: 'text',
+              }}
+            />
           </Tooltip>
         )}
         searchBarRightNode={

src/management-system-v2/app/(dashboard)/iam/roles/role-page.tsx

@@ -2,7 +2,7 @@
 
 import { FC, useState } from 'react';
 import { DeleteOutlined } from '@ant-design/icons';
-import { Tooltip, Space, Button, Result, Table, Popconfirm, App } from 'antd';
+import { Space, Button, Result, Table, App } from 'antd';
 import { useGetAsset, useDeleteAsset } from '@/lib/fetch-data';
 import { CloseOutlined } from '@ant-design/icons';
 import Content from '@/components/content';
@@ -11,8 +11,8 @@ import useFuzySearch from '@/lib/useFuzySearch';
 import Link from 'next/link';
 import { toCaslResource } from '@/lib/ability/caslAbility';
 import Bar from '@/components/bar';
-import { AuthCan } from '@/lib/clientAuthComponents';
 import { useAbilityStore } from '@/lib/abilityStore';
+import ConfirmationButton from '@/components/confirmation-button';
 
 const RolesPage: FC = () => {
   const { message: messageApi } = App.useApp();
@@ -34,6 +34,7 @@ const RolesPage: FC = () => {
 
   const [selectedRowKeys, setSelectedRowKeys] = useState<string[]>([]);
   const [selectedRow, setSelectedRows] = useState<FilteredRole[]>([]);
+  const [hoveredRow, setHoveredRow] = useState<string | null>(null);
 
   const cannotDeleteSelected = selectedRow.some(
     (role) => !ability.can('delete', toCaslResource('Role', role)),
@@ -67,20 +68,26 @@ const RolesPage: FC = () => {
       key: 'tooltip',
       title: '',
       width: 100,
-      render: (id: string, role: FilteredRole) =>
-        selectedRowKeys.length === 0 ? (
-          <AuthCan action="delete" resource={toCaslResource('Role', role)}>
-            <Tooltip placement="top" title={'Delete'}>
-              <Popconfirm
-                title="Delete Role"
-                description="Are you sure you want to delete this role?"
-                onConfirm={() => deleteRoles([id])}
-              >
-                <Button icon={<DeleteOutlined />} type="text" />
-              </Popconfirm>
-            </Tooltip>
-          </AuthCan>
-        ) : null,
+      render: (id: string, role: FilteredRole) => (
+        <ConfirmationButton
+          title="Delete Role"
+          description="Are you sure you want to delete this role?"
+          onConfirm={() => deleteRoles([id])}
+          buttonProps={{
+            disabled: !ability.can('delete', toCaslResource('Role', role)),
+            style: {
+              opacity: selectedRowKeys.length === 0 && id === hoveredRow ? 1 : 0,
+              // Otherwise the button stretches the row
+              position: 'absolute',
+              margin: 'auto',
+              top: '0',
+              bottom: '0',
+            },
+            icon: <DeleteOutlined />,
+            type: 'text',
+          }}
+        />
+      ),
     },
   ];
 
@@ -102,13 +109,16 @@ const RolesPage: FC = () => {
             <Space size={20}>
               <Button type="text" icon={<CloseOutlined />} onClick={() => setSelectedRowKeys([])} />
               <span>{selectedRowKeys.length} selected:</span>
-              <Popconfirm
+              <ConfirmationButton
                 title="Delete Roles"
                 description="Are you sure you want to delete the selected roles?"
                 onConfirm={() => deleteRoles(selectedRowKeys)}
-              >
-                <Button type="text" icon={<DeleteOutlined />} disabled={cannotDeleteSelected} />
-              </Popconfirm>
+                buttonProps={{
+                  icon: <DeleteOutlined />,
+                  disabled: cannotDeleteSelected,
+                  type: 'text',
+                }}
+              />
             </Space>
           ) : null
         }
@@ -120,8 +130,12 @@ const RolesPage: FC = () => {
       />
 
       <Table<FilteredRole>
-        dataSource={filteredRoles}
         columns={columns}
+        dataSource={filteredRoles}
+        onRow={({ id }) => ({
+          onMouseEnter: () => setHoveredRow(id),
+          onMouseLeave: () => setHoveredRow(null),
+        })}
         rowSelection={{
           selectedRowKeys,
           onChange: (selectedRowKeys, selectedRows) => {
@@ -131,7 +145,6 @@ const RolesPage: FC = () => {
         }}
         rowKey="id"
         loading={isLoading || deletingRole}
-        size="middle"
       />
     </Content>
   );

src/management-system-v2/app/(dashboard)/iam/users/users-page.tsx

@@ -2,12 +2,13 @@
 
 import { FC } from 'react';
 import { DeleteOutlined } from '@ant-design/icons';
-import { Tooltip, Button, Popconfirm, App } from 'antd';
+import { Tooltip, App } from 'antd';
 import { useGetAsset, useDeleteAsset } from '@/lib/fetch-data';
 import Content from '@/components/content';
 import HeaderActions from './header-actions';
 import UserList from '@/components/user-list';
 import { useQueryClient } from '@tanstack/react-query';
+import ConfirmationButton from '@/components/confirmation-button';
 
 const UsersPage: FC = () => {
   const { message: messageApi } = App.useApp();
@@ -25,41 +26,44 @@ const UsersPage: FC = () => {
     await Promise.allSettled(promises);
   }
 
-  const columns = [
-    {
-      dataIndex: 'id',
-      key: 'tooltip',
-      title: '',
-      width: 100,
-      render: (id: string) => (
-        <Tooltip placement="top" title="Delete">
-          <Popconfirm
-            title="Delete User"
-            description="Are you sure you want to delete this user?"
-            onConfirm={() => deleteUsers([id])}
-          >
-            <Button icon={<DeleteOutlined />} type="text" />
-          </Popconfirm>
-        </Tooltip>
-      ),
-    },
-  ];
-
   return (
     <Content title="Identity and Access Management">
       <UserList
         users={data || []}
         error={!!error}
-        columns={columns}
+        columns={(clearSelected, hoveredId, selectedRowKeys) => [
+          {
+            dataIndex: 'id',
+            key: 'tooltip',
+            title: '',
+            width: 100,
+            render: (id: string) => (
+              <Tooltip placement="top" title="Delete">
+                <ConfirmationButton
+                  title="Delete User"
+                  description="Are you sure you want to delete this user?"
+                  onConfirm={() => deleteUsers([id], clearSelected)}
+                  buttonProps={{
+                    icon: <DeleteOutlined />,
+                    type: 'text',
+                    style: { opacity: hoveredId === id && selectedRowKeys.length === 0 ? 1 : 0 },
+                  }}
+                />
+              </Tooltip>
+            ),
+          },
+        ]}
         loading={deletingUser || isLoading}
         selectedRowActions={(ids, clearIds) => (
-          <Popconfirm
+          <ConfirmationButton
             title="Delete Users"
             description="Are you sure you want to delete the selected users?"
             onConfirm={() => deleteUsers(ids, clearIds)}
-          >
-            <Button type="text" icon={<DeleteOutlined />} />
-          </Popconfirm>
+            buttonProps={{
+              type: 'text',
+              icon: <DeleteOutlined />,
+            }}
+          />
         )}
         searchBarRightNode={<HeaderActions />}
       />

src/management-system-v2/app/(dashboard)/profile/page.tsx

@@ -1,11 +1,16 @@
-import UserProfile from '@/components/userProfile';
 import Auth from '@/lib/serverAuthComponents';
+import UserProfile from './user-profile';
+import Content from '@/components/content';
 
 export default Auth(
   {
     action: 'view',
     resource: 'User',
     fallbackRedirect: '/',
   },
-  UserProfile,
+  () => (
+    <Content>
+      <UserProfile />
+    </Content>
+  ),
 );