feat: Add "can publish" to content editors (#4530)

## Description

ref #3994

<img width="409" alt="image"
src="https://github.com/user-attachments/assets/fb00f25b-cf29-4374-8d7d-39fcec26eb9c">


## 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:
0000)
- [ ] 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

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

@@ -38,7 +38,7 @@ import stripIndent from "strip-indent";
 import { $isPublishDialogOpen } from "../../shared/nano-states";
 import { validateProjectDomain, type Project } from "@webstudio-is/project";
 import {
-  $authPermit,
+  $authTokenPermissions,
   $project,
   $publishedOrigin,
   $userPlanFeatures,
@@ -837,16 +837,16 @@ type PublishProps = {
 
 export const PublishButton = ({ projectId }: PublishProps) => {
   const isPublishDialogOpen = useStore($isPublishDialogOpen);
-  const authPermit = useStore($authPermit);
+  const authTokenPermissions = useStore($authTokenPermissions);
   const [dialogContentType, setDialogContentType] = useState<
     "publish" | "export"
   >("publish");
 
-  const isPublishEnabled = authPermit === "own" || authPermit === "admin";
+  const isPublishEnabled = authTokenPermissions.canPublish;
 
   const tooltipContent = isPublishEnabled
     ? undefined
-    : "Only owner or admin can publish projects";
+    : "Only the owner, an admin, or content editors with publish permissions can publish projects";
 
   const handleExportClick = () => {
     setDialogContentType("export");

apps/builder/app/shared/nano-states/misc.ts

@@ -331,6 +331,7 @@ export const $authPermit = atom<AuthPermit>("view");
 export const $authTokenPermissions = atom<TokenPermissions>({
   canClone: true,
   canCopy: true,
+  canPublish: false,
 });
 
 export const $authToken = atom<string | undefined>(undefined);

apps/builder/app/shared/share-project/share-project.stories.tsx

@@ -19,20 +19,23 @@ const initialLinks: Array<LinkOptions> = [
     relation: "viewers",
     canClone: false,
     canCopy: false,
+    canPublish: false,
   },
   {
     token: crypto.randomUUID(),
     name: "View and Edit",
     relation: "editors",
     canClone: false,
     canCopy: false,
+    canPublish: false,
   },
   {
     token: crypto.randomUUID(),
     name: "Build",
     relation: "builders",
     canClone: false,
     canCopy: false,
+    canPublish: false,
   },
 ];
 
@@ -63,6 +66,7 @@ const useShareProject = (
         relation: "viewers",
         canClone: false,
         canCopy: false,
+        canPublish: false,
       },
     ]);
   };

apps/builder/app/shared/share-project/share-project.tsx

