@openshift-assisted/ui-lib 2.8.2-cim → 2.9.0-cim

package/lib/cim/components/ClusterDeployment/ClusterDeploymentHostsDiscoveryStep.tsx

@@ -37,8 +37,7 @@ const ClusterDeploymentHostsDiscoveryStep: React.FC<ClusterDeploymentHostsDiscov
     infraEnvAgents.length > 1 &&
       errors.push(t('ai:Single node cluster cannot contain more than 1 host.'));
   } else {
-    (infraEnvAgents.length === 4 || infraEnvAgents.length < 3) &&
-      errors.push(t('ai:Cluster must have 3 or 5 and more hosts.'));
+    infraEnvAgents.length < 3 && errors.push(t('ai:Cluster must have at least 3 hosts.'));
   }
 
   if (infraEnvAgents.some((a) => !a.spec.approved)) {

package/lib/cim/components/ClusterDeployment/ClusterDeploymentHostsSelectionBasic.tsx

@@ -25,9 +25,7 @@ const ClusterDeploymentHostsSelectionBasic: React.FC<ClusterDeploymentHostsSelec
   const { t } = useTranslation();
 
   React.useEffect(() => {
-    if (hostCount === 3) {
-      setFieldValue('useMastersAsWorkers', true);
-    }
+    setFieldValue('useMastersAsWorkers', hostCount === 3);
   }, [hostCount, setFieldValue]);
 
   return (
@@ -43,12 +41,6 @@ const ClusterDeploymentHostsSelectionBasic: React.FC<ClusterDeploymentHostsSelec
             minValue={isSNOCluster ? 1 : HOSTS_MIN_COUNT}
             maxValue={isSNOCluster ? 1 : HOSTS_MAX_COUNT}
             isDisabled={isSNOCluster}
-            formatValue={(newValue) => {
-              if (newValue === 4) {
-                return hostCount >= 4 ? 3 : 5;
-              }
-              return newValue;
-            }}
           />
         </GridItem>
 
@@ -58,7 +50,7 @@ const ClusterDeploymentHostsSelectionBasic: React.FC<ClusterDeploymentHostsSelec
             idPostfix="mastersasworkers"
             name="useMastersAsWorkers"
             label={t('ai:Run workloads on control plane hosts')}
-            isDisabled={hostCount < 5}
+            isDisabled={hostCount !== 3}
           />
         </GridItem>
 

package/lib/cim/components/ClusterDeployment/use-networking-formik.ts

@@ -54,8 +54,8 @@ const getNetworkConfigurationValidationSchema = (
       ingressVip: vipValidationSchema(hostSubnets, values, initialValues.ingressVip),
       sshPublicKey: sshPublicKeyValidationSchema,
       hostSubnet: hostSubnetValidationSchema,
-      httpProxy: httpProxyValidationSchema(values, 'httpsProxy'),
-      httpsProxy: httpProxyValidationSchema(values, 'httpProxy'), // share the schema, httpS is currently not supported
+      httpProxy: httpProxyValidationSchema({ values, pairValueName: 'httpsProxy' }),
+      httpsProxy: httpProxyValidationSchema({ values, pairValueName: 'httpProxy' }), // share the schema, httpS is currently not supported
       noProxy: noProxyValidationSchema,
     }),
   );

package/lib/cim/components/ClusterDeployment/validationSchemas.ts

@@ -14,6 +14,5 @@ export const hostCountValidationSchema = (t: TFunction) => {
       HOSTS_MAX_COUNT,
       t('ai:Maximum hosts count {{HOSTS_MAX_COUNT}} reached.', { HOSTS_MAX_COUNT }),
     )
-    .test('not-four', t('ai:A cluster needs 2 or more worker nodes.'), (value) => value !== 4)
     .required(t('ai:Required field'));
 };

package/lib/cim/components/Hypershift/HostedClusterWizard/NetworkStep/NetworkStep.tsx

@@ -28,8 +28,8 @@ const getValidationSchema = (t: TFunction) =>
       clusterNetworkHostPrefix: values.isAdvanced
         ? hostPrefixValidationSchema(values.clusterNetworkCidr)
         : Yup.number(),
