From 7ac5077626a25a4189d845350eb98bdd75956220 Mon Sep 17 00:00:00 2001
From: Rohan Chaturvedi <rohan.chaturvedi@protonmail.com>
Date: Mon, 15 Jan 2024 17:20:50 +0530
Subject: [PATCH] feat: add empty state to secrets overview tab (#154)

---
 frontend/app/[team]/apps/[app]/page.tsx | 80 ++++++++++++++++---------
 1 file changed, 52 insertions(+), 28 deletions(-)

diff --git a/frontend/app/[team]/apps/[app]/page.tsx b/frontend/app/[team]/apps/[app]/page.tsx
index 44b4dc31f..f06792b11 100644
--- a/frontend/app/[team]/apps/[app]/page.tsx
+++ b/frontend/app/[team]/apps/[app]/page.tsx
@@ -436,37 +436,61 @@ export default function Secrets({ params }: { params: { team: string; app: strin
               </div>
             </div>
 
-            <table className="table-auto w-full border border-neutral-500/40">
-              <thead id="table-head" className="sticky top-0 bg-zinc-300 dark:bg-zinc-800 z-10">
-                <tr className="divide-x divide-neutral-500/40">
-                  <th className="px-6 py-2 text-left text-sm font-medium text-gray-500 uppercase tracking-wider">
-                    key
-                  </th>
-                  {data?.appEnvironments.map((env: EnvironmentType) => (
-                    <th
-                      key={env.id}
-                      className="group text-center text-sm font-semibold uppercase tracking-widest py-3"
-                    >
-                      <Link href={`${pathname}/environments/${env.id}`}>
-                        <Button variant="outline">
-                          <div className="flex items-center gap-2 justify-center ">
-                            {env.envType}
-                            <div className="opacity-30 group-hover:opacity-100 transform -translate-x-1 group-hover:translate-x-0 transition ease">
-                              <FaArrowRight />
+            {appSecrets.length > 0 ? (
+              <table className="table-auto w-full border border-neutral-500/40">
+                <thead id="table-head" className="sticky top-0 bg-zinc-300 dark:bg-zinc-800 z-10">
+                  <tr className="divide-x divide-neutral-500/40">
+                    <th className="px-6 py-2 text-left text-sm font-medium text-gray-500 uppercase tracking-wider">
+                      key
+                    </th>
+                    {data?.appEnvironments.map((env: EnvironmentType) => (
+                      <th
+                        key={env.id}
+                        className="group text-center text-sm font-semibold uppercase tracking-widest py-3"
+                      >
+                        <Link href={`${pathname}/environments/${env.id}`}>
+                          <Button variant="outline">
+                            <div className="flex items-center gap-2 justify-center ">
+                              {env.envType}
+                              <div className="opacity-30 group-hover:opacity-100 transform -translate-x-1 group-hover:translate-x-0 transition ease">
+                                <FaArrowRight />
+                              </div>
                             </div>
+                          </Button>
+                        </Link>
+                      </th>
+                    ))}
+                  </tr>
+                </thead>
+                <tbody className="divide-y divide-neutral-500/40">
+                  {filteredSecrets.map((appSecret, index) => (
+                    <AppSecretRow key={`${appSecret.key}${index}`} appSecret={appSecret} />
+                  ))}
+                </tbody>
+              </table>
+            ) : (
+              <div className="flex flex-col items-center py-40 border border-neutral-500/40 rounded-md bg-neutral-100 dark:bg-neutral-800">
+                <div className="font-semibold text-black dark:text-white text-2xl">No Secrets</div>
+                <div className="text-neutral-500">
+                  There are no secrets in this app yet. Click on an environment below to start
+                  adding secrets.{' '}
+                </div>
+                <div className="flex items-center gap-4 mt-8">
+                  {data?.appEnvironments.map((env: EnvironmentType) => (
+                    <Link key={env.id} href={`${pathname}/environments/${env.id}`}>
+                      <Button variant="primary">
+                        <div className="flex items-center gap-2 justify-center text-xl group">
+                          {env.name}
+                          <div className="opacity-30 group-hover:opacity-100 transform -translate-x-1 group-hover:translate-x-0 transition ease">
+                            <FaArrowRight />
                           </div>
-                        </Button>
-                      </Link>
-                    </th>
+                        </div>
+                      </Button>
+                    </Link>
                   ))}
-                </tr>
-              </thead>
-              <tbody className="divide-y divide-neutral-500/40">
-                {filteredSecrets.map((appSecret, index) => (
-                  <AppSecretRow key={`${appSecret.key}${index}`} appSecret={appSecret} />
-                ))}
-              </tbody>
-            </table>
+                </div>
+              </div>
+            )}
           </section>
         ))}
     </div>