ra-enterprise

react-admin ≥ 4.10.6

Preconfigured components replacing the default react-admin ones to quickly integrate the Enterprise Edition modules.

Test it live on the Enterprise Edition Storybook and in the e-commerce demo.

ra-enterprise exports the following "augmented" components: <Admin>, <Layout>, and <AppBar>. Use them instead of the react-admin versions to get additional features:

- import { Admin } from 'react-admin';
+ import { Admin } from '@react-admin/ra-enterprise';

const App = ()  => (
    <Admin dataProvider={dataProvider}>
        { /** Put your resources here */ }
    </Admin>
);

Installation

npm install --save @react-admin/ra-enterprise
# or
yarn add @react-admin/ra-enterprise

Tip: ra-enterprise is part of the React-Admin Enterprise Edition, and hosted in a private npm registry. You need to subscribe to one of the Enterprise Edition plans to access this package.

`<Admin>`

ra-enterprise exports a replacement for the <Admin> component, which pre-configures many of the enterprise edition modules. It comes with:

A custom layout containing a breadcrumb based on resources and a compact menu with submenus in sliding panels (from ra-navigation)
A custom Appbar, adding a locale and a theme switcher
English messages including the additional messages required by ra-realtime, ra-relationships, ra-tree, ra-search, ra-audit-log, and ra-form-layout.
An <AppLocationContext>, to allow the use of ra-navigation features.
The Tour context, allowing to show guided tours everywhere in the admin (from ra-tour)

This modifies the look and feel of react-admin:

ra-enterprise Admin

To be compared with the default look and feel:

Classic Admin

Usage

Replace react-admin's <Admin> component the same component from ra-enterprise:

- import { Admin } from 'react-admin';
+ import { Admin } from '@react-admin/ra-enterprise';

const App = ()  => (
    <Admin dataProvider={dataProvider}>
        { /** Put your resources here */ }
    </Admin>
);

Properties

The alternative <Admin> accepts the same properties as the default one. Please read the documentation about the react-admin <Admin> to see all the available properties.

In addition, you can pass the following properties to customize the ra-enterprise features:

Prop	Required	Type	Default	Description
`i18nProvider`	Optional	`object`	-	Replace the ra-enterprise i18nProvider
`lightTheme`	Optional	`object`	-	Override the light mode with your own light theme
`darkTheme`	Optional	`object`	-	Override the dark mode with your own dark theme

Examples

Basic usage

import { Admin } from '@react-admin/ra-enterprise';

const dataProvider = {
    // Connect to your API
};

const App = () => (
    <Admin dataProvider={dataProvider}>{/** Put your resources here */}</Admin>
);

import { Admin } from '@react-admin/ra-enterprise';

const dataProvider = {
    // Connect to your API
};

const App = () => (
    <Admin dataProvider={dataProvider}>{/** Put your resources here */}</Admin>
);

Override the dark theme

import { Admin } from '@react-admin/ra-enterprise';

const darkTheme = {
    palette: {
        mode: 'dark', // Don't forget to specify the palette mode
        primary: {
            main: '#90caf9',
        },
        secondary: {
            main: '#ffff00',
        },
    },
};

const dataProvider = {
    // Connect to your API
};

const App = () => (
    <Admin dataProvider={dataProvider} darkTheme={darkTheme}>
        {/** Put your resources here */}
    </Admin>
);

import { Admin } from '@react-admin/ra-enterprise';

const darkTheme = {
    palette: {
        mode: 'dark', // Don't forget to specify the palette mode
        primary: {
            main: '#90caf9',
        },
        secondary: {
            main: '#ffff00',
        },
    },
};

const dataProvider = {
    // Connect to your API
};

const App = () => (
    <Admin dataProvider={dataProvider} darkTheme={darkTheme}>
        {/** Put your resources here */}
    </Admin>
);

Pass your own translations

import { Admin, buildI18nProvider } from '@react-admin/ra-enterprise';

const messages = {
    en: {
        // Put your english translations here
    },
    fr: {
        // Put your french translations here
    },
};

const dataProvider = {
    // Connect to your API
};

const i18nProvider = buildI18nProvider(messages);

const App = () => (
    <Admin dataProvider={dataProvider} i18nProvider={i18nProvider}>
        {/** Put your resources here */}
    </Admin>
);

import { Admin, buildI18nProvider } from '@react-admin/ra-enterprise';

const messages = {
    en: {
        // Put your english translations here
    },
    fr: {
        // Put your french translations here
    },
};

const dataProvider = {
    // Connect to your API
};

const i18nProvider = buildI18nProvider(messages);

const App = () => (
    <Admin dataProvider={dataProvider} i18nProvider={i18nProvider}>
        {/** Put your resources here */}
    </Admin>
);

Add a new language (Spanish for example)

import { Admin, buildI18nProvider } from '@react-admin/ra-enterprise';
import spanishMessages from '@blackbox-vision/ra-language-spanish';

const messages = {
    en: {
        // Put your english translations here
    },
    fr: {
        // Put your french translations here
    },
    es: {
        ...spanishMessages,
        'ra-relationships': {
            duallistinput: {
                availableItems: 'Elementos disponibles',
                selectedItems: 'Elementos seleccionados',
            },
        },
        // Configure the other modules here
    },
};

const i18nProvider = buildI18nProvider(messages, 'es');

import { Admin, buildI18nProvider } from '@react-admin/ra-enterprise';
import spanishMessages from '@blackbox-vision/ra-language-spanish';

const messages = {
    en: {
        // Put your english translations here
    },
    fr: {
        // Put your french translations here
    },
    es: {
        ...spanishMessages,
        'ra-relationships': {
            duallistinput: {
                availableItems: 'Elementos disponibles',
                selectedItems: 'Elementos seleccionados',
            },
        },
        // Configure the other modules here
    },
};

