@plutonhq/core-frontend 0.0.1

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

@@ -0,0 +1,79 @@
+import { RestoreFileItem, RestoreSettings } from '../../../@types/restores';
+import Icon from '../../common/Icon/Icon';
+import RestoreFileSelector from '../RestoreFileSelector/RestoreFileSelector';
+import classes from './RestoreWizard.module.scss';
+
+interface RestoreFileSelectorStepProps {
+   backupId: string;
+   settings: RestoreSettings;
+   files: RestoreFileItem[];
+   isLoading: boolean;
+   errorFetching: string | null;
+   currentStep: number;
+   method: string;
+   updateSettings: (settings: RestoreSettings) => void;
+   fileSelectCondition?: (file: RestoreFileItem) => boolean;
+   goBack: () => void;
+   goNext: () => void;
+   close: () => void;
+   nextLabel?: string;
+}
+
+const RestoreFileSelectorStep = ({
+   backupId,
+   settings,
+   files,
+   isLoading,
+   errorFetching,
+   nextLabel,
+   currentStep,
+   method = 'backup',
+   updateSettings,
+   goBack,
+   goNext,
+   close,
+}: RestoreFileSelectorStepProps) => {
+   return (
+      <div className={classes.stepContent}>
+         <div className={classes.step}>
+            <RestoreFileSelector
+               backupId={backupId}
+               selected={{
+                  includes: new Set(settings.includes),
+                  excludes: new Set(settings.excludes),
+               }}
+               onSelect={(fileSettings) => {
+                  updateSettings({
+                     ...settings,
+                     includes: Array.from(fileSettings.includes),
+                     excludes: Array.from(fileSettings.excludes),
+                  });
+               }}
+               files={files}
+               isLoading={isLoading}
+               errorFetching={errorFetching || null}
+               fileSelectCondition={method === 'sync' ? (file) => file.changeType === 'modified' || file.changeType === 'removed' : undefined}
+               showChange={method === 'sync' ? true : false}
+            />
+         </div>
+
+         <div className={classes.footer}>
+            <div className={classes.footerLeft}>
+               {currentStep > 1 && (
+                  <button className={classes.backButton} onClick={() => goBack()} disabled={isLoading}>
+                     <Icon type="arrow-left" size={14} /> Back
+                  </button>
+               )}
+            </div>
+            <div className={classes.footerRight}>
+               <button onClick={() => close()}>Cancel</button>
+               <button onClick={() => goNext()}>
+                  {nextLabel || 'Next: Preview Restore'} <Icon type="arrow-right" size={14} />
+               </button>
+            </div>
+         </div>
+      </div>
+   );
+};
+
+export default RestoreFileSelectorStep;

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

