refactor: decouple system store from variables (#4888)

We are moving away from binding system to variables and instead gonna
have one global variable.

Here moved system values into separate store coupled to pages instead of
variables.

Also fixed suggestions in address bar, probably broke while design
system refactorings.

Testing
- submit form with one named input
- check system value is rendered
- check system value can be inspected

Author: TrySound

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-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 = {

apps/builder/app/builder/features/style-panel/sections/backgrounds/background-content.stories.tsx

@@ -37,7 +37,6 @@ $pages.set(
   createDefaultPages({
     homePageId: "homePageId",
     rootInstanceId: "box",
-    systemDataSourceId: "systemId",
   })
 );
 $awareness.set({