@plutonhq/core-frontend 0.0.1

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

@@ -0,0 +1,390 @@
+.restoreWizard {
+   width: 100%;
+   height: 100vh;
+   background-color: var(--modal-bg);
+   position: fixed;
+   left: 0;
+   top: 0;
+   z-index: 999;
+   display: flex;
+   align-items: flex-start;
+   justify-content: center;
+}
+
+.content {
+   width: 90%;
+   max-width: 800px;
+   position: absolute;
+   background: var(--content-background-color);
+   color: var(--content-text-color);
+   border: 1px solid var(--content-shadow-color);
+   right: 0;
+   top: 0;
+   box-sizing: border-box;
+   box-shadow: 0 0 20px var(--modal-shadow-color);
+}
+
+.header {
+   display: flex;
+   align-items: center;
+   justify-content: space-between;
+   padding: 20px;
+   border-bottom: 1px solid var(--content-shadow-color);
+   h3 {
+      font-size: 1rem;
+      margin: 0;
+   }
+   .close {
+      background: transparent;
+      opacity: 0.5;
+      color: var(--content-text-color);
+      transition: all 0.2s linear;
+      &:hover {
+         opacity: 1;
+         transform: rotate(90deg);
+      }
+   }
+}
+
+.steps {
+   width: 100%;
+   padding: 10px 15px;
+   padding-bottom: 5px;
+   box-sizing: border-box;
+   border-bottom: 1px solid var(--content-shadow-color);
+   background: var(--background-color);
+   ul {
+      margin: 0;
+      padding: 0;
+      list-style-type: none;
+      position: relative;
+      display: flex;
+      justify-content: space-between;
+      &:before {
+         content: '';
+         position: absolute;
+         width: calc(100% - 60px);
+         height: 2px;
+         background-color: var(--content-shadow-color);
+         z-index: 0;
+         top: 12px;
+         left: 25px;
+      }
+      li {
+         padding: 3px;
+         display: flex;
+         flex-direction: column;
+         justify-content: center;
+         align-items: center;
+         position: relative;
+         i {
+            font-style: normal;
+            font-size: 0.75rem;
+            margin-top: 5px;
+            color: var(--content-text-color-light);
+         }
+         & > span {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 20px;
+            height: 20px;
+            font-size: 0.75rem;
+            border-radius: 50%;
+            background-color: var(--content-shadow-color);
+            text-align: center;
+            box-sizing: border-box;
+         }
+         &.stepCurrent {
+            & > span {
+               background-color: var(--primary-color);
+               color: var(--primary-text-color);
+            }
+            i {
+               color: var(--primary-color);
+               font-weight: 600;
+            }
+         }
+         &.stepPassed {
+            & > span {
+               background-color: var(--primary-color);
+            }
+         }
+      }
+   }
+}
+
+.stepContent {
+   .step {
+      display: flex;
+      flex-direction: column;
+      padding: 30px;
+      height: calc(100vh - 265px);
+      overflow: auto;
+      position: relative;
+      .settingBlock {
+         margin-block-end: 2em;
+         position: relative;
+
+         .label {
+            font-weight: 600;
+            display: block;
+            margin-bottom: 8px;
+            font-size: 0.75rem;
+         }
+
+         .fileManagerBtn {
+            position: absolute;
+            right: 0;
+            top: 22px;
+            padding: 10px;
+            cursor: pointer;
+            color: var(--icon-color);
+            &:hover {
+               color: var(--primary-color);
+            }
+         }
+
+         &.settingBlockError {
+            input {
+               border-color: var(--error-button-color);
+            }
+         }
+      }
+      .restoreSuccessMsg {
+         button {
+            font-size: inherit;
+            background: var(--background-color);
+            color: var(--primary-color);
+            border-radius: 3px;
+         }
+      }
+   }
+}
+
+.preview {
+   width: 100%;
+   border: 1px solid var(--line-color);
+   background-color: var(--modal-bg);
+   height: calc(100vh - 270px);
+   border-radius: 6px;
+   box-sizing: border-box;
+   position: relative;
+   .previewError {
+      position: absolute;
+      top: 0;
+      width: 100%;
+      padding: 10px;
+      box-sizing: border-box;
+      background-color: var(--error-bg-color);
+      color: var(--error-text-color);
+   }
+   .previewButton {
+      border-radius: 6px;
+      font-size: 0.75rem;
+      padding: 8px 15px;
+      cursor: pointer;
+      font-weight: 600;
+      color: var(--primary-text-color);
+      background-color: var(--primary-color);
+   }
+   &.previewEmpty {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+   }
+}
+
+.restoreConfirm {
+   display: flex;
+   flex-direction: column;
+   justify-content: center;
+   align-items: center;
+   height: 70%;
+   .restoreButton {
+      border-radius: 6px;
+      font-size: 0.75rem;
+      padding: 8px 15px;
+      cursor: pointer;
+      font-weight: 600;
+      color: var(--primary-text-color);
+      background-color: var(--primary-color);
+   }
+}
+
+.restoreError {
+   position: absolute;
+   top: 20px;
+   left: 20px;
+   width: calc(100% - 40px);
+   padding: 10px;
+   box-sizing: border-box;
+   border-radius: 6px;
+   background-color: var(--error-bg-color);
+   color: var(--error-text-color);
+}
+
+.footer {
+   display: flex;
+   align-items: center;
+   justify-content: space-between;
+   padding: 15px;
+   padding-left: 30px;
+   border-top: 1px solid var(--content-shadow-color);
+   gap: 10px;
+   .backButton {
+      color: var(--content-text-color-light);
+      &:hover {
+         color: var(--content-text-color);
+      }
+   }
+   .footerRight {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      button {
+         border-radius: 6px;
+         font-size: 0.75rem;
+         padding: 12px 20px;
+         cursor: pointer;
+         background-color: var(--line-color);
+         color: var(--content-text-color);
+      }
+      button:nth-child(2) {
+         color: var(--primary-text-color);
+         background-color: var(--primary-color);
+      }
+   }
+}
+
+.restoreDisabled {
+   cursor: not-allowed !important;
+   opacity: 0.6;
+   user-select: none;
+}
+
+.loader {
+   position: absolute;
+   z-index: 9;
+   width: 100%;
+   height: 100%;
+   left: 0;
+   top: 0;
+   background-color: var(--content-background-color);
+   opacity: 0.7;
+   cursor: default;
+   display: flex;
+   justify-content: center;
+   align-items: center;
+}
+
+.pathPickerModal {
+   position: fixed;
+   width: 100%;
+   height: 100vh;
+   top: 0;
+   left: 0;
+   z-index: 99999999;
+   background: var(--modal-shadow-color-light);
+   .pathPickerModalInner {
+      position: absolute;
+      width: 70%;
+      max-width: 1000px;
+      background: var(--content-background-color);
+      color: var(--content-text-color);
+      border-radius: 8px;
+      border: 1px solid var(--content-shadow-color);
+      margin: 0 auto;
+      left: 0;
+      right: 0;
+      top: 10%;
+      box-sizing: border-box;
+      box-shadow: 0 0 20px var(--modal-shadow-color);
+      .pathPickerHeader {
+         display: flex;
+         align-items: center;
+         justify-content: space-between;
+         padding: 10px 15px;
+         border-bottom: 1px solid var(--line-color);
+         h4 {
+            margin: 0;
+         }
+         button {
+            padding: 10px;
+            cursor: pointer;
+            background: transparent;
+            opacity: 0.5;
+            color: var(--content-text-color);
+            transition: all 0.2s linear;
+            &:hover {
+               opacity: 1;
+               transform: rotate(90deg);
+            }
+         }
+      }
+      .pathPickerFooter {
+         display: flex;
+         align-items: center;
+         justify-content: space-between;
+         padding: 10px 15px;
+         border-top: 1px solid var(--line-color);
+         button {
+            background-color: var(--primary-color);
+            color: var(--primary-text-color);
+            padding: 10px 12px;
+            cursor: pointer;
+            border-radius: 6px;
+         }
+      }
+      .pathPickerContent {
+         padding: 20px;
+         max-height: 500px;
+         overflow: auto;
+      }
+   }
+}
+
+.checkboxSettings {
+   .checkboxSettingsOpts {
+      border: 1px solid var(--line-color);
+      border-radius: 6px;
+      .checkboxOption {
+         display: flex;
+         align-items: center;
+         gap: 10px;
+         padding: 12px;
+         cursor: pointer;
+         border-bottom: 1px solid var(--line-color);
+         h5 {
+            font-size: 0.75rem;
+            font-weight: 600;
+            margin: 0 0 5px 0;
+         }
+         span {
+            color: var(--icon-color);
+         }
+         &.checkboxOptionActive {
+            h5 {
+               color: var(--primary-color);
+            }
+            span {
+               color: var(--primary-color);
+            }
+         }
+         &:last-child {
+            border-bottom: none;
+         }
+      }
+   }
+}
+@media only screen and (max-width: 768px) {
+   .restoreWizard {
+      .content {
+         width: 100%;
+         & > :global([class*='_header_']) {
+            flex-direction: row;
+         }
+      }
+   }
+}

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

