LCFS - Implement Role-Based Access Control HOC for React Components

[AlexZorkin]

Describe the task:
Develop a Higher-Order Component (HOC) in React that controls the rendering of components based on user roles. This HOC should accept a component and an array of allowed roles, rendering the component only if the user's role matches one of the specified roles.

Purpose:
The purpose of this task is to enhance our application's security and user experience by ensuring that users only have access to components relevant to their role. This will prevent unauthorized access and simplify the user interface for different types of users.

Acceptance Criteria:

• [ ] Create a withRole HOC that takes a React component and an array of allowed roles as parameters.
• [ ] The HOC should check the current user's role and decide whether to render the wrapped component based on the allowed roles.
• [ ] Ensure that the HOC returns null or a specified fallback UI when the user's role does not match the allowed roles.
• [ ] Integrate the HOC in at least one existing component as a demonstration of its functionality.
• [ ] Write unit tests for the HOC to verify that it correctly allows or restricts access based on user roles.
• [ ] Ensure the implementation is compatible with our existing authentication and role management system.

Additional context:

• Consider using a mock function to simulate role retrieval during development, which should be replaced with real role management logic in production.
• The implementation should be flexible enough to accommodate future changes in role definitions or the addition of new roles.
• Documentation should be updated to include instructions on how to use the withRole HOC for future development.

Example Implementation

import React from 'react';

// Mock function to get the current user's role.
// Replace this with the actual logic to retrieve the user's role.
const getCurrentUserRole = () => {
    return 'admin'; // example role
};

// Higher-Order Component
const withRole = (WrappedComponent, allowedRoles) => {
    return class extends React.Component {
        render() {
            const userRole = getCurrentUserRole();

            if (allowedRoles.includes(userRole)) {
                return <WrappedComponent {...this.props} />;
            } else {
                // Render nothing or some fallback UI
                return null;
            }
        }
    };
};

// Example usage
class MyComponent extends React.Component {
    render() {
        // Your component logic
        return <div>Protected Content for Multiple Roles</div>;
    }
}

// Wrap and export your component with allowed roles
export default withRole(MyComponent, ['admin', 'analyst']);

[AlexZorkin]

Hey team! Please add your planning poker estimate with Zenhub @hamed-valiollahi @jig-patel @kevin-hashimoto @prv-proton

[justin-lepitzki]

Nothing for PO to test