Enhance site deployment and preview functionality. Updated Preview.tsx to improve deployment record handling and fallback URL logic. Added deploy functionality in Blueprints.tsx and Preview.tsx, including loading states and user feedback. Introduced ProgressModal for page generation status updates. Updated siteBuilder.api.ts to include deployBlueprint API method.

2025-11-18 18:58:48 +00:00
parent ce6da7d2d5
commit c378e503d8
6 changed files with 351 additions and 28 deletions
--- a/SITE_BUILDER_URLS_AND_FILES.md
+++ b/SITE_BUILDER_URLS_AND_FILES.md
@@ -0,0 +1,139 @@
+# Site Builder URLs and File Management
+
+## Summary of Implementation
+
+### ✅ Generate Page Content Step
+
+**Location**: `frontend/src/pages/Sites/Builder/Preview.tsx`
+
+**Implementation**:
+- Added "Generate All Pages" button (shown when blueprint status is `'ready'`)
+- Button triggers `generateAllPages()` from `builderStore`
+- Shows ProgressModal during generation
+- Uses existing `PageGenerationService.bulk_generate_pages()` backend function
+
+**Queue Function**: ✅ **EXISTS**
+- `PageGenerationService.bulk_generate_pages()` creates Writer Tasks
+- Tasks are queued via `ContentGenerationService.generate_content()`
+- Each page blueprint gets a Writer Task with title: `"[Site Builder] {page_title}"`
+- Tasks are processed by Celery workers
+
+---
+
+## URL Standards
+
+### Public Site URLs (Deployed Sites)
+
+**Current Implementation** (Placeholder):
+- Pattern: `https://{site_id}.igny8.com`
+- Generated by: `SitesRendererAdapter._get_deployment_url()`
+- Location: `backend/igny8_core/business/publishing/services/adapters/sites_renderer_adapter.py:191`
+
+**Planned Implementation** (from docs):
+- Custom domains: `clientdomain.com` → routed via Caddy
+- Subdomain: `mysite.igny8.com` → routed via Caddy
+- Marketing site: `igny8.com` → `/igny8-sites/marketing/`
+
+**Sites Renderer Routes**:
+- Public routes: `/:siteId/*` (no auth required)
+- Loads from: `/data/app/sites-data/clients/{site_id}/v{version}/`
+
+---
+
+### Admin/Management URLs (Frontend App)
+
+**Site Management Routes** (from `frontend/src/App.tsx`):
+- `/sites` - All sites list
+- `/sites/:id` - Site dashboard
+- `/sites/:id/content` - Site content list
+- `/sites/:id/editor` - Site content editor
+- `/sites/:id/pages` - Page manager
+- `/sites/:id/pages/new` - Create new page
+- `/sites/:id/pages/:pageId/edit` - Edit page
+- `/sites/:id/posts/:postId` - View/edit post
+- `/sites/:id/posts/:postId/edit` - Edit post
+- `/sites/:id/preview` - Site preview
+- `/sites/:id/settings` - Site settings (General, SEO, OG, Schema, Integrations)
+- `/sites/manage` - Site management dashboard
+
+**Site Builder Routes**:
+- `/sites/builder` - Site Builder wizard
+- `/sites/builder/preview` - Preview blueprint (with Generate All Pages button)
+- `/sites/blueprints` - Blueprints list
+
+---
+
+## File Management
+
+### File Storage Structure
+
+**Site Files**:
+```
+/data/app/sites-data/
+└── clients/
+    └── {site_id}/
+        └── v{version}/
+            ├── site.json
+            ├── pages/
+            │   ├── home.json
+            │   ├── about.json
+            │   └── ...
+            └── assets/          # User-managed files
+                ├── images/
+                ├── documents/
+                └── media/
+```
+
+**Service**: `SiteBuilderFileService`
+- Location: `backend/igny8_core/business/site_building/services/file_management_service.py`
+- Base path: `/data/app/sites-data/clients`
+- Max file size: 10MB per file
+- Max storage per site: 100MB
+
+### User Access Rules
+
+- **Owner/Admin**: Full access to all account sites
+- **Editor**: Access to granted sites (via SiteUserAccess)
+- **Viewer**: Read-only access to granted sites
+- File operations scoped to user's accessible sites only
+
+### File Manager UI
+
+**Status**: ⚠️ **NOT YET IMPLEMENTED**
+
+**Planned** (from Phase 3 docs):
+- File Browser UI: `site-builder/src/components/files/FileBrowser.tsx`
+- File Upload API: `modules/site_builder/views.py`
+- Storage quota check: `infrastructure/storage/file_storage.py`
+
+**Expected Routes** (not yet in App.tsx):
+- `/sites/:id/files` - File manager for site assets
+- `/sites/:id/files/upload` - Upload files
+- `/sites/:id/files/:fileId` - View/edit file
+
+---
+
+## Docker Volumes
+
+**From `docker-compose.app.yml`**:
+```yaml
+igny8_sites:
+  volumes:
+    - /data/app/igny8/sites:/app
+    - /data/app/sites-data:/sites  # Site definitions and assets
+```
+
+**Environment Variable**:
+- `SITES_DATA_PATH=/sites` (inside container)
+- Maps to `/data/app/sites-data` on host
+
+---
+
+## Next Steps
+
+1. ✅ **Generate All Pages button** - Added to Preview page
+2. ⏳ **File Manager UI** - Needs to be implemented
+3. ⏳ **Deployment URL generation** - Currently placeholder, needs real domain mapping
+4. ⏳ **Caddy routing configuration** - For custom domains
+5. ⏳ **File upload API endpoints** - For user file management
+
--- a/backend/celerybeat-schedule
+++ b/backend/celerybeat-schedule
--- a/frontend/src/pages/Sites/Builder/Blueprints.tsx
+++ b/frontend/src/pages/Sites/Builder/Blueprints.tsx
@@ -4,7 +4,7 @@ import PageMeta from "../../../components/common/PageMeta";
 import { Card } from "../../../components/ui/card";
 import Button from "../../../components/ui/button/Button";
 import { useToast } from "../../../components/ui/toast/ToastContainer";
