From 3a3aaad37d5ad1dc202451990c6951641af561ef Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Mon, 29 Jul 2024 10:05:35 +0200
Subject: [PATCH] feat: Use a toggling button for impression data on/off
 (#7682)

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)
---
 .../ConfigButtons/ToggleConfigButton.tsx      | 51 +++++++++++++++++++
 .../CreateFeatureDialog.tsx                   | 35 ++++---------
 2 files changed, 61 insertions(+), 25 deletions(-)
 create mode 100644 frontend/src/component/common/DialogFormTemplate/ConfigButtons/ToggleConfigButton.tsx

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 (
+        <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>
+    );
+}
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}
                             />
 
-                            <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`}
                             />
                         </>
                     }