From e17928c19475c9bb249b1bfe8a390e697a8c81a6 Mon Sep 17 00:00:00 2001
From: Alex Godbehere <114239316+AlexGodbehere@users.noreply.github.com>
Date: Thu, 24 Aug 2023 16:19:01 +0100
Subject: [PATCH] InfluxDB: Add delete buttons to measurement, part and tag in
 query editor (#72825)

* InfluxDB/QueryEditor: Add delete buttons to measurement, part and tag sections

The diff provides an additional "delete" button to measurement section, part list section and tags section in the influxdb datasource editor. This improves user experience by allowing users to delete measurements, parts and tags directly from the user interface. The commit also slightly refactors the options generation for these sections, removing the "-- remove filter --" option as it becomes redundant with the new delete button.

* InfluxDB/QueryEditor: Replace Button with AccessoryButton

Changed the Button components to AccessoryButton from the '@grafana/experimental' package, used for the delete functionality in data source components for influxdb query editor. The AccessoryButton is more visually consistent with our current Grafana UI aesthetic and provides better user experience. The change was implemented in FromSection.tsx, PartListSection.tsx, and TagsSection.tsx files.

* Update public/app/plugins/datasource/influxdb/components/editor/query/influxql/visual/FromSection.tsx

Co-authored-by: ismail simsek <ismailsimsek09@gmail.com>

* Update public/app/plugins/datasource/influxdb/components/editor/query/influxql/visual/PartListSection.tsx

Co-authored-by: ismail simsek <ismailsimsek09@gmail.com>

---------

Co-authored-by: ismail simsek <ismailsimsek09@gmail.com>
---
 .../query/influxql/visual/FromSection.tsx     | 13 ++++++++
 .../query/influxql/visual/PartListSection.tsx | 33 ++++++++++++-------
 .../query/influxql/visual/TagsSection.tsx     | 12 ++++++-
 3 files changed, 46 insertions(+), 12 deletions(-)

diff --git a/public/app/plugins/datasource/influxdb/components/editor/query/influxql/visual/FromSection.tsx b/public/app/plugins/datasource/influxdb/components/editor/query/influxql/visual/FromSection.tsx
index 31cc1b34179..b0c8f42a432 100644
--- a/public/app/plugins/datasource/influxdb/components/editor/query/influxql/visual/FromSection.tsx
+++ b/public/app/plugins/datasource/influxdb/components/editor/query/influxql/visual/FromSection.tsx
@@ -1,5 +1,7 @@
 import React from 'react';
 
+import { AccessoryButton } from '@grafana/experimental';
+
 import { DEFAULT_POLICY } from '../../../../../types';
 import { toSelectableValue } from '../utils/toSelectableValue';
 
@@ -65,6 +67,17 @@ export const FromSection = ({
           onChange(policy, v.value);
         }}
       />
+      {measurement && (
+        <AccessoryButton
+          style={{ marginRight: '4px' }}
+          aria-label="remove"
+          icon="times"
+          variant="secondary"
+          onClick={() => {
+            onChange(policy, undefined);
+          }}
+        />
+      )}
     </>
   );
 };
diff --git a/public/app/plugins/datasource/influxdb/components/editor/query/influxql/visual/PartListSection.tsx b/public/app/plugins/datasource/influxdb/components/editor/query/influxql/visual/PartListSection.tsx
index 776b6af572e..ae5c5f9cbf3 100644
--- a/public/app/plugins/datasource/influxdb/components/editor/query/influxql/visual/PartListSection.tsx
+++ b/public/app/plugins/datasource/influxdb/components/editor/query/influxql/visual/PartListSection.tsx
@@ -2,6 +2,7 @@ import { css, cx } from '@emotion/css';
 import React, { useMemo } from 'react';
 
 import { GrafanaTheme2, SelectableValue } from '@grafana/data';
+import { AccessoryButton } from '@grafana/experimental';
 import { MenuGroup, MenuItem, useTheme2, WithContextMenu } from '@grafana/ui';
 
 import { toSelectableValue } from '../utils/toSelectableValue';
@@ -125,17 +126,27 @@ export const PartListSection = ({
   return (
     <>
       {parts.map((part, index) => (
-        <Part
-          key={index}
-          name={part.name}
-          params={part.params}
-          onRemove={() => {
-            onRemovePart(index);
-          }}
-          onChange={(pars) => {
-            onChange(index, pars);
-          }}
-        />
+        <React.Fragment key={index}>
+          <Part
+            name={part.name}
+            params={part.params}
+            onRemove={() => {
+              onRemovePart(index);
+            }}
+            onChange={(pars) => {
+              onChange(index, pars);
+            }}
+          />
+          <AccessoryButton
+            style={{ marginRight: '4px' }}
+            aria-label="remove"
+            icon="times"
+            variant="secondary"
+            onClick={() => {
+              onRemovePart(index);
+            }}
+          />
+        </React.Fragment>
       ))}
       <AddButton loadOptions={getNewPartOptions} onAdd={onAddNewPart} />
     </>
diff --git a/public/app/plugins/datasource/influxdb/components/editor/query/influxql/visual/TagsSection.tsx b/public/app/plugins/datasource/influxdb/components/editor/query/influxql/visual/TagsSection.tsx
index a64c27b9e1e..983c2d5fb07 100644
--- a/public/app/plugins/datasource/influxdb/components/editor/query/influxql/visual/TagsSection.tsx
+++ b/public/app/plugins/datasource/influxdb/components/editor/query/influxql/visual/TagsSection.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 
 import { SelectableValue } from '@grafana/data';
+import { AccessoryButton } from '@grafana/experimental';
 
 import { InfluxQueryTag } from '../../../../../types';
 import { adjustOperatorIfNeeded, getCondition, getOperator } from '../utils/tagUtils';
@@ -56,7 +57,7 @@ const Tag = ({ tag, isFirst, onRemove, onChange, getTagKeyOptions, getTagValueOp
         console.error(err);
         return [];
       })
-      .then((tags) => [{ label: '-- remove filter --', value: undefined }, ...tags.map(toSelectableValue)]);
+      .then((tags) => tags.map(toSelectableValue));
   };
 
   const getTagValueSegmentOptions = () => {
@@ -103,6 +104,15 @@ const Tag = ({ tag, isFirst, onRemove, onChange, getTagKeyOptions, getTagValueOp
           onChange({ ...tag, value, operator: adjustOperatorIfNeeded(operator, value) });
         }}
       />
+      <AccessoryButton
+        style={{ marginRight: '4px' }}
+        aria-label="remove"
+        icon="times"
+        variant="secondary"
+        onClick={() => {
+          onRemove();
+        }}
+      />
     </div>
   );
 };