Added Compatible Environments and playbook (#661)

* Added Compatible Environments and playbook

src/components/ModalForEnvsAndPlaybook/DetailedEnvironment.tsx

@@ -0,0 +1,54 @@
+import React from "react";
+import { Box, Typography, Grid } from "@mui/material";
+
+// biome-ignore lint/suspicious/noExplicitAny: <explanation>
+const DetailedEnvironment = ({ environmentMetadata, envName }: any) => {
+  // Find the environment that matches envName
+  const environment = environmentMetadata.environments.find(
+    (env: any) => env.name === envName
+  );
+
+  // If environment not found, show a message
+  if (!environment) {
+    return (
+      <Box sx={ { p: 2, backgroundColor: "#f5f5f5", borderRadius: 1 } }>
+        <Typography variant="h6" fontWeight="bold" textAlign="center" gutterBottom>
+          Environment Details
+        </Typography>
+        <Typography variant="body2" color="error" textAlign="center">
+          Environment "{ envName }" not found.
+        </Typography>
+      </Box>
+    );
+  }
+
+  // Define metadata structure
+  const details = [
+    { label: "Environment Name", value: environment.name },
+    { label: "Version", value: environment.version.tag },
+    { label: "Author", value: `${environment.author.name} (${environment.author.type})` },
+    { label: "Creation Date", value: environment.date_of_creation },
+    { label: "Last Update Date", value: environment.last_update_date },
+    { label: "Last Execution", value: `${environment.last_execution.name} (${environment.last_execution.status})` },
+    { label: "Execution Timestamp", value: environment.last_execution.timestamp },
+  ];
+
+  return (
+    <Box sx={ { p: 2, backgroundColor: "#f5f5f5", borderRadius: 1 } }>
+      <Typography variant="h6" fontWeight="bold" textAlign="center" gutterBottom>
+        Environment Details
+      </Typography>
+      <Grid container spacing={ 2 } >
+        { details.map((detail, index) => (
+          <Grid item xs={ 12 } sm={ 6 } key={ index }>
+            <Typography variant="body2">
+              <strong>{ detail.label }:</strong> { detail.value }
+            </Typography>
+          </Grid>
+        )) }
+      </Grid>
+    </Box>
+  );
+};
+
+export default DetailedEnvironment;

src/components/ModalForEnvsAndPlaybook/DetailedPlaybook.tsx

@@ -0,0 +1,122 @@
+import React, { useState } from "react";
+import {
+  Table,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  Paper,
+  TableSortLabel,
+  TableBody,
+  Collapse,
+  Box,
+  Typography,
+  Button,
+} from "@mui/material";
+import { ExpandMore} from "@mui/icons-material";
+import PlaybookInformation from "./PlaybookInformation";
+
+// biome-ignore lint/suspicious/noExplicitAny: <explanation>
+const DetailedPlaybook = ({environmentMetadata, envName, playbookMetadata}: any) => {
+  // Find the selected environment
+  const environment = environmentMetadata.environments.find(
+    (env: any) => env.name === envName
+  );
+
+  // If environment is not found, return a message
+  if (!environment) {
+    return (
+      <Typography variant="body2" color="error">
+        Environment "{ envName }" not found.
+      </Typography>
+    );
+  }
+
+  // State for playbook details toggle
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const [openRows, setOpenRows] = useState<{ [key: string]: boolean }>({});
+
+  // Function to toggle row expansion
+  const toggleRow = (name: string) => {
+    setOpenRows((prev) => ({ ...prev, [name]: !prev[name] }));
+  };
+  return (
+    <TableContainer component={ Paper } sx={ { maxHeight: "50vh", overflow: "auto" } }>
+      <Table stickyHeader>
+        <TableHead sx={ { display: "contents" } }>
+          <TableRow>
+            <TableCell
+              sx={ { color: "#637381", backgroundColor: "#F4F6F8" } }
+              align={ "left" }
+            >
+              <TableSortLabel
+                hideSortIcon
+                style={ {
+                  position: "relative",
+                  minWidth: "110px"
+                } }
+              >
+                Playbook Name
+              </TableSortLabel>
+            </TableCell>
+            <TableCell
+              sx={ { color: "#637381", backgroundColor: "#F4F6F8" } }
+              align={ "left" }
+            >
+              <TableSortLabel
+                hideSortIcon
+                style={ {
+                  position: "relative",
+                  minWidth: "110px"
+                } }
+              >
+                Version
+              </TableSortLabel>
+            </TableCell>
+            <TableCell
+              sx={ { color: "#637381", backgroundColor: "#F4F6F8" } }
+              align={ "left" }
+            >
+              <TableSortLabel
+                hideSortIcon
+                style={ {
+                  position: "relative",
+                  minWidth: "110px"
+                } }
+              >
+                Details
+              </TableSortLabel>
+            </TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          { environment.compatible_playbooks.map((playbook: any) => (
+            <React.Fragment key={ playbook.name }>
+              <TableRow>
+                <TableCell>{ playbook.name }</TableCell>
+                <TableCell>{ playbook.version.join(", ") }</TableCell>
+                <TableCell>
+                  <Button size="small" onClick={ () => toggleRow(playbook.name) } endIcon={ <ExpandMore /> }>
+                    { openRows[playbook.name] ? "Hide" : "Show" }
+                  </Button>
+                </TableCell>
+              </TableRow>
+              { /* Collapsible Row for Details */ }
+              <TableRow>
+                <TableCell colSpan={ 3 } sx={ { paddingBottom: 0, paddingTop: 0 } }>
+                  <Collapse in={ openRows[playbook.name] } timeout="auto" unmountOnExit>
+                    <Box sx={ { margin: 1 } }>
+                      <PlaybookInformation playbookMetadata={ playbookMetadata } playbookName={ playbook.name }/>
+                    </Box>
+                  </Collapse>
+                </TableCell>
+              </TableRow>
+            </React.Fragment>
+          )) }
+        </TableBody>
+      </Table>
+    </TableContainer>
+  );
+};
+
+export default DetailedPlaybook;