From 6e72fd93a76c1308e6018176a1e54a4eaa23535f Mon Sep 17 00:00:00 2001 From: BLasan Date: Wed, 23 Oct 2024 11:23:21 +0530 Subject: [PATCH 1/2] Fix: Save and Deploy Button Issue --- .../app/components/Apis/Details/Endpoints/CustomBackend.jsx | 6 ++++++ .../components/Apis/Details/Endpoints/EndpointOverview.jsx | 3 +++ .../source/src/app/components/Shared/CustomSplitButton.jsx | 5 ++--- 3 files changed, 11 insertions(+), 3 deletions(-) diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Apis/Details/Endpoints/CustomBackend.jsx b/portals/publisher/src/main/webapp/source/src/app/components/Apis/Details/Endpoints/CustomBackend.jsx index d6baf189b8a..411669e2a95 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/Apis/Details/Endpoints/CustomBackend.jsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/Apis/Details/Endpoints/CustomBackend.jsx @@ -173,6 +173,8 @@ export default function CustomBackend(props) { setProductionBackendList, isValidSequenceBackend, setIsValidSequenceBackend, + setIsCustomBackendSelected, + isCustomBackendSelected } = props; const restAPI = new API(); @@ -193,6 +195,7 @@ export default function CustomBackend(props) { }; useEffect(() => { + setIsCustomBackendSelected(true); setIsValidSequenceBackend(false); restAPI.getSequenceBackends(api.id) .then((result) => { @@ -607,6 +610,7 @@ export default function CustomBackend(props) { CustomBackend.defaultProps = { sandBoxBackendList: [], productionBackendList: [], + isCustomBackendSelected: true, }; CustomBackend.propTypes = { @@ -623,4 +627,6 @@ CustomBackend.propTypes = { setUploadCustomBackendOpen: PropTypes.func.isRequired, isValidSequenceBackend: PropTypes.bool.isRequired, setIsValidSequenceBackend: PropTypes.func.isRequired, + setIsCustomBackendSelected: PropTypes.func.isRequired, + isCustomBackendSelected: PropTypes.bool, }; diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Apis/Details/Endpoints/EndpointOverview.jsx b/portals/publisher/src/main/webapp/source/src/app/components/Apis/Details/Endpoints/EndpointOverview.jsx index 1e4b2fb699f..f81515fe329 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/Apis/Details/Endpoints/EndpointOverview.jsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/Apis/Details/Endpoints/EndpointOverview.jsx @@ -192,6 +192,7 @@ function EndpointOverview(props) { setProductionBackendList, isValidSequenceBackend, setIsValidSequenceBackend, + isCustomBackendSelected, setIsCustomBackendSelected, } = props; const { endpointConfig } = api; @@ -940,6 +941,8 @@ function EndpointOverview(props) { setProductionBackendList={setProductionBackendList} isValidSequenceBackend={isValidSequenceBackend} setIsValidSequenceBackend={setIsValidSequenceBackend} + setIsCustomBackendSelected={setIsCustomBackendSelected} + isCustomBackendSelected={isCustomBackendSelected} /> ) : ( diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Shared/CustomSplitButton.jsx b/portals/publisher/src/main/webapp/source/src/app/components/Shared/CustomSplitButton.jsx index c26c9364198..2c4bba49aef 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/Shared/CustomSplitButton.jsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/Shared/CustomSplitButton.jsx @@ -48,7 +48,7 @@ export default function CustomSplitButton(props) { const isEndpointAvailable = api.endpointConfig !== null; const isTierAvailable = api.policies.length !== 0; - const isDeployButtonDisabled = (((api.type !== 'WEBSUB' && !isEndpointAvailable)) + const isDeployButtonDisabled = (((api.type !== 'WEBSUB' && (!isCustomBackendSelected && !isEndpointAvailable))) || (!isMutualSslOnly && !isTierAvailable) || api.workflowStatus === 'CREATED'); @@ -135,8 +135,7 @@ export default function CustomSplitButton(props) { selected={index === selectedIndex} onClick={(event) => handleClick(event, index)} disabled={(option.key === 'Save and deploy' - && (isDeployButtonDisabled || (!isValidSequenceBackend - && isCustomBackendSelected)))} + && isDeployButtonDisabled)} > {option.label} From e29e9a266fbff89e35d0557e1c93e3c2490cc6ce Mon Sep 17 00:00:00 2001 From: BLasan Date: Wed, 23 Oct 2024 15:09:14 +0530 Subject: [PATCH 2/2] Fix: Lint Issues --- .../Apis/Details/Endpoints/CustomBackend.jsx | 369 +++++++++--------- 1 file changed, 186 insertions(+), 183 deletions(-) diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Apis/Details/Endpoints/CustomBackend.jsx b/portals/publisher/src/main/webapp/source/src/app/components/Apis/Details/Endpoints/CustomBackend.jsx index 411669e2a95..8a899c2265c 100644 --- a/portals/publisher/src/main/webapp/source/src/app/components/Apis/Details/Endpoints/CustomBackend.jsx +++ b/portals/publisher/src/main/webapp/source/src/app/components/Apis/Details/Endpoints/CustomBackend.jsx @@ -1,4 +1,3 @@ -/* eslint-disable */ /* * Copyright (c) 2024, WSO2 Inc. (http://www.wso2.org) All Rights Reserved. * @@ -42,18 +41,17 @@ import { } from '@mui/material'; import Icon from '@mui/material/Icon'; import PropTypes from 'prop-types'; -import FormControlLabel from '@mui/material/FormControlLabel'; -import { FormattedMessage, injectIntl } from 'react-intl'; -import { - API_SECURITY_KEY_TYPE_PRODUCTION, - API_SECURITY_KEY_TYPE_SANDBOX -} from '../Configuration/components/APISecurity/components/apiSecurityConstants'; +import { FormattedMessage } from 'react-intl'; import Dropzone from 'react-dropzone'; import { useAPI } from 'AppComponents/Apis/Details/components/ApiContext'; import API from 'AppData/api'; import { Alert } from 'AppComponents/Shared'; import Utils from 'AppData/Utils'; import cloneDeep from 'lodash.clonedeep'; +import { + API_SECURITY_KEY_TYPE_PRODUCTION, + API_SECURITY_KEY_TYPE_SANDBOX +} from '../Configuration/components/APISecurity/components/apiSecurityConstants'; const PREFIX = 'CustomBackend'; @@ -143,8 +141,6 @@ const StyledDialog = styled(Dialog)(( }, })); -const infoIconStyle = { mr: 1, minWidth: 'initial'}; - const dropzoneStyles = { border: '1px dashed #c4c4c4', borderRadius: '5px', @@ -166,7 +162,6 @@ const dropzoneStyles = { export default function CustomBackend(props) { const { api, - intl, sandBoxBackendList, productionBackendList, setSandBoxBackendList, @@ -174,7 +169,6 @@ export default function CustomBackend(props) { isValidSequenceBackend, setIsValidSequenceBackend, setIsCustomBackendSelected, - isCustomBackendSelected } = props; const restAPI = new API(); @@ -187,11 +181,10 @@ export default function CustomBackend(props) { const [uploadCustomBackendOpen, setUploadCustomBackendOpen] = useState({ open: false, keyType: '' }); const [sequenceBackendToDelete, setSequenceBackendToDelete] = useState({ open: false, keyType: '', name: '' }); const [isDeleting, setDeleting] = useState(false); - + const closeCustomBackendUpload = () => { setUploadCustomBackendOpen({ open: false, keyType: '' }); setCustomBackend({ name: '', content: '' }); - setCustomBackendProd({ name: '', content: '' }); }; useEffect(() => { @@ -200,14 +193,16 @@ export default function CustomBackend(props) { restAPI.getSequenceBackends(api.id) .then((result) => { const allSequenceBackends = result.body.list; - setProductionBackendList(allSequenceBackends.filter((backend) => backend.sequenceType === API_SECURITY_KEY_TYPE_PRODUCTION)); - setSandBoxBackendList(allSequenceBackends.filter((backend) => backend.sequenceType === API_SECURITY_KEY_TYPE_SANDBOX)); + setProductionBackendList(allSequenceBackends.filter((backend) => + backend.sequenceType === API_SECURITY_KEY_TYPE_PRODUCTION)); + setSandBoxBackendList(allSequenceBackends.filter((backend) => + backend.sequenceType === API_SECURITY_KEY_TYPE_SANDBOX)); if (result.body.count > 0) { setIsValidSequenceBackend(true); } }) - .catch((err) => { + .catch(() => { Alert.error('Error while fetching sequence backends'); }); }, []); @@ -220,20 +215,20 @@ export default function CustomBackend(props) { * @param {string} name The name of the Sequence Backend. * */ const showSequenceBackendDeleteDialog = async (event, keyType, name) => { - setSequenceBackendToDelete({ open: true, keyType: keyType, name: name }); + setSequenceBackendToDelete({ open: true, keyType, name }); }; const downloadCustomBackend = (keyType) => { restAPI.getSequenceBackendContentByAPIID(api.id, keyType).then((resp) => { Utils.forceDownload(resp); }) - .catch((error) => { - if (error.response) { - Alert.error(error.response.body.description); - } else { - Alert.error('Error while downloading the sequence backend'); - } - }); + .catch((error) => { + if (error.response) { + Alert.error(error.response.body.description); + } else { + Alert.error('Error while downloading the sequence backend'); + } + }); }; const deleteSequenceBackendByKey = (keyType) => { @@ -262,10 +257,12 @@ export default function CustomBackend(props) { setSaving(true); const customBackendClone = cloneDeep(customBackend); if (uploadCustomBackendOpen.keyType === API_SECURITY_KEY_TYPE_SANDBOX) { - sandBoxBackendList.push({"sequenceName": customBackendClone.name, "content": customBackendClone.content}); + sandBoxBackendList.push( + { "sequenceName": customBackendClone.name, "content": customBackendClone.content }); setSandBoxBackendList(sandBoxBackendList); } else { - productionBackendList.push({"sequenceName": customBackendClone.name, "content": customBackendClone.content}); + productionBackendList.push( + { "sequenceName": customBackendClone.name, "content": customBackendClone.content }); setProductionBackendList(productionBackendList); } setSaving(false); @@ -300,153 +297,157 @@ export default function CustomBackend(props) { - <> - - - - - {productionBackendList?.length > 0 ? ( - productionBackendList.map((backend) => { - return ( - - - - - - - downloadCustomBackend(API_SECURITY_KEY_TYPE_PRODUCTION)} - id='download-backend-btn' + <> + + + + + {productionBackendList?.length > 0 ? ( + productionBackendList.map((backend) => { + return ( + + + + + + + downloadCustomBackend(API_SECURITY_KEY_TYPE_PRODUCTION)} + id='download-backend-btn' + > + + + + showSequenceBackendDeleteDialog(event, + API_SECURITY_KEY_TYPE_PRODUCTION, backend.sequenceName)} + id='delete-backend-btn' + size='large'> + - - - - showSequenceBackendDeleteDialog(event, - API_SECURITY_KEY_TYPE_PRODUCTION, backend.sequenceName)} - id='delete-backend-btn' - size='large'> - - {' '} - delete - - - - - ); - }) - ) : ( - setUploadCustomBackendOpen({ open: true, keyType: API_SECURITY_KEY_TYPE_PRODUCTION })} - id='custom-backend-add-btn' - > - - - add - - - - - - - )} - - - - - - - {sandBoxBackendList?.length > 0 ? ( - sandBoxBackendList.map((backend) => { - return ( - - - - - - - downloadCustomBackend(API_SECURITY_KEY_TYPE_SANDBOX)} - id='download-backend-btn' + {' '} + delete + + + + + ); + }) + ) : ( + setUploadCustomBackendOpen( + { open: true, keyType: API_SECURITY_KEY_TYPE_PRODUCTION })} + id='custom-backend-add-btn' + > + + + add + + + + + + + )} + + + + + + + {sandBoxBackendList?.length > 0 ? ( + sandBoxBackendList.map((backend) => { + return ( + + + + + + + downloadCustomBackend(API_SECURITY_KEY_TYPE_SANDBOX)} + id='download-backend-btn' + > + + + showSequenceBackendDeleteDialog(event, + API_SECURITY_KEY_TYPE_SANDBOX, backend.sequenceName)} + id='delete-backend-btn' + size='large'> + - - - showSequenceBackendDeleteDialog(event, - API_SECURITY_KEY_TYPE_SANDBOX, backend.sequenceName)} - id='delete-backend-btn' - size='large'> - - {' '} - delete - - - - - ); - }) - ) : ( - setUploadCustomBackendOpen({ open: true, keyType: API_SECURITY_KEY_TYPE_SANDBOX })} - id='custom-backend-add-btn' - > - - - add - - - - - - - )} - - - { - isValidSequenceBackend - ?
- : ( - - - {sequenceError} - - - ) - } + {' '} + delete + + + + + ); + }) + ) : ( + setUploadCustomBackendOpen( + { open: true, keyType: API_SECURITY_KEY_TYPE_SANDBOX })} + id='custom-backend-add-btn' + > + + + add + + + + + + + )} + + + { + isValidSequenceBackend + ?
+ : ( + + + {sequenceError} + + + ) + } - + (
-
+
{customBackend.name === '' ? (
cloud_upload @@ -483,11 +485,11 @@ export default function CustomBackend(props) { @@ -496,7 +498,8 @@ export default function CustomBackend(props) { isRejected,
- + {customBackend.name} @@ -505,7 +508,7 @@ export default function CustomBackend(props) { @@ -517,7 +520,7 @@ export default function CustomBackend(props) { - {customBackend.name} + {customBackend.name}
, @@ -543,9 +546,9 @@ export default function CustomBackend(props) { color='primary' autoFocus disabled={ - customBackend.name === '' - || isSaving - || isRejected + customBackend.name === '' + || isSaving + || isRejected } > {' '} - { sequenceBackendToDelete.name + '?'} + {sequenceBackendToDelete.name + '?'}