Skip to content

Commit

Permalink
Add type feild to gateway UI
Browse files Browse the repository at this point in the history
  • Loading branch information
@Krishanx92
Krishanx92 committed Feb 18, 2024
1 parent 5a01b4f commit 094a261
Show file tree
Hide file tree
Showing 6 changed files with 186 additions and 83 deletions.
1 change: 1 addition & 0 deletions portals/admin/src/main/webapp/site/public/locales/en.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,6 +78,7 @@
"AdminPages.Gateways.List.title": "Gateway Environments",
"AdminPages.Gateways.table.header.description": "Description",
"AdminPages.Gateways.table.header.displayName": "Name",
"AdminPages.Gateways.table.header.type": "Type",
"AdminPages.Gateways.table.header.gatewayType": "Gateway Type",
"AdminPages.Gateways.table.header.vhosts": "Virtual Host(s)",
"AdminPages.KeyManager.Delete.form.delete.confirmation.message": "Are you sure you want to delete this KeyManager ?",
Expand Down
1 change: 1 addition & 0 deletions portals/admin/src/main/webapp/site/public/locales/fr.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,6 +79,7 @@
"AdminPages.Gateways.table.header.description": "",
"AdminPages.Gateways.table.header.displayName": "",
"AdminPages.Gateways.table.header.gatewayType": "",
"AdminPages.Gateways.table.header.type": "",
"AdminPages.Gateways.table.header.vhosts": "",
"AdminPages.KeyManager.Delete.form.delete.confirmation.message": "",
"AdminPages.KeyManagers.Delete.form.delete.successful": "",
Expand Down
76 changes: 52 additions & 24 deletions ...in/src/main/webapp/source/src/app/components/GatewayEnvironments/AddEditGWEnvironment.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,12 +24,16 @@ import { useAppContext } from 'AppComponents/Shared/AppContext';
import { FormattedMessage, useIntl } from 'react-intl';
import FormControl from '@material-ui/core/FormControl';
import { makeStyles } from '@material-ui/core/styles';
import MenuItem from '@material-ui/core/MenuItem';
import Select from '@material-ui/core/Select';
import InputLabel from '@material-ui/core/InputLabel';
import FormDialogBase from 'AppComponents/AdminPages/Addons/FormDialogBase';
import Alert from 'AppComponents/Shared/Alert';
import Radio from '@material-ui/core/Radio';
import RadioGroup from '@material-ui/core/RadioGroup';
import Typography from '@material-ui/core/Typography';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import FormHelperText from '@material-ui/core/FormHelperText';
import FormLabel from '@material-ui/core/FormLabel';
import AddEditVhost from 'AppComponents/GatewayEnvironments/AddEditVhost';

