Skip to content

Commit

Permalink
fix: minor ui improvements (#4088)
Browse files Browse the repository at this point in the history 
* fix: wip

* fix: table width and pagination

* fix: remove unused import

* fix: lint
  • Loading branch information
@hoyyeva
hoyyeva authored Jan 25, 2023
1 parent af7a6e6 commit 44471ad
Show file tree
Hide file tree
Showing 3 changed files with 77 additions and 72 deletions.
65 changes: 35 additions & 30 deletions ui/components/table.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ export default function Table({
columns,
data,
href,
type = '',
empty = 'No data',
count = data?.length,
allowDelete = false,
Expand Down Expand Up @@ -105,10 +106,7 @@ export default function Table({
return (
<tr key={headerGroup.id}>
{allowDelete && data?.length > 0 && (
<th
scope='col'
className='relative w-12 px-6 sm:w-16 sm:px-8'
>
<th scope='col' className='relative w-5 px-6'>
<input
type='checkbox'
className='left-4 h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 disabled:cursor-not-allowed disabled:opacity-30 disabled:focus:ring-0 sm:left-6'
Expand All @@ -123,7 +121,7 @@ export default function Table({
)}
{headerGroup.headers.map(header => (
<th
className='w-auto py-2 px-5 text-left font-medium first:max-w-[40%]'
className='py-2 px-5 text-left font-medium'
key={header.id}
>
{header.isPlaceholder
Expand All @@ -149,7 +147,7 @@ export default function Table({
href && href(row)
? 'cursor-pointer hover:bg-gray-50/50'
: ''
}`}
} ${type === 'detail' ? 'h-[60px]' : ''}`}
key={row.id}
>
{allowDelete && data?.length > 0 && (
Expand All @@ -172,32 +170,39 @@ export default function Table({
/>
</th>
)}
{row.getVisibleCells().map(cell => (
<td
className={`border-gray-100 text-sm ${
href && href(row) ? '' : 'px-5 py-2'
}`}
key={cell.id}
>
{href && href(row) ? (
<Link
href={href(row)}
tabIndex='-1'
className='block px-5 py-2'
>
{flexRender(
{row.getVisibleCells().map(cell => {
return (
<td
className={`border-gray-100 text-sm ${
href && href(row) ? '' : 'px-5 py-2'
}`}
key={cell.id}
{...{
style: {
minWidth: cell.column.getSize(),
},
}}
>
{href && href(row) ? (
<Link
href={href(row)}
tabIndex='-1'
className='block px-5 py-2'
>
{flexRender(
cell.column.columnDef.cell,
cell.getContext()
)}
</Link>
) : (
flexRender(
cell.column.columnDef.cell,
cell.getContext()
)}
</Link>
) : (
flexRender(
cell.column.columnDef.cell,
cell.getContext()
)
)}
</td>
))}
)
)}
</td>
)
})}
</tr>
)
})}
Expand Down
60 changes: 36 additions & 24 deletions ui/pages/access-control/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,12 +78,6 @@ function CreateAccessDialog({ setOpen, onCreated = () => {} }) {
setRoles(sortByRole(selectedResource?.roles))
}, [selectedResource])

useEffect(() => {
if (roles.length > 0) {
setSelectedRoles([roles[0]])
}
}, [roles])

async function onSubmit(e) {
e.preventDefault()
try {
Expand Down Expand Up @@ -301,7 +295,7 @@ function CreateAccessDialog({ setOpen, onCreated = () => {} }) {
multiple
>
<div className='relative'>
<Listbox.Button className='relative w-full cursor-default rounded-md border border-gray-300 bg-white py-2 pl-3 pr-8 text-left text-xs shadow-sm hover:cursor-pointer hover:bg-gray-100 focus:outline-none'>
<Listbox.Button className='relative w-full cursor-default rounded-md border border-gray-300 bg-white py-2 pl-3 pr-8 text-left text-xs shadow-sm hover:cursor-pointer hover:bg-gray-100 focus:border-blue-500 focus:ring-blue-500'>
<div className='flex space-x-1 truncate'>
<span className='pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2'>
<ChevronDownIcon
Expand Down Expand Up @@ -377,9 +371,6 @@ function CreateAccessDialog({ setOpen, onCreated = () => {} }) {
value={selectedRoles}
onChange={v => {
setError({})
if (selectedRoles.length === 1 && v.length === 0) {
return
}

const add = v.filter(x => !selectedRoles.includes(x))
const remove = selectedRoles.filter(x => !v.includes(x))
Expand All @@ -395,7 +386,7 @@ function CreateAccessDialog({ setOpen, onCreated = () => {} }) {
multiple
>
<div className='relative'>
<Listbox.Button className='relative w-full cursor-default rounded-md border border-gray-300 bg-white py-2 pl-3 pr-8 text-left text-xs shadow-sm hover:cursor-pointer hover:bg-gray-100 focus:outline-none'>
<Listbox.Button className='relative w-full cursor-default rounded-md border border-gray-300 bg-white py-2 pl-3 pr-8 text-left text-xs shadow-sm hover:cursor-pointer hover:bg-gray-100 focus:border-blue-500 focus:ring-blue-50'>
<div className='flex space-x-1 truncate'>
<span className='pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2'>
<ChevronDownIcon
Expand All @@ -404,7 +395,9 @@ function CreateAccessDialog({ setOpen, onCreated = () => {} }) {
/>
</span>
<span className='text-gray-700'>
{selectedRoles.join(', ')}
{selectedRoles.length > 0
? selectedRoles.join(', ')
: 'Select roles'}
</span>
</div>
</Listbox.Button>
Expand Down Expand Up @@ -469,7 +462,9 @@ function CreateAccessDialog({ setOpen, onCreated = () => {} }) {
</button>
<button
type='submit'
disabled={!selected || !selectedResource}
disabled={
!selected || !selectedResource || selectedRoles.length === 0
}
className='inline-flex items-center rounded-md border border-transparent bg-black px-4 py-2 text-xs font-medium text-white shadow-sm hover:bg-gray-800 disabled:cursor-not-allowed disabled:opacity-30'
>
Add
Expand All @@ -482,7 +477,12 @@ function CreateAccessDialog({ setOpen, onCreated = () => {} }) {

export default function AccessControl() {
const router = useRouter()
const page = router.query.p === undefined ? 1 : router.query.p
const page =
router.query.p === undefined ||
isNaN(Number(router.query.p)) ||
Number(router.query.p) < 1
? 1
: router.query.p
const limit = 10

const { user, isAdmin } = useUser()
Expand Down Expand Up @@ -516,12 +516,21 @@ export default function AccessControl() {
allGrants
?.map(g => {
if (newCreatedGrants.length > 0) {
const result = newCreatedGrants.filter(
ng =>
const result = newCreatedGrants.filter(ng => {
if (g.group) {
return (
ng.privilege === g.privilege &&
ng.resource === g.resource &&
ng.group === g.group
)
}

return (
ng.privilege === g.privilege &&
ng.resource === g.resource &&
(ng.group === g.group || ng.user === g.user)
)
ng.user === g.user
)
})

return { ...g, newCreate: result.length > 0 }
}
Expand Down Expand Up @@ -549,8 +558,9 @@ export default function AccessControl() {

if (isAdmin) {
columns.push({
header: <span>User / group </span>,
header: <span>User / Group </span>,
id: 'identity',
maxSize: 60,
accessorKey: 'identityId',
cell: function Cell(info) {
const name =
Expand All @@ -560,7 +570,7 @@ export default function AccessControl() {
return (
<div className='flex flex-col'>
<div className='text-sm font-medium text-gray-700'>{name}</div>
<div className='text-2xs text-gray-500'>
<div className='text-2xs capitalize text-gray-500'>
{info.row.original.type}
</div>
</div>
Expand Down Expand Up @@ -646,9 +656,11 @@ export default function AccessControl() {
onDelete={() => {
setOpenSelectedDeleteModal(true)
}}
type='detail'
columns={[
{
id: 'infrastructure',
minSize: 250,
cell: function Cell(info) {
const { kind, connected, connection } = destinations?.find(
d => d.name === info.getValue().split('.')[0]
Expand All @@ -674,7 +686,7 @@ export default function AccessControl() {
<AdjustmentsHorizontalIcon className='h-4 text-blue-500' />
)}
{kind === 'ssh' && (
<CommandLineIcon className='h-5 text-black' />
<CommandLineIcon className='h-[18px] text-black' />
)}
{kind === 'kubernetes' && (
<img
Expand Down Expand Up @@ -709,11 +721,11 @@ export default function AccessControl() {
},
{
cell: info => (
<div className='hidden sm:table-cell'>
<div className='hidden lg:table-cell'>
{info.getValue() ? dayjs(info.getValue()).fromNow() : '-'}
</div>
),
header: () => <span>Created</span>,
header: () => <span className='hidden lg:table-cell'>Created</span>,
accessorKey: 'created',
},
{
Expand All @@ -731,7 +743,7 @@ export default function AccessControl() {
className='flex items-center text-xs font-medium text-red-500 hover:text-red-500/50'
>
<TrashIcon className='mr-2 h-3.5 w-3.5' />
<span className='hidden sm:block'>Remove</span>
<span>Remove</span>
</button>
</div>
)
Expand Down
24 changes: 6 additions & 18 deletions ui/pages/destinations/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,24 +85,12 @@ export default function Destinations() {
<div className='text-sm font-medium text-gray-700'>
{info.getValue()}
</div>
{info.row.original.kind !== 'ssh' ? (
<div className='text-2xs text-gray-500'>
{info.row.original.resources?.length > 0 && (
<span>
{info.row.original.resources?.length}&nbsp;
{info.row.original.resources?.length === 1
? 'namespace'
: 'namespaces'}
</span>
)}
</div>
) : (
<div className='text-2xs text-gray-500'>
{info.row.original.connection.url === ''
? '-'
: info.row.original.connection.url}
</div>
)}

<div className='text-2xs text-gray-500'>
{info.row.original.connection.url === ''
? '-'
: info.row.original.connection.url}
</div>
</div>
</div>
),
Expand Down

0 comments on commit 44471ad

Please sign in to comment.