MountsContainer: add source, target, readOnly, and userMountable columns

This commit is contained in:
Matthew Penner 2021-01-06 09:23:17 -07:00
parent 727cf8d753
commit 915666d827

View file

@ -1,3 +1,4 @@
import CopyOnClick from '@/components/elements/CopyOnClick';
import React, { useContext, useEffect, useState } from 'react'; import React, { useContext, useEffect, useState } from 'react';
import getMounts, { Context as MountsContext } from '@/api/admin/mounts/getMounts'; import getMounts, { Context as MountsContext } from '@/api/admin/mounts/getMounts';
import FlashMessageRender from '@/components/FlashMessageRender'; import FlashMessageRender from '@/components/FlashMessageRender';
@ -91,6 +92,10 @@ const MountsContainer = () => {
<TableHead> <TableHead>
<TableHeader name={'ID'}/> <TableHeader name={'ID'}/>
<TableHeader name={'Name'}/> <TableHeader name={'Name'}/>
<TableHeader name={'Source Path'}/>
<TableHeader name={'Target Path'}/>
<th css={tw`px-6 py-2`}/>
<th css={tw`px-6 py-2`}/>
</TableHead> </TableHead>
<TableBody> <TableBody>
@ -101,12 +106,53 @@ const MountsContainer = () => {
<RowCheckbox id={mount.id}/> <RowCheckbox id={mount.id}/>
</td> </td>
<td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>{mount.id}</td> <td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>
<CopyOnClick text={mount.id.toString()}>
<code css={tw`font-mono bg-neutral-900 rounded py-1 px-2`}>{mount.id}</code>
</CopyOnClick>
</td>
<td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}> <td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>
<NavLink to={`${match.url}/${mount.id}`} css={tw`text-primary-400 hover:text-primary-300`}> <NavLink to={`${match.url}/${mount.id}`} css={tw`text-primary-400 hover:text-primary-300`}>
{mount.name} {mount.name}
</NavLink> </NavLink>
</td> </td>
<td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>
<CopyOnClick text={mount.source.toString()}>
<code css={tw`font-mono bg-neutral-900 rounded py-1 px-2`}>{mount.source}</code>
</CopyOnClick>
</td>
<td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>
<CopyOnClick text={mount.target.toString()}>
<code css={tw`font-mono bg-neutral-900 rounded py-1 px-2`}>{mount.target}</code>
</CopyOnClick>
</td>
<td css={tw`px-6 whitespace-nowrap`}>
{ mount.readOnly ?
<span css={tw`px-2 inline-flex text-xs leading-5 font-medium rounded-full bg-green-100 text-green-800`}>
Read Only
</span>
:
<span css={tw`px-2 inline-flex text-xs leading-5 font-medium rounded-full bg-yellow-200 text-yellow-800`}>
Writable
</span>
}
</td>
<td css={tw`px-6 whitespace-nowrap`}>
{ mount.userMountable ?
<span css={tw`px-2 inline-flex text-xs leading-5 font-medium rounded-full bg-green-100 text-green-800`}>
Mountable
</span>
:
<span css={tw`px-2 inline-flex text-xs leading-5 font-medium rounded-full bg-yellow-200 text-yellow-800`}>
Admin Only
</span>
}
</td>
</TableRow> </TableRow>
)) ))
} }