UI Improvements for Read-Only User Experience in Publisher Portal

[Copilot]

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]

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Possible UI improvements for read-only view</issue_title>
<issue_description>### Current Limitation

The read only user have the following scopes - apim:api_view and apim:publisher_settings. WSO2 API-M provides a pre-defined role named internal/observer, which is used to group all the read-only users. In read only mode, the publisher portal functionalities should be disabled.

Steps to create a read only user: https://apim.docs.wso2.com/en/latest/manage-apis/design/api-security/authorization/publisher-portal-in-read-only-mode/#step-1-create-a-read-only-user

Suggested Improvement

Here are some minor UI/UX improvements that can be done to the read-only user view.

1. Disable the description button on deployments page

2. Disable the add label button in basic info page

3. Disable the audience validation config in runtime configurations page

4. Disable the delete button in MCP tools page

5. Fix the infinite loading issue and empty API key in Tryout page. Need a better way to imply that the user doesn't have the required permission

Screen.Recording.2025-09-16.at.18.18.47.mov

6. In scopes page, show that the option is disabled. Currently it looks clickable and nothing happens when clicking

Screen.Recording.2025-09-16.at.18.15.31.mov

7. The global policy page looks empty. Need a better way to show that the user doesn't have the required permission.

8. Disable the drag and drop feature in API policy page. Read only user should be able to view the policies, but not to use the drag and drop functionality.

Version

4.6.0</issue_description>

Comments on the Issue (you are @copilot in this section)

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.

[CLAassistant]

Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.
_{You have signed the CLA already but the status is still pending? Let us recheck it.}

[sonarqubecloud]

Please retry analysis of this Pull-Request directly on SonarQube Cloud

[sonarqubecloud]

Quality Gate failed

Failed conditions
3.2% Duplication on New Code (required ≤ 3%)

See analysis details on SonarQube Cloud