From 347137ccf217ab2cc7e7f84929e4cbb76db28944 Mon Sep 17 00:00:00 2001
From: Oliver Sand <oliver.sand@sda-se.com>
Date: Thu, 18 Feb 2021 11:07:54 +0100
Subject: [PATCH] Display the owner of a domain on the domain card

Signed-off-by: Oliver Sand <oliver.sand@sda-se.com>
---
 .changeset/eight-chefs-reply.md               |  5 +++
 .../src/components/DomainCard/DomainCard.tsx  | 41 ++++++++++++-------
 2 files changed, 32 insertions(+), 14 deletions(-)
 create mode 100644 .changeset/eight-chefs-reply.md

diff --git a/.changeset/eight-chefs-reply.md b/.changeset/eight-chefs-reply.md
new file mode 100644
index 0000000000..9e133e2722
--- /dev/null
+++ b/.changeset/eight-chefs-reply.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-explore': patch
+---
+
+Display the owner of a domain on the domain card.
diff --git a/plugins/explore/src/components/DomainCard/DomainCard.tsx b/plugins/explore/src/components/DomainCard/DomainCard.tsx
index 2c0126b94a..e5efc543b2 100644
--- a/plugins/explore/src/components/DomainCard/DomainCard.tsx
+++ b/plugins/explore/src/components/DomainCard/DomainCard.tsx
@@ -13,11 +13,13 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { DomainEntity } from '@backstage/catalog-model';
+import { DomainEntity, RELATION_OWNED_BY } from '@backstage/catalog-model';
 import { ItemCard } from '@backstage/core';
 import {
+  EntityRefLinks,
   entityRoute,
   entityRouteParams,
+  getEntityRelations,
 } from '@backstage/plugin-catalog-react';
 import React from 'react';
 import { generatePath } from 'react-router-dom';
@@ -26,16 +28,27 @@ type DomainCardProps = {
   entity: DomainEntity;
 };
 
-export const DomainCard = ({ entity }: DomainCardProps) => (
-  <ItemCard
-    title={entity.metadata.name}
-    description={entity.metadata.description}
-    tags={entity.metadata.tags}
-    label="Explore"
-    // TODO: Use useRouteRef here to generate the path
-    href={generatePath(
-      `/catalog/${entityRoute.path}`,
-      entityRouteParams(entity),
-    )}
-  />
-);
+export const DomainCard = ({ entity }: DomainCardProps) => {
+  const ownedByRelations = getEntityRelations(entity, RELATION_OWNED_BY);
+
+  return (
+    <ItemCard
+      title={entity.metadata.name}
+      description={entity.metadata.description}
+      tags={entity.metadata.tags}
+      subtitle={
+        <EntityRefLinks
+          entityRefs={ownedByRelations}
+          defaultKind="group"
+          color="inherit"
+        />
+      }
+      label="Explore"
+      // TODO: Use useRouteRef here to generate the path
+      href={generatePath(
+        `/catalog/${entityRoute.path}`,
+        entityRouteParams(entity),
+      )}
+    />
+  );
+};