From ceba5ebc87acc5a94622fc9e90aa4537783e8a33 Mon Sep 17 00:00:00 2001
From: Fabrizio <fabri.feno@gmail.com>
Date: Thu, 14 Nov 2024 17:35:02 +0100
Subject: [PATCH] feat: image transformatio toggle (#30094)

* feat: image transformatio toggle

* fix api types

* move form field to top level

* regenerate api types

* fix ProjectDailyStatsAttribute type

* fix ts

* update styling

* Update image transformation description

---------

Co-authored-by: Alaister Young <a@alaisteryoung.com>
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
---
 .../StorageSettings/StorageSettings.tsx       | 60 +++++++++++++++++--
 .../project-storage-config-update-mutation.ts |  7 +++
 2 files changed, 62 insertions(+), 5 deletions(-)

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<StorageSettingsState>({
     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 = () => {
                   </p>
                 </div>
               </div>
+
+              <div className="grid grid-cols-12 gap-6 px-8 py-8 lg:gap-12">
+                <div className="relative flex flex-col col-span-12 gap-6 lg:col-span-4">
+                  <p className="text-sm">Enable Image Transformation</p>
+                </div>
+                <div className="relative flex flex-col col-span-12 gap-x-6 gap-y-2 lg:col-span-8">
+                  <div className="grid grid-cols-12 col-span-12 gap-2 items-center">
+                    <FormField_Shadcn_
+                      control={form.control}
+                      name="imageTransformationEnabled"
+                      render={({ field }) => (
+                        <Switch
+                          size="large"
+                          disabled={isFreeTier}
+                          checked={field.value}
+                          onCheckedChange={field.onChange}
+                        />
+                      )}
+                    />
+                  </div>
+                  <Markdown content="Optimize and resize images on the fly. [Learn more](https://supabase.com/docs/guides/storage/serving/image-transformations)." />
+                </div>
+              </div>
             </div>
+
             {isFreeTier && (
               <div className="px-6 pb-6">
                 <UpgradeToPro
diff --git a/apps/studio/data/config/project-storage-config-update-mutation.ts b/apps/studio/data/config/project-storage-config-update-mutation.ts
index 56ff098a149..9c55eeb2ec9 100644
--- a/apps/studio/data/config/project-storage-config-update-mutation.ts
+++ b/apps/studio/data/config/project-storage-config-update-mutation.ts
@@ -9,14 +9,21 @@ import { configKeys } from './keys'
 export type ProjectStorageConfigUpdateUpdateVariables = {
   projectRef: string
   fileSizeLimit: number
+  features?: {
+    imageTransformation: {
+      enabled: boolean
+    }
+  }
 }
 
 export async function updateProjectStorageConfigUpdate({
   projectRef,
   fileSizeLimit,
+  features,
 }: ProjectStorageConfigUpdateUpdateVariables) {
   const response = await patch(`${API_URL}/projects/${projectRef}/config/storage`, {
     fileSizeLimit,
+    features,
   })
   if (response.error) throw response.error
   return response