@openshift-assisted/ui-lib 2.48.6 → 2.50.0

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

@@ -1,31 +1,48 @@
 import React from 'react';
-import { useFormikContext } from 'formik';
-import { Spinner, Alert, AlertVariant } from '@patternfly/react-core';
-import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
-import { HostSubnets, NetworkConfigurationValues } from '../../../types';
-import { CheckboxField, FormikStaticField, InputField } from '../../ui';
-import { NO_SUBNET_SET } from '../../../config';
-import { FeatureSupportLevelBadge } from '../../featureSupportLevels';
-import { useTranslation } from '../../../hooks/use-translation-wrapper';
-import { TFunction } from 'i18next';
+import { FieldArray, useFormikContext } from 'formik';
+import {
+  Spinner,
+  Alert,
+  AlertVariant,
+  Tooltip,
+  FormGroup,
+  Stack,
+  StackItem,
+} from '@patternfly/react-core';
+import { NetworkConfigurationValues, HostSubnets } from '../../../types';
+import { NETWORK_TYPE_SDN, DUAL_STACK } from '../../../config';
+import { selectMachineNetworkCIDR, selectApiVip, selectIngressVip } from '../../../selectors';
 import { getVipValidationsById } from '../../clusterConfiguration';
-import { selectApiVip, selectIngressVip } from '../../../selectors';
+import { FormikStaticField, PopoverIcon } from '../../ui';
+import { CheckboxField, InputField } from '../../ui/formik';
+import { useTranslation } from '../../../hooks/use-translation-wrapper';
+import NewFeatureSupportLevelBadge from '../../newFeatureSupportLevels/NewFeatureSupportLevelBadge';
+import { Cluster, Ip, SupportLevel } from '@openshift-assisted/types/assisted-installer-service';
 
 interface VipStaticValueProps {
-  vipName: 'apiVips' | 'ingressVips';
+  id?: string;
+  vipValue: Ip;
   cluster: Cluster;
   validationErrorMessage?: string;
 }
 
