Skip to content

Commit

Permalink
Merge pull request #839 from Jithmi004/main
Browse files Browse the repository at this point in the history 
Add confirmation dialog box when deprecating or retiring
  • Loading branch information
@tharikaGitHub
tharikaGitHub authored Nov 26, 2024
2 parents 364b6da + aab4f2b commit ae4d413
Show file tree
Hide file tree
Showing 2 changed files with 93 additions and 4 deletions.
4 changes: 4 additions & 0 deletions portals/publisher/src/main/webapp/site/public/locales/en.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1582,6 +1582,10 @@
"Apis.Details.components.DeleteApiButton.delete": "Delete",
"Apis.Details.components.DeleteApiButton.text.description": "{type} <b> {name} {version} </b> will be deleted permanently.",
"Apis.Details.components.DeleteApiButton.title": "Delete {type}",
"Apis.Details.components.TransitionStateApiButton.button.cancel": "CANCEL",
"Apis.Details.components.TransitionStateApiButton.button.confirm": "{selectedState}",
"Apis.Details.components.TransitionStateApiButton.text.description": "{type} <b> {name} {version} </b> will be {selectedState}d permanently.",
"Apis.Details.components.TransitionStateApiButton.title": "{selectedState} {type}",
"Apis.Details.components.api.delete.error": "Something went wrong while deleting the API!",
"Apis.Details.components.api.delete.success": "API {name} deleted Successfully",
"Apis.Details.components.api.product.delete.error": "Something went wrong while deleting the API Product!",
Expand Down
93 changes: 89 additions & 4 deletions ...sher/src/main/webapp/source/src/app/components/Apis/Details/LifeCycle/LifeCycleUpdate.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,16 +18,17 @@

import React, { Component } from 'react';
import { styled, useTheme } from '@mui/material/styles';
import Button from '@mui/material/Button';
import Grid from '@mui/material/Grid';
import FormGroup from '@mui/material/FormGroup';
import FormControlLabel from '@mui/material/FormControlLabel';
import Checkbox from '@mui/material/Checkbox';
import {
Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, CircularProgress,
} from '@mui/material';
import PropTypes from 'prop-types';
import ApiContext from 'AppComponents/Apis/Details/components/ApiContext';
import { injectIntl } from 'react-intl';
import { injectIntl, FormattedMessage } from 'react-intl';
import API from 'AppData/api';
import { CircularProgress } from '@mui/material';
import { ScopeValidation, resourceMethod, resourcePath } from 'AppData/ScopeValidation';
import Alert from 'AppComponents/Shared/Alert';
import Banner from 'AppComponents/Shared/Banner';
Expand Down Expand Up @@ -116,9 +117,34 @@ class LifeCycleUpdate extends Component {
loading: true,
isMandatoryPropertiesConfigured: false,
message: null,
openMenu: false,
selectedTransitionState: null,
};
this.setIsOpen = this.setIsOpen.bind(this);
this.handleClick = this.handleClick.bind(this);
this.handleRequestOpen = this.handleRequestOpen.bind(this);
this.handleRequestClose = this.handleRequestClose.bind(this);
}

/**
*
* Set the openMenu state of the dialog box which shows when deprecating or retiring
* Store the selected transition state
* @param {*} event event
*/
handleRequestOpen(event) {
this.setState({
openMenu: true,
selectedTransitionState: event.currentTarget.getAttribute('data-value'),
});
}

/**
*
* Set the openMenu state
*/
handleRequestClose() {
this.setState({ openMenu: false });
}

/**
Expand Down Expand Up @@ -326,6 +352,8 @@ class LifeCycleUpdate extends Component {
const {
api, lcState, theme, handleChangeCheckList, checkList, certList, isAPIProduct, intl,
} = this.props;
const type = isAPIProduct ? 'API Product ' : 'API ';
const version = ' - ' + api.version;
const lifecycleStates = [...lcState.availableTransitions];
const { newState, pageError, isOpen, deploymentsAvailable, isMandatoryPropertiesAvailable,
isMandatoryPropertiesConfigured } = this.state;
Expand Down Expand Up @@ -476,6 +504,8 @@ class LifeCycleUpdate extends Component {
&& lifecycleButtons.map((transitionState) => {
/* Skip when transitions available for current state, this occurs in states
where have allowed re-publishing in prototype and published sates */
const needConfirmation = transitionState.displayName === 'Deprecate'
|| transitionState.displayName === 'Retire';
return (
<Button
disabled={transitionState.disabled
Expand All @@ -485,7 +515,7 @@ class LifeCycleUpdate extends Component {
className={classes.stateButton}
key={transitionState.event}
data-value={transitionState.event}
onClick={this.updateLifeCycleState}
onClick={needConfirmation? this.handleRequestOpen: this.updateLifeCycleState}
data-testid={transitionState.event + '-btn'}
>
{ transitionState.displayName in lifeCycleUpdateEvents
Expand All @@ -498,6 +528,61 @@ class LifeCycleUpdate extends Component {
);
})}
</div>
<Dialog open={this.state.openMenu}>
<DialogTitle>
<FormattedMessage
id='Apis.Details.components.TransitionStateApiButton.title'
defaultMessage='{selectedState} {type}'
values={{
selectedState: this.state.selectedTransitionState,
type,
}}
/>
</DialogTitle>
<DialogContent>
<DialogContentText>
<FormattedMessage
id='Apis.Details.components.TransitionStateApiButton.text.description'
defaultMessage='{type} <b> {name} {version} </b> will be {selectedState}d
permanently.'
values={{
b: (msg) => <b>{msg}</b>,
type,
name: api.name,
version,
selectedState: this.state.selectedTransitionState ?
this.state.selectedTransitionState.toLowerCase() : ''
}}
/>
</DialogContentText>
</DialogContent>
<DialogActions>
<Button dense onClick={this.handleRequestClose}>
<FormattedMessage
id='Apis.Details.components.TransitionStateApiButton.button.cancel'
defaultMessage='CANCEL'
/>
</Button>
<Button
id='itest-id-conf'
key={this.state.selectedTransitionState}
data-value={this.state.selectedTransitionState}
onClick={(event) => {
this.updateLifeCycleState(event);
this.handleRequestClose();
}}
>
<FormattedMessage
id='Apis.Details.components.TransitionStateApiButton.button.confirm'
defaultMessage='{selectedState}'
values={{
selectedState:this.state.selectedTransitionState ?
this.state.selectedTransitionState.toUpperCase() : ''
}}
/>
</Button>
</DialogActions>
</Dialog>
</ScopeValidation>
</Grid>
{/* Page error banner */}
Expand Down

0 comments on commit ae4d413

Please sign in to comment.