From 33541a2ac081fc3d1c9c558bd297271df00de7fb Mon Sep 17 00:00:00 2001
From: Sudeep MP <sudipmelepunathilmp@gmail.com>
Date: Fri, 23 Aug 2024 11:25:04 +0100
Subject: [PATCH] feat: add view templates option to dashboard menu (#5696)

* feat: add view templates option to dashboard menu

* feat: increase dropdown overlay width
Set the dropdown overlay width to 200px to provide breathing space for the dropdown button.
Added flex to wrap the dropdown button to create space between the right icon and the left elements.

---------

Co-authored-by: Pranay Prateek <pranay@signoz.io>
---
 frontend/public/locales/en/dashboard.json     |  1 +
 .../ListOfDashboard/DashboardList.styles.scss |  2 +
 .../ListOfDashboard/DashboardsList.tsx        | 26 +++++++
 .../ListOfDashboard/ImportJSON/index.tsx      | 70 +++++++++++++------
 4 files changed, 77 insertions(+), 22 deletions(-)

diff --git a/frontend/public/locales/en/dashboard.json b/frontend/public/locales/en/dashboard.json
index d2e90237a9..26e8f289a9 100644
--- a/frontend/public/locales/en/dashboard.json
+++ b/frontend/public/locales/en/dashboard.json
@@ -1,6 +1,7 @@
 {
 	"create_dashboard": "Create Dashboard",
 	"import_json": "Import Dashboard JSON",
+	"view_template": "View templates",
 	"import_grafana_json": "Import Grafana JSON",
 	"copy_to_clipboard": "Copy To ClipBoard",
 	"download_json": "Download JSON",
diff --git a/frontend/src/container/ListOfDashboard/DashboardList.styles.scss b/frontend/src/container/ListOfDashboard/DashboardList.styles.scss
index ef4a7c0a67..cf9ec283d2 100644
--- a/frontend/src/container/ListOfDashboard/DashboardList.styles.scss
+++ b/frontend/src/container/ListOfDashboard/DashboardList.styles.scss
@@ -590,6 +590,8 @@
 }
 
 .new-dashboard-menu {
+	width: 200px;
+
 	.create-dashboard-menu-item {
 		display: flex;
 		align-items: center;
diff --git a/frontend/src/container/ListOfDashboard/DashboardsList.tsx b/frontend/src/container/ListOfDashboard/DashboardsList.tsx
index 8de34fdaf1..421c7e31c4 100644
--- a/frontend/src/container/ListOfDashboard/DashboardsList.tsx
+++ b/frontend/src/container/ListOfDashboard/DashboardsList.tsx
@@ -45,6 +45,8 @@ import {
 	Ellipsis,
 	EllipsisVertical,
 	Expand,
+	ExternalLink,
+	Github,
 	HdmiPort,
 	LayoutGrid,
 	Link2,
@@ -53,6 +55,8 @@ import {
 	RotateCw,
 	Search,
 } from 'lucide-react';
+// #TODO: lucide will be removing brand icons like Github in future, in that case we can use simple icons
+// see more: https://github.com/lucide-icons/lucide/issues/94
 import { handleContactSupport } from 'pages/Integrations/utils';
 import { useDashboard } from 'providers/Dashboard/Dashboard';
 import {
@@ -600,6 +604,28 @@ function DashboardsList(): JSX.Element {
 				),
 				key: '1',
 			},
+			{
+				label: (
+					<a
+						href="https://github.com/SigNoz/dashboards"
+						target="_blank"
+						rel="noopener noreferrer"
+					>
+						<Flex
+							justify="space-between"
+							align="center"
+							style={{ width: '100%' }}
+							gap="small"
+						>
+							<div className="create-dashboard-menu-item">
+								<Github size={14} /> View templates
+							</div>
+							<ExternalLink size={14} />
+						</Flex>
+					</a>
+				),
+				key: '2',
+			},
 		];
 
 		if (createNewDashboard) {
diff --git a/frontend/src/container/ListOfDashboard/ImportJSON/index.tsx b/frontend/src/container/ListOfDashboard/ImportJSON/index.tsx
index 9bf1db2051..62767e6799 100644
--- a/frontend/src/container/ListOfDashboard/ImportJSON/index.tsx
+++ b/frontend/src/container/ListOfDashboard/ImportJSON/index.tsx
@@ -4,7 +4,15 @@ import { red } from '@ant-design/colors';
 import { ExclamationCircleTwoTone } from '@ant-design/icons';
 import MEditor, { Monaco } from '@monaco-editor/react';
 import { Color } from '@signozhq/design-tokens';
-import { Button, Modal, Space, Typography, Upload, UploadProps } from 'antd';
+import {
+	Button,
+	Flex,
+	Modal,
+	Space,
+	Typography,
+	Upload,
+	UploadProps,
+} from 'antd';
 import logEvent from 'api/common/logEvent';
 import createDashboard from 'api/dashboard/create';
 import ROUTES from 'constants/routes';
@@ -13,7 +21,9 @@ import { MESSAGE } from 'hooks/useFeatureFlag';
 import { useNotifications } from 'hooks/useNotifications';
 import { getUpdatedLayout } from 'lib/dashboard/getUpdatedLayout';
 import history from 'lib/history';
-import { MonitorDot, MoveRight, X } from 'lucide-react';
+import { ExternalLink, Github, MonitorDot, MoveRight, X } from 'lucide-react';
+// #TODO: Lucide will be removing brand icons like GitHub in the future. In that case, we can use Simple Icons. https://simpleicons.org/
+// See more: https://github.com/lucide-icons/lucide/issues/94
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { generatePath } from 'react-router-dom';
@@ -174,27 +184,43 @@ function ImportJSON({
 					)}
 
 					<div className="action-btns-container">
-						<Upload
-							accept=".json"
-							showUploadList={false}
-							multiple={false}
-							onChange={onChangeHandler}
-							beforeUpload={(): boolean => false}
-							action="none"
-							data={jsonData}
-						>
-							<Button
-								type="default"
-								className="periscope-btn"
-								icon={<MonitorDot size={14} />}
-								onClick={(): void => {
-									logEvent('Dashboard List: Upload JSON file clicked', {});
-								}}
+						<Flex gap="small">
+							<Upload
+								accept=".json"
+								showUploadList={false}
+								multiple={false}
+								onChange={onChangeHandler}
+								beforeUpload={(): boolean => false}
+								action="none"
+								data={jsonData}
 							>
-								{' '}
-								{t('upload_json_file')}
-							</Button>
-						</Upload>
+								<Button
+									type="default"
+									className="periscope-btn"
+									icon={<MonitorDot size={14} />}
+									onClick={(): void => {
+										logEvent('Dashboard List: Upload JSON file clicked', {});
+									}}
+								>
+									{' '}
+									{t('upload_json_file')}
+								</Button>
+							</Upload>
+							<a
+								href="https://github.com/SigNoz/dashboards"
+								target="_blank"
+								rel="noopener noreferrer"
+							>
+								<Button
+									type="default"
+									className="periscope-btn"
+									icon={<Github size={14} />}
+								>
+									{t('view_template')}&nbsp;
+									<ExternalLink size={14} />
+								</Button>
+							</a>
+						</Flex>
 
 						<Button
 							// disabled={editorValue.length === 0}