OCPBUGS-69387: update operator details when changing channels

frontend/packages/operator-lifecycle-manager/src/components/operator-hub/operator-capability.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { useCurrentChannel } from '../../hooks/useCurrentChannel';
+import { PackageManifestKind } from '../../types';
+import { CapabilityLevel } from './operator-hub-item-details';
+
+export const OperatorCapability: React.FC<OperatorCapabilityProps> = ({ packageManifest }) => {
+  const currentChannel = useCurrentChannel(packageManifest);
+  const capabilities = currentChannel?.currentCSVDesc?.annotations?.capabilities;
+
+  return capabilities ? <CapabilityLevel capability={capabilities} /> : <>-</>;
+};
+
+type OperatorCapabilityProps = {
+  packageManifest: PackageManifestKind;
+};

frontend/packages/operator-lifecycle-manager/src/components/operator-hub/operator-container-image.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { useCurrentChannel } from '../../hooks/useCurrentChannel';
+import { PackageManifestKind } from '../../types';
+
+export const OperatorContainerImage: React.FC<OperatorContainerImageProps> = ({
+  packageManifest,
+}) => {
+  const currentChannel = useCurrentChannel(packageManifest);
+  const containerImage = currentChannel?.currentCSVDesc?.annotations?.containerImage;
+
+  return <>{containerImage || '-'}</>;
+};
+
+type OperatorContainerImageProps = {
+  packageManifest: PackageManifestKind;
+};

frontend/packages/operator-lifecycle-manager/src/components/operator-hub/operator-created-at.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { Timestamp } from '@console/shared/src/components/datetime/Timestamp';
+import { useCurrentChannel } from '../../hooks/useCurrentChannel';
+import { PackageManifestKind } from '../../types';
+
+export const OperatorCreatedAt: React.FC<OperatorCreatedAtProps> = ({ packageManifest }) => {
+  const currentChannel = useCurrentChannel(packageManifest);
+  const createdAt = currentChannel?.currentCSVDesc?.annotations?.createdAt;
+
+  return createdAt && !Number.isNaN(Date.parse(createdAt)) ? (
+    <Timestamp timestamp={createdAt} />
+  ) : (
+    <>{createdAt || '-'}</>
+  );
+};
+
+type OperatorCreatedAtProps = {
+  packageManifest: PackageManifestKind;
+};

frontend/packages/operator-lifecycle-manager/src/components/operator-hub/operator-hub-item-details.tsx

@@ -34,7 +34,12 @@ import { DeprecatedOperatorWarningAlert } from '../deprecated-operator-warnings/
 import { useDeprecatedOperatorWarnings } from '../deprecated-operator-warnings/use-deprecated-operator-warnings';
 import { defaultChannelNameFor } from '../index';
 import { OperatorChannelSelect, OperatorVersionSelect } from './operator-channel-version-select';
-import { isAWSSTSCluster, isAzureWIFCluster, isGCPWIFCluster } from './operator-hub-utils';
+import {
+  isAWSSTSCluster,
+  isAzureWIFCluster,
+  isGCPWIFCluster,
+  getInfrastructureFeatures,
+} from './operator-hub-utils';
 import { InfrastructureFeature, OperatorHubItem } from './index';
 
 // t('olm~Basic Install'),
