From 758aa45624868c9a16713cdcea11e6275eb6bfd2 Mon Sep 17 00:00:00 2001 From: Lakith Date: Thu, 4 Jan 2024 17:18:49 +0530 Subject: [PATCH 01/12] Add searchable option to API resource scopes --- .../OperationGovernance.jsx | 153 +++++++----------- 1 file changed, 59 insertions(+), 94 deletions(-) diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Apis/Details/Resources/components/operationComponents/OperationGovernance.jsx b/portals/publisher/src/main/webapp/source/src/app/components/Apis/Details/Resources/components/operationComponents/OperationGovernance.jsx index 828e047f3f5..cc3fe2d0b98 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/Apis/Details/Resources/components/operationComponents/OperationGovernance.jsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/Apis/Details/Resources/components/operationComponents/OperationGovernance.jsx @@ -19,9 +19,12 @@ import React from 'react'; import PropTypes from 'prop-types'; import Grid from '@material-ui/core/Grid'; +import Autocomplete from '@material-ui/lab/Autocomplete'; import Button from '@material-ui/core/Button'; import Box from '@material-ui/core/Box'; import Checkbox from '@material-ui/core/Checkbox'; +import CheckBoxIcon from '@material-ui/icons/CheckBox'; +import CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank'; import Divider from '@material-ui/core/Divider'; import Typography from '@material-ui/core/Typography'; import Switch from '@material-ui/core/Switch'; @@ -32,13 +35,15 @@ import MenuItem from '@material-ui/core/MenuItem'; import Tooltip from '@material-ui/core/Tooltip'; import HelpOutline from '@material-ui/icons/HelpOutline'; import LaunchIcon from '@material-ui/icons/Launch'; -import ListSubheader from '@material-ui/core/ListSubheader'; import { Link } from 'react-router-dom'; import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown'; import ExpandLessIcon from '@material-ui/icons/ExpandLess'; import { useIntl, FormattedMessage } from 'react-intl'; import { getOperationScopes } from '../../operationUtils'; +const icon = ; +const checkedIcon = ; + /** * * Renders the security , throttling policies and scopes selection section in the operation collapsed page @@ -235,106 +240,66 @@ export default function OperationGovernance(props) { - - { operation['x-auth-type'] && operation['x-auth-type'].toLowerCase() !== 'none' ? ( - (Array.isArray(selected) ? selected.join(', ') : selected), + + {operation['x-auth-type'] && operation['x-auth-type'].toLowerCase() !== 'none' ? ( + option.shared ? 'Shared Scopes' : 'API Scopes'} + disableCloseOnSelect + value={operationScopes.map((scope) => ({ scope: { name: scope } }))} + getOptionLabel={(option) => option.scope.name} + getOptionSelected={(option, value) => option.scope.name === value.scope.name} + onChange={(event, newValue) => { + const selectedScopes = newValue.map((val) => val.scope.name); + operationsDispatcher({ + action: 'scopes', + data: { target, verb, value: selectedScopes ? [selectedScopes] : [] }, + }); }} - disabled={disableUpdate} - fullWidth - label={api.scopes.length !== 0 || sharedScopes ? intl.formatMessage({ - id: 'Apis.Details.Resources.components.operationComponents.' - + 'OperationGovernance.operation.scope.label.default', - defaultMessage: 'Operation scope', - }) : intl.formatMessage({ - id: 'Apis.Details.Resources.components.operationComponents.' - + 'OperationGovernance.operation.scope.label.notAvailable', - defaultMessage: 'No scope available', - })} - value={operationScopes} - onChange={({ target: { value } }) => operationsDispatcher({ - action: 'scopes', - data: { target, verb, value: value ? [value] : [] }, - })} - helperText={( - - )} - margin='dense' - variant='outlined' - id={verb + target + '-operation-scope-select'} - > - - - - {filteredApiScopes.length !== 0 ? filteredApiScopes.map((apiScope) => ( - - - {apiScope.scope.name} - - )) : ( - - - - - + renderOption={(option, { selected }) => ( + <> + + {option.scope.name} + )} - - - - {sharedScopes && sharedScopes.length !== 0 ? sharedScopes.map((sharedScope) => ( - - - {sharedScope.scope.name} - - )) : ( - - + style={{ width: 500 }} + renderInput={(params) => ( + - - + )} + margin='dense' + variant='outlined' + id={verb + target + '-operation-scope-select'} /> )} - - ) : null } + /> + ) : null} - + { operation['x-auth-type'] && operation['x-auth-type'].toLowerCase() !== 'none' ? !disableUpdate && ( From 7063859640cf854437329aca7e88a2ba691463cc Mon Sep 17 00:00:00 2001 From: Lakith Date: Fri, 5 Jan 2024 10:47:51 +0530 Subject: [PATCH 02/12] Add no options text --- .../components/operationComponents/OperationGovernance.jsx | 1 + 1 file changed, 1 insertion(+) diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Apis/Details/Resources/components/operationComponents/OperationGovernance.jsx b/portals/publisher/src/main/webapp/source/src/app/components/Apis/Details/Resources/components/operationComponents/OperationGovernance.jsx index cc3fe2d0b98..e6274f50a44 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/Apis/Details/Resources/components/operationComponents/OperationGovernance.jsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/Apis/Details/Resources/components/operationComponents/OperationGovernance.jsx @@ -248,6 +248,7 @@ export default function OperationGovernance(props) { id='checkboxes-tags-demo' options={[...filteredApiScopes, ...sharedScopes]} groupBy={(option) => option.shared ? 'Shared Scopes' : 'API Scopes'} + noOptionsText='No scopes available' disableCloseOnSelect value={operationScopes.map((scope) => ({ scope: { name: scope } }))} getOptionLabel={(option) => option.scope.name} From 614cb20f0306b087f1666293694db023fc93d982 Mon Sep 17 00:00:00 2001 From: Lakith Date: Fri, 5 Jan 2024 15:30:31 +0530 Subject: [PATCH 03/12] Add searchable option to API subscription filter subscriber field --- .../Subscriptions/SubscriptionsTable.jsx | 29 +++++++++++++++++++ 1 file changed, 29 insertions(+) diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Apis/Details/Subscriptions/SubscriptionsTable.jsx b/portals/publisher/src/main/webapp/source/src/app/components/Apis/Details/Subscriptions/SubscriptionsTable.jsx index cdcd2998c16..68f005f5236 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/Apis/Details/Subscriptions/SubscriptionsTable.jsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/Apis/Details/Subscriptions/SubscriptionsTable.jsx @@ -41,6 +41,8 @@ import Alert from 'AppComponents/Shared/Alert'; import API from 'AppData/api'; import { ScopeValidation, resourceMethod, resourcePath } from 'AppData/ScopeValidation'; import AuthManager from 'AppData/AuthManager'; +import { Autocomplete } from '@material-ui/lab'; +import { TextField } from '@material-ui/core'; import Invoice from './Invoice'; const styles = (theme) => ({ @@ -695,6 +697,33 @@ class SubscriptionsTable extends Component { return null; }, filter: true, + display: true, + filterType: 'custom', + filterOptions: { + logic: (sub, filters) => { + if (filters.length) return !filters.includes(sub); + return false; + }, + display: (filterList, onChange, index, column) => { + return ( sub.subscriber)))} + value={filterList[index][0] ? filterList[index][0] : null} + onChange={(event, newValue) => { + const updatedFilterList = [...filterList]; + updatedFilterList[index] = newValue ? [newValue] : []; + onChange(updatedFilterList[index], index, column); + }} + renderInput={(params) => ( + + )} + />); + }, + }, }, }, { From 70e7152e419568561c71e4f2e4a91a37a079679c Mon Sep 17 00:00:00 2001 From: Lakith Date: Sat, 6 Jan 2024 12:34:30 +0530 Subject: [PATCH 04/12] Add searchable option to API subscription filter application field --- .../Subscriptions/SubscriptionsTable.jsx | 28 +++++++++++++++++++ 1 file changed, 28 insertions(+) diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Apis/Details/Subscriptions/SubscriptionsTable.jsx b/portals/publisher/src/main/webapp/source/src/app/components/Apis/Details/Subscriptions/SubscriptionsTable.jsx index 68f005f5236..9dbb4cbe5a1 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/Apis/Details/Subscriptions/SubscriptionsTable.jsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/Apis/Details/Subscriptions/SubscriptionsTable.jsx @@ -736,6 +736,34 @@ class SubscriptionsTable extends Component { ), options: { sort: false, + filter: true, + display: true, + filterType: 'custom', + filterOptions: { + logic: (app, filters) => { + if (filters.length) return !filters.includes(app); + return false; + }, + display: (filterList, onChange, index, column) => { + return ( sub.name)))} + value={filterList[index][0] ? filterList[index][0] : null} + onChange={(event, newValue) => { + const updatedFilterList = [...filterList]; + updatedFilterList[index] = newValue ? [newValue] : []; + onChange(updatedFilterList[index], index, column); + }} + renderInput={(params) => ( + + )} + />); + }, + }, }, }, { From a2a5e57a26753ff586bd4e5c68cdadcea97e3cba Mon Sep 17 00:00:00 2001 From: Lakith Date: Sat, 6 Jan 2024 12:45:09 +0530 Subject: [PATCH 05/12] Add searchable option to API subscription filter tier field --- .../Subscriptions/SubscriptionsTable.jsx | 28 +++++++++++++++++++ 1 file changed, 28 insertions(+) diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Apis/Details/Subscriptions/SubscriptionsTable.jsx b/portals/publisher/src/main/webapp/source/src/app/components/Apis/Details/Subscriptions/SubscriptionsTable.jsx index 9dbb4cbe5a1..237f3a789bf 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/Apis/Details/Subscriptions/SubscriptionsTable.jsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/Apis/Details/Subscriptions/SubscriptionsTable.jsx @@ -790,6 +790,34 @@ class SubscriptionsTable extends Component { ), options: { sort: false, + filter: true, + display: true, + filterType: 'custom', + filterOptions: { + logic: (tier, filters) => { + if (filters.length) return !filters.includes(tier); + return false; + }, + display: (filterList, onChange, index, column) => { + return ( sub.throttlingPolicy)))} + value={filterList[index][0] ? filterList[index][0] : null} + onChange={(event, newValue) => { + const updatedFilterList = [...filterList]; + updatedFilterList[index] = newValue ? [newValue] : []; + onChange(updatedFilterList[index], index, column); + }} + renderInput={(params) => ( + + )} + />); + }, + }, }, }, { From 3a3ba20ec1fdcde76e48a03588d850466cee648a Mon Sep 17 00:00:00 2001 From: Lakith Date: Sat, 6 Jan 2024 18:05:43 +0530 Subject: [PATCH 06/12] Add searchable option to API categories in Publisher API basic info --- .../components/APICategories.jsx | 144 +++++++----------- .../OperationGovernance.jsx | 3 +- 2 files changed, 55 insertions(+), 92 deletions(-) diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Apis/Details/Configuration/components/APICategories.jsx b/portals/publisher/src/main/webapp/source/src/app/components/Apis/Details/Configuration/components/APICategories.jsx index f5cb662144b..63bed13f781 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/Apis/Details/Configuration/components/APICategories.jsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/Apis/Details/Configuration/components/APICategories.jsx @@ -20,9 +20,10 @@ import React, { useState, useEffect } from 'react'; import PropTypes from 'prop-types'; import TextField from '@material-ui/core/TextField'; import { FormattedMessage } from 'react-intl'; -import MenuItem from '@material-ui/core/MenuItem'; -import ListItemText from '@material-ui/core/ListItemText'; +import { Autocomplete } from '@material-ui/lab'; import Checkbox from '@material-ui/core/Checkbox'; +import CheckBoxIcon from '@material-ui/icons/CheckBox'; +import CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank'; import Box from '@material-ui/core/Box'; import Tooltip from '@material-ui/core/Tooltip'; import HelpOutline from '@material-ui/icons/HelpOutline'; @@ -43,6 +44,10 @@ const useStyles = makeStyles((theme) => ({ textOverflow: 'ellipsis', }, })); + +const icon = ; +const checkedIcon = ; + /** * Render the categories drop down. * @param {JSON} props props passed from it's parents. @@ -60,104 +65,61 @@ function APICategories(props) { if (!categories.list) { return null; - } else if (categories.list.length === 0) { + } else { return ( - category.name)} + noOptionsText='No API categories defined' + disableCloseOnSelect + value={api.categories} + onChange={(e, newValue) => configDispatcher({ action: 'categories', value: newValue })} + renderOption={(category, { selected }) => ( <> - + {category} )} - margin='normal' - variant='outlined' - disabled - value='emptyMessage' - > - - - )} + renderInput={(params) => ( + + ) : ( + + ) + } + placeholder='Search API categories' + helperText='Select API Categories for the API' + margin='normal' + variant='outlined' + id='APICategories' /> - - - - ); - } else { - return ( - - - - )} - name='categories' - margin='normal' - variant='outlined' - disabled={isRestricted(['apim:api_create', 'apim:api_publish'], apiFromContext)} - value={api.categories} - SelectProps={{ - multiple: true, - renderValue: (selected) => (Array.isArray(selected) ? selected.join(', ') : selected), - MenuProps: { - anchorOrigin: { - vertical: 'bottom', - horizontal: 'left', - }, - getContentAnchorEl: null, - keepMounted: true, - PaperProps: { - style: { - maxHeight: 300, - maxWidth: 300, - }, - }, - }, - }} - onChange={(e) => configDispatcher({ action: 'categories', value: e.target.value })} - InputProps={{ - id: 'itest-id-categories-input', - }} - helperText='Select API Categories for the API' - > - { categories.list.map((category) => ( - - - - - ))} - + /> diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Apis/Details/Resources/components/operationComponents/OperationGovernance.jsx b/portals/publisher/src/main/webapp/source/src/app/components/Apis/Details/Resources/components/operationComponents/OperationGovernance.jsx index e6274f50a44..94a544eaa7e 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/Apis/Details/Resources/components/operationComponents/OperationGovernance.jsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/Apis/Details/Resources/components/operationComponents/OperationGovernance.jsx @@ -245,7 +245,7 @@ export default function OperationGovernance(props) { option.shared ? 'Shared Scopes' : 'API Scopes'} noOptionsText='No scopes available' @@ -263,6 +263,7 @@ export default function OperationGovernance(props) { renderOption={(option, { selected }) => ( <> Date: Mon, 8 Jan 2024 11:06:55 +0530 Subject: [PATCH 07/12] Add searchable option to API topic scopes for WebSocket APIs --- .../asyncapi/OperationGovernance.jsx | 165 +++++++----------- 1 file changed, 63 insertions(+), 102 deletions(-) diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Apis/Details/Resources/components/operationComponents/asyncapi/OperationGovernance.jsx b/portals/publisher/src/main/webapp/source/src/app/components/Apis/Details/Resources/components/operationComponents/asyncapi/OperationGovernance.jsx index eba44dd017a..49fbdd0432d 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/Apis/Details/Resources/components/operationComponents/asyncapi/OperationGovernance.jsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/Apis/Details/Resources/components/operationComponents/asyncapi/OperationGovernance.jsx @@ -19,18 +19,19 @@ import React from 'react'; import PropTypes from 'prop-types'; import Grid from '@material-ui/core/Grid'; +import Autocomplete from '@material-ui/lab/Autocomplete'; import Checkbox from '@material-ui/core/Checkbox'; +import CheckBoxIcon from '@material-ui/icons/CheckBox'; +import CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank'; import Divider from '@material-ui/core/Divider'; import Typography from '@material-ui/core/Typography'; import Switch from '@material-ui/core/Switch'; import FormControlLabel from '@material-ui/core/FormControlLabel'; import FormControl from '@material-ui/core/FormControl'; import TextField from '@material-ui/core/TextField'; -import MenuItem from '@material-ui/core/MenuItem'; import Tooltip from '@material-ui/core/Tooltip'; import HelpOutline from '@material-ui/icons/HelpOutline'; import LaunchIcon from '@material-ui/icons/Launch'; -import ListSubheader from '@material-ui/core/ListSubheader'; import { Link } from 'react-router-dom'; import { useIntl, FormattedMessage } from 'react-intl'; import { isRestricted } from 'AppData/AuthManager'; @@ -50,6 +51,8 @@ export default function OperationGovernance(props) { const operationScopes = getAsyncAPIOperationScopes(operation[verb]); const filteredApiScopes = api.scopes.filter((sharedScope) => !sharedScope.shared); const intl = useIntl(); + const icon = ; + const checkedIcon = ; return ( <> @@ -108,110 +111,68 @@ export default function OperationGovernance(props) { - - { - operation['x-auth-type'] && operation['x-auth-type'].toLowerCase() !== 'none' ? ( - (Array.isArray(selected) ? selected.join(', ') : selected), - }} - disabled={disableUpdate} - fullWidth - label={api.scopes.length !== 0 || sharedScopes ? intl.formatMessage({ - id: 'Apis.Details.Topics.components.operationComponents.' - + 'OperationGovernance.operation.scope.label.default', - defaultMessage: 'Operation scope', - }) : intl.formatMessage({ - id: 'Apis.Details.Topics.components.operationComponents.' - + 'OperationGovernance.operation.scope.label.notAvailable', - defaultMessage: 'No scope available', - })} - value={operationScopes} - onChange={({ target: { value } }) => operationsDispatcher({ + + {operation['x-auth-type'] && operation['x-auth-type'].toLowerCase() !== 'none' ? ( + option.shared ? 'Shared Scopes' : 'API Scopes'} + noOptionsText='No scopes available' + disableCloseOnSelect + value={operationScopes.map((scope) => ({ scope: { name: scope } }))} + getOptionLabel={(option) => option.scope.name} + getOptionSelected={(option, value) => option.scope.name === value.scope.name} + onChange={(event, newValue) => { + const selectedScopes = newValue.map((val) => val.scope.name); + operationsDispatcher({ action: 'scopes', - data: { target, verb, value: value ? [value] : [] }, - })} - helperText={( - - )} - margin='dense' - variant='outlined' - > - - - - {filteredApiScopes.length !== 0 ? filteredApiScopes.map((apiScope) => ( - - - {apiScope.scope.name} - - )) : ( - - - - - - )} - - ( + <> + - - {sharedScopes && sharedScopes.length !== 0 ? sharedScopes.map((sharedScope) => ( - - + )} + style={{ width: 500 }} + renderInput={(params) => ( + - {sharedScope.scope.name} - - )) : ( - - - - - - )} - - ) : null - } + )} + margin='dense' + variant='outlined' + id={verb + target + '-operation-scope-select'} /> + )} + /> + ) : null} - + { operation['x-auth-type'] && operation['x-auth-type'].toLowerCase() !== 'none' ? !disableUpdate && ( Date: Tue, 9 Jan 2024 17:39:37 +0530 Subject: [PATCH 08/12] Add searchable option to tier field of API subscription in devportal --- .../Shared/AppsAndKeys/SubscribeToApi.jsx | 55 ++++++++++++------- 1 file changed, 36 insertions(+), 19 deletions(-) diff --git a/portals/devportal/src/main/webapp/source/src/app/components/Shared/AppsAndKeys/SubscribeToApi.jsx b/portals/devportal/src/main/webapp/source/src/app/components/Shared/AppsAndKeys/SubscribeToApi.jsx index e5752854a63..977cc3b4566 100755 --- a/portals/devportal/src/main/webapp/source/src/app/components/Shared/AppsAndKeys/SubscribeToApi.jsx +++ b/portals/devportal/src/main/webapp/source/src/app/components/Shared/AppsAndKeys/SubscribeToApi.jsx @@ -117,7 +117,7 @@ const styles = theme => ({ const subscribeToApi = (props) => { const [appSelected, setAppSelected] = useState(''); - const [policySelected, setPolicySelected] = useState(''); + const [policySelected, setPolicySelected] = useState({tierName:''}); const [applicationsList, setApplicationsList] = useState([]); const { classes, @@ -128,9 +128,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]); @@ -158,8 +171,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; @@ -182,6 +195,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)} @@ -197,7 +211,7 @@ const subscribeToApi = (props) => { )} - {throttlingPolicyList && ( + {sortedThrottlingPolicyList && ( { defaultMessage='Business Plan' /> - } - displayEmpty - name='policySelected' - className={classes.selectEmpty} - > - {throttlingPolicyList.map(policy => ( - + 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) => } + groupBy={(option) => option.tierPlan === 'COMMERCIAL' ? 'Commercial' : 'Free'} + renderOption={(policy) => ( + {policy.tierPlan === 'COMMERCIAL' ? ( { )} - ))} - + )} + /> {' '} - {throttlingPolicyList.map((policy, index) => ( + {sortedThrottlingPolicyList.map((policy, index) => ( {policy.tierName} - {index !== throttlingPolicyList.length - 1 && ,} + {index !== sortedThrottlingPolicyList.length - 1 && ,} ))} From ec1e269ccd75e9db0878069165ed812afa8c8a5a Mon Sep 17 00:00:00 2001 From: Lakith Date: Tue, 9 Jan 2024 18:56:41 +0530 Subject: [PATCH 09/12] Add searchable option to scope field for token gen in devportal --- .../components/Shared/AppsAndKeys/Tokens.jsx | 76 ++++++++++--------- 1 file changed, 42 insertions(+), 34 deletions(-) diff --git a/portals/devportal/src/main/webapp/source/src/app/components/Shared/AppsAndKeys/Tokens.jsx b/portals/devportal/src/main/webapp/source/src/app/components/Shared/AppsAndKeys/Tokens.jsx index 7ff8363a566..347afe84aa4 100755 --- a/portals/devportal/src/main/webapp/source/src/app/components/Shared/AppsAndKeys/Tokens.jsx +++ b/portals/devportal/src/main/webapp/source/src/app/components/Shared/AppsAndKeys/Tokens.jsx @@ -19,13 +19,14 @@ import React from 'react'; import { FormattedMessage } from 'react-intl'; import PropTypes from 'prop-types'; import { withStyles } from '@material-ui/core/styles'; -import Input from '@material-ui/core/Input'; -import InputLabel from '@material-ui/core/InputLabel'; +import Autocomplete from '@material-ui/lab/Autocomplete'; +import Checkbox from '@material-ui/core/Checkbox'; +import CheckBoxIcon from '@material-ui/icons/CheckBox'; +import CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank'; import FormControl from '@material-ui/core/FormControl'; +import TextField from '@material-ui/core/TextField'; import Typography from '@material-ui/core/Typography'; -import Chip from '@material-ui/core/Chip'; -import MenuItem from '@material-ui/core/MenuItem'; -import Select from '@material-ui/core/Select'; + // Styles for Grid and Paper elements const styles = theme => ({ @@ -68,8 +69,11 @@ const MenuProps = { getContentAnchorEl: null, }; +const icon = ; +const checkedIcon = ; + /** - * Used to display generate acctoken UI + * Used to display generate access token UI */ const tokens = (props) => { /** @@ -107,37 +111,41 @@ const tokens = (props) => { className={classes.FormControlOdd} disabled={subscriptionScopes.length === 0} > - - - - - } - renderValue={selected => ( -
- {selected.map(value => ( - - ))} -
+ onChange={(e, newValue) => handleChange('scopesSelected', { target: { value: newValue } })} + renderOption={(option, { selected }) => ( + <> + + {option} + + )} + renderInput={(params) => ( + } + /> )} - MenuProps={MenuProps} - > - {subscriptionScopes.map(scope => ( - - {scope} - - ))} - + /> Date: Wed, 10 Jan 2024 13:19:14 +0530 Subject: [PATCH 10/12] Add searchable option to tier field of App subscription mgt in devportal --- .../Apis/Listing/SubscriptionPolicySelect.jsx | 24 +++---- .../Details/SubscriptionTableData.jsx | 64 ++++++++++--------- .../Shared/AppsAndKeys/SubscribeToApi.jsx | 2 +- 3 files changed, 47 insertions(+), 43 deletions(-) diff --git a/portals/devportal/src/main/webapp/source/src/app/components/Apis/Listing/SubscriptionPolicySelect.jsx b/portals/devportal/src/main/webapp/source/src/app/components/Apis/Listing/SubscriptionPolicySelect.jsx index 2c5d0f7ee8b..41dbe1f7136 100644 --- a/portals/devportal/src/main/webapp/source/src/app/components/Apis/Listing/SubscriptionPolicySelect.jsx +++ b/portals/devportal/src/main/webapp/source/src/app/components/Apis/Listing/SubscriptionPolicySelect.jsx @@ -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'; @@ -80,15 +81,17 @@ class SubscriptionPolicySelect extends React.Component { policies && (
- + )} + /> ) : (status === 'ON_HOLD') @@ -321,38 +321,40 @@ class SubscriptionTableData extends React.Component { ) : (
- - )} + option.label ?? option} + getOptionSelected={(option, value) => option.value === value} value={selectedTier} - name='throttlingPolicy' - onChange={(e) => this.setSelectedTier(e.target.value)} - helperText={( - this.setSelectedTier(newValue.value)} + renderInput={(params) => ( + + )} + helperText={( + + )} + margin='normal' + variant='outlined' /> )} - margin='normal' - variant='outlined' - > - {this.state.tiers.map((tier) => ( - - {tier.label} - - ))} - + /> { (status === 'TIER_UPDATE_PENDING') && (
diff --git a/portals/devportal/src/main/webapp/source/src/app/components/Shared/AppsAndKeys/SubscribeToApi.jsx b/portals/devportal/src/main/webapp/source/src/app/components/Shared/AppsAndKeys/SubscribeToApi.jsx index 977cc3b4566..e8f05cdd013 100755 --- a/portals/devportal/src/main/webapp/source/src/app/components/Shared/AppsAndKeys/SubscribeToApi.jsx +++ b/portals/devportal/src/main/webapp/source/src/app/components/Shared/AppsAndKeys/SubscribeToApi.jsx @@ -225,7 +225,7 @@ const subscribeToApi = (props) => { /> Date: Thu, 11 Jan 2024 13:33:25 +0530 Subject: [PATCH 11/12] Add styles correction to avoid extra hover grey box on Menuitem --- .../src/app/components/Shared/AppsAndKeys/SubscribeToApi.jsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/portals/devportal/src/main/webapp/source/src/app/components/Shared/AppsAndKeys/SubscribeToApi.jsx b/portals/devportal/src/main/webapp/source/src/app/components/Shared/AppsAndKeys/SubscribeToApi.jsx index e8f05cdd013..0c8221393b5 100755 --- a/portals/devportal/src/main/webapp/source/src/app/components/Shared/AppsAndKeys/SubscribeToApi.jsx +++ b/portals/devportal/src/main/webapp/source/src/app/components/Shared/AppsAndKeys/SubscribeToApi.jsx @@ -112,6 +112,9 @@ const styles = theme => ({ }, appDropDown: { color: theme.palette.getContrastText(theme.palette.background.paper), + '&:hover': { + backgroundColor: 'unset', + }, }, }); From 1e9923b2f8f6f493eff0b3f57082e3bda04dbe53 Mon Sep 17 00:00:00 2001 From: Lakith Date: Thu, 11 Jan 2024 14:26:55 +0530 Subject: [PATCH 12/12] Fix filterType duplicate key issue --- .../components/Apis/Details/Subscriptions/SubscriptionsTable.jsx | 1 - 1 file changed, 1 deletion(-) diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Apis/Details/Subscriptions/SubscriptionsTable.jsx b/portals/publisher/src/main/webapp/source/src/app/components/Apis/Details/Subscriptions/SubscriptionsTable.jsx index 237f3a789bf..be93b7c0bb9 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/Apis/Details/Subscriptions/SubscriptionsTable.jsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/Apis/Details/Subscriptions/SubscriptionsTable.jsx @@ -655,7 +655,6 @@ class SubscriptionsTable extends Component { ), options: { sort: false, - filterType: 'textField', customBodyRender: (value, tableMeta) => { if (tableMeta.rowData) { let claimsObject;