From 80b9af3c33ef3c3b0f89872b997587e24045efb2 Mon Sep 17 00:00:00 2001
From: siddhikhapare <81567515+siddhikhapare@users.noreply.github.com>
Date: Fri, 10 Nov 2023 21:15:13 +0530
Subject: [PATCH] InfluxDB: Remove context menu "remove" option from query
 builder (#77102)

* remove menu item from query builder

* files changed

* file fixed

* error fixed

* unit test fixed
---
 .../query/influxql/visual/PartListSection.tsx | 26 +++----------------
 .../visual/VisualInfluxQLEditor.test.tsx      | 14 +++++-----
 2 files changed, 10 insertions(+), 30 deletions(-)

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 ae5c5f9cbf3..a86df9df784 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
@@ -3,7 +3,7 @@ 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 { useTheme2 } from '@grafana/ui';
 
 import { toSelectableValue } from '../utils/toSelectableValue';
 import { unwrap } from '../utils/unwrap';
@@ -27,31 +27,11 @@ type Props = {
   onAddNewPart: (type: string) => void;
 };
 
-const renderRemovableNameMenuItems = (onClick: () => void) => {
-  return (
-    <MenuGroup label="">
-      <MenuItem label="remove" onClick={onClick} />
-    </MenuGroup>
-  );
-};
-
 const noRightMarginPaddingClass = css({
   paddingRight: '0',
   marginRight: '0',
 });
 
-const RemovableName = ({ name, onRemove }: { name: string; onRemove: () => void }) => {
-  return (
-    <WithContextMenu renderMenuItems={() => renderRemovableNameMenuItems(onRemove)}>
-      {({ openMenu }) => (
-        <button className={cx('gf-form-label', noRightMarginPaddingClass)} onClick={openMenu}>
-          {name}
-        </button>
-      )}
-    </WithContextMenu>
-  );
-};
-
 type PartProps = {
   name: string;
   params: PartParams;
@@ -79,7 +59,7 @@ const getPartClass = (theme: GrafanaTheme2) => {
   );
 };
 
-const Part = ({ name, params, onChange, onRemove }: PartProps): JSX.Element => {
+const Part = ({ name, params, onChange }: PartProps): JSX.Element => {
   const theme = useTheme2();
   const partClass = useMemo(() => getPartClass(theme), [theme]);
 
@@ -90,7 +70,7 @@ const Part = ({ name, params, onChange, onRemove }: PartProps): JSX.Element => {
   };
   return (
     <div className={partClass}>
-      <RemovableName name={name} onRemove={onRemove} />(
+      <button className={cx('gf-form-label', noRightMarginPaddingClass)}>{name}</button>(
       {params.map((p, i) => {
         const { value, options } = p;
         const isLast = i === params.length - 1;
diff --git a/public/app/plugins/datasource/influxdb/components/editor/query/influxql/visual/VisualInfluxQLEditor.test.tsx b/public/app/plugins/datasource/influxdb/components/editor/query/influxql/visual/VisualInfluxQLEditor.test.tsx
index 3fc70dd0a0e..50b2862320d 100644
--- a/public/app/plugins/datasource/influxdb/components/editor/query/influxql/visual/VisualInfluxQLEditor.test.tsx
+++ b/public/app/plugins/datasource/influxdb/components/editor/query/influxql/visual/VisualInfluxQLEditor.test.tsx
@@ -58,8 +58,8 @@ describe('InfluxDB InfluxQL Visual Editor', () => {
     await assertEditor(
       query,
       'FROM[default][select measurement]WHERE[+]' +
-        'SELECT[field]([value])[mean]()[+]' +
-        'GROUP BY[time]([$__interval])[fill]([null])[+]' +
+        'SELECTfield([value])mean()[+]' +
+        'GROUP BYtime([$__interval])fill([null])[+]' +
         'TIMEZONE[(optional)]ORDER BY TIME[ASC]' +
         'LIMIT[(optional)]SLIMIT[(optional)]' +
         'FORMAT AS[time_series]ALIAS[Naming pattern]'
@@ -75,8 +75,8 @@ describe('InfluxDB InfluxQL Visual Editor', () => {
     await assertEditor(
       query,
       'FROM[default][select measurement]WHERE[+]' +
-        'SELECT[field]([value])[mean]()[+]' +
-        'GROUP BY[time]([$__interval])[fill]([null])[+]' +
+        'SELECTfield([value])mean()[+]' +
+        'GROUP BYtime([$__interval])fill([null])[+]' +
         'TIMEZONE[(optional)]ORDER BY TIME[ASC]' +
         'LIMIT[(optional)]SLIMIT[(optional)]' +
         'FORMAT AS[table]'
@@ -154,9 +154,9 @@ describe('InfluxDB InfluxQL Visual Editor', () => {
     await assertEditor(
       query,
       'FROM[default][cpu]WHERE[cpu][=][cpu1][AND][cpu][<][cpu3][+]' +
-        'SELECT[field]([usage_idle])[mean]()[+]' +
-        '[field]([usage_guest])[median]()[holt_winters_with_fit]([10],[2])[+]' +
-        'GROUP BY[time]([$__interval])[tag]([cpu])[tag]([host])[fill]([null])[+]' +
+        'SELECTfield([usage_idle])mean()[+]' +
+        'field([usage_guest])median()holt_winters_with_fit([10],[2])[+]' +
+        'GROUP BYtime([$__interval])tag([cpu])tag([host])fill([null])[+]' +
         'TIMEZONE[UTC]ORDER BY TIME[DESC]' +
         'LIMIT[4]SLIMIT[5]' +
         'FORMAT AS[logs]ALIAS[all i as]'