README

Vista-powered React Components

Vista has React components that streamline adding permissions to your platform:

VistaCheck: dynamically adjusts UI based on permissions checks
VistaGrant: 'control panel' that allows your admins to grant teammates roles. This component can be styled to your needs.

Reference

Vista API Documentation

Installation

You'll need to use the read token generated by our API, see the Vista API Documentation.
Install the package:

npm install @vista.io/react-vista-js;

Components

VistaCheck

The VistaCheck component dynamically hides child components if the current user does not have the specified permissions. You can optionally render an alternate component if access is denied.

import { VistaProvider, VistaCheck } from '@vista.io/react-vista-js';

// how to generate 'read tokens' https://docs.govista.io/Guides/React%20Components/Authentication
<VistaProvider secret={read_token}>
    <VistaCheck
        user_id={user_id}
        action={action}
        resource_type={resource_type}
        resource_id={resource_id}
        branch="test"

        // optional
        denyComponent={<React.Fragment />} // rendered if permission denied
        handleError={(err) => console.log(err)}>
            <WrappedComponent></WrappedComponent>
    </VistaCheck>
</VistaProvider>

See the client library docs on how to generate 'token'.

Vista Grant

The VistaGrant component allows your admins to grant teammates roles.

import { VistaProvider, VistaGrant } from '@vista.io/react-vista-js';
<VistaProvider secret={read_token}>
    <VistaGrant
        userIdMap={{
            u1: 'u1',
            u2: 'u2',
            u3: 'u3',
            '6675_user_1': 'Sid',
        }}
        orgId="test_org_2"
        branch="test"
        resourceType="res"
        resourceId="*"

        // called when a role is granted or changed for a teammate
        onGrant={async(data) => {
            const success = await sendToGrantRoute(data);
            return true;
        }}

        // optional
        styles={{
            grantButton: {
                backgroundColor: 'red',
            }
        }}
        onGrantError={async(e) => console.log(e)} />
</VistaProvider>

Styling

The VistaGrant component can be styled at all levels (See the MaterialUI Customization Guide):

// pass this in the 'styles' attribute
const styles = {
    container: { // component container element
        height: '500px',
    },
    title: { // title text
        marginTop: '0px',
    },
    newGrantRow: { // top row containing 'select user', 'select role', and 'grant' button
        display: 'flex',
        marginBottom: '20px',
    },
    userSelect: { // user select dropdown
        flexGrow: '1',
        marginRight: '10px',
    },
    roleSelect: { // role select dropdown
        marginRight: '10px',
    },
    grantButton: {}, // grant role button
    grantList: { // list of teammates with granted roles
        flexGrow: '1',
        width: '100%',
        padding: '0',
        border: '1px solid lightgray',
        overflow: 'scroll',
        margin: '0',
    },
    grantRow: { // each grant row containing user_id and role_id
        height: '75px'
    },
    grantRoleSelect: {}, // role dropdown in a 'grantRow'
};

Usage no npm install needed!