feat(core/managed): let resource plugins define their own links (#8550)

Co-authored-by: mergify[bot] <37929162+mergify[bot]@users.noreply.github.com>

app/scripts/modules/core/src/managed/ManagedResourceObject.tsx

@@ -8,7 +8,7 @@ import { IManagedResourceSummary, IManagedEnviromentSummary, IManagedArtifactSum
 import { getKindName } from './ManagedReader';
 import { ObjectRow } from './ObjectRow';
 import { AnimatingPill, Pill } from './Pill';
-import { getResourceIcon } from './resources/resourceRegistry';
+import { getResourceIcon, getExperimentalDisplayLink } from './resources/resourceRegistry';
 import { getArtifactVersionDisplayName } from './displayNames';
 import { StatusBubble } from './StatusBubble';
 import { viewConfigurationByStatus } from './managedResourceStatusConfig';
@@ -60,8 +60,14 @@ const getNativeResourceRoutingInfo = (
 export const ManagedResourceObject = memo(
   ({ application, resource, artifactVersionsByState, artifactDetails, depth }: IManagedResourceObjectProps) => {
     const { kind, displayName } = resource;
+
     const routingInfo = getNativeResourceRoutingInfo(resource) ?? { state: '', params: {} };
-    const route = useSref(routingInfo.state, routingInfo.params);
+    const routeProps = useSref(routingInfo.state, routingInfo.params);
+
+    const displayLink = getExperimentalDisplayLink(resource);
+    const displayLinkProps = displayLink && { href: displayLink, target: '_blank', rel: 'noopener noreferrer' };
+
+    const linkProps = routeProps.href ? routeProps : displayLinkProps;
 
     const current =
       artifactVersionsByState?.current &&
@@ -88,7 +94,7 @@ export const ManagedResourceObject = memo(
     return (
       <ObjectRow
         icon={getResourceIcon(kind)}
-        title={route ? <a {...route}>{displayName}</a> : displayName}
+        title={linkProps ? <a {...linkProps}>{displayName}</a> : displayName}
         depth={depth}
         content={resourceStatus}
         metadata={

app/scripts/modules/core/src/managed/resources/resourceRegistry.ts

@@ -1,4 +1,5 @@
 import { IconNames } from '../../presentation';
+import { IManagedResourceSummary } from '../../domain';
 
 const UNKNOWN_RESOURCE_ICON = 'placeholder';
 
@@ -7,6 +8,11 @@ const resourceConfigsByKind: { [kind: string]: IResourceKindConfig } = {};
 export interface IResourceKindConfig {
   kind: string;
   iconName: IconNames;
+  // Short-term way of making custom links on the client for each resource.
+  // Soon we'll add a details drawer that all resource kinds will open when clicked,
+  // and each kind will implement their details drawer with any relevant links/pointers.
+  // This should be removed when that work is complete.
+  experimentalDisplayLink?: (resource: IManagedResourceSummary) => string;
 }
 
 export const isResourceKindSupported = (kind: string) => resourceConfigsByKind.hasOwnProperty(kind);
@@ -16,3 +22,6 @@ export const registerResourceKind = (config: IResourceKindConfig) => {
 };
 
 export const getResourceIcon = (kind: string) => resourceConfigsByKind[kind]?.iconName ?? UNKNOWN_RESOURCE_ICON;
+
+export const getExperimentalDisplayLink = (resource: IManagedResourceSummary) =>
+  resourceConfigsByKind[resource.kind]?.experimentalDisplayLink?.(resource) ?? null;