@plutonhq/core-frontend 0.0.1

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

@@ -0,0 +1,231 @@
+.storage {
+   display: flex;
+   flex-direction: row;
+   align-items: center;
+   padding: 10px;
+   margin-bottom: 20px;
+   gap: 10px;
+   border-radius: 7px;
+   background-color: var(--content-background-color);
+   color: var(--content-text-color-light);
+   box-shadow: 0 0 15px var(--content-shadow-color);
+   position: relative;
+   transition: all 0.2s linear;
+   &:hover {
+      box-shadow: 0 0 20px var(--content-shadow-color);
+   }
+   &.storageEditing {
+      box-shadow: 0 0 2px var(--primary-color);
+   }
+}
+
+.leftContent {
+   flex-basis: 40%;
+   display: flex;
+   flex-direction: row;
+   align-items: center;
+}
+.rightContent {
+   display: flex;
+   flex-direction: row;
+   align-items: center;
+   flex-basis: 60%;
+   justify-content: right;
+   gap: 10px;
+}
+
+.storageType {
+   display: flex;
+   align-items: center;
+   margin-right: 10px;
+   margin-left: 5px;
+   width: 28px;
+   height: 28px;
+   background: var(--light-grey);
+   padding: 5px;
+   border-radius: 5px;
+   justify-content: center;
+   img {
+      max-width: 24px;
+   }
+}
+
+.content {
+   display: flex;
+   flex-direction: column;
+   cursor: pointer;
+   color: var(--content-text-color-light);
+   &:hover {
+      color: inherit;
+      h4 {
+         color: var(--primary-color);
+      }
+   }
+}
+
+.title {
+   display: flex;
+   flex-direction: row;
+   h4 {
+      margin: 0;
+      margin-bottom: 2px;
+      color: var(--content-text-color);
+      display: flex;
+      align-items: center;
+   }
+   :global(.icon) {
+      position: relative;
+      top: 2px;
+      margin-left: 5px;
+      opacity: 0.5;
+   }
+}
+
+.info {
+   margin-right: 30px;
+   display: flex;
+   align-items: center;
+   :global(.icon) {
+      position: relative;
+      top: 2px;
+      margin-right: 5px;
+      opacity: 0.5;
+   }
+   i {
+      font-style: normal;
+   }
+}
+
+.moreBtn {
+   color: var(--content-text-color-light);
+   padding: 3px 6px;
+   border-radius: 4px;
+   &.moreBtnActive {
+      background-color: var(--primary-color-light);
+      color: var(--primary-color);
+   }
+}
+
+.settings {
+   position: absolute;
+   z-index: 99;
+   top: 45px;
+   right: 15px;
+   display: flex;
+   flex-direction: column;
+   justify-content: left;
+   width: 120px;
+   text-align: left;
+   align-items: center;
+   background: var(--content-background-color);
+   border: 1px solid var(--line-color);
+   border-radius: 6px;
+   button {
+      padding: 6px 10px;
+      width: 100%;
+      text-align: left;
+      color: var(--content-text-color-light);
+      &:hover {
+         background-color: var(--primary-color-light);
+         color: var(--primary-color);
+      }
+   }
+}
+
+.verifyModalContent {
+   position: relative;
+   padding-bottom: 20px;
+}
+
+.removeModalContent {
+   position: relative;
+   .deleteLoader {
+      position: absolute;
+      z-index: 9;
+      width: 100%;
+      height: 100%;
+      left: 0;
+      top: 0;
+      background-color: var(--content-background-color);
+      opacity: 0.7;
+      cursor: default;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+   }
+   .removeModalActions {
+      margin-top: 20px;
+      justify-content: right;
+      display: flex;
+      flex-direction: row;
+      gap: 10px;
+      button {
+         background-color: var(--line-color);
+         color: var(--content-text-color);
+         padding: 6px 12px;
+         border-radius: 4px;
+         transition: all 0.12s linear;
+         &:nth-child(2) {
+            background-color: var(--error-button-color);
+            color: var(--error-active-text);
+         }
+         &:hover {
+            filter: brightness(105%);
+         }
+      }
+   }
+}
+
+.storageGrid {
+   width: 100%;
+   margin: 0;
+   flex-direction: column;
+   align-items: baseline;
+   padding: 0;
+   padding-bottom: 12px;
+   .leftContent {
+      padding: 12px;
+      width: 100%;
+      box-sizing: border-box;
+   }
+   .rightContent {
+      width: 100%;
+      flex-basis: unset;
+      justify-content: flex-start;
+      padding: 6px 10px;
+      box-sizing: border-box;
+      background: var(--primary-color-lighter);
+      .moreBtn {
+         margin-left: auto;
+      }
+   }
+   .settings {
+      bottom: 10px;
+      top: auto;
+      right: 40px;
+   }
+}
+
+@media only screen and (max-width: 768px) {
+   .storage {
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 5px;
+   }
+
+   .rightContent {
+      width: 100%;
+      justify-content: flex-start;
+      border-top: 1px solid var(--line-color);
+      padding-top: 10px;
+      margin-top: 10px;
+      gap: 0;
+      button.moreBtn {
+         margin-left: auto;
+      }
+   }
+
+   .settings {
+      right: 35px;
+   }
+}

