[D&D] Fixes autosave with debounce (opensearch-project#1965)

* fix: autosave editing Signed-off-by: Ashwin Pc <[email protected]> * chore: improve workspace animation Signed-off-by: Ashwin Pc <[email protected]> * fix: show invalid field when editing Signed-off-by: Ashwin Pc <[email protected]> * fix: header offset Signed-off-by: Ashwin Pc <[email protected]>
kavilla · Aug 3, 2022 · b5cd08f · b5cd08f
1 parent 3d7ed03
commit b5cd08f
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 16 deletions.
diff --git a/src/plugins/wizard/public/application/_variables.scss b/src/plugins/wizard/public/application/_variables.scss
@@ -1,5 +1,5 @@
 @import "@elastic/eui/src/global_styling/variables/header";
 @import "@elastic/eui/src/global_styling/variables/form";
 
-$osdHeaderOffset: $euiHeaderHeightCompensation * 2;
+$osdHeaderOffset: $euiHeaderHeightCompensation;
 $wizSideNavWidth: 470px;
diff --git a/src/plugins/wizard/public/application/app.scss b/src/plugins/wizard/public/application/app.scss
@@ -9,3 +9,7 @@
     "sideNav workspace";
   height: calc(100vh - #{$osdHeaderOffset});
 }
+
+.headerIsExpanded .wizLayout {
+  height: calc(100vh - #{$osdHeaderOffset * 2});
+}
diff --git a/src/plugins/wizard/public/application/components/data_tab/secondary_panel.tsx b/src/plugins/wizard/public/application/components/data_tab/secondary_panel.tsx
@@ -5,6 +5,7 @@
 
 import React, { useCallback, useMemo, useState } from 'react';
 import { cloneDeep } from 'lodash';
+import { useDebounce } from 'react-use';
 import { useTypedDispatch, useTypedSelector } from '../../utils/state_management';
 import { DefaultEditorAggParams } from '../../../../../vis_default_editor/public';
 import { Title } from './title';
@@ -13,13 +14,15 @@ import { useOpenSearchDashboards } from '../../../../../opensearch_dashboards_re
 import { WizardServices } from '../../../types';
 import { IAggType } from '../../../../../data/public';
 import { saveDraftAgg, editDraftAgg } from '../../utils/state_management/visualization_slice';
-import { setValid } from '../../utils/state_management/metadata_slice';
+import { setValidity } from '../../utils/state_management/metadata_slice';
 
 const EDITOR_KEY = 'CONFIG_PANEL';
 
 export function SecondaryPanel() {
   const draftAgg = useTypedSelector((state) => state.visualization.activeVisualization!.draftAgg);
-  const valid = useTypedSelector((state) => state.metadata.editorState.valid[EDITOR_KEY]);
+  const isEditorValid = useTypedSelector(
+    (state) => state.metadata.editorState.validity[EDITOR_KEY]
+  );
   const [touched, setTouched] = useState(false);
   const dispatch = useTypedDispatch();
   const vizType = useVisualizationType();
@@ -56,18 +59,27 @@ export function SecondaryPanel() {
     (isValid: boolean) => {
       // Set validity state globally
       dispatch(
-        setValid({
+        setValidity({
           key: EDITOR_KEY,
           valid: isValid,
         })
       );
+    },
+    [dispatch]
+  );
 
-      // Autosave changes if valid
-      if (valid) {
+  // Autosave is agg value has changed and edits are valid
+  useDebounce(
+    () => {
+      if (isEditorValid) {
         dispatch(saveDraftAgg());
+      } else {
+        // To indicate that an invalid edit was made
+        setTouched(true);
       }
     },
-    [dispatch, valid]
+    200,
+    [draftAgg, isEditorValid]
   );
 
   return (
@@ -81,7 +93,7 @@ export function SecondaryPanel() {
           setValidity={handleSetValid}
           setTouched={setTouched}
           schemas={schemas}
-          formIsTouched={false}
+          formIsTouched={touched}
           groupName={selectedSchema?.group ?? 'none'}
           metricAggs={[]}
           state={{

diff --git a/src/plugins/wizard/public/application/components/workspace.scss b/src/plugins/wizard/public/application/components/workspace.scss
@@ -16,9 +16,9 @@
   }
 
   &__handFieldSvg {
-    animation: wizDragAnimation 2s ease-in-out infinite alternate;
+    animation: wizDragAnimation 6s ease-in-out infinite forwards;
     position: absolute;
-    top: 43%;
+    top: 34.5%;
   }
 }
 
@@ -27,7 +27,15 @@
     transform: none;
   }
 
+  30% {
+    transform: translate(116%, -80%);
+  }
+
+  60% {
+    transform: none;
+  }
+
   100% {
-    transform: translate(65%, -30%);
+    transform: none;
   }
 }
diff --git a/src/plugins/wizard/public/application/utils/state_management/metadata_slice.ts b/src/plugins/wizard/public/application/utils/state_management/metadata_slice.ts
@@ -8,7 +8,7 @@ import { WizardServices } from '../../../types';
 
 export interface MetadataState {
   editorState: {
-    valid: {
+    validity: {
       // Validity for each section in the editor
       [key: string]: boolean;
     };
@@ -17,7 +17,7 @@ export interface MetadataState {
 
 const initialState: MetadataState = {
   editorState: {
-    valid: {},
+    validity: {},
   },
 };
 
@@ -34,9 +34,9 @@ export const slice = createSlice({
   name: 'metadata',
   initialState,
   reducers: {
-    setValid: (state, action: PayloadAction<{ key: string; valid: boolean }>) => {
+    setValidity: (state, action: PayloadAction<{ key: string; valid: boolean }>) => {
       const { key, valid } = action.payload;
-      state.editorState.valid[key] = valid;
+      state.editorState.validity[key] = valid;
     },
     setState: (_state, action: PayloadAction<MetadataState>) => {
       return action.payload;
@@ -45,4 +45,4 @@ export const slice = createSlice({
 });
 
 export const { reducer } = slice;
-export const { setValid, setState } = slice.actions;
+export const { setValidity, setState } = slice.actions;