feat: Add Content Editor share permission (#4421)

istarkov · web-flow · commit c3ca454e1f68 · 2024-11-15T13:59:28.000+04:00
## Description Part 2 Of #3994 Hidden under flag <img width="360" alt="image" src="https://github.com/user-attachments/assets/59cf859a-3325-425b-b06e-31b74bd93df4"> <img width="350" alt="image" src="https://github.com/user-attachments/assets/dca8521c-5e2b-4e4f-893f-df416cea0481"> Links with `?mode=content` from free plan should not work <img width="626" alt="image" src="https://github.com/user-attachments/assets/d737474d-8110-42a1-98fd-2ab94ed24cde"> Content edit shared links have no design mode <img width="421" alt="image" src="https://github.com/user-attachments/assets/42ee3d4b-7aab-4e2c-9e28-b5b0fe6c58af"> ## 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
diff --git a/apps/builder/app/builder/builder.tsx b/apps/builder/app/builder/builder.tsx
@@ -31,6 +31,7 @@ import {
   $textEditingInstanceSelector,
   $isDesignMode,
   $isContentMode,
+  $userPlanFeatures,
 } from "~/shared/nano-states";
 import { $settings, type Settings } from "./shared/client-settings";
 import { builderUrl, getCanvasUrl } from "~/shared/router-utils";
@@ -46,7 +47,6 @@ import {
   $dataLoadingState,
   $isCloneDialogOpen,
   $loadingState,
-  $userPlanFeatures,
   type SidebarPanelName,
 } from "./shared/nano-states";
 import { CloneProjectDialog } from "~/shared/clone-project";
diff --git a/apps/builder/app/builder/features/pages/page-settings.tsx b/apps/builder/app/builder/features/pages/page-settings.tsx
@@ -75,6 +75,7 @@ import {
   $dataSourceVariables,
   $publishedOrigin,
   $project,
+  $userPlanFeatures,
 } from "~/shared/nano-states";
 import {
   BindingControl,
@@ -103,7 +104,6 @@ import {
   isPathAvailable,
 } from "./page-utils";
 import { Form } from "./form";
-import { $userPlanFeatures } from "~/builder/shared/nano-states";
 import type { UserPlanFeatures } from "~/shared/db/user-plan-features.server";
 import { useUnmount } from "~/shared/hook-utils/use-mount";
 import { Card } from "../marketplace/card";
diff --git a/apps/builder/app/builder/features/project-settings/section-general.tsx b/apps/builder/app/builder/features/project-settings/section-general.tsx
@@ -20,11 +20,15 @@ import { InfoCircleIcon } from "@webstudio-is/icons";
 import { ImageControl } from "./image-control";
 import { Image } from "@webstudio-is/image";
 import type { ProjectMeta } from "@webstudio-is/sdk";
-import { $assets, $imageLoader, $pages } from "~/shared/nano-states";
+import {
+  $assets,
+  $imageLoader,
+  $pages,
+  $userPlanFeatures,
+} from "~/shared/nano-states";
 import { serverSyncStore } from "~/shared/sync";
 import { sectionSpacing } from "./utils";
 import { CodeEditor } from "~/builder/shared/code-editor";
-import { $userPlanFeatures } from "~/builder/shared/nano-states";
 
 const imgStyle = css({
   objectFit: "contain",
diff --git a/apps/builder/app/builder/features/settings-panel/settings-panel.tsx b/apps/builder/app/builder/features/settings-panel/settings-panel.tsx
@@ -13,9 +13,8 @@ import {
 } from "@webstudio-is/design-system";
 import { UpgradeIcon } from "@webstudio-is/icons";
 import { useStore } from "@nanostores/react";
-import { $userPlanFeatures } from "~/builder/shared/nano-states";
 import cmsUpgradeBanner from "./cms-upgrade-banner.svg?url";
-import { $isDesignMode } from "~/shared/nano-states";
+import { $isDesignMode, $userPlanFeatures } from "~/shared/nano-states";
 
 export const SettingsPanelContainer = ({
   selectedInstance,
diff --git a/apps/builder/app/builder/features/settings-panel/variable-popover.tsx b/apps/builder/app/builder/features/settings-panel/variable-popover.tsx
@@ -54,9 +54,10 @@ import {
   $areResourcesLoading,
   invalidateResource,
   getComputedResource,
+  $userPlanFeatures,
 } from "~/shared/nano-states";
 import { serverSyncStore } from "~/shared/sync";
-import { $userPlanFeatures } from "~/builder/shared/nano-states";
+
 import { BindingPopoverProvider } from "~/builder/shared/binding-popover";
 import { useSideOffset } from "~/builder/shared/floating-panel";
 import {
diff --git a/apps/builder/app/builder/features/settings-panel/variables-section.stories.tsx b/apps/builder/app/builder/features/settings-panel/variables-section.stories.tsx
@@ -1,9 +1,8 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { Box } from "@webstudio-is/design-system";
 import { createDefaultPages } from "@webstudio-is/project-build";
-import { $pages, $instances } from "~/shared/nano-states";
+import { $pages, $instances, $userPlanFeatures } from "~/shared/nano-states";
 import { registerContainers } from "~/shared/sync";
-import { $userPlanFeatures } from "~/builder/shared/nano-states";
 import { $awareness } from "~/shared/awareness";
 import { VariablesSection as VariablesSectionComponent } from "./variables-section";
 
diff --git a/apps/builder/app/builder/features/topbar/domain-checkbox.tsx b/apps/builder/app/builder/features/topbar/domain-checkbox.tsx
@@ -8,8 +8,8 @@ import {
   buttonStyle,
   Checkbox,
 } from "@webstudio-is/design-system";
-import { $userPlanFeatures } from "~/builder/shared/nano-states";
-import { $project } from "~/shared/nano-states";
+
+import { $project, $userPlanFeatures } from "~/shared/nano-states";
 
 export const domainToPublishName = "domainToPublish[]";
 
diff --git a/apps/builder/app/builder/features/topbar/menu/menu.tsx b/apps/builder/app/builder/features/topbar/menu/menu.tsx
@@ -16,7 +16,6 @@ import {
   menuItemCss,
 } from "@webstudio-is/design-system";
 import {
-  $userPlanFeatures,
   $isCloneDialogOpen,
   $isShareDialogOpen,
   $isPublishDialogOpen,
@@ -26,6 +25,7 @@ import {
   $authPermit,
   $authToken,
   $authTokenPermissions,
+  $userPlanFeatures,
 } from "~/shared/nano-states";
 import { emitCommand } from "~/builder/shared/commands";
 import { MenuButton } from "./menu-button";
diff --git a/apps/builder/app/builder/features/topbar/publish.tsx b/apps/builder/app/builder/features/topbar/publish.tsx
@@ -35,12 +35,14 @@ import {
   RadioGroup,
 } from "@webstudio-is/design-system";
 import stripIndent from "strip-indent";
+import { $isPublishDialogOpen } from "../../shared/nano-states";
+import { validateProjectDomain, type Project } from "@webstudio-is/project";
 import {
-  $isPublishDialogOpen,
+  $authPermit,
+  $project,
+  $publishedOrigin,
   $userPlanFeatures,
-} from "../../shared/nano-states";
-import { validateProjectDomain, type Project } from "@webstudio-is/project";
-import { $authPermit, $project, $publishedOrigin } from "~/shared/nano-states";
+} from "~/shared/nano-states";
 import { Domains, PENDING_TIMEOUT, getPublishStatusAndText } from "./domains";
 import { CollapsibleDomainSection } from "./collapsible-domain-section";
 import {
diff --git a/apps/builder/app/builder/shared/commands.ts b/apps/builder/app/builder/shared/commands.ts
@@ -6,6 +6,8 @@ import {
   $textEditingInstanceSelector,
   $builderMode,
   $isDesignMode,
+  $isDesignModeAllowed,
+  setBuilderMode,
 } from "~/shared/nano-states";
 import {
   $breakpointsMenuView,
@@ -131,10 +133,15 @@ export const { emitCommand, subscribeCommands } = createCommandsEmitter({
       handler: () => {
         setActiveSidebarPanel("auto");
 
+        // @todo: This is temporary until we have a combo to switch modes
         if ($builderMode.get() === "preview") {
-          $builderMode.set("design");
+          if ($isDesignModeAllowed.get()) {
+            setBuilderMode("design");
+          } else {
+            setBuilderMode("content");
+          }
         } else {
-          $builderMode.set("preview");
+          setBuilderMode("preview");
         }
       },
     },
@@ -144,10 +151,15 @@ export const { emitCommand, subscribeCommands } = createCommandsEmitter({
       handler: () => {
         setActiveSidebarPanel("auto");
 
+        // @todo: This is temporary until we have a combo to switch modes
         if ($builderMode.get() === "content") {
-          $builderMode.set("design");
+          if ($isDesignModeAllowed.get()) {
+            setBuilderMode("design");
+          } else {
+            setBuilderMode("preview");
+          }
         } else {
-          $builderMode.set("content");
+          setBuilderMode("content");
         }
       },
     },
diff --git a/apps/builder/app/builder/shared/nano-states/index.ts b/apps/builder/app/builder/shared/nano-states/index.ts
@@ -1,5 +1,4 @@
 import { atom, computed } from "nanostores";
-import type { UserPlanFeatures } from "~/shared/db/user-plan-features.server";
 import {
   $isPreviewMode,
   $selectedInstanceRenderState,
@@ -37,16 +36,6 @@ export const $scale = computed(
 
 export const $activeInspectorPanel = atom<"style" | "settings">("style");
 
-// keep in sync with user-plan-features.server
-export const $userPlanFeatures = atom<UserPlanFeatures>({
-  allowShareAdminLinks: false,
-  allowDynamicData: false,
-  maxContactEmails: 0,
-  maxDomainsAllowedPerUser: 1,
-  hasSubscription: false,
-  hasProPlan: false,
-});
-
 export const $dataLoadingState = atom<"idle" | "loading" | "loaded">("idle");
 
 export const $loadingState = computed(
diff --git a/apps/builder/app/routes/_ui.(builder).tsx b/apps/builder/app/routes/_ui.(builder).tsx
@@ -134,7 +134,7 @@ export const loader = async (loaderArgs: LoaderFunctionArgs) => {
           projectId: project.id,
           // At this point we already knew that if project loaded we have at least "view" permit
           // having that getProjectPermit is heavy operation we can skip check "view" permit
-          permits: ["own", "admin", "build"] as const,
+          permits: ["own", "admin", "build", "edit"] as const,
         },
         context
       )) ?? "view";
diff --git a/apps/builder/app/routes/rest.patch.ts b/apps/builder/app/routes/rest.patch.ts
@@ -119,17 +119,23 @@ export const action = async ({
       };
     }
 
-    const canEdit = await authorizeProject.hasProjectPermit(
-      { projectId, permit: "edit" },
-      context
-    );
-    if (canEdit === false) {
+    const [canEditContent, canEdit] = await Promise.all([
+      authorizeProject.hasProjectPermit({ projectId, permit: "edit" }, context),
+      authorizeProject.hasProjectPermit(
+        { projectId, permit: "build" },
+        context
+      ),
+    ]);
+
+    if (canEditContent === false) {
       return {
         status: "authorization_error",
         errors: "You don't have permission to edit this project.",
       };
     }
 
+    const isContentEditMode = canEditContent && !canEdit;
+
     const build = await loadRawBuildById(context, buildId);
 
     const serverVersion = build.version;
@@ -209,6 +215,29 @@ export const action = async ({
           continue;
         }
 
+        if (namespace === "props") {
+          const props = buildData.props ?? parseData<Prop>(build.props);
+          buildData.props = applyPatches(props, patches);
+          continue;
+        }
+
+        if (namespace === "assets") {
+          // assets implements own patching
+          // @todo parallelize the updates
+          // currently not possible because we fetch the entire tree
+          // and parallelized updates will cause unpredictable side effects
+          await patchAssets({ projectId }, patches, context);
+          continue;
+        }
+
+        // This is super simple and naive implementation of permissions checks for Content Edit mode
+        if (isContentEditMode) {
+          return {
+            status: "error",
+            errors: `You don't have permission to patch namespace ${namespace}`,
+          };
+        }
+
         if (namespace === "styleSourceSelections") {
           const styleSourceSelections =
             buildData.styleSourceSelections ??
@@ -239,12 +268,6 @@ export const action = async ({
           continue;
         }
 
-        if (namespace === "props") {
-          const props = buildData.props ?? parseData<Prop>(build.props);
-          buildData.props = applyPatches(props, patches);
-          continue;
-        }
-
         if (namespace === "dataSources") {
           const dataSources =
             buildData.dataSources ?? parseData<DataSource>(build.dataSources);
@@ -266,15 +289,6 @@ export const action = async ({
           continue;
         }
 
-        if (namespace === "assets") {
-          // assets implements own patching
-          // @todo parallelize the updates
-          // currently not possible because we fetch the entire tree
-          // and parallelized updates will cause unpredictable side effects
-          await patchAssets({ projectId }, patches, context);
-          continue;
-        }
-
         if (namespace === "marketplaceProduct") {
           const marketplaceProduct =
             buildData.marketplaceProduct ??
diff --git a/apps/builder/app/shared/nano-states/misc.ts b/apps/builder/app/shared/nano-states/misc.ts
@@ -1,7 +1,7 @@
 import { atom, computed, onSet } from "nanostores";
 import { nanoid } from "nanoid";
 import type { AuthPermit } from "@webstudio-is/trpc-interface/index.server";
-import type { Placement } from "@webstudio-is/design-system";
+import { toast, type Placement } from "@webstudio-is/design-system";
 import type {
   Assets,
   DataSources,
@@ -29,6 +29,7 @@ import type { Simplify } from "type-fest";
 import type { AssetType } from "@webstudio-is/asset-uploader";
 import type { ChildrenOrientation } from "node_modules/@webstudio-is/design-system/src/components/primitives/dnd/geometry-utils";
 import { $selectedInstance } from "../awareness";
+import type { UserPlanFeatures } from "../db/user-plan-features.server";
 
 export const $project = atom<Project | undefined>();
 
@@ -297,6 +298,16 @@ export const $hoveredInstanceSelector = atom<undefined | InstanceSelector>(
   undefined
 );
 
+// keep in sync with user-plan-features.server
+export const $userPlanFeatures = atom<UserPlanFeatures>({
+  allowShareAdminLinks: false,
+  allowDynamicData: false,
+  maxContactEmails: 0,
+  maxDomainsAllowedPerUser: 1,
+  hasSubscription: false,
+  hasProPlan: false,
+});
+
 const builderModes = ["design", "preview", "content"] as const;
 export type BuilderMode = (typeof builderModes)[number];
 export const isBuilderMode = (mode: string | null): mode is BuilderMode =>
@@ -324,6 +335,57 @@ export const $authTokenPermissions = atom<TokenPermissions>({
 
 export const $authToken = atom<string | undefined>(undefined);
 
+export const $isContentModeAllowed = computed(
+  [$authToken, $userPlanFeatures],
+  (token, userPlanFeatures) => {
+    // In own projects, everyone can edit content
+    if (token === undefined) {
+      return true;
+    }
+
+    // In shared projects, only Pro users can share editable links, so check the plan features of the user who shared the link
+    return userPlanFeatures.hasProPlan === true;
+  }
+);
+
+export const $isDesignModeAllowed = computed([$authPermit], (authPermit) => {
+  return authPermit !== "edit";
+});
+
+export const setBuilderMode = (mode: BuilderMode | null) => {
+  const authPermit = $authPermit.get();
+
+  if (mode === "content" && !$isContentModeAllowed.get()) {
+    // This is content link from a non pro user, we don't allow content mode for such links
+    toast.error(
+      "Content mode is not available for this link. The link’s author must have a Pro plan."
+    );
+
+    $builderMode.set("preview");
+    return;
+  }
+
+  if (mode === "design" && !$isDesignModeAllowed.get()) {
+    toast.error("Design mode is not available for content edit links.");
+
+    $builderMode.set("content");
+    return;
+  }
+
+  if (authPermit === "view") {
+    $builderMode.set(mode ?? "preview");
+    return;
+  }
+
+  const defaultMode = $isDesignModeAllowed.get()
+    ? "design"
+    : $isContentModeAllowed.get()
+      ? "content"
+      : "preview";
+
+  $builderMode.set(mode ?? defaultMode);
+};
+
 export const $toastErrors = atom<string[]>([]);
 
 export type ItemDropTarget = {
diff --git a/apps/builder/app/shared/pages/use-switch-page.ts b/apps/builder/app/shared/pages/use-switch-page.ts
diff --git a/apps/builder/app/shared/router-utils/path-utils.ts b/apps/builder/app/shared/router-utils/path-utils.ts
diff --git a/apps/builder/app/shared/share-project/share-project.tsx b/apps/builder/app/shared/share-project/share-project.tsx
diff --git a/packages/authorization-token/package.json b/packages/authorization-token/package.json
diff --git a/packages/authorization-token/src/trpc/authorization-tokens-router.ts b/packages/authorization-token/src/trpc/authorization-tokens-router.ts
diff --git a/packages/trpc-interface/src/authorize/project.server.ts b/packages/trpc-interface/src/authorize/project.server.ts
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
