diff --git a/x-pack/plugins/infra/public/components/saved_views/toolbar_control.tsx b/x-pack/plugins/infra/public/components/saved_views/toolbar_control.tsx index c66aea669682e..d481d465d6daa 100644 --- a/x-pack/plugins/infra/public/components/saved_views/toolbar_control.tsx +++ b/x-pack/plugins/infra/public/components/saved_views/toolbar_control.tsx @@ -36,6 +36,7 @@ export function SavedViewsToolbarControls(props: Props) { const [modalOpen, setModalOpen] = useState(false); const [isInvalid, setIsInvalid] = useState(false); const [createModalOpen, setCreateModalOpen] = useState(false); + const [viewName, setViewName] = useState(''); const openSaveModal = useCallback(() => { setIsInvalid(false); setCreateModalOpen(true); @@ -57,6 +58,15 @@ export function SavedViewsToolbarControls(props: Props) { [props.viewState, saveView] ); + const changeView = useCallback( + (viewState: ViewState & { name: string }) => { + // INFO: All views have a name along side their state. + setViewName(viewState.name); + props.onViewChange(viewState); + }, + [props] + ); + useEffect(() => { if (errorOnCreate) { setIsInvalid(true); @@ -85,6 +95,13 @@ export function SavedViewsToolbarControls(props: Props) { } }, [errorOnCreate, errorOnFind, kibana]); + useEffect(() => { + if (!viewName) { + const [defaultView] = views.filter((v) => v.isDefault); + setViewName(defaultView.name); + } + }, [views, setViewName, viewName]); + return ( <> @@ -95,10 +112,7 @@ export function SavedViewsToolbarControls(props: Props) { /> - + {viewName} @@ -111,7 +125,7 @@ export function SavedViewsToolbarControls(props: Props) { views={views} deleteView={deleteView} close={closeModal} - setView={props.onViewChange} + setView={changeView} /> )}