-      httpProxy: httpProxyValidationSchema(values, 'httpsProxy'),
-      httpsProxy: httpProxyValidationSchema(values, 'httpProxy'), // share the schema, httpS is currently not supported
+      httpProxy: httpProxyValidationSchema({ values, pairValueName: 'httpsProxy' }),
+      httpsProxy: httpProxyValidationSchema({ values, pairValueName: 'httpProxy' }), // share the schema, httpS is currently not supported
       noProxy: noProxyValidationSchema,
       nodePortAddress:
         values.apiPublishingStrategy === 'NodePort'

package/lib/cim/components/Hypershift/HostedClusterWizard/NetworkStep/types.ts

@@ -21,5 +21,4 @@ export type NetworkStepProps = {
   formRef: React.Ref<FormikProps<NetworkFormValues>>;
   onValuesChanged: (values: NetworkFormValues, initRender: boolean) => void;
   initialValues: NetworkFormValues;
-  count: number;
 };

package/lib/cim/components/InfraEnv/InfraEnvFormPage.tsx

@@ -72,8 +72,16 @@ const validationSchema = (usedNames: string[], t: TFunction) =>
       location: locationValidationSchema(t).required(t('ai:Location is a required field.')),
       pullSecret: pullSecretValidationSchema.required(t('ai:Pull secret is a required field.')),
       sshPublicKey: sshPublicKeyValidationSchema,
-      httpProxy: httpProxyValidationSchema(values, 'httpsProxy'),
-      httpsProxy: httpProxyValidationSchema(values, 'httpProxy'), // share the schema, httpS is currently not supported
+      httpProxy: httpProxyValidationSchema({
+        values,
+        pairValueName: 'httpsProxy',
+        allowEmpty: true,
+      }),
+      httpsProxy: httpProxyValidationSchema({
+        values,
+        pairValueName: 'httpProxy',
+        allowEmpty: true,
+      }), // share the schema, httpS is currently not supported
       noProxy: noProxyValidationSchema,
       labels: Yup.array()
         .of(Yup.string())

package/lib/cim/components/modals/AddHostModal.tsx

