@plutonhq/core-frontend 0.0.1

package/src/components/Storage/AddStorage/AddStorage.tsx

@@ -0,0 +1,279 @@
+import { useEffect, useMemo, useState } from 'react';
+import { toast } from 'react-toastify';
+import classes from './AddStorage.module.scss';
+import Icon from '../../common/Icon/Icon';
+import Select from '../../common/form/Select/Select';
+import { useAddStorage, useGetAvailableStorages } from '../../../services/storage';
+import SidePanel from '../../common/SidePanel/SidePanel';
+import TagsInput from '../../common/form/TagsInput/TagsInput';
+import { storageOptionField } from '../../../@types/storages';
+import StorageSettings from '../StorageSettings/StorageSettings';
+// import { useGetDevice } from '../../../services/devices';
+import { shouldDisplayStorageField } from '../../../utils/helpers';
+import StorageAuthSettings from '../StorageAuthSettings/StorageAuthSettings';
+
+type AddStorageProps = {
+   close: () => void;
+};
+
+const AddStorage = ({ close }: AddStorageProps) => {
+   const [inputError, setInputError] = useState<Record<string, string>>({});
+   const [storageTitle, setStorageTitle] = useState('');
+   const [storageType, setStorageType] = useState('');
+   const [currentAuthType, setCurrentAuthType] = useState<string>('');
+   const [showAdvanced, setShowAdvanced] = useState(false);
+   const [storageCredentials, setStorageCredentials] = useState<Record<string, string | number | boolean>>({});
+   const [storageSettings, setStorageSettings] = useState<Record<string, string | number | boolean>>({});
+   const [storageTags, setStorageTags] = useState<string[]>([]);
+   const addStorageMutation = useAddStorage();
+   const { data } = useGetAvailableStorages();
+   // const { data: deviceData } = useGetDevice('main', true);
+   // const mainDeviceIsServer =
+   //    deviceData?.result?.os && deviceData?.result?.platform ? isServerEdition(deviceData.result.os, deviceData.result.platform) : false;
+   const storageProviders = data?.result || {};
+
+   const providersOptions = useMemo(() => {
+      return Object.keys(storageProviders)
+         .map((k) => ({
+            label: storageProviders[k as keyof typeof storageProviders].name,
+            value: k,
+            image: <img src={`providers/${k}.png`} />,
+         }))
+         .sort((a, b) => a.label.localeCompare(b.label));
+   }, [storageProviders]);
+
+   const storageFields = useMemo(() => {
+      const allFields: storageOptionField[] = storageProviders[storageType as keyof typeof storageProviders]?.settings || [];
+      const groupedFields = { required: [], optional: [] };
+
+      allFields.forEach((field: storageOptionField) => {
+         if (field.required) {
+            (groupedFields.required as storageOptionField[]).push(field);
+         } else {
+            (groupedFields.optional as storageOptionField[]).push(field);
+         }
+      });
+
+      return groupedFields;
+   }, [storageProviders, storageType]);
+
+   const authFields = useMemo(() => {
+      const types: string[] = storageProviders[storageType as keyof typeof storageProviders]?.authTypes;
+      const allFields: storageOptionField[] = storageProviders[storageType as keyof typeof storageProviders]?.settings || [];
+      const authFields = allFields.filter((f) => f.authFieldType);
+
+      return { fields: authFields, types };
+   }, [storageProviders, storageType]);
+
+   // Initialize credentials when storage type changes
+   useEffect(() => {
+      if (storageType) {
+         const storageCreds: Record<string, string> = {};
+         storageFields.required.forEach((field: storageOptionField) => {
+            storageCreds[field.value] = '';
+         });
+         setStorageCredentials(storageCreds);
+      }
+   }, [storageType, storageFields]);
+
+   useEffect(() => {
+      if (storageTitle) {
+         setInputError((currentState) => {
+            const data = { ...currentState };
+            delete data['title'];
+            return data;
+         });
+      }
+      if (storageType) {
+         setInputError((currentState) => {
+            const data = { ...currentState };
+            delete data['storageType'];
+            return data;
+         });
+      }
+      Object.entries(storageCredentials).forEach(([key, value]) => {
+         if (value) {
+            setInputError((currentState) => {
+               const data = { ...currentState };
+               delete data[key];
+               return data;
+            });
+         }
+      });
+      console.log('storageCredentials :', storageCredentials);
+   }, [storageTitle, storageType, storageCredentials]);
+
+   const addStorage = () => {
+      setInputError({});
+      const errors: Record<string, string> = {};
+      // Get all fields for the selected storage type
+      const allFields: storageOptionField[] = storageProviders[storageType as keyof typeof storageProviders]?.settings || [];
+
+      // Validate required fields that are visible AND relevant to current auth type
+      allFields.forEach((fieldDef) => {
+         if (!fieldDef.required) return;
+
+         // Check if this field should be displayed based on conditions
+         if (!shouldDisplayStorageField(fieldDef, storageSettings, allFields)) return;
+
+         // Check if this field is relevant to the current auth type
+         const isAuthField = !!fieldDef.authFieldType;
+         const isRelevantAuthField = !isAuthField || fieldDef.authFieldType === currentAuthType;
+         if (!isRelevantAuthField) return;
+
+         // Get the field value from the appropriate state object
+         const fieldValue = isAuthField ? storageCredentials[fieldDef.value] : storageSettings[fieldDef.value];
+
+         // Check if the value is empty
+         const isEmpty = fieldValue === undefined || fieldValue === null || fieldValue === '';
+
+         if (isEmpty) {
+            errors[fieldDef.value] = 'Required';
+         }
+      });
+      if (!storageTitle) {
+         errors['title'] = 'Required';
+      }
+      if (!storageType) {
+         errors['storageType'] = 'Required';
+      }
+      console.log('storageType :', storageType, currentAuthType, storageCredentials);
+      console.log('errors :', errors);
+
+      if (Object.keys(errors).length === 0) {
+         const storagePayload = {
+            name: storageTitle,
+            type: storageType,
+            settings: storageSettings,
+            credentials: storageCredentials,
+            authType: currentAuthType,
+            tags: storageTags,
+         };
+         console.log('payload :', storagePayload);
+
+         addStorageMutation.mutate(storagePayload, {
+            onError: (error: Error) => {
+               console.log('error :', error?.message);
+               toast.error(error.message || `Error Adding Storage!`);
+            },
+            onSuccess: (data: any) => {
+               console.log('Success :', data);
+               toast.success(`Successfully Added Storage!`, { autoClose: 5000 });
+               close();
+            },
+         });
+      } else {
+         setInputError(errors);
+      }
+   };
+
+   return (
+      <SidePanel
+         title="Add New Remote Storage"
+         icon={<Icon type={'storages'} size={18} />}
+         close={close}
+         footer={
+            <>
+               <div className={classes.footerLeft}>
+                  <div className={classes.summary}></div>
+               </div>
+               <div className={classes.footerRight}>
+                  <button className={classes.createButton} onClick={() => addStorage()}>
+                     <Icon type="check" size={12} /> Add Storage
+                  </button>
+               </div>
+            </>
+         }
+      >
+         <div className={classes.addStorageContent}>
+            {addStorageMutation.isPending && (
+               <div className={classes.loader}>
+                  <Icon size={36} type="loading" />
+               </div>
+            )}
+            <div className={classes.field}>
+               <label className={classes.label}>
+                  Storage Name*
+                  <i data-tooltip-id="hintTooltip" data-tooltip-content={'Storage name cannot be changed in future'} data-tooltip-place="top">
+                     <Icon type="help" size={13} />
+                  </i>
+               </label>
+               {inputError['title'] && <span className={classes.fieldErrorLabel}>{inputError['title']}</span>}
+               <input
+                  className={`${classes.input} ${inputError['title'] ? classes.inputHasError : ''}`}
+                  type="text"
+                  placeholder="Give your Storage a Name"
+                  value={storageTitle || ''}
+                  required
+                  onChange={(e) => setStorageTitle(e.target.value)}
+               />
+            </div>
+            <div className={classes.field}>
+               <label className={classes.label}>Storage Type*</label>
+               {inputError['storageType'] && <span className={classes.fieldErrorLabel}>{inputError['storageType']}</span>}
+               <div className={classes.selectField}>
+                  <Select
+                     options={[{ label: 'Select Storage Type', value: '' }, ...providersOptions]}
+                     fieldValue={storageType}
+                     onUpdate={(val: string) => {
+                        setStorageCredentials({});
+                        setStorageSettings({});
+                        setStorageType(val);
+                        const fields = storageProviders[val as keyof typeof storageProviders]?.fields || [];
+                        const newCredentials = fields.reduce(
+                           (acc: any, field: { value: any }) => ({
+                              ...acc,
+                              [field.value]: '',
+                           }),
+                           {},
+                        );
+                        setStorageCredentials(newCredentials);
+                     }}
+                     size="large"
+                     full={true}
+                     search={true}
+                     error={inputError['storageType']}
+                  />
+               </div>
+            </div>
+
+            {storageType && authFields.fields.length > 0 && (
+               <StorageAuthSettings
+                  storageType={storageType}
+                  fields={authFields.fields}
+                  authTypes={authFields.types}
+                  settings={storageCredentials}
+                  onUpdate={(newSettings) => setStorageCredentials(newSettings)}
+                  errors={inputError}
+                  currentAuthType={currentAuthType}
+                  onAuthTypeChange={setCurrentAuthType}
+               />
+            )}
+            {Object.keys(storageFields.optional).length > 0 && (
+               <div
+                  className={`${classes.advancedButton} ${showAdvanced ? classes.advancedButtonActive : ''}`}
+                  onClick={() => setShowAdvanced(!showAdvanced)}
+               >
+                  <Icon type={'settings'} />
+                  <span>Advanced Options</span>
+                  <Icon type={showAdvanced ? 'caret-up' : 'caret-down'} />
+               </div>
+            )}
+            {showAdvanced && Object.keys(storageFields.optional).length > 0 && (
+               <div className={classes.advancedOptions}>
+                  <StorageSettings
+                     fields={storageFields.optional}
+                     settings={storageSettings}
+                     onUpdate={(newSettings) => setStorageSettings(newSettings)}
+                  />
+                  <div className={classes.field}>
+                     <label className={classes.label}>Tags</label>
+                     <TagsInput fieldValue={storageTags} onUpdate={(val) => setStorageTags(val)} />
+                  </div>
+               </div>
+            )}
+         </div>
+      </SidePanel>
+   );
+};
+export default AddStorage;

