Skip to main content

Admin Panel

Vista provides an 'admin panel' component that allows your admins to grant teammates roles. This component can grant access to everything from sections of your platform, to individual resources (specific documents, dashboards, reports, etc).

The component comes with a default style that can be customized to fit your branding needs.

drawing

Usage#

import { VistaProvider, VistaGrant } from '@vista.io/react-vista-js';<VistaProvider secret={read_token}>    <VistaGrant        // map of user_id to names for display purposes        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>

The admin panel will allow team admins to grant permissions to others on the team, as well as change existing permissions. The permissions granted are applied to the specified resourceType and resourceId.

See the client library docs on how to generate read_token.

Styling#

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

// pass this in the 'styles' attributeconst 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'};