Merge pull request #2476 from appwrite/fix-dat-807

ItzNotABug · web-flow · commit 1590206b4cc2 · 2025-10-16T16:47:13.000+05:30
diff --git a/src/routes/(console)/project-[region]-[project]/overview/onboard.svelte b/src/routes/(console)/project-[region]-[project]/overview/onboard.svelte
@@ -40,6 +40,9 @@
     import { goto } from '$app/navigation';
     import { page } from '$app/state';
 
+    export let pingCount = 0;
+    export let platforms: Models.Platform[] = [];
+
     function createKey() {
         trackEvent(Click.KeyCreateClick, {
             source: 'onboarding'
@@ -52,9 +55,6 @@
         );
     }
 
-    export let platforms: Models.Platform[] = [];
-    export let pingCount = 0;
-
     function openPlatformWizard(type: number, platform?: Models.Platform) {
         if (platform) {
             continuePlatform(type, platform.name, platform.key, platform.type);
diff --git a/src/routes/(console)/project-[region]-[project]/overview/platforms/+page.svelte b/src/routes/(console)/project-[region]-[project]/overview/platforms/+page.svelte
@@ -41,7 +41,7 @@
             state: 'continue'
         });
         wizard.start(platforms[platform], null, 1, {
-            isPlatformCreated: true,
+            isConnectPlatform: true,
             platform: type,
             key: key
         });
diff --git a/src/routes/(console)/project-[region]-[project]/overview/platforms/createAndroid.svelte b/src/routes/(console)/project-[region]-[project]/overview/platforms/createAndroid.svelte
@@ -25,11 +25,15 @@
     import OnboardingPlatformCard from './components/OnboardingPlatformCard.svelte';
     import { PlatformType } from '@appwrite.io/console';
     import { project } from '../../store';
+    import { getCorrectTitle, type PlatformProps } from './store';
+
+    let { isConnectPlatform = false }: PlatformProps = $props();
+
+    let showExitModal = $state(false);
+    let isCreatingPlatform = $state(false);
+    let connectionSuccessful = $state(false);
+    let isPlatformCreated = $state(isConnectPlatform);
 
-    let showExitModal = false;
-    let isPlatformCreated = false;
-    let isCreatingPlatform = false;
-    let connectionSuccessful = false;
     const projectId = page.params.project;
 
     const gitCloneCode =
@@ -93,7 +97,10 @@ const val APPWRITE_PUBLIC_ENDPOINT = "${sdk.forProject(page.params.region, page.
     });
 </script>
 
-<Wizard title="Add Android platform" bind:showExitModal confirmExit={!isPlatformCreated}>
+<Wizard
+    bind:showExitModal
+    confirmExit={!isPlatformCreated}
+    title={getCorrectTitle(isConnectPlatform, 'Android')}>
     <Layout.Stack gap="xxl">
         <!-- Step One -->
         {#if !isPlatformCreated}
diff --git a/src/routes/(console)/project-[region]-[project]/overview/platforms/createApple.svelte b/src/routes/(console)/project-[region]-[project]/overview/platforms/createApple.svelte
@@ -27,11 +27,15 @@
     import { PlatformType } from '@appwrite.io/console';
     import { app } from '$lib/stores/app';
     import { project } from '../../store';
+    import { getCorrectTitle, type PlatformProps } from './store';
+
+    let { isConnectPlatform = false, platform = PlatformType.Appleios }: PlatformProps = $props();
+
+    let showExitModal = $state(false);
+    let isCreatingPlatform = $state(false);
+    let connectionSuccessful = $state(false);
+    let isPlatformCreated = $state(isConnectPlatform);
 
-    let showExitModal = false;
-    let isPlatformCreated = false;
-    let isCreatingPlatform = false;
-    let connectionSuccessful = false;
     const projectId = page.params.project;
 
     const gitCloneCode =
@@ -41,8 +45,6 @@
 APPWRITE_PROJECT_NAME: "${$project.name}"
 APPWRITE_PUBLIC_ENDPOINT: "${sdk.forProject(page.params.region, page.params.project).client.config.endpoint}"`;
 
-    export let platform: PlatformType = PlatformType.Appleios;
-
     let platforms: { [key: string]: PlatformType } = {
         iOS: PlatformType.Appleios,
         macOS: PlatformType.Applemacos,
@@ -104,7 +106,10 @@ APPWRITE_PUBLIC_ENDPOINT: "${sdk.forProject(page.params.region, page.params.proj
     });
 </script>
 
-<Wizard title="Add Apple platform" bind:showExitModal confirmExit={!isPlatformCreated}>
+<Wizard
+    bind:showExitModal
+    confirmExit={!isPlatformCreated}
+    title={getCorrectTitle(isConnectPlatform, 'Apple')}>
     <Layout.Stack gap="xxl">
         <Form onSubmit={createApplePlatform}>
             <Layout.Stack gap="xxl">
diff --git a/src/routes/(console)/project-[region]-[project]/overview/platforms/createFlutter.svelte b/src/routes/(console)/project-[region]-[project]/overview/platforms/createFlutter.svelte
@@ -26,11 +26,16 @@
     import OnboardingPlatformCard from './components/OnboardingPlatformCard.svelte';
     import { PlatformType } from '@appwrite.io/console';
     import { project } from '../../store';
+    import { getCorrectTitle, type PlatformProps } from './store';
+
+    let { isConnectPlatform = false, platform = PlatformType.Flutterandroid }: PlatformProps =
+        $props();
+
+    let showExitModal = $state(false);
+    let isCreatingPlatform = $state(false);
+    let connectionSuccessful = $state(false);
+    let isPlatformCreated = $state(isConnectPlatform);
 
-    let showExitModal = false;
-    let isPlatformCreated = false;
-    let isCreatingPlatform = false;
-    let connectionSuccessful = false;
     const projectId = page.params.project;
 
     const gitCloneCode =
@@ -42,8 +47,6 @@
   static const String appwritePublicEndpoint = '${sdk.forProject(page.params.region, page.params.project).client.config.endpoint}';
 }`;
 
-    export let platform: PlatformType = PlatformType.Flutterandroid;
-
     let platforms: { [key: string]: PlatformType } = {
         Android: PlatformType.Flutterandroid,
         iOS: PlatformType.Flutterios,
@@ -169,7 +172,10 @@
     });
 </script>
 
