SONAR-12727 Conditional empty page message

server/sonar-web/public/images/filter-large.svg

@@ -0,0 +1 @@
+<svg width="80" height="83" xmlns="http://www.w3.org/2000/svg"><g fill="#236A97" fill-rule="nonzero"><path d="M79.03 3.78A4.27 4.27 0 0074.88 0H4.24A3.94 3.94 0 00.28 3.97v10.97c0 .37.09.65.37.92L31.9 52.2v29.23a1.44 1.44 0 001.38 1.39c.28 0 .56-.1.74-.19l12.73-7.93c.37-.28.64-.74.64-1.2V52.2l31.27-36.34c.18-.27.36-.55.36-.92V3.97v-.19zm-2.76 10.6L45 50.73c-.18.28-.36.56-.36.92v21.12l-9.96 6.18v-27.3c0-.36-.1-.64-.37-.92L3.04 14.4V3.97c0-.56.46-1.2 1.2-1.2h70.64c.65 0 1.3.55 1.39 1.29v10.33z"/><path d="M55.33 13.56H9.5c-.74 0-1.38.64-1.38 1.38 0 .74.64 1.38 1.38 1.38h45.83c.74 0 1.39-.64 1.39-1.38 0-.74-.65-1.38-1.39-1.38zM68.98 13.56h-7c-.74 0-1.39.64-1.39 1.38 0 .74.65 1.38 1.38 1.38h7.01c.74 0 1.39-.64 1.39-1.38 0-.74-.65-1.38-1.39-1.38z"/></g></svg>

server/sonar-web/src/main/js/apps/securityHotspots/SecurityHotspotsAppRenderer.tsx

@@ -51,6 +51,37 @@ export interface SecurityHotspotsAppRendererProps {
   securityCategories: T.StandardSecurityCategories;
 }
 
