SONAR-7230 improve rendering of notifications page

4 files changed, 102 insertions, 51 deletions

diff --git a/server/sonar-web/src/main/js/apps/account/components/GlobalNotifications.js b/server/sonar-web/src/main/js/apps/account/components/GlobalNotifications.js
index 5f5de5de9b4..180f22468f8 100644
--- a/server/sonar-web/src/main/js/apps/account/components/GlobalNotifications.js
+++ b/server/sonar-web/src/main/js/apps/account/components/GlobalNotifications.js
@@ -24,12 +24,10 @@ import { translate } from '../../../helpers/l10n';
 
 export default function GlobalNotifications ({ notifications, channels }) {
   return (
-      <div>
-        <header className="page-header">
-          <h2 className="page-title">
-            {translate('my_profile.overall_notifications.title')}
-          </h2>
-        </header>
+      <section>
+        <h2 className="spacer-bottom">
+          {translate('my_profile.overall_notifications.title')}
+        </h2>
 
         <table className="form">
           <thead>
@@ -48,6 +46,6 @@ export default function GlobalNotifications ({ notifications, channels }) {
               checkboxId={(d, c) => `global_notifs_${d}_${c}`}
               checkboxName={(d, c) => `global_notifs[${d}.${c}]`}/>
         </table>
-      </div>
+      </section>
   );
 }
diff --git a/server/sonar-web/src/main/js/apps/account/components/Notifications.js b/server/sonar-web/src/main/js/apps/account/components/Notifications.js
index 75784ae9aa1..853d64d3c35 100644
--- a/server/sonar-web/src/main/js/apps/account/components/Notifications.js
+++ b/server/sonar-web/src/main/js/apps/account/components/Notifications.js
@@ -32,7 +32,7 @@ export default function Notifications ({ globalNotifications, projectNotificatio
           {translate('notification.dispatcher.information')}
         </p>
         <form id="notif_form" method="post" action={`${window.baseUrl}/account/update_notifications`}>
-          <div className="columns">
+          <div className="columns columns-overflow-visible">
             <div className="column-half">
               <GlobalNotifications
                   notifications={globalNotifications}
diff --git a/server/sonar-web/src/main/js/apps/account/components/ProjectNotification.js b/server/sonar-web/src/main/js/apps/account/components/ProjectNotification.js
new file mode 100644
index 00000000000..1147830fac0
--- /dev/null
+++ b/server/sonar-web/src/main/js/apps/account/components/ProjectNotification.js
@@ -0,0 +1,73 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2016 SonarSource SA
+ * mailto:contact AT sonarsource DOT com
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ */
+import classNames from 'classnames';
+import React, { Component } from 'react';
+
+import NotificationsList from './NotificationsList';
+import { translate } from '../../../helpers/l10n';
+
+export default class ProjectNotification extends Component {
+  state = {
+    toDelete: false
+  }
+
+  handleRemoveProject (e) {
+    e.preventDefault();
+    if (this.state.toDelete) {
+      const { data, onRemoveProject } = this.props;
+      onRemoveProject(data.project);
+    } else {
+      this.setState({ toDelete: true });
+    }
+  }
+
+  render () {
+    const { data, channels } = this.props;
+    const buttonClassName = classNames('big-spacer-left', 'button-red', {
+      'active': this.state.toDelete
+    });
+
+    return (
+        <table key={data.project.internalId} className="form big-spacer-bottom">
+          <thead>
+            <tr>
+              <th>
+                <h3 className="display-inline-block">{data.project.name}</h3>
+                <button
+                    onClick={this.handleRemoveProject.bind(this)}
+                    className={buttonClassName}>
+                  {this.state.toDelete ? 'Sure?' : translate('delete')}
+                </button>
+              </th>
+              {channels.map(channel => (
+                  <th key={channel} className="text-center">
+                    <h4>{translate('notification.channel', channel)}</h4>
+                  </th>
+              ))}
+            </tr>
+          </thead>
+          <NotificationsList
+              notifications={data.notifications}
+              checkboxId={(d, c) => `project_notifs_${data.project.internalId}_${d}_${c}`}
+              checkboxName={(d, c) => `project_notifs[${data.project.internalId}][${d}][${c}]`}/>
+        </table>
+    );
+  }
+}
diff --git a/server/sonar-web/src/main/js/apps/account/components/ProjectNotifications.js b/server/sonar-web/src/main/js/apps/account/components/ProjectNotifications.js
index 5683e50e1d8..acdd691e348 100644
--- a/server/sonar-web/src/main/js/apps/account/components/ProjectNotifications.js
+++ b/server/sonar-web/src/main/js/apps/account/components/ProjectNotifications.js
@@ -20,7 +20,7 @@
 import React from 'react';
 import Select from 'react-select';
 
-import NotificationsList from './NotificationsList';
+import ProjectNotification from './ProjectNotification';
 import { translate } from '../../../helpers/l10n';
 import { getProjectsWithInternalId } from '../../../api/components';
 
@@ -46,28 +46,11 @@ export default function ProjectNotifications ({ notifications, channels, onAddPr
     onAddProject(project);
   };
 
-  const handleRemoveProject = (project) => (
-      (e) => {
-        e.preventDefault;
-        onRemoveProject(project);
-      }
-  );
-
   return (
-      <div>
-        <header className="page-header">
-          <h2 className="page-title">
-            {translate('my_profile.per_project_notifications.title')}
-          </h2>
-          <div className="pull-right">
-            <Select.Async
-                name="new_project"
-                style={{ width: '150px' }}
-                loadOptions={loadOptions}
-                onChange={handleAddProject}
-                placeholder="Add Project"/>
-          </div>
-        </header>
+      <section>
+        <h2 className="spacer-bottom">
+          {translate('my_profile.per_project_notifications.title')}
+        </h2>
 
         {!notifications.length && (
             <div className="note">
@@ -76,27 +59,24 @@ export default function ProjectNotifications ({ notifications, channels, onAddPr
         )}
 
         {notifications.map(p => (
-            <table key={p.project.internalId} className="form spacer-bottom">
-              <thead>
-                <tr>
-                  <th>
-                    <a onClick={handleRemoveProject(p.project)}
-                       className="spacer-right icon-delete js-delete-project" href="#"></a>
-                    <h3 className="display-inline-block">{p.project.name}</h3>
-                  </th>
-                  {channels.map(channel => (
-                      <th key={channel} className="text-center">
-                        <h4>{translate('notification.channel', channel)}</h4>
-                      </th>
-                  ))}
-                </tr>
-              </thead>
-              <NotificationsList
-                  notifications={p.notifications}
-                  checkboxId={(d, c) => `project_notifs_${p.project.internalId}_${d}_${c}`}
-                  checkboxName={(d, c) => `project_notifs[${p.project.internalId}][${d}][${c}]`}/>
-            </table>
+            <ProjectNotification
+                key={p.project.internalId}
+                data={p}
+                channels={channels}
+                onRemoveProject={onRemoveProject}/>
         ))}
-      </div>
+
+        <div className="huge-spacer-top panel bg-muted">
+          <span className="text-middle spacer-right">
+            Set notifications for:
+          </span>
+          <Select.Async
+              name="new_project"
+              style={{ width: '150px' }}
+              loadOptions={loadOptions}
+              onChange={handleAddProject}
+              placeholder="Search Project"/>
+        </div>
+      </section>
   );
 }