Merge remote-tracking branch 'upstream/main' into fix-4729

Author: victorchrollo14

apps/builder/app/builder/features/address-bar.stories.tsx

@@ -1,31 +1,15 @@
-import { computed } from "nanostores";
 import { useStore } from "@nanostores/react";
 import type { Meta, StoryFn } from "@storybook/react";
 import { Box, Text, theme } from "@webstudio-is/design-system";
 import { AddressBarPopover } from "./address-bar";
-import {
-  $dataSourceVariables,
-  $dataSources,
-  $pages,
-} from "~/shared/nano-states";
+import { $dataSources, $pages } from "~/shared/nano-states";
 import { registerContainers } from "~/shared/sync";
 import { $awareness, $selectedPage } from "~/shared/awareness";
+import { $currentSystem } from "~/shared/system";
 
 registerContainers();
 
-$dataSources.set(
-  new Map([
-    [
-      "systemId",
-      {
-        id: "systemId",
-        scopeInstanceId: "rootInstanceId",
-        name: "system",
-        type: "parameter",
-      },
-    ],
-  ])
-);
+$dataSources.set(new Map());
 
 $pages.set({
   folders: [
@@ -43,7 +27,6 @@ $pages.set({
     title: "",
     meta: {},
     rootInstanceId: "",
-    systemDataSourceId: "",
   },
   pages: [
     {
@@ -53,40 +36,24 @@ $pages.set({
       title: "",
       meta: {},
       rootInstanceId: "rootInstanceId",
-      systemDataSourceId: "systemId",
     },
   ],
 });
 
-const $selectedPageSystem = computed(
-  [$selectedPage, $dataSourceVariables],
-  (selectedPage, dataSourceVariables) => {
-    if (selectedPage?.systemDataSourceId === undefined) {
-      return {};
-    }
-    return dataSourceVariables.get(selectedPage.systemDataSourceId);
-  }
-);
-
 const SystemInspect = () => {
-  const system = useStore($selectedPageSystem);
+  const system = useStore($currentSystem);
   return (
     <Text variant="mono" css={{ whiteSpace: "pre" }}>
       {JSON.stringify(system, null, 2)}
     </Text>
   );
 };
 
-const $selectedPageHistory = computed(
-  $selectedPage,
-  (page) => page?.history ?? []
-);
-
 const HistoryInspect = () => {
-  const history = useStore($selectedPageHistory);
+  const page = useStore($selectedPage);
   return (
     <Text variant="mono" css={{ whiteSpace: "pre" }}>
-      {JSON.stringify(history, null, 2)}
+      {JSON.stringify(page?.history, null, 2)}
     </Text>
   );
 };

apps/builder/app/builder/features/address-bar.tsx

@@ -31,23 +31,16 @@ import {
   findParentFolderByChildId,
   ROOT_FOLDER_ID,
   getPagePath,
-  type System,
 } from "@webstudio-is/sdk";
-import {
-  $dataSourceVariables,
-  $pages,
-  $publishedOrigin,
-  $selectedPageDefaultSystem,
-  updateSystem,
-} from "~/shared/nano-states";
+import { $pages, $publishedOrigin } from "~/shared/nano-states";
 import {
   compilePathnamePattern,
   isPathnamePattern,
   matchPathnamePattern,
   tokenizePathnamePattern,
 } from "~/builder/shared/url-pattern";
-import { savePathInHistory } from "~/shared/pages";
 import { $selectedPage } from "~/shared/awareness";
+import { $currentSystem, updateCurrentSystem } from "~/shared/system";
 
 const $selectedPagePath = computed([$selectedPage, $pages], (page, pages) => {
   if (pages === undefined || page === undefined) {
@@ -62,19 +55,6 @@ const $selectedPagePath = computed([$selectedPage, $pages], (page, pages) => {
     .replace(/\/+/g, "/");
 });
 
-const $selectedPagePathParams = computed(
-  [$selectedPageDefaultSystem, $selectedPage, $dataSourceVariables],
-  (defaultSystem, selectedPage, dataSourceVariables) => {
-    if (selectedPage?.systemDataSourceId === undefined) {
-      return defaultSystem.params;
-    }
-    const system = dataSourceVariables.get(selectedPage.systemDataSourceId) as
-      | undefined
-      | System;
-    return system?.params ?? defaultSystem.params;
-  }
-);
-
 const $selectedPageHistory = computed(
   $selectedPage,
   (page) => page?.history ?? []
@@ -278,7 +258,7 @@ const AddressBar = forwardRef<
     return history.filter((item) => matchPathnamePattern(path, item));
   }, [history, path]);
   const [pathParams, setPathParams] = useState(
-    () => $selectedPagePathParams.get() ?? {}
+    () => $currentSystem.get().params
   );
   const tokens = tokenizePathnamePattern(path);
   const compiledPath = compilePathnamePattern(tokens, pathParams);
@@ -307,26 +287,11 @@ const AddressBar = forwardRef<
   return (
     <form
       ref={mergeRefs(ref, containerRef)}
-      style={{ position: "relative" }}
       onSubmit={(event) => {
         event.preventDefault();
         const formData = new FormData(event.currentTarget);
-        const path = $selectedPagePath.get();
-        const tokens = tokenizePathnamePattern(path);
-        // delete stale fields
-        const newParams: Record<string, string> = {};
-        for (const token of tokens) {
-          if (token.type === "param") {
-            newParams[token.name] = String(formData.get(token.name) ?? "");
-          }
-        }
-        const page = $selectedPage.get();
-        if (page === undefined) {
-          return;
-        }
-        updateSystem(page, { params: newParams });
-        const compiledPath = compilePathnamePattern(tokens, newParams);
-        savePathInHistory(page.id, compiledPath);
+        const params = Object.fromEntries(formData) as Record<string, string>;
+        updateCurrentSystem({ params });
         if (errors.size === 0) {
           onSubmit();
         }
@@ -357,6 +322,7 @@ const AddressBar = forwardRef<
                     key={index}
                     name={token.name}
                     fieldSizing="content"
+                    autoComplete="off"
                     css={{ minWidth: theme.spacing[15] }}
                     color={errors.has(token.name) ? "error" : undefined}
                     placeholder={token.name}

apps/builder/app/builder/features/command-panel/command-panel.stories.tsx

@@ -40,16 +40,12 @@ $breakpoints.set(
   )
 );
 
-const pages = createDefaultPages({
-  rootInstanceId: "",
-  systemDataSourceId: "",
-});
+const pages = createDefaultPages({ rootInstanceId: "" });
 pages.pages.push({
   id: "page2",
   path: "",
   name: "Second Page",
   rootInstanceId: "",
-  systemDataSourceId: "",
   title: "",
   meta: {},
 });
@@ -58,7 +54,6 @@ pages.pages.push({
   path: "",
   name: "Thrid Page",
   rootInstanceId: "",
-  systemDataSourceId: "",
   title: "",
   meta: {},
 });

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

@@ -37,10 +37,7 @@ $assets.set(
   ])
 );
 
-const pages = createDefaultPages({
-  rootInstanceId: "root-instance-id",
-  systemDataSourceId: "systemDataSourceId",
-});
+const pages = createDefaultPages({ rootInstanceId: "root-instance-id" });
 pages.meta = {
   siteName: "Project name",
   faviconAssetId: "imageId",
@@ -53,7 +50,6 @@ pages.pages.push({
   name: "page-name",
   meta: {},
   rootInstanceId: "root-instance-id",
-  systemDataSourceId: "systemDataSourceId",
 });
 const rootFolder = pages.folders.find(isRootFolder);
 rootFolder?.children.push("pageId");

apps/builder/app/builder/features/pages/page-settings.tsx

@@ -27,9 +27,7 @@ import {
   ROOT_FOLDER_ID,
   findParentFolderByChildId,
   ProjectNewRedirectPath,
-  DataSource,
   isLiteralExpression,
-  type System,
   documentTypes,
   isRootFolder,
 } from "@webstudio-is/sdk";
@@ -74,7 +72,6 @@ import {
   $instances,
   $pages,
   $dataSources,
-  $dataSourceVariables,
   $publishedOrigin,
   $project,
   $userPlanFeatures,
@@ -112,6 +109,7 @@ import { useUnmount } from "~/shared/hook-utils/use-mount";
 import { Card } from "../marketplace/card";
 import { selectInstance } from "~/shared/awareness";
 import { computeExpression } from "~/shared/data-variables";
+import { $currentSystem } from "~/shared/system";
 
 const fieldDefaultValues = {
   name: "Untitled",
@@ -579,7 +577,7 @@ const LanguageField = ({
   );
 };
 
-const usePageUrl = (values: Values, systemDataSourceId?: DataSource["id"]) => {
+const usePageUrl = (values: Values) => {
   const pages = useStore($pages);
   const foldersPath =
     pages === undefined ? "" : getPagePath(values.parentFolderId, pages);
@@ -588,16 +586,10 @@ const usePageUrl = (values: Values, systemDataSourceId?: DataSource["id"]) => {
     .join("/")
     .replace(/\/+/g, "/");
 
-  const dataSourceVariables = useStore($dataSourceVariables);
-  const storedSystem =
-    systemDataSourceId === undefined
-      ? undefined
-      : (dataSourceVariables.get(systemDataSourceId) as System);
-  const pathParams = storedSystem?.params ?? {};
-
+  const system = useStore($currentSystem);
   const publishedOrigin = useStore($publishedOrigin);
   const tokens = tokenizePathnamePattern(path);
-  const compiledPath = compilePathnamePattern(tokens, pathParams);
+  const compiledPath = compilePathnamePattern(tokens, system.params);
   return `${publishedOrigin}${compiledPath}`;
 };
 
@@ -705,13 +697,11 @@ const MarketplaceSection = ({
 };
 
 const FormFields = ({
-  systemDataSourceId,
   autoSelect,
   errors,
   values,
   onChange,
 }: {
-  systemDataSourceId?: DataSource["id"];
   autoSelect?: boolean;
   errors: Errors;
   values: Values;
@@ -724,7 +714,7 @@ const FormFields = ({
   const { allowDynamicData } = useStore($userPlanFeatures);
   const { variableValues, scope, aliases } = useStore($pageRootScope);
 
-  const pageUrl = usePageUrl(values, systemDataSourceId);
+  const pageUrl = usePageUrl(values);
 
   if (pages === undefined) {
     return;
@@ -1656,12 +1646,7 @@ export const PageSettings = ({
         }
       }}
     >
-      <FormFields
-        systemDataSourceId={page.systemDataSourceId}
-        errors={errors}
-        values={values}
-        onChange={handleChange}
-      />
+      <FormFields errors={errors} values={values} onChange={handleChange} />
     </PageSettingsView>
   );
 };

apps/builder/app/builder/features/pages/page-utils.test.ts

@@ -26,6 +26,7 @@ import {
 } from "~/shared/nano-states";
 import { registerContainers } from "~/shared/sync";
 import { $awareness } from "~/shared/awareness";
+import { updateCurrentSystem } from "~/shared/system";
 
 setEnv("*");
 registerContainers();
@@ -525,10 +526,9 @@ test("page root scope should prefill default system variable value", () => {
       ],
     ]),
   });
-
-  $dataSourceVariables.set(
-    new Map([["systemId", { params: { slug: "my-post" }, search: {} }]])
-  );
+  updateCurrentSystem({
+    params: { slug: "my-post" },
+  });
   expect($pageRootScope.get()).toEqual({
     aliases: new Map([["$ws$dataSource$systemId", "system"]]),
     scope: {

apps/builder/app/builder/features/project-settings/project-settings.stories.tsx

@@ -33,7 +33,6 @@ export const Redirects = () => {
       title: `"My Title"`,
       meta: {},
       rootInstanceId: "body",
-      systemDataSourceId: "",
     },
     pages: [],
     folders: [],

apps/builder/app/builder/features/project-settings/utils.test.ts

@@ -6,7 +6,6 @@ describe("getExistingRoutePaths", () => {
   test("gets all the route paths that exists in the project", () => {
     const pages = createDefaultPages({
       rootInstanceId: "rootInstanceId",
-      systemDataSourceId: "systemDataSourceId",
       homePageId: "homePageId",
     });
 
@@ -16,7 +15,6 @@ describe("getExistingRoutePaths", () => {
       name: "Page",
       path: "/page",
       rootInstanceId: "rootInstanceId",
-      systemDataSourceId: "systemDataSourceId",
       title: `"Page"`,
     });
 
@@ -26,7 +24,6 @@ describe("getExistingRoutePaths", () => {
       name: "Blog",
       path: "/blog/:id",
       rootInstanceId: "rootInstanceId",
-      systemDataSourceId: "systemDataSourceId",
       title: `"Blog"`,
     });
 

apps/builder/app/builder/features/settings-panel/props-section/props-section.stories.tsx

@@ -26,15 +26,10 @@ const page = (name: string, path: string): Page => ({
   path,
   meta: {},
   rootInstanceId: unique(),
-  systemDataSourceId: unique(),
 });
 
 $pages.set({
-  ...createDefaultPages({
-    rootInstanceId: unique(),
-    systemDataSourceId: unique(),
-  }),
-
+  ...createDefaultPages({ rootInstanceId: unique() }),
   homePage: page("Home", "") as Page & { path: "" },
   pages: [
     page("About", "/about"),

apps/builder/app/builder/features/settings-panel/variables-section.stories.tsx

@@ -22,9 +22,7 @@ $instances.set(
     ["box", { id: "box", type: "instance", component: "Box", children: [] }],
   ])
 );
-$pages.set(
-  createDefaultPages({ rootInstanceId: "box", systemDataSourceId: "system" })
-);
+$pages.set(createDefaultPages({ rootInstanceId: "box" }));
 $awareness.set({ pageId: "home", instanceSelector: ["box"] });
 
 export const VariablesSection: StoryObj = {