feat: Add system.origin (#3254)

## Description review per commit. - Add system.url.origin to the props, rename publishedUrl -> publishedOrigin - Add system.url.origin to the published sites Example on published site https://saas-sitemapxml-x1g2n.wstd.work/ Example on builder <img width="342" alt="image" src="https://github.com/webstudio-is/webstudio/assets/5077042/bea3c9b4-c7dc-4936-a56a-fa33327ab6d0"> We use because as of now system is not available on canvas <img width="448" alt="image" src="https://github.com/webstudio-is/webstudio/assets/5077042/2eaa02b0-7566-492b-b98e-7af8a4f636e0"> ## 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.example` and the `builder/env-check.js` if mandatory
webstudio-is · Apr 30, 2024 · 50be004 · 50be004
1 parent 52553be
commit 50be004
Show file tree

Hide file tree

Showing 30 changed files with 238 additions and 150 deletions.
diff --git a/apps/builder/app/builder/features/address-bar.tsx b/apps/builder/app/builder/features/address-bar.tsx
@@ -25,7 +25,7 @@ import {
 import {
   $dataSourceVariables,
   $pages,
-  $publishedUrl,
+  $publishedOrigin,
   $selectedPage,
   updateSystem,
 } from "~/shared/nano-states";
@@ -115,13 +115,13 @@ const useCopyUrl = (pageUrl: string) => {
 
 const AddressBar = () => {
   const id = useId();
-  const publishedUrl = useStore($publishedUrl);
+  const publishedOrigin = useStore($publishedOrigin);
   const path = useStore($selectedPagePath);
   const pathParams = useStore($selectedPagePathParams);
   const tokens = tokenizePathnamePattern(path);
   const compiledPath = compilePathnamePattern(tokens, pathParams ?? {});
   const { tooltipProps, buttonProps } = useCopyUrl(
-    `${publishedUrl}${compiledPath}`
+    `${publishedOrigin}${compiledPath}`
   );
 
   const errors = new Map<string, string>();
@@ -179,8 +179,8 @@ const AddressBar = () => {
 export const AddressBarPopover = () => {
   const [isOpen, setIsOpen] = useState(false);
   const path = useStore($selectedPagePath);
-  const publishedUrl = useStore($publishedUrl);
-  const { tooltipProps, buttonProps } = useCopyUrl(`${publishedUrl}${path}`);
+  const publishedOrigin = useStore($publishedOrigin);
+  const { tooltipProps, buttonProps } = useCopyUrl(`${publishedOrigin}${path}`);
 
   // show only copy button when path is static
   if (isPathnamePattern(path) === false) {

diff --git a/apps/builder/app/builder/features/project-settings/section-redirects.tsx b/apps/builder/app/builder/features/project-settings/section-redirects.tsx
@@ -23,13 +23,13 @@ import {
 } from "@webstudio-is/sdk";
 import { useStore } from "@nanostores/react";
 import { getExistingRoutePaths } from "../sidebar-left/panels/pages/page-utils";
-import { $pages, $publishedUrl } from "~/shared/nano-states";
+import { $pages, $publishedOrigin } from "~/shared/nano-states";
 import { serverSyncStore } from "~/shared/sync";
 import { flushSync } from "react-dom";
 import { sectionSpacing } from "./utils";
 
 export const SectionRedirects = () => {
-  const publishedUrl = useStore($publishedUrl);
+  const publishedOrigin = useStore($publishedOrigin);
   const [redirects, setRedirects] = useState(
     () => $pages.get()?.redirects ?? []
   );
@@ -237,7 +237,7 @@ export const SectionRedirects = () => {
                             underline="hover"
                             href={new URL(
                               redirect.old,
-                              publishedUrl
+                              publishedOrigin
                             ).toString()}
                             css={truncate()}
                             target="_blank"
@@ -254,7 +254,7 @@ export const SectionRedirects = () => {
                             underline="hover"
                             href={new URL(
                               redirect.new,
-                              publishedUrl
+                              publishedOrigin
                             ).toString()}
                             css={truncate()}
                             target="_blank"

diff --git a/apps/builder/app/builder/features/sidebar-left/panels/pages/page-settings.tsx b/apps/builder/app/builder/features/sidebar-left/panels/pages/page-settings.tsx
@@ -69,7 +69,7 @@ import {
   $dataSources,
   computeExpression,
   $dataSourceVariables,
-  $publishedUrl,
+  $publishedOrigin,
 } from "~/shared/nano-states";
 import {
   BindingControl,
@@ -566,10 +566,10 @@ const usePageUrl = (values: Values, systemDataSourceId?: DataSource["id"]) => {
       : (dataSourceVariables.get(systemDataSourceId) as System);
   const pathParams = storedSystem?.params ?? {};
 
-  const publishedUrl = useStore($publishedUrl);
+  const publishedOrigin = useStore($publishedOrigin);
   const tokens = tokenizePathnamePattern(path);
   const compiledPath = compilePathnamePattern(tokens, pathParams);
-  return `${publishedUrl}${compiledPath}`;
+  return `${publishedOrigin}${compiledPath}`;
 };
 
 const FormFields = ({

diff --git a/apps/builder/app/builder/features/topbar/publish.tsx b/apps/builder/app/builder/features/topbar/publish.tsx
@@ -32,7 +32,7 @@ import {
   useIsPublishDialogOpen,
 } from "../../shared/nano-states";
 import { validateProjectDomain, type Project } from "@webstudio-is/project";
-import { $authPermit, $publishedUrl } from "~/shared/nano-states";
+import { $authPermit, $publishedOrigin } from "~/shared/nano-states";
 import {
   Domains,
   getPublishStatusAndText,
@@ -80,7 +80,7 @@ const ChangeProjectDomain = ({
   isPublishing,
 }: ChangeProjectDomainProps) => {
   const id = useId();
-  const publishedUrl = useStore($publishedUrl);
+  const publishedOrigin = useStore($publishedOrigin);
 
   const {
     send: updateProjectDomain,
@@ -143,7 +143,7 @@ const ChangeProjectDomain = ({
 
   return (
     <CollapsibleDomainSection
-      title={new URL(publishedUrl).host}
+      title={new URL(publishedOrigin).host}
       suffix={
         <Grid flow="column">
           <Tooltip content={error !== undefined ? error : statusText}>
@@ -167,12 +167,12 @@ const ChangeProjectDomain = ({
               )}
             </Flex>
           </Tooltip>
-          <Tooltip content={`Proceed to ${publishedUrl}`}>
+          <Tooltip content={`Proceed to ${publishedOrigin}`}>
             <IconButton
               tabIndex={-1}
               disabled={error !== undefined || status !== "PUBLISHED"}
               onClick={(event) => {
-                window.open(publishedUrl, "_blank");
+                window.open(publishedOrigin, "_blank");
                 event.preventDefault();
               }}
             >

diff --git a/apps/builder/app/dashboard/projects/project-card.tsx b/apps/builder/app/dashboard/projects/project-card.tsx
@@ -52,18 +52,18 @@ const PublishedLink = ({
   publisherHost: string;
   tabIndex: number;
 }) => {
-  const publishedUrl = `https://${domain}.${publisherHost}`;
+  const publishedOrigin = `https://${domain}.${publisherHost}`;
   return (
     <Link
-      href={publishedUrl}
+      href={publishedOrigin}
       target="_blank"
       rel="noreferrer"
       tabIndex={tabIndex}
       color="subtle"
       underline="hover"
       css={truncate()}
     >
-      {new URL(publishedUrl).host}
+      {new URL(publishedOrigin).host}
     </Link>
   );
 };

diff --git a/apps/builder/app/shared/nano-states/nano-states.ts b/apps/builder/app/shared/nano-states/nano-states.ts
@@ -41,7 +41,7 @@ export const $imageLoader = atom<ImageLoader>(
   createImageLoader({ imageBaseUrl: "" })
 );
 
-export const $publishedUrl = computed(
+export const $publishedOrigin = computed(
   [$project, $publisherHost],
   (project, publisherHost) => `https://${project?.domain}.${publisherHost}`
 );
@@ -66,9 +66,12 @@ export const updateSystem = (page: Page, update: Partial<System>) => {
   const system = dataSourceVariables.get(page.systemDataSourceId) as
     | undefined
     | System;
+
   const newSystem: System = {
     search: {},
     params: {},
+    // This value seems like doesn't matter
+    origin: "",
     ...system,
     ...update,
   };

diff --git a/apps/builder/app/shared/nano-states/props.test.ts b/apps/builder/app/shared/nano-states/props.test.ts
@@ -911,7 +911,12 @@ test("prefill default system variable value", () => {
     new Map([
       [
         JSON.stringify(["body"]),
-        new Map<string, unknown>([["systemId", { params: {}, search: {} }]]),
+        new Map<string, unknown>([
+          [
+            "systemId",
+            { params: {}, search: {}, origin: "https://undefined.wstd.work" },
+          ],
+        ]),
       ],
     ])
   );

diff --git a/apps/builder/app/shared/nano-states/props.ts b/apps/builder/app/shared/nano-states/props.ts
@@ -5,6 +5,7 @@ import type {
   Instance,
   Prop,
   ResourceRequest,
+  System,
 } from "@webstudio-is/sdk";
 import {
   decodeDataSourceVariable,
@@ -26,6 +27,7 @@ import {
   $assets,
   $resources,
   $resourceValues,
+  $publishedOrigin,
 } from "./nano-states";
 import { $selectedPage, $pages } from "./pages";
 import { groupBy } from "../array-utils";
@@ -299,14 +301,16 @@ export const $variableValuesByInstanceSelector = computed(
     $dataSources,
     $dataSourceVariables,
     $resourceValues,
+    $publishedOrigin,
   ],
   (
     instances,
     props,
     page,
     dataSources,
     dataSourceVariables,
-    resourceValues
+    resourceValues,
+    publishedOrigin
   ) => {
     const propsByInstanceId = groupBy(
       props.values(),
@@ -361,10 +365,13 @@ export const $variableValuesByInstanceSelector = computed(
               variable.id === page.systemDataSourceId &&
               value === undefined
             ) {
-              variableValues.set(variable.id, {
+              const systemDefaultValue: System = {
                 params: {},
                 search: {},
-              });
+                origin: publishedOrigin,
+              };
+
+              variableValues.set(variable.id, systemDefaultValue);
             }
           }
           if (variable.type === "resource") {

diff --git a/fixtures/webstudio-cloudflare-template/app/routes/_index.tsx b/fixtures/webstudio-cloudflare-template/app/routes/_index.tsx
@@ -34,11 +34,20 @@ import { assetBaseUrl, imageBaseUrl, imageLoader } from "../constants.mjs";
 
 export const loader = async (arg: LoaderFunctionArgs) => {
   const url = new URL(arg.request.url);
+  const host =
+    arg.request.headers.get("x-forwarded-host") ||
+    arg.request.headers.get("host") ||
+    "";
+  url.host = host;
+  url.protocol = "https";
+
   const params = getRemixParams(arg.params);
   const system = {
     params,
     search: Object.fromEntries(url.searchParams),
+    origin: url.origin,
   };
+
   const resources = await loadResources({ system });
   const pageMeta = getPageMeta({ system, resources });
 
@@ -50,14 +59,6 @@ export const loader = async (arg: LoaderFunctionArgs) => {
     return redirect(pageMeta.redirect, status);
   }
 
-  const host =
-    arg.request.headers.get("x-forwarded-host") ||
-    arg.request.headers.get("host") ||
-    "";
-
-  url.host = host;
-  url.protocol = "https";
-
   // typecheck
   arg.context.EXCLUDE_FROM_SEARCH satisfies boolean;
 

diff --git a/fixtures/webstudio-cloudflare-template/package.json b/fixtures/webstudio-cloudflare-template/package.json
@@ -3,7 +3,7 @@
   "scripts": {
     "fixtures:link": "webstudio link --link \"https://main.development.webstudio.is/builder/d845c167-ea07-4875-b08d-83e97c09dcce?authToken=e9d1343f-9298-4fd3-a66e-f89a5af2dd93&\"",
     "fixtures:sync": "webstudio sync && pnpm prettier --write ./.webstudio/",
-    "fixtures:build": "webstudio build --template internal --template saas-helpers --template cloudflare --preview && pnpm prettier --write ./app/ ./package.json",
+    "fixtures:build": "webstudio build --template internal --template cloudflare --template saas-helpers  --preview && pnpm prettier --write ./app/ ./package.json",
     "build": "remix vite:build",
     "dev": "remix vite:dev",
     "typecheck": "tsc",

diff --git a/fixtures/webstudio-cloudflare-template/tsconfig.json b/fixtures/webstudio-cloudflare-template/tsconfig.json
@@ -26,6 +26,7 @@
     "skipLibCheck": true,
     "forceConsistentCasingInFileNames": true,
     "baseUrl": ".",
+    "customConditions": ["webstudio"],
 
     // Vite takes care of building everything, not tsc.
     "noEmit": true

diff --git a/fixtures/webstudio-custom-template/app/routes/[script-test]._index.tsx b/fixtures/webstudio-custom-template/app/routes/[script-test]._index.tsx
@@ -34,11 +34,20 @@ import { assetBaseUrl, imageBaseUrl, imageLoader } from "../constants.mjs";
 
 export const loader = async (arg: LoaderFunctionArgs) => {
   const url = new URL(arg.request.url);
+  const host =
+    arg.request.headers.get("x-forwarded-host") ||
+    arg.request.headers.get("host") ||
+    "";
+  url.host = host;
+  url.protocol = "https";
+
   const params = getRemixParams(arg.params);
   const system = {
     params,
     search: Object.fromEntries(url.searchParams),
+    origin: url.origin,
   };
+
   const resources = await loadResources({ system });
   const pageMeta = getPageMeta({ system, resources });
 
@@ -50,14 +59,6 @@ export const loader = async (arg: LoaderFunctionArgs) => {
     return redirect(pageMeta.redirect, status);
   }
 
-  const host =
-    arg.request.headers.get("x-forwarded-host") ||
-    arg.request.headers.get("host") ||
-    "";
-
-  url.host = host;
-  url.protocol = "https";
-
   // typecheck
   arg.context.EXCLUDE_FROM_SEARCH satisfies boolean;
 

diff --git a/fixtures/webstudio-custom-template/app/routes/[sitemap-html]._index.tsx b/fixtures/webstudio-custom-template/app/routes/[sitemap-html]._index.tsx
@@ -34,11 +34,20 @@ import { assetBaseUrl, imageBaseUrl, imageLoader } from "../constants.mjs";
 
 export const loader = async (arg: LoaderFunctionArgs) => {
   const url = new URL(arg.request.url);
+  const host =
+    arg.request.headers.get("x-forwarded-host") ||
+    arg.request.headers.get("host") ||
+    "";
+  url.host = host;
+  url.protocol = "https";
+
   const params = getRemixParams(arg.params);
   const system = {
     params,
     search: Object.fromEntries(url.searchParams),
+    origin: url.origin,
   };
+
   const resources = await loadResources({ system });
   const pageMeta = getPageMeta({ system, resources });
 
@@ -50,14 +59,6 @@ export const loader = async (arg: LoaderFunctionArgs) => {
     return redirect(pageMeta.redirect, status);
   }
 
-  const host =
-    arg.request.headers.get("x-forwarded-host") ||
-    arg.request.headers.get("host") ||
-    "";
-
-  url.host = host;
-  url.protocol = "https";
-
   // typecheck
   arg.context.EXCLUDE_FROM_SEARCH satisfies boolean;