mirror of https://github.com/grafana/grafana
Search: Toggle Search based on search query (#23648)
* Search: Toggle Search based on search query * Search: Fix types and closed search param * Search: Remove appEvents from SearchWrapper * Search: Reset folder on close Co-Authored-By: Alexander Zobnin <alexanderzobnin@gmail.com> * Search: Disable reloadOnSearch for manage dashboards urls Co-authored-by: Alexander Zobnin <alexanderzobnin@gmail.com>pull/23675/head
parent
55c306eb6d
commit
8709c9a8a5
@ -1,34 +1,49 @@ |
||||
import React, { FC, useState, useEffect } from 'react'; |
||||
import { appEvents } from 'app/core/core'; |
||||
import { CoreEvents } from 'app/types'; |
||||
import React, { FC, memo } from 'react'; |
||||
import { MapDispatchToProps, MapStateToProps } from 'react-redux'; |
||||
import { getLocationQuery } from 'app/core/selectors/location'; |
||||
import { updateLocation } from 'app/core/reducers/location'; |
||||
import { connectWithStore } from 'app/core/utils/connectWithReduxStore'; |
||||
import { StoreState } from 'app/types'; |
||||
import { DashboardSearch } from './DashboardSearch'; |
||||
import { OpenSearchParams } from '../types'; |
||||
|
||||
export const SearchWrapper: FC = () => { |
||||
const [isOpen, setIsOpen] = useState(false); |
||||
const [payload, setPayload] = useState({}); |
||||
|
||||
useEffect(() => { |
||||
const openSearch = (payload: OpenSearchParams) => { |
||||
setIsOpen(true); |
||||
setPayload(payload); |
||||
}; |
||||
|
||||
const closeOnItemClick = (payload: any) => { |
||||
// Detect if the event was emitted by clicking on search item
|
||||
if (payload?.target === 'search-item' && isOpen) { |
||||
setIsOpen(false); |
||||
} |
||||
}; |
||||
|
||||
appEvents.on(CoreEvents.showDashSearch, openSearch); |
||||
appEvents.on(CoreEvents.hideDashSearch, closeOnItemClick); |
||||
|
||||
return () => { |
||||
appEvents.off(CoreEvents.showDashSearch, openSearch); |
||||
appEvents.off(CoreEvents.hideDashSearch, closeOnItemClick); |
||||
}; |
||||
}, [isOpen]); |
||||
|
||||
return isOpen ? <DashboardSearch onCloseSearch={() => setIsOpen(false)} payload={payload} /> : null; |
||||
|
||||
interface OwnProps { |
||||
search?: string | null; |
||||
folder?: string; |
||||
queryText?: string; |
||||
filter?: string; |
||||
} |
||||
|
||||
interface DispatchProps { |
||||
updateLocation: typeof updateLocation; |
||||
} |
||||
|
||||
export type Props = OwnProps & DispatchProps; |
||||
|
||||
export const SearchWrapper: FC<Props> = memo(({ search, folder, updateLocation }) => { |
||||
const isOpen = search === 'open'; |
||||
|
||||
const closeSearch = () => { |
||||
if (search === 'open') { |
||||
updateLocation({ |
||||
query: { |
||||
search: null, |
||||
folder: null, |
||||
}, |
||||
partial: true, |
||||
}); |
||||
} |
||||
}; |
||||
|
||||
return isOpen ? <DashboardSearch onCloseSearch={closeSearch} folder={folder} /> : null; |
||||
}); |
||||
|
||||
const mapStateToProps: MapStateToProps<{}, OwnProps, StoreState> = (state: StoreState) => { |
||||
const { search, folder } = getLocationQuery(state.location); |
||||
return { search, folder }; |
||||
}; |
||||
|
||||
const mapDispatchToProps: MapDispatchToProps<DispatchProps, OwnProps> = { |
||||
updateLocation, |
||||
}; |
||||
|
||||
export default connectWithStore(SearchWrapper, mapStateToProps, mapDispatchToProps); |
||||
|
Loading…
Reference in new issue