fix: user project files

webiny · brunozoric · Mar 4, 2022 · Feb 14, 2022 · Feb 14, 2022 · Feb 14, 2022
commit 578d04cc7dabaf0a2d102fa96048a0b6530c0dcd
diff --git a/apps/admin/code/src/okta.ts b/apps/admin/code/src/okta.ts
@@ -29,7 +29,7 @@ export const oktaFactory: OktaFactory = ({ clientId }) => {
         redirectUri,
         scopes,
         pkce: true,
-        restoreOriginalUri: null,
+        restoreOriginalUri: undefined,
         devMode: false
     });
 

diff --git a/apps/theme/formBuilder/layouts/DefaultFormLayout.tsx b/apps/theme/formBuilder/layouts/DefaultFormLayout.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { BindComponentRenderProp, Form, BindComponent, FormOnSubmit } from "@webiny/form";
+import { BindComponentRenderProp, Form, BindComponent } from "@webiny/form";
 import {
     FbFormModelField,
     FormLayoutComponent,
@@ -14,6 +14,7 @@ import Radio from "./fields/Radio";
 import Checkbox from "./fields/Checkbox";
 import Textarea from "./fields/Textarea";
 import HelperMessage from "./components/HelperMessage";
+import { FormRenderPropParamsSubmit } from "@webiny/form";
 
 /**
  * This is the default form layout component, in which we render all the form fields. We also render terms of service
@@ -236,7 +237,11 @@ const DefaultFormLayout: FormLayoutComponent = ({
     /**
      * Renders the form submit button. We disable the button if the form is in the loading state.
      */
-    const renderSubmitButton = (submit: FormOnSubmit, loading: boolean, buttonLabel: string) => {
+    const renderSubmitButton = (
+        submit: FormRenderPropParamsSubmit,
+        loading: boolean,
+        buttonLabel: string
+    ) => {
         return (
             <div className="webiny-fb-form-submit-button">
                 <button

diff --git a/apps/theme/formBuilder/layouts/fields/Checkbox.tsx b/apps/theme/formBuilder/layouts/fields/Checkbox.tsx
@@ -46,7 +46,7 @@ const Checkbox: React.FC<CheckboxProps> = props => {
                 {props.field.label}
             </label>
             <div className="webiny-fb-form-field__checkbox-group">
-                {props.field.options.map(option => (
+                {(props.field.options || []).map(option => (
                     <div className="webiny-fb-form-field__checkbox" key={option.value}>
                         <input
                             name={fieldId}

diff --git a/apps/theme/formBuilder/layouts/fields/Radio.tsx b/apps/theme/formBuilder/layouts/fields/Radio.tsx
@@ -19,7 +19,7 @@ const Radio: React.FC<RadioProps> = props => {
                 {props.field.label}
             </label>
             <div className="webiny-fb-form-field__radio-group">
-                {props.field.options.map(option => {
+                {(props.field.options || []).map(option => {
                     return (
                         <div className="webiny-fb-form-field__radio" key={option.value}>
                             <input

diff --git a/apps/theme/formBuilder/layouts/fields/Select.tsx b/apps/theme/formBuilder/layouts/fields/Select.tsx
@@ -26,7 +26,7 @@ const Select: React.FC<SelectProps> = props => {
                 <option disabled value={""}>
                     {props.field.placeholderText}
                 </option>
-                {props.field.options.map(option => (
+                {(props.field.options || []).map(option => (
                     <option key={option.value} value={option.value}>
                         {option.label}
                     </option>

diff --git a/apps/website/code/src/components/Page/Layout.ts b/apps/website/code/src/components/Page/Layout.ts
@@ -2,6 +2,7 @@ import React, { useMemo, createElement } from "react";
 import { plugins } from "@webiny/plugins";
 import { PbPageLayoutPlugin, PbPageData } from "@webiny/app-page-builder/types";
 import { SettingsQueryResponseData } from "./graphql";
+import lodashGet from "lodash/get";
 
 interface LayoutProps {
     page: PbPageData;
@@ -13,7 +14,11 @@ const Layout: React.FC<LayoutProps> = ({ page, settings, children }) => {
         return layoutPlugins.map(pl => pl.layout);
     }, []);
 
-    const themeLayout = layouts.find(l => l.name === page.settings.general.layout);
+    const layout = lodashGet(page, "page.settings.general.layout", null);
+    if (!layout) {
+        return children as React.ReactElement;
+    }
+    const themeLayout = layouts.find(l => l.name === layout);
 
     if (!themeLayout) {
         return children as React.ReactElement;

diff --git a/apps/website/code/src/components/Page/Render.tsx b/apps/website/code/src/components/Page/Render.tsx
@@ -1,6 +1,11 @@
 import React from "react";
 import { Helmet } from "react-helmet";
-import { PbErrorResponse, PbPageData } from "@webiny/app-page-builder/types";
+import {
+    PbErrorResponse,
+    PbPageData,
+    PbPageDataSettingsSeo,
+    PbPageDataSettingsSocial
+} from "@webiny/app-page-builder/types";
 import Layout from "./Layout";
 import Element from "@webiny/app-page-builder/render/components/Element";
 import useResponsiveClassName from "@webiny/app-page-builder/hooks/useResponsiveClassName";
@@ -13,16 +18,16 @@ interface Head {
         src: string;
     };
     title: string;
-    seo: PbPageData["settings"]["seo"];
-    social: PbPageData["settings"]["social"];
+    seo: PbPageDataSettingsSeo;
+    social: PbPageDataSettingsSocial;
 }
 
 /**
  * This component will render the page, including the page content, its layout, and also meta tags.
  */
 interface RenderProps {
-    page: PbPageData;
-    error: PbErrorResponse;
+    page: PbPageData | null;
+    error: PbErrorResponse | null;
     settings: SettingsQueryResponseData;
 }
 const Render: React.FC<RenderProps> = ({ page, error, settings }) => {
@@ -40,19 +45,20 @@ const Render: React.FC<RenderProps> = ({ page, error, settings }) => {
     }
 
     const head: Head = {
-        favicon: settings?.favicon,
-        title: page.title || settings?.name,
+        favicon: settings.favicon,
+        title: page.title || settings.name,
         seo: {
             title: "",
             description: "",
             meta: [],
-            ...page?.settings?.seo
+            ...(page.settings?.seo || {})
         },
         social: {
             title: "",
             description: "",
             image: null,
-            ...page?.settings?.social
+            meta: [],
+            ...(page.settings?.social || {})
         }
     };
 

diff --git a/apps/website/code/src/components/Page/graphql.ts b/apps/website/code/src/components/Page/graphql.ts
@@ -20,8 +20,8 @@ export interface PublishedPageQueryResponse {
     };
 }
 export interface PublishedPageQueryVariables {
-    id: string;
-    path: string;
+    id: string | null;
+    path: string | null;
     returnNotFoundPage: boolean;
     returnErrorPage: boolean;
     preview: boolean;

diff --git a/apps/website/code/src/components/Page/index.tsx b/apps/website/code/src/components/Page/index.tsx
@@ -20,7 +20,7 @@ declare global {
 // Make sure the final path looks like `/xyz`. We don't want to run into situations where the prerendering engine is
 // visiting `/xyz`, but delivery URL is forcing `/xyz/`. This ensures the path is standardized, and the GraphQL
 // queries are the same on both sides.
-const trimPath = (value: string) => {
+const trimPath = (value: string): string | null => {
     if (typeof value === "string") {
         return "/" + trim(value, "/");
     }
@@ -35,13 +35,16 @@ const isNotFoundPage = window.__PS_NOT_FOUND_PAGE__;
 // allow navigating to other pages, in the `getPath` function below.
 const notFoundInitialPath = trimPath(location.pathname);
 
-const getPath = (): string => {
-    let path = location.pathname;
+const getPath = (): string | null => {
+    let path: string | null = location.pathname;
     if (typeof path !== "string") {
         return null;
     }
 
     path = trimPath(path);
+    if (path === null) {
+        return null;
+    }
 
     // Let's check if the not-found page was just served to the user. If so, let's just return page content for the
     // "/not-found" path, which is already present in the initially served HTML and ready to be used by Apollo Cache.
@@ -79,7 +82,8 @@ const Page: React.FC = () => {
     // Here we get all site data like website name, favicon image, social links etc.
     const getSettingsQuery = useQuery<SettingsQueryResponse>(GET_SETTINGS);
 
-    const { data: page, error } = getPublishedPageQuery.data?.pageBuilder?.getPublishedPage || {};
+    const { data: page = null, error = null } =
+        getPublishedPageQuery.data?.pageBuilder?.getPublishedPage || {};
     const settings =
         getSettingsQuery.data?.pageBuilder?.getSettings?.data || ({} as SettingsQueryResponseData);
 

diff --git a/packages/app-page-builder/src/types.ts b/packages/app-page-builder/src/types.ts
@@ -214,6 +214,32 @@ export interface PbErrorResponse {
     data: Record<string, any>;
     code: string;
 }
+
+export interface PbPageDataSettingsGeneral {
+    layout?: string;
+}
+export interface PbPageDataSettingsSeo {
+    title: string;
+    description: string;
+    meta: {
+        name: string;
+        content: string;
+    }[];
+}
+export interface PbPageDataSettingsSocial {
+    title: string;
+    description: string;
+    meta: {
+        property: string;
+        content: string;
+    }[];
+    image?: { src: string } | null;
+}
+export interface PbPageDataSettings {
+    general?: PbPageDataSettingsGeneral;
+    seo?: PbPageDataSettingsSeo;
+    social?: PbPageDataSettingsSocial;
+}
 export interface PbPageData {
     id: string;
     pid: string;
@@ -226,24 +252,7 @@ export interface PbPageData {
     version?: number;
     category: PbCategory;
     status: string | "draft" | "published" | "unpublished";
-    settings?: {
-        general?: {
-            layout?: string;
-        };
-        seo?: {
-            title: string;
-            description: string;
-            meta: { name: string; content: string }[];
-        };
-        social?: {
-            title: string;
-            description: string;
-            meta: { property: string; content: string }[];
-            image: {
-                src: string;
-            };
-        };
-    };
+    settings?: PbPageDataSettings;
     createdOn: string;
     savedOn: string;
     publishedOn: string;

diff --git a/packages/cwp-template-aws/template/common/api/code/fileManager/transform/package.json b/packages/cwp-template-aws/template/common/api/code/fileManager/transform/package.json
@@ -9,6 +9,6 @@
     "@webiny/api-file-manager": "latest",
     "@webiny/cli": "latest",
     "@webiny/handler-aws": "latest",
-    "@webiny/project-utils": "^5.3.0"
+    "@webiny/project-utils": "latest"
   }
 }
diff --git a/...ges/cwp-template-aws/template/common/apps/theme/formBuilder/layouts/DefaultFormLayout.tsx b/...ges/cwp-template-aws/template/common/apps/theme/formBuilder/layouts/DefaultFormLayout.tsx
@@ -1,12 +1,13 @@
 import React, { useState } from "react";
-import { BindComponentRenderProp, Form, BindComponent, FormOnSubmit } from "@webiny/form";
+import { BindComponentRenderProp, Form, BindComponent } from "@webiny/form";
 import {
     FbFormModelField,
     FormLayoutComponent,
     FormRenderFbFormModelField
 } from "@webiny/app-form-builder/types";
 import { validation } from "@webiny/validation";
 import { RichTextRenderer } from "@webiny/react-rich-text-renderer";
+import { FormRenderPropParamsSubmit } from "@webiny/form";
 
 import Input from "./fields/Input";
 import Select from "./fields/Select";
@@ -236,7 +237,11 @@ const DefaultFormLayout: FormLayoutComponent = ({
     /**
      * Renders the form submit button. We disable the button if the form is in the loading state.
      */
-    const renderSubmitButton = (submit: FormOnSubmit, loading: boolean, buttonLabel: string) => {
+    const renderSubmitButton = (
+        submit: FormRenderPropParamsSubmit,
+        loading: boolean,
+        buttonLabel: string
+    ) => {
         return (
             <div className="webiny-fb-form-submit-button">
                 <button

diff --git a/packages/cwp-template-aws/template/common/apps/theme/formBuilder/layouts/fields/Checkbox.tsx b/packages/cwp-template-aws/template/common/apps/theme/formBuilder/layouts/fields/Checkbox.tsx
@@ -46,7 +46,7 @@ const Checkbox: React.FC<CheckboxProps> = props => {
                 {props.field.label}
             </label>
             <div className="webiny-fb-form-field__checkbox-group">
-                {props.field.options.map(option => (
+                {(props.field.options || []).map(option => (
                     <div className="webiny-fb-form-field__checkbox" key={option.value}>
                         <input
                             name={fieldId}

diff --git a/packages/cwp-template-aws/template/common/apps/theme/formBuilder/layouts/fields/Radio.tsx b/packages/cwp-template-aws/template/common/apps/theme/formBuilder/layouts/fields/Radio.tsx
@@ -19,7 +19,7 @@ const Radio: React.FC<RadioProps> = props => {
                 {props.field.label}
             </label>
             <div className="webiny-fb-form-field__radio-group">
-                {props.field.options.map(option => {
+                {(props.field.options || []).map(option => {
                     return (
                         <div className="webiny-fb-form-field__radio" key={option.value}>
                             <input

diff --git a/packages/cwp-template-aws/template/common/apps/theme/formBuilder/layouts/fields/Select.tsx b/packages/cwp-template-aws/template/common/apps/theme/formBuilder/layouts/fields/Select.tsx
@@ -26,7 +26,7 @@ const Select: React.FC<SelectProps> = props => {
                 <option disabled value={""}>
                     {props.field.placeholderText}
                 </option>
-                {props.field.options.map(option => (
+                {(props.field.options || []).map(option => (
                     <option key={option.value} value={option.value}>
                         {option.label}
                     </option>

diff --git a/packages/cwp-template-aws/template/common/apps/theme/package.json b/packages/cwp-template-aws/template/common/apps/theme/package.json
@@ -6,12 +6,12 @@
   "dependencies": {
     "@apollo/react-components": "^3.1.5",
     "@apollo/react-hooks": "^3.1.5",
-    "@webiny/app-form-builder": "^5.3.0",
-    "@webiny/app-page-builder": "^5.3.0",
-    "@webiny/form": "^5.3.0",
-    "@webiny/react-router": "^5.3.0",
-    "@webiny/react-rich-text-renderer": "^5.3.0",
-    "@webiny/validation": "^5.3.0",
+    "@webiny/app-form-builder": "latest",
+    "@webiny/app-page-builder": "latest",
+    "@webiny/form": "latest",
+    "@webiny/react-router": "latest",
+    "@webiny/react-rich-text-renderer": "latest",
+    "@webiny/validation": "latest",
     "classnames": "^2.2.6",
     "emotion": "^10.0.17",
     "graphql": "^15.7.2",

diff --git a/packages/cwp-template-aws/template/common/apps/website/code/package.json b/packages/cwp-template-aws/template/common/apps/website/code/package.json
@@ -6,14 +6,14 @@
     "@apollo/react-components": "^3.1.5",
     "@apollo/react-hooks": "^3.1.5",
     "@types/react": "^16.14.0",
-    "@webiny/app": "^5.0.0",
-    "@webiny/app-form-builder": "^5.0.0",
-    "@webiny/app-page-builder": "^5.0.0",
-    "@webiny/cli": "^5.0.0",
-    "@webiny/cli-plugin-deploy-pulumi": "^5.0.0",
-    "@webiny/plugins": "^5.0.0",
-    "@webiny/project-utils": "^5.0.0",
-    "@webiny/react-router": "^5.0.0",
+    "@webiny/app": "latest",
+    "@webiny/app-form-builder": "latest",
+    "@webiny/app-page-builder": "latest",
+    "@webiny/cli": "latest",
+    "@webiny/cli-plugin-deploy-pulumi": "latest",
+    "@webiny/plugins": "latest",
+    "@webiny/project-utils": "latest",
+    "@webiny/react-router": "latest",
     "apollo-client": "^2.6.10",
     "apollo-link": "^1.2.14",
     "apollo-link-batch-http": "^1.2.14",

diff --git a/packages/cwp-template-aws/template/common/apps/website/code/src/components/Page/Layout.ts b/packages/cwp-template-aws/template/common/apps/website/code/src/components/Page/Layout.ts
@@ -2,6 +2,7 @@ import React, { useMemo, createElement } from "react";
 import { plugins } from "@webiny/plugins";
 import { PbPageLayoutPlugin, PbPageData } from "@webiny/app-page-builder/types";
 import { SettingsQueryResponseData } from "./graphql";
+import lodashGet from "lodash/get";
 
 interface LayoutProps {
     page: PbPageData;
@@ -13,7 +14,11 @@ const Layout: React.FC<LayoutProps> = ({ page, settings, children }) => {
         return layoutPlugins.map(pl => pl.layout);
     }, []);
 
-    const themeLayout = layouts.find(l => l.name === page.settings.general.layout);
+    const layout = lodashGet(page, "page.settings.general.layout", null);
+    if (!layout) {
+        return children as React.ReactElement;
+    }
+    const themeLayout = layouts.find(l => l.name === layout);
 
     if (!themeLayout) {
         return children as React.ReactElement;