merge: get latest changes from dev

Author: Pavel910

package.json

@@ -206,6 +206,9 @@
     "**/*.{js,ts,tsx}": [
       "prettier --write",
       "eslint --max-warnings=0 --no-ignore"
+    ],
+    "**/package.json": [
+      "yarn webiny verify-dependencies"
     ]
   },
   "yargs": {

packages/app-headless-cms-common/package.json

@@ -14,6 +14,7 @@
   "license": "MIT",
   "dependencies": {
     "@emotion/react": "11.10.8",
+    "@emotion/styled": "11.10.6",
     "@fortawesome/fontawesome-svg-core": "^1.3.0",
     "@webiny/app": "0.0.0",
     "@webiny/app-admin": "0.0.0",

packages/app-headless-cms-common/src/Fields/ErrorBoundary.tsx

@@ -0,0 +1,60 @@
+import React, { ErrorInfo } from "react";
+import type { CmsModelField } from "~/types";
+import { FieldElementError } from "./FieldElementError";
+
+type State =
+    | {
+          hasError: true;
+          error: Error;
+      }
+    | { hasError: false; error: undefined };
+
+interface Props {
+    field: CmsModelField;
+    [key: string]: any;
+}
+
+export class ErrorBoundary extends React.Component<Props, State> {
+    constructor(props: Props) {
+        super(props);
+        this.state = {
+            hasError: false,
+            error: undefined
+        };
+    }
+
+    static getDerivedStateFromError(error: Error) {
+        return {
+            hasError: true,
+            error
+        };
+    }
+
+    public override componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+        const { field } = this.props;
+        if (!field) {
+            return;
+        }
+        console.groupCollapsed(
+            `%cFIELD ERROR%c: An error occurred while rendering model field "${field.fieldId}" (${field.id}) of type "${field.type}".`,
+            "color:red",
+            "color:default"
+        );
+        console.log("Field definition", field);
+        console.error(error, errorInfo);
+        console.groupEnd();
+    }
+
+    public override render() {
+        if (this.state.hasError) {
+            return (
+                <FieldElementError
+                    title={`Error: ${this.state.error.message}`}
+                    description={"See developer console for more details."}
+                />
+            );
+        }
+
+        return this.props.children;
+    }
+}

packages/app-headless-cms-common/src/Fields/FieldElement.tsx

@@ -7,9 +7,24 @@ import { useBind } from "./useBind";
 import { useRenderPlugins } from "./useRenderPlugins";
 import { ModelFieldProvider, useModelField } from "../ModelFieldProvider";
 import { CmsModelField, CmsEditorContentModel, BindComponent } from "~/types";
+import { ErrorBoundary } from "./ErrorBoundary";
 
 const t = i18n.ns("app-headless-cms/admin/components/content-form");
 
+declare global {
+    // eslint-disable-next-line
+    namespace JSX {
+        interface IntrinsicElements {
+            "hcms-model-field": {
+                "data-id": string;
+                "data-type": string;
+                "data-field-id": string;
+                children: React.ReactNode;
+            };
+        }
+    }
+}
+
 type RenderFieldProps = Omit<FieldElementProps, "field">;
 
 const RenderField = (props: RenderFieldProps) => {
@@ -44,10 +59,22 @@ export interface FieldElementProps {
 export const FieldElement = makeDecoratable(
     "FieldElement",
     ({ field, ...props }: FieldElementProps) => {
+        if (!field) {
+            return null;
+        }
+
         return (
-            <ModelFieldProvider field={field}>
-                <RenderField {...props} />
-            </ModelFieldProvider>
+            <hcms-model-field
+                data-id={field.id}
+                data-field-id={field.fieldId}
+                data-type={field.type}
+            >
+                <ErrorBoundary field={field}>
+                    <ModelFieldProvider field={field}>
+                        <RenderField {...props} />
+                    </ModelFieldProvider>
+                </ErrorBoundary>
+            </hcms-model-field>
         );
     }
 );

packages/app-headless-cms-common/src/Fields/FieldElementError.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import styled from "@emotion/styled";
+
+const StyledError = styled.div`
+    border: 2px solid red;
+    background-color: #f87e7e;
+    border-radius: 5px;
+    padding: 5px 10px;
+`;
+
+interface FieldElementErrorProps {
+    title: string;
+    description: string;
+}
+
+const showError = process.env.NODE_ENV === "development";
+
+export const FieldElementError = (props: FieldElementErrorProps) => {
+    if (!showError) {
+        return null;
+    }
+
+    return (
+        <StyledError>
+            <h5>{props.title}</h5>
+            <p>{props.description}</p>
+        </StyledError>
+    );
+};

packages/app-headless-cms-common/src/Fields/Fields.tsx

@@ -1,7 +1,8 @@
 import React from "react";
 import { Cell, Grid } from "@webiny/ui/Grid";
 import { FieldElement } from "./FieldElement";
-import {
+import { FieldElementError } from "./FieldElementError";
+import type {
     CmsEditorContentModel,
     CmsModelField,
     CmsEditorFieldsLayout,
@@ -25,16 +26,25 @@ export const Fields = ({ Bind, fields, layout, contentModel, gridClassName }: Fi
         <Grid className={gridClassName}>
             {layout.map((row, rowIndex) => (
                 <React.Fragment key={rowIndex}>
-                    {row.map(fieldId => {
-                        const field = getFieldById(fields, fieldId) as CmsModelField;
+                    {row.map(id => {
+                        const field = getFieldById(fields, id) as CmsModelField;
 
                         return (
-                            <Cell span={Math.floor(12 / row.length)} key={fieldId}>
-                                <FieldElement
-                                    field={field}
-                                    Bind={Bind}
-                                    contentModel={contentModel}
-                                />
+                            <Cell span={Math.floor(12 / row.length)} key={id}>
+                                {field ? (
+                                    <FieldElement
+                                        field={field}
+                                        Bind={Bind}
+                                        contentModel={contentModel}
+                                    />
+                                ) : (
+                                    <FieldElementError
+                                        title={`Missing field with id "${id}"!`}
+                                        description={
+                                            "Make sure field layout contains the correct field ids (hint: check for typos)."
+                                        }
+                                    />
+                                )}
                             </Cell>
                         );
                     })}

packages/app-headless-cms-common/src/Fields/Label.tsx

@@ -13,7 +13,7 @@ interface LabelProps {
     children?: React.ReactNode;
 }
 
-const Label = ({ children }: LabelProps) => (
+export const Label = ({ children }: LabelProps) => (
     <div
         className={classNames(
             "mdc-text-field-helper-text mdc-text-field-helper-text--persistent",

packages/cli/files/duplicates.json

@@ -1 +1 @@
-[{"name":"downshift","versions":[{"version":"3.1.2","files":[{"file":"/packages/app-admin/package.json","types":["dependencies"]}]},{"version":"2.1.5","files":[{"file":"/packages/ui/package.json","types":["dependencies"]}]}]}]
+[{"name":"@babel/runtime","versions":[{"version":"7.26.7","files":[{"file":"/package.json","types":["devDependencies"]},{"file":"/packages/cli-plugin-dependencies/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-extensions/package.json","types":["dependencies"]},{"file":"/packages/project-utils/package.json","types":["dependencies"]}]},{"version":"7.26.0","files":[{"file":"/package.json","types":["resolutions"]}]}]},{"name":"downshift","versions":[{"version":"3.1.2","files":[{"file":"/packages/app-admin/package.json","types":["dependencies"]}]},{"version":"2.1.5","files":[{"file":"/packages/ui/package.json","types":["dependencies"]}]}]},{"name":"typescript","versions":[{"version":"5.3.3","files":[{"file":"/package.json","types":["devDependencies"]},{"file":"/packages/api/package.json","types":["devDependencies"]},{"file":"/packages/api-aco/package.json","types":["devDependencies"]},{"file":"/packages/api-admin-settings/package.json","types":["devDependencies"]},{"file":"/packages/api-admin-users/package.json","types":["devDependencies"]},{"file":"/packages/api-admin-users-so-ddb/package.json","types":["devDependencies"]},{"file":"/packages/api-apw/package.json","types":["devDependencies"]},{"file":"/packages/api-apw-scheduler-so-ddb/package.json","types":["devDependencies"]},{"file":"/packages/api-audit-logs/package.json","types":["devDependencies"]},{"file":"/packages/api-authentication/package.json","types":["devDependencies"]},{"file":"/packages/api-authentication-cognito/package.json","types":["devDependencies"]},{"file":"/packages/api-background-tasks-ddb/package.json","types":["devDependencies"]},{"file":"/packages/api-background-tasks-es/package.json","types":["devDependencies"]},{"file":"/packages/api-background-tasks-os/package.json","types":["devDependencies"]},{"file":"/packages/api-cognito-authenticator/package.json","types":["devDependencies"]},{"file":"/packages/api-dynamodb-to-elasticsearch/package.json","types":["devDependencies"]},{"file":"/packages/api-elasticsearch/package.json","types":["devDependencies"]},{"file":"/packages/api-elasticsearch-tasks/package.json","types":["devDependencies"]},{"file":"/packages/api-file-manager/package.json","types":["devDependencies"]},{"file":"/packages/api-file-manager-ddb/package.json","types":["devDependencies"]},{"file":"/packages/api-file-manager-s3/package.json","types":["devDependencies"]},{"file":"/packages/api-form-builder/package.json","types":["devDependencies"]},{"file":"/packages/api-form-builder-so-ddb/package.json","types":["devDependencies"]},{"file":"/packages/api-form-builder-so-ddb-es/package.json","types":["devDependencies"]},{"file":"/packages/api-headless-cms/package.json","types":["devDependencies"]},{"file":"/packages/api-headless-cms-aco/package.json","types":["devDependencies"]},{"file":"/packages/api-headless-cms-bulk-actions/package.json","types":["devDependencies"]},{"file":"/packages/api-headless-cms-ddb/package.json","types":["devDependencies"]},{"file":"/packages/api-headless-cms-ddb-es/package.json","types":["devDependencies"]},{"file":"/packages/api-headless-cms-es-tasks/package.json","types":["devDependencies"]},{"file":"/packages/api-headless-cms-import-export/package.json","types":["devDependencies"]},{"file":"/packages/api-headless-cms-tasks/package.json","types":["devDependencies"]},{"file":"/packages/api-headless-cms-tasks-ddb-es/package.json","types":["devDependencies"]},{"file":"/packages/api-i18n/package.json","types":["devDependencies"]},{"file":"/packages/api-i18n-content/package.json","types":["devDependencies"]},{"file":"/packages/api-i18n-ddb/package.json","types":["devDependencies"]},{"file":"/packages/api-log/package.json","types":["devDependencies"]},{"file":"/packages/api-mailer/package.json","types":["devDependencies"]},{"file":"/packages/api-page-builder/package.json","types":["devDependencies"]},{"file":"/packages/api-page-builder-aco/package.json","types":["devDependencies"]},{"file":"/packages/api-page-builder-import-export/package.json","types":["devDependencies"]},{"file":"/packages/api-page-builder-import-export-so-ddb/package.json","types":["devDependencies"]},{"file":"/packages/api-page-builder-so-ddb/package.json","types":["devDependencies"]},{"file":"/packages/api-page-builder-so-ddb-es/package.json","types":["devDependencies"]},{"file":"/packages/api-prerendering-service/package.json","types":["devDependencies"]},{"file":"/packages/api-prerendering-service-aws/package.json","types":["devDependencies"]},{"file":"/packages/api-prerendering-service-so-ddb/package.json","types":["devDependencies"]},{"file":"/packages/api-record-locking/package.json","types":["devDependencies"]},{"file":"/packages/api-security/package.json","types":["devDependencies"]},{"file":"/packages/api-security-auth0/package.json","types":["devDependencies"]},{"file":"/packages/api-security-cognito/package.json","types":["devDependencies"]},{"file":"/packages/api-security-okta/package.json","types":["devDependencies"]},{"file":"/packages/api-security-so-ddb/package.json","types":["devDependencies"]},{"file":"/packages/api-serverless-cms/package.json","types":["devDependencies"]},{"file":"/packages/api-tenancy/package.json","types":["devDependencies"]},{"file":"/packages/api-tenancy-so-ddb/package.json","types":["devDependencies"]},{"file":"/packages/api-tenant-manager/package.json","types":["devDependencies"]},{"file":"/packages/api-theme-manager/package.json","types":["devDependencies"]},{"file":"/packages/api-wcp/package.json","types":["devDependencies"]},{"file":"/packages/api-websockets/package.json","types":["devDependencies"]},{"file":"/packages/app/package.json","types":["devDependencies"]},{"file":"/packages/app-aco/package.json","types":["devDependencies"]},{"file":"/packages/app-admin/package.json","types":["devDependencies"]},{"file":"/packages/app-admin-auth0/package.json","types":["devDependencies"]},{"file":"/packages/app-admin-cognito/package.json","types":["devDependencies"]},{"file":"/packages/app-admin-okta/package.json","types":["devDependencies"]},{"file":"/packages/app-admin-rmwc/package.json","types":["devDependencies"]},{"file":"/packages/app-admin-users-cognito/package.json","types":["devDependencies"]},{"file":"/packages/app-apw/package.json","types":["devDependencies"]},{"file":"/packages/app-audit-logs/package.json","types":["devDependencies"]},{"file":"/packages/app-cognito-authenticator/package.json","types":["devDependencies"]},{"file":"/packages/app-dynamic-pages/package.json","types":["devDependencies"]},{"file":"/packages/app-file-manager/package.json","types":["devDependencies"]},{"file":"/packages/app-file-manager-s3/package.json","types":["devDependencies"]},{"file":"/packages/app-form-builder/package.json","types":["devDependencies"]},{"file":"/packages/app-graphql-playground/package.json","types":["devDependencies"]},{"file":"/packages/app-headless-cms/package.json","types":["devDependencies"]},{"file":"/packages/app-headless-cms-common/package.json","types":["devDependencies"]},{"file":"/packages/app-i18n/package.json","types":["devDependencies"]},{"file":"/packages/app-i18n-content/package.json","types":["devDependencies"]},{"file":"/packages/app-mailer/package.json","types":["devDependencies"]},{"file":"/packages/app-page-builder/package.json","types":["devDependencies"]},{"file":"/packages/app-page-builder-elements/package.json","types":["devDependencies"]},{"file":"/packages/app-plugin-admin-welcome-screen/package.json","types":["devDependencies"]},{"file":"/packages/app-record-locking/package.json","types":["devDependencies"]},{"file":"/packages/app-security/package.json","types":["devDependencies"]},{"file":"/packages/app-security-access-management/package.json","types":["devDependencies"]},{"file":"/packages/app-serverless-cms/package.json","types":["devDependencies"]},{"file":"/packages/app-tenancy/package.json","types":["devDependencies"]},{"file":"/packages/app-tenant-manager/package.json","types":["devDependencies"]},{"file":"/packages/app-theme/package.json","types":["devDependencies"]},{"file":"/packages/app-theme-manager/package.json","types":["devDependencies"]},{"file":"/packages/app-trash-bin/package.json","types":["devDependencies"]},{"file":"/packages/app-utils/package.json","types":["devDependencies"]},{"file":"/packages/app-wcp/package.json","types":["devDependencies"]},{"file":"/packages/app-website/package.json","types":["devDependencies"]},{"file":"/packages/app-websockets/package.json","types":["devDependencies"]},{"file":"/packages/aws-sdk/package.json","types":["devDependencies"]},{"file":"/packages/cli/package.json","types":["dependencies"]},{"file":"/packages/cli-plugin-dependencies/package.json","types":["devDependencies"]},{"file":"/packages/cli-plugin-deploy-pulumi/package.json","types":["devDependencies"]},{"file":"/packages/cli-plugin-extensions/package.json","types":["devDependencies"]},{"file":"/packages/cli-plugin-scaffold/package.json","types":["devDependencies"]},{"file":"/packages/cli-plugin-scaffold-admin-app-module/package.json","types":["devDependencies"]},{"file":"/packages/cli-plugin-scaffold-ci/package.json","types":["devDependencies"]},{"file":"/packages/cli-plugin-scaffold-extensions/package.json","types":["devDependencies"]},{"file":"/packages/cli-plugin-scaffold-graphql-service/package.json","types":["devDependencies"]},{"file":"/packages/cli-plugin-scaffold-react-component/package.json","types":["devDependencies"]},{"file":"/packages/cli-plugin-scaffold-react-component/template/package.json","types":["devDependencies"]},{"file":"/packages/cli-plugin-scaffold-workspaces/package.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb-es/dependencies.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb-os/dependencies.json","types":["devDependencies"]},{"file":"/packages/cwp-template-aws/template/ddb/dependencies.json","types":["devDependencies"]},{"file":"/packages/data-migration/package.json","types":["devDependencies"]},{"file":"/packages/db/package.json","types":["devDependencies"]},{"file":"/packages/db-dynamodb/package.json","types":["devDependencies"]},{"file":"/packages/di-container/package.json","types":["devDependencies"]},{"file":"/packages/error/package.json","types":["devDependencies"]},{"file":"/packages/feature-flags/package.json","types":["devDependencies"]},{"file":"/packages/form/package.json","types":["devDependencies"]},{"file":"/packages/handler/package.json","types":["devDependencies"]},{"file":"/packages/handler-aws/package.json","types":["devDependencies"]},{"file":"/packages/handler-client/package.json","types":["devDependencies"]},{"file":"/packages/handler-db/package.json","types":["devDependencies"]},{"file":"/packages/handler-graphql/package.json","types":["devDependencies"]},{"file":"/packages/i18n/package.json","types":["devDependencies"]},{"file":"/packages/i18n-react/package.json","types":["devDependencies"]},{"file":"/packages/ioc/package.json","types":["devDependencies"]},{"file":"/packages/logger/package.json","types":["devDependencies"]},{"file":"/packages/migrations/package.json","types":["devDependencies"]},{"file":"/packages/plugins/package.json","types":["devDependencies"]},{"file":"/packages/project-utils/package.json","types":["dependencies"]},{"file":"/packages/pubsub/package.json","types":["devDependencies"]},{"file":"/packages/pulumi/package.json","types":["devDependencies"]},{"file":"/packages/pulumi-aws/package.json","types":["devDependencies"]},{"file":"/packages/pulumi-sdk/package.json","types":["devDependencies"]},{"file":"/packages/react-composition/package.json","types":["devDependencies"]},{"file":"/packages/react-rich-text-renderer/package.json","types":["devDependencies"]},{"file":"/packages/react-router/package.json","types":["devDependencies"]},{"file":"/packages/serverless-cms-aws/package.json","types":["devDependencies"]},{"file":"/packages/tasks/package.json","types":["devDependencies"]},{"file":"/packages/theme/package.json","types":["devDependencies"]},{"file":"/packages/ui/package.json","types":["devDependencies"]},{"file":"/packages/ui-composer/package.json","types":["devDependencies"]},{"file":"/packages/utils/package.json","types":["devDependencies"]},{"file":"/packages/validation/package.json","types":["devDependencies"]},{"file":"/packages/wcp/package.json","types":["devDependencies"]},{"file":"/cypress-tests/package.json","types":["devDependencies"]}]},{"version":"4.9.5","files":[{"file":"/packages/api-file-manager-aco/package.json","types":["devDependencies"]}]}]}]

packages/cli/files/references.json

@@ -54,7 +54,7 @@ module.exports = function ({ host, port, https, allowedHost, proxy, paths }) {
         // Enable HTTPS if the HTTPS environment variable is set to 'true'
         ...server,
         client: {
-            overlay: true,
+            overlay: false,
             // Silence WebpackDevServer's own logs since they're generally not useful.
             // It will still show compile warnings and errors with this setting.
             logging: "warn",