Addition of confirmation dialog for button events

src/components/panes/configure-panes/custom/custom-control.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import {useSelector} from 'react-redux';
 import {PelpiKeycodeInput} from '../../../inputs/pelpi/keycode-input';
 import {AccentButton} from '../../../inputs/accent-button';
 import {AccentSlider} from '../../../inputs/accent-slider';
@@ -10,6 +11,7 @@ import type {LightingData} from '../../../../types/types';
 import {ArrayColorPicker} from '../../../inputs/color-picker';
 import {ConnectedColorPalettePicker} from 'src/components/inputs/color-palette-picker';
 import {shiftFrom16Bit, shiftTo16Bit} from 'src/utils/keyboard-api';
+import {getAskConfirmationButton} from 'src/store/settingsSlice';
 
 type Props = {
   lightingData: LightingData;
@@ -28,29 +30,35 @@ type ControlMeta = [
 type AdvancedControlProps = Props & {meta: ControlMeta};
 
 export const VIACustomItem = React.memo(
-  (props: VIACustomControlProps & {_id: string}) => (
-    <ControlRow id={props._id}>
-      <Label>{props.label}</Label>
-      <Detail>
-        {'type' in props ? (
-          <VIACustomControl
-            {...props}
-            value={props.value && Array.from(props.value)}
-          />
-        ) : (
-          props.content
-        )}
-      </Detail>
-    </ControlRow>
-  ),
+  (props: VIACustomControlProps & {_id: string}) => {
+    const showAskConfirmationButton = useSelector(getAskConfirmationButton);
+
+    return (
+      <ControlRow id={props._id}>
+        <Label>{props.label}</Label>
+        <Detail>
+          {'type' in props ? (
+            <VIACustomControl
+              {...props}
+              value={props.value && Array.from(props.value)}
+              showAskConfirmationButton={showAskConfirmationButton}
+            />
+          ) : (
+            props.content
+          )}
+        </Detail>
+      </ControlRow>
+    );
+  },
 );
 
 type ControlGetSet = {
   value: number[];
   updateValue: (name: string, ...command: number[]) => void;
 };
 
-type VIACustomControlProps = VIAItem & ControlGetSet;
+type VIACustomControlProps = VIAItem &
+  ControlGetSet & {label: string; showAskConfirmationButton: boolean};
 
 const boxOrArr = <N extends any>(elem: N | N[]) =>
   Array.isArray(elem) ? elem : [elem];
@@ -76,17 +84,29 @@ const getRangeBytes = (value: number, max: number) => {
 };
 
 const VIACustomControl = (props: VIACustomControlProps) => {
-  const {content, type, options, value} = props as any;
+  const {content, type, options, value, showAskConfirmationButton} =
+    props as any;
   const [name, ...command] = content;
   switch (type) {
     case 'button': {
       const buttonOption: any[] = options || [1];
       return (
         <AccentButton
-          onClick={() => 
-            props.updateValue(name, ...command, buttonOption[0])
-          }
-        >Click</AccentButton>
+          onClick={() => {
+            if (
+              showAskConfirmationButton &&
+              window.confirm(
+                `Are you sure you want to continue performing the action ${props.label}?`,
+              )
+            ) {
+              props.updateValue(name, ...command, buttonOption[0]);
+            } else if (!showAskConfirmationButton) {
+              props.updateValue(name, ...command, buttonOption[0]);
+            }
+          }}
+        >
+          Click
+        </AccentButton>
       );
     }
     case 'range': {

src/components/panes/settings.tsx

@@ -14,11 +14,13 @@ import {
 import {AccentSlider} from '../inputs/accent-slider';
 import {useDispatch} from 'react-redux';
 import {useAppSelector} from 'src/store/hooks';
-import {
+import {  
   getShowDesignTab,
   getDisableFastRemap,
   toggleCreatorMode,
   toggleFastRemap,
+  getAskConfirmationButton,
+  toggleAskConfirmationButton,
   getThemeMode,
   toggleThemeMode,
   getThemeName,
@@ -57,6 +59,7 @@ export const Settings = () => {
   const dispatch = useDispatch();
   const showDesignTab = useAppSelector(getShowDesignTab);
   const disableFastRemap = useAppSelector(getDisableFastRemap);
+  const showAskConfirmationButton = useAppSelector(getAskConfirmationButton);
   const themeMode = useAppSelector(getThemeMode);
   const themeName = useAppSelector(getThemeName);
   const renderMode = useAppSelector(getRenderMode);
@@ -120,6 +123,15 @@ export const Settings = () => {
                 />
               </Detail>
             </ControlRow>
+            <ControlRow>
+              <Label>Ask for confirmation on button click for custom UI</Label>
+              <Detail>
+                <AccentSlider
+                  onChange={() => dispatch(toggleAskConfirmationButton())}
+                  isChecked={showAskConfirmationButton}
+                />
+              </Detail>
+            </ControlRow>
             <ControlRow>
               <Label>Light Mode</Label>
               <Detail>

src/store/settingsSlice.ts

@@ -45,6 +45,9 @@ const settingsSlice = createSlice({
     toggleCreatorMode: (state) => {
       toggleBool(state, 'showDesignTab');
     },
+    toggleAskConfirmationButton: (state) => {
+      toggleBool(state, 'showAskConfirmationButton');
+    },
     toggleThemeMode: (state) => {
       const newThemeMode = state.themeMode === 'light' ? 'dark' : 'light';
       document.documentElement.dataset.themeMode = newThemeMode;
@@ -104,6 +107,7 @@ const settingsSlice = createSlice({
 export const {
   toggleFastRemap,
   toggleCreatorMode,
+  toggleAskConfirmationButton,
   setTestMatrixEnabled,
   setTestKeyboardSoundsSettings,
   setMacroEditorSettings,
@@ -125,6 +129,8 @@ export const getDisableFastRemap = (state: RootState) =>
   state.settings.disableFastRemap;
 export const getShowDesignTab = (state: RootState) =>
   state.settings.showDesignTab;
+export const getAskConfirmationButton = (state: RootState) =>
+  state.settings.showAskConfirmationButton;
 export const getRestartRequired = (state: RootState) =>
   state.settings.restartRequired;
 export const getIsTestMatrixEnabled = (state: RootState) =>

src/types/types.ts

@@ -84,6 +84,7 @@ export type TestKeyboardSoundsSettings = {
 export type Settings = {
   showDesignTab: boolean;
   disableFastRemap: boolean;
+  showAskConfirmationButton: boolean;
   renderMode: '3D' | '2D';
   themeMode: 'light' | 'dark';
   themeName: string;

src/utils/device-store.ts

@@ -31,6 +31,7 @@ const defaultStoreData = {
   settings: {
     showDesignTab: false,
     disableFastRemap: false,
+    showAskConfirmationButton: true,
     renderMode: '2D' as const,
     themeMode: 'dark' as const,
     designDefinitionVersion: 'v3' as const,