Repository: streamshub/console
Pull request #1487: Remove cluster name from recently viewed topic card
Author: login: hemahg
Created: 2025-02-25T16:38:53Z | Merged: 2025-04-04T12:43:19Z

Remove cluster name from recently viewed topic card
Add topic status to the recently viewed topic card

![Screenshot 2025-02-25 at 8 14 15 PM](https://github.com/user-attachments/assets/4e60f64c-f984-4788-8aea-1e25306f0867)



Diff:
diff --git a/ui/api/topics/actions.ts b/ui/api/topics/actions.ts
index 1c8da200a..44c41bf93 100644
--- a/ui/api/topics/actions.ts
+++ b/ui/api/topics/actions.ts
@@ -1,5 +1,15 @@
 "use server";
-import { fetchData, patchData, postData, getHeaders, ApiResponse, filterEq, filterIn, filterLike, sortParam } from "@/api/api";
+import {
+  fetchData,
+  patchData,
+  postData,
+  getHeaders,
+  ApiResponse,
+  filterEq,
+  filterIn,
+  filterLike,
+  sortParam,
+} from "@/api/api";
 import { getKafkaCluster } from "@/api/kafka/actions";
 import {
   describeTopicsQuery,
@@ -54,10 +64,8 @@ export async function getTopics(
     }),
   );
 
-  return fetchData(
-    `/api/kafkas/${kafkaId}/topics`,
-    sp,
-    (rawData: any) => TopicsResponseSchema.parse(rawData),
+  return fetchData(`/api/kafkas/${kafkaId}/topics`, sp, (rawData: any) =>
+    TopicsResponseSchema.parse(rawData),
   );
 }
 
@@ -96,7 +104,7 @@ export async function createTopic(
         },
       },
     },
-    (rawData) => TopicCreateResponseSchema.parse(rawData)
+    (rawData) => TopicCreateResponseSchema.parse(rawData),
   );
 }
 
@@ -120,7 +128,7 @@ export async function updateTopic(
         },
       },
     },
-    _ => undefined
+    (_) => undefined,
   );
 }
 
diff --git a/ui/components/ClusterOverview/components/TopicsTable.stories.tsx b/ui/components/ClusterOverview/components/TopicsTable.stories.tsx
index 3a50a83f0..0fc218085 100644
--- a/ui/components/ClusterOverview/components/TopicsTable.stories.tsx
+++ b/ui/components/ClusterOverview/components/TopicsTable.stories.tsx
@@ -1,7 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { TopicsTable } from "./TopicsTable";
 
-
 const meta: Meta<typeof TopicsTable> = {
   component: TopicsTable,
   args: {
@@ -9,7 +8,6 @@ const meta: Meta<typeof TopicsTable> = {
   },
 } as Meta<typeof TopicsTable>;
 
-
 export default meta;
 type Story = StoryObj<typeof TopicsTable>;
 
@@ -20,32 +18,32 @@ export const Default: Story = {
         kafkaId: "1",
         kafkaName: "kafka1",
         topicId: "1",
-        topicName: "console_datagen_000-a"
+        topicName: "console_datagen_000-a",
       },
       {
         kafkaId: "1",
         kafkaName: "kafka1",
         topicId: "3",
-        topicName: "console_datagen_000-b"
+        topicName: "console_datagen_000-b",
       },
       {
         kafkaId: "2",
         kafkaName: "kafka2",
         topicId: "1",
-        topicName: "__consumer_offsets"
+        topicName: "__consumer_offsets",
       },
       {
         kafkaId: "2",
         kafkaName: "kafka2",
         topicId: "4",
-        topicName: "console_datagen_002-a"
+        topicName: "console_datagen_002-a",
       },
       {
         kafkaId: "2",
         kafkaName: "kafka2",
         topicId: "6",
-        topicName: "console_datagen_002-b"
+        topicName: "console_datagen_002-b",
       },
-    ]
+    ],
   },
 };
diff --git a/ui/components/ClusterOverview/components/TopicsTable.tsx b/ui/components/ClusterOverview/components/TopicsTable.tsx
index f410dadcc..44424b495 100644
--- a/ui/components/ClusterOverview/components/TopicsTable.tsx
+++ b/ui/components/ClusterOverview/components/TopicsTable.tsx
@@ -6,7 +6,7 @@ import { Truncate } from "@patternfly/react-core";
 import { TableVariant } from "@patternfly/react-table";
 import { useTranslations } from "next-intl";
 