const i18nProvider = buildI18nProvider(messages, 'es');

`<Layout>`

Alternative to react-admin's default <Layout>, which adds the following features:

A light and dark mode for the theme
A language switcher (from react-admin)
A compact menu with submenus in sliding panels (from ra-navigation)

Usage

If you use the <Admin> component from ra-enterprise, this layout is already used by default.

If you use the <Admin> component from react-admin, pass this component as the layout prop. You must wrap the Admin in a <ThemeContext> using the lighht and dark themes:

import { Admin } from 'react-admin';
+import { Layout, ThemesContext } from '@react-admin/ra-enterprise';

const App = ()  => (
+   <ThemesContext.Provider value={{ lightTheme, darkTheme }}>
        <Admin
            dataProvider={dataProvider}
+           layout={Layout}
        >
            { /** Put your resources here */ }
        </Admin>
+   </ThemesContext.Provider>
);

Default Properties

The alternative <Layout> accepts the same properties as the default one with the addition of a breadcrumb prop allowing you to override the default Breadcrumb. Please read the documentation about react-admin <Layout> to discover all the available properties.

The react-admin layout requires that you specify the width of the sidebar with an arbitrary default value. You might have to adjust it with a custom theme.

If you use the default menu with multilevel support:

import { defaultTheme } from 'react-admin';
import { ThemeOptions } from '@react-admin/ra-navigation';

export const theme: ThemeOptions = {
    ...defaultTheme,
    overrides: {
        sidebar: {
            width: 240,
            closedWidth: 55,
        },
        RaSidebar: {
            fixed: {
                zIndex: 1200,
            },
        },
    },
};

import { defaultTheme } from 'react-admin';
import { ThemeOptions } from '@react-admin/ra-navigation';

export const theme: ThemeOptions = {
    ...defaultTheme,
    overrides: {
        sidebar: {
            width: 240,
            closedWidth: 55,
        },
        RaSidebar: {
            fixed: {
                zIndex: 1200,
            },
        },
    },
};

If you use the default category variant:

import { defaultTheme } from 'react-admin';
import { ThemeOptions } from '@react-admin/ra-navigation';

export const theme: ThemeOptions = {
    ...defaultTheme,
    sidebar: {
        width: 96,
        closedWidth: 48,
    },
    overrides: {
        RaSidebar: {
            fixed: {
                zIndex: 1200,
            },
        },
    },
};

import { defaultTheme } from 'react-admin';
import { ThemeOptions } from '@react-admin/ra-navigation';

export const theme: ThemeOptions = {
    ...defaultTheme,
    sidebar: {
        width: 96,
        closedWidth: 48,
    },
    overrides: {
        RaSidebar: {
            fixed: {
                zIndex: 1200,
            },
        },
    },
};

Examples

Change the appBar

import { Admin, AppBar, Layout } from '@react-admin/ra-enterprise';

const CustomAppBar = props => <AppBar {...props} />;

const CustomLayout = props => <Layout appBar={CustomAppBar} {...props} />;

const dataProvider = {
    // Connect to your API
};

const App = () => (
    <Admin dataProvider={dataProvider} layout={CustomLayout}>
        {/** Put your resources here */}
    </Admin>
);

import { Admin, AppBar, Layout } from '@react-admin/ra-enterprise';

const CustomAppBar = props => <AppBar {...props} />;

const CustomLayout = props => <Layout appBar={CustomAppBar} {...props} />;

const dataProvider = {
    // Connect to your API
};

const App = () => (
    <Admin dataProvider={dataProvider} layout={CustomLayout}>
        {/** Put your resources here */}
    </Admin>
);

Change the sidebar

import { Admin, Layout, Sidebar } from '@react-admin/ra-enterprise';

const CustomSidebar = props => <Sidebar {...props} />;

const CustomLayout = props => <Layout sidebar={CustomSidebar} {...props} />;

const dataProvider = {
    // Connect to your API
};

const App = () => (
    <Admin dataProvider={dataProvider} layout={CustomLayout}>
        {/** Put your resources here */}
    </Admin>
);

import { Admin, Layout, Sidebar } from '@react-admin/ra-enterprise';

const CustomSidebar = props => <Sidebar {...props} />;

const CustomLayout = props => <Layout sidebar={CustomSidebar} {...props} />;

const dataProvider = {
    // Connect to your API
};

const App = () => (
    <Admin dataProvider={dataProvider} layout={CustomLayout}>
        {/** Put your resources here */}
    </Admin>
);

Change the menu

import { Admin, Layout, Menu } from '@react-admin/ra-enterprise';

const CustomMenu = props => <Menu {...props} />;

const CustomLayout = props => <Layout menu={CustomMenu} {...props} />;

const dataProvider = {
    // Connect to your API
};

const App = () => (
    <Admin dataProvider={dataProvider} layout={CustomLayout}>
        {/** Put your resources here */}
    </Admin>
);

import { Admin, Layout, Menu } from '@react-admin/ra-enterprise';

const CustomMenu = props => <Menu {...props} />;

const CustomLayout = props => <Layout menu={CustomMenu} {...props} />;

const dataProvider = {
    // Connect to your API
};

const App = () => (
    <Admin dataProvider={dataProvider} layout={CustomLayout}>
        {/** Put your resources here */}
    </Admin>
);

`<AppBar>`

Alternative to <AppBar> that should be passed to the <Layout>. It comes with the following features:

A button to toggle the theme between a light and a dark mode
A language switcher (from react-admin)

Default Properties

Please read the documentation about the react-admin <AppBar> to discover all the available properties.

In addition, you can pass the following props to customize the ra-enterprise features:

Prop	Required	Type	Default	Description
`languages`	Optional	`Array`	-	A list of languages
`languages[]`	-	`object`	-	A object describing the language
`languages[].locale`	-	`string`	-	The locale. It should match the locales passed to the `i18nProvider`.
`languages[].name`	-	`string`	-	The language name

