SONAR-10188 Update project/organization header

2 files changed, 90 insertions, 84 deletions

diff --git a/server/sonar-web/src/main/js/apps/projectsManagement/Projects.tsx b/server/sonar-web/src/main/js/apps/projectsManagement/Projects.tsx
index d3399685066..81a0bb7102f 100644
--- a/server/sonar-web/src/main/js/apps/projectsManagement/Projects.tsx
+++ b/server/sonar-web/src/main/js/apps/projectsManagement/Projects.tsx
@@ -50,32 +50,34 @@ export default class Projects extends React.PureComponent<Props> {
 
   render() {
     return (
-      <table
-        className={classNames('data', 'zebra', { 'new-loading': !this.props.ready })}
-        id="projects-management-page-projects">
-        <thead>
-          <tr>
-            <th />
-            <th>{translate('name')}</th>
-            <th />
-            <th>{translate('key')}</th>
-            <th className="thin nowrap text-right">{translate('last_analysis')}</th>
-            <th />
-          </tr>
-        </thead>
-        <tbody>
-          {this.props.projects.map(project => (
-            <ProjectRow
-              currentUser={this.props.currentUser}
-              key={project.key}
-              onApplyTemplate={this.handleApplyTemplate}
-              onProjectCheck={this.onProjectCheck}
-              project={project}
-              selected={this.props.selection.includes(project.key)}
-            />
-          ))}
-        </tbody>
-      </table>
+      <div className="boxed-group boxed-group-inner">
+        <table
+          className={classNames('data', 'zebra', { 'new-loading': !this.props.ready })}
+          id="projects-management-page-projects">
+          <thead>
+            <tr>
+              <th />
+              <th>{translate('name')}</th>
+              <th />
+              <th>{translate('key')}</th>
+              <th className="thin nowrap text-right">{translate('last_analysis')}</th>
+              <th />
+            </tr>
+          </thead>
+          <tbody>
+            {this.props.projects.map(project => (
+              <ProjectRow
+                currentUser={this.props.currentUser}
+                key={project.key}
+                onApplyTemplate={this.handleApplyTemplate}
+                onProjectCheck={this.onProjectCheck}
+                project={project}
+                selected={this.props.selection.includes(project.key)}
+              />
+            ))}
+          </tbody>
+        </table>
+      </div>
     );
   }
 }
diff --git a/server/sonar-web/src/main/js/apps/projectsManagement/__tests__/__snapshots__/Projects-test.tsx.snap b/server/sonar-web/src/main/js/apps/projectsManagement/__tests__/__snapshots__/Projects-test.tsx.snap
index 7a3728a28ad..1503fed2c4e 100644
--- a/server/sonar-web/src/main/js/apps/projectsManagement/__tests__/__snapshots__/Projects-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/projectsManagement/__tests__/__snapshots__/Projects-test.tsx.snap
@@ -1,67 +1,71 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders list of projects 1`] = `
-<table
-  className="data zebra new-loading"
-  id="projects-management-page-projects"
+<div
+  className="boxed-group boxed-group-inner"
 >
-  <thead>
-    <tr>
-      <th />
-      <th>
-        name
-      </th>
-      <th />
-      <th>
-        key
-      </th>
-      <th
-        className="thin nowrap text-right"
-      >
-        last_analysis
-      </th>
-      <th />
-    </tr>
-  </thead>
-  <tbody>
-    <ProjectRow
-      currentUser={
-        Object {
-          "login": "foo",
+  <table
+    className="data zebra new-loading"
+    id="projects-management-page-projects"
+  >
+    <thead>
+      <tr>
+        <th />
+        <th>
+          name
+        </th>
+        <th />
+        <th>
+          key
+        </th>
+        <th
+          className="thin nowrap text-right"
+        >
+          last_analysis
+        </th>
+        <th />
+      </tr>
+    </thead>
+    <tbody>
+      <ProjectRow
+        currentUser={
+          Object {
+            "login": "foo",
+          }
         }
-      }
-      key="a"
-      onApplyTemplate={[Function]}
-      onProjectCheck={[Function]}
-      project={
-        Object {
-          "key": "a",
-          "name": "A",
-          "qualifier": "TRK",
-          "visibility": "public",
+        key="a"
+        onApplyTemplate={[Function]}
+        onProjectCheck={[Function]}
+        project={
+          Object {
+            "key": "a",
+            "name": "A",
+            "qualifier": "TRK",
+            "visibility": "public",
+          }
         }
-      }
-      selected={true}
-    />
-    <ProjectRow
-      currentUser={
-        Object {
-          "login": "foo",
+        selected={true}
+      />
+      <ProjectRow
+        currentUser={
+          Object {
+            "login": "foo",
+          }
         }
-      }
-      key="b"
-      onApplyTemplate={[Function]}
-      onProjectCheck={[Function]}
-      project={
-        Object {
-          "key": "b",
-          "name": "B",
-          "qualifier": "TRK",
-          "visibility": "public",
+        key="b"
+        onApplyTemplate={[Function]}
+        onProjectCheck={[Function]}
+        project={
+          Object {
+            "key": "b",
+            "name": "B",
+            "qualifier": "TRK",
+            "visibility": "public",
+          }
         }
-      }
-      selected={false}
-    />
-  </tbody>
-</table>
+        selected={false}
+      />
+    </tbody>
+  </table>
+</div>
 `;