From 45a3ea2da0ac56ed8d51cf760844ad2e63d9680d Mon Sep 17 00:00:00 2001
From: Owaise Imdad <owaiseimdad@gmail.com>
Date: Sat, 15 Mar 2025 23:26:10 +0530
Subject: [PATCH] Refactored and moved the config row component to main
 conponents folders to be reused.

---
 .../Components/ConfigRow/index.jsx            | 21 ++++++++++++++---
 .../Components/MonitorsConfig/index.jsx       | 23 +++++++++++++++++--
 2 files changed, 39 insertions(+), 5 deletions(-)
 rename src/{Pages/Maintenance/CreateMaintenance => }/Components/ConfigRow/index.jsx (57%)

diff --git a/src/Pages/Maintenance/CreateMaintenance/Components/ConfigRow/index.jsx b/src/Components/ConfigRow/index.jsx
similarity index 57%
rename from src/Pages/Maintenance/CreateMaintenance/Components/ConfigRow/index.jsx
rename to src/Components/ConfigRow/index.jsx
index 93709ef1e..c19d9ac5a 100644
--- a/src/Pages/Maintenance/CreateMaintenance/Components/ConfigRow/index.jsx
+++ b/src/Components/ConfigRow/index.jsx
@@ -1,7 +1,22 @@
 import { Box, Stack, Typography } from "@mui/material";
 import PropTypes from "prop-types";
 import { useTheme } from "@emotion/react";
-import ConfigBox from "../../../../../Components/ConfigBox";
+import ConfigBox from "../ConfigBox";
+
+/**
+ * ConfigRow is a styled container used to layout content in a row format with specific padding, border, and spacing.
+ * It serves as the wrapper for ConfigBox, with the left section displaying the title and description,
+ * and the right section displaying the children.
+ * 
+ * @component
+ * @example
+ * return (
+ *   <ConfigBox>
+ *     <div>Left content (Title + Description)</div>
+ *     <div>Right content (Children)</div>
+ *   </ConfigBox>
+ * );
+ */
 
 const ConfigRow = ({ title, description, children }) => {
   const theme = useTheme();
@@ -28,7 +43,7 @@ const ConfigRow = ({ title, description, children }) => {
 ConfigRow.propTypes = {
   title: PropTypes.string.isRequired,
   description: PropTypes.string,
-  children: PropTypes.node
+  children: PropTypes.node,
 };
 
-export default ConfigRow;
\ No newline at end of file
+export default ConfigRow;
diff --git a/src/Pages/Maintenance/CreateMaintenance/Components/MonitorsConfig/index.jsx b/src/Pages/Maintenance/CreateMaintenance/Components/MonitorsConfig/index.jsx
index 532e48f8d..e792734ff 100644
--- a/src/Pages/Maintenance/CreateMaintenance/Components/MonitorsConfig/index.jsx
+++ b/src/Pages/Maintenance/CreateMaintenance/Components/MonitorsConfig/index.jsx
@@ -1,7 +1,23 @@
 import PropTypes from "prop-types";
-import ConfigRow from "../ConfigRow";
 import Search from "../../../../../Components/Inputs/Search";
 import { useState } from "react";
+import ConfigRow from "../../../../../Components/ConfigRow";
+
+/**
+ * MonitorsConfig is a component that allows users to select and apply a maintenance window to a list of monitors.
+ * It provides a search input to filter monitors and select multiple options. The selected monitors are passed
+ * to the parent via the `onSelectMonitors` callback.
+ *
+ *
+ * @component
+ *
+ * @param {Array} props.monitors - List of available monitors that can be selected.
+ * @param {Array} props.selectedMonitors - List of monitors currently selected for applying the maintenance window.
+ * @param {string} [props.error] - Optional error message that will be displayed if there's an error in monitor selection.
+ * @param {boolean} props.isEditMode - A boolean flag indicating if the component is in edit mode (disabled search/input when true).
+ * @param {Function} props.onSelectMonitors - Callback function that is invoked when monitors are selected or deselected.
+ * @param {string} [props.secondaryLabel] - Optional label or description that provides additional context for the monitor search.
+ */
 
 const MonitorsConfig = ({
 	monitors,
@@ -17,7 +33,10 @@ const MonitorsConfig = ({
 	};
 
 	return (
-		<ConfigRow title="Monitors to apply maintenance window to">
+		<ConfigRow
+			title="Monitors for maintenance"
+			description="Select monitors to apply the maintenance window to. Use the search field to filter and choose multiple monitors."
+		>
 			<Search
 				id={"monitors"}
 				label="Add monitors"