How to use the @webiny/plugins.getPlugins function in @webiny/plugins

list: Array,
        current: ?GlobalSearch
    }
};

class SearchBar extends React.Component<*, State> {
    state = {
        active: false,
        searchTerm: {
            previous: "",
            current: ""
        },
        plugins: {
            // List of all registered "global-search" plugins.
            list: getPlugins("global-search"),
            hotKeys: getPlugins("global-search-prevent-hotkey"),
            // Current plugin - set by examining current route and its query params (on construct).
            current: undefined
        }
    };

    /**
     * Helps us trigger some of the downshift's methods (eg. clearSelection) and helps us to avoid adding state.
     */
    downshift: any = React.createRef();

    /**
     * At some point we must programmatically focus the input.
     */
    input: any = React.createRef();

    /**

const UsersForm = () => {
    const { form: crudForm } = useCrud();

    const auth = getPlugins("security-authentication-provider")
        .filter(pl => pl.hasOwnProperty("renderUserForm"))
        .pop();

    if (!auth) {
        throw Error(
            `You must register a "security-authentication-provider" plugin to render User form!`
        );
    }

    return (
        <form>
            {({ data, form, Bind }) =&gt; (
                
                    {crudForm.loading &amp;&amp; }
                    
                    </form>

function getGroups() {
        const presetFieldPlugins = getPlugins("form-editor-field-type")
            .filter(pl => pl.field.group)
            .filter(pl => {
                if (pl.field.unique) {
                    return !getField({ name: pl.field.name });
                }
                return true;
            });

        return getPlugins("form-editor-field-group").map(pl => ({
            ...pl.group,
            name: pl.name,
            fields: presetFieldPlugins.filter(f => f.field.group === pl.name).map(pl => pl.field)
        }));
    }

const PagesListDesignSettings = ({ pageBuilder: { theme }, Bind, data }: Object) => {
    const components = getPlugins("pb-page-element-pages-list-component");

    return (
        
            
                
                    
                        <select label="{&quot;Design&quot;}">
                            {components.map(cmp =&gt; (
                                <option value="{cmp.componentName}">
                                    {cmp.title}</option></select>

const DeleteAction = ({ element, children, deleteElement }: Object) => {
    const plugin = getPlugins("pb-page-element").find(pl => pl.elementType === element.type);
    if (!plugin) {
        return null;
    }

    if (typeof plugin.canDelete === "function") {
        if (!plugin.canDelete({ element })) {
            return null;
        }
    }

    return React.cloneElement(children, { onClick: deleteElement });
};

const validators = useMemo(() => {
        return getPlugins("form-editor-field-validator")
            .map(plugin => plugin.validator)
            .map(validator => {
                if (fieldType.field.validators.includes(validator.name)) {
                    return { optional: true, validator: validator };
                } else if (fieldType.field.validators.includes(`!${validator.name}`)) {
                    return { optional: false, validator: validator };
                }
                return null;
            })
            .filter(Boolean)
            .sort((a, b) => {
                if (!a.optional && b.optional) {
                    return -1;
                }

                if (a.optional && !b.optional) {

const UsersForm = () => {
    const auth = getPlugins("security-authentication-provider")
        .filter(pl => pl.hasOwnProperty("renderUserAccountForm"))
        .pop();

    if (!auth) {
        throw Error(
            `You must register a "security-authentication-provider" plugin to render Account form!`
        );
    }

    const { renderUserAccountForm } = auth;

    const [{ loading, user }, setState] = useReducer((prev, next) => ({ ...prev, ...next }), {
        loading: true,
        user: { data: {} }
    });

withProps(({ element }) => ({
        plugin: element
            ? getPlugins("pb-page-element").find(pl => pl.elementType === element.type)
            : null
    })),
    withHandlers({

const Toolbar = ({ activePluginsTop }: Object) => {
    const actionsTop = getPlugins("pb-editor-toolbar-top");
    const actionsBottom = getPlugins("pb-editor-toolbar-bottom");

    return (
        
            
                {actionsTop
                    .filter(plugin => typeof plugin.renderDrawer === "function")
                    .map(plugin => (
                        
                            {plugin.renderDrawer()}
                        
                    ))}

canDrop,
            canDrag,
            node,
            title,
            draggedNode,
            path,
            treeIndex,
            editItem,
            deleteItem,
            className,
            style,
            didDrop
        } = this.props;
        const nodeTitle = title || node.title;

        const plugin = getPlugins("pb-menu-item").find(pl => pl.menuItem.type === node.type);
        if (!plugin) {
            return null;
        }

        const handle = connectDragSource(<div>{plugin.icon}</div>, {
            dropEffect: "copy"
        });

        const isDraggedDescendant = draggedNode &amp;&amp; isDescendant(draggedNode, node);
        const isLandingPadActive = !didDrop &amp;&amp; isDragging;

        let buttonStyle = { left: -0.5 * scaffoldBlockPxWidth };

        return (
            <div style="{{">
                {toggleChildrenVisibility &amp;&amp;</div>