fix(app-apw): use built-in decorator factories (#4110)

packages/app-aco/src/components/AdvancedSearch/domain/FilterRepository.ts

@@ -88,7 +88,7 @@ export class FilterRepository {
 
         const response = await this.runWithLoading<FilterDTO>(
             this.gateway.create({ ...filterStorage, id, namespace: this.namespace }),
-            "Creating filter",
+            "Creating filter...",
             `Filter "${filterStorage.name}" was successfully created.`
         );
 
@@ -108,7 +108,7 @@ export class FilterRepository {
         const filterStorage = FilterMapper.toStorage(filter);
         const response = await this.runWithLoading<FilterDTO>(
             this.gateway.update(filterStorage),
-            "Updating filter",
+            "Updating filter...",
             `Filter "${filterStorage.name}" was successfully updated.`
         );
 
@@ -142,7 +142,7 @@ export class FilterRepository {
 
         const response = await this.runWithLoading<boolean>(
             this.gateway.delete(id),
-            "Deleting filter",
+            "Deleting filter...",
             `Filter "${filter.name}" was successfully deleted.`
         );
 

packages/app-admin-auth0/src/Auth0.tsx

@@ -2,12 +2,7 @@ import React, { Fragment, useCallback, useEffect, useRef, useState } from "react
 import gql from "graphql-tag";
 import { useApolloClient } from "@apollo/react-hooks";
 import get from "lodash/get";
-import {
-    LoginScreenRenderer,
-    useTenancy,
-    createDecorator,
-    useTags
-} from "@webiny/app-serverless-cms";
+import { LoginScreenRenderer, useTenancy, useTags } from "@webiny/app-serverless-cms";
 import {
     createAuthentication,
     Auth0Options,
@@ -89,7 +84,7 @@ const AppClientIdLoader = ({
 };
 
 const createLoginScreenPlugin = (params: Auth0Props) => {
-    return createDecorator(LoginScreenRenderer, () => {
+    return LoginScreenRenderer.createDecorator(() => {
         return function Auth0LoginScreen({ children }) {
             const { installer } = useTags();
 

packages/app-admin-users-cognito/src/CognitoLogin.tsx

@@ -1,12 +1,12 @@
 import React, { useMemo } from "react";
 import { createAuthentication, CreateAuthenticationConfig } from "~/createAuthentication";
-import { AddUserMenuItem, createDecorator, LoginScreenRenderer, Plugin } from "@webiny/app-admin";
+import { AddUserMenuItem, LoginScreenRenderer, Plugin } from "@webiny/app-admin";
 import { UserInfo } from "~/plugins/userMenu/userInfo";
 import { SignOut } from "~/plugins/userMenu/signOut";
 
 const createLoginScreenDecorator = (config?: CreateAuthenticationConfig) => {
     const LoginComponent = createAuthentication(config);
-    return createDecorator(LoginScreenRenderer, () => {
+    return LoginScreenRenderer.createDecorator(() => {
         return function LoginScreen({ children }) {
             return <LoginComponent>{children}</LoginComponent>;
         };

packages/app-file-manager/src/modules/FileManagerRenderer/FileManagerView/index.tsx

@@ -1,6 +1,6 @@
 import React from "react";
+import { createDecorator } from "@webiny/react-composition";
 import {
-    createDecorator,
     DialogsProvider,
     FileManagerFileItem,
     FileManagerOnChange,

packages/app-headless-cms/src/admin/components/ContentModelEditor/ContentModelEditor.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { CompositionScope, makeDecoratable } from "@webiny/app-admin";
+import { makeDecoratable } from "@webiny/app-admin";
 import { Prompt } from "@webiny/react-router";
 import styled from "@emotion/styled";
 import { css } from "emotion";

packages/app-page-builder/src/PageBuilder.tsx

@@ -1,6 +1,6 @@
 import React, { Fragment } from "react";
 import { HasPermission } from "@webiny/app-security";
-import { Plugins, AddMenu as Menu, createProviderPlugin, createDecorator } from "@webiny/app-admin";
+import { Plugins, AddMenu as Menu, createProviderPlugin } from "@webiny/app-admin";
 import { Global, css } from "@emotion/react";
 import { PageBuilderProvider as ContextProvider } from "./contexts/PageBuilder";
 import { ReactComponent as PagesIcon } from "./admin/assets/table_chart-24px.svg";
@@ -104,7 +104,7 @@ const EditorLoader = React.lazy(() =>
     }))
 );
 
-const EditorRendererPlugin = createDecorator(EditorRenderer, () => {
+const EditorRendererPlugin = EditorRenderer.createDecorator(() => {
     return function Editor(props) {
         return <EditorLoader {...props} />;
     };

packages/app-page-builder/src/admin/components/BulkActions/SecureActionDuplicate.tsx

@@ -4,9 +4,8 @@ import { observer } from "mobx-react-lite";
 import { PageListConfig } from "~/admin/config/pages";
 import { usePagesPermissions } from "~/hooks/permissions";
 import { ActionDuplicate } from "~/admin/components/BulkActions/ActionDuplicate";
-import { createDecorator } from "@webiny/react-composition";
 
-export const SecureActionDuplicate = createDecorator(ActionDuplicate, Original => {
+export const SecureActionDuplicate = ActionDuplicate.createDecorator(Original => {
     return observer(() => {
         const { canWrite: pagesCanWrite } = usePagesPermissions();
         const { folderLevelPermissions: flp } = useFolders();

packages/app-page-builder/src/admin/components/Table/Table/Actions/SecureDuplicatePage.tsx

@@ -1,11 +1,10 @@
 import React, { useMemo } from "react";
 import { useFolders } from "@webiny/app-aco";
-import { createDecorator } from "@webiny/react-composition";
 import { usePagesPermissions } from "~/hooks/permissions";
 import { usePage } from "~/admin/views/Pages/hooks/usePage";
 import { DuplicatePage } from "./DuplicatePage";
 
-export const SecureDuplicatePage = createDecorator(DuplicatePage, Original => {
+export const SecureDuplicatePage = DuplicatePage.createDecorator(Original => {
     return function SecureDuplicatePageRenderer() {
         const { page } = usePage();
         const { folderLevelPermissions: flp } = useFolders();

packages/app-page-builder/src/admin/plugins/pageDetails/header/pageOptionsMenu/DuplicatePage/SecureDuplicatePage.tsx

@@ -1,11 +1,10 @@
 import React, { useMemo } from "react";
 import { useFolders } from "@webiny/app-aco";
-import { createDecorator } from "@webiny/react-composition";
 import { usePage } from "~/admin/views/Pages/PageDetails";
 import { usePagesPermissions } from "~/hooks/permissions";
 import { DuplicatePage } from "./DuplicatePage";
 
-export const SecureDuplicatePage = createDecorator(DuplicatePage, Original => {
+export const SecureDuplicatePage = DuplicatePage.createDecorator(Original => {
     return function SecurePageDetailsDuplicatePageRenderer() {
         const { page } = usePage();
         const { folderLevelPermissions: flp } = useFolders();

packages/lexical-editor-pb-element/src/plugins/HeadingPlugin.tsx

@@ -1,13 +1,12 @@
 import React from "react";
-import { createDecorator } from "@webiny/react-composition";
 import { useActiveElementId } from "@webiny/app-page-builder/editor/hooks/useActiveElementId";
 import { Element } from "@webiny/app-page-builder-elements/types";
 import Heading from "@webiny/app-page-builder/editor/plugins/elements/heading/Heading";
 import { PeTextRenderer } from "~/components/PeTextRenderer";
 import { useElementVariableValue } from "@webiny/app-page-builder/editor/hooks/useElementVariableValue";
 import { isValidLexicalData } from "@webiny/lexical-editor";
 
-export const HeadingPlugin = createDecorator(Heading, Original => {
+export const HeadingPlugin = Heading.createDecorator(Original => {
     return function HeadingPlugin({ element, ...rest }): JSX.Element {
         const [activeElementId] = useActiveElementId();
         const variableValue = useElementVariableValue(element);

packages/lexical-editor-pb-element/src/plugins/ParagraphPlugin.tsx

@@ -1,13 +1,12 @@
 import React from "react";
-import { createDecorator } from "@webiny/react-composition";
 import { useActiveElementId } from "@webiny/app-page-builder/editor/hooks/useActiveElementId";
 import { Element } from "@webiny/app-page-builder-elements/types";
 import Paragraph from "@webiny/app-page-builder/editor/plugins/elements/paragraph/Paragraph";
 import { PeTextRenderer } from "~/components/PeTextRenderer";
 import { isValidLexicalData } from "@webiny/lexical-editor";
 import { useElementVariableValue } from "@webiny/app-page-builder/editor/hooks/useElementVariableValue";
 
-export const ParagraphPlugin = createDecorator(Paragraph, Original => {
+export const ParagraphPlugin = Paragraph.createDecorator(Original => {
     return function ParagraphPlugin({ element, ...rest }): JSX.Element {
         const [activeElementId] = useActiveElementId();
         const variableValue = useElementVariableValue(element);

packages/lexical-editor-pb-element/src/plugins/elementSettings/variables/RichVariableInputPlugin.tsx

@@ -1,11 +1,10 @@
 import React from "react";
-import { createDecorator } from "@webiny/react-composition";
 import { RichVariableInput } from "@webiny/app-page-builder/editor/plugins/elementSettings/variable/RichVariableInput";
 import { LexicalVariableInputPlugin } from "~/plugins/elementSettings/variables/LexicalVariableInputPlugin";
 import { useVariable } from "@webiny/app-page-builder/hooks/useVariable";
 import { isValidLexicalData } from "@webiny/lexical-editor";
 
-export const RichVariableInputPlugin = createDecorator(RichVariableInput, Original => {
+export const RichVariableInputPlugin = RichVariableInput.createDecorator(Original => {
     return function RichVariableInputPlugin({ variableId }) {
         const { value } = useVariable(variableId);
         if (!isValidLexicalData(value)) {

packages/lexical-editor-pb-element/src/plugins/elementSettings/variables/TextVariableInputPlugin.tsx

@@ -1,11 +1,10 @@
 import React from "react";
-import { createDecorator } from "@webiny/react-composition";
 import TextVariableInput from "@webiny/app-page-builder/editor/plugins/elementSettings/variable/TextVariableInput";
 import { LexicalVariableInputPlugin } from "~/plugins/elementSettings/variables/LexicalVariableInputPlugin";
 import { isValidLexicalData } from "@webiny/lexical-editor";
 import { useVariable } from "@webiny/app-page-builder/hooks/useVariable";
 
-export const TextVariableInputPlugin = createDecorator(TextVariableInput, Original => {
+export const TextVariableInputPlugin = TextVariableInput.createDecorator(Original => {
     return function TextVariableInputPlugin({ variableId }): JSX.Element {
         const { value } = useVariable(variableId);
         if (!isValidLexicalData(value)) {

scripts/buildPackages/src/buildPackages.ts

@@ -9,6 +9,7 @@ import { getBuildMeta } from "./getBuildMeta";
 import { buildPackageInNewProcess, buildPackageInSameProcess } from "./buildSinglePackage";
 import { MetaJSON, Package } from "./types";
 import { getHardwareInfo } from "./getHardwareInfo";
+import execa from "execa";
 
 class BuildError extends Error {
     private workspace: string;
@@ -39,6 +40,9 @@ export const buildPackages = async () => {
 
     printHardwareReport();
 
+    console.log("Check Typescript");
+    await execa("yarn", ["tsc", "--version"], { stdio: "inherit" });
+
     let packagesWhitelist: string[] = [];
     if (options.p) {
         if (Array.isArray(options.p)) {