Remove fancy forms

elastic · Nov 13, 2019 · d6729ab · d6729ab
1 parent 78ccb5e
commit d6729ab
Show file tree

Hide file tree

Showing 9 changed files with 83 additions and 495 deletions.
diff --git a/src/legacy/ui/public/vis/editors/default/components/bottom_bar.tsx b/src/legacy/ui/public/vis/editors/default/components/bottom_bar.tsx
@@ -18,7 +18,14 @@
  */
 
 import React, { useCallback } from 'react';
-import { EuiBottomBar, EuiFlexGroup, EuiFlexItem, EuiButton, EuiButtonEmpty } from '@elastic/eui';
+import {
+  EuiBottomBar,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiButton,
+  EuiButtonEmpty,
+  EuiToolTip,
+} from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { i18n } from '@kbn/i18n';
 import { Vis } from 'ui/vis';
@@ -27,13 +34,17 @@ import { discardChanges, EditorAction } from '../state';
 interface DefaultEditorBottomBarProps {
   applyChanges(): void;
   isDirty: boolean;
+  isInvalid: boolean;
+  isTouched: boolean;
   dispatch: React.Dispatch<EditorAction>;
   vis: Vis;
 }
 
 function DefaultEditorBottomBar({
   applyChanges,
   isDirty,
+  isInvalid,
+  isTouched,
   dispatch,
   vis,
 }: DefaultEditorBottomBarProps) {
@@ -71,25 +82,50 @@ function DefaultEditorBottomBar({
                 </EuiFlexItem>
 
                 <EuiFlexItem grow={false}>
-                  <EuiButton
-                    aria-label={i18n.translate(
-                      'common.ui.vis.editors.sidebar.applyChangesAriaLabel',
-                      {
-                        defaultMessage: 'Update the visualization with your changes',
-                      }
-                    )}
-                    color="ghost"
-                    disabled={!isDirty || enableAutoApply}
-                    fill
-                    iconType="play"
-                    onClick={applyChanges}
-                    size="s"
-                  >
-                    <FormattedMessage
-                      id="common.ui.vis.editors.sidebar.updateChartButtonLabel"
-                      defaultMessage="Update chart"
-                    />
-                  </EuiButton>
+                  {isInvalid && isTouched ? (
+                    <EuiToolTip
+                      content={i18n.translate('common.ui.vis.editors.sidebar.errorButtonTooltip', {
+                        defaultMessage: 'Errors in the highlighted fields need to be resolved.',
+                      })}
+                    >
+                      <EuiButton
+                        aria-label={i18n.translate(
+                          'common.ui.vis.editors.sidebar.errorButtonAriaLabel',
+                          {
+                            defaultMessage: 'Errors in the highlighted fields need to be resolved.',
+                          }
+                        )}
+                        color="danger"
+                        iconType="alert"
+                        size="s"
+                      >
+                        <FormattedMessage
+                          id="common.ui.vis.editors.sidebar.updateChartButtonLabel"
+                          defaultMessage="Update chart"
+                        />
+                      </EuiButton>
+                    </EuiToolTip>
+                  ) : (
+                    <EuiButton
+                      aria-label={i18n.translate(
+                        'common.ui.vis.editors.sidebar.applyChangesAriaLabel',
+                        {
+                          defaultMessage: 'Update the visualization with your changes',
+                        }
+                      )}
+                      color="ghost"
+                      disabled={!isDirty || enableAutoApply}
+                      fill
+                      iconType="play"
+                      onClick={applyChanges}
+                      size="s"
+                    >
+                      <FormattedMessage
+                        id="common.ui.vis.editors.sidebar.updateChartButtonLabel"
+                        defaultMessage="Update chart"
+                      />
+                    </EuiButton>
+                  )}
                 </EuiFlexItem>
               </>
             )}

diff --git a/src/legacy/ui/public/vis/editors/default/default_editor.tsx b/src/legacy/ui/public/vis/editors/default/default_editor.tsx
@@ -23,6 +23,7 @@ import { getVisualizeLoader } from 'ui/visualize';
 import { EmbeddedVisualizeHandler } from 'ui/visualize/loader/embedded_visualize_handler';
 import { EditorRenderProps } from 'src/legacy/core_plugins/kibana/public/visualize/types';
 
+import './vis_type_agg_filter';
 import { DefaultEditorSideBar } from './components/sidebar';
 import { DefaultEditorBottomBar } from './components/bottom_bar';
 import { useEditorReducer, useEditorContext, useEditorFormState } from './state';
@@ -80,14 +81,19 @@ function DefaultEditor({
   }, [vis]);
 
   const applyChanges = useCallback(() => {
+    setTouched(true);
+
+    if (formState.invalid) {
+      return;
+    }
+
     vis.setCurrentState(state);
     vis.updateState();
     vis.emit('dirtyStateChange', {
       isDirty: false,
     });
     setDirty(false);
-    setTouched(true);
-  }, [vis, state]);
+  }, [vis, state, formState.invalid, setDirty, setTouched]);
 
   return (
     <div className="visEditor--default">
@@ -128,6 +134,8 @@ function DefaultEditor({
         applyChanges={applyChanges}
         dispatch={dispatch}
         isDirty={isDirty}
+        isTouched={formState.touched}
+        isInvalid={formState.invalid}
         vis={vis}
       />
     </div>

diff --git a/src/legacy/ui/public/vis/editors/default/fancy_forms/__tests__/fancy_forms.js b/src/legacy/ui/public/vis/editors/default/fancy_forms/__tests__/fancy_forms.js