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

package/lib/ocm/components/clusterConfiguration/networkConfiguration/NetworkConfiguration.tsx

@@ -7,18 +7,15 @@ import { VirtualIPControlGroup, VirtualIPControlGroupProps } from './VirtualIPCo
 import {
   canBeDualStack,
   canSelectNetworkTypeSDN,
-  Cluster,
-  ClusterDefaultConfig,
   clusterNetworksEqual,
-  CpuArchitecture,
   DUAL_STACK,
-  getDefaultCpuArchitecture,
   HostSubnets,
   isSNO,
   NetworkConfigurationValues,
+  selectApiVip,
+  selectIngressVip,
   serviceNetworksEqual,
 } from '../../../../common';
-import { getLimitedFeatureSupportLevels } from '../../../../common/components/newFeatureSupportLevels/utils';
 import {
   ManagedNetworkingControlGroup,
   UserManagedNetworkingTextContent,
@@ -27,7 +24,7 @@ import { StackTypeControlGroup } from './StackTypeControl';
 import { AvailableSubnetsControl } from './AvailableSubnetsControl';
 import AdvancedNetworkFields from './AdvancedNetworkFields';
 import { useTranslation } from '../../../../common/hooks/use-translation-wrapper';
-import { selectCurrentClusterPermissionsState } from '../../../selectors';
+import { selectCurrentClusterPermissionsState } from '../../../store/slices/current-cluster/selectors';
 import { OcmCheckbox } from '../../ui/OcmFormFields';
 import { NetworkTypeControlGroup } from '../../../../common/components/clusterWizard/networkingSteps/NetworkTypeControlGroup';
 import { useClusterSupportedPlatforms } from '../../../hooks';
@@ -35,6 +32,11 @@ import {
   NewFeatureSupportLevelData,
   useNewFeatureSupportLevel,
 } from '../../../../common/components/newFeatureSupportLevels';
+import { SupportedPlatformIntegrationType } from '../../../hooks/useClusterSupportedPlatforms';
+import {
+  Cluster,
+  ClusterDefaultConfig,
+} from '@openshift-assisted/types/assisted-installer-service';
 
 export type NetworkConfigurationProps = VirtualIPControlGroupProps & {
   hostSubnets: HostSubnets;
@@ -45,21 +47,8 @@ export type NetworkConfigurationProps = VirtualIPControlGroupProps & {
     | 'serviceNetworksIpv4'
     | 'serviceNetworksDualstack'
   >;
-  hideManagedNetworking?: boolean;
 };
 
-const vmsAlert = (
-  <Alert
-    title="Your cluster will be subject to support limitations"
-    variant={AlertVariant.info}
-    isInline={true}
-    data-testid="networking-vms-alert"
-  >
-    Some or all of your discovered hosts are virtual machines, so selecting the cluster-managed
-    networking option will limit your installed cluster's support.
-  </Alert>
-);
-
 const isAdvNetworkConf = (
   cluster: Cluster,
   defaultNetworkValues: Pick<ClusterDefaultConfig, 'clusterNetworksIpv4' | 'serviceNetworksIpv4'>,
@@ -75,94 +64,78 @@ const isAdvNetworkConf = (
     )
   );
 
-const isManagedNetworkingDisabled = (
+const getManagedNetworkingDisabledReason = (
   isDualStack: boolean,
-  openshiftVersion: Cluster['openshiftVersion'],
-  cpuArchitecture: CpuArchitecture,
+  isOracleCloudInfrastructure: boolean,
   featureSupportLevelData: NewFeatureSupportLevelData,
 ) => {
-  if (isDualStack) {
-    return {
-      isNetworkManagementDisabled: true,
-      networkManagementDisabledReason:
-        'Network management selection is not supported with dual-stack',
-    };
-  } else if (
-    cpuArchitecture === CpuArchitecture.ARM &&
-    !featureSupportLevelData.isFeatureSupported(
-      'ARM64_ARCHITECTURE_WITH_CLUSTER_MANAGED_NETWORKING',
-    )
-  ) {
-    return {
-      isNetworkManagementDisabled: true,
-      networkManagementDisabledReason: featureSupportLevelData.getFeatureDisabledReason(
-        'ARM64_ARCHITECTURE_WITH_CLUSTER_MANAGED_NETWORKING',
-      ),
-    };
-  } else if (
-    !!openshiftVersion &&
-    featureSupportLevelData.isFeatureDisabled('NETWORK_TYPE_SELECTION')
-  ) {
-    return {
-      isNetworkManagementDisabled: true,
-      networkManagementDisabledReason:
-        featureSupportLevelData.getFeatureDisabledReason('NETWORK_TYPE_SELECTION'),
-    };
-  } else {
-    return { isNetworkManagementDisabled: false, networkManagementDisabledReason: undefined };
+  if (isOracleCloudInfrastructure) {
+    return 'Network management selection is not supported with Oracle Cloud Infrastructure';
+  } else if (isDualStack) {
+    return 'Network management selection is not supported with dual-stack';
+  } else if (featureSupportLevelData.isFeatureDisabled('NETWORK_TYPE_SELECTION')) {
+    return featureSupportLevelData.getFeatureDisabledReason('NETWORK_TYPE_SELECTION');
   }
 };
 
-const isUserManagedNetworkingDisabled = (
-  isSupportedPlatformIntegrationNutanix: boolean,
+const getUserManagedDisabledReason = (
+  supportedPlatformIntegration: SupportedPlatformIntegrationType,
   t: TFunction,
 ) => {
-  if (isSupportedPlatformIntegrationNutanix) {
-    return {
-      isUserManagementDisabled: isSupportedPlatformIntegrationNutanix,
-      userManagementDisabledReason: t(
-        'ai:User-Managed Networking is not supported when using Nutanix',
-      ),
-    };
-  } else {
-    return {
-      isUserManagementDisabled: false,
-      userManagementDisabledReason: '',
-    };
+  if (['nutanix', 'vsphere'].includes(supportedPlatformIntegration)) {
+    return t('ai:User-Managed Networking is not supported when using Nutanix or vSphere');
   }
 };
 
+const getClusterManagedDisabledReason = (featureSupportLevelData: NewFeatureSupportLevelData) => {
+  if (!featureSupportLevelData.isFeatureSupported('CLUSTER_MANAGED_NETWORKING')) {
+    return featureSupportLevelData.getFeatureDisabledReason('CLUSTER_MANAGED_NETWORKING');
+  }
+};
+
+const getManagedNetworkingState = (
+  isDualStack: boolean,
+  isOracleCloudInfrastructure: boolean,
+  supportedPlatformIntegration: SupportedPlatformIntegrationType,
+  featureSupportLevelData: NewFeatureSupportLevelData,
+  t: TFunction,
+): {
+  isDisabled: boolean;
+  clusterManagedDisabledReason?: string;
+  userManagedDisabledReason?: string;
+} => {
+  const networkingReason = getManagedNetworkingDisabledReason(
+    isDualStack,
+    isOracleCloudInfrastructure,
+    featureSupportLevelData,
+  );
+  const cmnReason = getClusterManagedDisabledReason(featureSupportLevelData);
+  const umnReason = getUserManagedDisabledReason(supportedPlatformIntegration, t);
+
+  return {
+    isDisabled: !!(cmnReason || umnReason || networkingReason),
+    clusterManagedDisabledReason: cmnReason || networkingReason,
+    userManagedDisabledReason: umnReason || networkingReason,
+  };
+};
+
 const NetworkConfiguration = ({
   cluster,
   hostSubnets,
   isVipDhcpAllocationDisabled,
   defaultNetworkSettings,
-  hideManagedNetworking,
 }: NetworkConfigurationProps) => {
   const { t } = useTranslation();
   const featureSupportLevelData = useNewFeatureSupportLevel();
+  const { supportedPlatformIntegration } = useClusterSupportedPlatforms(cluster.id);
+  const { isViewerMode } = useSelector(selectCurrentClusterPermissionsState);
   const { setFieldValue, values, validateField } = useFormikContext<NetworkConfigurationValues>();
 
-  const { clusterFeatureSupportLevels, underlyingCpuArchitecture } = React.useMemo(() => {
-    return {
-      clusterFeatureSupportLevels: getLimitedFeatureSupportLevels(
-        cluster,
-        featureSupportLevelData,
-        t,
-      ),
-      underlyingCpuArchitecture:
-        featureSupportLevelData.activeFeatureConfiguration?.underlyingCpuArchitecture ||
-        getDefaultCpuArchitecture(),
-    };
-  }, [cluster, featureSupportLevelData, t]);
   const isSNOCluster = isSNO(cluster);
-  const isMultiNodeCluster = !isSNOCluster;
   const isUserManagedNetworking = values.managedNetworkingType === 'userManaged';
   const isDualStack = values.stackType === DUAL_STACK;
-  const { isViewerMode } = useSelector(selectCurrentClusterPermissionsState);
-  const shouldUpdateAdvConf = !isViewerMode && isDualStack && !isUserManagedNetworking;
-  const isDualStackSelectable = React.useMemo(() => canBeDualStack(hostSubnets), [hostSubnets]);
 
+  const isDualStackSelectable = React.useMemo(() => canBeDualStack(hostSubnets), [hostSubnets]);
   const isSDNSelectable = React.useMemo(() => {
     return canSelectNetworkTypeSDN(isSNOCluster, isDualStack);
   }, [isSNOCluster, isDualStack]);
@@ -175,15 +148,15 @@ const NetworkConfiguration = ({
     if (isUserManagedNetworking) {
       // We need to reset these fields' values in order to align with the values the server sends
       setFieldValue('vipDhcpAllocation', false);
-      setFieldValue('ingressVip', '', false);
-      setFieldValue('apiVip', '', false);
+      setFieldValue('ingressVips', [], false);
+      setFieldValue('apiVips', [], false);
 
-      if (isMultiNodeCluster) {
+      if (!isSNOCluster) {
         setFieldValue('machineNetworks', [], false);
       }
     }
   }, [
-    isMultiNodeCluster,
+    isSNOCluster,
     isUserManagedNetworking,
     values.vipDhcpAllocation,
     setFieldValue,
@@ -222,48 +195,50 @@ const NetworkConfiguration = ({
   );
 
   React.useEffect(() => {
-    if (shouldUpdateAdvConf) {
+    if (!isViewerMode && isDualStack && !isUserManagedNetworking) {
       toggleAdvConfiguration(true);
     }
-  }, [shouldUpdateAdvConf, toggleAdvConfiguration]);
+  }, [isDualStack, isUserManagedNetworking, isViewerMode, toggleAdvConfiguration]);
 
-  const { supportedPlatformIntegration } = useClusterSupportedPlatforms(cluster.id);
-  const isSupportedPlatformIntegrationNutanix = supportedPlatformIntegration === 'nutanix';
-  const { isNetworkManagementDisabled, networkManagementDisabledReason } = React.useMemo(
+  const managedNetworkingState = React.useMemo(
     () =>
-      isManagedNetworkingDisabled(
+      getManagedNetworkingState(
         isDualStack,
-        cluster.openshiftVersion,
-        underlyingCpuArchitecture,
+        cluster.platform?.type === 'oci',
+        supportedPlatformIntegration,
         featureSupportLevelData,
+        t,
       ),
-    [underlyingCpuArchitecture, cluster.openshiftVersion, featureSupportLevelData, isDualStack],
-  );
-
-  const { isUserManagementDisabled, userManagementDisabledReason } = React.useMemo(
-    () => isUserManagedNetworkingDisabled(isSupportedPlatformIntegrationNutanix, t),
-    [isSupportedPlatformIntegrationNutanix, t],
+    [isDualStack, cluster.platform?.type, supportedPlatformIntegration, featureSupportLevelData, t],
   );
 
   return (
     <Grid hasGutter>
-      {!hideManagedNetworking && (
-        <ManagedNetworkingControlGroup
-          disabled={isViewerMode || isNetworkManagementDisabled || isUserManagementDisabled}
-          tooltip={networkManagementDisabledReason}
-          tooltipUmnDisabled={userManagementDisabledReason}
-        />
-      )}
+      <ManagedNetworkingControlGroup
+        disabled={isViewerMode || managedNetworkingState.isDisabled}
+        tooltipCmnDisabled={managedNetworkingState.clusterManagedDisabledReason}
+        tooltipUmnDisabled={managedNetworkingState.userManagedDisabledReason}
+      />
 
       {isUserManagedNetworking && (
-        <UserManagedNetworkingTextContent shouldDisplayLoadBalancersBullet={isMultiNodeCluster} />
+        <UserManagedNetworkingTextContent
+          shouldDisplayLoadBalancersBullet={!isSNOCluster}
+          docVersion={cluster.openshiftVersion}
+        />
       )}
 
       {!isUserManagedNetworking &&
-        !!clusterFeatureSupportLevels &&
-        (clusterFeatureSupportLevels['CLUSTER_MANAGED_NETWORKING_WITH_VMS'] === 'unsupported' ||
-          clusterFeatureSupportLevels['CLUSTER_MANAGED_NETWORKING_WITH_VMS'] === 'unavailable') &&
-        vmsAlert}
+        !featureSupportLevelData.isFeatureSupported('CLUSTER_MANAGED_NETWORKING_WITH_VMS') && (
+          <Alert
+            title="Your cluster will be subject to support limitations"
+            variant={AlertVariant.info}
+            isInline={true}
+            data-testid="networking-vms-alert"
+          >
+            Some or all of your discovered hosts are virtual machines, so selecting the
+            cluster-managed networking option will limit your installed cluster's support.
+          </Alert>
+        )}
 
       {(isSNOCluster || !isUserManagedNetworking) && (
         <StackTypeControlGroup
@@ -274,15 +249,15 @@ const NetworkConfiguration = ({
       )}
       <NetworkTypeControlGroup isDisabled={isViewerMode} isSDNSelectable={isSDNSelectable} />
 
-      {!(isUserManagedNetworking && isMultiNodeCluster) && (
+      {!(isUserManagedNetworking && !isSNOCluster) && (
         <AvailableSubnetsControl
           clusterId={cluster.id}
           hostSubnets={hostSubnets}
           isRequired={!isUserManagedNetworking}
           isDisabled={
             (cluster.vipDhcpAllocation &&
-              cluster.apiVip === undefined &&
-              cluster.ingressVip === undefined) ||
+              selectApiVip(cluster) === '' &&
+              selectIngressVip(cluster) === '') ||
             hostSubnets.length === 0 ||
             false
           }

package/lib/ocm/components/clusterConfiguration/networkConfiguration/NetworkConfigurationForm.tsx

@@ -3,23 +3,21 @@ import { useDispatch, useSelector } from 'react-redux';
 import { Formik, FormikConfig, useFormikContext } from 'formik';
 import { Form, Grid, GridItem, Text, TextContent } from '@patternfly/react-core';
 import {
-  Cluster,
-  ClusterDefaultConfig,
   ClusterWizardStep,
   ClusterWizardStepHeader,
   CpuArchitecture,
   getFormikErrorFields,
   getHostSubnets,
   HostSubnets,
-  InfraEnv,
   IPV4_STACK,
   isSNO,
   LoadingState,
   NetworkConfigurationValues,
   SecurityFields,
+  selectApiVip,
+  selectIngressVip,
   useAlerts,
   useFormikAutoSave,
-  V2ClusterUpdateParams,
 } from '../../../../common';
 import { useDefaultConfiguration } from '../ClusterDefaultConfigurationContext';
 import { useClusterWizardContext } from '../../clusterWizard/ClusterWizardContext';
@@ -28,7 +26,7 @@ import { canNextNetwork } from '../../clusterWizard/wizardTransition';
 import ClusterWizardNavigation from '../../clusterWizard/ClusterWizardNavigation';
 import NetworkConfigurationTable from './NetworkConfigurationTable';
 import useInfraEnv from '../../../hooks/useInfraEnv';
-import { selectCurrentClusterPermissionsState } from '../../../selectors';
+import { selectCurrentClusterPermissionsState } from '../../../store/slices/current-cluster/selectors';
 import {
   getNetworkConfigurationValidationSchema,
   getNetworkInitialValues,
@@ -36,9 +34,18 @@ import {
 import NetworkConfiguration from './NetworkConfiguration';
 import { captureException } from '../../../sentry';
 import { ClustersService } from '../../../services';
-import { setServerUpdateError, updateClusterBase } from '../../../reducers/clusters';
+import {
+  setServerUpdateError,
+  updateClusterBase,
+} from '../../../store/slices/current-cluster/slice';
 import { isUnknownServerError, getApiErrorMessage, handleApiError } from '../../../api';
 import { useClusterSupportedPlatforms, usePullSecret } from '../../../hooks';
+import {
+  Cluster,
+  ClusterDefaultConfig,
+  InfraEnv,
+  V2ClusterUpdateParams,
+} from '@openshift-assisted/types/assisted-installer-service';
 
 const NetworkConfigurationForm: React.FC<{
   cluster: Cluster;
@@ -134,7 +141,9 @@ const NetworkConfigurationPage = ({ cluster }: { cluster: Cluster }) => {
     isLoading,
   } = useInfraEnv(
     cluster.id,
-    cluster.cpuArchitecture ? (cluster.cpuArchitecture as CpuArchitecture) : CpuArchitecture.x86,
+    cluster.cpuArchitecture
+      ? (cluster.cpuArchitecture as CpuArchitecture)
+      : CpuArchitecture.USE_DAY1_ARCHITECTURE,
     cluster.name,
     pullSecret,
     cluster.openshiftVersion,
@@ -187,8 +196,10 @@ const NetworkConfigurationPage = ({ cluster }: { cluster: Cluster }) => {
       const isUserManagedNetworking = values.managedNetworkingType === 'userManaged';
 
       const params: V2ClusterUpdateParams = {
-        apiVip: values.apiVip,
-        ingressVip: values.ingressVip,
+        apiVips: values.apiVips,
+        apiVip: selectApiVip(values),
+        ingressVips: values.ingressVips,
+        ingressVip: selectIngressVip(values),
         sshPublicKey: values.sshPublicKey,
         vipDhcpAllocation: values.vipDhcpAllocation,
         networkType: values.networkType,
@@ -199,15 +210,19 @@ const NetworkConfigurationPage = ({ cluster }: { cluster: Cluster }) => {
       };
 
       if (params.userManagedNetworking) {
-        delete params.apiVip;
-        delete params.ingressVip;
+        params.apiVips = [];
+        params.apiVip = '';
+        params.ingressVips = [];
+        params.ingressVip = '';
         if (isMultiNodeCluster) {
           delete params.machineNetworks;
         }
       } else {
         // cluster-managed can't be chosen in SNO, so this must be a multi-node cluster
         if (values.vipDhcpAllocation) {
+          delete params.apiVips;
           delete params.apiVip;
+          delete params.ingressVips;
           delete params.ingressVip;
         } else if (values.stackType === IPV4_STACK) {
           // The API will rebuild the default machineNetwork

package/lib/ocm/components/clusterConfiguration/networkConfiguration/NetworkConfigurationTableBase.tsx

@@ -1,12 +1,6 @@
 import * as React from 'react';
 import { sortable } from '@patternfly/react-table';
-import {
-  Cluster,
-  Host,
-  HostsTableActions,
-  selectSchedulableMasters,
-  stringToJSON,
-} from '../../../../common';
+import { HostsTableActions, selectSchedulableMasters } from '../../../../common';
 import NetworkingStatus from '../../hosts/NetworkingStatus';
 import { useTranslation } from '../../../../common/hooks/use-translation-wrapper';
 import {
@@ -23,6 +17,9 @@ import { usePagination } from '../../../../common/components/hosts/usePagination
 import { HostDetail } from '../../../../common/components/hosts/HostRowDetail';
 import HostsTable from '../../../../common/components/hosts/HostsTable';
 import { ValidationsInfo } from '../../../../common/types/hosts';
+import { useClusterWizardContext } from '../../clusterWizard/ClusterWizardContext';
+import { stringToJSON } from '../../../../common/utils';
+import { Cluster, Host } from '@openshift-assisted/types/assisted-installer-service';
 
 export const networkingStatusColumn = (
   onEditHostname?: HostsTableActions['onEditHost'],
@@ -70,6 +67,7 @@ const NetworkConfigurationTableBase = ({
   onSelect,
   selectedIDs,
 }: NetworkConfigurationTableProps) => {
+  const { wizardPerPage, setWizardPerPage } = useClusterWizardContext();
   const { t } = useTranslation();
   const content = React.useMemo(
     () => [
@@ -87,7 +85,7 @@ const NetworkConfigurationTableBase = ({
 
   const hosts = cluster.hosts || [];
 
-  const paginationProps = usePagination(hosts.length);
+  const paginationProps = usePagination(hosts.length, wizardPerPage, setWizardPerPage);
 
   const ExpandComponent = React.useCallback(
     ({ obj }: { obj: Host }) => {

package/lib/ocm/components/clusterConfiguration/networkConfiguration/StackTypeControl.tsx

@@ -13,15 +13,17 @@ import {
   NETWORK_TYPE_OVN,
   NETWORK_TYPE_SDN,
   NO_SUBNET_SET,
-  Cluster,
-  ClusterNetwork,
-  MachineNetwork,
-  ServiceNetwork,
 } from '../../../../common';
 import { ConfirmationModal, PopoverIcon } from '../../../../common/components/ui';
 import { useDefaultConfiguration } from '../ClusterDefaultConfigurationContext';
-import { selectCurrentClusterPermissionsState } from '../../../selectors';
+import { selectCurrentClusterPermissionsState } from '../../../store/slices/current-cluster/selectors';
 import { OcmRadioField } from '../../ui/OcmFormFields';
+import {
+  Cluster,
+  ClusterNetwork,
+  MachineNetwork,
+  ServiceNetwork,
+} from '@openshift-assisted/types/assisted-installer-service';
 
 type StackTypeControlGroupProps = {
   clusterId: Cluster['id'];

package/lib/ocm/components/clusterConfiguration/networkConfiguration/SubnetsDropdown.tsx

@@ -36,7 +36,7 @@ const noSubnetAvailableOption = {
 export const SubnetsDropdown = ({ name, machineSubnets, isDisabled }: SubnetsDropdownProps) => {
   const [field, , { setValue }] = useField(name);
   const [isOpen, setOpen] = React.useState(false);
-  const [current, setCurrent] = React.useState('');
+  const [currentDisplayValue, setCurrentDisplayValue] = React.useState<string | undefined>();
   const fieldId = getFieldId(name, 'input');
 
   const itemsSubnets = React.useMemo(() => {
@@ -48,9 +48,20 @@ export const SubnetsDropdown = ({ name, machineSubnets, isDisabled }: SubnetsDro
   }, [machineSubnets]);
 
   React.useEffect(() => {
-    const defaultValue = itemsSubnets.length > 1 ? itemsSubnets[1].label : itemsSubnets[0].label;
-    setCurrent(defaultValue);
-  }, [setCurrent, itemsSubnets]);
+    if (field.value) {
+      // If the field already has a value then it must have been assigned from one of the entries in the `itemsSubnets`
+      const subnetItem = itemsSubnets.find((item) => item.value === field.value);
+      setCurrentDisplayValue(subnetItem?.label ?? itemsSubnets[0].label);
+    } else {
+      // When `itemsSubnets.length === 2`, there is a placeholder at index 0 and only one subnet at index 1.
+      // In all the other cases the user should see the placeholder saying that either there is no subnet available
+      // or there is more than one option they can choose from.
+      const defaultValue =
+        itemsSubnets.length === 2 ? itemsSubnets[1].label : itemsSubnets[0].label;
+      setCurrentDisplayValue(defaultValue);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
   const dropdownItems = itemsSubnets.map(({ value, label, isDisabled }) => (
     <DropdownItem key={value} id={value} isDisabled={isDisabled}>
@@ -60,14 +71,12 @@ export const SubnetsDropdown = ({ name, machineSubnets, isDisabled }: SubnetsDro
 
   const onSelect = React.useCallback(
     (event?: React.SyntheticEvent<HTMLDivElement>) => {
-      const currentValue = event?.currentTarget.innerText
-        ? event?.currentTarget.innerText
-        : current;
-      setCurrent(currentValue ? currentValue : '');
+      const currentValue = event?.currentTarget.innerText ?? currentDisplayValue;
+      setCurrentDisplayValue(currentValue);
       setValue(event?.currentTarget.id);
       setOpen(false);
     },
-    [current, setValue],
+    [currentDisplayValue, setValue],
   );
 
   const toggle = React.useMemo(
@@ -79,10 +88,10 @@ export const SubnetsDropdown = ({ name, machineSubnets, isDisabled }: SubnetsDro
         isText
         className="pf-u-w-100"
       >
-        {current}
+        {currentDisplayValue}
       </DropdownToggle>
     ),
-    [setOpen, current, isDisabled],
+    [setOpen, currentDisplayValue, isDisabled],
   );
 
   return (