feat: add support for request integrations in aws integrations page (#7968)

* feat: add support for request integrations in aws integrations page

* chore: write test for request aws integrations

frontend/src/container/CloudIntegrationPage/CloudIntegrationPage.tsx

@@ -1,3 +1,8 @@
+import {
+	IntegrationType,
+	RequestIntegrationBtn,
+} from 'pages/Integrations/RequestIntegrationBtn';
+
 import Header from './Header/Header';
 import HeroSection from './HeroSection/HeroSection';
 import ServicesTabs from './ServicesSection/ServicesTabs';
@@ -7,6 +12,10 @@ function CloudIntegrationPage(): JSX.Element {
 		<div>
 			<Header />
 			<HeroSection />
+			<RequestIntegrationBtn
+				type={IntegrationType.AWS_SERVICES}
+				message="Cannot find the AWS service you're looking for? Request more integrations"
+			/>
 			<ServicesTabs />
 		</div>
 	);

frontend/src/container/CloudIntegrationPage/__tests__/RequestIntegration.test.tsx

@@ -0,0 +1,63 @@
+import { act, fireEvent, render, screen } from '@testing-library/react';
+import { server } from 'mocks-server/server';
+import { rest } from 'msw';
+import {
+	IntegrationType,
+	RequestIntegrationBtn,
+} from 'pages/Integrations/RequestIntegrationBtn';
+import { I18nextProvider } from 'react-i18next';
+import i18n from 'ReactI18';
+
+describe('Request AWS integration', () => {
+	it('should render the request integration button', async () => {
+		let capturedPayload: any;
+		server.use(
+			rest.post('http://localhost/api/v1/event', async (req, res, ctx) => {
+				capturedPayload = await req.json();
+				return res(
+					ctx.status(200),
+					ctx.json({
+						statusCode: 200,
+						error: null,
+						payload: 'Event Processed Successfully',
+					}),
+				);
+			}),
+		);
+		act(() => {
+			render(
+				<I18nextProvider i18n={i18n}>
+					<RequestIntegrationBtn type={IntegrationType.AWS_SERVICES} />{' '}
+				</I18nextProvider>,
+			);
+		});
+
+		expect(
+			screen.getByText(
+				/cannot find what you’re looking for\? request more integrations/i,
+			),
+		).toBeInTheDocument();
+
+		await act(() => {
+			fireEvent.change(screen.getByPlaceholderText(/Enter integration name/i), {
+				target: { value: 's3 sync' },
+			});
+
+			const submitButton = screen.getByRole('button', { name: /submit/i });
+
+			expect(submitButton).toBeEnabled();
+
+			fireEvent.click(submitButton);
+		});
+
+		expect(capturedPayload.eventName).toBeDefined();
+		expect(capturedPayload.attributes).toBeDefined();
+
+		expect(capturedPayload.eventName).toBe('AWS service integration requested');
+		expect(capturedPayload.attributes).toEqual({
+			screen: 'AWS integration details',
+			integration: 's3 sync',
+			tenant_url: 'localhost',
+		});
+	});
+});

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

@@ -180,8 +180,9 @@
 				}
 			}
 		}
-
+	}
-		.request-entity-container {
+}
+.request-entity-container {
 	display: flex;
 	flex-direction: row;
 	justify-content: space-between;
@@ -193,8 +194,6 @@
 	padding: 12px;
 	margin: 24px 0;
 	margin-bottom: 80px;
-		}
-	}
 }
 
 .lightMode {

frontend/src/pages/Integrations/RequestIntegrationBtn.tsx

@@ -8,7 +8,20 @@ import { Check } from 'lucide-react';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
-export function RequestIntegrationBtn(): JSX.Element {
+export enum IntegrationType {
+	AWS_SERVICES = 'aws-services',
+	INTEGRATIONS_LIST = 'integrations-list',
+}
+
+interface RequestIntegrationBtnProps {
+	type?: IntegrationType;
+	message?: string;
+}
+
+export function RequestIntegrationBtn({
+	type,
+	message,
+}: RequestIntegrationBtnProps): JSX.Element {
 	const [
 		isSubmittingRequestForIntegration,
 		setIsSubmittingRequestForIntegration,
@@ -22,8 +35,17 @@ export function RequestIntegrationBtn(): JSX.Element {
 	const handleRequestIntegrationSubmit = async (): Promise<void> => {
 		try {
 			setIsSubmittingRequestForIntegration(true);
-			const response = await logEvent('Integration Requested', {
+			const eventName =
-				screen: 'Integration list page',
+				type === IntegrationType.AWS_SERVICES
+					? 'AWS service integration requested'
+					: 'Integration requested';
+			const screenName =
+				type === IntegrationType.AWS_SERVICES
+					? 'AWS integration details'
+					: 'Integration list page';
+
+			const response = await logEvent(eventName, {
+				screen: screenName,
 				integration: requestedIntegrationName,
 			});
 
@@ -57,9 +79,7 @@ export function RequestIntegrationBtn(): JSX.Element {
 
 	return (
 		<div className="request-entity-container">
-			<Typography.Text>
+			<Typography.Text>{message}</Typography.Text>
-				Cannot find what you’re looking for? Request more integrations
-			</Typography.Text>
 
 			<div className="form-section">
 				<Space.Compact style={{ width: '100%' }}>
@@ -93,3 +113,8 @@ export function RequestIntegrationBtn(): JSX.Element {
 		</div>
 	);
 }
+
+RequestIntegrationBtn.defaultProps = {
+	type: IntegrationType.INTEGRATIONS_LIST,
+	message: 'Cannot find what you’re looking for? Request more integrations',
+};

frontend/src/pages/IntegrationsModulePage/IntegrationsModulePage.styles.scss

@@ -14,6 +14,11 @@
 		align-items: center;
 		gap: 8px;
 	}
+	.request-entity-container {
+		margin: 0;
+		border-right: none;
+		border-left: none;
+	}
 }
 
 .lightMode {