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

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

@@ -31,7 +31,6 @@ import {
   RadioField,
   PopoverIcon,
   pullSecretValidationSchema,
-  OCP_STATIC_IP_DOC,
   CheckboxField,
   AdditionalNTPSourcesField,
   richNameValidationSchema,
@@ -42,6 +41,7 @@ import {
   locationValidationMessages,
   ntpSourceValidationSchema,
   CpuArchitecture,
+  getOCPStaticIPDocLink,
 } from '../../../common';
 
 import './infra-env.css';
@@ -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())
@@ -110,6 +118,7 @@ type InfraEnvFormProps = {
   onValuesChanged?: (values: EnvironmentStepFormValues) => void;
   pullSecret?: string;
   sshPublicKey?: string;
+  docVersion: string;
 };
 
 const InfraEnvForm: React.FC<InfraEnvFormProps> = ({
@@ -117,6 +126,7 @@ const InfraEnvForm: React.FC<InfraEnvFormProps> = ({
   children,
   pullSecret,
   sshPublicKey,
+  docVersion,
 }) => {
   const { values, setFieldValue } = useFormikContext<EnvironmentStepFormValues>();
   const { t } = useTranslation();
@@ -186,7 +196,13 @@ const InfraEnvForm: React.FC<InfraEnvFormProps> = ({
                                 icon={<ExternalLinkAltIcon />}
                                 iconPosition="right"
                                 isInline
-                                onClick={() => window.open(OCP_STATIC_IP_DOC, '_blank', 'noopener')}
+                                onClick={() =>
+                                  window.open(
+                                    getOCPStaticIPDocLink(docVersion),
+                                    '_blank',
+                                    'noopener',
+                                  )
+                                }
                               >
                                 {t('ai:View documentation')}
                               </Button>
@@ -274,6 +290,7 @@ type InfraEnvFormPageProps = InfraEnvFormProps & {
   formRef: React.Ref<FormikProps<EnvironmentStepFormValues>>;
   pullSecret?: string;
   sshPublicKey?: string;
+  docVersion: string;
 };
 
 export const InfraEnvFormPage: React.FC<InfraEnvFormPageProps> = ({

package/lib/cim/components/helpers/versions.ts

@@ -80,3 +80,8 @@ export const getMajorMinorVersion = (version = '') => {
   const match = /[0-9].[0-9][0-9]?/g.exec(version);
   return match?.[0] || '';
 };
+
+export const getNetworkType = (
+  ocpVersion: OpenshiftVersionOptionType | undefined,
+): 'OVNKubernetes' | 'OpenShiftSDN' =>
+  parseFloat(getMajorMinorVersion(ocpVersion?.version)) >= 4.12 ? 'OVNKubernetes' : 'OpenShiftSDN';

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

@@ -73,6 +73,8 @@ const AddHostModal: React.FC<AddHostModalProps> = ({
             noProxy={noProxy}
             hasDHCP={hasDHCP}
             isIPXE={isIPXE}
+            allowEmpty
+            docVersion={docVersion}
           />
         )}
         {dialogType === 'download' && (
@@ -89,6 +91,7 @@ const AddHostModal: React.FC<AddHostModalProps> = ({
                 infraEnv={infraEnv}
                 onReset={agentClusterInstall ? () => setDialogType('config') : undefined}
                 hasDHCP={hasDHCP}
+                docVersion={docVersion}
               />
             )}
           </>
@@ -103,11 +106,13 @@ const GeneratingIsoDownload = ({
   onClose,
   onReset,
   hasDHCP,
+  docVersion,
 }: {
   infraEnv: InfraEnvK8sResource;
   onClose: VoidFunction;
   onReset?: VoidFunction;
   hasDHCP: boolean;
+  docVersion: string;
 }) => {
   const { t } = useTranslation();
   return infraEnv.status?.isoDownloadURL ? (
@@ -116,6 +121,7 @@ const GeneratingIsoDownload = ({
       downloadUrl={infraEnv.status.isoDownloadURL}
       onReset={onReset}
       hasDHCP={hasDHCP}
+      docVersion={docVersion}
     />
   ) : (
     <EmptyState>

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

@@ -23,10 +23,10 @@ import { ProxyFieldsType, StatusErrorType } from '../../types';
 import ProxyFields from './ProxyFields';
 import UploadSSH from './UploadSSH';
 import DiscoveryImageTypeControlGroup from './DiscoveryImageTypeControlGroup';
-import { OCP_STATIC_IP_DOC } from '../../config/constants';
+import { getOCPStaticIPDocLink } from '../../config/constants';
 import { useTranslation } from '../../hooks/use-translation-wrapper';
 
-export const StaticIPInfo: React.FC = () => {
+export const StaticIPInfo = ({ docVersion }: { docVersion?: string }) => {
   const { t } = useTranslation();
   return (
     <Alert
@@ -41,7 +41,7 @@ export const StaticIPInfo: React.FC = () => {
         icon={<ExternalLinkAltIcon />}
         iconPosition="right"
         isInline
-        onClick={() => window.open(OCP_STATIC_IP_DOC, '_blank', 'noopener')}
+        onClick={() => window.open(getOCPStaticIPDocLink(docVersion), '_blank', 'noopener')}
       >
         {t('ai:View documentation')}
       </Button>
@@ -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,8 @@ type DiscoveryImageConfigFormProps = Proxy & {
   sshPublicKey?: string;
   imageType?: ImageType;
   isIPXE?: boolean;
+  allowEmpty?: boolean;
+  docVersion: string;
 };
 
 export const DiscoveryImageConfigForm: React.FC<DiscoveryImageConfigFormProps> = ({
@@ -84,6 +87,8 @@ export const DiscoveryImageConfigForm: React.FC<DiscoveryImageConfigFormProps> =
   hideDiscoveryImageType,
   hasDHCP,
   isIPXE,
+  allowEmpty,
+  docVersion,
 }) => {
   const initialValues: DiscoveryImageFormValues = {
     sshPublicKey: sshPublicKey || '',
@@ -99,7 +104,7 @@ export const DiscoveryImageConfigForm: React.FC<DiscoveryImageConfigFormProps> =
     <Formik
       initialValues={initialValues}
       initialStatus={{ error: null }}
-      validationSchema={validationSchema}
+      validationSchema={getValidationSchema(!!allowEmpty)}
       onSubmit={handleSubmit}
     >
       {({ submitForm, isSubmitting, status }) => {
@@ -120,7 +125,7 @@ export const DiscoveryImageConfigForm: React.FC<DiscoveryImageConfigFormProps> =
                 </StackItem>
                 {hasDHCP === false && (
                   <StackItem>
-                    <StaticIPInfo />
+                    <StaticIPInfo docVersion={docVersion} />
                   </StackItem>
                 )}
                 <StackItem>

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

@@ -23,6 +23,7 @@ export type DownloadISOProps = {
   downloadUrl?: string;
   onClose: () => void;
   onReset?: () => void;
+  docVersion?: string;
 };
 
 const DownloadIso = ({
@@ -32,6 +33,7 @@ const DownloadIso = ({
   onReset,
   hasDHCP,
   isSNO = false,
+  docVersion,
 }: DownloadISOProps) => {
   const wgetCommand = `wget -O ${fileName} '${downloadUrl || ''}'`;
   const { t } = useTranslation();
@@ -53,7 +55,7 @@ const DownloadIso = ({
           </StackItem>
           {hasDHCP === false && (
             <StackItem>
-              <StaticIPInfo />
+              <StaticIPInfo docVersion={docVersion} />
             </StackItem>
           )}
           <StackItem>

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

@@ -12,6 +12,7 @@ import { OPENSHIFT_LIFE_CYCLE_DATES_LINK } from '../../config';
 import { OpenshiftVersionOptionType } from '../../types';
 import { SelectField } from '../ui';
 import { useTranslation } from '../../hooks/use-translation-wrapper';
+import { SelectFieldProps } from '../ui/formik/types';
 
 const OpenShiftLifeCycleDatesLink = () => {
   const { t } = useTranslation();
@@ -54,8 +55,9 @@ const getOpenshiftVersionHelperText =
 
 type OpenShiftVersionSelectProps = {
   versions: OpenshiftVersionOptionType[];
+  onChange?: SelectFieldProps['onChange'];
 };
-const OpenShiftVersionSelect: React.FC<OpenShiftVersionSelectProps> = ({ versions }) => {
+const OpenShiftVersionSelect: React.FC<OpenShiftVersionSelectProps> = ({ versions, onChange }) => {
   const selectOptions = React.useMemo(
     () =>
       versions
@@ -75,6 +77,7 @@ const OpenShiftVersionSelect: React.FC<OpenShiftVersionSelectProps> = ({ version
       getHelperText={getOpenshiftVersionHelperText(versions)}
       isDisabled={versions.length === 0}
       isRequired
+      onChange={onChange}
     />
   );
 };

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

@@ -1,9 +1,8 @@
 import React from 'react';
-import { AxiosResponseHeaders } from 'axios';
 import omit from 'lodash-es/omit.js';
 import { Pagination, PaginationVariant } from '@patternfly/react-core';
-import { Event, EventList } from '../../api';
-import { EVENTS_POLLING_INTERVAL, EVENT_SEVERITIES } from '../../config';
+import { EventList } from '../../api';
+import { EVENTS_POLLING_INTERVAL } from '../../config';
 import { ClusterEventsFiltersType, EventListFetchProps } from '../../types';
 import { useStateSafely } from '../../hooks';
 import { ErrorState, LoadingState } from '../ui/uiState';
@@ -20,12 +19,15 @@ const initialSeverityCounts = {
   warning: 0,
 };
 
-export const EventListFetch = ({ onFetchEvents, ...props }: EventListFetchProps) => {
-  const { cluster, hostId, className, entityKind } = props;
+export const EventListFetch = ({
+  onFetchEvents,
+  disablePagination,
+  ...props
+}: EventListFetchProps) => {
+  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);
@@ -53,43 +55,29 @@ export const EventListFetch = ({ onFetchEvents, ...props }: EventListFetchProps)
     setPageNum(newPage);
   };
 
-  const parseHeaders = React.useCallback(
-    (headers: AxiosResponseHeaders) => {
-      const severities: Record<Event['severity'], number> = {
-        error: 0,
-        info: 0,
-        warning: 0,
-        critical: 0,
-      };
-      EVENT_SEVERITIES.forEach((severity) => {
-        const count = Number(headers[`severity-count-${severity}`]);
-        severities[severity] = count;
-      });
-      setTotalEvents(Number(headers['event-count']));
-      setSeverityCount(severities as SeverityCountsType);
-    },
-    [setSeverityCount, setTotalEvents],
-  );
-
   React.useEffect(() => {
     let timer: ReturnType<typeof setTimeout>;
     setLoading(true);
 
-    void onFetchEvents(
+    onFetchEvents(
       {
         clusterId: cluster.id,
         ...omit(filters, 'selectAll'),
         offset: perPage * (pageNum - 1),
         limit: perPage,
       },
-      ({ data: newEvents, headers }) => {
+      ({ data: newEvents, severities, totalEvents }) => {
         setError('');
         setEvents(newEvents);
         setLoading(false);
-        parseHeaders(headers);
+        setTotalEvents(totalEvents);
+        setSeverityCount(severities);
         timer = setTimeout(() => setLastPolling(Date.now()), EVENTS_POLLING_INTERVAL);
       },
-      setError,
+      (err: string) => {
+        setError(err);
+        setLoading(false);
+      },
     );
 
     return () => clearTimeout(timer);
@@ -100,13 +88,13 @@ export const EventListFetch = ({ onFetchEvents, ...props }: EventListFetchProps)
     onFetchEvents,
     perPage,
     pageNum,
-    parseHeaders,
-    totalEvents,
     filters,
     setLoading,
     setError,
     setEvents,
     setLastPolling,
+    setTotalEvents,
+    setSeverityCount,
   ]);
 
   const forceRefetch = React.useCallback(() => {
@@ -125,7 +113,7 @@ export const EventListFetch = ({ onFetchEvents, ...props }: EventListFetchProps)
     eventList = <ErrorState title={error} fetchData={forceRefetch} />;
   }
 
-  if (isLoading || !events) {
+  if (!events) {
     eventList = <LoadingState />;
   }
 
@@ -144,16 +132,18 @@ export const EventListFetch = ({ onFetchEvents, ...props }: EventListFetchProps)
         severityCounts={severityCounts}
       />
       {eventList}
-      <Pagination
-        perPageComponent="button"
-        itemCount={totalEvents}
-        widgetId="events-pagination"
-        perPage={perPage}
-        page={pageNum}
-        variant={PaginationVariant.bottom}
-        onSetPage={onSetPage}
-        onPerPageSelect={onPerPageSelect}
-      />
+      {!disablePagination && (
+        <Pagination
+          perPageComponent="button"
+          itemCount={totalEvents}
+          widgetId="events-pagination"
+          perPage={perPage}
+          page={pageNum}
+          variant={PaginationVariant.bottom}
+          onSetPage={onSetPage}
+          onPerPageSelect={onPerPageSelect}
+        />
+      )}
     </>
   );
 };

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

@@ -17,9 +17,9 @@ import {
   Tooltip,
 } from '@patternfly/react-core';
 import { CaretDownIcon } from '@patternfly/react-icons';
+import { useTranslation } from '../../hooks/use-translation-wrapper';
 
 import './TableToolbar.css';
-import { useTranslation } from '../../hooks/use-translation-wrapper';
 
 type TableToolbarProps = {
   itemIDs: string[];
@@ -45,6 +45,7 @@ const TableToolbar: React.FC<TableToolbarProps> = ({
   children,
   ...paginationProps
 }) => {
+  const { t } = useTranslation();
   const [actionsOpen, setActionsOpen] = React.useState(false);
   const [selectOpen, setSelectOpen] = React.useState(false);
   const onSelectToggle = React.useCallback(() => setSelectOpen(!selectOpen), [selectOpen]);
@@ -75,7 +76,7 @@ const TableToolbar: React.FC<TableToolbarProps> = ({
           toggleIndicator={CaretDownIcon}
           isDisabled={isDisabled}
         >
-          Actions
+          {t('ai:Actions')}
         </DropdownToggle>
       }
       isOpen={actionsOpen}
@@ -85,7 +86,6 @@ const TableToolbar: React.FC<TableToolbarProps> = ({
 
   const onSelectAll = () => setSelectedIDs(itemIDs);
   const onSelectNone = () => setSelectedIDs([]);
-  const { t } = useTranslation();
   return (
     <Split hasGutter>
       <SplitItem isFilled>

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,17 +20,14 @@ 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;
-  onFetchEvents: EventListFetchProps['onFetchEvents'];
-  onClick?: () => void;
-  hostId?: Event['hostId'];
-  cluster: Cluster;
-  entityKind: EventsEntityKind;
-  title: string;
-  fallbackEventsURL?: string;
-};
+type EventsModalButtonProps = React.ComponentProps<typeof Button> &
+  Omit<EventsModalProps, 'onClose' | 'isOpen' | 'hostId'> & {
+    ButtonComponent?: typeof Button | typeof ToolbarButton;
+    onClick?: () => void;
+    hostId?: Event['hostId'];
+  };
 
 export const EventsModalButton = ({
   ButtonComponent = ToolbarButton,
@@ -34,6 +39,7 @@ export const EventsModalButton = ({
   children,
   title,
   fallbackEventsURL,
+  disablePagination,
   ...props
 }: EventsModalButtonProps) => {
   const [isModalOpen, setIsModalOpen] = React.useState(false);
@@ -53,6 +59,7 @@ export const EventsModalButton = ({
         entityKind={entityKind}
         onFetchEvents={onFetchEvents}
         fallbackEventsURL={fallbackEventsURL}
+        disablePagination={disablePagination}
       />
     </>
   );
@@ -67,22 +74,26 @@ type EventsModalProps = {
   isOpen: boolean;
   title: string;
   fallbackEventsURL?: string;
+  disablePagination?: boolean;
 };
 
 export const EventsModal = ({
-  onFetchEvents,
-  hostId,
-  cluster,
-  entityKind,
   onClose,
   isOpen,
   title,
   fallbackEventsURL,
+  ...rest
 }: 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
@@ -111,13 +122,7 @@ export const EventsModal = ({
             iconColor={globalWarningColor100.value}
           />
         ) : (
-          <EventListFetch
-            hostId={hostId}
-            cluster={cluster}
-            entityKind={entityKind}
-            onFetchEvents={onFetchEvents}
-            className="events-modal__event-list"
-          />
+          <EventListFetch className="events-modal__event-list" setLoading={setLoading} {...rest} />
         )}
       </ModalBoxBody>
     </Modal>

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

@@ -74,7 +74,7 @@ const CodeField = ({
           <CodeEditor
             code={field.value as string}
             isUploadEnabled={!isDisabled}
-            isDownloadEnabled
+            isDownloadEnabled={isValid}
             isCopyEnabled
             isLanguageLabelVisible
             height="400px"

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

@@ -49,7 +49,7 @@ const SelectField: React.FC<SelectFieldProps> = ({
             onChange={(value, event) => {
               //customHandleChange enables calling formik change handler explicitly, useful for example to have the previous value
               callFormikOnChange && field.onChange(event);
-              onChange && onChange(event);
+              onChange && onChange(value, event);
             }}
           >
             {options.map((option, index) => (