MGMT-21584: Disable disconnected switch in cluster edit

libs/locales/lib/en/translation.json

@@ -414,6 +414,7 @@
   "ai:HTTPS proxy URL": "HTTPS proxy URL",
   "ai:HTTPS Proxy URL": "HTTPS Proxy URL",
   "ai:I understand that I need to download credentials files prior of proceeding with the cluster installation.": "I understand that I need to download credentials files prior of proceeding with the cluster installation.",
+  "ai:I'm installing on a disconnected/air-gapped/secured environment": "I'm installing on a disconnected/air-gapped/secured environment",
   "ai:If hosts are behind a firewall that requires the use of a proxy, provide additional information about the proxy.": "If hosts are behind a firewall that requires the use of a proxy, provide additional information about the proxy.",
   "ai:If not, please start your VMs with the following configuration:": "If not, start your VMs with the following configuration:",
   "ai:If the cluster hosts are in a network with a re-encrypting (MITM) proxy or the cluster needs to trust certificates for other purposes (e.g. container image registries).": "If the cluster hosts are in a network with a re-encrypting (MITM) proxy or the cluster needs to trust certificates for other purposes (e.g. container image registries).",

libs/ui-lib/lib/ocm/components/clusterWizard/ClusterDetailsForm.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
 import { useLocation } from 'react-router-dom-v5-compat';
-import { Grid, GridItem, Switch } from '@patternfly/react-core';
+import { Grid, GridItem } from '@patternfly/react-core';
 import isUndefined from 'lodash-es/isUndefined.js';
 import { Formik, FormikHelpers } from 'formik';
 import {
@@ -32,6 +32,7 @@ import {
   ManagedDomain,
 } from '@openshift-assisted/types/assisted-installer-service';
 import { useFeature } from '../../hooks/use-feature';
+import InstallDisconnectedSwitch from './disconnected/InstallDisconnectedSwitch';
 
 type ClusterDetailsFormProps = {
   cluster?: Cluster;
@@ -62,8 +63,7 @@ const ClusterDetailsForm = (props: ClusterDetailsFormProps) => {
     navigation,
   } = props;
 
-  const { installDisconnected, setInstallDisconnected, customManifestsStep, moveNext } =
-    useClusterWizardContext();
+  const { customManifestsStep, moveNext } = useClusterWizardContext();
   const { search } = useLocation();
   const { isViewerMode } = useSelector(selectCurrentClusterPermissionsState);
   const { clearAlerts } = useAlerts();
@@ -166,13 +166,7 @@ const ClusterDetailsForm = (props: ClusterDetailsFormProps) => {
               </GridItem>
               {!isSingleClusterFeatureEnabled && (
                 <GridItem>
-                  <Switch
-                    id="disconnected-install-switch"
-                    label="I'm installing on a disconnected/air-gapped/secured environment"
-                    isChecked={installDisconnected}
-                    onChange={(_, checked) => setInstallDisconnected(checked)}
-                    ouiaId="DisconnectedInstall"
-                  />
+                  <InstallDisconnectedSwitch isDisabled={!!cluster} />
                 </GridItem>
               )}
               <GridItem span={12} lg={10} xl={9} xl2={7}>

libs/ui-lib/lib/ocm/components/clusterWizard/disconnected/BasicStep.tsx

@@ -8,7 +8,6 @@ import {
   useTranslation,
 } from '../../../../common';
 import {
-  Switch,
   Split,
   SplitItem,
   TextContent,
@@ -24,10 +23,11 @@ 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 { installDisconnected, setInstallDisconnected, moveNext } = useClusterWizardContext();
+  const { moveNext } = useClusterWizardContext();
 
   return (
     <Formik
@@ -55,13 +55,7 @@ const BasicStep = () => {
               </Split>
             </GridItem>
             <GridItem>
-              <Switch
-                id="disconnected-install-switch"
-                label="I'm installing on a disconnected/air-gapped/secured environment"
-                isChecked={installDisconnected}
-                onChange={(_, checked) => setInstallDisconnected(checked)}
-                ouiaId="DisconnectedInstall"
-              />
+              <InstallDisconnectedSwitch />
             </GridItem>
             <GridItem>
               <Form id="wizard-cluster-basic-info__form">

libs/ui-lib/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;