package/src/components/Storage/EditStorage/EditStorage.tsx

@@ -0,0 +1,213 @@
+import { useEffect, useMemo, useState } from 'react';
+import { toast } from 'react-toastify';
+import classes from '../AddStorage/AddStorage.module.scss';
+import Icon from '../../common/Icon/Icon';
+import { useGetStorage, useUpdateStorage } from '../../../services/storage';
+import SidePanel from '../../common/SidePanel/SidePanel';
+import TagsInput from '../../common/form/TagsInput/TagsInput';
+import { Storage, storageOptionField } from '../../../@types/storages';
+import StorageSettings from '../StorageSettings/StorageSettings';
+import StorageAuthSettings from '../StorageAuthSettings/StorageAuthSettings';
+import { shouldDisplayStorageField } from '../../../utils/helpers';
+
+type EditStorageProps = {
+   close: () => void;
+   storage: Storage;
+};
+
+const EditStorage = ({ close, storage }: EditStorageProps) => {
+   const [inputError, setInputError] = useState<Record<string, string>>({});
+   // const [storageTitle, setStorageTitle] = useState(() => storage.name)/;
+   const [showAdvanced, setShowAdvanced] = useState(false);
+   const [currentAuthType, setCurrentAuthType] = useState<string>(() => storage.authType || '');
+   const [storageCredentials, setStorageCredentials] = useState<Record<string, string | number | boolean>>({});
+   const [storageSettings, setStorageSettings] = useState<Record<string, string | number | boolean>>(() => storage.settings);
+   const [storageTags, setStorageTags] = useState<string[]>(() => storage.tags || []);
+
+   const updateStorageMutation = useUpdateStorage();
+   const storageType = storage.type;
+   const { data: storageData } = useGetStorage(storage.id);
+
+   useEffect(() => {
+      if (storageData && storageData.success && storageData.result && storageData.result.credentials) {
+         setStorageCredentials(storageData.result.credentials);
+      }
+   }, [storageData]);
+
+   const storageFields = useMemo(() => {
+      const groupedFields = { required: [], optional: [] };
+      storage.storageFields.forEach((field: storageOptionField) => {
+         if (field.required) {
+            (groupedFields.required as storageOptionField[]).push(field);
+         } else {
+            (groupedFields.optional as storageOptionField[]).push(field);
+         }
+      });
+      return groupedFields;
+   }, [storage.storageFields]);
+
+   const authFields = useMemo(() => {
+      const types: string[] = storageData?.result?.authTypes || ['client'];
+      const authFields = storage.storageFields.filter((f) => f.authFieldType);
+
+      return { fields: authFields, types };
+   }, [storage.storageFields, storageData]);
+
+   const updateStorage = () => {
+      setInputError({});
+      const errors: Record<string, string> = {};
+
+      // Validate required fields that are visible AND relevant to current auth type
+      const allFields = storage.storageFields;
+      allFields.forEach((fieldDef) => {
+         if (!fieldDef.required) return;
+
+         // Check if this field should be displayed based on conditions
+         if (!shouldDisplayStorageField(fieldDef, storageSettings, allFields)) return;
+
+         // Check if this field is relevant to the current auth type
+         const isAuthField = !!fieldDef.authFieldType;
+         const isRelevantAuthField = !isAuthField || fieldDef.authFieldType === currentAuthType;
+         if (!isRelevantAuthField) return;
+
+         // Get the field value from the appropriate state object
+         const fieldValue = isAuthField ? storageCredentials[fieldDef.value] : storageSettings[fieldDef.value];
+
+         // Check if the value is empty
+         const isEmpty = fieldValue === undefined || fieldValue === null || fieldValue === '';
+
+         if (isEmpty) {
+            errors[fieldDef.value] = 'Required';
+         }
+      });
+      // if (!storageTitle) {
+      //    errors['title'] = 'Required';
+      // }
+
+      console.log('errors :', errors);
+
+      if (Object.keys(errors).length === 0) {
+         const storagePayload = {
+            id: storage.id,
+            data: {
+               // name: storageTitle,
+               type: storageType,
+               settings: storageSettings,
+               credentials: storageCredentials,
+               authType: currentAuthType,
+               tags: storageTags,
+            },
+         };
+         console.log('payload :', storagePayload);
+         updateStorageMutation.mutate(storagePayload, {
+            onError: (error: Error) => {
+               console.log('error :', error?.message);
+               toast.error(`Error Updating Storage. Changes Reverted.\nError Detail: ${error.message}`);
+               setStorageCredentials(storageData.result.credentials);
+               setStorageSettings(storageData.result.settings);
+            },
+            onSuccess: (data: any) => {
+               console.log('Success :', data);
+               toast.success(`Successfully Updated Storage!`, { autoClose: 5000 });
+            },
+         });
+      } else {
+         setInputError(errors);
+      }
+   };
+
+   return (
+      <SidePanel
+         title={`Edit ${storage.name}`}
+         icon={<img src={`providers/${storage.type}.png`} />}
+         close={close}
+         footer={
+            <>
+               <div className={classes.footerLeft}>
+                  <div className={classes.summary}></div>
+               </div>
+               <div className={classes.footerRight}>
+                  <button className={classes.createButton} onClick={() => updateStorage()}>
+                     <Icon type="check" size={12} /> Update Storage
+                  </button>
+               </div>
+            </>
+         }
+      >
+         <div className={classes.addStorageContent}>
+            {(updateStorageMutation.isPending || updateStorageMutation.isPending) && (
+               <div className={classes.loader}>
+                  <Icon size={36} type="loading" />
+               </div>
+            )}
+
+            <div className={classes.field}>
+               <label className={classes.label}>
+                  Storage Name*
+                  <i data-tooltip-id="hintTooltip" data-tooltip-content={'Storage name Cannot be changed'} data-tooltip-place="top">
+                     <Icon type="help" size={13} />
+                  </i>
+               </label>
+               {inputError['title'] && <span className={classes.fieldErrorLabel}>{inputError['title']}</span>}
+               <input
+                  className={classes.input}
+                  type="text"
+                  placeholder="Give your Storage a Name"
+                  value={storage.name || ''}
+                  required
+                  // onChange={(e) => setStorageTitle(e.target.value)}
+                  disabled={true}
+               />
+            </div>
+            <div className={classes.field}>
+               <label className={classes.label}>
+                  Storage Type*{' '}
+                  <i data-tooltip-id="hintTooltip" data-tooltip-content={'Storage type cannot be changed'} data-tooltip-place="top">
+                     <Icon type="help" size={13} />
+                  </i>
+               </label>
+               <div className={classes.storageType}>
+                  <img src={`providers/${storage.type}.png`} />
+                  {storage.storageTypeName}
+               </div>
+            </div>
+            {storageType && authFields.fields.length > 0 && (
+               <StorageAuthSettings
+                  storageType={storageType}
+                  fields={authFields.fields}
+                  authTypes={authFields.types}
+                  settings={storageCredentials}
+                  onUpdate={(newSettings) => setStorageCredentials(newSettings)}
+                  errors={inputError}
+                  currentAuthType={currentAuthType}
+                  onAuthTypeChange={setCurrentAuthType}
+               />
+            )}
+            {Object.keys(storageFields.optional).length > 0 && (
+               <div
+                  className={`${classes.advancedButton} ${showAdvanced ? classes.advancedButtonActive : ''}`}
+                  onClick={() => setShowAdvanced(!showAdvanced)}
+               >
+                  <Icon type={'settings'} />
+                  <span>Advanced Options</span>
+                  <Icon type={showAdvanced ? 'caret-up' : 'caret-down'} />
+               </div>
+            )}
+            {showAdvanced && Object.keys(storageFields.optional).length > 0 && (
+               <div className={classes.advancedOptions}>
+                  <StorageSettings
+                     fields={storageFields.optional}
+                     settings={storageSettings}
+                     onUpdate={(newSettings) => setStorageSettings(newSettings)}
+                  />
+                  <div className={classes.field}>
+                     <label className={classes.label}>Tags</label>
+                     <TagsInput fieldValue={storageTags} onUpdate={(val) => setStorageTags(val)} />
+                  </div>
+               </div>
+            )}
+         </div>
+      </SidePanel>
+   );
+};
+export default EditStorage;

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