Examples

Enable the theme switcher for light and dark mode

// Nothing to do, the <AppBar> is used in the default <Admin>
// and the theme switcher is enabled by default
import { Admin } from '@react-admin/ra-enterprise';

const dataProvider = {
    // Connect to your API
};

const App = () => <Admin dataProvider={dataProvider}></Admin>;

// Nothing to do, the <AppBar> is used in the default <Admin>
// and the theme switcher is enabled by default
import { Admin } from '@react-admin/ra-enterprise';

const dataProvider = {
    // Connect to your API
};

const App = () => <Admin dataProvider={dataProvider}></Admin>;

Enable the languages switcher

import { Admin, AppBar, Layout } from '@react-admin/ra-enterprise';

const languages = [
    { locale: 'en', name: 'English 🇬🇧' },
    { locale: 'fr', name: 'Français 🇫🇷' },
];

const CustomAppBar = props => <AppBar languages={languages} {...props} />;

const CustomLayout = props => <Layout appBar={CustomAppBar} {...props} />;

const dataProvider = {
    // Connect to your API
};

const App = () => (
    <Admin dataProvider={dataProvider} layout={CustomLayout}>
        {/** Put your resources here */}
    </Admin>
);

import { Admin, AppBar, Layout } from '@react-admin/ra-enterprise';

const languages = [
    { locale: 'en', name: 'English 🇬🇧' },
    { locale: 'fr', name: 'Français 🇫🇷' },
];

const CustomAppBar = props => <AppBar languages={languages} {...props} />;

const CustomLayout = props => <Layout appBar={CustomAppBar} {...props} />;

const dataProvider = {
    // Connect to your API
};

const App = () => (
    <Admin dataProvider={dataProvider} layout={CustomLayout}>
        {/** Put your resources here */}
    </Admin>
);

`<AccordionForm>`

Alternative to react-admin's <AccordionForm> that adds RBAC control to the delete button.

To learn more about the permissions format, please refer to the @react-admin/ra-rbac documentation.

import { AccordionForm } from '@react-admin/ra-enterprise';

const authProvider = {
    checkAuth: () => Promise.resolve(),
    login: () => Promise.resolve(),
    logout: () => Promise.resolve(),
    checkError: () => Promise.resolve(),
    getPermissions: () =>Promise.resolve([
        // 'delete' is missing
        { action: ['list', 'edit'], resource: 'products' },
        { action: 'write', resource: 'products.reference' },
        { action: 'write', resource: 'products.width' },
        { action: 'write', resource: 'products.height' },
        // 'products.description' is missing
        { action: 'write', resource: 'products.thumbnail' },
        // 'products.image' is missing
        { action: 'write', resource: 'products.panel.description' },
        { action: 'write', resource: 'products.panel.images' },
        // 'products.panel.stock' is missing
    ]),
};

const ProductEdit = () => (
    <Edit>
        <AccordionForm>
            <AccordionForm.Panel label="description" label="Description">
                <TextInput source="reference" />
                <TextInput source="width" />
                <TextInput source="height" />
                <TextInput source="description" />
            </AccordionForm.Panel>
            <AccordionForm.Panel label="images" label="Images">
                <TextInput source="image" />
                <TextInput source="thumbnail" />
            </AccordionForm.Panel>
            <AccordionForm.Panel label="stock" label="Stock">
                <TextInput source="stock" />
            </AccordionForm.Panel>
            // delete button not displayed
        </AccordionForm>
    </Edit>
);

import { AccordionForm } from '@react-admin/ra-enterprise';

const authProvider = {
    checkAuth: () => Promise.resolve(),
    login: () => Promise.resolve(),
    logout: () => Promise.resolve(),
    checkError: () => Promise.resolve(),
    getPermissions: () =>Promise.resolve([
        // 'delete' is missing
        { action: ['list', 'edit'], resource: 'products' },
        { action: 'write', resource: 'products.reference' },
        { action: 'write', resource: 'products.width' },
        { action: 'write', resource: 'products.height' },
        // 'products.description' is missing
        { action: 'write', resource: 'products.thumbnail' },
        // 'products.image' is missing
        { action: 'write', resource: 'products.panel.description' },
        { action: 'write', resource: 'products.panel.images' },
        // 'products.panel.stock' is missing
    ]),
};

const ProductEdit = () => (
    <Edit>
        <AccordionForm>
            <AccordionForm.Panel label="description" label="Description">
                <TextInput source="reference" />
                <TextInput source="width" />
                <TextInput source="height" />
                <TextInput source="description" />
            </AccordionForm.Panel>
            <AccordionForm.Panel label="images" label="Images">
                <TextInput source="image" />
                <TextInput source="thumbnail" />
            </AccordionForm.Panel>
            <AccordionForm.Panel label="stock" label="Stock">
                <TextInput source="stock" />
            </AccordionForm.Panel>
            // delete button not displayed
        </AccordionForm>
    </Edit>
);

`<AccordionFormPanel>`

Replacement for the default <AccordionFormPanel> that only renders a section if the user has the right permissions. Add a name prop to the AccordionFormPanel to define the sub-resource that the user needs to have the right permissions for. <AccordionFormPanel> also only renders the child inputs for which the user has the 'write' permissions.

To learn more about the permissions format, please refer to the @react-admin/ra-rbac documentation.

import { Edit, TextInput } from 'react-admin';
import { AccordionForm } from '@react-admin/ra-form-layout';
import { AccordionFormPanel } from '@react-admin/ra-enterprise';

