@openshift-assisted/ui-lib 2.15.3-cim → 2.16.1-cim

package/lib/ocm/components/clusterWizard/OperatorsStep.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Stack, StackItem } from '@patternfly/react-core';
+import { Flex, FlexItem, SearchInput, Stack, StackItem } from '@patternfly/react-core';
 import { Bundle } from '@openshift-assisted/types/assisted-installer-service';
 import {
   ClusterOperatorProps,
@@ -19,6 +19,7 @@ export const OperatorsStep = ({ cluster }: ClusterOperatorProps) => {
   const [bundlesLoading, setBundlesLoading] = React.useState(true);
   const [bundles, setBundles] = React.useState<Bundle[]>([]);
   const { preflightRequirements, isLoading } = useClusterPreflightRequirements(cluster.id);
+  const [searchTerm, setSearchTerm] = React.useState('');
   React.useEffect(() => {
     const fetchBundles = async () => {
       try {
@@ -39,6 +40,12 @@ export const OperatorsStep = ({ cluster }: ClusterOperatorProps) => {
     void fetchBundles();
   }, [addAlert]);
 
+  const filteredBundles = bundles.filter(
+    (bundle) =>
+      bundle.title?.toLowerCase().includes(searchTerm.toLowerCase()) ||
+      bundle.description?.toLowerCase().includes(searchTerm.toLowerCase()),
+  );
+
   if (isLoading || bundlesLoading) {
     return <LoadingState />;
   }
@@ -46,16 +53,36 @@ export const OperatorsStep = ({ cluster }: ClusterOperatorProps) => {
   return (
     <Stack hasGutter data-testid={'operators-page'}>
       <StackItem>
-        <ClusterWizardStepHeader>Operators</ClusterWizardStepHeader>
+        <Flex
+          justifyContent={{ default: 'justifyContentSpaceBetween' }}
+          alignItems={{ default: 'alignItemsCenter' }}
+        >
+          <FlexItem>
+            <ClusterWizardStepHeader>Operators</ClusterWizardStepHeader>
+          </FlexItem>
+          <FlexItem style={{ minWidth: '300px' }}>
+            <SearchInput
+              placeholder={'Find bundles or operators'}
+              value={searchTerm}
+              onChange={(_e, value) => setSearchTerm(value)}
+              onClear={() => setSearchTerm('')}
+            />
+          </FlexItem>
+        </Flex>
       </StackItem>
       <StackItem>
-        <OperatorsBundle bundles={bundles} preflightRequirements={preflightRequirements} />
+        <OperatorsBundle
+          bundles={filteredBundles}
+          preflightRequirements={preflightRequirements}
+          searchTerm={searchTerm}
+        />
       </StackItem>
       <StackItem>
         <OperatorsSelect
           bundles={bundles}
           cluster={cluster}
           preflightRequirements={preflightRequirements}
+          searchTerm={searchTerm}
         />
       </StackItem>
     </Stack>

package/lib/ocm/components/clusterWizard/constants.ts

@@ -12,6 +12,8 @@ export const wizardStepNames: { [key in ClusterWizardStepsType]: string } = {
   'custom-manifests': 'Custom manifests',
   review: 'Review and create',
   'credentials-download': 'Download credentials',
+  'disconnected-review': 'Review and download ISO',
+  'disconnected-basic': 'Basic information',
 };
 
 export const defaultWizardSteps: ClusterWizardStepsType[] = [

package/lib/ocm/components/clusterWizard/disconnected/BasicStep.tsx

@@ -0,0 +1,81 @@
+import * as React from 'react';
+import {
+  ClusterWizardStep,
+  DeveloperPreview,
+  ExternalLink,
+  OCP_RELEASES_PAGE,
+  StaticTextField,
+  useTranslation,
+} from '../../../../common';
+import {
+  Split,
+  SplitItem,
+  TextContent,
+  Text,
+  TextVariants,
+  Grid,
+  GridItem,
+  Form,
+} from '@patternfly/react-core';
+import { Formik } from 'formik';
+import OcmOpenShiftVersion from '../../clusterConfiguration/OcmOpenShiftVersion';
+import { useClusterWizardContext } from '../ClusterWizardContext';
+import ClusterWizardFooter from '../ClusterWizardFooter';
+import ClusterWizardNavigation from '../ClusterWizardNavigation';
+import { WithErrorBoundary } from '../../../../common/components/ErrorHandling/WithErrorBoundary';
+import InstallDisconnectedSwitch from './InstallDisconnectedSwitch';
+
+const BasicStep = () => {
+  const { t } = useTranslation();
+  const { moveNext } = useClusterWizardContext();
+
+  return (
+    <Formik
+      initialValues={{}}
+      onSubmit={() => {
+        // nothing to do
+      }}
+    >
+      <ClusterWizardStep
+        navigation={<ClusterWizardNavigation />}
+        footer={<ClusterWizardFooter onNext={moveNext} />}
+      >
+        <WithErrorBoundary title="Failed to load Basic step">
+          <Grid hasGutter>
+            <GridItem>
+              <Split>
+                <SplitItem>
+                  <TextContent>
+                    <Text component={TextVariants.h2}>Basic information</Text>
+                  </TextContent>
+                </SplitItem>
+                <SplitItem>
+                  <DeveloperPreview />
+                </SplitItem>
+              </Split>
+            </GridItem>
+            <GridItem>
+              <InstallDisconnectedSwitch />
+            </GridItem>
+            <GridItem>
+              <Form id="wizard-cluster-basic-info__form">
+                <OcmOpenShiftVersion openshiftVersion="4.19" withPreviewText withMultiText>
+                  <ExternalLink href={`${window.location.origin}/${OCP_RELEASES_PAGE}`}>
+                    <span data-ouia-id="openshift-releases-link">
+                      {t('ai:Learn more about OpenShift releases')}
+                    </span>
+                  </ExternalLink>
+                </OcmOpenShiftVersion>
+                <StaticTextField name="cpuArchitecture" label="CPU architecture" isRequired>
+                  x86_64
+                </StaticTextField>
+              </Form>
+            </GridItem>
+          </Grid>
+        </WithErrorBoundary>
+      </ClusterWizardStep>
+    </Formik>
+  );
+};
+
+export default BasicStep;

package/lib/ocm/components/clusterWizard/disconnected/InstallDisconnectedSwitch.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { Switch, Tooltip } from '@patternfly/react-core';
+import { useClusterWizardContext } from '../ClusterWizardContext';
+import { useTranslation } from '../../../../common';
+
+const InstallDisconnectedSwitch = ({ isDisabled }: { isDisabled?: boolean }) => {
+  const { t } = useTranslation();
+  const { installDisconnected, setInstallDisconnected } = useClusterWizardContext();
+
+  const switchBtn = (
+    <Switch
+      id="disconnected-install-switch"
+      label={t("ai:I'm installing on a disconnected/air-gapped/secured environment")}
+      isChecked={installDisconnected}
+      onChange={(_, checked) => setInstallDisconnected(checked)}
+      ouiaId="DisconnectedInstall"
+      isDisabled={isDisabled}
+    />
+  );
+
+  return isDisabled ? (
+    <Tooltip
+      content={<div>{t('ai:This option is not editable after the draft cluster is created')}</div>}
+    >
+      {switchBtn}
+    </Tooltip>
+  ) : (
+    switchBtn
+  );
+};
+
+export default InstallDisconnectedSwitch;

package/lib/ocm/components/clusterWizard/disconnected/ReviewStep.tsx

@@ -0,0 +1,123 @@
+import * as React from 'react';
+import ClusterWizardFooter from '../ClusterWizardFooter';
+import { useClusterWizardContext } from '../ClusterWizardContext';
+import {
+  ClusterWizardStep,
+  DeveloperPreview,
+  PULL_SECRET_INFO_LINK,
+  singleClusterOperators,
+} from '../../../../common';
+import ClusterWizardNavigation from '../ClusterWizardNavigation';
+import { WithErrorBoundary } from '../../../../common/components/ErrorHandling/WithErrorBoundary';
+import {
+  Split,
+  SplitItem,
+  Alert,
+  Grid,
+  Text,
+  TextContent,
+  TextVariants,
+  DescriptionList,
+  DescriptionListGroup,
+  DescriptionListTerm,
+  DescriptionListDescription,
+  List,
+  ListItem,
+  ListComponent,
+  OrderType,
+} from '@patternfly/react-core';
+import { Formik } from 'formik';
+import { saveAs } from 'file-saver';
+import { useNavigate } from 'react-router-dom-v5-compat';
+
+import { getOperatorSpecs } from '../../../../common/components/operators/operatorSpecs';
+
+const downloadUrl =
+  'https://mirror.openshift.com/pub/cgw/assisted-installer-disconnected/latest/agent-ove.x86_64.iso';
+
+const ReviewStep = () => {
+  const { moveBack } = useClusterWizardContext();
+  const opSpecs = getOperatorSpecs(() => undefined);
+  const navigate = useNavigate();
+
+  return (
+    <Formik
+      initialValues={{}}
+      onSubmit={() => {
+        // nothing to do
+      }}
+    >
+      <ClusterWizardStep
+        navigation={<ClusterWizardNavigation />}
+        footer={
+          <ClusterWizardFooter
+            onNext={() => {
+              downloadUrl && saveAs(downloadUrl);
+              navigate('/cluster-list');
+            }}
+            onBack={moveBack}
+            nextButtonText="Download ISO"
+          />
+        }
+      >
+        <WithErrorBoundary title="Failed to load Review step">
+          <Grid hasGutter>
+            <Split>
+              <SplitItem>
+                <TextContent>
+                  <Text component={TextVariants.h2}>Review and download ISO</Text>
+                </TextContent>
+              </SplitItem>
+              <SplitItem>
+                <DeveloperPreview />
+              </SplitItem>
+            </Split>
+            <Alert isInline variant="info" title="Discovery ISO boot instructions">
+              <List component={ListComponent.ol} type={OrderType.number}>
+                <ListItem>Download ISO</ListItem>
+                <ListItem>
+                  Download or copy your pull secret from{' '}
+                  <a href={PULL_SECRET_INFO_LINK} target="_blank" rel="noopener noreferrer">
+                    here
+                  </a>
+                </ListItem>
+                <ListItem>
+                  Boot your cluster's machines from this ISO and follow instructions
+                </ListItem>
+                <ListItem>
+                  Provide your pull secret inside the installation wizard when requested
+                </ListItem>
+              </List>
+            </Alert>
+            <Alert isInline isExpandable variant="info" title="List of available operators">
+              <List>
+                {singleClusterOperators.map((o) => {
+                  const operator = Object.values(opSpecs)
+                    .flatMap((op) => op)
+                    .find((op) => op.operatorKey === o);
+                  return <ListItem key={o}>{operator ? operator.title : o}</ListItem>;
+                })}
+              </List>
+            </Alert>
+            <DescriptionList isHorizontal>
+              <DescriptionListGroup>
+                <DescriptionListTerm>OpenShift version</DescriptionListTerm>
+                <DescriptionListDescription>4.19</DescriptionListDescription>
+              </DescriptionListGroup>
+              <DescriptionListGroup>
+                <DescriptionListTerm>CPU architecture</DescriptionListTerm>
+                <DescriptionListDescription>x86_64</DescriptionListDescription>
+              </DescriptionListGroup>
+              <DescriptionListGroup>
+                <DescriptionListTerm>ISO size</DescriptionListTerm>
+                <DescriptionListDescription>approx. 35GB</DescriptionListDescription>
+              </DescriptionListGroup>
+            </DescriptionList>
+          </Grid>
+        </WithErrorBoundary>
+      </ClusterWizardStep>
+    </Formik>
+  );
+};
+
+export default ReviewStep;

package/lib/ocm/components/clusterWizard/wizardTransition.ts

@@ -29,7 +29,9 @@ export type ClusterWizardStepsType =
   | 'networking'
   | 'review'
   | 'custom-manifests'
-  | 'credentials-download';
+  | 'credentials-download'
+  | 'disconnected-basic'
+  | 'disconnected-review';
 
 const wizardStepsOrder: ClusterWizardStepsType[] = [
   'cluster-details',
@@ -45,6 +47,11 @@ const wizardStepsOrder: ClusterWizardStepsType[] = [
   'review',
 ];
 
+export const disconnectedSteps: ClusterWizardStepsType[] = [
+  'disconnected-basic',
+  'disconnected-review',
+];
+
 export const ClusterWizardFlowStateNew = 'new';
 export type ClusterWizardFlowStateType = Cluster['status'] | typeof ClusterWizardFlowStateNew;
 
@@ -191,7 +198,12 @@ const hostDiscoveryStepValidationsMap: WizardStepValidationMap = {
       'amd-gpu-requirements-satisfied',
     ],
   },
-  softValidationIds: ['no-skip-installation-disk', 'no-skip-missing-disk', 'compatible-agent'],
+  softValidationIds: [
+    'no-skip-installation-disk',
+    'no-skip-missing-disk',
+    'compatible-agent',
+    'openshift-ai-gpu-requirements-satisfied',
+  ],
 };
 
 const storageStepValidationsMap: WizardStepValidationMap = {
@@ -246,6 +258,8 @@ const reviewStepValidationsMap: WizardStepValidationMap = {
 const credentialsValidationMap = buildEmptyValidationsMap();
 
 const customManifestsValidationsMap = buildEmptyValidationsMap();
+const disconnectedReviewValidationsMap = buildEmptyValidationsMap();
+const disconnectedBasicValidationsMap = buildEmptyValidationsMap();
 
 export const wizardStepsValidationsMap: WizardStepsValidationMap<ClusterWizardStepsType> = {
   'cluster-details': clusterDetailsStepValidationsMap,
@@ -259,6 +273,8 @@ export const wizardStepsValidationsMap: WizardStepsValidationMap<ClusterWizardSt
   networking: networkingStepValidationsMap,
   review: reviewStepValidationsMap,
   'credentials-download': credentialsValidationMap,
+  'disconnected-review': disconnectedReviewValidationsMap,
+  'disconnected-basic': disconnectedBasicValidationsMap,
 };
 
 export const allClusterWizardSoftValidationIds =

package/lib/ocm/components/clusters/AssistedInstallerHeader.tsx

@@ -1,13 +1,21 @@
 import React from 'react';
 import { TextContent, Text, Split, SplitItem } from '@patternfly/react-core';
-import { ASSISTED_INSTALLER_DOCUMENTATION_LINK, ExternalLink, isInOcm } from '../../../common';
+import {
+  ASSISTED_INSTALLER_DOCUMENTATION_LINK,
+  DeveloperPreview,
+  ExternalLink,
+  isInOcm,
+} from '../../../common';
+import { useFeature } from '../../hooks/use-feature';
 
 export const AssistedInstallerHeader = () => {
+  const isSingleClusterFeatureEnabled = useFeature('ASSISTED_INSTALLER_SINGLE_CLUSTER_FEATURE');
   return (
     <TextContent>
       <Text component="h1" className="pf-v5-u-display-inline">
         Install OpenShift with the Assisted Installer
       </Text>
+      {isSingleClusterFeatureEnabled && <DeveloperPreview />}
       <Split hasGutter>
         <SplitItem>
           <ExternalLink href={ASSISTED_INSTALLER_DOCUMENTATION_LINK}>

package/lib/ocm/components/clusters/ClusterPage.tsx

@@ -205,6 +205,9 @@ export const SingleClusterPage = ({
   resetModal: React.ReactNode;
 }) => (
   <AlertsContextProvider>
+    <PageSection variant={PageSectionVariants.light}>
+      <AssistedInstallerHeader />
+    </PageSection>
     <ClusterPageGeneric clusterId={clusterId} resetModal={resetModal} />
   </AlertsContextProvider>
 );

package/lib/ocm/components/clusters/Clusters.tsx

@@ -17,6 +17,7 @@ import {
   EmptyState,
   useAlerts,
   AlertsContextProvider,
+  REDUCED_POLLING_INTERVAL,
 } from '../../../common';
 import ClustersTable from './ClustersTable';
 import { fetchClustersAsync, deleteCluster } from '../../store/slices/clusters/slice';
@@ -62,8 +63,17 @@ const Clusters = () => {
   );
 
   const fetchClusters = React.useCallback(() => void dispatch(fetchClustersAsync()), [dispatch]);
+
   React.useEffect(() => {
+    // Fetch immediately on mount
     fetchClusters();
+
+    // Set up polling for subsequent updates
+    const timer = setInterval(() => {
+      fetchClusters();
+    }, REDUCED_POLLING_INTERVAL);
+
+    return () => clearInterval(timer);
   }, [fetchClusters]);
 
   switch (uiState.current) {

package/lib/ocm/components/clusters/ClustersListToolbar.tsx

@@ -188,7 +188,7 @@ const ClustersListToolbar: React.FC<ClustersListToolbarProps> = ({
             isDisabled={clustersUIState === ResourceUIState.RELOADING}
           >
             <Tooltip content="Refresh">
-              <SyncIcon />
+              <SyncIcon data-testid="refresh-clusters-icon" />
             </Tooltip>
           </ToolbarButton>
         </ToolbarGroup>

package/lib/ocm/components/clusters/NewClusterPage.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import React from 'react';
 import { PageSectionVariants, PageSection } from '@patternfly/react-core';
 import { AlertsContextProvider } from '../../../common';
 import ClusterBreadcrumbs from './ClusterBreadcrumbs';
@@ -13,7 +13,7 @@ import { AssistedInstallerHeader } from './AssistedInstallerHeader';
 import { ModalDialogsContextProvider } from '../hosts/ModalDialogsContext';
 import { OpenShiftVersionsContextProvider } from '../clusterWizard/OpenShiftVersionsContext';
 
-const NewClusterPageGeneric = ({ pageTitleSection }: { pageTitleSection?: ReactNode }) => {
+const NewClusterPageGeneric = ({ children }: React.PropsWithChildren<unknown>) => {
   return (
     <AlertsContextProvider>
       <SentryErrorMonitorContextProvider>
@@ -24,7 +24,10 @@ const NewClusterPageGeneric = ({ pageTitleSection }: { pageTitleSection?: ReactN
           >
             <OpenShiftVersionsContextProvider>
               <NewFeatureSupportLevelProvider loadingUi={<ClusterLoading />}>
-                {pageTitleSection}
+                {children}
+                <PageSection variant={PageSectionVariants.light}>
+                  <AssistedInstallerHeader />
+                </PageSection>
                 <PageSection variant={PageSectionVariants.light} isFilled>
                   <ClusterWizardContextProvider>
                     <NewClusterWizard />
@@ -39,16 +42,9 @@ const NewClusterPageGeneric = ({ pageTitleSection }: { pageTitleSection?: ReactN
   );
 };
 
-const NewClusterTitleSection = () => (
-  <>
-    <ClusterBreadcrumbs clusterName="New cluster" />
-    <PageSection variant={PageSectionVariants.light}>
-      <AssistedInstallerHeader />
-    </PageSection>
-  </>
-);
-
 export const NewSingleClusterPage = () => <NewClusterPageGeneric />;
 export const NewClusterPage = () => (
-  <NewClusterPageGeneric pageTitleSection={<NewClusterTitleSection />} />
+  <NewClusterPageGeneric>
+    <ClusterBreadcrumbs clusterName="New cluster" />
+  </NewClusterPageGeneric>
 );

package/lib/ocm/components/clusters/clusterPolling.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ResourceUIState, POLLING_INTERVAL } from '../../../common';
+import { ResourceUIState, DEFAULT_POLLING_INTERVAL } from '../../../common';
 import {
   fetchClusterAsync,
   cleanCluster,
@@ -53,7 +53,7 @@ export const useClusterPolling = (
 
   React.useEffect(() => {
     fetchCluster();
-    const timer = window.setInterval(() => dispatch(forceReload()), POLLING_INTERVAL);
+    const timer = window.setInterval(() => dispatch(forceReload()), DEFAULT_POLLING_INTERVAL);
     return () => {
       clearInterval(timer);
       dispatch(cancelForceReload());

package/lib/ocm/components/featureSupportLevels/featureStateUtils.ts

@@ -4,11 +4,6 @@ import {
   CpuArchitecture,
   FeatureId,
   isSNO,
-  OPERATOR_NAME_CNV,
-  OPERATOR_NAME_LVM,
-  OPERATOR_NAME_ODF,
-  OPERATOR_NAME_OPENSHIFT_AI,
-  OPERATOR_NAME_OSC,
   SupportedCpuArchitecture,
 } from '../../../common';
 import {
@@ -17,7 +12,7 @@ import {
   SupportLevel,
 } from '@openshift-assisted/types/assisted-installer-service';
 import { ExternalPlatformLabels } from '../clusterConfiguration/platformIntegration/constants';
-import { getOperatorSpecs } from '../../../common/components/operators/operatorSpecs';
+import { getOperatorTitleByFeatureId } from '../../../common/components/operators/operatorSpecs';
 
 export const clusterExistsReason = 'This option is not editable after the draft cluster is created';
 
@@ -46,10 +41,7 @@ const getOdfDisabledReason = (
     return undefined;
   }
 
-  const opSpecs = getOperatorSpecs();
-
-  const operatorTitle = opSpecs[OPERATOR_NAME_ODF]?.title || '';
-
+  const operatorTitle = getOperatorTitleByFeatureId('ODF') || '';
   const isArm = activeFeatureConfiguration?.underlyingCpuArchitecture === CpuArchitecture.ARM;
   if (isArm && isSNO(cluster)) {
     return `${operatorTitle} is not available when using Single Node OpenShift or ARM CPU architecture.`;
@@ -75,8 +67,8 @@ const getCnvDisabledReason = (
     return undefined;
   }
 
-  const opSpecs = getOperatorSpecs();
-  const operatorTitle = opSpecs[OPERATOR_NAME_CNV]?.title || '';
+  const operatorTitle = getOperatorTitleByFeatureId('CNV') || '';
+
   if (platformType === 'nutanix') {
     return `${operatorTitle} is not available when Nutanix platform type is selected.`;
   }
@@ -105,8 +97,7 @@ const getLvmDisabledReason = (
     return undefined;
   }
 
-  const opSpecs = getOperatorSpecs();
-  const operatorTitle = opSpecs[OPERATOR_NAME_LVM]?.title;
+  const operatorTitle = getOperatorTitleByFeatureId('LVM') || '';
   if (platformType === 'nutanix') {
     return `${operatorTitle} is not supported when Nutanix platform type is selected.`;
   }
@@ -125,8 +116,7 @@ const getOscDisabledReason = (
     return undefined;
   }
 
-  const opSpecs = getOperatorSpecs();
-  const operatorTitle = opSpecs[OPERATOR_NAME_OSC]?.title || '';
+  const operatorTitle = getOperatorTitleByFeatureId('OSC') || '';
   if (!isSupported) {
     return `${operatorTitle} is not supported in this OpenShift version.`;
   }
@@ -299,8 +289,7 @@ const getOpenShiftAIDisabledReason = (
     return undefined;
   }
 
-  const opSpecs = getOperatorSpecs();
-  const operatorTitle = opSpecs[OPERATOR_NAME_OPENSHIFT_AI]?.title || '';
+  const operatorTitle = getOperatorTitleByFeatureId('OPENSHIFT_AI') || '';
   const isArm = activeFeatureConfiguration?.underlyingCpuArchitecture === CpuArchitecture.ARM;
   if (isArm) {
     return `${operatorTitle} is not available when ARM CPU architecture is selected.`;

package/lib/ocm/components/hosts/use-hosts-table.tsx

@@ -60,8 +60,10 @@ import {
   selectCurrentClusterPermissionsState,
   selectCurrentClusterState,
 } from '../../store/slices/current-cluster/selectors';
+import { useFeature } from '../../hooks/use-feature';
 
 export const useHostsTable = (cluster: Cluster) => {
+  const isSingleClusterFeatureEnabled = useFeature('ASSISTED_INSTALLER_SINGLE_CLUSTER_FEATURE');
   const { addAlert } = useAlerts();
   const {
     eventsDialog,
@@ -248,8 +250,12 @@ export const useHostsTable = (cluster: Cluster) => {
 
   const actionChecks = React.useMemo(
     () => ({
-      canEditRole: (host: Host) =>
-        !isViewerMode && canEditRoleUtil(cluster.status, host.status, isSNO(cluster)),
+      canEditRole: (host: Host) => {
+        if (isSingleClusterFeatureEnabled && host.bootstrap) {
+          return false;
+        }
+        return !isViewerMode && canEditRoleUtil(cluster.status, host.status, isSNO(cluster));
+      },
       canInstallHost: (host: Host) => !isViewerMode && canInstallHostUtil(cluster, host.status),
       canEditDisks: (host: Host) => !isViewerMode && canEditDisksUtil(cluster.status, host.status),
       canEnable: (host: Host) => !isViewerMode && canEnableUtil(cluster.status, host.status),
@@ -257,9 +263,9 @@ export const useHostsTable = (cluster: Cluster) => {
       canDelete: (host: Host) => !isViewerMode && canDeleteUtil(cluster.status, host.status),
       canEditHost: (host: Host) => !isViewerMode && canEditHostUtil(cluster.status, host.status),
       canReset: (host: Host) => !isViewerMode && canResetUtil(cluster.status, host.status),
-      canEditHostname: () => !isViewerMode && canEditHostnameUtil(cluster.status),
+      canEditHostname: (host?: Host) => !isViewerMode && canEditHostnameUtil(cluster.status, host),
     }),
-    [cluster, isViewerMode],
+    [cluster, isViewerMode, isSingleClusterFeatureEnabled],
   );
 
   const onReset = React.useCallback(() => {
@@ -320,7 +326,14 @@ export const useHostsTable = (cluster: Cluster) => {
           throw new Error(`Failed to edit role in host: ${host.id}.\nMissing cluster_id`);
         }
         const { data } = await HostsService.updateRole(host, role);
-        resetCluster ? void resetCluster() : dispatch(updateHost(data));
+
+        if (resetCluster) {
+          void resetCluster();
+        } else {
+          dispatch(updateHost(data));
+          // Reload to obtain cluster-level validations that may be affected by role change
+          dispatch(forceReload());
+        }
       } catch (e) {
         handleApiError(e, () =>
           addAlert({ title: 'Failed to set role', message: getApiErrorMessage(e) }),

package/lib/ocm/services/DiskEncryptionService.ts

@@ -8,9 +8,14 @@ const DiskEncryptionService = {
   diskEncryptionEnableOn(
     isEnableOnMasters: boolean,
     isEnableOnWorkers: boolean,
+    isEnableOnArbiters: boolean,
   ): DiskEncryption['enableOn'] {
     let enableOnParam: DiskEncryption['enableOn'];
-    if (isEnableOnMasters && isEnableOnWorkers) enableOnParam = 'all';
+    if (isEnableOnMasters && isEnableOnWorkers && isEnableOnArbiters) enableOnParam = 'all';
+    else if (isEnableOnMasters && isEnableOnWorkers) enableOnParam = 'masters,workers';
+    else if (isEnableOnMasters && isEnableOnArbiters) enableOnParam = 'masters,arbiters';
+    else if (isEnableOnWorkers && isEnableOnArbiters) enableOnParam = 'arbiters,workers';
+    else if (isEnableOnArbiters) enableOnParam = 'arbiters';
     else if (isEnableOnWorkers) enableOnParam = 'workers';
     else if (isEnableOnMasters) enableOnParam = 'masters';
     else enableOnParam = 'none';
@@ -21,13 +26,14 @@ const DiskEncryptionService = {
     return {
       mode: values.diskEncryptionMode,
       enableOn:
-        values.highAvailabilityMode === 'None'
+        values.controlPlaneCount === 1
           ? values.enableDiskEncryptionOnMasters
             ? 'all'
             : 'none'
           : DiskEncryptionService.diskEncryptionEnableOn(
               values.enableDiskEncryptionOnMasters,
               values.enableDiskEncryptionOnWorkers,
+              values.enableDiskEncryptionOnArbiters,
             ),
       tangServers:
         values.diskEncryptionMode === 'tang'

package/lib/ocm/store/slices/current-cluster/selectors.ts

@@ -5,7 +5,7 @@ export const selectCurrentClusterState = (state: RootStateDay1) => state.current
 export const selectCurrentCluster = (state: RootStateDay1) => state.currentCluster.data;
 export const selectCurrentClusterUIState = (state: RootStateDay1) => state.currentCluster.uiState;
 export const selectIsCurrentClusterSNO = (state: RootStateDay1) =>
-  state.currentCluster.data?.highAvailabilityMode === 'None';
+  state.currentCluster.data?.controlPlaneCount === 1;
 export const selectCurrentClusterPermissionsState = (
   state: RootStateDay1,
 ): AssistedInstallerPermissionTypesListType => {