Skip to content

Commit

Permalink
Merge pull request #525 from Lakith-Rambukkanage/vMain-search-options
Browse files Browse the repository at this point in the history 
Add searchable option to overpopulated list dropdowns
  • Loading branch information
@npamudika
npamudika authored Jan 19, 2024
2 parents 2e3b74a + 1e9923b commit 92f4899
Show file tree
Hide file tree
Showing 8 changed files with 389 additions and 383 deletions.
24 changes: 13 additions & 11 deletions ...ortal/src/main/webapp/source/src/app/components/Apis/Listing/SubscriptionPolicySelect.jsx
View file
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
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
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

0 comments on commit 92f4899

Please sign in to comment.