const authProvider = {
    // ...
    getPermissions: () => Promise.resolve([
        { action: ['list', 'edit'], resource: 'products' },
        { action: 'write', resource: 'products.reference' },
        { action: 'write', resource: 'products.width' },
        { action: 'write', resource: 'products.height' },
        // 'products.description' is missing
        { action: 'write', resource: 'products.thumbnail' },
        // 'products.image' is missing
        { action: 'write', resource: 'products.panel.description' },
        { action: 'write', resource: 'products.panel.images' },
        // 'products.panel.stock' is missing
    ]),
};

const ProductEdit = () => (
    <Edit>
        <AccordionForm>
            <AccordionFormPanel label="Description" name="description">
                <TextInput source="reference" />
                <TextInput source="width" />
                <TextInput source="height" />
                // not displayed
                <TextInput source="description" />
            </AccordionFormPanel>
            <AccordionFormPanel label="Images" name="images">
                // not displayed
                <TextInput source="image" />
                <TextInput source="thumbnail" />
            </AccordionFormPanel>
            // not displayed
            <AccordionFormPanel label="Stock" name="stock">
                <TextInput source="stock" />
            </AccordionFormPanel>
        </AccordionForm>
    </Edit>
);

import { Edit, TextInput } from 'react-admin';
import { AccordionForm } from '@react-admin/ra-form-layout';
import { AccordionFormPanel } from '@react-admin/ra-enterprise';

const authProvider = {
    // ...
    getPermissions: () => Promise.resolve([
        { action: ['list', 'edit'], resource: 'products' },
        { action: 'write', resource: 'products.reference' },
        { action: 'write', resource: 'products.width' },
        { action: 'write', resource: 'products.height' },
        // 'products.description' is missing
        { action: 'write', resource: 'products.thumbnail' },
        // 'products.image' is missing
        { action: 'write', resource: 'products.panel.description' },
        { action: 'write', resource: 'products.panel.images' },
        // 'products.panel.stock' is missing
    ]),
};

const ProductEdit = () => (
    <Edit>
        <AccordionForm>
            <AccordionFormPanel label="Description" name="description">
                <TextInput source="reference" />
                <TextInput source="width" />
                <TextInput source="height" />
                // not displayed
                <TextInput source="description" />
            </AccordionFormPanel>
            <AccordionFormPanel label="Images" name="images">
                // not displayed
                <TextInput source="image" />
                <TextInput source="thumbnail" />
            </AccordionFormPanel>
            // not displayed
            <AccordionFormPanel label="Stock" name="stock">
                <TextInput source="stock" />
            </AccordionFormPanel>
        </AccordionForm>
    </Edit>
);

`<AccordionSection>`

Replacement for the default <AccordionSection> that only renders a section if the user has the right permissions. Add a name prop to the AccordionSection to define the sub-resource that the user needs to have the right permissions for. <AccordionSection> also only renders the child inputs for which the user has the 'write' permissions.

To learn more about the permissions format, please refer to the @react-admin/ra-rbac documentation.

import { Edit, SimpleForm, TextInput } from 'react-admin';
import { AccordionSection } from '@react-admin/ra-enterprise';

const authProvider = {
    // ...
    getPermissions: () => Promise.resolve([
        { action: ['list', 'edit'], resource: 'products' },
        { action: 'write', resource: 'products.reference' },
        { action: 'write', resource: 'products.width' },
        { action: 'write', resource: 'products.height' },
        // 'products.description' is missing
        { action: 'write', resource: 'products.thumbnail' },
        // 'products.image' is missing
        { action: 'write', resource: 'products.section.description' },
        { action: 'write', resource: 'products.section.images' },
        // 'products.section.stock' is missing
    ]),
};

const ProductEdit = () => (
    <Edit>
        <SimpleForm>
            <AccordionSection label="Description" name="description">
                <TextInput source="reference" />
                <TextInput source="width" />
                <TextInput source="height" />
                // not displayed
                <TextInput source="description" />
            </AccordionSection>
            <AccordionSection label="Images" name="images">
                // not displayed
                <TextInput source="image" />
                <TextInput source="thumbnail" />
            </AccordionSection>
            // not displayed
            <AccordionSection label="Stock" name="stock">
                <TextInput source="stock" />
            </AccordionSection>
        </SimpleForm>
    </Edit>
);

import { Edit, SimpleForm, TextInput } from 'react-admin';
import { AccordionSection } from '@react-admin/ra-enterprise';

const authProvider = {
    // ...
    getPermissions: () => Promise.resolve([
        { action: ['list', 'edit'], resource: 'products' },
        { action: 'write', resource: 'products.reference' },
        { action: 'write', resource: 'products.width' },
        { action: 'write', resource: 'products.height' },
        // 'products.description' is missing
        { action: 'write', resource: 'products.thumbnail' },
        // 'products.image' is missing
        { action: 'write', resource: 'products.section.description' },
        { action: 'write', resource: 'products.section.images' },
        // 'products.section.stock' is missing
    ]),
};

const ProductEdit = () => (
    <Edit>
        <SimpleForm>
            <AccordionSection label="Description" name="description">
                <TextInput source="reference" />
                <TextInput source="width" />
                <TextInput source="height" />
                // not displayed
                <TextInput source="description" />
            </AccordionSection>
            <AccordionSection label="Images" name="images">
                // not displayed
                <TextInput source="image" />
                <TextInput source="thumbnail" />
            </AccordionSection>
            // not displayed
            <AccordionSection label="Stock" name="stock">
                <TextInput source="stock" />
            </AccordionSection>
        </SimpleForm>
    </Edit>
);

`<LongForm>`

Alternative to react-admin's <LongForm> that adds RBAC control to the delete button and hides sections users don't have access to.

Use in conjunction with ra-enterprise's <LongForm.Section> to render inputs based on permissions.

To learn more about the permissions format, please refer to the @react-admin/ra-rbac documentation.

import { LongForm } from '@react-admin/ra-enterprise';

