@plutonhq/core-frontend 0.1.32 → 0.1.33

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

@@ -0,0 +1,65 @@
+.filterItems {
+   position: relative;
+   .filterBtn {
+      display: flex;
+      align-items: center;
+      .filterCount {
+         background-color: var(--primary-color);
+         color: var(--primary-text-color);
+         padding: 1px 6px;
+         border-radius: 12px;
+         font-size: 10px;
+      }
+      &.filterBtnActive {
+         color: var(--primary-color);
+      }
+   }
+   .dropdown {
+      margin-top: -1px;
+      position: absolute;
+      z-index: 9999;
+      border: 1px solid var(--line-color);
+      background: var(--field-bg);
+      box-shadow: 0 0 15px var(--content-shadow-color);
+      width: calc(100% - 2px);
+      border-radius: 0 0 4px 4px;
+      overflow: auto;
+      font-size: 0.75rem;
+      right: 0;
+      width: max-content;
+      max-height: 320px;
+      border-radius: 6px;
+
+      .field {
+         padding: 12px 12px 0 12px;
+         label {
+            font-weight: 600;
+            margin-bottom: 4px;
+            display: block;
+         }
+      }
+      .footer {
+         border-top: 1px solid var(--line-color);
+         margin-top: 12px;
+         display: flex;
+         justify-content: space-around;
+         button:nth-child(2) {
+            padding: 6px 10px;
+            background: var(--primary-color-light);
+            color: var(--primary-color);
+            line-height: 1em;
+            height: fit-content;
+            border-radius: 4px;
+            margin: 8px;
+            font-weight: 600;
+            &:hover {
+               background: var(--primary-color);
+               color: var(--primary-text-color);
+            }
+         }
+         button:hover {
+            color: var(--primary-color);
+         }
+      }
+   }
+}

package/src/components/Plan/FilterPlans/FilterPlans.tsx

@@ -0,0 +1,126 @@
+import { useMemo, useState } from 'react';
+import classes from './FilterPlans.module.scss';
+import { Plan } from '../../..';
+import { Icon, MultiSelect } from '../..';
+
+type FilterPlansProps = {
+   onUpdate: (s: Record<PlanFilterTypes, string[]> | null) => void;
+   plans: Plan[];
+};
+export type PlanFilterTypes = 'devices' | 'tags' | 'storages' | 'methods';
+
+const defaultState = { devices: [], tags: [], storages: [], methods: [] };
+
+const FilterPlans = ({ onUpdate, plans }: FilterPlansProps) => {
+   const [showDropDown, setShowDropDown] = useState(false);
+   const [selected, setSelected] = useState<Record<PlanFilterTypes, string[]>>(() => {
+      const storedSettingsRaw = localStorage.getItem('plans_filter');
+      const storedSettings = storedSettingsRaw ? JSON.parse(storedSettingsRaw) : null;
+      return storedSettings || defaultState;
+   });
+
+   const hasFilters = Object.values(selected).some((arr) => arr.length > 0);
+
+   const filterableItems = useMemo(() => {
+      const items: Record<PlanFilterTypes, { label: string; value: string }[]> = { devices: [], tags: [], storages: [], methods: [] };
+      plans.forEach((plan) => {
+         plan.tags.forEach((tag) => {
+            if (!items.tags.find((t) => t.value === tag)) {
+               items.tags.push({ label: tag, value: tag });
+            }
+         });
+         if (!items.devices.find((t) => t.value === plan.device.id)) {
+            items.devices.push({ label: plan.device.name, value: plan.device.id });
+         }
+         if (!items.storages.find((t) => t.value === plan.storage.id)) {
+            items.storages.push({ label: plan.storage.name, value: plan.storage.id });
+         }
+         if (!items.methods.find((t) => t.value === plan.method)) {
+            items.methods.push({ label: plan.method, value: plan.method });
+         }
+      });
+      return items;
+   }, [plans]);
+
+   return (
+      <div className={classes.filterItems}>
+         <button
+            className={`${classes.filterBtn} ${showDropDown || hasFilters ? classes.filterBtnActive : ''}`}
+            onClick={() => setShowDropDown(!showDropDown)}
+            data-tooltip-id="appTooltip"
+            data-tooltip-content="Filter"
+            aria-label="Filter Plans"
+            data-tooltip-place="top"
+            data-tooltip-delay-show={500}
+         >
+            <Icon type="filter" size={18} />{' '}
+            {hasFilters && <span className={classes.filterCount}>{Object.values(selected).reduce((acc, arr) => acc + arr.length, 0)}</span>}
+         </button>
+         {showDropDown && (
+            <div className={`${classes.dropdown} styled__scrollbar`}>
+               {filterableItems.devices.length > 1 && (
+                  <div className={classes.field}>
+                     <label>Devices</label>
+                     <MultiSelect
+                        title="Devices"
+                        fieldValue={selected.devices}
+                        options={filterableItems.devices}
+                        onUpdate={(devices) => setSelected((selected) => ({ ...selected, devices }))}
+                     />
+                  </div>
+               )}
+               <div className={classes.field}>
+                  <label>Backup Type</label>
+                  <MultiSelect
+                     title="Backup Type"
+                     fieldValue={selected.methods}
+                     options={filterableItems.methods}
+                     onUpdate={(methods) => setSelected((selected) => ({ ...selected, methods }))}
+                  />
+               </div>
+               <div className={classes.field}>
+                  <label>Storage</label>
+                  <MultiSelect
+                     title="Storages"
+                     fieldValue={selected.storages}
+                     options={filterableItems.storages}
+                     onUpdate={(storages) => setSelected((selected) => ({ ...selected, storages }))}
+                  />
+               </div>
+               <div className={classes.field}>
+                  <label>Tags</label>
+                  <MultiSelect
+                     title="Tags"
+                     fieldValue={selected.tags}
+                     options={filterableItems.tags}
+                     onUpdate={(tags) => setSelected((selected) => ({ ...selected, tags }))}
+                  />
+               </div>
+               <div className={classes.footer}>
+                  <button
+                     onClick={() => {
+                        localStorage.removeItem('plans_filter');
+                        setSelected(defaultState);
+                        onUpdate(null);
+                        setShowDropDown(false);
+                     }}
+                  >
+                     <Icon type="reload" /> Reset
+                  </button>
+                  <button
+                     onClick={() => {
+                        localStorage.setItem('plans_filter', JSON.stringify(selected));
+                        onUpdate(selected);
+                        setShowDropDown(false);
+                     }}
+                  >
+                     <Icon type="check" size={12} /> Apply
+                  </button>
+               </div>
+            </div>
+         )}
+      </div>
+   );
+};
+
+export default FilterPlans;

