feat: update ingestion details api in new onboarding flow (#7277)

* feat: update ingestion details api to use the new api

* feat: handle select environment entity

* feat: handle invalid date in hasDatePassed function

frontend/src/container/IngestionSettings/MultiIngestionSettings.tsx

@@ -71,6 +71,7 @@ import {
 	PaginationProps,
 } from 'types/api/ingestionKeys/types';
 import { USER_ROLES } from 'types/roles';
+import { hasDatePassed } from 'utils/timeUtils';
 
 const { Option } = Select;
 
@@ -1242,8 +1243,22 @@ function MultiIngestionSettings(): JSX.Element {
 						<div className="ingestion-key-details">
 							<div className="ingestion-key-last-used-at">
 								<CalendarClock size={14} />
-								Expires on <Minus size={12} />
-								<Typography.Text>{expiresOn}</Typography.Text>
+
+								{hasDatePassed(expiresOn) ? (
+									<>
+										Expired on <Minus size={12} />
+										<Typography.Text>{expiresOn}</Typography.Text>
+									</>
+								) : (
+									<>
+										{expiresOn !== 'No Expiry' && (
+											<>
+												Expires on <Minus size={12} />
+											</>
+										)}
+										<Typography.Text>{expiresOn}</Typography.Text>
+									</>
+								)}
 							</div>
 						</div>
 					</div>

frontend/src/container/OnboardingV2Container/AddDataSource/AddDataSource.tsx

@@ -237,7 +237,13 @@ function OnboardingAddDataSource(): JSX.Element {
 		}
 	};
 
-	const handleSelectEnvironment = (selectedEnvironment: any): void => {
+	// Base Assumption:
+	// Environment is the last question in the onboarding flow and no more question will be shown regarless of the configuration
+	// We will have to handle this in the future
+	const handleSelectEnvironment = (
+		selectedEnvironment: any,
+		baseURL?: string,
+	): void => {
 		setSelectedEnvironment(selectedEnvironment);
 		setHasMoreQuestions(false);
 
@@ -250,7 +256,7 @@ function OnboardingAddDataSource(): JSX.Element {
 			},
 		);
 
-		updateUrl(docsUrl, selectedEnvironment?.key);
+		updateUrl(baseURL || docsUrl, selectedEnvironment?.key);
 
 		setShowConfigureProduct(true);
 	};
@@ -583,7 +589,15 @@ function OnboardingAddDataSource(): JSX.Element {
 																			selectedFramework?.label === option.label ? 'selected' : ''
 																		}`}
 																		type="primary"
-																		onClick={(): void => handleSelectFramework(option)}
+																		onClick={(): void => {
+																			if (
+																				selectedDataSource?.question?.entityID === 'environment'
+																			) {
+																				handleSelectEnvironment(option, option.link);
+																			} else {
+																				handleSelectFramework(option);
+																			}
+																		}}
 																	>
 																		{option.imgUrl && (
 																			<img

frontend/src/container/OnboardingV2Container/IngestionDetails/IngestionDetails.tsx

@@ -1,8 +1,8 @@
 import { Skeleton, Typography } from 'antd';
 import logEvent from 'api/common/logEvent';
-import getIngestionData from 'api/settings/getIngestionData';
 import { AxiosError } from 'axios';
 import { useGetDeploymentsData } from 'hooks/CustomDomain/useGetDeploymentsData';
+import { useGetAllIngestionsKeys } from 'hooks/IngestionKeys/useGetAllIngestionKeys';
 import { useNotifications } from 'hooks/useNotifications';
 import {
 	ArrowUpRight,
@@ -13,9 +13,8 @@ import {
 	TriangleAlert,
 } from 'lucide-react';
 import { useEffect, useState } from 'react';
-import { useQuery } from 'react-query';
 import { useCopyToClipboard } from 'react-use';
-import { IngestionInfo } from 'types/api/settings/ingestion';
+import { IngestionKeyProps } from 'types/api/ingestionKeys/types';
 
 function maskKey(key: string, visibleStart = 4, visibleEnd = 4): string {
 	if (!key) {
@@ -44,18 +43,19 @@ export default function OnboardingIngestionDetails(): JSX.Element {
 	const { notifications } = useNotifications();
 	const [, handleCopyToClipboard] = useCopyToClipboard();
 
-	const [firstIngestionKey, setFirstIngestionKey] = useState<IngestionInfo>(
-		{} as IngestionInfo,
+	const [firstIngestionKey, setFirstIngestionKey] = useState<IngestionKeyProps>(
+		{} as IngestionKeyProps,
 	);
 
 	const {
-		status,
-		data: ingestionData,
+		data: ingestionKeys,
 		isLoading: isIngestionKeysLoading,
 		error,
 		isError,
-	} = useQuery({
-		queryFn: () => getIngestionData(),
+	} = useGetAllIngestionsKeys({
+		search: '',
+		page: 1,
+		per_page: 10,
 	});
 
 	const {
@@ -73,22 +73,10 @@ export default function OnboardingIngestionDetails(): JSX.Element {
 	};
 
 	useEffect(() => {
-		if (
-			status === 'success' &&
-			ingestionData &&
-			ingestionData &&
-			Array.isArray(ingestionData.payload)
-		) {
-			const payload = ingestionData.payload[0] || {
-				ingestionKey: '',
-				ingestionURL: '',
-				dataRegion: '',
-			};
-
-			setFirstIngestionKey(payload);
+		if (ingestionKeys?.data.data && ingestionKeys?.data.data.length > 0) {
+			setFirstIngestionKey(ingestionKeys?.data.data[0]);
 		}
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [status, ingestionData?.payload]);
+	}, [ingestionKeys]);
 
 	return (
 		<div className="configure-product-ingestion-section-content">
@@ -170,7 +158,7 @@ export default function OnboardingIngestionDetails(): JSX.Element {
 										</Typography.Text>
 
 										<Typography.Text className="ingestion-key-value-copy">
-											{maskKey(firstIngestionKey?.ingestionKey)}
+											{maskKey(firstIngestionKey?.value)}
 
 											<Copy
 												size={14}
@@ -180,7 +168,7 @@ export default function OnboardingIngestionDetails(): JSX.Element {
 														`${ONBOARDING_V3_ANALYTICS_EVENTS_MAP?.BASE}: ${ONBOARDING_V3_ANALYTICS_EVENTS_MAP?.INGESTION_KEY_COPIED}`,
 														{},
 													);
-													handleCopyKey(firstIngestionKey?.ingestionKey);
+													handleCopyKey(firstIngestionKey?.value);
 												}}
 											/>
 										</Typography.Text>

frontend/src/container/OnboardingV2Container/OnboardingV2.styles.scss

@@ -1086,6 +1086,7 @@
 
 .ingestion-setup-details-links {
 	display: flex;
+	flex-direction: row;
 	align-items: center;
 	gap: 8px;
 	margin-bottom: 24px;

frontend/src/utils/timeUtils.ts

@@ -155,3 +155,13 @@ export const normalizeTimeToMs = (timestamp: number | string): number => {
 
 	return isNanoSeconds ? Math.floor(ts / 1_000_000) : ts;
 };
+
+export const hasDatePassed = (expiresAt: string): boolean => {
+	const date = dayjs(expiresAt);
+
+	if (!date.isValid()) {
+		return false;
+	}
+
+	return date.isBefore(dayjs(), 'day');
+};