const authProvider = {
    checkAuth: () => Promise.resolve(),
    login: () => Promise.resolve(),
    logout: () => Promise.resolve(),
    checkError: () => Promise.resolve(),
    getPermissions: () =>Promise.resolve([
        // 'delete' is missing
        { action: ['list', 'edit'], resource: 'products' },
        { action: 'write', resource: 'products.reference' },
        { action: 'write', resource: 'products.width' },
        { action: 'write', resource: 'products.height' },
        // 'products.description' is missing
        { action: 'write', resource: 'products.thumbnail' },
        // 'products.image' is missing
        { action: 'write', resource: 'products.Section.description' },
        { action: 'write', resource: 'products.Section.images' },
        // 'products.Section.stock' is missing
    ]),
};

const ProductEdit = () => (
    <Edit>
        <LongForm>
            <LongForm.Section name="description" label="Description">
                <TextInput source="reference" />
                <TextInput source="width" />
                <TextInput source="height" />
                <TextInput source="description" />
            </LongForm.Section>
            <LongForm.Section name="images" label="Images">
                <TextInput source="image" />
                <TextInput source="thumbnail" />
            </LongForm.Section>
            <LongForm.Section name="stock" label="Stock">
                <TextInput source="stock" />
            </LongForm.Section>
            // delete button not displayed
        </LongForm>
    </Edit>
);

import { LongForm } from '@react-admin/ra-enterprise';

const authProvider = {
    checkAuth: () => Promise.resolve(),
    login: () => Promise.resolve(),
    logout: () => Promise.resolve(),
    checkError: () => Promise.resolve(),
    getPermissions: () =>Promise.resolve([
        // 'delete' is missing
        { action: ['list', 'edit'], resource: 'products' },
        { action: 'write', resource: 'products.reference' },
        { action: 'write', resource: 'products.width' },
        { action: 'write', resource: 'products.height' },
        // 'products.description' is missing
        { action: 'write', resource: 'products.thumbnail' },
        // 'products.image' is missing
        { action: 'write', resource: 'products.Section.description' },
        { action: 'write', resource: 'products.Section.images' },
        // 'products.Section.stock' is missing
    ]),
};

const ProductEdit = () => (
    <Edit>
        <LongForm>
            <LongForm.Section name="description" label="Description">
                <TextInput source="reference" />
                <TextInput source="width" />
                <TextInput source="height" />
                <TextInput source="description" />
            </LongForm.Section>
            <LongForm.Section name="images" label="Images">
                <TextInput source="image" />
                <TextInput source="thumbnail" />
            </LongForm.Section>
            <LongForm.Section name="stock" label="Stock">
                <TextInput source="stock" />
            </LongForm.Section>
            // delete button not displayed
        </LongForm>
    </Edit>
);

`<LongFormSection>`

Replacement for the default <LongFormSection> that only renders a section if the user has the right permissions. Add a name prop to the LongFormSection to define the sub-resource that the user needs to have the right permissions for. <LongFormSection> also only renders the child inputs for which the user has the 'write' permissions.

To learn more about the permissions format, please refer to the @react-admin/ra-rbac documentation.

import { LongForm, LongFormSection } from '@react-admin/ra-enterprise';

const authProvider = {
    // ...
    getPermissions: () => Promise.resolve([
        { action: ['list', 'edit'], resource: 'products' },
        { action: 'write', resource: 'products.reference' },
        { action: 'write', resource: 'products.width' },
        { action: 'write', resource: 'products.height' },
        // 'products.description' is missing
        { action: 'write', resource: 'products.thumbnail' },
        // 'products.image' is missing
        { action: 'write', resource: 'products.panel.description' },
        { action: 'write', resource: 'products.panel.images' },
        // 'products.panel.stock' is missing
    ]),
};

const ProductEdit = () => (
    <Edit>
        <LongForm>
            <LongFormSection name="description" label="Description">
                <TextInput source="reference" />
                <TextInput source="width" />
                <TextInput source="height" />
                // not displayed
                <TextInput source="description" />
            </LongFormSection>
            <LongFormSection name="images" label="Images">
                // not displayed
                <TextInput source="image" />
                <TextInput source="thumbnail" />
            </LongFormSection>
            // not displayed
            <LongFormSection name="stock" label="Stock">
                <TextInput source="stock" />
            </LongFormSection>
        </LongForm>
    </Edit>
);

import { LongForm, LongFormSection } from '@react-admin/ra-enterprise';

const authProvider = {
    // ...
    getPermissions: () => Promise.resolve([
        { action: ['list', 'edit'], resource: 'products' },
        { action: 'write', resource: 'products.reference' },
        { action: 'write', resource: 'products.width' },
        { action: 'write', resource: 'products.height' },
        // 'products.description' is missing
        { action: 'write', resource: 'products.thumbnail' },
        // 'products.image' is missing
        { action: 'write', resource: 'products.panel.description' },
        { action: 'write', resource: 'products.panel.images' },
        // 'products.panel.stock' is missing
    ]),
};

const ProductEdit = () => (
    <Edit>
        <LongForm>
            <LongFormSection name="description" label="Description">
                <TextInput source="reference" />
                <TextInput source="width" />
                <TextInput source="height" />
                // not displayed
                <TextInput source="description" />
            </LongFormSection>
            <LongFormSection name="images" label="Images">
                // not displayed
                <TextInput source="image" />
                <TextInput source="thumbnail" />
            </LongFormSection>
            // not displayed
            <LongFormSection name="stock" label="Stock">
                <TextInput source="stock" />
            </LongFormSection>
        </LongForm>
    </Edit>
);

`<WizardForm>`

Alternative to react-admin's <WizardForm> that adds RBAC control to hide steps users don't have access to. Use in conjunction with ra-enterprise's <WizardForm.Step> to render inputs based on permissions.

To learn more about the permissions format, please refer to the @react-admin/ra-rbac documentation.

