From 9b62a9a8735a74071a3750557c99ed7c5bc9f251 Mon Sep 17 00:00:00 2001
From: Rohan <rohan.chaturvedi@protonmail.com>
Date: Thu, 7 Nov 2024 13:39:03 +0530
Subject: [PATCH] fix: add empty state for service accounts

---
 .../[team]/access/service-accounts/page.tsx   | 98 +++++++++++--------
 .../[app]/access/service-accounts/page.tsx    | 98 +++++++++++--------
 2 files changed, 114 insertions(+), 82 deletions(-)

diff --git a/frontend/app/[team]/access/service-accounts/page.tsx b/frontend/app/[team]/access/service-accounts/page.tsx
index 30c369b4..9b4432c0 100644
--- a/frontend/app/[team]/access/service-accounts/page.tsx
+++ b/frontend/app/[team]/access/service-accounts/page.tsx
@@ -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"
diff --git a/frontend/app/[team]/apps/[app]/access/service-accounts/page.tsx b/frontend/app/[team]/apps/[app]/access/service-accounts/page.tsx
index b2ccad45..8d122377 100644
--- a/frontend/app/[team]/apps/[app]/access/service-accounts/page.tsx
+++ b/frontend/app/[team]/apps/[app]/access/service-accounts/page.tsx
@@ -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