diff --git a/apps/studio/components/to-be-cleaned/Storage/StorageSettings/StorageSettings.tsx b/apps/studio/components/to-be-cleaned/Storage/StorageSettings/StorageSettings.tsx
index 41099ee368b..acc0d6d5ca9 100644
--- a/apps/studio/components/to-be-cleaned/Storage/StorageSettings/StorageSettings.tsx
+++ b/apps/studio/components/to-be-cleaned/Storage/StorageSettings/StorageSettings.tsx
@@ -31,9 +31,17 @@ import {
SelectTrigger_Shadcn_,
SelectValue_Shadcn_,
Select_Shadcn_,
+ Switch,
} from 'ui'
import { STORAGE_FILE_SIZE_LIMIT_MAX_BYTES, StorageSizeUnits } from './StorageSettings.constants'
import { convertFromBytes, convertToBytes } from './StorageSettings.utils'
+import { Markdown } from 'components/interfaces/Markdown'
+
+interface StorageSettingsState {
+ fileSizeLimit: number
+ unit: StorageSizeUnits
+ imageTransformationEnabled: boolean
+}
const StorageSettings = () => {
const { ref: projectRef } = useParams()
@@ -54,18 +62,30 @@ const StorageSettings = () => {
})
const isFreeTier = isSuccessSubscription && subscription.plan.id === 'free'
- const [initialValues, setInitialValues] = useState({
+ const [initialValues, setInitialValues] = useState({
fileSizeLimit: 0,
unit: StorageSizeUnits.BYTES,
+ imageTransformationEnabled: !isFreeTier,
})
useEffect(() => {
if (isSuccess && config) {
- const { fileSizeLimit } = config
+ const { fileSizeLimit, features } = config
const { value, unit } = convertFromBytes(fileSizeLimit ?? 0)
- setInitialValues({ fileSizeLimit: value, unit: unit })
+ const imageTransformationEnabled = features?.imageTransformation?.enabled ?? !isFreeTier
+
+ setInitialValues({
+ fileSizeLimit: value,
+ unit: unit,
+ imageTransformationEnabled,
+ })
+
// Reset the form values when the config values load
- form.reset({ fileSizeLimit: value, unit: unit })
+ form.reset({
+ fileSizeLimit: value,
+ unit: unit,
+ imageTransformationEnabled,
+ })
}
}, [isSuccess, config])
@@ -77,6 +97,7 @@ const StorageSettings = () => {
.object({
fileSizeLimit: z.coerce.number(),
unit: z.nativeEnum(StorageSizeUnits),
+ imageTransformationEnabled: z.boolean(),
})
.superRefine((data, ctx) => {
const { unit, fileSizeLimit } = data
@@ -95,7 +116,7 @@ const StorageSettings = () => {
resolver: zodResolver(FormSchema),
defaultValues: initialValues,
})
- const { fileSizeLimit: limit, unit: storageUnit } = form.watch()
+ const { fileSizeLimit: limit, unit: storageUnit, imageTransformationEnabled } = form.watch()
const { mutate: updateStorageConfig, isLoading: isUpdating } =
useProjectStorageConfigUpdateUpdateMutation({
@@ -109,6 +130,11 @@ const StorageSettings = () => {
updateStorageConfig({
projectRef,
fileSizeLimit: convertToBytes(data.fileSizeLimit, data.unit),
+ features: {
+ imageTransformation: {
+ enabled: data.imageTransformationEnabled,
+ },
+ },
})
}
@@ -205,7 +231,31 @@ const StorageSettings = () => {
+
+
+
+
Enable Image Transformation
+
+
+
+
{isFreeTier && (