import { WizardForm } from '@react-admin/ra-enterprise';

const authProvider = {
    checkAuth: () => Promise.resolve(),
    login: () => Promise.resolve(),
    logout: () => Promise.resolve(),
    checkError: () => Promise.resolve(),
    getPermissions: () =>Promise.resolve([
        // 'delete' is missing
        { action: ['list', 'edit'], resource: 'products' },
        { action: 'write', resource: 'products.reference' },
        { action: 'write', resource: 'products.width' },
        { action: 'write', resource: 'products.height' },
        // 'products.description' is missing
        { action: 'write', resource: 'products.thumbnail' },
        // 'products.image' is missing
        { action: 'write', resource: 'products.step.description' },
        { action: 'write', resource: 'products.step.images' },
        // 'products.step.stock' is missing
    ]),
};

const ProductCreate = () => (
    <Create>
        <WizardForm>
            <WizardForm.Step name="description" label="Description">
                <TextInput source="reference" />
                <TextInput source="width" />
                <TextInput source="height" />
                {/* Won't be displayed */}
                <TextInput source="description" />
            </WizardForm.Step>
            <WizardForm.Step name="images" label="Images">
                {/* Won't be displayed */}
                <TextInput source="image" />
                <TextInput source="thumbnail" />
            </WizardForm.Step>
            {/* Won't be displayed */}
            <WizardForm.Step name="stock" label="Stock">
                <TextInput source="stock" />
            </WizardForm.Step>
        </WizardForm>
    </Create>
);

import { WizardForm } from '@react-admin/ra-enterprise';

const authProvider = {
    checkAuth: () => Promise.resolve(),
    login: () => Promise.resolve(),
    logout: () => Promise.resolve(),
    checkError: () => Promise.resolve(),
    getPermissions: () =>Promise.resolve([
        // 'delete' is missing
        { action: ['list', 'edit'], resource: 'products' },
        { action: 'write', resource: 'products.reference' },
        { action: 'write', resource: 'products.width' },
        { action: 'write', resource: 'products.height' },
        // 'products.description' is missing
        { action: 'write', resource: 'products.thumbnail' },
        // 'products.image' is missing
        { action: 'write', resource: 'products.step.description' },
        { action: 'write', resource: 'products.step.images' },
        // 'products.step.stock' is missing
    ]),
};

const ProductCreate = () => (
    <Create>
        <WizardForm>
            <WizardForm.Step name="description" label="Description">
                <TextInput source="reference" />
                <TextInput source="width" />
                <TextInput source="height" />
                {/* Won't be displayed */}
                <TextInput source="description" />
            </WizardForm.Step>
            <WizardForm.Step name="images" label="Images">
                {/* Won't be displayed */}
                <TextInput source="image" />
                <TextInput source="thumbnail" />
            </WizardForm.Step>
            {/* Won't be displayed */}
            <WizardForm.Step name="stock" label="Stock">
                <TextInput source="stock" />
            </WizardForm.Step>
        </WizardForm>
    </Create>
);

`<WizardFormStep>`

Replacement for the default <WizardFormStep> that only renders a step if the user has the right permissions. Use it with <WizardForm> from @react-admin/ra-enterprise to only display the steps the user has access to in the stepper.

Add a name prop to the WizardFormStep to define the sub-resource that the user needs to have the right permissions for. <WizardFormStep> also only renders the child inputs for which the user has the 'write' permissions.

To learn more about the permissions format, please refer to the @react-admin/ra-rbac documentation.

import { Edit, TextInput } from 'react-admin';
import { WizardForm, WizardFormStep } from '@react-admin/ra-enterprise';

const authProvider = {
    // ...
    getPermissions: () => Promise.resolve([
        { action: ['list', 'edit'], resource: 'products' },
        { action: 'write', resource: 'products.reference' },
        { action: 'write', resource: 'products.width' },
        { action: 'write', resource: 'products.height' },
        // 'products.description' is missing
        { action: 'write', resource: 'products.thumbnail' },
        // 'products.image' is missing
        { action: 'write', resource: 'products.step.description' },
        { action: 'write', resource: 'products.step.images' },
        // 'products.step.stock' is missing
    ]),
};

const ProductCreate = () => (
    <Create>
        <WizardForm>
            <WizardForm.Step label="Description" name="description">
                <TextInput source="reference" />
                <TextInput source="width" />
                <TextInput source="height" />
                // not displayed
                <TextInput source="description" />
            </WizardForm.Step>
            <WizardForm.Step label="Images" name="images">
                // not displayed
                <TextInput source="image" />
                <TextInput source="thumbnail" />
            </WizardForm.Step>
            // not displayed
            <WizardForm.Step label="Stock" name="stock">
                <TextInput source="stock" />
            </WizardForm.Step>
        </WizardForm>
    </Create>
);

import { Edit, TextInput } from 'react-admin';
import { WizardForm, WizardFormStep } from '@react-admin/ra-enterprise';

const authProvider = {
    // ...
    getPermissions: () => Promise.resolve([
        { action: ['list', 'edit'], resource: 'products' },
        { action: 'write', resource: 'products.reference' },
        { action: 'write', resource: 'products.width' },
        { action: 'write', resource: 'products.height' },
        // 'products.description' is missing
        { action: 'write', resource: 'products.thumbnail' },
        // 'products.image' is missing
        { action: 'write', resource: 'products.step.description' },
        { action: 'write', resource: 'products.step.images' },
        // 'products.step.stock' is missing
    ]),
};

