diff --git a/src/utils/components/ExpandSectionWithSwitch/ExpandSectionWithSwitch.scss b/src/utils/components/ExpandSectionWithSwitch/ExpandSectionWithSwitch.scss new file mode 100644 index 000000000..233aa5835 --- /dev/null +++ b/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)); + } +} diff --git a/src/utils/components/ExpandSectionWithSwitch/ExpandSectionWithSwitch.tsx b/src/utils/components/ExpandSectionWithSwitch/ExpandSectionWithSwitch.tsx new file mode 100644 index 000000000..fbd6e40d3 --- /dev/null +++ b/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) => void; +}; + +const ExpandSectionWithSwitch: FC = ({ + children, + helpTextIconContent, + isDisabled, + switchIsOn, + toggleContent, + toggleText, + turnOnSwitch, +}) => ( + + + +
{children}
+
+
+ {helpTextIconContent && ( + + + + )} + + + +
+); + +export default ExpandSectionWithSwitch; diff --git a/src/views/clusteroverview/SettingsTab/ExpandSection/ExpandSection.scss b/src/views/clusteroverview/SettingsTab/ExpandSection/ExpandSection.scss new file mode 100644 index 000000000..e526d479f --- /dev/null +++ b/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); +} diff --git a/src/views/clusteroverview/SettingsTab/ExpandSection/ExpandSection.tsx b/src/views/clusteroverview/SettingsTab/ExpandSection/ExpandSection.tsx index 8c15eb39e..a7c33df6a 100644 --- a/src/views/clusteroverview/SettingsTab/ExpandSection/ExpandSection.tsx +++ b/src/views/clusteroverview/SettingsTab/ExpandSection/ExpandSection.tsx @@ -1,9 +1,14 @@ -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; }; @@ -11,16 +16,25 @@ type ExpandSectionProps = { const ExpandSection: FC = ({ 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 (