@@ -94,7 +94,7 @@ type MenuProps = {
 };
 
 const Menu = ({ name, hasProPlan, value, onChange, onDelete }: MenuProps) => {
-  const ids = useIds(["name", "canClone", "canCopy"]);
+  const ids = useIds(["name", "canClone", "canCopy", "canPublish"]);
   const [isOpen, setIsOpen] = useState(false);
   const [customLinkName, setCustomLinkName] = useState<string>(name);
 
@@ -234,36 +234,71 @@ const Menu = ({ name, hasProPlan, value, onChange, onDelete }: MenuProps) => {
           </Grid>
 
           {isFeatureEnabled("contentEditableMode") && (
-            <Permission
-              disabled={hasProPlan !== true}
-              onCheckedChange={handleCheckedChange("editors")}
-              checked={value.relation === "editors"}
-              title="Content"
-              info={
-                <Flex direction="column">
-                  Recipients can edit content only, such as text, images, and
-                  predefined components.
-                  {hasProPlan !== true && (
-                    <>
-                      <br />
-                      <br />
-                      Upgrade to a Pro account to share with Content Edit
-                      permissions.
-                      <br /> <br />
-                      <Link
-                        className={buttonStyle({ color: "gradient" })}
-                        color="contrast"
-                        underline="none"
-                        href="https://webstudio.is/pricing"
-                        target="_blank"
-                      >
-                        Upgrade
-                      </Link>
-                    </>
-                  )}
-                </Flex>
-              }
-            />
+            <>
+              <Permission
+                disabled={hasProPlan !== true}
+                onCheckedChange={handleCheckedChange("editors")}
+                checked={value.relation === "editors"}
+                title="Content"
+                info={
+                  <Flex direction="column">
+                    Recipients can edit content only, such as text, images, and
+                    predefined components.
+                    {hasProPlan !== true && (
+                      <>
+                        <br />
+                        <br />
+                        Upgrade to a Pro account to share with Content Edit
+                        permissions.
+                        <br /> <br />
+                        <Link
+                          className={buttonStyle({ color: "gradient" })}
+                          color="contrast"
+                          underline="none"
+                          href="https://webstudio.is/pricing"
+                          target="_blank"
+                        >
+                          Upgrade
+                        </Link>
+                      </>
+                    )}
+                  </Flex>
+                }
+              />
+              <Grid
+                css={{
+                  ml: theme.spacing[6],
+                }}
+              >
+                <Grid
+                  gap={1}
+                  flow={"column"}
+                  css={{
+                    alignItems: "center",
+                    justifyContent: "start",
+                  }}
+                >
+                  <Checkbox
+                    disabled={
+                      hasProPlan !== true || value.relation !== "editors"
+                    }
+                    checked={value.canPublish}
+                    onCheckedChange={(canPublish) => {
+                      onChange({ ...value, canPublish: Boolean(canPublish) });
+                    }}
+                    id={ids.canPublish}
+                  />
+                  <Label
+                    htmlFor={ids.canPublish}
+                    disabled={
+                      hasProPlan !== true || value.relation !== "editors"
+                    }
+                  >
+                    Can publish
+                  </Label>
+                </Grid>
+              </Grid>
+            </>
           )}
 
           <Permission
@@ -336,6 +371,7 @@ export type LinkOptions = {
   relation: Relation;
   canCopy: boolean;
   canClone: boolean;
+  canPublish: boolean;
 };
 
 type SharedLinkItemType = {

packages/authorization-token/src/db/authorization-token.ts

@@ -11,15 +11,42 @@ type AuthorizationToken =
 const applyTokenPermissions = (
   token: AuthorizationToken
 ): AuthorizationToken => {
+  let result = token;
+
+  // @todo: fix this on SQL level
   if (token.relation !== "viewers") {
-    return {
-      ...token,
+    result = {
+      ...result,
       canClone: true,
       canCopy: true,
     };
   }
 
-  return token;
+  // @todo: fix this on SQL level
+  if (token.relation === "viewers") {
+    result = {
+      ...result,
+      canPublish: false,
+    };
+  }
+
+  // @todo: fix this on SQL level
+  if (token.relation === "builders") {
+    result = {
+      ...result,
+      canPublish: false,
+    };
+  }
+
+  // @todo: fix this on SQL level
+  if (token.relation === "administrators") {
+    result = {
+      ...result,
+      canPublish: true,
+    };
+  }
+
+  return result;
 };
 
 export const findMany = async (
@@ -55,6 +82,7 @@ export const findMany = async (
 export const tokenDefaultPermissions = {
   canClone: true,
   canCopy: true,
+  canPublish: true,
 };
 
 export type TokenPermissions = typeof tokenDefaultPermissions;
@@ -89,6 +117,7 @@ export const getTokenPermissions = async (
   return {
     canClone: dbToken.canClone,
     canCopy: dbToken.canCopy,
+    canPublish: dbToken.canPublish,
   };
 };
 
@@ -168,6 +197,7 @@ export const update = async (
       relation: props.relation,
       canClone: props.canClone,
       canCopy: props.canCopy,
+      canPublish: props.canPublish,
     })
     .eq("projectId", projectId)
     .eq("token", props.token)

packages/authorization-token/src/trpc/authorization-tokens-router.ts

@@ -68,6 +68,7 @@ export const authorizationTokenRouter = router({
         relation: TokenProjectRelation,
         canClone: z.boolean(),
         canCopy: z.boolean(),
+        canPublish: z.boolean(),
       })
     )
     .mutation(async ({ input, ctx }) => {
@@ -77,6 +78,7 @@ export const authorizationTokenRouter = router({
           token: input.token,
           name: input.name,
           relation: input.relation,
+          canPublish: input.canPublish,
           canClone: input.canClone,
           canCopy: input.canCopy,
         },