@@ -0,0 +1,124 @@
+import { useEffect } from 'react';
+import classes from './RestoreWizard.module.scss';
+import { useGetDryRestoreStats } from '../../../services/restores';
+import { RestoredFileItem, RestoredItemsStats, RestoreSettings } from '../../../@types/restores';
+import RestoredFileBrowser from '../RestoredFileBrowser/RestoredFileBrowser';
+import Icon from '../../common/Icon/Icon';
+
+interface RestorePreviewStepProps {
+   backupId: string;
+   planId: string;
+   settings: RestoreSettings;
+   preview: { stats: RestoredItemsStats | null; files: RestoredFileItem[] };
+   nextLabel?: string;
+   updatePreview: (preview: RestorePreviewStepProps['preview']) => void;
+   goBack: () => void;
+   goNext: () => void;
+   close: () => void;
+}
+
+const RestorePreviewStep = ({ backupId, planId, settings, preview, nextLabel, goBack, updatePreview, goNext, close }: RestorePreviewStepProps) => {
+   const restoreStats = preview.stats;
+   const restoredFiles = preview.files || [];
+   // const [previousSettings, setPreviousSettings] = useState({ type: 'original', path: '', overwrite: 'always' });
+   const previousSettings: undefined | RestorePreviewStepProps['settings'] = (window as any)[`pluton-restore-prev-${backupId}-settings`];
+   const restoreStatsMutation = useGetDryRestoreStats();
+
+   useEffect(() => {
+      if (settings.includes !== previousSettings?.includes || settings.excludes !== previousSettings?.excludes) {
+         updatePreview({ files: [], stats: null });
+         restoreStatsMutation.reset();
+      }
+      if (settings.delete !== previousSettings?.delete) {
+         updatePreview({ files: [], stats: null });
+         restoreStatsMutation.reset();
+      }
+      if ((settings.type === 'custom' && settings.path) || settings.type === 'original') {
+         const settingsChanged =
+            previousSettings &&
+            (previousSettings.type !== settings.type || previousSettings.path !== settings.path || previousSettings.overwrite !== settings.overwrite);
+         console.log('settingsChanged :', settingsChanged, settings, previousSettings);
+         if (settingsChanged) {
+            updatePreview({ files: [], stats: null });
+            restoreStatsMutation.reset();
+         }
+      }
+   }, [settings, previousSettings]);
+
+   const getDryRestoreStats = () => {
+      console.log('restore :', backupId);
+
+      restoreStatsMutation.mutate(
+         {
+            backupId: backupId,
+            planId,
+            target: settings.type === 'custom' ? settings.path : '',
+            overwrite: settings.overwrite,
+            includes: settings.includes,
+            excludes: settings.excludes,
+            deleteOption: settings.delete,
+         },
+         {
+            onSuccess: (data) => {
+               console.log('getDryRestoreStats Data :', data);
+               updatePreview({ files: data?.result?.files || [], stats: data?.result?.stats || null });
+               (window as any)[`pluton-restore-prev-${backupId}-settings`] = settings;
+            },
+         },
+      );
+   };
+
+   console.log('[RestorePreviewStep] :', settings, restoreStats);
+
+   return (
+      <div className={classes.stepContent}>
+         <div className={classes.step}>
+            {!restoreStats && (
+               <div className={`${classes.preview} ${!restoreStats ? classes.previewEmpty : ''}`}>
+                  {restoreStatsMutation.isError && (
+                     <div className={classes.previewError}>{restoreStatsMutation.error?.message || 'Failed to Generate Preview'}</div>
+                  )}
+                  <p>Before proceeding with the restoration, perform a dry run to preview what files will be restored</p>
+                  <button
+                     className={`${classes.previewButton} ${restoreStatsMutation.isPending ? classes.restoreDisabled : ''}`}
+                     onClick={() => getDryRestoreStats()}
+                     disabled={restoreStatsMutation.isPending}
+                  >
+                     {restoreStatsMutation.isPending ? (
+                        <>
+                           <Icon type="loading" size={12} /> Generating Preview...
+                        </>
+                     ) : (
+                        <>
+                           <Icon type="eye" size={13} /> Generate Preview
+                        </>
+                     )}
+                  </button>
+               </div>
+            )}
+            {restoreStats && <RestoredFileBrowser files={restoredFiles} stats={restoreStats} />}
+         </div>
+         <div className={classes.footer}>
+            <div className={classes.footerLeft}>
+               <button className={classes.backButton} onClick={() => goBack()} disabled={restoreStatsMutation.isPending}>
+                  <Icon type="arrow-left" size={14} /> Back
+               </button>
+            </div>
+            <div className={classes.footerRight}>
+               <button onClick={() => close()} disabled={restoreStatsMutation.isPending}>
+                  Cancel
+               </button>
+               <button
+                  title={!restoreStats ? 'Generate the Preview First' : ''}
+                  className={!restoreStats ? classes.restoreDisabled : ''}
+                  onClick={() => ((settings.type === 'custom' && settings.path) || settings.type === 'original') && restoreStats && goNext()}
+               >
+                  {nextLabel || 'Next: Restore Backup'} <Icon type="arrow-right" size={14} />
+               </button>
+            </div>
+         </div>
+      </div>
+   );
+};
+
+export default RestorePreviewStep;

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

