Make everything as action

Publish no loop

Update

Publishing done

Change Interface

Update exports

Exclude from search

Fix assets for saas

Fix

Fix static publish

Wait until published

Remove local refresh

Fix

Improve

Enable

Fix button types

Fix

Fix publish

Add tooltip support for checkboxes

Add tooltip checkbox

Author: istarkov

apps/builder/app/builder/features/topbar/add-domain.tsx

@@ -7,65 +7,61 @@ import {
   theme,
   Text,
   Grid,
+  toast,
 } from "@webstudio-is/design-system";
 import { validateDomain } from "@webstudio-is/domain";
 import type { Project } from "@webstudio-is/project";
-import { useId, useState } from "react";
+import { useId, useOptimistic, useRef, useState } from "react";
 import { CustomCodeIcon } from "@webstudio-is/icons";
-import { trpcClient } from "~/shared/trpc/trpc-client";
+import { nativeClient } from "~/shared/trpc/trpc-client";
 
 type DomainsAddProps = {
   projectId: Project["id"];
   onCreate: (domain: string) => void;
   onExportClick: () => void;
-  refreshDomainResult: (
-    input: { projectId: Project["id"] },
-    onSuccess: () => void
-  ) => void;
-  domainState: "idle" | "submitting";
-  isPublishing: boolean;
+  refresh: () => Promise<void>;
 };
 
 export const AddDomain = ({
   projectId,
   onCreate,
-  refreshDomainResult,
-  domainState,
-  isPublishing,
+  refresh,
   onExportClick,
 }: DomainsAddProps) => {
   const id = useId();
-  const {
-    send: create,
-    state: сreateState,
-    error: сreateSystemError,
-  } = trpcClient.domain.create.useMutation();
   const [isOpen, setIsOpen] = useState(false);
-  const [domain, setDomain] = useState("");
   const [error, setError] = useState<string>();
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const [isPending, setIsPendingOptimistic] = useOptimistic(false);
 
-  const handleCreate = () => {
-    setError(undefined);
+  const handleCreateDomain = async (formData: FormData) => {
+    // Will be automatically reset on action end
+    setIsPendingOptimistic(true);
 
+    const domain = formData.get("domain")?.toString() ?? "";
     const validationResult = validateDomain(domain);
 
     if (validationResult.success === false) {
       setError(validationResult.error);
       return;
     }
 
-    create({ domain: validationResult.domain, projectId }, (data) => {
-      if (data.success === false) {
-        setError(data.error);
-        return;
-      }
-
-      refreshDomainResult({ projectId }, () => {
-        setDomain("");
-        setIsOpen(false);
-        onCreate(validationResult.domain);
-      });
+    const result = await nativeClient.domain.create.mutate({
+      domain,
+      projectId,
     });
+
+    if (result.success === false) {
+      toast.error(result.error);
+      setError(result.error);
+      return;
+    }
+
+    onCreate(domain);
+
+    await refresh();
+
+    setIsOpen(false);
   };
 
   return (
@@ -81,7 +77,6 @@ export const AddDomain = ({
         direction={"column"}
         onKeyDown={(event) => {
           if (event.key === "Escape") {
-            setDomain("");
             setIsOpen(false);
             event.preventDefault();
           }
@@ -94,56 +89,43 @@ export const AddDomain = ({
             </Label>
             <InputField
               id={id}
+              name="domain"
               autoFocus
               placeholder="your-domain.com"
-              value={domain}
-              disabled={
-                isPublishing || сreateState !== "idle" || domainState !== "idle"
-              }
+              disabled={isPending}
               onKeyDown={(event) => {
                 if (event.key === "Enter") {
-                  handleCreate();
+                  buttonRef.current
+                    ?.closest("form")
+                    ?.requestSubmit(buttonRef.current);
                 }
                 if (event.key === "Escape") {
-                  setDomain("");
                   setIsOpen(false);
                   event.preventDefault();
                 }
               }}
-              onChange={(event) => {
-                setError(undefined);
-                setDomain(event.target.value);
-              }}
               color={error !== undefined ? "error" : undefined}
             />
             {error !== undefined && (
               <>
                 <Text color="destructive">{error}</Text>
               </>
             )}
-            {сreateSystemError !== undefined && (
-              <>
-                {/* Something happened with network, api etc */}
-                <Text color="destructive">{сreateSystemError}</Text>
-                <Text color="subtle">Please try again later</Text>
-              </>
-            )}
           </>
         )}
 
         <Grid gap={2} columns={2}>
           <Button
-            disabled={
-              isPublishing || сreateState !== "idle" || domainState !== "idle"
-            }
+            ref={buttonRef}
+            formAction={handleCreateDomain}
+            state={isPending ? "pending" : undefined}
             color={isOpen ? "primary" : "neutral"}
-            onClick={() => {
+            onClick={(event) => {
               if (isOpen === false) {
                 setIsOpen(true);
+                event.preventDefault();
                 return;
               }
-
-              handleCreate();
             }}
           >
             {isOpen ? "Add domain" : "Add a new domain"}
@@ -152,6 +134,7 @@ export const AddDomain = ({
           <Button
             color={"dark"}
             prefix={<CustomCodeIcon />}
+            type="button"
             onClick={onExportClick}
           >
             Export

apps/builder/app/builder/features/topbar/collapsible-domain-section.tsx

@@ -4,6 +4,7 @@ import {
   Label,
   theme,
   SectionTitle,
+  Grid,
 } from "@webstudio-is/design-system";
 import { useEffect, useRef, useState, type ReactNode } from "react";
 import { CollapsibleSectionRoot } from "~/builder/shared/collapsible-section";
@@ -13,9 +14,11 @@ export const CollapsibleDomainSection = ({
   children,
   title,
   suffix,
+  prefix,
 }: {
   initiallyOpen?: boolean;
   children: ReactNode;
+  prefix: ReactNode;
   suffix: ReactNode;
   title: string;
 }) => {
@@ -53,7 +56,10 @@ export const CollapsibleDomainSection = ({
             </Box>
           }
         >
-          <Label truncate>{title}</Label>
+          <Grid flow={"column"} align="center" justify={"start"}>
+            {prefix}
+            <Label truncate>{title}</Label>
+          </Grid>
         </SectionTitle>
       }
     >

apps/builder/app/builder/features/topbar/domain-checkbox.tsx

@@ -0,0 +1,69 @@
+import { useStore } from "@nanostores/react";
+import {
+  Flex,
+  Tooltip,
+  Text,
+  theme,
+  Link,
+  buttonStyle,
+  Checkbox,
+} from "@webstudio-is/design-system";
+import { $userPlanFeatures } from "~/builder/shared/nano-states";
+
+export const domainToPublishName = "domainToPublish[]";
+
+interface DomainCheckboxProps {
+  defaultChecked?: boolean;
+  domain: string;
+  buildId: string | undefined;
+  disabled?: boolean;
+}
+
+const DomainCheckbox = (props: DomainCheckboxProps) => {
+  const hasProPlan = useStore($userPlanFeatures).hasProPlan;
+
+  const tooltipContentForFreeUsers = hasProPlan ? undefined : (
+    <Flex direction="column" gap="2" css={{ maxWidth: theme.spacing[28] }}>
+      <Text variant="titles">Publish to Staging</Text>
+      <Text>
+        <Flex direction="column">
+          Staging allows you to preview a production version of your site
+          without potentially breaking what production site visitors will see.
+          <>
+            <br />
+            <br />
+            Upgrade to Pro to be able to publish to each domain individually.
+            <br /> <br />
+            <Link
+              className={buttonStyle({ color: "gradient" })}
+              color="contrast"
+              underline="none"
+              href="https://webstudio.is/pricing"
+              target="_blank"
+            >
+              Upgrade
+            </Link>
+          </>
+        </Flex>
+      </Text>
+    </Flex>
+  );
+
+  const defaultChecked = hasProPlan ? props.defaultChecked : true;
+  const disabled = hasProPlan ? props.disabled : true;
+
+  return (
+    <Tooltip content={tooltipContentForFreeUsers} variant="wrapped">
+      <Checkbox
+        disabled={disabled}
+        key={props.buildId ?? "-"}
+        defaultChecked={defaultChecked}
+        css={{ pointerEvents: "all" }}
+        name={domainToPublishName}
+        value={props.domain}
+      />
+    </Tooltip>
+  );
+};
+
+export default DomainCheckbox;