Added ability to delete selected text for SQL editor (#2265)

* refactored state mgmt for query console

* changes files

* lint fixes

* teams e2e test were flaky

* lint fixes

* fixed bug for observer running query, run again button

* fixed inconsistent query body change

* disabled refetch on window focus

* added ability to delete selected sql text

changes/issue-2206-query-aselect-all

@@ -0,0 +1 @@
+- Added ability to delete highlighted (or all) content from SQL editor

frontend/components/FleetAce/FleetAce.tsx

@@ -1,5 +1,6 @@
-import React, { useCallback } from "react";
+import React, { useCallback, useRef } from "react";
 import AceEditor from "react-ace";
+import ReactAce from "react-ace/lib/ace";
 import classnames from "classnames";
 import "ace-builds/src-noconflict/mode-sql";
 import "ace-builds/src-noconflict/ext-linking";
@@ -45,6 +46,8 @@ const FleetAce = ({
   onChange,
   handleSubmit = noop,
 }: IFleetAceProps) => {
+  const editorRef = useRef<ReactAce>(null);
+
   const renderLabel = useCallback(() => {
     const labelText = error || label;
     const labelClassName = classnames(`${baseClass}__label`, {
@@ -72,6 +75,34 @@ const FleetAce = ({
     [`${baseClass}__wrapper--error`]: !!error,
   });
 
+  const handleDelete = (deleteCommand: string) => {
+    const currentText = editorRef.current?.editor.getValue();
+    const selectedText = editorRef.current?.editor.getSelectedText();
+    const selectedStartPosition = editorRef.current?.editor
+      .getSelection()
+      .getCursor();
+
+    if (selectedText) {
+      const remainingText = currentText?.replace(selectedText, "");
+      if (typeof remainingText !== "undefined") {
+        onChange && onChange(remainingText);
+        editorRef.current?.editor.clearSelection();
+      }
+    } else {
+      editorRef.current?.editor.execCommand(deleteCommand);
+    }
+
+    // not sure why adding zero works smh
+    if (selectedStartPosition && selectedStartPosition.column) {
+      const newColumn = selectedStartPosition?.column + 0;
+      selectedStartPosition &&
+        editorRef.current?.editor.moveCursorTo(
+          selectedStartPosition.row,
+          newColumn
+        );
+    }
+  };
+
   const fixHotkeys = (editor: IAceEditor) => {
     editor.commands.removeCommand("gotoline");
     editor.commands.removeCommand("find");
@@ -82,6 +113,7 @@ const FleetAce = ({
     <div className={wrapperClass}>
       {renderLabel()}
       <AceEditor
+        ref={editorRef}
         enableBasicAutocompletion
         enableLiveAutocompletion
         editorProps={{ $blockScrolling: Infinity }}
@@ -106,6 +138,16 @@ const FleetAce = ({
             bindKey: { win: "Ctrl-Enter", mac: "Ctrl-Enter" },
             exec: handleSubmit,
           },
+          {
+            name: "deleteSelection",
+            bindKey: { win: "Delete", mac: "Delete" },
+            exec: () => handleDelete("del"),
+          },
+          {
+            name: "backspaceSelection",
+            bindKey: { win: "Backspace", mac: "Backspace" },
+            exec: () => handleDelete("backspace"),
+          },
         ]}
       />
       {renderHint()}

frontend/context/query.tsx

@@ -56,7 +56,9 @@ const reducer = (state: any, action: any) => {
         lastEditedQueryDescription:
           action.lastEditedQueryDescription || state.lastEditedQueryDescription,
         lastEditedQueryBody:
-          action.lastEditedQueryBody || state.lastEditedQueryBody,
+          typeof action.lastEditedQueryBody === "undefined"
+            ? state.lastEditedQueryBody
+            : action.lastEditedQueryBody,
         lastEditedQueryObserverCanRun:
           typeof action.lastEditedQueryObserverCanRun === "undefined"
             ? state.lastEditedQueryObserverCanRun