Overview

This PR implements 8 UI/UX improvements to enhance the read-only user experience in the WSO2 API Manager Publisher portal. Read-only users (with internal/observer role) should have a clear, consistent experience where all editing capabilities are properly disabled with appropriate visual feedback.

Problem Statement

Read-only users with scopes apim:api_view and apim:publisher_settings encountered several UX issues:

• Interactive elements appeared clickable but were non-functional
• Loading states persisted indefinitely when operations failed due to lack of permissions
• Missing visual feedback indicating why certain actions were disabled
• Drag-and-drop functionality was still active despite users lacking edit permissions

Changes Implemented

1. Deployments Page

File: DeploymentOnbording.jsx

Disabled the "Add a description" buttons for revision deployment by adding disabled={isCreateOrPublishRestricted()} prop, preventing read-only users from attempting to add descriptions.

2. Basic Info - Labels Section

File: DesignConfigurations.jsx

Disabled the "Attach Labels" IconButton with disabled={isAccessRestricted()}, preventing read-only users from opening the label selection dialog.

3. Runtime Configurations - Audience Validation

File: Audience.jsx

• Imported isRestricted from AuthManager
• Added disabled={isAccessRestricted()} to both the Audience Validation Switch and the Allowed Audience ChipInput
• Prevents read-only users from modifying audience validation settings

4. MCP Tools - Delete Button

File: Tools.jsx

Changed disableDelete={false} to disableDelete={disableUpdate} to ensure the delete button respects the same read-only restrictions as other editing operations.

5. Tryout Console - API Key Generation

File: TryOutConsole.jsx

• Imported isRestricted from AuthManager
• Added permission check before auto-generating API key on page load
• For read-only users, skip key generation and mark the task as completed to prevent infinite loading spinner
• Fixes the infinite loading issue and empty API key problem

6. Scopes Page - Edit Button Feedback

File: Scopes.jsx

• Wrapped the Edit button with a Tooltip that displays "You do not have permission to edit scopes" when the button is disabled
• Wrapped the button in a <span> to ensure tooltip works with disabled button
• Provides clear visual feedback to users about why the action is unavailable

7. Global Policy Page

File: Listing.tsx

No changes required - existing implementation already shows appropriate onboarding message: "Please contact a privileged user to create a global policy" when users lack apim:gateway_policy_manage permission.

8. API Policies - Drag and Drop

Files: DraggablePolicyCard.tsx, PolicyList.tsx, TabPanel.tsx (both API-specific and shared)

• Added isReadOnly prop to DraggablePolicyCard interface
• Implemented canDrag: !isReadOnly in the useDrag hook configuration
• Changed cursor style to 'default' instead of 'move' for read-only users
• Conditionally attached drag ref only when user has edit permissions
• Propagated isReadOnly prop through component hierarchy (PolicyList → TabPanel → TabPanelShared → DraggablePolicyCard)
• Prevents read-only users from dragging policies while still allowing them to view policy details

Technical Approach

• All permission checks use the existing AuthManager.isRestricted() method with appropriate scopes
• Changes follow the established codebase patterns for handling read-only restrictions
• Implementation is minimal and surgical, modifying only what's necessary
• No new dependencies or utility functions added

Testing Recommendations

1. Create a read-only user with Internal/observer role
2. Login and verify:
   • All buttons mentioned above are disabled with appropriate visual feedback
   • Tryout console loads without infinite spinner and shows disabled state
   • Scopes edit button shows tooltip on hover
   • API policies cannot be dragged but can be viewed
   • Global policies show appropriate message when empty

Files Changed

• 10 files modified
• 81 insertions, 24 deletions
• All changes are backwards compatible

Fixes #[issue_number]

Fixes wso2/api-manager#4278

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.