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

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-catalog': patch
+---
+
+Use entity relation for the owner of an entity in the catalog entity page header.

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} />
           </>
         )}