Fixes #342

ui/api/topics/actions.ts

@@ -71,7 +71,7 @@ export async function getTopics(
 export async function getTopic(
   kafkaId: string,
   topicId: string,
-): Promise<Topic> {
+): Promise<Topic | null> {
   const url = `${process.env.BACKEND_URL}/api/kafkas/${kafkaId}/topics/${topicId}?${describeTopicsQuery}`;
   const res = await fetch(url, {
     headers: await getHeaders(),
@@ -81,7 +81,11 @@ export async function getTopic(
   });
   const rawData = await res.json();
   log.debug(rawData, "getTopic");
-  return TopicResponse.parse(rawData).data;
+  try {
+    return TopicResponse.parse(rawData).data;
+  } catch {
+    return null;
+  }
 }
 
 export async function createTopic(
@@ -176,11 +180,12 @@ export async function deleteTopic(
   try {
     const success = res.status === 204;
     if (success) {
+      log.debug({ url }, "deleteTopic success");
       revalidateTag("topics");
     }
     return success;
   } catch (e) {
-    log.error(e, "deleteTopic unknown error");
+    log.error({ err: e, url }, "deleteTopic unknown error");
   }
   return false;
 }

ui/app/[locale]/kafka/[kafkaId]/@modal/topics/[topicId]/delete/DeleteTopicModal.tsx

@@ -1,31 +1,32 @@
 "use client";
+import { KafkaParams } from "@/app/[locale]/kafka/[kafkaId]/kafka.params";
 import { DeleteModal } from "@/components/DeleteModal";
-import { useTranslations } from "next-intl";
 import { useRouter } from "@/navigation";
+import { useTranslations } from "next-intl";
+import { useParams } from "next/navigation";
 import { useState, useTransition } from "react";
 
 export function DeleteTopicModal({
   topicName,
   onDelete,
 }: {
   topicName: string;
-  onDelete: () => Promise<boolean>;
+  onDelete: () => Promise<void>;
 }) {
   const t = useTranslations("delete-topic");
   const router = useRouter();
+  const params = useParams<KafkaParams>();
   const [pending, startTransition] = useTransition();
   const [deleting, setDeleting] = useState(false);
   const isDeleting = deleting || pending;
 
   async function handleDelete() {
     try {
       setDeleting(true);
-      const res = await onDelete();
-      if (res) {
-        startTransition(() => {
-          router.back();
-        });
-      }
+      await onDelete();
+      startTransition(() => {
+        router.push(`/kafka/${params.kafkaId}/topics/post-delete`);
+      });
     } finally {
       setDeleting(false);
     }

ui/app/[locale]/kafka/[kafkaId]/@modal/topics/[topicId]/delete/page.tsx

@@ -11,13 +11,13 @@ export default async function DeletePage({
 
   async function onDelete() {
     "use server";
-    const res = await deleteTopic(kafkaId, topicId);
-    if (res) {
-    }
-    return res;
+    await deleteTopic(kafkaId, topicId);
   }
 
   return (
-    <DeleteTopicModal topicName={topic.attributes.name} onDelete={onDelete} />
+    <DeleteTopicModal
+      topicName={topic?.attributes.name || ""}
+      onDelete={onDelete}
+    />
   );
 }

ui/app/[locale]/kafka/[kafkaId]/topics/(page)/page.tsx

@@ -10,6 +10,8 @@ import { PageSection } from "@/libs/patternfly/react-core";
 import { stringToInt } from "@/utils/stringToInt";
 import { Suspense } from "react";
 
+export const dynamic = "force-dynamic";
+
 const sortMap: Record<(typeof SortableColumns)[number], string> = {
   name: "name",
   partitions: "partitions",

ui/app/[locale]/kafka/[kafkaId]/topics/(page)/post-delete/page.tsx

@@ -0,0 +1,12 @@
+import { KafkaParams } from "@/app/[locale]/kafka/[kafkaId]/kafka.params";
+import { RedirectOnLoad } from "@/components/RedirectOnLoad";
+import { revalidatePath } from "next/cache";
+
+export default function PostDeletePage({
+  params: { kafkaId },
+}: {
+  params: KafkaParams;
+}) {
+  revalidatePath(`/kafka/${kafkaId}/topics`, "page");
+  return <RedirectOnLoad url={`/kafka/${kafkaId}/topics`} />;
+}

ui/components/RedirectOnLoad.tsx

@@ -0,0 +1,12 @@
+"use client";
+import { Loading } from "@/components/Loading";
+import { useRouter } from "@/navigation";
+import { useEffect } from "react";
+
+export function RedirectOnLoad({ url }: { url: string }) {
+  const router = useRouter();
+  useEffect(() => {
+    router.replace(url);
+  }, [router, url]);
+  return <Loading />;
+}