From 3637ee6f1ae4da567382d1e3b60520207cee2774 Mon Sep 17 00:00:00 2001
From: Joe Reuter <johannes.reuter@elastic.co>
Date: Mon, 31 May 2021 11:14:41 +0200
Subject: [PATCH] show warning

---
 .../dimension_panel/dimension_editor.tsx      | 34 +++++++++++++++++--
 .../formula/editor/formula_editor.tsx         |  2 +-
 2 files changed, 32 insertions(+), 4 deletions(-)

diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/dimension_editor.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/dimension_editor.tsx
index a8915ca3fc6cb..0540605eecf12 100644
--- a/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/dimension_editor.tsx
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/dimension_editor.tsx
@@ -20,6 +20,7 @@ import {
   EuiText,
   EuiTabs,
   EuiTab,
+  EuiCallOut,
 } from '@elastic/eui';
 import { IndexPatternDimensionEditorProps } from './dimension_panel';
 import { OperationSupportMatrix } from './operation_support';
@@ -105,10 +106,22 @@ export function DimensionEditor(props: DimensionEditorProps) {
   };
   const { fieldByOperation, operationWithoutField } = operationSupportMatrix;
 
+  const selectedOperationDefinition =
+    selectedColumn && operationDefinitionMap[selectedColumn.operationType];
+
+  const [changedFormula, setChangedFormula] = useState(
+    Boolean(selectedOperationDefinition?.type === 'formula')
+  );
+
   const setStateWrapper = (
     setter: IndexPatternLayer | ((prevLayer: IndexPatternLayer) => IndexPatternLayer),
     shouldClose?: boolean
   ) => {
+    if (selectedOperationDefinition?.type === 'formula' && !temporaryQuickFunction) {
+      setChangedFormula(true);
+    } else {
+      setChangedFormula(false);
+    }
     const hypotheticalLayer = typeof setter === 'function' ? setter(state.layers[layerId]) : setter;
     const hasIncompleteColumns = Boolean(hypotheticalLayer.incompleteColumns?.[columnId]);
     const prevOperationType =
@@ -133,9 +146,6 @@ export function DimensionEditor(props: DimensionEditorProps) {
     setState((prevState) => ({ ...prevState, isDimensionClosePrevented: !isCloseable }));
   };
 
-  const selectedOperationDefinition =
-    selectedColumn && operationDefinitionMap[selectedColumn.operationType];
-
   const incompleteInfo = (state.layers[layerId].incompleteColumns ?? {})[columnId];
   const incompleteOperation = incompleteInfo?.operationType;
   const incompleteField = incompleteInfo?.sourceField ?? null;
@@ -339,6 +349,24 @@ export function DimensionEditor(props: DimensionEditorProps) {
   const quickFunctions = (
     <>
       <div className="lnsIndexPatternDimensionEditor__section lnsIndexPatternDimensionEditor__section--padded lnsIndexPatternDimensionEditor__section--shaded">
+        {temporaryQuickFunction && changedFormula && (
+          <>
+            <EuiCallOut
+              size="s"
+              title={i18n.translate('xpack.lens.indexPattern.formulaWarning', {
+                defaultMessage: 'Staged formula',
+              })}
+              color="warning"
+            >
+              <p>
+                {i18n.translate('xpack.lens.indexPattern.formulaWarningText', {
+                  defaultMessage: 'Picking a quick function will erase your formula.',
+                })}
+              </p>
+            </EuiCallOut>
+            <EuiSpacer size="s" />
+          </>
+        )}
         <EuiFormLabel>
           {i18n.translate('xpack.lens.indexPattern.functionsLabel', {
             defaultMessage: 'Select a function',
diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/formula/editor/formula_editor.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/formula/editor/formula_editor.tsx
index 16b08f3e8d5cc..333046e38d5f2 100644
--- a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/formula/editor/formula_editor.tsx
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/formula/editor/formula_editor.tsx
@@ -257,7 +257,7 @@ export function FormulaEditor({
     },
     // Make it validate on flyout open in case of a broken formula left over
     // from a previous edit
-    { skipFirstRender: text == null },
+    { skipFirstRender: true },
     256,
     [text]
   );