From 64119d9028f7c1c20aafacb26a61b866a328b7f0 Mon Sep 17 00:00:00 2001
From: Aditya Choudhari <aditya.choudhari@wandb.com>
Date: Tue, 22 Oct 2024 16:04:01 -0700
Subject: [PATCH] cleanup

---
 .../_components/job-drawer/JobAgent.tsx       |   1 +
 .../_components/job-drawer/JobDrawer.tsx      | 105 ++++++++++--------
 .../_components/job-drawer/JobMetadata.tsx    |  21 ++--
 3 files changed, 68 insertions(+), 59 deletions(-)

diff --git a/apps/webservice/src/app/[workspaceSlug]/_components/job-drawer/JobAgent.tsx b/apps/webservice/src/app/[workspaceSlug]/_components/job-drawer/JobAgent.tsx
index b1989477..67235f7e 100644
--- a/apps/webservice/src/app/[workspaceSlug]/_components/job-drawer/JobAgent.tsx
+++ b/apps/webservice/src/app/[workspaceSlug]/_components/job-drawer/JobAgent.tsx
@@ -24,6 +24,7 @@ export const JobAgent: React.FC<JobAgentProps> = ({ job }) => (
           <td className="w-[110px] p-1 pr-2 align-top text-muted-foreground">
             Job Config
           </td>
+          <td />
         </tr>
       </tbody>
     </table>
diff --git a/apps/webservice/src/app/[workspaceSlug]/_components/job-drawer/JobDrawer.tsx b/apps/webservice/src/app/[workspaceSlug]/_components/job-drawer/JobDrawer.tsx
index 0124085c..2b588ebc 100644
--- a/apps/webservice/src/app/[workspaceSlug]/_components/job-drawer/JobDrawer.tsx
+++ b/apps/webservice/src/app/[workspaceSlug]/_components/job-drawer/JobDrawer.tsx
@@ -5,6 +5,7 @@ import Link from "next/link";
 import {
   IconDotsVertical,
   IconExternalLink,
+  IconLoader2,
   IconRocket,
 } from "@tabler/icons-react";
 
@@ -44,56 +45,64 @@ export const JobDrawer: React.FC = () => {
         showBar={false}
         className="left-auto right-0 top-0 mt-0 h-screen w-1/3 overflow-auto rounded-none focus-visible:outline-none"
       >
-        <DrawerTitle className="border-b p-6">
-          <div className="flex items-center gap-2 ">
-            <div className="flex flex-shrink-0 items-center gap-2 rounded bg-blue-500/20 p-1 text-blue-400">
-              <IconRocket className="h-4 w-4" />
-            </div>
-            Job
-            {job != null && (
-              <JobDropdownMenu
-                release={job.release}
-                environmentId={job.environment.id}
-                target={job.target}
-                deploymentName={job.release.deployment.name}
-                job={job.job}
-              >
-                <Button variant="ghost" size="icon" className="h-6 w-6">
-                  <IconDotsVertical className="h-3 w-3" />
-                </Button>
-              </JobDropdownMenu>
-            )}
+        {jobQ.isLoading && (
+          <div className="flex h-full w-full items-center justify-center">
+            <IconLoader2 className="h-8 w-8 animate-spin" />
           </div>
-          {links != null && (
-            <div className="mt-3 flex flex-wrap gap-2">
-              <>
-                {Object.entries(links).map(([label, url]) => (
-                  <Link
-                    key={label}
-                    href={url}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className={buttonVariants({
-                      variant: "secondary",
-                      size: "sm",
-                      className: "gap-1",
-                    })}
+        )}
+        {!jobQ.isLoading && (
+          <>
+            <DrawerTitle className="border-b p-6">
+              <div className="flex items-center gap-2 ">
+                <div className="flex flex-shrink-0 items-center gap-2 rounded bg-blue-500/20 p-1 text-blue-400">
+                  <IconRocket className="h-4 w-4" />
+                </div>
+                Job
+                {job != null && (
+                  <JobDropdownMenu
+                    release={job.release}
+                    environmentId={job.environment.id}
+                    target={job.target}
+                    deploymentName={job.release.deployment.name}
+                    job={job.job}
                   >
-                    <IconExternalLink className="h-4 w-4" />
-                    {label}
-                  </Link>
-                ))}
-              </>
-            </div>
-          )}
-        </DrawerTitle>
-
-        {job != null && (
-          <div className="flex w-full flex-col gap-6 p-6">
-            <JobPropertiesTable job={job} />
-            <JobMetadata job={job} />
-            <JobAgent job={job} />
-          </div>
+                    <Button variant="ghost" size="icon" className="h-6 w-6">
+                      <IconDotsVertical className="h-3 w-3" />
+                    </Button>
+                  </JobDropdownMenu>
+                )}
+              </div>
+              {links != null && (
+                <div className="mt-3 flex flex-wrap gap-2">
+                  <>
+                    {Object.entries(links).map(([label, url]) => (
+                      <Link
+                        key={label}
+                        href={url}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className={buttonVariants({
+                          variant: "secondary",
+                          size: "sm",
+                          className: "gap-1",
+                        })}
+                      >
+                        <IconExternalLink className="h-4 w-4" />
+                        {label}
+                      </Link>
+                    ))}
+                  </>
+                </div>
+              )}
+            </DrawerTitle>
+            {job != null && (
+              <div className="flex w-full flex-col gap-6 p-6">
+                <JobPropertiesTable job={job} />
+                <JobMetadata job={job} />
+                <JobAgent job={job} />
+              </div>
+            )}
+          </>
         )}
       </DrawerContent>
     </Drawer>
diff --git a/apps/webservice/src/app/[workspaceSlug]/_components/job-drawer/JobMetadata.tsx b/apps/webservice/src/app/[workspaceSlug]/_components/job-drawer/JobMetadata.tsx
index 173b3e6d..329ff274 100644
--- a/apps/webservice/src/app/[workspaceSlug]/_components/job-drawer/JobMetadata.tsx
+++ b/apps/webservice/src/app/[workspaceSlug]/_components/job-drawer/JobMetadata.tsx
@@ -11,17 +11,9 @@ type JobMetadataProps = {
 };
 
 export const JobMetadata: React.FC<JobMetadataProps> = ({ job }) => {
-  const { metadata } = job.job;
-  const metadataRecord = metadata.reduce(
-    (acc, curr) => {
-      acc[curr.key] = curr.value;
-      return acc;
-    },
-    {} as Record<string, string>,
-  );
-  const sortedMetadata = Object.entries(metadataRecord).sort(([keyA], [keyB]) =>
-    keyA.localeCompare(keyB),
-  );
+  const sortedMetadata = job.job.metadata
+    .map(({ key, value }) => [key, value] as [string, string])
+    .sort(([keyA], [keyB]) => keyA.localeCompare(keyB));
   const { search, setSearch, result } = useMatchSorterWithSearch(
     sortedMetadata,
     { keys: ["0", "1"] },
@@ -33,10 +25,17 @@ export const JobMetadata: React.FC<JobMetadataProps> = ({ job }) => {
         <Input
           className="w-full rounded-b-none text-xs"
           placeholder="Search ..."
+          aria-label="Search metadata"
+          role="searchbox"
           value={search}
           onChange={(e) => setSearch(e.target.value)}
         />
         <div className="scrollbar-thin scrollbar-thumb-neutral-800 scrollbar-track-neutral-900 max-h-[250px] overflow-auto rounded-b-lg border-x border-b p-1.5">
+          {result.length === 0 && (
+            <div className="text-center text-muted-foreground">
+              No matching metadata found
+            </div>
+          )}
           {result.map(([key, value]) => (
             <div className="text-nowrap font-mono" key={key}>
               <span>