From e8654600daff0c4f6e9a08af017315a482130bb4 Mon Sep 17 00:00:00 2001
From: Ran Byron <ranbena@gmail.com>
Date: Thu, 26 Sep 2019 08:14:40 +0300
Subject: [PATCH] No reload for edit / view / new state changes

---
 client/app/pages/alert/Alert.jsx     | 21 +++++++++++++++++----
 client/app/pages/alert/AlertEdit.jsx |  6 ++----
 client/app/pages/alert/AlertView.jsx | 12 +++---------
 3 files changed, 22 insertions(+), 17 deletions(-)

diff --git a/client/app/pages/alert/Alert.jsx b/client/app/pages/alert/Alert.jsx
index ff808022ce..b6f8c002c3 100644
--- a/client/app/pages/alert/Alert.jsx
+++ b/client/app/pages/alert/Alert.jsx
@@ -89,7 +89,8 @@ class AlertPage extends React.Component {
 
     return alert.$save().then(() => {
       notification.success('Saved.');
-      navigateTo(`/alerts/${alert.id}`, true);
+      navigateTo(`/alerts/${alert.id}`, true, false);
+      this.setState({ mode: MODES.VIEW });
     }).catch(() => {
       notification.error('Failed saving alert.');
     });
@@ -144,7 +145,7 @@ class AlertPage extends React.Component {
     const doDelete = () => {
       alert.$delete(() => {
         notification.success('Alert deleted successfully.');
-        navigateTo('/alerts', true);
+        navigateTo('/alerts');
       }, () => {
         notification.error('Failed deleting alert.');
       });
@@ -161,6 +162,18 @@ class AlertPage extends React.Component {
     });
   }
 
+  edit = () => {
+    const { id } = this.state.alert;
+    navigateTo(`/alerts/${id}/edit`, true, false);
+    this.setState({ mode: MODES.EDIT });
+  }
+
+  cancel = () => {
+    const { id } = this.state.alert;
+    navigateTo(`/alerts/${id}`, true, false);
+    this.setState({ mode: MODES.VIEW });
+  }
+
   render() {
     const { alert } = this.state;
     if (!alert) {
@@ -183,8 +196,8 @@ class AlertPage extends React.Component {
     return (
       <div className="container alert-page">
         {mode === MODES.NEW && <AlertNew {...commonProps} />}
-        {mode === MODES.VIEW && <AlertView canEdit={canEdit} {...commonProps} />}
-        {mode === MODES.EDIT && <AlertEdit {...commonProps} />}
+        {mode === MODES.VIEW && <AlertView canEdit={canEdit} onEdit={this.edit} {...commonProps} />}
+        {mode === MODES.EDIT && <AlertEdit cancel={this.cancel} {...commonProps} />}
       </div>
     );
   }
diff --git a/client/app/pages/alert/AlertEdit.jsx b/client/app/pages/alert/AlertEdit.jsx
index ebb4d38057..6ae71d962c 100644
--- a/client/app/pages/alert/AlertEdit.jsx
+++ b/client/app/pages/alert/AlertEdit.jsx
@@ -1,8 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import navigateTo from '@/services/navigateTo';
-
 import { HelpTrigger } from '@/components/HelpTrigger';
 import { Alert as AlertType } from '@/components/proptypes';
 
@@ -46,9 +44,8 @@ export default class AlertEdit extends React.Component {
   }
 
   cancel = () => {
-    const { alert } = this.props;
     this.setState({ canceling: true });
-    navigateTo(`/alerts/${alert.id}`, true);
+    this.props.cancel();
   };
 
   render() {
@@ -122,6 +119,7 @@ AlertEdit.propTypes = {
   pendingRearm: PropTypes.number,
   delete: PropTypes.func.isRequired,
   save: PropTypes.func.isRequired,
+  cancel: PropTypes.func.isRequired,
   onQuerySelected: PropTypes.func.isRequired,
   onNameChange: PropTypes.func.isRequired,
   onCriteriaChange: PropTypes.func.isRequired,
diff --git a/client/app/pages/alert/AlertView.jsx b/client/app/pages/alert/AlertView.jsx
index bced98d9fd..87c8f7bdad 100644
--- a/client/app/pages/alert/AlertView.jsx
+++ b/client/app/pages/alert/AlertView.jsx
@@ -1,8 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import navigateTo from '@/services/navigateTo';
-
 import { TimeAgo } from '@/components/TimeAgo';
 import { Alert as AlertType } from '@/components/proptypes';
 
@@ -48,13 +46,8 @@ AlertState.defaultProps = {
 };
 
 export default class AlertView extends React.Component {
-  edit = () => {
-    const { id } = this.props.alert;
-    navigateTo(`/alerts/${id}/edit`, true);
-  }
-
   render() {
-    const { alert, queryResult, canEdit } = this.props;
+    const { alert, queryResult, canEdit, onEdit } = this.props;
     const { query, name, options, rearm } = alert;
 
     return (
@@ -62,7 +55,7 @@ export default class AlertView extends React.Component {
         <Title name={name} alert={alert}>
           {canEdit && (
             <>
-              <Button type="default" onClick={() => this.edit()}><i className="fa fa-edit m-r-5" />Edit</Button>
+              <Button type="default" onClick={onEdit}><i className="fa fa-edit m-r-5" />Edit</Button>
               <Dropdown
                 className="m-l-5"
                 trigger={['click']}
@@ -125,6 +118,7 @@ AlertView.propTypes = {
   queryResult: PropTypes.object, // eslint-disable-line react/forbid-prop-types,
   canEdit: PropTypes.bool.isRequired,
   delete: PropTypes.func.isRequired,
+  onEdit: PropTypes.func.isRequired,
 };
 
 AlertView.defaultProps = {