SONAR-12004 Replace diamonds with full text

20 files changed, 216 insertions, 165 deletions

diff --git a/server/sonar-ui-common/components/icons/ProjectEventIcon.tsx b/server/sonar-ui-common/components/icons/ProjectEventIcon.tsx
deleted file mode 100644
index 5ddba6b19ea..00000000000
--- a/server/sonar-ui-common/components/icons/ProjectEventIcon.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-/*
- * SonarQube
- * Copyright (C) 2009-2021 SonarSource SA
- * mailto:info AT sonarsource DOT com
- *
- * This program is free software; you can redistribute it and/or
- * modify it under the terms of the GNU Lesser General Public
- * License as published by the Free Software Foundation; either
- * version 3 of the License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
- * Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public License
- * along with this program; if not, write to the Free Software Foundation,
- * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
- */
-import * as React from 'react';
-import Icon, { IconProps } from './Icon';
-
-export default function ProjectEventIcon({ fill = '#fff', size = 14, ...iconProps }: IconProps) {
-  return (
-    <Icon size={size} {...iconProps}>
-      <path
-        d="M8 2 L14 8 L8 14 L2 8 L8 2 L14 8"
-        style={{ fill, stroke: 'currentColor', strokeWidth: '2px' }}
-      />
-    </Icon>
-  );
-}
diff --git a/server/sonar-web/src/main/js/apps/projectActivity/components/DefinitionChangeEventInner.tsx b/server/sonar-web/src/main/js/apps/projectActivity/components/DefinitionChangeEventInner.tsx
index d48b29e4e0c..f113cdb43b1 100644
--- a/server/sonar-web/src/main/js/apps/projectActivity/components/DefinitionChangeEventInner.tsx
+++ b/server/sonar-web/src/main/js/apps/projectActivity/components/DefinitionChangeEventInner.tsx
@@ -20,7 +20,7 @@
 import * as React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { Link } from 'react-router';
-import { ResetButtonLink } from 'sonar-ui-common/components/controls/buttons';
+import { ButtonLink } from 'sonar-ui-common/components/controls/buttons';
 import BranchIcon from 'sonar-ui-common/components/icons/BranchIcon';
 import DropdownIcon from 'sonar-ui-common/components/icons/DropdownIcon';
 import { translate } from 'sonar-ui-common/helpers/l10n';
