@plutonhq/core-frontend 0.1.21 → 0.1.23

package/src/components/Storage/StorageAuthSettings/StorageAuthSettings.tsx

@@ -1,9 +1,10 @@
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { storageOptionField } from '../../../@types/storages';
 import Tristate from '../../common/form/Tristate/Tristate';
 import Icon from '../../common/Icon/Icon';
 import classes from '../AddStorage/AddStorage.module.scss';
 import StorageSettings from '../StorageSettings/StorageSettings';
+import { startStorageAuthorize, getStorageAuthorizeStatus, cancelStorageAuthorize } from '../../../services/storage';
 
 interface StorageAuthSettingsProps {
    storageType: string;
@@ -16,6 +17,8 @@ interface StorageAuthSettingsProps {
    onAuthTypeChange: (authType: string) => void;
 }
 
+type OAuthStatus = 'idle' | 'authorizing' | 'success' | 'error';
+
 const StorageAuthSettings = ({
    storageType,
    fields,
@@ -29,6 +32,16 @@ const StorageAuthSettings = ({
    const [showAdvanced, setShowAdvanced] = useState(true);
    const [showOAuthDoc, setShowOAuthDoc] = useState(false);
 
+   // OAuth auto-authorize state
+   const [oauthStatus, setOauthStatus] = useState<OAuthStatus>('idle');
+   const [authSessionId, setAuthSessionId] = useState<string | null>(null);
+   const [authUrl, setAuthUrl] = useState<string | null>(null);
+   const [authError, setAuthError] = useState<string | null>(null);
+   const pollingRef = useRef<ReturnType<typeof setInterval> | null>(null);
+
+   const installType = (window as any).plutonInstallType;
+   const isDesktop = installType === 'binary' || installType === 'dev';
+
    console.log('availableAuthTypes :', fields, authTypes, currentAuthType);
 
    useEffect(() => {
@@ -37,6 +50,76 @@ const StorageAuthSettings = ({
       }
    }, [authTypes, currentAuthType, onAuthTypeChange]);
 
+   // Cleanup polling on unmount
+   useEffect(() => {
+      return () => {
+         if (pollingRef.current) {
+            clearInterval(pollingRef.current);
+         }
+      };
+   }, []);
+
+   const stopPolling = useCallback(() => {
+      if (pollingRef.current) {
+         clearInterval(pollingRef.current);
+         pollingRef.current = null;
+      }
+   }, []);
+
+   const startOAuthAuthorize = useCallback(async () => {
+      setOauthStatus('authorizing');
+      setAuthUrl(null);
+      setAuthError(null);
+
+      try {
+         const { sessionId } = await startStorageAuthorize(storageType);
+         setAuthSessionId(sessionId);
+
+         // Start polling every 2 seconds
+         pollingRef.current = setInterval(async () => {
+            try {
+               const result = await getStorageAuthorizeStatus(sessionId);
+
+               if (result.authUrl) {
+                  setAuthUrl(result.authUrl);
+               }
+
+               if (result.status === 'success' && result.token) {
+                  stopPolling();
+                  setOauthStatus('success');
+                  onUpdate({ ...settings, token: result.token });
+               } else if (result.status === 'error') {
+                  stopPolling();
+                  setOauthStatus('error');
+                  setAuthError(result.error || 'Authorization failed');
+               }
+            } catch (err: any) {
+               stopPolling();
+               setOauthStatus('error');
+               setAuthError(err?.message || 'Failed to check authorization status');
+            }
+         }, 2000);
+      } catch (err: any) {
+         setOauthStatus('error');
+         setAuthError(err?.message || 'Failed to start authorization');
+      }
+   }, [storageType, settings, onUpdate, stopPolling]);
+
+   const handleCancelAuthorize = useCallback(async () => {
+      stopPolling();
+      if (authSessionId) {
+         try {
+            await cancelStorageAuthorize(authSessionId);
+         } catch {
+            // Ignore cancel errors
+         }
+      }
+      setOauthStatus('idle');
+      setAuthSessionId(null);
+      setAuthUrl(null);
+      setAuthError(null);
+   }, [authSessionId, stopPolling]);
+
    return (
       <div className={classes.authSettings}>
          <div
@@ -67,14 +150,64 @@ const StorageAuthSettings = ({
                      />
                   </div>
                )}
-
                <StorageSettings
                   fields={fields.filter((f) => f.authFieldType === currentAuthType)}
                   settings={settings}
                   onUpdate={(newSettings) => onUpdate(newSettings)}
                   errors={errors}
                />
-               {currentAuthType === 'oauth' && (
+
+               {currentAuthType === 'oauth' && isDesktop && oauthStatus === 'idle' && (
+                  <div className={classes.oauthButton}>
+                     <button className={classes.oauthAuthorizeBtn} onClick={startOAuthAuthorize}>
+                        <Icon type={'key'} size={14} /> Authorize & Get Access Token
+                     </button>
+                  </div>
+               )}
+
+               {currentAuthType === 'oauth' && isDesktop && oauthStatus !== 'idle' && (
+                  <div className={`${classes.oauthContainer} ${classes[oauthStatus]}`}>
+                     {oauthStatus === 'authorizing' && (
+                        <div className={classes.oauthProgress}>
+                           <p>
+                              <strong>Waiting for authorization...</strong>
+                              <br />A browser window should have opened. Please authorize the connection in your browser.
+                           </p>
+                           {authUrl && (
+                              <p>
+                                 If the browser didn't open automatically,{' '}
+                                 <a href={authUrl} target="_blank" rel="noopener noreferrer">
+                                    click here to authorize
+                                 </a>
+                                 .
+                              </p>
+                           )}
+                           <button className={classes.oauthInnerBtn} onClick={handleCancelAuthorize}>
+                              Cancel
+                           </button>
+                        </div>
+                     )}
+                     {oauthStatus === 'success' && (
+                        <div className={classes.oauthProgress}>
+                           <p>
+                              <Icon type={'check'} size={14} /> <strong>Authorization successful!</strong> Token has been automatically filled in.
+                           </p>
+                        </div>
+                     )}
+                     {oauthStatus === 'error' && (
+                        <div className={classes.oauthProgress}>
+                           <p>
+                              <strong>Authorization failed:</strong> {authError}
+                           </p>
+                           <button className={classes.oauthInnerBtn} onClick={startOAuthAuthorize}>
+                              <Icon type={'key'} size={14} /> Try Again
+                           </button>
+                        </div>
+                     )}
+                  </div>
+               )}
+
+               {currentAuthType === 'oauth' && !isDesktop && (
                   <div className={classes.oauthDoc}>
                      <h4 onClick={() => setShowOAuthDoc(!showOAuthDoc)}>
                         <Icon type={'key'} size={14} /> Acquiring the OAuth Access Token

package/src/components/common/Icon/Icon.tsx

@@ -1507,6 +1507,22 @@ const Icon = ({ type, color = 'currentColor', size = 16, title = '', classes = '
                ></path>
             </IconWrapper>
          )}
+         {type === 'discord' && (
+            <IconWrapper size={size} viewBox="0 0 256 199">
+               <path
+                  fill="#5865f2"
+                  d="M216.856 16.597A208.5 208.5 0 0 0 164.042 0c-2.275 4.113-4.933 9.645-6.766 14.046q-29.538-4.442-58.533 0c-1.832-4.4-4.55-9.933-6.846-14.046a207.8 207.8 0 0 0-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161 161 0 0 0 79.735 175.3a136.4 136.4 0 0 1-21.846-10.632a109 109 0 0 0 5.356-4.237c42.122 19.702 87.89 19.702 129.51 0a132 132 0 0 0 5.355 4.237a136 136 0 0 1-21.886 10.653c4.006 8.02 8.638 15.67 13.873 22.848c21.142-6.58 42.646-16.637 64.815-33.213c5.316-56.288-9.08-105.09-38.056-148.36M85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2s23.236 11.804 23.015 26.2c.02 14.375-10.148 26.18-23.015 26.18m85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2c0 14.375-10.148 26.18-23.015 26.18"
+               />
+            </IconWrapper>
+         )}
+         {type === 'webhook' && (
+            <IconWrapper size={size} viewBox="0 0 24 24">
+               <path
+                  fill={color}
+                  d="M7 21q-2.075 0-3.537-1.463T2 16q0-1.4.675-2.537t1.8-1.788q.525-.3 1.025.013t.5.862q0 .275-.112.5t-.313.325q-.7.375-1.137 1.075T4 16q0 1.25.875 2.125T7 19t2.125-.875T10 16q0-.425.238-.712T10.9 15h4.975q.2-.225.488-.363T17 14.5q.625 0 1.063.438T18.5 16t-.437 1.063T17 17.5q-.35 0-.638-.137T15.876 17H11.9q-.35 1.725-1.713 2.863T7 21m0-3.5q-.625 0-1.062-.437T5.5 16q0-.55.35-.95t.85-.525l2.35-3.9q-.725-.675-1.138-1.612T7.5 7q0-2.075 1.463-3.537T12.5 2q1.75 0 3.088 1.063T17.35 5.75q.125.475-.175.863t-.8.387q-.325 0-.612-.238t-.388-.587q-.275-.95-1.05-1.562T12.5 4q-1.25 0-2.125.875T9.5 7q0 .825.413 1.513T10.974 9.6q.35.2.438.5t-.088.6l-2.9 4.85q.05.125.063.225T8.5 16q0 .625-.437 1.063T7 17.5M17 21q-.65 0-1.263-.162T14.6 20.4q-.675-.375-.537-1.137t1.012-.763q.125 0 .275.05t.275.125q.325.175.663.25T17 19q1.25 0 2.125-.875T20 16t-.875-2.125T17 13q-.25 0-.475.038t-.45.112q-.4.125-.75.013t-.525-.388l-2.575-4.3q-.525-.1-.875-.5T11 7q0-.625.438-1.062T12.5 5.5t1.063.438T14 7v.213q0 .087-.05.212l2.175 3.65q.2-.05.425-.062T17 11q2.075 0 3.538 1.463T22 16t-1.463 3.538T17 21"
+               />
+            </IconWrapper>
+         )}
       </span>
    );
 };

package/src/components/index.ts

@@ -80,6 +80,7 @@ export { default as PlanRemoveModal } from './Plan/PlanRemoveModal/PlanRemoveMod
 export { default as PlanAdvancedSettings } from './Plan/PlanSettings/PlanAdvancedSettings';
 export { default as PlanGeneralSettings } from './Plan/PlanSettings/PlanGeneralSettings';
 export { default as PlanNotificationSettings } from './Plan/PlanSettings/PlanNotificationSettings';
+export { default as PlanNotificationSettingsTester } from './Plan/PlanSettings/PlanNotificationSettingsTester';
 export { default as PlanPerformanceSettings } from './Plan/PlanSettings/PlanPerformanceSettings';
 export { default as PlanPruneSettings } from './Plan/PlanSettings/PlanPruneSettings';
 export { default as PlanScriptsSettings } from './Plan/PlanSettings/PlanScriptsSettings';

package/src/services/plans.ts

@@ -1,7 +1,7 @@
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { toast } from 'react-toastify';
 import { API_URL } from '../utils/constants';
-import { NewPlanSettings, Plan } from '../@types/plans';
+import { NewPlanSettings, Plan, PlanNotification } from '../@types/plans';
 
 // Get All Plans
 export async function getAllPlans() {
@@ -467,3 +467,40 @@ export function useCheckPlanIntegrity() {
       },
    });
 }
+
+export async function sendTestNotificationRequest(payload: {
+   planId: string;
+   notificationCase: string;
+   notificationChannel: 'webhook' | 'slack' | 'discord';
+   channelSettings: PlanNotification['webhook'] | PlanNotification['slack'] | PlanNotification['discord'];
+}) {
+   console.log('payload :', payload);
+   const headers = new Headers({ 'Content-Type': 'application/json', Accept: 'application/json' });
+   const res = await fetch(`${API_URL}/plans/${payload.planId}/action/test-notification`, {
+      method: 'POST',
+      headers,
+      credentials: 'include',
+      body: JSON.stringify(payload),
+   });
+
+   // Check if response is ok
+   if (!res.ok) {
+      const data = await res.json();
+      throw new Error(data.error);
+   }
+
+   const data = await res.json();
+   return data;
+}
+
+export function useTestNotification() {
+   return useMutation({
+      mutationFn: sendTestNotificationRequest,
+      onSuccess: (res) => {
+         console.log('# Test notification request sent successfully! :', res);
+      },
+      onError: (res) => {
+         console.log('# Test notification request failed! :', res);
+      },
+   });
+}

package/src/services/settings.ts

@@ -50,7 +50,6 @@ export function useUpdateSettings() {
    return useMutation({
       mutationFn: updateSettings,
       onSuccess: (res) => {
-         // TODO: Should Display a Notification Bubble.
          console.log('# Settings Updated! :', res);
          queryClient.invalidateQueries({ queryKey: ['settings'] });
       },
@@ -157,10 +156,11 @@ export async function validateIntegration(updatePayload: {
 }
 
 export function useValidateIntegration() {
+   const queryClient = useQueryClient();
    return useMutation({
       mutationFn: validateIntegration,
       onSuccess: (res) => {
-         // TODO: Should Display a Notification Bubble.
+         queryClient.invalidateQueries({ queryKey: ['settings'] });
          console.log('# Settings Updated! :', res);
       },
    });

package/src/services/storage.ts

@@ -198,3 +198,52 @@ export function useVerifyStorage() {
       },
    });
 }
+
+// ── OAuth Authorization ─────────────────────────────────────────────
+export async function startStorageAuthorize(type: string): Promise<{ sessionId: string }> {
+   const header = new Headers({ 'Content-Type': 'application/json', Accept: 'application/json' });
+   const res = await fetch(`${API_URL}/storages/authorize`, {
+      method: 'POST',
+      credentials: 'include',
+      headers: header,
+      body: JSON.stringify({ type }),
+   });
+   const data = await res.json();
+   if (!data.success) {
+      throw new Error(data.error);
+   }
+   return data.result;
+}
+
+export async function getStorageAuthorizeStatus(sessionId: string): Promise<{
+   status: 'pending' | 'success' | 'error';
+   token?: string;
+   error?: string;
+   authUrl?: string;
+}> {
+   const url = new URL(`${API_URL}/storages/authorize/status`);
+   url.searchParams.set('sessionId', sessionId);
+   const res = await fetch(url.toString(), {
+      method: 'GET',
+      credentials: 'include',
+   });
+   const data = await res.json();
+   if (!data.success) {
+      throw new Error(data.error);
+   }
+   return data.result;
+}
+
+export async function cancelStorageAuthorize(sessionId: string): Promise<void> {
+   const header = new Headers({ 'Content-Type': 'application/json', Accept: 'application/json' });
+   const res = await fetch(`${API_URL}/storages/authorize/cancel`, {
+      method: 'POST',
+      credentials: 'include',
+      headers: header,
+      body: JSON.stringify({ sessionId }),
+   });
+   const data = await res.json();
+   if (!data.success) {
+      throw new Error(data.error);
+   }
+}

package/src/utils/constants.ts

@@ -42,6 +42,16 @@ export const DEFAULT_PLAN_SETTINGS: NewPlanSettings = {
             authToken: '',
             tags: '',
          },
+         slack: {
+            enabled: false,
+            case: 'failure',
+            url: '',
+         },
+         discord: {
+            enabled: false,
+            case: 'failure',
+            url: '',
+         },
       },
       prune: {
          snapCount: 5,
@@ -61,12 +71,14 @@ export const DEFAULT_PLAN_SETTINGS: NewPlanSettings = {
                enabled: false,
                type: 'smtp',
                emails: '',
+               case: 'failure',
             },
             webhook: {
                enabled: false,
                method: 'POST',
                contentType: 'application/json',
                url: '',
+               case: 'failure',
             },
             push: {
                enabled: false,
@@ -74,6 +86,17 @@ export const DEFAULT_PLAN_SETTINGS: NewPlanSettings = {
                authType: 'none',
                authToken: '',
                tags: '',
+               case: 'failure',
+            },
+            slack: {
+               enabled: false,
+               case: 'failure',
+               url: '',
+            },
+            discord: {
+               enabled: false,
+               case: 'failure',
+               url: '',
             },
          },
       },

package/src/utils/helpers.ts

@@ -343,6 +343,15 @@ export const isValidEmail = (email: string): boolean => {
    return true;
 };
 
+export const isValidURL = (url: string): boolean => {
+   try {
+      new URL(url);
+      return true;
+   } catch {
+      return false;
+   }
+};
+
 export const shouldDisplayStorageField = (field: storageOptionField, settings: Record<string, any>, allFields: storageOptionField[]): boolean => {
    // If no conditions, always display the field
    if (!field.condition || field.condition.length === 0) {