From b5cd08f50f756749048c118a8c047a04313cde90 Mon Sep 17 00:00:00 2001 From: Ashwin P Chandran Date: Wed, 27 Jul 2022 14:44:22 -0700 Subject: [PATCH] [D&D] Fixes autosave with debounce (#1965) * fix: autosave editing Signed-off-by: Ashwin Pc * chore: improve workspace animation Signed-off-by: Ashwin Pc * fix: show invalid field when editing Signed-off-by: Ashwin Pc * fix: header offset Signed-off-by: Ashwin Pc --- .../wizard/public/application/_variables.scss | 2 +- .../wizard/public/application/app.scss | 4 +++ .../components/data_tab/secondary_panel.tsx | 26 ++++++++++++++----- .../application/components/workspace.scss | 14 +++++++--- .../utils/state_management/metadata_slice.ts | 10 +++---- 5 files changed, 40 insertions(+), 16 deletions(-) diff --git a/src/plugins/wizard/public/application/_variables.scss b/src/plugins/wizard/public/application/_variables.scss index 789aa00373e1..ab00f4eabbff 100644 --- 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 index b02bc79395d0..370c1153443b 100644 --- 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 index a0fa9c160227..dfbb148f07a2 100644 --- 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 index f83a148ec44d..bf7c3257274d 100644 --- 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 index 6e0902220079..f1cb4bcb9566 100644 --- 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) => { 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;