- Adds confirmation dialog on cloud endpoints

- Adds back button on migration/replicas

src/components/ConnectionsList/ConnectionsList.js

@@ -32,6 +32,7 @@ import UserIcon from '../UserIcon';
 import FilteredTable from '../FilteredTable';
 import EndpointUsage from '../EndpointUsage';
 import NotificationIcon from '../NotificationIcon';
+import ConfirmationDialog from '../ConfirmationDialog'
 
 
 const title = 'Cloud Endpoints';
@@ -57,7 +58,13 @@ class ConnectionsList extends Reflux.Component {
       queryText: '',
       filterType: 'all',
       searchMin: true,
-      connections: null
+      connections: null,
+      confirmationDialog: {
+        visible: false,
+        message: "Are you sure?",
+        onConfirm: null,
+        onCancel: null
+      }
     }
   }
 
@@ -130,10 +137,22 @@ class ConnectionsList extends Reflux.Component {
   bulkActions(action) {
     switch (action.value) {
       case "delete":
-        let selectedConnections = this.state.connections.filter((connection) => connection.selected)
-        selectedConnections.forEach(connection => {
-          ConnectionsActions.deleteConnection(connection)
+        this.setState({
+          confirmationDialog: {
+            visible: true,
+            onConfirm: () => {
+              this.setState({ confirmationDialog: { visible: false }})
+              let selectedConnections = this.state.connections.filter((connection) => connection.selected)
+              selectedConnections.forEach(connection => {
+                ConnectionsActions.deleteConnection(connection)
+              })
+            },
+            onCancel: () => {
+              this.setState({ confirmationDialog: { visible: false }})
+            }
+          }
         })
+
         break;
     }
   }
@@ -283,6 +302,12 @@ class ConnectionsList extends Reflux.Component {
             addHandle={(e) => this.closeModal(e)}
           />
         </Modal>
+        <ConfirmationDialog
+          visible={this.state.confirmationDialog.visible}
+          message={this.state.confirmationDialog.message}
+          onConfirm={(e) => this.state.confirmationDialog.onConfirm(e)}
+          onCancel={(e) => this.state.confirmationDialog.onCancel(e)}
+        />
       </div>
     );
   }

src/components/MigrationList/MigrationList.js

@@ -365,7 +365,7 @@ class MigrationList extends Reflux.Component {
                   placeholder="Select"
                   value={this.state.currentProject}
                 />*/}
-                <button onClick={this.newMigration}>New Migration</button>
+                <button onClick={this.newMigration}>New</button>
                 <UserIcon />
                 <NotificationIcon />
               </div>

src/components/MigrationView/MigrationView.js

@@ -26,6 +26,7 @@ import MigrationStore from '../../stores/MigrationStore';
 import MigrationActions from '../../actions/MigrationActions';
 import LoadingIcon from '../LoadingIcon';
 import TextTruncate from 'react-text-truncate';
+import Location from '../../core/Location';
 
 const migrationActions = [
   { label: "Cancel", value: "cancel" },
@@ -83,6 +84,15 @@ class MigrationView extends Reflux.Component {
     MigrationActions.executeReplica(item)
   }
 
+  goBack() {
+    let item = this.state.migrations.filter(migration => migration.id == this.props.migrationId)[0]
+    if (item.type == "migration") {
+      Location.push('/migrations')
+    } else {
+      Location.push('/replicas')
+    }
+
+  }
 
   onMigrationActionsChange(option) {
     let item = this.state.migrations.filter(migration => migration.id == this.props.migrationId)[0]
@@ -162,6 +172,7 @@ class MigrationView extends Reflux.Component {
           <Header title={title} linkUrl={item.type == "migration" ? "/migrations" : "/replicas"}/>
           <div className={s.migrationHead}>
             <div className={s.container}>
+              <div className="backBtn" onClick={(e) => this.goBack(e)}></div>
               <div className={s.migrationTypeImg + ' icon ' + item.type + "-large"}></div>
               <div className={s.migrationInfo}>
                 <h2>