- Updates cloud connection view to new design

src/components/CloudConnectionsView/CloudConnectionsView.js

@@ -97,6 +97,7 @@ class CloudConnectionsView extends Component {
         onConfirm: () => {
           this.setState({ confirmationDialog: { visible: false }})
           ConnectionsActions.deleteConnection(this.state.connection)
+          Location.push('/cloud-endpoints')
         },
         onCancel: () => {
           this.setState({ confirmationDialog: { visible: false }})
@@ -110,6 +111,10 @@ class CloudConnectionsView extends Component {
     this.setState({ showModal: false })
   }
 
+  goBack() {
+    Location.push("/cloud-endpoints")
+  }
+
   render() {
     let item = this.state.connection
     let title = "Edit Connection"
@@ -133,29 +138,26 @@ class CloudConnectionsView extends Component {
           <Header title={title} linkUrl="/cloud-endpoints"/>
           <div className={s.connectionHead}>
             <div className={s.container}>
-              <div className={s.connectionTypeImg + " icon small-cloud " + (item && item.type)}></div>
+              <div className="backBtn" onClick={(e) => this.goBack(e)}></div>
+              <div className={s.connectionTypeImg + " icon endpoint-white "}></div>
               <div className={s.connectionInfo}>
                 <h2>{item.name}</h2>
               </div>
-              <div className={s.connectionActions}>
-                <button onClick={(e) => this.showEditConnectionModal(e)}>Edit</button>
-                <button onClick={(e) => this.deleteConnection(e)} className="gray">Delete</button>
-              </div>
             </div>
           </div>
           <div className={s.container}>
             <div className={s.sidebar}>
-              <Link
-                to={"/cloud-endpoints/" + item.id + "/"}
-                className={this.props.type == 'detail' ? "active" : ""}
-              >Overview</Link>
-              <Link
-                to={"/cloud-endpoints/auth/" + item.id + "/"}
-                className={this.props.type == 'auth' ? "active" : ""}
-              >Authentication</Link>
+
             </div>
             <div className={s.content}>
+              <div className={s.connectionTypeImg + " icon large-cloud " + (item && item.type)}></div>
+              <br />
+
               {React.cloneElement(this.props.children, { connection: item })}
+
+              <button onClick={(e) => this.showEditConnectionModal(e)} className="gray">Edit Connection</button>
+              <br /><br />
+              <button onClick={(e) => this.deleteConnection(e)} className="wire">Delete</button>
             </div>
           </div>
           <Modal

src/components/CloudConnectionsView/CloudConnectionsView.scss

@@ -26,9 +26,11 @@ $connectionHeaderBg: #D9DCE3;
   background-color: $connectionHeaderBg;
   margin-top: 64px;
   padding: 16px;
+  h2 {
+    margin-top: 8px;
+  }
   .connectionTypeImg {
     margin-right: 64px;
-    margin-top: 8px;
     float: left;
   }
   .connectionInfo {
@@ -65,7 +67,7 @@ $connectionHeaderBg: #D9DCE3;
   }
   .connectionActions {
     float: right;
-    margin-top: 8px;
+    margin-top: 16px;
     button {
       margin-left: 16px;
       max-width: 96px;
@@ -108,7 +110,7 @@ $connectionHeaderBg: #D9DCE3;
   }
 }
 .content {
-  padding-top: 32px;
+  padding-top: 8px;
   float: left;
   width: 800px;
 }