fix: demo guide dialogs behavior (#3762)

Improves the dialogs behavior to address
https://linear.app/unleash/issue/2-1053/bug-when-big-dialog-is-open-if-you-click-on-a-step-the-flow-is-broken

Also prevents close on backdrop click for the welcome dialog.

frontend/src/component/demo/Demo.tsx

@@ -87,6 +87,7 @@ export const Demo = ({ children }: IDemoProps): JSX.Element => {
             <DemoBanner
                 onPlans={() => {
                     closeGuide();
+                    setWelcomeOpen(false);
 
                     setPlansOpen(true);
 
@@ -102,6 +103,7 @@ export const Demo = ({ children }: IDemoProps): JSX.Element => {
                 open={welcomeOpen}
                 onClose={() => {
                     setWelcomeOpen(false);
+
                     setExpanded(false);
 
                     trackEvent('demo', {
@@ -113,6 +115,7 @@ export const Demo = ({ children }: IDemoProps): JSX.Element => {
                 }}
                 onStart={() => {
                     setWelcomeOpen(false);
+
                     onStart();
 
                     trackEvent('demo', {
@@ -152,6 +155,9 @@ export const Demo = ({ children }: IDemoProps): JSX.Element => {
                     setTopic(topic);
                     setStep(0);
 
+                    setWelcomeOpen(false);
+                    setPlansOpen(false);
+
                     trackEvent('demo', {
                         props: {
                             eventType: 'start_topic',
@@ -162,6 +168,7 @@ export const Demo = ({ children }: IDemoProps): JSX.Element => {
                 topics={TOPICS}
                 onWelcome={() => {
                     closeGuide();
+                    setPlansOpen(false);
 
                     setWelcomeOpen(true);
 

frontend/src/component/demo/DemoDialog/DemoDialog.tsx

@@ -31,16 +31,25 @@ const StyledHeader = styled(Typography)(({ theme }) => ({
 interface IDemoDialogProps extends DialogProps {
     open: boolean;
     onClose: () => void;
+    preventCloseOnBackdropClick?: boolean;
     children: React.ReactNode;
 }
 
 export const DemoDialog = ({
     open,
     onClose,
+    preventCloseOnBackdropClick,
     children,
     ...props
 }: IDemoDialogProps) => (
-    <StyledDialog open={open} onClose={onClose} {...props}>
+    <StyledDialog
+        open={open}
+        onClose={(_, r) => {
+            if (preventCloseOnBackdropClick && r === 'backdropClick') return;
+            onClose();
+        }}
+        {...props}
+    >
         <StyledCloseButton aria-label="close" onClick={onClose}>
             <CloseIcon />
         </StyledCloseButton>

frontend/src/component/demo/DemoDialog/DemoDialogWelcome/DemoDialogWelcome.tsx

@@ -60,7 +60,7 @@ export const DemoDialogWelcome = ({
     const { trackEvent } = usePlausibleTracker();
 
     return (
-        <DemoDialog open={open} onClose={onClose}>
+        <DemoDialog open={open} onClose={onClose} preventCloseOnBackdropClick>
             <DemoDialog.Header>Explore Unleash</DemoDialog.Header>
             <Typography color="textSecondary" sx={{ mt: 2 }}>
                 You can explore Unleash on your own, however for the best