From f67da5d63e652f36f90c1e468f0543079a86fd3c Mon Sep 17 00:00:00 2001
From: hemahg <hhg@redhat.com>
Date: Mon, 28 Oct 2024 17:37:57 +0530
Subject: [PATCH] feat: hide pause button when Kafka cluster is unmanaged

Signed-off-by: hemahg <hhg@redhat.com>
---
 ui/api/kafka/schema.ts                        |  1 +
 .../@header/overview/ConnectButton.tsx        | 38 +++++++++++--------
 .../kafka/[kafkaId]/@header/overview/page.tsx | 19 +++++++---
 3 files changed, 38 insertions(+), 20 deletions(-)

diff --git a/ui/api/kafka/schema.ts b/ui/api/kafka/schema.ts
index 95c09b7f2..c0c0bbe42 100644
--- 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
index 35a7eb44f..4c2c48923 100644
--- 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
index 0d4f8f3e9..864b990b9 100644
--- 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} />,
+      ]}
     />
   );
 }