SONAR-16095 correcting top alignment for why issue button

diff --git a/server/sonar-web/src/main/js/components/issue/Issue.css b/server/sonar-web/src/main/js/components/issue/Issue.css
index c80e5e125c502b6f95fd00a3761c08bf8f6bb93f..672ec17f50081e44c1d6f869afefa2625954b51f 100644 (file)
--- a/server/sonar-web/src/main/js/components/issue/Issue.css
+++ b/server/sonar-web/src/main/js/components/issue/Issue.css
@@ -47,16 +47,17 @@
 .issue-row {
   display: flex;
   margin-bottom: 5px;
+  align-items: flex-start;
 }
 
 .issue-row-meta {
-  flex-grow: 0;
   padding-right: 5px;
   white-space: nowrap;
+  margin-top: 2px;
 }
 
 .issue-message {
-  flex-grow: 1;
+  flex: 1;
   padding-left: var(--gridSize);
   padding-right: var(--gridSize);
   line-height: 18px;
@@ -81,6 +82,7 @@
 .issue-meta {
   line-height: 16px;
   font-size: var(--smallFontSize);
+  display: flex;
 }
 
 .issue-meta + .issue-meta {
@@ -100,6 +102,7 @@
 .issue-see-rule {
   border-bottom: none;
   font-size: var(--smallFontSize);
+  margin-top: 5px;
 }
 
 .issue-changelog {

diff --git a/server/sonar-web/src/main/js/components/issue/components/IssueMessage.tsx b/server/sonar-web/src/main/js/components/issue/components/IssueMessage.tsx
index ab6b244b8005d564a599ad6f35d38a26c554c26c..dde2b2817897e78fa2145efebabb96344c91d278 100644 (file)
--- a/server/sonar-web/src/main/js/components/issue/components/IssueMessage.tsx
+++ b/server/sonar-web/src/main/js/components/issue/components/IssueMessage.tsx
@@ -51,30 +51,59 @@ export default function IssueMessage(props: IssueMessageProps) {
   const ruleEngine = engineName ? engineName : engine;
 
   return (
-    <div className="display-inline-flex-center issue-message break-word">
-      <span className="spacer-right">{message}</span>
-      {quickFixAvailable && (
-        <Tooltip
-          overlay={
-            <FormattedMessage
-              id="issue.quick_fix_available_with_sonarlint"
-              defaultMessage={translate('issue.quick_fix_available_with_sonarlint')}
-              values={{
-                link: (
-                  <a
-                    href="https://www.sonarqube.org/sonarlint/?referrer=sonarqube-quick-fix"
-                    rel="noopener noreferrer"
-                    target="_blank">
-                    SonarLint
-                  </a>
-                )
-              }}
-            />
-          }
-          mouseLeaveDelay={0.5}>
-          <SonarLintIcon className="it__issues-sonarlint-quick-fix spacer-right" size={15} />
-        </Tooltip>
-      )}
+    <>
+      <div className="display-inline-flex-center issue-message break-word">
+        <span className="spacer-right">{message}</span>
+        {quickFixAvailable && (
+          <Tooltip
+            overlay={
+              <FormattedMessage
+                id="issue.quick_fix_available_with_sonarlint"
+                defaultMessage={translate('issue.quick_fix_available_with_sonarlint')}
+                values={{
+                  link: (
+                    <a
+                      href="https://www.sonarqube.org/sonarlint/?referrer=sonarqube-quick-fix"
+                      rel="noopener noreferrer"
+                      target="_blank">
+                      SonarLint
+                    </a>
+                  )
+                }}
+              />
+            }
+            mouseLeaveDelay={0.5}>
+            <SonarLintIcon className="it__issues-sonarlint-quick-fix spacer-right" size={15} />
+          </Tooltip>
+        )}
+        {ruleStatus && (ruleStatus === RuleStatus.Deprecated || ruleStatus === RuleStatus.Removed) && (
+          <DocumentationTooltip
+            className="spacer-left"
+            content={translate('rules.status', ruleStatus, 'help')}
+            links={[
+              {
+                href: '/documentation/user-guide/rules/',
+                label: translateWithParameters('see_x', translate('rules'))
+              }
+            ]}>
+            <span className="spacer-right badge badge-error">
+              {translate('rules.status', ruleStatus)}
+            </span>
+          </DocumentationTooltip>
+        )}
+        {ruleEngine && (
+          <Tooltip overlay={translateWithParameters('issue.from_external_rule_engine', ruleEngine)}>
+            <div className="badge spacer-right text-baseline">{ruleEngine}</div>
+          </Tooltip>
+        )}
+        {manualVulnerability && (
+          <Tooltip overlay={translate('issue.manual_vulnerability.description')}>
+            <div className="badge spacer-right text-baseline">
+              {translate('issue.manual_vulnerability')}
+            </div>
+          </Tooltip>
+        )}
+      </div>
       <ButtonLink
         aria-label={translate('issue.why_this_issue.long')}
         className="issue-see-rule spacer-right text-baseline"
@@ -85,33 +114,6 @@ export default function IssueMessage(props: IssueMessageProps) {
         }>
         {translate('issue.why_this_issue')}
       </ButtonLink>
-      {ruleStatus && (ruleStatus === RuleStatus.Deprecated || ruleStatus === RuleStatus.Removed) && (
-        <DocumentationTooltip
-          className="spacer-left"
-          content={translate('rules.status', ruleStatus, 'help')}
-          links={[
-            {
-              href: '/documentation/user-guide/rules/',
-              label: translateWithParameters('see_x', translate('rules'))
-            }
-          ]}>
-          <span className="spacer-right badge badge-error">
-            {translate('rules.status', ruleStatus)}
-          </span>
-        </DocumentationTooltip>
-      )}
-      {ruleEngine && (
-        <Tooltip overlay={translateWithParameters('issue.from_external_rule_engine', ruleEngine)}>
-          <div className="badge spacer-right text-baseline">{ruleEngine}</div>
-        </Tooltip>
-      )}
-      {manualVulnerability && (
-        <Tooltip overlay={translate('issue.manual_vulnerability.description')}>
-          <div className="badge spacer-right text-baseline">
-            {translate('issue.manual_vulnerability')}
-          </div>
-        </Tooltip>
-      )}
-    </div>
+    </>
   );
 }

diff --git a/server/sonar-web/src/main/js/components/issue/components/__tests__/__snapshots__/IssueMessage-test.tsx.snap b/server/sonar-web/src/main/js/components/issue/components/__tests__/__snapshots__/IssueMessage-test.tsx.snap
index 47dd644ce434acfb8057cb08dc1ad26403cd9070..dae61ae1c468fabb63b2644677de93ecf15f2258 100644 (file)
--- a/server/sonar-web/src/main/js/components/issue/components/__tests__/__snapshots__/IssueMessage-test.tsx.snap
+++ b/server/sonar-web/src/main/js/components/issue/components/__tests__/__snapshots__/IssueMessage-test.tsx.snap
@@ -1,14 +1,16 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`should render correctly: default 1`] = `
-<div
-  className="display-inline-flex-center issue-message break-word"
->
-  <span
-    className="spacer-right"
+<Fragment>
+  <div
+    className="display-inline-flex-center issue-message break-word"
   >
-    Reduce the number of conditional operators (4) used in the expression
-  </span>
+    <span
+      className="spacer-right"
+    >
+      Reduce the number of conditional operators (4) used in the expression
+    </span>
+  </div>
   <ButtonLink
     aria-label="issue.why_this_issue.long"
     className="issue-see-rule spacer-right text-baseline"
@@ -16,18 +18,38 @@ exports[`should render correctly: default 1`] = `
   >
     issue.why_this_issue
   </ButtonLink>
-</div>
+</Fragment>
 `;
 
 exports[`should render correctly: is deprecated rule 1`] = `
-<div
-  className="display-inline-flex-center issue-message break-word"
->
-  <span
-    className="spacer-right"
+<Fragment>
+  <div
+    className="display-inline-flex-center issue-message break-word"
   >
-    Reduce the number of conditional operators (4) used in the expression
-  </span>
+    <span
+      className="spacer-right"
+    >
+      Reduce the number of conditional operators (4) used in the expression
+    </span>
+    <DocumentationTooltip
+      className="spacer-left"
+      content="rules.status.DEPRECATED.help"
+      links={
+        Array [
+          Object {
+            "href": "/documentation/user-guide/rules/",
+            "label": "see_x.rules",
+          },
+        ]
+      }
+    >
+      <span
+        className="spacer-right badge badge-error"
+      >
+        rules.status.DEPRECATED
+      </span>
+    </DocumentationTooltip>
+  </div>
   <ButtonLink
     aria-label="issue.why_this_issue.long"
     className="issue-see-rule spacer-right text-baseline"
@@ -35,36 +57,29 @@ exports[`should render correctly: is deprecated rule 1`] = `
   >
     issue.why_this_issue
   </ButtonLink>
-  <DocumentationTooltip
-    className="spacer-left"
-    content="rules.status.DEPRECATED.help"
-    links={
-      Array [
-        Object {
-          "href": "/documentation/user-guide/rules/",
-          "label": "see_x.rules",
-        },
-      ]
-    }
-  >
-    <span
-      className="spacer-right badge badge-error"
-    >
-      rules.status.DEPRECATED
-    </span>
-  </DocumentationTooltip>
-</div>
+</Fragment>
 `;
 
 exports[`should render correctly: is manual vulnerability 1`] = `
-<div
-  className="display-inline-flex-center issue-message break-word"
->
-  <span
-    className="spacer-right"
+<Fragment>
+  <div
+    className="display-inline-flex-center issue-message break-word"
   >
-    Reduce the number of conditional operators (4) used in the expression
-  </span>
+    <span
+      className="spacer-right"
+    >
+      Reduce the number of conditional operators (4) used in the expression
+    </span>
+    <Tooltip
+      overlay="issue.manual_vulnerability.description"
+    >
+      <div
+        className="badge spacer-right text-baseline"
+      >
+        issue.manual_vulnerability
+      </div>
+    </Tooltip>
+  </div>
   <ButtonLink
     aria-label="issue.why_this_issue.long"
     className="issue-see-rule spacer-right text-baseline"
@@ -72,27 +87,38 @@ exports[`should render correctly: is manual vulnerability 1`] = `
   >
     issue.why_this_issue
   </ButtonLink>
-  <Tooltip
-    overlay="issue.manual_vulnerability.description"
-  >
-    <div
-      className="badge spacer-right text-baseline"
-    >
-      issue.manual_vulnerability
-    </div>
-  </Tooltip>
-</div>
+</Fragment>
 `;
 
 exports[`should render correctly: is removed rule 1`] = `
-<div
-  className="display-inline-flex-center issue-message break-word"
->
-  <span
-    className="spacer-right"
+<Fragment>
+  <div
+    className="display-inline-flex-center issue-message break-word"
   >
-    Reduce the number of conditional operators (4) used in the expression
-  </span>
+    <span
+      className="spacer-right"
+    >
+      Reduce the number of conditional operators (4) used in the expression
+    </span>
+    <DocumentationTooltip
+      className="spacer-left"
+      content="rules.status.REMOVED.help"
+      links={
+        Array [
+          Object {
+            "href": "/documentation/user-guide/rules/",
+            "label": "see_x.rules",
+          },
+        ]
+      }
+    >
+      <span
+        className="spacer-right badge badge-error"
+      >
+        rules.status.REMOVED
+      </span>
+    </DocumentationTooltip>
+  </div>
   <ButtonLink
     aria-label="issue.why_this_issue.long"
     className="issue-see-rule spacer-right text-baseline"
@@ -100,36 +126,29 @@ exports[`should render correctly: is removed rule 1`] = `
   >
     issue.why_this_issue
   </ButtonLink>
-  <DocumentationTooltip
-    className="spacer-left"
-    content="rules.status.REMOVED.help"
-    links={
-      Array [
-        Object {
-          "href": "/documentation/user-guide/rules/",
-          "label": "see_x.rules",
-        },
-      ]
-    }
-  >
-    <span
-      className="spacer-right badge badge-error"
-    >
-      rules.status.REMOVED
-    </span>
-  </DocumentationTooltip>
-</div>
+</Fragment>
 `;
 
 exports[`should render correctly: with engine info 1`] = `
-<div
-  className="display-inline-flex-center issue-message break-word"
->
-  <span
-    className="spacer-right"
+<Fragment>
+  <div
+    className="display-inline-flex-center issue-message break-word"
   >
-    Reduce the number of conditional operators (4) used in the expression
-  </span>
+    <span
+      className="spacer-right"
+    >
+      Reduce the number of conditional operators (4) used in the expression
+    </span>
+    <Tooltip
+      overlay="issue.from_external_rule_engine.js"
+    >
+      <div
+        className="badge spacer-right text-baseline"
+      >
+        js
+      </div>
+    </Tooltip>
+  </div>
   <ButtonLink
     aria-label="issue.why_this_issue.long"
     className="issue-see-rule spacer-right text-baseline"
@@ -137,27 +156,29 @@ exports[`should render correctly: with engine info 1`] = `
   >
     issue.why_this_issue
   </ButtonLink>
-  <Tooltip
-    overlay="issue.from_external_rule_engine.js"
-  >
-    <div
-      className="badge spacer-right text-baseline"
-    >
-      js
-    </div>
-  </Tooltip>
-</div>
+</Fragment>
 `;
 
 exports[`should render correctly: with engine name 1`] = `
-<div
-  className="display-inline-flex-center issue-message break-word"
->
-  <span
-    className="spacer-right"
+<Fragment>
+  <div
+    className="display-inline-flex-center issue-message break-word"
   >
-    Reduce the number of conditional operators (4) used in the expression
-  </span>
+    <span
+      className="spacer-right"
+    >
+      Reduce the number of conditional operators (4) used in the expression
+    </span>
+    <Tooltip
+      overlay="issue.from_external_rule_engine.JS"
+    >
+      <div
+        className="badge spacer-right text-baseline"
+      >
+        JS
+      </div>
+    </Tooltip>
+  </div>
   <ButtonLink
     aria-label="issue.why_this_issue.long"
     className="issue-see-rule spacer-right text-baseline"
@@ -165,52 +186,45 @@ exports[`should render correctly: with engine name 1`] = `
   >
     issue.why_this_issue
   </ButtonLink>
-  <Tooltip
-    overlay="issue.from_external_rule_engine.JS"
-  >
-    <div
-      className="badge spacer-right text-baseline"
-    >
-      JS
-    </div>
-  </Tooltip>
-</div>
+</Fragment>
 `;
 
 exports[`should render correctly: with quick fix 1`] = `
-<div
-  className="display-inline-flex-center issue-message break-word"
->
-  <span
-    className="spacer-right"
+<Fragment>
+  <div
+    className="display-inline-flex-center issue-message break-word"
   >
-    Reduce the number of conditional operators (4) used in the expression
-  </span>
-  <Tooltip
-    mouseLeaveDelay={0.5}
-    overlay={
-      <FormattedMessage
-        defaultMessage="issue.quick_fix_available_with_sonarlint"
-        id="issue.quick_fix_available_with_sonarlint"
-        values={
-          Object {
-            "link": <a
-              href="https://www.sonarqube.org/sonarlint/?referrer=sonarqube-quick-fix"
-              rel="noopener noreferrer"
-              target="_blank"
-            >
-              SonarLint
-            </a>,
+    <span
+      className="spacer-right"
+    >
+      Reduce the number of conditional operators (4) used in the expression
+    </span>
+    <Tooltip
+      mouseLeaveDelay={0.5}
+      overlay={
+        <FormattedMessage
+          defaultMessage="issue.quick_fix_available_with_sonarlint"
+          id="issue.quick_fix_available_with_sonarlint"
+          values={
+            Object {
+              "link": <a
+                href="https://www.sonarqube.org/sonarlint/?referrer=sonarqube-quick-fix"
+                rel="noopener noreferrer"
+                target="_blank"
+              >
+                SonarLint
+              </a>,
+            }
           }
-        }
+        />
+      }
+    >
+      <SonarLintIcon
+        className="it__issues-sonarlint-quick-fix spacer-right"
+        size={15}
       />
-    }
-  >
-    <SonarLintIcon
-      className="it__issues-sonarlint-quick-fix spacer-right"
-      size={15}
-    />
-  </Tooltip>
+    </Tooltip>
+  </div>
   <ButtonLink
     aria-label="issue.why_this_issue.long"
     className="issue-see-rule spacer-right text-baseline"
@@ -218,5 +232,5 @@ exports[`should render correctly: with quick fix 1`] = `
   >
     issue.why_this_issue
   </ButtonLink>
-</div>
+</Fragment>
 `;