-const VipStaticValue = ({ vipName, cluster, validationErrorMessage }: VipStaticValueProps) => {
-  const { vipDhcpAllocation, machineNetworkCidr } = cluster;
+const VipStaticValue = ({
+  vipValue,
+  cluster,
+  validationErrorMessage,
+  id = 'vip-static',
+}: VipStaticValueProps) => {
+  const { vipDhcpAllocation } = cluster;
+  const machineNetworkCidr = selectMachineNetworkCIDR(cluster);
   const { t } = useTranslation();
-  if (vipDhcpAllocation && cluster[vipName]) {
-    return <>{cluster[vipName]}</>;
+
+  if (vipDhcpAllocation && !!vipValue) {
+    return <span id={`${id}-allocated`}>{vipValue}</span>;
   }
   if (vipDhcpAllocation && validationErrorMessage) {
     return (
       <Alert
+        id={`${id}-alert-allocation-failed`}
         variant={AlertVariant.danger}
         title={t('ai:The DHCP server failed to allocate the IP')}
         isInline
@@ -37,61 +54,37 @@ const VipStaticValue = ({ vipName, cluster, validationErrorMessage }: VipStaticV
   if (vipDhcpAllocation && machineNetworkCidr) {
     return (
       <>
-        <Spinner size="md" data-testid="vip-static-value-spinner" />
+        <Spinner size="md" id={`${id}-allocating`} data-testid={`vip-static-${id}-value-spinner`} />
         <i>{t('ai:This IP is being allocated by the DHCP server')}</i>
       </>
     );
   }
-  return <>{t('ai:<i>This IP will be allocated by the DHCP server</i>')}</>;
-};
-
-const getVipHelperSuffix = (
-  t: TFunction,
-  vip?: string,
-  vipDhcpAllocation?: boolean,
-  vipDhcpAllocationFormValue?: boolean,
-): string => {
-  if (!vipDhcpAllocationFormValue) {
-    return t(
-      'ai:Make sure that the VIP is unique and not used by any other device on your network.',
-    );
-  }
-  if (vipDhcpAllocation && vip) {
-    return t('ai:This IP was allocated by the DHCP server.');
-  }
-  return '';
+  return <i>{t('ai:This IP will be allocated by the DHCP server')}</i>;
 };
 
 export type VirtualIPControlGroupProps = {
   cluster: Cluster;
   hostSubnets: HostSubnets;
   isVipDhcpAllocationDisabled?: boolean;
+  supportLevel?: SupportLevel;
+  isViewerMode?: boolean;
 };
 
 export const VirtualIPControlGroup = ({
   cluster,
   hostSubnets,
   isVipDhcpAllocationDisabled,
+  supportLevel,
+  isViewerMode = false,
 }: VirtualIPControlGroupProps) => {
-  const { values } = useFormikContext<NetworkConfigurationValues>();
+  const { values, setFieldValue } = useFormikContext<NetworkConfigurationValues>();
   const { t } = useTranslation();
-  const vipHelperSuffix = getVipHelperSuffix(
-    t,
-    selectApiVip(cluster),
-    cluster.vipDhcpAllocation,
-    values.vipDhcpAllocation,
-  );
-  const apiVipHelperText = t(
-    'ai:Provide an endpoint for users, both human and machine, to interact with and configure the platform. If needed, contact your IT manager for more information. {{vipHelperSuffix}}',
-    {
-      vipHelperSuffix: vipHelperSuffix,
-    },
+
+  const apiVipPopoverContent = t(
+    'ai:Provides an endpoint for users, both human and machine, to interact with and configure the platform. If needed, contact your IT manager for more information.',
   );
-  const ingressVipHelperText = t(
-    'ai:Provide an endpoint for application traffic flowing in from outside the cluster. If needed, contact your IT manager for more information. {{vipHelperSuffix}}',
-    {
-      vipHelperSuffix: vipHelperSuffix,
-    },
+  const ingressVipPopoverContent = t(
+    'ai:Provides an endpoint for application traffic flowing in from outside the cluster. If needed, contact your IT manager for more information.',
   );
 
   const {
@@ -102,70 +95,196 @@ export const VirtualIPControlGroup = ({
     [t, cluster.validationsInfo],
   );
 
+  const enableAllocation = values.networkType === NETWORK_TYPE_SDN;
+  const isDualStack = values.stackType === DUAL_STACK;
+  const isVipInputDisabled = !hostSubnets.length || !values.machineNetworks?.[0]?.cidr;
+
+  React.useEffect(() => {
+    if (!isViewerMode && !enableAllocation) {
+      setFieldValue('vipDhcpAllocation', false);
+    }
+  }, [enableAllocation, isViewerMode, setFieldValue]);
+
+  // Ensure VIP arrays exist when (re-)entering cluster-managed networking.
+  React.useEffect(() => {
+    if (
+      isViewerMode ||
+      values.managedNetworkingType !== 'clusterManaged' ||
+      values.vipDhcpAllocation
+    ) {
+      return;
+    }
+
+    const vipCount = values.stackType === DUAL_STACK ? 2 : 1;
+    const blankVipEntriesArray = Array.from({ length: vipCount }, () => ({
+      ip: '',
+      clusterId: cluster.id,
+    }));
+
+    const apiVipsEmpty = !values.apiVips || values.apiVips.length === 0;
+    const ingressVipsEmpty = !values.ingressVips || values.ingressVips.length === 0;
+
+    if (apiVipsEmpty) {
+      setFieldValue('apiVips', blankVipEntriesArray, false);
+    }
+    if (ingressVipsEmpty) {
+      setFieldValue('ingressVips', blankVipEntriesArray, false);
+    }
+  }, [
+    cluster.id,
+    isViewerMode,
+    setFieldValue,
+    values.apiVips,
+    values.ingressVips,
+    values.managedNetworkingType,
+    values.stackType,
+    values.vipDhcpAllocation,
+  ]);
+
+  const onChangeDhcp = React.useCallback(
+    (hasDhcp: boolean) => {
+      // We need to sync the values back to the form
+      setFieldValue('apiVips', hasDhcp ? [] : cluster.apiVips, true);
+      setFieldValue('ingressVips', hasDhcp ? [] : cluster.ingressVips, true);
+    },
+    [cluster.apiVips, cluster.ingressVips, setFieldValue],
+  );
+
   return (
     <>
       {!isVipDhcpAllocationDisabled && (
         <CheckboxField
+          onChange={onChangeDhcp}
           label={
             <>
-              {t('ai:Allocate IPs via DHCP server')}
-              <FeatureSupportLevelBadge
-                featureId="VIP_AUTO_ALLOC"
-                openshiftVersion={cluster.openshiftVersion}
-              />
+              <Tooltip
+                hidden={enableAllocation}
+                content={t(
+                  "ai:A cluster with OVN networking type cannot use 'allocate IPs via DHCP server'",
+                )}
+              >
+                <span>{t('ai:Allocate IPs via DHCP server')}</span>
+              </Tooltip>
+              <NewFeatureSupportLevelBadge featureId="VIP_AUTO_ALLOC" supportLevel={supportLevel} />
             </>
           }
           name="vipDhcpAllocation"
+          isDisabled={!enableAllocation || isViewerMode}
         />
       )}
       {values.vipDhcpAllocation ? (
         <>
           <FormikStaticField
-            label={t('ai:API IP')}
+            label={
+              <>
+                <span>{t('ai:API IP')}</span> <PopoverIcon bodyContent={apiVipPopoverContent} />
+              </>
+            }
             name="apiVips.0.ip"
-            helperText={apiVipHelperText}
-            value={selectApiVip(cluster)}
+            value={selectApiVip(values)}
             isValid={!apiVipFailedValidationMessage}
             isRequired
           >
             <VipStaticValue
-              vipName="apiVips"
+              id="vip-api"
+              vipValue={selectApiVip(cluster)}
               cluster={cluster}
               validationErrorMessage={apiVipFailedValidationMessage}
             />
           </FormikStaticField>
           <FormikStaticField
-            label={t('ai:Ingress IP')}
+            label={
+              <>
+                <span>{t('ai:Ingress IP')}</span>{' '}
+                <PopoverIcon bodyContent={ingressVipPopoverContent} />
+              </>
+            }
             name="ingressVips.0.ip"
-            helperText={ingressVipHelperText}
-            value={selectIngressVip(cluster)}
+            value={selectIngressVip(values)}
             isValid={!ingressVipFailedValidationMessage}
             isRequired
           >
             <VipStaticValue
-              vipName="ingressVips"
+              id="vip-ingress"
+              vipValue={selectIngressVip(cluster)}
               cluster={cluster}
               validationErrorMessage={ingressVipFailedValidationMessage}
             />
           </FormikStaticField>
         </>
       ) : (
-        <>
-          <InputField
-            label={t('ai:API IP')}
-            name="apiVips.0.ip"
-            helperText={apiVipHelperText}
-            isRequired
-            isDisabled={!hostSubnets.length || values.hostSubnet === NO_SUBNET_SET}
-          />
-          <InputField
-            name="ingressVips.0.ip"
-            label={t('ai:Ingress IP')}
-            helperText={ingressVipHelperText}
-            isRequired
-            isDisabled={!hostSubnets.length || values.hostSubnet === NO_SUBNET_SET}
-          />
-        </>
+        <FormGroup>
+          <FieldArray name="vips">
+            {() => (
+              <Stack>
+                <StackItem>
+                  <InputField
+                    label={
+                      <>
+                        <span>{t('ai:API IP')}</span>{' '}
+                        <PopoverIcon bodyContent={apiVipPopoverContent} />
+                      </>
+                    }
+                    name="apiVips.0.ip"
+                    isRequired
+                    maxLength={45}
+                    isDisabled={isVipInputDisabled || isViewerMode}
+                    labelInfo={isDualStack ? t('ai:Primary') : undefined}
+                  />
+                </StackItem>
+                {isDualStack && (
+                  <StackItem>
+                    <InputField
+                      label={
+                        <>
+                          <span>{t('ai:API IP')}</span>{' '}
+                          <PopoverIcon bodyContent={apiVipPopoverContent} />
+                        </>
+                      }
+                      name="apiVips.1.ip"
+                      maxLength={45}
+                      isRequired
+                      isDisabled={isVipInputDisabled || isViewerMode}
+                      labelInfo={t('ai:Secondary')}
+                    />
+                  </StackItem>
+                )}
+                <StackItem>
+                  <InputField
+                    name="ingressVips.0.ip"
+                    label={
+                      <>
+                        <span>{t('ai:Ingress IP')}</span>{' '}
+                        <PopoverIcon bodyContent={ingressVipPopoverContent} />
+                      </>
+                    }
+                    isRequired
+                    maxLength={45}
+                    isDisabled={isVipInputDisabled || isViewerMode}
+                    labelInfo={isDualStack ? t('ai:Primary') : undefined}
+                  />
+                </StackItem>
+                {isDualStack && (
+                  <StackItem>
+                    <InputField
+                      name="ingressVips.1.ip"
+                      label={
+                        <>
+                          <span>{t('ai:Ingress IP')}</span>{' '}
+                          <PopoverIcon bodyContent={ingressVipPopoverContent} />
+                        </>
+                      }
+                      maxLength={45}
+                      isRequired
+                      isDisabled={isVipInputDisabled || isViewerMode}
+                      labelInfo={t('ai:Secondary')}
+                    />
+                  </StackItem>
+                )}
+              </Stack>
+            )}
+          </FieldArray>
+        </FormGroup>
       )}
     </>
   );

package/lib/common/components/clusterWizard/networkingSteps/index.ts

@@ -1,8 +1,16 @@
-export { AvailableSubnetsControl } from './AvailableSubnetsControl';
-export type { AvailableSubnetsControlProps } from './AvailableSubnetsControl';
 export { UserManagedNetworkingTextContent } from './UserManagedNetworkingTextContent';
 export type { UserManagedNetworkingTextContentProps } from './UserManagedNetworkingTextContent';
 export { ManagedNetworkingControlGroup } from './ManagedNetworkingControlGroup';
 export type { ManagedNetworkingControlGroupProps } from './ManagedNetworkingControlGroup';
+export { StackTypeControlGroup } from './StackTypeControlGroup';
+export type {
+  StackTypeControlGroupProps,
+  StackTypeDefaultNetworkValues,
+} from './StackTypeControlGroup';
+export { reorderNetworksForPrimary, reorderNetworksByCurrentPrimary } from './reorderNetworks';
+export { AvailableSubnetsControl } from './AvailableSubnetsControl';
+export type { AvailableSubnetsControlProps } from './AvailableSubnetsControl';
 export { VirtualIPControlGroup } from './VirtualIPControlGroup';
 export type { VirtualIPControlGroupProps } from './VirtualIPControlGroup';
+export { default as AdvancedNetworkFields } from './AdvancedNetworkFields';
+export type { AdvancedNetworkFieldsProps } from './AdvancedNetworkFields';

package/lib/{ocm/components/clusterConfiguration/networkConfiguration → common/components/clusterWizard/networkingSteps}/reorderNetworks.ts

@@ -1,5 +1,6 @@
 import { Address6 } from 'ip-address';
-import { DUAL_STACK, NetworkConfigurationValues } from '../../../../common';
+import { DUAL_STACK } from '../../../config';
+import { NetworkConfigurationValues } from '../../../types';
 import type { FormikHelpers } from 'formik';
 
 const reorderByPrimaryCidr = (

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

@@ -15,7 +15,6 @@ import {
 } from '../../types/hosts';
 import { TangServer } from '../clusterConfiguration/DiskEncryptionFields/DiskEncryptionValues';
 import { WizardStepsValidationMap } from './validationsInfoUtils';
-import { OpenshiftVersionOptionType } from '../../types';
 
 export type ClusterDetailsValues = {
   name: string;
@@ -31,7 +30,7 @@ export type ClusterDetailsValues = {
   diskEncryption: DiskEncryption;
   cpuArchitecture: string;
   platform: PlatformType;
-  customOpenshiftSelect: OpenshiftVersionOptionType | null;
+  customOpenshiftSelect: string | null;
   userManagedNetworking: boolean;
   controlPlaneCount: number;
 };

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

@@ -226,7 +226,7 @@ const AITable = <R extends any>({
   }, [hostRows, columns, children]);
 
   const onCollapse = React.useCallback(
-    (_event, rowKey: number) => {
+    (_event: unknown, rowKey: number) => {
       const id = hostRows[rowKey].id as string;
       if (id) {
         setOpenRows(Object.assign({}, openRows, { [id]: !openRows[id] }));

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

@@ -11,11 +11,8 @@ import {
   ModalVariant,
   ModalHeader,
 } from '@patternfly/react-core';
-import {
-  ntpSourceValidationSchema,
-  AdditionalNTPSourcesField,
-  StatusErrorType,
-} from '../../../common';
+import { AdditionalNTPSourcesField, StatusErrorType } from '../../../common';
+import { ntpSourceValidationSchema } from '../../validationSchemas/ntpValidation';
 import { AlertFormikError } from '../../../common/components/ui';
 import { useTranslation } from '../../hooks/use-translation-wrapper';
 import {
@@ -43,7 +40,7 @@ const AdditionalNTPSourcesForm = ({
 
   const getValidationSchema = (t: TFunction) =>
     Yup.object().shape({
-      additionalNtpSource: ntpSourceValidationSchema.required(t('ai:Required field')),
+      additionalNtpSource: ntpSourceValidationSchema(t).required(t('ai:Required field')),
     });
 
   const { t } = useTranslation();

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

@@ -14,14 +14,8 @@ import {
 import { Formik } from 'formik';
 import { TFunction } from 'i18next';
 import { Host, Inventory } from '@openshift-assisted/types/assisted-installer-service';
-import {
-  richHostnameValidationSchema,
-  RichInputField,
-  StaticTextField,
-  hostnameValidationMessages,
-  getRichTextValidation,
-  AlertFormikError,
-} from '../ui';
+import { RichInputField, StaticTextField, getRichTextValidation, AlertFormikError } from '../ui';
+import { richHostnameValidationSchema, hostnameValidationMessages } from '../../validationSchemas';
 import { canHostnameBeChanged } from './utils';
 import GridGap from '../ui/GridGap';
 import { EditHostFormValues } from './types';

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

@@ -15,7 +15,11 @@ type ValidationPopoverProps = {
   actions?: React.ReactNode[];
 };
 
-const ValidationPopover: React.FC<ValidationPopoverProps> = ({ validation, actions, children }) => {
+const ValidationPopover: React.FC<React.PropsWithChildren<ValidationPopoverProps>> = ({
+  validation,
+  actions,
+  children,
+}) => {
   const { t } = useTranslation();
   const failedValidationHint = hostValidationFailureHints(t)[validation.id];
 
@@ -47,7 +51,9 @@ type HostPropertyValidationPopoverProps = {
   showSuccess?: boolean;
 };
 
-const HostPropertyValidationPopover: React.FC<HostPropertyValidationPopoverProps> = ({
+const HostPropertyValidationPopover: React.FC<
+  React.PropsWithChildren<HostPropertyValidationPopoverProps>
+> = ({
   validation,
   failureActions,
   pendingActions,

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

@@ -1,6 +1,9 @@
 import React from 'react';
 import { Popover, Button, Content, FlexItem, Flex, Stack, StackItem } from '@patternfly/react-core';
 import { PopoverProps } from '@patternfly/react-core/dist/js/components/Popover/Popover';
+import { ExclamationTriangleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon';
+import { UnknownIcon } from '@patternfly/react-icons/dist/js/icons/unknown-icon';
+
 import hdate from 'human-date';
 
 import { Host, HostProgressInfo } from '@openshift-assisted/types/assisted-installer-service';
@@ -18,11 +21,9 @@ import OcpConsoleNodesSectionLink from './OcpConsoleNodesSectionLink';
 import { toSentence } from '../ui/table/utils';
 import { HostStatusProps } from './types';
 import { UpdateDay2ApiVipPropsType } from './HostValidationGroups';
-import { UnknownIcon } from '@patternfly/react-icons/dist/js/icons/unknown-icon';
 import { useTranslation } from '../../hooks/use-translation-wrapper';
 import { hostStatus } from './status';
 import { getApproveNodesInClLink } from '../../config';
-import { ExclamationTriangleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon';
 
 const getTitleWithProgress = (host: Host, status: HostStatusProps['status']) => {
   const stages = getHostProgressStages(host);
@@ -35,6 +36,7 @@ type HostStatusPopoverContentProps = ValidationInfoActionProps & {
   validationsInfo: ValidationsInfo;
   autoCSR?: boolean;
   additionalPopoverContent?: React.ReactNode;
+  additionalBMHInfo?: React.ReactNode;
   openshiftVersion?: string;
 };
 
@@ -42,6 +44,7 @@ const HostStatusPopoverContent: React.FC<HostStatusPopoverContentProps> = ({
   details,
   autoCSR,
   additionalPopoverContent,
+  additionalBMHInfo,
   openshiftVersion,
   ...props
 }) => {
@@ -132,6 +135,7 @@ const HostStatusPopoverContent: React.FC<HostStatusPopoverContentProps> = ({
       )}
       <StackItem>
         <HostValidationGroups openshiftVersion={openshiftVersion} {...props} />
+        {additionalBMHInfo}
       </StackItem>
     </Stack>
   );
@@ -180,10 +184,13 @@ type WithHostStatusPopoverProps = AdditionNtpSourcePropsType &
     zIndex?: number;
     autoCSR?: boolean;
     additionalPopoverContent?: React.ReactNode;
+    additionalBMHInfo?: React.ReactNode;
     openshiftVersion?: string;
   };
 
-const WithHostStatusPopover: React.FC<WithHostStatusPopoverProps> = (props) => (
+const WithHostStatusPopover: React.FC<React.PropsWithChildren<WithHostStatusPopoverProps>> = (
+  props,
+) => (
   <Popover
     headerContent={<div>{props.title}</div>}
     bodyContent={
@@ -226,7 +233,7 @@ const getHostStatusIcon = (
   } else return icon;
 };
 
-const HostStatus: React.FC<HostStatusProps> = ({
+const HostStatus: React.FC<React.PropsWithChildren<HostStatusProps>> = ({
   host,
   validationsInfo,
   status,
@@ -237,6 +244,7 @@ const HostStatus: React.FC<HostStatusProps> = ({
   zIndex,
   autoCSR,
   additionalPopoverContent,
+  additionalBMHInfo,
   openshiftVersion,
 }) => {
   const [keepOnOutsideClick, onValidationActionToggle] = React.useState(false);
@@ -262,12 +270,17 @@ const HostStatus: React.FC<HostStatusProps> = ({
     zIndex,
     autoCSR,
     additionalPopoverContent,
+    additionalBMHInfo,
     openshiftVersion,
   };
 
   const hostIcon = getHostStatusIcon(icon, host.progress, status);
   return (
-    <Flex alignItems={{ default: 'alignItemsCenter' }} spaceItems={{ default: 'spaceItemsXs' }}>
+    <Flex
+      alignItems={{ default: 'alignItemsCenter' }}
+      spaceItems={{ default: 'spaceItemsXs' }}
+      flexWrap={{ default: 'nowrap' }}
+    >
       {
         <FlexItem>
           {(autoCSR && status.key === 'added-to-existing-cluster'

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

@@ -67,7 +67,10 @@ const ValidationsAlert = ({
       <ul>
         {validations.map((v) => (
           <li key={v.id}>
-            <strong>{hostValidationLabels(t)[v.id] || v.id}:</strong>&nbsp;
+            <span className="pf-v6-u-font-weight-bold">
+              {hostValidationLabels(t)[v.id] || v.id}:
+            </span>
+            &nbsp;
             {toSentence(v.message.replace(/\\n/, ' '))}{' '}
             {v.status === 'failure' && hostValidationFailureHints(t)[v.id]}
           </li>
@@ -310,9 +313,7 @@ export const HostValidationGroups = ({
         return (
           <Fragment key={groupName}>
             <Level className="host-validation-groups__validation-group">
-              <LevelItem>
-                <strong>{groupLabel}</strong>
-              </LevelItem>
+              <LevelItem className="pf-v6-u-font-weight-bold">{groupLabel}</LevelItem>
               <LevelItem>{getValidationGroupState()}</LevelItem>
             </Level>
             {

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

@@ -12,12 +12,9 @@ const HostsTableDetailContext = React.createContext<HostsTableDetailContextValue
   undefined,
 );
 
-const HostsTableDetailContextProvider: React.FC<HostsTableDetailContextValue> = ({
-  canEditDisks,
-  onDiskRole,
-  updateDiskSkipFormatting,
-  children,
-}) => {
+const HostsTableDetailContextProvider: React.FC<
+  React.PropsWithChildren<HostsTableDetailContextValue>
+> = ({ canEditDisks, onDiskRole, updateDiskSkipFormatting, children }) => {
   const context = {
     canEditDisks,
     onDiskRole,