Merge pull request #914 from pradnya-orchestral/Delete_action_Rework

Changed UI popup and some code to add remove_files flag
StackStorm · Oct 26, 2021 · 0b169aa · 0b169aa
2 parents a138cfa + 6ac832e
commit 0b169aa
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 7 deletions.
diff --git a/apps/st2-actions/actions-details.component.js b/apps/st2-actions/actions-details.component.js
@@ -71,6 +71,7 @@ export default class ActionsDetails extends React.Component {
     runValue: null,
     runTrace: null,
     executionsVisible: {},
+    isChecked:false,
   }
 
   componentDidMount() {
@@ -253,14 +254,35 @@ export default class ActionsDetails extends React.Component {
     return this.props.handleRun(...args);
   }
 
-  handleDelete (ref) {
+  handleChange(e) {
+    const isChecked = document.getElementById('checkbox').checked;
+    if(isChecked) {
+      this.setState({isChecked:true});
+    } 
+    else {
+      this.setState({isChecked:false});
+    }
+  }
+
+  openModel (e) {
+    this.setState({isChecked: false});
+    const el =  document.getElementById('overlay');
+    el.style.display = 'block'; 
+  }
+
+  handleDelete (e) {
+    e.preventDefault();
     const { id } = this.props;
+    const {isChecked}  = this.state;
+    document.getElementById('overlay').style.display = 'none';
+    return this.props.handleDelete(id, isChecked);
+  }
 
-    if (!window.confirm(`You are about to delete the action "${id}". This operation is irreversible. Are you sure?`)) {
-      return undefined;
-    }
-    return this.props.handleDelete(id);
+  closeModel() {
+
+    document.getElementById('overlay').style.display = 'none';
   }
+
 
   render() {
     const { section, action, executions, entrypoint } = this.props;
@@ -303,7 +325,7 @@ export default class ActionsDetails extends React.Component {
               />
               <Button flat value="Preview" onClick={() => this.handleToggleRunPreview()} />
               <DetailsToolbarSeparator />
-              <Button className="st2-forms__button st2-details__toolbar-button"  value="Delete" onClick={() => this.handleDelete()}  />
+              <Button className="st2-forms__button st2-details__toolbar-button"  value="Delete"  onClick={(e) => this.openModel(e)}  />
 
               { action.runner_type === 'mistral-v2' || action.runner_type === 'orquesta' ? (
                 <Link
@@ -404,6 +426,17 @@ export default class ActionsDetails extends React.Component {
           </DetailsBody>
         ) : null }
 
+
+        <div id="overlay" className="web_dialog_overlay" style={{display: 'none', position: 'fixed', zIndex: '10', left: '0',top: '0',width: '100%', minHeight: '-webkit-fill-available', overflow: 'auto', backgroundColor: 'rgba(0,0,0,0.4)' }}> 
+          <div id="dialog" className="web_dialog" style={{backgroundColor: '#fefefe' ,margin: '15% auto',padding: '20px', border: '1px solid #888' ,width: '24%' ,height:'20%' }}>
+            <p> You are about to delete the action. Are you sure? </p>
+            <input id="checkbox" name="checkbox" type="checkbox" checked={this.state.isChecked} value={this.state.isChecked} onChange={(e) => this.handleChange(e)}  /> Remove Files (This operation is irreversible.) <br /><br /><br />
+            <div style={{width:'100%', display:'inline-block'}}>
+              <button  onClick={(e) => this.handleDelete(e)}  type="submit" className="btn" style={{backgroundColor: '#04AA6D' , color: 'white',padding: '16px 20px' ,border: 'none', cursor: 'pointer', width: '45%' ,marginBottom:'10px' , opacity: '0.8',float:'left'}}>Submit</button>
+              <button onClick={(e) => this.closeModel(e)} type="close" className="btn cancel" style={{backgroundColor: 'red' , color: 'white',padding: '16px 20px' ,border: 'none', cursor: 'pointer', width: '45%' ,marginBottom:'10px' , opacity: '0.8', float:'right'}}>Close</button>
+            </div>
+          </div>
+        </div>
       </PanelDetails>
     );
   }

diff --git a/apps/st2-actions/actions-panel.component.js b/apps/st2-actions/actions-panel.component.js
@@ -208,13 +208,16 @@ export default class ActionsPanel extends React.Component {
     });
   }
 
-  handleDelete (ref) {
+  handleDelete (ref,flag) {
     return store.dispatch({
       type: 'DELETE_ACTION',
       ref,
       promise: api.request({
         method: 'delete',
         path: `/actions/${ref}`,
+      },{
+        'remove_files' : flag,
+
       })
         .then((res) => {
           notification.success(`Action "${ref}" has been deleted successfully.`);