Skip to content

Commit

Permalink
fix: add empty state for service accounts
Browse files Browse the repository at this point in the history
  • Loading branch information
@rohan-chaturvedi
rohan-chaturvedi committed Nov 7, 2024
1 parent 8615bcf commit 9b62a9a
Show file tree
Hide file tree
Showing 2 changed files with 114 additions and 82 deletions.
98 changes: 57 additions & 41 deletions frontend/app/[team]/access/service-accounts/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,57 +40,73 @@ export default function ServiceAccounts({ params }: { params: { team: string } }
<p className="text-neutral-500">Manage service accounts.</p>
</div>
<div className="space-y-4">
{userCanCreateSA && (
{userCanCreateSA && data?.serviceAccounts.length > 0 && (
<div className="flex justify-end">
<CreateServiceAccountDialog />
</div>
)}

{userCanReadSA ? (
<table className="table-auto min-w-full divide-y divide-zinc-500/40 ">
<thead>
<tr>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Account name
</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Role
</th>
data?.serviceAccounts.length === 0 ? (
<EmptyState
title="No Service Accounts"
subtitle="Click the button below to create a new Service Account"
graphic={
<div className="text-neutral-300 dark:text-neutral-700 text-7xl text-center">
<FaRobot />
</div>
}
>
<>
<CreateServiceAccountDialog />
</>
</EmptyState>
) : (
<table className="table-auto min-w-full divide-y divide-zinc-500/40 ">
<thead>
<tr>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Account name
</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Role
</th>

<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Created
</th>
</tr>
</thead>
<tbody className="divide-y divide-zinc-500/20">
{data?.serviceAccounts.map((account: ServiceAccountType) => (
<tr key={account.id} className="group">
<td className="flex items-center gap-2 py-4 font-semibold">
<div className="rounded-full flex items-center bg-neutral-500/40 justify-center size-10">
<FaRobot className="shrink-0 text-zinc-900 dark:text-zinc-100 text-xl" />
</div>
{account.name}
</td>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Created
</th>
</tr>
</thead>
<tbody className="divide-y divide-zinc-500/20">
{data?.serviceAccounts.map((account: ServiceAccountType) => (
<tr key={account.id} className="group">
<td className="flex items-center gap-2 py-4 font-semibold">
<div className="rounded-full flex items-center bg-neutral-500/40 justify-center size-10">
<FaRobot className="shrink-0 text-zinc-900 dark:text-zinc-100 text-xl" />
</div>
{account.name}
</td>

<td className="px-6 py-4">
<ServiceAccountRoleSelector account={account} displayOnly={true} />
</td>
<td className="px-6 py-4">
<ServiceAccountRoleSelector account={account} displayOnly={true} />
</td>

<td className="px-6 py-4">
{relativeTimeFromDates(new Date(account.createdAt))}
</td>
<td className="px-6 py-4">
{relativeTimeFromDates(new Date(account.createdAt))}
</td>

<td className="px-6 py-4">
<Link href={`/${params.team}/access/service-accounts/${account.id}`}>
<Button variant="secondary">
Manage <FaChevronRight />
</Button>
</Link>
</td>
</tr>
))}
</tbody>
</table>
<td className="px-6 py-4">
<Link href={`/${params.team}/access/service-accounts/${account.id}`}>
<Button variant="secondary">
Manage <FaChevronRight />
</Button>
</Link>
</td>
</tr>
))}
</tbody>
</table>
)
) : (
<EmptyState
title="Access restricted"
Expand Down
98 changes: 57 additions & 41 deletions frontend/app/[team]/apps/[app]/access/service-accounts/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -863,57 +863,73 @@ export default function ServiceAccounts({ params }: { params: { team: string; ap
</div>
{userCanReadAppSA ? (
<div className="space-y-4">
{userCanAddAppSA && (
{userCanAddAppSA && data?.appServiceAccounts.length > 0 && (
<div className="flex justify-end">
<AddAccountDialog />
</div>
)}

<table className="table-auto min-w-full divide-y divide-zinc-500/40">
<thead>
<tr>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Account
</th>

<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Environment Access
</th>
{userCanRemoveAppSA && <th className="px-6 py-3"></th>}
</tr>
</thead>
<tbody className="divide-y divide-neutral-500/20">
{data?.appServiceAccounts.map((account: ServiceAccountType) => (
<tr className="group" key={account.id}>
<td className="px-6 py-4 whitespace-nowrap flex items-center gap-2">
<div className="rounded-full flex items-center bg-neutral-500/40 justify-center size-12">
<FaRobot className="shrink-0 text-zinc-900 dark:text-zinc-100 grow" />
</div>
<div className="flex flex-col">
<div className="flex items-center gap-2">
<span className="text-lg font-medium">{account.name}</span>
<RoleLabel role={account.role!} />
{data?.appServiceAccounts.length === 0 ? (
<EmptyState
title="No accounts added"
subtitle="No Service Accounts have been added to this App yet. Add an account below."
graphic={
<div className="text-neutral-300 dark:text-neutral-700 text-7xl text-center">
<FaRobot />
</div>
}
>
<>
<AddAccountDialog />
</>
</EmptyState>
) : (
<table className="table-auto min-w-full divide-y divide-zinc-500/40">
<thead>
<tr>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Account
</th>

<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Environment Access
</th>
{userCanRemoveAppSA && <th className="px-6 py-3"></th>}
</tr>
</thead>
<tbody className="divide-y divide-neutral-500/20">
{data?.appServiceAccounts.map((account: ServiceAccountType) => (
<tr className="group" key={account.id}>
<td className="px-6 py-4 whitespace-nowrap flex items-center gap-2">
<div className="rounded-full flex items-center bg-neutral-500/40 justify-center size-12">
<FaRobot className="shrink-0 text-zinc-900 dark:text-zinc-100 grow" />
</div>
</div>
</td>

<td className="px-6 py-4">
<div className="flex items-center gap-2 ">
<ManageAccountAccessDialog account={account} />
</div>
</td>
<div className="flex flex-col">
<div className="flex items-center gap-2">
<span className="text-lg font-medium">{account.name}</span>
<RoleLabel role={account.role!} />
</div>
</div>
</td>

{userCanRemoveAppSA && (
<td className="px-6 py-4">
<div className="flex items-center justify-end gap-2 opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto transition ease">
<RemoveAccountConfirmDialog account={account} />
<div className="flex items-center gap-2 ">
<ManageAccountAccessDialog account={account} />
</div>
</td>
)}
</tr>
))}
</tbody>
</table>

{userCanRemoveAppSA && (
<td className="px-6 py-4">
<div className="flex items-center justify-end gap-2 opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto transition ease">
<RemoveAccountConfirmDialog account={account} />
</div>
</td>
)}
</tr>
))}
</tbody>
</table>
)}
</div>
) : (
<EmptyState
Expand Down

0 comments on commit 9b62a9a

Please sign in to comment.