-import { FileText, Loader2, Plus, Trash2, CheckSquare, Square } from "lucide-react";
+import { FileText, Loader2, Plus, Trash2, CheckSquare, Square, Rocket } from "lucide-react";
 import { useSiteStore } from "../../../store/siteStore";
 import { useBuilderStore } from "../../../store/builderStore";
 import { siteBuilderApi } from "../../../services/siteBuilder.api";
@@ -25,6 +25,7 @@ export default function SiteBuilderBlueprints() {
    blueprint: SiteBlueprint | null;
    isBulk: boolean;
  }>({ isOpen: false, blueprint: null, isBulk: false });
+  const [deployingId, setDeployingId] = useState<number | null>(null);

  const loadBlueprints = async (siteId: number) => {
    try {
@@ -113,6 +114,27 @@ export default function SiteBuilderBlueprints() {
    }
  };

+  const handleDeploy = async (blueprint: SiteBlueprint) => {
+    try {
+      setDeployingId(blueprint.id);
+      const result = await siteBuilderApi.deployBlueprint(blueprint.id);
+      
+      if (result.success) {
+        toast.success("Site deployed successfully!");
+        // Reload blueprints to get updated status
+        if (activeSite?.id) {
+          await loadBlueprints(activeSite.id);
+        }
+      } else {
+        toast.error("Failed to deploy site");
+      }
+    } catch (error: any) {
+      toast.error(error?.message || "Failed to deploy site");
+    } finally {
+      setDeployingId(null);
+    }
+  };
+
  return (
    <div className="space-y-6 p-6">
      <PageMeta title="Blueprints - IGNY8" />
@@ -238,6 +260,17 @@ export default function SiteBuilderBlueprints() {
                  <span className="capitalize">{blueprint.status}</span>
                </div>
                <div className="flex flex-col gap-2">
+                  {(blueprint.status === 'ready' || blueprint.status === 'deployed') && (
+                    <Button
+                      variant="solid"
+                      tone="brand"
+                      disabled={deployingId === blueprint.id}
+                      onClick={() => handleDeploy(blueprint)}
+                      startIcon={deployingId === blueprint.id ? <Loader2 className="h-4 w-4 animate-spin" /> : <Rocket className="h-4 w-4" />}
+                    >
+                      {deployingId === blueprint.id ? "Deploying..." : blueprint.status === 'deployed' ? "Redeploy" : "Deploy Site"}
+                    </Button>
+                  )}
                  <Button
                    variant="outline"
                    tone="brand"
@@ -275,6 +308,7 @@ export default function SiteBuilderBlueprints() {
                </Card>
              );
            })}
