Add ExpandSectionWithSwitch

src/utils/components/ExpandSectionWithSwitch/ExpandSectionWithSwitch.scss

@@ -0,0 +1,32 @@
+.expand-section-with-switch {
+  &__contents {
+    padding-left: var(--pf-global--spacer--lg);
+  }
+
+  &__help-text-popover {
+    .pf-c-popover__content {
+      width: 400px;
+    }
+  }
+
+  // Firefox
+  @-moz-document url-prefix() {
+    &__help-icon,
+    .pf-c-switch {
+      vertical-align: -moz-middle-with-baseline !important;
+    }
+  }
+
+  // Chrome
+  @media screen and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) {
+    &__help-icon,
+    .pf-c-switch {
+      vertical-align: -webkit-baseline-middle !important;
+    }
+  }
+
+  &__help-icon {
+    color: var(--pf-global--Color--100);
+    margin-left: calc(-1 * var(--pf-global--spacer--sm));
+  }
+}

src/utils/components/ExpandSectionWithSwitch/ExpandSectionWithSwitch.tsx

@@ -0,0 +1,58 @@
+import React, { FC, FormEvent, ReactNode } from 'react';
+
+import HelpTextIcon from '@kubevirt-utils/components/HelpTextIcon/HelpTextIcon';
+import { PopoverPosition, Split, SplitItem, Switch } from '@patternfly/react-core';
+
+import ExpandSection from '../../../views/clusteroverview/SettingsTab/ExpandSection/ExpandSection';
+
+import './ExpandSectionWithSwitch.scss';
+
+type ExpandSectionWithSwitchProps = {
+  children: ReactNode;
+  helpTextIconContent?: ReactNode;
+  isDisabled?: boolean;
+  switchIsOn: boolean;
+  toggleContent?: ReactNode;
+  toggleText?: string;
+  turnOnSwitch: (checked: boolean, event: FormEvent<HTMLInputElement>) => void;
+};
+
+const ExpandSectionWithSwitch: FC<ExpandSectionWithSwitchProps> = ({
+  children,
+  helpTextIconContent,
+  isDisabled,
+  switchIsOn,
+  toggleContent,
+  toggleText,
+  turnOnSwitch,
+}) => {
+  return (
+    <Split className="expand-section-with-switch">
+      <SplitItem>
+        <ExpandSection
+          isDisabled={isDisabled}
+          isIndented
+          toggleContent={toggleContent}
+          toggleText={toggleText}
+        >
+          <div className="expand-section-with-switch__contents">{children}</div>
+        </ExpandSection>
+      </SplitItem>
+      {helpTextIconContent && (
+        <SplitItem isFilled>
+          <HelpTextIcon
+            bodyContent={helpTextIconContent}
+            className="expand-section-with-switch__help-text-popover"
+            helpIconClassName="expand-section-with-switch__help-icon"
+            position={PopoverPosition.right}
+          />
+        </SplitItem>
+      )}
+      <SplitItem>
+        <Switch isChecked={switchIsOn} isDisabled={isDisabled} onChange={turnOnSwitch} />
+      </SplitItem>
+    </Split>
+  );
+};
+
+export default ExpandSectionWithSwitch;

src/views/clusteroverview/SettingsTab/ClusterTab/components/AutomaticSubscriptionRHELGuests/AutomaticSubscriptionRHELGuests.tsx

