refactor: fix system on non-home pages (#4893)

Tested forms only on home page. John caught the issue on other pages.
Forms now submit system.search on non-home pages proeprly.

Author: TrySound

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/canvas/interceptor.ts

@@ -1,17 +1,16 @@
-import { getPagePath, type System } from "@webstudio-is/sdk";
+import { getPagePath } from "@webstudio-is/sdk";
 import {
   compilePathnamePattern,
   matchPathnamePattern,
   tokenizePathnamePattern,
 } from "~/builder/shared/url-pattern";
 import { $selectedPage, selectPage } from "~/shared/awareness";
 import {
-  $dataSourceVariables,
   $isPreviewMode,
   $pages,
   $selectedPageHash,
 } from "~/shared/nano-states";
-import { updateCurrentSystem } from "~/shared/system";
+import { $currentSystem, updateCurrentSystem } from "~/shared/system";
 
 const isAbsoluteUrl = (href: string) => {
   try {
@@ -25,13 +24,10 @@ const isAbsoluteUrl = (href: string) => {
 const getSelectedPagePathname = () => {
   const pages = $pages.get();
   const page = $selectedPage.get();
-  const dataSourceVariables = $dataSourceVariables.get();
-  if (page?.systemDataSourceId && pages) {
-    const system = dataSourceVariables.get(page.systemDataSourceId) as
-      | undefined
-      | System;
+  if (page && pages) {
     const tokens = tokenizePathnamePattern(getPagePath(page.id, pages));
-    return compilePathnamePattern(tokens, system?.params ?? {});
+    const system = $currentSystem.get();
+    return compilePathnamePattern(tokens, system.params);
   }
 };
 
@@ -62,8 +58,8 @@ const switchPageAndUpdateSystem = (href: string, formData?: FormData) => {
       $selectedPageHash.set({ hash: pageHref.hash });
       selectPage(page.id);
       updateCurrentSystem({ params, search });
+      break;
     }
-    break;
   }
 };