From 652bd52ea7ba8408b697150d44a229f62a4efa49 Mon Sep 17 00:00:00 2001
From: Palash Gupta <palashgdev@gmail.com>
Date: Tue, 11 Jul 2023 10:54:33 +0530
Subject: [PATCH] feat: navigation to new explorer from old page are updated
 (#3093)

---
 .../src/components/ExplorerCard/index.tsx     | 27 ++++++++++
 frontend/src/components/TextToolTip/styles.ts |  2 +-
 .../container/TopNav/NewExplorerCTA/config.ts |  3 ++
 .../container/TopNav/NewExplorerCTA/index.tsx | 50 +++++++++++++++++++
 frontend/src/container/TopNav/index.tsx       | 13 ++++-
 frontend/src/pages/LogsExplorer/index.tsx     |  5 +-
 frontend/src/pages/TracesExplorer/index.tsx   |  5 +-
 7 files changed, 100 insertions(+), 5 deletions(-)
 create mode 100644 frontend/src/components/ExplorerCard/index.tsx
 create mode 100644 frontend/src/container/TopNav/NewExplorerCTA/config.ts
 create mode 100644 frontend/src/container/TopNav/NewExplorerCTA/index.tsx

diff --git a/frontend/src/components/ExplorerCard/index.tsx b/frontend/src/components/ExplorerCard/index.tsx
new file mode 100644
index 0000000000..fd8f3ceb81
--- /dev/null
+++ b/frontend/src/components/ExplorerCard/index.tsx
@@ -0,0 +1,27 @@
+import { Card, Space, Typography } from 'antd';
+import TextToolTip from 'components/TextToolTip';
+
+function ExplorerCard({ children }: Props): JSX.Element {
+	return (
+		<Card
+			size="small"
+			title={
+				<Space>
+					<Typography>Query Builder</Typography>
+					<TextToolTip
+						url="https://signoz.io/docs/userguide/query-builder/?utm_source=product&utm_medium=new-query-builder"
+						text="More details on how to use query builder"
+					/>
+				</Space>
+			}
+		>
+			{children}
+		</Card>
+	);
+}
+
+interface Props {
+	children: React.ReactNode;
+}
+
+export default ExplorerCard;
diff --git a/frontend/src/components/TextToolTip/styles.ts b/frontend/src/components/TextToolTip/styles.ts
index bb2532182d..83e318a8ef 100644
--- a/frontend/src/components/TextToolTip/styles.ts
+++ b/frontend/src/components/TextToolTip/styles.ts
@@ -1 +1 @@
-export const style = { fontSize: '1.3125rem' };
+export const style = { fontSize: '1rem' };
diff --git a/frontend/src/container/TopNav/NewExplorerCTA/config.ts b/frontend/src/container/TopNav/NewExplorerCTA/config.ts
new file mode 100644
index 0000000000..783f576142
--- /dev/null
+++ b/frontend/src/container/TopNav/NewExplorerCTA/config.ts
@@ -0,0 +1,3 @@
+export const RIBBON_STYLES = {
+	top: '-0.75rem',
+};
diff --git a/frontend/src/container/TopNav/NewExplorerCTA/index.tsx b/frontend/src/container/TopNav/NewExplorerCTA/index.tsx
new file mode 100644
index 0000000000..93283b34a8
--- /dev/null
+++ b/frontend/src/container/TopNav/NewExplorerCTA/index.tsx
@@ -0,0 +1,50 @@
+import { CompassOutlined } from '@ant-design/icons';
+import { Badge, Button } from 'antd';
+import ROUTES from 'constants/routes';
+import history from 'lib/history';
+import { useMemo } from 'react';
+import { useLocation } from 'react-router-dom';
+
+import { RIBBON_STYLES } from './config';
+
+function NewExplorerCTA(): JSX.Element | null {
+	const location = useLocation();
+
+	const isTraceOrLogsExplorerPage = useMemo(
+		() => location.pathname === ROUTES.LOGS || location.pathname === ROUTES.TRACE,
+		[location.pathname],
+	);
+
+	const onClickHandler = (): void => {
+		if (location.pathname === ROUTES.LOGS) {
+			history.push(ROUTES.LOGS_EXPLORER);
+		} else if (location.pathname === ROUTES.TRACE) {
+			history.push(ROUTES.TRACES_EXPLORER);
+		}
+	};
+
+	const buttonText = useMemo(
+		() =>
+			`Try new ${ROUTES.LOGS === location.pathname ? 'Logs' : 'Traces'} Explorer`,
+		[location.pathname],
+	);
+
+	if (!isTraceOrLogsExplorerPage) {
+		return null;
+	}
+
+	return (
+		<Badge.Ribbon style={RIBBON_STYLES} text="New">
+			<Button
+				icon={<CompassOutlined />}
+				onClick={onClickHandler}
+				danger
+				type="primary"
+			>
+				{buttonText}
+			</Button>
+		</Badge.Ribbon>
+	);
+}
+
+export default NewExplorerCTA;
diff --git a/frontend/src/container/TopNav/index.tsx b/frontend/src/container/TopNav/index.tsx
index 38efc91466..a481ce77d4 100644
--- a/frontend/src/container/TopNav/index.tsx
+++ b/frontend/src/container/TopNav/index.tsx
@@ -1,4 +1,4 @@
-import { Col } from 'antd';
+import { Col, Row, Space } from 'antd';
 import ROUTES from 'constants/routes';
 import { useMemo } from 'react';
 import { matchPath, useHistory } from 'react-router-dom';
@@ -6,6 +6,7 @@ import { matchPath, useHistory } from 'react-router-dom';
 import ShowBreadcrumbs from './Breadcrumbs';
 import DateTimeSelector from './DateTimeSelection';
 import { routesToSkip } from './DateTimeSelection/config';
+import NewExplorerCTA from './NewExplorerCTA';
 import { Container } from './styles';
 
 function TopNav(): JSX.Element | null {
@@ -36,7 +37,15 @@ function TopNav(): JSX.Element | null {
 
 			{!isRouteToSkip && (
 				<Col span={8}>
-					<DateTimeSelector />
+					<Row justify="end">
+						<Space align="start" size={60} direction="horizontal">
+							<NewExplorerCTA />
+
+							<div>
+								<DateTimeSelector />
+							</div>
+						</Space>
+					</Row>
 				</Col>
 			)}
 		</Container>
diff --git a/frontend/src/pages/LogsExplorer/index.tsx b/frontend/src/pages/LogsExplorer/index.tsx
index 3e6613ed77..229ab2f6a8 100644
--- a/frontend/src/pages/LogsExplorer/index.tsx
+++ b/frontend/src/pages/LogsExplorer/index.tsx
@@ -1,4 +1,5 @@
 import { Col, Row } from 'antd';
+import ExplorerCard from 'components/ExplorerCard';
 import LogExplorerQuerySection from 'container/LogExplorerQuerySection';
 import LogsExplorerViews from 'container/LogsExplorerViews';
 
@@ -10,7 +11,9 @@ function LogsExplorer(): JSX.Element {
 		<WrapperStyled>
 			<Row gutter={[0, 16]}>
 				<Col xs={24}>
-					<LogExplorerQuerySection />
+					<ExplorerCard>
+						<LogExplorerQuerySection />
+					</ExplorerCard>
 				</Col>
 				<Col xs={24}>
 					<LogsExplorerViews />
diff --git a/frontend/src/pages/TracesExplorer/index.tsx b/frontend/src/pages/TracesExplorer/index.tsx
index 378e09d585..f5cff0dec0 100644
--- a/frontend/src/pages/TracesExplorer/index.tsx
+++ b/frontend/src/pages/TracesExplorer/index.tsx
@@ -1,5 +1,6 @@
 import { Tabs } from 'antd';
 import axios from 'axios';
+import ExplorerCard from 'components/ExplorerCard';
 import { QueryParams } from 'constants/query';
 import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
 import { queryParamNamesMap } from 'constants/queryBuilderQueryNames';
@@ -177,7 +178,9 @@ function TracesExplorer(): JSX.Element {
 
 	return (
 		<>
-			<QuerySection />
+			<ExplorerCard>
+				<QuerySection />
+			</ExplorerCard>
 
 			<Container>
 				<ActionsWrapper>