@@ -0,0 +1,135 @@
+import { useMemo, useState } from 'react';
+import { useIsFetching, useIsMutating } from '@tanstack/react-query';
+import Icon from '../../common/Icon/Icon';
+import classes from './RestoreWizard.module.scss';
+import RestoreSettingsStep from './RestoreSettingsStep';
+import RestorePreviewStep from './RestorePreviewStep';
+import RestoreConfirmStep from './RestoreConfirmStep';
+import { RestoredFileItem, RestoredItemsStats, RestoreFileItem, RestoreSettings } from '../../../@types/restores';
+import { useGetSnapshotFiles } from '../../../services/backups';
+import RestoreFileSelectorStep from './RestoreFileSelectorStep';
+
+interface RestoreWizardProps {
+   backupId: string;
+   planId: string;
+   close: () => void;
+}
+
+const RestoreWizard = ({ backupId, planId, close }: RestoreWizardProps) => {
+   const [step, setStep] = useState(1);
+   const [restoreSettings, setRestoreSettings] = useState<RestoreSettings>({
+      type: 'original',
+      path: '',
+      overwrite: 'always',
+      includes: [],
+      excludes: [],
+      delete: false,
+   });
+   const [restorePreview, setRestorePreview] = useState<{ stats: RestoredItemsStats | null; files: RestoredFileItem[] }>({ stats: null, files: [] });
+   const isFetching = useIsFetching();
+   const isMutating = useIsMutating();
+   const isLoading = isFetching > 0 || isMutating > 0;
+   const { data: snapshotData, error: snapShotError } = useGetSnapshotFiles({ backupId });
+   const files: RestoreFileItem[] = snapshotData?.result && Array.isArray(snapshotData.result) ? snapshotData.result : [];
+
+   const snapShotsStats = useMemo(() => {
+      return {
+         total_files: files.length,
+         total_bytes: files.reduce((acc, file) => acc + file.size, 0),
+      };
+   }, [files]);
+
+   return (
+      <div className={classes.restoreWizard}>
+         <div className={classes.content} style={{ maxWidth: ((step === 2 || step === 3) && 1200) || undefined }}>
+            <div className={classes.header}>
+               <h3>
+                  <Icon type="restore" size={16} /> Restore Backup
+               </h3>
+               <button className={classes.close} onClick={() => !isLoading && close()}>
+                  <Icon type="close" size={24} />
+               </button>
+            </div>
+            <div className={classes.steps}>
+               <ul>
+                  <li className={` ${step >= 1 ? classes.stepCurrent : ''}  ${step > 1 ? classes.stepPassed : ''}`}>
+                     <span>
+                        {step > 1 && <Icon type="check" size={11} />}
+                        {step === 1 ? '●' : ''}
+                     </span>
+                     <i>Settings</i>
+                  </li>
+                  <li className={` ${step >= 2 ? classes.stepCurrent : ''}  ${step > 2 ? classes.stepPassed : ''}`}>
+                     <span>
+                        {step > 2 && <Icon type="check" size={11} />}
+                        {step === 2 ? '●' : ''}
+                     </span>
+                     <i>Select Files</i>
+                  </li>
+                  <li className={` ${step >= 3 ? classes.stepCurrent : ''} ${step > 3 ? classes.stepPassed : ''}`}>
+                     <span>
+                        {step > 3 && <Icon type="check" size={11} />}
+                        {step === 3 ? '●' : ''}
+                     </span>
+                     <i>Preview</i>
+                  </li>
+                  <li className={` ${step === 4 ? classes.stepCurrent : ''}`}>
+                     <span>{step === 4 && <Icon type="check" size={11} />}</span>
+                     <i>Restore</i>
+                  </li>
+               </ul>
+            </div>
+            {step === 1 && (
+               <RestoreSettingsStep
+                  backupId={backupId}
+                  settings={restoreSettings}
+                  updateSettings={(settings) => setRestoreSettings(settings)}
+                  goNext={() => setStep(2)}
+                  close={close}
+               />
+            )}
+            {step === 2 && (
+               <RestoreFileSelectorStep
+                  backupId={backupId}
+                  settings={restoreSettings}
+                  updateSettings={(settings) => setRestoreSettings(settings as RestoreSettings)}
+                  files={files}
+                  isLoading={isLoading}
+                  errorFetching={snapShotError?.message || null}
+                  currentStep={step}
+                  goBack={() => step > 0 && setStep(step - 1)}
+                  goNext={() => setStep(3)}
+                  close={close}
+                  method="backup"
+               />
+            )}
+            {step === 3 && (
+               <RestorePreviewStep
+                  backupId={backupId}
+                  planId={planId}
+                  settings={restoreSettings}
+                  preview={restorePreview}
+                  updatePreview={(preview) => setRestorePreview(preview)}
+                  goBack={() => step > 0 && setStep(step - 1)}
+                  goNext={() => setStep(4)}
+                  close={close}
+               />
+            )}
+            {step === 4 && (
+               <RestoreConfirmStep
+                  backupId={backupId}
+                  planId={planId}
+                  settings={restoreSettings}
+                  stats={restorePreview.stats}
+                  snapshotsStats={snapShotsStats}
+                  method="backup"
+                  goBack={() => step > 0 && setStep(step - 1)}
+                  close={close}
+               />
+            )}
+         </div>
+      </div>
+   );
+};
+
+export default RestoreWizard;