4.0.5 fix issue with nothing in feedback selected

Author: gooduling

package.json

@@ -1,6 +1,6 @@
 {
   "name": "anodot-datasource",
-  "version": "4.0.4",
+  "version": "4.0.5",
   "description": "Anodot Grafana Datasource for anodot-panel plugin",
   "scripts": {
     "build": "grafana-toolkit plugin:build",

src/Alerts/QueryEditor.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import FormSelect from '../components/FormField/FormSelect';
 import { alertAcknowledgeOptions, alertTypesOptions, feedbackOptions, severityOptions } from '../utils/constants';
 import { AlertsQuery, ScenarioProps } from '../types';
@@ -12,6 +12,12 @@ export const defaultAlertsQuery: Partial<AlertsQuery> = {
   feedback: [],
 };
 
+enum FeedbacksEnums {
+  noFeedback = 'noFeedback',
+  positiveFeedback = 'positiveFeedback',
+  negativeFeedback = 'negativeFeedback',
+}
+
 const AlertsQueryEditor = (props: ScenarioProps<AlertsQuery>) => {
   const { onRunQuery, datasource, onFormChange } = props;
   const [subscribersOptions, setSubscribers] = useState<SelectableValue[]>([]);
@@ -36,6 +42,19 @@ const AlertsQueryEditor = (props: ScenarioProps<AlertsQuery>) => {
     });
   }, []);
 
+  const onFeedbackChange = useCallback((currentMultiValues, selected) => {
+    const selectedValue = selected?.option?.value;
+    if (selectedValue) {
+      if (selectedValue === FeedbacksEnums.noFeedback) {
+        currentMultiValues = [selected?.option];
+      }
+      if ([FeedbacksEnums.positiveFeedback, FeedbacksEnums.negativeFeedback].includes(selectedValue)) {
+        currentMultiValues = currentMultiValues.filter((v) => v.value !== FeedbacksEnums.noFeedback);
+      }
+    }
+    return onFormChange('feedback', currentMultiValues, true);
+  }, []);
+
   return (
     <>
       <div className="gf-form gf-form--grow">
@@ -76,12 +95,7 @@ const AlertsQueryEditor = (props: ScenarioProps<AlertsQuery>) => {
           label={'Feedback'}
           value={query.feedback}
           options={feedbackOptions}
-          onChange={(currentMultiValues, { option }) => {
-            if (option?.value === 'noFeedback') {
-              currentMultiValues = [option];
-            }
-            return onFormChange('feedback', currentMultiValues, true);
-          }}
+          onChange={onFeedbackChange}
         />
       </div>
       <div className="gf-form-inline">

src/components/FunctionsControl.tsx

@@ -145,7 +145,11 @@ const FunctionsControl = ({ functionsConfigs, selectedFunctions = {}, onChangeFu
           groupByPropertiesList={groupByPropertiesList}
         />
       ))}
-      <Button disabled={!availableFunctions.length || 'new' in selectedFunctions} onClick={onAdd}>
+      <Button
+        style={{ width: 112 }}
+        disabled={!availableFunctions.length || 'new' in selectedFunctions}
+        onClick={onAdd}
+      >
         + {Object.keys(selectedFunctions).length > 0 && 'Child '}Function
       </Button>
     </>