feat: added facing issues and requestIntegration section in integration pages (#5147)

* feat: added facing issues and requestIntegration section in integration pages

* feat: changed text in integration facing issue button

* feat: fixed facing-issue tooltip styles

* feat: code cleanup

* feat: added margin bottom to request more component

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/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>

frontend/src/pages/Integrations/RequestIntegrationBtn.tsx

@@ -0,0 +1,95 @@
+import './Integrations.styles.scss';
+
+import { LoadingOutlined } from '@ant-design/icons';
+import { Button, Input, Space, Typography } from 'antd';
+import logEvent from 'api/common/logEvent';
+import { useNotifications } from 'hooks/useNotifications';
+import { Check } from 'lucide-react';
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+export function RequestIntegrationBtn(): JSX.Element {
+	const [
+		isSubmittingRequestForIntegration,
+		setIsSubmittingRequestForIntegration,
+	] = useState(false);
+
+	const [requestedIntegrationName, setRequestedIntegrationName] = useState('');
+
+	const { notifications } = useNotifications();
+	const { t } = useTranslation(['common']);
+
+	const handleRequestIntegrationSubmit = async (): Promise<void> => {
+		try {
+			setIsSubmittingRequestForIntegration(true);
+			const response = await logEvent('Integration Requested', {
+				screen: 'Integration list page',
+				integration: requestedIntegrationName,
+			});
+
+			if (response.statusCode === 200) {
+				notifications.success({
+					message: 'Integration Request Submitted',
+				});
+
+				setIsSubmittingRequestForIntegration(false);
+			} else {
+				notifications.error({
+					message:
+						response.error ||
+						t('something_went_wrong', {
+							ns: 'common',
+						}),
+				});
+
+				setIsSubmittingRequestForIntegration(false);
+			}
+		} catch (error) {
+			notifications.error({
+				message: t('something_went_wrong', {
+					ns: 'common',
+				}),
+			});
+
+			setIsSubmittingRequestForIntegration(false);
+		}
+	};
+
+	return (
+		<div className="request-entity-container">
+			<Typography.Text>
+				Cannot find what you’re looking for? Request more integrations
+			</Typography.Text>
+
+			<div className="form-section">
+				<Space.Compact style={{ width: '100%' }}>
+					<Input
+						placeholder="Enter integration name..."
+						style={{ width: 300, marginBottom: 0 }}
+						value={requestedIntegrationName}
+						onChange={(e): void => setRequestedIntegrationName(e.target.value)}
+					/>
+					<Button
+						className="periscope-btn primary"
+						icon={
+							isSubmittingRequestForIntegration ? (
+								<LoadingOutlined />
+							) : (
+								<Check size={12} />
+							)
+						}
+						type="primary"
+						onClick={handleRequestIntegrationSubmit}
+						disabled={
+							isSubmittingRequestForIntegration ||
+							!requestedIntegrationName ||
+							requestedIntegrationName?.trim().length === 0
+						}
+					>
+						Submit
+					</Button>
+				</Space.Compact>
+			</div>
+		</div>
+	);
+}