Merge pull request #4571 from SDA-SE/feat/domain-owner

Display the owner of the domain on the domain card

plugins/catalog-react/src/components/EntityRefLink/EntityRefLink.tsx

@@ -15,22 +15,22 @@
  */
 import {
   Entity,
-  ENTITY_DEFAULT_NAMESPACE,
   EntityName,
+  ENTITY_DEFAULT_NAMESPACE,
 } from '@backstage/catalog-model';
-import { Link } from '@backstage/core';
-import React from 'react';
+import { Link, LinkProps } from '@backstage/core';
+import React, { forwardRef } from 'react';
 import { generatePath } from 'react-router';
 import { entityRoute } from '../../routes';
 import { formatEntityRefTitle } from './format';
 
-type EntityRefLinkProps = {
+export type EntityRefLinkProps = {
   entityRef: Entity | EntityName;
   defaultKind?: string;
   children?: React.ReactNode;
-};
+} & Omit<LinkProps, 'to'>;
 
-export const EntityRefLink = React.forwardRef<any, EntityRefLinkProps>(
+export const EntityRefLink = forwardRef<any, EntityRefLinkProps>(
   (props, ref) => {
     const { entityRef, defaultKind, children, ...linkProps } = props;
 
@@ -59,9 +59,9 @@ export const EntityRefLink = React.forwardRef<any, EntityRefLinkProps>(
     // TODO: Use useRouteRef here to generate the path
     return (
       <Link
+        {...linkProps}
         ref={ref}
         to={generatePath(`/catalog/${entityRoute.path}`, routeParams)}
-        {...linkProps}
       >
         {children}
         {!children && formatEntityRefTitle(entityRef, { defaultKind })}

plugins/catalog-react/src/components/EntityRefLink/EntityRefLinks.tsx

@@ -14,26 +14,26 @@
  * limitations under the License.
  */
 import { Entity, EntityName } from '@backstage/catalog-model';
+import { LinkProps } from '@backstage/core';
 import React from 'react';
 import { EntityRefLink } from './EntityRefLink';
 
-type EntityRefLinksProps = {
+export type EntityRefLinksProps = {
   entityRefs: (Entity | EntityName)[];
   defaultKind?: string;
-};
+} & Omit<LinkProps, 'to'>;
 
 export const EntityRefLinks = ({
   entityRefs,
   defaultKind,
-}: EntityRefLinksProps) => {
-  return (
-    <>
-      {entityRefs.map((r, i) => (
-        <React.Fragment key={i}>
-          {i > 0 && ', '}
-          <EntityRefLink entityRef={r} defaultKind={defaultKind} />
-        </React.Fragment>
-      ))}
-    </>
-  );
-};
+  ...linkProps
+}: EntityRefLinksProps) => (
+  <>
+    {entityRefs.map((r, i) => (
+      <React.Fragment key={i}>
+        {i > 0 && ', '}
+        <EntityRefLink {...linkProps} entityRef={r} defaultKind={defaultKind} />
+      </React.Fragment>
+    ))}
+  </>
+);

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),
+      )}
+    />
+  );
+};