-<Wizard title="Add Flutter platform" bind:showExitModal confirmExit={!isPlatformCreated}>
+<Wizard
+    bind:showExitModal
+    confirmExit={!isPlatformCreated}
+    title={getCorrectTitle(isConnectPlatform, 'Flutter')}>
     <Layout.Stack gap="xxl">
         <Form onSubmit={createFlutterPlatform}>
             <Layout.Stack gap="xxl">
diff --git a/src/routes/(console)/project-[region]-[project]/overview/platforms/createReactNative.svelte b/src/routes/(console)/project-[region]-[project]/overview/platforms/createReactNative.svelte
@@ -26,11 +26,16 @@
     import OnboardingPlatformCard from './components/OnboardingPlatformCard.svelte';
     import { PlatformType } from '@appwrite.io/console';
     import { project } from '../../store';
+    import { getCorrectTitle, type PlatformProps } from './store';
+
+    let { isConnectPlatform = false, platform = PlatformType.Reactnativeandroid }: PlatformProps =
+        $props();
+
+    let showExitModal = $state(false);
+    let isCreatingPlatform = $state(false);
+    let connectionSuccessful = $state(false);
+    let isPlatformCreated = $state(isConnectPlatform);
 
-    let showExitModal = false;
-    let isPlatformCreated = false;
-    let isCreatingPlatform = false;
-    let connectionSuccessful = false;
     const projectId = page.params.project;
 
     const gitCloneCode =
