ra-enterprise

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

ra-enterprise exports the following "augmented" components: <Admin>, <Layout>, <AppBar>, <Menu>, <Create>, and <Edit>. 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>
);

You can test this module in the Enterprise Edition Demo.

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 ra-enterprise modules. It comes with:

• A breadcrumb based on resources (from ra-navigation)
• A light and dark mode for the theme (from ra-preferences)
• A language switcher (from ra-preferences)
• A preference based sidebar state (from ra-preferences)
• Augmented reducers for tree structures and realtime locks (from ra-tree and ra-realtime)
• A compact menu with submenus in sliding panels (from ra-navigation)
• The Tour context, allowing to show guided tours everywhere in the admin (from ra-tour)
• English messages including the additional messages required by ra-realtime, ra-relationships, and ra-tree

This modifies the look and feel of react-admin:

To be compared with the default look and feel:

Properties

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

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

Prop	Required	Type	Default	Description
customReducers	Optional	object	-	Augment the data provider with your own reducers
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

1. 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>
);

2. Override the dark theme

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

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

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

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

3. 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>
);

4. 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');

<Layout>

Alternative to <Layout>, that should be passed to the <Admin>.

What is pre-configured?

• A breadcrumb based on resources (from ra-navigation)
• A light and dark mode for the theme (from ra-preferences)
• A language switcher (from ra-preferences)
• A preference based sidebar state (from ra-preferences)
• A compact menu with submenus in sliding panels (from ra-navigation)

Default Properties

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

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

Prop	Required	Type	Default	Description
breadcrumb	Optional	ReactNode	<Breadcrumb>	Replace the default <Breadcrumb>

Examples

1. Change the appBar

import {
    Admin,
    AppBar,
    Breadcrumb,
    Layout,
    Sidebar
} 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>
);

2. Change the breadcrumb

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

const CustomBreadcrumb = (props)  => (
    <Breadcrumb {...props}>
        { /** Put your custom breadcrumb here */ }
    </Breadcrumb>
);

const CustomLayout = (props) => (
    <Layout breadcrumb={CustomBreadcrumb} {...props} />
);

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

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

3. Change the sidebar

import {
    Admin,
    AppBar,
    Breadcrumb,
    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>
);

4. Change the menu

import {
    Admin,
    AppBar,
    Breadcrumb,
    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>.

What is pre-configured?

• A light and dark mode for the theme (from ra-preferences)
• A language switcher (from ra-preferences)

Default Properties

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

In addition, you can pass the following properties 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
defaultLanguage	Optional	string	- languages[0]	The default language name. It should correspond to one of the passed languages name.

Examples

1. 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>
);

2. 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>
);

<Breadcrumb>

A <Breadcrumb> included in the <Layout>. It pre-configures some ra-enterprise modules.

What is pre-configured?

• A breadcrumb based on the resources (from @react-admin/ra-navigation)

<Create> and <Edit>

Both <Create> and <Edit> wrap their children with a <ManyToManyReferenceContextProvider> component to ease usage of the <ReferenceManyToManyInput>.