fix(react-composition): inherit components from parent scopes (#4494)

webiny · Jan 17, 2025 · cb9c54c · cb9c54c
1 parent daa4faa
commit cb9c54c
Show file tree

Hide file tree

Showing 21 changed files with 139 additions and 115 deletions.
diff --git a/...pp-file-manager/src/modules/FileManagerRenderer/FileManagerView/FileManagerViewConfig.tsx b/...pp-file-manager/src/modules/FileManagerRenderer/FileManagerView/FileManagerViewConfig.tsx
@@ -1,11 +1,22 @@
-import { useMemo } from "react";
+import React, { useMemo } from "react";
 import { createConfigurableComponent } from "@webiny/react-properties";
 import { Browser, BrowserConfig } from "./configComponents/Browser";
 import { FileDetails, FileDetailsConfig } from "./configComponents/FileDetails";
 import { getThumbnailRenderer } from "./getThumbnailRenderer";
+import { CompositionScope } from "@webiny/react-composition";
 
 const base = createConfigurableComponent<FileManagerViewConfigData>("FileManagerView");
 
+const ScopedFileManagerViewConfig = ({ children }: { children: React.ReactNode }) => {
+    return (
+        <CompositionScope name={"fm"}>
+            <base.Config>{children}</base.Config>
+        </CompositionScope>
+    );
+};
+
+ScopedFileManagerViewConfig.displayName = "FileManagerViewConfig";
+
 export const FileManagerViewConfig = Object.assign(base.Config, { Browser, FileDetails });
 export const FileManagerViewWithConfig = base.WithConfig;
 

diff --git a/...r/src/modules/FileManagerRenderer/FileManagerView/configComponents/Browser/FileAction.tsx b/...r/src/modules/FileManagerRenderer/FileManagerView/configComponents/Browser/FileAction.tsx
@@ -1,5 +1,4 @@
 import React from "react";
-import { CompositionScope } from "@webiny/react-composition";
 import { AcoConfig, RecordActionConfig } from "@webiny/app-aco";
 
 const { Record } = AcoConfig;
@@ -10,11 +9,9 @@ type FileActionProps = React.ComponentProps<typeof AcoConfig.Record.Action>;
 
 const BaseFileAction = (props: FileActionProps) => {
     return (
-        <CompositionScope name={"fm"}>
-            <AcoConfig>
-                <Record.Action {...props} />
-            </AcoConfig>
-        </CompositionScope>
+        <AcoConfig>
+            <Record.Action {...props} />
+        </AcoConfig>
     );
 };
 

diff --git a/...src/modules/FileManagerRenderer/FileManagerView/configComponents/Browser/FolderAction.tsx b/...src/modules/FileManagerRenderer/FileManagerView/configComponents/Browser/FolderAction.tsx
@@ -1,5 +1,4 @@
 import React from "react";
-import { CompositionScope } from "@webiny/react-composition";
 import { AcoConfig, FolderActionConfig } from "@webiny/app-aco";
 
 const { Folder } = AcoConfig;
@@ -10,11 +9,9 @@ type FolderActionProps = React.ComponentProps<typeof AcoConfig.Folder.Action>;
 
 const BaseFolderAction = (props: FolderActionProps) => {
     return (
-        <CompositionScope name={"fm"}>
-            <AcoConfig>
-                <Folder.Action {...props} />
-            </AcoConfig>
-        </CompositionScope>
+        <AcoConfig>
+            <Folder.Action {...props} />
+        </AcoConfig>
     );
 };
 

diff --git a/...src/modules/FileManagerRenderer/FileManagerView/configComponents/Browser/Table/Column.tsx b/...src/modules/FileManagerRenderer/FileManagerView/configComponents/Browser/Table/Column.tsx
@@ -1,5 +1,4 @@
 import React from "react";
-import { CompositionScope } from "@webiny/react-composition";
 import { AcoConfig, TableColumnConfig as ColumnConfig } from "@webiny/app-aco";
 import { TableItem } from "~/types";
 
@@ -11,11 +10,9 @@ type ColumnProps = React.ComponentProps<typeof AcoConfig.Table.Column>;
 
 const BaseColumn = (props: ColumnProps) => {
     return (
-        <CompositionScope name={"fm"}>
-            <AcoConfig>
-                <Table.Column {...props} />
-            </AcoConfig>
-        </CompositionScope>
+        <AcoConfig>
+            <Table.Column {...props} />
+        </AcoConfig>
     );
 };
 

diff --git a/packages/app-headless-cms/src/admin/components/LexicalCmsEditor/LexicalCmsEditor.tsx b/packages/app-headless-cms/src/admin/components/LexicalCmsEditor/LexicalCmsEditor.tsx
@@ -1,7 +1,6 @@
 import React, { useCallback } from "react";
 import { StaticToolbar } from "@webiny/lexical-editor";
 import { RichTextEditorProps } from "@webiny/lexical-editor/types";
-import { CompositionScope } from "@webiny/react-composition";
 import { LexicalEditor } from "@webiny/app-admin/components/LexicalEditor";
 
 const placeholderStyles: React.CSSProperties = { position: "absolute", top: 40, left: 25 };
@@ -20,11 +19,7 @@ const styles: React.CSSProperties = {
     maxHeight: 350
 };
 
-const toolbar = (
-    <CompositionScope name={"cms"}>
-        <StaticToolbar />
-    </CompositionScope>
-);
+const toolbar = <StaticToolbar />;
 
 export const LexicalCmsEditor = (props: Omit<RichTextEditorProps, "theme">) => {
     const onChange = useCallback(

diff --git a/...eadless-cms/src/admin/config/contentEntries/list/Browser/AdvancedSearch/FieldRenderer.tsx b/...eadless-cms/src/admin/config/contentEntries/list/Browser/AdvancedSearch/FieldRenderer.tsx
@@ -1,5 +1,4 @@
 import React from "react";
-import { CompositionScope } from "@webiny/react-composition";
 import {
     AcoConfig,
     AdvancedSearchFieldRendererConfig as FieldRendererConfig
@@ -23,11 +22,9 @@ const BaseFieldRenderer = ({ modelIds = [], ...props }: FieldRendererProps) => {
     }
 
     return (
-        <CompositionScope name={"cms"}>
-            <AcoConfig>
-                <AdvancedSearch.FieldRenderer {...props} />
-            </AcoConfig>
-        </CompositionScope>
+        <AcoConfig>
+            <AdvancedSearch.FieldRenderer {...props} />
+        </AcoConfig>
     );
 };
 

diff --git a/packages/app-headless-cms/src/admin/config/contentEntries/list/Browser/EntryAction.tsx b/packages/app-headless-cms/src/admin/config/contentEntries/list/Browser/EntryAction.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { CompositionScope, makeDecoratable } from "@webiny/react-composition";
+import { makeDecoratable } from "@webiny/react-composition";
 import { AcoConfig, RecordActionConfig } from "@webiny/app-aco";
 import { IsApplicableToCurrentModel } from "~/admin/config/IsApplicableToCurrentModel";
 
@@ -15,13 +15,11 @@ const BaseEntryAction = makeDecoratable(
     "EntryAction",
     ({ modelIds = [], ...props }: EntryActionProps) => {
         return (
-            <CompositionScope name={"cms"}>
-                <AcoConfig>
-                    <IsApplicableToCurrentModel modelIds={modelIds}>
-                        <Record.Action {...props} />
-                    </IsApplicableToCurrentModel>
-                </AcoConfig>
-            </CompositionScope>
+            <AcoConfig>
+                <IsApplicableToCurrentModel modelIds={modelIds}>
+                    <Record.Action {...props} />
+                </IsApplicableToCurrentModel>
+            </AcoConfig>
         );
     }
 );

diff --git a/packages/app-headless-cms/src/admin/config/contentEntries/list/Browser/FolderAction.tsx b/packages/app-headless-cms/src/admin/config/contentEntries/list/Browser/FolderAction.tsx
@@ -1,5 +1,4 @@
 import React from "react";
-import { CompositionScope } from "@webiny/react-composition";
 import { AcoConfig, FolderActionConfig } from "@webiny/app-aco";
 import { useModel } from "~/admin/hooks";
 
@@ -19,11 +18,9 @@ const BaseFolderAction = ({ modelIds = [], ...props }: FolderActionProps) => {
     }
 
     return (
-        <CompositionScope name={"cms"}>
-            <AcoConfig>
-                <Folder.Action {...props} />
-            </AcoConfig>
-        </CompositionScope>
+        <AcoConfig>
+            <Folder.Action {...props} />
+        </AcoConfig>
     );
 };
 

diff --git a/packages/app-headless-cms/src/admin/config/contentEntries/list/Browser/Table/Column.tsx b/packages/app-headless-cms/src/admin/config/contentEntries/list/Browser/Table/Column.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { CompositionScope, makeDecoratable } from "@webiny/react-composition";
+import { makeDecoratable } from "@webiny/react-composition";
 import { AcoConfig, TableColumnConfig as ColumnConfig } from "@webiny/app-aco";
 import { TableItem } from "~/types";
 import { IsApplicableToCurrentModel } from "~/admin/config/IsApplicableToCurrentModel";
@@ -14,13 +14,11 @@ export interface ColumnProps extends React.ComponentProps<typeof AcoConfig.Table
 
 const BaseColumnComponent = ({ modelIds = [], ...props }: ColumnProps) => {
     return (
-        <CompositionScope name={"cms"}>
-            <AcoConfig>
-                <IsApplicableToCurrentModel modelIds={modelIds}>
-                    <Table.Column {...props} />
-                </IsApplicableToCurrentModel>
-            </AcoConfig>
-        </CompositionScope>
+        <AcoConfig>
+            <IsApplicableToCurrentModel modelIds={modelIds}>
+                <Table.Column {...props} />
+            </IsApplicableToCurrentModel>
+        </AcoConfig>
     );
 };
 

diff --git a/packages/app-headless-cms/src/admin/config/contentEntries/list/ContentEntryListConfig.tsx b/packages/app-headless-cms/src/admin/config/contentEntries/list/ContentEntryListConfig.tsx
@@ -1,10 +1,21 @@
-import { useMemo } from "react";
+import React, { useMemo } from "react";
 import { createConfigurableComponent } from "@webiny/react-properties";
 import { Browser, BrowserConfig } from "./Browser";
+import { CompositionScope } from "@webiny/react-composition";
 
 const base = createConfigurableComponent<ContentEntryListConfig>("ContentEntryListConfig");
 
-export const ContentEntryListConfig = Object.assign(base.Config, { Browser });
+const ScopedContentEntryListConfig = ({ children }: { children: React.ReactNode }) => {
+    return (
+        <CompositionScope name={"cms"}>
+            <base.Config>{children}</base.Config>
+        </CompositionScope>
+    );
+};
+
+ScopedContentEntryListConfig.displayName = "ContentEntryListConfig";
+
+export const ContentEntryListConfig = Object.assign(ScopedContentEntryListConfig, { Browser });
 export const ContentEntryListWithConfig = base.WithConfig;
 
 interface ContentEntryListConfig {

diff --git a/packages/app-page-builder/src/admin/config/pages/list/Browser/FolderAction.tsx b/packages/app-page-builder/src/admin/config/pages/list/Browser/FolderAction.tsx
@@ -1,5 +1,4 @@
 import React from "react";
-import { CompositionScope } from "@webiny/react-composition";
 import { AcoConfig, FolderActionConfig } from "@webiny/app-aco";
 
 const { Folder } = AcoConfig;
@@ -10,11 +9,9 @@ type FolderActionProps = React.ComponentProps<typeof AcoConfig.Folder.Action>;
 
 const BaseFolderAction = (props: FolderActionProps) => {
     return (
-        <CompositionScope name={"pb.page"}>
-            <AcoConfig>
-                <Folder.Action {...props} />
-            </AcoConfig>
-        </CompositionScope>
+        <AcoConfig>
+            <Folder.Action {...props} />
+        </AcoConfig>
     );
 };
 

diff --git a/packages/app-page-builder/src/admin/config/pages/list/Browser/PageAction.tsx b/packages/app-page-builder/src/admin/config/pages/list/Browser/PageAction.tsx
@@ -1,5 +1,4 @@
 import React from "react";
-import { CompositionScope } from "@webiny/react-composition";
 import { AcoConfig, RecordActionConfig } from "@webiny/app-aco";
 
 const { Record } = AcoConfig;
@@ -10,11 +9,9 @@ type PageActionProps = React.ComponentProps<typeof AcoConfig.Record.Action>;
 
 const BasePageAction = (props: PageActionProps) => {
     return (
-        <CompositionScope name={"pb.page"}>
-            <AcoConfig>
-                <Record.Action {...props} />
-            </AcoConfig>
-        </CompositionScope>
+        <AcoConfig>
+            <Record.Action {...props} />
+        </AcoConfig>
     );
 };
 

diff --git a/packages/app-page-builder/src/admin/config/pages/list/Browser/Table/Column.tsx b/packages/app-page-builder/src/admin/config/pages/list/Browser/Table/Column.tsx
@@ -1,5 +1,4 @@
 import React from "react";
-import { CompositionScope } from "@webiny/react-composition";
 import { AcoConfig, TableColumnConfig as ColumnConfig } from "@webiny/app-aco";
 import { TableItem } from "~/types";
 
@@ -9,17 +8,17 @@ export { ColumnConfig };
 
 type ColumnProps = React.ComponentProps<typeof AcoConfig.Table.Column>;
 
-const BaseColumn = (props: ColumnProps) => {
+const BaseColumn: React.FC<ColumnProps> = props => {
     return (
-        <CompositionScope name={"pb.page"}>
-            <AcoConfig>
-                <Table.Column {...props} />
-            </AcoConfig>
-        </CompositionScope>
+        <AcoConfig>
+            <Table.Column {...props} />
+        </AcoConfig>
     );
 };
 
 export const Column = Object.assign(BaseColumn, {
     useTableRow: Table.Column.createUseTableRow<TableItem>(),
     isFolderRow: Table.Column.isFolderRow
 });
+
+Column["displayName"] = "Column";
diff --git a/packages/app-page-builder/src/admin/config/pages/list/PageListConfig.tsx b/packages/app-page-builder/src/admin/config/pages/list/PageListConfig.tsx
@@ -1,10 +1,21 @@
-import { useMemo } from "react";
+import React, { useMemo } from "react";
 import { createConfigurableComponent } from "@webiny/react-properties";
 import { Browser, BrowserConfig } from "./Browser";
+import { CompositionScope } from "@webiny/react-composition";
 
 const base = createConfigurableComponent<PageListConfig>("PageListConfig");
 
-export const PageListConfig = Object.assign(base.Config, { Browser });
+const ScopedPagesListConfig = ({ children }: { children: React.ReactNode }) => {
+    return (
+        <CompositionScope name={"pb.pages"}>
+            <base.Config>{children}</base.Config>
+        </CompositionScope>
+    );
+};
+
+ScopedPagesListConfig.displayName = "PagesListConfig";
+
+export const PageListConfig = Object.assign(ScopedPagesListConfig, { Browser });
 export const PageListWithConfig = base.WithConfig;
 
 interface PageListConfig {

diff --git a/packages/app-page-builder/src/admin/plugins/routes.tsx b/packages/app-page-builder/src/admin/plugins/routes.tsx
@@ -71,7 +71,7 @@ const plugins: RoutePlugin[] = [
                         <RenderPluginsLoader>
                             <AdminLayout>
                                 <Helmet title={"Page Builder - Pages"} />
-                                <CompositionScope name={"pb.page"}>
+                                <CompositionScope name={"pb.pages"}>
                                     <Pages />
                                 </CompositionScope>
                             </AdminLayout>

diff --git a/packages/app-trash-bin/src/Presentation/configs/list/Browser/Table/Column.tsx b/packages/app-trash-bin/src/Presentation/configs/list/Browser/Table/Column.tsx
@@ -1,5 +1,4 @@
 import React from "react";
-import { CompositionScope } from "@webiny/react-composition";
 import { AcoConfig, TableColumnConfig as ColumnConfig } from "@webiny/app-aco";
 import { TrashBinItemDTO } from "~/Domain";
 
@@ -11,11 +10,9 @@ type ColumnProps = React.ComponentProps<typeof AcoConfig.Table.Column>;
 
 const BaseColumn = (props: ColumnProps) => {
     return (
-        <CompositionScope name={"trash"}>
-            <AcoConfig>
-                <Table.Column {...props} />
-            </AcoConfig>
-        </CompositionScope>
+        <AcoConfig>
+            <Table.Column {...props} />
+        </AcoConfig>
     );
 };
 

diff --git a/packages/app-trash-bin/src/Presentation/configs/list/Browser/Table/Sorting.tsx b/packages/app-trash-bin/src/Presentation/configs/list/Browser/Table/Sorting.tsx
@@ -1,5 +1,4 @@
 import React from "react";
-import { CompositionScope } from "@webiny/react-composition";
 import { AcoConfig, TableSortingConfig as SortingConfig } from "@webiny/app-aco";
 
 const { Table } = AcoConfig;
@@ -10,10 +9,8 @@ type SortingProps = React.ComponentProps<typeof AcoConfig.Table.Sorting>;
 
 export const Sorting = (props: SortingProps) => {
     return (
-        <CompositionScope name={"trash"}>
-            <AcoConfig>
-                <Table.Sorting {...props} />
-            </AcoConfig>
-        </CompositionScope>
+        <AcoConfig>
+            <Table.Sorting {...props} />
+        </AcoConfig>
     );
 };
diff --git a/packages/app-trash-bin/src/Presentation/configs/list/TrashBinListConfig.tsx b/packages/app-trash-bin/src/Presentation/configs/list/TrashBinListConfig.tsx
@@ -1,10 +1,21 @@
-import { useMemo } from "react";
+import React, { useMemo } from "react";
 import { createConfigurableComponent } from "@webiny/react-properties";
 import { Browser, BrowserConfig } from "./Browser";
+import { CompositionScope } from "@webiny/react-composition";
 
 const base = createConfigurableComponent<TrashBinListConfig>("TrashBinListConfig");
 
-export const TrashBinListConfig = Object.assign(base.Config, { Browser });
+const ScopedTrashBinListConfig = ({ children }: { children: React.ReactNode }) => {
+    return (
+        <CompositionScope name={"trash"}>
+            <base.Config>{children}</base.Config>
+        </CompositionScope>
+    );
+};
+
+ScopedTrashBinListConfig.displayName = "TrashBinListConfig";
+
+export const TrashBinListConfig = Object.assign(ScopedTrashBinListConfig, { Browser });
 export const TrashBinListWithConfig = base.WithConfig;
 
 interface TrashBinListConfig {