@openshift-assisted/ui-lib 2.48.6 → 2.50.0

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

@@ -1,13 +1,18 @@
 import * as React from 'react';
 import * as Yup from 'yup';
 import { TFunction } from 'i18next';
-import { Alert, Button, ButtonVariant, Stack, StackItem } from '@patternfly/react-core';
 import {
+  Alert,
+  Button,
+  ButtonVariant,
   Modal,
-  ModalBoxBody,
-  ModalBoxFooter,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
   ModalVariant,
-} from '@patternfly/react-core/deprecated';
+  Stack,
+  StackItem,
+} from '@patternfly/react-core';
 import { Formik, useFormikContext } from 'formik';
 import { InfraEnvK8sResource, SecretK8sResource } from '../../types';
 import { LoadingState, PullSecretField, pullSecretValidationSchema } from '../../../common';
@@ -18,7 +23,7 @@ import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
 
 const validationSchema = (t: TFunction) =>
   Yup.object({
-    pullSecret: pullSecretValidationSchema.required(t('ai:Pull secret is a required field.')),
+    pullSecret: pullSecretValidationSchema(t).required(t('ai:Pull secret is a required field.')),
   });
 
 type EditPullSecretFormProps = {
@@ -72,7 +77,7 @@ const EditPullSecretForm: React.FC<EditPullSecretFormProps> = ({
   }
   return (
     <>
-      <ModalBoxBody>
+      <ModalBody>
         <Stack hasGutter>
           <StackItem>{body}</StackItem>
         </Stack>
@@ -81,8 +86,8 @@ const EditPullSecretForm: React.FC<EditPullSecretFormProps> = ({
             <Alert title={submitError} variant="danger" isInline />
           </StackItem>
         )}
-      </ModalBoxBody>
-      <ModalBoxFooter>
+      </ModalBody>
+      <ModalFooter>
         <Button
           // eslint-disable-next-line @typescript-eslint/no-misused-promises
           onClick={submitForm}
@@ -93,7 +98,7 @@ const EditPullSecretForm: React.FC<EditPullSecretFormProps> = ({
         <Button onClick={onClose} variant={ButtonVariant.secondary}>
           {t('ai:Cancel')}
         </Button>
-      </ModalBoxFooter>
+      </ModalFooter>
     </>
   );
 };
@@ -119,13 +124,12 @@ const EditPullSecretModal: React.FC<EditPullSecretModalProps> = ({
   return (
     <Modal
       aria-label={t('ai:Edit pull secret dialog')}
-      title={t('ai:Edit pull secret')}
       isOpen={isOpen}
       onClose={onClose}
       variant={ModalVariant.small}
-      hasNoBodyWrapper
       id="edit-pull-secret-modal"
     >
+      <ModalHeader title={t('ai:Edit pull secret')} />
       <Formik<EditPullSecretFormikValues>
         initialValues={{
           pullSecret: undefined,

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

@@ -1,12 +1,18 @@
 import * as React from 'react';
 import * as Yup from 'yup';
-import { Alert, Button, ButtonVariant, Stack, StackItem } from '@patternfly/react-core';
+import { TFunction } from 'i18next';
 import {
+  Alert,
+  Button,
+  ButtonVariant,
   Modal,
-  ModalBoxBody,
-  ModalBoxFooter,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
   ModalVariant,
-} from '@patternfly/react-core/deprecated';
+  Stack,
+  StackItem,
+} from '@patternfly/react-core';
 import { Formik, FormikProps } from 'formik';
 
 import { InfraEnvK8sResource } from '../../types';
@@ -15,11 +21,12 @@ import { EditSSHKeyFormikValues } from './types';
 import { getWarningMessage } from './utils';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
 
-const validationSchema = Yup.object({
-  sshPublicKey: sshPublicKeyValidationSchema.required(
-    'An SSH key is required to debug hosts as they register.',
-  ),
-});
+const validationSchema = (t: TFunction) =>
+  Yup.object({
+    sshPublicKey: sshPublicKeyValidationSchema(t).required(
+      t('ai:An SSH key is required to debug hosts as they register.'),
+    ),
+  });
 
 export type EditSSHKeyModalProps = {
   isOpen: boolean;
@@ -46,32 +53,31 @@ const EditSSHKeyModal: React.FC<EditSSHKeyModalProps> = ({
   return (
     <Modal
       aria-label={t('ai:Edit SSH public key dialog')}
-      title={t('ai:Edit SSH public key')}
       isOpen={isOpen}
       onClose={onClose}
       variant={ModalVariant.small}
-      hasNoBodyWrapper
       id="edit-ssh-key-modal"
     >
+      <ModalHeader title={t('ai:Edit SSH public key')} />
       <Formik<EditSSHKeyFormikValues>
         initialValues={{
           sshPublicKey: infraEnv.spec?.sshAuthorizedKey || '',
         }}
-        validationSchema={validationSchema}
+        validationSchema={validationSchema(t)}
         onSubmit={async (values) => {
           try {
             await onSubmit(values, infraEnv);
             onClose();
           } catch (err) {
             const error = err as Error;
-            setError(error?.message || t('ai:An error occured'));
+            setError(error?.message || t('ai:An error occurred'));
           }
         }}
         validateOnMount
       >
-        {({ isSubmitting, isValid, submitForm }: FormikProps<EditSSHKeyModalProps>) => (
+        {({ isSubmitting, isValid, submitForm }: FormikProps<EditSSHKeyFormikValues>) => (
           <>
-            <ModalBoxBody>
+            <ModalBody>
               <Stack hasGutter>
                 <StackItem>
                   <Alert isInline variant="warning" title={warningMsg} />
@@ -85,16 +91,15 @@ const EditSSHKeyModal: React.FC<EditSSHKeyModalProps> = ({
                   </StackItem>
                 )}
               </Stack>
-            </ModalBoxBody>
-            <ModalBoxFooter>
-              {/* eslint-disable-next-line @typescript-eslint/no-misused-promises */}
-              <Button onClick={submitForm} isDisabled={isSubmitting || !isValid}>
+            </ModalBody>
+            <ModalFooter>
+              <Button onClick={() => void submitForm()} isDisabled={isSubmitting || !isValid}>
                 {t('ai:Save')}
               </Button>
               <Button onClick={onClose} variant={ButtonVariant.secondary}>
                 {t('ai:Cancel')}
               </Button>
-            </ModalBoxFooter>
+            </ModalFooter>
           </>
         )}
       </Formik>

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

@@ -1,6 +1,15 @@
 import * as React from 'react';
-import { Alert, Button, ButtonVariant, Stack, StackItem } from '@patternfly/react-core';
-import { Modal, ModalBoxBody, ModalBoxFooter } from '@patternfly/react-core/deprecated';
+import {
+  Alert,
+  Button,
+  ButtonVariant,
+  Modal,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+  Stack,
+  StackItem,
+} from '@patternfly/react-core';
 import { getAIHosts } from '../helpers';
 import { AgentK8sResource } from '../../types';
 import HostsTable from '../../../common/components/hosts/HostsTable';
@@ -18,14 +27,15 @@ type ApproveTableRowProps = {
   agent?: AgentK8sResource;
 };
 
-const ApproveTableRow: React.FC<ApproveTableRowProps> = ({ agent, children }) => (
-  <div className={agent?.spec.approved ? 'pf-v6-u-color-200' : undefined}>{children}</div>
-);
+const ApproveTableRow: React.FC<React.PropsWithChildren<ApproveTableRowProps>> = ({
+  agent,
+  children,
+}) => <div className={agent?.spec.approved ? 'pf-v6-u-color-200' : undefined}>{children}</div>;
 
 const hostnameColumn = (agents: AgentK8sResource[], t: TFunction): TableRow<Host> => {
   return {
     header: {
-      title: t('ai:Hostname'),
+      title: t<string>('ai:Hostname'),
       props: {
         id: 'col-header-hostname', // ACM jest tests require id over testId
       },
@@ -33,7 +43,7 @@ const hostnameColumn = (agents: AgentK8sResource[], t: TFunction): TableRow<Host
     },
     cell: (host) => {
       const agent = agents.find((a) => a.metadata?.uid === host.id);
-      const hostname = agent?.spec.hostname || agent?.status?.inventory.hostname;
+      const hostname = agent?.spec?.hostname || agent?.status?.inventory?.hostname;
       return {
         title: <ApproveTableRow agent={agent}>{hostname}</ApproveTableRow>,
         props: { 'data-testid': 'hostname' },
@@ -50,7 +60,7 @@ const statusColumn = (
 ): TableRow<Host> => {
   return {
     header: {
-      title: t('ai:Status'),
+      title: t<string>('ai:Status'),
       props: {
         id: 'col-header-status', // ACM jest tests require id over testId
       },
@@ -113,7 +123,7 @@ const MassApproveAgentModal: React.FC<MassApproveAgentModalProps> = ({
       onClose();
     } catch (err) {
       setError({
-        title: t('ai:An error occured while approving agents'),
+        title: t('ai:An error occurred while approving agents'),
         message: getErrorMessage(err),
       });
       setProgress(null);
@@ -131,14 +141,13 @@ const MassApproveAgentModal: React.FC<MassApproveAgentModalProps> = ({
   return (
     <Modal
       aria-label={t('ai:Approve hosts dialog')}
-      title={t('ai:Approve hosts to join infrastructure environment')}
       isOpen={isOpen}
       onClose={onClose}
-      hasNoBodyWrapper
       id="mass-approve-modal"
       variant="medium"
     >
-      <ModalBoxBody>
+      <ModalHeader title={t('ai:Approve hosts to join infrastructure environment')} />
+      <ModalBody>
         <Stack hasGutter>
           <StackItem>
             <Alert
@@ -158,8 +167,8 @@ const MassApproveAgentModal: React.FC<MassApproveAgentModalProps> = ({
             <ModalProgress error={error} progress={progress} />
           </StackItem>
         </Stack>
-      </ModalBoxBody>
-      <ModalBoxFooter>
+      </ModalBody>
+      <ModalFooter>
         {/* eslint-disable-next-line @typescript-eslint/no-misused-promises */}
         <Button onClick={onClick} isDisabled={progress !== null}>
           {t('ai:Approve all hosts')}
@@ -167,7 +176,7 @@ const MassApproveAgentModal: React.FC<MassApproveAgentModalProps> = ({
         <Button onClick={onClose} variant={ButtonVariant.secondary} isDisabled={progress !== null}>
           {t('ai:Cancel')}
         </Button>
-      </ModalBoxFooter>
+      </ModalFooter>
     </Modal>
   );
 };

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

@@ -30,7 +30,7 @@ import { agentStatus, bmhStatus } from '../helpers/agentStatus';
 const hostnameColumn = (agents: AgentK8sResource[], t: TFunction): TableRow<Host> => {
   return {
     header: {
-      title: t('ai:Hostname'),
+      title: t<string>('ai:Hostname'),
       props: {
         id: 'col-header-hostname', // ACM jest tests require id over testId
       },
@@ -63,7 +63,7 @@ const statusColumn = (
   const bmhStatuses = bmhStatus(t);
   return {
     header: {
-      title: t('ai:Status'),
+      title: t<string>('ai:Status'),
       props: {
         id: 'col-header-status',
       },
@@ -85,22 +85,22 @@ const statusColumn = (
             <FlexItem align={{ default: 'alignRight' }}>
               <Popover
                 aria-label={t('ai:Cluster popover')}
-                headerContent={<div>{t('ai:Cannot be deleted')}</div>}
+                headerContent={<div>{t<string>('ai:Cannot be deleted')}</div>}
                 bodyContent={
                   <div>
-                    {t(
+                    {t<string>(
                       'ai:Hosts that are bound to a cluster cannot be deleted. Remove the host from the cluster and try again.',
                     )}
                   </div>
                 }
                 footerContent={
                   <Link to={`/multicloud/infrastructure/clusters/details/${clusterName}/`}>
-                    {t('ai:Go to cluster {{clusterName}}', { clusterName })}
+                    {t<string>('ai:Go to cluster {{clusterName}}', { clusterName })}
                   </Link>
                 }
               >
                 <Button variant="link" icon={<InfoCircleIcon color={blueInfoColor.value} />}>
-                  {t('ai:Cannot be deleted')}
+                  {t<string>('ai:Cannot be deleted')}
                 </Button>
               </Popover>
             </FlexItem>
@@ -110,7 +110,7 @@ const statusColumn = (
         );
       } else if (bmh) {
         bmhStatus = getBMHStatus(bmh, bmhStatuses);
-        title = <BMHStatus bmhStatus={bmhStatus} />;
+        title = <BMHStatus bmhStatus={bmhStatus} bmh={bmh} />;
       }
 
       return {

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

@@ -8,8 +8,11 @@ import {
   AlertActionCloseButton,
   Stack,
   StackItem,
+  Modal,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
 } from '@patternfly/react-core';
-import { Modal, ModalBoxBody, ModalBoxFooter } from '@patternfly/react-core/deprecated';
 import { Formik, FormikConfig, FormikProps } from 'formik';
 import { AgentK8sResource } from '../../types/k8s/agent';
 import { ClusterDeploymentK8sResource } from '../../types/k8s/cluster-deployment';
@@ -124,12 +127,11 @@ const ScaleUpModal: React.FC<ScaleUpModalProps> = ({
     <>
       <Modal
         aria-label={t('ai:Add host dialog')}
-        title={t('ai:Add hosts')}
         isOpen={isOpen}
         onClose={onClose}
-        hasNoBodyWrapper
         id="scale-up-modal"
       >
+        <ModalHeader title={t('ai:Add hosts')} />
         <Formik
           initialValues={getInitialValues()}
           validationSchema={validationSchema}
@@ -139,7 +141,7 @@ const ScaleUpModal: React.FC<ScaleUpModalProps> = ({
           {({ isSubmitting, isValid, submitForm }: FormikProps<ScaleUpFormValues>) => {
             return (
               <>
-                <ModalBoxBody>
+                <ModalBody>
                   <Stack hasGutter>
                     <StackItem>
                       <ScaleUpForm
@@ -165,8 +167,8 @@ const ScaleUpModal: React.FC<ScaleUpModalProps> = ({
                       </StackItem>
                     )}
                   </Stack>
-                </ModalBoxBody>
-                <ModalBoxFooter>
+                </ModalBody>
+                <ModalFooter>
                   {/* eslint-disable-next-line @typescript-eslint/no-misused-promises */}
                   <Button onClick={submitForm} isDisabled={isSubmitting || !isValid}>
                     {t('ai:Submit')}
@@ -174,7 +176,7 @@ const ScaleUpModal: React.FC<ScaleUpModalProps> = ({
                   <Button onClick={onClose} variant={ButtonVariant.secondary}>
                     {t('ai:Cancel')}
                   </Button>
-                </ModalBoxFooter>
+                </ModalFooter>
               </>
             );
           }}

package/lib/cim/hooks/index.tsx

@@ -0,0 +1,3 @@
+export * from './useConfigMaps';
+export * from './useAgentServiceConfig';
+export * from './useEvents';

package/lib/cim/hooks/types.tsx

@@ -0,0 +1,11 @@
+import { WatchK8sResource } from '@openshift-console/dynamic-plugin-sdk';
+
+export type K8sWatchHookListProps = Omit<
+  WatchK8sResource,
+  'groupVersionKind' | 'name' | 'isList'
+> | null;
+
+export type K8sWatchHookProps = Pick<
+  WatchK8sResource,
+  'name' | 'namespace' | 'isList' | 'fieldSelector'
+> | null;

package/lib/cim/hooks/useAgentServiceConfig.tsx

@@ -0,0 +1,15 @@
+import { useK8sWatchResource } from './useK8sWatchResource';
+import { AgentServiceConfigK8sResource } from '../types';
+import { K8sWatchHookProps } from './types';
+
+export const useAgentServiceConfig = (props: K8sWatchHookProps) =>
+  useK8sWatchResource<AgentServiceConfigK8sResource>(
+    {
+      groupVersionKind: {
+        group: 'agent-install.openshift.io',
+        kind: 'AgentServiceConfig',
+        version: 'v1beta1',
+      },
+    },
+    props,
+  );

package/lib/cim/hooks/useConfigMaps.tsx

@@ -0,0 +1,14 @@
+import { useK8sWatchResource } from './useK8sWatchResource';
+import { ConfigMapK8sResource } from '../types';
+import { K8sWatchHookProps } from './types';
+
+export const useConfigMaps = (props: K8sWatchHookProps) =>
+  useK8sWatchResource<ConfigMapK8sResource[]>(
+    {
+      groupVersionKind: {
+        kind: 'ConfigMap',
+        version: 'v1',
+      },
+    },
+    props,
+  );

package/lib/cim/hooks/useEvents.tsx

@@ -0,0 +1,14 @@
+import { useK8sWatchResource } from './useK8sWatchResource';
+import { EventK8sResource } from '../types';
+import { K8sWatchHookProps } from './types';
+
+export const useEvents = (props: K8sWatchHookProps) =>
+  useK8sWatchResource<EventK8sResource[]>(
+    {
+      groupVersionKind: {
+        kind: 'Event',
+        version: 'v1',
+      },
+    },
+    props,
+  );

package/lib/cim/hooks/useK8sWatchResource.tsx

@@ -0,0 +1,27 @@
+import {
+  useK8sWatchResource as consoleWatch,
+  K8sResourceCommon,
+  WatchK8sResource,
+} from '@openshift-console/dynamic-plugin-sdk';
+
+export type WatchK8sResult<R extends K8sResourceCommon | K8sResourceCommon[]> = [
+  R,
+  boolean,
+  unknown,
+];
+
+export const useK8sWatchResource = <R extends K8sResourceCommon | K8sResourceCommon[]>(
+  resource: Pick<WatchK8sResource, 'groupVersionKind'>,
+  props?: Omit<WatchK8sResource, 'groupVersionKind'> | null,
+): WatchK8sResult<R> => {
+  // eslint-disable-next-line
+  const [data, loaded, error] = consoleWatch<R>(
+    props !== null
+      ? {
+          ...resource,
+          ...(props || {}),
+        }
+      : null,
+  );
+  return [data, error ? true : loaded, error as unknown];
+};

package/lib/cim/types/fromOCP/k8sTypes.ts

@@ -43,3 +43,16 @@ export type RouteK8sResource = {
     wildcardPolicy?: string;
   };
 } & K8sResourceCommon;
+
+export type EventK8sResource = {
+  type?: string;
+  message?: string;
+  eventTime?: string;
+  involvedObject?: {
+    apiVersion?: string;
+    kind?: string;
+    name?: string;
+    namespace?: string;
+    uid?: string;
+  };
+} & K8sResourceCommon;

package/lib/cim/types/index.ts

@@ -1,4 +1,4 @@
 export * from './fromOCP';
 export * from './k8s';
 export * from './metal3';
-export * from './resources';
+export * from './models';

package/lib/cim/types/k8s/agent-cluster-install.ts

@@ -30,6 +30,8 @@ export type AgentClusterInstallK8sResource = K8sResourceCommon & {
     };
     apiVIP?: string;
     ingressVIP?: string;
+    apiVIPs?: string[];
+    ingressVIPs?: string[];
     sshPublicKey?: string;
     imageSetRef?: {
       name?: string;
@@ -58,10 +60,13 @@ export type AgentClusterInstallK8sResource = K8sResourceCommon & {
     };
     holdInstallation?: boolean;
     platformType: string;
+    manifestsConfigMapRefs?: { name: string }[];
   };
   status?: {
     apiVIP?: string;
     ingressVIP?: string;
+    apiVIPs?: string[];
+    ingressVIPs?: string[];
     connectivityMajorityGroups?: string;
     conditions?: AgentClusterInstallStatusCondition[];
     progress?: {

package/lib/cim/types/k8s/bare-metal-host.ts

@@ -28,5 +28,25 @@ export type BareMetalHostK8sResource = K8sResourceCommon & {
     };
     errorMessage?: string;
     errorType?: string;
+    operationalStatus?: 'OK' | 'discovered' | 'error' | 'delayed' | 'detached';
+    operationHistory?: {
+      register?: {
+        start?: string;
+        end?: string;
+      };
+      provision?: {
+        start?: string;
+        end?: string;
+      };
+      inspect?: {
+        start?: string;
+        end?: string;
+      };
+      deprovision?: {
+        start?: string;
+        end?: string;
+      };
+    };
+    lastUpdated?: string;
   };
 };

package/lib/cim/types/models.tsx

@@ -0,0 +1,56 @@
+import { K8sModel } from '@openshift-console/dynamic-plugin-sdk/lib/api/common-types';
+
+export const AgentClusterInstallModel: K8sModel = {
+  kind: 'AgentClusterInstall',
+  label: 'AgentClusterInstall',
+  labelPlural: 'AgentClusterInstalls',
+  plural: 'agentclusterinstalls',
+  apiVersion: 'v1beta1',
+  apiGroup: 'extensions.hive.openshift.io',
+  namespaced: true,
+  abbr: 'ACI',
+};
+
+export const AgentServiceConfigModel: K8sModel = {
+  kind: 'AgentServiceConfig',
+  label: 'AgentServiceConfig',
+  labelPlural: 'AgentServiceConfigs',
+  plural: 'agentserviceconfigs',
+  apiVersion: 'v1beta1',
+  apiGroup: 'agent-install.openshift.io',
+  namespaced: false,
+  abbr: 'asc',
+};
+
+export const IngressControllerModel: K8sModel = {
+  kind: 'IngressController',
+  label: 'IngressController',
+  labelPlural: 'IngressControllers',
+  plural: 'ingresscontrollers',
+  apiVersion: 'v1',
+  apiGroup: 'operator.openshift.io',
+  namespaced: true,
+  abbr: 'ic',
+};
+
+export const RouteModel: K8sModel = {
+  kind: 'Route',
+  label: 'Route',
+  labelPlural: 'Routes',
+  plural: 'routes',
+  apiVersion: 'v1',
+  apiGroup: 'route.openshift.io',
+  namespaced: true,
+  abbr: 'rt',
+};
+
+export const ProvisioningModel: K8sModel = {
+  kind: 'Provisioning',
+  label: 'Provisioning',
+  labelPlural: 'Provisionings',
+  plural: 'provisionings',
+  apiVersion: 'v1alpha1',
+  apiGroup: 'metal3.io',
+  namespaced: false,
+  abbr: 'p',
+};

package/lib/cim/utils.ts

@@ -1,3 +1,5 @@
+import { Patch } from '@openshift-console/dynamic-plugin-sdk';
+import { isEqual } from 'lodash-es';
 import { StatusCondition } from './types';
 
 export function getConditionByType<ConditionType>(
@@ -6,3 +8,13 @@ export function getConditionByType<ConditionType>(
 ): StatusCondition<ConditionType> | undefined {
   return conditions.find((c) => c.type === type);
 }
+
+export const appendPatch = <V>(patches: Patch[], path: string, newVal?: V, existingVal?: V) => {
+  if (!isEqual(newVal, existingVal)) {
+    patches.push({
+      op: existingVal === undefined ? 'add' : 'replace',
+      path,
+      value: newVal,
+    });
+  }
+};

package/lib/common/api/assisted-service/ClustersAPI.ts

@@ -245,6 +245,12 @@ const ClustersAPI = {
       headers: { 'Content-Type': 'application/json' },
     });
   },
+  registerDisconnected(params: { name: string; openshiftVersion: string }) {
+    return client.post<Cluster, AxiosResponse<Cluster>, { name: string; openshiftVersion: string }>(
+      `${ClustersAPI.makeBaseURI()}disconnected`,
+      params,
+    );
+  },
 };
 
 export default ClustersAPI;

package/lib/common/api/assisted-service/HostsAPI.ts

@@ -75,11 +75,6 @@ const HostsAPI = {
       },
     );
   },
-  unbindHost(infraEnvId: InfraEnv['id'], hostId: Host['id']) {
-    return client.post<Host, AxiosResponse<Host>, never>(
-      `${HostsAPI.makeActionsBaseURI(infraEnvId, hostId)}/unbind`,
-    );
-  },
 };
 
 export default HostsAPI;

package/lib/common/components/AddHosts/AddHostsContext.tsx

@@ -10,7 +10,7 @@ export type AddHostsContextType = {
 
 export const AddHostsContext = React.createContext<AddHostsContextType>({});
 
-export const AddHostsContextProvider: React.FC<AddHostsContextType> = ({
+export const AddHostsContextProvider: React.FC<React.PropsWithChildren<AddHostsContextType>> = ({
   cluster,
   resetCluster,
   ocpConsoleUrl,