+          </div>
        </div>
      )}

--- a/frontend/src/pages/Sites/Builder/Preview.tsx
+++ b/frontend/src/pages/Sites/Builder/Preview.tsx
@@ -1,4 +1,4 @@
-import { useMemo } from "react";
+import { useMemo, useState, useEffect } from "react";
 import { useNavigate } from "react-router-dom";
 import PageMeta from "../../../components/common/PageMeta";
 import {
@@ -10,17 +10,69 @@ import Button from "../../../components/ui/button/Button";
 import Alert from "../../../components/ui/alert/Alert";
 import { useBuilderStore } from "../../../store/builderStore";
 import { useSiteDefinitionStore } from "../../../store/siteDefinitionStore";
-import { Eye } from "lucide-react";
+import ProgressModal from "../../../components/common/ProgressModal";
+import { Eye, Play, Loader2, Rocket } from "lucide-react";
+import { useToast } from "../../../components/ui/toast/ToastContainer";
+import { siteBuilderApi } from "../../../services/siteBuilder.api";

 export default function SiteBuilderPreview() {
  const navigate = useNavigate();
-  const { activeBlueprint, pages } = useBuilderStore();
+  const toast = useToast();
+  const { 
+    activeBlueprint, 
+    pages, 
+    generateAllPages, 
+    isGenerating, 
+    generationProgress 
+  } = useBuilderStore();
  const { structure, selectedSlug, selectPage } = useSiteDefinitionStore();
+  const [showProgress, setShowProgress] = useState(false);
+  const [isDeploying, setIsDeploying] = useState(false);

  const selectedPageDefinition = useMemo(() => {
    return structure?.pages?.find((page) => page.slug === selectedSlug);
  }, [structure, selectedSlug]);

+  useEffect(() => {
+    if (generationProgress?.celeryTaskId) {
+      setShowProgress(true);
+    }
+  }, [generationProgress?.celeryTaskId]);
+
+  const handleGenerateAll = async () => {
+    if (!activeBlueprint) return;
+    
+    setShowProgress(true);
+    try {
+      await generateAllPages(activeBlueprint.id);
+      toast.success("Page generation queued successfully");
+    } catch (error: any) {
+      toast.error(error?.message || "Failed to generate pages");
+      setShowProgress(false);
+    }
+  };
+
+  const handleDeploy = async () => {
+    if (!activeBlueprint) return;
+    
+    try {
+      setIsDeploying(true);
+      const result = await siteBuilderApi.deployBlueprint(activeBlueprint.id);
+      
+      if (result.success) {
+        toast.success("Site deployed successfully!");
+        // Reload blueprint to get updated status
+        await useBuilderStore.getState().loadBlueprint(activeBlueprint.id);
+      } else {
+        toast.error("Failed to deploy site");
+      }
+    } catch (error: any) {
+      toast.error(error?.message || "Failed to deploy site");
+    } finally {
+      setIsDeploying(false);
+    }
+  };
+
  if (!activeBlueprint) {
    return (
      <div className="space-y-6 p-6">
@@ -58,9 +110,33 @@ export default function SiteBuilderPreview() {
            Inspect the generated structure before publishing or deploying.
          </p>
        </div>
-        <Button variant="outline" onClick={() => navigate("/sites/builder")}>
-          Back to wizard
-        </Button>
+        <div className="flex gap-2">
+          {activeBlueprint.status === 'ready' && (
+            <Button
+              variant="solid"
+              tone="brand"
+              onClick={handleGenerateAll}
+              disabled={isGenerating}
+              startIcon={isGenerating ? <Loader2 className="h-4 w-4 animate-spin" /> : <Play className="h-4 w-4" />}
+            >
+              {isGenerating ? "Generating..." : "Generate All Pages"}
+            </Button>
+          )}
+          {(activeBlueprint.status === 'ready' || activeBlueprint.status === 'deployed') && (
+            <Button
+              variant="solid"
+              tone="brand"
+              onClick={handleDeploy}
+              disabled={isDeploying}
+              startIcon={isDeploying ? <Loader2 className="h-4 w-4 animate-spin" /> : <Rocket className="h-4 w-4" />}
+            >
+              {isDeploying ? "Deploying..." : activeBlueprint.status === 'deployed' ? "Redeploy" : "Deploy Site"}
+            </Button>
+          )}
+          <Button variant="outline" onClick={() => navigate("/sites/builder")}>
+            Back to wizard
+          </Button>
+        </div>
      </div>

      <Alert
@@ -157,6 +233,29 @@ export default function SiteBuilderPreview() {
          )}
        </Card>
      </div>
+
+      <ProgressModal
+        isOpen={showProgress}
+        onClose={() => setShowProgress(false)}
+        title="Generating Pages"
+        percentage={isGenerating ? 50 : 100}
+        status={isGenerating ? 'processing' : generationProgress ? 'completed' : 'pending'}
+        message={
+          isGenerating
+            ? `Generating content for ${generationProgress?.pagesQueued || pages.length} page${(generationProgress?.pagesQueued || pages.length) !== 1 ? 's' : ''}...`
+            : 'Generation completed!'
+        }
+        details={
+          generationProgress
+            ? {
+                current: generationProgress.pagesQueued,
+                total: generationProgress.pagesQueued,
+                completed: generationProgress.pagesQueued,
+              }
+            : undefined
+        }
+        taskId={generationProgress?.celeryTaskId}
+      />
    </div>
  );
 }
--- a/frontend/src/pages/Sites/Preview.tsx
+++ b/frontend/src/pages/Sites/Preview.tsx
@@ -37,30 +37,51 @@ export default function SitePreview() {
        const latestBlueprint = blueprints[0];
        setBlueprint(latestBlueprint);
        
-        // Get publishing status to find preview URL
-        if (latestBlueprint.deployed_version) {
-          // Try to get publishing record
+        // Get deployment record to find preview URL
+        if (latestBlueprint.deployed_version || latestBlueprint.status === 'deployed') {
          try {
-            const publishingData = await fetchAPI(`/v1/publishing/records/?site_blueprint=${latestBlueprint.id}`);
-            const records = Array.isArray(publishingData?.results) ? publishingData.results : Array.isArray(publishingData) ? publishingData : [];
+            // Get deployment records for this blueprint
+            const deploymentsData = await fetchAPI(`/v1/publisher/deployments/?site_blueprint=${latestBlueprint.id}`);
+            const deployments = Array.isArray(deploymentsData?.results) ? deploymentsData.results : Array.isArray(deploymentsData) ? deploymentsData : [];
            
-            if (records.length > 0) {
-              const record = records.find((r: any) => r.status === 'published') || records[0];
-              if (record?.published_url) {
-                setPreviewUrl(record.published_url);
-              }
+            // Find the latest deployed record
+            const deployedRecord = deployments.find((d: any) => d.status === 'deployed') || deployments[0];
+            
+            if (deployedRecord?.deployment_url) {
+              setPreviewUrl(deployedRecord.deployment_url);
+            } else if (deployedRecord) {
+              // If deployment exists but no URL, construct from Sites Renderer
+              // Sites Renderer should be accessible at a different port or subdomain
+              // Check if we have the Sites Renderer URL configured
+              const sitesRendererUrl = import.meta.env.VITE_SITES_RENDERER_URL || 
+                                       (window as any).__SITES_RENDERER_URL__ || 
+                                       'http://localhost:8024';
+              setPreviewUrl(`${sitesRendererUrl}/${siteId}`);
            }
          } catch (error) {
-            // If no publishing record, construct preview URL from blueprint
-            console.warn('No publishing record found, using fallback URL');
+            console.warn('No deployment record found:', error);
+            // If blueprint is deployed but no deployment record, try Sites Renderer directly
+            if (latestBlueprint.status === 'deployed') {
+              const sitesRendererUrl = import.meta.env.VITE_SITES_RENDERER_URL || 
+                                       (window as any).__SITES_RENDERER_URL__ || 
+                                       'http://localhost:8024';
+              setPreviewUrl(`${sitesRendererUrl}/${siteId}`);
+            }
          }
        }
        
-        // Fallback: construct preview URL from blueprint
-        if (!previewUrl && latestBlueprint.id) {
-          // Assuming sites are hosted at a subdomain or path
-          const baseUrl = window.location.origin;
-          setPreviewUrl(`${baseUrl}/sites/${siteId}/preview/${latestBlueprint.id}`);
+        // If still no preview URL, check blueprint status
+        if (!previewUrl) {
+          if (latestBlueprint.status === 'ready' || latestBlueprint.status === 'generating' || latestBlueprint.status === 'draft') {
+            // Blueprint exists but not deployed yet - don't set preview URL
+            setPreviewUrl(null);
+          } else if (latestBlueprint.status === 'deployed') {
+            // Blueprint is deployed but no deployment record found - try Sites Renderer
+            const sitesRendererUrl = import.meta.env.VITE_SITES_RENDERER_URL || 
+                                     (window as any).__SITES_RENDERER_URL__ || 
+                                     'http://localhost:8024';
+            setPreviewUrl(`${sitesRendererUrl}/${siteId}`);
+          }
        }
      }
    } catch (error: any) {
@@ -110,12 +131,31 @@ export default function SitePreview() {
        </div>
        <Card className="p-12 text-center">
          <p className="text-gray-600 dark:text-gray-400 mb-4">
-            No preview available. Please deploy your site first.
+            {blueprint?.status === 'ready' || blueprint?.status === 'generating'
+              ? 'Blueprint is ready but not yet deployed. Deploy your site to preview it.'
+              : blueprint?.status === 'draft'
+              ? 'Blueprint is still in draft. Complete the wizard to generate the site structure.'
+              : 'No preview available. Please deploy your site first.'}
          </p>
          {blueprint && (
-            <p className="text-sm text-gray-500 dark:text-gray-500">
-              Blueprint: {blueprint.name} ({blueprint.status})
-            </p>
+            <div className="space-y-2">
+              <p className="text-sm text-gray-500 dark:text-gray-500">
+                Blueprint: {blueprint.name} ({blueprint.status})
+              </p>
+              {blueprint.status === 'ready' && (
+                <Button
+                  variant="solid"
+                  tone="brand"
+                  onClick={() => {
+                    // Navigate to blueprints page or show deploy option
+                    window.location.href = `/sites/blueprints`;
+                  }}
+                  className="mt-4"
+                >
+                  Go to Blueprints to Deploy
+                </Button>
+              )}
+            </div>
          )}
        </Card>
      </div>
--- a/frontend/src/services/siteBuilder.api.ts
+++ b/frontend/src/services/siteBuilder.api.ts
@@ -157,5 +157,16 @@ export const siteBuilderApi = {
      body: JSON.stringify({ ids }),
    });
  },
+
+  /**
+   * Deploy a blueprint to Sites renderer
+   */
+  async deployBlueprint(blueprintId: number): Promise<{ success: boolean; deployment_url?: string; deployment_id?: number }> {
+    const response = await fetchAPI(`/v1/publisher/deploy/${blueprintId}/`, {
+      method: 'POST',
+    });
+    // Handle unified response format
+    return response?.data || response;
+  },
 };