From 5a317f59c025cb6522fc277e8377bac799a9f162 Mon Sep 17 00:00:00 2001
From: Antonio Bergas <anthonyprincedom@hotmail.com>
Date: Sat, 23 Sep 2023 11:09:29 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8feat(homePlugin):=20changed=20list=20v?=
 =?UTF-8?q?iew=20of=20starredEntities=20to=20facilitate=20distinguish=20en?=
 =?UTF-8?q?tities=20with=20same=20name?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Antonio Bergas <anthonyprincedom@hotmail.com>
---
 .changeset/healthy-feet-kick.md               |  5 ++
 .../StarredEntities/Content.tsx               | 80 ++++++++++++-------
 2 files changed, 56 insertions(+), 29 deletions(-)
 create mode 100644 .changeset/healthy-feet-kick.md

diff --git a/.changeset/healthy-feet-kick.md b/.changeset/healthy-feet-kick.md
new file mode 100644
index 0000000000..732f2164c3
--- /dev/null
+++ b/.changeset/healthy-feet-kick.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-home': minor
+---
+
+Added view of entities grouped by kind to make it easier to distinguish entities with different kind but same name
diff --git a/plugins/home/src/homePageComponents/StarredEntities/Content.tsx b/plugins/home/src/homePageComponents/StarredEntities/Content.tsx
index 4654a7f860..4818aad809 100644
--- a/plugins/home/src/homePageComponents/StarredEntities/Content.tsx
+++ b/plugins/home/src/homePageComponents/StarredEntities/Content.tsx
@@ -20,7 +20,11 @@ import {
   entityRouteParams,
   entityRouteRef,
 } from '@backstage/plugin-catalog-react';
-import { parseEntityRef, stringifyEntityRef } from '@backstage/catalog-model';
+import {
+  Entity,
+  parseEntityRef,
+  stringifyEntityRef,
+} from '@backstage/catalog-model';
 import { useApi, useRouteRef } from '@backstage/core-plugin-api';
 import { Link, Progress, ResponseErrorPanel } from '@backstage/core-components';
 import {
@@ -87,37 +91,55 @@ export const Content = (props: {
   if (entities.loading) {
     return <Progress />;
   }
+  const groupedEntities: { [kind: string]: Entity[] } = {};
+
+  entities.value?.forEach(entity => {
+    const kind = entity.kind;
+    if (!groupedEntities[kind]) {
+      groupedEntities[kind] = [];
+    }
+    groupedEntities[kind].push(entity);
+  });
+
+  const entityEntries = Object.entries(groupedEntities);
 
   return entities.error ? (
     <ResponseErrorPanel error={entities.error} />
   ) : (
-    <List>
-      {entities.value
-        ?.sort((a, b) =>
-          (a.metadata.title ?? a.metadata.name).localeCompare(
-            b.metadata.title ?? b.metadata.name,
-          ),
-        )
-        .map(entity => (
-          <ListItem key={stringifyEntityRef(entity)}>
-            <Link to={catalogEntityRoute(entityRouteParams(entity))}>
-              <ListItemText
-                primary={entity.metadata.title ?? entity.metadata.name}
-              />
-            </Link>
-            <ListItemSecondaryAction>
-              <Tooltip title="Remove from starred">
-                <IconButton
-                  edge="end"
-                  aria-label="unstar"
-                  onClick={() => toggleStarredEntity(entity)}
-                >
-                  <StarIcon style={{ color: '#f3ba37' }} />
-                </IconButton>
-              </Tooltip>
-            </ListItemSecondaryAction>
-          </ListItem>
-        ))}
-    </List>
+    <div>
+      {entityEntries.map(([kind, entitiesByKind]) => (
+        <div key={kind}>
+          <Typography variant="h6">{kind}</Typography> {/* Kind as Title */}
+          <List>
+            {entitiesByKind
+              ?.sort((a, b) =>
+                (a.metadata.title ?? a.metadata.name).localeCompare(
+                  b.metadata.title ?? b.metadata.name,
+                ),
+              )
+              .map(entity => (
+                <ListItem key={stringifyEntityRef(entity)}>
+                  <Link to={catalogEntityRoute(entityRouteParams(entity))}>
+                    <ListItemText
+                      primary={entity.metadata.title ?? entity.metadata.name}
+                    />
+                  </Link>
+                  <ListItemSecondaryAction>
+                    <Tooltip title="Remove from starred">
+                      <IconButton
+                        edge="end"
+                        aria-label="unstar"
+                        onClick={() => toggleStarredEntity(entity)}
+                      >
+                        <StarIcon style={{ color: '#f3ba37' }} />
+                      </IconButton>
+                    </Tooltip>
+                  </ListItemSecondaryAction>
+                </ListItem>
+              ))}
+          </List>
+        </div>
+      ))}
+    </div>
   );
 };