@plutonhq/core-frontend 0.1.20 → 0.1.22

package/package.json

@@ -1,7 +1,7 @@
 {
    "name": "@plutonhq/core-frontend",
    "description": "Pluton Core Frontend Library",
-   "version": "0.1.20",
+   "version": "0.1.22",
    "author": "Plutonhq",
    "license": "Apache-2.0",
    "publishConfig": {

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;
+      }
+   }
+}

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/Storage/StorageItem/StorageItem.tsx

@@ -34,7 +34,6 @@ const StorageItem = ({ storage, layout }: StorageItemProps) => {
          onSuccess: (data: any) => {
             console.log('Success :', data);
             toast.success(`Removed Storage Successfully!`, { autoClose: 5000 });
-            close();
          },
       });
    };

package/src/components/common/form/StoragePicker/StoragePicker.module.scss

@@ -24,6 +24,9 @@
          width: calc(65% - 10px);
          margin-left: 10px;
          position: relative;
+         display: flex;
+         flex-direction: row;
+         align-items: center;
          .fileManagerBtn {
             position: absolute;
             right: 1px;
@@ -35,9 +38,33 @@
                color: var(--primary-color);
             }
          }
+         .defaultPath {
+            display: block;
+            min-width: fit-content;
+            background: var(--background-color);
+            color: var(--content-text-color-light);
+            cursor: default;
+            padding: 8px;
+            padding-top: 9px;
+            border-radius: 6px 0 0 6px;
+            border: 1px solid var(--field-line-color);
+            border-right: 0;
+            box-sizing: border-box;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+         }
+         div[class*='_inputField_'] {
+            display: inline-block;
+         }
          div[class*='_inputField_'] input {
             padding: 10px 12px;
          }
+         &.withBucket {
+            div[class*='_inputField_'] input {
+               border-radius: 0 6px 6px 0;
+            }
+         }
       }
       & > div {
          border-radius: 4px;

package/src/components/common/form/StoragePicker/StoragePicker.tsx

@@ -7,7 +7,7 @@ import FolderPicker from '../../FolderPicker/FolderPicker';
 import Icon from '../../Icon/Icon';
 import AddStorage from '../../../Storage/AddStorage/AddStorage';
 
-type storageItem = { name: string; id: string; type: string };
+type storageItem = { name: string; id: string; type: string; defaultPath?: string };
 
 interface StoragePickerProps {
    storagePath?: string;
@@ -23,11 +23,16 @@ const StoragePicker = ({ onUpdate, storagePath = '', storageId, disabled = false
    const [showAddStorageModal, setShowAddStorageModal] = useState(false);
    const [path, setPath] = useState(() => storagePath);
    const isLocalStorage = selectedStorage?.type === 'local';
+   const hasBucketName = selectedStorage?.defaultPath && selectedStorage?.defaultPath !== '/';
+   const fullPath = hasBucketName ? `${selectedStorage.defaultPath}${path ? `/${path}` : ''}` : path;
 
    const { data: allStorageData } = useGetStorages();
    const allUserStorages = (allStorageData?.result as storageItem[]) || [];
    const allStorages = [...allUserStorages];
 
+   console.log('allStorages :', allStorages);
+   console.log('selectedStorage :', selectedStorage);
+
    const storageOptions = useMemo(() => {
       const storageOpts = allStorages.map(({ name, id, type }) => ({
          label: name,
@@ -52,12 +57,16 @@ const StoragePicker = ({ onUpdate, storagePath = '', storageId, disabled = false
       if (allStorages.length > 0 && storageId) {
          const currentStorage = allStorages.find((s) => s.id === storageId);
          setSelectedStorage(currentStorage);
+         if (currentStorage?.defaultPath && currentStorage.defaultPath !== '/') {
+            const prefix = currentStorage.defaultPath + '/';
+            setPath((prev) => (prev.startsWith(prefix) ? prev.slice(prefix.length) : prev));
+         }
       }
    }, [allStorageData]);
 
    useEffect(() => {
       if (selectedStorage) {
-         onUpdate({ storage: selectedStorage, path });
+         onUpdate({ storage: selectedStorage, path: fullPath });
       }
    }, [selectedStorage, path]);
 
@@ -80,12 +89,17 @@ const StoragePicker = ({ onUpdate, storagePath = '', storageId, disabled = false
                      disabled={disabled}
                   />
                </div>
-               <div className={classes.path}>
+               <div className={`${classes.path} ${hasBucketName ? classes.withBucket : ''}`}>
+                  {hasBucketName && (
+                     <span className={classes.defaultPath} title={`Bucket: ${selectedStorage.defaultPath}`}>
+                        {selectedStorage.defaultPath + '/'}
+                     </span>
+                  )}
                   <Input
                      disabled={disabled}
                      fieldValue={path}
-                     onUpdate={(val) => setPath(val)}
-                     placeholder={isLocalStorage ? 'Select a folder' : `folder-or-bucket/subfolder`}
+                     onUpdate={(val) => setPath(val.startsWith('/') ? val.slice(1) : val)} //if the val starts with a slash remove it
+                     placeholder={isLocalStorage ? 'Select a folder' : hasBucketName ? 'subfolder' : `folder-or-bucket/subfolder`}
                      full={true}
                      required={!disabled && isLocalStorage}
                      error={(!disabled && isLocalStorage && !path ? 'Required' : '') as string}

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);
+   }
+}