Dev to release

.github/workflows/Close_Stale_Issues_and_PRs.yml

@@ -13,6 +13,6 @@ jobs:
           stale-issue-message: 'This issue is stale because it has been open 10 days with no activity. We will close this issue soon. If you want this feature implemented you can contribute it. See: https://docs.cipp.app/dev-documentation/contributing-to-the-code . Please notify the team if you are working on this yourself.'
           close-issue-message: 'This issue was closed because it has been stalled for 14 days with no activity.'
           stale-issue-label: 'no-activity'
-          exempt-issue-labels: 'planned'
+          exempt-issue-labels: 'planned,bug'
           days-before-stale: 9
-          days-before-close: 14
+          days-before-close: 5

.vscode/extensions.json

@@ -0,0 +1,6 @@
+{
+    "recommendations": [
+        "editorconfig.editorconfig",
+        "streetsidesoftware.code-spell-checker",
+    ]
+}

cspell.json

@@ -0,0 +1,31 @@
+{
+    "version": "0.2",
+    "ignorePaths": [],
+    "dictionaryDefinitions": [],
+    "dictionaries": [],
+    "words": [
+      "CIPP",
+      "CIPP-API",
+      "Entra",
+      "Intune",
+      "GDAP",
+      "OBEE",
+      "AITM",
+      "Passwordless",
+      "Yubikey",
+      "Sherweb",
+      "Autotask",
+      "Datto",
+      "Syncro",
+      "ImmyBot",
+      "Choco",
+    ],
+    "ignoreWords": [
+      "CIPPAPI",
+      "locationcipp",
+      "TNEF",
+      "winmail",
+      "PSTN",
+    ],
+    "import": []
+}

public/version.json

@@ -1,3 +1,3 @@
 {
-  "version": "7.4.2"
+  "version": "7.5.0"
 }

src/components/CippCards/CippInfoBar.jsx

@@ -1,58 +1,102 @@
+import React, { useState } from "react";
 import { Box, Card, Stack, SvgIcon, Typography, Skeleton } from "@mui/material";
 import Grid from "@mui/material/Grid";
+import { CippOffCanvas } from "../CippComponents/CippOffCanvas";
+import { CippPropertyListCard } from "./CippPropertyListCard";
 
