@plutonhq/core-frontend 0.1.13 → 0.1.15

package/src/components/Plan/PlanSettings/PlanReplicationSettings.tsx

@@ -0,0 +1,334 @@
+import { useState, useCallback } from 'react';
+import { PlanReplicationSettings as ReplicationSettings, PlanReplicationStorage } from '../../../@types/plans';
+import Icon from '../../common/Icon/Icon';
+import StoragePicker from '../../common/form/StoragePicker/StoragePicker';
+import Toggle from '../../common/form/Toggle/Toggle';
+import classes from '../../Plan/AddPlan/AddPlan.module.scss';
+import mirrorClasses from './PlanReplicationSettings.module.scss';
+import ActionModal from '../../common/ActionModal/ActionModal';
+import { useDeleteReplicationStorage } from '../../../services';
+import { toast } from 'react-toastify';
+import { nanoid } from 'nanoid';
+
+interface PlanReplicationSettingsProps {
+   replication?: ReplicationSettings;
+   primaryStorageId: string;
+   primaryStoragePath?: string;
+   deviceId: string;
+   isEditing?: boolean;
+   planID?: string;
+   maxReplications?: number;
+   onUpdate: (replication: ReplicationSettings) => void;
+}
+
+const defaultReplication: ReplicationSettings = {
+   enabled: false,
+   concurrent: false,
+   storages: [],
+};
+
+const MAX_REPLICATIONS = 2;
+
+const PlanReplicationSettings = ({
+   replication,
+   primaryStorageId,
+   primaryStoragePath,
+   deviceId,
+   isEditing = false,
+   planID,
+   maxReplications: maxReplicationsProp,
+   onUpdate,
+}: PlanReplicationSettingsProps) => {
+   const [tempStorages, setTempStorages] = useState<PlanReplicationStorage[]>([]);
+   const [removeStorageData, setRemoveStorageData] = useState<boolean>(false);
+   const [showRemoveModal, setShowRemoveModal] = useState<boolean | PlanReplicationStorage>(false);
+
+   const deleteStorageMutation = useDeleteReplicationStorage();
+   const settings = replication || defaultReplication;
+
+   /** Check if a storage+path combination already exists in committed or temp storages */
+   const isDuplicateStorage = useCallback(
+      (storageId: string, storagePath: string, excludeCommittedIndex?: number, excludeTempIndex?: number) => {
+         // Skip duplicate check if storageId or storagePath is empty (incomplete selection)
+         if (!storageId || !storagePath) return false;
+         const committedDuplicate = settings.storages.some(
+            (s, i) =>
+               (excludeCommittedIndex === undefined || i !== excludeCommittedIndex) && s.storageId === storageId && s.storagePath === storagePath,
+         );
+         const tempDuplicate = tempStorages.some(
+            (s, i) => (excludeTempIndex === undefined || i !== excludeTempIndex) && s.storageId === storageId && s.storagePath === storagePath,
+         );
+         return committedDuplicate || tempDuplicate;
+      },
+      [settings.storages, tempStorages],
+   );
+
+   const updateEnabled = (enabled: boolean) => {
+      onUpdate({ ...settings, enabled });
+   };
+
+   const updateConcurrent = (concurrent: boolean) => {
+      onUpdate({ ...settings, concurrent });
+   };
+
+   const addReplicationStorage = () => {
+      if (isEditing) {
+         const maxReplications = maxReplicationsProp ?? MAX_REPLICATIONS;
+         if (settings.storages.length + tempStorages.length >= maxReplications) return;
+         setTempStorages([...tempStorages, { replicationId: nanoid(), storageId: '', storagePath: '', storageType: '', addedAt: Date.now() }]);
+      } else {
+         const maxReplications = maxReplicationsProp ?? MAX_REPLICATIONS;
+         if (settings.storages.length >= maxReplications) return;
+         onUpdate({
+            ...settings,
+            storages: [...settings.storages, { replicationId: nanoid(), storageId: '', storagePath: '', storageType: '', addedAt: Date.now() }],
+         });
+      }
+   };
+
+   const updateTempStorage = (index: number, storage: PlanReplicationStorage) => {
+      setTempStorages((prev) => {
+         const updated = [...prev];
+         updated[index] = storage;
+         return updated;
+      });
+   };
+
+   const confirmAddStorage = (index: number) => {
+      const storage = tempStorages[index];
+      if (!storage.storageId) return;
+      if (storage.storageId === primaryStorageId && storage.storagePath === primaryStoragePath) {
+         toast.error('Cannot replicate to the same storage as the primary backup.');
+         return;
+      }
+      if (isDuplicateStorage(storage.storageId, storage.storagePath, undefined, index)) {
+         toast.error('This storage destination is already added.');
+         return;
+      }
+      setTempStorages((prev) => prev.filter((_, i) => i !== index));
+      onUpdate({ ...settings, storages: [...settings.storages, storage] });
+   };
+
+   const removeTempStorage = (index: number) => {
+      setTempStorages((prev) => prev.filter((_, i) => i !== index));
+   };
+
+   const updateReplicationStorage = (index: number, storage: PlanReplicationStorage) => {
+      const updated = [...settings.storages];
+      updated[index] = storage;
+      onUpdate({ ...settings, storages: updated });
+   };
+
+   const removeAddedStorage = (index: number) => {
+      const updated = settings.storages.filter((_, i) => i !== index);
+      onUpdate({ ...settings, storages: updated });
+   };
+
+   const removeReplicationStorage = () => {
+      if (typeof showRemoveModal === 'object' && planID) {
+         const storageToRemove = showRemoveModal;
+         deleteStorageMutation.mutate(
+            {
+               planID: planID,
+               storageID: storageToRemove.storageId,
+               removeData: removeStorageData,
+               storagePath: storageToRemove.storagePath,
+               replicationId: storageToRemove.replicationId,
+            },
+            {
+               onSuccess: () => {
+                  // Remove the storage from local state and close modal
+                  const updated = settings.storages.filter((s) => s.replicationId !== storageToRemove.replicationId);
+                  onUpdate({ ...settings, storages: updated, ...(updated.length === 0 && { enabled: false }) });
+                  setShowRemoveModal(false);
+                  setRemoveStorageData(false);
+                  deleteStorageMutation.reset();
+               },
+            },
+         );
+      }
+   };
+
+   const openRemoveModal = (mirror: PlanReplicationStorage) => {
+      setRemoveStorageData(false);
+      deleteStorageMutation.reset();
+      setShowRemoveModal(mirror);
+   };
+
+   return (
+      <div className={classes.field}>
+         <div className={mirrorClasses.mirrorSection}>
+            <Toggle
+               label="Enable Replication"
+               description="Replicate backups to additional storage destinations for redundancy (3-2-1 backup strategy)"
+               fieldValue={settings.enabled}
+               onUpdate={updateEnabled}
+            />
+
+            {settings.enabled && (
+               <div className={mirrorClasses.mirrorSettings}>
+                  {settings.storages.map((mirror, index) => (
+                     <div key={mirror.addedAt || index} className={mirrorClasses.mirrorDestination}>
+                        <div className={mirrorClasses.mirrorHeader}>
+                           <label className={classes.label}>Replication Destination {index + 1}</label>
+                           <div className={mirrorClasses.mirrorHeaderRight}>
+                              {settings.storages.length > 1 && (
+                                 <div className={mirrorClasses.storagePositionControls}>
+                                    <button
+                                       title="Move Up"
+                                       disabled={index === 0}
+                                       onClick={() => {
+                                          const updatedStorages = [...(settings.storages || [])];
+                                          const [movedStorage] = updatedStorages.splice(index, 1);
+                                          updatedStorages.splice(index - 1, 0, movedStorage);
+                                          onUpdate({ ...settings, storages: updatedStorages });
+                                       }}
+                                    >
+                                       <Icon type={'caret-up'} size={14} />
+                                    </button>
+                                    <button
+                                       title="Move Down"
+                                       disabled={index === settings.storages.length - 1}
+                                       onClick={() => {
+                                          const updatedStorages = [...(settings.storages || [])];
+                                          const [movedStorage] = updatedStorages.splice(index, 1);
+                                          updatedStorages.splice(index + 1, 0, movedStorage);
+                                          onUpdate({ ...settings, storages: updatedStorages });
+                                       }}
+                                    >
+                                       <Icon type={'caret-down'} size={14} />
+                                    </button>
+                                 </div>
+                              )}
+                              <button
+                                 className={mirrorClasses.removeBtn}
+                                 onClick={() => (isEditing ? openRemoveModal(mirror) : removeAddedStorage(index))}
+                                 title="Remove replication destination"
+                              >
+                                 <Icon type="trash" size={14} /> Remove
+                              </button>
+                           </div>
+                        </div>
+                        <StoragePicker
+                           storagePath={mirror.storagePath}
+                           storageId={mirror.storageId}
+                           deviceId={deviceId}
+                           disabled={isEditing}
+                           onUpdate={(s) => {
+                              if (s.storage.id === primaryStorageId && s.path === primaryStoragePath) {
+                                 toast.error('Cannot replicate to the same storage as the primary backup.');
+                                 return;
+                              }
+                              updateReplicationStorage(index, {
+                                 replicationId: mirror.replicationId,
+                                 storageId: s.storage.id,
+                                 storagePath: s.path,
+                                 storageType: s.storage.type,
+                                 storageName: s.storage.name,
+                                 addedAt: mirror.addedAt,
+                              });
+                           }}
+                        />
+                     </div>
+                  ))}
+
+                  {isEditing &&
+                     tempStorages.map((tempStorage, index) => (
+                        <div key={tempStorage.addedAt} className={mirrorClasses.mirrorDestination}>
+                           <div className={mirrorClasses.mirrorHeader}>
+                              <label className={classes.label}>Replication Destination {settings.storages.length + index + 1}</label>
+                              <div className={mirrorClasses.mirrorHeaderRight}>
+                                 <button
+                                    className={mirrorClasses.confirmBtn}
+                                    onClick={() => confirmAddStorage(index)}
+                                    disabled={!tempStorage.storageId}
+                                    title={!tempStorage.storageId ? 'Select Storage Type to add the storage' : 'Confirm replication destination'}
+                                 >
+                                    <Icon type="check" size={11} /> Confirm
+                                 </button>
+                                 <button
+                                    className={mirrorClasses.removeBtn}
+                                    onClick={() => removeTempStorage(index)}
+                                    title="Remove replication destination"
+                                 >
+                                    <Icon type="trash" size={14} /> Remove
+                                 </button>
+                              </div>
+                           </div>
+                           <StoragePicker
+                              storagePath={tempStorage.storagePath}
+                              storageId={tempStorage.storageId}
+                              deviceId={deviceId}
+                              disabled={false}
+                              onUpdate={(s) => {
+                                 updateTempStorage(index, {
+                                    replicationId: tempStorage.replicationId,
+                                    storageId: s.storage.id,
+                                    storagePath: s.path,
+                                    storageType: s.storage.type,
+                                    storageName: s.storage.name,
+                                    addedAt: tempStorage.addedAt,
+                                 });
+                              }}
+                           />
+                        </div>
+                     ))}
+
+                  {settings.storages.length + (isEditing ? tempStorages.length : 0) < (maxReplicationsProp ?? MAX_REPLICATIONS) && (
+                     <button className={mirrorClasses.addMirrorBtn} onClick={addReplicationStorage}>
+                        <Icon type="plus" size={12} /> + Add Replication Destination
+                     </button>
+                  )}
+
+                  {settings.storages.length > 1 && (
+                     <div className={mirrorClasses.concurrentOption}>
+                        <Toggle
+                           label="Run replications concurrently"
+                           description="Run replications in parallel to speed up the backup process"
+                           fieldValue={settings.concurrent}
+                           onUpdate={updateConcurrent}
+                        />
+                     </div>
+                  )}
+               </div>
+            )}
+         </div>
+
+         {showRemoveModal && (
+            <ActionModal
+               title="Remove Replication Storage"
+               message={
+                  <div>
+                     <p>Are you sure you want to remove this Replication storage from this plan?</p>
+                     <Toggle
+                        fieldValue={removeStorageData}
+                        onUpdate={() => setRemoveStorageData((prev) => !prev)}
+                        description={`Remove replicated data from the Storage`}
+                        customClasses={classes.removeRemoteToggle}
+                     />
+                  </div>
+               }
+               closeModal={() => {
+                  if (!deleteStorageMutation.isPending) {
+                     setShowRemoveModal(false);
+                     setRemoveStorageData(false);
+                     deleteStorageMutation.reset();
+                  }
+               }}
+               width="400px"
+               errorMessage={deleteStorageMutation.isError && 'Error Removing Replication Storage!'}
+               successMessage={deleteStorageMutation.isSuccess && 'Removed Replication Storage Successfully!'}
+               primaryAction={{
+                  title: 'Yes, Remove Storage',
+                  type: 'danger',
+                  icon: 'trash',
+                  isPending: deleteStorageMutation.isPending,
+                  action: () => removeReplicationStorage(),
+               }}
+            />
+         )}
+      </div>
+   );
+};
+
+export default PlanReplicationSettings;

