Skip to content

UI Improvements for Read-Only User Experience in Publisher Portal #1168

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 4 commits into
base: main
Choose a base branch
from
Draft

UI Improvements for Read-Only User Experience in Publisher Portal #1168

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
0ad6f52
Initial plan
Copilot Oct 9, 2025
5457054
Implement fixes 1-4: Disable UI elements for read-only users
Copilot Oct 9, 2025
ca64186
Implement fixes 5-6: Fix tryout loading and scopes tooltip
Copilot Oct 9, 2025
8ed2d2d
Complete fix 8: Disable drag and drop for read-only users
Copilot Oct 9, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion ...main/webapp/source/src/app/components/Apis/Details/Configuration/DesignConfigurations.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1046,7 +1046,7 @@ export default function DesignConfigurations() {
<Grid item md={6} align='right'>
{!api.isRevision && (
<Tooltip title='Attach Labels'>
<IconButton onClick={handleOpenList}>
<IconButton onClick={handleOpenList} disabled={isAccessRestricted()}>
<AddIcon />
</IconButton>
</Tooltip>
Expand Down
6 changes: 6 additions & 0 deletions .../main/webapp/source/src/app/components/Apis/Details/Configuration/components/Audience.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ import { FormattedMessage } from 'react-intl';
import Typography from '@mui/material/Typography';
import FormControlLabel from '@mui/material/FormControlLabel';
import Switch from '@mui/material/Switch';
import { isRestricted } from 'AppData/AuthManager';
import { ALL_AUDIENCES_ALLOWED } from './APISecurity/components/apiSecurityConstants';

/**
Expand All @@ -37,11 +38,14 @@ export default function Audience(props) {
const {
configDispatcher,
api: { audiences },
api,
} = props;
const [isAudValidationEnabled, setAudValidationEnabled] = useState(audiences !== null && audiences.length !== 0 &&
!(audiences.includes(ALL_AUDIENCES_ALLOWED)));
const [audienceValues, setAudienceValues] = useState(Array.isArray(audiences) ?
audiences.filter(value => value !== ALL_AUDIENCES_ALLOWED) : []);

const isAccessRestricted = () => isRestricted(['apim:api_publish', 'apim:api_create'], api);
return (
<>
<Grid sx={() => ({ marginBottom: 2, })}>
Expand Down Expand Up @@ -86,6 +90,7 @@ export default function Audience(props) {
}
}}
color='primary'
disabled={isAccessRestricted()}
inputProps={{
'aria-label': 'AudienceValidation',
}}
Expand All @@ -110,6 +115,7 @@ export default function Audience(props) {
<ChipInput
style={{ marginBottom: 40, display: 'flex' }}
value={audienceValues}
disabled={isAccessRestricted()}
helperText={(
<FormattedMessage
id={
Expand Down
2 changes: 2 additions & 0 deletions ...c/main/webapp/source/src/app/components/Apis/Details/Environments/DeploymentOnbording.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -555,6 +555,7 @@ export default function DeploymentOnboarding(props) {
startIcon={<AddIcon />}
onClick={handleDescriptionOpen}
id='add-description-btn'
disabled={isCreateOrPublishRestricted()}
>
<FormattedMessage
id='Apis.Details.Environments.Environments.revision.description.add'
Expand Down Expand Up @@ -742,6 +743,7 @@ export default function DeploymentOnboarding(props) {
display='inline'
startIcon={<AddIcon />}
onClick={handleDescriptionOpen}
disabled={isCreateOrPublishRestricted()}
>
Add a description
</Button>
Expand Down
10 changes: 7 additions & 3 deletions ...r/src/main/webapp/source/src/app/components/Apis/Details/Policies/DraggablePolicyCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,6 +74,7 @@ interface DraggablePolicyCardProps {
showCopyIcon?: boolean;
isLocalToAPI: boolean;
fetchPolicies: () => void;
isReadOnly?: boolean;
}

/**
Expand All @@ -86,6 +87,7 @@ const DraggablePolicyCard: React.FC<DraggablePolicyCardProps> = ({
showCopyIcon,
isLocalToAPI,
fetchPolicies,
isReadOnly = false,
}) => {

const [hovered, setHovered] = useState(false);
Expand All @@ -95,14 +97,15 @@ const DraggablePolicyCard: React.FC<DraggablePolicyCardProps> = ({
() => ({
type: `policyCard-${policyObj.id}`,
item: { droppedPolicy: policyObj },
canDrag: !isReadOnly,
options: {
dropEffect: showCopyIcon ? 'copy' : 'move',
},
collect: (monitor) => ({
isDragging: monitor.isDragging(),
}),
}),
[showCopyIcon],
[showCopyIcon, isReadOnly],
);

const containerStyle = useMemo(
Expand All @@ -111,8 +114,9 @@ const DraggablePolicyCard: React.FC<DraggablePolicyCardProps> = ({
opacity: isDragging ? 0.4 : 1,
borderColor: Utils.stringToColor(policyObj.displayName),
width: '100%',
cursor: isReadOnly ? 'default' : 'move',
}),
[isDragging],
[isDragging, isReadOnly],
);

const handleViewPolicy = () => {
Expand All @@ -126,7 +130,7 @@ const DraggablePolicyCard: React.FC<DraggablePolicyCardProps> = ({
return (
<Root>
<Box display='flex' flexDirection='row' alignItems='center'>
<div ref={drag} style={containerStyle}>
<div ref={isReadOnly ? null : drag} style={containerStyle}>
<ListItem
key={policyObj.id}
className={classes.listItem}
Expand Down
4 changes: 4 additions & 0 deletions .../publisher/src/main/webapp/source/src/app/components/Apis/Details/Policies/PolicyList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -223,6 +223,7 @@ const PolicyList: FC<PolicyListPorps> = ({apiPolicyList, commonPolicyList, fetch
index={0}
selectedTab={selectedTab}
fetchPolicies={fetchPolicies}
isReadOnly={isRestricted(['apim:api_create', 'apim:api_publish'])}
/>
</Box>
) : (
Expand All @@ -249,6 +250,7 @@ const PolicyList: FC<PolicyListPorps> = ({apiPolicyList, commonPolicyList, fetch
index={0}
selectedTab={selectedTab}
fetchPolicies={fetchPolicies}
isReadOnly={isRestricted(['apim:api_create', 'apim:api_publish'])}
/>
<TabPanel
commonPolicyList={commonPolicyList.filter(
Expand All @@ -272,6 +274,7 @@ const PolicyList: FC<PolicyListPorps> = ({apiPolicyList, commonPolicyList, fetch
index={1}
selectedTab={selectedTab}
fetchPolicies={fetchPolicies}
isReadOnly={isRestricted(['apim:api_create', 'apim:api_publish'])}
/>
{!isChoreoConnectEnabled && (
<TabPanel
Expand All @@ -296,6 +299,7 @@ const PolicyList: FC<PolicyListPorps> = ({apiPolicyList, commonPolicyList, fetch
index={2}
selectedTab={selectedTab}
fetchPolicies={fetchPolicies}
isReadOnly={isRestricted(['apim:api_create', 'apim:api_publish'])}
/>
)}
</Box>
Expand Down
3 changes: 3 additions & 0 deletions ...r/src/main/webapp/source/src/app/components/Apis/Details/Policies/components/TabPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ interface TabPanelProps {
apiPolicyList: Policy[];
selectedTab: number;
fetchPolicies: () => void;
isReadOnly?: boolean;
}

/**
Expand All @@ -43,6 +44,7 @@ const TabPanel: FC<TabPanelProps> = ({
apiPolicyList,
selectedTab,
fetchPolicies,
isReadOnly = false,
}) => {
const flowNames = ['request', 'response', 'fault'];
const currentFlow = flowNames[index];
Expand All @@ -56,6 +58,7 @@ const TabPanel: FC<TabPanelProps> = ({
apiPolicyList={apiPolicyList}
fetchPolicies={fetchPolicies}
DraggablePolicyCard={DraggablePolicyCard}
isReadOnly={isReadOnly}
/>
);
};
Expand Down
49 changes: 32 additions & 17 deletions portals/publisher/src/main/webapp/source/src/app/components/Apis/Details/Scopes/Scopes.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -231,25 +231,40 @@ class Scopes extends React.Component {
<table className={classes.actionTable}>
<tr>
<td>
<Button
disabled={this.isAccessRestricted() || api.isRevision}
to={
!this.isAccessRestricted() && !api.isRevision && {
pathname: editUrl,
state: {
scopeName,
},
}
<Tooltip
title={
this.isAccessRestricted() || api.isRevision
? (
<FormattedMessage
id='Apis.Details.Scopes.Scopes.edit.disabled.tooltip'
defaultMessage='You do not have permission to edit scopes'
/>
)
: ''
}
component={Link}
aria-label={'Edit ' + scopeName}
>
<Icon>edit</Icon>
<FormattedMessage
id='Apis.Details.scopes.Edit.text.editor.edit'
defaultMessage='Edit'
/>
</Button>
<span>
<Button
disabled={this.isAccessRestricted() || api.isRevision}
to={
!this.isAccessRestricted() && !api.isRevision && {
pathname: editUrl,
state: {
scopeName,
},
}
}
component={Link}
aria-label={'Edit ' + scopeName}
>
<Icon>edit</Icon>
<FormattedMessage
id='Apis.Details.scopes.Edit.text.editor.edit'
defaultMessage='Edit'
/>
</Button>
</span>
</Tooltip>
</td>
{!enableReadOnly && (
<td>
Expand Down
20 changes: 19 additions & 1 deletion ...publisher/src/main/webapp/source/src/app/components/Apis/Details/TryOut/TryOutConsole.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,7 @@ import Drawer from '@mui/material/Drawer';
import Box from '@mui/material/Box';
import IconButton from '@mui/material/IconButton';
import CloseIcon from '@mui/icons-material/Close';
import { isRestricted } from 'AppData/AuthManager';
import SecurityDetailsPanel from './SecurityDetailsPanel';

const PREFIX = 'TryOutConsole';
Expand Down Expand Up @@ -163,6 +164,15 @@ const TryOutConsole = () => {
getDeployments: { inProgress: false, completed: false, error: false },
});

const getCreateOrPublishScopes = () => {
if (api.apiType && api.apiType.toUpperCase() === 'MCP') {
return ['apim:mcp_server_create', 'apim:mcp_server_publish'];
} else {
return ['apim:api_create', 'apim:api_publish'];
}
};
const isCreateOrPublishRestricted = () => isRestricted(getCreateOrPublishScopes(), api);

const generateInternalKey = useCallback(() => {
tasksStatusDispatcher({ type: 'GENERATE_KEY_START' });
let generateInternalKeyPromise;
Expand All @@ -180,7 +190,15 @@ const TryOutConsole = () => {
.catch((error) => tasksStatusDispatcher({ type: 'GENERATE_KEY_ERROR', error }))
}, [api.id]);

useEffect(generateInternalKey, []); // Auto generate API Key on page load
useEffect(() => {
// Only auto-generate API Key if user has permission
if (!isCreateOrPublishRestricted()) {
generateInternalKey();
} else {
// Mark as completed to avoid infinite loading for read-only users
tasksStatusDispatcher({ type: 'GENERATE_KEY_SUCCESS' });
}
}, []); // Auto generate API Key on page load
useEffect(() => {
tasksStatusDispatcher({ type: 'GET_DEPLOYMENTS_START' });
if (publisherSettings) {
Expand Down
2 changes: 1 addition & 1 deletion ...ls/publisher/src/main/webapp/source/src/app/components/MCPServers/Details/Tools/Tools.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -919,7 +919,7 @@ const Tools = ({
resourcePolicy={{}}
resolvedSpec={{}}
highlight={false}
disableDelete={false}
disableDelete={disableUpdate}
availableOperations={getFilteredAvailableOperations(target)}
/>
</Grid>
Expand Down
7 changes: 6 additions & 1 deletion portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/TabPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,8 @@ interface TabPanelSharedProps {
DraggablePolicyCard: any;
policyList?: Policy[];
commonPolicyList?: Policy[];
apiPolicyList?: Policy[];
apiPolicyList?: Policy[];
isReadOnly?: boolean;
}

const TabPanelShared: FC<TabPanelSharedProps> = ({
Expand All @@ -44,6 +45,7 @@ const TabPanelShared: FC<TabPanelSharedProps> = ({
apiPolicyList,
fetchPolicies,
DraggablePolicyCard,
isReadOnly = false,
}) => {
if (policyList != undefined) {
return (
Expand All @@ -63,6 +65,7 @@ const TabPanelShared: FC<TabPanelSharedProps> = ({
showCopyIcon
isLocalToAPI={singlePolicy.isAPISpecific}
fetchPolicies={fetchPolicies}
isReadOnly={isReadOnly}
/>
);
})}
Expand Down Expand Up @@ -102,6 +105,7 @@ const TabPanelShared: FC<TabPanelSharedProps> = ({
showCopyIcon
isLocalToAPI={singlePolicy.isAPISpecific}
fetchPolicies={fetchPolicies}
isReadOnly={isReadOnly}
/>
);
})
Expand Down Expand Up @@ -140,6 +144,7 @@ const TabPanelShared: FC<TabPanelSharedProps> = ({
showCopyIcon
isLocalToAPI={singlePolicy.isAPISpecific}
fetchPolicies={fetchPolicies}
isReadOnly={isReadOnly}
/>
);
})
Expand Down