SONAR-9544 Long words in issue box breaks the display

2 files changed, 235 insertions, 256 deletions

diff --git a/server/sonar-web/src/main/js/components/issue/components/IssueTitleBar.js b/server/sonar-web/src/main/js/components/issue/components/IssueTitleBar.js
index a445f5c1523..d1954009a18 100644
--- a/server/sonar-web/src/main/js/components/issue/components/IssueTitleBar.js
+++ b/server/sonar-web/src/main/js/components/issue/components/IssueTitleBar.js
@@ -74,69 +74,60 @@ export default function IssueTitleBar(props /*: Props */) {
   });
 
   return (
-    <table className="issue-table">
-      <tbody>
-        <tr>
-          <td>
-            <IssueMessage
-              message={issue.message}
-              rule={issue.rule}
-              organization={issue.organization}
+    <div className="issue-row">
+      <IssueMessage message={issue.message} rule={issue.rule} organization={issue.organization} />
+
+      <div className="issue-row-meta">
+        <ul className="list-inline issue-meta-list">
+          <li className="issue-meta">
+            <IssueChangelog
+              creationDate={issue.creationDate}
+              isOpen={props.currentPopup === 'changelog'}
+              issue={issue}
+              togglePopup={props.togglePopup}
+              onFail={props.onFail}
             />
-          </td>
-          <td className="issue-table-meta-cell issue-table-meta-cell-first">
-            <ul className="list-inline issue-meta-list">
-              <li className="issue-meta">
-                <IssueChangelog
-                  creationDate={issue.creationDate}
-                  isOpen={props.currentPopup === 'changelog'}
-                  issue={issue}
-                  togglePopup={props.togglePopup}
-                  onFail={props.onFail}
-                />
-              </li>
-              {issue.textRange != null && (
-                <li className="issue-meta">
-                  <span className="issue-meta-label" title={translate('line_number')}>
-                    L{issue.textRange.endLine}
-                  </span>
-                </li>
-              )}
-              {displayLocations && (
-                <li className="issue-meta">
-                  {props.displayLocationsLink ? (
-                    <Link onClick={stopPropagation} target="_blank" to={issueUrl}>
-                      {locationsBadge}
-                    </Link>
-                  ) : (
-                    locationsBadge
-                  )}
-                </li>
-              )}
-              <li className="issue-meta">
-                <Link
-                  className="js-issue-permalink link-no-underline"
-                  onClick={stopPropagation}
-                  target="_blank"
-                  to={issueUrl}>
-                  <LinkIcon />
+          </li>
+          {issue.textRange != null && (
+            <li className="issue-meta">
+              <span className="issue-meta-label" title={translate('line_number')}>
+                L{issue.textRange.endLine}
+              </span>
+            </li>
+          )}
+          {displayLocations && (
+            <li className="issue-meta">
+              {props.displayLocationsLink ? (
+                <Link onClick={stopPropagation} target="_blank" to={issueUrl}>
+                  {locationsBadge}
                 </Link>
-              </li>
-              {hasSimilarIssuesFilter && (
-                <li className="issue-meta">
-                  <SimilarIssuesFilter
-                    isOpen={props.currentPopup === 'similarIssues'}
-                    issue={issue}
-                    togglePopup={props.togglePopup}
-                    onFail={props.onFail}
-                    onFilter={props.onFilter}
-                  />
-                </li>
+              ) : (
+                locationsBadge
               )}
-            </ul>
-          </td>
-        </tr>
-      </tbody>
-    </table>
+            </li>
+          )}
+          <li className="issue-meta">
+            <Link
+              className="js-issue-permalink link-no-underline"
+              onClick={stopPropagation}
+              target="_blank"
+              to={issueUrl}>
+              <LinkIcon />
+            </Link>
+          </li>
+          {hasSimilarIssuesFilter && (
+            <li className="issue-meta">
+              <SimilarIssuesFilter
+                isOpen={props.currentPopup === 'similarIssues'}
+                issue={issue}
+                togglePopup={props.togglePopup}
+                onFail={props.onFail}
+                onFilter={props.onFilter}
+              />
+            </li>
+          )}
+        </ul>
+      </div>
+    </div>
   );
 }
diff --git a/server/sonar-web/src/main/js/components/issue/components/__tests__/__snapshots__/IssueTitleBar-test.js.snap b/server/sonar-web/src/main/js/components/issue/components/__tests__/__snapshots__/IssueTitleBar-test.js.snap
index 18d585695f7..edb836a3834 100644
--- a/server/sonar-web/src/main/js/components/issue/components/__tests__/__snapshots__/IssueTitleBar-test.js.snap
+++ b/server/sonar-web/src/main/js/components/issue/components/__tests__/__snapshots__/IssueTitleBar-test.js.snap
@@ -9,210 +9,198 @@ exports[`should count all code locations 1`] = `
 `;
 
 exports[`should render the titlebar correctly 1`] = `
-<table
-  className="issue-table"
+<div
+  className="issue-row"
 >
-  <tbody>
-    <tr>
-      <td>
-        <IssueMessage
-          message="Reduce the number of conditional operators (4) used in the expression"
-          organization="myorg"
-          rule="javascript:S1067"
+  <IssueMessage
+    message="Reduce the number of conditional operators (4) used in the expression"
+    organization="myorg"
+    rule="javascript:S1067"
+  />
+  <div
+    className="issue-row-meta"
+  >
+    <ul
+      className="list-inline issue-meta-list"
+    >
+      <li
+        className="issue-meta"
+      >
+        <IssueChangelog
+          creationDate="2017-03-01T09:36:01+0100"
+          isOpen={false}
+          issue={
+            Object {
+              "creationDate": "2017-03-01T09:36:01+0100",
+              "flows": Array [],
+              "key": "AVsae-CQS-9G3txfbFN2",
+              "line": 25,
+              "message": "Reduce the number of conditional operators (4) used in the expression",
+              "organization": "myorg",
+              "project": "myproject",
+              "rule": "javascript:S1067",
+              "secondaryLocations": Array [],
+              "textRange": Object {
+                "endLine": 26,
+                "endOffset": 15,
+                "startLine": 25,
+                "startOffset": 0,
+              },
+            }
+          }
+          onFail={[Function]}
+          togglePopup={[Function]}
         />
-      </td>
-      <td
-        className="issue-table-meta-cell issue-table-meta-cell-first"
+      </li>
+      <li
+        className="issue-meta"
+      >
+        <span
+          className="issue-meta-label"
+          title="line_number"
+        >
+          L
+          26
+        </span>
+      </li>
+      <li
+        className="issue-meta"
       >
-        <ul
-          className="list-inline issue-meta-list"
+        <Link
+          className="js-issue-permalink link-no-underline"
+          onClick={[Function]}
+          onlyActiveOnIndex={false}
+          style={Object {}}
+          target="_blank"
+          to={
+            Object {
+              "pathname": "/project/issues",
+              "query": Object {
+                "branch": "feature-1.0",
+                "id": "myproject",
+                "issues": "AVsae-CQS-9G3txfbFN2",
+                "open": "AVsae-CQS-9G3txfbFN2",
+              },
+            }
+          }
         >
-          <li
-            className="issue-meta"
-          >
-            <IssueChangelog
-              creationDate="2017-03-01T09:36:01+0100"
-              isOpen={false}
-              issue={
-                Object {
-                  "creationDate": "2017-03-01T09:36:01+0100",
-                  "flows": Array [],
-                  "key": "AVsae-CQS-9G3txfbFN2",
-                  "line": 25,
-                  "message": "Reduce the number of conditional operators (4) used in the expression",
-                  "organization": "myorg",
-                  "project": "myproject",
-                  "rule": "javascript:S1067",
-                  "secondaryLocations": Array [],
-                  "textRange": Object {
-                    "endLine": 26,
-                    "endOffset": 15,
-                    "startLine": 25,
-                    "startOffset": 0,
-                  },
-                }
-              }
-              onFail={[Function]}
-              togglePopup={[Function]}
-            />
-          </li>
-          <li
-            className="issue-meta"
-          >
-            <span
-              className="issue-meta-label"
-              title="line_number"
-            >
-              L
-              26
-            </span>
-          </li>
-          <li
-            className="issue-meta"
-          >
-            <Link
-              className="js-issue-permalink link-no-underline"
-              onClick={[Function]}
-              onlyActiveOnIndex={false}
-              style={Object {}}
-              target="_blank"
-              to={
-                Object {
-                  "pathname": "/project/issues",
-                  "query": Object {
-                    "branch": "feature-1.0",
-                    "id": "myproject",
-                    "issues": "AVsae-CQS-9G3txfbFN2",
-                    "open": "AVsae-CQS-9G3txfbFN2",
-                  },
-                }
-              }
-            >
-              <LinkIcon />
-            </Link>
-          </li>
-        </ul>
-      </td>
-    </tr>
-  </tbody>
-</table>
+          <LinkIcon />
+        </Link>
+      </li>
+    </ul>
+  </div>
+</div>
 `;
 
 exports[`should render the titlebar with the filter 1`] = `
-<table
-  className="issue-table"
+<div
+  className="issue-row"
 >
-  <tbody>
-    <tr>
-      <td>
-        <IssueMessage
-          message="Reduce the number of conditional operators (4) used in the expression"
-          organization="myorg"
-          rule="javascript:S1067"
+  <IssueMessage
+    message="Reduce the number of conditional operators (4) used in the expression"
+    organization="myorg"
+    rule="javascript:S1067"
+  />
+  <div
+    className="issue-row-meta"
+  >
+    <ul
+      className="list-inline issue-meta-list"
+    >
+      <li
+        className="issue-meta"
+      >
+        <IssueChangelog
+          creationDate="2017-03-01T09:36:01+0100"
+          isOpen={false}
+          issue={
+            Object {
+              "creationDate": "2017-03-01T09:36:01+0100",
+              "flows": Array [],
+              "key": "AVsae-CQS-9G3txfbFN2",
+              "line": 25,
+              "message": "Reduce the number of conditional operators (4) used in the expression",
+              "organization": "myorg",
+              "project": "myproject",
+              "rule": "javascript:S1067",
+              "secondaryLocations": Array [],
+              "textRange": Object {
+                "endLine": 26,
+                "endOffset": 15,
+                "startLine": 25,
+                "startOffset": 0,
+              },
+            }
+          }
+          onFail={[Function]}
+          togglePopup={[Function]}
         />
-      </td>
-      <td
-        className="issue-table-meta-cell issue-table-meta-cell-first"
+      </li>
+      <li
+        className="issue-meta"
       >
-        <ul
-          className="list-inline issue-meta-list"
+        <span
+          className="issue-meta-label"
+          title="line_number"
         >
-          <li
-            className="issue-meta"
-          >
-            <IssueChangelog
-              creationDate="2017-03-01T09:36:01+0100"
-              isOpen={false}
-              issue={
-                Object {
-                  "creationDate": "2017-03-01T09:36:01+0100",
-                  "flows": Array [],
-                  "key": "AVsae-CQS-9G3txfbFN2",
-                  "line": 25,
-                  "message": "Reduce the number of conditional operators (4) used in the expression",
-                  "organization": "myorg",
-                  "project": "myproject",
-                  "rule": "javascript:S1067",
-                  "secondaryLocations": Array [],
-                  "textRange": Object {
-                    "endLine": 26,
-                    "endOffset": 15,
-                    "startLine": 25,
-                    "startOffset": 0,
-                  },
-                }
-              }
-              onFail={[Function]}
-              togglePopup={[Function]}
-            />
-          </li>
-          <li
-            className="issue-meta"
-          >
-            <span
-              className="issue-meta-label"
-              title="line_number"
-            >
-              L
-              26
-            </span>
-          </li>
-          <li
-            className="issue-meta"
-          >
-            <Link
-              className="js-issue-permalink link-no-underline"
-              onClick={[Function]}
-              onlyActiveOnIndex={false}
-              style={Object {}}
-              target="_blank"
-              to={
-                Object {
-                  "pathname": "/project/issues",
-                  "query": Object {
-                    "branch": undefined,
-                    "id": "myproject",
-                    "issues": "AVsae-CQS-9G3txfbFN2",
-                    "open": "AVsae-CQS-9G3txfbFN2",
-                  },
-                }
-              }
-            >
-              <LinkIcon />
-            </Link>
-          </li>
-          <li
-            className="issue-meta"
-          >
-            <SimilarIssuesFilter
-              isOpen={false}
-              issue={
-                Object {
-                  "creationDate": "2017-03-01T09:36:01+0100",
-                  "flows": Array [],
-                  "key": "AVsae-CQS-9G3txfbFN2",
-                  "line": 25,
-                  "message": "Reduce the number of conditional operators (4) used in the expression",
-                  "organization": "myorg",
-                  "project": "myproject",
-                  "rule": "javascript:S1067",
-                  "secondaryLocations": Array [],
-                  "textRange": Object {
-                    "endLine": 26,
-                    "endOffset": 15,
-                    "startLine": 25,
-                    "startOffset": 0,
-                  },
-                }
-              }
-              onFail={[Function]}
-              onFilter={[Function]}
-              togglePopup={[Function]}
-            />
-          </li>
-        </ul>
-      </td>
-    </tr>
-  </tbody>
-</table>
+          L
+          26
+        </span>
+      </li>
+      <li
+        className="issue-meta"
+      >
+        <Link
+          className="js-issue-permalink link-no-underline"
+          onClick={[Function]}
+          onlyActiveOnIndex={false}
+          style={Object {}}
+          target="_blank"
+          to={
+            Object {
+              "pathname": "/project/issues",
+              "query": Object {
+                "branch": undefined,
+                "id": "myproject",
+                "issues": "AVsae-CQS-9G3txfbFN2",
+                "open": "AVsae-CQS-9G3txfbFN2",
+              },
+            }
+          }
+        >
+          <LinkIcon />
+        </Link>
+      </li>
+      <li
+        className="issue-meta"
+      >
+        <SimilarIssuesFilter
+          isOpen={false}
+          issue={
+            Object {
+              "creationDate": "2017-03-01T09:36:01+0100",
+              "flows": Array [],
+              "key": "AVsae-CQS-9G3txfbFN2",
+              "line": 25,
+              "message": "Reduce the number of conditional operators (4) used in the expression",
+              "organization": "myorg",
+              "project": "myproject",
+              "rule": "javascript:S1067",
+              "secondaryLocations": Array [],
+              "textRange": Object {
+                "endLine": 26,
+                "endOffset": 15,
+                "startLine": 25,
+                "startOffset": 0,
+              },
+            }
+          }
+          onFail={[Function]}
+          onFilter={[Function]}
+          togglePopup={[Function]}
+        />
+      </li>
+    </ul>
+  </div>
+</div>
 `;