@@ -225,7 +230,6 @@ const OperatorHubItemDetailsHint: React.FCC<OperatorHubItemDetailsHintProps> = (
 export const OperatorDescription: React.FCC<OperatorDescriptionProps> = ({
   catalogSource,
   description,
-  infraFeatures,
   installed,
   isInstalling,
   subscription,
@@ -251,6 +255,24 @@ export const OperatorDescription: React.FCC<OperatorDescriptionProps> = ({
   const currentCSVDescription = useCurrentCSVDescription(packageManifest);
   const selectedChannelDescription = currentCSVDescription?.description || longDescription;
   const packageManifestStatus = packageManifest?.status;
+
+  // Get infrastructure features from the current channel's CSV description
+  const infraFeatures = useMemo(() => {
+    const currentCSVAnnotations = currentCSVDescription?.annotations ?? {};
+    return getInfrastructureFeatures(currentCSVAnnotations, {
+      clusterIsAWSSTS,
+      clusterIsAzureWIF,
+      clusterIsGCPWIF,
+      onError: (error) => {
+        // eslint-disable-next-line no-console
+        console.warn(
+          `Error parsing infrastructure features from PackageManifest "${packageManifest?.metadata?.name}":`,
+          error,
+        );
+      },
+    });
+  }, [currentCSVDescription, clusterIsAWSSTS, clusterIsAzureWIF, clusterIsGCPWIF, packageManifest]);
+
   const [isTokenAuth, isTokenAuthGCP] = useMemo(() => {
     return [
       (infraFeatures ?? []).includes(InfrastructureFeature.TokenAuth),
@@ -337,7 +359,6 @@ export const OperatorHubItemDetails: React.FCC<OperatorHubItemDetailsProps> = ({
     catalogSource,
     source,
     description,
-    infraFeatures,
     installed,
     isInstalling,
     longDescription,
@@ -363,6 +384,28 @@ export const OperatorHubItemDetails: React.FCC<OperatorHubItemDetailsProps> = ({
 
   const mappedData = (data) => data?.map?.((d) => <div key={d}>{d}</div>) ?? notAvailable;
 
+  const selectedUpdateChannel = updateChannel || defaultChannelNameFor(obj);
+  const clusterIsAWSSTS = isAWSSTSCluster(cloudCredentials, infrastructure, authentication);
+  const clusterIsAzureWIF = isAzureWIFCluster(cloudCredentials, infrastructure, authentication);
+  const clusterIsGCPWIF = isGCPWIFCluster(cloudCredentials, infrastructure, authentication);
+
+  // Get infrastructure features from the current channel's CSV description
+  const infraFeatures = useMemo(() => {
+    const currentCSVAnnotations = currentCSVDescription?.annotations ?? {};
+    return getInfrastructureFeatures(currentCSVAnnotations, {
+      clusterIsAWSSTS,
+      clusterIsAzureWIF,
+      clusterIsGCPWIF,
+      onError: (error) => {
+        // eslint-disable-next-line no-console
+        console.warn(
+          `Error parsing infrastructure features from PackageManifest "${obj?.metadata?.name}":`,
+          error,
+        );
+      },
+    });
+  }, [currentCSVDescription, clusterIsAWSSTS, clusterIsAzureWIF, clusterIsGCPWIF, obj]);
+
   const mappedInfraFeatures = mappedData(infraFeatures);
   const mappedValidSubscription = mappedData(validSubscription);
 
@@ -380,11 +423,6 @@ export const OperatorHubItemDetails: React.FCC<OperatorHubItemDetailsProps> = ({
     return null;
   }, [marketplaceSupportWorkflow]);
 
-  const selectedUpdateChannel = updateChannel || defaultChannelNameFor(obj);
-  const clusterIsAWSSTS = isAWSSTSCluster(cloudCredentials, infrastructure, authentication);
-  const clusterIsAzureWIF = isAzureWIFCluster(cloudCredentials, infrastructure, authentication);
-  const clusterIsGCPWIF = isGCPWIFCluster(cloudCredentials, infrastructure, authentication);
-
   return item ? (
     <div className="modal-body modal-body-border">
       <CatalogPageOverlay>
@@ -453,7 +491,6 @@ export const OperatorHubItemDetails: React.FCC<OperatorHubItemDetailsProps> = ({
           <OperatorDescription
             catalogSource={catalogSource}
             description={description}
-            infraFeatures={infraFeatures}
             installed={installed}
             isInstalling={isInstalling}
             subscription={subscription}
@@ -496,7 +533,6 @@ type OperatorHubItemDetailsHintProps = {
 export type OperatorDescriptionProps = {
   catalogSource: string;
   description: string;
-  infraFeatures: InfrastructureFeature[];
   installed: boolean;
   isInstalling: boolean;
   subscription: SubscriptionKind;

frontend/packages/operator-lifecycle-manager/src/components/operator-hub/operator-infrastructure-features.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { PlainList } from '@console/shared/src';
+import { useCurrentChannel } from '../../hooks/useCurrentChannel';
+import { PackageManifestKind } from '../../types';
+import { getInfrastructureFeatures } from './operator-hub-utils';
+import type { CSVAnnotations } from './index';
+
+export const OperatorInfrastructureFeatures: React.FC<OperatorInfrastructureFeaturesProps> = ({
+  packageManifest,
+  clusterIsAWSSTS,
+  clusterIsAzureWIF,
+  clusterIsGCPWIF,
+}) => {
+  const currentChannel = useCurrentChannel(packageManifest);
+  const currentCSVAnnotations: CSVAnnotations = currentChannel?.currentCSVDesc?.annotations ?? {};
+
+  const infrastructureFeatures = getInfrastructureFeatures(currentCSVAnnotations, {
+    clusterIsAWSSTS,
+    clusterIsAzureWIF,
+    clusterIsGCPWIF,
+    onError: (error) =>
+      // eslint-disable-next-line no-console
+      console.warn(
+        `Error parsing infrastructure features from PackageManifest "${packageManifest.metadata.name}":`,
+        error,
+      ),
+  });
+
+  return infrastructureFeatures?.length ? <PlainList items={infrastructureFeatures} /> : <>-</>;
+};
+
+type OperatorInfrastructureFeaturesProps = {
+  packageManifest: PackageManifestKind;
+  clusterIsAWSSTS: boolean;
+  clusterIsAzureWIF: boolean;
+  clusterIsGCPWIF: boolean;
+};

frontend/packages/operator-lifecycle-manager/src/components/operator-hub/operator-repository.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { ExternalLink } from '@console/shared/src/components/links/ExternalLink';
+import { useCurrentChannel } from '../../hooks/useCurrentChannel';
+import { PackageManifestKind } from '../../types';
+
+export const OperatorRepository: React.FC<OperatorRepositoryProps> = ({ packageManifest }) => {
+  const currentChannel = useCurrentChannel(packageManifest);
+  const repository = currentChannel?.currentCSVDesc?.annotations?.repository;
+
+  return repository ? <ExternalLink href={repository} text={repository} /> : <>-</>;
+};
+
+type OperatorRepositoryProps = {
+  packageManifest: PackageManifestKind;
+};

frontend/packages/operator-lifecycle-manager/src/components/operator-hub/operator-support.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { useTranslation } from 'react-i18next';
+import { ExternalLink } from '@console/shared/src/components/links/ExternalLink';
+import { useCurrentChannel } from '../../hooks/useCurrentChannel';
+import { PackageManifestKind } from '../../types';
+import { getSupportWorkflowUrl } from './operator-hub-utils';
+
+export const OperatorSupport: React.FC<OperatorSupportProps> = ({ packageManifest }) => {
+  const { t } = useTranslation('olm');
+  const currentChannel = useCurrentChannel(packageManifest);
+  const currentCSVAnnotations = currentChannel?.currentCSVDesc?.annotations ?? {};
+  const support = currentCSVAnnotations?.support;
+  const marketplaceSupportWorkflow =
+    currentCSVAnnotations?.['marketplace.openshift.io/support-workflow'];
+  const supportWorkflowUrl = getSupportWorkflowUrl(marketplaceSupportWorkflow);
+
+  return supportWorkflowUrl ? (
+    <ExternalLink href={supportWorkflowUrl}>{t('Get support')}</ExternalLink>
+  ) : (
+    <>{support || '-'}</>
+  );
+};
+
+type OperatorSupportProps = {
+  packageManifest: PackageManifestKind;
+};

frontend/packages/operator-lifecycle-manager/src/components/operator-hub/operator-valid-subscriptions.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { PlainList } from '@console/shared/src';
+import { useCurrentChannel } from '../../hooks/useCurrentChannel';
+import { PackageManifestKind } from '../../types';
+import { getValidSubscription } from './operator-hub-utils';
+import type { CSVAnnotations } from './index';
+
+export const OperatorValidSubscriptions: React.FC<OperatorValidSubscriptionsProps> = ({
+  packageManifest,
+}) => {
+  const currentChannel = useCurrentChannel(packageManifest);
+  const currentCSVAnnotations: CSVAnnotations = currentChannel?.currentCSVDesc?.annotations ?? {};
+
+  const [validSubscription] = getValidSubscription(currentCSVAnnotations, {
+    onError: (error) =>
+      // eslint-disable-next-line no-console
+      console.warn(
+        `Error parsing valid subscription from PackageManifest "${packageManifest.metadata.name}":`,
+        error,
+      ),
+  });
+
+  return validSubscription?.length ? <PlainList items={validSubscription} /> : <>-</>;
+};
+
+type OperatorValidSubscriptionsProps = {
+  packageManifest: PackageManifestKind;
+};

frontend/packages/operator-lifecycle-manager/src/hooks/useCurrentCSVDescription.tsx

@@ -1,12 +1,20 @@
-import { getQueryArgument } from '@console/internal/components/utils';
+import { useSearchParams } from 'react-router-dom-v5-compat';
 import { CSVDescription, PackageManifestKind } from '../types';
 
-export const useCurrentCSVDescription: UseCurrentCSVDescription = (packageManifest) => {
-  const installChannel = getQueryArgument('channel') ?? packageManifest?.status?.defaultChannel;
+export const useCurrentCSVDescription: UseCurrentCSVDescription = (
+  packageManifest,
+  selectedChannel?,
+) => {
+  const [searchParams] = useSearchParams();
+  const installChannel =
+    selectedChannel ?? searchParams.get('channel') ?? packageManifest?.status?.defaultChannel;
   const currentChannel =
     packageManifest?.status.channels.find((ch) => ch.name === installChannel) ??
     packageManifest?.status.channels[0];
   return currentChannel?.currentCSVDesc;
 };
 
-type UseCurrentCSVDescription = (packageManifest: PackageManifestKind) => CSVDescription;
+type UseCurrentCSVDescription = (
+  packageManifest: PackageManifestKind,
+  selectedChannel?: string,
+) => CSVDescription;

frontend/packages/operator-lifecycle-manager/src/hooks/useCurrentChannel.tsx

@@ -0,0 +1,22 @@
+import { useSearchParams } from 'react-router-dom-v5-compat';
+import { PackageManifestKind } from '../types';
+
+/**
+ * Returns the currently selected channel based on URL query parameters,
+ * falling back to the default channel or the first available channel.
+ */
+export const useCurrentChannel = (
+  packageManifest: PackageManifestKind,
+): PackageManifestKind['status']['channels'][number] | undefined => {
+  const [searchParams] = useSearchParams();
+  const selectedChannel =
+    searchParams.get('channel') ||
+    packageManifest?.status?.defaultChannel ||
+    packageManifest?.status?.channels?.[0]?.name;
+
+  const currentChannel = packageManifest?.status?.channels?.find(
+    (ch) => ch.name === selectedChannel,
+  );
+
+  return currentChannel;
+};