package/src/components/Storage/StorageItem/StorageItem.tsx

@@ -0,0 +1,150 @@
+import { useState } from 'react';
+import { toast } from 'react-toastify';
+import Icon from '../../common/Icon/Icon';
+import classes from './StorageItem.module.scss';
+import { Storage } from '../../../@types/storages';
+import { formatBytes } from '../../../utils/helpers';
+import EditStorage from '../EditStorage/EditStorage';
+import Modal from '../../common/Modal/Modal';
+import { useDeleteStorage, useVerifyStorage } from '../../../services/storage';
+import ActionModal from '../../common/ActionModal/ActionModal';
+
+interface StorageItemProps {
+   storage: Storage;
+   layout: 'list' | 'grid';
+}
+
+const StorageItem = ({ storage, layout }: StorageItemProps) => {
+   const [showSettings, setShowSettings] = useState(false);
+   const [showEditModal, setShowEditModal] = useState(false);
+   const [showDeleteModal, setShowDeleteModal] = useState(false);
+   const [showVerifyModal, setShowVerifyModal] = useState(false);
+   const { id, name, type, plans = [], usedSize = 200, storageTypeName } = storage;
+   const deleteStorageMutation = useDeleteStorage();
+   const verifyStorageMutation = useVerifyStorage();
+   const isLocalStorage = id === 'local';
+
+   const removeStorage = () => {
+      deleteStorageMutation.mutate(storage.id, {
+         onError: (error: Error) => {
+            console.log('error :', error?.message);
+            toast.error(error.message || `Error Removing Storage!`);
+         },
+         onSuccess: (data: any) => {
+            console.log('Success :', data);
+            toast.success(`Removed Storage Successfully!`, { autoClose: 5000 });
+            close();
+         },
+      });
+   };
+
+   return (
+      <div
+         key={id}
+         className={`${classes.storage} ${layout === 'grid' ? classes.storageGrid : classes.storageList} ${showEditModal || showDeleteModal || showVerifyModal ? classes.storageEditing : ''}`}
+      >
+         <div className={classes.leftContent}>
+            <div className={classes.storageType}>
+               <img src={`providers/${type}.png`} />
+            </div>
+
+            <div className={classes.content}>
+               <div className={classes.title} onClick={() => !isLocalStorage && setShowEditModal(true)}>
+                  <h4>{name}</h4> {isLocalStorage && <Icon type="lock" size={14} />}
+               </div>
+               <div>{storageTypeName}</div>
+            </div>
+         </div>
+         <div className={classes.rightContent}>
+            <div className={classes.info}>
+               <Icon type="backup" size={14} /> <i>{plans.length} Plans</i>
+            </div>
+            <div className={classes.info}>
+               <Icon type="disk" size={14} /> <i>{formatBytes(usedSize)}</i>
+            </div>
+            <button
+               className={`${classes.moreBtn} ${showSettings ? classes.moreBtnActive : ''}`}
+               onClick={() => setShowSettings(!showSettings)}
+               disabled={isLocalStorage}
+            >
+               <Icon type="dots-vertical" size={14} />
+            </button>
+         </div>
+         {showSettings && (
+            <div className={classes.settings}>
+               {!isLocalStorage && (
+                  <>
+                     <button
+                        onClick={() => {
+                           setShowEditModal(true);
+                           setShowSettings(false);
+                        }}
+                     >
+                        <Icon type="edit-settings" size={14} /> Edit
+                     </button>
+                     <button
+                        onClick={() => {
+                           setShowVerifyModal(true);
+                           setShowSettings(false);
+                           verifyStorageMutation.mutate(storage.id);
+                        }}
+                     >
+                        <Icon type="verify" size={14} /> Verify
+                     </button>
+                     <button
+                        onClick={() => {
+                           setShowDeleteModal(true);
+                           setShowSettings(false);
+                        }}
+                     >
+                        <Icon type="trash" size={14} /> Remove
+                     </button>
+                  </>
+               )}
+            </div>
+         )}
+         {showEditModal && <EditStorage close={() => setShowEditModal(false)} storage={storage} />}
+         {showVerifyModal && (
+            <Modal
+               title={`Verifying Storage "${storage.name}"`}
+               closeModal={() => !verifyStorageMutation.isPending && setShowVerifyModal(false)}
+               width="600px"
+            >
+               <div className={classes.verifyModalContent}>
+                  {verifyStorageMutation.isPending && (
+                     <>
+                        <Icon type="loading" size={16} /> Verifying Remote Storage Connection...
+                     </>
+                  )}
+                  {verifyStorageMutation.isSuccess && (
+                     <>
+                        <Icon type="check" color="teal" size={14} /> Verification Successful! This Remote Storage Connection is Working Perfectly!
+                     </>
+                  )}
+                  {verifyStorageMutation.isError && (
+                     <>
+                        <Icon type="error" color="indianred" size={16} /> Error Verifying Remote Storage Connection!{' '}
+                        {verifyStorageMutation.error?.toString() || ''}
+                     </>
+                  )}
+               </div>
+            </Modal>
+         )}
+         {showDeleteModal && (
+            <ActionModal
+               title={`Remove Storage`}
+               message={<>{`Are you sure you want to delete this Storage?`}</>}
+               closeModal={() => setShowDeleteModal(false)}
+               primaryAction={{
+                  title: `Yes, Remove Storage`,
+                  type: 'danger',
+                  icon: 'trash',
+                  isPending: deleteStorageMutation.isPending,
+                  action: () => removeStorage(),
+               }}
+            />
+         )}
+      </div>
+   );
+};
+export default StorageItem;

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

