fix(dashboard): add delete action to table (#7904)

packages/admin-next/dashboard/src/routes/categories/category-detail/components/category-general-section/category-general-section.tsx

@@ -1,17 +1,9 @@
 import { PencilSquare, Trash } from "@medusajs/icons"
 import { HttpTypes } from "@medusajs/types"
-import {
-  Container,
-  Heading,
-  StatusBadge,
-  Text,
-  toast,
-  usePrompt,
-} from "@medusajs/ui"
+import { Container, Heading, StatusBadge, Text } from "@medusajs/ui"
 import { useTranslation } from "react-i18next"
-import { useNavigate } from "react-router-dom"
 import { ActionMenu } from "../../../../../components/common/action-menu"
-import { useDeleteProductCategory } from "../../../../../hooks/api/categories"
+import { useDeleteProductCategoryAction } from "../../../common/hooks/use-delete-product-category-action"
 import { getIsActiveProps, getIsInternalProps } from "../../../common/utils"
 
 type CategoryGeneralSectionProps = {
@@ -22,51 +14,11 @@ export const CategoryGeneralSection = ({
   category,
 }: CategoryGeneralSectionProps) => {
   const { t } = useTranslation()
-  const navigate = useNavigate()
-  const prompt = usePrompt()
 
   const activeProps = getIsActiveProps(category.is_active, t)
   const internalProps = getIsInternalProps(category.is_internal, t)
 
-  const { mutateAsync } = useDeleteProductCategory(category.id)
-
-  const handleDelete = async () => {
-    const res = await prompt({
-      title: t("general.areYouSure"),
-      description: t("categories.delete.confirmation", {
-        name: category.name,
-      }),
-      confirmText: t("actions.delete"),
-      cancelText: t("actions.cancel"),
-    })
-
-    if (!res) {
-      return
-    }
-
-    await mutateAsync(undefined, {
-      onSuccess: () => {
-        toast.success(t("general.success"), {
-          description: t("categories.delete.successToast", {
-            name: category.name,
-          }),
-          dismissable: true,
-          dismissLabel: t("actions.close"),
-        })
-
-        navigate("/categories", {
-          replace: true,
-        })
-      },
-      onError: (e) => {
-        toast.error(t("general.error"), {
-          description: e.message,
-          dismissable: true,
-          dismissLabel: t("actions.close"),
-        })
-      },
-    })
-  }
+  const handleDelete = useDeleteProductCategoryAction(category)
 
   return (
     <Container className="divide-y p-0">

packages/admin-next/dashboard/src/routes/categories/category-list/components/category-list-table/category-list-table.tsx

@@ -1,4 +1,4 @@
-import { PencilSquare } from "@medusajs/icons"
+import { PencilSquare, Trash } from "@medusajs/icons"
 import { AdminProductCategoryResponse } from "@medusajs/types"
 import { Button, Container, Heading } from "@medusajs/ui"
 import { keepPreviousData } from "@tanstack/react-query"
@@ -11,6 +11,7 @@ import { ActionMenu } from "../../../../../components/common/action-menu"
 import { DataTable } from "../../../../../components/table/data-table"
 import { useProductCategories } from "../../../../../hooks/api/categories"
 import { useDataTable } from "../../../../../hooks/use-data-table"
+import { useDeleteProductCategoryAction } from "../../../common/hooks/use-delete-product-category-action"
 import { useCategoryTableColumns } from "./use-category-table-columns"
 import { useCategoryTableQuery } from "./use-category-table-query"
 
@@ -94,6 +95,7 @@ const CategoryRowActions = ({
   category: AdminProductCategoryResponse["product_category"]
 }) => {
   const { t } = useTranslation()
+  const handleDelete = useDeleteProductCategoryAction(category)
 
   return (
     <ActionMenu
@@ -107,6 +109,15 @@ const CategoryRowActions = ({
             },
           ],
         },
+        {
+          actions: [
+            {
+              label: t("actions.delete"),
+              icon: <Trash />,
+              onClick: handleDelete,
+            },
+          ],
+        },
       ]}
     />
   )

packages/admin-next/dashboard/src/routes/categories/common/hooks/use-delete-product-category-action.tsx

@@ -0,0 +1,51 @@
+import { HttpTypes } from "@medusajs/types"
+import { toast, usePrompt } from "@medusajs/ui"
+import { useTranslation } from "react-i18next"
+import { useNavigate } from "react-router-dom"
+import { useDeleteProductCategory } from "../../../../hooks/api/categories"
+
+export const useDeleteProductCategoryAction = (
+  category: HttpTypes.AdminProductCategory
+) => {
+  const { t } = useTranslation()
+  const navigate = useNavigate()
+  const prompt = usePrompt()
+
+  const { mutateAsync } = useDeleteProductCategory(category.id)
+
+  const handleDelete = async () => {
+    const res = await prompt({
+      title: t("general.areYouSure"),
+      description: t("categories.delete.confirmation", {
+        name: category.name,
+      }),
+      confirmText: t("actions.delete"),
+      cancelText: t("actions.cancel"),
+    })
+
+    if (!res) {
+      return
+    }
+
+    await mutateAsync(undefined, {
+      onSuccess: () => {
+        toast.success(t("general.success"), {
+          description: t("categories.delete.successToast", {
+            name: category.name,
+          }),
+        })
+
+        navigate("/categories", {
+          replace: true,
+        })
+      },
+      onError: (e) => {
+        toast.error(t("general.error"), {
+          description: e.message,
+        })
+      },
+    })
+  }
+
+  return handleDelete
+}