@openshift-assisted/ui-lib 5.0.1-cim → 5.0.2-cim

package/lib/common/components/clusterConfiguration/ControlPlaneNodesDropdown.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import {
   FormGroup,
-  Tooltip,
   Dropdown,
   DropdownItem,
   MenuToggle,
@@ -63,22 +62,21 @@ const ControlPlaneNodesDropdown = ({
     }
   }, [allowHighlyAvailable, selectedValue, setValue]);
 
+  const disabledReason = t('ai:This option is not available with the selected OpenShift version');
   const dropdownItems = options.map(({ value, label }) => {
     const isEnabled = isItemEnabled(value, allowHighlyAvailable, allowTNA);
 
-    const disabledReason = t('ai:This option is not available with the selected OpenShift version');
     return (
       <DropdownItem
         key={value}
         id={value.toString()}
-        isAriaDisabled={!isItemEnabled}
-        isDisabled={!isItemEnabled}
+        isAriaDisabled={!isEnabled}
+        disabled={!isEnabled}
         selected={selectedValue === value}
         value={value}
+        tooltipProps={{ hidden: isEnabled, content: disabledReason, position: 'top' }}
       >
-        <Tooltip hidden={isEnabled} content={disabledReason} position="top">
-          <div>{label}</div>
-        </Tooltip>
+        {label}
       </DropdownItem>
     );
   });

package/lib/common/components/clusterConfiguration/DiscoveryImageConfigForm.tsx

