From e7f9c3981bae5f31df862059b593509271465c06 Mon Sep 17 00:00:00 2001
From: Yunus M <myounis.ar@live.com>
Date: Thu, 23 Nov 2023 14:10:34 +0530
Subject: [PATCH] feat: show dashboard in full screen (#4040)

* fix: show dashboard in full screen

* fix: update label and remove border from grid in fullscreen mode
---
 frontend/package.json                         |  1 +
 frontend/public/locales/en/dashboard.json     |  1 +
 .../GridCardLayout/GridCardLayout.styles.scss |  7 ++
 .../GridCardLayout/GridCardLayout.tsx         | 94 +++++++++++--------
 frontend/yarn.lock                            | 12 +++
 5 files changed, 76 insertions(+), 39 deletions(-)
 create mode 100644 frontend/src/container/GridCardLayout/GridCardLayout.styles.scss

diff --git a/frontend/package.json b/frontend/package.json
index 0c79c47b1d9..25036d24fe4 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -82,6 +82,7 @@
 		"react-drag-listview": "2.0.0",
 		"react-error-boundary": "4.0.11",
 		"react-force-graph": "^1.43.0",
+		"react-full-screen": "1.1.1",
 		"react-grid-layout": "^1.3.4",
 		"react-helmet-async": "1.3.0",
 		"react-i18next": "^11.16.1",
diff --git a/frontend/public/locales/en/dashboard.json b/frontend/public/locales/en/dashboard.json
index 7c4b894e769..5602ec5592a 100644
--- a/frontend/public/locales/en/dashboard.json
+++ b/frontend/public/locales/en/dashboard.json
@@ -17,6 +17,7 @@
 	"layout_saved_successfully": "Layout saved successfully",
 	"add_panel": "Add Panel",
 	"save_layout": "Save Layout",
+	"full_view": "Full Screen View",
 	"variable_updated_successfully": "Variable updated successfully",
 	"error_while_updating_variable": "Error while updating variable",
 	"dashboard_has_been_updated": "Dashboard has been updated",
diff --git a/frontend/src/container/GridCardLayout/GridCardLayout.styles.scss b/frontend/src/container/GridCardLayout/GridCardLayout.styles.scss
new file mode 100644
index 00000000000..08de391e4ce
--- /dev/null
+++ b/frontend/src/container/GridCardLayout/GridCardLayout.styles.scss
@@ -0,0 +1,7 @@
+.fullscreen-grid-container {
+	overflow: auto;
+
+	.react-grid-layout {
+		border: none !important;
+	}
+}
diff --git a/frontend/src/container/GridCardLayout/GridCardLayout.tsx b/frontend/src/container/GridCardLayout/GridCardLayout.tsx
index e3a346ef82e..19d7244f5e8 100644
--- a/frontend/src/container/GridCardLayout/GridCardLayout.tsx
+++ b/frontend/src/container/GridCardLayout/GridCardLayout.tsx
@@ -1,3 +1,5 @@
+import './GridCardLayout.styles.scss';
+
 import { PlusOutlined, SaveFilled } from '@ant-design/icons';
 import { SOMETHING_WENT_WRONG } from 'constants/api';
 import { PANEL_TYPES } from 'constants/queryBuilder';
@@ -5,7 +7,9 @@ import { useUpdateDashboard } from 'hooks/dashboard/useUpdateDashboard';
 import useComponentPermission from 'hooks/useComponentPermission';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useNotifications } from 'hooks/useNotifications';
+import { FullscreenIcon } from 'lucide-react';
 import { useDashboard } from 'providers/Dashboard/Dashboard';
+import { FullScreen, useFullScreenHandle } from 'react-full-screen';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 import { AppState } from 'store/reducers';
@@ -34,6 +38,7 @@ function GraphLayout({ onAddPanelHandler }: GraphLayoutProps): JSX.Element {
 		isDashboardLocked,
 	} = useDashboard();
 	const { data } = selectedDashboard || {};
+	const handle = useFullScreenHandle();
 
 	const { widgets, variables } = data || {};
 
