Permission validation on the Publisher UI elemets for API update
This is required for the task of UX layer validation for Publisher-creator (role-wise) separation of API update operations.
Simply some fields of API are allowed to be updated by api-creator (role) users and not allowed to be updated by api-publisher (role) users. The REST api level validation is already added by [1] and UX level validation has to be done as below.
For each Editable TextField, Save/Update/Edit button, Switch, Tick bok, Radio Button, etc. the "disabled" property has to be set or conditional rendering has to be done. For both these approaches we have defined a function "isRestricted()".
Disabled property can be set for most of the React input elements, so that it can be disabled or enabled.
e.g. API description related TextField
<TextField
id='outlined-multiline-static'
label='Description'
...
disabled={isRestricted(['apim:api_create'], api)}
/>Disabled view:
Input elements can be rendered conditionally if the element is not required to be displayed to some users or Links not needed to set a "to-target"
e.g. 1 :
<Link to={!isRestricted(['apim:api_create'], api) && url}>e.g. 2 :
{isRestricted(['apim:api_create'], api) && (
<Grid item>
<Typography variant='body2' color='primary'>
<FormattedMessage
id='Apis.Details.Scopes.Scopes.update.not.allowed'
defaultMessage={
'*You are not authorized to update Scopes of'
+ ' the API due to insufficient permissions'
}
/>
</Typography>
</Grid>
)}IMPORTANT : Displaying a banner when fields are disabled.
It is always preferred to display a banner in the page, wherever appropriate (top/bottom) if any field on the page is restricted to update, for a user.
As above the value of "disabled" property is set by calling isRestricted(..) function defined in AuthManager.js
This function has to be imported into the React component.
import { isRestricted } from 'AppData/AuthManager';Arguments passed to the isRestricted() function
Who should be allowed to update the particular API field should be conveyed by this, by passing the related scopes achieved by those roles.
In the above example, only the users having "apim:api_create" scope can update the field. For others, the field will be disabled.
If a field needs to be allowed to edit for both 'publisher', 'creator' roles. the arguments has to be passed as below.
disabled={isRestricted(['apim:api_create', 'apim:api_publish'], api)} This API object should have lifeCycleStatus field.
api object can be utilized in below approaches.
- api object is passed to some react components already via props and already set.
const { api } = this.props;- Taken from APIContext with react useContext
If api object is not passed alrady to the component via props, it can be taken from APIContext with react useContext if the Component is a functional component.
Importing APIContext and useContext (e.g. [3] ApplicationLevel.jsx)
import APIContext from 'AppComponents/Apis/Details/components/ApiContext';
import React, { useContext } from 'react';getting api via useContext
const { api } = useContext(APIContext);- Getting using withAPI
import { withAPI } from 'AppComponents/Apis/Details/components/ApiContext';Publisher users are allowed to update the below fields.
- Visibility on store
- Tags - has to remove from in configuration tab
- API Documentation
- Subscription availability
- Subscription tiers
- Business info
- Gateways
- API properties
- Monatization
- API Thumbnail image
Creator users are allowed to update any API field, only if the API is in "Created" life cycle status. This condition is handled within the function.