How to use the @webiny/app-admin/components.withSnackbar function in @webiny/app-admin

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({

) : (
                <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() {

"forms-form-details-revision-content",
                                    { refreshForms, form, loading },
                                    { wrapper: false }
                                )}
                            
                        )}
                    
                );
            }}
        
    );
};

export default compose(
    withRouter,
    withSnackbar(),
    withProps(({ location }) => {
        const query = new URLSearchParams(location.search);
        return { formId: query.get("id"), query };
    })
)(FormDetails);

{t`Save settings`}
                                    
                                
                            
                        )}
                    
                
            
        
    );
};

export default compose(withSnackbar())(FormSettings);

);
                    }}
                
            )}
        
    );
}

FileManagerView.defaultProps = {
    multiple: false,
    maxSize: "10mb",
    multipleMaxSize: "100mb",
    multipleMaxCount: 100
};

export default compose(withSnackbar())(FileManagerView);

)}
                                    
                                
                            
                        )}
                    
                );
            }}
        
    );
};

export default compose(
    withRouter,
    withSnackbar(),
    withProps(({ location }) => {
        const query = new URLSearchParams(location.search);
        return { pageId: query.get("id"), query };
    })
)(PageDetails);

if (!data) {
        return null;
    }

    return (
        <div>
            
            
            
        </div>
    );
};

export default compose(
    withRouter,
    withSnackbar(),
    DragDropContext(HTML5Backend)
)(FormEditor);

showSnackbar(t`Your form was published successfully!`);
                                    }, 500);
                                });
                            }}
                        >
                            {data.version > 1 ? t`Publish changes` : t`Publish`}
                        
                    )}
                
            )}
        
    );
};

export default compose(
    withSnackbar(),
    withRouter
)(PublishFormButton);