Merge branch 'develop' into release/v0.47.x

frontend/src/components/MarkdownRenderer/CodeCopyBtn/CodeCopyBtn.tsx

@@ -1,25 +1,33 @@
+/* eslint-disable prefer-destructuring */
 import './CodeCopyBtn.scss';
 
 import { CheckOutlined, CopyOutlined } from '@ant-design/icons';
 import cx from 'classnames';
-import { useState } from 'react';
+import React, { useState } from 'react';
 
-export default function CodeCopyBtn({
+function CodeCopyBtn({
 	children,
+	onCopyClick,
 }: {
 	children: React.ReactNode;
+	onCopyClick?: (additionalInfo?: Record<string, unknown>) => void;
 }): JSX.Element {
 	const [isSnippetCopied, setIsSnippetCopied] = useState(false);
 
 	const handleClick = (): void => {
+		let copiedText = '';
 		if (children && Array.isArray(children)) {
 			setIsSnippetCopied(true);
 			navigator.clipboard.writeText(children[0].props.children[0]).finally(() => {
+				copiedText = (children[0].props.children[0] as string).slice(0, 200); // slicing is done due to the limitation in accepted char length in attributes
 				setTimeout(() => {
 					setIsSnippetCopied(false);
 				}, 1000);
 			});
+			copiedText = (children[0].props.children[0] as string).slice(0, 200);
 		}
+
+		onCopyClick?.({ copiedText });
 	};
 
 	return (
@@ -30,3 +38,9 @@ export default function CodeCopyBtn({
 		</div>
 	);
 }
+
+CodeCopyBtn.defaultProps = {
+	onCopyClick: (): void => {},
+};
+
+export default CodeCopyBtn;

frontend/src/components/MarkdownRenderer/MarkdownRenderer.tsx

@@ -2,6 +2,8 @@
 /* eslint-disable react/jsx-props-no-spreading */
 /* eslint-disable @typescript-eslint/explicit-function-return-type */
 
+import logEvent from 'api/common/logEvent';
+import { isEmpty } from 'lodash-es';
 import ReactMarkdown from 'react-markdown';
 import { CodeProps } from 'react-markdown/lib/ast-to-react';
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
@@ -15,10 +17,28 @@ interface LinkProps {
 	children: React.ReactElement;
 }
 
-function Pre({ children }: { children: React.ReactNode }): JSX.Element {
+function Pre({
+	children,
+	elementDetails,
+	trackCopyAction,
+}: {
+	children: React.ReactNode;
+	trackCopyAction: boolean;
+	elementDetails: Record<string, unknown>;
+}): JSX.Element {
+	const { trackingTitle = '', ...rest } = elementDetails;
+
+	const handleClick = (additionalInfo?: Record<string, unknown>): void => {
+		const trackingData = { ...rest, copiedContent: additionalInfo };
+
+		if (trackCopyAction && !isEmpty(trackingTitle)) {
+			logEvent(trackingTitle as string, trackingData);
+		}
+	};
+
 	return (
 		<pre className="code-snippet-container">
-			<CodeCopyBtn>{children}</CodeCopyBtn>
+			<CodeCopyBtn onCopyClick={handleClick}>{children}</CodeCopyBtn>
 			{children}
 		</pre>
 	);
@@ -83,9 +103,13 @@ function CustomTag({ color }: { color: string }): JSX.Element {
 function MarkdownRenderer({
 	markdownContent,
 	variables,
+	trackCopyAction,
+	elementDetails,
 }: {
 	markdownContent: any;
 	variables: any;
+	trackCopyAction?: boolean;
+	elementDetails?: Record<string, unknown>;
 }): JSX.Element {
 	const interpolatedMarkdown = interpolateMarkdown(markdownContent, variables);
 
@@ -96,7 +120,12 @@ function MarkdownRenderer({
 				// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 				// @ts-ignore
 				a: Link,
-				pre: Pre,
+				pre: ({ children }) =>
+					Pre({
+						children,
+						elementDetails: elementDetails ?? {},
+						trackCopyAction: !!trackCopyAction,
+					}),
 				code: Code,
 				customtag: CustomTag,
 			}}
@@ -106,4 +135,9 @@ function MarkdownRenderer({
 	);
 }
 
+MarkdownRenderer.defaultProps = {
+	elementDetails: {},
+	trackCopyAction: false,
+};
+
 export { Code, Link, MarkdownRenderer, Pre };

frontend/src/components/facingIssueBtn/FacingIssueBtn.style.scss

@@ -7,3 +7,10 @@
 		border-color: var(--bg-amber-300) !important;
 	}
 }
+
+.tooltip-overlay {
+	text-wrap: nowrap;
+	.ant-tooltip-inner {
+		width: max-content;
+	}
+}

frontend/src/components/facingIssueBtn/FacingIssueBtn.tsx

@@ -39,7 +39,12 @@ function FacingIssueBtn({
 
 	return isCloudUserVal && isChatSupportEnabled ? ( // Note: we would need to move this condition to license based in future
 		<div className="facing-issue-button">
-			<Tooltip title={onHoverText} autoAdjustOverflow>
+			<Tooltip
+				title={onHoverText}
+				autoAdjustOverflow
+				style={{ padding: 8 }}
+				overlayClassName="tooltip-overlay"
+			>
 				<Button
 					className={cx('periscope-btn', 'facing-issue-button', className)}
 					onClick={handleFacingIssuesClick}

frontend/src/components/facingIssueBtn/util.ts

@@ -55,3 +55,20 @@ State: ${(alertDef as any)?.state || ''}
 Alert Id: ${ruleId}
 
 Thanks`;
+
+export const integrationsListMessage = `Hi Team,
+
+I need help with Integrations.
+
+Thanks`;
+
+export const integrationDetailMessage = (
+	selectedIntegration: string,
+): string => `
+Hi Team,
+
+I need help in configuring this integration.
+
+Integration Id: ${selectedIntegration}
+
+Thanks`;

frontend/src/pages/Integrations/Header.tsx

@@ -1,7 +1,9 @@
 import './Integrations.styles.scss';
 
 import { Color } from '@signozhq/design-tokens';
-import { Input, Typography } from 'antd';
+import { Flex, Input, Typography } from 'antd';
+import FacingIssueBtn from 'components/facingIssueBtn/FacingIssueBtn';
+import { integrationsListMessage } from 'components/facingIssueBtn/util';
 import { Search } from 'lucide-react';
 import { Dispatch, SetStateAction } from 'react';
 
@@ -19,9 +21,18 @@ function Header(props: HeaderProps): JSX.Element {
 	return (
 		<div className="integrations-header">
 			<Typography.Title className="title">Integrations</Typography.Title>
-			<Typography.Text className="subtitle">
-				Manage Integrations for this workspace
-			</Typography.Text>
+			<Flex justify="space-between" align="center">
+				<Typography.Text className="subtitle">
+					Manage Integrations for this workspace
+				</Typography.Text>
+				<FacingIssueBtn
+					attributes={{ screen: 'Integrations list page' }}
+					eventName="Integrations: Facing issues in integrations"
+					buttonText="Facing issues with integrations"
+					message={integrationsListMessage}
+					onHoverText="Click here to get help with integrations"
+				/>
+			</Flex>
 
 			<Input
 				placeholder="Search for an integration..."

frontend/src/pages/Integrations/IntegrationDetailPage/IntegrationDetailContentTabs/Configure.tsx

@@ -1,6 +1,7 @@
 import './IntegrationDetailContentTabs.styles.scss';
 
 import { Button, Typography } from 'antd';
+import logEvent from 'api/common/logEvent';
 import cx from 'classnames';
 import { MarkdownRenderer } from 'components/MarkdownRenderer/MarkdownRenderer';
 import useAnalytics from 'hooks/analytics/useAnalytics';
@@ -17,12 +18,16 @@ function Configure(props: ConfigurationProps): JSX.Element {
 	const { configuration, integrationId } = props;
 	const [selectedConfigStep, setSelectedConfigStep] = useState(0);
 
-	const handleMenuClick = (index: number): void => {
+	const { trackEvent } = useAnalytics();
+
+	const handleMenuClick = (index: number, config: any): void => {
 		setSelectedConfigStep(index);
+		logEvent('Integrations Detail Page: Configure tab', {
+			sectionName: config?.title,
+			integrationId,
+		});
 	};
 
-	const { trackEvent } = useAnalytics();
-
 	useEffect(() => {
 		trackEvent(
 			INTEGRATION_TELEMETRY_EVENTS.INTEGRATIONS_DETAIL_CONFIGURE_INSTRUCTION,
@@ -33,6 +38,12 @@ function Configure(props: ConfigurationProps): JSX.Element {
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, []);
 
+	const markdownDetailsForTracking = {
+		trackingTitle: `Integrations Detail Page: Copy button`,
+		sectionName: configuration[selectedConfigStep].title,
+		integrationId,
+	};
+
 	return (
 		<div className="integration-detail-configure">
 			<div className="configure-menu">
@@ -43,7 +54,7 @@ function Configure(props: ConfigurationProps): JSX.Element {
 						className={cx('configure-menu-item', {
 							active: selectedConfigStep === index,
 						})}
-						onClick={(): void => handleMenuClick(index)}
+						onClick={(): void => handleMenuClick(index, config)}
 					>
 						<Typography.Text className="configure-text">
 							{config.title}
@@ -55,6 +66,8 @@ function Configure(props: ConfigurationProps): JSX.Element {
 				<MarkdownRenderer
 					variables={{}}
 					markdownContent={configuration[selectedConfigStep].instructions}
+					elementDetails={markdownDetailsForTracking}
+					trackCopyAction
 				/>
 			</div>
 		</div>

frontend/src/pages/Integrations/IntegrationDetailPage/IntegrationDetailContentTabs/Overview.tsx

@@ -24,6 +24,7 @@ function Overview(props: OverviewProps): JSX.Element {
 	];
 
 	const assetLabelMap = ['Pipelines', 'Dashboards', 'Alerts'];
+
 	return (
 		<div className="integration-detail-overview">
 			<div className="integration-detail-overview-left-container">

frontend/src/pages/Integrations/IntegrationDetailPage/IntegrationDetailPage.tsx

@@ -4,7 +4,9 @@
 import './IntegrationDetailPage.styles.scss';
 
 import { Color } from '@signozhq/design-tokens';
-import { Button, Skeleton, Typography } from 'antd';
+import { Button, Flex, Skeleton, Typography } from 'antd';
+import FacingIssueBtn from 'components/facingIssueBtn/FacingIssueBtn';
+import { integrationDetailMessage } from 'components/facingIssueBtn/util';
 import { useGetIntegration } from 'hooks/Integrations/useGetIntegration';
 import { useGetIntegrationStatus } from 'hooks/Integrations/useGetIntegrationStatus';
 import { defaultTo } from 'lodash-es';
@@ -64,16 +66,30 @@ function IntegrationDetailPage(props: IntegrationDetailPageProps): JSX.Element {
 
 	return (
 		<div className="integration-detail-content">
-			<Button
-				type="text"
-				icon={<ArrowLeft size={14} />}
-				className="all-integrations-btn"
-				onClick={(): void => {
-					setSelectedIntegration(null);
-				}}
-			>
-				All Integrations
-			</Button>
+			<Flex justify="space-between" align="center">
+				<Button
+					type="text"
+					icon={<ArrowLeft size={14} />}
+					className="all-integrations-btn"
+					onClick={(): void => {
+						setSelectedIntegration(null);
+					}}
+				>
+					All Integrations
+				</Button>
+				<FacingIssueBtn
+					attributes={{
+						screen: 'Integrations detail page',
+						activeTab: activeDetailTab,
+						integrationTitle: integrationData?.title || '',
+						integrationId: selectedIntegration,
+					}}
+					eventName="Integrations: Facing issues in integrations"
+					buttonText="Facing issues with integration"
+					message={integrationDetailMessage(selectedIntegration)}
+					onHoverText="Click here to get help with this integration"
+				/>
+			</Flex>
 
 			{loading ? (
 				<div className="loading-integration-details">

frontend/src/pages/Integrations/Integrations.styles.scss

@@ -172,6 +172,20 @@
 				}
 			}
 		}
+
+		.request-entity-container {
+			display: flex;
+			flex-direction: row;
+			justify-content: space-between;
+			align-items: center;
+
+			border-radius: 4px;
+			border: 0.5px solid rgba(78, 116, 248, 0.2);
+			background: rgba(69, 104, 220, 0.1);
+			padding: 12px;
+			margin: 24px 0;
+			margin-bottom: 80px;
+		}
 	}
 }
 

frontend/src/pages/Integrations/Integrations.tsx

@@ -8,6 +8,7 @@ import { useHistory, useLocation } from 'react-router-dom';
 import Header from './Header';
 import IntegrationDetailPage from './IntegrationDetailPage/IntegrationDetailPage';
 import IntegrationsList from './IntegrationsList';
+import { RequestIntegrationBtn } from './RequestIntegrationBtn';
 import { INTEGRATION_TELEMETRY_EVENTS } from './utils';
 
 function Integrations(): JSX.Element {
@@ -65,6 +66,7 @@ function Integrations(): JSX.Element {
 							searchTerm={searchTerm}
 							setActiveDetailTab={setActiveDetailTab}
 						/>
+						<RequestIntegrationBtn />
 					</>
 				)}
 			</div>