Feature/pm/hardening 10 04 (#130)

server/sonar-web/src/main/js/app/styles/components/page.css

@@ -255,6 +255,7 @@
   flex-grow: 1;
   min-width: 740px;
   padding: 20px;
+  z-index: var(--pageMainZIndex);
 }
 
 .layout-page-main-inner {

server/sonar-web/src/main/js/app/theme.js

@@ -93,6 +93,8 @@ module.exports = {
   belowNormalZIndex: '1',
 
   // ui elements
+  pageMainZIndex: '50',
+
   tooltipZIndex: '8000',
 
   dropdownMenuZIndex: '7500',

server/sonar-web/src/main/js/apps/issues/components/BulkChangeModal.tsx

@@ -202,7 +202,7 @@ export default class BulkChangeModal extends React.PureComponent<Props, State> {
     const query = pickBy(
       {
         add_tags: this.state.addTags && this.state.addTags.map(t => t.value).join(),
-        assign: this.state.assignee,
+        assign: this.state.assignee ? this.state.assignee.value : null,
         comment: this.state.comment,
         do_transition: this.state.transition,
         remove_tags: this.state.removeTags && this.state.removeTags.map(t => t.value).join(),

server/sonar-web/src/main/js/apps/projectBranches/components/App.tsx

@@ -32,6 +32,7 @@ import {
 import { translate } from '../../../helpers/l10n';
 import { getValues } from '../../../api/settings';
 import { formatMeasure } from '../../../helpers/measures';
+import Tooltip from '../../../components/controls/Tooltip';
 
 interface Props {
   branchLikes: BranchLike[];
@@ -77,6 +78,10 @@ export default class App extends React.PureComponent<Props, State> {
     );
   }
 
+  isOrphan = (branchLike: BranchLike) => {
+    return (isShortLivingBranch(branchLike) || isPullRequest(branchLike)) && branchLike.isOrphan;
+  };
+
   renderBranchLifeTime() {
     const { branchLifeTime } = this.state;
     if (!branchLifeTime) {
@@ -140,18 +145,30 @@ export default class App extends React.PureComponent<Props, State> {
               </tr>
             </thead>
             <tbody>
-              {sortBranchesAsTree(branchLikes).map(branchLike => (
-                <BranchRow
-                  branchLike={branchLike}
-                  component={component.key}
-                  isOrphan={
-                    (isShortLivingBranch(branchLike) || isPullRequest(branchLike)) &&
-                    branchLike.isOrphan
-                  }
-                  key={getBranchLikeKey(branchLike)}
-                  onChange={onBranchesChange}
-                />
-              ))}
+              {sortBranchesAsTree(branchLikes).map((branchLike, index) => {
+                const isOrphan = this.isOrphan(branchLike);
+                const previous = index > 0 ? branchLikes[index - 1] : undefined;
+                const isPreviousOrphan = previous !== undefined && this.isOrphan(previous);
+                const showOrphanHeader = isOrphan && !isPreviousOrphan;
+                return (
+                  <React.Fragment key={getBranchLikeKey(branchLike)}>
+                    {showOrphanHeader && (
+                      <li className="dropdown-header">
+                        {translate('branches.orphan_branches')}
+                        <Tooltip overlay={translate('branches.orphan_branches.tooltip')}>
+                          <i className="icon-help spacer-left" />
+                        </Tooltip>
+                      </li>
+                    )}
+                    <BranchRow
+                      branchLike={branchLike}
+                      component={component.key}
+                      isOrphan={isOrphan}
+                      onChange={onBranchesChange}
+                    />
+                  </React.Fragment>
+                );
+              })}
             </tbody>
           </table>
         </div>

server/sonar-web/src/main/js/apps/projectBranches/components/__tests__/App-test.tsx

@@ -40,11 +40,24 @@ beforeEach(() => {
 });
 
 it('renders sorted list of branches', () => {
-  const branchLikes: [MainBranch, LongLivingBranch, ShortLivingBranch, PullRequest] = [
+  const branchLikes: [
+    MainBranch,
+    LongLivingBranch,
+    ShortLivingBranch,
+    PullRequest,
+    ShortLivingBranch
+  ] = [
     { isMain: true, name: 'master' },
     { isMain: false, name: 'branch-1.0', type: BranchType.LONG },
     { isMain: false, mergeBranch: 'master', name: 'feature', type: BranchType.SHORT },
-    { base: 'master', branch: 'feature', key: '1234', title: 'Feature PR' }
+    { base: 'master', branch: 'feature', key: '1234', title: 'Feature PR' },
+    {
+      isMain: false,
+      mergeBranch: 'foobar',
+      isOrphan: true,
+      name: 'feature',
+      type: BranchType.SHORT
+    }
   ];
   const wrapper = shallow(
     <App

server/sonar-web/src/main/js/apps/projectBranches/components/__tests__/__snapshots__/App-test.tsx.snap

@@ -81,57 +81,99 @@ exports[`renders sorted list of branches 1`] = `
         </tr>
       </thead>
       <tbody>
-        <BranchRow
-          branchLike={
-            Object {
-              "isMain": true,
-              "name": "master",
-            }
-          }
-          component="foo"
-          isOrphan={false}
+        <React.Fragment
           key="branch-master"
-          onChange={[MockFunction]}
-        />
-        <BranchRow
-          branchLike={
-            Object {
-              "base": "master",
-              "branch": "feature",
-              "key": "1234",
-              "title": "Feature PR",
+        >
+          <BranchRow
+            branchLike={
+              Object {
+                "isMain": true,
+                "name": "master",
+              }
             }
-          }
-          component="foo"
+            component="foo"
+            isOrphan={false}
+            onChange={[MockFunction]}
+          />
+        </React.Fragment>
+        <React.Fragment
           key="pull-request-1234"
-          onChange={[MockFunction]}
-        />
-        <BranchRow
-          branchLike={
-            Object {
-              "isMain": false,
-              "mergeBranch": "master",
-              "name": "feature",
-              "type": "SHORT",
+        >
+          <BranchRow
+            branchLike={
+              Object {
+                "base": "master",
+                "branch": "feature",
+                "key": "1234",
+                "title": "Feature PR",
+              }
             }
-          }
-          component="foo"
+            component="foo"
+            onChange={[MockFunction]}
+          />
+        </React.Fragment>
+        <React.Fragment
           key="branch-feature"
-          onChange={[MockFunction]}
-        />
-        <BranchRow
-          branchLike={
-            Object {
-              "isMain": false,
-              "name": "branch-1.0",
-              "type": "LONG",
+        >
+          <BranchRow
+            branchLike={
+              Object {
+                "isMain": false,
+                "mergeBranch": "master",
+                "name": "feature",
+                "type": "SHORT",
+              }
             }
-          }
-          component="foo"
-          isOrphan={false}
+            component="foo"
+            onChange={[MockFunction]}
+          />
+        </React.Fragment>
+        <React.Fragment
           key="branch-branch-1.0"
-          onChange={[MockFunction]}
-        />
+        >
+          <BranchRow
+            branchLike={
+              Object {
+                "isMain": false,
+                "name": "branch-1.0",
+                "type": "LONG",
+              }
+            }
+            component="foo"
+            isOrphan={false}
+            onChange={[MockFunction]}
+          />
+        </React.Fragment>
+        <React.Fragment
+          key="branch-feature"
+        >
+          <li
+            className="dropdown-header"
+          >
+            branches.orphan_branches
+            <Tooltip
+              overlay="branches.orphan_branches.tooltip"
+            >
+              <i
+                className="icon-help spacer-left"
+              />
+            </Tooltip>
+          </li>
+          <BranchRow
+            branchLike={
+              Object {
+                "isMain": false,
+                "isOrphan": true,
+                "mergeBranch": "foobar",
+                "name": "feature",
+                "type": "SHORT",
+              }
+            }
+            component="foo"
+            isOrphan={true}
+            onChange={[MockFunction]}
+          />
+        </React.Fragment>
       </tbody>
     </table>
   </div>