[pull] dev from KelvinTegelaar:dev

src/components/CippCards/CippBannerListCard.jsx

@@ -3,6 +3,7 @@ import { useState, useCallback } from "react";
 import {
   Box,
   Card,
+  Checkbox,
   Collapse,
   Divider,
   IconButton,
@@ -16,13 +17,34 @@ import { CippPropertyListCard } from "./CippPropertyListCard";
 import { CippDataTable } from "../CippTable/CippDataTable";
 
 export const CippBannerListCard = (props) => {
-  const { items = [], isCollapsible = false, isFetching = false, children, ...other } = props;
+  const {
+    items = [],
+    isCollapsible = false,
+    isFetching = false,
+    children,
+    onSelectionChange,
+    selectedItems = [],
+    ...other
+  } = props;
   const [expanded, setExpanded] = useState(null);
 
   const handleExpand = useCallback((itemId) => {
     setExpanded((prevState) => (prevState === itemId ? null : itemId));
   }, []);
 
+  const handleCheckboxChange = useCallback(
+    (itemId, checked) => {
+      if (onSelectionChange) {
+        if (checked) {
+          onSelectionChange([...selectedItems, itemId]);
+        } else {
+          onSelectionChange(selectedItems.filter((id) => id !== itemId));
+        }
+      }
+    },
+    [onSelectionChange, selectedItems]
+  );
+
   const hasItems = items.length > 0;
 
   if (isFetching) {
@@ -91,6 +113,16 @@ export const CippBannerListCard = (props) => {
                       alignItems="center"
                       sx={{ flex: 1, minWidth: 0 }}
                     >
+                      {onSelectionChange && (
+                        <Checkbox
+                          checked={selectedItems.includes(item.id)}
+                          onChange={(e) => {
+                            e.stopPropagation();
+                            handleCheckboxChange(item.id, e.target.checked);
+                          }}
+                          onClick={(e) => e.stopPropagation()}
+                        />
+                      )}
                       <Box
                         sx={{
                           alignItems: "center",
@@ -224,4 +256,6 @@ CippBannerListCard.propTypes = {
   ).isRequired,
   isCollapsible: PropTypes.bool,
   isFetching: PropTypes.bool,
+  onSelectionChange: PropTypes.func,
+  selectedItems: PropTypes.array,
 };

src/components/CippTestDetail/CippTestDetailOffCanvas.jsx

@@ -4,6 +4,7 @@ import { KeyboardArrowRight } from "@mui/icons-material";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import { Grid } from "@mui/system";
+import standardsData from "/src/data/standards.json";
 
 const getStatusColor = (status) => {
   switch (status?.toLowerCase()) {
@@ -46,6 +47,23 @@ const getImpactColor = (impact) => {
   }
 };
 
+const checkCIPPStandardAvailable = (testName) => {
+  if (!testName) return "No";
+  console.log(testName);
+  // Check if any standard's tag array contains a reference to this test
+  const hasStandard = standardsData.some((standard) => {
+    if (!standard.tag || !Array.isArray(standard.tag)) return false;
+    // Check if any tag matches the test name or contains it
+    return standard.tag.some((tag) => {
+      const tagLower = tag.toLowerCase();
+      const testLower = testName.toLowerCase();
+      return tagLower.includes(testLower) || testLower.includes(tagLower);
+    });
+  });
+
+  return hasStandard ? "Yes" : "No";
+};
+
 // Shared markdown styling for consistent rendering
 const markdownStyles = {
   "& a": {
@@ -109,7 +127,7 @@ export const CippTestDetailOffCanvas = ({ row }) => {
       <Card>
         <Grid container>
           <Grid
-            size={{ xs: 12, md: 4 }}
+            size={{ xs: 12, md: 3 }}
             sx={{
               borderBottom: (theme) => ({
                 xs: `1px solid ${theme.palette.divider}`,
@@ -123,7 +141,7 @@ export const CippTestDetailOffCanvas = ({ row }) => {
             <Stack alignItems="center" direction="row" spacing={1} sx={{ p: 1 }}>
               <Box>
                 <Typography color="text.secondary" variant="overline">
-                  Risk Level
+                  Risk
                 </Typography>
                 <Box>
                   <Chip label={row.Risk || "N/A"} color={getRiskColor(row.Risk)} size="small" />
@@ -132,7 +150,7 @@ export const CippTestDetailOffCanvas = ({ row }) => {
             </Stack>
           </Grid>
           <Grid
-            size={{ xs: 12, md: 4 }}
+            size={{ xs: 12, md: 3 }}
             sx={{
               borderBottom: (theme) => ({
                 xs: `1px solid ${theme.palette.divider}`,
@@ -159,15 +177,21 @@ export const CippTestDetailOffCanvas = ({ row }) => {
             </Stack>
           </Grid>
           <Grid
-            size={{ xs: 12, md: 4 }}
+            size={{ xs: 12, md: 3 }}
             sx={{
-              borderBottom: "none",
+              borderBottom: (theme) => ({
+                xs: `1px solid ${theme.palette.divider}`,
+                md: "none",
+              }),
+              borderRight: (theme) => ({
+                md: `1px solid ${theme.palette.divider}`,
+              }),
             }}
           >
             <Stack alignItems="center" direction="row" spacing={1} sx={{ p: 1 }}>
               <Box>
                 <Typography color="text.secondary" variant="overline">
-                  Implementation Effort
+                  Effort
                 </Typography>
                 <Box sx={{ mt: 0.5 }}>
                   <Chip
@@ -179,6 +203,27 @@ export const CippTestDetailOffCanvas = ({ row }) => {
               </Box>
             </Stack>
           </Grid>
+          <Grid
+            size={{ xs: 12, md: 3 }}
+            sx={{
+              borderBottom: "none",
+            }}
+          >
+            <Stack alignItems="center" direction="row" spacing={1} sx={{ p: 1 }}>
+              <Box>
+                <Typography color="text.secondary" variant="overline">
+                  Standard Available
+                </Typography>
+                <Box sx={{ mt: 0.5 }}>
+                  <Chip
+                    label={checkCIPPStandardAvailable(row.RowKey)}
+                    color={checkCIPPStandardAvailable(row.RowKey) === "Yes" ? "success" : "default"}
+                    size="small"
+                  />
+                </Box>
+              </Box>
+            </Stack>
+          </Grid>
         </Grid>
       </Card>
 

src/data/standards.json

@@ -1029,7 +1029,8 @@
       "EIDSCA.AP08",
       "EIDSCA.AP09",
       "Essential 8 (1175)",
-      "NIST CSF 2.0 (PR.AA-05)"
+      "NIST CSF 2.0 (PR.AA-05)",
+      "ZTNA21807"
     ],
     "helpText": "Disables users from being able to consent to applications, except for those specified in the field below",
     "docsDescription": "Requires users to get administrator consent before sharing data with applications. You can preapprove specific applications.",