const ProductCreate = () => (
    <Create>
        <WizardForm>
            <WizardForm.Step label="Description" name="description">
                <TextInput source="reference" />
                <TextInput source="width" />
                <TextInput source="height" />
                // not displayed
                <TextInput source="description" />
            </WizardForm.Step>
            <WizardForm.Step label="Images" name="images">
                // not displayed
                <TextInput source="image" />
                <TextInput source="thumbnail" />
            </WizardForm.Step>
            // not displayed
            <WizardForm.Step label="Stock" name="stock">
                <TextInput source="stock" />
            </WizardForm.Step>
        </WizardForm>
    </Create>
);

CHANGELOG

v6.2.0

2023-05-24

Upgraded to react-admin 4.10.6

v6.1.0

2023-05-23

Added ra-form-layout forms alternatives that leverage ra-rbac (<AccordionForm>, <AccordionFormPanel>, <AccordionFormSection>, <LongForm>, <LongFormSection>, <WizardForm> and <WizardFormStep>)

v6.0.5

2023-05-22

(fix) Fix <AppBar> title style for react-admin v4.9.0 and greater

v6.0.4

2022-06-29

(fix) Fix <FilterForm> and <ListActions> width in RaTopToolbar

v6.0.3

2022-06-10

(fix) Bump enterprise packages versions (specifically including ra-navigation v4.0.4)

v6.0.2

2022-06-08

(fix) Update peer dependencies ranges (support React 18)

v6.0.1

2022-06-07

Pass queryClient as a tool to the TourProvider

v6.0.0

2022-06-07

Upgrade to react-admin v4

Breaking changes

Removed <List>, <Create>, <Edit> and <Show> components. You can simply import them from react-admin:

-import { Datagrid, TextField } from 'react-admin';
-import { List } from '@react-admin/ra-enterprise';
+import { Datagrid, List, TextField } from 'react-admin';

const ArtistList = () => (
    <List>
        <Datagrid rowClick="edit">
            <TextField source="id" />
            <TextField source="firstname" />
            <TextField source="name" />
        </Datagrid>
    </List>
);

Removed <EventList> and <RealTimeList> components. You can simply import them from their package:

// In App.js
import { Admin, Resource } from 'react-admin';
-import { EventList } from '@react-admin/ra-enterprise';
+import { EventList } from '@react-admin/ra-audit-log';

export const App = () => (
    <Admin>
        <Resource name="events" list={EventList} />
    </Admin>
);

import React from 'react';
import { ListProps, Datagrid, TextField } from 'react-admin';
-import { RealTimeList } from '@react-admin/ra-enterprise';
+import { RealTimeList } from '@react-admin/ra-realtime';

const PostList = () => (
    <RealTimeList>
        <Datagrid>
            <TextField source="title" />
        </Datagrid>
    </RealTimeList>
);

The breadcrumb is now inside the <Layout> instead of individual views.

We used to include the breadcrumb in the actions bar for each view. However, this had limitations as the breadcrumb often need a lot of horizontal space. Hence, we moved it back to the layout.

If you used to pass your custom layout to each view through the actions component we provided, you can now pass it to the <Layout> component.

// in ./src/MyBreadcrumb.js
import { Breadcrumb, BreadcrumbItem } from '@react-admin/ra-navigation';

export const MyBreadcrumb = props => (
    <Breadcrumb {...props}>
        <BreadcrumbItem name="dashboard" label="My Home">
            <ResourceBreadcrumbItems resources={['songs', 'artists']} />
        </BreadcrumbItem>
    </Breadcrumb>
);

// in ./src/MyLayout.js
import { Layout } from '@react-admin/ra-enterprise';
+import { MyBreadcrumb } from './MyBreadcrumb';

export const MyLayout = props => (
-   <Layout {...props} />
+   <Layout {...props} breadcrumb={<MyBreadcrumb />} />
);

// in ./src/App.js
import { Admin } from '@react-admin/ra-enterprise';
import { MyLayout } from './MyLayout';

export const MyAdmin = () => (
    <Admin layout={MyLayout}>
        // ...
    </Admin>
)

// in ./src/ArtistList.js
-import { Datagrid, TextField } from 'react-admin';
-import { List, ListActions } from '@react-admin/ra-enterprise';
-import { MyBreadcrumb } from './MyBreadcrumb';
+import { Datagrid, List, TextField } from 'react-admin';

-const ArtistListActions = props => (
-    <ListActions {...props} breadcrumb={<MyBreadcrumb variant="actions" />} />
-);

const ArtistList = () => (
    <List
-        actions={<ArtistListActions />}
    >
        <Datagrid rowClick="edit">
            <TextField source="id" />
            <TextField source="firstname" />
            <TextField source="name" />
        </Datagrid>
    </List>
);

Removed the <Menu> component. Use the <MenuItemCategoryResources> component from ra-navigation instead:

import { Layout } from 'react-admin';
-import { Menu } from '@react-admin/ra-enterprise';
+import { MenuItemCategoryResources } from '@react-admin/ra-navigation';

-const MyLayout = props => <Layout menu={<Menu />} />
+const MyLayout = props => <Layout menu={<MenuItemCategoryResources />} />

v5.1.3

2021-12-23

(fix) Fix <AppBar> logs a warning when overriding styles via the classes prop.

v5.1.2

2021-12-02

(chore) Upgrade react-admin to 3.19.2
(fix) Fix i18nProvider jsDoc

v5.1.1

2021-09-16

(fix) Fix <List> toolbar styles

v5.1.0

2021-09-14

(feat) Include ra-audit-log

v5.0.0

2021-09-08

(chore) Upgrade react-admin to 3.18
(fix) Breaking change: Following the upgrade to react-admin 3.18, we now have to specify the width of the sidebar with an arbitrary default value. You might have to adjust it with a custom theme.

import { defaultTheme } from 'react-admin';
import { ThemeOptions } from '@react-admin/ra-navigation';

export const theme: ThemeOptions = {
    ...defaultTheme,
    overrides: {
        RaSidebar: {
            drawerPaper: {
                width: 96,
            },
            fixed: {
                zIndex: 1200,
            },
        },
    },
};

