Skip to content

Commit

Permalink
Merge pull request #169 from PROCEED-Labs/ms2/unify-styles
Browse files Browse the repository at this point in the history
Ms2/unify styles
  • Loading branch information
jjoderis authored Nov 30, 2023
2 parents 183fbca + a80a95a commit 089f0bf
Show file tree
Hide file tree
Showing 23 changed files with 603 additions and 596 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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];

Expand Down Expand Up @@ -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>
),
Expand Down Expand Up @@ -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={
Expand Down
57 changes: 35 additions & 22 deletions src/management-system-v2/app/(dashboard)/iam/roles/role-page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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();
Expand All @@ -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)),
Expand Down Expand Up @@ -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',
}}
/>
),
},
];

Expand All @@ -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
}
Expand All @@ -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) => {
Expand All @@ -131,7 +145,6 @@ const RolesPage: FC = () => {
}}
rowKey="id"
loading={isLoading || deletingRole}
size="middle"
/>
</Content>
);
Expand Down
56 changes: 30 additions & 26 deletions src/management-system-v2/app/(dashboard)/iam/users/users-page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand All @@ -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 />}
/>
Expand Down
9 changes: 7 additions & 2 deletions src/management-system-v2/app/(dashboard)/profile/page.tsx
Original file line number Diff line number Diff line change
@@ -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>
),
);
Loading

0 comments on commit 089f0bf

Please sign in to comment.