[pull] main from KelvinTegelaar:main

.github/workflows/cipp_dev_build.yml

@@ -18,10 +18,17 @@ jobs:
         uses: actions/checkout@v4.2.2
 
       # Set up Node.js
+      - name: Get Node version
+        id: get_node_version
+        run: |
+          node_raw_version=$(node -p "require('./package.json').engines.node")
+          node_sanitized_version=$(echo $node_raw_version | sed -E 's/[^0-9.]+//g')
+          echo "node_version=$node_sanitized_version" >> $GITHUB_OUTPUT
+
       - name: Set up Node.js
         uses: actions/setup-node@v4.2.0
         with:
-          node-version: '20.18.1'
+          node-version: ${{ steps.get_node_version.outputs.node_version }}
 
       # Install dependencies
       - name: Install Dependencies

.github/workflows/cipp_frontend_build.yml

@@ -18,10 +18,17 @@ jobs:
         uses: actions/checkout@v4.2.2
 
       # Set up Node.js
+      - name: Get Node version
+        id: get_node_version
+        run: |
+          node_raw_version=$(node -p "require('./package.json').engines.node")
+          node_sanitized_version=$(echo $node_raw_version | sed -E 's/[^0-9.]+//g')
+          echo "node_version=$node_sanitized_version" >> $GITHUB_OUTPUT
+
       - name: Set up Node.js
         uses: actions/setup-node@v4.2.0
         with:
-          node-version: '20.18.1'
+          node-version: ${{ steps.get_node_version.outputs.node_version }}
 
       # Install dependencies
       - name: Install Dependencies

.github/workflows/dev_deploy.yml

@@ -0,0 +1,41 @@
+name: CIPP Development Frontend CI/CD
+
+on:
+  push:
+    branches:
+      - dev
+
+jobs:
+  build_and_deploy_job:
+    if: github.event.repository.fork == false && github.event_name == 'push'
+    runs-on: ubuntu-latest
+    name: Build and Deploy Job
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          submodules: true
+      - name: Build And Deploy
+        id: builddeploy
+        uses: Azure/static-web-apps-deploy@v1
+        with:
+          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_AMBITIOUS_MOSS_0A047A40F }} # change this to your repository secret name
+          repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments)
+          action: 'upload'
+          ###### Repository/Build Configurations - These values can be configured to match your app requirements. ######
+          # For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
+          app_location: '/' # App source code path
+          api_location: '' # Api source code path - optional
+          output_location: 'out' # Built app content directory - optional
+          ###### End of Repository/Build Configurations ######
+
+  close_pull_request_job:
+    if: github.event.repository.fork == false && github.event_name == 'pull_request' && github.event.action == 'closed'
+    runs-on: ubuntu-latest
+    name: Close Pull Request Job
+    steps:
+      - name: Close Pull Request
+        id: closepullrequest
+        uses: Azure/static-web-apps-deploy@v1
+        with:
+          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_AMBITIOUS_MOSS_0A047A40F }} # change this to your repository secret name
+          action: 'close'

package.json

