chore: new Domain publish prepare steps (#4125)

## Description

1. What is this PR about (link the issue and add a short description)

## Steps for reproduction

1. click button
2. expect xyz

## Code Review

- [ ] hi @kof, I need you to do
  - conceptual review (architecture, feature-correctness)
  - detailed review (read every line)
  - test it on preview

## Before requesting a review

- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")

## Before merging

- [ ] tested locally and on preview environment (preview dev login:
5de6)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file

Author: istarkov

.github/workflows/migrate.yaml

@@ -57,6 +57,29 @@ jobs:
         env:
           DIRECT_URL: ${{ secrets.DIRECT_URL }}
 
+  # Execute db tests (@todo: can be done only after applying the migrations, now always())
+  db-tests:
+    if: always()
+
+    needs: [migrate]
+
+    runs-on: ubuntu-latest
+
+    environment:
+      name: ${{ (startsWith(github.ref_name, 'release') && endsWith(github.ref_name, '.staging')) && 'postgres_production' || 'postgres_development' }}
+
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          ref: ${{ github.sha }} # HEAD commit instead of merge commit
+
+      - uses: pnpm/action-setup@v4
+
+      - name: pnpm instal
+        run: pnpm -r db-test
+        env:
+          DIRECT_URL: ${{ secrets.DIRECT_URL }}
+
   # Prints pending migrations
   pending:
     if: always()

.gitignore

@@ -60,4 +60,6 @@ tsconfig.tsbuildinfo
 dist
 
 # should be here otherwise if placed inside prisma-client pnpm deploy doesn't copy it
-packages/prisma-client/src/__generated__
+packages/prisma-client/src/__generated__
+
+.temp

apps/builder/app/builder/features/sidebar-left/panels/pages/page-settings.stories.tsx

@@ -71,11 +71,18 @@ $project.set({
   isDeleted: false,
   userId: "userId",
   domain: "new-2x9tcd",
+
+  marketplaceApprovalStatus: "UNLISTED",
+
+  latestStaticBuild: null,
+  previewImageAssetId: null,
   previewImageAsset: {
-    id: "0",
-    name: "0",
+    projectId: "projectId",
+    id: "imageId",
+    name: "very-very-very-long-long-image-name.jpg",
   },
-  marketplaceApprovalStatus: "UNLISTED",
+  latestBuildVirtual: null,
+  domainsVirtual: [],
 });
 
 export const PageSettingsEdit = () => {

apps/builder/app/builder/features/topbar/domains.tsx

@@ -21,34 +21,14 @@ import {
 import type { DomainStatus } from "@webstudio-is/prisma-client";
 import { CollapsibleDomainSection } from "./collapsible-domain-section";
 import { useCallback, useEffect, useState } from "react";
-import type { PublishStatus } from "@webstudio-is/prisma-client";
 import { formatDistance } from "date-fns/formatDistance";
 import { Entri } from "./entri";
 import { trpcClient } from "~/shared/trpc/trpc-client";
 import { useStore } from "@nanostores/react";
 import { $publisherHost } from "~/shared/nano-states";
+import type { Database } from "@webstudio-is/postrest/index.server";
 
-export type Domain = {
-  projectId: Project["id"];
-  domainId: string;
-  domain: {
-    domain: string;
-    error: string | null;
-    status: DomainStatus;
-    updatedAt: string;
-  };
-  txtRecord: string;
-  cname: string;
-  verified: boolean;
-  latestBuid: null | {
-    projectId: string;
-    buildId: string;
-    isLatestBuild: boolean;
-    publishStatus: PublishStatus;
-    updatedAt: string;
-    domainId: string;
-  };
-};
+export type Domain = Project["domainsVirtual"][number];
 
 const InputEllipsis = styled(InputField, {
   "&>input": {
@@ -79,21 +59,58 @@ const getCname = (domain: string) => {
   return cnameArray.join(".");
 };
 
-export const getStatus = (projectDomain: Domain) =>
+export const getStatus = (projectDomain: Project["domainsVirtual"][number]) =>
   projectDomain.verified
-    ? (`VERIFIED_${projectDomain.domain.status}` as const)
+    ? (`VERIFIED_${projectDomain.status}` as const)
     : `UNVERIFIED`;
 
 export const PENDING_TIMEOUT =
   process.env.NODE_ENV === "production" ? 60 * 3 * 1000 : 35000;
 
+export const getPublishStatusAndTextNew = ({
+  createdAt,
+  publishStatus,
+}: Pick<
+  Database["public"]["Tables"]["latestBuildVirtual"]["Row"],
+  "createdAt" | "publishStatus"
+>) => {
+  let status = publishStatus;
+
+  const delta = Date.now() - new Date(createdAt).getTime();
+  // Assume build failed after 3 minutes
+
+  if (publishStatus === "PENDING" && delta > PENDING_TIMEOUT) {
+    status = "FAILED";
+  }
+
+  const textStart =
+    status === "PUBLISHED"
+      ? "Published"
+      : status === "FAILED"
+        ? "Publish failed"
+        : "Publishing started";
+
+  const statusText = `${textStart} ${formatDistance(
+    new Date(createdAt),
+    new Date(),
+    {
+      addSuffix: true,
+    }
+  )}`;
+
+  return { statusText, status };
+};
+
 export const getPublishStatusAndText = ({
-  updatedAt,
+  createdAt,
   publishStatus,
-}: Pick<NonNullable<Domain["latestBuid"]>, "updatedAt" | "publishStatus">) => {
+}: Pick<
+  NonNullable<Domain["latestBuildVirtual"]>,
+  "createdAt" | "publishStatus"
+>) => {
   let status = publishStatus;
 
-  const delta = Date.now() - new Date(updatedAt).getTime();
+  const delta = Date.now() - new Date(createdAt).getTime();
   // Assume build failed after 3 minutes
 
   if (publishStatus === "PENDING" && delta > PENDING_TIMEOUT) {
@@ -108,7 +125,7 @@ export const getPublishStatusAndText = ({
         : "Publishing started";
 
   const statusText = `${textStart} ${formatDistance(
-    new Date(updatedAt),
+    new Date(createdAt),
     new Date(),
     {
       addSuffix: true,
@@ -142,17 +159,17 @@ const getStatusText = (props: {
       isVerifiedActive = true;
       text = "Status: Active, not published";
 
-      if (props.projectDomain.latestBuid !== null) {
+      if (props.projectDomain.latestBuildVirtual !== null) {
         const publishText = getPublishStatusAndText(
-          props.projectDomain.latestBuid
+          props.projectDomain.latestBuildVirtual
         );
 
         text = publishText.statusText;
         isVerifiedActive = publishText.status !== "FAILED";
       }
       break;
     case "VERIFIED_ERROR":
-      text = props.projectDomain.domain.error ?? text;
+      text = props.projectDomain.error ?? text;
       break;
 
     default:
@@ -237,16 +254,16 @@ const DomainItem = (props: {
     props.domainState !== "idle";
 
   const status = props.projectDomain.verified
-    ? (`VERIFIED_${props.projectDomain.domain.status}` as `VERIFIED_${DomainStatus}`)
+    ? (`VERIFIED_${props.projectDomain.status}` as `VERIFIED_${DomainStatus}`)
     : `UNVERIFIED`;
 
   const { initiallyOpen } = props;
 
   const domainId = props.projectDomain.domainId;
-  const domain = props.projectDomain.domain.domain;
-  const domainStatus = props.projectDomain.domain.status;
-  const domainError = props.projectDomain.domain.error;
-  const domainUpdatedAt = props.projectDomain.domain.updatedAt;
+  const domain = props.projectDomain.domain;
+  const domainStatus = props.projectDomain.status;
+  const domainError = props.projectDomain.error;
+  const domainUpdatedAt = props.projectDomain.updatedAt;
 
   const projectId = props.projectDomain.projectId;
   // const domain
@@ -365,7 +382,7 @@ const DomainItem = (props: {
   const txtRecord = {
     type: "TXT",
     host: txtEntryName,
-    value: props.projectDomain.txtRecord,
+    value: props.projectDomain.expectedTxtRecord,
     ttl: 300,
   } as const;
 
@@ -589,9 +606,9 @@ export const Domains = ({
     <>
       {domains.map((projectDomain) => (
         <DomainItem
-          key={projectDomain.domain.domain}
+          key={projectDomain.domain}
           projectDomain={projectDomain}
-          initiallyOpen={newDomains.has(projectDomain.domain.domain)}
+          initiallyOpen={newDomains.has(projectDomain.domain)}
           refreshDomainResult={refreshDomainResult}
           domainState={domainState}
           isPublishing={isPublishing}

apps/builder/app/builder/features/topbar/publish.tsx

@@ -43,10 +43,10 @@ import { validateProjectDomain, type Project } from "@webstudio-is/project";
 import { $authPermit, $project, $publishedOrigin } from "~/shared/nano-states";
 import {
   Domains,
-  getPublishStatusAndText,
   getStatus,
   type Domain,
   PENDING_TIMEOUT,
+  getPublishStatusAndTextNew,
 } from "./domains";
 import { CollapsibleDomainSection } from "./collapsible-domain-section";
 import {
@@ -154,8 +154,8 @@ const ChangeProjectDomain = ({
   };
 
   const { statusText, status } =
-    project.latestBuild != null
-      ? getPublishStatusAndText(project.latestBuild)
+    project.latestBuildVirtual != null
+      ? getPublishStatusAndTextNew(project.latestBuildVirtual)
       : {
           statusText: "Not published",
           status: "PENDING" as const,
@@ -335,7 +335,7 @@ const Publish = ({
               {
                 projectId: project.id,
                 domains: domainsToPublish.map(
-                  (projectDomain) => projectDomain.domain.domain
+                  (projectDomain) => projectDomain.domain
                 ),
                 destination: "saas",
               },
@@ -355,7 +355,10 @@ const Publish = ({
 const getStaticPublishStatusAndText = ({
   updatedAt,
   publishStatus,
-}: Pick<NonNullable<Domain["latestBuid"]>, "updatedAt" | "publishStatus">) => {
+}: {
+  updatedAt: string;
+  publishStatus: string;
+}) => {
   let status = publishStatus;
 
   const delta = Date.now() - new Date(updatedAt).getTime();
@@ -572,13 +575,6 @@ const Content = (props: {
 }) => {
   const [newDomains, setNewDomains] = useState(new Set<string>());
 
-  const {
-    data: domainsResult,
-    load: domainRefresh,
-    state: domainState,
-    error: domainSystemError,
-  } = trpcClient.domain.findMany.useQuery();
-
   const {
     load: projectLoad,
     data: projectData,
@@ -588,40 +584,27 @@ const Content = (props: {
 
   useEffect(() => {
     projectLoad({ projectId: props.projectId });
-    domainRefresh({ projectId: props.projectId });
-  }, [domainRefresh, props.projectId, projectLoad]);
+  }, [props.projectId, projectLoad]);
+
+  projectData?.success;
 
   const domainsToPublish = useMemo(
     () =>
-      domainsResult?.success
-        ? domainsResult.data.filter(
+      projectData?.success
+        ? projectData.project.domainsVirtual.filter(
             (projectDomain) => getStatus(projectDomain) === "VERIFIED_ACTIVE"
           )
         : [],
-    [domainsResult]
+    [projectData]
   );
 
-  const latestBuilds = useMemo(
-    () => [
-      projectData?.success ? (projectData.project.latestBuild ?? null) : null,
-      ...domainsToPublish.map((domain) => domain.latestBuid),
-    ],
-    [domainsToPublish, projectData]
-  );
+  const latestBuildVirtual = projectData?.success
+    ? (projectData.project.latestBuildVirtual ?? undefined)
+    : undefined;
 
-  const hasPendingState = useMemo(
-    () =>
-      latestBuilds.some((latestBuild) => {
-        if (latestBuild === null) {
-          return false;
-        }
-        const { status } = getPublishStatusAndText(latestBuild);
-        if (status === "PENDING") {
-          return true;
-        }
-      }),
-    [latestBuilds]
-  );
+  const hasPendingState = latestBuildVirtual
+    ? getPublishStatusAndTextNew(latestBuildVirtual).status === "PENDING"
+    : false;
 
   const [isPublishing, setIsPublishing] = useState(hasPendingState);
 
@@ -669,31 +652,23 @@ const Content = (props: {
           />
         )}
 
-        {domainsResult?.success === true && (
+        {projectData?.success && (
           <Domains
             newDomains={newDomains}
-            domains={domainsResult.data}
-            refreshDomainResult={domainRefresh}
-            domainState={domainState}
+            domains={projectData.project.domainsVirtual}
+            refreshDomainResult={projectLoad}
+            domainState={projectState}
             isPublishing={isPublishing}
           />
         )}
-
-        {domainSystemError !== undefined && (
-          <ErrorText>{domainSystemError}</ErrorText>
-        )}
-
-        {domainsResult?.success === false && (
-          <ErrorText>{domainsResult.error}</ErrorText>
-        )}
       </ScrollArea>
       <Flex direction="column" justify="end" css={{ height: 0 }}>
         <Separator />
       </Flex>
       <AddDomain
         projectId={props.projectId}
-        refreshDomainResult={domainRefresh}
-        domainState={domainState}
+        refreshDomainResult={projectLoad}
+        domainState={projectState}
         onCreate={(domain) => {
           setNewDomains((prev) => {
             return new Set([...prev, domain]);
@@ -708,7 +683,6 @@ const Content = (props: {
           domainsToPublish={domainsToPublish}
           refresh={() => {
             projectLoad({ projectId: props.projectId });
-            domainRefresh({ projectId: props.projectId });
           }}
           isPublishing={isPublishing}
           setIsPublishing={setIsPublishing}