Skip to content
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

Add searchable option to overpopulated list dropdowns #525

Merged
merged 12 commits into from
Jan 19, 2024
Merged

Add searchable option to overpopulated list dropdowns #525

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
758aa45
Add searchable option to API resource scopes
Lakith-Rambukkanage Jan 4, 2024
7063859
Add no options text
Lakith-Rambukkanage Jan 5, 2024
614cb20
Add searchable option to API subscription filter subscriber field
Lakith-Rambukkanage Jan 5, 2024
70e7152
Add searchable option to API subscription filter application field
Lakith-Rambukkanage Jan 6, 2024
a2a5e57
Add searchable option to API subscription filter tier field
Lakith-Rambukkanage Jan 6, 2024
3a3ba20
Add searchable option to API categories in Publisher API basic info
Lakith-Rambukkanage Jan 6, 2024
8d3674d
Add searchable option to API topic scopes for WebSocket APIs
Lakith-Rambukkanage Jan 8, 2024
26f9387
Add searchable option to tier field of API subscription in devportal
Lakith-Rambukkanage Jan 9, 2024
ec1e269
Add searchable option to scope field for token gen in devportal
Lakith-Rambukkanage Jan 9, 2024
26cd7ce
Add searchable option to tier field of App subscription mgt in devportal
Lakith-Rambukkanage Jan 10, 2024
8504573
Add styles correction to avoid extra hover grey box on Menuitem
Lakith-Rambukkanage Jan 11, 2024
1e9923b
Fix filterType duplicate key issue
Lakith-Rambukkanage Jan 11, 2024
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
24 changes: 13 additions & 11 deletions ...ortal/src/main/webapp/source/src/app/components/Apis/Listing/SubscriptionPolicySelect.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,9 +18,10 @@
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import Select from '@material-ui/core/Select';
import Autocomplete from '@material-ui/lab/Autocomplete';
import MenuItem from '@material-ui/core/MenuItem';
import Button from '@material-ui/core/Button';
import TextField from '@material-ui/core/TextField';
import { FormattedMessage } from 'react-intl';
import { ScopeValidation, resourceMethods, resourcePaths } from '../../Shared/ScopeValidation';