@@ -106,6 +111,15 @@ function GraphLayout({ onAddPanelHandler }: GraphLayoutProps): JSX.Element {
 		<>
 			{!isDashboardLocked && (
 				<ButtonContainer>
+					<Button
+						loading={updateDashboardMutation.isLoading}
+						onClick={handle.enter}
+						icon={<FullscreenIcon size={16} />}
+						disabled={updateDashboardMutation.isLoading}
+					>
+						{t('dashboard:full_view')}
+					</Button>
+
 					{saveLayoutPermission && (
 						<Button
 							loading={updateDashboardMutation.isLoading}
@@ -129,46 +143,48 @@ function GraphLayout({ onAddPanelHandler }: GraphLayoutProps): JSX.Element {
 				</ButtonContainer>
 			)}
 
-			<ReactGridLayout
-				cols={12}
-				rowHeight={100}
-				autoSize
-				width={100}
-				useCSSTransforms
-				isDraggable={!isDashboardLocked && addPanelPermission}
-				isDroppable={!isDashboardLocked && addPanelPermission}
-				isResizable={!isDashboardLocked && addPanelPermission}
-				allowOverlap={false}
-				onLayoutChange={setLayouts}
-				draggableHandle=".drag-handle"
-				layout={layouts}
-			>
-				{layouts.map((layout) => {
-					const { i: id } = layout;
-					const currentWidget = (widgets || [])?.find((e) => e.id === id);
-
-					return (
-						<CardContainer
-							className={isDashboardLocked ? '' : 'enable-resize'}
-							isDarkMode={isDarkMode}
-							key={id}
-							data-grid={layout}
-						>
-							<Card
-								className="grid-item"
-								$panelType={currentWidget?.panelTypes || PANEL_TYPES.TIME_SERIES}
+			<FullScreen handle={handle} className="fullscreen-grid-container">
+				<ReactGridLayout
+					cols={12}
+					rowHeight={100}
+					autoSize
+					width={100}
+					useCSSTransforms
+					isDraggable={!isDashboardLocked && addPanelPermission}
+					isDroppable={!isDashboardLocked && addPanelPermission}
+					isResizable={!isDashboardLocked && addPanelPermission}
+					allowOverlap={false}
+					onLayoutChange={setLayouts}
+					draggableHandle=".drag-handle"
+					layout={layouts}
+				>
+					{layouts.map((layout) => {
+						const { i: id } = layout;
+						const currentWidget = (widgets || [])?.find((e) => e.id === id);
+
+						return (
+							<CardContainer
+								className={isDashboardLocked ? '' : 'enable-resize'}
+								isDarkMode={isDarkMode}
+								key={id}
+								data-grid={layout}
 							>
-								<GridCard
-									widget={currentWidget || ({ id, query: {} } as Widgets)}
-									name={currentWidget?.id || ''}
-									headerMenuList={widgetActions}
-									variables={variables}
-								/>
-							</Card>
-						</CardContainer>
-					);
-				})}
-			</ReactGridLayout>
+								<Card
+									className="grid-item"
+									$panelType={currentWidget?.panelTypes || PANEL_TYPES.TIME_SERIES}
+								>
+									<GridCard
+										widget={currentWidget || ({ id, query: {} } as Widgets)}
+										name={currentWidget?.id || ''}
+										headerMenuList={widgetActions}
+										variables={variables}
+									/>
+								</Card>
+							</CardContainer>
+						);
+					})}
+				</ReactGridLayout>
+			</FullScreen>
 		</>
 	);
 }
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index a3c9a0449f5..c4fb7cd456f 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -7803,6 +7803,11 @@ fs.realpath@^1.0.0:
   resolved "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz"
   integrity sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==
 
+fscreen@^1.0.2:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/fscreen/-/fscreen-1.2.0.tgz#1a8c88e06bc16a07b473ad96196fb06d6657f59e"
+  integrity sha512-hlq4+BU0hlPmwsFjwGGzZ+OZ9N/wq9Ljg/sq3pX+2CD7hrJsX9tJgWWK/wiNTFM212CLHWhicOoqwXyZGGetJg==
+
 fsevents@2.3.2, fsevents@^2.3.2, fsevents@~2.3.2:
   version "2.3.2"
   resolved "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz"
@@ -12850,6 +12855,13 @@ react-force-graph@^1.43.0:
     prop-types "15"
     react-kapsule "2"
 
+react-full-screen@1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/react-full-screen/-/react-full-screen-1.1.1.tgz#b707d56891015a71c503a65dbab3086d75be97d7"
+  integrity sha512-xoEgkoTiN0dw9cjYYGViiMCBYbkS97BYb4bHPhQVWXj1UnOs8PZ1rPzpX+2HMhuvQV1jA5AF9GaRbO3fA5aZtg==
+  dependencies:
+    fscreen "^1.0.2"
+
 react-grid-layout@^1.3.4:
   version "1.3.4"
   resolved "https://registry.npmjs.org/react-grid-layout/-/react-grid-layout-1.3.4.tgz"