@@ -73,6 +73,7 @@ const AddHostModal: React.FC<AddHostModalProps> = ({
             noProxy={noProxy}
             hasDHCP={hasDHCP}
             isIPXE={isIPXE}
+            allowEmpty
           />
         )}
         {dialogType === 'download' && (

package/lib/cim/components/modals/EditProxyModal.tsx

@@ -27,8 +27,16 @@ import { getWarningMessage } from './utils';
 const validationSchema = () =>
   Yup.lazy<ProxyFieldsType>((values) =>
     Yup.object<ProxyFieldsType>().shape({
-      httpProxy: httpProxyValidationSchema(values, 'httpsProxy'),
-      httpsProxy: httpProxyValidationSchema(values, 'httpProxy'),
+      httpProxy: httpProxyValidationSchema({
+        values,
+        pairValueName: 'httpsProxy',
+        allowEmpty: true,
+      }),
+      httpsProxy: httpProxyValidationSchema({
+        values,
+        pairValueName: 'httpProxy',
+        allowEmpty: true,
+      }),
       noProxy: noProxyValidationSchema,
     }),
   );
@@ -62,6 +70,10 @@ const EditProxyModal: React.FC<EditProxyModalProps> = ({
   const { t } = useTranslation();
   const [error, setError] = React.useState<string>();
   const warningMsg = getWarningMessage(hasAgents, hasBMHs, t);
+  const enableProxy =
+    !!infraEnv.spec?.proxy?.httpProxy ||
+    !!infraEnv.spec?.proxy?.httpsProxy ||
+    !!infraEnv.spec?.proxy?.noProxy;
   return (
     <Modal
       aria-label={t('ai:Edit proxy settings')}
@@ -76,7 +88,7 @@ const EditProxyModal: React.FC<EditProxyModalProps> = ({
           httpProxy: infraEnv.spec?.proxy?.httpProxy,
           httpsProxy: infraEnv.spec?.proxy?.httpsProxy,
           noProxy: infraEnv.spec?.proxy?.noProxy,
-          enableProxy: true,
+          enableProxy,
         }}
         validationSchema={validationSchema}
         onSubmit={async (values: ProxyFieldsType) => {

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

@@ -51,14 +51,15 @@ export const StaticIPInfo: React.FC = () => {
 
 export type DiscoveryImageFormValues = ImageCreateParams & ProxyFieldsType;
 
-const validationSchema = Yup.lazy<DiscoveryImageFormValues>((values) =>
-  Yup.object<DiscoveryImageFormValues>().shape({
-    sshPublicKey: sshPublicKeyValidationSchema,
-    httpProxy: httpProxyValidationSchema(values, 'httpsProxy'),
-    httpsProxy: httpProxyValidationSchema(values, 'httpProxy'), // share the schema, httpS is currently not supported
-    noProxy: noProxyValidationSchema,
-  }),
-);
+const getValidationSchema = (allowEmpty: boolean) =>
+  Yup.lazy<DiscoveryImageFormValues>((values) =>
+    Yup.object<DiscoveryImageFormValues>().shape({
+      sshPublicKey: sshPublicKeyValidationSchema,
+      httpProxy: httpProxyValidationSchema({ values, pairValueName: 'httpsProxy', allowEmpty }),
+      httpsProxy: httpProxyValidationSchema({ values, pairValueName: 'httpProxy', allowEmpty }), // share the schema, httpS is currently not supported
+      noProxy: noProxyValidationSchema,
+    }),
+  );
 
 type DiscoveryImageConfigFormProps = Proxy & {
   onCancel: () => void;
@@ -71,6 +72,7 @@ type DiscoveryImageConfigFormProps = Proxy & {
   sshPublicKey?: string;
   imageType?: ImageType;
   isIPXE?: boolean;
+  allowEmpty?: boolean;
 };
 
 export const DiscoveryImageConfigForm: React.FC<DiscoveryImageConfigFormProps> = ({
@@ -84,6 +86,7 @@ export const DiscoveryImageConfigForm: React.FC<DiscoveryImageConfigFormProps> =
   hideDiscoveryImageType,
   hasDHCP,
   isIPXE,
+  allowEmpty,
 }) => {
   const initialValues: DiscoveryImageFormValues = {
     sshPublicKey: sshPublicKey || '',
@@ -99,7 +102,7 @@ export const DiscoveryImageConfigForm: React.FC<DiscoveryImageConfigFormProps> =
     <Formik
       initialValues={initialValues}
       initialStatus={{ error: null }}
-      validationSchema={validationSchema}
+      validationSchema={getValidationSchema(!!allowEmpty)}
       onSubmit={handleSubmit}
     >
       {({ submitForm, isSubmitting, status }) => {

package/lib/common/components/clusterWizard/ClusterWizardStep.tsx

@@ -10,7 +10,11 @@ type ClusterWizardStepProps = {
   navigation?: React.ReactNode;
 };
 
-const ClusterWizardStep: React.FC<ClusterWizardStepProps> = ({ navigation, footer, children }) => {
+const ClusterWizardStep = ({
+  navigation,
+  footer,
+  children,
+}: React.PropsWithChildren<ClusterWizardStepProps>) => {
   // activeStep is required, but we're not passing it. Using the cast to avoid TS error
   const activeStep = undefined as unknown as WizardBodyProps['activeStep'];
   return (

package/lib/common/components/clusterWizard/networkingSteps/ManagedNetworkingControlGroup.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { FormGroup, TooltipProps } from '@patternfly/react-core';
-import { getFieldId } from '../../ui';
+import { PopoverIcon, getFieldId } from '../../ui';
 import RadioFieldWithTooltip from '../../ui/formik/RadioFieldWithTooltip';
 import { useTranslation } from '../../../hooks/use-translation-wrapper';
 
@@ -47,7 +47,16 @@ export const ManagedNetworkingControlGroup = ({
         name={GROUP_NAME}
         isDisabled={disabled}
         value={'userManaged'}
-        label={t('ai:User-Managed Networking')}
+        label={
+          <>
+            <span>{t('ai:User-Managed Networking')}</span>{' '}
+            <PopoverIcon
+              bodyContent={
+                "With User-Managed Networking, you'll need to provide and configure a load balancer for the API and ingress endpoints."
+              }
+            />
+          </>
+        }
       />
     </FormGroup>
   );

package/lib/common/components/clusterWizard/networkingSteps/NetworkTypeControlGroup.tsx

@@ -39,7 +39,7 @@ export const NetworkTypeControlGroup = ({
         <SplitItem>
           <PopoverIcon
             bodyContent={t(
-              "ai:The next generation networking type, select this when you're using new features and telco features",
+              "ai:OVN separates the physical network topology from the logical one and is recommended if you're using new or telco features.",
             )}
             buttonStyle={{ top: '-4px' }}
           />

package/lib/common/components/fetching/EventListFetch.tsx

@@ -21,11 +21,10 @@ const initialSeverityCounts = {
 };
 
 export const EventListFetch = ({ onFetchEvents, ...props }: EventListFetchProps) => {
-  const { cluster, hostId, className, entityKind } = props;
+  const { cluster, hostId, className, entityKind, setLoading } = props;
 
   const [lastPolling, setLastPolling] = useStateSafely(0);
   const [error, setError] = useStateSafely('');
-  const [isLoading, setLoading] = useStateSafely(true);
   const [events, setEvents] = useStateSafely<EventList | undefined>(undefined);
 
   const [pageNum, setPageNum] = useStateSafely(1);
@@ -89,7 +88,10 @@ export const EventListFetch = ({ onFetchEvents, ...props }: EventListFetchProps)
         parseHeaders(headers);
         timer = setTimeout(() => setLastPolling(Date.now()), EVENTS_POLLING_INTERVAL);
       },
-      setError,
+      (err: string) => {
+        setError(err);
+        setLoading(false);
+      },
     );
 
     return () => clearTimeout(timer);
@@ -101,7 +103,6 @@ export const EventListFetch = ({ onFetchEvents, ...props }: EventListFetchProps)
     perPage,
     pageNum,
     parseHeaders,
-    totalEvents,
     filters,
     setLoading,
     setError,
@@ -125,7 +126,7 @@ export const EventListFetch = ({ onFetchEvents, ...props }: EventListFetchProps)
     eventList = <ErrorState title={error} fetchData={forceRefetch} />;
   }
 
-  if (isLoading || !events) {
+  if (!events) {
     eventList = <LoadingState />;
   }
 

package/lib/common/components/hosts/status.tsx

@@ -217,7 +217,7 @@ export const hostStatus: HostStatus<Host['status'] | 'finalizing'> = Object.free
     category: 'Installation related',
     icon: <ExclamationTriangleIcon color={warningColor.value} />,
     details:
-      'Host already booted from disk during previous installation. To finish resetting the installation please boot the host into Discovery ISO.',
+      'Host has already been booted from disk during the previous installation. To finish resetting the installation, boot the host into the discovery image',
   },
   finalizing: {
     key: 'finalizing',

package/lib/common/components/ui/ClusterEventsToolbar.tsx

@@ -226,6 +226,9 @@ const ClusterEventsToolbar = ({
               isOpen={isHostExpanded}
               placeholderText={<Placeholder text="Hosts" />}
               isDisabled={allHosts.length === 0}
+              maxHeight={280}
+              zIndex={600}
+              menuAppendTo={document.body}
             >
               {[
                 <SelectOption

package/lib/common/components/ui/StaticTextField.tsx

@@ -5,7 +5,7 @@ import { getFieldId, HelperText } from './formik';
 
 export interface StaticFieldProps {
   name: string;
-  label: string;
+  label: React.ReactNode;
   helperText?: React.ReactNode;
   helperTextInvalid?: React.ReactNode;
   isRequired?: boolean;

package/lib/common/components/ui/eventsModal.tsx

@@ -1,5 +1,13 @@
 import React from 'react';
-import { Button, Modal, ButtonVariant, ModalVariant, ModalBoxBody } from '@patternfly/react-core';
+import {
+  Button,
+  Modal,
+  ButtonVariant,
+  ModalVariant,
+  ModalBoxBody,
+  Spinner,
+  Title,
+} from '@patternfly/react-core';
 import { ExclamationTriangleIcon } from '@patternfly/react-icons';
 import { global_warning_color_100 as globalWarningColor100 } from '@patternfly/react-tokens';
 import { ToolbarButton } from './Toolbar';
@@ -12,6 +20,7 @@ import ErrorState from './uiState/ErrorState';
 import './EventsModal.css';
 import { useTranslation } from '../../hooks/use-translation-wrapper';
 import { Trans } from 'react-i18next';
+import { useStateSafely } from '../../hooks';
 
 type EventsModalButtonProps = React.ComponentProps<typeof Button> & {
   ButtonComponent?: typeof Button | typeof ToolbarButton;
@@ -80,9 +89,15 @@ export const EventsModal = ({
   fallbackEventsURL,
 }: EventsModalProps) => {
   const { t } = useTranslation();
+  const [isLoading, setLoading] = useStateSafely(true);
+
   return (
     <Modal
-      title={title}
+      header={
+        <Title headingLevel={'h1'}>
+          {title} {isLoading && <Spinner isSVG size="lg" />}
+        </Title>
+      }
       isOpen={isOpen}
       aria-label={t('ai:Displays events')}
       hasNoBodyWrapper
@@ -117,6 +132,7 @@ export const EventsModal = ({
             entityKind={entityKind}
             onFetchEvents={onFetchEvents}
             className="events-modal__event-list"
+            setLoading={setLoading}
           />
         )}
       </ModalBoxBody>

package/lib/common/components/ui/formik/validationSchemas.ts

@@ -504,28 +504,46 @@ export const richHostnameValidationSchema = (
 };
 
 const httpProxyValidationMessage = 'Provide a valid HTTP URL.';
-export const httpProxyValidationSchema = (
-  values: ProxyFieldsType,
-  pairValueName: 'httpProxy' | 'httpsProxy',
-) =>
-  Yup.string()
-    .test(
-      'http-proxy-no-empty-validation',
-      'At least one of the HTTP or HTTPS proxy URLs is required.',
-      (value) => Boolean(!values.enableProxy || value || values[pairValueName]),
-    )
-    .test('http-proxy-validation', httpProxyValidationMessage, (value: string) => {
+export const httpProxyValidationSchema = ({
+  values,
+  pairValueName,
+  allowEmpty,
+}: {
+  values: ProxyFieldsType;
+  pairValueName: 'httpProxy' | 'httpsProxy';
+  allowEmpty?: boolean;
+}) => {
+  const validation = Yup.string().test(
+    'http-proxy-validation',
+    httpProxyValidationMessage,
+    (value: string) => {
       if (!value) {
         return true;
       }
 
+      if (!value.startsWith('http://')) {
+        return false;
+      }
+
       try {
-        const url = new URL(value);
-        return url.protocol === 'http:';
+        new URL(value);
       } catch {
         return false;
       }
-    });
+      return true;
+    },
+  );
+
+  if (allowEmpty) {
+    return validation;
+  }
+
+  return validation.test(
+    'http-proxy-no-empty-validation',
+    'At least one of the HTTP or HTTPS proxy URLs is required.',
+    (value) => !values.enableProxy || !!value || !!values[pairValueName],
+  );
+};
 
 const isIPorDN = (value: string, dnsRegex = DNS_NAME_REGEX) => {
   if (value.match(dnsRegex)) {

package/lib/common/config/constants.ts

@@ -366,3 +366,7 @@ export const CHANGE_ISO_PASSWORD_FILE_LINK =
 
 export const CUSTOM_MANIFESTS_HELP_LINK =
   'https://docs.openshift.com/container-platform/4.12/installing/install_config/installing-customizing.html';
+
+//TODO (mortegag): Change the link. Related to https://issues.redhat.com/browse/MGMT-13976
+export const HOW_TO_KNOW_IF_CLUSTER_SUPPORTS_MULTIPLE_CPU_ARCHS =
+  'https://57587--docspreview.netlify.app/openshift-enterprise/latest/post_installation_configuration/multi-architecture-configuration.html#multi-architecture-verifying-cluster-compatibility_multi-architecture-configuration';

package/lib/common/types/events.ts

@@ -24,4 +24,5 @@ export type EventListFetchProps = EventFetchProps & {
     onError: (message: string) => void,
   ) => Promise<void>;
   className?: string;
+  setLoading: (loading: boolean) => void;
 };