From aab4f2bfd556eced1e5f1063b61f62c3130aeae8 Mon Sep 17 00:00:00 2001
From: Jithmi004 <jithmi.nawoda01@gmail.com>
Date: Mon, 25 Nov 2024 11:31:54 +0530
Subject: [PATCH] Add confirmation dialog box when deprecating or retiring

---
 .../main/webapp/site/public/locales/en.json   |  4 +
 .../Details/LifeCycle/LifeCycleUpdate.jsx     | 93 ++++++++++++++++++-
 2 files changed, 93 insertions(+), 4 deletions(-)

diff --git a/portals/publisher/src/main/webapp/site/public/locales/en.json b/portals/publisher/src/main/webapp/site/public/locales/en.json
index bfd42eaa6b4..2dbb0bdb736 100644
--- a/portals/publisher/src/main/webapp/site/public/locales/en.json
+++ b/portals/publisher/src/main/webapp/site/public/locales/en.json
@@ -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!",
diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Apis/Details/LifeCycle/LifeCycleUpdate.jsx b/portals/publisher/src/main/webapp/source/src/app/components/Apis/Details/LifeCycle/LifeCycleUpdate.jsx
index 78a4f46d699..39a55534ab9 100644
--- a/portals/publisher/src/main/webapp/source/src/app/components/Apis/Details/LifeCycle/LifeCycleUpdate.jsx
+++ b/portals/publisher/src/main/webapp/source/src/app/components/Apis/Details/LifeCycle/LifeCycleUpdate.jsx
@@ -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';
@@ -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 });
     }
 
     /**
@@ -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;
@@ -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
@@ -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
@@ -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 */}