From 2374997884c4bbf3ab60baa1b0531dfac2f58d10 Mon Sep 17 00:00:00 2001
From: amlannandy <amlannandy5@gmail.com>
Date: Wed, 4 Dec 2024 21:12:28 +0530
Subject: [PATCH] feat: add functionality to export dashboard as json from
 listing page

---
 .../ListOfDashboard/DashboardsList.tsx        | 28 +++++++++++++++++++
 .../DashboardDescription/index.tsx            |  2 +-
 2 files changed, 29 insertions(+), 1 deletion(-)

diff --git a/frontend/src/container/ListOfDashboard/DashboardsList.tsx b/frontend/src/container/ListOfDashboard/DashboardsList.tsx
index 0a5b3b5130..d45ddaebdd 100644
--- a/frontend/src/container/ListOfDashboard/DashboardsList.tsx
+++ b/frontend/src/container/ListOfDashboard/DashboardsList.tsx
@@ -27,6 +27,8 @@ import { AxiosError } from 'axios';
 import cx from 'classnames';
 import { ENTITY_VERSION_V4 } from 'constants/app';
 import ROUTES from 'constants/routes';
+import { sanitizeDashboardData } from 'container/NewDashboard/DashboardDescription';
+import { downloadObjectAsJson } from 'container/NewDashboard/DashboardDescription/utils';
 import { Base64Icons } from 'container/NewDashboard/DashboardSettings/General/utils';
 import dayjs from 'dayjs';
 import { useGetAllDashboard } from 'hooks/dashboard/useGetAllDashboard';
@@ -44,6 +46,7 @@ import {
 	EllipsisVertical,
 	Expand,
 	ExternalLink,
+	FileJson,
 	Github,
 	HdmiPort,
 	LayoutGrid,
@@ -450,6 +453,23 @@ function DashboardsList(): JSX.Element {
 					});
 				};
 
+				const handleJsonExport = (event: React.MouseEvent<HTMLElement>): void => {
+					event.stopPropagation();
+					event.preventDefault();
+					const selectedDashboardData = dashboards?.find(
+						(d) => d.uuid === dashboard.id,
+					);
+					if (selectedDashboardData) {
+						downloadObjectAsJson(
+							sanitizeDashboardData({
+								...selectedDashboardData.data,
+								uuid: selectedDashboardData.uuid,
+							}),
+							dashboard.name,
+						);
+					}
+				};
+
 				return (
 					<div className="dashboard-list-item" onClick={onClickHandler}>
 						<div className="title-with-action">
@@ -523,6 +543,14 @@ function DashboardsList(): JSX.Element {
 												>
 													Copy Link
 												</Button>
+												<Button
+													type="text"
+													className="action-btn"
+													icon={<FileJson size={12} />}
+													onClick={handleJsonExport}
+												>
+													Export JSON
+												</Button>
 											</section>
 											<section className="section-2">
 												<DeleteButton
diff --git a/frontend/src/container/NewDashboard/DashboardDescription/index.tsx b/frontend/src/container/NewDashboard/DashboardDescription/index.tsx
index 151fba7609..7845cf818e 100644
--- a/frontend/src/container/NewDashboard/DashboardDescription/index.tsx
+++ b/frontend/src/container/NewDashboard/DashboardDescription/index.tsx
@@ -65,7 +65,7 @@ interface DashboardDescriptionProps {
 	handle: FullScreenHandle;
 }
 
-function sanitizeDashboardData(
+export function sanitizeDashboardData(
 	selectedData: DashboardData,
 ): Omit<DashboardData, 'uuid'> {
 	if (!selectedData?.variables) {