Merge pull request #1583 from pcbailey/expand-section-with-switch

Add ExpandSectionWithSwitch component

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,51 @@
+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,
+}) => (
+  <Split className="expand-section-with-switch">
+    <SplitItem>
+      <ExpandSection isDisabled={isDisabled} 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/ExpandSection/ExpandSection.scss

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

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 = true,
   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}
     >