@@ -39,6 +39,7 @@ export function isDefinitionChangeEvent(event: T.AnalysisEvent): event is Defini
 interface Props {
   branchLike: BranchLike | undefined;
   event: DefinitionChangeEvent;
+  readonly?: boolean;
 }
 
 interface State {
@@ -131,21 +132,26 @@ export class DefinitionChangeEventInner extends React.PureComponent<Props, State
   }
 
   render() {
-    const { event } = this.props;
+    const { event, readonly } = this.props;
     const { expanded } = this.state;
     return (
       <>
-        <span className="note">{translate('event.category', event.category)}:</span>
+        <span className="note">
+          {translate('event.category', event.category)}
+          {!readonly && ':'}
+        </span>
 
-        <div>
-          <ResetButtonLink
-            className="project-activity-event-inner-more-link"
-            onClick={this.toggleProjectsList}
-            stopPropagation={true}>
-            {expanded ? translate('hide') : translate('more')}
-            <DropdownIcon className="little-spacer-left" turned={expanded} />
-          </ResetButtonLink>
-        </div>
+        {!readonly && (
+          <div>
+            <ButtonLink
+              className="project-activity-event-inner-more-link"
+              onClick={this.toggleProjectsList}
+              stopPropagation={true}>
+              {expanded ? translate('hide') : translate('more')}
+              <DropdownIcon className="little-spacer-left" turned={expanded} />
+            </ButtonLink>
+          </div>
+        )}
 
         {expanded && (
           <ul className="spacer-left spacer-top">
diff --git a/server/sonar-web/src/main/js/apps/projectActivity/components/Event.tsx b/server/sonar-web/src/main/js/apps/projectActivity/components/Event.tsx
index 1a2b2969ed5..ea173aa741f 100644
--- a/server/sonar-web/src/main/js/apps/projectActivity/components/Event.tsx
+++ b/server/sonar-web/src/main/js/apps/projectActivity/components/Event.tsx
@@ -17,10 +17,8 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-import * as classNames from 'classnames';
 import * as React from 'react';
 import { DeleteButton, EditButton } from 'sonar-ui-common/components/controls/buttons';
-import ProjectEventIcon from 'sonar-ui-common/components/icons/ProjectEventIcon';
 import { translate } from 'sonar-ui-common/helpers/l10n';
 import EventInner from './EventInner';
 import ChangeEventForm from './forms/ChangeEventForm';
@@ -49,13 +47,6 @@ export function Event(props: EventProps) {
 
   return (
     <div className="project-activity-event">
-      <ProjectEventIcon
-        className={classNames(
-          'project-activity-event-icon little-spacer-right text-middle',
-          event.category
-        )}
-      />
-
       <EventInner event={event} />
 
       {showActions && (
diff --git a/server/sonar-web/src/main/js/apps/projectActivity/components/EventInner.tsx b/server/sonar-web/src/main/js/apps/projectActivity/components/EventInner.tsx
index c0626d6e216..94cfb31e6d4 100644
--- a/server/sonar-web/src/main/js/apps/projectActivity/components/EventInner.tsx
+++ b/server/sonar-web/src/main/js/apps/projectActivity/components/EventInner.tsx
@@ -26,26 +26,30 @@ import { isRichQualityGateEvent, RichQualityGateEventInner } from './RichQuality
 
 export interface EventInnerProps {
   event: T.AnalysisEvent;
+  readonly?: boolean;
 }
 
-export default function EventInner({ event }: EventInnerProps) {
+export default function EventInner({ event, readonly }: EventInnerProps) {
   if (isRichQualityGateEvent(event)) {
-    return <RichQualityGateEventInner event={event} />;
+    return <RichQualityGateEventInner event={event} readonly={readonly} />;
   } else if (isDefinitionChangeEvent(event)) {
     return (
       <ComponentContext.Consumer>
-        {({ branchLike }) => <DefinitionChangeEventInner branchLike={branchLike} event={event} />}
+        {({ branchLike }) => (
+          <DefinitionChangeEventInner branchLike={branchLike} event={event} readonly={readonly} />
+        )}
       </ComponentContext.Consumer>
     );
-  } else {
-    const content = (
+  }
+
+  return (
+    <Tooltip overlay={event.description || null}>
       <span className="text-middle">
         <span className="note little-spacer-right">
           {translate('event.category', event.category)}:
         </span>
         <strong className="spacer-right">{event.name}</strong>
       </span>
-    );
-    return event.description ? <Tooltip overlay={event.description}>{content}</Tooltip> : content;
-  }
+    </Tooltip>
+  );
 }
diff --git a/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityEventSelectOption.tsx b/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityEventSelectOption.tsx
index 36df66bec45..f8b87019da1 100644
--- a/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityEventSelectOption.tsx
+++ b/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityEventSelectOption.tsx
@@ -18,7 +18,6 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
-import ProjectEventIcon from 'sonar-ui-common/components/icons/ProjectEventIcon';
 
 export interface Option {
   label: string;
@@ -63,8 +62,7 @@ export default class ProjectActivityEventSelectOption extends React.PureComponen
         role="link"
         tabIndex={0}
         title={option.label}>
-        <ProjectEventIcon className={'project-activity-event-icon ' + option.value} />
-        <span className="little-spacer-left">{this.props.children}</span>
+        {this.props.children}
       </div>
     );
   }
diff --git a/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityEventSelectValue.tsx b/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityEventSelectValue.tsx
deleted file mode 100644
index 4f70a296597..00000000000
--- a/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityEventSelectValue.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-/*
- * SonarQube
- * Copyright (C) 2009-2021 SonarSource SA
- * mailto:info AT sonarsource DOT com
- *
- * This program is free software; you can redistribute it and/or
- * modify it under the terms of the GNU Lesser General Public
- * License as published by the Free Software Foundation; either
- * version 3 of the License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
- * Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public License
- * along with this program; if not, write to the Free Software Foundation,
- * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
- */
-import * as React from 'react';
-import ProjectEventIcon from 'sonar-ui-common/components/icons/ProjectEventIcon';
-import { Option } from './ProjectActivityEventSelectOption';
-
-interface Props {
-  children?: React.ReactNode;
-  value: Option;
-}
-
-export default function ProjectActivityEventSelectValue({ children, value }: Props) {
-  return (
-    <div className="Select-value" title={value.label}>
-      <div className="Select-value-label">
-        <ProjectEventIcon className={'project-activity-event-icon ' + value.value} />
-        <span className="little-spacer-left">{children}</span>
-      </div>
-    </div>
-  );
-}
diff --git a/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityPageHeader.tsx b/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityPageHeader.tsx
index 0dac0e2fb19..81b1a278dbf 100644
--- a/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityPageHeader.tsx
+++ b/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityPageHeader.tsx
@@ -24,7 +24,6 @@ import { translate } from 'sonar-ui-common/helpers/l10n';
 import { APPLICATION_EVENT_TYPES, EVENT_TYPES, Query } from '../utils';
 import ProjectActivityDateInput from './ProjectActivityDateInput';
 import ProjectActivityEventSelectOption from './ProjectActivityEventSelectOption';
-import ProjectActivityEventSelectValue from './ProjectActivityEventSelectValue';
 
 interface Props {
   category?: string;
@@ -61,8 +60,6 @@ export default class ProjectActivityPageHeader extends React.PureComponent<Props
             placeholder={translate('project_activity.filter_events') + '...'}
             searchable={false}
             value={this.props.category}
-            // @ts-ignore react-select typings are incorrect, they expect `props` of `valueComponent` to be exactly `Option`
-            valueComponent={ProjectActivityEventSelectValue}
           />
         )}
         <ProjectActivityDateInput
diff --git a/server/sonar-web/src/main/js/apps/projectActivity/components/RichQualityGateEventInner.tsx b/server/sonar-web/src/main/js/apps/projectActivity/components/RichQualityGateEventInner.tsx
index 69edce2b3fa..cf9590db0f4 100644
--- a/server/sonar-web/src/main/js/apps/projectActivity/components/RichQualityGateEventInner.tsx
+++ b/server/sonar-web/src/main/js/apps/projectActivity/components/RichQualityGateEventInner.tsx
@@ -34,6 +34,7 @@ export function isRichQualityGateEvent(event: T.AnalysisEvent): event is RichQua
 
 interface Props {
   event: RichQualityGateEvent;
+  readonly?: boolean;
 }
 
 interface State {
@@ -52,7 +53,7 @@ export class RichQualityGateEventInner extends React.PureComponent<Props, State>
   };
 
   render() {
-    const { event } = this.props;
+    const { event, readonly } = this.props;
     const { expanded } = this.state;
     return (
       <>
@@ -68,7 +69,7 @@ export class RichQualityGateEventInner extends React.PureComponent<Props, State>
         )}
 
         <div>
-          {event.qualityGate.failing.length > 0 && (
+          {!readonly && event.qualityGate.failing.length > 0 && (
             <ResetButtonLink
               className="project-activity-event-inner-more-link"
               onClick={this.toggleProjectsList}
diff --git a/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/DefinitionChangeEventInner-test.tsx b/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/DefinitionChangeEventInner-test.tsx
index d22d5e1abf8..e5496e85a25 100644
--- a/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/DefinitionChangeEventInner-test.tsx
+++ b/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/DefinitionChangeEventInner-test.tsx
@@ -67,3 +67,22 @@ it('should render for a branch', () => {
   wrapper.update();
   expect(wrapper).toMatchSnapshot();
 });
+
+it('should render when readonly', () => {
+  const event: DefinitionChangeEvent = {
+    category: 'DEFINITION_CHANGE',
+    key: 'foo1234',
+    name: '',
+    definitionChange: {
+      projects: [
+        { changeType: 'ADDED', key: 'foo', name: 'Foo', branch: 'master' },
+        { changeType: 'REMOVED', key: 'bar', name: 'Bar', branch: 'master' }
+      ]
+    }
+  };
+  const wrapper = shallow(
+    <DefinitionChangeEventInner branchLike={undefined} event={event} readonly={true} />
+  );
+  expect(wrapper).toMatchSnapshot();
+  expect(wrapper.find('.project-activity-event-inner-more-link').exists()).toBe(false);
+});
diff --git a/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/RichQualityGateEventInner-test.tsx b/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/RichQualityGateEventInner-test.tsx
index 269e32800a7..f6d570a57db 100644
--- a/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/RichQualityGateEventInner-test.tsx
+++ b/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/RichQualityGateEventInner-test.tsx
@@ -53,3 +53,8 @@ it('should not expand', () => {
   );
   expect(wrapper.find('.project-activity-event-inner-more-link').exists()).toBe(false);
 });
+
+it('should not expand when readonly', () => {
+  const wrapper = shallow(<RichQualityGateEventInner event={event} readonly={true} />);
+  expect(wrapper.find('.project-activity-event-inner-more-link').exists()).toBe(false);
+});
diff --git a/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/__snapshots__/DefinitionChangeEventInner-test.tsx.snap b/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/__snapshots__/DefinitionChangeEventInner-test.tsx.snap
index e4c0559e8cd..d76718a77e4 100644
--- a/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/__snapshots__/DefinitionChangeEventInner-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/__snapshots__/DefinitionChangeEventInner-test.tsx.snap
@@ -9,7 +9,7 @@ exports[`should render 1`] = `
     :
   </span>
   <div>
-    <ResetButtonLink
+    <ButtonLink
       className="project-activity-event-inner-more-link"
       onClick={[Function]}
       stopPropagation={true}
@@ -19,7 +19,7 @@ exports[`should render 1`] = `
         className="little-spacer-left"
         turned={false}
       />
-    </ResetButtonLink>
+    </ButtonLink>
   </div>
 </Fragment>
 `;
@@ -33,7 +33,7 @@ exports[`should render 2`] = `
     :
   </span>
   <div>
-    <ResetButtonLink
+    <ButtonLink
       className="project-activity-event-inner-more-link"
       onClick={[Function]}
       stopPropagation={true}
@@ -43,7 +43,7 @@ exports[`should render 2`] = `
         className="little-spacer-left"
         turned={true}
       />
-    </ResetButtonLink>
+    </ButtonLink>
   </div>
   <ul
     className="spacer-left spacer-top"
@@ -147,7 +147,7 @@ exports[`should render for a branch 1`] = `
     :
   </span>
   <div>
-    <ResetButtonLink
+    <ButtonLink
       className="project-activity-event-inner-more-link"
       onClick={[Function]}
       stopPropagation={true}
@@ -157,7 +157,7 @@ exports[`should render for a branch 1`] = `
         className="little-spacer-left"
         turned={true}
       />
-    </ResetButtonLink>
+    </ButtonLink>
   </div>
   <ul
     className="spacer-left spacer-top"
@@ -256,3 +256,13 @@ exports[`should render for a branch 1`] = `
   </ul>
 </Fragment>
 `;
+
+exports[`should render when readonly 1`] = `
+<Fragment>
+  <span
+    className="note"
+  >
+    event.category.DEFINITION_CHANGE
+  </span>
+</Fragment>
+`;
diff --git a/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/__snapshots__/Event-test.tsx.snap b/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/__snapshots__/Event-test.tsx.snap
index d3e5f562c6e..196deed213a 100644
--- a/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/__snapshots__/Event-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/__snapshots__/Event-test.tsx.snap
@@ -4,9 +4,6 @@ exports[`should render correctly: default 1`] = `
 <div
   className="project-activity-event"
 >
-  <ProjectEventIcon
-    className="project-activity-event-icon little-spacer-right text-middle OTHER"
-  />
   <EventInner
     event={
       Object {
@@ -40,9 +37,6 @@ exports[`should render correctly: with admin options 1`] = `
 <div
   className="project-activity-event"
 >
-  <ProjectEventIcon
-    className="project-activity-event-icon little-spacer-right text-middle OTHER"
-  />
   <EventInner
     event={
       Object {
diff --git a/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/__snapshots__/EventInner-test.tsx.snap b/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/__snapshots__/EventInner-test.tsx.snap
index cd7db05bd52..639a2bb4f5d 100644
--- a/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/__snapshots__/EventInner-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/__snapshots__/EventInner-test.tsx.snap
@@ -54,21 +54,25 @@ exports[`should render correctly: definition change 1`] = `
 `;
 
 exports[`should render correctly: no description 1`] = `
-<span
-  className="text-middle"
+<Tooltip
+  overlay={null}
 >
   <span
-    className="note little-spacer-right"
+    className="text-middle"
   >
-    event.category.VERSION
-    :
+    <span
+      className="note little-spacer-right"
+    >
+      event.category.VERSION
+      :
+    </span>
+    <strong
+      className="spacer-right"
+    >
+      Lorem ipsum
+    </strong>
   </span>
-  <strong
-    className="spacer-right"
-  >
-    Lorem ipsum
-  </strong>
-</span>
+</Tooltip>
 `;
 
 exports[`should render correctly: rich quality gate 1`] = `
diff --git a/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/__snapshots__/ProjectActivityEventSelectOption-test.tsx.snap b/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/__snapshots__/ProjectActivityEventSelectOption-test.tsx.snap
index a31966320b7..9667ac49337 100644
--- a/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/__snapshots__/ProjectActivityEventSelectOption-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/__snapshots__/ProjectActivityEventSelectOption-test.tsx.snap
@@ -8,12 +8,5 @@ exports[`should render correctly 1`] = `
   role="link"
   tabIndex={0}
   title="Foo"
->
-  <ProjectEventIcon
-    className="project-activity-event-icon foo"
-  />
-  <span
-    className="little-spacer-left"
-  />
-</div>
+/>
 `;
diff --git a/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/__snapshots__/ProjectActivityPageHeader-test.tsx.snap b/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/__snapshots__/ProjectActivityPageHeader-test.tsx.snap
index b114a57e84a..32cb3bbb30f 100644
--- a/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/__snapshots__/ProjectActivityPageHeader-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/__snapshots__/ProjectActivityPageHeader-test.tsx.snap
@@ -32,7 +32,6 @@ exports[`should render correctly the list of series 1`] = `
     placeholder="project_activity.filter_events..."
     searchable={false}
     value=""
-    valueComponent={[Function]}
   />
   <ProjectActivityDateInput
     from={2016-10-27T10:21:15.000Z}
diff --git a/server/sonar-web/src/main/js/components/activity-graph/GraphsTooltips.tsx b/server/sonar-web/src/main/js/components/activity-graph/GraphsTooltips.tsx
index db261e22444..283b0f83796 100644
--- a/server/sonar-web/src/main/js/components/activity-graph/GraphsTooltips.tsx
+++ b/server/sonar-web/src/main/js/components/activity-graph/GraphsTooltips.tsx
@@ -99,6 +99,9 @@ export default class GraphsTooltips extends React.PureComponent<Props> {
             <DateTimeFormatter date={this.props.selectedDate} />
           </div>
           <table className="width-100">
+            {events && events.length > 0 && (
+              <GraphsTooltipsContentEvents addSeparator={addSeparator} events={events} />
+            )}
             <tbody>{tooltipContent}</tbody>
             {this.props.graph === 'coverage' && (
               <GraphsTooltipsContentCoverage
@@ -114,9 +117,6 @@ export default class GraphsTooltips extends React.PureComponent<Props> {
                 tooltipIdx={tooltipIdx}
               />
             )}
-            {events && events.length > 0 && (
-              <GraphsTooltipsContentEvents addSeparator={addSeparator} events={events} />
-            )}
           </table>
         </div>
       </Popup>
diff --git a/server/sonar-web/src/main/js/components/activity-graph/GraphsTooltipsContentEvents.tsx b/server/sonar-web/src/main/js/components/activity-graph/GraphsTooltipsContentEvents.tsx
index 3d59c88202a..98c07f2dc2c 100644
--- a/server/sonar-web/src/main/js/components/activity-graph/GraphsTooltipsContentEvents.tsx
+++ b/server/sonar-web/src/main/js/components/activity-graph/GraphsTooltipsContentEvents.tsx
@@ -17,10 +17,8 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-import classNames from 'classnames';
 import * as React from 'react';
-import ProjectEventIcon from 'sonar-ui-common/components/icons/ProjectEventIcon';
-import { translate } from 'sonar-ui-common/helpers/l10n';
+import EventInner from '../../apps/projectActivity/components/EventInner';
 
 interface Props {
   addSeparator: boolean;
@@ -39,16 +37,20 @@ export default function GraphsTooltipsContentEvents({ addSeparator, events }: Pr
       )}
       <tr className="activity-graph-tooltip-line">
         <td colSpan={3}>
-          <span>{translate('events')}:</span>
           {events.map(event => (
-            <span className="spacer-left" key={event.key}>
-              <ProjectEventIcon
-                className={classNames('project-activity-event-icon', event.category)}
-              />
-            </span>
+            <div className="little-spacer-bottom" key={event.key}>
+              <EventInner event={event} readonly={true} />
+            </div>
           ))}
         </td>
       </tr>
+      {addSeparator && (
+        <tr>
+          <td className="activity-graph-tooltip-separator" colSpan={3}>
+            <hr />
+          </td>
+        </tr>
+      )}
     </tbody>
   );
 }
diff --git a/server/sonar-web/src/main/js/components/activity-graph/__tests__/GraphsTooltips-test.tsx b/server/sonar-web/src/main/js/components/activity-graph/__tests__/GraphsTooltips-test.tsx
index 98d8bf9d83c..2461b3a6513 100644
--- a/server/sonar-web/src/main/js/components/activity-graph/__tests__/GraphsTooltips-test.tsx
+++ b/server/sonar-web/src/main/js/components/activity-graph/__tests__/GraphsTooltips-test.tsx
@@ -21,6 +21,7 @@
 import { shallow } from 'enzyme';
 import * as React from 'react';
 import { parseDate } from 'sonar-ui-common/helpers/dates';
+import { mockEvent } from '../../../helpers/testMocks';
 import GraphsTooltips from '../GraphsTooltips';
 import { DEFAULT_GRAPH } from '../utils';
 
@@ -86,6 +87,9 @@ const DEFAULT_PROPS: GraphsTooltips['props'] = {
 
 it('should render correctly for issues graphs', () => {
   expect(shallow(<GraphsTooltips {...DEFAULT_PROPS} />)).toMatchSnapshot();
+  expect(shallow(<GraphsTooltips {...DEFAULT_PROPS} events={[mockEvent()]} />)).toMatchSnapshot(
+    'with events'
+  );
 });
 
 it('should render correctly for random graphs', () => {
diff --git a/server/sonar-web/src/main/js/components/activity-graph/__tests__/__snapshots__/GraphsTooltips-test.tsx.snap b/server/sonar-web/src/main/js/components/activity-graph/__tests__/__snapshots__/GraphsTooltips-test.tsx.snap
index d90007b9ca1..c3183f63400 100644
--- a/server/sonar-web/src/main/js/components/activity-graph/__tests__/__snapshots__/GraphsTooltips-test.tsx.snap
+++ b/server/sonar-web/src/main/js/components/activity-graph/__tests__/__snapshots__/GraphsTooltips-test.tsx.snap
@@ -95,6 +95,82 @@ exports[`should render correctly for issues graphs 1`] = `
 </Popup>
 `;
 
+exports[`should render correctly for issues graphs: with events 1`] = `
+<Popup
+  className="disabled-pointer-events"
+  placement="left-top"
+  style={
+    Object {
+      "left": 476,
+      "top": 30,
+      "width": 250,
+    }
+  }
+>
+  <div
+    className="activity-graph-tooltip"
+  >
+    <div
+      className="activity-graph-tooltip-title spacer-bottom"
+    >
+      <DateTimeFormatter
+        date={2011-10-01T22:01:00.000Z}
+      />
+    </div>
+    <table
+      className="width-100"
+    >
+      <GraphsTooltipsContentEvents
+        addSeparator={true}
+        events={
+          Array [
+            Object {
+              "currentTarget": Object {
+                "blur": [Function],
+              },
+              "preventDefault": [Function],
+              "stopPropagation": [Function],
+              "target": Object {
+                "blur": [Function],
+              },
+            },
+          ]
+        }
+      />
+      <tbody>
+        <GraphsTooltipsContentIssues
+          index={0}
+          key="bugs"
+          measuresHistory={Array []}
+          name="bugs"
+          tooltipIdx={0}
+          translatedName="Bugs"
+          value="Formated.3"
+        />
+        <GraphsTooltipsContentIssues
+          index={1}
+          key="code_smells"
+          measuresHistory={Array []}
+          name="code_smells"
+          tooltipIdx={0}
+          translatedName="Code Smells"
+          value="Formated.18"
+        />
+        <GraphsTooltipsContentIssues
+          index={2}
+          key="vulnerabilities"
+          measuresHistory={Array []}
+          name="vulnerabilities"
+          tooltipIdx={0}
+          translatedName="Vulnerabilities"
+          value="Formated.0"
+        />
+      </tbody>
+    </table>
+  </div>
+</Popup>
+`;
+
 exports[`should render correctly for random graphs 1`] = `
 <Popup
   className="disabled-pointer-events"
diff --git a/server/sonar-web/src/main/js/components/activity-graph/__tests__/__snapshots__/GraphsTooltipsContentEvents-test.tsx.snap b/server/sonar-web/src/main/js/components/activity-graph/__tests__/__snapshots__/GraphsTooltipsContentEvents-test.tsx.snap
index b77d2327dac..c4297a01b3d 100644
--- a/server/sonar-web/src/main/js/components/activity-graph/__tests__/__snapshots__/GraphsTooltipsContentEvents-test.tsx.snap
+++ b/server/sonar-web/src/main/js/components/activity-graph/__tests__/__snapshots__/GraphsTooltipsContentEvents-test.tsx.snap
@@ -16,26 +16,44 @@ exports[`should render correctly 1`] = `
     <td
       colSpan={3}
     >
-      <span>
-        events
-        :
-      </span>
-      <span
-        className="spacer-left"
+      <div
+        className="little-spacer-bottom"
         key="1"
       >
-        <ProjectEventIcon
-          className="project-activity-event-icon VERSION"
+        <EventInner
+          event={
+            Object {
+              "category": "VERSION",
+              "key": "1",
+              "name": "6.5",
+            }
+          }
+          readonly={true}
         />
-      </span>
-      <span
-        className="spacer-left"
+      </div>
+      <div
+        className="little-spacer-bottom"
         key="2"
       >
-        <ProjectEventIcon
-          className="project-activity-event-icon OTHER"
+        <EventInner
+          event={
+            Object {
+              "category": "OTHER",
+              "key": "2",
+              "name": "Foo",
+            }
+          }
+          readonly={true}
         />
-      </span>
+      </div>
+    </td>
+  </tr>
+  <tr>
+    <td
+      className="activity-graph-tooltip-separator"
+      colSpan={3}
+    >
+      <hr />
     </td>
   </tr>
 </tbody>