Operators redesign followup (openshift-assisted#2805)

* MGMT-20035-openshift-ai-bundle-install-servicemesh

* MGMT-19442-lso-disabled-after-select-deselect-bundle

* MGMT-19914-selecting-operator-that-collides-with-bundle-one-of-them-should-be-deselected/blocked

* Adding Learn more links to the new operators

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

@@ -114,3 +114,26 @@ export const getMtuLink = (ocpVersion?: string) =>
   `https://docs.redhat.com/en/documentation/openshift_container_platform/${getShortOpenshiftVersion(
     ocpVersion,
   )}/html/networking/changing-cluster-network-mtu#nw-cluster-mtu-change-about_changing-cluster-network-mtu`;
+
+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 NMSTATE_OPERATOR_LINK =
+  'https://docs.openshift.com/container-platform/4.17/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 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 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 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/AuthorinoCheckbox.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
 import { FormGroup, HelperText, HelperTextItem, Tooltip } from '@patternfly/react-core';
-import { getFieldId, PopoverIcon } from '../../../../common';
+import { AUTHORINO_OPERATOR_LINK, getFieldId, PopoverIcon } from '../../../../common';
 import { OcmCheckboxField } from '../../ui/OcmFormFields';
 import NewFeatureSupportLevelBadge from '../../../../common/components/newFeatureSupportLevels/NewFeatureSupportLevelBadge';
 import { SupportLevel } from '@openshift-assisted/types/./assisted-installer-service';
+import { ExternalLinkAltIcon } from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
 
 const AUTHORINO_FIELD_NAME = 'useAuthorino';
 
@@ -34,6 +35,9 @@ const AuthorinoHelperText = () => {
     <HelperText>
       <HelperTextItem variant="indeterminate">
         Lightweigth external authorization service for tailor-made Zero Trust API security.{' '}
+        <a href={AUTHORINO_OPERATOR_LINK} target="_blank" rel="noopener noreferrer">
+          {'Learn more'} <ExternalLinkAltIcon />
+        </a>
       </HelperTextItem>
     </HelperText>
   );

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

@@ -1,11 +1,18 @@
 import React from 'react';
 import { FormGroup, HelperText, HelperTextItem, Tooltip } from '@patternfly/react-core';
 import { ExternalLinkAltIcon } from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
-import { ClusterOperatorProps, CNV_LINK, getFieldId, PopoverIcon } from '../../../../common';
+import {
+  ClusterOperatorProps,
+  CNV_LINK,
+  getFieldId,
+  OperatorsValues,
+  PopoverIcon,
+} from '../../../../common';
 import CnvHostRequirements from './CnvHostRequirements';
 import { OcmCheckboxField } from '../../ui/OcmFormFields';
 import NewFeatureSupportLevelBadge from '../../../../common/components/newFeatureSupportLevels/NewFeatureSupportLevelBadge';
 import { SupportLevel } from '@openshift-assisted/types/assisted-installer-service';
+import { useFormikContext } from 'formik';
 
 const CNV_FIELD_NAME = 'useContainerNativeVirtualization';
 
@@ -66,8 +73,11 @@ const CnvCheckbox = ({
   disabledReason?: string;
   supportLevel?: SupportLevel | undefined;
 }) => {
+  const { setFieldValue } = useFormikContext<OperatorsValues>();
   const fieldId = getFieldId(CNV_FIELD_NAME, 'input');
-
+  const selectLsoOperator = (checked: boolean) => {
+    setFieldValue('useLso', checked);
+  };
   return (
     <FormGroup isInline fieldId={fieldId}>
       <OcmCheckboxField
@@ -82,6 +92,7 @@ const CnvCheckbox = ({
         }
         helperText={<CnvHelperText />}
         isDisabled={!!disabledReason}
+        onChange={selectLsoOperator}
       />
     </FormGroup>
   );

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

@@ -1,9 +1,10 @@
 import React from 'react';
 import { FormGroup, HelperText, HelperTextItem, Tooltip } from '@patternfly/react-core';
-import { getFieldId, PopoverIcon } from '../../../../common';
+import { getFieldId, LOCAL_STORAGE_OPERATOR_LINK, PopoverIcon } from '../../../../common';
 import { OcmCheckboxField } from '../../ui/OcmFormFields';
 import NewFeatureSupportLevelBadge from '../../../../common/components/newFeatureSupportLevels/NewFeatureSupportLevelBadge';
 import { SupportLevel } from '@openshift-assisted/types/./assisted-installer-service';
+import ExternalLinkAltIcon from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
 
 const LSO_FIELD_NAME = 'useLso';
 
@@ -34,6 +35,9 @@ const LsoHelperText = () => {
     <HelperText>
       <HelperTextItem variant="indeterminate">
         Allows provisioning of persistent storage by using local volumes.{' '}
+        <a href={LOCAL_STORAGE_OPERATOR_LINK} target="_blank" rel="noopener noreferrer">
+          {'Learn more'} <ExternalLinkAltIcon />
+        </a>
       </HelperTextItem>
     </HelperText>
   );

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

@@ -1,10 +1,16 @@
 import React from 'react';
 import { FormGroup, HelperText, HelperTextItem, Tooltip } from '@patternfly/react-core';
-import { getFieldId, PopoverIcon, ClusterOperatorProps } from '../../../../common';
+import {
+  getFieldId,
+  PopoverIcon,
+  ClusterOperatorProps,
+  NMSTATE_OPERATOR_LINK,
+} from '../../../../common';
 import { OcmCheckboxField } from '../../ui/OcmFormFields';
 import NmstateRequirements from './NmstateRequirements';
 import { SupportLevel } from '@openshift-assisted/types/./assisted-installer-service';
 import NewFeatureSupportLevelBadge from '../../../../common/components/newFeatureSupportLevels/NewFeatureSupportLevelBadge';
+import ExternalLinkAltIcon from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
 
 const NMSTATE_FIELD_NAME = 'useNmstate';
 
@@ -39,6 +45,9 @@ const NmstateHelperText = () => {
       <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">
+          {'Learn more'} <ExternalLinkAltIcon />
+        </a>
       </HelperTextItem>
     </HelperText>
   );

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

@@ -1,9 +1,10 @@
 import React from 'react';
 import { FormGroup, HelperText, HelperTextItem, Tooltip } from '@patternfly/react-core';
-import { getFieldId, PopoverIcon } from '../../../../common';
+import { getFieldId, NODE_FEATURE_DISCOVERY_OPERATOR_LINK, PopoverIcon } from '../../../../common';
 import { OcmCheckboxField } from '../../ui/OcmFormFields';
 import NewFeatureSupportLevelBadge from '../../../../common/components/newFeatureSupportLevels/NewFeatureSupportLevelBadge';
 import { SupportLevel } from '@openshift-assisted/types/./assisted-installer-service';
+import ExternalLinkAltIcon from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
 
 const NODEFEATUREDISCOVERY_FIELD_NAME = 'useNodeFeatureDiscovery';
 
@@ -35,6 +36,9 @@ const NodeFeatureDiscoveryHelperText = () => {
       <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">
+          {'Learn more'} <ExternalLinkAltIcon />
+        </a>
       </HelperTextItem>
     </HelperText>
   );

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

@@ -1,9 +1,10 @@
 import React from 'react';
 import { FormGroup, HelperText, HelperTextItem, Tooltip } from '@patternfly/react-core';
-import { getFieldId, PopoverIcon } from '../../../../common';
+import { getFieldId, NVIDIA_GPU_OPERATOR_LINK, PopoverIcon } from '../../../../common';
 import { OcmCheckboxField } from '../../ui/OcmFormFields';
 import { SupportLevel } from '@openshift-assisted/types/./assisted-installer-service';
 import NewFeatureSupportLevelBadge from '../../../../common/components/newFeatureSupportLevels/NewFeatureSupportLevelBadge';
+import ExternalLinkAltIcon from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
 
 const NVIDIAGPU_FIELD_NAME = 'useNvidiaGpu';
 
@@ -34,6 +35,9 @@ const NvidiaGpuHelperText = () => {
     <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">
+          {'Learn more'} <ExternalLinkAltIcon />
+        </a>
       </HelperTextItem>
     </HelperText>
   );

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

@@ -1,10 +1,17 @@
 import React from 'react';
 import { FormGroup, HelperText, HelperTextItem, Tooltip } from '@patternfly/react-core';
 import { ExternalLinkAltIcon } from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
-import { getFieldId, PopoverIcon, ODF_REQUIREMENTS_LINK, ODF_LINK } from '../../../../common';
+import {
+  getFieldId,
+  PopoverIcon,
+  ODF_REQUIREMENTS_LINK,
+  ODF_LINK,
+  OperatorsValues,
+} from '../../../../common';
 import { OcmCheckboxField } from '../../ui/OcmFormFields';
 import NewFeatureSupportLevelBadge from '../../../../common/components/newFeatureSupportLevels/NewFeatureSupportLevelBadge';
 import { SupportLevel } from '@openshift-assisted/types/./assisted-installer-service';
+import { useFormikContext } from 'formik';
 
 const ODF_FIELD_NAME = 'useOpenShiftDataFoundation';
 
@@ -52,15 +59,19 @@ const OdfCheckbox = ({
   disabledReason?: string;
   supportLevel?: SupportLevel | undefined;
 }) => {
+  const { setFieldValue } = useFormikContext<OperatorsValues>();
   const fieldId = getFieldId(ODF_FIELD_NAME, 'input');
-
+  const selectLsoOperator = (checked: boolean) => {
+    setFieldValue('useLso', checked);
+  };
   return (
     <FormGroup isInline fieldId={fieldId}>
       <OcmCheckboxField
         name={ODF_FIELD_NAME}
         label={<OdfLabel disabledReason={disabledReason} supportLevel={supportLevel} />}
         isDisabled={!!disabledReason}
         helperText={<OdfHelperText />}
+        onChange={selectLsoOperator}
       />
     </FormGroup>
   );

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

@@ -1,9 +1,10 @@
 import React from 'react';
 import { FormGroup, HelperText, HelperTextItem, Tooltip } from '@patternfly/react-core';
-import { getFieldId, PopoverIcon } from '../../../../common';
+import { getFieldId, PIPELINES_OPERATOR_LINK, PopoverIcon } from '../../../../common';
 import { OcmCheckboxField } from '../../ui/OcmFormFields';
 import { SupportLevel } from '@openshift-assisted/types/./assisted-installer-service';
 import NewFeatureSupportLevelBadge from '../../../../common/components/newFeatureSupportLevels/NewFeatureSupportLevelBadge';
+import ExternalLinkAltIcon from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
 
 const PIPELINES_FIELD_NAME = 'usePipelines';
 
@@ -35,6 +36,9 @@ const PipelinesHelperText = () => {
       <HelperTextItem variant="indeterminate">
         Cloud-native continuous integration and delivery (CI/CD) solution for building pipelines
         using Tekton.{' '}
+        <a href={PIPELINES_OPERATOR_LINK} target="_blank" rel="noopener noreferrer">
+          {'Learn more'} <ExternalLinkAltIcon />
+        </a>
       </HelperTextItem>
     </HelperText>
   );

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

@@ -1,9 +1,10 @@
 import React from 'react';
 import { FormGroup, HelperText, HelperTextItem, Tooltip } from '@patternfly/react-core';
-import { getFieldId, PopoverIcon } from '../../../../common';
+import { getFieldId, PopoverIcon, SERVERLESS_OPERATOR_LINK } from '../../../../common';
 import { OcmCheckboxField } from '../../ui/OcmFormFields';
 import { SupportLevel } from '@openshift-assisted/types/./assisted-installer-service';
 import NewFeatureSupportLevelBadge from '../../../../common/components/newFeatureSupportLevels/NewFeatureSupportLevelBadge';
+import ExternalLinkAltIcon from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
 
 const SERVERLESS_FIELD_NAME = 'useServerless';
 
@@ -34,6 +35,9 @@ const ServerlessHelperText = () => {
     <HelperText>
       <HelperTextItem variant="indeterminate">
         Deploy workflow applications based on the CNCF Serverless Workflow specification.{' '}
+        <a href={SERVERLESS_OPERATOR_LINK} target="_blank" rel="noopener noreferrer">
+          {'Learn more'} <ExternalLinkAltIcon />
+        </a>
       </HelperTextItem>
     </HelperText>
   );

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

@@ -1,11 +1,12 @@
 import React from 'react';
 import { FormGroup, HelperText, HelperTextItem, Tooltip } from '@patternfly/react-core';
-import { getFieldId, PopoverIcon } from '../../../../common';
+import { getFieldId, PopoverIcon, SERVICE_MESH_OPERATOR_LINK } from '../../../../common';
 import { OcmCheckboxField } from '../../ui/OcmFormFields';
 import { SupportLevel } from '@openshift-assisted/types/./assisted-installer-service';
 import NewFeatureSupportLevelBadge from '../../../../common/components/newFeatureSupportLevels/NewFeatureSupportLevelBadge';
+import ExternalLinkAltIcon from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
 
-const SERVICEMESH_FIELD_NAME = 'useServiceMesh';
+const SERVICEMESH_FIELD_NAME = 'useServicemesh';
 
 const ServiceMeshLabel = ({
   disabledReason,
@@ -34,6 +35,9 @@ const ServiceMeshHelperText = () => {
     <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">
+          {'Learn more'} <ExternalLinkAltIcon />
+        </a>
       </HelperTextItem>
     </HelperText>
   );