feat: added links to integrations page in onboarding section (#5606)

* feat: added links to integrations page in onboarding section

* feat: removed box shadow for button

* refactor: added routes object to navigate to integrations page

* feat: added new styles for data source name

frontend/src/container/OnboardingContainer/Steps/DataSource/DataSource.styles.scss

@@ -41,3 +41,37 @@ div[class*='-setup-instructions-container'] {
 .service-name-container {
 	width: 100%;
 }
+
+.intgeration-page-container {
+	background-color: var(--bg-ink-400);
+	border-color: var(--bg-slate-500);
+}
+
+.intgeration-page-container-text {
+	color: var(--bg-vanilla-400);
+}
+
+.navigate-integrations-page-btn {
+	display: flex;
+	align-items: center;
+	color: var(--bg-vanilla-100);
+	background-color: var(--bg-slate-300);
+	box-shadow: none;
+	border: none;
+}
+
+.dataSourceName {
+	color: var(--bg-vanilla-100);
+	font-weight: 600;
+	cursor: pointer;
+
+	display: flex;
+	align-items: center;
+	gap: 8px;
+}
+
+.lightMode {
+	.dataSourceName {
+		color: var(--bg-slate-500);
+	}
+}

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

@@ -6,6 +6,7 @@ import { LoadingOutlined } from '@ant-design/icons';
 import { Button, Card, Form, Input, Select, Space, Typography } from 'antd';
 import logEvent from 'api/common/logEvent';
 import cx from 'classnames';
+import ROUTES from 'constants/routes';
 import { useOnboardingContext } from 'container/OnboardingContainer/context/OnboardingContext';
 import { useCases } from 'container/OnboardingContainer/OnboardingContainer';
 import {
@@ -14,9 +15,10 @@ import {
 	hasFrameworks,
 } from 'container/OnboardingContainer/utils/dataSourceUtils';
 import { useNotifications } from 'hooks/useNotifications';
-import { Check } from 'lucide-react';
+import { Blocks, Check } from 'lucide-react';
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { useHistory } from 'react-router-dom';
 import { popupContainer } from 'utils/selectPopupContainer';
 
 export interface DataSourceType {
@@ -29,6 +31,7 @@ export interface DataSourceType {
 export default function DataSource(): JSX.Element {
 	const [form] = Form.useForm();
 	const { t } = useTranslation(['common']);
+	const history = useHistory();
 
 	const {
 		serviceName,
@@ -127,6 +130,10 @@ export default function DataSource(): JSX.Element {
 		}
 	};
 
+	const goToIntegrationsPage = (): void => {
+		history.push(ROUTES.INTEGRATIONS);
+	};
+
 	return (
 		<div className="module-container">
 			<Typography.Text className="data-source-title">
@@ -156,7 +163,7 @@ export default function DataSource(): JSX.Element {
 						</div>
 
 						<div>
-							<Typography.Text className="serviceName">
+							<Typography.Text className="dataSourceName">
 								{dataSource.name}
 							</Typography.Text>
 						</div>
@@ -214,6 +221,20 @@ export default function DataSource(): JSX.Element {
 							</>
 						)}
 
+						<div className="request-entity-container intgeration-page-container">
+							<Typography.Text className="intgeration-page-container-text">
+								Not able to find datasources you are looking for, check our Integrations
+								page which allows more sources of sending data
+							</Typography.Text>
+							<Button
+								onClick={goToIntegrationsPage}
+								icon={<Blocks size={14} />}
+								className="navigate-integrations-page-btn"
+							>
+								Go to integrations
+							</Button>
+						</div>
+
 						<div className="request-entity-container">
 							<Typography.Text>
 								Cannot find what you’re looking for? Request a data source