@@ -0,0 +1,120 @@
+import { useEffect, 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';
+
+interface StorageAuthSettingsProps {
+   storageType: string;
+   fields: storageOptionField[];
+   settings: Record<string, string | number | boolean>;
+   authTypes: string[];
+   errors: Record<string, string>;
+   currentAuthType: string;
+   onUpdate: (newSettings: StorageAuthSettingsProps['settings']) => void;
+   onAuthTypeChange: (authType: string) => void;
+}
+
+const StorageAuthSettings = ({
+   storageType,
+   fields,
+   settings,
+   authTypes,
+   currentAuthType,
+   errors,
+   onUpdate,
+   onAuthTypeChange,
+}: StorageAuthSettingsProps) => {
+   const [showAdvanced, setShowAdvanced] = useState(true);
+   const [showOAuthDoc, setShowOAuthDoc] = useState(false);
+
+   console.log('availableAuthTypes :', fields, authTypes, currentAuthType);
+
+   useEffect(() => {
+      if (!currentAuthType && authTypes.length > 0) {
+         onAuthTypeChange(authTypes[0]);
+      }
+   }, [authTypes, currentAuthType, onAuthTypeChange]);
+
+   return (
+      <div className={classes.authSettings}>
+         <div
+            className={`${classes.advancedButton}  ${showAdvanced ? classes.advancedButtonActive : ''}`}
+            onClick={() => setShowAdvanced(!showAdvanced)}
+         >
+            <Icon type={'authentication'} size={14} />
+            <span>{storageType === 'local' ? 'Local Storage Setup' : 'Account Authentication'}</span>
+            <Icon type={showAdvanced ? 'caret-up' : 'caret-down'} />
+         </div>
+         {showAdvanced && (
+            <div className={classes.advancedOptions}>
+               {showAdvanced && authTypes.length > 1 && (
+                  <div className={classes.field}>
+                     <Tristate
+                        label={'Authentication Type'}
+                        inline={true}
+                        fieldValue={currentAuthType}
+                        options={[
+                           { label: 'User (oAuth)', value: 'oauth', disabled: authTypes.includes('oauth') === false },
+                           { label: 'User/Pass', value: 'password', disabled: authTypes.includes('password') === false },
+                           { label: 'App/Client', value: 'client', disabled: authTypes.includes('client') === false },
+                        ]}
+                        hint={
+                           'User (oAuth): Use the generated Link to login to your account and authorize the App.\n Username/Password: Your own Username/Password will be used to backup. \n App/Client: Provide App/Client keys that can be found in your cloud storage account dashboard'
+                        }
+                        onUpdate={(newVal: string) => onAuthTypeChange(newVal)}
+                     />
+                  </div>
+               )}
+
+               <StorageSettings
+                  fields={fields.filter((f) => f.authFieldType === currentAuthType)}
+                  settings={settings}
+                  onUpdate={(newSettings) => onUpdate(newSettings)}
+                  errors={errors}
+               />
+               {currentAuthType === 'oauth' && (
+                  <div className={classes.oauthDoc}>
+                     <h4 onClick={() => setShowOAuthDoc(!showOAuthDoc)}>
+                        <Icon type={'key'} size={14} /> Acquiring the OAuth Access Token
+                        <button>
+                           <Icon type={showOAuthDoc ? 'caret-up' : 'caret-down'} />
+                        </button>
+                     </h4>
+                     {showOAuthDoc && (
+                        <>
+                           <p>
+                              <strong>Step 1:</strong> On a machine with a browser,{' '}
+                              <a href="https://rclone.org/downloads/" target="_blank">
+                                 install rclone
+                              </a>{' '}
+                              and execute this command in the CLI: <code className={classes.codeBlock}>rclone authorize {storageType}</code>
+                           </p>
+                           <p>
+                              <strong>Step 2:</strong> A browser window will open where you will need to authorize Rclone to connect to your{' '}
+                              {storageType} account. Authorize the connection.
+                           </p>
+                           <p>
+                              <strong>Step 3:</strong> Once authorized, the cli where you ran the command, should display a message similar to this:
+                              <code className={classes.codeBlock}>
+                                 {`Paste the following into your remote machine --->`}
+                                 <strong>{`{"access_token":"....","token_type":"bearer...}`}</strong>
+                                 {`<---End paste`}
+                              </code>
+                              Copy everything between <code>{`--->`}</code> and <code>{`<---`}</code>. Eg:{' '}
+                              <code>{`{"access_token":"....","token_type":"bearer...}`}</code>
+                           </p>
+                           <p>
+                              <strong>Step 4:</strong> Paste the copied content in the <strong>OAuth Access Token</strong> field above.
+                           </p>
+                        </>
+                     )}
+                  </div>
+               )}
+            </div>
+         )}
+      </div>
+   );
+};
+export default StorageAuthSettings;