[pull] dev from KelvinTegelaar:dev

src/components/CippCards/CippButtonCard.jsx

@@ -42,8 +42,12 @@ export default function CippButtonCard({
     <Card variant={variant} sx={cardSx}>
       {component === "card" && (
         <>
-          <CardHeader action={cardActions} title={title} />
-          <Divider />
+          {title && (
+            <>
+              <CardHeader action={cardActions} title={title} />
+              <Divider />
+            </>
+          )}
           <CardContent style={{ marginBottom: "auto" }}>
             {isFetching ? <Skeleton /> : children}
           </CardContent>

src/components/CippComponents/CippCodeBlock.jsx

@@ -48,13 +48,14 @@ export const CippCodeBlock = (props) => {
       {type === "editor" && (
         <Editor
           defaultLanguage={language}
-          defaultValue={code}
+          value={code}
           theme={currentTheme === "dark" ? "vs-dark" : "vs-light"}
           height={editorHeight}
           options={{
             wordWrap: true,
             lineNumbers: showLineNumbers ? "on" : "off",
             minimap: { enabled: showLineNumbers },
+            readOnly: true,
           }}
           {...other}
         />

src/components/CippComponents/CippOffCanvas.jsx

@@ -23,6 +23,8 @@ export const CippOffCanvas = (props) => {
     onNavigateDown,
     canNavigateUp = false,
     canNavigateDown = false,
+    contentPadding = 2,
+    keepMounted = false,
   } = props;
 
   const mdDown = useMediaQuery((theme) => theme.breakpoints.down("md"));
@@ -80,7 +82,7 @@ export const CippOffCanvas = (props) => {
           sx: { width: drawerWidth },
         }}
         ModalProps={{
-          keepMounted: false,
+          keepMounted: keepMounted,
         }}
         anchor={"right"}
         open={visible}
@@ -152,7 +154,13 @@ export const CippOffCanvas = (props) => {
                 sx={{ flexGrow: 1, display: "flex", flexDirection: "column" }}
               >
                 <Box
-                  sx={{ display: "flex", flexDirection: "column", flexGrow: 1, minHeight: 0, p: 2 }}
+                  sx={{
+                    display: "flex",
+                    flexDirection: "column",
+                    flexGrow: 1,
+                    minHeight: 0,
+                    p: contentPadding,
+                  }}
                 >
                   {/* Render children if provided, otherwise render default content */}
                   {typeof children === "function" ? children(extendedData) : children}

src/components/CippFormPages/CippAddIntuneReusableSettingTemplateForm.jsx

@@ -1,5 +1,5 @@
 import { Grid } from "@mui/system";
-import CippFormComponent from "/src/components/CippComponents/CippFormComponent";
+import CippFormComponent from "../CippComponents/CippFormComponent";
 
 const CippAddIntuneReusableSettingTemplateForm = ({ formControl }) => {
   return (

src/components/CippTable/CIPPTableToptoolbar.js

@@ -1322,10 +1322,22 @@ export const CIPPTableToptoolbar = ({
         title="Edit Filters"
         visible={filterCanvasVisible}
         onClose={() => setFilterCanvasVisible(!filterCanvasVisible)}
+        contentPadding={1}
+        keepMounted={true}
       >
         <CippGraphExplorerFilter
           endpointFilter={api?.data?.Endpoint}
           relatedQueryKeys={[queryKey, currentEffectiveQueryKey].filter(Boolean)}
+          selectedPreset={
+            activeFilterName
+              ? filterList.find((f) => f.filterName === activeFilterName)
+              : null
+          }
+          onPresetSelect={(preset) => {
+            if (preset?.value && preset?.type === "graph") {
+              setTableFilter(preset.value, preset.type, preset.filterName);
+            }
+          }}
           onSubmitFilter={(filter) => {
             setTableFilter(filter, "graph", "Custom Filter");
             if (filter?.$select) {