Expand Down Expand Up @@ -80,25 +81,26 @@ class SubscriptionPolicySelect extends React.Component {
policies
&& (
<div className={classes.root}>
<Select
className={classes.select}
<Autocomplete
id='policy-select'
disableClearable
options={policies}
value={selectedPolicy}
onChange={(e) => {
this.setState({ selectedPolicy: e.target.value });
onChange={(e, value) => {
this.setState({ selectedPolicy: value });
}}
id='policy-select'
>
{policies.map((policy) => (
style={{ width: 200 }}
renderInput={(params) => (<TextField {...params} />)}
renderOption={(policy) => (
<MenuItem
value={policy}
key={policy}
id={'policy-select-' + policy}
>
{policy}
</MenuItem>
))}

</Select>
)}
/>
<ScopeValidation
resourcePath={resourcePaths.SUBSCRIPTIONS}
resourceMethod={resourceMethods.POST}
Expand Down
64 changes: 33 additions & 31 deletions .../src/main/webapp/source/src/app/components/Applications/Details/SubscriptionTableData.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@
*/
import React from 'react';
import { Link } from 'react-router-dom';
import Autocomplete from '@material-ui/lab/Autocomplete';
import TableCell from '@material-ui/core/TableCell';
import TableRow from '@material-ui/core/TableRow';
import Icon from '@material-ui/core/Icon';
Expand All @@ -28,7 +29,6 @@ import DialogTitle from '@material-ui/core/DialogTitle';
import Dialog from '@material-ui/core/Dialog';
import Slide from '@material-ui/core/Slide';
import Button from '@material-ui/core/Button';
import MenuItem from '@material-ui/core/MenuItem';
import TextField from '@material-ui/core/TextField';
import { FormattedMessage } from 'react-intl';
import { ScopeValidation, resourceMethods, resourcePaths } from 'AppComponents/Shared/ScopeValidation';
Expand Down Expand Up @@ -288,7 +288,7 @@ class SubscriptionTableData extends React.Component {
id={'Applications.Details.SubscriptionTableData.update.'
+ 'throttling.policy.blocked'}
defaultMessage={'Subscription is in BLOCKED state. '
+ 'You need to unblock the subscription inorder to edit the tier'}
+ 'You need to unblock the subscription in order to edit the tier'}
/>
)
: (status === 'ON_HOLD')
Expand Down Expand Up @@ -321,38 +321,40 @@ class SubscriptionTableData extends React.Component {
)
: (
<div>
<TextField
required
fullWidth
id='outlined-select-currency'
select
label={(
<FormattedMessage
defaultMessage='Business Plan'
id={'Applications.Details.SubscriptionTableData.'
+ 'update.business.plan.name'}
/>
)}
<Autocomplete
id='application-policy'
disableClearable
options={tiers}
getOptionLabel={(option) => option.label ?? option}
getOptionSelected={(option, value) => option.value === value}
value={selectedTier}
name='throttlingPolicy'
onChange={(e) => this.setSelectedTier(e.target.value)}
helperText={(
<FormattedMessage
defaultMessage={'Assign a new Business plan to the '
+ 'existing subscription'}
id={'Applications.Details.SubscriptionTableData.'
+ 'update.throttling.policy.helper'}
onChange={(e, newValue) => this.setSelectedTier(newValue.value)}
renderInput={(params) => (
<TextField
id='outlined-select-currency'
name='throttlingPolicy'
required
{...params}
label={(
<FormattedMessage
defaultMessage='Business Plan'
id={'Applications.Details.SubscriptionTableData.'
+ 'update.business.plan.name'}
/>
)}
helperText={(
<FormattedMessage
defaultMessage={'Assign a new Business plan to the '
+ 'existing subscription'}
id={'Applications.Details.SubscriptionTableData.'
+ 'update.throttling.policy.helper'}
/>
)}
margin='normal'
variant='outlined'
/>
)}
margin='normal'
variant='outlined'
>
{this.state.tiers.map((tier) => (
<MenuItem key={tier.value} value={tier.value}>
{tier.label}
</MenuItem>
))}
</TextField>
/>
{ (status === 'TIER_UPDATE_PENDING')
&& (
<div>
Expand Down
58 changes: 39 additions & 19 deletions ...devportal/src/main/webapp/source/src/app/components/Shared/AppsAndKeys/SubscribeToApi.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -112,12 +112,15 @@ const styles = theme => ({
},
appDropDown: {
color: theme.palette.getContrastText(theme.palette.background.paper),
'&:hover': {
backgroundColor: 'unset',
},
},
});

const subscribeToApi = (props) => {
const [appSelected, setAppSelected] = useState('');
const [policySelected, setPolicySelected] = useState('');
const [policySelected, setPolicySelected] = useState({tierName:''});
const [applicationsList, setApplicationsList] = useState([]);
const {
classes,
Expand All @@ -128,9 +131,22 @@ const subscribeToApi = (props) => {
renderSmall,
} = props;

let sortedThrottlingPolicyList = throttlingPolicyList;

useEffect(() => {
sortedThrottlingPolicyList = throttlingPolicyList.sort((a, b) => {
// Sort by 'COMMERCIAL' tier plan first
if (a.tierPlan === 'COMMERCIAL' && b.tierPlan !== 'COMMERCIAL') {
return -1;
} else if (a.tierPlan !== 'COMMERCIAL' && b.tierPlan === 'COMMERCIAL') {
return 1;
}

// For options within the same tier plan, sort alphabetically
return a.tierName.localeCompare(b.tierName);
});
if (throttlingPolicyList && throttlingPolicyList[0]) {
setPolicySelected(throttlingPolicyList[0].tierName);
setPolicySelected(sortedThrottlingPolicyList[0]);
}
}, [throttlingPolicyList]);

Expand Down Expand Up @@ -158,8 +174,8 @@ const subscribeToApi = (props) => {
setAppSelected(value);
break;
case 'throttlingPolicy':
newRequest.throttlingPolicy = target.value;
setPolicySelected(target.value);
newRequest.throttlingPolicy = value.tierName;
setPolicySelected(value);
break;
default:
break;
Expand All @@ -182,6 +198,7 @@ const subscribeToApi = (props) => {
id="application-subscribe"
aria-describedby='application-helper-text'
options={applicationsList}
disableClearable
value={(applicationsList.length !== 0 && appSelected === '') ?
applicationsList[0] : appSelected}
onChange={(e, value) => handleChange('application', e, value)}
Expand All @@ -197,7 +214,7 @@ const subscribeToApi = (props) => {
</FormHelperText>
</FormControl>
)}
{throttlingPolicyList && (
{sortedThrottlingPolicyList && (
<FormControl
className={classNames(classes.FormControl, classes.smallDisplayFix, {
[classes.smallDisplay]: renderSmall,
Expand All @@ -210,17 +227,20 @@ const subscribeToApi = (props) => {
defaultMessage='Business Plan'
/>
</InputLabel>
<Select
value={policySelected}
<Autocomplete
id='application-policy'
aria-describedby='policies-helper-text'
onChange={e => handleChange('throttlingPolicy', e)}
input={<Input name='policySelected' id='policy-label-placeholder' />}
displayEmpty
name='policySelected'
className={classes.selectEmpty}
>
{throttlingPolicyList.map(policy => (
<MenuItem value={policy.tierName} key={policy.tierName} className={classes.appDropDown}>
options={sortedThrottlingPolicyList}
disableClearable
value={policySelected}
getOptionLabel={(option) => option.tierName}
getOptionSelected={(option, value) => option.tierName === value.tierName}
onChange={(e, value) => handleChange('throttlingPolicy', e, value)}
classes={{ root: classes.fullWidth }}
renderInput={(params) => <TextField {...params} />}
groupBy={(option) => option.tierPlan === 'COMMERCIAL' ? 'Commercial' : 'Free'}
renderOption={(policy) => (
<MenuItem value={policy.tierName} key={policy.tierName} className={classes.appDropDown}>
{policy.tierPlan === 'COMMERCIAL' ? (
<React.Fragment>
<ListItemText
Expand Down Expand Up @@ -248,17 +268,17 @@ const subscribeToApi = (props) => {
<ListItemText primary={policy.tierName} />
)}
</MenuItem>
))}
</Select>
)}
/>
<FormHelperText id='policies-helper-text'>
<FormattedMessage
id='Shared.AppsAndKeys.SubscribeToApi.available.policies'
defaultMessage='Available Policies -'
/>{' '}
{throttlingPolicyList.map((policy, index) => (
{sortedThrottlingPolicyList.map((policy, index) => (
<span key={policy.tierName}>
{policy.tierName}
{index !== throttlingPolicyList.length - 1 && <span>,</span>}
{index !== sortedThrottlingPolicyList.length - 1 && <span>,</span>}
</span>
))}
</FormHelperText>
Expand Down
Loading
Loading