@@ -40,8 +45,6 @@
 EXPO_PUBLIC_APPWRITE_PROJECT_NAME="${$project.name}"
 EXPO_PUBLIC_APPWRITE_ENDPOINT=${sdk.forProject(page.params.region, page.params.project).client.config.endpoint}`;
 
-    export let platform: PlatformType = PlatformType.Reactnativeandroid;
-
     let platforms: { [key: string]: PlatformType } = {
         Android: PlatformType.Reactnativeandroid,
         iOS: PlatformType.Reactnativeios
@@ -130,7 +133,10 @@ EXPO_PUBLIC_APPWRITE_ENDPOINT=${sdk.forProject(page.params.region, page.params.p
     });
 </script>
 
-<Wizard title="Add React Native platform" bind:showExitModal confirmExit={!isPlatformCreated}>
+<Wizard
+    bind:showExitModal
+    confirmExit={!isPlatformCreated}
+    title={getCorrectTitle(isConnectPlatform, 'React Native')}>
     <Layout.Stack gap="xxl">
         <Form onSubmit={createReactNativePlatform}>
             <Layout.Stack gap="xxl">
diff --git a/src/routes/(console)/project-[region]-[project]/overview/platforms/createWeb.svelte b/src/routes/(console)/project-[region]-[project]/overview/platforms/createWeb.svelte
@@ -26,7 +26,7 @@
         IconJs
     } from '@appwrite.io/pink-icons-svelte';
     import { page } from '$app/state';
-    import { type ComponentType, onMount } from 'svelte';
+    import { onMount } from 'svelte';
     import { sdk } from '$lib/stores/sdk';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
     import { addNotification } from '$lib/stores/notifications';
@@ -46,34 +46,25 @@
     } from './components/index';
     import { extendedHostnameRegex } from '$lib/helpers/string';
     import { project } from '../../store';
+    import { type PlatformProps, type FrameworkType, getCorrectTitle } from './store';
 
-    export let key;
+    let { key, isConnectPlatform = false, platform = PlatformType.Web }: PlatformProps = $props();
 
-    let showExitModal = false;
-    let isPlatformCreated = !!key;
-    let isCreatingPlatform = false;
-    let connectionSuccessful = false;
-    let isChangingFramework = false;
+    let showExitModal = $state(false);
+    let isCreatingPlatform = $state(false);
+    let connectionSuccessful = $state(false);
+    let isChangingFramework = $state(false);
+    let isPlatformCreated = $state(isConnectPlatform);
 
     const projectId = page.params.project;
 
     const updateConfigCode = (prefix = '') => `${prefix}APPWRITE_PROJECT_ID = "${projectId}"
 ${prefix}APPWRITE_PROJECT_NAME = "${$project.name}"
 ${prefix}APPWRITE_ENDPOINT = "${sdk.forProject(page.params.region, page.params.project).client.config.endpoint}"
         `;
-    type FrameworkType = {
-        key: string;
-        label: string;
-        icon: ComponentType;
-        smallIcon: ComponentType;
-        portNumber: number;
-        runCommand: string;
-        updateConfigCode: string;
-    };
-    export let platform: PlatformType = PlatformType.Flutterandroid;
-    export let selectedFrameworkKey: string | undefined = key ? key : undefined;
-    let hostname;
-    let hostnameError = false;
+
+    let hostname = $state(null);
+    let hostnameError = $state(false);
 
     let frameworks: Array<FrameworkType> = [
         {
@@ -149,8 +140,11 @@ ${prefix}APPWRITE_ENDPOINT = "${sdk.forProject(page.params.region, page.params.p
         }
     ];
 
-    $: selectedFramework = frameworks.find((framework) => framework.key === selectedFrameworkKey);
-    $: selectedFrameworkIcon = selectedFramework ? selectedFramework.icon : NoFrameworkIcon;
+    const selectedFramework = $derived(frameworks.find((framework) => framework.key === key));
+
+    const selectedFrameworkIcon = $derived(
+        selectedFramework ? selectedFramework.icon : NoFrameworkIcon
+    );
 
     async function createWebPlatform() {
         hostnameError = hostname !== '' ? !new RegExp(extendedHostnameRegex).test(hostname) : null;
@@ -165,7 +159,7 @@ ${prefix}APPWRITE_ENDPOINT = "${sdk.forProject(page.params.region, page.params.p
                 projectId,
                 type: PlatformType.Web,
                 name: `${selectedFramework.label} app`,
-                key: selectedFrameworkKey,
+                key: key,
                 hostname: hostname === '' ? undefined : hostname
             });
 
@@ -213,7 +207,10 @@ ${prefix}APPWRITE_ENDPOINT = "${sdk.forProject(page.params.region, page.params.p
     });
 </script>
 
-<Wizard title="Add web platform" bind:showExitModal confirmExit={!isPlatformCreated}>
+<Wizard
+    bind:showExitModal
+    confirmExit={!isPlatformCreated}
+    title={getCorrectTitle(isConnectPlatform, 'Web')}>
     <Layout.Stack gap="xxl">
         <!-- Step One -->
         {#if !isPlatformCreated || isChangingFramework}
@@ -224,7 +221,7 @@ ${prefix}APPWRITE_ENDPOINT = "${sdk.forProject(page.params.region, page.params.p
                             <div class="frameworks">
                                 {#each frameworks as framework}
                                     <Card.Selector
-                                        bind:group={selectedFrameworkKey}
+                                        bind:group={key}
                                         name="framework"
                                         id={framework.key}
                                         value={framework.key}
@@ -277,6 +274,7 @@ ${prefix}APPWRITE_ENDPOINT = "${sdk.forProject(page.params.region, page.params.p
                     <Button
                         size="s"
                         secondary
+                        disabled={isConnectPlatform}
                         on:click={() => {
                             isChangingFramework = true;
                         }}>Change</Button>
diff --git a/src/routes/(console)/project-[region]-[project]/overview/platforms/store.ts b/src/routes/(console)/project-[region]-[project]/overview/platforms/store.ts
@@ -0,0 +1,22 @@
+import type { ComponentType } from 'svelte';
+import { PlatformType } from '@appwrite.io/console';
+
+export type PlatformProps = {
+    key?: string;
+    platform?: PlatformType;
+    isConnectPlatform: boolean;
+};
+
+export type FrameworkType = {
+    key: string;
+    label: string;
+    icon: ComponentType;
+    smallIcon: ComponentType;
+    portNumber: number;
+    runCommand: string;
+    updateConfigCode: string;
+};
+
+export function getCorrectTitle(isConnectPlatform: boolean, platform: string) {
+    return isConnectPlatform ? `Connect your ${platform} app` : `Add ${platform} platform`;
+}