-export const CippInfoBar = ({ data, isFetching }) => (
-  <Card>
-    <Grid container>
-      {data.map((item) => (
-        <Grid
-          xs={12}
-          sm={6}
-          md={3}
-          key={item.name}
-          sx={{
-            borderBottom: (theme) => ({
-              xs: `1px solid ${theme.palette.divider}`,
-              md: "none",
-            }),
-            borderRight: (theme) => ({
-              md: `1px solid ${theme.palette.divider}`,
-            }),
-            "&:nth-of-type(3)": {
-              borderBottom: (theme) => ({
-                xs: `1px solid ${theme.palette.divider}`,
-                sm: "none",
-              }),
-            },
-            "&:nth-of-type(4)": {
-              borderBottom: "none",
-              borderRight: "none",
-            },
-          }}
-        >
-          <Stack alignItems="center" direction="row" spacing={2} sx={{ p: 2 }}>
-            {item?.icon && (
-              <SvgIcon color={item.color ? item.color : "primary"} fontSize="small">
-                {item.icon}
-              </SvgIcon>
-            )}
-            <Box
-              sx={() => {
-                if (!item?.icon) {
-                  return { pl: 2 };
-                }
+export const CippInfoBar = ({ data, isFetching }) => {
+  const [visibleIndex, setVisibleIndex] = useState(null);
+
+  return (
+    <Card>
+      <Grid container>
+        {data.map((item, index) => (
+          <>
+            <Grid
+              xs={12}
+              sm={6}
+              md={3}
+              key={item.name}
+              onClick={item.offcanvas ? () => setVisibleIndex(index) : undefined}
+              sx={{
+                cursor: item.offcanvas ? "pointer" : "default",
+                borderBottom: (theme) => ({
+                  xs: `1px solid ${theme.palette.divider}`,
+                  md: "none",
+                }),
+                borderRight: (theme) => ({
+                  md: `1px solid ${theme.palette.divider}`,
+                }),
+                "&:nth-of-type(3)": {
+                  borderBottom: (theme) => ({
+                    xs: `1px solid ${theme.palette.divider}`,
+                    sm: "none",
+                  }),
+                },
+                "&:nth-of-type(4)": {
+                  borderBottom: "none",
+                  borderRight: "none",
+                },
               }}
             >
-              <Typography color="text.secondary" variant="overline">
-                {item.name}
-              </Typography>
-              <Typography variant="h6">
-                {isFetching ? <Skeleton width={"100%"} /> : item.data}
-              </Typography>
-            </Box>
-          </Stack>
-        </Grid>
-      ))}
-    </Grid>
-  </Card>
-);
+              <Stack alignItems="center" direction="row" spacing={2} sx={{ p: 2 }}>
+                {item?.icon && (
+                  <SvgIcon color={item.color ? item.color : "primary"} fontSize="small">
+                    {item.icon}
+                  </SvgIcon>
+                )}
+                <Box
+                  sx={() => {
+                    if (!item?.icon) {
+                      return { pl: 2 };
+                    }
+                  }}
+                >
+                  <Typography color="text.secondary" variant="overline">
+                    {item.name}
+                  </Typography>
+                  <Typography variant="h6">
+                    {isFetching ? <Skeleton width={"100%"} /> : item.data}
+                  </Typography>
+                </Box>
+              </Stack>
+            </Grid>
+            {item.offcanvas && (
+              <>
+                {console.log("item.offcanvas", item.offcanvas)}
+                <CippOffCanvas
+                  title={item?.offcanvas?.title || "Details"}
+                  size="md"
+                  visible={visibleIndex === index}
+                  onClose={() => setVisibleIndex(null)}
+                >
+                  <Box
+                    sx={{
+                      overflowY: "auto",
+                      maxHeight: "100%",
+                      display: "flex",
+                      flexDirection: "column",
+                    }}
+                  >
+                    <Grid container spacing={1}>
+                      <Grid item xs={12}>
+                        {item?.offcanvas?.propertyItems?.length > 0 && (
+                          <CippPropertyListCard
+                            isFetching={isFetching}
+                            align="vertical"
+                            title={item?.offcanvas?.title}
+                            propertyItems={item.offcanvas.propertyItems ?? []}
+                          />
+                        )}
+                      </Grid>
+                    </Grid>
+                  </Box>
+                </CippOffCanvas>
+              </>
+            )}
+          </>
+        ))}
+      </Grid>
+    </Card>
+  );
+};

src/components/CippComponents/BPASyncDialog.jsx

@@ -0,0 +1,92 @@
+import React, { useState } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogTitle,
+  Button,
+  DialogActions,
+  Alert,
+  CircularProgress,
+} from "@mui/material";
+import { CheckCircle, Error, Sync } from "@mui/icons-material";
+import { useForm, FormProvider } from "react-hook-form";
+import { CippFormTenantSelector } from "./CippFormTenantSelector";
+import { ApiPostCall } from "/src/api/ApiCall";
+import { CippApiResults } from "./CippApiResults";
+
+export const BPASyncDialog = ({ createDialog }) => {
+  const methods = useForm({
+    defaultValues: {
+      tenantFilter: {
+        value: "AllTenants",
+        label: "*All Tenants",
+      },
+    },
+  });
+
+  // Use methods for form handling and control
+  const { handleSubmit, control } = methods;
+
+  const [tenantId, setTenantId] = useState("");
+  const [isSyncing, setIsSyncing] = useState(false);
+
+  // Use ApiGetCall instead of useApiCall
+  const bpaSyncResults = ApiPostCall({
+    urlfromdata: true,
+  });
+
+  const handleForm = (values) => {
+    setTenantId(values.tenantFilter || "");
+    setIsSyncing(true);
+
+    bpaSyncResults.mutate({
+      url: "/api/ExecBPA",
+      queryKey: `bpa-sync-${tenantId}`,
+      data: tenantId ? { TenantFilter: tenantId } : {},
+    });
+  };
+
+  // Reset syncing state when dialog is closed
+  const handleClose = () => {
+    setIsSyncing(false);
+    createDialog.handleClose();
+  };
+
+  return (
+    <Dialog open={createDialog.open} onClose={handleClose} maxWidth="sm" fullWidth>
+      <FormProvider {...methods}>
+        <form onSubmit={handleSubmit(handleForm)}>
+          <DialogTitle>Force BPA Sync</DialogTitle>
+          <DialogContent>
+            <div className="mb-3">
+              <p>
+                This will force a Best Practice Analyzer (BPA) sync. Select a tenant (or all
+                tenants) below.
+              </p>
+              <CippFormTenantSelector
+                formControl={control}
+                name="tenantFilter"
+                required={false}
+                disableClearable={false}
+                allTenants={true}
+                type="single"
+              />
+            </div>
+            <CippApiResults apiObject={bpaSyncResults} alertSx={{ mt: 2 }} />
+          </DialogContent>
+          <DialogActions>
+            <Button onClick={handleClose}>Cancel</Button>
+            <Button
+              type="submit"
+              variant="contained"
+              disabled={isSyncing && bpaSyncResults.isLoading}
+              startIcon={<Sync />}
+            >
+              Sync BPA
+            </Button>
+          </DialogActions>
+        </form>
+      </FormProvider>
+    </Dialog>
+  );
+};

src/components/CippComponents/CippApiDialog.jsx

@@ -3,7 +3,7 @@ import { Button, Dialog, DialogActions, DialogContent, DialogTitle, Grid } from
 import { Stack } from "@mui/system";
 import { CippApiResults } from "./CippApiResults";
 import { ApiGetCall, ApiPostCall } from "../../api/ApiCall";
-import { useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { useSettings } from "../../hooks/use-settings";
 import CippFormComponent from "./CippFormComponent";
@@ -284,6 +284,10 @@ export const CippApiDialog = (props) => {
 
   const [linkClicked, setLinkClicked] = useState(false);
 
+  useEffect(() => {
+    setLinkClicked(false);
+  }, [api.link]);
+
   useEffect(() => {
     if (api.link && !linkClicked && row && Object.keys(row).length > 0) {
       const timeoutId = setTimeout(() => {
@@ -319,18 +323,40 @@ export const CippApiDialog = (props) => {
   };
 
   var confirmText;
-  if (typeof api?.confirmText === "string" && !Array.isArray(row)) {
-    confirmText = api.confirmText.replace(/\[([^\]]+)\]/g, (_, key) => {
-      return getNestedValue(row, key) || `[${key}]`;
-    });
-  } else if (Array.isArray(row) && row.length > 1) {
-    confirmText = api.confirmText.replace(/\[([^\]]+)\]/g, "the selected rows");
-  } else if (Array.isArray(row) && row.length === 1) {
-    confirmText = api.confirmText.replace(/\[([^\]]+)\]/g, (_, key) => {
-      return getNestedValue(row[0], key) || `[${key}]`;
-    });
+  if (typeof api?.confirmText === "string") {
+    if (!Array.isArray(row)) {
+      confirmText = api.confirmText.replace(/\[([^\]]+)\]/g, (_, key) => {
+        return getNestedValue(row, key) || `[${key}]`;
+      });
+    } else if (row.length > 1) {
+      confirmText = api.confirmText.replace(/\[([^\]]+)\]/g, "the selected rows");
+    } else if (row.length === 1) {
+      confirmText = api.confirmText.replace(/\[([^\]]+)\]/g, (_, key) => {
+        return getNestedValue(row[0], key) || `[${key}]`;
+      });
+    }
   } else {
-    confirmText = api.confirmText;
+    // Handle JSX/Component confirmText
+    const replaceTextInElement = (element) => {
+      if (!element) return element;
+      if (typeof element === "string") {
+        if (Array.isArray(row) && row.length > 1) {
+          return element.replace(/\[([^\]]+)\]/g, "the selected rows");
+        } else if (Array.isArray(row) && row.length === 1) {
+          return element.replace(
+            /\[([^\]]+)\]/g,
+            (_, key) => getNestedValue(row[0], key) || `[${key}]`
+          );
+        }
+        return element.replace(/\[([^\]]+)\]/g, (_, key) => getNestedValue(row, key) || `[${key}]`);
+      }
+      if (React.isValidElement(element)) {
+        const newChildren = React.Children.map(element.props.children, replaceTextInElement);
+        return React.cloneElement(element, {}, newChildren);
+      }
+      return element;
+    };
+    confirmText = replaceTextInElement(api?.confirmText);
   }
 
   return (

src/components/CippComponents/CippApiResults.jsx

@@ -1,4 +1,4 @@
-import { Close, Download, RouterOutlined } from "@mui/icons-material";
+import { Close, Download } from "@mui/icons-material";
 import {
   Alert,
   CircularProgress,