Skip to content

Commit 939cf38

Browse files
tharikaGitHubtharikaGitHub
committed
Add custom attributes to subscription policy UI
1 parent 6f1feba commit 939cf38

File tree

3 files changed

+127
-2
lines changed
  • features/apimgt/org.wso2.carbon.apimgt.admin.feature/src/main/resources/admin

3 files changed

+127
-2
lines changed

‎features/apimgt/org.wso2.carbon.apimgt.admin.feature/src/main/resources/admin/site/public/locales/en.json‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -309,8 +309,13 @@
309309
"Throttling.Subscription.Policy.policy.dialog.delete.error": "Subscription Rate Limiting Policy will be deleted.",
310310
"Throttling.Subscription.Policy.policy.edit.success": "Subscription Rate Limiting Policy updated successfully.",
311311
"Throttling.Subscription.Policy.search.default": "Subscription Rate Limiting Policies",
312+
"Throttling.Subscription.Properties.Properties.\n show.add.property.property.name": "Name",
313+
"Throttling.Subscription.Properties.property.value": "Value",
314+
"Throttling.Subscription.attribute.delete.tooltip": "Delete",
312315
"Throttling.Subscription.billing.cycle": "Billing Cycle",
313316
"Throttling.Subscription.currency": "Currency",
317+
"Throttling.Subscription.custom.attributes": "Custom Attributes",
318+
"Throttling.Subscription.custom.attributes.add": "Add Custom Attribute",
314319
"Throttling.Subscription.dynamic.usage": "Price Per Request",
315320
"Throttling.Subscription.dynamic.usage.tooltip": "Price per request for the given billing cycle in the given currency",
316321
"Throttling.Subscription.enter.permission.allowed": "This policy is \"Allowed\" for above roles.",

‎features/apimgt/org.wso2.carbon.apimgt.admin.feature/src/main/resources/admin/site/public/locales/fr.json‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -309,8 +309,13 @@
309309
"Throttling.Subscription.Policy.policy.dialog.delete.error": "",
310310
"Throttling.Subscription.Policy.policy.edit.success": "",
311311
"Throttling.Subscription.Policy.search.default": "",
312+
"Throttling.Subscription.Properties.Properties.\n show.add.property.property.name": "",
313+
"Throttling.Subscription.Properties.property.value": "",
314+
"Throttling.Subscription.attribute.delete.tooltip": "",
312315
"Throttling.Subscription.billing.cycle": "",
313316
"Throttling.Subscription.currency": "",
317+
"Throttling.Subscription.custom.attributes": "",
318+
"Throttling.Subscription.custom.attributes.add": "",
314319
"Throttling.Subscription.dynamic.usage": "",
315320
"Throttling.Subscription.dynamic.usage.tooltip": "",
316321
"Throttling.Subscription.enter.permission.allowed": "",

‎features/apimgt/org.wso2.carbon.apimgt.admin.feature/src/main/resources/admin/source/src/app/components/Throttling/Subscription/AddEdit.jsx‎

Lines changed: 117 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,13 @@ import Select from '@material-ui/core/Select';
3737
import Switch from '@material-ui/core/Switch';
3838
import HelpOutline from '@material-ui/icons/HelpOutline';
3939
import CircularProgress from '@material-ui/core/CircularProgress';
40+
import DeleteForeverIcon from '@material-ui/icons/DeleteForever';
41+
import Table from '@material-ui/core/Table';
42+
import TableBody from '@material-ui/core/TableBody';
43+
import TableCell from '@material-ui/core/TableCell';
44+
import TableRow from '@material-ui/core/TableRow';
45+
import AddCircle from '@material-ui/icons/AddCircle';
46+
import IconButton from '@material-ui/core/IconButton';
4047
import Tooltip from '@material-ui/core/Tooltip';
4148
import API from 'AppData/api';
4249

@@ -173,6 +180,7 @@ function AddEdit(props) {
173180
},
174181
});
175182

183+
const [customAttributes, setCustomAttributes] = useState([]);
176184
const [state, dispatch] = useReducer(reducer, initialState);
177185

