diff --git a/frontend/src/component/common/DialogFormTemplate/ConfigButtons/ToggleConfigButton.tsx b/frontend/src/component/common/DialogFormTemplate/ConfigButtons/ToggleConfigButton.tsx new file mode 100644 index 0000000000..8c0f624ef8 --- /dev/null +++ b/frontend/src/component/common/DialogFormTemplate/ConfigButtons/ToggleConfigButton.tsx @@ -0,0 +1,51 @@ +import { ButtonLabel, StyledTooltipContent } from './ConfigButton.styles'; +import { TooltipResolver } from 'component/common/TooltipResolver/TooltipResolver'; +import { Button } from '@mui/material'; +import type { ReactNode } from 'react'; + +type ToggleConfigButtonProps = { + onClick: () => void; + currentValue: boolean; + label: string; + icon: ReactNode; + labelWidth?: string; + tooltip: { + header: string; + description: string; + additionalContent?: ReactNode; + }; +}; + +export function ToggleConfigButton({ + onClick, + currentValue, + label, + icon, + labelWidth, + tooltip, +}: ToggleConfigButtonProps) { + return ( + +

{tooltip.header}

+

{tooltip.description}

+ {tooltip.additionalContent} + + } + variant='custom' + > + +
+ ); +} diff --git a/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureTogglesHeader/CreateFeatureDialog.tsx b/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureTogglesHeader/CreateFeatureDialog.tsx index 65a396f0f0..813d5fe657 100644 --- a/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureTogglesHeader/CreateFeatureDialog.tsx +++ b/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureTogglesHeader/CreateFeatureDialog.tsx @@ -36,6 +36,7 @@ import Label from '@mui/icons-material/Label'; import { ProjectIcon } from 'component/common/ProjectIcon/ProjectIcon'; import { MultiSelectConfigButton } from 'component/common/DialogFormTemplate/ConfigButtons/MultiSelectConfigButton'; import type { ITag } from 'interfaces/tags'; +import { ToggleConfigButton } from 'component/common/DialogFormTemplate/ConfigButtons/ToggleConfigButton'; interface ICreateFeatureDialogProps { open: boolean; @@ -335,35 +336,19 @@ export const CreateFeatureDialog = ({ onClose={clearDocumentationOverride} /> - + + setImpressionData(!impressionData) } - options={[ - { label: 'On', value: true }, - { label: 'Off', value: false }, - ]} - onChange={(value: boolean) => { - setImpressionData(value); - }} - button={{ - label: `Impression data ${impressionData ? 'on' : 'off'}`, - icon: , - labelWidth: `${'impression data off'.length}ch`, - }} - search={{ - label: 'Filter impression data states', - placeholder: 'Select impression data state', - }} - onOpen={() => - setDocumentation( - configButtonData.impressionData, - ) - } - onClose={clearDocumentationOverride} + label={`Impression data ${impressionData ? 'on' : 'off'}`} + icon={} + labelWidth={`${'impression data off'.length}ch`} /> }