Added a “Virtual” label to Kafka clusters in the cluster dropdown when the cluster is virtual. (#2300)

* Add a “Virtual” label to Kafka clusters in the cluster dropdown when the cluster is virtual.

Signed-off-by: hemahg <hhg@redhat.com>

* Check for isVirtualKafkaCluster in the dropdown

Signed-off-by: hemahg <hhg@redhat.com>

---------

Signed-off-by: hemahg <hhg@redhat.com>

Author: hemahg

ui/app/[locale]/(authorized)/kafka/[kafkaId]/layout.tsx

@@ -44,13 +44,16 @@ export default async function AsyncLayout({
     const namespace = cluster.attributes?.namespace ?? "Not provided";
     const authMethod =
       cluster.meta?.authentication?.method ?? "no authentication";
+    const isVirtualKafkaCluster =
+      cluster.meta?.kind === "virtualkafkaclusters.kroxylicious.io";
 
     return {
       clusterName: name,
       projectName: namespace,
       authenticationMethod: authMethod,
       id: id,
       loginRequired: loginRequired,
+      isVirtual: isVirtualKafkaCluster,
     };
   });
 

ui/components/AppDropdown.tsx

@@ -23,13 +23,15 @@ import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { useRef, useState } from "react";
 import { useTranslations } from "next-intl";
+import { KroxyliciousClusterLabel } from "@/app/[locale]/(authorized)/kafka/[kafkaId]/KroxyliciousClusterLabel";
 
 export type ClusterInfo = {
   projectName: string;
   clusterName: string;
   authenticationMethod: string;
   id: string;
   loginRequired: boolean;
+  isVirtual: boolean;
 };
 
 export function AppDropdown({
@@ -40,6 +42,7 @@ export function AppDropdown({
   readonly clusters: ClusterInfo[];
   readonly kafkaId: string;
   readonly isOidcEnabled?: boolean;
+  readonly isVirtualKafkaCluster?: boolean;
 }>) {
   const t = useTranslations();
   const router = useRouter();
@@ -117,7 +120,10 @@ export function AppDropdown({
             isSelected={kafkaId === cluster.id}
           >
             <Flex>
-              <FlexItem>{cluster.clusterName}</FlexItem>
+              <FlexItem>
+                {cluster.clusterName}
+                {cluster.isVirtual && <KroxyliciousClusterLabel />}
+              </FlexItem>
               <FlexItem align={{ default: "alignRight" }}>
                 {cluster.id !== kafkaId && (
                   <Tooltip content={t("cluster-selector.login-to-cluster")}>