package/src/components/Plan/PlanForm/PlanForm.tsx

@@ -4,7 +4,7 @@ import SidePanel from '../../common/SidePanel/SidePanel';
 import StoragePicker from '../../common/form/StoragePicker/StoragePicker';
 import PlanStrategySettings from '../PlanSettings/PlanStrategySettings';
 import PlanSourceSettings from '../PlanSettings/PlanSourceSettings';
-import { NewPlanSettings } from '../../../@types/plans';
+import { NewPlanSettings, PlanAddRunSettings } from '../../../@types/plans';
 import classes from '../AddPlan/AddPlan.module.scss';
 import PFClasses from './PlanForm.module.scss';
 import { useGetSettings } from '../../../services/settings';
@@ -27,6 +27,8 @@ type PlanFormProps = {
    storagePath?: string;
    storageId?: string;
    planId?: string;
+   runSettings?: PlanAddRunSettings;
+   setRunSettings?: (runSettings: PlanAddRunSettings) => void;
 };
 
 const PlanForm = ({
@@ -40,6 +42,8 @@ const PlanForm = ({
    storagePath,
    storageId,
    planId,
+   runSettings,
+   setRunSettings,
 }: PlanFormProps) => {
    const [step, setStep] = useState<number>(1);
 
@@ -279,6 +283,8 @@ const PlanForm = ({
                      onUpdate={onPlanSettingsChange}
                      device={deviceInstance}
                      isEditing={type === 'edit'}
+                     runSettings={runSettings}
+                     setRunSettings={setRunSettings}
                   />
                </div>
             )}

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

@@ -103,6 +103,25 @@
    }
 }
 
+.repairBox {
+   border: 1px solid var(--line-color);
+   padding: 12px;
+   margin: 15px 5px;
+   box-sizing: border-box;
+   border-radius: 6px;
+   border-color: var(--primary-color-mid) #aaacff;
+   background: var(--background-color);
+
+   button {
+      background-color: var(--primary-color);
+      color: var(--primary-text-color);
+      padding: 6px 12px;
+      cursor: pointer;
+      border-radius: 4px;
+      margin-top: 6px;
+   }
+}
+
 @media only screen and (max-width: 768px) {
    .integrityLogs .integrityLogsHeader {
       flex-direction: column;

package/src/components/Plan/PlanIntegrity/PlanIntegrity.tsx

@@ -13,9 +13,10 @@ interface PlanIntegrityProps {
    storage: { name: string; type: string; id: string };
    replicationStorages: PlanReplicationStorage[];
    onClose: () => void;
+   onRepairOpen: (replicationId: string) => void;
 }
 
-const PlanIntegrity = ({ planId, taskPending, verificationData, storage, replicationStorages = [], onClose }: PlanIntegrityProps) => {
+const PlanIntegrity = ({ planId, taskPending, verificationData, storage, replicationStorages = [], onClose, onRepairOpen }: PlanIntegrityProps) => {
    const [showContent, setShowContent] = useState('primary');
    const integrityCheckMutation = useCheckPlanIntegrity();
 
@@ -67,6 +68,11 @@ const PlanIntegrity = ({ planId, taskPending, verificationData, storage, replica
                      .split('\n')
                      .map((line, index) => <p key={index}>{line.includes('`') ? <code>{line.replace(/`/g, '')}</code> : line}</p>)}
                {!backupResData.fix && <p>No Suggestion for this issue.</p>}
+               {(backupResData.errorType === 'pack_file_error' || backupResData.errorType === 'index_error') && (
+                  <p>
+                     <button onClick={() => onRepairOpen(storageType)}>Open Repo Repair</button> Window for more options.
+                  </p>
+               )}
                <p>
                   Learn more about fixing restic repo issues{' '}
                   <a
@@ -96,6 +102,37 @@ const PlanIntegrity = ({ planId, taskPending, verificationData, storage, replica
       return <div className="label error">⛔ Error Found. {backupMessage}</div>;
    };
 
+   const renderRepairContent = (storageType: string) => {
+      const backupResData = getBackupResultByStorage(storageType);
+      return (
+         <div className={classes.repairBox}>
+            {(backupResData?.errorType === 'pack_file_error' || backupResData?.errorType === 'repairable_pack_file_error') && (
+               <div>
+                  Some pack files in the repository are either damaged or missing and can be repaired.{' '}
+                  <button onClick={() => onRepairOpen(storageType)}>
+                     <Icon type="repair" size={13} /> Open Repo Repair Tool
+                  </button>
+               </div>
+            )}
+            {backupResData?.errorType === 'index_error' && (
+               <div>
+                  The index files in the repository are corrupted and can be repaired.{' '}
+                  <button onClick={() => onRepairOpen(storageType)}>
+                     <Icon type="repair" size={13} /> Open Repo Repair Tool
+                  </button>{' '}
+               </div>
+            )}
+         </div>
+      );
+   };
+
+   const renderRepairOrFixSuggestion = (storageType: string) => {
+      const backupResData = getBackupResultByStorage(storageType);
+      const errorType = backupResData?.errorType;
+      const isRepairable = errorType === 'pack_file_error' || errorType === 'index_error' || errorType === 'repairable_pack_file_error';
+      return isRepairable ? renderRepairContent(storageType) : renderBackupFixSuggestion(storageType);
+   };
+
    const renderResultWithReplications = () => {
       return (
          <div className={`${classes.integrityResult} ${classes.withReplications}`}>
@@ -130,7 +167,7 @@ const PlanIntegrity = ({ planId, taskPending, verificationData, storage, replica
                            <div className={classes.replicationResultContent}>
                               {renderBackupStatus(storageType)}
                               {renderLogs(storageType)}
-                              {renderBackupFixSuggestion(storageType)}
+                              {renderRepairOrFixSuggestion(storageType)}
                            </div>
                         )}
                      </div>
@@ -152,7 +189,7 @@ const PlanIntegrity = ({ planId, taskPending, verificationData, storage, replica
                         <div className={classes.integrityResult}>
                            {renderBackupStatus('primary')}
                            {renderLogs('primary')}
-                           {renderBackupFixSuggestion('primary')}
+                           {renderRepairOrFixSuggestion('primary')}
                         </div>
                      ) : (
                         renderResultWithReplications()

package/src/components/Plan/PlanItems/PlanItem.tsx

@@ -79,7 +79,7 @@ const PlanItem = ({ plan, layout = 'list' }: PlanItemProps) => {
          return;
       }
       toast.promise(
-         performBackupMutation.mutateAsync(id),
+         performBackupMutation.mutateAsync({ id }),
          {
             pending: `Starting ${isSync ? 'Sync' : 'Backup'}...`,
             success: `${isSync ? 'Sync' : 'Backup'} initiated successfully! 🚀`,

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

@@ -0,0 +1,53 @@
+.repairContainer {
+   position: relative;
+   small {
+      padding: 12px 0;
+      display: block;
+   }
+   .repairContent {
+      border: 1px solid var(--line-color);
+      border-radius: 6px;
+      button {
+         background: var(--background-color);
+         border-radius: 20px;
+         line-height: 1.7em;
+         color: var(--primary-color);
+         padding: 2px 10px;
+         transition: all 0.1s linear;
+         &:hover {
+            background: var(--primary-color);
+            color: var(--primary-text-color);
+         }
+      }
+      .repairTitle {
+         background: var(--background-color);
+         margin-top: 0;
+         font-weight: 600;
+         font-size: 1.1em;
+         padding: 12px;
+      }
+      p {
+         padding: 16px 8px;
+         border-bottom: 1px solid var(--line-color);
+         margin: 0;
+      }
+      p:last-child {
+         border-bottom: none;
+      }
+   }
+   .overlay {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      top: 0;
+      left: 0;
+      opacity: 0.95;
+      background-color: var(--modal-bg);
+      z-index: 3;
+      justify-content: center;
+      align-items: center;
+      display: flex;
+      border: 1px solid var(--line-color);
+      border-radius: 6px;
+   }
+}

package/src/components/Plan/PlanRepair/PlanRepair.tsx

@@ -0,0 +1,243 @@
+import { toast } from 'react-toastify';
+import { usePausePlan, usePerformBackup, useRepairBackupPlan, useResumePlan } from '../../../services';
+import Icon from '../../common/Icon/Icon';
+import SidePanel from '../../common/SidePanel/SidePanel';
+import classes from './PlanRepair.module.scss';
+
+interface PlanRepairProps {
+   planId: string;
+   errorType: string;
+   onClose: () => void;
+   onOpenIntegrity: () => void;
+}
+
+const PlanRepair = ({ planId, errorType, onClose, onOpenIntegrity }: PlanRepairProps) => {
+   const pauseMutation = usePausePlan();
+   const resumeMutation = useResumePlan();
+
+   const performBackupMutation = usePerformBackup();
+   const repairRepoMutation = useRepairBackupPlan();
+
+   const shouldBeInaccessible =
+      pauseMutation.isPending || resumeMutation.isPending || performBackupMutation.isPending || repairRepoMutation.isPending;
+
+   const pausePlan = () => {
+      toast.promise(
+         pauseMutation.mutateAsync(planId),
+         {
+            pending: 'Pausing backup Plan...',
+            success: 'Backup Plan Paused',
+            error: {
+               render({ data }: any) {
+                  return `Failed to Pause Backup Plan. ${data?.message || 'Unknown Error.'}`;
+               },
+            },
+         },
+         { autoClose: 3000 },
+      );
+   };
+
+   const resumePlan = () => {
+      toast.promise(
+         resumeMutation.mutateAsync(planId),
+         {
+            pending: 'Resuming backup Plan...',
+            success: 'Backup Plan Resumed',
+            error: {
+               render({ data }: any) {
+                  return `Failed to Resume Backup Plan. ${data?.message || 'Unknown Error.'}`;
+               },
+            },
+         },
+         { autoClose: 3000 },
+      );
+   };
+
+   const runBackup = () => {
+      toast.promise(performBackupMutation.mutateAsync({ id: planId, runConfig: { ignoreErrors: true, skipPrune: true } }), {
+         pending: 'Running backup...',
+         success: 'Backup Started!',
+         error: {
+            render({ data }: any) {
+               return `Failed to Start Backup. ${data?.message || 'Unknown Error.'}`;
+            },
+         },
+      });
+   };
+
+   const repairRepo = (type: 'index' | 'snapshots' | 'packs') => {
+      toast.promise(repairRepoMutation.mutateAsync({ planId, type }), {
+         pending: `Repairing broken ${type}...`,
+         success: `Successfully repaired broken ${type}.`,
+         error: {
+            render({ data }: any) {
+               return `Failed to repair broken ${type}. ${data?.message || 'Unknown Error.'}`;
+            },
+         },
+      });
+   };
+
+   const renderMissingPackRepairContent = () => {
+      return (
+         <div className={classes.repairContent}>
+            <p className={classes.repairTitle}>Fixing Restic Repo with Damaged or Missing Packs</p>
+            <p>
+               <strong>Step 1: </strong> First,{' '}
+               <button onClick={pausePlan} disabled={shouldBeInaccessible}>
+                  <Icon type="pause" size={12} /> Pause
+               </button>{' '}
+               the backup plan to prevent any new backup runs from starting.
+            </p>
+            <p>
+               <strong>Step 2: </strong> Download/Backup the index and the snapshots directories from the destination storage.
+            </p>
+            <p>
+               <strong>Step 3: </strong> Then{' '}
+               <button onClick={() => repairRepo('index')} disabled={shouldBeInaccessible}>
+                  <Icon type="repair" size={12} /> Repair the Repo Index
+               </button>{' '}
+               to fix missing or damaged pack files.
+            </p>
+            <p>
+               <strong>Step 4: </strong> Then{' '}
+               <button onClick={runBackup} disabled={shouldBeInaccessible}>
+                  <Icon type="backup" size={13} /> Run a Backup
+               </button>{' '}
+               to update the Repo Index after repairing it.
+            </p>
+            <p>
+               <strong>Step 5: </strong> Then{' '}
+               <button onClick={onOpenIntegrity} disabled={shouldBeInaccessible}>
+                  <Icon type="integrity" size={12} /> Check Integrity
+               </button>{' '}
+               again to see if the repo is fixed.
+            </p>
+            <p>
+               <strong>Step 6: </strong> If that did not fix the issue,{' '}
+               <button onClick={() => repairRepo('snapshots')} disabled={shouldBeInaccessible}>
+                  <Icon type="repair" size={12} /> Repair Broken Snapshots
+               </button>{' '}
+               and then{' '}
+               <button onClick={onOpenIntegrity} disabled={shouldBeInaccessible}>
+                  <Icon type="integrity" size={12} /> Check Integrity
+               </button>
+            </p>
+            <p>
+               <strong>Step 7: </strong> If the issue is resolved,{' '}
+               <button onClick={resumePlan} disabled={shouldBeInaccessible}>
+                  <Icon type="play" size={12} /> Resume
+               </button>{' '}
+               the backup plan.
+            </p>
+         </div>
+      );
+   };
+   const renderPackRepairContent = () => {
+      return (
+         <div className={classes.repairContent}>
+            <p className={classes.repairTitle}>Fixing Restic Repo with Damaged Pack files</p>
+            <p>
+               <strong>Step 1: </strong> First,{' '}
+               <button onClick={pausePlan} disabled={shouldBeInaccessible}>
+                  <Icon type="pause" size={12} /> Pause
+               </button>{' '}
+               the backup plan to prevent any new backup runs from starting.
+            </p>
+            <p>
+               <strong>Step 2: </strong> Then{' '}
+               <button onClick={() => repairRepo('packs')} disabled={shouldBeInaccessible}>
+                  <Icon type="repair" size={12} /> Repair the Pack Files
+               </button>{' '}
+               to fix missing or damaged pack files.
+            </p>
+            <p>
+               <strong>Step 3: </strong> Then{' '}
+               <button onClick={() => repairRepo('snapshots')} disabled={shouldBeInaccessible}>
+                  <Icon type="repair" size={12} /> Repair the Snapshots
+               </button>{' '}
+               to fix the snapshots that relied on the broken pack files.
+            </p>
+            <p>
+               <strong>Step 4: </strong> Then{' '}
+               <button onClick={onOpenIntegrity} disabled={shouldBeInaccessible}>
+                  <Icon type="integrity" size={12} /> Check Integrity
+               </button>{' '}
+               again to see if the repo is fixed.
+            </p>
+            <p>
+               <strong>Step 5: </strong> If the issue is resolved,{' '}
+               <button onClick={resumePlan} disabled={shouldBeInaccessible}>
+                  <Icon type="play" size={12} /> Resume
+               </button>{' '}
+               the backup plan.
+            </p>
+         </div>
+      );
+   };
+
+   const renderIndexRepairContent = () => {
+      return (
+         <div className={classes.repairContent}>
+            <p className={classes.repairTitle}>Fixing Restic Repo with Damaged Index</p>
+            <p>
+               <strong>Step 1: </strong> First,{' '}
+               <button onClick={pausePlan} disabled={shouldBeInaccessible}>
+                  <Icon type="pause" size={12} /> Pause
+               </button>{' '}
+               the backup plan to prevent any new backup runs from starting.
+            </p>
+            <p>
+               <strong>Step 2: </strong> Then{' '}
+               <button onClick={() => repairRepo('index')} disabled={shouldBeInaccessible}>
+                  <Icon type="repair" size={12} /> Repair the Index
+               </button>{' '}
+               to fix damaged index files.
+            </p>
+            <p>
+               <strong>Step 3: </strong> Then{' '}
+               <button onClick={onOpenIntegrity} disabled={shouldBeInaccessible}>
+                  <Icon type="integrity" size={12} /> Check Integrity
+               </button>{' '}
+               again to see if the repo is fixed.
+            </p>
+            <p>
+               <strong>Step 4: </strong> If the issue is resolved,{' '}
+               <button onClick={resumePlan} disabled={shouldBeInaccessible}>
+                  <Icon type="play" size={12} /> Resume
+               </button>{' '}
+               the backup plan.
+            </p>
+         </div>
+      );
+   };
+
+   return (
+      <SidePanel
+         title="Check Backup Integrity"
+         icon={'integrity'}
+         // errorMessage={integrityCheckMutation.error?.message}
+         close={() => onClose()}
+         width="800px"
+      >
+         <div className={classes.repairContainer}>
+            {shouldBeInaccessible && (
+               <div className={classes.overlay}>
+                  <Icon type="loading" size={36} />
+               </div>
+            )}
+            {errorType === 'pack_file_error' && renderMissingPackRepairContent()}
+            {errorType === 'repairable_pack_file_error' && renderPackRepairContent()}
+            {errorType === 'index_error' && renderIndexRepairContent()}
+            <small>
+               If performing the above actions does not resolve the issue, please follow this{' '}
+               <a href="https://restic.readthedocs.io/en/stable/077_troubleshooting.html" target="_blank" rel="noopener noreferrer">
+                  Restic Troubleshooting Guide
+               </a>
+               .
+            </small>
+         </div>
+      </SidePanel>
+   );
+};
+
+export default PlanRepair;

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

@@ -3,7 +3,7 @@ import Icon from '../../common/Icon/Icon';
 import classes from './PlanSettings.module.scss';
 import PlanNotificationSettings from './PlanNotificationSettings';
 import PlanPerformanceSettings from './PlanPerformanceSettings';
-import { NewPlanSettings } from '../../../@types/plans';
+import { NewPlanSettings, PlanAddRunSettings } from '../../../@types/plans';
 import TagsInput from '../../common/form/TagsInput/TagsInput';
 import PlanGeneralSettings from './PlanGeneralSettings';
 import { isMobile } from '../../../utils/helpers';
@@ -17,9 +17,11 @@ interface PlanAdvancedSettingsProps {
    device: Device;
    onUpdate: (notificationSettings: NewPlanSettings) => void;
    isEditing: boolean;
+   runSettings?: PlanAddRunSettings;
+   setRunSettings?: (runSettings: PlanAddRunSettings) => void;
 }
 
-const PlanAdvancedSettings = ({ plan, appSettings, device, onUpdate, isEditing }: PlanAdvancedSettingsProps) => {
+const PlanAdvancedSettings = ({ plan, appSettings, device, onUpdate, isEditing, runSettings, setRunSettings }: PlanAdvancedSettingsProps) => {
    const [advancedTab, setAdvancedTab] = useState('General');
    const settings = plan.settings;
    const integrationTypes = useMemo(() => {
@@ -80,6 +82,8 @@ const PlanAdvancedSettings = ({ plan, appSettings, device, onUpdate, isEditing }
                   settings={settings}
                   onUpdate={(newSettings) => onUpdate({ ...plan, settings: newSettings })}
                   isEditing={isEditing}
+                  runSettings={runSettings}
+                  setRunSettings={setRunSettings}
                />
             )}
             {advancedTab === 'Notification' && (