@plutonhq/core-frontend 0.1.19 → 0.1.21

package/package.json

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

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}