feat: add cancel buttons on the edit page (#509)

* feat: add cancel buttons on the edit page

Signed-off-by: Yixiang Zhao <seriouszyx@foxmail.com>

* fix: remove warning and primary type of cancel buttons

Signed-off-by: Yixiang Zhao <seriouszyx@foxmail.com>

web/src/ApplicationEditPage.js

@@ -47,6 +47,7 @@ class ApplicationEditPage extends React.Component {
       certs: [],
       providers: [],
       uploading: false,
+      mode: props.location.mode !== undefined ? props.location.mode : "edit",
     };
   }
 
@@ -134,9 +135,10 @@ class ApplicationEditPage extends React.Component {
     return (
       <Card size="small" title={
         <div>
-          {i18next.t("application:Edit Application")}&nbsp;&nbsp;&nbsp;&nbsp;
+          {this.state.mode === "add" ? i18next.t("application:New Application") : i18next.t("application:Edit Application")}&nbsp;&nbsp;&nbsp;&nbsp;
           <Button onClick={() => this.submitApplicationEdit(false)}>{i18next.t("general:Save")}</Button>
           <Button style={{marginLeft: '20px'}} type="primary" onClick={() => this.submitApplicationEdit(true)}>{i18next.t("general:Save & Exit")}</Button>
+          {this.state.mode === "add" ? <Button style={{marginLeft: '20px'}} onClick={() => this.deleteApplication()}>{i18next.t("general:Cancel")}</Button> : null}
         </div>
       } style={(Setting.isMobile())? {margin: '5px'}:{}} type="inner">
         <Row style={{marginTop: '10px'}} >
@@ -592,6 +594,16 @@ class ApplicationEditPage extends React.Component {
       });
   }
 
