Merge pull request #680 from KelvinTegelaar/dev

[pull] dev from KelvinTegelaar:dev

Author: pull[bot]

package.json

@@ -1,6 +1,6 @@
 {
   "name": "cipp",
-  "version": "8.8.1",
+  "version": "8.8.2",
   "author": "CIPP Contributors",
   "homepage": "https://cipp.app/",
   "bugs": {

public/version.json

@@ -1,3 +1,3 @@
 {
-  "version": "8.8.1"
+  "version": "8.8.2"
 }

src/components/CippComponents/CippRestoreBackupDrawer.jsx

@@ -13,6 +13,7 @@ import { ApiPostCall } from "../../api/ApiCall";
 export const CippRestoreBackupDrawer = ({
   buttonText = "Restore Backup",
   backupName = null,
+  backupData = null,
   requiredPermissions = [],
   PermissionButton = Button,
   ...props
@@ -85,7 +86,12 @@ export const CippRestoreBackupDrawer = ({
     const values = formControl.getValues();
     const startDate = new Date();
     const unixTime = Math.floor(startDate.getTime() / 1000) - 45;
-    const tenantFilterValue = tenantFilter;
+
+    // If in AllTenants context, use the tenant from the backup data
+    let tenantFilterValue = tenantFilter;
+    if (tenantFilter === "AllTenants" && backupData?.tenantSource) {
+      tenantFilterValue = backupData.tenantSource;
+    }
 
     const shippedValues = {
       TenantFilter: tenantFilterValue,
@@ -202,7 +208,12 @@ export const CippRestoreBackupDrawer = ({
                   queryKey: `BackupList-${tenantFilter}-autocomplete`,
                   labelField: (option) => {
                     const match = option.BackupName.match(/.*_(\d{4}-\d{2}-\d{2})-(\d{2})(\d{2})/);
-                    return match ? `${match[1]} @ ${match[2]}:${match[3]}` : option.BackupName;
+                    const dateTime = match
+                      ? `${match[1]} @ ${match[2]}:${match[3]}`
+                      : option.BackupName;
+                    const tenantDisplay =
+                      tenantFilter === "AllTenants" ? ` (${option.TenantFilter})` : "";
+                    return `${dateTime}${tenantDisplay}`;
                   },
                   valueField: "BackupName",
                   data: {

src/layouts/HeaderedTabbedLayout.jsx

@@ -115,7 +115,7 @@ export const HeaderedTabbedLayout = (props) => {
               !mdDown && {
                 flexGrow: 1,
                 overflow: "auto",
-                height: "calc(100vh - 30px)",
+                height: "calc(100vh - 350px)",
               }
             }
           >

src/pages/tenant/manage/configuration-backup.js

@@ -1,5 +1,7 @@
 import { Layout as DashboardLayout } from "/src/layouts/index.js";
 import { HeaderedTabbedLayout } from "/src/layouts/HeaderedTabbedLayout";
+import { useState } from "react";
+import { useForm, useWatch } from "react-hook-form";
 import {
   Button,
   Box,
@@ -31,6 +33,7 @@ import { CippBackupScheduleDrawer } from "/src/components/CippComponents/CippBac
 import { CippRestoreBackupDrawer } from "/src/components/CippComponents/CippRestoreBackupDrawer";
 import { CippApiDialog } from "/src/components/CippComponents/CippApiDialog";
 import { CippTimeAgo } from "/src/components/CippComponents/CippTimeAgo";
+import { CippFormTenantSelector } from "/src/components/CippComponents/CippFormTenantSelector";
 import { useDialog } from "/src/hooks/use-dialog";
 import ReactTimeAgo from "react-time-ago";
 import tabOptions from "./tabOptions.json";
@@ -42,6 +45,8 @@ const Page = () => {
   const { templateId } = router.query;
   const settings = useSettings();
   const removeDialog = useDialog();
+  const tenantFilterForm = useForm({ defaultValues: { tenantFilter: null } });
+  const backupTenantFilter = useWatch({ control: tenantFilterForm.control, name: "tenantFilter" });
   // Prioritize URL query parameter, then fall back to settings
   const currentTenant = router.query.tenantFilter || settings.currentTenant;
 
@@ -79,19 +84,28 @@ const Page = () => {
     return ["Configuration"];
   };
 
-  const backupDisplayItems = filteredBackupData.map((backup, index) => ({
+  // Filter backup data by selected tenant if in AllTenants view
+  const tenantFilteredBackupData =
+    settings.currentTenant === "AllTenants" &&
+    backupTenantFilter &&
+    backupTenantFilter !== "AllTenants"
+      ? filteredBackupData.filter((backup) => backup.TenantFilter === backupTenantFilter)
+      : filteredBackupData;
+
+  const backupDisplayItems = tenantFilteredBackupData.map((backup, index) => ({
     id: backup.RowKey || index,
     name: backup.BackupName || "Unnamed Backup",
     timestamp: backup.Timestamp,
-    tenantSource: backup.BackupName?.includes("AllTenants")
-      ? "All Tenants"
-      : backup.BackupName?.replace("CIPP Backup - ", "") || settings.currentTenant,
+    tenantSource: backup.TenantFilter || settings.currentTenant,
     tags: generateBackupTags(backup),
   }));
 
   // Process existing backup configuration, find tenantFilter. by comparing settings.currentTenant with Tenant.value
   const currentConfig = Array.isArray(existingBackupConfig.data)
-    ? existingBackupConfig.data.find((tenant) => tenant.Tenant.value === settings.currentTenant)
+    ? existingBackupConfig.data.find(
+        (tenant) =>
+          tenant.Tenant.value === settings.currentTenant || tenant.Tenant.value === "AllTenants"
+      )
     : null;
   const hasExistingConfig = currentConfig && currentConfig.Parameters?.ScheduledBackupValues;
 
@@ -281,13 +295,33 @@ const Page = () => {
 
           <Grid size={{ md: 6, xs: 12 }}>
             {/* Backup History */}
-            <Card sx={{ height: "100%" }}>
-              <CardContent>
-                <Stack spacing={3}>
-                  <Typography variant="h6" sx={{ display: "flex", alignItems: "center", gap: 1 }}>
-                    <History color="primary" />
-                    Backup History
-                  </Typography>
+            <Card sx={{ height: "100%", display: "flex", flexDirection: "column" }}>
+              <CardContent sx={{ flex: 1, display: "flex", flexDirection: "column" }}>
+                <Stack
+                  spacing={3}
+                  sx={{ height: "100%", display: "flex", flexDirection: "column" }}
+                >
+                  <Box
+                    sx={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}
+                  >
+                    <Typography variant="h6" sx={{ display: "flex", alignItems: "center", gap: 1 }}>
+                      <History color="primary" />
+                      Backup History
+                    </Typography>
+                    {settings.currentTenant === "AllTenants" && (
+                      <Box sx={{ minWidth: 250 }}>
+                        <CippFormTenantSelector
+                          formControl={tenantFilterForm}
+                          componentType="select"
+                          name="tenantFilter"
+                          type="single"
+                          required={false}
+                          disableClearable={false}
+                          allTenants={true}
+                        />
+                      </Box>
+                    )}
+                  </Box>
 
                   <Typography variant="body2" color="text.secondary">
                     {settings.currentTenant === "AllTenants"
@@ -307,7 +341,7 @@ const Page = () => {
                       <Skeleton variant="rectangular" width="100%" height={200} />
                     </Stack>
                   ) : (
-                    <Box sx={{ maxHeight: "400px", overflowY: "auto" }}>
+                    <Box sx={{ maxHeight: "calc(100vh - 525px)", overflowY: "auto" }}>
                       <Stack spacing={2}>
                         {backupDisplayItems.map((backup) => (
                           <Card key={backup.id} variant="outlined">
@@ -334,6 +368,14 @@ const Page = () => {
                                     <Typography variant="body2" color="text.secondary">
                                       <ReactTimeAgo date={backup.timestamp} />
                                     </Typography>
+                                    {settings.currentTenant === "AllTenants" && (
+                                      <Chip
+                                        label={`Tenant: ${backup.tenantSource}`}
+                                        size="small"
+                                        sx={{ mt: 1 }}
+                                        variant="outlined"
+                                      />
+                                    )}
                                   </Box>
                                   <Stack direction="row" spacing={1} sx={{ flexShrink: 0 }}>
                                     <CippRestoreBackupDrawer