From 10362e9ebd9cde60748e328c46ccf6b6258ae23b Mon Sep 17 00:00:00 2001
From: Oliver Sand <oliver.sand@sda-se.com>
Date: Tue, 23 Feb 2021 09:41:38 +0100
Subject: [PATCH] Use entity relation for the owner of an entity in the catalog
 entity page header

Signed-off-by: Oliver Sand <oliver.sand@sda-se.com>
---
 .changeset/new-forks-perform.md               |  5 ++
 .../EntityPageLayout/EntityPageLayout.tsx     | 50 +++++++++++++------
 2 files changed, 39 insertions(+), 16 deletions(-)
 create mode 100644 .changeset/new-forks-perform.md

diff --git a/.changeset/new-forks-perform.md b/.changeset/new-forks-perform.md
new file mode 100644
index 0000000000..04d6d59be1
--- /dev/null
+++ b/.changeset/new-forks-perform.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-catalog': patch
+---
+
+Use entity relation for the owner of an entity in the catalog entity page header.
diff --git a/plugins/catalog/src/components/EntityPageLayout/EntityPageLayout.tsx b/plugins/catalog/src/components/EntityPageLayout/EntityPageLayout.tsx
index 1f42cc7cc1..34378d5496 100644
--- a/plugins/catalog/src/components/EntityPageLayout/EntityPageLayout.tsx
+++ b/plugins/catalog/src/components/EntityPageLayout/EntityPageLayout.tsx
@@ -13,20 +13,25 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { Entity, ENTITY_DEFAULT_NAMESPACE } from '@backstage/catalog-model';
+import {
+  Entity,
+  ENTITY_DEFAULT_NAMESPACE,
+  RELATION_OWNED_BY,
+} from '@backstage/catalog-model';
 import { Content, Header, HeaderLabel, Page, Progress } from '@backstage/core';
+import {
+  EntityContext,
+  EntityRefLinks,
+  getEntityRelations,
+  useEntityCompoundName,
+} from '@backstage/plugin-catalog-react';
 import { Box } from '@material-ui/core';
 import { Alert } from '@material-ui/lab';
 import React, { PropsWithChildren, useContext, useState } from 'react';
 import { useNavigate } from 'react-router';
-import {
-  EntityContext,
-  useEntityCompoundName,
-} from '@backstage/plugin-catalog-react';
 import { EntityContextMenu } from '../EntityContextMenu/EntityContextMenu';
 import { FavouriteEntity } from '../FavouriteEntity/FavouriteEntity';
 import { UnregisterEntityDialog } from '../UnregisterEntityDialog/UnregisterEntityDialog';
-
 import { Tabbed } from './Tabbed';
 
 const EntityPageTitle = ({
@@ -42,6 +47,26 @@ const EntityPageTitle = ({
   </Box>
 );
 
+const EntityLabels = ({ entity }: { entity: Entity }) => {
+  const ownedByRelations = getEntityRelations(entity, RELATION_OWNED_BY);
+
+  return (
+    <>
+      {ownedByRelations.length > 0 && (
+        <HeaderLabel
+          label="Owner"
+          value={
+            <EntityRefLinks entityRefs={ownedByRelations} color="inherit" />
+          }
+        />
+      )}
+      {entity.spec?.lifecycle && (
+        <HeaderLabel label="Lifecycle" value={entity.spec.lifecycle} />
+      )}
+    </>
+  );
+};
+
 const headerProps = (
   kind: string,
   namespace: string | undefined,
@@ -91,17 +116,10 @@ export const EntityPageLayout = ({ children }: PropsWithChildren<{}>) => {
         pageTitleOverride={headerTitle}
         type={headerType}
       >
-        {/* TODO: fix after catalog page customization is added */}
-        {entity && kind !== 'user' && (
+        {/* TODO: Make entity labels configurable for entity kind / type */}
+        {entity && (
           <>
-            <HeaderLabel
-              label="Owner"
-              value={entity.spec?.owner || 'unknown'}
-            />
-            <HeaderLabel
-              label="Lifecycle"
-              value={entity.spec?.lifecycle || 'unknown'}
-            />
+            <EntityLabels entity={entity} />
             <EntityContextMenu onUnregisterEntity={showRemovalDialog} />
           </>
         )}