-export const TopicsTableColumns = ["name", "cluster"] as const;
+export const TopicsTableColumns = ["name"] as const;
 
 export type TopicsTableProps = {
   topics: ViewedTopic[] | undefined;
@@ -28,12 +28,6 @@ export function TopicsTable({ topics }: TopicsTableProps) {
                 {t("recently_viewed_topics.topic_name")}
               </Th>
             );
-          case "cluster":
-            return (
-              <Th key={key} dataLabel={"Cluster"}>
-                {t("recently_viewed_topics.cluster")}
-              </Th>
-            );
         }
       }}
       renderCell={({ Td, column, row, key }) => {
@@ -46,12 +40,6 @@ export function TopicsTable({ topics }: TopicsTableProps) {
                 </Link>
               </Td>
             );
-          case "cluster":
-            return (
-              <Td key={key} dataLabel={"Cluster"}>
-                <Link href={`/kafka/${row.kafkaId}`}>{row.kafkaName}</Link>
-              </Td>
-            );
         }
       }}
       variant={TableVariant.compact}
diff --git a/ui/messages/en.json b/ui/messages/en.json
index 1b36df9da..1e6be7ae5 100644
--- a/ui/messages/en.json
+++ b/ui/messages/en.json
@@ -215,8 +215,7 @@
       "replica": "Replica"
     },
     "recently_viewed_topics": {
-      "topic_name": "Name",
-      "cluster": "Cluster"
+      "topic_name": "Name"
     }
   },
   "topic-creator": {


Reviews:
user: login: MikeEdgar
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-02-25T16:48:01Z
user: login: MikeEdgar
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-02-27T12:11:51Z
user: login: hemahg
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-04T08:28:28Z
user: login: MikeEdgar
body: Looks good, thanks @hemahg . Just a couple questions.
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-04-04T09:53:35Z
user: login: hemahg
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-04T10:05:11Z
user: login: hemahg
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-04T10:12:25Z
user: login: MikeEdgar
body: Thanks! :+1: 
state: APPROVED
author_association: MEMBER
submitted_at: 2025-04-04T10:13:14Z

Review comments:
diff_hunk: @@ -177,6 +186,7 @@ export async function setTopicAsViewed(kafkaId: string, topicId: string) {
       topicId,
       // name is included in the `fields[topics]` param list so we are sure it is present
       topicName: topic.attributes.name!,
+      topicStatus: topic.attributes.status!,
path: ui/api/topics/actions.ts
user: login: MikeEdgar
body: Just something to be aware of is that the topic status in the overview card will always have the status that it had at the point it was last viewed. Are we OK with that? Having the status be up-to-date would require `getViewedTopics` to be more complex to actually load the topics fresh.
created_at: 2025-02-25T16:47:58Z
author_association: MEMBER
diff_hunk: @@ -177,6 +186,7 @@ export async function setTopicAsViewed(kafkaId: string, topicId: string) {
       topicId,
       // name is included in the `fields[topics]` param list so we are sure it is present
       topicName: topic.attributes.name!,
+      topicStatus: topic.attributes.status!,
path: ui/api/topics/actions.ts
user: login: MikeEdgar
body: Thinking about this again, maybe it would be better to just list the topic name and not the status to avoid it being stale? What do you think @hemahg @shirimordechay ?
created_at: 2025-02-27T12:11:51Z
author_association: MEMBER
diff_hunk: @@ -177,6 +186,7 @@ export async function setTopicAsViewed(kafkaId: string, topicId: string) {
       topicId,
       // name is included in the `fields[topics]` param list so we are sure it is present
       topicName: topic.attributes.name!,
+      topicStatus: topic.attributes.status!,
path: ui/api/topics/actions.ts
user: login: hemahg
body: @MikeEdgar As discussed, I have removed the status field from the table for now.
created_at: 2025-04-04T08:28:28Z
author_association: CONTRIBUTOR
path: ui/components/ClusterOverview/ClusterMessages.tsx
user: login: MikeEdgar
body: I didn't see this referenced in the code, is it needed anymore?
created_at: 2025-04-04T09:52:51Z
author_association: MEMBER
diff_hunk: @@ -5,8 +5,58 @@ import { Link } from "@/i18n/routing";
 import { Truncate } from "@patternfly/react-core";
 import { TableVariant } from "@patternfly/react-table";
 import { useTranslations } from "next-intl";
+import { ReactNode } from "react";
+import { Icon } from "@/libs/patternfly/react-core";
+import {
+  CheckCircleIcon,
+  ExclamationCircleIcon,
+  ExclamationTriangleIcon,
+} from "@/libs/patternfly/react-icons";
+import { TopicStatus } from "@/api/topics/schema";
 
-export const TopicsTableColumns = ["name", "cluster"] as const;
+export const TopicsTableColumns = ["name"] as const;
+const StatusLabel: Record<TopicStatus, ReactNode> = {
path: ui/components/ClusterOverview/components/TopicsTable.tsx
user: login: MikeEdgar
body: Can these labels be removed too?
created_at: 2025-04-04T09:53:08Z
author_association: MEMBER
diff_hunk: @@ -5,8 +5,58 @@ import { Link } from "@/i18n/routing";
 import { Truncate } from "@patternfly/react-core";
 import { TableVariant } from "@patternfly/react-table";
 import { useTranslations } from "next-intl";
+import { ReactNode } from "react";
+import { Icon } from "@/libs/patternfly/react-core";
+import {
+  CheckCircleIcon,
+  ExclamationCircleIcon,
+  ExclamationTriangleIcon,
+} from "@/libs/patternfly/react-icons";
+import { TopicStatus } from "@/api/topics/schema";
 
-export const TopicsTableColumns = ["name", "cluster"] as const;
+export const TopicsTableColumns = ["name"] as const;
+const StatusLabel: Record<TopicStatus, ReactNode> = {
path: ui/components/ClusterOverview/components/TopicsTable.tsx
user: login: hemahg
body: I didn't notice it. Thanks for pointing it out! I have removed it.
created_at: 2025-04-04T10:05:11Z
author_association: CONTRIBUTOR
path: ui/components/ClusterOverview/ClusterMessages.tsx
user: login: hemahg
body: removed it
created_at: 2025-04-04T10:12:25Z
author_association: CONTRIBUTOR

PR comments:
user: login: sonarqubecloud[bot]
created_at: 2025-02-25T17:01:34Z
body: ## [![Quality Gate Passed](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/checks/QualityGateBadge/qg-passed-20px.png 'Quality Gate Passed')](https://sonarcloud.io/dashboard?id=streamshub_console&pullRequest=1487) **Quality Gate passed**  
Issues  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0 New issues](https://sonarcloud.io/project/issues?id=streamshub_console&pullRequest=1487&issueStatuses=OPEN,CONFIRMED&sinceLeakPeriod=true)  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/accepted-16px.png '') [0 Accepted issues](https://sonarcloud.io/project/issues?id=streamshub_console&pullRequest=1487&issueStatuses=ACCEPTED)

Measures  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0 Security Hotspots](https://sonarcloud.io/project/security_hotspots?id=streamshub_console&pullRequest=1487&issueStatuses=OPEN,CONFIRMED&sinceLeakPeriod=true)  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0.0% Coverage on New Code](https://sonarcloud.io/component_measures?id=streamshub_console&pullRequest=1487&metric=new_coverage&view=list)  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0.0% Duplication on New Code](https://sonarcloud.io/component_measures?id=streamshub_console&pullRequest=1487&metric=new_duplicated_lines_density&view=list)  
  
[See analysis details on SonarQube Cloud](https://sonarcloud.io/dashboard?id=streamshub_console&pullRequest=1487)


author_association: NONE
user: login: sonarqubecloud[bot]
created_at: 2025-04-04T10:33:15Z
body: ## [![Quality Gate Passed](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/checks/QualityGateBadge/qg-passed-20px.png 'Quality Gate Passed')](https://sonarcloud.io/dashboard?id=streamshub_console&pullRequest=1487) **Quality Gate passed**  
Issues  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0 New issues](https://sonarcloud.io/project/issues?id=streamshub_console&pullRequest=1487&issueStatuses=OPEN,CONFIRMED&sinceLeakPeriod=true)  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/accepted-16px.png '') [0 Accepted issues](https://sonarcloud.io/project/issues?id=streamshub_console&pullRequest=1487&issueStatuses=ACCEPTED)

Measures  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0 Security Hotspots](https://sonarcloud.io/project/security_hotspots?id=streamshub_console&pullRequest=1487&issueStatuses=OPEN,CONFIRMED&sinceLeakPeriod=true)  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0.0% Coverage on New Code](https://sonarcloud.io/component_measures?id=streamshub_console&pullRequest=1487&metric=new_coverage&view=list)  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0.0% Duplication on New Code](https://sonarcloud.io/component_measures?id=streamshub_console&pullRequest=1487&metric=new_duplicated_lines_density&view=list)  
  
[See analysis details on SonarQube Cloud](https://sonarcloud.io/dashboard?id=streamshub_console&pullRequest=1487)


author_association: NONE