@@ -0,0 +1,29 @@
+.field {
+   margin-bottom: 20px;
+   width: 100%;
+   position: relative;
+   .fieldErrorLabel {
+      position: absolute;
+      right: 10px;
+      top: 15px;
+      background-color: var(--error-bg-active);
+      color: var(--error-active-text);
+      padding: 1px 12px;
+      border-radius: 20px;
+      font-size: 0.75rem;
+      letter-spacing: 0.2px;
+      z-index: 2;
+   }
+
+   .fileManagerBtn {
+      position: absolute;
+      right: 0;
+      top: -3px;
+      padding: 10px;
+      cursor: pointer;
+      color: var(--icon-color);
+      &:hover {
+         color: var(--primary-color);
+      }
+   }
+}

package/src/components/Storage/StorageSettings/StorageSettings.tsx

@@ -0,0 +1,176 @@
+import { useEffect, useState } from 'react';
+import Input from '../../common/form/Input/Input';
+import Tristate from '../../common/form/Tristate/Tristate';
+import SizePicker from '../../common/form/SizePicker/SizePicker';
+import Toggle from '../../common/form/Toggle/Toggle';
+import { storageOptionField } from '../../../@types/storages';
+import classes from './StorageSettings.module.scss';
+import NumberInput from '../../common/form/NumberInput/NumberInput';
+import Select from '../../common/form/Select/Select';
+import { shouldDisplayStorageField } from '../../../utils/helpers';
+import PasswordField from '../../common/form/PasswordField/PasswordField';
+
+type StorageSettingsProps = {
+   fields: storageOptionField[];
+   settings: Record<string, string | number | boolean>;
+   errors?: Record<string, string>;
+   onUpdate: (newSettings: StorageSettingsProps['settings']) => void;
+};
+
+const StorageSettings = ({ fields, onUpdate, settings, errors = {} }: StorageSettingsProps) => {
+   const [customFieldsActive, setCustomFieldsActive] = useState<Record<string, boolean>>({});
+
+   // Initialize the custom fields state when settings change
+   useEffect(() => {
+      const initialCustomFields: Record<string, boolean> = {};
+
+      fields.forEach((field) => {
+         if (field.allowCustom && field.fieldType === 'select') {
+            // Check if this field previously had custom selected
+            initialCustomFields[field.value] = settings[field.value] === 'custom' || customFieldsActive[field.value] || false;
+         }
+      });
+
+      setCustomFieldsActive(initialCustomFields);
+   }, [fields]);
+   return (
+      <>
+         {fields.map((field) => {
+            // Skip rendering if conditions aren't met
+            if (!shouldDisplayStorageField(field, settings, fields)) {
+               return null;
+            }
+            const hint = field.description + '\n' + (field.default ? `Default: ${field.default}` : '');
+            const fieldLabel = field.label + (field.required ? '*' : '');
+            if (field.fieldType === 'bool') {
+               return (
+                  <div key={field.value} className={classes.field}>
+                     <Toggle
+                        label={fieldLabel}
+                        inline={true}
+                        hint={hint}
+                        fieldValue={(settings[field.value] as boolean) || false}
+                        onUpdate={(newVal: boolean) => onUpdate({ ...settings, [field.value]: newVal })}
+                        error={errors[field.value] || ''}
+                     />
+                  </div>
+               );
+            }
+            if (field.authFieldType && ['input', 'string'].includes(field.fieldType)) {
+               return (
+                  <div key={field.value} className={classes.field}>
+                     <PasswordField
+                        label={fieldLabel}
+                        inline={true}
+                        hint={hint}
+                        fieldValue={(settings[field.value] as string) || ''}
+                        onUpdate={(newVal: string) => onUpdate({ ...settings, [field.value]: newVal })}
+                        error={errors[field.value] || ''}
+                     />
+                  </div>
+               );
+            }
+            if (['input', 'string', 'time', 'duration', 'encoding', 'bits', 'spaceseplist', 'commaseplist'].includes(field.fieldType)) {
+               return (
+                  <div key={field.value} className={classes.field}>
+                     <Input
+                        label={fieldLabel}
+                        inline={true}
+                        hint={hint}
+                        fieldValue={(settings[field.value] as string) || ''}
+                        onUpdate={(newVal: string) => onUpdate({ ...settings, [field.value]: newVal })}
+                        error={errors[field.value] || ''}
+                     />
+                  </div>
+               );
+            }
+
+            if (field.fieldType === 'int') {
+               return (
+                  <div key={field.value} className={classes.field}>
+                     <NumberInput
+                        label={fieldLabel}
+                        inline={true}
+                        fieldValue={(settings[field.value] as number) || ''}
+                        hint={hint}
+                        onUpdate={(newVal) => onUpdate({ ...settings, [field.value]: newVal })}
+                        error={errors[field.value] || ''}
+                     />
+                  </div>
+               );
+            }
+            if (field.fieldType === 'tristate') {
+               return (
+                  <div key={field.value} className={classes.field}>
+                     <Tristate
+                        label={fieldLabel}
+                        inline={true}
+                        fieldValue={(settings[field.value] as string) || ''}
+                        options={[
+                           { label: 'On', value: 'true' },
+                           { label: 'Off', value: 'false' },
+                           { label: 'Unset', value: 'unset' },
+                        ]}
+                        hint={hint}
+                        onUpdate={(newVal: string) => onUpdate({ ...settings, [field.value]: newVal })}
+                     />
+                  </div>
+               );
+            }
+            if (field.fieldType === 'sizesuffix') {
+               return (
+                  <div key={field.value} className={classes.field}>
+                     <SizePicker
+                        label={fieldLabel}
+                        inline={true}
+                        fieldValue={(settings[field.value] as string) || ''}
+                        hint={hint}
+                        onUpdate={(newVal: string) => onUpdate({ ...settings, [field.value]: newVal })}
+                     />
+                  </div>
+               );
+            }
+            if (field.fieldType === 'select' && field.options) {
+               const customField = field.options.find((o) => o.value === 'custom');
+               return (
+                  <>
+                     <div key={field.value} className={classes.field}>
+                        <Select
+                           label={fieldLabel}
+                           options={field.options}
+                           fieldValue={
+                              customFieldsActive[field.value] && customField?.value ? customField?.value : (settings[field.value] as string) || ''
+                           }
+                           hint={hint}
+                           onUpdate={(newVal: string) => {
+                              if (field.allowCustom) {
+                                 setCustomFieldsActive((prev) => ({
+                                    ...prev,
+                                    [field.value]: newVal === 'custom',
+                                 }));
+                              }
+                              onUpdate({ ...settings, [field.value]: newVal });
+                           }}
+                           error={errors[field.value] || ''}
+                        />
+                        {field.allowCustom && customFieldsActive[field.value] && (
+                           <div key={field.value} className={classes.field} style={{ margin: '20px 0' }}>
+                              <Input
+                                 label={customField?.label || 'Insert Custom'}
+                                 inline={true}
+                                 fieldValue={(settings[field.value] as string) || ''}
+                                 onUpdate={(newVal: string) => onUpdate({ ...settings, [field.value]: newVal })}
+                                 error={errors[field.value] || ''}
+                              />
+                           </div>
+                        )}
+                     </div>
+                  </>
+               );
+            }
+            return null;
+         })}{' '}
+      </>
+   );
+};
+export default StorageSettings;

