How to use @webiny/app-admin - 10 common examples

const centerAlign = css({
    "*:first-child": {
        marginLeft: "auto !important",
        marginRight: "auto !important"
    }
});

export default compose(
    shouldUpdate((props, nextProps) => {
        return !isEqual(props, nextProps);
    }),
    connect(
        null,
        { updateElement }
    ),
    withSnackbar(),
    graphql(oembedQuery, {
        skip: ({ element }) => {
            const source = get(element, "data.source") || {};
            const oembed = get(element, "data.oembed") || {};

            return !source.url || isEqual(oembed.source, source);
        },
        options: ({ element, updateElement, showSnackbar, onData = d => d }) => {
            const source = get(element, "data.source") || {};
            return {
                variables: source,
                onCompleted: data => {
                    const { data: oembed, error } = get(data, "pageBuilder.oembedData");
                    if (oembed) {
                        // Store loaded oembed data
                        updateElement({

export function usePublishRevisionHandler({ page }) {
    const client = useApolloClient();
    const { showSnackbar } = useSnackbar();

    const publishRevision = async revision => {
        const { data: res } = await client.mutate({
            mutation: PUBLISH_REVISION,
            variables: { id: revision.id },
            refetchQueries: ["PbListPages"],
            update: (cache, { data }) => {
                // Don't do anything if there was an error during publishing!
                if (data.pageBuilder.publishRevision.error) {
                    return;
                }

                const getPageQuery = GET_PAGE();

                // Update revisions
                const pageFromCache = cache.readQuery({

import DarkMode from "@webiny/app-admin/plugins/UserMenu/plugins/DarkMode";
import DefaultHandle from "@webiny/app-admin/plugins/UserMenu/plugins/DefaultHandle";
import Help from "@webiny/app-admin/plugins/UserMenu/plugins/Help";
import SendFeedback from "@webiny/app-admin/plugins/UserMenu/plugins/Feedback";
import install from "@webiny/app-admin/plugins/install";

import init from "./init";

export default [
    // Layout plugins
    Header,
    Content,
    snackbar("layout"),
    snackbar("empty-layout"),
    dialog("layout"),
    dialog("empty-layout"),
    Footer,
    // Header plugins
    Menu,
    Logo,
    FileManager,
    UserMenu,
    globalSearch,
    globalSearchHotkey,
    DarkMode,
    DefaultHandle,
    Help,
    SendFeedback,
    install,
    ...init
];

// User menu plugins
import DarkMode from "@webiny/app-admin/plugins/UserMenu/plugins/DarkMode";
import DefaultHandle from "@webiny/app-admin/plugins/UserMenu/plugins/DefaultHandle";
import Help from "@webiny/app-admin/plugins/UserMenu/plugins/Help";
import SendFeedback from "@webiny/app-admin/plugins/UserMenu/plugins/Feedback";
import install from "@webiny/app-admin/plugins/install";

import init from "./init";

export default [
    // Layout plugins
    Header,
    Content,
    snackbar("layout"),
    snackbar("empty-layout"),
    dialog("layout"),
    dialog("empty-layout"),
    Footer,
    // Header plugins
    Menu,
    Logo,
    FileManager,
    UserMenu,
    globalSearch,
    globalSearchHotkey,
    DarkMode,
    DefaultHandle,
    Help,
    SendFeedback,
    install,
    ...init
];

// User menu plugins
import DarkMode from "@webiny/app-admin/plugins/UserMenu/plugins/DarkMode";
import DefaultHandle from "@webiny/app-admin/plugins/UserMenu/plugins/DefaultHandle";
import Help from "@webiny/app-admin/plugins/UserMenu/plugins/Help";
import SendFeedback from "@webiny/app-admin/plugins/UserMenu/plugins/Feedback";
import install from "@webiny/app-admin/plugins/install";

import init from "./init";

export default [
    // Layout plugins
    Header,
    Content,
    snackbar("layout"),
    snackbar("empty-layout"),
    dialog("layout"),
    dialog("empty-layout"),
    Footer,
    // Header plugins
    Menu,
    Logo,
    FileManager,
    UserMenu,
    globalSearch,
    globalSearchHotkey,
    DarkMode,
    DefaultHandle,
    Help,
    SendFeedback,
    install,
    ...init

import { globalSearch, globalSearchHotkey } from "@webiny/app-admin/plugins/GlobalSearch";

// User menu plugins
import DarkMode from "@webiny/app-admin/plugins/UserMenu/plugins/DarkMode";
import DefaultHandle from "@webiny/app-admin/plugins/UserMenu/plugins/DefaultHandle";
import Help from "@webiny/app-admin/plugins/UserMenu/plugins/Help";
import SendFeedback from "@webiny/app-admin/plugins/UserMenu/plugins/Feedback";
import install from "@webiny/app-admin/plugins/install";

import init from "./init";

export default [
    // Layout plugins
    Header,
    Content,
    snackbar("layout"),
    snackbar("empty-layout"),
    dialog("layout"),
    dialog("empty-layout"),
    Footer,
    // Header plugins
    Menu,
    Logo,
    FileManager,
    UserMenu,
    globalSearch,
    globalSearchHotkey,
    DarkMode,
    DefaultHandle,
    Help,
    SendFeedback,
    install,

) : (
                <div>No tags assigned.</div>
            )}
            <div>
                <a> setEdit(true)}&gt;
                     Edit
                </a>
            </div>
        
    );
}

export default compose(
    graphql(updateFileBySrc, { name: "gqlUpdateFileBySrc" }),
    withSnackbar()
)(Tags);

)}
                
            )}
        
    );
};

export default compose(
    connect(
        state => ({ page: omit(getPage(state), ["content"]) }),
        null,
        null,
        { areStatePropsEqual: isEqual }
    ),
    withSnackbar(),
    withRouter
)(PublishPageButton);

)}
                    
                
            
        
    );
};

export default compose(
    connect(
        state => ({ page: omit(getPage(state), ["content"]) }),
        { deactivatePlugin, updateRevision }
    ),
    withSnackbar(),
    withKeyHandler(),
    withState("active", "setActive", "pb-editor-page-settings-general"),
    withHandlers({
        savePage: ({ showSnackbar, updateRevision }) => (page: Object) =>
            updateRevision(page, {
                onFinish: () => showSnackbar("Settings saved")
            })
    }),
    lifecycle({
        componentDidMount() {
            this.props.addKeyHandler("escape", e => {
                e.preventDefault();
                this.props.deactivatePlugin({ name: "pb-editor-page-settings-bar" });
            });
        },
        componentWillUnmount() {

function Name({ file }: *) {
    const [editing, setEdit] = useState(false);
    const name = file.name || "";

    const { showSnackbar } = useSnackbar();
    const client = useApolloClient();

    const { queryParams } = useFileManager();

    if (editing) {
        return (
            <form name=""> {
                    setEdit(false);
                    await client.mutate({
                        mutation: UPDATE_FILE,
                        variables: {
                            id: file.id,</form>