display history of indexed jobs

apps/cms/package.json

@@ -17,7 +17,7 @@
     "@material-ui/core": "^4.12.4",
     "@material-ui/icons": "^4.11.3",
     "@material-ui/lab": "4.0.0-alpha.61",
-    "@saleor/app-sdk": "0.39.1",
+    "@saleor/app-sdk": "0.41.0",
     "@saleor/apps-shared": "workspace:*",
     "@saleor/macaw-ui": "^0.7.2",
     "@sentry/nextjs": "^7.43.0",

apps/crm/package.json

@@ -13,7 +13,7 @@
   },
   "dependencies": {
     "@mailchimp/mailchimp_marketing": "^3.0.80",
-    "@saleor/app-sdk": "0.39.1",
+    "@saleor/app-sdk": "0.41.0",
     "@saleor/apps-shared": "workspace:*",
     "@saleor/macaw-ui": "0.8.0-pre.84",
     "@sentry/nextjs": "^7.52.1",

apps/data-importer/package.json

@@ -15,7 +15,7 @@
     "@material-ui/core": "^4.12.4",
     "@material-ui/icons": "^4.11.3",
     "@material-ui/lab": "4.0.0-alpha.61",
-    "@saleor/app-sdk": "0.39.1",
+    "@saleor/app-sdk": "0.41.0",
     "@saleor/apps-shared": "workspace:*",
     "@saleor/macaw-ui": "^0.7.2",
     "@sentry/nextjs": "^7.39.0",

apps/emails-and-messages/package.json

@@ -14,7 +14,7 @@
   "dependencies": {
     "@hookform/resolvers": "^3.1.0",
     "@monaco-editor/react": "^4.4.6",
-    "@saleor/app-sdk": "0.39.1",
+    "@saleor/app-sdk": "0.41.0",
     "@saleor/apps-shared": "workspace:*",
     "@saleor/apps-ui": "workspace:*",
     "@saleor/macaw-ui": "0.8.0-pre.84",

apps/invoices/package.json

@@ -13,7 +13,7 @@
   },
   "dependencies": {
     "@hookform/resolvers": "^3.1.0",
-    "@saleor/app-sdk": "0.39.1",
+    "@saleor/app-sdk": "0.41.0",
     "@saleor/apps-shared": "workspace:*",
     "@saleor/macaw-ui": "0.8.0-pre.84",
     "@sentry/nextjs": "^7.36.0",

apps/klaviyo/package.json

@@ -14,7 +14,7 @@
     "@material-ui/core": "^4.12.4",
     "@material-ui/icons": "^4.11.3",
     "@material-ui/lab": "4.0.0-alpha.61",
-    "@saleor/app-sdk": "0.39.1",
+    "@saleor/app-sdk": "0.41.0",
     "@saleor/apps-shared": "workspace:*",
     "@saleor/macaw-ui": "^0.7.2",
     "@sentry/nextjs": "^7.36.0",

apps/monitoring/package.json

@@ -14,7 +14,7 @@
     "@material-ui/core": "^4.12.4",
     "@material-ui/icons": "^4.11.3",
     "@material-ui/lab": "4.0.0-alpha.61",
-    "@saleor/app-sdk": "0.39.1",
+    "@saleor/app-sdk": "0.41.0",
     "@saleor/apps-shared": "workspace:*",
     "@saleor/macaw-ui": "^0.7.2",
     "@urql/exchange-auth": "^1.0.0",

apps/products-feed/package.json

@@ -14,7 +14,7 @@
   "dependencies": {
     "@aws-sdk/client-s3": "^3.332.0",
     "@hookform/resolvers": "^3.1.0",
-    "@saleor/app-sdk": "0.39.1",
+    "@saleor/app-sdk": "0.41.0",
     "@saleor/apps-shared": "workspace:*",
     "@saleor/apps-ui": "workspace:*",
     "@saleor/macaw-ui": "0.8.0-pre.84",

apps/search/package.json

@@ -20,7 +20,7 @@
   "dependencies": {
     "@hookform/resolvers": "^3.1.0",
     "@prisma/client": "^4.15.0",
-    "@saleor/app-sdk": "0.39.1",
+    "@saleor/app-sdk": "0.41.0",
     "@saleor/apps-shared": "workspace:*",
     "@saleor/apps-ui": "workspace:*",
     "@saleor/macaw-ui": "^0.8.0-pre.84",

apps/search/src/components/ImportHistory.tsx

@@ -0,0 +1,52 @@
+import React from "react";
+import { Prisma } from "@prisma/client";
+import { useAuthenticatedFetch } from "@saleor/app-sdk/app-bridge";
+import { useQuery } from "react-query";
+import { Box, Text } from "@saleor/macaw-ui/next";
+
+const fetchJobs = (fetch: typeof window.fetch) =>
+  fetch("/api/jobs").then((r: any) => r.json() as Prisma.IndexJob[]);
+
+export const ImportHistory = () => {
+  const fetch = useAuthenticatedFetch();
+
+  const { data } = useQuery<Prisma.IndexJob[]>({
+    queryFn: () => fetchJobs(fetch),
+    refetchInterval: 5000,
+  });
+
+  if (!data) {
+    return null;
+  }
+
+  return (
+    <Box marginTop={8} as={"table"} width={"100%"}>
+      <Box as={"thead"}>
+        <td>
+          <Text>Job ID</Text>
+        </td>
+        <td>
+          <Text>Created at</Text>
+        </td>
+        <td>
+          <Text>Createdy by</Text>
+        </td>
+        <td>
+          <Text>Status</Text>
+        </td>
+      </Box>
+      {data.map((job) => (
+        <tr key={job.jobId}>
+          <td>{job.jobId}</td>
+          <td>
+            {Intl.DateTimeFormat(["en"], { timeStyle: "medium", dateStyle: "medium" }).format(
+              new Date(job.createdAt)
+            )}
+          </td>
+          <td>{job.createdBy}</td>
+          <td>{job.status}</td>
+        </tr>
+      ))}
+    </Box>
+  );
+};

apps/search/src/components/ImportProductsToAlgolia.tsx

@@ -3,6 +3,7 @@ import React, { useEffect, useMemo, useState } from "react";
 import { AlgoliaSearchProvider } from "../lib/algolia/algoliaSearchProvider";
 import { useConfiguration } from "../lib/configuration";
 import { useAuthenticatedFetch } from "@saleor/app-sdk/app-bridge";
+import { ImportHistory } from "./ImportHistory";
 
 export const ImportProductsToAlgolia = () => {
   const fetch = useAuthenticatedFetch();
@@ -48,17 +49,6 @@ export const ImportProductsToAlgolia = () => {
           </Text>
           <Box display={"flex"} justifyContent={"flex-end"} marginTop={13}>
             <Button onClick={() => fetch("/api/index-products")}>Start importing</Button>
-            <Button
-              onClick={() =>
-                fetch("/api/jobs")
-                  .then((r: any) => r.json())
-                  .then((jobs: unknown) => {
-                    console.log(jobs);
-                  })
-              }
-            >
-              Check status
-            </Button>
           </Box>
         </Box>
       ) : (
@@ -69,6 +59,7 @@ export const ImportProductsToAlgolia = () => {
           <Text>Configure Algolia first</Text>
         </Box>
       )}
+      <ImportHistory />
     </Box>
   );
 };

apps/search/src/pages/api/index-products.ts

@@ -14,7 +14,7 @@ export default createProtectedHandler(
 
     await indexingJobRepository.createPendingJob(ctx.authData.saleorApiUrl, {
       jobId: Number(job.id),
-      createdByEmail: "some-name-todo", // todo add to sdk
+      createdByEmail: ctx.user.email,
     });
 
     return res.status(200).end();

apps/slack/package.json

@@ -14,7 +14,7 @@
     "@material-ui/core": "^4.12.4",
     "@material-ui/icons": "^4.11.3",
     "@material-ui/lab": "4.0.0-alpha.61",
-    "@saleor/app-sdk": "0.39.1",
+    "@saleor/app-sdk": "0.41.0",
     "@saleor/apps-shared": "workspace:*",
     "@saleor/macaw-ui": "^0.7.2",
     "@sentry/nextjs": "^7.30.0",

apps/taxes/package.json

@@ -16,7 +16,7 @@
     "@material-ui/core": "^4.12.4",
     "@material-ui/icons": "^4.11.3",
     "@material-ui/lab": "4.0.0-alpha.61",
-    "@saleor/app-sdk": "0.39.1",
+    "@saleor/app-sdk": "0.41.0",
     "@saleor/apps-shared": "workspace:*",
     "@saleor/apps-ui": "workspace:*",
     "@saleor/macaw-ui": "^0.7.2",

packages/shared/package.json

@@ -15,7 +15,7 @@
     "@material-ui/core": "^4.12.4",
     "@material-ui/icons": "^4.11.3",
     "@material-ui/lab": "4.0.0-alpha.61",
-    "@saleor/app-sdk": "0.39.1",
+    "@saleor/app-sdk": "0.41.0",
     "@saleor/macaw-ui": "^0.7.2",
     "@types/react": "^18.0.27",
     "@types/react-dom": "^18.0.10",

packages/ui/package.json

@@ -9,7 +9,7 @@
     "typescript": "5.1.3"
   },
   "devDependencies": {
-    "@saleor/app-sdk": "0.39.1",
+    "@saleor/app-sdk": "0.41.0",
     "@saleor/macaw-ui": "0.8.0-pre.84",
     "@types/react": "^18.0.27",
     "@types/react-dom": "^18.0.10",