From 990c64a67158d2a06f4631393c053d64df80c481 Mon Sep 17 00:00:00 2001
From: Kiet <31864905+Kitenite@users.noreply.github.com>
Date: Mon, 24 Feb 2025 00:44:45 -0800
Subject: [PATCH] Fix publishing bugs and support unpublish (#1460)

* Publish on first time creating link

* Support unpublishing
---
 .../src/lib/projects/domains/hosting.ts       |  5 +-
 apps/studio/src/lib/projects/domains/index.ts |  4 ++
 apps/studio/src/lib/projects/index.ts         | 12 ++--
 .../editor/SettingsModal/Domain/Base.tsx      |  4 +-
 .../SettingsModal/Domain/DangerZone.tsx       | 59 +++++++++++++++++++
 .../editor/SettingsModal/Domain/index.tsx     |  3 +
 6 files changed, 77 insertions(+), 10 deletions(-)
 create mode 100644 apps/studio/src/routes/editor/SettingsModal/Domain/DangerZone.tsx

diff --git a/apps/studio/src/lib/projects/domains/hosting.ts b/apps/studio/src/lib/projects/domains/hosting.ts
index 245ad0cc4..7f5909241 100644
--- a/apps/studio/src/lib/projects/domains/hosting.ts
+++ b/apps/studio/src/lib/projects/domains/hosting.ts
@@ -107,7 +107,7 @@ export class HostingManager {
         return true;
     }
 
-    async unpublish() {
+    async unpublish(): Promise<boolean> {
         this.updateState({ status: PublishStatus.LOADING, message: 'Deleting deployment...' });
         sendAnalytics('hosting unpublish');
 
@@ -126,12 +126,13 @@ export class HostingManager {
             sendAnalyticsError('Failed to unpublish', {
                 message: error,
             });
-            return;
+            return false;
         }
 
         this.removeDomain(this.domain.type);
         this.updateState({ status: PublishStatus.UNPUBLISHED, message: null });
         sendAnalytics('hosting unpublish success');
+        return true;
     }
 
     async dispose() {
diff --git a/apps/studio/src/lib/projects/domains/index.ts b/apps/studio/src/lib/projects/domains/index.ts
index 5097d4ba0..25e96335e 100644
--- a/apps/studio/src/lib/projects/domains/index.ts
+++ b/apps/studio/src/lib/projects/domains/index.ts
@@ -65,6 +65,10 @@ export class DomainsManager {
             publishedAt: new Date().toISOString(),
         };
         this.projectsManager.updateProject({ ...this.project, domains });
+
+        setTimeout(() => {
+            this.base?.publish();
+        }, 100);
     }
 
     async addCustomDomainToProject(url: string) {
diff --git a/apps/studio/src/lib/projects/index.ts b/apps/studio/src/lib/projects/index.ts
index 539f018e8..afca043d5 100644
--- a/apps/studio/src/lib/projects/index.ts
+++ b/apps/studio/src/lib/projects/index.ts
@@ -87,11 +87,11 @@ export class ProjectsManager {
         return newProject;
     }
 
-    updateProject(project: Project) {
-        const updatedProjects = this._projects.map((p) => (p.id === project.id ? project : p));
-        if (project.id === this.project?.id) {
-            this.project = project;
-        }
+    updateProject(newProject: Project) {
+        const updatedProjects = this._projects.map((p) =>
+            p.id === newProject.id ? newProject : p,
+        );
+        this.project = newProject;
         this.projects = updatedProjects;
     }
 
@@ -130,7 +130,7 @@ export class ProjectsManager {
     set project(newProject: Project | null) {
         if (!newProject) {
             this.disposeManagers();
-        } else if (newProject.id !== this._project?.id) {
+        } else {
             this.setOrUpdateManagers(newProject);
         }
         this._project = newProject;
diff --git a/apps/studio/src/routes/editor/SettingsModal/Domain/Base.tsx b/apps/studio/src/routes/editor/SettingsModal/Domain/Base.tsx
index 84bd67990..5ee3e40c2 100644
--- a/apps/studio/src/routes/editor/SettingsModal/Domain/Base.tsx
+++ b/apps/studio/src/routes/editor/SettingsModal/Domain/Base.tsx
@@ -30,14 +30,14 @@ const BaseDomain = observer(() => {
     };
 
     return (
-        <div className="space-y-4">
+        <div className="space-y-4 flex flex-col">
             <h2 className="text-lg font-medium">Base Domain</h2>
             <div className="space-y-2">
                 <div className="flex justify-between items-center gap-2">
                     <div className="w-1/3">
                         <p className="text-regularPlus text-muted-foreground">URL</p>
                         <p className="text-small text-muted-foreground">
-                            Updated {lastUpdated} ago
+                            {lastUpdated ? `Updated ${lastUpdated} ago` : 'Not published'}
                         </p>
                     </div>
                     <div className="flex gap-2 flex-1">
diff --git a/apps/studio/src/routes/editor/SettingsModal/Domain/DangerZone.tsx b/apps/studio/src/routes/editor/SettingsModal/Domain/DangerZone.tsx
new file mode 100644
index 000000000..476a6e342
--- /dev/null
+++ b/apps/studio/src/routes/editor/SettingsModal/Domain/DangerZone.tsx
@@ -0,0 +1,59 @@
+import { useProjectsManager } from '@/components/Context';
+import { Button } from '@onlook/ui/button';
+import { toast } from '@onlook/ui/use-toast';
+import { observer } from 'mobx-react-lite';
+import { useState } from 'react';
+
+const DangerZone = observer(() => {
+    const projectsManager = useProjectsManager();
+    const [isUnpublishing, setIsUnpublishing] = useState(false);
+    const baseDomain = projectsManager.domains?.base;
+
+    const unpublishProject = async () => {
+        if (!baseDomain) {
+            console.error('No base domain found');
+            return;
+        }
+        setIsUnpublishing(true);
+        const success = await baseDomain.unpublish();
+        setIsUnpublishing(false);
+        if (!success) {
+            toast({
+                title: 'Failed to unpublish project',
+                description: 'Please try again.',
+                variant: 'destructive',
+            });
+        } else {
+            toast({
+                title: 'Project unpublished',
+                description: 'Your project is no longer publicly accessible.',
+            });
+        }
+    };
+
+    return (
+        <div className="flex flex-col gap-4">
+            <h2 className="text-lg font-medium">Danger Zone</h2>
+            <div className="flex flex-col gap-2">
+                <div className="flex flex-row gap-2 items-center">
+                    <p className="text-sm text-muted-foreground">
+                        {!baseDomain
+                            ? 'Your domain is not published'
+                            : 'Unpublish your project to stop it from being publicly accessible.'}
+                    </p>
+                    <Button
+                        onClick={unpublishProject}
+                        className="ml-auto"
+                        size="sm"
+                        variant="destructive"
+                        disabled={isUnpublishing || !baseDomain}
+                    >
+                        {isUnpublishing ? 'Unpublishing...' : 'Unpublish'}
+                    </Button>
+                </div>
+            </div>
+        </div>
+    );
+});
+
+export default DangerZone;
diff --git a/apps/studio/src/routes/editor/SettingsModal/Domain/index.tsx b/apps/studio/src/routes/editor/SettingsModal/Domain/index.tsx
index 71d7ac35d..8bc83ae55 100644
--- a/apps/studio/src/routes/editor/SettingsModal/Domain/index.tsx
+++ b/apps/studio/src/routes/editor/SettingsModal/Domain/index.tsx
@@ -3,6 +3,7 @@ import { Separator } from '@onlook/ui/separator';
 import { observer } from 'mobx-react-lite';
 import { useEffect } from 'react';
 import BaseDomain from './Base';
+import DangerZone from './DangerZone';
 // import { CustomDomain } from './Custom';
 
 export const DomainTab = observer(() => {
@@ -20,6 +21,8 @@ export const DomainTab = observer(() => {
             {/* TODO: Uncomment after freestyle bug is fixed */}
             {/* <CustomDomain /> */}
             <Teaser />
+            <Separator />
+            <DangerZone />
         </div>
     );
 });