Change learn more links dinamically for new operators (#2821)

Author: ammont82

libs/ui-lib/lib/common/config/docs_links.ts

@@ -117,23 +117,33 @@ export const getMtuLink = (ocpVersion?: string) =>
 
 export const AUTHORINO_OPERATOR_LINK = 'https://github.com/Kuadrant/authorino-operator';
 
-export const LOCAL_STORAGE_OPERATOR_LINK =
-  'https://docs.openshift.com/container-platform/4.17/storage/persistent_storage/persistent_storage_local/ways-to-provision-local-storage.html';
+export const getLsoLink = (ocpVersion?: string) =>
+  `https://docs.openshift.com/container-platform/${getShortOpenshiftVersion(
+    ocpVersion,
+  )}/storage/persistent_storage/persistent_storage_local/ways-to-provision-local-storage.html`;
 
-export const NMSTATE_OPERATOR_LINK =
-  'https://docs.openshift.com/container-platform/4.17/networking/networking_operators/k8s-nmstate-about-the-k8s-nmstate-operator.html';
+export const getNmstateLink = (ocpVersion?: string) =>
+  `https://docs.openshift.com/container-platform/${getShortOpenshiftVersion(
+    ocpVersion,
+  )}/networking/networking_operators/k8s-nmstate-about-the-k8s-nmstate-operator.html`;
 
-export const NODE_FEATURE_DISCOVERY_OPERATOR_LINK =
-  'https://docs.openshift.com/container-platform/4.17/hardware_enablement/psap-node-feature-discovery-operator.html';
+export const getNodeFeatureDiscoveryLink = (ocpVersion?: string) =>
+  `https://docs.openshift.com/container-platform/${getShortOpenshiftVersion(
+    ocpVersion,
+  )}/hardware_enablement/psap-node-feature-discovery-operator.html`;
 
-export const NVIDIA_GPU_OPERATOR_LINK =
-  'https://docs.openshift.com/container-platform/4.17/virt/virtual_machines/advanced_vm_management/virt-configuring-virtual-gpus.html';
+export const getNvidiaGpuLink = (ocpVersion?: string) =>
+  `https://docs.openshift.com/container-platform/${getShortOpenshiftVersion(
+    ocpVersion,
+  )}/virt/virtual_machines/advanced_vm_management/virt-configuring-virtual-gpus.html`;
 
 export const PIPELINES_OPERATOR_LINK =
   'https://docs.openshift.com/pipelines/1.17/install_config/installing-pipelines.html';
 
-export const SERVICE_MESH_OPERATOR_LINK =
-  'https://docs.openshift.com/container-platform/4.17/service_mesh/v1x/preparing-ossm-installation.html';
+export const getServiceMeshLink = (ocpVersion?: string) =>
+  `https://docs.openshift.com/container-platform/${getShortOpenshiftVersion(
+    ocpVersion,
+  )}/service_mesh/v1x/preparing-ossm-installation.html`;
 
 export const SERVERLESS_OPERATOR_LINK =
   'https://docs.openshift.com/serverless/1.28/install/install-serverless-operator.html#serverless-install-web-console_install-serverless-operator';

libs/ui-lib/lib/ocm/components/clusterConfiguration/operators/LsoCheckbox.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { FormGroup, HelperText, HelperTextItem, Tooltip } from '@patternfly/react-core';
-import { getFieldId, LOCAL_STORAGE_OPERATOR_LINK, PopoverIcon } from '../../../../common';
+import { getFieldId, getLsoLink, PopoverIcon } from '../../../../common';
 import { OcmCheckboxField } from '../../ui/OcmFormFields';
 import NewFeatureSupportLevelBadge from '../../../../common/components/newFeatureSupportLevels/NewFeatureSupportLevelBadge';
 import { SupportLevel } from '@openshift-assisted/types/./assisted-installer-service';
@@ -30,12 +30,12 @@ const LsoLabel = ({
   );
 };
 
-const LsoHelperText = () => {
+const LsoHelperText = ({ openshiftVersion }: { openshiftVersion?: string }) => {
   return (
     <HelperText>
       <HelperTextItem variant="indeterminate">
         Allows provisioning of persistent storage by using local volumes.{' '}
-        <a href={LOCAL_STORAGE_OPERATOR_LINK} target="_blank" rel="noopener noreferrer">
+        <a href={getLsoLink(openshiftVersion)} target="_blank" rel="noopener noreferrer">
           {'Learn more'} <ExternalLinkAltIcon />
         </a>
       </HelperTextItem>
@@ -46,9 +46,11 @@ const LsoHelperText = () => {
 const LsoCheckbox = ({
   disabledReason,
   supportLevel,
+  openshiftVersion,
 }: {
   disabledReason?: string;
   supportLevel?: SupportLevel | undefined;
+  openshiftVersion?: string;
 }) => {
   const fieldId = getFieldId(LSO_FIELD_NAME, 'input');
 
@@ -57,7 +59,7 @@ const LsoCheckbox = ({
       <OcmCheckboxField
         name={LSO_FIELD_NAME}
         label={<LsoLabel disabledReason={disabledReason} supportLevel={supportLevel} />}
-        helperText={<LsoHelperText />}
+        helperText={<LsoHelperText openshiftVersion={openshiftVersion || '4.17'} />}
         isDisabled={!!disabledReason}
       />
     </FormGroup>

libs/ui-lib/lib/ocm/components/clusterConfiguration/operators/NmstateCheckbox.tsx

@@ -1,11 +1,6 @@
 import React from 'react';
 import { FormGroup, HelperText, HelperTextItem, Tooltip } from '@patternfly/react-core';
-import {
-  getFieldId,
-  PopoverIcon,
-  ClusterOperatorProps,
-  NMSTATE_OPERATOR_LINK,
-} from '../../../../common';
+import { getFieldId, PopoverIcon, ClusterOperatorProps, getNmstateLink } from '../../../../common';
 import { OcmCheckboxField } from '../../ui/OcmFormFields';
 import NmstateRequirements from './NmstateRequirements';
 import { SupportLevel } from '@openshift-assisted/types/./assisted-installer-service';
@@ -39,13 +34,13 @@ const NmstateLabel = ({
   );
 };
 
-const NmstateHelperText = () => {
+const NmstateHelperText = ({ openshiftVersion }: { openshiftVersion?: string }) => {
   return (
     <HelperText>
       <HelperTextItem variant="indeterminate">
         Provides users with functionality to configure various network interface types, DNS, and
         routing on cluster nodes.{' '}
-        <a href={NMSTATE_OPERATOR_LINK} target="_blank" rel="noopener noreferrer">
+        <a href={getNmstateLink(openshiftVersion)} target="_blank" rel="noopener noreferrer">
           {'Learn more'} <ExternalLinkAltIcon />
         </a>
       </HelperTextItem>
@@ -57,10 +52,12 @@ const NmstateCheckbox = ({
   clusterId,
   disabledReason,
   supportLevel,
+  openshiftVersion,
 }: {
   clusterId: ClusterOperatorProps['clusterId'];
   disabledReason?: string;
   supportLevel?: SupportLevel | undefined;
+  openshiftVersion?: string;
 }) => {
   const fieldId = getFieldId(NMSTATE_FIELD_NAME, 'input');
 
@@ -75,7 +72,7 @@ const NmstateCheckbox = ({
             supportLevel={supportLevel}
           />
         }
-        helperText={<NmstateHelperText />}
+        helperText={<NmstateHelperText openshiftVersion={openshiftVersion || '4.17'} />}
         isDisabled={!!disabledReason}
       />
     </FormGroup>

libs/ui-lib/lib/ocm/components/clusterConfiguration/operators/NodeFeatureDiscoveryCheckbox.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { FormGroup, HelperText, HelperTextItem, Tooltip } from '@patternfly/react-core';
-import { getFieldId, NODE_FEATURE_DISCOVERY_OPERATOR_LINK, PopoverIcon } from '../../../../common';
+import { getFieldId, getNodeFeatureDiscoveryLink, PopoverIcon } from '../../../../common';
 import { OcmCheckboxField } from '../../ui/OcmFormFields';
 import NewFeatureSupportLevelBadge from '../../../../common/components/newFeatureSupportLevels/NewFeatureSupportLevelBadge';
 import { SupportLevel } from '@openshift-assisted/types/./assisted-installer-service';
@@ -30,13 +30,17 @@ const NodeFeatureDiscoveryLabel = ({
   );
 };
 
-const NodeFeatureDiscoveryHelperText = () => {
+const NodeFeatureDiscoveryHelperText = ({ openshiftVersion }: { openshiftVersion?: string }) => {
   return (
     <HelperText>
       <HelperTextItem variant="indeterminate">
         Manage the detection of hardware features and configuration by labeling nodes with
         hardware-specific information.{' '}
-        <a href={NODE_FEATURE_DISCOVERY_OPERATOR_LINK} target="_blank" rel="noopener noreferrer">
+        <a
+          href={getNodeFeatureDiscoveryLink(openshiftVersion)}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
           {'Learn more'} <ExternalLinkAltIcon />
         </a>
       </HelperTextItem>
@@ -47,9 +51,11 @@ const NodeFeatureDiscoveryHelperText = () => {
 const NodeFeatureDiscoveryCheckbox = ({
   disabledReason,
   supportLevel,
+  openshiftVersion,
 }: {
   disabledReason?: string;
   supportLevel?: SupportLevel | undefined;
+  openshiftVersion?: string;
 }) => {
   const fieldId = getFieldId(NODEFEATUREDISCOVERY_FIELD_NAME, 'input');
 
@@ -60,7 +66,9 @@ const NodeFeatureDiscoveryCheckbox = ({
         label={
           <NodeFeatureDiscoveryLabel disabledReason={disabledReason} supportLevel={supportLevel} />
         }
-        helperText={<NodeFeatureDiscoveryHelperText />}
+        helperText={
+          <NodeFeatureDiscoveryHelperText openshiftVersion={openshiftVersion || '4.17'} />
+        }
         isDisabled={!!disabledReason}
       />
     </FormGroup>

libs/ui-lib/lib/ocm/components/clusterConfiguration/operators/NvidiaGpuCheckbox.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { FormGroup, HelperText, HelperTextItem, Tooltip } from '@patternfly/react-core';
-import { getFieldId, NVIDIA_GPU_OPERATOR_LINK, PopoverIcon } from '../../../../common';
+import { getFieldId, getNvidiaGpuLink, PopoverIcon } from '../../../../common';
 import { OcmCheckboxField } from '../../ui/OcmFormFields';
 import { SupportLevel } from '@openshift-assisted/types/./assisted-installer-service';
 import NewFeatureSupportLevelBadge from '../../../../common/components/newFeatureSupportLevels/NewFeatureSupportLevelBadge';
@@ -30,12 +30,12 @@ const NvidiaGpuLabel = ({
   );
 };
 
-const NvidiaGpuHelperText = () => {
+const NvidiaGpuHelperText = ({ openshiftVersion }: { openshiftVersion?: string }) => {
   return (
     <HelperText>
       <HelperTextItem variant="indeterminate">
         Automate the management of NVIDIA software components needed to provision and monitor GPUs.{' '}
-        <a href={NVIDIA_GPU_OPERATOR_LINK} target="_blank" rel="noopener noreferrer">
+        <a href={getNvidiaGpuLink(openshiftVersion)} target="_blank" rel="noopener noreferrer">
           {'Learn more'} <ExternalLinkAltIcon />
         </a>
       </HelperTextItem>
@@ -46,9 +46,11 @@ const NvidiaGpuHelperText = () => {
 const NvidiaGpuCheckbox = ({
   disabledReason,
   supportLevel,
+  openshiftVersion,
 }: {
   disabledReason?: string;
   supportLevel?: SupportLevel | undefined;
+  openshiftVersion?: string;
 }) => {
   const fieldId = getFieldId(NVIDIAGPU_FIELD_NAME, 'input');
 
@@ -57,7 +59,7 @@ const NvidiaGpuCheckbox = ({
       <OcmCheckboxField
         name={NVIDIAGPU_FIELD_NAME}
         label={<NvidiaGpuLabel disabledReason={disabledReason} supportLevel={supportLevel} />}
-        helperText={<NvidiaGpuHelperText />}
+        helperText={<NvidiaGpuHelperText openshiftVersion={openshiftVersion || '4.17'} />}
         isDisabled={!!disabledReason}
       />
     </FormGroup>

libs/ui-lib/lib/ocm/components/clusterConfiguration/operators/ServicemeshCheckbox.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { FormGroup, HelperText, HelperTextItem, Tooltip } from '@patternfly/react-core';
-import { getFieldId, PopoverIcon, SERVICE_MESH_OPERATOR_LINK } from '../../../../common';
+import { getFieldId, getServiceMeshLink, PopoverIcon } from '../../../../common';
 import { OcmCheckboxField } from '../../ui/OcmFormFields';
 import { SupportLevel } from '@openshift-assisted/types/./assisted-installer-service';
 import NewFeatureSupportLevelBadge from '../../../../common/components/newFeatureSupportLevels/NewFeatureSupportLevelBadge';
@@ -30,12 +30,12 @@ const ServiceMeshLabel = ({
   );
 };
 
-const ServiceMeshHelperText = () => {
+const ServiceMeshHelperText = ({ openshiftVersion }: { openshiftVersion?: string }) => {
   return (
     <HelperText>
       <HelperTextItem variant="indeterminate">
         Platform that provides behavioral insight and operational control over a service mesh.{' '}
-        <a href={SERVICE_MESH_OPERATOR_LINK} target="_blank" rel="noopener noreferrer">
+        <a href={getServiceMeshLink(openshiftVersion)} target="_blank" rel="noopener noreferrer">
           {'Learn more'} <ExternalLinkAltIcon />
         </a>
       </HelperTextItem>
@@ -46,9 +46,11 @@ const ServiceMeshHelperText = () => {
 const ServiceMeshCheckbox = ({
   disabledReason,
   supportLevel,
+  openshiftVersion,
 }: {
   disabledReason?: string;
   supportLevel?: SupportLevel | undefined;
+  openshiftVersion?: string;
 }) => {
   const fieldId = getFieldId(SERVICEMESH_FIELD_NAME, 'input');
 
@@ -57,7 +59,7 @@ const ServiceMeshCheckbox = ({
       <OcmCheckboxField
         name={SERVICEMESH_FIELD_NAME}
         label={<ServiceMeshLabel disabledReason={disabledReason} supportLevel={supportLevel} />}
-        helperText={<ServiceMeshHelperText />}
+        helperText={<ServiceMeshHelperText openshiftVersion={openshiftVersion || '4.17'} />}
         isDisabled={!!disabledReason}
       />
     </FormGroup>