@@ -0,0 +1,171 @@
+import { useState } from 'react';
+import Select from '../../common/form/Select/Select';
+import Input from '../../common/form/Input/Input';
+import Icon from '../../common/Icon/Icon';
+import classes from './RestoreWizard.module.scss';
+import FolderPicker from '../../common/FolderPicker/FolderPicker';
+import { RestoreSettings } from '../../../@types/restores';
+import Toggle from '../../common/form/Toggle/Toggle';
+
+interface settingsStepProps {
+   backupId: string;
+   settings: RestoreSettings;
+   updateSettings: (settings: settingsStepProps['settings']) => void;
+   goNext: () => void;
+   close: () => void;
+}
+
+const settingsStep = ({ backupId, settings, updateSettings, goNext, close }: settingsStepProps) => {
+   const [showFileManager, setShowFileManager] = useState(false);
+   const [showCustomPathError, setShowCustomPathError] = useState(false);
+
+   const gotoPreviewStep = () => {
+      if ((settings.type === 'custom' && settings.path) || settings.type === 'original') {
+         goNext();
+      } else {
+         setShowCustomPathError(true);
+      }
+   };
+
+   return (
+      <div className={classes.stepContent}>
+         <div className={classes.step}>
+            <p>
+               Select where you want to restore <strong>"backup-{backupId}"</strong>
+            </p>
+            <div className={classes.settingBlock}>
+               <Select
+                  label=""
+                  options={[
+                     { label: 'Restore to Original Path(s)', value: 'original' },
+                     { label: 'Restore to a Custom Path', value: 'custom' },
+                  ]}
+                  fieldValue={settings.type || 'sun'}
+                  onUpdate={(val: string) => updateSettings({ ...settings, type: val as 'original' | 'custom' })}
+                  full={true}
+               />
+            </div>
+            {settings.type === 'custom' && (
+               <div className={`${classes.settingBlock} ${showCustomPathError ? classes.settingBlockError : ''}`}>
+                  <Input
+                     label="Restore Backup To"
+                     placeholder="Restore Path"
+                     fieldValue={settings.path}
+                     onUpdate={(val) => {
+                        updateSettings({ ...settings, path: val });
+                        if (showCustomPathError) {
+                           setShowCustomPathError(false);
+                        }
+                     }}
+                     full={true}
+                  />
+                  <button
+                     data-tooltip-id="appTooltip"
+                     data-tooltip-content="Open FileManager to Select Path"
+                     data-tooltip-place="top"
+                     className={classes.fileManagerBtn}
+                     onClick={() => setShowFileManager(true)}
+                  >
+                     <Icon type="folders" size={16} />
+                  </button>
+               </div>
+            )}
+
+            <div className={classes.settingBlock}>
+               <div className={classes.checkboxSettings}>
+                  <div className={classes.label}>Overwrite Policy</div>
+                  <div className={classes.checkboxSettingsOpts}>
+                     <div
+                        onClick={() => updateSettings({ ...settings, overwrite: 'always' })}
+                        className={` ${classes.checkboxOption} ${settings.overwrite === 'always' ? classes.checkboxOptionActive : ''} `}
+                     >
+                        <div>
+                           <Icon type={settings.overwrite === 'always' ? 'check-circle-filled' : 'check-circle'} size={16} />
+                        </div>
+                        <div>
+                           <h5>Always Overwrite (Default)</h5>
+                           <div>
+                              Always overwrites already existing files. Existing file content will be verified first and only mismatching parts will
+                              be restored to minimize downloads. Updates the metadata of all files.
+                           </div>
+                        </div>
+                     </div>
+                     <div
+                        onClick={() => updateSettings({ ...settings, overwrite: 'if-changed' })}
+                        className={` ${classes.checkboxOption} ${settings.overwrite === 'if-changed' ? classes.checkboxOptionActive : ''} `}
+                     >
+                        <div>
+                           <Icon type={settings.overwrite === 'if-changed' ? 'check-circle-filled' : 'check-circle'} size={16} />
+                        </div>
+                        <div>
+                           <h5>Overwrite If Changed</h5>
+                           <div>
+                              Like the previous case, but speeds up the file content check by assuming that files with matching size and modification
+                              time (mtime) are already up to date. In case of a mismatch, the full file content is verified. Updates the metadata of
+                              all files.
+                           </div>
+                        </div>
+                     </div>
+                     <div
+                        onClick={() => updateSettings({ ...settings, overwrite: 'if-newer' })}
+                        className={` ${classes.checkboxOption} ${settings.overwrite === 'if-newer' ? classes.checkboxOptionActive : ''} `}
+                     >
+                        <div>
+                           <Icon type={settings.overwrite === 'if-newer' ? 'check-circle-filled' : 'check-circle'} size={16} />
+                        </div>
+                        <div>
+                           <h5>Overwrite If Newer</h5>
+                           <div>Only overwrite existing files if the file in the snapshot has a newer modification time (mtime).</div>
+                        </div>
+                     </div>
+                     <div
+                        onClick={() => updateSettings({ ...settings, overwrite: 'never' })}
+                        className={` ${classes.checkboxOption} ${settings.overwrite === 'never' ? classes.checkboxOptionActive : ''} `}
+                     >
+                        <div>
+                           <Icon type={settings.overwrite === 'never' ? 'check-circle-filled' : 'check-circle'} size={16} />
+                        </div>
+                        <div>
+                           <h5>Never Overwrite</h5>
+                           <div>Never overwrite existing files.</div>
+                        </div>
+                     </div>
+                  </div>
+               </div>
+            </div>
+            <div className={classes.settingBlock}>
+               <Toggle
+                  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 });
+                  }}
+               />
+            </div>
+         </div>
+         <div className={classes.footer}>
+            <div className={classes.footerLeft}></div>
+            <div className={classes.footerRight}>
+               <button onClick={() => close()}>Cancel</button>
+               <button onClick={() => gotoPreviewStep()}>
+                  Next: Select Files to Restore <Icon type="arrow-right" size={14} />
+               </button>
+            </div>
+         </div>
+
+         {showFileManager && (
+            <FolderPicker
+               deviceId={'main'}
+               title="Choose a Path to Restore"
+               footerText="Select a Path where you want to restore your backup"
+               selected={settings.path}
+               close={() => setShowFileManager(false)}
+               onSelect={(p) => updateSettings({ ...settings, path: p })}
+            />
+         )}
+      </div>
+   );
+};
+
+export default settingsStep;