@@ -8,7 +8,7 @@
   },
   "license": "AGPL-3.0",
   "engines": {
-    "node": "^20.18.1"
+    "node": "^22.13.0"
   },
   "repository": {
     "type": "git",

public/version.json

@@ -1,3 +1,3 @@
 {
-  "version": "7.2.3"
+  "version": "7.3.0"
 }

src/api/ApiCall.jsx

@@ -3,7 +3,6 @@ import axios, { isAxiosError } from "axios";
 import { useDispatch } from "react-redux";
 import { showToast } from "../store/toasts";
 import { getCippError } from "../utils/get-cipp-error";
-import { useRouter } from "next/router";
 
 export function ApiGetCall(props) {
   const {
@@ -16,6 +15,8 @@ export function ApiGetCall(props) {
     bulkRequest = false,
     toast = false,
     onResult,
+    staleTime = 600000, // 10 minutes
+    refetchOnWindowFocus = false,
   } = props;
   const queryClient = useQueryClient();
   const dispatch = useDispatch();
@@ -27,6 +28,12 @@ export function ApiGetCall(props) {
       returnRetry = false;
     }
     if (isAxiosError(error) && HTTP_STATUS_TO_NOT_RETRY.includes(error.response?.status ?? 0)) {
+      if (
+        error.response?.status === 302 &&
+        error.response?.headers.get("location").includes("/.auth/login/aad")
+      ) {
+        queryClient.invalidateQueries({ queryKey: ["authmecipp"] });
+      }
       returnRetry = false;
     }
     if (returnRetry === false && toast) {
@@ -93,8 +100,8 @@ export function ApiGetCall(props) {
         return response.data;
       }
     },
-    staleTime: 600000, // 10 minutes
-    refetchOnWindowFocus: false,
+    staleTime: staleTime,
+    refetchOnWindowFocus: refetchOnWindowFocus,
     retry: retryFn,
   });
   return queryInfo;

src/components/CippCards/CippPageCard.jsx

@@ -2,6 +2,7 @@ import { useRouter } from "next/router";
 import { Box, Container, Stack, Button, SvgIcon, Typography, Card } from "@mui/material";
 import ArrowLeftIcon from "@mui/icons-material/ArrowLeft";
 import Head from "next/head";
+import { CippHead } from "../CippComponents/CippHead";
 const CippPageCard = (props) => {
   const {
     title,
@@ -20,9 +21,7 @@ const CippPageCard = (props) => {
 
   return (
     <>
-      <Head>
-        <title>{title}</title>
-      </Head>
+      <CippHead title={title} />
       <Box
         sx={{
           flexGrow: 1,

src/components/CippCards/CippUserInfoCard.jsx

@@ -112,10 +112,14 @@ export const CippUserInfoCard = (props) => {
           value={isFetching ? <Skeleton variant="text" width={100} /> : user?.jobTitle || "N/A"}
         />
         <PropertyListItem
-          divider
           label="Department"
           value={isFetching ? <Skeleton variant="text" width={100} /> : user?.department || "N/A"}
         />
+        <PropertyListItem
+          divider
+          label="Manager"
+          value={isFetching ? <Skeleton variant="text" width={100} /> : user?.manager?.displayName || "N/A"}
+        />
         <PropertyListItem
           label="Address"
           value={

src/components/CippComponents/CippApiDialog.jsx

@@ -97,6 +97,8 @@ export const CippApiDialog = (props) => {
           } else {
             newData[key] = value;
           }
+        } else if (typeof value === 'boolean') {
+          newData[key] = value;
         } else if (typeof value === "object" && value !== null) {
           const processedValue = processActionData(value, row, replacementBehaviour);
           if (replacementBehaviour !== "removeNulls" || Object.keys(processedValue).length > 0) {
@@ -273,20 +275,32 @@ export const CippApiDialog = (props) => {
       .reduce((acc, key) => (acc && acc[key] !== undefined ? acc[key] : undefined), obj);
   };
 
-  // Handling link navigation
-  if (api.link) {
+  // Handling external link navigation
+  useEffect(() => {
+    if (api.link && createDialog.open) {
+      const linkWithRowData = api.link.replace(/\[([^\]]+)\]/g, (_, key) => {
+        return getNestedValue(row, key) || `[${key}]`;
+      });
+
+      if (!linkWithRowData.startsWith("/")) {
+        window.open(linkWithRowData, api.target || "_blank");
+        createDialog.handleClose();
+      }
+    }
+  }, [api.link, createDialog.open]);
+
+  // Handling internal link navigation
+  if (api.link && createDialog.open) {
     const linkWithRowData = api.link.replace(/\[([^\]]+)\]/g, (_, key) => {
       return getNestedValue(row, key) || `[${key}]`;
     });
 
     if (linkWithRowData.startsWith("/")) {
       router.push(linkWithRowData, undefined, { shallow: true });
-    } else {
-      window.open(linkWithRowData, api.target || "_blank");
+      createDialog.handleClose();
     }
-
-    return null;
   }
+
   useEffect(() => {
     if (api.noConfirm) {
       formHook.handleSubmit(onSubmit)(); // Submits the form on mount

src/components/CippComponents/CippCentralSearch.jsx

@@ -9,6 +9,7 @@ import {
   Grid,
   Card,
   CardContent,
+  CardActionArea,
   Typography,
   Box,
 } from "@mui/material";
@@ -107,15 +108,19 @@ export const CippCentralSearch = ({ handleClose, open }) => {
                   <Grid item xs={12} sm={12} md={12} key={index}>
                     <Card
                       variant="outlined"
-                      sx={{ height: "100%", cursor: "pointer" }}
-                      onClick={() => handleCardClick(item.path)}
+                      sx={{ height: "100%" }}
                     >
-                      <CardContent>
-                        <Typography variant="h6">{highlightMatch(item.title)}</Typography>
-                        <Typography variant="body2" color="textSecondary">
-                          Path: {highlightMatch(item.path)}
-                        </Typography>
-                      </CardContent>
+                      <CardActionArea
+                        onClick={() => handleCardClick(item.path)}
+                        aria-label={`Navigate to ${item.title}`}
+                      >
+                        <CardContent>
+                          <Typography variant="h6">{highlightMatch(item.title)}</Typography>
+                          <Typography variant="body2" color="textSecondary">
+                            Path: {highlightMatch(item.path)}
+                          </Typography>
+                        </CardContent>
+                      </CardActionArea>
                     </Card>
                   </Grid>
                 ))}

src/components/CippComponents/CippFormComponent.jsx

@@ -43,6 +43,7 @@ export const CippFormComponent = (props) => {
     name, // The name that may have bracket notation
     label,
     labelLocation = "behind", // Default location for switches
+    defaultValue,
     ...other
   } = props;
   const { errors } = useFormState({ control: formControl.control });
@@ -121,6 +122,7 @@ export const CippFormComponent = (props) => {
               {...other}
               {...formControl.register(convertedName, { ...validators })}
               label={label}
+              defaultValue={defaultValue}
             />
           </div>
           <Typography variant="subtitle3" color="error">
@@ -156,6 +158,7 @@ export const CippFormComponent = (props) => {
               {...other}
               {...formControl.register(convertedName, { ...validators })}
               label={label}
+              defaultValue={defaultValue}
             />
           </div>
           <Typography variant="subtitle3" color="error">
@@ -171,6 +174,7 @@ export const CippFormComponent = (props) => {
             <Controller
               name={convertedName}
               control={formControl.control}
+              defaultValue={defaultValue}
               render={({ field }) =>
                 renderSwitchWithLabel(
                   <Switch