@plutonhq/core-frontend 0.1.21 → 0.1.23

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

@@ -2,75 +2,207 @@ import classes from './PlanSettings.module.scss';
 import Select from '../../common/form/Select/Select';
 import Input from '../../common/form/Input/Input';
 import Toggle from '../../common/form/Toggle/Toggle';
-import { NewPlanSettings, PlanNotificationCase } from '../../../@types/plans';
+import { PlanNotification, PlanNotificationCase } from '../../../@types/plans';
 import { NavLink } from 'react-router';
+import PlanNotificationSettingsTester from './PlanNotificationSettingsTester';
+import { Icon } from '../..';
 
 interface PlanNotificationSettingsProps {
-   plan: NewPlanSettings;
    types: string[];
+   isSync: boolean;
+   notificationType?: 'backup' | 'integrity';
    admin_email?: string;
-   onUpdate: (notificationSettings: NewPlanSettings['settings']['notification']) => void;
+   planID?: string;
+   notificationSettings: PlanNotification;
+   onUpdate: (notificationSettings: PlanNotification) => void;
 }
 
-const PlanNotificationSettings = ({ plan, types = [], admin_email = '', onUpdate }: PlanNotificationSettingsProps) => {
-   const notificationSettings = plan.settings?.notification || {};
+const PlanNotificationSettings = ({
+   planID,
+   isSync,
+   types = [],
+   admin_email = '',
+   notificationSettings,
+   notificationType = 'backup',
+   onUpdate,
+}: PlanNotificationSettingsProps) => {
+   const hasConnectedIntegrations = types.length > 0;
+   const defaultEmail = !hasConnectedIntegrations && admin_email ? admin_email : '';
 
    const updateNotificationEmails = (emails: string) => {
       onUpdate({ ...notificationSettings, email: { ...notificationSettings.email, emails } });
    };
 
-   const hasConnectedIntegrations = types.length > 0;
-   const defaultEmail = !hasConnectedIntegrations && admin_email ? admin_email : '';
+   const caseOptions = [
+      { label: 'On Start', value: 'start' },
+      { label: 'On End', value: 'end' },
+      { label: 'On Both Start & End', value: 'both' },
+      { label: 'On Success Only', value: 'success' },
+      { label: 'On Failure Only', value: 'failure' },
+   ];
 
    return (
       <>
-         <div className={classes.field}>
-            <label className={classes.label}>Notification</label>
-            <Toggle
-               fieldValue={notificationSettings?.email?.enabled || false}
-               onUpdate={(val: boolean) => onUpdate({ ...notificationSettings, email: { ...notificationSettings.email, enabled: val } })}
-               description={plan.method === 'sync' ? 'Notify Me when Sync fails' : 'Notify Me when Backup fails or succeeds'}
-            />
+         <div className={classes.notificationSettingsSection}>
+            <div className={`${classes.field} ${classes.notificationToggle}`}>
+               <Icon type="email" size={14} />
+               <Toggle
+                  label="Enable Email Notifications"
+                  fieldValue={notificationSettings?.email?.enabled || false}
+                  onUpdate={(val: boolean) => onUpdate({ ...notificationSettings, email: { ...notificationSettings.email, enabled: val } })}
+                  hint={'Notify me via email when Backup fails or succeeds'}
+                  inline={true}
+               />
+            </div>
+            {notificationSettings?.email?.enabled && (
+               <div className={classes.notificationSettings}>
+                  {!isSync && (
+                     <div className={classes.field}>
+                        <Select
+                           label="Send Notification"
+                           fieldValue={notificationSettings?.email?.case || 'failure'}
+                           options={caseOptions}
+                           onUpdate={(val: string) =>
+                              onUpdate({ ...notificationSettings, email: { ...notificationSettings.email, case: val as PlanNotificationCase } })
+                           }
+                           inline={true}
+                        />
+                     </div>
+                  )}
+                  <div className={classes.field}>
+                     <Input
+                        label="Email Addresses"
+                        fieldValue={notificationSettings?.email?.emails || defaultEmail}
+                        onUpdate={(val) => updateNotificationEmails(val)}
+                        placeholder="john@gmail.com, chris@icloud.com"
+                        full={true}
+                        inline={true}
+                        required={true}
+                        disabled={!hasConnectedIntegrations}
+                        error={!notificationSettings?.email?.emails ? 'Required' : undefined}
+                     />
+                     {!hasConnectedIntegrations && (
+                        <div className={classes.fieldNotice}>
+                           ⚠️ SMTP has not been setup yet. Set it up in <NavLink to={`/settings?t=integration`}>Settings</NavLink> to enable Email
+                           Notification.
+                        </div>
+                     )}
+                  </div>
+               </div>
+            )}
          </div>
-         {notificationSettings?.email?.enabled && (
-            <>
-               {plan.method !== 'sync' && (
+
+         {/* Slack Notification */}
+         <div className={classes.notificationSettingsSection}>
+            <div className={`${classes.field} ${classes.notificationToggle}`}>
+               <Icon type="slack" size={14} />
+               <Toggle
+                  label="Enable Slack Notifications"
+                  fieldValue={notificationSettings?.slack?.enabled || false}
+                  onUpdate={(val: boolean) =>
+                     onUpdate({
+                        ...notificationSettings,
+                        slack: { ...notificationSettings.slack, enabled: val, url: notificationSettings.slack?.url || '' },
+                     })
+                  }
+                  hint="Send notifications to a Slack channel via webhook"
+                  inline={true}
+               />
+            </div>
+            {notificationSettings?.slack?.enabled && (
+               <div className={classes.notificationSettings}>
+                  {!isSync && (
+                     <div className={classes.field}>
+                        <Select
+                           label="Send Slack Notification"
+                           fieldValue={notificationSettings?.slack?.case || 'failure'}
+                           options={caseOptions}
+                           onUpdate={(val: string) =>
+                              onUpdate({ ...notificationSettings, slack: { ...notificationSettings.slack, case: val as PlanNotificationCase } })
+                           }
+                           inline={true}
+                        />
+                     </div>
+                  )}
                   <div className={classes.field}>
-                     <label className={classes.label}>Send Notification</label>
-                     <Select
-                        fieldValue={notificationSettings?.email?.case || 'failure'}
-                        options={[
-                           { label: 'On Start', value: 'start' },
-                           { label: 'On End', value: 'end' },
-                           { label: 'On Both Start & End', value: 'both' },
-                           { label: 'On Success Only', value: 'success' },
-                           { label: 'On Failure Only', value: 'failure' },
-                        ]}
-                        onUpdate={(val: string) =>
-                           onUpdate({ ...notificationSettings, email: { ...notificationSettings.email, case: val as PlanNotificationCase } })
-                        }
+                     <Input
+                        label="Slack Webhook URL"
+                        fieldValue={notificationSettings?.slack?.url || ''}
+                        onUpdate={(val) => onUpdate({ ...notificationSettings, slack: { ...notificationSettings.slack, url: val } })}
+                        placeholder="https://hooks.slack.com/services/T00/B00/xxxx"
+                        required={true}
+                        inline={true}
+                        full={true}
+                        error={notificationSettings?.slack?.enabled && !notificationSettings?.slack?.url ? 'Required' : undefined}
+                     />
+                  </div>
+                  <div className={`${classes.field} ${classes.notificationTestField}`}>
+                     <PlanNotificationSettingsTester
+                        planId={planID || ''}
+                        notificationChannel="slack"
+                        notificationSettings={notificationSettings}
+                        notificationType={notificationType}
                      />
                   </div>
-               )}
-               <div className={classes.field}>
-                  <label className={classes.label}>Email Addresses</label>
-                  <Input
-                     fieldValue={notificationSettings?.email?.emails || defaultEmail}
-                     onUpdate={(val) => updateNotificationEmails(val)}
-                     placeholder="john@gmail.com, chris@icloud.com"
-                     full={true}
-                     disabled={!hasConnectedIntegrations}
-                     error={!notificationSettings?.email?.emails ? 'Required' : undefined}
-                  />
-                  {!hasConnectedIntegrations && (
-                     <div className={classes.fieldNotice}>
-                        ⚠️ SMTP has not been setup yet. Set it up in <NavLink to={`/settings?t=integration`}>Settings</NavLink> to enable Email
-                        Notification.
+               </div>
+            )}
+         </div>
+
+         {/* Discord Notification */}
+         <div className={classes.notificationSettingsSection}>
+            <div className={`${classes.field} ${classes.notificationToggle}`}>
+               <Icon type="discord" size={14} />
+               <Toggle
+                  label="Send Discord Notifications"
+                  fieldValue={notificationSettings?.discord?.enabled || false}
+                  onUpdate={(val: boolean) =>
+                     onUpdate({
+                        ...notificationSettings,
+                        discord: { ...notificationSettings.discord, enabled: val, url: notificationSettings.discord?.url || '' },
+                     })
+                  }
+                  hint="Send notifications to a Discord channel via webhook"
+                  inline={true}
+               />
+            </div>
+            {notificationSettings?.discord?.enabled && (
+               <div className={classes.notificationSettings}>
+                  {!isSync && (
+                     <div className={classes.field}>
+                        <Select
+                           label="Send Discord Notification"
+                           fieldValue={notificationSettings?.discord?.case || 'failure'}
+                           options={caseOptions}
+                           onUpdate={(val: string) =>
+                              onUpdate({ ...notificationSettings, discord: { ...notificationSettings.discord, case: val as PlanNotificationCase } })
+                           }
+                           inline={true}
+                        />
                      </div>
                   )}
+                  <div className={classes.field}>
+                     <Input
+                        label="Discord Webhook URL"
+                        fieldValue={notificationSettings?.discord?.url || ''}
+                        onUpdate={(val) => onUpdate({ ...notificationSettings, discord: { ...notificationSettings.discord, url: val } })}
+                        placeholder="https://discord.com/api/webhooks/xxxx/xxxx"
+                        required={true}
+                        inline={true}
+                        full={true}
+                        error={notificationSettings?.discord?.enabled && !notificationSettings?.discord?.url ? 'Required' : undefined}
+                     />
+                  </div>
+                  <div className={`${classes.field} ${classes.notificationTestField}`}>
+                     <PlanNotificationSettingsTester
+                        planId={planID || ''}
+                        notificationChannel="discord"
+                        notificationType={notificationType}
+                        notificationSettings={notificationSettings}
+                     />
+                  </div>
                </div>
-            </>
-         )}
+            )}
+         </div>
       </>
    );
 };

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

@@ -0,0 +1,85 @@
+import { toast } from 'react-toastify';
+import { useState } from 'react';
+import { useTestNotification } from '../../../services';
+import { Icon } from '../..';
+import { NewPlanSettings, PlanNotificationCase } from '../../..';
+import classes from './PlanSettings.module.scss';
+import { isValidURL } from '../../../utils';
+
+const PlanNotificationSettingsTester = ({
+   planId,
+   notificationChannel,
+   notificationSettings,
+   notificationType = 'backup',
+}: {
+   planId: string;
+   notificationType?: 'backup' | 'integrity';
+   notificationChannel: 'webhook' | 'slack' | 'discord';
+   notificationSettings: NewPlanSettings['settings']['notification'];
+}) => {
+   const [showTestNotificationOptions, setShowTestNotificationOptions] = useState(false);
+   const testNotificationMutation = useTestNotification();
+   const channelSettings = notificationSettings[notificationChannel as 'webhook' | 'slack' | 'discord'];
+   const integrityNotification = notificationType === 'integrity';
+
+   const sendTestNotification = (notificationCase: PlanNotificationCase | 'integrity_failure') => {
+      setShowTestNotificationOptions(false);
+      if (!planId) {
+         return toast.error('Test notification can be sent after creating the Plan');
+      }
+      if (!channelSettings?.url || !isValidURL(channelSettings.url)) {
+         return toast.error(`Please enter a valid URL to send test notifications`);
+      }
+
+      toast.promise(
+         testNotificationMutation.mutateAsync({
+            planId,
+            notificationCase: notificationCase,
+            notificationChannel,
+            channelSettings: channelSettings,
+         }),
+         {
+            pending: `Sending Test Request to your ${notificationChannel}...`,
+            success: 'Test Request Sent Successfully!',
+            error: {
+               render({ data }: any) {
+                  return data.message || 'Failed to send test request';
+               },
+            },
+         },
+      );
+   };
+
+   return (
+      <div className={classes.testNotificationContainer}>
+         <button
+            onClick={() =>
+               integrityNotification ? sendTestNotification('integrity_failure') : setShowTestNotificationOptions(!showTestNotificationOptions)
+            }
+            className={`${classes.testNotificationButton} ${!channelSettings?.url ? classes.disabled : ''}`}
+            disabled={!channelSettings?.url || !planId}
+            title={
+               !planId
+                  ? 'Create the Plan first to send test notifications'
+                  : !channelSettings?.url
+                    ? `Enter ${notificationChannel === 'webhook' ? 'the' : notificationChannel.charAt(0).toUpperCase() + notificationChannel.slice(1)} Webhook URL to send test notifications`
+                    : undefined
+            }
+         >
+            <Icon type="send" size={12} /> Send Test Request
+         </button>
+         {!integrityNotification && showTestNotificationOptions && (
+            <div className={classes.testNotificationOptions}>
+               <ul>
+                  <li onClick={() => sendTestNotification('start')}>Start Notification</li>
+                  <li onClick={() => sendTestNotification('end')}>End Notification</li>
+                  <li onClick={() => sendTestNotification('success')}>Success Notification</li>
+                  <li onClick={() => sendTestNotification('failure')}>Failure Notification</li>
+               </ul>
+            </div>
+         )}
+      </div>
+   );
+};
+
+export default PlanNotificationSettingsTester;

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

@@ -84,7 +84,7 @@ const PlanPruneSettings = ({ plan, onUpdate }: PlanPruneSettingsProps) => {
                         fieldValue={pruneSettings.keepWeeklySnaps || ''}
                         onUpdate={(val) => onUpdate({ ...pruneSettings, keepWeeklySnaps: val })}
                      />
-                     <span>Days</span>
+                     <span>Weeks</span>
                   </div>
                   <div className={classes.customPolicyOption}>
                      <span>Keep Monthly Backups for </span>
@@ -92,7 +92,7 @@ const PlanPruneSettings = ({ plan, onUpdate }: PlanPruneSettingsProps) => {
                         fieldValue={pruneSettings.keepMonthlySnaps || ''}
                         onUpdate={(val) => onUpdate({ ...pruneSettings, keepMonthlySnaps: val })}
                      />
-                     <span>Days</span>
+                     <span>Months</span>
                   </div>
                </div>
             </>

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

@@ -462,3 +462,74 @@
       }
    }
 }
+
+.notificationTestField {
+   display: flex;
+   justify-content: right;
+   margin-bottom: 0;
+}
+
+.notificationSettingsSection {
+   border-radius: 6px;
+   border: 1px solid var(--line-color);
+   margin-bottom: 15px;
+   .notificationToggle {
+      margin-bottom: 0;
+      padding: 10px;
+      box-sizing: border-box;
+      display: flex;
+      align-items: center;
+      gap: 5px;
+      div[class*='_fieldInner'] {
+         justify-content: space-between;
+      }
+   }
+   .notificationSettings {
+      padding: 15px;
+      border-top: 1px solid var(--line-color);
+   }
+}
+
+.testNotificationContainer {
+   display: inline-block;
+   position: relative;
+   .testNotificationButton {
+      padding: 6px 12px;
+      background-color: var(--primary-color-light);
+      color: var(--primary-color);
+      font-weight: 600;
+      font-size: 0.9em;
+      border-radius: 4px;
+      cursor: pointer;
+      &.disabled {
+         cursor: not-allowed;
+         opacity: 0.6;
+      }
+   }
+
+   .testNotificationOptions {
+      position: absolute;
+      width: 140px;
+      background-color: var(--content-background-color);
+      border-radius: 6px;
+      border: 1px solid var(--primary-color-mid);
+      bottom: 30px;
+      right: 0px;
+      z-index: 9;
+      ul {
+         list-style-type: none;
+         margin: 0;
+         padding: 0;
+         li {
+            font-size: 0.9em;
+            cursor: pointer;
+            padding: 6px 12px;
+
+            &:hover {
+               background-color: var(--primary-color-light);
+               color: var(--primary-color);
+            }
+         }
+      }
+   }
+}

package/src/components/Settings/GeneralSettings/GeneralSettings.tsx

@@ -77,7 +77,12 @@ const GeneralSettings = ({ settings, settingsID, onUpdate }: GeneralSettingsProp
             />
          </div>
          <div className={classes.field}>
-            <Toggle label="Enable 2FA" fieldValue={settings?.totp?.enabled || false} onUpdate={(val) => update2FASetting(val)} inline={true} />
+            <Toggle
+               label="Enable Two-Factor Authentication (2FA)"
+               fieldValue={settings?.totp?.enabled || false}
+               onUpdate={(val) => update2FASetting(val)}
+               inline={false}
+            />
          </div>
          {show2FASetupConfirm && (
             <ActionModal

package/src/components/Storage/AddStorage/AddStorage.module.scss

@@ -166,3 +166,77 @@
       }
    }
 }
+
+.oauthContainer {
+   background-color: var(--background-color);
+   border: 1px solid var(--line-color);
+   border-radius: 6px;
+   box-sizing: border-box;
+   padding: 12px;
+   word-break: break-all;
+   &.success {
+      background-color: var(--success-bg-color);
+      border-color: var(--success-bg-color);
+      color: var(--success-text-color);
+   }
+   &.error {
+      background-color: var(--error-bg-color);
+      border-color: var(--error-bg-color);
+      color: var(--error-text-color);
+   }
+}
+
+.oauthButton {
+   display: flex;
+   width: 100%;
+   flex-direction: column;
+   align-items: flex-end;
+   .oauthAuthorizeBtn {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 10px 18px;
+      font-size: 13px;
+      font-weight: 600;
+      color: #fff;
+      background-color: var(--primary-color);
+      border: none;
+      border-radius: 6px;
+      cursor: pointer;
+      transition: background-color 0.2s;
+      &:hover {
+         opacity: 0.9;
+      }
+   }
+}
+
+.oauthInnerBtn {
+   display: inline-flex;
+   align-items: center;
+   gap: 6px;
+   padding: 6px 14px;
+   font-size: 12px;
+   font-weight: 500;
+   color: var(--content-text-color);
+   background-color: var(--content-background-color);
+   border: none;
+   border-radius: 6px;
+   cursor: pointer;
+   margin-top: 8px;
+   &:hover {
+      background-color: var(--primary-color);
+      color: var(--primary-text-color);
+   }
+}
+
+.oauthProgress {
+   p {
+      margin: 6px 0;
+      font-size: 13px;
+      line-height: 1.5;
+      a {
+         color: var(--primary-color);
+         text-decoration: underline;
+      }
+   }
+}