diff --git a/src/utils/components/ExpandSectionWithSwitch/ExpandSectionWithSwitch.scss b/src/utils/components/ExpandSectionWithSwitch/ExpandSectionWithSwitch.scss new file mode 100644 index 0000000000..233aa58359 --- /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 0000000000..9d10bece58 --- /dev/null +++ b/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) => void; +}; + +const ExpandSectionWithSwitch: FC = ({ + children, + helpTextIconContent, + isDisabled, + switchIsOn, + toggleContent, + toggleText, + turnOnSwitch, +}) => { + return ( + + + +
{children}
+
+
+ {helpTextIconContent && ( + + + + )} + + + +
+ ); +}; + +export default ExpandSectionWithSwitch; diff --git a/src/views/clusteroverview/SettingsTab/ClusterTab/components/AutomaticSubscriptionRHELGuests/AutomaticSubscriptionRHELGuests.tsx b/src/views/clusteroverview/SettingsTab/ClusterTab/components/AutomaticSubscriptionRHELGuests/AutomaticSubscriptionRHELGuests.tsx index 4e48cf43ba..7276628434 100644 --- a/src/views/clusteroverview/SettingsTab/ClusterTab/components/AutomaticSubscriptionRHELGuests/AutomaticSubscriptionRHELGuests.tsx +++ b/src/views/clusteroverview/SettingsTab/ClusterTab/components/AutomaticSubscriptionRHELGuests/AutomaticSubscriptionRHELGuests.tsx @@ -12,7 +12,7 @@ const AutomaticSubscriptionRHELGuests: FC = () => { const { t } = useKubevirtTranslation(); return ( - + { const { t } = useKubevirtTranslation(); return ( - + { } + isIndented > diff --git a/src/views/clusteroverview/SettingsTab/ClusterTab/components/LiveMigrationSection/LiveMigrationSection.tsx b/src/views/clusteroverview/SettingsTab/ClusterTab/components/LiveMigrationSection/LiveMigrationSection.tsx index a340eab45d..7a696d12aa 100644 --- a/src/views/clusteroverview/SettingsTab/ClusterTab/components/LiveMigrationSection/LiveMigrationSection.tsx +++ b/src/views/clusteroverview/SettingsTab/ClusterTab/components/LiveMigrationSection/LiveMigrationSection.tsx @@ -16,7 +16,7 @@ const LiveMigrationSection: FC = () => { const [hyperConverge, , hyperConvergeDataError] = useHyperConvergeConfiguration(); return ( - + {hyperConvergeDataError && ( diff --git a/src/views/clusteroverview/SettingsTab/ClusterTab/components/TemplatesProjectSection/TemplatesProjectSection.tsx b/src/views/clusteroverview/SettingsTab/ClusterTab/components/TemplatesProjectSection/TemplatesProjectSection.tsx index 53969ad310..ead7d175ba 100644 --- a/src/views/clusteroverview/SettingsTab/ClusterTab/components/TemplatesProjectSection/TemplatesProjectSection.tsx +++ b/src/views/clusteroverview/SettingsTab/ClusterTab/components/TemplatesProjectSection/TemplatesProjectSection.tsx @@ -78,7 +78,11 @@ const TemplatesProjectSection: FC = () => { }; return ( - + Select a project for Red Hat templates. The default project is 'openshift'. If diff --git a/src/views/clusteroverview/SettingsTab/ExpandSection/ExpandSection.scss b/src/views/clusteroverview/SettingsTab/ExpandSection/ExpandSection.scss new file mode 100644 index 0000000000..b5baf0f27e --- /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) !important; +} diff --git a/src/views/clusteroverview/SettingsTab/ExpandSection/ExpandSection.tsx b/src/views/clusteroverview/SettingsTab/ExpandSection/ExpandSection.tsx index 8c15eb39ee..1541aca471 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 = 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 (