SONAR-16008 Move hotspot code to a tab

7 files changed, 745 insertions, 690 deletions

diff --git a/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotSnippetContainerRenderer.tsx b/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotSnippetContainerRenderer.tsx
index 87b83cc6610..80998643a2f 100644
--- a/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotSnippetContainerRenderer.tsx
+++ b/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotSnippetContainerRenderer.tsx
@@ -79,7 +79,7 @@ export default function HotspotSnippetContainerRenderer(
         <p className="spacer-bottom">{translate('hotspots.no_associated_lines')}</p>
       )}
       <HotspotSnippetHeader hotspot={hotspot} component={component} branchLike={branchLike} />
-      <div className="bordered big-spacer-bottom">
+      <div className="bordered">
         <DeferredSpinner className="big-spacer" loading={loading}>
           {sourceLines.length > 0 && (
             <SnippetViewer
diff --git a/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotViewerRenderer.tsx b/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotViewerRenderer.tsx
index 000f7077b2b..a46ab94816b 100644
--- a/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotViewerRenderer.tsx
+++ b/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotViewerRenderer.tsx
@@ -71,13 +71,17 @@ export function HotspotViewerRenderer(props: HotspotViewerRendererProps) {
       {hotspot && (
         <div className="big-padded hotspot-content">
           <HotspotHeader hotspot={hotspot} onUpdateHotspot={props.onUpdateHotspot} />
-          <HotspotSnippetContainer
-            branchLike={fillBranchLike(hotspot.project.branch, hotspot.project.pullRequest)}
-            component={component}
+          <HotspotViewerTabs
+            codeTabContent={
+              <HotspotSnippetContainer
+                branchLike={fillBranchLike(hotspot.project.branch, hotspot.project.pullRequest)}
+                component={component}
+                hotspot={hotspot}
+                onCommentButtonClick={props.onShowCommentForm}
+              />
+            }
             hotspot={hotspot}
-            onCommentButtonClick={props.onShowCommentForm}
           />
-          <HotspotViewerTabs hotspot={hotspot} />
           <HotspotReviewHistoryAndComments
             commentTextRef={commentTextRef}
             currentUser={currentUser}
diff --git a/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotViewerTabs.tsx b/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotViewerTabs.tsx
index 49e65656996..3b5cea5cc0a 100644
--- a/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotViewerTabs.tsx
+++ b/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotViewerTabs.tsx
@@ -19,12 +19,12 @@
  */
 import * as React from 'react';
 import BoxedTabs from '../../../components/controls/BoxedTabs';
-import Tab from '../../../components/controls/Tabs';
 import { translate } from '../../../helpers/l10n';
 import { sanitizeString } from '../../../helpers/sanitize';
 import { Hotspot } from '../../../types/security-hotspots';
 
 interface Props {
+  codeTabContent: React.ReactNode;
   hotspot: Hotspot;
 }
 
@@ -40,6 +40,7 @@ interface Tab {
 }
 
 export enum TabKeys {
+  Code = 'code',
   RiskDescription = 'risk',
   VulnerabilityDescription = 'vulnerability',
   FixRecommendation = 'fix'
@@ -73,7 +74,8 @@ export default class HotspotViewerTabs extends React.PureComponent<Props, State>
 
   computeTabs() {
     const { hotspot } = this.props;
-    return [
+
+    const descriptionTabs = [
       {
         key: TabKeys.RiskDescription,
         label: translate('hotspots.tabs.risk_description'),
@@ -89,24 +91,35 @@ export default class HotspotViewerTabs extends React.PureComponent<Props, State>
         label: translate('hotspots.tabs.fix_recommendations'),
         content: hotspot.rule.fixRecommendations || ''
       }
-    ].filter(tab => Boolean(tab.content));
+    ].filter(tab => tab.content.length > 0);
+
+    return [
+      {
+        key: TabKeys.Code,
+        label: translate('hotspots.tabs.code'),
+        content: ''
+      },
+      ...descriptionTabs
+    ];
   }
 
   render() {
+    const { codeTabContent } = this.props;
     const { tabs, currentTab } = this.state;
-    if (tabs.length === 0) {
-      return null;
-    }
 
     return (
       <>
         <BoxedTabs onSelect={this.handleSelectTabs} selected={currentTab.key} tabs={tabs} />
         <div className="bordered huge-spacer-bottom">
-          <div
-            className="markdown big-padded"
-            // eslint-disable-next-line react/no-danger
-            dangerouslySetInnerHTML={{ __html: sanitizeString(currentTab.content) }}
-          />
+          {currentTab.key === TabKeys.Code ? (
+            <div className="padded">{codeTabContent}</div>
+          ) : (
+            <div
+              className="markdown big-padded"
+              // eslint-disable-next-line react/no-danger
+              dangerouslySetInnerHTML={{ __html: sanitizeString(currentTab.content) }}
+            />
+          )}
         </div>
       </>
     );
diff --git a/server/sonar-web/src/main/js/apps/security-hotspots/components/__tests__/HotspotViewerTabs-test.tsx b/server/sonar-web/src/main/js/apps/security-hotspots/components/__tests__/HotspotViewerTabs-test.tsx
index 94e79967dd8..941b24e0364 100644
--- a/server/sonar-web/src/main/js/apps/security-hotspots/components/__tests__/HotspotViewerTabs-test.tsx
+++ b/server/sonar-web/src/main/js/apps/security-hotspots/components/__tests__/HotspotViewerTabs-test.tsx
@@ -19,7 +19,7 @@
  */
 import { shallow } from 'enzyme';
 import * as React from 'react';
-import BoxedTabs from '../../../../components/controls/BoxedTabs';
+import BoxedTabs, { BoxedTabsProps } from '../../../../components/controls/BoxedTabs';
 import { mockHotspot, mockHotspotRule } from '../../../../helpers/mocks/security-hotspots';
 import { mockUser } from '../../../../helpers/testMocks';
 import HotspotViewerTabs, { TabKeys } from '../HotspotViewerTabs';
@@ -28,7 +28,7 @@ it('should render correctly', () => {
   const wrapper = shallowRender();
   expect(wrapper).toMatchSnapshot('risk');
 
-  const onSelect = wrapper.find(BoxedTabs).prop('onSelect') as (tab: TabKeys) => void;
+  const onSelect: (tab: TabKeys) => void = wrapper.find(BoxedTabs).prop('onSelect');
 
   onSelect(TabKeys.VulnerabilityDescription);
   expect(wrapper).toMatchSnapshot('vulnerability');
@@ -46,8 +46,10 @@ it('should render correctly', () => {
           vulnerabilityDescription: undefined
         })
       })
-    }).type()
-  ).toBeNull();
+    })
+      .find<BoxedTabsProps<string>>(BoxedTabs)
+      .props().tabs
+  ).toHaveLength(1);
 
   expect(
     shallowRender({
@@ -86,14 +88,20 @@ it('should filter empty tab', () => {
 
 it('should select first tab on hotspot update', () => {
   const wrapper = shallowRender();
-  const onSelect = wrapper.find(BoxedTabs).prop('onSelect') as (tab: TabKeys) => void;
+  const onSelect: (tab: TabKeys) => void = wrapper.find(BoxedTabs).prop('onSelect');
 
   onSelect(TabKeys.VulnerabilityDescription);
   expect(wrapper.state().currentTab.key).toBe(TabKeys.VulnerabilityDescription);
   wrapper.setProps({ hotspot: mockHotspot({ key: 'new_key' }) });
-  expect(wrapper.state().currentTab.key).toBe(TabKeys.RiskDescription);
+  expect(wrapper.state().currentTab.key).toBe(TabKeys.Code);
 });
 
 function shallowRender(props?: Partial<HotspotViewerTabs['props']>) {
-  return shallow<HotspotViewerTabs>(<HotspotViewerTabs hotspot={mockHotspot()} {...props} />);
+  return shallow<HotspotViewerTabs>(
+    <HotspotViewerTabs
+      codeTabContent={<div>CodeTabContent</div>}
+      hotspot={mockHotspot()}
+      {...props}
+    />
+  );
 }
diff --git a/server/sonar-web/src/main/js/apps/security-hotspots/components/__tests__/__snapshots__/HotspotSnippetContainerRenderer-test.tsx.snap b/server/sonar-web/src/main/js/apps/security-hotspots/components/__tests__/__snapshots__/HotspotSnippetContainerRenderer-test.tsx.snap
index 344601d5eb7..5a9f5912a14 100644
--- a/server/sonar-web/src/main/js/apps/security-hotspots/components/__tests__/__snapshots__/HotspotSnippetContainerRenderer-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/security-hotspots/components/__tests__/__snapshots__/HotspotSnippetContainerRenderer-test.tsx.snap
@@ -126,7 +126,7 @@ exports[`should render correctly 1`] = `
     }
   />
   <div
-    className="bordered big-spacer-bottom"
+    className="bordered"
   >
     <DeferredSpinner
       className="big-spacer"
@@ -257,7 +257,7 @@ exports[`should render correctly: with sourcelines 1`] = `
     }
   />
   <div
-    className="bordered big-spacer-bottom"
+    className="bordered"
   >
     <DeferredSpinner
       className="big-spacer"
diff --git a/server/sonar-web/src/main/js/apps/security-hotspots/components/__tests__/__snapshots__/HotspotViewerRenderer-test.tsx.snap b/server/sonar-web/src/main/js/apps/security-hotspots/components/__tests__/__snapshots__/HotspotViewerRenderer-test.tsx.snap
index 9947b643609..7bf90466852 100644
--- a/server/sonar-web/src/main/js/apps/security-hotspots/components/__tests__/__snapshots__/HotspotViewerRenderer-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/security-hotspots/components/__tests__/__snapshots__/HotspotViewerRenderer-test.tsx.snap
@@ -97,118 +97,120 @@ exports[`should render correctly: anonymous user 1`] = `
       }
       onUpdateHotspot={[MockFunction]}
     />
-    <HotspotSnippetContainer
-      component={
-        Object {
-          "breadcrumbs": Array [],
-          "key": "my-project",
-          "name": "MyProject",
-          "qualifier": "TRK",
-          "qualityGate": Object {
-            "isDefault": true,
-            "key": "30",
-            "name": "Sonar way",
-          },
-          "qualityProfiles": Array [
-            Object {
-              "deleted": false,
-              "key": "my-qp",
-              "language": "ts",
-              "name": "Sonar way",
-            },
-          ],
-          "tags": Array [],
-        }
-      }
-      hotspot={
-        Object {
-          "assignee": "assignee",
-          "assigneeUser": Object {
-            "active": true,
-            "local": true,
-            "login": "assignee",
-            "name": "John Doe",
-          },
-          "author": "author",
-          "authorUser": Object {
-            "active": true,
-            "local": true,
-            "login": "author",
-            "name": "John Doe",
-          },
-          "canChangeStatus": true,
-          "changelog": Array [],
-          "comment": Array [],
-          "component": Object {
-            "key": "hotspot-component",
-            "longName": "Hotspot component long name",
-            "name": "Hotspot Component",
-            "path": "path/to/component",
-            "qualifier": "FIL",
-          },
-          "creationDate": "2013-05-13T17:55:41+0200",
-          "flows": Array [
-            Object {
-              "locations": Array [
+    <HotspotViewerTabs
+      codeTabContent={
+        <HotspotSnippetContainer
+          component={
+            Object {
+              "breadcrumbs": Array [],
+              "key": "my-project",
+              "name": "MyProject",
+              "qualifier": "TRK",
+              "qualityGate": Object {
+                "isDefault": true,
+                "key": "30",
+                "name": "Sonar way",
+              },
+              "qualityProfiles": Array [
                 Object {
-                  "component": "main.js",
-                  "textRange": Object {
-                    "endLine": 2,
-                    "endOffset": 2,
-                    "startLine": 1,
-                    "startOffset": 1,
-                  },
+                  "deleted": false,
+                  "key": "my-qp",
+                  "language": "ts",
+                  "name": "Sonar way",
                 },
               ],
-            },
-          ],
-          "key": "01fc972e-2a3c-433e-bcae-0bd7f88f5123",
-          "line": 142,
-          "message": "'3' is a magic number.",
-          "project": Object {
-            "key": "hotspot-component",
-            "longName": "Hotspot component long name",
-            "name": "Hotspot Component",
-            "path": "path/to/component",
-            "qualifier": "TRK",
-          },
-          "resolution": "FIXED",
-          "rule": Object {
-            "fixRecommendations": "<p>This a <strong>strong</strong> message about fixing !</p>",
-            "key": "squid:S2077",
-            "name": "That rule",
-            "riskDescription": "<p>This a <strong>strong</strong> message about risk !</p>",
-            "securityCategory": "sql-injection",
-            "vulnerabilityDescription": "<p>This a <strong>strong</strong> message about vulnerability !</p>",
-            "vulnerabilityProbability": "HIGH",
-          },
-          "status": "REVIEWED",
-          "textRange": Object {
-            "endLine": 142,
-            "endOffset": 83,
-            "startLine": 142,
-            "startOffset": 26,
-          },
-          "updateDate": "2013-05-13T17:55:42+0200",
-          "users": Array [
-            Object {
-              "active": true,
-              "local": true,
-              "login": "assignee",
-              "name": "John Doe",
-            },
-            Object {
-              "active": true,
-              "local": true,
-              "login": "author",
-              "name": "John Doe",
-            },
-          ],
-        }
+              "tags": Array [],
+            }
+          }
+          hotspot={
+            Object {
+              "assignee": "assignee",
+              "assigneeUser": Object {
+                "active": true,
+                "local": true,
+                "login": "assignee",
+                "name": "John Doe",
+              },
+              "author": "author",
+              "authorUser": Object {
+                "active": true,
+                "local": true,
+                "login": "author",
+                "name": "John Doe",
+              },
+              "canChangeStatus": true,
+              "changelog": Array [],
+              "comment": Array [],
+              "component": Object {
+                "key": "hotspot-component",
+                "longName": "Hotspot component long name",
+                "name": "Hotspot Component",
+                "path": "path/to/component",
+                "qualifier": "FIL",
+              },
+              "creationDate": "2013-05-13T17:55:41+0200",
+              "flows": Array [
+                Object {
+                  "locations": Array [
+                    Object {
+                      "component": "main.js",
+                      "textRange": Object {
+                        "endLine": 2,
+                        "endOffset": 2,
+                        "startLine": 1,
+                        "startOffset": 1,
+                      },
+                    },
+                  ],
+                },
+              ],
+              "key": "01fc972e-2a3c-433e-bcae-0bd7f88f5123",
+              "line": 142,
+              "message": "'3' is a magic number.",
+              "project": Object {
+                "key": "hotspot-component",
+                "longName": "Hotspot component long name",
+                "name": "Hotspot Component",
+                "path": "path/to/component",
+                "qualifier": "TRK",
+              },
+              "resolution": "FIXED",
+              "rule": Object {
+                "fixRecommendations": "<p>This a <strong>strong</strong> message about fixing !</p>",
+                "key": "squid:S2077",
+                "name": "That rule",
+                "riskDescription": "<p>This a <strong>strong</strong> message about risk !</p>",
+                "securityCategory": "sql-injection",
+                "vulnerabilityDescription": "<p>This a <strong>strong</strong> message about vulnerability !</p>",
+                "vulnerabilityProbability": "HIGH",
+              },
+              "status": "REVIEWED",
+              "textRange": Object {
+                "endLine": 142,
+                "endOffset": 83,
+                "startLine": 142,
+                "startOffset": 26,
+              },
+              "updateDate": "2013-05-13T17:55:42+0200",
+              "users": Array [
+                Object {
+                  "active": true,
+                  "local": true,
+                  "login": "assignee",
+                  "name": "John Doe",
+                },
+                Object {
+                  "active": true,
+                  "local": true,
+                  "login": "author",
+                  "name": "John Doe",
+                },
+              ],
+            }
+          }
+          onCommentButtonClick={[MockFunction]}
+        />
       }
-      onCommentButtonClick={[MockFunction]}
-    />
-    <HotspotViewerTabs
       hotspot={
         Object {
           "assignee": "assignee",
@@ -496,118 +498,120 @@ exports[`should render correctly: assignee without name 1`] = `
       }
       onUpdateHotspot={[MockFunction]}
     />
-    <HotspotSnippetContainer
-      component={
-        Object {
-          "breadcrumbs": Array [],
-          "key": "my-project",
-          "name": "MyProject",
-          "qualifier": "TRK",
-          "qualityGate": Object {
-            "isDefault": true,
-            "key": "30",
-            "name": "Sonar way",
-          },
-          "qualityProfiles": Array [
-            Object {
-              "deleted": false,
-              "key": "my-qp",
-              "language": "ts",
-              "name": "Sonar way",
-            },
-          ],
-          "tags": Array [],
-        }
-      }
-      hotspot={
-        Object {
-          "assignee": "assignee",
-          "assigneeUser": Object {
-            "active": true,
-            "local": true,
-            "login": "assignee_login",
-            "name": undefined,
-          },
-          "author": "author",
-          "authorUser": Object {
-            "active": true,
-            "local": true,
-            "login": "author",
-            "name": "John Doe",
-          },
-          "canChangeStatus": true,
-          "changelog": Array [],
-          "comment": Array [],
-          "component": Object {
-            "key": "hotspot-component",
-            "longName": "Hotspot component long name",
-            "name": "Hotspot Component",
-            "path": "path/to/component",
-            "qualifier": "FIL",
-          },
-          "creationDate": "2013-05-13T17:55:41+0200",
-          "flows": Array [
-            Object {
-              "locations": Array [
+    <HotspotViewerTabs
+      codeTabContent={
+        <HotspotSnippetContainer
+          component={
+            Object {
+              "breadcrumbs": Array [],
+              "key": "my-project",
+              "name": "MyProject",
+              "qualifier": "TRK",
+              "qualityGate": Object {
+                "isDefault": true,
+                "key": "30",
+                "name": "Sonar way",
+              },
+              "qualityProfiles": Array [
                 Object {
-                  "component": "main.js",
-                  "textRange": Object {
-                    "endLine": 2,
-                    "endOffset": 2,
-                    "startLine": 1,
-                    "startOffset": 1,
-                  },
+                  "deleted": false,
+                  "key": "my-qp",
+                  "language": "ts",
+                  "name": "Sonar way",
                 },
               ],
-            },
-          ],
-          "key": "01fc972e-2a3c-433e-bcae-0bd7f88f5123",
-          "line": 142,
-          "message": "'3' is a magic number.",
-          "project": Object {
-            "key": "hotspot-component",
-            "longName": "Hotspot component long name",
-            "name": "Hotspot Component",
-            "path": "path/to/component",
-            "qualifier": "TRK",
-          },
-          "resolution": "FIXED",
-          "rule": Object {
-            "fixRecommendations": "<p>This a <strong>strong</strong> message about fixing !</p>",
-            "key": "squid:S2077",
-            "name": "That rule",
-            "riskDescription": "<p>This a <strong>strong</strong> message about risk !</p>",
-            "securityCategory": "sql-injection",
-            "vulnerabilityDescription": "<p>This a <strong>strong</strong> message about vulnerability !</p>",
-            "vulnerabilityProbability": "HIGH",
-          },
-          "status": "REVIEWED",
-          "textRange": Object {
-            "endLine": 142,
-            "endOffset": 83,
-            "startLine": 142,
-            "startOffset": 26,
-          },
-          "updateDate": "2013-05-13T17:55:42+0200",
-          "users": Array [
-            Object {
-              "active": true,
-              "local": true,
-              "login": "assignee",
-              "name": "John Doe",
-            },
-            Object {
-              "active": true,
-              "local": true,
-              "login": "author",
-              "name": "John Doe",
-            },
-          ],
-        }
+              "tags": Array [],
+            }
+          }
+          hotspot={
+            Object {
+              "assignee": "assignee",
+              "assigneeUser": Object {
+                "active": true,
+                "local": true,
+                "login": "assignee_login",
+                "name": undefined,
+              },
+              "author": "author",
+              "authorUser": Object {
+                "active": true,
+                "local": true,
+                "login": "author",
+                "name": "John Doe",
+              },
+              "canChangeStatus": true,
+              "changelog": Array [],
+              "comment": Array [],
+              "component": Object {
+                "key": "hotspot-component",
+                "longName": "Hotspot component long name",
+                "name": "Hotspot Component",
+                "path": "path/to/component",
+                "qualifier": "FIL",
+              },
+              "creationDate": "2013-05-13T17:55:41+0200",
+              "flows": Array [
+                Object {
+                  "locations": Array [
+                    Object {
+                      "component": "main.js",
+                      "textRange": Object {
+                        "endLine": 2,
+                        "endOffset": 2,
+                        "startLine": 1,
+                        "startOffset": 1,
+                      },
+                    },
+                  ],
+                },
+              ],
+              "key": "01fc972e-2a3c-433e-bcae-0bd7f88f5123",
+              "line": 142,
+              "message": "'3' is a magic number.",
+              "project": Object {
+                "key": "hotspot-component",
+                "longName": "Hotspot component long name",
+                "name": "Hotspot Component",
+                "path": "path/to/component",
+                "qualifier": "TRK",
+              },
+              "resolution": "FIXED",
+              "rule": Object {
+                "fixRecommendations": "<p>This a <strong>strong</strong> message about fixing !</p>",
+                "key": "squid:S2077",
+                "name": "That rule",
+                "riskDescription": "<p>This a <strong>strong</strong> message about risk !</p>",
+                "securityCategory": "sql-injection",
+                "vulnerabilityDescription": "<p>This a <strong>strong</strong> message about vulnerability !</p>",
+                "vulnerabilityProbability": "HIGH",
+              },
+              "status": "REVIEWED",
+              "textRange": Object {
+                "endLine": 142,
+                "endOffset": 83,
+                "startLine": 142,
+                "startOffset": 26,
+              },
+              "updateDate": "2013-05-13T17:55:42+0200",
+              "users": Array [
+                Object {
+                  "active": true,
+                  "local": true,
+                  "login": "assignee",
+                  "name": "John Doe",
+                },
+                Object {
+                  "active": true,
+                  "local": true,
+                  "login": "author",
+                  "name": "John Doe",
+                },
+              ],
+            }
+          }
+          onCommentButtonClick={[MockFunction]}
+        />
       }
-      onCommentButtonClick={[MockFunction]}
-    />
-    <HotspotViewerTabs
       hotspot={
         Object {
           "assignee": "assignee",
@@ -895,118 +899,120 @@ exports[`should render correctly: default 1`] = `
       }
       onUpdateHotspot={[MockFunction]}
     />
-    <HotspotSnippetContainer
-      component={
-        Object {
-          "breadcrumbs": Array [],
-          "key": "my-project",
-          "name": "MyProject",
-          "qualifier": "TRK",
-          "qualityGate": Object {
-            "isDefault": true,
-            "key": "30",
-            "name": "Sonar way",
-          },
-          "qualityProfiles": Array [
-            Object {
-              "deleted": false,
-              "key": "my-qp",
-              "language": "ts",
-              "name": "Sonar way",
-            },
-          ],
-          "tags": Array [],
-        }
-      }
-      hotspot={
-        Object {
-          "assignee": "assignee",
-          "assigneeUser": Object {
-            "active": true,
-            "local": true,
-            "login": "assignee",
-            "name": "John Doe",
-          },
-          "author": "author",
-          "authorUser": Object {
-            "active": true,
-            "local": true,
-            "login": "author",
-            "name": "John Doe",
-          },
-          "canChangeStatus": true,
-          "changelog": Array [],
-          "comment": Array [],
-          "component": Object {
-            "key": "hotspot-component",
-            "longName": "Hotspot component long name",
-            "name": "Hotspot Component",
-            "path": "path/to/component",
-            "qualifier": "FIL",
-          },
-          "creationDate": "2013-05-13T17:55:41+0200",
-          "flows": Array [
-            Object {
-              "locations": Array [
+    <HotspotViewerTabs
+      codeTabContent={
+        <HotspotSnippetContainer
+          component={
+            Object {
+              "breadcrumbs": Array [],
+              "key": "my-project",
+              "name": "MyProject",
+              "qualifier": "TRK",
+              "qualityGate": Object {
+                "isDefault": true,
+                "key": "30",
+                "name": "Sonar way",
+              },
+              "qualityProfiles": Array [
                 Object {
-                  "component": "main.js",
-                  "textRange": Object {
-                    "endLine": 2,
-                    "endOffset": 2,
-                    "startLine": 1,
-                    "startOffset": 1,
-                  },
+                  "deleted": false,
+                  "key": "my-qp",
+                  "language": "ts",
+                  "name": "Sonar way",
                 },
               ],
-            },
-          ],
-          "key": "01fc972e-2a3c-433e-bcae-0bd7f88f5123",
-          "line": 142,
-          "message": "'3' is a magic number.",
-          "project": Object {
-            "key": "hotspot-component",
-            "longName": "Hotspot component long name",
-            "name": "Hotspot Component",
-            "path": "path/to/component",
-            "qualifier": "TRK",
-          },
-          "resolution": "FIXED",
-          "rule": Object {
-            "fixRecommendations": "<p>This a <strong>strong</strong> message about fixing !</p>",
-            "key": "squid:S2077",
-            "name": "That rule",
-            "riskDescription": "<p>This a <strong>strong</strong> message about risk !</p>",
-            "securityCategory": "sql-injection",
-            "vulnerabilityDescription": "<p>This a <strong>strong</strong> message about vulnerability !</p>",
-            "vulnerabilityProbability": "HIGH",
-          },
-          "status": "REVIEWED",
-          "textRange": Object {
-            "endLine": 142,
-            "endOffset": 83,
-            "startLine": 142,
-            "startOffset": 26,
-          },
-          "updateDate": "2013-05-13T17:55:42+0200",
-          "users": Array [
-            Object {
-              "active": true,
-              "local": true,
-              "login": "assignee",
-              "name": "John Doe",
-            },
-            Object {
-              "active": true,
-              "local": true,
-              "login": "author",
-              "name": "John Doe",
-            },
-          ],
-        }
+              "tags": Array [],
+            }
+          }
+          hotspot={
+            Object {
+              "assignee": "assignee",
+              "assigneeUser": Object {
+                "active": true,
+                "local": true,
+                "login": "assignee",
+                "name": "John Doe",
+              },
+              "author": "author",
+              "authorUser": Object {
+                "active": true,
+                "local": true,
+                "login": "author",
+                "name": "John Doe",
+              },
+              "canChangeStatus": true,
+              "changelog": Array [],
+              "comment": Array [],
+              "component": Object {
+                "key": "hotspot-component",
+                "longName": "Hotspot component long name",
+                "name": "Hotspot Component",
+                "path": "path/to/component",
+                "qualifier": "FIL",
+              },
+              "creationDate": "2013-05-13T17:55:41+0200",
+              "flows": Array [
+                Object {
+                  "locations": Array [
+                    Object {
+                      "component": "main.js",
+                      "textRange": Object {
+                        "endLine": 2,
+                        "endOffset": 2,
+                        "startLine": 1,
+                        "startOffset": 1,
+                      },
+                    },
+                  ],
+                },
+              ],
+              "key": "01fc972e-2a3c-433e-bcae-0bd7f88f5123",
+              "line": 142,
+              "message": "'3' is a magic number.",
+              "project": Object {
+                "key": "hotspot-component",
+                "longName": "Hotspot component long name",
+                "name": "Hotspot Component",
+                "path": "path/to/component",
+                "qualifier": "TRK",
+              },
+              "resolution": "FIXED",
+              "rule": Object {
+                "fixRecommendations": "<p>This a <strong>strong</strong> message about fixing !</p>",
+                "key": "squid:S2077",
+                "name": "That rule",
+                "riskDescription": "<p>This a <strong>strong</strong> message about risk !</p>",
+                "securityCategory": "sql-injection",
+                "vulnerabilityDescription": "<p>This a <strong>strong</strong> message about vulnerability !</p>",
+                "vulnerabilityProbability": "HIGH",
+              },
+              "status": "REVIEWED",
+              "textRange": Object {
+                "endLine": 142,
+                "endOffset": 83,
+                "startLine": 142,
+                "startOffset": 26,
+              },
+              "updateDate": "2013-05-13T17:55:42+0200",
+              "users": Array [
+                Object {
+                  "active": true,
+                  "local": true,
+                  "login": "assignee",
+                  "name": "John Doe",
+                },
+                Object {
+                  "active": true,
+                  "local": true,
+                  "login": "author",
+                  "name": "John Doe",
+                },
+              ],
+            }
+          }
+          onCommentButtonClick={[MockFunction]}
+        />
       }
-      onCommentButtonClick={[MockFunction]}
-    />
-    <HotspotViewerTabs
       hotspot={
         Object {
           "assignee": "assignee",
@@ -1294,118 +1300,120 @@ exports[`should render correctly: deleted assignee 1`] = `
       }
       onUpdateHotspot={[MockFunction]}
     />
-    <HotspotSnippetContainer
-      component={
-        Object {
-          "breadcrumbs": Array [],
-          "key": "my-project",
-          "name": "MyProject",
-          "qualifier": "TRK",
-          "qualityGate": Object {
-            "isDefault": true,
-            "key": "30",
-            "name": "Sonar way",
-          },
-          "qualityProfiles": Array [
-            Object {
-              "deleted": false,
-              "key": "my-qp",
-              "language": "ts",
-              "name": "Sonar way",
-            },
-          ],
-          "tags": Array [],
-        }
-      }
-      hotspot={
-        Object {
-          "assignee": "assignee",
-          "assigneeUser": Object {
-            "active": false,
-            "local": true,
-            "login": "john.doe",
-            "name": "John Doe",
-          },
-          "author": "author",
-          "authorUser": Object {
-            "active": true,
-            "local": true,
-            "login": "author",
-            "name": "John Doe",
-          },
-          "canChangeStatus": true,
-          "changelog": Array [],
-          "comment": Array [],
-          "component": Object {
-            "key": "hotspot-component",
-            "longName": "Hotspot component long name",
-            "name": "Hotspot Component",
-            "path": "path/to/component",
-            "qualifier": "FIL",
-          },
-          "creationDate": "2013-05-13T17:55:41+0200",
-          "flows": Array [
-            Object {
-              "locations": Array [
+    <HotspotViewerTabs
+      codeTabContent={
+        <HotspotSnippetContainer
+          component={
+            Object {
+              "breadcrumbs": Array [],
+              "key": "my-project",
+              "name": "MyProject",
+              "qualifier": "TRK",
+              "qualityGate": Object {
+                "isDefault": true,
+                "key": "30",
+                "name": "Sonar way",
+              },
+              "qualityProfiles": Array [
                 Object {
-                  "component": "main.js",
-                  "textRange": Object {
-                    "endLine": 2,
-                    "endOffset": 2,
-                    "startLine": 1,
-                    "startOffset": 1,
-                  },
+                  "deleted": false,
+                  "key": "my-qp",
+                  "language": "ts",
+                  "name": "Sonar way",
                 },
               ],
-            },
-          ],
-          "key": "01fc972e-2a3c-433e-bcae-0bd7f88f5123",
-          "line": 142,
-          "message": "'3' is a magic number.",
-          "project": Object {
-            "key": "hotspot-component",
-            "longName": "Hotspot component long name",
-            "name": "Hotspot Component",
-            "path": "path/to/component",
-            "qualifier": "TRK",
-          },
-          "resolution": "FIXED",
-          "rule": Object {
-            "fixRecommendations": "<p>This a <strong>strong</strong> message about fixing !</p>",
-            "key": "squid:S2077",
-            "name": "That rule",
-            "riskDescription": "<p>This a <strong>strong</strong> message about risk !</p>",
-            "securityCategory": "sql-injection",
-            "vulnerabilityDescription": "<p>This a <strong>strong</strong> message about vulnerability !</p>",
-            "vulnerabilityProbability": "HIGH",
-          },
-          "status": "REVIEWED",
-          "textRange": Object {
-            "endLine": 142,
-            "endOffset": 83,
-            "startLine": 142,
-            "startOffset": 26,
-          },
-          "updateDate": "2013-05-13T17:55:42+0200",
-          "users": Array [
-            Object {
-              "active": true,
-              "local": true,
-              "login": "assignee",
-              "name": "John Doe",
-            },
-            Object {
-              "active": true,
-              "local": true,
-              "login": "author",
-              "name": "John Doe",
-            },
-          ],
-        }
+              "tags": Array [],
+            }
+          }
+          hotspot={
+            Object {
+              "assignee": "assignee",
+              "assigneeUser": Object {
+                "active": false,
+                "local": true,
+                "login": "john.doe",
+                "name": "John Doe",
+              },
+              "author": "author",
+              "authorUser": Object {
+                "active": true,
+                "local": true,
+                "login": "author",
+                "name": "John Doe",
+              },
+              "canChangeStatus": true,
+              "changelog": Array [],
+              "comment": Array [],
+              "component": Object {
+                "key": "hotspot-component",
+                "longName": "Hotspot component long name",
+                "name": "Hotspot Component",
+                "path": "path/to/component",
+                "qualifier": "FIL",
+              },
+              "creationDate": "2013-05-13T17:55:41+0200",
+              "flows": Array [
+                Object {
+                  "locations": Array [
+                    Object {
+                      "component": "main.js",
+                      "textRange": Object {
+                        "endLine": 2,
+                        "endOffset": 2,
+                        "startLine": 1,
+                        "startOffset": 1,
+                      },
+                    },
+                  ],
+                },
+              ],
+              "key": "01fc972e-2a3c-433e-bcae-0bd7f88f5123",
+              "line": 142,
+              "message": "'3' is a magic number.",
+              "project": Object {
+                "key": "hotspot-component",
+                "longName": "Hotspot component long name",
+                "name": "Hotspot Component",
+                "path": "path/to/component",
+                "qualifier": "TRK",
+              },
+              "resolution": "FIXED",
+              "rule": Object {
+                "fixRecommendations": "<p>This a <strong>strong</strong> message about fixing !</p>",
+                "key": "squid:S2077",
+                "name": "That rule",
+                "riskDescription": "<p>This a <strong>strong</strong> message about risk !</p>",
+                "securityCategory": "sql-injection",
+                "vulnerabilityDescription": "<p>This a <strong>strong</strong> message about vulnerability !</p>",
+                "vulnerabilityProbability": "HIGH",
+              },
+              "status": "REVIEWED",
+              "textRange": Object {
+                "endLine": 142,
+                "endOffset": 83,
+                "startLine": 142,
+                "startOffset": 26,
+              },
+              "updateDate": "2013-05-13T17:55:42+0200",
+              "users": Array [
+                Object {
+                  "active": true,
+                  "local": true,
+                  "login": "assignee",
+                  "name": "John Doe",
+                },
+                Object {
+                  "active": true,
+                  "local": true,
+                  "login": "author",
+                  "name": "John Doe",
+                },
+              ],
+            }
+          }
+          onCommentButtonClick={[MockFunction]}
+        />
       }
-      onCommentButtonClick={[MockFunction]}
-    />
-    <HotspotViewerTabs
       hotspot={
         Object {
           "assignee": "assignee",
@@ -1706,118 +1714,120 @@ exports[`should render correctly: show success modal 1`] = `
       }
       onUpdateHotspot={[MockFunction]}
     />
-    <HotspotSnippetContainer
-      component={
-        Object {
-          "breadcrumbs": Array [],
-          "key": "my-project",
-          "name": "MyProject",
-          "qualifier": "TRK",
-          "qualityGate": Object {
-            "isDefault": true,
-            "key": "30",
-            "name": "Sonar way",
-          },
-          "qualityProfiles": Array [
-            Object {
-              "deleted": false,
-              "key": "my-qp",
-              "language": "ts",
-              "name": "Sonar way",
-            },
-          ],
-          "tags": Array [],
-        }
-      }
-      hotspot={
-        Object {
-          "assignee": "assignee",
-          "assigneeUser": Object {
-            "active": true,
-            "local": true,
-            "login": "assignee",
-            "name": "John Doe",
-          },
-          "author": "author",
-          "authorUser": Object {
-            "active": true,
-            "local": true,
-            "login": "author",
-            "name": "John Doe",
-          },
-          "canChangeStatus": true,
-          "changelog": Array [],
-          "comment": Array [],
-          "component": Object {
-            "key": "hotspot-component",
-            "longName": "Hotspot component long name",
-            "name": "Hotspot Component",
-            "path": "path/to/component",
-            "qualifier": "FIL",
-          },
-          "creationDate": "2013-05-13T17:55:41+0200",
-          "flows": Array [
-            Object {
-              "locations": Array [
+    <HotspotViewerTabs
+      codeTabContent={
+        <HotspotSnippetContainer
+          component={
+            Object {
+              "breadcrumbs": Array [],
+              "key": "my-project",
+              "name": "MyProject",
+              "qualifier": "TRK",
+              "qualityGate": Object {
+                "isDefault": true,
+                "key": "30",
+                "name": "Sonar way",
+              },
+              "qualityProfiles": Array [
                 Object {
-                  "component": "main.js",
-                  "textRange": Object {
-                    "endLine": 2,
-                    "endOffset": 2,
-                    "startLine": 1,
-                    "startOffset": 1,
-                  },
+                  "deleted": false,
+                  "key": "my-qp",
+                  "language": "ts",
+                  "name": "Sonar way",
                 },
               ],
-            },
-          ],
-          "key": "01fc972e-2a3c-433e-bcae-0bd7f88f5123",
-          "line": 142,
-          "message": "'3' is a magic number.",
-          "project": Object {
-            "key": "hotspot-component",
-            "longName": "Hotspot component long name",
-            "name": "Hotspot Component",
-            "path": "path/to/component",
-            "qualifier": "TRK",
-          },
-          "resolution": "FIXED",
-          "rule": Object {
-            "fixRecommendations": "<p>This a <strong>strong</strong> message about fixing !</p>",
-            "key": "squid:S2077",
-            "name": "That rule",
-            "riskDescription": "<p>This a <strong>strong</strong> message about risk !</p>",
-            "securityCategory": "sql-injection",
-            "vulnerabilityDescription": "<p>This a <strong>strong</strong> message about vulnerability !</p>",
-            "vulnerabilityProbability": "HIGH",
-          },
-          "status": "REVIEWED",
-          "textRange": Object {
-            "endLine": 142,
-            "endOffset": 83,
-            "startLine": 142,
-            "startOffset": 26,
-          },
-          "updateDate": "2013-05-13T17:55:42+0200",
-          "users": Array [
-            Object {
-              "active": true,
-              "local": true,
-              "login": "assignee",
-              "name": "John Doe",
-            },
-            Object {
-              "active": true,
-              "local": true,
-              "login": "author",
-              "name": "John Doe",
-            },
-          ],
-        }
+              "tags": Array [],
+            }
+          }
+          hotspot={
+            Object {
+              "assignee": "assignee",
+              "assigneeUser": Object {
+                "active": true,
+                "local": true,
+                "login": "assignee",
+                "name": "John Doe",
+              },
+              "author": "author",
+              "authorUser": Object {
+                "active": true,
+                "local": true,
+                "login": "author",
+                "name": "John Doe",
+              },
+              "canChangeStatus": true,
+              "changelog": Array [],
+              "comment": Array [],
+              "component": Object {
+                "key": "hotspot-component",
+                "longName": "Hotspot component long name",
+                "name": "Hotspot Component",
+                "path": "path/to/component",
+                "qualifier": "FIL",
+              },
+              "creationDate": "2013-05-13T17:55:41+0200",
+              "flows": Array [
+                Object {
+                  "locations": Array [
+                    Object {
+                      "component": "main.js",
+                      "textRange": Object {
+                        "endLine": 2,
+                        "endOffset": 2,
+                        "startLine": 1,
+                        "startOffset": 1,
+                      },
+                    },
+                  ],
+                },
+              ],
+              "key": "01fc972e-2a3c-433e-bcae-0bd7f88f5123",
+              "line": 142,
+              "message": "'3' is a magic number.",
+              "project": Object {
+                "key": "hotspot-component",
+                "longName": "Hotspot component long name",
+                "name": "Hotspot Component",
+                "path": "path/to/component",
+                "qualifier": "TRK",
+              },
+              "resolution": "FIXED",
+              "rule": Object {
+                "fixRecommendations": "<p>This a <strong>strong</strong> message about fixing !</p>",
+                "key": "squid:S2077",
+                "name": "That rule",
+                "riskDescription": "<p>This a <strong>strong</strong> message about risk !</p>",
+                "securityCategory": "sql-injection",
+                "vulnerabilityDescription": "<p>This a <strong>strong</strong> message about vulnerability !</p>",
+                "vulnerabilityProbability": "HIGH",
+              },
+              "status": "REVIEWED",
+              "textRange": Object {
+                "endLine": 142,
+                "endOffset": 83,
+                "startLine": 142,
+                "startOffset": 26,
+              },
+              "updateDate": "2013-05-13T17:55:42+0200",
+              "users": Array [
+                Object {
+                  "active": true,
+                  "local": true,
+                  "login": "assignee",
+                  "name": "John Doe",
+                },
+                Object {
+                  "active": true,
+                  "local": true,
+                  "login": "author",
+                  "name": "John Doe",
+                },
+              ],
+            }
+          }
+          onCommentButtonClick={[MockFunction]}
+        />
       }
-      onCommentButtonClick={[MockFunction]}
-    />
-    <HotspotViewerTabs
       hotspot={
         Object {
           "assignee": "assignee",
@@ -2105,118 +2115,120 @@ exports[`should render correctly: unassigned 1`] = `
       }
       onUpdateHotspot={[MockFunction]}
     />
-    <HotspotSnippetContainer
-      component={
-        Object {
-          "breadcrumbs": Array [],
-          "key": "my-project",
-          "name": "MyProject",
-          "qualifier": "TRK",
-          "qualityGate": Object {
-            "isDefault": true,
-            "key": "30",
-            "name": "Sonar way",
-          },
-          "qualityProfiles": Array [
-            Object {
-              "deleted": false,
-              "key": "my-qp",
-              "language": "ts",
-              "name": "Sonar way",
-            },
-          ],
-          "tags": Array [],
-        }
-      }
-      hotspot={
-        Object {
-          "assignee": undefined,
-          "assigneeUser": Object {
-            "active": true,
-            "local": true,
-            "login": "assignee",
-            "name": "John Doe",
-          },
-          "author": "author",
-          "authorUser": Object {
-            "active": true,
-            "local": true,
-            "login": "author",
-            "name": "John Doe",
-          },
-          "canChangeStatus": true,
-          "changelog": Array [],
-          "comment": Array [],
-          "component": Object {
-            "key": "hotspot-component",
-            "longName": "Hotspot component long name",
-            "name": "Hotspot Component",
-            "path": "path/to/component",
-            "qualifier": "FIL",
-          },
-          "creationDate": "2013-05-13T17:55:41+0200",
-          "flows": Array [
-            Object {
-              "locations": Array [
+    <HotspotViewerTabs
+      codeTabContent={
+        <HotspotSnippetContainer
+          component={
+            Object {
+              "breadcrumbs": Array [],
+              "key": "my-project",
+              "name": "MyProject",
+              "qualifier": "TRK",
+              "qualityGate": Object {
+                "isDefault": true,
+                "key": "30",
+                "name": "Sonar way",
+              },
+              "qualityProfiles": Array [
                 Object {
-                  "component": "main.js",
-                  "textRange": Object {
-                    "endLine": 2,
-                    "endOffset": 2,
-                    "startLine": 1,
-                    "startOffset": 1,
-                  },
+                  "deleted": false,
+                  "key": "my-qp",
+                  "language": "ts",
+                  "name": "Sonar way",
                 },
               ],
-            },
-          ],
-          "key": "01fc972e-2a3c-433e-bcae-0bd7f88f5123",
-          "line": 142,
-          "message": "'3' is a magic number.",
-          "project": Object {
-            "key": "hotspot-component",
-            "longName": "Hotspot component long name",
-            "name": "Hotspot Component",
-            "path": "path/to/component",
-            "qualifier": "TRK",
-          },
-          "resolution": "FIXED",
-          "rule": Object {
-            "fixRecommendations": "<p>This a <strong>strong</strong> message about fixing !</p>",
-            "key": "squid:S2077",
-            "name": "That rule",
-            "riskDescription": "<p>This a <strong>strong</strong> message about risk !</p>",
-            "securityCategory": "sql-injection",
-            "vulnerabilityDescription": "<p>This a <strong>strong</strong> message about vulnerability !</p>",
-            "vulnerabilityProbability": "HIGH",
-          },
-          "status": "REVIEWED",
-          "textRange": Object {
-            "endLine": 142,
-            "endOffset": 83,
-            "startLine": 142,
-            "startOffset": 26,
-          },
-          "updateDate": "2013-05-13T17:55:42+0200",
-          "users": Array [
-            Object {
-              "active": true,
-              "local": true,
-              "login": "assignee",
-              "name": "John Doe",
-            },
-            Object {
-              "active": true,
-              "local": true,
-              "login": "author",
-              "name": "John Doe",
-            },
-          ],
-        }
+              "tags": Array [],
+            }
+          }
+          hotspot={
+            Object {
+              "assignee": undefined,
+              "assigneeUser": Object {
+                "active": true,
+                "local": true,
+                "login": "assignee",
+                "name": "John Doe",
+              },
+              "author": "author",
+              "authorUser": Object {
+                "active": true,
+                "local": true,
+                "login": "author",
+                "name": "John Doe",
+              },
+              "canChangeStatus": true,
+              "changelog": Array [],
+              "comment": Array [],
+              "component": Object {
+                "key": "hotspot-component",
+                "longName": "Hotspot component long name",
+                "name": "Hotspot Component",
+                "path": "path/to/component",
+                "qualifier": "FIL",
+              },
+              "creationDate": "2013-05-13T17:55:41+0200",
+              "flows": Array [
+                Object {
+                  "locations": Array [
+                    Object {
+                      "component": "main.js",
+                      "textRange": Object {
+                        "endLine": 2,
+                        "endOffset": 2,
+                        "startLine": 1,
+                        "startOffset": 1,
+                      },
+                    },
+                  ],
+                },
+              ],
+              "key": "01fc972e-2a3c-433e-bcae-0bd7f88f5123",
+              "line": 142,
+              "message": "'3' is a magic number.",
+              "project": Object {
+                "key": "hotspot-component",
+                "longName": "Hotspot component long name",
+                "name": "Hotspot Component",
+                "path": "path/to/component",
+                "qualifier": "TRK",
+              },
+              "resolution": "FIXED",
+              "rule": Object {
+                "fixRecommendations": "<p>This a <strong>strong</strong> message about fixing !</p>",
+                "key": "squid:S2077",
+                "name": "That rule",
+                "riskDescription": "<p>This a <strong>strong</strong> message about risk !</p>",
+                "securityCategory": "sql-injection",
+                "vulnerabilityDescription": "<p>This a <strong>strong</strong> message about vulnerability !</p>",
+                "vulnerabilityProbability": "HIGH",
+              },
+              "status": "REVIEWED",
+              "textRange": Object {
+                "endLine": 142,
+                "endOffset": 83,
+                "startLine": 142,
+                "startOffset": 26,
+              },
+              "updateDate": "2013-05-13T17:55:42+0200",
+              "users": Array [
+                Object {
+                  "active": true,
+                  "local": true,
+                  "login": "assignee",
+                  "name": "John Doe",
+                },
+                Object {
+                  "active": true,
+                  "local": true,
+                  "login": "author",
+                  "name": "John Doe",
+                },
+              ],
+            }
+          }
+          onCommentButtonClick={[MockFunction]}
+        />
       }
-      onCommentButtonClick={[MockFunction]}
-    />
-    <HotspotViewerTabs
       hotspot={
         Object {
           "assignee": undefined,
diff --git a/server/sonar-web/src/main/js/apps/security-hotspots/components/__tests__/__snapshots__/HotspotViewerTabs-test.tsx.snap b/server/sonar-web/src/main/js/apps/security-hotspots/components/__tests__/__snapshots__/HotspotViewerTabs-test.tsx.snap
index e6aa9f51182..b0d75c4fc30 100644
--- a/server/sonar-web/src/main/js/apps/security-hotspots/components/__tests__/__snapshots__/HotspotViewerTabs-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/security-hotspots/components/__tests__/__snapshots__/HotspotViewerTabs-test.tsx.snap
@@ -8,6 +8,11 @@ exports[`should render correctly: fix 1`] = `
     tabs={
       Array [
         Object {
+          "content": "",
+          "key": "code",
+          "label": "hotspots.tabs.code",
+        },
+        Object {
           "content": "<p>This a <strong>strong</strong> message about risk !</p>",
           "key": "risk",
           "label": "hotspots.tabs.risk_description",
@@ -44,10 +49,15 @@ exports[`should render correctly: risk 1`] = `
 <Fragment>
   <BoxedTabs
     onSelect={[Function]}
-    selected="risk"
+    selected="code"
     tabs={
       Array [
         Object {
+          "content": "",
+          "key": "code",
+          "label": "hotspots.tabs.code",
+        },
+        Object {
           "content": "<p>This a <strong>strong</strong> message about risk !</p>",
           "key": "risk",
           "label": "hotspots.tabs.risk_description",
@@ -69,13 +79,12 @@ exports[`should render correctly: risk 1`] = `
     className="bordered huge-spacer-bottom"
   >
     <div
-      className="markdown big-padded"
-      dangerouslySetInnerHTML={
-        Object {
-          "__html": "<p>This a <strong>strong</strong> message about risk !</p>",
-        }
-      }
-    />
+      className="padded"
+    >
+      <div>
+        CodeTabContent
+      </div>
+    </div>
   </div>
 </Fragment>
 `;
@@ -88,6 +97,11 @@ exports[`should render correctly: vulnerability 1`] = `
     tabs={
       Array [
         Object {
+          "content": "",
+          "key": "code",
+          "label": "hotspots.tabs.code",
+        },
+        Object {
           "content": "<p>This a <strong>strong</strong> message about risk !</p>",
           "key": "risk",
           "label": "hotspots.tabs.risk_description",
@@ -124,10 +138,15 @@ exports[`should render correctly: with comments or changelog element 1`] = `
 <Fragment>
   <BoxedTabs
     onSelect={[Function]}
-    selected="risk"
+    selected="code"
     tabs={
       Array [
         Object {
+          "content": "",
+          "key": "code",
+          "label": "hotspots.tabs.code",
+        },
+        Object {
           "content": "<p>This a <strong>strong</strong> message about risk !</p>",
           "key": "risk",
           "label": "hotspots.tabs.risk_description",
@@ -149,13 +168,12 @@ exports[`should render correctly: with comments or changelog element 1`] = `
     className="bordered huge-spacer-bottom"
   >
     <div
-      className="markdown big-padded"
-      dangerouslySetInnerHTML={
-        Object {
-          "__html": "<p>This a <strong>strong</strong> message about risk !</p>",
-        }
-      }
-    />
+      className="padded"
+    >
+      <div>
+        CodeTabContent
+      </div>
+    </div>
   </div>
 </Fragment>
 `;