178186
useEffect(() => {
@@ -217,7 +225,7 @@ function AddEdit(props) {
217225
currencyType: '',
218226
billingCycle: 'week',
219227
},
220-
customAttributes: result.body.customAttributes,
228+
customAttributes: setCustomAttributes(result.body.customAttributes),
221229
stopOnQuotaReach: result.body.stopOnQuotaReach,
222230
permissions: {
223231
roles: ['Internal/everyone'],
@@ -378,6 +386,7 @@ function AddEdit(props) {
378386
rateLimitTimeUnit: state.rateLimitTimeUnit,
379387
billingPlan: state.billingPlan,
380388
stopOnQuotaReach: state.stopOnQuotaReach,
389+
customAttributes,
381390
graphQLMaxComplexity: state.graphQL.maxComplexity,
382391
graphQLMaxDepth: state.graphQL.maxDepth,
383392
monetization: {
@@ -407,6 +416,7 @@ function AddEdit(props) {
407416
rateLimitTimeUnit: state.rateLimitTimeUnit,
408417
billingPlan: state.billingPlan,
409418
stopOnQuotaReach: state.stopOnQuotaReach,
419+
customAttributes,
410420
graphQLMaxComplexity: state.graphQL.maxComplexity,
411421
graphQLMaxDepth: state.graphQL.maxDepth,
412422
monetization: {
@@ -474,8 +484,24 @@ function AddEdit(props) {
474484
}
475485
};
476486

477-
return (
487+
const handleAddNewAttributeClick = () => {
488+
setCustomAttributes((prevCustomAttributes) => [...prevCustomAttributes, { name: '', value: '' }]);
489+
};
478490

491+
const handleAttributeDelete = (event) => {
492+
const tmpCustomAttributesForDelete = [...customAttributes];
493+
const { id } = event.currentTarget;
494+
tmpCustomAttributesForDelete.splice(id, 1);
495+
setCustomAttributes(tmpCustomAttributesForDelete);
496+
};
497+
498+
const handleAttributeChange = (event) => {
499+
const tmpCustomAttributes = [...customAttributes];
500+
tmpCustomAttributes[event.target.id][event.target.name] = event.target.value;
501+
setCustomAttributes(tmpCustomAttributes);
502+
};
503+
504+
return (
479505
<ContentBase
480506
pageStyle='half'
481507
title={
@@ -960,6 +986,95 @@ function AddEdit(props) {
960986
/>
961987
</Box>
962988
</Box>
989+
{/* Custom Attributes */}
990+
<Box display='flex' flexDirection='row' alignItems='center'>
991+
<Box flex='1'>
992+
<Typography color='inherit' variant='subtitle2' component='div'>
993+
<FormattedMessage
994+
id='Throttling.Subscription.custom.attributes'
995+
defaultMessage='Custom Attributes'
996+
/>
997+
</Typography>
998+
</Box>
999+
</Box>
1000+
<Box component='div' m={2}>
1001+
<Grid item xs={12}>
1002+
<Box display='flex' flexDirection='row' alignItems='center'>
1003+
<Box flex='1'>
1004+
<Button
1005+
variant='outlined'
1006+
onClick={handleAddNewAttributeClick}
1007+
>
1008+
<AddCircle className={classes.buttonIcon} />
1009+
<FormattedMessage
1010+
id='Throttling.Subscription.custom.attributes.add'
1011+
defaultMessage='Add Custom Attribute'
1012+
/>
1013+
</Button>
1014+
</Box>
1015+
</Box>
1016+
<Table className={classes.table}>
1017+
<TableBody>
1018+
{customAttributes.map((attribute, index) => (
1019+
<TableRow>
1020+
<TableCell>
1021+
<TextField
1022+
fullWidth
1023+
required
1024+
id={index}
1025+
name='name'
1026+
label={intl.formatMessage({
1027+
id: `Throttling.Subscription.Properties.Properties.
1028+
show.add.property.property.name`,
1029+
defaultMessage: 'Name',
1030+
})}
1031+
margin='dense'
1032+
variant='outlined'
1033+
value={attribute.name}
1034+
onChange={handleAttributeChange}
1035+
/>
1036+
</TableCell>
1037+
<TableCell>
1038+
<TextField
1039+
fullWidth
1040+
required
1041+
id={index}
1042+
name='value'
1043+
label={intl.formatMessage({
1044+
id: 'Throttling.Subscription.Properties.property.value',
1045+
defaultMessage: 'Value',
1046+
})}
1047+
margin='dense'
1048+
value={attribute.value}
1049+
onChange={handleAttributeChange}
1050+
variant='outlined'
1051+
/>
1052+
</TableCell>
1053+
<TableCell align='right'>
1054+
<Tooltip
1055+
title={(
1056+
<FormattedMessage
1057+
id='Throttling.Subscription.attribute.delete.tooltip'
1058+
defaultMessage='Delete'
1059+
/>
1060+
)}
1061+
placement='right-end'
1062+
interactive
1063+
>
1064+
<IconButton
1065+
id={index}
1066+
onClick={handleAttributeDelete}
1067+
>
1068+
<DeleteForeverIcon />
1069+
</IconButton>
1070+
</Tooltip>
1071+
</TableCell>
1072+
</TableRow>
1073+
))}
1074+
</TableBody>
1075+
</Table>
1076+
</Grid>
1077+
</Box>
9631078
{/* Permissions */}
9641079
<Box display='flex' flexDirection='row' alignItems='center'>
9651080
<Box flex='1'>

0 commit comments

Comments
 (0)