From 23afdba96f4ca6539cbd22ba487eb25ed599eed6 Mon Sep 17 00:00:00 2001
From: Oliver Sand <oliver.sand@sda-se.com>
Date: Thu, 22 Apr 2021 13:25:55 +0200
Subject: [PATCH] Use `EntityRefLink` in header and use relations to reference
 the owner of the document

Signed-off-by: Oliver Sand <oliver.sand@sda-se.com>
---
 .changeset/lovely-wombats-relate.md           |  6 +++
 .../reader/components/TechDocsPageHeader.tsx  | 51 +++++++++----------
 2 files changed, 31 insertions(+), 26 deletions(-)
 create mode 100644 .changeset/lovely-wombats-relate.md

diff --git a/.changeset/lovely-wombats-relate.md b/.changeset/lovely-wombats-relate.md
new file mode 100644
index 0000000000..33ed205c89
--- /dev/null
+++ b/.changeset/lovely-wombats-relate.md
@@ -0,0 +1,6 @@
+---
+'@backstage/plugin-techdocs': patch
+---
+
+Use `EntityRefLink` in header and use relations to reference the owner of the
+document.
diff --git a/plugins/techdocs/src/reader/components/TechDocsPageHeader.tsx b/plugins/techdocs/src/reader/components/TechDocsPageHeader.tsx
index 1d4321001d..10df7bff78 100644
--- a/plugins/techdocs/src/reader/components/TechDocsPageHeader.tsx
+++ b/plugins/techdocs/src/reader/components/TechDocsPageHeader.tsx
@@ -14,14 +14,18 @@
  * limitations under the License.
  */
 
+import { EntityName, RELATION_OWNED_BY } from '@backstage/catalog-model';
+import { Header, HeaderLabel, useRouteRef } from '@backstage/core';
+import {
+  EntityRefLink,
+  EntityRefLinks,
+  getEntityRelations,
+} from '@backstage/plugin-catalog-react';
+import CodeIcon from '@material-ui/icons/Code';
 import React from 'react';
 import { AsyncState } from 'react-use/lib/useAsync';
-import CodeIcon from '@material-ui/icons/Code';
-import { EntityName, parseEntityName } from '@backstage/catalog-model';
-import { Header, HeaderLabel, Link, useRouteRef } from '@backstage/core';
-import { TechDocsMetadata } from '../../types';
-import { EntityRefLink, entityRouteRef } from '@backstage/plugin-catalog-react';
 import { rootRouteRef } from '../../plugin';
+import { TechDocsMetadata } from '../../types';
 
 type TechDocsPageHeaderProps = {
   entityId: EntityName;
@@ -50,15 +54,12 @@ export const TechDocsPageHeader = ({
 
   const {
     locationMetadata,
-    spec: { owner, lifecycle },
+    spec: { lifecycle },
   } = entityMetadataValues || { spec: {} };
 
-  const componentLink = useRouteRef(entityRouteRef);
-
-  let ownerEntity;
-  if (owner) {
-    ownerEntity = parseEntityName(owner, { defaultKind: 'group' });
-  }
+  const ownedByRelations = entityMetadataValues
+    ? getEntityRelations(entityMetadataValues, RELATION_OWNED_BY)
+    : [];
 
   const docsRootLink = useRouteRef(rootRouteRef)();
 
@@ -67,27 +68,25 @@ export const TechDocsPageHeader = ({
       <HeaderLabel
         label="Component"
         value={
-          <Link style={{ color: '#fff' }} to={componentLink(entityId)}>
-            {name}
-          </Link>
+          <EntityRefLink
+            color="inherit"
+            entityRef={entityId}
+            defaultKind="Component"
+          />
         }
       />
-      {owner ? (
+      {ownedByRelations.length > 0 && (
         <HeaderLabel
           label="Owner"
           value={
-            ownerEntity ? (
-              <EntityRefLink
-                style={{ color: '#fff' }}
-                entityRef={ownerEntity}
-                defaultKind="group"
-              />
-            ) : (
-              owner
-            )
+            <EntityRefLinks
+              color="inherit"
+              entityRefs={ownedByRelations}
+              defaultKind="group"
+            />
           }
         />
-      ) : null}
+      )}
       {lifecycle ? <HeaderLabel label="Lifecycle" value={lifecycle} /> : null}
       {locationMetadata &&
       locationMetadata.type !== 'dir' &&