+
{t('Bucket Mappings')}
+ {fields.map(field => {
+ const bucketName = watchBuckets?.[field.name]?.name?.trim() ?? '';
+ const bucketApiPath = `${s3Endpoint}/${encodeURIComponent(bucketName)}`;
+ return (
+
+
+ {t('Bucket Name')}
+
+ }
+ aria-label={t('Remove')}
+ disabled={fields.length <= 1 || !s3Enabled || loading}
+ onClick={() => remove(field.name)}
+ />
+
+
+
{
+ if (value?.trim() && !/^[A-Za-z0-9][A-Za-z0-9._-]{0,62}$/.test(value.trim())) {
+ throw new Error(t('Invalid bucket name'));
+ }
+ },
+ },
+ ]}
+ >
+
+
+
{
+ if (value && invalidBasePath(value.trim())) throw new Error(t('Invalid base path'));
+ },
+ },
+ ]}
+ >
+
+ }
+ aria-label={t('Select Folder')}
+ disabled={!s3Enabled || loading}
+ onClick={() => setPathSelectorIndex(field.name)}
+ />
+
+ )}
+ />
+
+ {bucketName && (
+
+ {t('Bucket API Path')}
+ {bucketApiPath}
+
+ )}
+
+ );
+ })}
+
+
} disabled={!s3Enabled || loading} onClick={() => add({ name: '', base_path: '/' })}>
+ {t('Add Bucket')}
+
+
+ )}
+