SONAR-16760 [891629] Visual list is not marked up as list

3 files changed, 407 insertions, 381 deletions

diff --git a/server/sonar-web/src/main/js/apps/overview/components/QualityGateCondition.tsx b/server/sonar-web/src/main/js/apps/overview/components/QualityGateCondition.tsx
index 5f8d91fafe8..b62b5fa043f 100644
--- a/server/sonar-web/src/main/js/apps/overview/components/QualityGateCondition.tsx
+++ b/server/sonar-web/src/main/js/apps/overview/components/QualityGateCondition.tsx
@@ -108,19 +108,23 @@ export default class QualityGateCondition extends React.PureComponent<Props> {
       [MetricKey.new_security_hotspots_reviewed]: () => this.getUrlForSecurityHotspot(true)
     };
 
-    return METRICS_TO_URL_MAPPING[metricKey] ? (
-      <Link className={className} to={METRICS_TO_URL_MAPPING[metricKey]()}>
-        {children}
-      </Link>
-    ) : (
-      <DrilldownLink
-        branchLike={branchLike}
-        className={className}
-        component={component.key}
-        metric={condition.measure.metric.key}
-        inNewCodePeriod={condition.period != null}>
-        {children}
-      </DrilldownLink>
+    return (
+      <li>
+        {METRICS_TO_URL_MAPPING[metricKey] ? (
+          <Link className={className} to={METRICS_TO_URL_MAPPING[metricKey]()}>
+            {children}
+          </Link>
+        ) : (
+          <DrilldownLink
+            branchLike={branchLike}
+            className={className}
+            component={component.key}
+            metric={condition.measure.metric.key}
+            inNewCodePeriod={condition.period != null}>
+            {children}
+          </DrilldownLink>
+        )}
+      </li>
     );
   }
 
diff --git a/server/sonar-web/src/main/js/apps/overview/components/QualityGateConditions.tsx b/server/sonar-web/src/main/js/apps/overview/components/QualityGateConditions.tsx
index c635843f0ea..486d802e10f 100644
--- a/server/sonar-web/src/main/js/apps/overview/components/QualityGateConditions.tsx
+++ b/server/sonar-web/src/main/js/apps/overview/components/QualityGateConditions.tsx
@@ -61,7 +61,7 @@ export function QualityGateConditions(props: QualityGateConditionsProps) {
   }
 
   return (
-    <div
+    <ul
       className="overview-quality-gate-conditions-list"
       id="overview-quality-gate-conditions-list">
       {renderConditions.map(condition => (
@@ -73,17 +73,19 @@ export function QualityGateConditions(props: QualityGateConditionsProps) {
         />
       ))}
       {renderCollapsed && (
-        <ButtonLink
-          className="overview-quality-gate-conditions-list-collapse"
-          onClick={() => toggleCollapsed(!collapsed)}>
-          {translateWithParameters(
-            'overview.X_more_failed_conditions',
-            sortedConditions.length - MAX_CONDITIONS
-          )}
-          <ChevronDownIcon className="little-spacer-left" />
-        </ButtonLink>
+        <li>
+          <ButtonLink
+            className="overview-quality-gate-conditions-list-collapse"
+            onClick={() => toggleCollapsed(!collapsed)}>
+            {translateWithParameters(
+              'overview.X_more_failed_conditions',
+              sortedConditions.length - MAX_CONDITIONS
+            )}
+            <ChevronDownIcon className="little-spacer-left" />
+          </ButtonLink>
+        </li>
       )}
-    </div>
+    </ul>
   );
 }
 