import { defaultTheme } from 'react-admin';
import { ThemeOptions } from '@react-admin/ra-navigation';

export const theme: ThemeOptions = {
    ...defaultTheme,
    overrides: {
        RaSidebar: {
            drawerPaper: {
                width: 96,
            },
            fixed: {
                zIndex: 1200,
            },
        },
    },
};

v4.2.1

2021-08-03

(fix) Merge user provided themes with the default ones.

v4.2.0

2021-07-21

(feat) Introduce a customized version of react-admin <Filter> component which fixes the issue where too much space was taken by an empty filter form. To use it, you must update your imports:
```
- import { Filter } from 'react-admin';
+ import { Filter } from '@react-admin/ra-enterprise';
```

v4.1.5

2021-07-21

(fix) Fix build by upgrading it to 3.17.0

v4.1.4

2021-06-29

(fix) Fix imports from react-admin by upgrading it to 3.16.6
(fix) Export all prop interfaces

v4.1.3

2021-06-29

(fix) Update peer dependencies ranges (support react 17)

v4.1.2

2021-04-22

(fix) Avoid spreading react-admin props on html elements

v4.1.1

2021-04-29

(fix) Setup translations for all existing modules.

v4.1.0

2021-04-08

(feat) Automatically set up the breadcrumb correctly when a dashboard has been specified.

v4.0.0

2021-04-01

Breaking change

(feat) Remove <BreadcrumbForActions> in favor of <Breadcrumb variant="actions">

v3.2.0

2021-03-23

(feat) Provide Custom RealTimeList With Breadcrumb
(fix) Fix and Simplify Props Interfaces
(fix) Ensure Breadcrumb is Well Integrated in Views

v3.1.0

2021-03-19

(feat) Allow to customize breadcrumb in views and actions

v3.0.0

2021-02-19

BREAKING CHANGE

Layout does not accept a breadcrumb prop and does not include a default Breadcrumb anymore.

Instead, we recommend to includes the Breacrumb inside the views directly. This was motivated by the fact that the breadcrumb was taking too much space above the views. In order to keep the breadcrumb in the default react-admin views, we recommend using the alternative versions provided by this package. See below.

(feat) Add preconfigured Show and List which includes a Breacrumb in their actions toolbar.
(feat) Update Create and Edit to includes a Breacrumb in their actions toolbar.
(feat) Provide CreateActions, EditAction, ListActions and ShowActions which includes a Breacrumb.

v2.0.1

2021-02-16

(fix) Remove dependency to ra-language-french

v2.0.0

2020-11-19

Upgrade ra-relationships to 2.0.0
Provide <Create> and <Edit> components which wraps their children with a <ManyToManyReferenceContextProvider>

v1.1.0

2021-01-08

Update to react-admin 3.11

v1.0.5

2020-12-10

(fix) Fix custom menu cannot be collapsed by upgrading react-admin

v1.0.4

2020-12-04

Clarify documentation about exported components

v1.0.3

2020-11-18

Upgrade to react-admin 3.10

v1.0.2

2020-11-04

(fix) Fix default messages export

v1.0.1

2020-10-31

(fix) Fix theme switcher works on some elements only

v1.0.0

2020-10-14

First release ✨
(deps) Add @react-admin/ra-search to dependencies

v0.1.2

2020-10-13

(fix) Fix the Messages type
(deps) Upgrade react-admin to v3.9.3

v0.1.1

2020-10-08

(feat) Enable <MultiLevelMenu> by default

v0.1.0

2020-10-05

(deps) Upgrade to react-admin v3.9.0

v0.0.5

2020-10-01

(fix) Remove the create button in the list view of the Admin and Layout stories
(deps) Upgrade @react-admin/ra-tree to v1.2.6 to fix issues with custom reducers

v0.0.4

2020-09-29

(fix) Dashboard is not detected

v0.0.3

2020-09-25

(fix) Fix an error that makes the theme unchangeable
(fix) Fix the background color of the default dark theme

v0.0.2

2020-09-24

(fix) Fix TypeScript types for the theme
(fix) Allow passing an empty theme to the <Admin>
(deps) Add @react-admin/ra-form-layout to dependencies

v0.0.1

2020-09-18

(feat) Add a pre-configured <Admin> component
(feat) Add pre-configured layout components (<Layout>, <AppBar>, <Breadcrumb>, <Sidebar>)
(feat) Add i18nProvider methods
(feat) Add theme methods

ra-enterprise

Installation

<Admin>

Usage

Properties

Examples

<Layout>

Usage

Default Properties

Customizing The Sidebar Width

Examples

<AppBar>

Default Properties

Examples

<AccordionForm>

<AccordionFormPanel>

<AccordionSection>

<LongForm>

<LongFormSection>

<WizardForm>

<WizardFormStep>

CHANGELOG

v6.2.0

v6.1.0

v6.0.5

v6.0.4

v6.0.3

v6.0.2

v6.0.1

v6.0.0

v5.1.3

v5.1.2

v5.1.1

v5.1.0

v5.0.0

v4.2.1

v4.2.0

v4.1.5

v4.1.4

v4.1.3

v4.1.2

v4.1.1

v4.1.0

v4.0.0

v3.2.0

v3.1.0

v3.0.0

v2.0.1

v2.0.0

v1.1.0

v1.0.5

v1.0.4

v1.0.3

v1.0.2

v1.0.1

v1.0.0

v0.1.2

v0.1.1

v0.1.0

v0.0.5

v0.0.4

v0.0.3

v0.0.2

v0.0.1

`<Admin>`

`<Layout>`

`<AppBar>`

`<AccordionForm>`

`<AccordionFormPanel>`

`<AccordionSection>`

`<LongForm>`

`<LongFormSection>`

`<WizardForm>`

`<WizardFormStep>`