Merge pull request #919 from dakshina99/federated-gateway-bug-fixes

[UI][BUG-FIXES] Fix Issues in Gateway Federation Related UIs
wso2 · Feb 19, 2025 · d033d44 · d033d44
2 parents dc645df + f572937
commit d033d44
Show file tree

Hide file tree

Showing 13 changed files with 114 additions and 24 deletions.
diff --git a/.../publisher/src/main/webapp/source/src/app/components/Apis/Create/AIAPI/APICreateAIAPI.jsx b/.../publisher/src/main/webapp/source/src/app/components/Apis/Create/AIAPI/APICreateAIAPI.jsx
@@ -31,6 +31,7 @@ import Alert from 'AppComponents/Shared/Alert';
 import CircularProgress from '@mui/material/CircularProgress';
 import DefaultAPIForm from 'AppComponents/Apis/Create/Components/DefaultAPIForm';
 import APICreateBase from 'AppComponents/Apis/Create/Components/APICreateBase';
+import { usePublisherSettings } from 'AppComponents/Shared/AppContext';
 import { API_SECURITY_API_KEY }
     from 'AppComponents/Apis/Details/Configuration/components/APISecurity/components/apiSecurityConstants';
 import ProvideAIOpenAPI from './Steps/ProvideAIOpenAPI';
