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 && (