feat(admin-ui): refresh products when a BatchJob is completed (#4840)

packages/admin-ui/ui/src/providers/import-refresh.tsx

@@ -0,0 +1,42 @@
+import React, { PropsWithChildren, useEffect } from "react"
+import { adminProductKeys } from "medusa-react"
+
+import { usePolling } from "./polling-provider"
+import { queryClient } from "../constants/query-client"
+import useNotification from "../hooks/use-notification"
+
+/**
+ * Provider for refreshing product/pricing lists after batch jobs are complete
+ */
+export const ImportRefresh = ({ children }: PropsWithChildren) => {
+  const { batchJobs } = usePolling()
+  const notification = useNotification()
+
+  useEffect(() => {
+    if (!batchJobs) {
+      return
+    }
+
+    const productListQuery = Object.entries(
+      queryClient.getQueryCache().queriesMap
+    ).find(([k, v]) => k.includes("admin_products"))?.[1]
+
+    if (productListQuery) {
+      const refreshedTimestamp = productListQuery.state.dataUpdatedAt
+
+      const completedJobs = batchJobs.filter(
+        (job) => job.status === "completed" && job.type === "product-import"
+      )
+
+      for (const job of completedJobs) {
+        const jobCompletedTimestamp = new Date(job.completed_at).getTime()
+        if (jobCompletedTimestamp > refreshedTimestamp) {
+          queryClient.invalidateQueries(adminProductKeys.all)
+          notification("Success", "Product import completed", "success")
+        }
+      }
+    }
+  }, [batchJobs])
+
+  return <>{children}</>
+}

packages/admin-ui/ui/src/providers/polling-provider.tsx

@@ -97,3 +97,16 @@ export const usePolling = () => {
 
   return context
 }
+
+/**
+ * Return active product import batch job if there is any.
+ */
+export const useActiveProductImportBatchJob = () => {
+  const { batchJobs } = usePolling()
+
+  return batchJobs?.find(
+    (job) =>
+      job.type === "product-import" &&
+      (job.status === "confirmed" || job.status === "processing")
+  )
+}

packages/admin-ui/ui/src/providers/providers.tsx

@@ -11,6 +11,7 @@ import { PollingProvider } from "./polling-provider"
 import { RouteProvider } from "./route-provider"
 import { SettingProvider } from "./setting-provider"
 import { WidgetProvider } from "./widget-provider"
+import { ImportRefresh } from "./import-refresh"
 
 type Props = PropsWithChildren<{
   widgetRegistry: WidgetRegistry
@@ -32,17 +33,19 @@ export const Providers = ({
       <MedusaProvider>
         <FeatureFlagProvider>
           <PollingProvider>
-            <SteppedProvider>
-              <LayeredModalProvider>
-                <WidgetProvider registry={widgetRegistry}>
-                  <RouteProvider registry={routeRegistry}>
-                    <SettingProvider registry={settingRegistry}>
-                      {children}
-                    </SettingProvider>
-                  </RouteProvider>
-                </WidgetProvider>
-              </LayeredModalProvider>
-            </SteppedProvider>
+            <ImportRefresh>
+              <SteppedProvider>
+                <LayeredModalProvider>
+                  <WidgetProvider registry={widgetRegistry}>
+                    <RouteProvider registry={routeRegistry}>
+                      <SettingProvider registry={settingRegistry}>
+                        {children}
+                      </SettingProvider>
+                    </RouteProvider>
+                  </WidgetProvider>
+                </LayeredModalProvider>
+              </SteppedProvider>
+            </ImportRefresh>
           </PollingProvider>
         </FeatureFlagProvider>
       </MedusaProvider>