Expand Down Expand Up @@ -94,6 +98,7 @@ function reducer(state, { field, value }) {
case 'displayName':
case 'gatewayType':
case 'description':
case 'type':
case 'vhosts':
return { ...state, [field]: value };
case 'editDetails':
Expand All @@ -117,45 +122,40 @@ function AddEditGWEnvironment(props) {
const defaultVhost = {
host: '', httpContext: '', httpsPort: 8243, httpPort: 8280, wssPort: 8099, wsPort: 9099, isNew: true,
};
const { settings } = useAppContext();
const { gatewayTypes } = settings;
const [initialState, setInitialState] = useState({
displayName: '',
description: '',
gatewayType: gatewayTypes && gatewayTypes.length > 1 ? 'Regular' : gatewayTypes[0],
type: 'hybrid',
vhosts: [defaultVhost],
});
const [editMode, setIsEditMode] = useState(false);

const [state, dispatch] = useReducer(reducer, initialState);
const {
name, displayName, description, vhosts,
name, displayName, description, vhosts, type, gatewayType,
} = state;

const onChange = (e) => {
dispatch({ field: e.target.name, value: e.target.value });
};

const [selectedGatewayType, setValue] = React.useState('');
const { settings } = useAppContext();
const { gatewayTypes } = settings;
const getBorderColor = (gatewayType) => {
return selectedGatewayType === gatewayType
const getBorderColor = (gatewayTypeNew) => {
return gatewayType === gatewayTypeNew
? '2px solid #1976D2'
: '2px solid gray';
};

const handleChange = (event) => {
setValue(event.target.value);
};

useEffect(() => {
setInitialState({
displayName: '',
description: '',
selectedGatewayType: '',
gatewayType: '',
type: 'hybrid',
vhosts: [defaultVhost],
});
if (gatewayTypes.length === 1) {
setValue(gatewayTypes[0]);
}
}, []);

const handleHostValidation = (vhost) => {
Expand Down Expand Up @@ -309,7 +309,7 @@ function AddEditGWEnvironment(props) {
return false;
}
const vhostDto = [];
if (selectedGatewayType === 'Regular') {
if (gatewayType === 'Regular') {
vhosts.forEach((vhost) => {
vhostDto.push({
host: vhost.host,
Expand All @@ -320,7 +320,7 @@ function AddEditGWEnvironment(props) {
wssPort: vhost.wssPort,
});
});
} else if (selectedGatewayType === 'APK') {
} else if (gatewayType === 'APK') {
vhosts.forEach((vhost) => {
vhostDto.push({
host: vhost.host,
Expand All @@ -336,12 +336,12 @@ function AddEditGWEnvironment(props) {
if (dataRow) {
// assign the update promise to the promiseAPICall
promiseAPICall = restApi.updateGatewayEnvironment(
dataRow.id, name.trim(), displayName, description, selectedGatewayType, vhostDto,
dataRow.id, name.trim(), displayName, type, description, gatewayType, vhostDto,
);
} else {
// assign the create promise to the promiseAPICall
promiseAPICall = restApi.addGatewayEnvironment(name.trim(), displayName, description,
selectedGatewayType, vhostDto);
promiseAPICall = restApi.addGatewayEnvironment(name.trim(), displayName, type, description,
gatewayType, vhostDto);
}

return promiseAPICall.then(() => {
Expand Down Expand Up @@ -377,14 +377,18 @@ function AddEditGWEnvironment(props) {
name: originalName,
displayName: originalDisplayName,
description: originalDescription,
type: originalType,
vhosts: originalVhosts,
gatewayType: originalGatewayType,
} = dataRow;
setIsEditMode(true);
dispatch({
field: 'editDetails',
value: {
name: originalName,
displayName: originalDisplayName,
type: originalType,
gatewayType: originalGatewayType,
description: originalDescription,
vhosts: originalVhosts,
},
Expand Down Expand Up @@ -475,14 +479,15 @@ function AddEditGWEnvironment(props) {
row
aria-label='gateway-type'
name='gateway-type'
value={selectedGatewayType}
onChange={handleChange}
value={gatewayType}
onChange={onChange}
>
<FormControlLabel
value='Regular'
name='Regular'
name='gatewayType'
className={classes.radioOutline}
control={<Radio />}
disabled={editMode}
label={(
<div>
<span>Regular Gateway</span>
Expand All @@ -496,9 +501,10 @@ function AddEditGWEnvironment(props) {
/>
<FormControlLabel
value='APK'
name='APK'
name='gatewayType'
className={classes.radioOutline}
control={<Radio />}
disabled={editMode}
label={(
<div>
<span>APK Gateway</span>
Expand All @@ -514,10 +520,32 @@ function AddEditGWEnvironment(props) {
</RadioGroup>
</FormControl>
)}
<FormControl
component='fieldset'
variant='outlined'
margin='dense'
style={{ marginTop: '10px', marginBottom: '10px' }}
>
<InputLabel id='demo-simple-select-label'>Type</InputLabel>
<Select
labelId='demo-simple-select-label'
id='demo-simple-select'
value={type}
name='type'
label='Type'
onChange={onChange}
disabled={editMode}
>
<MenuItem value='hybrid'>hybrid</MenuItem>
<MenuItem value='production'>production</MenuItem>
<MenuItem value='sandbox'>sandbox</MenuItem>
</Select>
<FormHelperText>Supported Key Type of the Gateway Environment</FormHelperText>
</FormControl>
<AddEditVhost
initialVhosts={vhosts}
onVhostChange={onChange}
selectedGatewayType={selectedGatewayType}
gatewayType={gatewayType}
/>
</FormControl>
</FormDialogBase>
Expand Down
8 changes: 4 additions & 4 deletions portals/admin/src/main/webapp/source/src/app/components/GatewayEnvironments/AddEditVhost.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ const useStyles = makeStyles((theme) => ({

function AddEditVhost(props) {
const intl = useIntl();
const { onVhostChange, initialVhosts, selectedGatewayType } = props;
const { onVhostChange, initialVhosts, gatewayType } = props;
const classes = useStyles();

const [userVhosts, setUserVhosts] = useState(initialVhosts);
Expand Down Expand Up @@ -225,7 +225,7 @@ function AddEditVhost(props) {
https://${vhost.host || '<HOST>'}:${vhost.httpsPort}/${vhost.httpContext}`
}
<br />
{selectedGatewayType === 'Regular' && (
{gatewayType === 'Regular' && (
`ws://${vhost.host || '<HOST>'}:${vhost.wsPort}/ |
wss://${vhost.host || '<HOST>'}:${vhost.wssPort}/`
)}
Expand Down Expand Up @@ -292,7 +292,7 @@ function AddEditVhost(props) {
<Divider variant='middle' className={classes.portDivider} />
</Grid>
{/* WS Ports */}
{selectedGatewayType === 'Regular' && (
{gatewayType === 'Regular' && (
<Grid item xs={12}>
<Grid container spacing={2}>
<Grid item xs={6} />
Expand Down Expand Up @@ -362,7 +362,7 @@ AddEditVhost.defaultProps = {

AddEditVhost.propTypes = {
onVhostChange: PropTypes.func.isRequired,
selectedGatewayType: PropTypes.string.isRequired,
gatewayType: PropTypes.string.isRequired,
initialVhosts: PropTypes.arrayOf(PropTypes.shape({
host: PropTypes.string.isRequired,
httpContext: PropTypes.string,
Expand Down
Loading

0 comments on commit 094a261

Please sign in to comment.