@@ -79,11 +80,14 @@ function apiInputsReducer(currentState, inputAction) {
 export default function ApiCreateAIAPI(props) {
     const [wizardStep, setWizardStep] = useState(0);
     const { history, multiGateway } = props;
+    const { data: settings } = usePublisherSettings();
 
     const [apiInputs, inputsDispatcher] = useReducer(apiInputsReducer, {
         type: 'ApiCreateAIAPI',
         inputValue: '',
         formValidity: false,
+        gatewayType: multiGateway && (multiGateway.filter((gw) => gw.value === 'wso2/synapse').length > 0 ?
+            'wso2/synapse' : multiGateway[0]?.value),
     });
 
     const intl = useIntl();
@@ -229,6 +233,7 @@ export default function ApiCreateAIAPI(props) {
                             api={apiInputs}
                             isAPIProduct={false}
                             hideEndpoint
+                            settings={settings}
                         />
                     )}
                 </Grid>

diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Apis/Create/APICreateRoutes.jsx b/portals/publisher/src/main/webapp/source/src/app/components/Apis/Create/APICreateRoutes.jsx
@@ -47,19 +47,19 @@ const gatewayDetails = {
     'wso2/synapse': { 
         value: 'wso2/synapse',
         name: 'Regular Gateway', 
-        description: 'API gateway embedded in APIM runtime. Connect directly to APIM.', 
+        description: 'API gateway embedded in APIM runtime.', 
         isNew: false 
     },
     'wso2/apk': { 
         value: 'wso2/apk',
         name: 'APK Gateway', 
-        description: 'Fast API gateway on Kubernetes. Manages and secures APIs.', 
+        description: 'API gateway running on Kubernetes.', 
         isNew: false 
     },
     'AWS': { 
         value: 'AWS',
         name: 'AWS Gateway', 
-        description: 'API gateway offering from AWS cloud to secures APIs efficiently.', 
+        description: 'API gateway offered by AWS cloud.', 
         isNew: true 
     }
 };

diff --git a/.../main/webapp/source/src/app/components/Apis/Create/APIProduct/APIProductCreateWrapper.jsx b/.../main/webapp/source/src/app/components/Apis/Create/APIProduct/APIProductCreateWrapper.jsx
@@ -376,6 +376,7 @@ export default function ApiProductCreateWrapper(props) {
                             onChange={handleOnChange}
                             api={apiInputs}
                             isAPIProduct
+                            settings={settings}
                         />
                     )}
                     {wizardStep === 1 && (

diff --git a/...sher/src/main/webapp/source/src/app/components/Apis/Create/AsyncAPI/ApiCreateAsyncAPI.jsx b/...sher/src/main/webapp/source/src/app/components/Apis/Create/AsyncAPI/ApiCreateAsyncAPI.jsx
@@ -39,6 +39,7 @@ import TextField from '@mui/material/TextField';
 
 import Chip from '@mui/material/Chip';
 import Joi from '@hapi/joi';
+import { usePublisherSettings } from 'AppComponents/Shared/AppContext';
 import { upperCaseString } from 'AppData/stringFormatter';
 import ExternalEndpoint from 'AppComponents/Apis/Create/AsyncAPI/ExternalEndpoint';
 import ProvideAsyncAPI from './Steps/ProvideAsyncAPI';
@@ -82,6 +83,7 @@ const StyledAPICreateBase = styled(APICreateBase)((
 export default function ApiCreateAsyncAPI(props) {
     const [wizardStep, setWizardStep] = useState(0);
     const { history, multiGateway } = props;
+    const { data: settings } = usePublisherSettings();
     // eslint-disable-next-line no-use-before-define
 
     const [hideEndpoint, setHideEndpoint] = useState(true);
@@ -135,6 +137,8 @@ export default function ApiCreateAsyncAPI(props) {
         inputType: 'url',
         inputValue: '',
         formValidity: false,
+        gatewayType: multiGateway && (multiGateway.filter((gw) => gw.value === 'wso2/synapse').length > 0 ?
+            'wso2/synapse' : multiGateway[0]?.value),
     });
 
     const protocols = [
@@ -356,6 +360,7 @@ export default function ApiCreateAsyncAPI(props) {
                             endpointPlaceholderText='Streaming Provider'
                             appendChildrenBeforeEndpoint
                             multiGateway={multiGateway}
+                            settings={settings}
                         >
                             <Grid container spacing={2}>
                                 {apiInputs.gatewayVendor === 'solace'

diff --git a/...isher/src/main/webapp/source/src/app/components/Apis/Create/Components/DefaultAPIForm.jsx b/...isher/src/main/webapp/source/src/app/components/Apis/Create/Components/DefaultAPIForm.jsx
@@ -34,6 +34,12 @@ import { green } from '@mui/material/colors';
 
 const PREFIX = 'DefaultAPIForm';
 
+const gatewayTypeMap = {
+    'Regular': 'wso2/synapse',
+    'APK': 'wso2/apk',
+    'AWS': 'AWS',
+}
+
 const classes = {
     mandatoryStar: `${PREFIX}-mandatoryStar`,
     helperTextContext: `${PREFIX}-helperTextContext`,
@@ -157,14 +163,19 @@ export default function DefaultAPIForm(props) {
     const {
         onChange, onValidate, api, isAPIProduct, multiGateway,
         isWebSocket, children, appendChildrenBeforeEndpoint, hideEndpoint,
-        readOnlyAPIEndpoint,
+        readOnlyAPIEndpoint, settings,
     } = props;
 
     const [validity, setValidity] = useState({});
     const [isEndpointValid, setIsEndpointValid] = useState();
     const [statusCode, setStatusCode] = useState('');
     const [isUpdating, setUpdating] = useState(false);
     const [isErrorCode, setIsErrorCode] = useState(false);
+    const [gatewayToEnvMap, setGatewayToEnvMap] = useState({
+        'wso2/synapse': true,
+        'wso2/apk': true,
+        'AWS': true,
+    });
     const iff = (condition, then, otherwise) => (condition ? then : otherwise);
 
     const getBorderColor = (gatewayType) => {
@@ -178,6 +189,30 @@ export default function DefaultAPIForm(props) {
         onValidate(Boolean(api.name)
             && (Boolean(api.version))
             && Boolean(api.context));
+
+        if (multiGateway) {
+            const settingsEnvList = settings && settings.environment;
+            multiGateway.forEach((gateway) => {
+                if (settings && settings.gatewayTypes.length >= 2 && Object
+                    .values(gatewayTypeMap).includes(gateway.value)) {
+                    for (const env of settingsEnvList) {
+                        const tmpEnv = gatewayTypeMap[env.gatewayType];
+                        if (tmpEnv === gateway.value) {
+                            setGatewayToEnvMap((prevMap) => ({
+                                ...prevMap,
+                                [gateway.value]: true,
+                            }));
+                            break;
+                        }
+                        setGatewayToEnvMap((prevMap) => ({
+                            ...prevMap,
+                            [gateway.value]: false,
+                        }));
+                    }
+                }
+            });
+        }
+
     }, []);
 
     const updateValidity = (newState) => {
@@ -669,11 +704,13 @@ export default function DefaultAPIForm(props) {
                                 onChange={onChange}
                             >
                                 {multiGateway.map((gateway) =>
-                                    <Grid item xs={Math.floor(12 / multiGateway.length)} key={gateway.value} >
+                                    <Grid container xs={Math.floor(12 / multiGateway.length)} key={gateway.value} 
+                                        alignItems='stretch' >
                                         <FormControlLabel
                                             value={gateway.value}
                                             className={classes.radioOutline}
                                             control={<Radio />}
+                                            disabled = {!gatewayToEnvMap[gateway.value]}
                                             label={(
                                                 <div>
                                                     <span>

diff --git a/...lisher/src/main/webapp/source/src/app/components/Apis/Create/Default/APICreateDefault.jsx b/...lisher/src/main/webapp/source/src/app/components/Apis/Create/Default/APICreateDefault.jsx
@@ -88,7 +88,8 @@ function APICreateDefault(props) {
     }
     const [apiInputs, inputsDispatcher] = useReducer(apiInputsReducer, {
         formValidity: false,
-        gatewayType: 'wso2/synapse',
+        gatewayType: multiGateway && (multiGateway.filter((gw) => gw.value === 'wso2/synapse').length > 0 ?
+            'wso2/synapse' : multiGateway[0]?.value),
     });
 
     useEffect(() => {
@@ -526,6 +527,7 @@ function APICreateDefault(props) {
                         multiGateway={multiGateway}
                         isAPIProduct={isAPIProduct}
                         isWebSocket={isWebSocket}
+                        settings={settings}
                     />
                 </Grid>
                 <Grid item xs={12}>

diff --git a/...lisher/src/main/webapp/source/src/app/components/Apis/Create/GraphQL/ApiCreateGraphQL.jsx b/...lisher/src/main/webapp/source/src/app/components/Apis/Create/GraphQL/ApiCreateGraphQL.jsx
@@ -31,6 +31,7 @@ import Alert from 'AppComponents/Shared/Alert';
 import CircularProgress from '@mui/material/CircularProgress';
 import DefaultAPIForm from 'AppComponents/Apis/Create/Components/DefaultAPIForm';
 import APICreateBase from 'AppComponents/Apis/Create/Components/APICreateBase';
+import { usePublisherSettings } from 'AppComponents/Shared/AppContext';
 
 import ProvideGraphQL from './Steps/ProvideGraphQL';
 
@@ -47,6 +48,7 @@ export default function ApiCreateGraphQL(props) {
     const [wizardStep, setWizardStep] = useState(0);
     const history = useHistory();
     const [policies, setPolicies] = useState([]);
+    const { data: settings } = usePublisherSettings();
 
     useEffect(() => {
         API.policies('subscription').then((response) => {
@@ -105,6 +107,8 @@ export default function ApiCreateGraphQL(props) {
         inputType: 'file',
         inputValue: '',
         formValidity: false,
+        gatewayType: multiGateway && (multiGateway.filter((gw) => gw.value === 'wso2/synapse').length > 0 ?
+            'wso2/synapse' : multiGateway[0]?.value),
     });
 
     /**
@@ -270,6 +274,7 @@ export default function ApiCreateGraphQL(props) {
                             api={apiInputs}
                             isAPIProduct={false}
                             readOnlyAPIEndpoint={apiInputs.inputType === 'endpoint' ? apiInputs.endpoint : null}
+                            settings={settings}
                         />
                     )}
                 </Grid>

diff --git a/...lisher/src/main/webapp/source/src/app/components/Apis/Create/OpenAPI/ApiCreateOpenAPI.jsx b/...lisher/src/main/webapp/source/src/app/components/Apis/Create/OpenAPI/ApiCreateOpenAPI.jsx
@@ -86,6 +86,8 @@ export default function ApiCreateOpenAPI(props) {
         inputType: 'url',
         inputValue: '',
         formValidity: false,
+        gatewayType: multiGateway && (multiGateway.filter((gw) => gw.value === 'wso2/synapse').length > 0 ?
+            'wso2/synapse' : multiGateway[0]?.value),
     });
 
     const intl = useIntl();
@@ -233,6 +235,7 @@ export default function ApiCreateOpenAPI(props) {
                             multiGateway={multiGateway}
                             api={apiInputs}
                             isAPIProduct={false}
+                            settings={settings}
                         />
                     )}
                 </Grid>

diff --git a/.../main/webapp/source/src/app/components/Apis/Create/StreamingAPI/APICreateStreamingAPI.jsx b/.../main/webapp/source/src/app/components/Apis/Create/StreamingAPI/APICreateStreamingAPI.jsx
@@ -143,6 +143,8 @@ const APICreateStreamingAPI = (props) => {
     }
     const [apiInputs, inputsDispatcher] = useReducer(apiInputsReducer, {
         formValidity: false,
+        gatewayType: multiGateway && (multiGateway.filter((gw) => gw.value === 'wso2/synapse').length > 0 ?
+            'wso2/synapse' : multiGateway[0]?.value),
     });
 
     const isAPICreatable = apiInputs.name && apiInputs.context && apiInputs.version && !isCreating;
@@ -440,6 +442,7 @@ const APICreateStreamingAPI = (props) => {
                         multiGateway={multiGateway}
                         isWebSocket={(apiType && apiType === protocolKeys.WebSocket)
                             || apiInputs.protocol === protocolKeys.WebSocket}
+                        settings={settings}
                     >
                         <TextField
                             fullWidth

diff --git a/...ls/publisher/src/main/webapp/source/src/app/components/Apis/Create/WSDL/ApiCreateWSDL.jsx b/...ls/publisher/src/main/webapp/source/src/app/components/Apis/Create/WSDL/ApiCreateWSDL.jsx
@@ -34,6 +34,7 @@ import { Alert as MUIAlert, AlertTitle } from '@mui/lab';
 import CircularProgress from '@mui/material/CircularProgress';
 import DefaultAPIForm from 'AppComponents/Apis/Create/Components/DefaultAPIForm';
 import APICreateBase from 'AppComponents/Apis/Create/Components/APICreateBase';
+import { usePublisherSettings } from 'AppComponents/Shared/AppContext';
 
 import ProvideWSDL from './Steps/ProvideWSDL';
 
@@ -49,6 +50,7 @@ export default function ApiCreateWSDL(props) {
     const [wizardStep, setWizardStep] = useState(0);
     const { history, multiGateway } = props;
     const [policies, setPolicies] = useState([]);
+    const { data: settings } = usePublisherSettings();
 
     useEffect(() => {
         API.policies('subscription').then((response) => {
@@ -93,6 +95,8 @@ export default function ApiCreateWSDL(props) {
         inputValue: '',
         formValidity: false,
         mode: 'create',
+        gatewayType: multiGateway && (multiGateway.filter((gw) => gw.value === 'wso2/synapse').length > 0 ?
+            'wso2/synapse' : multiGateway[0]?.value),
     });
 
     /**
@@ -256,6 +260,7 @@ export default function ApiCreateWSDL(props) {
                             api={apiInputs}
                             isAPIProduct={false}
                             multiGateway={multiGateway}
+                            settings={settings}
                         />
                     )}
                 </Grid>

diff --git a/...main/webapp/source/src/app/components/Apis/Details/Configuration/DesignConfigurations.jsx b/...main/webapp/source/src/app/components/Apis/Details/Configuration/DesignConfigurations.jsx
@@ -33,7 +33,6 @@ import Box from '@mui/material/Box';
 import {
     Checkbox,
     Chip,
-    Divider,
     IconButton,
     List,
     ListItem,
@@ -613,19 +612,29 @@ export default function DesignConfigurations() {
                 );
             } else {
                 return (
-                    <MenuItem disabled sx={{ width: '350px' }} id='label-menu-search-result-no-labels'>
+                    <ListItem sx={{ width: '350px' }} id='label-menu-search-result-no-labels'>
                         <ListItemIcon />
-                        <ListItemText primary='No Labels Found' />
-                    </MenuItem>
+                        <Typography variant='body1' color='textPrimary'>
+                            <FormattedMessage
+                                id='Apis.Details.Configuration.Configuration.Design.no.labels.found'
+                                defaultMessage='No Labels Found'
+                            />
+                        </Typography>
+                    </ListItem>
                 );
             }
         }
 
         return (
             <span>
-                <MenuItem disabled>
-                    <ListItemText primary='Attached Labels' />
-                </MenuItem>
+                <ListItem >
+                    <Typography variant='body1' color='textPrimary' sx={{ fontWeight: 'bold' }}>
+                        <FormattedMessage
+                            id='Apis.Details.Configuration.Configuration.Design.attached.labels'
+                            defaultMessage='Attached Labels'
+                        />
+                    </Typography>
+                </ListItem>
                 <List sx={{ width: '350px' }}>
                     {updatedLabels && updatedLabels.length !== 0 ? (
                         updatedLabels.map((label) => (
@@ -640,15 +649,25 @@ export default function DesignConfigurations() {
                             </MenuItem>
                         ))
                     ) : (
-                        <MenuItem disabled>
+                        <ListItem >
                             <ListItemIcon />
-                            <ListItemText primary='No Labels Attached' />
-                        </MenuItem>
+                            <Typography variant='body2' color='textPrimary'>
+                                <FormattedMessage
+                                    id='Apis.Details.Configuration.Configuration.Design.no.labels'
+                                    defaultMessage='No Labels Attached'
+                                />
+                            </Typography>
+                        </ListItem>
                     )}
                 </List>
-                <MenuItem disabled>
-                    <ListItemText primary='Unattached Labels' />
-                </MenuItem>
+                <ListItem >
+                    <Typography variant='body1' color='textPrimary' sx={{ fontWeight: 'bold' }}>
+                        <FormattedMessage
+                            id='Apis.Details.Configuration.Configuration.Design.unattached.labels'
+                            defaultMessage='Unattached Labels'
+                        />
+                    </Typography>
+                </ListItem>
                 <List sx={{ width: '350px' }}>
                     {unselectedLabels && unselectedLabels.length !== 0 ? (
                         unselectedLabels.map((label) => (
@@ -663,10 +682,15 @@ export default function DesignConfigurations() {
                             </MenuItem>
                         ))
                     ) : (
-                        <MenuItem disabled>
+                        <ListItem >
                             <ListItemIcon />
-                            <ListItemText primary='No More Labels to Attach' />
-                        </MenuItem>
+                            <Typography variant='body2' color='textPrimary'>
+                                <FormattedMessage
+                                    id='Apis.Details.Configuration.Configuration.Design.no.more.labels'
+                                    defaultMessage='No More Labels Available'
+                                />
+                            </Typography>
+                        </ListItem>
                     )}
                 </List>
             </span>
@@ -712,7 +736,6 @@ export default function DesignConfigurations() {
                         </Grid>
                     </Grid>
                 </ListItem>
-                <Divider />
                 {labels.list && labels.list.length !== 0 ? (
                     <LabelMenu />
                 ) : (