Bug 1856353: Include installed version in operator hub item details

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

@@ -8,6 +8,10 @@ import { ExternalLink, HintBlock, Timestamp } from '@console/internal/components
 import { RH_OPERATOR_SUPPORT_POLICY_LINK } from '@console/shared';
 import { MarkdownView } from '../clusterserviceversion';
 import { OperatorHubItem } from './index';
+import { useK8sWatchResource } from '@console/internal/components/utils/k8s-watch-hook';
+import { referenceForModel } from '@console/internal/module/k8s';
+import { ClusterServiceVersionModel } from '../../models';
+import { ClusterServiceVersionKind, SubscriptionKind } from '../../types';
 
 const CapabilityLevel: React.FC<CapabilityLevelProps> = ({ capabilityLevel }) => {
   const levels = [
@@ -49,89 +53,115 @@ type CapabilityLevelProps = {
   capabilityLevel: string;
 };
 
-export const OperatorHubItemDetails: React.SFC<OperatorHubItemDetailsProps> = ({
+const InstalledHintBlock: React.FC<OperatorHubItemDetailsHintBlockProps> = ({
+  latestVersion,
+  namespace,
+  subscription,
+}) => {
+  const [installedCSV] = useK8sWatchResource<ClusterServiceVersionKind>({
+    kind: referenceForModel(ClusterServiceVersionModel),
+    name: subscription?.status?.installedCSV,
+    namespace: subscription?.metadata?.namespace,
+    isList: false,
+    namespaced: true,
+  });
+  const nsPath = `/k8s/${namespace ? `ns/${namespace}` : 'all-namespaces'}`;
+  const to = installedCSV
+    ? `${nsPath}/clusterserviceversions/${installedCSV?.metadata?.name ?? ''}`
+    : `${nsPath}/subscriptions/${subscription.metadata.name ?? ''}`;
+  return (
+    <HintBlock className="co-catalog-page__hint" title="Installed Operator">
+      <p>
+        {installedCSV && installedCSV?.spec?.version !== latestVersion ? (
+          <span>
+            Version <strong>{installedCSV?.spec?.version}</strong> of this operator has been
+            installed on the cluster.
+          </span>
+        ) : (
+          'This Operator has been installed on the cluster.'
+        )}
+        &nbsp;
+        <Link to={to}>View it here.</Link>
+      </p>
+    </HintBlock>
+  );
+};
+
+const OperatorHubItemDetailsHintBlock: React.FC<OperatorHubItemDetailsHintBlockProps> = (props) => {
+  const { installed, providerType } = props;
+  if (installed) {
+    return <InstalledHintBlock {...props} />;
+  }
+
+  if (providerType === 'Community') {
+    return (
+      <HintBlock className="co-catalog-page__hint" title="Community Operator">
+        <p>
+          This is a community provided operator. These are operators which have not been vetted or
+          verified by Red Hat. Community Operators should be used with caution because their
+          stability is unknown. Red Hat provides no support for Community Operators.
+        </p>
+        {RH_OPERATOR_SUPPORT_POLICY_LINK && (
+          <span className="co-modal-ignore-warning__link">
+            <ExternalLink
+              href={RH_OPERATOR_SUPPORT_POLICY_LINK}
+              text="Learn more about Red Hat’s third party software support policy"
+            />
+          </span>
+        )}
+      </HintBlock>
+    );
+  }
+
+  if (providerType === 'Marketplace') {
+    return (
+      <HintBlock title="Marketplace Operator">
+        <p>
+          This Operator is purchased through Red Hat Marketplace. After completing the purchase
+          process, you can install the Operator on this or other OpenShift clusters. Visit Red Hat
+          Marketplace for more details and to track your usage of this application.
+        </p>
+        <p>
+          <ExternalLink
+            href="https://marketplace.redhat.com/en-us?utm_source=openshift_console"
+            text="Learn more about the Red Hat Marketplace"
+          />
+        </p>
+      </HintBlock>
+    );
+  }
+
+  return null;
+};
+
+export const OperatorHubItemDetails: React.FC<OperatorHubItemDetailsProps> = ({
   item,
   namespace,
 }) => {
   if (!item) {
     return null;
   }
+
   const {
+    capabilityLevel,
+    containerImage,
+    createdAt,
+    description,
+    infraFeatures,
     installed,
+    longDescription,
+    marketplaceSupportWorkflow,
     provider,
     providerType,
-    longDescription,
-    description,
-    version,
     repository,
-    containerImage,
-    createdAt,
+    subscription,
     support,
-    capabilityLevel,
-    marketplaceSupportWorkflow,
-    infraFeatures,
     validSubscription,
+    version,
   } = item;
   const notAvailable = <span className="properties-side-panel-pf-property-label">N/A</span>;
   const created = Date.parse(createdAt) ? <Timestamp timestamp={createdAt} /> : createdAt;
 
-  const getHintBlock = () => {
-    if (installed) {
-      return (
-        <HintBlock className="co-catalog-page__hint" title="Installed Operator">
-          <p>
-            This Operator has been installed on the cluster.{' '}
-            <Link
-              to={`/k8s/${namespace ? `ns/${namespace}` : 'all-namespaces'}/clusterserviceversions`}
-            >
-              View it here.
-            </Link>
-          </p>
-        </HintBlock>
-      );
-    }
-
-    if (providerType === 'Community') {
-      return (
-        <HintBlock className="co-catalog-page__hint" title="Community Operator">
-          <p>
-            This is a community provided operator. These are operators which have not been vetted or
-            verified by Red Hat. Community Operators should be used with caution because their
-            stability is unknown. Red Hat provides no support for Community Operators.
-          </p>
-          {RH_OPERATOR_SUPPORT_POLICY_LINK && (
-            <span className="co-modal-ignore-warning__link">
-              <ExternalLink
-                href={RH_OPERATOR_SUPPORT_POLICY_LINK}
-                text="Learn more about Red Hat’s third party software support policy"
-              />
-            </span>
-          )}
-        </HintBlock>
-      );
-    }
-
-    if (providerType === 'Marketplace') {
-      return (
-        <HintBlock title="Marketplace Operator">
-          <p>
-            This Operator is purchased through Red Hat Marketplace. After completing the purchase
-            process, you can install the Operator on this or other OpenShift clusters. Visit Red Hat
-            Marketplace for more details and to track your usage of this application.
-          </p>
-          <p>
-            <ExternalLink
-              href="https://marketplace.redhat.com/en-us?utm_source=openshift_console"
-              text="Learn more about the Red Hat Marketplace"
-            />
-          </p>
-        </HintBlock>
-      );
-    }
-
-    return null;
-  };
-
   const mappedData = (data) =>
     Array.isArray(data) ? data.map((d) => <div key={d}>{d}</div>) : notAvailable;
 
@@ -144,7 +174,7 @@ export const OperatorHubItemDetails: React.SFC<OperatorHubItemDetailsProps> = ({
         <div className="modal-body-inner-shadow-covers">
           <div className="co-catalog-page__overlay-body">
             <PropertiesSidePanel>
-              <PropertyItem label="Operator Version" value={version || notAvailable} />
+              <PropertyItem label="Latest Version" value={version || notAvailable} />
               <PropertyItem
                 label="Capability Level"
                 value={
@@ -178,7 +208,13 @@ export const OperatorHubItemDetails: React.SFC<OperatorHubItemDetailsProps> = ({
               />
             </PropertiesSidePanel>
             <div className="co-catalog-page__overlay-description">
-              {getHintBlock()}
+              <OperatorHubItemDetailsHintBlock
+                installed={installed}
+                latestVersion={version}
+                namespace={namespace}
+                providerType={providerType}
+                subscription={subscription}
+              />
               {longDescription ? <MarkdownView content={longDescription} /> : description}
             </div>
           </div>
@@ -191,6 +227,13 @@ export const OperatorHubItemDetails: React.SFC<OperatorHubItemDetailsProps> = ({
 OperatorHubItemDetails.defaultProps = {
   item: null,
 };
+type OperatorHubItemDetailsHintBlockProps = {
+  installed: boolean;
+  latestVersion: string;
+  namespace: string;
+  providerType: string;
+  subscription: SubscriptionKind;
+};
 
 export type OperatorHubItemDetailsProps = {
   namespace?: string;