From 8387c72e96c1f9a87d1f28d5a242a5da7d1ad02e Mon Sep 17 00:00:00 2001
From: Kasper Fabricius Kristensen
 <45367945+kasperkristensen@users.noreply.github.com>
Date: Wed, 5 Jun 2024 19:57:16 +0200
Subject: [PATCH] fix(dashboard): Add empty state for media section (#7614)

---
 .../dashboard/src/i18n/translations/en.json   |  6 ++++-
 .../product-media-section.tsx                 | 25 ++++++++++++++++++-
 .../product-media-gallery.tsx                 | 21 +++++++++++++---
 3 files changed, 46 insertions(+), 6 deletions(-)

diff --git a/packages/admin-next/dashboard/src/i18n/translations/en.json b/packages/admin-next/dashboard/src/i18n/translations/en.json
index 9ee6da9fed..f875fec67c 100644
--- a/packages/admin-next/dashboard/src/i18n/translations/en.json
+++ b/packages/admin-next/dashboard/src/i18n/translations/en.json
@@ -217,7 +217,11 @@
       "galleryLabel": "Gallery",
       "downloadImageLabel": "Download current image",
       "deleteImageLabel": "Delete current image",
-      "noMediaLabel": "The product has no associated media."
+      "emptyState": {
+        "header": "No media yet",
+        "description": "Add media to the product to showcase it in your storefront.",
+        "action": "Add media"
+      }
     },
     "discountableHint": "When unchecked discounts will not be applied to this product.",
     "noSalesChannels": "Not available in any sales channels",
diff --git a/packages/admin-next/dashboard/src/routes/products/product-detail/components/product-media-section/product-media-section.tsx b/packages/admin-next/dashboard/src/routes/products/product-detail/components/product-media-section/product-media-section.tsx
index efb31d39cd..186e1bc62c 100644
--- a/packages/admin-next/dashboard/src/routes/products/product-detail/components/product-media-section/product-media-section.tsx
+++ b/packages/admin-next/dashboard/src/routes/products/product-detail/components/product-media-section/product-media-section.tsx
@@ -1,10 +1,12 @@
 import { PencilSquare, ThumbnailBadge } from "@medusajs/icons"
 import { Product } from "@medusajs/medusa"
 import {
+  Button,
   Checkbox,
   CommandBar,
   Container,
   Heading,
+  Text,
   Tooltip,
   clx,
   usePrompt,
@@ -97,7 +99,7 @@ export const ProductMediaSection = ({ product }: ProductMedisaSectionProps) => {
           ]}
         />
       </div>
-      {media && (
+      {media.length > 0 ? (
         <div className="grid grid-cols-[repeat(auto-fill,minmax(96px,1fr))] gap-4 px-6 py-4">
           {media.map((i, index) => {
             const isSelected = selection[i.id]
@@ -138,6 +140,27 @@ export const ProductMediaSection = ({ product }: ProductMedisaSectionProps) => {
             )
           })}
         </div>
+      ) : (
+        <div className="flex flex-col items-center gap-y-4 pb-8 pt-6">
+          <div className="flex flex-col items-center">
+            <Text
+              size="small"
+              leading="compact"
+              weight="plus"
+              className="text-ui-fg-subtle"
+            >
+              {t("products.media.emptyState.header")}
+            </Text>
+            <Text size="small" className="text-ui-fg-muted">
+              {t("products.media.emptyState.description")}
+            </Text>
+          </div>
+          <Button size="small" variant="secondary" asChild>
+            <Link to="media?view=edit">
+              {t("products.media.emptyState.action")}
+            </Link>
+          </Button>
+        </div>
       )}
       <CommandBar open={!!Object.keys(selection).length}>
         <CommandBar.Bar>
diff --git a/packages/admin-next/dashboard/src/routes/products/product-media/components/product-media-gallery/product-media-gallery.tsx b/packages/admin-next/dashboard/src/routes/products/product-media/components/product-media-gallery/product-media-gallery.tsx
index 41e2d0ad9e..eafdb2ade6 100644
--- a/packages/admin-next/dashboard/src/routes/products/product-media/components/product-media-gallery/product-media-gallery.tsx
+++ b/packages/admin-next/dashboard/src/routes/products/product-media/components/product-media-gallery/product-media-gallery.tsx
@@ -1,6 +1,5 @@
 import {
   ArrowDownTray,
-  ExclamationCircle,
   ThumbnailBadge,
   Trash,
   TriangleLeftMini,
@@ -172,9 +171,23 @@ const Canvas = ({ media, curr }: { media: Media[]; curr: number }) => {
 
   if (media.length === 0) {
     return (
-      <div className="bg-ui-bg-subtle text-ui-fg-subtle flex size-full flex-col items-center justify-center gap-y-2">
-        <ExclamationCircle />
-        <Text size="small">{t("products.media.noMediaLabel")}</Text>
+      <div className="bg-ui-bg-subtle flex size-full flex-col items-center justify-center gap-y-4 pb-8 pt-6">
+        <div className="flex flex-col items-center">
+          <Text
+            size="small"
+            leading="compact"
+            weight="plus"
+            className="text-ui-fg-subtle"
+          >
+            {t("products.media.emptyState.header")}
+          </Text>
+          <Text size="small" className="text-ui-fg-muted">
+            {t("products.media.emptyState.description")}
+          </Text>
+        </div>
+        <Button size="small" variant="secondary" asChild>
+          <Link to="?view=edit">{t("products.media.emptyState.action")}</Link>
+        </Button>
       </div>
     )
   }