Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-02-04 00:18:01 +01:00
Code Issues Projects Releases Wiki Activity

feat: Use a toggling button for impression data on/off (#7682)

Browse Source 
Instead of using a dropdown list for impression data, this PR introduces
a new config button that is a switch type button. It will be filled
(contained) when impression data is on and will be outlined when
impression data is off.

Off:

![image](https://github.com/user-attachments/assets/4710c8aa-a853-43c3-bf3b-86dbbf1a2779)


On:

![image](https://github.com/user-attachments/assets/08316155-83d1-45a2-941f-1c49c254a02b)
This commit is contained in:
Thomas Heartman 2024-07-29 10:05:35 +02:00 committed by GitHub
parent 1f2d47bd91
commit 3a3aaad37d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 61 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
frontend/src/component/common/DialogFormTemplate/ConfigButtons/ToggleConfigButton.tsx Normal file
View File

@ -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 (
<TooltipResolver
titleComponent={
<StyledTooltipContent>
<h3>{tooltip.header}</h3>
<p>{tooltip.description}</p>
{tooltip.additionalContent}
</StyledTooltipContent>
}
variant='custom'
>
<Button
aria-role='switch'
aria-checked={currentValue}
variant={currentValue ? 'contained' : 'outlined'}
color='primary'
startIcon={icon}
onClick={onClick}
disableElevation={true}
>
<ButtonLabel labelWidth={labelWidth}>{label}</ButtonLabel>
</Button>
</TooltipResolver>
);
}

35
frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureTogglesHeader/CreateFeatureDialog.tsx
View File

@ -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}
/>
<SingleSelectConfigButton<boolean>
<ToggleConfigButton
tooltip={{
header: 'Enable or disable impression data',
description:
configButtonData.impressionData.text,
}}
description={
configButtonData.impressionData.text
currentValue={impressionData}
onClick={() =>
setImpressionData(!impressionData)
}
options={[
{ label: 'On', value: true },
{ label: 'Off', value: false },
]}
onChange={(value: boolean) => {
setImpressionData(value);
}}
button={{
label: `Impression data ${impressionData ? 'on' : 'off'}`,
icon: <ImpressionDataIcon />,
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={<ImpressionDataIcon />}
labelWidth={`${'impression data off'.length}ch`}
/>
</>
}