+function renderNoHotspots(filtered: boolean) {
+  return (
+    <div className="display-flex-column display-flex-center huge-spacer-top">
+      <img
+        alt={translate('hotspots.page')}
+        className="huge-spacer-top"
+        height={100}
+        src={`${getBaseUrl()}/images/${filtered ? 'filter-large' : 'hotspot-large'}.svg`}
+      />
+      <h1 className="huge-spacer-top">
+        {filtered
+          ? translate('hotspots.no_hotspots_for_filters.title')
+          : translate('hotspots.no_hotspots.title')}
+      </h1>
+      <div className="abs-width-400 text-center big-spacer-top">
+        {filtered
+          ? translate('hotspots.no_hotspots_for_filters.description')
+          : translate('hotspots.no_hotspots.description')}
+      </div>
+      {!filtered && (
+        <Link
+          className="big-spacer-top"
+          target="_blank"
+          to={{ pathname: '/documentation/user-guide/security-hotspots/' }}>
+          {translate('hotspots.learn_more')}
+        </Link>
+      )}
+    </div>
+  );
+}
+
 export default function SecurityHotspotsAppRenderer(props: SecurityHotspotsAppRendererProps) {
   const {
     branchLike,
@@ -86,24 +117,9 @@ export default function SecurityHotspotsAppRenderer(props: SecurityHotspotsAppRe
             ) : (
               <>
                 {hotspots.length === 0 ? (
-                  <div className="display-flex-column display-flex-center">
-                    <img
-                      alt={translate('hotspots.page')}
-                      className="huge-spacer-top"
-                      height={166}
-                      src={`${getBaseUrl()}/images/hotspot-large.svg`}
-                    />
-                    <h1 className="huge-spacer-top">{translate('hotspots.no_hotspots.title')}</h1>
-                    <div className="abs-width-400 text-center big-spacer-top">
-                      {translate('hotspots.no_hotspots.description')}
-                    </div>
-                    <Link
-                      className="big-spacer-top"
-                      target="_blank"
-                      to={{ pathname: '/documentation/user-guide/security-hotspots/' }}>
-                      {translate('hotspots.learn_more')}
-                    </Link>
-                  </div>
+                  renderNoHotspots(
+                    filters.assignedToMe || (filters.sinceLeakPeriod && isBranch(branchLike))
+                  )
                 ) : (
                   <div className="layout-page">
                     <div className="sidebar">

server/sonar-web/src/main/js/apps/securityHotspots/__tests__/SecurityHotspotsAppRenderer-test.tsx

@@ -29,11 +29,18 @@ import SecurityHotspotsAppRenderer, {
 
 it('should render correctly', () => {
   expect(shallowRender()).toMatchSnapshot();
+  expect(
+    shallowRender({
+      filters: { assignedToMe: true, sinceLeakPeriod: false, status: HotspotStatusFilter.TO_REVIEW }
+    })
+      .find(ScreenPositionHelper)
+      .dive()
+  ).toMatchSnapshot('no hotspots with filters');
   expect(
     shallowRender()
       .find(ScreenPositionHelper)
       .dive()
-  ).toMatchSnapshot();
+  ).toMatchSnapshot('no hotspots');
 });
 
 it('should render correctly with hotspots', () => {

server/sonar-web/src/main/js/apps/securityHotspots/__tests__/__snapshots__/SecurityHotspotsAppRenderer-test.tsx.snap

@@ -23,64 +23,6 @@ exports[`should render correctly 1`] = `
 </div>
 `;
 
-exports[`should render correctly 2`] = `
-<div>
-  <div
-    className="wrapper"
-    style={
-      Object {
-        "top": 0,
-      }
-    }
-  >
-    <Suggestions
-      suggestions="security_hotspots"
-    />
-    <HelmetWrapper
-      defer={true}
-      encodeSpecialCharacters={true}
-      title="hotspots.page"
-    />
-    <A11ySkipTarget
-      anchor="security_hotspots_main"
-    />
-    <div
-      className="display-flex-column display-flex-center"
-    >
-      <img
-        alt="hotspots.page"
-        className="huge-spacer-top"
-        height={166}
-        src="/images/hotspot-large.svg"
-      />
-      <h1
-        className="huge-spacer-top"
-      >
-        hotspots.no_hotspots.title
-      </h1>
-      <div
-        className="abs-width-400 text-center big-spacer-top"
-      >
-        hotspots.no_hotspots.description
-      </div>
-      <Link
-        className="big-spacer-top"
-        onlyActiveOnIndex={false}
-        style={Object {}}
-        target="_blank"
-        to={
-          Object {
-            "pathname": "/documentation/user-guide/security-hotspots/",
-          }
-        }
-      >
-        hotspots.learn_more
-      </Link>
-    </div>
-  </div>
-</div>
-`;
-
 exports[`should render correctly with hotspots 1`] = `
 <div>
   <div
@@ -245,3 +187,106 @@ exports[`should render correctly with hotspots 2`] = `
   </div>
 </div>
 `;
+
+exports[`should render correctly: no hotspots 1`] = `
+<div>
+  <div
+    className="wrapper"
+    style={
+      Object {
+        "top": 0,
+      }
+    }
+  >
+    <Suggestions
+      suggestions="security_hotspots"
+    />
+    <HelmetWrapper
+      defer={true}
+      encodeSpecialCharacters={true}
+      title="hotspots.page"
+    />
+    <A11ySkipTarget
+      anchor="security_hotspots_main"
+    />
+    <div
+      className="display-flex-column display-flex-center huge-spacer-top"
+    >
+      <img
+        alt="hotspots.page"
+        className="huge-spacer-top"
+        height={100}
+        src="/images/hotspot-large.svg"
+      />
+      <h1
+        className="huge-spacer-top"
+      >
+        hotspots.no_hotspots.title
+      </h1>
+      <div
+        className="abs-width-400 text-center big-spacer-top"
+      >
+        hotspots.no_hotspots.description
+      </div>
+      <Link
+        className="big-spacer-top"
+        onlyActiveOnIndex={false}
+        style={Object {}}
+        target="_blank"
+        to={
+          Object {
+            "pathname": "/documentation/user-guide/security-hotspots/",
+          }
+        }
+      >
+        hotspots.learn_more
+      </Link>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`should render correctly: no hotspots with filters 1`] = `
+<div>
+  <div
+    className="wrapper"
+    style={
+      Object {
+        "top": 0,
+      }
+    }
+  >
+    <Suggestions
+      suggestions="security_hotspots"
+    />
+    <HelmetWrapper
+      defer={true}
+      encodeSpecialCharacters={true}
+      title="hotspots.page"
+    />
+    <A11ySkipTarget
+      anchor="security_hotspots_main"
+    />
+    <div
+      className="display-flex-column display-flex-center huge-spacer-top"
+    >
+      <img
+        alt="hotspots.page"
+        className="huge-spacer-top"
+        height={100}
+        src="/images/filter-large.svg"
+      />
+      <h1
+        className="huge-spacer-top"
+      >
+        hotspots.no_hotspots_for_filters.title
+      </h1>
+      <div
+        className="abs-width-400 text-center big-spacer-top"
+      >
+        hotspots.no_hotspots_for_filters.description
+      </div>
+    </div>
+  </div>
+</div>
+`;

sonar-core/src/main/resources/org/sonar/l10n/core.properties

@@ -645,8 +645,10 @@ risk_exposure.MEDIUM=Medium
 risk_exposure.LOW=Low
 
 hotspots.page=Security Hotspots
-hotspots.no_hotspots.title=There are no Security Hotspots to review
+hotspots.no_hotspots.title=There are no Security Hotspots to review.
 hotspots.no_hotspots.description=Next time you analyse a piece of code that contains a potential security risk, it will show up here.
+hotspots.no_hotspots_for_filters.title=We couldn't find any results matching the selected criteria.
+hotspots.no_hotspots_for_filters.description=Try changing the filters to get some results.
 hotspots.learn_more=Learn more about Security Hotspots
 hotspots.list_title={0} Security Hotspots
 hotspots.list_title.TO_REVIEW={0} Security Hotspots to review