SONAR-9412 Add event type icon in project activity category selection

5 files changed, 169 insertions, 0 deletions

diff --git a/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityEventSelectOption.js b/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityEventSelectOption.js
new file mode 100644
index 00000000000..8198162e3c3
--- /dev/null
+++ b/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityEventSelectOption.js
@@ -0,0 +1,69 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2017 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.
+ */
+//@flow
+import React from 'react';
+import ProjectEventIcon from '../../../components/icons-components/ProjectEventIcon';
+
+export type Option = { label: string, value: string };
+
+type Props = {
+  option: Option,
+  children?: Element | Text,
+  className?: string,
+  isFocused?: boolean,
+  onFocus: (Option, MouseEvent) => void,
+  onSelect: (Option, MouseEvent) => void
+};
+
+export default class ProjectActivityEventSelectOption extends React.PureComponent {
+  props: Props;
+
+  handleMouseDown = (event: MouseEvent) => {
+    event.preventDefault();
+    event.stopPropagation();
+    this.props.onSelect(this.props.option, event);
+  };
+
+  handleMouseEnter = (event: MouseEvent) => {
+    this.props.onFocus(this.props.option, event);
+  };
+
+  handleMouseMove = (event: MouseEvent) => {
+    if (this.props.isFocused) {
+      return;
+    }
+    this.props.onFocus(this.props.option, event);
+  };
+
+  render() {
+    const { option } = this.props;
+    return (
+      <div
+        className={this.props.className}
+        onMouseDown={this.handleMouseDown}
+        onMouseEnter={this.handleMouseEnter}
+        onMouseMove={this.handleMouseMove}
+        title={option.label}>
+        <ProjectEventIcon className={'project-activity-event-icon ' + option.value} />
+        <span className="little-spacer-left">{this.props.children}</span>
+      </div>
+    );
+  }
+}
diff --git a/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityEventSelectValue.js b/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityEventSelectValue.js
new file mode 100644
index 00000000000..3475c1b7e9c
--- /dev/null
+++ b/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityEventSelectValue.js
@@ -0,0 +1,40 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2017 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.
+ */
+//@flow
+import React from 'react';
+import ProjectEventIcon from '../../../components/icons-components/ProjectEventIcon';
+import type { Option } from './ProjectActivityEventSelectOption';
+
+type Props = {
+  value: Option,
+  children?: Element | Text
+};
+
+export default function ProjectActivityEventSelectValue(props: Props) {
+  const { 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">{props.children}</span>
+      </div>
+    </div>
+  );
+}
diff --git a/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityPageHeader.js b/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityPageHeader.js
index 47ba3989889..e2f8a8569fa 100644
--- a/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityPageHeader.js
+++ b/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityPageHeader.js
@@ -20,6 +20,8 @@
 // @flow
 import React from 'react';
 import Select from 'react-select';
+import ProjectActivityEventSelectOption from './ProjectActivityEventSelectOption';
+import ProjectActivityEventSelectValue from './ProjectActivityEventSelectValue';
 import { EVENT_TYPES } from '../utils';
 import { translate } from '../../../helpers/l10n';
 import type { RawQuery } from '../../../helpers/query';
@@ -54,6 +56,8 @@ export default class ProjectActivityPageHeader extends React.PureComponent {
           clearable={true}
           searchable={false}
           value={this.props.category}
+          optionComponent={ProjectActivityEventSelectOption}
+          valueComponent={ProjectActivityEventSelectValue}
           options={this.options}
           onChange={this.handleCategoryChange}
         />
diff --git a/server/sonar-web/src/main/js/apps/projectActivity/components/projectActivity.css b/server/sonar-web/src/main/js/apps/projectActivity/components/projectActivity.css
index 038963a632b..f8d35f22a26 100644
--- a/server/sonar-web/src/main/js/apps/projectActivity/components/projectActivity.css
+++ b/server/sonar-web/src/main/js/apps/projectActivity/components/projectActivity.css
@@ -163,6 +163,22 @@
   margin-left: 4px;
 }
 
+.project-activity-event-icon.VERSION {
+  color: #4b9fd5;
+}
+
+.project-activity-event-icon.QUALITY_GATE {
+  color: #00aa00;
+}
+
+.project-activity-event-icon.QUALITY_PROFILE {
+  color: #ed7d20;
+}
+
+.project-activity-event-icon.OTHER {
+  color: #9139d4;
+}
+
 .project-activity-version-badge {
   vertical-align: middle;
   padding: 4px 8px;
diff --git a/server/sonar-web/src/main/js/components/icons-components/ProjectEventIcon.js b/server/sonar-web/src/main/js/components/icons-components/ProjectEventIcon.js
new file mode 100644
index 00000000000..985d68baae3
--- /dev/null
+++ b/server/sonar-web/src/main/js/components/icons-components/ProjectEventIcon.js
@@ -0,0 +1,40 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2017 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.
+ */
+// @flow
+import React from 'react';
+
+type Props = { className?: string, size?: number };
+
+export default function ProjectEventIcon({ className, size = 14 }: Props) {
+  /* eslint-disable max-len */
+  return (
+    <svg
+      className={className}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 16 16"
+      width={size}
+      height={size}>
+      <path
+        style={{ fill: '#fff', stroke: 'currentColor', strokeWidth: '3px' }}
+        d="M8 2 L14 8 L8 14 L2 8 L8 2 L14 8"
+      />
+    </svg>
+  );
+}