feat: confirm input changes

Author: astandrik

src/containers/Tenant/Query/QueryEditor/QueryEditor.tsx

@@ -98,6 +98,28 @@ function QueryEditor(props: QueryEditorProps) {
 
     const isResultLoaded = Boolean(executeQuery.result);
 
+    const [inputValue, setInitInputValue] = React.useState<string>(executeQuery.input);
+
+    const propsChangeUserInput = props.changeUserInput;
+    const changeInputValue = React.useCallback(
+        (input: string) => {
+            setInitInputValue(input);
+            propsChangeUserInput({input});
+        },
+        [propsChangeUserInput],
+    );
+
+    React.useEffect(() => {
+        if (executeQuery.input !== inputValue) {
+            const response = window.confirm('Input value will be lost. Continue?');
+            if (response) {
+                setInitInputValue(executeQuery.input);
+            } else {
+                changeInputValue(inputValue);
+            }
+        }
+    }, [changeInputValue, executeQuery.input, inputValue]);
+
     const [querySettings] = useQueryExecutionSettings();
     const enableTracingLevel = useTracingLevelOptionAvailable();
     const [lastQueryExecutionSettings, setLastQueryExecutionSettings] =
@@ -292,10 +314,6 @@ function QueryEditor(props: QueryEditorProps) {
         });
     };
 
-    const onChange = (newValue: string) => {
-        props.changeUserInput({input: newValue});
-    };
-
     const onCollapseResultHandler = () => {
         dispatchResultVisibilityState(PaneVisibilityActionTypes.triggerCollapse);
     };
@@ -342,7 +360,7 @@ function QueryEditor(props: QueryEditorProps) {
                                 language={YQL_LANGUAGE_ID}
                                 value={executeQuery.input}
                                 options={editorOptions}
-                                onChange={onChange}
+                                onChange={changeInputValue}
                                 editorDidMount={editorDidMount}
                                 theme={`vs-${theme}`}
                             />