React Component-based Plugins - Introduce CmsContentFormRendererPlugin

[adrians5j]

Changes

This PR introduces the CmsContentFormRendererPlugin plugin. In other words, it's a React component with the same feature set as the previous the CmsContentFormRendererPlugin (POJO) plugin, which also plays well with extensions.

import React from "react";
import { CmsContentFormRendererPlugin } from "@webiny/app-headless-cms";
import { Grid, Cell } from "@webiny/ui/Grid";
import { Tabs, Tab } from "@webiny/ui/Tabs";
import { useSecurity } from "@webiny/app-security";

interface LayoutProps {
    fields: Record<string, JSX.Element>;
}

const PizzaLayout = ({ fields }: LayoutProps) => {
    // Access security identity.
    const { getPermission } = useSecurity();

    // Get the necessary permission.
    const bakeryPermission = getPermission("bakery");

    // Check if the user has the permission to edit a recipe.
    const canEditRecipe = bakeryPermission && bakeryPermission["canEditRecipe"] === true;

    console.log('nice')
    return (
        <Tabs>
            <Tab label="General">
                <Grid>
                    <Cell span={12}>{fields["name"]}</Cell>
                </Grid>
                <Grid>
                    <Cell span={6}>{fields["price"]}</Cell>
                    <Cell span={6}>{fields["numberOfIngredients"]}</Cell>
                </Grid>
            </Tab>
            {/* Hide the Recipe tab if the user doesn't have the required permission. */}
            {canEditRecipe && (
                <Tab label="Recipe">
                    <Grid>
                        <Cell span={12}>{fields["recipe"]}</Cell>
                    </Grid>
                </Tab>
            )}
            <Tab label="History">
                <Grid>
                    <Cell span={12}>{fields["history"]}</Cell>
                </Grid>
            </Tab>
        </Tabs>
    );
};

export const Extension = () => {
    return <CmsContentFormRendererPlugin modelId="article" render={PizzaLayout} />;
};

How Has This Been Tested?

Manually.

Documentation

Changelog / update existing doc.