@openshift-assisted/ui-lib 2.41.2 → 2.42.1

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

@@ -82,12 +82,14 @@ const ClusterDeploymentHostsDiscovery: React.FC<ClusterDeploymentHostsDiscoveryP
           <DiscoveryInstructions />
         </TextContent>
       </GridItem>
-      <AddHostDropdown
-        infraEnv={infraEnv}
-        agentClusterInstall={agentClusterInstall}
-        usedHostnames={usedHostnames}
-        {...rest}
-      />
+      <GridItem span={5}>
+        <AddHostDropdown
+          infraEnv={infraEnv}
+          agentClusterInstall={agentClusterInstall}
+          usedHostnames={usedHostnames}
+          {...rest}
+        />
+      </GridItem>
       <GridItem>
         <TextContent>
           <Text component="h3">{t('ai:Information and warnings')}</Text>

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

@@ -1,7 +1,16 @@
 import React from 'react';
 import flatten from 'lodash-es/flatten.js';
-import { Label, LabelGroup, Split, SplitItem } from '@patternfly/react-core';
-import { Dropdown, DropdownItem, DropdownToggle } from '@patternfly/react-core/deprecated';
+import {
+  Label,
+  LabelGroup,
+  Split,
+  SplitItem,
+  Dropdown,
+  DropdownItem,
+  MenuToggle,
+  MenuToggleElement,
+  DropdownList,
+} from '@patternfly/react-core';
 import { useField } from 'formik';
 
 import { MultiSelectField } from '../../../common';
@@ -122,23 +131,27 @@ export const LabelSelectorGroup: React.FC<LabelsSelectorProps> = ({
       </SplitItem>
       <SplitItem>
         <Dropdown
+          isOpen={addLabelOpen}
           onSelect={() => setAddLabelOpen(false)}
-          toggle={
-            <DropdownToggle
-              toggleIndicator={null}
-              onToggle={(_event, val) => setAddLabelOpen(val)}
-              style={{ padding: 0 }}
+          onOpenChange={() => setAddLabelOpen(!addLabelOpen)}
+          toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+            <MenuToggle
+              variant="plain"
+              className="pf-v5-u-w-100"
+              ref={toggleRef}
+              isFullWidth
+              onClick={() => setAddLabelOpen(!addLabelOpen)}
+              isExpanded={addLabelOpen}
             >
               <Label color="blue" variant="outline" className="pf-m-overflow">
                 {t('ai:Add label')}
               </Label>
-            </DropdownToggle>
-          }
-          isOpen={addLabelOpen}
-          isPlain
-          dropdownItems={children}
-          menuAppendTo={() => document.body}
-        />
+            </MenuToggle>
+          )}
+          shouldFocusToggleOnSelect
+        >
+          <DropdownList>{children}</DropdownList>
+        </Dropdown>
       </SplitItem>
     </Split>
   );

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

@@ -14,6 +14,7 @@ import RadioField from '../../../common/components/ui/formik/RadioField';
 type ScaleUpFormProps = {
   agents: AgentK8sResource[];
   onEditHost: AgentTableActions['onEditHost'];
+  onEditRole: AgentTableActions['onEditRole'];
   onSetInstallationDiskId: AgentTableActions['onSetInstallationDiskId'];
   isNutanix: boolean;
 };
