Merge pull request #2553 from appwrite/fix-site-settings-ux

Fix: UX of site settings

Author: Meldiron

src/routes/(console)/project-[region]-[project]/sites/site-[site]/settings/store.ts

@@ -69,25 +69,25 @@ export const adapterDataList = [
     {
         framework: 'nextjs',
         ssr: {
-            desc: "Ensure you don't set $ in $ file.",
-            code: ['output', 'next.config.js'],
+            desc: 'Set $ in $ file.',
+            code: ["output: 'standalone'", 'next.config.js'],
             url: 'https://nextjs.org/docs/pages/building-your-application/deploying'
         },
         static: {
-            desc: 'Set $ in $ file',
+            desc: 'Set $ in $ file.',
             code: ["output: 'export'", 'next.config.js'],
             url: 'https://nextjs.org/docs/pages/building-your-application/deploying/static-exports'
         }
     },
     {
         framework: 'analog',
         ssr: {
-            desc: 'Set $ in $ plugin in $',
+            desc: 'Set $ in $ plugin in $.',
             code: ['ssr: true', 'analog', 'vite.config.ts'],
             url: 'https://analogjs.org/docs/features/server/server-side-rendering'
         },
         static: {
-            desc: 'Set $ in $ plugin in $',
+            desc: 'Set $ in $ plugin in $.',
             code: ['static: true', 'analog', 'vite.config.ts'],
             url: 'https://analogjs.org/docs/features/server/static-site-generation'
         }

src/routes/(console)/project-[region]-[project]/sites/site-[site]/settings/updateBuildSettings.svelte

@@ -36,21 +36,34 @@
         frameworks.find((framework) => framework.key === site.framework)
     );
     let showFallback = $derived(adapter === Adapter.Static);
-    let hasChanges = $derived(
+
+    let isUntouched = $derived(
         installCommand === site?.installCommand &&
             buildCommand === site?.buildCommand &&
             outputDirectory === site?.outputDirectory &&
             selectedFramework?.key === site?.framework &&
-            fallback === (site?.fallbackFile || undefined) &&
-            adapter === site?.adapter
+            (fallback ?? '') === (site?.fallbackFile ?? '') &&
+            (adapter ?? '') === (site?.adapter ?? '')
     );
     let frameworkAdapterData = $derived(
         selectedFramework.adapters.find((a) => a.key === adapter) ?? selectedFramework.adapters[0]
     );
 
+    $effect(() => {
+        if (adapter) {
+            const data = selectedFramework.adapters.find((a) => a.key === adapter);
+            if (data) {
+                installCommand = data.installCommand;
+                buildCommand = data.buildCommand;
+                outputDirectory = data.outputDirectory;
+                fallback = data.fallbackFile;
+            }
+        }
+    });
+
     $effect(() => {
         if (selectedFramework?.key !== site.framework) {
-            //Update adapter
+            // Update adapter
             const singleAdapter = selectedFramework?.adapters?.length <= 1;
             if (singleAdapter) {
                 const hasSSR = selectedFramework?.adapters?.some((a) => a?.key === Adapter.Ssr);
@@ -65,11 +78,13 @@
             }
 
             //Update values
-            const data = selectedFramework.adapters.find((a) => a.key === adapter);
+            const data =
+                selectedFramework.adapters.find((a) => a.key === adapter) ??
+                selectedFramework.adapters[0];
             installCommand = data.installCommand;
             buildCommand = data.buildCommand;
             outputDirectory = data.outputDirectory;
-            adapter = selectedFramework.adapters[0].key as Adapter;
+            adapter = data.key as Adapter;
             fallback = data.fallbackFile;
         } else {
             adapter = site.adapter as Adapter;
@@ -157,11 +172,11 @@
         const data = selectedFramework.adapters.find((a) => a.key === adapter);
 
         if (type === 'installCommand') {
-            installCommand = site?.installCommand ?? data.installCommand;
+            installCommand = data.installCommand;
         } else if (type === 'buildCommand') {
-            buildCommand = site?.buildCommand ?? data.buildCommand;
+            buildCommand = data.buildCommand;
         } else if (type === 'outputDirectory') {
-            outputDirectory = site?.outputDirectory ?? data.outputDirectory;
+            outputDirectory = data.outputDirectory;
         }
     }
 </script>
@@ -216,7 +231,8 @@
                                 {adapterData.ssr.desc}
                             {/if}
                             {#if adapterData?.ssr?.url}
-                                <Link external href={adapterData.ssr.url}>Learn more</Link>
+                                <Link variant="muted" size="m" external href={adapterData.ssr.url}
+                                    >Learn more</Link>
                             {/if}
                         </Card.Selector>
                         <Card.Selector
@@ -243,7 +259,11 @@
                                 {adapterData.static.desc}
                             {/if}
                             {#if adapterData?.static?.url}
-                                <Link external href={adapterData.static.url}>Learn more</Link>
+                                <Link
+                                    variant="muted"
+                                    size="m"
+                                    external
+                                    href={adapterData.static.url}>Learn more</Link>
                             {/if}
                         </Card.Selector>
                     </Layout.Grid>
@@ -258,7 +278,11 @@
                                 placeholder={frameworkAdapterData?.installCommand ||
                                     'Enter install command'} />
 
-                            <Button secondary size="s" on:click={() => reset('installCommand')}>
+                            <Button
+                                secondary
+                                size="s"
+                                on:click={() => reset('installCommand')}
+                                disabled={installCommand === frameworkAdapterData?.installCommand}>
                                 Reset
                             </Button>
                         </Layout.Stack>
@@ -269,7 +293,11 @@
                                 bind:value={buildCommand}
                                 placeholder={frameworkAdapterData?.buildCommand ||
                                     'Enter build command'} />
-                            <Button secondary size="s" on:click={() => reset('buildCommand')}>
+                            <Button
+                                secondary
+                                size="s"
+                                disabled={buildCommand === frameworkAdapterData?.buildCommand}
+                                on:click={() => reset('buildCommand')}>
                                 Reset
                             </Button>
                         </Layout.Stack>
@@ -280,7 +308,12 @@
                                 bind:value={outputDirectory}
                                 placeholder={frameworkAdapterData?.outputDirectory ||
                                     'Enter output directory'} />
-                            <Button secondary size="s" on:click={() => reset('outputDirectory')}>
+                            <Button
+                                secondary
+                                size="s"
+                                disabled={(outputDirectory ?? '') ===
+                                    (frameworkAdapterData?.outputDirectory ?? '')}
+                                on:click={() => reset('outputDirectory')}>
                                 Reset
                             </Button>
                         </Layout.Stack>
@@ -305,7 +338,7 @@
         </svelte:fragment>
 
         <svelte:fragment slot="actions">
-            <Button disabled={hasChanges} submit>Update</Button>
+            <Button disabled={isUntouched} submit>Update</Button>
         </svelte:fragment>
     </CardGrid>
 </Form>