feat: Display empty detour table icon when the table is empty

mbta · Sep 10, 2024 · 26e6fb2 · 26e6fb2
1 parent 7012a7e
commit 26e6fb2
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 33 deletions.
diff --git a/assets/css/detours/_detour_table.scss b/assets/css/detours/_detour_table.scss
@@ -61,6 +61,12 @@ $table-border-radius: 0.5rem;
     td:last-child {
       border-bottom-right-radius: $table-border-radius;
     }
+
+    @include media-breakpoint-down(md) {
+      td {
+        border-bottom: none;
+      }
+    }
   }
 }
 

diff --git a/assets/src/components/detoursTable.tsx b/assets/src/components/detoursTable.tsx
@@ -6,48 +6,74 @@ import { timeAgoLabel } from "../util/dateTime"
 import { SimpleDetour } from "../models/detour"
 
 interface DetoursTableProps {
-  data: SimpleDetour[]
+  data: SimpleDetour[] | null
 }
 
-export const DetoursTable = ({ data }: DetoursTableProps) => {
+export const DetoursTable = ({ data }: DetoursTableProps) => (
+  <Table hover={data !== null} className="c-detours-table">
+    <thead className="u-hide-for-mobile">
+      <tr>
+        <th className="px-3 py-4">Route and direction</th>
+        <th className="px-3 py-4 u-hide-for-mobile">Starting Intersection</th>
+        <th className="px-3 py-4 u-hide-for-mobile">On detour since</th>
+      </tr>
+    </thead>
+    <tbody>
+      <DetourRows data={data} />
+    </tbody>
+  </Table>
+)
+
+const DetourRows = ({ data }: { data: SimpleDetour[] | null }) =>
+  data === null ? (
+    <EmptyDetourRows message="No draft detours." />
+  ) : (
+    <PopulatedDetourRows data={data} />
+  )
+
+const PopulatedDetourRows = ({ data }: { data: SimpleDetour[] }) => {
   const epochNowInSeconds = useCurrentTimeSeconds()
 
   return (
-    <Table hover className="c-detours-table">
-      <thead className="u-hide-for-mobile">
-        <tr>
-          <th className="px-3 py-4">Route and direction</th>
-          <th className="px-3 py-4 u-hide-for-mobile">Starting Intersection</th>
-          <th className="px-3 py-4 u-hide-for-mobile">On detour since</th>
-        </tr>
-      </thead>
-      <tbody>
-        {data.map((detour, index) => (
-          <tr key={index}>
-            <td className="align-middle p-3">
-              <div className="d-flex">
-                <RoutePill routeName={detour.route} />
-                <div className="c-detours-table__route-info-text d-inline-block">
-                  <div className="pb-1 fs-4 fw-semibold">{detour.name}</div>
-                  <div className="c-detours-table__route-info-direction fs-6">
-                    {detour.direction}
-                  </div>
+    <>
+      {data.map((detour, index) => (
+        <tr key={index}>
+          <td className="align-middle p-3">
+            <div className="d-flex">
+              <RoutePill routeName={detour.route} />
+              <div className="c-detours-table__route-info-text d-inline-block">
+                <div className="pb-1 fs-4 fw-semibold">{detour.name}</div>
+                <div className="c-detours-table__route-info-direction fs-6">
+                  {detour.direction}
                 </div>
               </div>
-            </td>
-            <td className="align-middle p-3 u-hide-for-mobile">
-              {detour.intersection}
-            </td>
-            <td className="align-middle p-3 u-hide-for-mobile">
-              {timeAgoLabel(epochNowInSeconds, detour.updatedAt)}
-            </td>
-          </tr>
-        ))}
-      </tbody>
-    </Table>
+            </div>
+          </td>
+          <td className="align-middle p-3 u-hide-for-mobile">
+            {detour.intersection}
+          </td>
+          <td className="align-middle p-3 u-hide-for-mobile">
+            {timeAgoLabel(epochNowInSeconds, detour.updatedAt)}
+          </td>
+        </tr>
+      ))}
+    </>
   )
 }
 
+const EmptyDetourRows = ({ message }: { message: string }) => (
+  <tr>
+    <td colSpan={3} className="p-3 p-md-4">
+      <div className="d-flex justify-content-center mb-3">
+        <EmptyDetourTableIcon height="100px" width="100px" />
+      </div>
+      <div className="d-flex justify-content-center">
+        <p className="fs-3 fw-light m-0">{message}</p>
+      </div>
+    </td>
+  </tr>
+)
+
 export const EmptyDetourTableIcon = (props: ComponentProps<"svg">) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"

diff --git a/assets/stories/skate-components/icons/emptyDetourTableIcon.stories.tsx b/assets/stories/skate-components/icons/emptyDetourTableIcon.stories.tsx
@@ -5,7 +5,6 @@ const meta = {
   component: EmptyDetourTableIcon,
   parameters: {
     layout: "centered",
-    stretch: false,
   },
 } satisfies Meta<typeof EmptyDetourTableIcon>