+  deleteApplication() {
+    ApplicationBackend.deleteApplication(this.state.application)
+      .then(() => {
+        this.props.history.push(`/applications`);
+      })
+      .catch(error => {
+        Setting.showMessage("error", `Application failed to delete: ${error}`);
+      });
+  }
+
   render() {
     return (
       <div>
@@ -601,6 +613,7 @@ class ApplicationEditPage extends React.Component {
       <div style={{marginTop: '20px', marginLeft: '40px'}}>
         <Button size="large" onClick={() => this.submitApplicationEdit(false)}>{i18next.t("general:Save")}</Button>
         <Button style={{marginLeft: '20px'}} type="primary" size="large" onClick={() => this.submitApplicationEdit(true)}>{i18next.t("general:Save & Exit")}</Button>
+        {this.state.mode === "add" ? <Button style={{marginLeft: '20px'}} size="large" onClick={() => this.deleteApplication()}>{i18next.t("general:Cancel")}</Button> : null}
       </div>
     </div>
     );

web/src/ApplicationListPage.js

@@ -58,8 +58,7 @@ class ApplicationListPage extends BaseListPage {
     const newApplication = this.newApplication();
     ApplicationBackend.addApplication(newApplication)
       .then((res) => {
-          Setting.showMessage("success", `Application added successfully`);
-          this.props.history.push(`/applications/${newApplication.name}`);
+          this.props.history.push({pathname: `/applications/${newApplication.name}`, mode: "add"});
         }
       )
       .catch(error => {

web/src/CertEditPage.js

@@ -30,6 +30,7 @@ class CertEditPage extends React.Component {
       classes: props,
       certName: props.match.params.certName,
       cert: null,
+      mode: props.location.mode !== undefined ? props.location.mode : "edit",
     };
   }
 
@@ -67,9 +68,10 @@ class CertEditPage extends React.Component {
     return (
       <Card size="small" title={
         <div>
-          {i18next.t("cert:Edit Cert")}&nbsp;&nbsp;&nbsp;&nbsp;
+          {this.state.mode === "add" ? i18next.t("cert:New Cert") : i18next.t("cert:Edit Cert")}&nbsp;&nbsp;&nbsp;&nbsp;
           <Button onClick={() => this.submitCertEdit(false)}>{i18next.t("general:Save")}</Button>
           <Button style={{marginLeft: '20px'}} type="primary" onClick={() => this.submitCertEdit(true)}>{i18next.t("general:Save & Exit")}</Button>
+          {this.state.mode === "add" ? <Button style={{marginLeft: '20px'}} onClick={() => this.deleteCert()}>{i18next.t("general:Cancel")}</Button> : null}
         </div>
       } style={(Setting.isMobile())? {margin: '5px'}:{}} type="inner">
         <Row style={{marginTop: '10px'}} >
@@ -236,6 +238,16 @@ class CertEditPage extends React.Component {
       });
   }
 
+  deleteCert() {
+    CertBackend.deleteCert(this.state.cert)
+      .then(() => {
+        this.props.history.push(`/certs`);
+      })
+      .catch(error => {
+        Setting.showMessage("error", `Cert failed to delete: ${error}`);
+      });
+  }
+
   render() {
     return (
       <div>
@@ -245,6 +257,7 @@ class CertEditPage extends React.Component {
         <div style={{marginTop: '20px', marginLeft: '40px'}}>
           <Button size="large" onClick={() => this.submitCertEdit(false)}>{i18next.t("general:Save")}</Button>
           <Button style={{marginLeft: '20px'}} type="primary" size="large" onClick={() => this.submitCertEdit(true)}>{i18next.t("general:Save & Exit")}</Button>
+          {this.state.mode === "add" ? <Button style={{marginLeft: '20px'}} size="large" onClick={() => this.deleteCert()}>{i18next.t("general:Cancel")}</Button> : null}
         </div>
       </div>
     );

web/src/CertListPage.js

@@ -44,8 +44,7 @@ class CertListPage extends BaseListPage {
     const newCert = this.newCert();
     CertBackend.addCert(newCert)
       .then((res) => {
-          Setting.showMessage("success", `Cert added successfully`);
-          this.props.history.push(`/certs/${newCert.name}`);
+          this.props.history.push({pathname: `/certs/${newCert.name}`, mode: "add"});
         }
       )
       .catch(error => {

web/src/OrganizationEditPage.js

@@ -31,6 +31,7 @@ class OrganizationEditPage extends React.Component {
       organizationName: props.match.params.organizationName,
       organization: null,
       ldaps: null,
+      mode: props.location.mode !== undefined ? props.location.mode : "edit",
     };
   }
 
@@ -84,9 +85,10 @@ class OrganizationEditPage extends React.Component {
     return (
       <Card size="small" title={
         <div>
-          {i18next.t("organization:Edit Organization")}&nbsp;&nbsp;&nbsp;&nbsp;
+          {this.state.mode === "add" ? i18next.t("organization:New Organization") : i18next.t("organization:Edit Organization")}&nbsp;&nbsp;&nbsp;&nbsp;
           <Button onClick={() => this.submitOrganizationEdit(false)}>{i18next.t("general:Save")}</Button>
           <Button style={{marginLeft: '20px'}} type="primary" onClick={() => this.submitOrganizationEdit(true)}>{i18next.t("general:Save & Exit")}</Button>
+          {this.state.mode === "add" ? <Button style={{marginLeft: '20px'}} onClick={() => this.deleteOrganization()}>{i18next.t("general:Cancel")}</Button> : null}
         </div>
       } style={(Setting.isMobile())? {margin: '5px'}:{}} type="inner">
         <Row style={{marginTop: '10px'}} >
@@ -269,6 +271,16 @@ class OrganizationEditPage extends React.Component {
       });
   }
 
+  deleteOrganization() {
+    OrganizationBackend.deleteOrganization(this.state.organization)
+      .then(() => {
+        this.props.history.push(`/organizations`);
+      })
+      .catch(error => {
+        Setting.showMessage("error", `Failed to connect to server: ${error}`);
+      });
+  }
+
   render() {
     return (
       <div>
@@ -278,6 +290,7 @@ class OrganizationEditPage extends React.Component {
         <div style={{marginTop: '20px', marginLeft: '40px'}}>
           <Button size="large" onClick={() => this.submitOrganizationEdit(false)}>{i18next.t("general:Save")}</Button>
           <Button style={{marginLeft: '20px'}} type="primary" size="large" onClick={() => this.submitOrganizationEdit(true)}>{i18next.t("general:Save & Exit")}</Button>
+          {this.state.mode === "add" ? <Button style={{marginLeft: '20px'}} size="large" onClick={() => this.deleteOrganization()}>{i18next.t("general:Cancel")}</Button> : null}
         </div>
       </div>
     );

web/src/OrganizationListPage.js

@@ -45,8 +45,7 @@ class OrganizationListPage extends BaseListPage {
     const newOrganization = this.newOrganization();
     OrganizationBackend.addOrganization(newOrganization)
       .then((res) => {
-          Setting.showMessage("success", `Organization added successfully`);
-          this.props.history.push(`/organizations/${newOrganization.name}`);
+          this.props.history.push({pathname: `/organizations/${newOrganization.name}`, mode: "add"});
         }
       )
       .catch(error => {

web/src/PaymentEditPage.js

@@ -31,6 +31,7 @@ class PaymentEditPage extends React.Component {
       organizationName: props.organizationName !== undefined ? props.organizationName : props.match.params.organizationName,
       paymentName: props.match.params.paymentName,
       payment: null,
+      mode: props.location.mode !== undefined ? props.location.mode : "edit",
     };
   }
 
@@ -68,9 +69,10 @@ class PaymentEditPage extends React.Component {
     return (
       <Card size="small" title={
         <div>
-          {i18next.t("payment:Edit Payment")}&nbsp;&nbsp;&nbsp;&nbsp;
+          {this.state.mode === "add" ? i18next.t("payment:New Payment") : i18next.t("payment:Edit Payment")}&nbsp;&nbsp;&nbsp;&nbsp;
           <Button onClick={() => this.submitPaymentEdit(false)}>{i18next.t("general:Save")}</Button>
           <Button style={{marginLeft: '20px'}} type="primary" onClick={() => this.submitPaymentEdit(true)}>{i18next.t("general:Save & Exit")}</Button>
+          {this.state.mode === "add" ? <Button style={{marginLeft: '20px'}} onClick={() => this.deletePayment()}>{i18next.t("general:Cancel")}</Button> : null}
         </div>
       } style={(Setting.isMobile())? {margin: '5px'}:{}} type="inner">
         <Row style={{marginTop: '10px'}} >
@@ -192,6 +194,16 @@ class PaymentEditPage extends React.Component {
       });
   }
 
+  deletePayment() {
+    PaymentBackend.deletePayment(this.state.payment)
+      .then(() => {
+        this.props.history.push(`/payments`);
+      })
+      .catch(error => {
+        Setting.showMessage("error", `Payment failed to delete: ${error}`);
+      });
+  }
+
   render() {
     return (
       <div>
@@ -201,6 +213,7 @@ class PaymentEditPage extends React.Component {
         <div style={{marginTop: '20px', marginLeft: '40px'}}>
           <Button size="large" onClick={() => this.submitPaymentEdit(false)}>{i18next.t("general:Save")}</Button>
           <Button style={{marginLeft: '20px'}} type="primary" size="large" onClick={() => this.submitPaymentEdit(true)}>{i18next.t("general:Save & Exit")}</Button>
+          {this.state.mode === "add" ? <Button style={{marginLeft: '20px'}} size="large" onClick={() => this.deletePayment()}>{i18next.t("general:Cancel")}</Button> : null}
         </div>
       </div>
     );

web/src/PaymentListPage.js

@@ -45,8 +45,7 @@ class PaymentListPage extends BaseListPage {
     const newPayment = this.newPayment();
     PaymentBackend.addPayment(newPayment)
       .then((res) => {
-          Setting.showMessage("success", `Payment added successfully`);
-          this.props.history.push(`/payments/${newPayment.name}`);
+          this.props.history.push({pathname: `/payments/${newPayment.name}`, mode: "add"});
         }
       )
       .catch(error => {

web/src/PermissionEditPage.js

@@ -34,6 +34,7 @@ class PermissionEditPage extends React.Component {
       organizations: [],
       users: [],
       roles: [],
+      mode: props.location.mode !== undefined ? props.location.mode : "edit",
     };
   }
 
@@ -102,9 +103,10 @@ class PermissionEditPage extends React.Component {
     return (
       <Card size="small" title={
         <div>
-          {i18next.t("permission:Edit Permission")}&nbsp;&nbsp;&nbsp;&nbsp;
+          {this.state.mode === "add" ? i18next.t("permission:New Permission") : i18next.t("permission:Edit Permission")}&nbsp;&nbsp;&nbsp;&nbsp;
           <Button onClick={() => this.submitPermissionEdit(false)}>{i18next.t("general:Save")}</Button>
           <Button style={{marginLeft: '20px'}} type="primary" onClick={() => this.submitPermissionEdit(true)}>{i18next.t("general:Save & Exit")}</Button>
+          {this.state.mode === "add" ? <Button style={{marginLeft: '20px'}} onClick={() => this.deletePermission()}>{i18next.t("general:Cancel")}</Button> : null}
         </div>
       } style={(Setting.isMobile())? {margin: '5px'}:{}} type="inner">
         <Row style={{marginTop: '10px'}} >
@@ -258,6 +260,16 @@ class PermissionEditPage extends React.Component {
       });
   }
 
+  deletePermission() {
+    PermissionBackend.deletePermission(this.state.permission)
+      .then(() => {
+        this.props.history.push(`/permissions`);
+      })
+      .catch(error => {
+        Setting.showMessage("error", `Permission failed to delete: ${error}`);
+      });
+  }
+
   render() {
     return (
       <div>
@@ -267,6 +279,7 @@ class PermissionEditPage extends React.Component {
         <div style={{marginTop: '20px', marginLeft: '40px'}}>
           <Button size="large" onClick={() => this.submitPermissionEdit(false)}>{i18next.t("general:Save")}</Button>
           <Button style={{marginLeft: '20px'}} type="primary" size="large" onClick={() => this.submitPermissionEdit(true)}>{i18next.t("general:Save & Exit")}</Button>
+          {this.state.mode === "add" ? <Button style={{marginLeft: '20px'}} size="large" onClick={() => this.deletePermission()}>{i18next.t("general:Cancel")}</Button> : null}
         </div>
       </div>
     );

web/src/PermissionListPage.js

@@ -43,8 +43,7 @@ class PermissionListPage extends BaseListPage {
     const newPermission = this.newPermission();
     PermissionBackend.addPermission(newPermission)
       .then((res) => {
-          Setting.showMessage("success", `Permission added successfully`);
-          this.props.history.push(`/permissions/${newPermission.owner}/${newPermission.name}`);
+          this.props.history.push({pathname: `/permissions/${newPermission.owner}/${newPermission.name}`, mode: "add"});
         }
       )
       .catch(error => {

web/src/ProviderEditPage.js

@@ -31,6 +31,7 @@ class ProviderEditPage extends React.Component {
       classes: props,
       providerName: props.match.params.providerName,
       provider: null,
+      mode: props.location.mode !== undefined ? props.location.mode : "edit",
     };
   }
 
@@ -133,9 +134,10 @@ class ProviderEditPage extends React.Component {
     return (
       <Card size="small" title={
         <div>
-          {i18next.t("provider:Edit Provider")}&nbsp;&nbsp;&nbsp;&nbsp;
+          {this.state.mode === "add" ? i18next.t("provider:New Provider") : i18next.t("provider:Edit Provider")}&nbsp;&nbsp;&nbsp;&nbsp;
           <Button onClick={() => this.submitProviderEdit(false)}>{i18next.t("general:Save")}</Button>
           <Button style={{marginLeft: '20px'}} type="primary" onClick={() => this.submitProviderEdit(true)}>{i18next.t("general:Save & Exit")}</Button>
+          {this.state.mode === "add" ? <Button style={{marginLeft: '20px'}} onClick={() => this.deleteProvider()}>{i18next.t("general:Cancel")}</Button> : null}
         </div>
       } style={(Setting.isMobile())? {margin: '5px'}:{}} type="inner">
         <Row style={{marginTop: '10px'}} >
@@ -572,6 +574,16 @@ class ProviderEditPage extends React.Component {
       });
   }
 
+  deleteProvider() {
+    ProviderBackend.deleteProvider(this.state.provider)
+      .then(() => {
+        this.props.history.push(`/providers`);
+      })
+      .catch(error => {
+        Setting.showMessage("error", `Provider failed to delete: ${error}`);
+      });
+  }
+
   render() {
     return (
       <div>
@@ -581,6 +593,7 @@ class ProviderEditPage extends React.Component {
         <div style={{marginTop: '20px', marginLeft: '40px'}}>
           <Button size="large" onClick={() => this.submitProviderEdit(false)}>{i18next.t("general:Save")}</Button>
           <Button style={{marginLeft: '20px'}} type="primary" size="large" onClick={() => this.submitProviderEdit(true)}>{i18next.t("general:Save & Exit")}</Button>
+          {this.state.mode === "add" ? <Button style={{marginLeft: '20px'}} size="large" onClick={() => this.deleteProvider()}>{i18next.t("general:Cancel")}</Button> : null}
         </div>
       </div>
     );

web/src/ProviderListPage.js

@@ -47,8 +47,7 @@ class ProviderListPage extends BaseListPage {
     const newProvider = this.newProvider();
     ProviderBackend.addProvider(newProvider)
       .then((res) => {
-          Setting.showMessage("success", `Provider added successfully`);
-          this.props.history.push(`/providers/${newProvider.name}`);
+          this.props.history.push({pathname: `/providers/${newProvider.name}`, mode: "add"});
         }
       )
       .catch(error => {

web/src/RoleEditPage.js

@@ -33,6 +33,7 @@ class RoleEditPage extends React.Component {
       organizations: [],
       users: [],
       roles: [],
+      mode: props.location.mode !== undefined ? props.location.mode : "edit",
     };
   }
 
@@ -101,9 +102,10 @@ class RoleEditPage extends React.Component {
     return (
       <Card size="small" title={
         <div>
-          {i18next.t("role:Edit Role")}&nbsp;&nbsp;&nbsp;&nbsp;
+          {this.state.mode === "add" ? i18next.t("role:New Role") : i18next.t("role:Edit Role")}&nbsp;&nbsp;&nbsp;&nbsp;
           <Button onClick={() => this.submitRoleEdit(false)}>{i18next.t("general:Save")}</Button>
           <Button style={{marginLeft: '20px'}} type="primary" onClick={() => this.submitRoleEdit(true)}>{i18next.t("general:Save & Exit")}</Button>
+          {this.state.mode === "add" ? <Button style={{marginLeft: '20px'}} onClick={() => this.deleteRole()}>{i18next.t("general:Cancel")}</Button> : null}
         </div>
       } style={(Setting.isMobile())? {margin: '5px'}:{}} type="inner">
         <Row style={{marginTop: '10px'}} >
@@ -201,6 +203,16 @@ class RoleEditPage extends React.Component {
       });
   }
 
+  deleteRole() {
+    RoleBackend.deleteRole(this.state.role)
+      .then(() => {
+        this.props.history.push(`/roles`);
+      })
+      .catch(error => {
+        Setting.showMessage("error", `Role failed to delete: ${error}`);
+      });
+  }
+
   render() {
     return (
       <div>
@@ -210,6 +222,7 @@ class RoleEditPage extends React.Component {
         <div style={{marginTop: '20px', marginLeft: '40px'}}>
           <Button size="large" onClick={() => this.submitRoleEdit(false)}>{i18next.t("general:Save")}</Button>
           <Button style={{marginLeft: '20px'}} type="primary" size="large" onClick={() => this.submitRoleEdit(true)}>{i18next.t("general:Save & Exit")}</Button>
+          {this.state.mode === "add" ? <Button style={{marginLeft: '20px'}} size="large" onClick={() => this.deleteRole()}>{i18next.t("general:Cancel")}</Button> : null}
         </div>
       </div>
     );

web/src/RoleListPage.js

@@ -39,8 +39,7 @@ class RoleListPage extends BaseListPage {
     const newRole = this.newRole();
     RoleBackend.addRole(newRole)
       .then((res) => {
-          Setting.showMessage("success", `Role added successfully`);
-          this.props.history.push(`/roles/${newRole.owner}/${newRole.name}`);
+          this.props.history.push({pathname: `/roles/${newRole.owner}/${newRole.name}`, mode: "add"});
         }
       )
       .catch(error => {

web/src/SyncerEditPage.js

@@ -36,6 +36,7 @@ class SyncerEditPage extends React.Component {
       syncerName: props.match.params.syncerName,
       syncer: null,
       organizations: [],
+      mode: props.location.mode !== undefined ? props.location.mode : "edit",
     };
   }
 
@@ -83,9 +84,10 @@ class SyncerEditPage extends React.Component {
     return (
       <Card size="small" title={
         <div>
-          {i18next.t("syncer:Edit Syncer")}&nbsp;&nbsp;&nbsp;&nbsp;
+          {this.state.mode === "add" ? i18next.t("syncer:New Syncer") : i18next.t("syncer:Edit Syncer")}&nbsp;&nbsp;&nbsp;&nbsp;
           <Button onClick={() => this.submitSyncerEdit(false)}>{i18next.t("general:Save")}</Button>
           <Button style={{marginLeft: '20px'}} type="primary" onClick={() => this.submitSyncerEdit(true)}>{i18next.t("general:Save & Exit")}</Button>
+          {this.state.mode === "add" ? <Button style={{marginLeft: '20px'}} onClick={() => this.deleteSyncer()}>{i18next.t("general:Cancel")}</Button> : null}
         </div>
       } style={(Setting.isMobile())? {margin: '5px'}:{}} type="inner">
         <Row style={{marginTop: '10px'}} >
@@ -308,6 +310,16 @@ class SyncerEditPage extends React.Component {
       });
   }
 
+  deleteSyncer() {
+    SyncerBackend.deleteSyncer(this.state.syncer)
+      .then(() => {
+        this.props.history.push(`/syncers`);
+      })
+      .catch(error => {
+        Setting.showMessage("error", `Syncer failed to delete: ${error}`);
+      });
+  }
+
   render() {
     return (
       <div>
@@ -317,6 +329,7 @@ class SyncerEditPage extends React.Component {
         <div style={{marginTop: '20px', marginLeft: '40px'}}>
           <Button size="large" onClick={() => this.submitSyncerEdit(false)}>{i18next.t("general:Save")}</Button>
           <Button style={{marginLeft: '20px'}} type="primary" size="large" onClick={() => this.submitSyncerEdit(true)}>{i18next.t("general:Save & Exit")}</Button>
+          {this.state.mode === "add" ? <Button style={{marginLeft: '20px'}} size="large" onClick={() => this.deleteSyncer()}>{i18next.t("general:Cancel")}</Button> : null}
         </div>
       </div>
     );

web/src/SyncerListPage.js

@@ -50,8 +50,7 @@ class SyncerListPage extends BaseListPage {
     const newSyncer = this.newSyncer();
     SyncerBackend.addSyncer(newSyncer)
       .then((res) => {
-          Setting.showMessage("success", `Syncer added successfully`);
-          this.props.history.push(`/syncers/${newSyncer.name}`);
+          this.props.history.push({pathname: `/syncers/${newSyncer.name}`, mode: "add"});
         }
       )
       .catch(error => {

web/src/TokenEditPage.js

@@ -25,6 +25,7 @@ class TokenEditPage extends React.Component {
       classes: props,
       tokenName: props.match.params.tokenName,
       token: null,
+      mode: props.location.mode !== undefined ? props.location.mode : "edit",
     };
   }
 
@@ -62,9 +63,10 @@ class TokenEditPage extends React.Component {
     return (
       <Card size="small" title={
         <div>
-          {i18next.t("token:Edit Token")}&nbsp;&nbsp;&nbsp;&nbsp;
+          {this.state.mode === "add" ? i18next.t("token:New Token") : i18next.t("token:Edit Token")}&nbsp;&nbsp;&nbsp;&nbsp;
           <Button onClick={() => this.submitTokenEdit(false)}>{i18next.t("general:Save")}</Button>
           <Button style={{marginLeft: '20px'}} type="primary" onClick={() => this.submitTokenEdit(true)}>{i18next.t("general:Save & Exit")}</Button>
+          {this.state.mode === "add" ? <Button style={{marginLeft: '20px'}} onClick={() => this.deleteToken()}>{i18next.t("general:Cancel")}</Button> : null}
         </div>
       } style={(Setting.isMobile())? {margin: '5px'}:{}} type="inner">
         <Row style={{marginTop: '10px'}} >
@@ -186,6 +188,16 @@ class TokenEditPage extends React.Component {
       });
   }
 
+  deleteToken() {
+    TokenBackend.deleteToken(this.state.token)
+      .then(() => {
+        this.props.history.push(`/tokens`);
+      })
+      .catch(error => {
+        Setting.showMessage("error", `Token failed to delete: ${error}`);
+      });
+  }
+
   render() {
     return (
       <div>
@@ -195,6 +207,7 @@ class TokenEditPage extends React.Component {
       <div style={{marginTop: '20px', marginLeft: '40px'}}>
         <Button size="large" onClick={() => this.submitTokenEdit(false)}>{i18next.t("general:Save")}</Button>
         <Button style={{marginLeft: '20px'}} type="primary" size="large" onClick={() => this.submitTokenEdit(true)}>{i18next.t("general:Save & Exit")}</Button>
+        {this.state.mode === "add" ? <Button style={{marginLeft: '20px'}} size="large" onClick={() => this.deleteToken()}>{i18next.t("general:Cancel")}</Button> : null}
       </div>
     </div>
     );

web/src/TokenListPage.js

@@ -44,8 +44,7 @@ class TokenListPage extends BaseListPage {
     const newToken = this.newToken();
     TokenBackend.addToken(newToken)
       .then((res) => {
-          Setting.showMessage("success", `Token added successfully`);
-          this.props.history.push(`/tokens/${newToken.name}`);
+          this.props.history.push({pathname: `/tokens/${newToken.name}`, mode: "add"});
         }
       )
       .catch(error => {

web/src/UserEditPage.js

@@ -46,6 +46,7 @@ class UserEditPage extends React.Component {
       application: null,
       organizations: [],
       applications: [],
+      mode: props.location.mode !== undefined ? props.location.mode : "edit",
     };
   }
 
@@ -121,9 +122,10 @@ class UserEditPage extends React.Component {
     return (
       <Card size="small" title={
         <div>
-          {i18next.t("user:Edit User")}&nbsp;&nbsp;&nbsp;&nbsp;
+          {this.state.mode === "add" ? i18next.t("user:New User") : i18next.t("user:Edit User")}&nbsp;&nbsp;&nbsp;&nbsp;
           <Button onClick={() => this.submitUserEdit(false)}>{i18next.t("general:Save")}</Button>
           <Button style={{marginLeft: '20px'}} type="primary" onClick={() => this.submitUserEdit(true)}>{i18next.t("general:Save & Exit")}</Button>
+          {this.state.mode === "add" ? <Button style={{marginLeft: '20px'}} onClick={() => this.deleteUser()}>{i18next.t("general:Cancel")}</Button> : null}
         </div>
       } style={(Setting.isMobile())? {margin: '5px'}:{}} type="inner">
         <Row style={{marginTop: '10px'}} >
@@ -430,6 +432,16 @@ class UserEditPage extends React.Component {
       });
   }
 
+  deleteUser() {
+    UserBackend.deleteUser(this.state.user)
+      .then(() => {
+        this.props.history.push(`/users`);
+      })
+      .catch(error => {
+        Setting.showMessage("error", `User failed to delete: ${error}`);
+      });
+  }
+
   render() {
     return (
       <div>
@@ -439,6 +451,7 @@ class UserEditPage extends React.Component {
       <div style={{marginTop: '20px', marginLeft: '40px'}}>
         <Button size="large" onClick={() => this.submitUserEdit(false)}>{i18next.t("general:Save")}</Button>
         <Button style={{marginLeft: '20px'}} type="primary" size="large" onClick={() => this.submitUserEdit(true)}>{i18next.t("general:Save & Exit")}</Button>
+        {this.state.mode === "add" ? <Button style={{marginLeft: '20px'}} size="large" onClick={() => this.deleteUser()}>{i18next.t("general:Cancel")}</Button> : null}
       </div>
     </div>
     );

web/src/UserListPage.js

@@ -21,6 +21,7 @@ import * as Setting from "./Setting";
 import * as UserBackend from "./backend/UserBackend";
 import i18next from "i18next";
 import BaseListPage from "./BaseListPage";
+import * as path from "path";
 
 class UserListPage extends BaseListPage {
   constructor(props) {
@@ -69,8 +70,7 @@ class UserListPage extends BaseListPage {
     const newUser = this.newUser();
     UserBackend.addUser(newUser)
       .then((res) => {
-          Setting.showMessage("success", `User added successfully`);
-          this.props.history.push(`/users/${newUser.owner}/${newUser.name}`);
+          this.props.history.push({pathname: `/users/${newUser.owner}/${newUser.name}`, mode: "add"});
         }
       )
       .catch(error => {

web/src/WebhookEditPage.js

@@ -96,6 +96,7 @@ class WebhookEditPage extends React.Component {
       webhookName: props.match.params.webhookName,
       webhook: null,
       organizations: [],
+      mode: props.location.mode !== undefined ? props.location.mode : "edit",
     };
   }
 
@@ -149,9 +150,10 @@ class WebhookEditPage extends React.Component {
     return (
       <Card size="small" title={
         <div>
-          {i18next.t("webhook:Edit Webhook")}&nbsp;&nbsp;&nbsp;&nbsp;
+          {this.state.mode === "add" ? i18next.t("webhook:New Webhook") : i18next.t("webhook:Edit Webhook")}&nbsp;&nbsp;&nbsp;&nbsp;
           <Button onClick={() => this.submitWebhookEdit(false)}>{i18next.t("general:Save")}</Button>
           <Button style={{marginLeft: '20px'}} type="primary" onClick={() => this.submitWebhookEdit(true)}>{i18next.t("general:Save & Exit")}</Button>
+          {this.state.mode === "add" ? <Button style={{marginLeft: '20px'}} onClick={() => this.deleteWebhook()}>{i18next.t("general:Cancel")}</Button> : null}
         </div>
       } style={(Setting.isMobile())? {margin: '5px'}:{}} type="inner">
         <Row style={{marginTop: '10px'}} >
@@ -315,6 +317,16 @@ class WebhookEditPage extends React.Component {
       });
   }
 
+  deleteWebhook() {
+    WebhookBackend.deleteWebhook(this.state.webhook)
+      .then(() => {
+        this.props.history.push(`/webhooks`);
+      })
+      .catch(error => {
+        Setting.showMessage("error", `Webhook failed to delete: ${error}`);
+      });
+  }
+
   render() {
     return (
       <div>
@@ -324,6 +336,7 @@ class WebhookEditPage extends React.Component {
         <div style={{marginTop: '20px', marginLeft: '40px'}}>
           <Button size="large" onClick={() => this.submitWebhookEdit(false)}>{i18next.t("general:Save")}</Button>
           <Button style={{marginLeft: '20px'}} type="primary" size="large" onClick={() => this.submitWebhookEdit(true)}>{i18next.t("general:Save & Exit")}</Button>
+          {this.state.mode === "add" ? <Button style={{marginLeft: '20px'}} size="large" onClick={() => this.deleteWebhook()}>{i18next.t("general:Cancel")}</Button> : null}
         </div>
       </div>
     );

web/src/WebhookListPage.js

@@ -42,8 +42,7 @@ class WebhookListPage extends BaseListPage {
     const newWebhook = this.newWebhook();
     WebhookBackend.addWebhook(newWebhook)
       .then((res) => {
-          Setting.showMessage("success", `Webhook added successfully`);
-          this.props.history.push(`/webhooks/${newWebhook.name}`);
+          this.props.history.push({pathname: `/webhooks/${newWebhook.name}`, mode: "add"});
         }
       )
       .catch(error => {