feat: send event if users click in facing issues button in get started (#4859)

Co-authored-by: Vishal Sharma <makeavish786@gmail.com>

frontend/src/container/AppLayout/index.tsx

@@ -315,7 +315,7 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 				className={cx(
 					'app-layout',
 					isDarkMode ? 'darkMode' : 'lightMode',
-					!collapsed ? 'docked' : '',
+					!collapsed && !renderFullScreen ? 'docked' : '',
 				)}
 			>
 				{isToDisplayLayout && !renderFullScreen && (

frontend/src/container/OnboardingContainer/Steps/EnvironmentDetails/EnvironmentDetails.tsx

@@ -159,7 +159,7 @@ export default function EnvironmentDetails(): JSX.Element {
 
 			<div className="request-entity-container">
 				<Typography.Text>
-					Cannot find what you’re looking for? Request a data source
+					Cannot find what you’re looking for? Request an environment
 				</Typography.Text>
 
 				<div className="form-section">

frontend/src/container/OnboardingContainer/common/ModuleStepsContainer/ModuleStepsContainer.tsx

@@ -17,6 +17,7 @@ import { hasFrameworks } from 'container/OnboardingContainer/utils/dataSourceUti
 import useAnalytics from 'hooks/analytics/useAnalytics';
 import history from 'lib/history';
 import { isEmpty, isNull } from 'lodash-es';
+import { HelpCircle } from 'lucide-react';
 import { useState } from 'react';
 
 import { useOnboardingContext } from '../../context/OnboardingContext';
@@ -379,6 +380,30 @@ export default function ModuleStepsContainer({
 		history.push('/');
 	};
 
+	const handleFacingIssuesClick = (): void => {
+		trackEvent('Onboarding V2: Facing Issues Sending Data to SigNoz', {
+			dataSource: selectedDataSource?.id,
+			framework: selectedFramework,
+			environment: selectedEnvironment,
+			module: activeStep?.module?.id,
+		});
+
+		const message = `Hi Team,
+
+I am facing issues sending data to SigNoz. Here are my application details
+
+Data Source: ${selectedDataSource?.name}
+Framework:
+Environment:
+Module: ${activeStep?.module?.id}
+
+Thanks
+`;
+		if (window.Intercom) {
+			window.Intercom('showNewMessage', message);
+		}
+	};
+
 	return (
 		<div className="onboarding-module-steps">
 			<div className="steps-container">
@@ -455,6 +480,15 @@ export default function ModuleStepsContainer({
 					<Button onClick={handleNext} type="primary" icon={<ArrowRightOutlined />}>
 						{current < lastStepIndex ? 'Continue to next step' : 'Done'}
 					</Button>
+
+					<Button
+						className="periscope-btn"
+						onClick={handleFacingIssuesClick}
+						danger
+						icon={<HelpCircle size={14} />}
+					>
+						Facing issues sending data to SigNoz?
+					</Button>
 				</div>
 			</div>
 		</div>

frontend/src/container/TracesExplorer/Controls/styles.ts

@@ -5,4 +5,5 @@ export const Container = styled.div`
 	align-items: center;
 	justify-content: flex-end;
 	gap: 0.3rem;
+	margin: 8px 0;
 `;

frontend/src/container/TracesExplorer/ListView/styles.ts

@@ -9,7 +9,6 @@ export const tableStyles: CSSProperties = {
 export const Container = styled.div`
 	display: flex;
 	flex-direction: column;
-	gap: 15px;
 `;
 
 export const ErrorText = styled(Typography)`

frontend/src/container/TracesExplorer/TracesView/styles.ts

@@ -3,7 +3,6 @@ import styled from 'styled-components';
 export const Container = styled.div`
 	display: flex;
 	flex-direction: column;
-	gap: 15px;
 `;
 
 export const ActionsContainer = styled.div`