SONAR-12619 Prevent users from adding unknown metrics to Activity graphs

server/sonar-web/src/main/js/apps/projectActivity/components/forms/AddGraphMetricPopup.tsx

@@ -22,7 +22,7 @@ import { Alert } from 'sonar-ui-common/components/ui/Alert';
 import { translate, translateWithParameters } from 'sonar-ui-common/helpers/l10n';
 import MultiSelect from '../../../../components/common/MultiSelect';
 
-interface Props {
+export interface AddGraphMetricPopupProps {
   elements: string[];
   filterSelected: (query: string, selectedElements: string[]) => string[];
   metricsTypeFilter?: string[];
@@ -34,7 +34,11 @@ interface Props {
   selectedElements: string[];
 }
 
-export default function AddGraphMetricPopup({ elements, metricsTypeFilter, ...props }: Props) {
+export default function AddGraphMetricPopup({
+  elements,
+  metricsTypeFilter,
+  ...props
+}: AddGraphMetricPopupProps) {
   let footerNode: React.ReactNode = '';
 
   if (props.selectedElements.length >= 6) {
@@ -66,7 +70,7 @@ export default function AddGraphMetricPopup({ elements, metricsTypeFilter, ...pr
         filterSelected={props.filterSelected}
         footerNode={footerNode}
         onSearch={props.onSearch}
-        onSelect={props.onSelect}
+        onSelect={(item: string) => elements.includes(item) && props.onSelect(item)}
         onUnselect={props.onUnselect}
         placeholder={translate('search.search_for_tags')}
         renderLabel={props.renderLabel}

server/sonar-web/src/main/js/apps/projectActivity/components/forms/__tests__/AddGraphMetricPopup-test.tsx

@@ -0,0 +1,64 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2019 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 { shallow } from 'enzyme';
+import * as React from 'react';
+import MultiSelect from '../../../../../components/common/MultiSelect';
+import AddGraphMetricPopup, { AddGraphMetricPopupProps } from '../AddGraphMetricPopup';
+
+it('should render correctly', () => {
+  expect(shallowRender()).toMatchSnapshot();
+});
+
+it('should render correctly whith 6+ selected elements', () => {
+  const selectedElements = ['1', '2', '3', '4', '5', '6'];
+  expect(shallowRender({ selectedElements })).toMatchSnapshot();
+});
+
+it('should render correctly with type filter', () => {
+  const metricsTypeFilter = ['filter1', 'filter2'];
+  expect(shallowRender({ metricsTypeFilter })).toMatchSnapshot();
+});
+
+it('should prevent selection of unknown element', () => {
+  const elements = ['1', '2', '3'];
+  const onSelect = jest.fn();
+  const wrapper = shallowRender({ elements, onSelect });
+  wrapper
+    .find(MultiSelect)
+    .props()
+    .onSelect('unknown');
+
+  expect(onSelect).not.toHaveBeenCalled();
+});
+
+function shallowRender(overrides: Partial<AddGraphMetricPopupProps> = {}) {
+  return shallow(
+    <AddGraphMetricPopup
+      elements={[]}
+      filterSelected={jest.fn()}
+      onSearch={jest.fn()}
+      onSelect={jest.fn()}
+      onUnselect={jest.fn()}
+      renderLabel={element => element}
+      selectedElements={[]}
+      {...overrides}
+    />
+  );
+}

server/sonar-web/src/main/js/apps/projectActivity/components/forms/__tests__/__snapshots__/AddGraphMetricPopup-test.tsx.snap

@@ -0,0 +1,90 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render correctly 1`] = `
+<div
+  className="menu abs-width-300"
+>
+  <MultiSelect
+    allowNewElements={false}
+    allowSelection={true}
+    elements={Array []}
+    filterSelected={[MockFunction]}
+    footerNode=""
+    listSize={0}
+    onSearch={[MockFunction]}
+    onSelect={[Function]}
+    onUnselect={[MockFunction]}
+    placeholder="search.search_for_tags"
+    renderLabel={[Function]}
+    selectedElements={Array []}
+    validateSearchInput={[Function]}
+  />
+</div>
+`;
+
+exports[`should render correctly whith 6+ selected elements 1`] = `
+<div
+  className="menu abs-width-300"
+>
+  <MultiSelect
+    allowNewElements={false}
+    allowSelection={false}
+    elements={Array []}
+    filterSelected={[MockFunction]}
+    footerNode={
+      <Alert
+        className="spacer-left spacer-right spacer-top"
+        variant="info"
+      >
+        project_activity.graphs.custom.add_metric_info
+      </Alert>
+    }
+    listSize={0}
+    onSearch={[MockFunction]}
+    onSelect={[Function]}
+    onUnselect={[MockFunction]}
+    placeholder="search.search_for_tags"
+    renderLabel={[Function]}
+    selectedElements={
+      Array [
+        "1",
+        "2",
+        "3",
+        "4",
+        "5",
+        "6",
+      ]
+    }
+    validateSearchInput={[Function]}
+  />
+</div>
+`;
+
+exports[`should render correctly with type filter 1`] = `
+<div
+  className="menu abs-width-300"
+>
+  <MultiSelect
+    allowNewElements={false}
+    allowSelection={true}
+    elements={Array []}
+    filterSelected={[MockFunction]}
+    footerNode={
+      <Alert
+        className="spacer-left spacer-right spacer-top"
+        variant="info"
+      >
+        project_activity.graphs.custom.type_x_message.metric.type.filter1, metric.type.filter2
+      </Alert>
+    }
+    listSize={0}
+    onSearch={[MockFunction]}
+    onSelect={[Function]}
+    onUnselect={[MockFunction]}
+    placeholder="search.search_for_tags"
+    renderLabel={[Function]}
+    selectedElements={Array []}
+    validateSearchInput={[Function]}
+  />
+</div>
+`;