feat: hide pause button when Kafka cluster is unmanaged

Signed-off-by: hemahg <[email protected]>
streamshub · Oct 28, 2024 · f67da5d · f67da5d
1 parent 2112fa7
commit f67da5d
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 20 deletions.
diff --git a/ui/api/kafka/schema.ts b/ui/api/kafka/schema.ts
@@ -44,6 +44,7 @@ const ClusterDetailSchema = z.object({
   meta: z
     .object({
       reconciliationPaused: z.boolean().optional(),
+      managed: z.boolean(),
     })
     .optional(),
   attributes: z.object({

diff --git a/ui/app/[locale]/(authorized)/kafka/[kafkaId]/@header/overview/ConnectButton.tsx b/ui/app/[locale]/(authorized)/kafka/[kafkaId]/@header/overview/ConnectButton.tsx
@@ -8,7 +8,13 @@ import { Button, Flex, FlexItem } from "@/libs/patternfly/react-core";
 import { useTranslations } from "next-intl";
 import { useState } from "react";
 
-export function ConnectButton({ clusterId }: { clusterId: string }) {
+export function ConnectButton({
+  clusterId,
+  managed,
+}: {
+  clusterId: string;
+  managed: boolean;
+}) {
   const t = useTranslations();
   const open = useOpenClusterConnectionPanel();
 
@@ -33,20 +39,22 @@ export function ConnectButton({ clusterId }: { clusterId: string }) {
   return (
     <>
       <Flex>
-        <FlexItem>
-          <Button
-            variant="secondary"
-            onClick={
-              isReconciliationPaused
-                ? () => onClickUpdate(false)
-                : () => setIsModalOpen(true)
-            }
-          >
-            {isReconciliationPaused
-              ? t("reconciliation.resume_reconciliation")
-              : t("reconciliation.pause_reconciliation_button")}
-          </Button>
-        </FlexItem>
+        {managed && (
+          <FlexItem>
+            <Button
+              variant="secondary"
+              onClick={
+                isReconciliationPaused
+                  ? () => onClickUpdate(false)
+                  : () => setIsModalOpen(true)
+              }
+            >
+              {isReconciliationPaused
+                ? t("reconciliation.resume_reconciliation")
+                : t("reconciliation.pause_reconciliation_button")}
+            </Button>
+          </FlexItem>
+        )}
         <FlexItem>
           <Button onClick={() => open(clusterId)}>
             {t("ConnectButton.cluster_connection_details")}

diff --git a/ui/app/[locale]/(authorized)/kafka/[kafkaId]/@header/overview/page.tsx b/ui/app/[locale]/(authorized)/kafka/[kafkaId]/@header/overview/page.tsx
@@ -3,8 +3,6 @@ import { KafkaParams } from "@/app/[locale]/(authorized)/kafka/[kafkaId]/kafka.p
 import { AppHeader } from "@/components/AppHeader";
 import { useTranslations } from "next-intl";
 import { getKafkaCluster } from "@/api/kafka/actions";
-import { getTopics } from "@/api/topics/actions";
-import { Skeleton } from "@patternfly/react-core";
 import { notFound } from "next/navigation";
 import { Suspense } from "react";
 
@@ -14,7 +12,9 @@ export default function Header({
   params: KafkaParams;
 }) {
   return (
-    <Suspense fallback={<OverviewHeader params={{ kafkaId }} />}>
+    <Suspense
+      fallback={<OverviewHeader params={{ kafkaId }} managed={false} />}
+    >
       <ConnectedHeader params={{ kafkaId }} />
     </Suspense>
   );
@@ -30,20 +30,29 @@ async function ConnectedHeader({
     notFound();
   }
 
-  return <OverviewHeader params={{ kafkaId }} />;
+  return (
+    <OverviewHeader
+      params={{ kafkaId }}
+      managed={cluster.meta?.managed ?? false}
+    />
+  );
 }
 
 export function OverviewHeader({
   params: { kafkaId },
+  managed,
 }: {
   params: KafkaParams;
+  managed: boolean;
 }) {
   const t = useTranslations();
   return (
     <AppHeader
       title={t("ClusterOverview.header")}
       subTitle={t("ClusterOverview.description")}
-      actions={[<ConnectButton key={"cd"} clusterId={kafkaId} />]}
+      actions={[
+        <ConnectButton key={"cd"} clusterId={kafkaId} managed={managed} />,
+      ]}
     />
   );
 }