diff --git a/frontend/src/container/CloudIntegrationPage/CloudIntegrationPage.tsx b/frontend/src/container/CloudIntegrationPage/CloudIntegrationPage.tsx index 44a8b8e485..488202feaa 100644 --- a/frontend/src/container/CloudIntegrationPage/CloudIntegrationPage.tsx +++ b/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 {
+
); diff --git a/frontend/src/container/CloudIntegrationPage/__tests__/RequestIntegration.test.tsx b/frontend/src/container/CloudIntegrationPage/__tests__/RequestIntegration.test.tsx new file mode 100644 index 0000000000..9872f43101 --- /dev/null +++ b/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( + + {' '} + , + ); + }); + + 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', + }); + }); +}); diff --git a/frontend/src/pages/Integrations/Integrations.styles.scss b/frontend/src/pages/Integrations/Integrations.styles.scss index 596cace50e..8aa15107d8 100644 --- a/frontend/src/pages/Integrations/Integrations.styles.scss +++ b/frontend/src/pages/Integrations/Integrations.styles.scss @@ -180,22 +180,21 @@ } } } - - .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; - } } } +.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; +} .lightMode { .integrations-container { diff --git a/frontend/src/pages/Integrations/RequestIntegrationBtn.tsx b/frontend/src/pages/Integrations/RequestIntegrationBtn.tsx index a65e87baae..8fdea40413 100644 --- a/frontend/src/pages/Integrations/RequestIntegrationBtn.tsx +++ b/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 => { try { setIsSubmittingRequestForIntegration(true); - const response = await logEvent('Integration Requested', { - screen: 'Integration list page', + const eventName = + 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 (
- - Cannot find what you’re looking for? Request more integrations - + {message}
@@ -93,3 +113,8 @@ export function RequestIntegrationBtn(): JSX.Element {
); } + +RequestIntegrationBtn.defaultProps = { + type: IntegrationType.INTEGRATIONS_LIST, + message: 'Cannot find what you’re looking for? Request more integrations', +}; diff --git a/frontend/src/pages/IntegrationsModulePage/IntegrationsModulePage.styles.scss b/frontend/src/pages/IntegrationsModulePage/IntegrationsModulePage.styles.scss index 4ff58bea40..a22901cd57 100644 --- a/frontend/src/pages/IntegrationsModulePage/IntegrationsModulePage.styles.scss +++ b/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 {