@@ -21,6 +22,7 @@ type ScaleUpFormProps = {
 const ScaleUpForm: React.FC<ScaleUpFormProps> = ({
   agents,
   onEditHost,
+  onEditRole,
   onSetInstallationDiskId,
   isNutanix,
 }) => {
@@ -73,6 +75,7 @@ const ScaleUpForm: React.FC<ScaleUpFormProps> = ({
         <ClusterDeploymentHostsSelectionAdvanced<ScaleUpFormValues>
           availableAgents={availableAgents}
           onEditHost={onEditHost}
+          onEditRole={onEditRole}
           onSetInstallationDiskId={onSetInstallationDiskId}
         />
       )}

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

@@ -1,20 +1,25 @@
-import { Split, SplitItem, Spinner } from '@patternfly/react-core';
 import {
+  Split,
+  SplitItem,
+  Spinner,
   Dropdown,
-  DropdownGroup,
   DropdownItem,
   DropdownItemProps,
-  DropdownSeparator,
-  DropdownToggle,
-} from '@patternfly/react-core/deprecated';
+  MenuToggle,
+  MenuToggleElement,
+  Divider,
+  DropdownList,
+  Popover,
+  Flex,
+} from '@patternfly/react-core';
 import * as React from 'react';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
 import { AddBmcHostModal, AddBmcHostYamlModal, AddHostModal } from '../modals';
 import { AddHostDropdownProps } from './types';
 import './AddHostDropdown.css';
-import { PopoverIcon } from '../../../common';
 import { Trans } from 'react-i18next';
 import { Link } from 'react-router-dom-v5-compat';
+import { OutlinedQuestionCircleIcon } from '@patternfly/react-icons/dist/js/icons/outlined-question-circle-icon';
 
 type ModalType = 'iso' | 'bmc' | 'yaml' | 'ipxe' | undefined;
 
@@ -50,21 +55,29 @@ const AddHostDropdown = ({
   const [provisioningConfig, provisioningConfigLoaded, provisioningConfigError] =
     provisioningConfigResult;
   const { t } = useTranslation();
+
   return (
     <>
       <Dropdown
         id="infraenv-actions"
-        toggle={
-          <DropdownToggle
+        isOpen={isKebabOpen}
+        onSelect={() => setIsKebabOpen(false)}
+        onOpenChange={() => setIsKebabOpen(!isKebabOpen)}
+        toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+          <MenuToggle
             id="dropdown-basic"
-            onToggle={(_event, value) => setIsKebabOpen(value)}
-            toggleVariant="primary"
+            variant="primary"
+            ref={toggleRef}
+            onClick={() => setIsKebabOpen(!isKebabOpen)}
+            isExpanded={isKebabOpen}
           >
             {t('ai:Add hosts')}
-          </DropdownToggle>
-        }
-        isOpen={isKebabOpen}
-        dropdownItems={[
+          </MenuToggle>
+        )}
+        shouldFocusToggleOnSelect
+        popperProps={{ preventOverflow: true }}
+      >
+        {[
           <DropdownItem
             key="discovery-iso"
             onClick={() => {
@@ -85,36 +98,37 @@ const AddHostDropdown = ({
           >
             {t('ai:With iPXE')}
           </DropdownItem>,
-          <DropdownSeparator key="separator" />,
-          <DropdownGroup
-            id="discovery-bmc"
-            key="discovery-bmc"
-            className="ai-discovery-bmc__group"
-            label={
-              <Split hasGutter>
-                <SplitItem>{t('ai:Baseboard Management Controller (BMC)')}</SplitItem>
-                <SplitItem>
-                  {!provisioningConfig && (
-                    <>
-                      {' '}
-                      <PopoverIcon
-                        noVerticalAlign
-                        bodyContent={
-                          <Trans t={t}>
-                            ai:To enable the host's baseboard management controller (BMC) on the hub
-                            cluster, you must first{' '}
-                            <Link to="/k8s/cluster/metal3.io~v1alpha1~Provisioning/~new">
-                              create a provisioning configuration.
-                            </Link>
-                          </Trans>
-                        }
-                      />
-                    </>
-                  )}
-                </SplitItem>
-              </Split>
-            }
-          >
+          <Divider component="li" key="separator" />,
+          <DropdownList id="discovery-bmc" key="discovery-bmc" className="ai-discovery-bmc__group">
+            {!provisioningConfig && (
+              <DropdownItem
+                isAriaDisabled
+                className="pf-v5-u-color-200" // visually muted
+                component="div"
+              >
+                <Flex
+                  alignItems={{ default: 'alignItemsCenter' }}
+                  spaceItems={{ default: 'spaceItemsMd' }} // Changed to 'spaceItemsMd' for larger spacing
+                >
+                  <span>{t('ai:Baseboard Management Controller (BMC)')}</span>
+                  <Popover
+                    triggerAction="hover"
+                    position="top"
+                    bodyContent={
+                      <Trans t={t}>
+                        ai:To enable the host's baseboard management controller (BMC) on the hub
+                        cluster, you must first{' '}
+                        <Link to="/k8s/cluster/metal3.io~v1alpha1~Provisioning/~new">
+                          create a provisioning configuration.
+                        </Link>
+                      </Trans>
+                    }
+                  >
+                    <OutlinedQuestionCircleIcon />
+                  </Popover>
+                </Flex>
+              </DropdownItem>
+            )}
             <DropdownItemWithLoading
               key="with-credentials"
               onClick={() => {
@@ -139,10 +153,9 @@ const AddHostDropdown = ({
               isLoading={!provisioningConfigLoaded}
               isDisabled={!provisioningConfig && !provisioningConfigError}
             />
-          </DropdownGroup>,
+          </DropdownList>,
         ]}
-        position={'right'}
-      />
+      </Dropdown>
       {addModalType === 'iso' && (
         <AddHostModal
           infraEnv={infraEnv}

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

@@ -20,12 +20,7 @@ import { PencilAltIcon } from '@patternfly/react-icons/dist/js/icons/pencil-alt-
 import { global_palette_green_500 as okColor } from '@patternfly/react-tokens/dist/js/global_palette_green_500';
 import { global_warning_color_100 as warningColor } from '@patternfly/react-tokens/dist/js/global_warning_color_100';
 
-import {
-  architectureData,
-  CpuArchitecture,
-  LabelValue,
-  SupportedCpuArchitecture,
-} from '../../../common';
+import { architectureData, LabelValue } from '../../../common';
 import { InfraEnvK8sResource, SecretK8sResource } from '../../types';
 import { AGENT_LOCATION_LABEL_KEY } from '../common';
 import EditPullSecretModal, { EditPullSecretModalProps } from '../modals/EditPullSecretModal';
@@ -134,6 +129,11 @@ const EnvironmentDetails: React.FC<EnvironmentDetailsProps> = ({
     infraEnv.spec?.proxy?.httpProxy ||
     infraEnv.spec?.proxy?.httpsProxy ||
     infraEnv.spec?.proxy?.noProxy;
+
+  const arch = infraEnv.spec?.cpuArchitecture
+    ? architectureData[infraEnv.spec?.cpuArchitecture]?.label
+    : infraEnv.spec?.cpuArchitecture;
+
   return (
     <>
       <Grid hasGutter>
@@ -164,10 +164,7 @@ const EnvironmentDetails: React.FC<EnvironmentDetailsProps> = ({
             </DescriptionListGroup>
             <DescriptionListGroup>
               <DescriptionListTerm>{t('ai:CPU architecture')}</DescriptionListTerm>
-              <DescriptionListDescription>
-                {architectureData[infraEnv.spec?.cpuArchitecture as SupportedCpuArchitecture]
-                  .label ?? CpuArchitecture.x86}
-              </DescriptionListDescription>
+              <DescriptionListDescription>{arch ?? '--'}</DescriptionListDescription>
             </DescriptionListGroup>
 
             {infraEnv.spec?.osImageVersion && (

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Button, Stack, StackItem } from '@patternfly/react-core';
-import { DropdownItem } from '@patternfly/react-core/deprecated';
+import { DropdownItem } from '@patternfly/react-core';
 
 import { Host } from '@openshift-assisted/types/assisted-installer-service';
 import {

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

@@ -1,6 +1,13 @@
 import * as React from 'react';
-import { Dropdown, DropdownItem, DropdownToggle } from '@patternfly/react-core/deprecated';
-import { FormGroup, Tooltip } from '@patternfly/react-core';
+import {
+  FormGroup,
+  Tooltip,
+  Dropdown,
+  DropdownItem,
+  MenuToggle,
+  MenuToggleElement,
+  DropdownList,
+} from '@patternfly/react-core';
 import { useField } from 'formik';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
 import { architectureData, getFieldId, SupportedCpuArchitecture } from '../../../common';
@@ -13,9 +20,11 @@ const InfraEnvOpenShiftVersionDropdown = ({ osImages }: { osImages: OsImage[] })
   const [osImageOpen, setOsImageOpen] = React.useState(false);
   const fieldId = getFieldId(name, 'input');
 
-  const onOsImageSelect = (e?: React.SyntheticEvent<HTMLDivElement>) => {
-    const val = e?.currentTarget.id || '';
-    setValue(val);
+  const onOsImageSelect = (
+    event?: React.MouseEvent<Element, MouseEvent>,
+    val?: string | number,
+  ) => {
+    setValue(val ? String(val) : '');
     setOsImageOpen(false);
   };
 
@@ -40,30 +49,33 @@ const InfraEnvOpenShiftVersionDropdown = ({ osImages }: { osImages: OsImage[] })
         hidden={!!filteredImages.length}
       >
         <Dropdown
-          toggle={
-            <DropdownToggle
-              onToggle={() => setOsImageOpen(!osImageOpen)}
-              className="pf-u-w-100"
+          toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+            <MenuToggle
+              ref={toggleRef}
+              isFullWidth
+              onClick={() => setOsImageOpen(!osImageOpen)}
+              isExpanded={osImageOpen}
               isDisabled={!filteredImages.length}
             >
               {value ? `OpenShift ${value}` : t('ai:No version selected')}
-            </DropdownToggle>
-          }
-          name="osImageVersion"
+            </MenuToggle>
+          )}
           isOpen={osImageOpen}
           onSelect={onOsImageSelect}
-          dropdownItems={[
-            <DropdownItem key={'NO_VALUE'} value={''}>
-              {t('ai:No version selected')}
-            </DropdownItem>,
-            ...filteredImages.map((image) => (
-              <DropdownItem key={image.openshiftVersion} id={image.openshiftVersion}>
+          onOpenChange={() => setOsImageOpen(!osImageOpen)}
+        >
+          <DropdownList>
+            {filteredImages.map((image) => (
+              <DropdownItem
+                key={image.openshiftVersion}
+                id={image.openshiftVersion}
+                value={image.openshiftVersion}
+              >
                 {`OpenShift ${image.openshiftVersion}`}
               </DropdownItem>
-            )),
-          ]}
-          className="pf-u-w-100"
-        />
+            ))}
+          </DropdownList>
+        </Dropdown>
       </Tooltip>
     </FormGroup>
   );

package/lib/cim/components/common/CpuArchitectureDropdown.tsx

@@ -54,7 +54,7 @@ const CpuArchitectureDropdown = ({
             isAriaDisabled={!isItemEnabled}
             selected={arch === value}
             description={architectureData[arch].description}
-            tooltipProps={{ content: disabledReason, position: 'top' }}
+            tooltipProps={{ content: disabledReason, position: 'top', hidden: isItemEnabled }}
             onClick={(e: React.MouseEvent) => e.preventDefault()}
           >
             {architectureData[arch].label}
@@ -74,23 +74,26 @@ const CpuArchitectureDropdown = ({
   return !isDisabled ? (
     <FormGroup
       isInline
-      fieldId={fieldId}
+      id={`form-control__${fieldId}`}
       label={t('ai:CPU architecture')}
       isRequired
       name={'cpuArchiteture'}
     >
       <Dropdown
+        id={`${fieldId}-dropdown`}
         toggle={(toggleRef) => (
           <MenuToggle
+            id={fieldId}
             ref={toggleRef}
             onClick={() => setCpuArchOpen(!cpuArchOpen)}
-            className="pf-u-w-100"
+            className="pf-v5-u-w-100"
           >
             {value ? architectureData[value].label : t('ai:CPU architecture')}
           </MenuToggle>
         )}
         isOpen={cpuArchOpen}
         onSelect={onCpuArchSelect}
+        onOpenChange={() => setCpuArchOpen(!cpuArchOpen)}
       >
         {dropdownItems}
       </Dropdown>

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

@@ -8,7 +8,7 @@ import {
 } from '../../types';
 import { CpuArchitecture, OpenshiftVersionOptionType } from '../../../common';
 import { OpenshiftVersion } from '@openshift-assisted/types/assisted-installer-service';
-import { getMajorMinorVersion } from '../../../common/utils';
+import { isMajorMinorVersionEqualOrGreater } from '../../../common/utils';
 
 export const getVersionFromReleaseImage = (releaseImage = '') => {
   const match = /.+:(\d+\.\d+(?:\.\d+)?(?:-\w+)?)/gm.exec(releaseImage);
@@ -124,4 +124,4 @@ export const getCurrentClusterVersion = (cv?: ClusterVersionK8sResource): string
 export const getNetworkType = (
   ocpVersion: OpenshiftVersionOptionType | undefined,
 ): 'OVNKubernetes' | 'OpenShiftSDN' =>
-  parseFloat(getMajorMinorVersion(ocpVersion?.version)) >= 4.12 ? 'OVNKubernetes' : 'OpenShiftSDN';
+  isMajorMinorVersionEqualOrGreater(ocpVersion?.version, '4.12') ? 'OVNKubernetes' : 'OpenShiftSDN';

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { DropdownItem } from '@patternfly/react-core/deprecated';
+import { DropdownItem } from '@patternfly/react-core';
 import { AgentK8sResource } from '../../types';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
 

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

@@ -63,6 +63,7 @@ type ScaleUpModalProps = {
   onChangeBMHHostname: (bmh: BareMetalHostK8sResource, hostname: string) => Promise<unknown>;
   onSetInstallationDiskId: AgentTableActions['onSetInstallationDiskId'];
   isNutanix: boolean;
+  onEditHostRole: (agent: AgentK8sResource, role: string | undefined) => Promise<AgentK8sResource>;
 };
 
 const ScaleUpModal: React.FC<ScaleUpModalProps> = ({
@@ -76,6 +77,7 @@ const ScaleUpModal: React.FC<ScaleUpModalProps> = ({
   onChangeBMHHostname,
   onSetInstallationDiskId,
   isNutanix,
+  onEditHostRole,
 }) => {
   const [editAgent, setEditAgent] = React.useState<AgentK8sResource | undefined>();
   const [error, setError] = React.useState<string | undefined>();
@@ -123,8 +125,8 @@ const ScaleUpModal: React.FC<ScaleUpModalProps> = ({
   return (
     <>
       <Modal
-        aria-label={t('ai:Add worker host dialog')}
-        title={t('ai:Add worker hosts')}
+        aria-label={t('ai:Add host dialog')}
+        title={t('ai:Add hosts')}
         isOpen={isOpen}
         onClose={onClose}
         hasNoBodyWrapper
@@ -145,6 +147,7 @@ const ScaleUpModal: React.FC<ScaleUpModalProps> = ({
                       <ScaleUpForm
                         agents={agents}
                         onEditHost={setEditAgent}
+                        onEditRole={onEditHostRole}
                         onSetInstallationDiskId={onSetInstallationDiskId}
                         isNutanix={isNutanix}
                       />

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

@@ -1,6 +1,13 @@
 import * as React from 'react';
-import { Dropdown, DropdownItem, DropdownToggle } from '@patternfly/react-core/deprecated';
-import { FormGroup, Tooltip } from '@patternfly/react-core';
+import {
+  FormGroup,
+  Tooltip,
+  Dropdown,
+  DropdownItem,
+  MenuToggle,
+  MenuToggleElement,
+  DropdownList,
+} from '@patternfly/react-core';
 import { useTranslation } from '../../hooks/use-translation-wrapper';
 import { getFieldId, StaticField } from '../..';
 import { useField } from 'formik';
@@ -55,29 +62,35 @@ const ControlPlaneNodesDropdown = ({
     );
   });
 
-  const onControlPlaneSelect = (e?: React.SyntheticEvent<HTMLDivElement>) => {
-    const val = e?.currentTarget.id as string;
-    setValue(toNumber(val));
+  const onControlPlaneSelect = (
+    e?: React.MouseEvent<Element, MouseEvent>,
+    value?: string | number,
+  ) => {
+    setValue(toNumber(value));
     setControlPlanelOpen(false);
   };
 
   return !isDisabled ? (
     <FormGroup isInline fieldId={fieldId} label={t('ai:Number of control plane nodes')} isRequired>
       <Dropdown
-        toggle={
-          <DropdownToggle
-            onToggle={() => setControlPlanelOpen(!controlPlanelOpen)}
-            className="pf-u-w-100"
-          >
-            {selectedValue ? selectedValue : '3'}
-          </DropdownToggle>
-        }
-        name="controlPlaneCount"
         isOpen={controlPlanelOpen}
         onSelect={onControlPlaneSelect}
-        dropdownItems={dropdownItems}
-        className="pf-u-w-100"
-      />
+        onOpenChange={() => setControlPlanelOpen(!controlPlanelOpen)}
+        toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+          <MenuToggle
+            className="pf-v5-u-w-100"
+            ref={toggleRef}
+            isFullWidth
+            onClick={() => setControlPlanelOpen(!controlPlanelOpen)}
+            isExpanded={controlPlanelOpen}
+          >
+            {selectedValue ? selectedValue : '3'}
+          </MenuToggle>
+        )}
+        shouldFocusToggleOnSelect
+      >
+        <DropdownList>{dropdownItems}</DropdownList>
+      </Dropdown>
     </FormGroup>
   ) : (
     <StaticField

package/lib/common/components/clusterConfiguration/DiskEncryptionFields/DiskEncryptionControlGroup.tsx

@@ -42,16 +42,20 @@ const DiskEncryptionControlGroup = ({
   const {
     enableDiskEncryptionOnMasters,
     enableDiskEncryptionOnWorkers,
+    enableDiskEncryptionOnArbiters,
     diskEncryptionMode,
     diskEncryptionTangServers,
   } = values;
   const fieldId = 'diskEncryption';
 
-  const hasEnabledDiskEncryption = enableDiskEncryptionOnMasters || enableDiskEncryptionOnWorkers;
+  const hasEnabledDiskEncryption =
+    enableDiskEncryptionOnMasters ||
+    enableDiskEncryptionOnWorkers ||
+    enableDiskEncryptionOnArbiters;
   const { setFieldValue, setFieldTouched } = useFormikContext<ClusterDetailsValues>();
 
   React.useEffect(() => {
-    if (!enableDiskEncryptionOnWorkers && !enableDiskEncryptionOnMasters) {
+    if (!hasEnabledDiskEncryption) {
       if (diskEncryptionMode !== 'tpmv2') {
         setFieldValue('diskEncryptionMode', 'tpmv2');
       }
@@ -61,12 +65,11 @@ const DiskEncryptionControlGroup = ({
       }
     }
   }, [
-    enableDiskEncryptionOnMasters,
-    enableDiskEncryptionOnWorkers,
     diskEncryptionMode,
     diskEncryptionTangServers,
     setFieldTouched,
     setFieldValue,
+    hasEnabledDiskEncryption,
   ]);
 
   React.useEffect(() => {
@@ -102,8 +105,20 @@ const DiskEncryptionControlGroup = ({
             />
           </StackItem>
         </RenderIf>
+        <StackItem>
+          <SwitchField
+            tooltipProps={tooltipProps}
+            name="enableDiskEncryptionOnArbiters"
+            label={t('ai:Arbiter')}
+            isDisabled={isDisabled}
+          />
+        </StackItem>
         <RenderIf
-          condition={enableDiskEncryptionOnMasters || (enableDiskEncryptionOnWorkers && !isSNO)}
+          condition={
+            enableDiskEncryptionOnMasters ||
+            (enableDiskEncryptionOnWorkers && !isSNO) ||
+            enableDiskEncryptionOnArbiters
+          }
         >
           <StackItem>
             <DiskEncryptionMode

package/lib/common/components/clusterConfiguration/DiskEncryptionFields/DiskEncryptionValues.ts

@@ -8,6 +8,7 @@ export type TangServer = {
 export interface DiskEncryptionValues {
   enableDiskEncryptionOnMasters?: boolean;
   enableDiskEncryptionOnWorkers: boolean;
+  enableDiskEncryptionOnArbiters: boolean;
   diskEncryptionMode: DiskEncryption['mode'];
   diskEncryptionTangServers: TangServer[];
 }

package/lib/common/components/clusterDetail/OperatorsProgressItem.tsx

@@ -80,7 +80,7 @@ type OperatorsPopoverProps = OperatorListProps & {
 
 const OperatorsPopover = ({ operators, children }: OperatorsPopoverProps) => {
   const { t } = useTranslation();
-  const opSpecs = useOperatorSpecs();
+  const { byKey: opSpecs } = useOperatorSpecs();
 
   return (
     <Popover

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

@@ -83,6 +83,9 @@ export const getClusterDetailsInitialValues = ({
     customOpenshiftSelect: null,
     userManagedNetworking: cluster?.userManagedNetworking || false,
     controlPlaneCount: cluster?.controlPlaneCount || 3,
+    enableDiskEncryptionOnArbiters: ['all', 'arbiters'].includes(
+      cluster?.diskEncryption?.enableOn ?? 'none',
+    ),
   };
 };
 

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

@@ -27,6 +27,7 @@ export type ClusterDetailsValues = {
   useRedHatDnsService: boolean;
   enableDiskEncryptionOnMasters: boolean;
   enableDiskEncryptionOnWorkers: boolean;
+  enableDiskEncryptionOnArbiters: boolean;
   diskEncryptionMode: DiskEncryption['mode'];
   diskEncryptionTangServers: TangServer[];
   diskEncryption: DiskEncryption;