diff --git a/server/sonar-web/src/main/js/apps/overview/components/__tests__/__snapshots__/QualityGateCondition-test.tsx.snap b/server/sonar-web/src/main/js/apps/overview/components/__tests__/__snapshots__/QualityGateCondition-test.tsx.snap
index 6fc13d55ee8..34fc6ff397d 100644
--- a/server/sonar-web/src/main/js/apps/overview/components/__tests__/__snapshots__/QualityGateCondition-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/overview/components/__tests__/__snapshots__/QualityGateCondition-test.tsx.snap
@@ -1,457 +1,477 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`should render correclty 1`] = `
-<DrilldownLink
-  className="overview-quality-gate-condition overview-quality-gate-condition-error"
-  component="abcd-key"
-  inNewCodePeriod={false}
-  metric="open_issues"
->
-  <div
-    className="overview-quality-gate-condition-container display-flex-center"
+<li>
+  <DrilldownLink
+    className="overview-quality-gate-condition overview-quality-gate-condition-error"
+    component="abcd-key"
+    inNewCodePeriod={false}
+    metric="open_issues"
   >
     <div
-      className="overview-quality-gate-condition-value text-center spacer-right"
+      className="overview-quality-gate-condition-container display-flex-center"
     >
-      <Measure
-        decimals={2}
-        metricKey="open_issues"
-        metricType="INT"
-        value="3"
-      />
-    </div>
-    <div>
-      <span
-        className="overview-quality-gate-condition-metric little-spacer-right"
+      <div
+        className="overview-quality-gate-condition-value text-center spacer-right"
       >
-        <IssueTypeIcon
-          className="little-spacer-right"
-          query="open_issues"
+        <Measure
+          decimals={2}
+          metricKey="open_issues"
+          metricType="INT"
+          value="3"
         />
-        metric.open_issues.name
-      </span>
-      <span
-        className="little-spacer-top small text-muted"
-      >
-        quality_gates.operator.GT
-         
-        1
-      </span>
+      </div>
+      <div>
+        <span
+          className="overview-quality-gate-condition-metric little-spacer-right"
+        >
+          <IssueTypeIcon
+            className="little-spacer-right"
+            query="open_issues"
+          />
+          metric.open_issues.name
+        </span>
+        <span
+          className="little-spacer-top small text-muted"
+        >
+          quality_gates.operator.GT
+           
+          1
+        </span>
+      </div>
     </div>
-  </div>
-</DrilldownLink>
+  </DrilldownLink>
+</li>
 `;
 
 exports[`should render correclty 2`] = `
-<Link
-  className="overview-quality-gate-condition overview-quality-gate-condition-error"
-  to={
-    Object {
-      "hash": "",
-      "pathname": "/project/issues",
-      "search": "?resolved=false&types=BUG&severities=BLOCKER%2CCRITICAL%2CMAJOR%2CMINOR&id=abcd-key",
+<li>
+  <Link
+    className="overview-quality-gate-condition overview-quality-gate-condition-error"
+    to={
+      Object {
+        "hash": "",
+        "pathname": "/project/issues",
+        "search": "?resolved=false&types=BUG&severities=BLOCKER%2CCRITICAL%2CMAJOR%2CMINOR&id=abcd-key",
+      }
     }
-  }
->
-  <div
-    className="overview-quality-gate-condition-container display-flex-center"
   >
     <div
-      className="overview-quality-gate-condition-value text-center spacer-right"
+      className="overview-quality-gate-condition-container display-flex-center"
     >
-      <Measure
-        decimals={2}
-        metricKey="reliability_rating"
-        metricType="RATING"
-        value="3"
-      />
-    </div>
-    <div>
-      <span
-        className="overview-quality-gate-condition-metric little-spacer-right"
+      <div
+        className="overview-quality-gate-condition-value text-center spacer-right"
       >
-        <IssueTypeIcon
-          className="little-spacer-right"
-          query="reliability_rating"
+        <Measure
+          decimals={2}
+          metricKey="reliability_rating"
+          metricType="RATING"
+          value="3"
         />
-        metric.reliability_rating.name
-      </span>
-      <span
-        className="little-spacer-top small text-muted"
-      >
-        quality_gates.operator.GT.rating
-         
-        A
-      </span>
+      </div>
+      <div>
+        <span
+          className="overview-quality-gate-condition-metric little-spacer-right"
+        >
+          <IssueTypeIcon
+            className="little-spacer-right"
+            query="reliability_rating"
+          />
+          metric.reliability_rating.name
+        </span>
+        <span
+          className="little-spacer-top small text-muted"
+        >
+          quality_gates.operator.GT.rating
+           
+          A
+        </span>
+      </div>
     </div>
-  </div>
-</Link>
+  </Link>
+</li>
 `;
 
 exports[`should render correclty 3`] = `
-<Link
-  className="overview-quality-gate-condition overview-quality-gate-condition-error"
-  to={
-    Object {
-      "hash": "",
-      "pathname": "/project/issues",
-      "search": "?resolved=false&types=VULNERABILITY&severities=BLOCKER%2CCRITICAL%2CMAJOR%2CMINOR&id=abcd-key",
+<li>
+  <Link
+    className="overview-quality-gate-condition overview-quality-gate-condition-error"
+    to={
+      Object {
+        "hash": "",
+        "pathname": "/project/issues",
+        "search": "?resolved=false&types=VULNERABILITY&severities=BLOCKER%2CCRITICAL%2CMAJOR%2CMINOR&id=abcd-key",
+      }
     }
-  }
->
-  <div
-    className="overview-quality-gate-condition-container display-flex-center"
   >
     <div
-      className="overview-quality-gate-condition-value text-center spacer-right"
+      className="overview-quality-gate-condition-container display-flex-center"
     >
-      <Measure
-        decimals={2}
-        metricKey="security_rating"
-        metricType="RATING"
-        value="3"
-      />
-    </div>
-    <div>
-      <span
-        className="overview-quality-gate-condition-metric little-spacer-right"
+      <div
+        className="overview-quality-gate-condition-value text-center spacer-right"
       >
-        <IssueTypeIcon
-          className="little-spacer-right"
-          query="security_rating"
+        <Measure
+          decimals={2}
+          metricKey="security_rating"
+          metricType="RATING"
+          value="3"
         />
-        metric.security_rating.name
-      </span>
-      <span
-        className="little-spacer-top small text-muted"
-      >
-        quality_gates.operator.GT.rating
-         
-        A
-      </span>
+      </div>
+      <div>
+        <span
+          className="overview-quality-gate-condition-metric little-spacer-right"
+        >
+          <IssueTypeIcon
+            className="little-spacer-right"
+            query="security_rating"
+          />
+          metric.security_rating.name
+        </span>
+        <span
+          className="little-spacer-top small text-muted"
+        >
+          quality_gates.operator.GT.rating
+           
+          A
+        </span>
+      </div>
     </div>
-  </div>
-</Link>
+  </Link>
+</li>
 `;
 
 exports[`should render correclty 4`] = `
-<Link
-  className="overview-quality-gate-condition overview-quality-gate-condition-error"
-  to={
-    Object {
-      "hash": "",
-      "pathname": "/project/issues",
-      "search": "?resolved=false&types=CODE_SMELL&id=abcd-key",
+<li>
+  <Link
+    className="overview-quality-gate-condition overview-quality-gate-condition-error"
+    to={
+      Object {
+        "hash": "",
+        "pathname": "/project/issues",
+        "search": "?resolved=false&types=CODE_SMELL&id=abcd-key",
+      }
     }
-  }
->
-  <div
-    className="overview-quality-gate-condition-container display-flex-center"
   >
     <div
-      className="overview-quality-gate-condition-value text-center spacer-right"
+      className="overview-quality-gate-condition-container display-flex-center"
     >
-      <Measure
-        decimals={2}
-        metricKey="sqale_rating"
-        metricType="RATING"
-        value="3"
-      />
-    </div>
-    <div>
-      <span
-        className="overview-quality-gate-condition-metric little-spacer-right"
+      <div
+        className="overview-quality-gate-condition-value text-center spacer-right"
       >
-        <IssueTypeIcon
-          className="little-spacer-right"
-          query="sqale_rating"
+        <Measure
+          decimals={2}
+          metricKey="sqale_rating"
+          metricType="RATING"
+          value="3"
         />
-        metric.sqale_rating.name
-      </span>
-      <span
-        className="little-spacer-top small text-muted"
-      >
-        quality_gates.operator.GT.rating
-         
-        A
-      </span>
+      </div>
+      <div>
+        <span
+          className="overview-quality-gate-condition-metric little-spacer-right"
+        >
+          <IssueTypeIcon
+            className="little-spacer-right"
+            query="sqale_rating"
+          />
+          metric.sqale_rating.name
+        </span>
+        <span
+          className="little-spacer-top small text-muted"
+        >
+          quality_gates.operator.GT.rating
+           
+          A
+        </span>
+      </div>
     </div>
-  </div>
-</Link>
+  </Link>
+</li>
 `;
 
 exports[`should render correclty 5`] = `
-<Link
-  className="overview-quality-gate-condition overview-quality-gate-condition-error"
-  to={
-    Object {
-      "hash": "",
-      "pathname": "/project/issues",
-      "search": "?resolved=false&types=BUG&severities=BLOCKER%2CCRITICAL%2CMAJOR%2CMINOR&inNewCodePeriod=true&id=abcd-key",
+<li>
+  <Link
+    className="overview-quality-gate-condition overview-quality-gate-condition-error"
+    to={
+      Object {
+        "hash": "",
+        "pathname": "/project/issues",
+        "search": "?resolved=false&types=BUG&severities=BLOCKER%2CCRITICAL%2CMAJOR%2CMINOR&inNewCodePeriod=true&id=abcd-key",
+      }
     }
-  }
->
-  <div
-    className="overview-quality-gate-condition-container display-flex-center"
   >
     <div
-      className="overview-quality-gate-condition-value text-center spacer-right"
+      className="overview-quality-gate-condition-container display-flex-center"
     >
-      <Measure
-        decimals={2}
-        metricKey="new_reliability_rating"
-        metricType="RATING"
-        value="3"
-      />
-    </div>
-    <div>
-      <span
-        className="overview-quality-gate-condition-metric little-spacer-right"
+      <div
+        className="overview-quality-gate-condition-value text-center spacer-right"
       >
-        <IssueTypeIcon
-          className="little-spacer-right"
-          query="new_reliability_rating"
+        <Measure
+          decimals={2}
+          metricKey="new_reliability_rating"
+          metricType="RATING"
+          value="3"
         />
-        metric.new_reliability_rating.name
-      </span>
-      <span
-        className="little-spacer-top small text-muted"
-      >
-        quality_gates.operator.GT.rating
-         
-        A
-      </span>
+      </div>
+      <div>
+        <span
+          className="overview-quality-gate-condition-metric little-spacer-right"
+        >
+          <IssueTypeIcon
+            className="little-spacer-right"
+            query="new_reliability_rating"
+          />
+          metric.new_reliability_rating.name
+        </span>
+        <span
+          className="little-spacer-top small text-muted"
+        >
+          quality_gates.operator.GT.rating
+           
+          A
+        </span>
+      </div>
     </div>
-  </div>
-</Link>
+  </Link>
+</li>
 `;
 
 exports[`should render correclty 6`] = `
-<Link
-  className="overview-quality-gate-condition overview-quality-gate-condition-error"
-  to={
-    Object {
-      "hash": "",
-      "pathname": "/project/issues",
-      "search": "?resolved=false&types=VULNERABILITY&severities=BLOCKER%2CCRITICAL%2CMAJOR%2CMINOR&inNewCodePeriod=true&id=abcd-key",
+<li>
+  <Link
+    className="overview-quality-gate-condition overview-quality-gate-condition-error"
+    to={
+      Object {
+        "hash": "",
+        "pathname": "/project/issues",
+        "search": "?resolved=false&types=VULNERABILITY&severities=BLOCKER%2CCRITICAL%2CMAJOR%2CMINOR&inNewCodePeriod=true&id=abcd-key",
+      }
     }
-  }
->
-  <div
-    className="overview-quality-gate-condition-container display-flex-center"
   >
     <div
-      className="overview-quality-gate-condition-value text-center spacer-right"
+      className="overview-quality-gate-condition-container display-flex-center"
     >
-      <Measure
-        decimals={2}
-        metricKey="new_security_rating"
-        metricType="RATING"
-        value="3"
-      />
-    </div>
-    <div>
-      <span
-        className="overview-quality-gate-condition-metric little-spacer-right"
+      <div
+        className="overview-quality-gate-condition-value text-center spacer-right"
       >
-        <IssueTypeIcon
-          className="little-spacer-right"
-          query="new_security_rating"
+        <Measure
+          decimals={2}
+          metricKey="new_security_rating"
+          metricType="RATING"
+          value="3"
         />
-        metric.new_security_rating.name
-      </span>
-      <span
-        className="little-spacer-top small text-muted"
-      >
-        quality_gates.operator.GT.rating
-         
-        A
-      </span>
+      </div>
+      <div>
+        <span
+          className="overview-quality-gate-condition-metric little-spacer-right"
+        >
+          <IssueTypeIcon
+            className="little-spacer-right"
+            query="new_security_rating"
+          />
+          metric.new_security_rating.name
+        </span>
+        <span
+          className="little-spacer-top small text-muted"
+        >
+          quality_gates.operator.GT.rating
+           
+          A
+        </span>
+      </div>
     </div>
-  </div>
-</Link>
+  </Link>
+</li>
 `;
 
 exports[`should render correclty 7`] = `
-<Link
-  className="overview-quality-gate-condition overview-quality-gate-condition-error"
-  to={
-    Object {
-      "hash": "",
-      "pathname": "/project/issues",
-      "search": "?resolved=false&types=CODE_SMELL&inNewCodePeriod=true&id=abcd-key",
+<li>
+  <Link
+    className="overview-quality-gate-condition overview-quality-gate-condition-error"
+    to={
+      Object {
+        "hash": "",
+        "pathname": "/project/issues",
+        "search": "?resolved=false&types=CODE_SMELL&inNewCodePeriod=true&id=abcd-key",
+      }
     }
-  }
->
-  <div
-    className="overview-quality-gate-condition-container display-flex-center"
   >
     <div
-      className="overview-quality-gate-condition-value text-center spacer-right"
+      className="overview-quality-gate-condition-container display-flex-center"
     >
-      <Measure
-        decimals={2}
-        metricKey="new_maintainability_rating"
-        metricType="RATING"
-        value="3"
-      />
-    </div>
-    <div>
-      <span
-        className="overview-quality-gate-condition-metric little-spacer-right"
+      <div
+        className="overview-quality-gate-condition-value text-center spacer-right"
       >
-        <IssueTypeIcon
-          className="little-spacer-right"
-          query="new_maintainability_rating"
+        <Measure
+          decimals={2}
+          metricKey="new_maintainability_rating"
+          metricType="RATING"
+          value="3"
         />
-        metric.new_maintainability_rating.name
-      </span>
-      <span
-        className="little-spacer-top small text-muted"
-      >
-        quality_gates.operator.GT.rating
-         
-        A
-      </span>
+      </div>
+      <div>
+        <span
+          className="overview-quality-gate-condition-metric little-spacer-right"
+        >
+          <IssueTypeIcon
+            className="little-spacer-right"
+            query="new_maintainability_rating"
+          />
+          metric.new_maintainability_rating.name
+        </span>
+        <span
+          className="little-spacer-top small text-muted"
+        >
+          quality_gates.operator.GT.rating
+           
+          A
+        </span>
+      </div>
     </div>
-  </div>
-</Link>
+  </Link>
+</li>
 `;
 
 exports[`should render correclty 8`] = `
-<Link
-  className="overview-quality-gate-condition overview-quality-gate-condition-error"
-  to={
-    Object {
-      "hash": "",
-      "pathname": "/security_hotspots",
-      "search": "?id=abcd-key",
+<li>
+  <Link
+    className="overview-quality-gate-condition overview-quality-gate-condition-error"
+    to={
+      Object {
+        "hash": "",
+        "pathname": "/security_hotspots",
+        "search": "?id=abcd-key",
+      }
     }
-  }
->
-  <div
-    className="overview-quality-gate-condition-container display-flex-center"
   >
     <div
-      className="overview-quality-gate-condition-value text-center spacer-right"
+      className="overview-quality-gate-condition-container display-flex-center"
     >
-      <Measure
-        decimals={2}
-        metricKey="security_hotspots_reviewed"
-        metricType="RATING"
-        value="3"
-      />
-    </div>
-    <div>
-      <span
-        className="overview-quality-gate-condition-metric little-spacer-right"
+      <div
+        className="overview-quality-gate-condition-value text-center spacer-right"
       >
-        <IssueTypeIcon
-          className="little-spacer-right"
-          query="security_hotspots_reviewed"
+        <Measure
+          decimals={2}
+          metricKey="security_hotspots_reviewed"
+          metricType="RATING"
+          value="3"
         />
-        metric.security_hotspots_reviewed.name
-      </span>
-      <span
-        className="little-spacer-top small text-muted"
-      >
-        quality_gates.operator.GT.rating
-         
-        A
-      </span>
+      </div>
+      <div>
+        <span
+          className="overview-quality-gate-condition-metric little-spacer-right"
+        >
+          <IssueTypeIcon
+            className="little-spacer-right"
+            query="security_hotspots_reviewed"
+          />
+          metric.security_hotspots_reviewed.name
+        </span>
+        <span
+          className="little-spacer-top small text-muted"
+        >
+          quality_gates.operator.GT.rating
+           
+          A
+        </span>
+      </div>
     </div>
-  </div>
-</Link>
+  </Link>
+</li>
 `;
 
 exports[`should render correclty 9`] = `
-<Link
-  className="overview-quality-gate-condition overview-quality-gate-condition-error"
-  to={
-    Object {
-      "hash": "",
-      "pathname": "/security_hotspots",
-      "search": "?id=abcd-key&inNewCodePeriod=true",
+<li>
+  <Link
+    className="overview-quality-gate-condition overview-quality-gate-condition-error"
+    to={
+      Object {
+        "hash": "",
+        "pathname": "/security_hotspots",
+        "search": "?id=abcd-key&inNewCodePeriod=true",
+      }
     }
-  }
->
-  <div
-    className="overview-quality-gate-condition-container display-flex-center"
   >
     <div
-      className="overview-quality-gate-condition-value text-center spacer-right"
+      className="overview-quality-gate-condition-container display-flex-center"
     >
-      <Measure
-        decimals={2}
-        metricKey="new_security_hotspots_reviewed"
-        metricType="RATING"
-        value="3"
-      />
-    </div>
-    <div>
-      <span
-        className="overview-quality-gate-condition-metric little-spacer-right"
+      <div
+        className="overview-quality-gate-condition-value text-center spacer-right"
       >
-        <IssueTypeIcon
-          className="little-spacer-right"
-          query="new_security_hotspots_reviewed"
+        <Measure
+          decimals={2}
+          metricKey="new_security_hotspots_reviewed"
+          metricType="RATING"
+          value="3"
         />
-        metric.new_security_hotspots_reviewed.name
-      </span>
-      <span
-        className="little-spacer-top small text-muted"
-      >
-        quality_gates.operator.GT.rating
-         
-        A
-      </span>
+      </div>
+      <div>
+        <span
+          className="overview-quality-gate-condition-metric little-spacer-right"
+        >
+          <IssueTypeIcon
+            className="little-spacer-right"
+            query="new_security_hotspots_reviewed"
+          />
+          metric.new_security_hotspots_reviewed.name
+        </span>
+        <span
+          className="little-spacer-top small text-muted"
+        >
+          quality_gates.operator.GT.rating
+           
+          A
+        </span>
+      </div>
     </div>
-  </div>
-</Link>
+  </Link>
+</li>
 `;
 
 exports[`should work with branch 1`] = `
-<Link
-  className="overview-quality-gate-condition overview-quality-gate-condition-error"
-  to={
-    Object {
-      "hash": "",
-      "pathname": "/project/issues",
-      "search": "?resolved=false&branch=branch-6.7&types=CODE_SMELL&inNewCodePeriod=true&id=abcd-key",
+<li>
+  <Link
+    className="overview-quality-gate-condition overview-quality-gate-condition-error"
+    to={
+      Object {
+        "hash": "",
+        "pathname": "/project/issues",
+        "search": "?resolved=false&branch=branch-6.7&types=CODE_SMELL&inNewCodePeriod=true&id=abcd-key",
+      }
     }
-  }
->
-  <div
-    className="overview-quality-gate-condition-container display-flex-center"
   >
     <div
-      className="overview-quality-gate-condition-value text-center spacer-right"
+      className="overview-quality-gate-condition-container display-flex-center"
     >
-      <Measure
-        decimals={2}
-        metricKey="new_maintainability_rating"
-        metricType="RATING"
-        value="3"
-      />
-    </div>
-    <div>
-      <span
-        className="overview-quality-gate-condition-metric little-spacer-right"
+      <div
+        className="overview-quality-gate-condition-value text-center spacer-right"
       >
-        <IssueTypeIcon
-          className="little-spacer-right"
-          query="new_maintainability_rating"
+        <Measure
+          decimals={2}
+          metricKey="new_maintainability_rating"
+          metricType="RATING"
+          value="3"
         />
-        metric.new_maintainability_rating.name
-      </span>
-      <span
-        className="little-spacer-top small text-muted"
-      >
-        quality_gates.operator.GT.rating
-         
-        A
-      </span>
+      </div>
+      <div>
+        <span
+          className="overview-quality-gate-condition-metric little-spacer-right"
+        >
+          <IssueTypeIcon
+            className="little-spacer-right"
+            query="new_maintainability_rating"
+          />
+          metric.new_maintainability_rating.name
+        </span>
+        <span
+          className="little-spacer-top small text-muted"
+        >
+          quality_gates.operator.GT.rating
+           
+          A
+        </span>
+      </div>
     </div>
-  </div>
-</Link>
+  </Link>
+</li>
 `;