From 4be0508dd2cd3007a549c870ead707660a7f71b2 Mon Sep 17 00:00:00 2001
From: Sudeep MP <sudipmelepunathilmp@gmail.com>
Date: Fri, 25 Oct 2024 14:04:54 +0100
Subject: [PATCH] feat: add Request Dashboard button and improve dashboard list
 styles (#6251)

* feat: add Request Dashboard button and improve dashboard list styles

* feat: support for empty state and dashboard list state
---
 .../ListOfDashboard/DashboardList.styles.scss | 11 +++
 .../ListOfDashboard/DashboardsList.tsx        |  8 ++
 .../ListOfDashboard/RequestDashboardBtn.tsx   | 95 +++++++++++++++++++
 .../Integrations/Integrations.styles.scss     |  5 -
 4 files changed, 114 insertions(+), 5 deletions(-)
 create mode 100644 frontend/src/container/ListOfDashboard/RequestDashboardBtn.tsx

diff --git a/frontend/src/container/ListOfDashboard/DashboardList.styles.scss b/frontend/src/container/ListOfDashboard/DashboardList.styles.scss
index 6a5a148180..21d4a5e20d 100644
--- a/frontend/src/container/ListOfDashboard/DashboardList.styles.scss
+++ b/frontend/src/container/ListOfDashboard/DashboardList.styles.scss
@@ -5,6 +5,17 @@
 	justify-content: center;
 	width: 100%;
 
+	// overridding the request integration style to fix the spacing for dashboard list
+	.request-entity-container {
+		margin-bottom: 16px !important;
+		margin-top: 0 !important;
+	}
+
+	.integrations-content {
+		max-width: 100% !important;
+		width: 100% !important;
+	}
+
 	.dashboards-list-view-content {
 		width: calc(100% - 30px);
 		max-width: 836px;
diff --git a/frontend/src/container/ListOfDashboard/DashboardsList.tsx b/frontend/src/container/ListOfDashboard/DashboardsList.tsx
index 9f30f18c5d..5f6e5337b0 100644
--- a/frontend/src/container/ListOfDashboard/DashboardsList.tsx
+++ b/frontend/src/container/ListOfDashboard/DashboardsList.tsx
@@ -77,6 +77,7 @@ import { isCloudUser } from 'utils/app';
 
 import DashboardTemplatesModal from './DashboardTemplates/DashboardTemplatesModal';
 import ImportJSON from './ImportJSON';
+import { RequestDashboardBtn } from './RequestDashboardBtn';
 import { DeleteButton } from './TableComponents/DeleteButton';
 import {
 	DashboardDynamicColumns,
@@ -692,6 +693,13 @@ function DashboardsList(): JSX.Element {
 							Create and manage dashboards for your workspace.
 						</Typography.Text>
 					</Flex>
+					{isCloudUser() && (
+						<div className="integrations-container">
+							<div className="integrations-content">
+								<RequestDashboardBtn />
+							</div>
+						</div>
+					)}
 				</div>
 
 				{isDashboardListLoading ||
diff --git a/frontend/src/container/ListOfDashboard/RequestDashboardBtn.tsx b/frontend/src/container/ListOfDashboard/RequestDashboardBtn.tsx
new file mode 100644
index 0000000000..a2e09463ac
--- /dev/null
+++ b/frontend/src/container/ListOfDashboard/RequestDashboardBtn.tsx
@@ -0,0 +1,95 @@
+import '../../pages/Integrations/Integrations.styles.scss';
+
+import { LoadingOutlined } from '@ant-design/icons';
+import { Button, Input, Space, Typography } from 'antd';
+import logEvent from 'api/common/logEvent';
+import { useNotifications } from 'hooks/useNotifications';
+import { Check } from 'lucide-react';
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+export function RequestDashboardBtn(): JSX.Element {
+	const [
+		isSubmittingRequestForDashboard,
+		setIsSubmittingRequestForDashboard,
+	] = useState(false);
+
+	const [requestedDashboardName, setRequestedDashboardName] = useState('');
+
+	const { notifications } = useNotifications();
+	const { t } = useTranslation(['common']);
+
+	const handleRequestDashboardSubmit = async (): Promise<void> => {
+		try {
+			setIsSubmittingRequestForDashboard(true);
+			const response = await logEvent('Dashboard Requested', {
+				screen: 'Dashboard list page',
+				dashboard: requestedDashboardName,
+			});
+
+			if (response.statusCode === 200) {
+				notifications.success({
+					message: 'Dashboard Request Submitted',
+				});
+
+				setIsSubmittingRequestForDashboard(false);
+			} else {
+				notifications.error({
+					message:
+						response.error ||
+						t('something_went_wrong', {
+							ns: 'common',
+						}),
+				});
+
+				setIsSubmittingRequestForDashboard(false);
+			}
+		} catch (error) {
+			notifications.error({
+				message: t('something_went_wrong', {
+					ns: 'common',
+				}),
+			});
+
+			setIsSubmittingRequestForDashboard(false);
+		}
+	};
+
+	return (
+		<div className="request-entity-container">
+			<Typography.Text>
+				Can&apos;t find the dashboard you need? Request a new Dashboard.
+			</Typography.Text>
+
+			<div className="form-section">
+				<Space.Compact style={{ width: '100%' }}>
+					<Input
+						placeholder="Enter dashboard name..."
+						style={{ width: 300, marginBottom: 0 }}
+						value={requestedDashboardName}
+						onChange={(e): void => setRequestedDashboardName(e.target.value)}
+					/>
+					<Button
+						className="periscope-btn primary"
+						icon={
+							isSubmittingRequestForDashboard ? (
+								<LoadingOutlined />
+							) : (
+								<Check size={12} />
+							)
+						}
+						type="primary"
+						onClick={handleRequestDashboardSubmit}
+						disabled={
+							isSubmittingRequestForDashboard ||
+							!requestedDashboardName ||
+							requestedDashboardName?.trim().length === 0
+						}
+					>
+						Submit
+					</Button>
+				</Space.Compact>
+			</div>
+		</div>
+	);
+}
diff --git a/frontend/src/pages/Integrations/Integrations.styles.scss b/frontend/src/pages/Integrations/Integrations.styles.scss
index fe0eaa3c23..738f5153f9 100644
--- a/frontend/src/pages/Integrations/Integrations.styles.scss
+++ b/frontend/src/pages/Integrations/Integrations.styles.scss
@@ -15,7 +15,6 @@
 				font-style: normal;
 				line-height: 28px; /* 155.556% */
 				letter-spacing: -0.09px;
-				font-family: Inter;
 				font-weight: 500;
 			}
 
@@ -25,7 +24,6 @@
 				font-style: normal;
 				line-height: 20px; /* 142.857% */
 				letter-spacing: -0.07px;
-				font-family: Inter;
 				font-weight: 400;
 			}
 
@@ -129,7 +127,6 @@
 
 					.heading {
 						color: var(--bg-vanilla-100);
-						font-family: Inter;
 						font-size: 14px;
 						font-style: normal;
 						font-weight: 500;
@@ -140,7 +137,6 @@
 
 					.description {
 						color: var(--bg-vanilla-400);
-						font-family: Inter;
 						font-size: 12px;
 						font-style: normal;
 						font-weight: 400;
@@ -163,7 +159,6 @@
 					background: var(--bg-ink-200);
 					box-shadow: none;
 					color: var(--bg-vanilla-400);
-					font-family: Inter;
 					font-size: 12px;
 					font-style: normal;
 					font-weight: 400;