feat: add view templates option to dashboard menu

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",

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,19 @@ function DashboardsList(): JSX.Element {
 				),
 				key: '1',
 			},
+			{
+				label: (
+					<a
+						className="create-dashboard-menu-item"
+						href="https://github.com/SigNoz/dashboards"
+						target="_blank"
+						rel="noopener noreferrer"
+					>
+						<Github size={14} /> View templates <ExternalLink size={14} />
+					</a>
+				),
+				key: '2',
+			},
 		];
 
 		if (createNewDashboard) {

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}
+							>
+								<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"
 							>
-								{' '}
-								{t('upload_json_file')}
-							</Button>
-						</Upload>
+								<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}