package/src/components/common/ActionModal/ActionModal.module.scss

@@ -0,0 +1,60 @@
+// MODALS
+.loader {
+   position: absolute;
+   z-index: 9;
+   width: 100%;
+   height: 100%;
+   left: 0;
+   top: 0;
+   background-color: var(--content-background-color);
+   opacity: 0.7;
+   cursor: default;
+   display: flex;
+   justify-content: center;
+   align-items: center;
+}
+
+.error {
+   padding: 4px 8px;
+   background-color: var(--error-bg-color);
+   color: var(--error-text-color);
+   margin-top: 10px;
+   border-radius: 6px;
+}
+
+.success {
+   padding: 4px 8px;
+   background-color: var(--success-bg-color);
+   color: var(--success-text-color);
+   margin-top: 10px;
+   border-radius: 6px;
+}
+
+.actions {
+   margin-top: 20px;
+   justify-content: right;
+   display: flex;
+   flex-direction: row;
+   gap: 10px;
+   button {
+      background-color: var(--line-color);
+      color: var(--content-text-color);
+      padding: 6px 12px;
+      border-radius: 4px;
+      transition: all 0.12s linear;
+      &:nth-child(2) {
+         background-color: var(--primary-color);
+         color: var(--primary-text-color);
+         &:hover {
+            background-color: var(--primary-hover-color);
+         }
+      }
+
+      &.dangerBtn {
+         background-color: var(--error-button-color);
+         &:hover {
+            background-color: var(--error-text-color);
+         }
+      }
+   }
+}