@@ -12,7 +12,7 @@ const AutomaticSubscriptionRHELGuests: FC = () => {
   const { t } = useKubevirtTranslation();
 
   return (
-    <ExpandSection toggleText={t('Automatic subscription of new RHEL VirtualMachines')}>
+    <ExpandSection isIndented toggleText={t('Automatic subscription of new RHEL VirtualMachines')}>
       <Stack>
         <MutedTextSpan
           text={t('Enable automatic subscription for Red Hat Enterprise Linux VirtualMachines.\n')}

src/views/clusteroverview/SettingsTab/ClusterTab/components/EnableLoadBalancerSection/EnableLoadBalancerSection.tsx

@@ -10,7 +10,7 @@ const EnableLoadBalancerSection: FC = () => {
   const { t } = useKubevirtTranslation();
 
   return (
-    <ExpandSection toggleText={t('LoadBalancer service')}>
+    <ExpandSection isIndented toggleText={t('LoadBalancer service')}>
       <EnableFeatureCheckbox
         label={t(
           'Enable the creation of LoadBalancer services for SSH connections to VirtualMachines',

src/views/clusteroverview/SettingsTab/ClusterTab/components/EnablePreviewFeaturesSection/EnablePreviewFeaturesSection.tsx

@@ -27,6 +27,7 @@ const EnablePreviewFeaturesSection: FC = () => {
           <PreviewFeaturesPopover />
         </>
       }
+      isIndented
     >
       <Stack hasGutter>
         <StackItem isFilled>

src/views/clusteroverview/SettingsTab/ClusterTab/components/LiveMigrationSection/LiveMigrationSection.tsx

@@ -16,7 +16,7 @@ const LiveMigrationSection: FC = () => {
   const [hyperConverge, , hyperConvergeDataError] = useHyperConvergeConfiguration();
 
   return (
-    <ExpandSection className="live-migration-tab" toggleText={t('Live migration')}>
+    <ExpandSection className="live-migration-tab" isIndented toggleText={t('Live migration')}>
       <Limits hyperConverge={hyperConverge} />
       <Network hyperConverge={hyperConverge} />
       {hyperConvergeDataError && (

src/views/clusteroverview/SettingsTab/ClusterTab/components/TemplatesProjectSection/TemplatesProjectSection.tsx

@@ -78,7 +78,11 @@ const TemplatesProjectSection: FC = () => {
   };
 
   return (
-    <ExpandSection className="templates-project-tab__main" toggleText={t('Template project')}>
+    <ExpandSection
+      className="templates-project-tab__main"
+      isIndented
+      toggleText={t('Template project')}
+    >
       <Text className="templates-project-tab__main--help" component={TextVariants.small}>
         <Trans ns="plugin__kubevirt-plugin" t={t}>
           Select a project for Red Hat templates. The default project is &apos;openshift&apos;. If

src/views/clusteroverview/SettingsTab/ExpandSection/ExpandSection.scss

@@ -0,0 +1,3 @@
+.expand-section__disabled .pf-c-expandable-section__toggle-icon {
+  color: var(--pf-global--disabled-color--100) !important;
+}

src/views/clusteroverview/SettingsTab/ExpandSection/ExpandSection.tsx

@@ -1,26 +1,40 @@
-import React, { FC, ReactNode, useState } from 'react';
+import React, { FC, ReactNode, useEffect, useState } from 'react';
+import classNames from 'classnames';
 
 import { ExpandableSection } from '@patternfly/react-core';
 
+import './ExpandSection.scss';
+
 type ExpandSectionProps = {
   className?: string;
+  isDisabled?: boolean;
+  isIndented?: boolean;
   toggleContent?: ReactNode;
   toggleText?: string;
 };
 
 const ExpandSection: FC<ExpandSectionProps> = ({
   children,
   className,
+  isDisabled = false,
+  isIndented = false,
   toggleContent = null,
   toggleText = '',
 }) => {
   const [isExpanded, setIsExpanded] = useState(false);
 
+  useEffect(() => {
+    if (isDisabled) setIsExpanded(false);
+  }, [isDisabled, setIsExpanded]);
+
+  const handleToggle = (expanded: boolean) => (isDisabled ? null : setIsExpanded(expanded));
+
   return (
     <ExpandableSection
-      className={className}
+      className={classNames(className, { 'expand-section__disabled': isDisabled })}
       isExpanded={isExpanded}
-      onToggle={setIsExpanded}
+      isIndented={isIndented}
+      onToggle={handleToggle}
       toggleContent={toggleContent}
       toggleText={toggleText}
     >