empty state for job list

riverqueue · May 15, 2024 · 11ffca6 · 11ffca6
1 parent fadcbe2
commit 11ffca6
Showing 1 changed file with 78 additions and 43 deletions.
diff --git a/ui/src/components/JobList.tsx b/ui/src/components/JobList.tsx
@@ -1,7 +1,8 @@
-import { useMemo } from "react";
+import React, { useMemo } from "react";
 import { Link } from "@tanstack/react-router";
 import { useTime } from "react-time-sync";
 import { MagnifyingGlassIcon } from "@heroicons/react/20/solid";
+import { QueueListIcon } from "@heroicons/react/24/solid";
 
 import { Job } from "@services/jobs";
 import { JobState } from "@services/types";
@@ -126,25 +127,93 @@ const JobListItem = ({ job }: JobListItemProps) => (
   </li>
 );
 
-type JobListProps = {
+type EmptySetIconProps = {} & React.ComponentProps<"svg">;
+
+const EmptySetIcon = (props: EmptySetIconProps) => (
+  <svg
+    width="200"
+    height="200"
+    viewBox="0 0 200 200"
+    xmlns="http://www.w3.org/2000/svg"
+    fill="currentColor"
+    stroke="currentColor"
+    {...props}
+  >
+    <circle cx="100" cy="100" r="60" fill="none" strokeWidth="10" />
+    <line x1="40" y1="40" x2="160" y2="160" strokeWidth="10" />
+  </svg>
+);
+
+const EmptyState = () => (
+  <div className="text-center mt-16">
+    <EmptySetIcon className="mx-auto h-12 w-12 text-gray-400" />
+    <h3 className="mt-2 text-sm font-semibold text-gray-900">No jobs</h3>
+  </div>
+);
+
+type JobRowsProps = {
   canShowFewer: boolean;
   canShowMore: boolean;
-  loading?: boolean;
   jobs: Job[];
   showFewer: () => void;
   showMore: () => void;
-  statesAndCounts: StatesAndCounts | undefined;
 };
 
-const JobList = ({
+const JobRows = ({
   canShowFewer,
   canShowMore,
   jobs,
-  loading,
   showFewer,
   showMore,
-  statesAndCounts,
-}: JobListProps) => {
+}: JobRowsProps) => {
+  if (jobs.length === 0) {
+    return <EmptyState />;
+  }
+  return (
+    <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+      <ul role="list" className="divide-y divide-black/5 dark:divide-white/5">
+        {jobs.map((job) => (
+          <JobListItem key={job.id.toString()} job={job} />
+        ))}
+      </ul>
+      <nav
+        className="flex items-center justify-center border-t border-black/5 py-3 dark:border-white/5"
+        aria-label="Pagination"
+      >
+        <button
+          className={classNames(
+            "relative inline-flex items-center rounded-md px-3 py-2 text-sm font-semibold text-slate-900 dark:text-slate-100 ring-1 ring-inset ring-slate-300 dark:ring-slate-700 hover:bg-slate-50 hover:dark:bg-slate-800 focus-visible:outline-offset-0"
+          )}
+          disabled={!canShowFewer}
+          onClick={() => showFewer()}
+        >
+          Fewer
+        </button>
+        <button
+          className="relative ml-3 inline-flex items-center rounded-md px-3 py-2 text-sm font-semibold text-slate-900 ring-1 ring-inset ring-slate-300 hover:bg-slate-50 focus-visible:outline-offset-0 dark:text-slate-100 dark:ring-slate-700 hover:dark:bg-slate-800"
+          disabled={!canShowMore}
+          onClick={() => showMore()}
+        >
+          More
+        </button>
+      </nav>
+    </div>
+  );
+};
+
+type JobListProps = {
+  canShowFewer: boolean;
+  canShowMore: boolean;
+  loading?: boolean;
+  jobs: Job[];
+  showFewer: () => void;
+  showMore: () => void;
+  statesAndCounts: StatesAndCounts | undefined;
+};
+
+const JobList = (props: JobListProps) => {
+  const { loading, statesAndCounts } = props;
+
   return (
     <div className="h-full lg:pl-72">
       <TopNav>
@@ -170,41 +239,7 @@ const JobList = ({
         <JobFilters statesAndCounts={statesAndCounts} />
       </div>
 
-      {loading ? (
-        <div>Loading...</div>
-      ) : (
-        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
-          <ul
-            role="list"
-            className="divide-y divide-black/5 dark:divide-white/5"
-          >
-            {jobs.map((job) => (
-              <JobListItem key={job.id.toString()} job={job} />
-            ))}
-          </ul>
-          <nav
-            className="flex items-center justify-center border-t border-black/5 py-3 dark:border-white/5"
-            aria-label="Pagination"
-          >
-            <button
-              className={classNames(
-                "relative inline-flex items-center rounded-md px-3 py-2 text-sm font-semibold text-slate-900 dark:text-slate-100 ring-1 ring-inset ring-slate-300 dark:ring-slate-700 hover:bg-slate-50 hover:dark:bg-slate-800 focus-visible:outline-offset-0"
-              )}
-              disabled={!canShowFewer}
-              onClick={() => showFewer()}
-            >
-              Fewer
-            </button>
-            <button
-              className="relative ml-3 inline-flex items-center rounded-md px-3 py-2 text-sm font-semibold text-slate-900 ring-1 ring-inset ring-slate-300 hover:bg-slate-50 focus-visible:outline-offset-0 dark:text-slate-100 dark:ring-slate-700 hover:dark:bg-slate-800"
-              disabled={!canShowMore}
-              onClick={() => showMore()}
-            >
-              More
-            </button>
-          </nav>
-        </div>
-      )}
+      {loading ? <div>Loading...</div> : <JobRows {...props}></JobRows>}
     </div>
   );
 };