@@ -46,7 +46,9 @@ export const StaticIPInfo = ({ docVersion }: { docVersion?: string }) => {
         icon={<ExternalLinkAltIcon />}
         iconPosition="right"
         isInline
-        onClick={() => window.open(getOCPStaticIPDocLink(docVersion), '_blank', 'noopener')}
+        onClick={() =>
+          window.open(getOCPStaticIPDocLink(docVersion), '_blank', 'noopener,noreferrer')
+        }
       >
         {t('ai:View documentation')}
       </Button>

package/lib/common/components/clusterConfiguration/DownloadIso.tsx

@@ -45,7 +45,7 @@ const DownloadIso = ({
 
   const openCiscoIntersightHostsLink = (downloadUrl: string) => {
     updateTagsForCiscoIntersight ? updateTagsForCiscoIntersight() : '';
-    window.open(getCiscoIntersightLink(downloadUrl, ciscoUrl), '_blank', 'noopener');
+    window.open(getCiscoIntersightLink(downloadUrl, ciscoUrl), '_blank', 'noopener,noreferrer');
   };
 
   return (

package/lib/common/components/clusterDetail/ConsoleModal.tsx

@@ -138,7 +138,7 @@ export const ConsoleModal: React.FC<ConsoleModalProps> = ({
       type="submit"
       key="launch"
       variant={ButtonVariant.primary}
-      onClick={() => window.open(consoleUrl, '_blank', 'noopener')}
+      onClick={() => window.open(consoleUrl, '_blank', 'noopener,noreferrer')}
       isDisabled={!consoleUrl}
     >
       {t('ai:Launch OpenShift Console')}

package/lib/common/components/clusterWizard/validationsInfoUtils.ts

@@ -63,13 +63,26 @@ export const findValidationFixStep = <ClusterWizardStepsType extends string>(
   wizardStepsValidationsMap: WizardStepsValidationMap<ClusterWizardStepsType>,
 ): ClusterWizardStepsType | undefined => {
   const keys = lodashKeys(wizardStepsValidationsMap) as ClusterWizardStepsType[];
-  return keys.find((key) => {
-    // find first matching validation-map name
+
+  // find the step based on the validationId first
+  const validationStep = keys.find((key) => {
     const { cluster: clusterValidationMap, host: hostValidationMap } =
       wizardStepsValidationsMap[key];
     return (
       clusterValidationMap.validationIds.includes(validationId as ClusterValidationId) ||
-      hostValidationMap.validationIds.includes(validationId as HostValidationId) ||
+      hostValidationMap.validationIds.includes(validationId as HostValidationId)
+    );
+  });
+
+  if (validationStep) {
+    return validationStep;
+  }
+
+  // find the step based on the cluster/host validation group as a backup
+  return keys.find((key) => {
+    const { cluster: clusterValidationMap, host: hostValidationMap } =
+      wizardStepsValidationsMap[key];
+    return (
       (clusterGroup && clusterValidationMap.groups.includes(clusterGroup)) ||
       (hostGroup && hostValidationMap.groups.includes(hostGroup))
     );

package/lib/common/components/index.ts

@@ -8,4 +8,4 @@ export * from './AlertsContextProvider';
 export * from './hosts';
 export * from './fetching';
 export * from './AddHosts';
-export * from './featureSupportLevels';
+export * from './newFeatureSupportLevels';

package/lib/common/components/operators/operatorSpecs.tsx

@@ -53,11 +53,8 @@ import {
   NODE_HEALTHCHECK_LINK,
   NODE_MAINTENANCE_LINK,
   ODF_LINK,
-  ODF_REQUIREMENTS_LINK,
   OPENSHIFT_AI_LINK,
-  OPENSHIFT_AI_REQUIREMENTS_LINK,
   OSC_LINK,
-  OSC_REQUIREMENTS_LINK,
   PIPELINES_OPERATOR_LINK,
   SERVERLESS_OPERATOR_LINK,
   SERVICE_MESH_OPERATOR_LINK,
@@ -183,11 +180,6 @@ export const getOperatorSpecs = (
         title: 'OpenShift Data Foundation',
         featureId: 'ODF',
         descriptionText: DESCRIPTION_ODF,
-        Requirements: () => (
-          <ExternalLink href={ODF_REQUIREMENTS_LINK}>
-            Learn more about the requirements for OpenShift Data Foundation
-          </ExternalLink>
-        ),
         Description: ({ searchTerm }) => (
           <>
             <HighlightedText text={DESCRIPTION_ODF} searchTerm={searchTerm} />{' '}
@@ -246,11 +238,6 @@ export const getOperatorSpecs = (
         title: 'OpenShift sandboxed containers',
         featureId: 'OSC',
         descriptionText: DESCRIPTION_OSC,
-        Requirements: () => (
-          <ExternalLink href={OSC_REQUIREMENTS_LINK}>
-            Learn more about the requirements for OpenShift sandboxed containers
-          </ExternalLink>
-        ),
         Description: ({ searchTerm }) => (
           <>
             <HighlightedText text={DESCRIPTION_OSC} searchTerm={searchTerm} />{' '}
@@ -266,9 +253,6 @@ export const getOperatorSpecs = (
         title: 'OpenShift AI',
         featureId: 'OPENSHIFT_AI',
         descriptionText: DESCRIPTION_OPENSHIFT_AI,
-        Requirements: () => (
-          <ExternalLink href={OPENSHIFT_AI_REQUIREMENTS_LINK}>Learn more</ExternalLink>
-        ),
         Description: ({ searchTerm }) => (
           <>
             <HighlightedText text={DESCRIPTION_OPENSHIFT_AI} searchTerm={searchTerm} />{' '}

package/lib/common/components/ui/formik/PullSecretField.tsx

@@ -65,7 +65,10 @@ const GetPullSecretHelperText: React.FC<{ isOcm: boolean }> = ({ isOcm }) => {
   );
 };
 
-const PullSecretField: React.FC<{ isOcm: boolean }> = ({ isOcm }) => {
+const PullSecretField: React.FC<{ isOcm: boolean; isRequired?: boolean }> = ({
+  isOcm,
+  isRequired = true,
+}) => {
   const { t } = useTranslation();
   return (
     <TextAreaField
@@ -75,7 +78,7 @@ const PullSecretField: React.FC<{ isOcm: boolean }> = ({ isOcm }) => {
       getErrorText={(error) => error}
       helperText={<GetPullSecretHelperText isOcm={isOcm} />}
       rows={10}
-      isRequired
+      isRequired={isRequired}
     />
   );
 };

package/lib/common/components/ui/formik/SelectFieldWithSearch.tsx

@@ -38,6 +38,7 @@ const SelectFieldWithSearch = ({
   isLoading = false,
   placeholder,
   helperText,
+  onClear,
 }: {
   selectOptions: (SelectOptionProps & { showDivider?: boolean })[];
   filterValue: string;
@@ -46,6 +47,7 @@ const SelectFieldWithSearch = ({
   isLoading?: boolean;
   placeholder?: string;
   helperText?: React.ReactNode;
+  onClear?: VoidFunction;
 } & FieldProps) => {
   const [isOpen, setIsOpen] = React.useState(false);
   const [{ value }, , { setValue }] = useField<unknown | unknown[]>(name);
@@ -185,6 +187,7 @@ const SelectFieldWithSearch = ({
 
   const onClearButtonClick = () => {
     setFilterValue('');
+    onClear?.();
     resetActiveAndFocusedItem();
     textInputRef?.current?.focus();
   };

package/lib/common/config/docs_links.ts

@@ -118,7 +118,7 @@ export const getMceDocsLink = (ocpVersion?: string) =>
 export const getLvmsDocsLink = (ocpVersion?: string) =>
   `https://docs.redhat.com/en/documentation/openshift_container_platform/${getDocsOpenshiftVersion(
     ocpVersion,
-  )}/html/storage/configuring-persistent-storage#overview-of-lvm-storage-functionality_ways-to-provision-local-storage`;
+  )}/html-single/storage/index#persistent-storage-using-lvms`;
 
 export const NODE_HEALTHCHECK_LINK =
   'https://docs.redhat.com/en/documentation/workload_availability_for_red_hat_openshift/latest/html/remediation_fencing_and_maintenance/node-health-check-operator';
@@ -150,10 +150,11 @@ export const CHANGE_ISO_PASSWORD_FILE_LINK =
   'https://raw.githubusercontent.com/openshift/assisted-service/master/docs/change-iso-password.sh';
 
 export const getCiscoIntersightLink = (downloadIsoUrl: string, ciscoUrl?: string) => {
+  const isoUrl = encodeURIComponent(downloadIsoUrl);
   if (ciscoUrl) {
-    return `${ciscoUrl}?_workflow_Version=1&IsoUrl=${downloadIsoUrl}`;
+    return `${ciscoUrl}?_workflow_Version=1&IsoUrl=${isoUrl}`;
   }
-  return `https://www.intersight.com/an/workflow/workflow-definitions/execute/AddServersFromISO?_workflow_Version=1&IsoUrl=${downloadIsoUrl}`;
+  return `https://www.intersight.com/an/workflow/workflow-definitions/execute/AddServersFromISO?_workflow_Version=1&IsoUrl=${isoUrl}`;
 };
 
 export const MTV_LINK =
@@ -228,7 +229,7 @@ export const getClusterObservabilityLink = (ocpVersion?: string) =>
 export const getLokiLink = (ocpVersion?: string) =>
   `https://docs.redhat.com/en/documentation/openshift_container_platform/${getDocsOpenshiftVersion(
     ocpVersion,
-  )}/html/network_observability/network-observability-overview`;
+  )}/html/network_observability/installing-network-observability-operators#network-observability-loki-installation_network_observability`;
 
 export const getOpenShiftLoggingLink = (ocpVersion?: string) =>
   `https://docs.redhat.com/en/documentation/openshift_container_platform/${getDocsOpenshiftVersion(

package/lib/common/types/clusters.ts

@@ -73,4 +73,4 @@ export const SupportedPlatformIntegrations: SupportedPlatformType[] = [
 ];
 export const NonPlatformIntegrations: PlatformType[] = ['baremetal', 'none'];
 
-export type DiscoveryImageType = ImageType | 'discovery-image-ipxe';
+export type DiscoveryImageType = Exclude<ImageType, 'disconnected-iso'> | 'discovery-image-ipxe';

package/lib/common/utils.ts

@@ -90,6 +90,9 @@ export const stringToJSON = <T>(jsonString: string | undefined): T | undefined =
 export const downloadFile = (fileUrl?: string, dataBlob?: Blob, fileName?: string) => {
   const link = document.createElement('a');
   if (fileUrl && fileUrl !== '') {
+    if (!/^(https?|blob):/i.test(fileUrl)) {
+      return;
+    }
     link.setAttribute('href', fileUrl);
   }
   if (dataBlob) {

package/lib/ocm/components/AddHosts/types.ts

@@ -1,6 +1,9 @@
-import { OcmCpuArchitecture, SupportedCpuArchitecture } from '../../../common';
+import {
+  NewFeatureSupportLevelMap,
+  OcmCpuArchitecture,
+  SupportedCpuArchitecture,
+} from '../../../common';
 import { HostsNetworkConfigurationType } from '../../services';
-import { FeaturesSupportsLevel } from '../../../common/components/featureSupportLevels/types';
 import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
 
 /* The type is reverse engineered.
@@ -50,7 +53,7 @@ export type OcmClusterType = {
   };
 
   aiCluster?: Cluster;
-  aiSupportLevels?: FeaturesSupportsLevel;
+  aiSupportLevels?: { features: NewFeatureSupportLevelMap };
 };
 
 export type Day2ClusterDetailValues = {

package/lib/ocm/components/clusterConfiguration/OcmDiscoveryImageConfigForm.tsx

@@ -106,7 +106,7 @@ export const OcmDiscoveryImageConfigForm = ({
     httpsProxy: httpsProxy || '',
     noProxy: noProxy || '',
     enableProxy: !!(httpProxy || httpsProxy || noProxy),
-    imageType: imageTypeValue as ImageType,
+    imageType: imageTypeValue as DiscoveryImageType,
     enableCertificate: enableCertificate || false,
     trustBundle: trustBundle || '',
   };
@@ -155,7 +155,7 @@ export const OcmDiscoveryImageConfigForm = ({
                   <Form>
                     <DiscoveryImageTypeDropdown
                       name="imageType"
-                      defaultValue={discoveryImageTypes[imageTypeValue]}
+                      defaultValue={discoveryImageTypes[imageTypeValue as DiscoveryImageType]}
                       onChange={updateDiscoveryButtonAndAlertText}
                       selectedCpuArchitecture={selectedCpuArchitecture}
                       isDisabled={isOracleCloudInfrastructure}

package/lib/ocm/components/clusterConfiguration/manifestsConfiguration/components/customManifestsValidationSchema.tsx

@@ -1,6 +1,6 @@
 import * as Yup from 'yup';
 import { TFunction } from 'i18next';
-import { CustomManifestValues, ManifestFormData } from '../data/dataTypes';
+import { CustomManifestValues } from '../data/dataTypes';
 import {
   getMaxFileSizeMessage,
   validateFileSize,
@@ -62,7 +62,7 @@ const INCORRECT_FILENAME =
 const UNIQUE_FOLDER_FILENAME = 'Ensure unique file names to avoid conflicts and errors.';
 
 export const getFormViewManifestsValidationSchema = (t: TFunction) =>
-  Yup.object<ManifestFormData>({
+  Yup.object({
     manifests: Yup.array<CustomManifestValues>()
       .of(
         Yup.object({

package/lib/ocm/components/clusterConfiguration/platformIntegration/ExternalPlatformDropdown.tsx

@@ -155,7 +155,7 @@ export const ExternalPlatformDropdown = ({
 
   const handleClick = (event: MouseEvent<HTMLButtonElement>, href: string): void => {
     event.stopPropagation(); // Stop event propagation here
-    window.open(href, '_blank');
+    window.open(href, '_blank', 'noopener,noreferrer');
   };
 
   const { getFeatureSupportLevel, getFeatureDisabledReason } = useNewFeatureSupportLevel();

package/lib/ocm/components/clusterDetail/ClusterInstallationError.tsx

@@ -42,7 +42,7 @@ const ClusterInstallationError: React.FC<ClusterInstallationErrorProps> = ({
               Download Installation Logs
             </AlertActionLink>
             <AlertActionLink
-              onClick={() => window.open(getReportIssueLink(), '_blank')}
+              onClick={() => window.open(getReportIssueLink(), '_blank', 'noopener,noreferrer')}
               id={getID('button-report-bug')}
             >
               Report a bug

package/lib/ocm/components/clusterDetail/ProgressBarAlerts.tsx

@@ -157,7 +157,7 @@ export const HostsInstallationFailed = ({
               Download installation logs
             </AlertActionLink>
             <AlertActionLink
-              onClick={() => window.open(getReportIssueLink(), '_blank')}
+              onClick={() => window.open(getReportIssueLink(), '_blank', 'noopener,noreferrer')}
               id={getID('button-report-bug')}
             >
               Report a bug

package/lib/ocm/components/clusterWizard/ClusterWizardContext.tsx

@@ -3,6 +3,7 @@ import { HostsNetworkConfigurationType } from '../../services';
 import { StaticIpView } from '../clusterConfiguration/staticIp/data/dataTypes';
 import { ClusterWizardStepsType } from './wizardTransition';
 import { UISettingsValues } from '../../../common';
+import { Cluster, InfraEnv } from '@openshift-assisted/types/assisted-installer-service';
 
 export type ClusterWizardContextType = {
   currentStepId: ClusterWizardStepsType;
@@ -18,6 +19,10 @@ export type ClusterWizardContextType = {
   uiSettings?: UISettingsValues;
   installDisconnected: boolean;
   setInstallDisconnected: (enabled: boolean) => void;
+  disconnectedCluster?: Cluster;
+  setDisconnectedCluster: (cluster: Cluster | undefined) => void;
+  disconnectedInfraEnv?: InfraEnv;
+  setDisconnectedInfraEnv: (infraEnv: InfraEnv | undefined) => void;
 };
 
 export const ClusterWizardContext = React.createContext<ClusterWizardContextType | null>(null);

package/lib/ocm/components/clusterWizard/ClusterWizardContextProvider.tsx

@@ -88,6 +88,8 @@ const ClusterWizardContextProvider = ({
   const [connectedWizardStepIds, setWizardStepIds] = React.useState<ClusterWizardStepsType[]>();
   const [wizardPerPage, setWizardPerPage] = React.useState(10);
   const [installDisconnected, setInstallDisconnected] = React.useState(false);
+  const [disconnectedCluster, setDisconnectedCluster] = React.useState<Cluster | undefined>();
+  const [disconnectedInfraEnv, setDisconnectedInfraEnv] = React.useState<InfraEnv | undefined>();
   const location = useLocation();
   const locationState = location.state as ClusterWizardFlowStateType | undefined;
   const {
@@ -228,6 +230,10 @@ const ClusterWizardContextProvider = ({
           connectedWizardStepIds?.length && onSetCurrentStepId(connectedWizardStepIds[0]);
         }
       },
+      disconnectedCluster,
+      setDisconnectedCluster,
+      disconnectedInfraEnv,
+      setDisconnectedInfraEnv,
     };
   }, [
     wizardStepIds,
@@ -240,6 +246,9 @@ const ClusterWizardContextProvider = ({
     updateUISettings,
     installDisconnected,
     connectedWizardStepIds,
+    disconnectedCluster,
+    disconnectedInfraEnv,
+    setDisconnectedInfraEnv,
   ]);
 
   if (!contextValue) {

package/lib/ocm/components/clusterWizard/NewClusterWizard.tsx

@@ -4,6 +4,7 @@ import ClusterDetails from './ClusterDetails';
 import { useClusterWizardContext } from './ClusterWizardContext';
 import ReviewStep from './disconnected/ReviewStep';
 import BasicStep from './disconnected/BasicStep';
+import OptionalConfigurationsStep from './disconnected/OptionalConfigurationsStep';
 import { ClusterWizardStepsType } from './wizardTransition';
 import { useInfraEnv } from '../../hooks';
 import { CpuArchitecture } from '../../../common/types';
@@ -13,6 +14,8 @@ const getCurrentStep = (currentStepId: ClusterWizardStepsType, infraEnv?: InfraE
   switch (currentStepId) {
     case 'disconnected-review':
       return <ReviewStep />;
+    case 'disconnected-optional-configurations':
+      return <OptionalConfigurationsStep />;
     case 'disconnected-basic':
       return <BasicStep />;
     default:

package/lib/ocm/components/clusterWizard/constants.ts

@@ -14,6 +14,7 @@ export const wizardStepNames: { [key in ClusterWizardStepsType]: string } = {
   'credentials-download': 'Download credentials',
   'disconnected-review': 'Review and download ISO',
   'disconnected-basic': 'Basic information',
+  'disconnected-optional-configurations': 'Optional configurations',
 };
 
 export const defaultWizardSteps: ClusterWizardStepsType[] = [

package/lib/ocm/components/clusterWizard/disconnected/BasicStep.tsx

@@ -1,68 +1,47 @@
 import * as React from 'react';
-import {
-  ClusterWizardStep,
-  TechnologyPreview,
-  ExternalLink,
-  OCP_RELEASES_PAGE,
-  StaticTextField,
-  useTranslation,
-} from '../../../../common';
+import { ClusterWizardStep, TechnologyPreview, StaticTextField } from '../../../../common';
 import { Flex, Grid, GridItem, Form, Content } from '@patternfly/react-core';
-import OcmOpenShiftVersion from '../../clusterConfiguration/OcmOpenShiftVersion';
 import { useClusterWizardContext } from '../ClusterWizardContext';
 import ClusterWizardFooter from '../ClusterWizardFooter';
 import ClusterWizardNavigation from '../ClusterWizardNavigation';
 import { WithErrorBoundary } from '../../../../common/components/ErrorHandling/WithErrorBoundary';
 import InstallDisconnectedSwitch from './InstallDisconnectedSwitch';
-import { Formik } from 'formik';
+
+export const DISCONNECTED_OPENSHIFT_VERSION = '4.21';
 
 const BasicStep = () => {
-  const { t } = useTranslation();
   const { moveNext } = useClusterWizardContext();
 
   return (
-    <Formik
-      initialValues={{}}
-      onSubmit={() => {
-        // nothing to do
-      }}
+    <ClusterWizardStep
+      navigation={<ClusterWizardNavigation />}
+      footer={<ClusterWizardFooter onNext={moveNext} />}
     >
-      <ClusterWizardStep
-        navigation={<ClusterWizardNavigation />}
-        footer={<ClusterWizardFooter onNext={moveNext} />}
-      >
-        <WithErrorBoundary title="Failed to load Basic step">
-          <Grid hasGutter>
-            <GridItem>
-              <Content component="h2">Basic information</Content>
-            </GridItem>
-            <GridItem>
-              <Flex alignItems={{ default: 'alignItemsCenter' }} gap={{ default: 'gapSm' }}>
-                <TechnologyPreview />
-                <InstallDisconnectedSwitch />
-                <span>
-                  {t("ai:I'm installing on a disconnected/air-gapped/secured environment")}
-                </span>
-              </Flex>
-            </GridItem>
-            <GridItem>
-              <Form id="wizard-cluster-basic-info__form">
-                <OcmOpenShiftVersion openshiftVersion="4.20" withPreviewText withMultiText>
-                  <ExternalLink href={`${window.location.origin}/${OCP_RELEASES_PAGE}`}>
-                    <span data-ouia-id="openshift-releases-link">
-                      {t('ai:Learn more about OpenShift releases')}
-                    </span>
-                  </ExternalLink>
-                </OcmOpenShiftVersion>
-                <StaticTextField name="cpuArchitecture" label="CPU architecture" isRequired>
-                  x86_64
-                </StaticTextField>
-              </Form>
-            </GridItem>
-          </Grid>
-        </WithErrorBoundary>
-      </ClusterWizardStep>
-    </Formik>
+      <WithErrorBoundary title="Failed to load Basic step">
+        <Grid hasGutter>
+          <GridItem>
+            <Content component="h2">Basic information</Content>
+          </GridItem>
+          <GridItem>
+            <Flex alignItems={{ default: 'alignItemsCenter' }} gap={{ default: 'gapSm' }}>
+              <TechnologyPreview />
+              <InstallDisconnectedSwitch />
+              <span>I'm installing on a disconnected/air-gapped/secured environment</span>
+            </Flex>
+          </GridItem>
+          <GridItem>
+            <Form id="wizard-cluster-basic-info__form">
+              <StaticTextField name="openshiftVersion" label="OpenShift version">
+                {DISCONNECTED_OPENSHIFT_VERSION}
+              </StaticTextField>
+              <StaticTextField name="cpuArchitecture" label="CPU architecture">
+                x86_64
+              </StaticTextField>
+            </Form>
+          </GridItem>
+        </Grid>
+      </WithErrorBoundary>
+    </ClusterWizardStep>
   );
 };