package/src/components/Plan/PlanStats/PlanStats.module.scss

@@ -109,7 +109,7 @@
       }
    }
    .health {
-      width: 38%;
+      width: 33%;
    }
 }
 

package/src/components/Plan/PlanStats/PlanStats.tsx

@@ -3,6 +3,7 @@ import { Plan } from '../../../@types/plans';
 import { formatBytes, formatNumberToK } from '../../../utils/helpers';
 import PlanHistory from '../PlanHistory/PlanHistory';
 import classes from './PlanStats.module.scss';
+import PlanStorageInfo from '../PlanStorageInfo/PlanStorageInfo';
 
 interface PlanStatsProps {
    plan: Plan;
@@ -55,14 +56,13 @@ const PlanStats = ({ plan, isSync, lastBackupItem }: PlanStatsProps) => {
                   <Icon type={isActive ? (isSync ? 'reload' : 'copy') : 'pause'} size={16} />
                   <div className={classes.sourceArrow}>→</div>
                </div>
-               <div
-                  data-tooltip-id="htmlToolTip"
-                  data-tooltip-place="top"
-                  data-tooltip-html={`<div><strong>Storage:</strong> ${storage?.name}</div><div><strong>Path:</strong> ${storagePath || '/'}</div>`}
-               >
-                  {storage?.type && <img src={`/providers/${storage?.type}.png`} />}
-                  {storage?.name}
-               </div>
+               <PlanStorageInfo
+                  disableTooltip={false}
+                  inline={false}
+                  replicationSettings={plan.settings.replication}
+                  storage={storage}
+                  storagePath={storagePath}
+               />
             </div>
          </div>
          <div className={classes.snapshots}>

package/src/components/Plan/PlanStorageInfo/PlanStorageInfo.module.scss

@@ -0,0 +1,43 @@
+.planStorages {
+   .storageWithReplications {
+      display: flex;
+      flex-direction: column;
+      .storageIcons {
+         display: inline-block;
+         img {
+            width: auto;
+            max-height: 14px;
+            display: inline-block !important;
+            position: relative;
+            margin-left: -10px;
+            padding: 3px;
+            border-radius: 50%;
+            background: var(--content-background-color);
+            border: 1px solid var(--line-color);
+         }
+         img:nth-child(1) {
+            z-index: 99;
+            margin-left: 0;
+         }
+      }
+   }
+   &.inline {
+      display: inline-block;
+      margin-left: 5px;
+      .storageWithReplications {
+         flex-direction: row;
+         align-items: center;
+         .storageIcons {
+            img {
+               margin-left: 0px;
+               padding: 0;
+               background: transparent;
+               border: none;
+            }
+         }
+      }
+      .storageName {
+         display: inline-block;
+      }
+   }
+}

package/src/components/Plan/PlanStorageInfo/PlanStorageInfo.tsx

@@ -0,0 +1,83 @@
+import { PlanReplicationSettings } from '../../../@types';
+import classes from './PlanStorageInfo.module.scss';
+
+interface PlanStorageInfoProps {
+   storage: { name: string; type: string; id: string };
+   storagePath: string;
+   replicationSettings?: PlanReplicationSettings;
+   disableTooltip?: boolean;
+   inline?: boolean;
+}
+
+const PlanStorageInfo = ({ replicationSettings, storage, storagePath, disableTooltip = true, inline = true }: PlanStorageInfoProps) => {
+   console.log('replicationSettings :', replicationSettings);
+   return (
+      <>
+         {replicationSettings && replicationSettings.enabled && replicationSettings.storages.length > 0 ? (
+            <div
+               className={`${classes.planStorages} ${inline ? classes.inline : ''}`}
+               data-tooltip-hidden={disableTooltip}
+               data-tooltip-id="htmlToolTip"
+               data-tooltip-place="top"
+               data-tooltip-html={`
+                           <div style="display: flex; flex-direction: column; gap: 8px;">
+                           <div>
+                              <div style="display: flex; align-items: center; gap: 8px; margin-top: 4px;">
+                                 <img style="width: 24px; height: 24px;" src="/providers/${storage?.type}.png" />
+                                 <div>
+                                    <strong style="display: block;">${storage?.name}</strong>
+                                    ${storagePath || '/'}
+                                 </div>
+                              </div>
+                           </div>
+                           ${replicationSettings.storages
+                              .slice(0, 3)
+                              .map(
+                                 (s) => `
+                              <div style="display: flex; align-items: center; gap: 8px; margin-top: 4px;">
+                                 <img style="width: 24px; height: 24px;" src="/providers/${s?.storageType}.png" />
+                                 <div>
+                                    <strong style="display: block;">${s?.storageName} (Mirror)</strong>
+                                    ${s?.storagePath || '/'}
+                                 </div>
+                              </div>
+                                    `,
+                              )
+                              .join('')}
+                        </div>`}
+            >
+               <div className={classes.storageWithReplications}>
+                  <div className={classes.storageIcons}>
+                     <img src={`/providers/${storage?.type}.png`} />
+                     {replicationSettings.storages.map((s, index) => (
+                        <img key={s.replicationId} src={`/providers/${s.storageType}.png`} style={{ zIndex: 98 - index }} />
+                     ))}
+                  </div>
+                  <div className={classes.storageName}>{replicationSettings.storages.length + 1} Storages</div>
+               </div>
+            </div>
+         ) : (
+            <div
+               className={`${classes.planStorages} ${inline ? classes.inline : ''}`}
+               data-tooltip-hidden={disableTooltip}
+               data-tooltip-id="htmlToolTip"
+               data-tooltip-place="top"
+               data-tooltip-html={`
+                           <div style="display: flex; align-items: center; gap: 8px; margin-top: 4px;">
+                              <img style="width: 24px; height: 24px;" src="/providers/${storage?.type}.png" />
+                              <div>
+                                 <strong style="display: block;">${storage?.name}</strong>
+                                 ${storagePath || '/'}
+                              </div>
+                           </div>
+                        `}
+            >
+               <img src={`/providers/${storage?.type}.png`} />
+               <div className={classes.storageName}>{storage?.name}</div>
+            </div>
+         )}
+      </>
+   );
+};
+
+export default PlanStorageInfo;

package/src/components/Restore/RestoreWizard/RestoreConfirmStep.tsx

@@ -33,6 +33,8 @@ const RestoreConfirmStep = ({ backupId, planId, settings, stats, snapshotsStats,
             includes: settings.includes,
             excludes: settings.excludes,
             deleteOption: settings.delete,
+            storageId: settings.storageId,
+            replicationId: settings.replicationId,
          },
          {
             onSuccess: (data: any, variables) => {

package/src/components/Restore/RestoreWizard/RestorePreviewStep.tsx

@@ -57,6 +57,8 @@ const RestorePreviewStep = ({ backupId, planId, settings, preview, nextLabel, go
             includes: settings.includes,
             excludes: settings.excludes,
             deleteOption: settings.delete,
+            storageId: settings.storageId,
+            replicationId: settings.replicationId,
          },
          {
             onSuccess: (data) => {

package/src/components/Restore/RestoreWizard/RestoreSettingsStep.tsx

@@ -6,16 +6,20 @@ import classes from './RestoreWizard.module.scss';
 import FolderPicker from '../../common/FolderPicker/FolderPicker';
 import { RestoreSettings } from '../../../@types/restores';
 import Toggle from '../../common/form/Toggle/Toggle';
+import { Backup } from '../../..';
 
-interface settingsStepProps {
+interface RestoreSettingsStepProps {
    backupId: string;
+   deviceId: string;
    settings: RestoreSettings;
-   updateSettings: (settings: settingsStepProps['settings']) => void;
+   mirrors?: Backup['mirrors'];
+   primaryStorage: { id: string; type: string; name: string };
+   updateSettings: (settings: RestoreSettingsStepProps['settings']) => void;
    goNext: () => void;
    close: () => void;
 }
 
-const settingsStep = ({ backupId, settings, updateSettings, goNext, close }: settingsStepProps) => {
+const RestoreSettingsStep = ({ settings, mirrors = [], primaryStorage, updateSettings, goNext, close, deviceId }: RestoreSettingsStepProps) => {
    const [showFileManager, setShowFileManager] = useState(false);
    const [showCustomPathError, setShowCustomPathError] = useState(false);
 
@@ -30,17 +34,38 @@ const settingsStep = ({ backupId, settings, updateSettings, goNext, close }: set
    return (
       <div className={classes.stepContent}>
          <div className={classes.step}>
-            <p>
-               Select where you want to restore <strong>"backup-{backupId}"</strong>
-            </p>
+            {mirrors && mirrors.length > 0 && (
+               <div className={classes.settingBlock}>
+                  <Select
+                     customClasses={classes.storageSelect}
+                     label="Select Storage to Restore From"
+                     options={[
+                        {
+                           label: primaryStorage!.name + ' (Primary)',
+                           value: 'primary',
+                           image: <img src={`/providers/${primaryStorage.type}.png`} />,
+                        },
+                        ...mirrors.map((m) => ({
+                           label: m.storageName + ' (Mirror)',
+                           value: m.replicationId,
+                           image: <img src={`/providers/${m.storageType}.png`} />,
+                        })),
+                     ]}
+                     fieldValue={settings.replicationId || primaryStorage.id}
+                     full={true}
+                     onUpdate={(value) => updateSettings({ ...settings, replicationId: value === 'primary' ? undefined : value })}
+                  />
+               </div>
+            )}
+
             <div className={classes.settingBlock}>
                <Select
-                  label=""
+                  label="Select where you want to restore the backup"
                   options={[
                      { label: 'Restore to Original Path(s)', value: 'original' },
                      { label: 'Restore to a Custom Path', value: 'custom' },
                   ]}
-                  fieldValue={settings.type || 'sun'}
+                  fieldValue={settings.type || 'original'}
                   onUpdate={(val: string) => updateSettings({ ...settings, type: val as 'original' | 'custom' })}
                   full={true}
                />
@@ -138,9 +163,7 @@ const settingsStep = ({ backupId, settings, updateSettings, goNext, close }: set
                   label="Delete Files that are not in the Snapshot from the Target Restore Path"
                   fieldValue={settings.delete}
                   inline={false}
-                  onUpdate={(val) => {
-                     updateSettings({ ...settings, delete: val });
-                  }}
+                  onUpdate={(val) => updateSettings({ ...settings, delete: val })}
                />
             </div>
          </div>
@@ -156,7 +179,7 @@ const settingsStep = ({ backupId, settings, updateSettings, goNext, close }: set
 
          {showFileManager && (
             <FolderPicker
-               deviceId={'main'}
+               deviceId={deviceId || 'main'}
                title="Choose a Path to Restore"
                footerText="Select a Path where you want to restore your backup"
                selected={settings.path}
@@ -168,4 +191,4 @@ const settingsStep = ({ backupId, settings, updateSettings, goNext, close }: set
    );
 };
 
-export default settingsStep;
+export default RestoreSettingsStep;

package/src/components/Restore/RestoreWizard/RestoreWizard.module.scss

@@ -356,6 +356,7 @@
          padding: 12px;
          cursor: pointer;
          border-bottom: 1px solid var(--line-color);
+         transition: all 0.12s linear;
          h5 {
             font-size: 0.75rem;
             font-weight: 600;
@@ -372,6 +373,9 @@
                color: var(--primary-color);
             }
          }
+         &:hover {
+            background-color: var(--primary-color-light);
+         }
          &:last-child {
             border-bottom: none;
          }

package/src/components/Restore/RestoreWizard/RestoreWizard.tsx

@@ -8,14 +8,18 @@ import RestoreConfirmStep from './RestoreConfirmStep';
 import { RestoredFileItem, RestoredItemsStats, RestoreFileItem, RestoreSettings } from '../../../@types/restores';
 import { useGetSnapshotFiles } from '../../../services/backups';
 import RestoreFileSelectorStep from './RestoreFileSelectorStep';
+import { Backup, Plan } from '../../..';
 
 interface RestoreWizardProps {
    backupId: string;
    planId: string;
+   deviceId: string;
+   planStorage: Plan['storage'];
+   mirrors?: Backup['mirrors'];
    close: () => void;
 }
 
-const RestoreWizard = ({ backupId, planId, close }: RestoreWizardProps) => {
+const RestoreWizard = ({ backupId, planId, deviceId, mirrors, planStorage, close }: RestoreWizardProps) => {
    const [step, setStep] = useState(1);
    const [restoreSettings, setRestoreSettings] = useState<RestoreSettings>({
       type: 'original',
@@ -24,6 +28,7 @@ const RestoreWizard = ({ backupId, planId, close }: RestoreWizardProps) => {
       includes: [],
       excludes: [],
       delete: false,
+      storageId: undefined,
    });
    const [restorePreview, setRestorePreview] = useState<{ stats: RestoredItemsStats | null; files: RestoredFileItem[] }>({ stats: null, files: [] });
    const isFetching = useIsFetching();
@@ -82,7 +87,10 @@ const RestoreWizard = ({ backupId, planId, close }: RestoreWizardProps) => {
             {step === 1 && (
                <RestoreSettingsStep
                   backupId={backupId}
+                  deviceId={deviceId}
                   settings={restoreSettings}
+                  primaryStorage={planStorage}
+                  mirrors={mirrors}
                   updateSettings={(settings) => setRestoreSettings(settings)}
                   goNext={() => setStep(2)}
                   close={close}