kleeen-core-react

Access Control

Description

The idea behind Access Control is to provide an easy and generic way to manage the access control in your UI; kleeen-core exports a function that sets the role of the user in our context and a component to manage the content's visibility state.

Setting Access Control

setAccessControl:

The primary use for this function is to receive the permissions object and the user's role and provide a way to overwrite our acessControlChecker (the process that eval the permissions logic) and our customRenderView (function to eval the render of the permissions).

Properties

Type	Name	Description
object	accessControlSettings	The permissions object and the path to the role on the redux state
object	accessControlSettings.permissions	Permissions JSON base
string	accessControlSettings.setPathToRoleOnState	The path to the role property on redux state
function	customRenderView	Function to eval the render of the permissions
function	customAccessControlChecker	A function that eval the permissions logic

Note: the access control expects the user's role managed with redux, so it receives a redux path to the external user role. For example, if your redux store looks like this:

{
  ...moreEntities,
  user: {
    ...moreUserData,
    roleInfo: {
      ...moreRolesData,
      role: 'guest'
    }
  }
}

the path to the user role in redux should be user.roleInfo.role.

Example

import { setAccessControl } from '@kleeen/core-react';

const permissions = {
  WORKBENCH: {
    CHILDREN: {
      ACTIONS: {
        PERMISSIONS: {
          ADMIN: 'SHOW',
          GUEST: 'HIDE',
        },
      }
    }
  }
};

setAccessControl({ permissions, pathToRoleOnState: 'user.roleInfo.role' });

Access Control Component

Properties

Type	Name	Description
string	id	Permission id that should match some path on the permissions object
node	children	According to the permissions, it could be show/hide/disable
function	children	Executes the function with the user's permission to be used as the user required

Example

import { AccessControl } from "@kleeen/core-react";

// using children
<AccessControl id="LAYOUT.SEARCH_BOX">
  <input type="text" />
</AccessControl>

// using render prop
<AccessControl id="LAYOUT.HEALTH_SPARKLINE">
  {({ permission }) => (
    permission === 'SHOW'
      ? <input type="text" />
      : null
    )
  }
</AccessControl>

Note: our permissions evaluation only supports show/hide/disable, you can use others by implementing the customRenderView and/or the customAccessControlChecker and setting it on the setAccessControl function.

Icon Registry Provider

Description

Provider for using icons base on a registry (iconRegistry):

{
  name: { path: './path.svg', alt: 'Icon name' }
}

Init provider

import { IconRegistryProvider } from '@kleeen/core-react';

<KUICombineProviders providers={[
  TranslationProvider({ localeData, locale: 'en' }),
  ReduxProvider,
  IconRegistryProvider({ iconRegistry }) // take care only of this one for now
]}
>
  <App />
</KUICombineProviders>

Here we are setting more than one provider for our app, but don't worry about the KUICombineProviders or the other providers for now, basically IconRegistryProvider({ iconRegistry }) returns a react context provider so your app can have access to the icon registry anywhere (using the corresponding consumer).

Using the icon consumer

import { IconRegistryConsumer } from '@kleeen/core-react';

<IconRegistryConsumer>
  {({ getIcon }) => (
    <img className="icon" src={getIcon(kuiIcon).path} alt={getIcon(kuiIcon).alt} />
  )}
</IconRegistryConsumer>

Note: of course, we have an easy way to use an icon without the icon consumer, and it is the kui-icon (it use the consumer inside). This component and its documentation are on kleeen-components-react package.

Theming Provider

Description

Provider to change the theme of the application by adding or modifying the classes of the HTML tag.

Properties

Type	Name	Default Values
String	initialTheme

Init Provider

ThemingProvider({ themeName })

Usage

import { ThemingConsumer } from '@kleeen/core-react';

<ThemingConsumer>
  {({ setTheme }) => (
    {setTheme('newThemeName')}
  )}
</ThemingConsumer>

Translation Provider

Description

Provider for the internationalization of the application, it uses a translations object, and the structure is:

{
  "en": {
    "textKey": "English translation!"
  },
  "es": {
    "textKey": "¡Traducción español!"
  }
}

The first key means the language, plus a key for each text on your UI (or at least the strings that should support multiple languages).

This implementation bases on react-intl[https://github.com/yahoo/react-intl], and it supports the majority of features because of how the params flow.

Properties of the translation provider

Type	Name	Default Values
String	languaje	Navigator Languaje
Array	languageToSupport	[ es , en , fr , it ]
Json	localeData	{ }

You can send more params to be added to the IntlProvider from react-int.

Init Provider

TranslationProvider({ localeData, locale: 'en' })

Use for language change

import { ThemingConsumer } from '@kleeen/core-react';

<TranslationConsumer>
  {({ setLocale }) => (
    select onChange={e => setLocale(e.target.value)}>
      <option value="en">Ingles</option>
      <option value="es">Español</option>
    </select>
  )}
</TranslationConsumer>

You can consume the TranslationConsumer and change the data of the provider. You can also use the kuiConnect and receive directly through props the setLocale.

Use for translation

<Translate defaultMessage="content only for Admin">{'App.adminText'}</Translate>

you can also inject an translate function in your props in order to manage the translations with a function, this can be done with the kuiConnect.

<Fragment>{translate({ id: "App.adminText", defaultMessage: "content only for Admin" })}</Fragment>

or

<Fragment>{translate('App.adminText')}</Fragment>

KUIConnect

It allows access to all the KUI provider's context, much like the redux connect (only the concept, not in the implementation itself). So, for example, you can decorate a component with the kuiConnect, which receives a mapStateToProps function; the mapStateToProps function dictates the props injected into the decorated component (you have access to all the KUI providers context that you have in your app).

Example

import { KUIConnect } from '@kleeen/core-react';

const App = (props) => {
  render (
    const { translate, getIcon, setLocale } = props;
    return  (
     <div>
       ...
     </div>
    );
  );
};

compose(
  connect(state => state, ({ logIn })),
  KUIConnect(state => state), // injecting all that data of the providers that you have on your app.
)(App);

Combine Providers

Component that combines several providers, allows consuming components to subscribe to context changes. The properties for this function are children and providers.

Example

ReactDOM.render(
  <KUICombineProviders providers={[
    TranslationProvider({ localeData, locale: 'en' }),
    ReduxProvider,
    IconRegistryProvider({ iconRegistry }),
  ]}
  >
    <App />
  </KUICombineProviders>,
  document.getElementById('root'),
);

Combine Consumers

Function that subscribes to context changes. The properties for this function are children and consumers it should be use like the kuiConnect in a react context way.

Example

const KUIConsumers = ({ children }) => KUICombineConsumers({
  children,
  consumers: {
    theming: ThemingConsumer,
    icons: IconRegistryConsumer,
    translation: TranslationConsumer,
  },
});
<KUIConsumers>
  {({ icons, theming, translation }) => (
    {...some use for all the provider context}
  )}
</KUIConsumers>