feat: add template filter logic

frontend/src/container/ListOfDashboard/DashboardTemplates/DashboardTemplatesModal.styles.scss

@@ -11,6 +11,15 @@
 		backdrop-filter: blur(20px);
 
 		padding: 0;
+		height: 72vh;
+
+		.ant-modal-body {
+			height: 100%;
+		}
+	}
+
+	.new-dashboard-templates-content-container {
+		height: 100%;
 	}
 
 	.new-dashboard-templates-content-header {
@@ -19,6 +28,8 @@
 		align-items: center;
 		justify-content: space-between;
 		border-bottom: 1px solid var(--Slate-500, #161922);
+		height: 60px;
+		box-sizing: border-box;
 	}
 
 	.new-dashboard-templates-content {
@@ -26,18 +37,33 @@
 		display: flex;
 		position: relative;
 
+		height: calc(100% - 60px);
+
 		.new-dashboard-templates-list {
 			padding: 16px 8px;
 			height: 100%;
 			width: 25%;
-			box-sizing: border-box;
 			border-right: 1px solid var(--Slate-500, #161922);
 
+			.new-dashboard-templates-search {
+				height: 32px;
+				margin-bottom: 16px;
+			}
+
 			.templates-list {
 				display: flex;
 				flex-direction: column;
 				gap: 8px;
-				padding: 16px 0;
+				padding-bottom: 16px;
+				overflow-y: auto;
+				box-sizing: border-box;
+
+				height: calc(100% - 64px);
+
+				&::-webkit-scrollbar {
+					height: 1rem;
+					width: 0.1rem;
+				}
 
 				.template-list-item {
 					display: flex;
@@ -143,7 +169,7 @@
 					padding: 24px;
 					border: 1px solid var(--bg-ink-50);
 					background: var(--bg-ink-300);
-					max-height: 440px;
+					max-height: 100%;
 					object-fit: contain;
 				}
 			}

frontend/src/container/ListOfDashboard/DashboardTemplates/DashboardTemplatesModal.tsx

@@ -17,9 +17,12 @@ import PostgreSQLIcon from 'assets/CustomIcons/PostgreSQLIcon';
 import RedisIcon from 'assets/CustomIcons/RedisIcon';
 import cx from 'classnames';
 import { ConciergeBell, DraftingCompass, Drill, Plus, X } from 'lucide-react';
-import { useState } from 'react';
+import { ChangeEvent, useState } from 'react';
+import { DashboardTemplate } from 'types/api/dashboard/getAll';
 
-const templatesList = [
+import { filterTemplates } from '../utils';
+
+const templatesList: DashboardTemplate[] = [
 	{
 		name: 'Blank dashboard',
 		icon: <Drill />,
@@ -128,6 +131,16 @@ export default function DashboardTemplatesModal({
 		templatesList[0],
 	);
 
+	const [dashboardTemplates, setDashboardTemplates] = useState(templatesList);
+
+	const handleDashboardTemplateSearch = (
+		event: ChangeEvent<HTMLInputElement>,
+	) => {
+		const searchText = event.target.value;
+		const filteredTemplates = filterTemplates(searchText, templatesList);
+		setDashboardTemplates(filteredTemplates);
+	};
+
 	return (
 		<Modal
 			wrapClassName="new-dashboard-templates-modal"
@@ -136,7 +149,7 @@ export default function DashboardTemplatesModal({
 			closable={false}
 			footer={null}
 			destroyOnClose
-			width="70vw"
+			width="60vw"
 		>
 			<div className="new-dashboard-templates-content-container">
 				<div className="new-dashboard-templates-content-header">
@@ -150,10 +163,11 @@ export default function DashboardTemplatesModal({
 						<Input
 							className="new-dashboard-templates-search"
 							placeholder="🔍 Search..."
+							onChange={handleDashboardTemplateSearch}
 						/>
 
 						<div className="templates-list">
-							{templatesList.map((template) => (
+							{dashboardTemplates.map((template) => (
 								<div
 									className={cx(
 										'template-list-item',

frontend/src/container/ListOfDashboard/utils.ts

@@ -1,4 +1,4 @@
-import { Dashboard } from 'types/api/dashboard/getAll';
+import { Dashboard, DashboardTemplate } from 'types/api/dashboard/getAll';
 
 export const filterDashboard = (
 	searchValue: string,
@@ -25,3 +25,17 @@ export const filterDashboard = (
 		});
 	});
 };
+
+export const filterTemplates = (
+	searchValue: string,
+	dashboardList: DashboardTemplate[],
+): DashboardTemplate[] => {
+	const searchValueLowerCase = searchValue?.toLowerCase();
+
+	return dashboardList.filter((item: DashboardTemplate) => {
+		const { name } = item;
+
+		// Check if any property value contains the searchValue
+		return name.toLowerCase().includes(searchValueLowerCase);
+	});
+};

frontend/src/types/api/dashboard/getAll.ts

@@ -54,6 +54,14 @@ export interface Dashboard {
 	isLocked?: boolean;
 }
 
+export interface DashboardTemplate {
+	name: string;
+	icon: React.ReactElement;
+	id: string;
+	description: string;
+	previewImage: string;
+}
+
 export interface DashboardData {
 	uuid?: string;
 	description?: string;