forked from elastic/kibana
-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
move component state from redux into observables (elastic#193783)
Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
- Loading branch information
1 parent
b7af143
commit dab01aa
Showing
21 changed files
with
382 additions
and
366 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
52 changes: 52 additions & 0 deletions
52
src/plugins/dashboard/public/dashboard_api/get_dashboard_api.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,52 @@ | ||
/* | ||
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one | ||
* or more contributor license agreements. Licensed under the "Elastic License | ||
* 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side | ||
* Public License v 1"; you may not use this file except in compliance with, at | ||
* your election, the "Elastic License 2.0", the "GNU Affero General Public | ||
* License v3.0 only", or the "Server Side Public License, v 1". | ||
*/ | ||
|
||
import { BehaviorSubject } from 'rxjs'; | ||
import type { DashboardContainerInput } from '../../common'; | ||
import { initializeTrackPanel } from './track_panel'; | ||
import { initializeTrackOverlay } from './track_overlay'; | ||
import { initializeUnsavedChanges } from './unsaved_changes'; | ||
|
||
export interface InitialComponentState { | ||
anyMigrationRun: boolean; | ||
isEmbeddedExternally: boolean; | ||
lastSavedInput: DashboardContainerInput; | ||
lastSavedId: string | undefined; | ||
managed: boolean; | ||
} | ||
|
||
export function getDashboardApi( | ||
initialComponentState: InitialComponentState, | ||
untilEmbeddableLoaded: (id: string) => Promise<unknown> | ||
) { | ||
const animatePanelTransforms$ = new BehaviorSubject(false); // set panel transforms to false initially to avoid panels animating on initial render. | ||
const fullScreenMode$ = new BehaviorSubject(false); | ||
const managed$ = new BehaviorSubject(initialComponentState.managed); | ||
const savedObjectId$ = new BehaviorSubject<string | undefined>(initialComponentState.lastSavedId); | ||
|
||
const trackPanel = initializeTrackPanel(untilEmbeddableLoaded); | ||
|
||
return { | ||
...trackPanel, | ||
...initializeTrackOverlay(trackPanel.setFocusedPanelId), | ||
...initializeUnsavedChanges( | ||
initialComponentState.anyMigrationRun, | ||
initialComponentState.lastSavedInput | ||
), | ||
animatePanelTransforms$, | ||
fullScreenMode$, | ||
isEmbeddedExternally: initialComponentState.isEmbeddedExternally, | ||
managed$, | ||
savedObjectId: savedObjectId$, | ||
setAnimatePanelTransforms: (animate: boolean) => animatePanelTransforms$.next(animate), | ||
setFullScreenMode: (fullScreenMode: boolean) => fullScreenMode$.next(fullScreenMode), | ||
setManaged: (managed: boolean) => managed$.next(managed), | ||
setSavedObjectId: (id: string | undefined) => savedObjectId$.next(id), | ||
}; | ||
} |
35 changes: 35 additions & 0 deletions
35
src/plugins/dashboard/public/dashboard_api/track_overlay.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,35 @@ | ||
/* | ||
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one | ||
* or more contributor license agreements. Licensed under the "Elastic License | ||
* 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side | ||
* Public License v 1"; you may not use this file except in compliance with, at | ||
* your election, the "Elastic License 2.0", the "GNU Affero General Public | ||
* License v3.0 only", or the "Server Side Public License, v 1". | ||
*/ | ||
|
||
import { OverlayRef } from '@kbn/core-mount-utils-browser'; | ||
import { BehaviorSubject } from 'rxjs'; | ||
|
||
export function initializeTrackOverlay(setFocusedPanelId: (id: string | undefined) => void) { | ||
let overlayRef: OverlayRef; | ||
const hasOverlays$ = new BehaviorSubject(false); | ||
|
||
function clearOverlays() { | ||
hasOverlays$.next(false); | ||
setFocusedPanelId(undefined); | ||
overlayRef?.close(); | ||
} | ||
|
||
return { | ||
clearOverlays, | ||
hasOverlays$, | ||
openOverlay: (ref: OverlayRef, options?: { focusedPanelId?: string }) => { | ||
clearOverlays(); | ||
hasOverlays$.next(true); | ||
overlayRef = ref; | ||
if (options?.focusedPanelId) { | ||
setFocusedPanelId(options.focusedPanelId); | ||
} | ||
}, | ||
}; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,93 @@ | ||
/* | ||
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one | ||
* or more contributor license agreements. Licensed under the "Elastic License | ||
* 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side | ||
* Public License v 1"; you may not use this file except in compliance with, at | ||
* your election, the "Elastic License 2.0", the "GNU Affero General Public | ||
* License v3.0 only", or the "Server Side Public License, v 1". | ||
*/ | ||
|
||
import { BehaviorSubject } from 'rxjs'; | ||
|
||
export function initializeTrackPanel(untilEmbeddableLoaded: (id: string) => Promise<unknown>) { | ||
const expandedPanelId$ = new BehaviorSubject<string | undefined>(undefined); | ||
const focusedPanelId$ = new BehaviorSubject<string | undefined>(undefined); | ||
const highlightPanelId$ = new BehaviorSubject<string | undefined>(undefined); | ||
const scrollToPanelId$ = new BehaviorSubject<string | undefined>(undefined); | ||
let scrollPosition: number | undefined; | ||
|
||
function setScrollToPanelId(id: string | undefined) { | ||
if (scrollToPanelId$.value !== id) scrollToPanelId$.next(id); | ||
} | ||
|
||
function setExpandedPanelId(id: string | undefined) { | ||
if (expandedPanelId$.value !== id) expandedPanelId$.next(id); | ||
} | ||
|
||
return { | ||
expandedPanelId: expandedPanelId$, | ||
expandPanel: (panelId: string) => { | ||
const isPanelExpanded = Boolean(expandedPanelId$.value); | ||
|
||
if (isPanelExpanded) { | ||
setExpandedPanelId(undefined); | ||
setScrollToPanelId(panelId); | ||
return; | ||
} | ||
|
||
setExpandedPanelId(panelId); | ||
if (window.scrollY > 0) { | ||
scrollPosition = window.scrollY; | ||
} | ||
}, | ||
focusedPanelId$, | ||
highlightPanelId$, | ||
highlightPanel: (panelRef: HTMLDivElement) => { | ||
const id = highlightPanelId$.value; | ||
|
||
if (id && panelRef) { | ||
untilEmbeddableLoaded(id).then(() => { | ||
panelRef.classList.add('dshDashboardGrid__item--highlighted'); | ||
// Removes the class after the highlight animation finishes | ||
setTimeout(() => { | ||
panelRef.classList.remove('dshDashboardGrid__item--highlighted'); | ||
}, 5000); | ||
}); | ||
} | ||
highlightPanelId$.next(undefined); | ||
}, | ||
scrollToPanelId$, | ||
scrollToPanel: async (panelRef: HTMLDivElement) => { | ||
const id = scrollToPanelId$.value; | ||
if (!id) return; | ||
|
||
untilEmbeddableLoaded(id).then(() => { | ||
setScrollToPanelId(undefined); | ||
if (scrollPosition) { | ||
panelRef.ontransitionend = () => { | ||
// Scroll to the last scroll position after the transition ends to ensure the panel is back in the right position before scrolling | ||
// This is necessary because when an expanded panel collapses, it takes some time for the panel to return to its original position | ||
window.scrollTo({ top: scrollPosition }); | ||
scrollPosition = undefined; | ||
panelRef.ontransitionend = null; | ||
}; | ||
return; | ||
} | ||
|
||
panelRef.scrollIntoView({ block: 'center' }); | ||
}); | ||
}, | ||
scrollToTop: () => { | ||
window.scroll(0, 0); | ||
}, | ||
setExpandedPanelId, | ||
setFocusedPanelId: (id: string | undefined) => { | ||
if (focusedPanelId$.value !== id) focusedPanelId$.next(id); | ||
setScrollToPanelId(id); | ||
}, | ||
setHighlightPanelId: (id: string | undefined) => { | ||
if (highlightPanelId$.value !== id) highlightPanelId$.next(id); | ||
}, | ||
setScrollToPanelId, | ||
}; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
35 changes: 35 additions & 0 deletions
35
src/plugins/dashboard/public/dashboard_api/unsaved_changes.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,35 @@ | ||
/* | ||
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one | ||
* or more contributor license agreements. Licensed under the "Elastic License | ||
* 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side | ||
* Public License v 1"; you may not use this file except in compliance with, at | ||
* your election, the "Elastic License 2.0", the "GNU Affero General Public | ||
* License v3.0 only", or the "Server Side Public License, v 1". | ||
*/ | ||
|
||
import { BehaviorSubject } from 'rxjs'; | ||
import type { DashboardContainerInput } from '../../common'; | ||
|
||
export function initializeUnsavedChanges( | ||
anyMigrationRun: boolean, | ||
lastSavedInput: DashboardContainerInput | ||
) { | ||
const hasRunMigrations$ = new BehaviorSubject(anyMigrationRun); | ||
const hasUnsavedChanges$ = new BehaviorSubject(false); | ||
const lastSavedInput$ = new BehaviorSubject<DashboardContainerInput>(lastSavedInput); | ||
|
||
return { | ||
hasRunMigrations$, | ||
hasUnsavedChanges$, | ||
lastSavedInput$, | ||
setHasUnsavedChanges: (hasUnsavedChanges: boolean) => | ||
hasUnsavedChanges$.next(hasUnsavedChanges), | ||
setLastSavedInput: (input: DashboardContainerInput) => { | ||
lastSavedInput$.next(input); | ||
|
||
// if we set the last saved input, it means we have saved this Dashboard - therefore clientside migrations have | ||
// been serialized into the SO. | ||
hasRunMigrations$.next(false); | ||
}, | ||
}; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.