fix: [SIG-565]: design feedback for integrations (#4723)

* fix: [SIG-565]: design feedback for integrations

* feat: added dotted line in the test connection modal

* feat: handle the URL change for integration details page to support back navigation

* feat: added ghost loading states

* feat: added margin for details header

* feat: added margin for details header

* feat: increase the list sizes to 20

* fix: handle icons

* fix: remove unused classes

frontend/public/Icons/cable-car.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#prefix__clip0_2022_1972)" stroke="#fff" stroke-width="1.333" stroke-linecap="round" stroke-linejoin="round"><path d="M6.667 2h.006M9.333 1.333h.007M1.333 6l13.334-3.333M8 8V4.333M11.333 8H4.667a2 2 0 00-2 2v2.667a2 2 0 002 2h6.666a2 2 0 002-2V10a2 2 0 00-2-2zM6 8v3.333M10 8v3.333M2.667 11.334h10.666"/></g><defs><clipPath id="prefix__clip0_2022_1972"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>

frontend/public/Icons/configure.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><g stroke="#C0C1C3" stroke-width="1.333" stroke-linecap="round"><path d="M9.71 4.745a.576.576 0 000 .806l.922.922a.576.576 0 00.806 0l2.171-2.171a3.455 3.455 0 01-4.572 4.572l-3.98 3.98a1.222 1.222 0 11-1.727-1.728l3.98-3.98a3.455 3.455 0 014.572-4.572L9.717 4.739l-.006.006z" stroke-linejoin="round"/><path d="M4 7L2.527 5.566a1.333 1.333 0 01-.013-1.898l.81-.81a1.333 1.333 0 011.991.119L5.333 3M10.75 10.988l1.179 1.178m0 0l-.138.138a.833.833 0 00.387 1.397v0a.833.833 0 00.792-.219l.446-.446a.833.833 0 00.176-.917v0a.833.833 0 00-1.355-.261l-.308.308z"/></g></svg>

frontend/public/Icons/group.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><g stroke="#C0C1C3" stroke-width="1.333" stroke-linecap="round" stroke-linejoin="round"><path d="M2 4.667V3.333C2 2.6 2.6 2 3.333 2h1.334M11.333 2h1.334C13.4 2 14 2.6 14 3.333v1.334M14 11.334v1.333C14 13.4 13.4 14 12.667 14h-1.334M4.667 14H3.333C2.6 14 2 13.4 2 12.667v-1.333M8.667 4.667H5.333a.667.667 0 00-.666.666v2c0 .368.298.667.666.667h3.334a.667.667 0 00.666-.667v-2a.667.667 0 00-.666-.667zM10.667 8H7.333a.667.667 0 00-.666.667v2c0 .368.298.666.666.666h3.334a.667.667 0 00.666-.666v-2A.667.667 0 0010.667 8z"/></g></svg>

frontend/src/assets/Integrations/ConfigureIcon.tsx

@@ -0,0 +1,23 @@
+import { Color } from '@signozhq/design-tokens';
+import { useIsDarkMode } from 'hooks/useDarkMode';
+
+function ConfigureIcon(): JSX.Element {
+	const isDarkMode = useIsDarkMode();
+	return (
+		<svg width="14" height="14" fill="none" xmlns="http://www.w3.org/2000/svg">
+			<g
+				stroke={isDarkMode ? Color.BG_VANILLA_100 : Color.BG_INK_500}
+				strokeWidth="1.333"
+				strokeLinecap="round"
+			>
+				<path
+					d="M9.71 4.745a.576.576 0 000 .806l.922.922a.576.576 0 00.806 0l2.171-2.171a3.455 3.455 0 01-4.572 4.572l-3.98 3.98a1.222 1.222 0 11-1.727-1.728l3.98-3.98a3.455 3.455 0 014.572-4.572L9.717 4.739l-.006.006z"
+					strokeLinejoin="round"
+				/>
+				<path d="M4 7L2.527 5.566a1.333 1.333 0 01-.013-1.898l.81-.81a1.333 1.333 0 011.991.119L5.333 3M10.75 10.988l1.179 1.178m0 0l-.138.138a.833.833 0 00.387 1.397v0a.833.833 0 00.792-.219l.446-.446a.833.833 0 00.176-.917v0a.833.833 0 00-1.355-.261l-.308.308z" />
+			</g>
+		</svg>
+	);
+}
+
+export default ConfigureIcon;

frontend/src/constants/query.ts

@@ -27,5 +27,6 @@ export enum QueryParams {
 	viewName = 'viewName',
 	viewKey = 'viewKey',
 	expandedWidgetId = 'expandedWidgetId',
+	integration = 'integration',
 	pagination = 'pagination',
 }

frontend/src/pages/Integrations/IntegrationDetailPage/IntegrationDetailContent.tsx

@@ -1,7 +1,8 @@
 import './IntegrationDetailPage.styles.scss';
 
 import { Button, Tabs, TabsProps, Typography } from 'antd';
-import { Drum, Hammer, Table2 } from 'lucide-react';
+import ConfigureIcon from 'assets/Integrations/ConfigureIcon';
+import { CableCar, Group } from 'lucide-react';
 import { IntegrationDetailedProps } from 'types/api/integrations/types';
 
 import Configure from './IntegrationDetailContentTabs/Configure';
@@ -24,7 +25,7 @@ function IntegrationDetailContent(
 				<Button
 					type="text"
 					className="integration-tab-btns"
-					icon={<Drum size={14} />}
+					icon={<CableCar size={14} />}
 				>
 					<Typography.Text className="typography">Overview</Typography.Text>
 				</Button>
@@ -43,7 +44,7 @@ function IntegrationDetailContent(
 				<Button
 					type="text"
 					className="integration-tab-btns"
-					icon={<Hammer size={14} />}
+					icon={<ConfigureIcon />}
 				>
 					<Typography.Text className="typography">Configure</Typography.Text>
 				</Button>
@@ -56,7 +57,7 @@ function IntegrationDetailContent(
 				<Button
 					type="text"
 					className="integration-tab-btns"
-					icon={<Table2 size={14} />}
+					icon={<Group size={14} />}
 				>
 					<Typography.Text className="typography">Data Collected</Typography.Text>
 				</Button>

frontend/src/pages/Integrations/IntegrationDetailPage/IntegrationDetailContentTabs/Configure.tsx

@@ -1,6 +1,6 @@
 import './IntegrationDetailContentTabs.styles.scss';
 
-import { Button, Tooltip, Typography } from 'antd';
+import { Button, Typography } from 'antd';
 import cx from 'classnames';
 import { MarkdownRenderer } from 'components/MarkdownRenderer/MarkdownRenderer';
 import { useState } from 'react';
@@ -21,7 +21,6 @@ function Configure(props: ConfigurationProps): JSX.Element {
 		<div className="integration-detail-configure">
 			<div className="configure-menu">
 				{configuration.map((config, index) => (
-					<Tooltip title={config.title} key={config.title} placement="left">
 					<Button
 						key={config.title}
 						type="text"
@@ -30,9 +29,10 @@ function Configure(props: ConfigurationProps): JSX.Element {
 						})}
 						onClick={(): void => handleMenuClick(index)}
 					>
-							<Typography.Text ellipsis>{config.title}</Typography.Text>
+						<Typography.Text className="configure-text">
+							{config.title}
+						</Typography.Text>
 					</Button>
-					</Tooltip>
 				))}
 			</div>
 			<div className="markdown-container">

frontend/src/pages/Integrations/IntegrationDetailPage/IntegrationDetailContentTabs/DataCollected.tsx

@@ -59,7 +59,7 @@ function DataCollected(props: DataCollectedProps): JSX.Element {
 						index % 2 === 0 ? 'table-row-dark' : ''
 					}
 					dataSource={logsData}
-					pagination={{ pageSize: 3 }}
+					pagination={{ pageSize: 20 }}
 					className="logs-section-table"
 				/>
 			</div>
@@ -74,7 +74,7 @@ function DataCollected(props: DataCollectedProps): JSX.Element {
 						index % 2 === 0 ? 'table-row-dark' : ''
 					}
 					dataSource={metricsData}
-					pagination={{ pageSize: 3 }}
+					pagination={{ pageSize: 20 }}
 					className="metrics-section-table"
 				/>
 			</div>

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

@@ -4,7 +4,7 @@
 	.integration-detail-overview-left-container {
 		display: flex;
 		flex-direction: column;
-		width: 25%;
+		width: 30%;
 		gap: 26px;
 		border-right: 1px solid var(--bg-slate-500);
 		padding: 16px 0;
@@ -185,13 +185,14 @@
 	.configure-menu {
 		display: flex;
 		flex-direction: column;
-		width: 25%;
+		width: 30%;
 		padding: 16px 16px 0px 0px;
 		border-right: 1px solid var(--bg-slate-500);
 		gap: 8px;
 
 		.configure-menu-item {
 			padding: 4px 8px;
+			height: auto;
 			text-align: start;
 			color: var(--bg-vanilla-100);
 			font-family: Inter;
@@ -199,6 +200,10 @@
 			font-style: normal;
 			font-weight: 400;
 			line-height: 18px; /* 128.571% */
+
+			.configure-text {
+				text-wrap: pretty;
+			}
 		}
 
 		.configure-menu-item:hover {

frontend/src/pages/Integrations/IntegrationDetailPage/IntegrationDetailHeader.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable no-nested-ternary */
 import './IntegrationDetailPage.styles.scss';
 
-import { Button, Modal, Typography } from 'antd';
+import { Button, Modal, Tooltip, Typography } from 'antd';
 import installIntegration from 'api/Integrations/installIntegration';
 import { SOMETHING_WENT_WRONG } from 'constants/api';
 import dayjs from 'dayjs';
@@ -22,6 +22,7 @@ interface IntegrationDetailHeaderProps {
 	connectionState: ConnectionStates;
 	connectionData: IntegrationConnectionStatus;
 }
+// eslint-disable-next-line sonarjs/cognitive-complexity
 function IntegrationDetailHeader(
 	props: IntegrationDetailHeaderProps,
 ): JSX.Element {
@@ -154,19 +155,42 @@ function IntegrationDetailHeader(
 								<Typography.Text className="last-data">
 									Last recieved from
 								</Typography.Text>
-								<Typography.Text className="last-value">
+								<div className="connection-line" />
+								<Tooltip
+									title={latestData.last_received_from}
+									key={latestData.last_received_from}
+									placement="right"
+								>
+									<Typography.Text className="last-value" ellipsis>
 										{latestData.last_received_from}
 									</Typography.Text>
+								</Tooltip>
 							</div>
 							<div className="data-info">
 								<Typography.Text className="last-data">
 									Last recieved at
 								</Typography.Text>
-								<Typography.Text className="last-value">
+								<div className="connection-line" />
+								<Tooltip
+									title={
+										latestData.last_received_ts_ms
+											? // eslint-disable-next-line sonarjs/no-duplicate-string
+											  dayjs(latestData.last_received_ts_ms).format('DD MMM YYYY HH:mm')
+											: ''
+									}
+									key={
+										latestData.last_received_ts_ms
+											? dayjs(latestData.last_received_ts_ms).format('DD MMM YYYY HH:mm')
+											: ''
+									}
+									placement="right"
+								>
+									<Typography.Text className="last-value" ellipsis>
 										{latestData.last_received_ts_ms
 											? dayjs(latestData.last_received_ts_ms).format('DD MMM YYYY HH:mm')
 											: ''}
 									</Typography.Text>
+								</Tooltip>
 							</div>
 						</>
 					) : connectionState === ConnectionStates.TestingConnection ? (

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

@@ -53,9 +53,17 @@
 
 	.loading-integration-details {
 		display: flex;
-		height: 400px;
+		flex-direction: column;
-		justify-content: center;
+		gap: 16px;
-		align-items: center;
+
+		.skeleton-1 {
+			height: 125px;
+			width: 100%;
+		}
+		.skeleton-2 {
+			height: 250px;
+			width: 100%;
+		}
 	}
 
 	.all-integrations-btn {
@@ -254,6 +262,7 @@
 		border-radius: 4px;
 		border: 1px solid rgba(218, 85, 101, 0.2);
 		background: rgba(218, 85, 101, 0.06);
+		gap: 32px;
 
 		.unintall-integration-bar-text {
 			display: flex;
@@ -429,6 +438,15 @@
 		.data-info {
 			display: flex;
 			justify-content: space-between;
+			align-items: center;
+
+			.connection-line {
+				border: 1px dashed var(--bg-slate-200);
+				min-width: 20px;
+				height: 0px;
+				flex-grow: 1;
+				margin: 0px 8px;
+			}
 
 			.last-data {
 				color: var(--bg-vanilla-400);
@@ -447,6 +465,7 @@
 				font-style: normal;
 				font-weight: 400;
 				line-height: 18px; /* 150% */
+				max-width: 320px;
 			}
 		}
 		.testingConnection {
@@ -622,6 +641,9 @@
 
 		.connection-content {
 			.data-info {
+				.connection-line {
+					border: 1px dashed var(--bg-vanilla-400);
+				}
 				.last-data {
 					color: var(--bg-slate-400);
 				}

frontend/src/pages/Integrations/IntegrationDetailPage/IntegrationDetailPage.tsx

@@ -4,7 +4,7 @@
 import './IntegrationDetailPage.styles.scss';
 
 import { Color } from '@signozhq/design-tokens';
-import { Button, Typography } from 'antd';
+import { Button, Skeleton, Typography } from 'antd';
 import { useGetIntegration } from 'hooks/Integrations/useGetIntegration';
 import { useGetIntegrationStatus } from 'hooks/Integrations/useGetIntegrationStatus';
 import { defaultTo } from 'lodash-es';
@@ -71,7 +71,8 @@ function IntegrationDetailPage(props: IntegrationDetailPageProps): JSX.Element {
 
 			{loading ? (
 				<div className="loading-integration-details">
-					Please wait.. While we load the integration details
+					<Skeleton.Input active size="large" className="skeleton-1" />
+					<Skeleton.Input active size="large" className="skeleton-2" />
 				</div>
 			) : isError ? (
 				<div className="error-container">

frontend/src/pages/Integrations/Integrations.tsx

@@ -1,17 +1,38 @@
 import './Integrations.styles.scss';
 
-import { useState } from 'react';
+import useUrlQuery from 'hooks/useUrlQuery';
+import { useCallback, useMemo, useState } from 'react';
+import { useHistory, useLocation } from 'react-router-dom';
 
 import Header from './Header';
 import IntegrationDetailPage from './IntegrationDetailPage/IntegrationDetailPage';
 import IntegrationsList from './IntegrationsList';
 
 function Integrations(): JSX.Element {
-	const [selectedIntegration, setSelectedIntegration] = useState<string | null>(
+	const urlQuery = useUrlQuery();
-		null,
+	const history = useHistory();
+	const location = useLocation();
+
+	const selectedIntegration = useMemo(() => urlQuery.get('integration'), [
+		urlQuery,
+	]);
+
+	const setSelectedIntegration = useCallback(
+		(integration: string | null) => {
+			if (integration) {
+				urlQuery.set('integration', integration);
+			} else {
+				urlQuery.set('integration', '');
+			}
+			const generatedUrl = `${location.pathname}?${urlQuery.toString()}`;
+			history.push(generatedUrl);
+		},
+		[history, location.pathname, urlQuery],
 	);
 
-	const [activeDetailTab, setActiveDetailTab] = useState<string | null>(null);
+	const [activeDetailTab, setActiveDetailTab] = useState<string | null>(
+		'overview',
+	);
 
 	const [searchTerm, setSearchTerm] = useState<string>('');
 	return (