diff --git a/apps/studio/components/interfaces/Storage/StorageSettings/StorageSettings.tsx b/apps/studio/components/interfaces/Storage/StorageSettings/StorageSettings.tsx index 11c436585bc..dc3e95e8e2d 100644 --- a/apps/studio/components/interfaces/Storage/StorageSettings/StorageSettings.tsx +++ b/apps/studio/components/interfaces/Storage/StorageSettings/StorageSettings.tsx @@ -84,7 +84,7 @@ export const StorageSettings = () => { const { data: config, error, - isPending: isLoading, + isPending: isLoadingProjectStorageConfig, isSuccess, isError, } = useProjectStorageConfigQuery({ projectRef }) @@ -104,17 +104,28 @@ export const StorageSettings = () => { const shouldAutoValidateBucketLimits = sizeLimitCheckCondition === 'auto' const { data: organization } = useSelectedOrganizationQuery() - const { getEntitlementNumericValue, isEntitlementUnlimited } = - useCheckEntitlements('storage.max_file_size') - const isFreeTier = organization?.plan.id === 'free' + const { + getEntitlementNumericValue, + isEntitlementUnlimited, + isLoading: isLoadingMaxFileSizeEntitlement, + } = useCheckEntitlements('storage.max_file_size') + const { hasAccess: hasAccessToFileSizeConfiguration, isLoading: isLoadingFileSizeConfigurable } = + useCheckEntitlements('storage.max_file_size.configurable') + const { + hasAccess: hasAccessToImageTransformations, + isLoading: isLoadingImageTransformationEntitlement, + } = useCheckEntitlements('storage.image_transformations') + const isSpendCapOn = organization?.plan.id === 'pro' && organization?.usage_billing_enabled === false + const hasLimitedStorageAccess = + !hasAccessToImageTransformations && !hasAccessToFileSizeConfiguration const [isUpdating, setIsUpdating] = useState(false) const [initialValues, setInitialValues] = useState({ fileSizeLimit: 0, unit: StorageSizeUnits.MB, - imageTransformationEnabled: !isFreeTier, + imageTransformationEnabled: false, }) const maxBytes = useMemo(() => { @@ -125,6 +136,12 @@ export const StorageSettings = () => { } }, [organization, isEntitlementUnlimited, getEntitlementNumericValue]) + const isLoading = + isLoadingProjectStorageConfig || + isLoadingPermissions || + isLoadingMaxFileSizeEntitlement || + isLoadingFileSizeConfigurable || + isLoadingImageTransformationEntitlement const FormSchema = z .object({ fileSizeLimit: z.coerce.number(), @@ -218,10 +235,11 @@ export const StorageSettings = () => { } useEffect(() => { - if (isSuccess && config) { + if (isSuccess && config && !isLoading) { const { fileSizeLimit, features } = config const { value, unit } = convertFromBytes(fileSizeLimit ?? 0) - const imageTransformationEnabled = features?.imageTransformation?.enabled ?? !isFreeTier + const imageTransformationEnabled = + features?.imageTransformation?.enabled ?? hasAccessToImageTransformations setInitialValues({ fileSizeLimit: value, @@ -237,7 +255,7 @@ export const StorageSettings = () => { }) } // eslint-disable-next-line react-hooks/exhaustive-deps - }, [isSuccess, config]) + }, [isSuccess, config, isLoading, hasAccessToImageTransformations]) return ( @@ -250,7 +268,7 @@ export const StorageSettings = () => { title="Storage settings are not available for self-hosted projects" description="Storage settings are only available for Supabase Platform projects." /> - ) : isLoading || isLoadingPermissions ? ( + ) : isLoading ? ( ) : ( <> @@ -296,7 +314,9 @@ export const StorageSettings = () => { @@ -344,7 +364,10 @@ export const StorageSettings = () => { form.clearErrors('fileSizeLimit') }} className="w-32 rounded-r-none border-r-0" - disabled={isFreeTier || !canUpdateStorageSettings} + disabled={ + !hasAccessToFileSizeConfiguration || + !canUpdateStorageSettings + } /> { unitField.onChange(val) form.clearErrors('fileSizeLimit') }} - disabled={isFreeTier || !canUpdateStorageSettings} + disabled={ + !hasAccessToFileSizeConfiguration || + !canUpdateStorageSettings + } > @@ -367,7 +393,7 @@ export const StorageSettings = () => { {Object.values(StorageSizeUnits).map((unit: string) => ( {unit} @@ -398,7 +424,7 @@ export const StorageSettings = () => { )} - {isFreeTier && ( + {hasLimitedStorageAccess && ( { )}