mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Chore: Remove DashboardSearchModal/SearchWrapper since they're no longer used (#70374)
remove DashboardSearchModal/SearchWrapper since they're no longer used
This commit is contained in:
Ashley Harrison
GitHub
parent
0325fdecb8
commit
d65c9396f3
@ -1,211 +0,0 @@
|
|||||||
import { css } from '@emotion/css';
|
|
||||||
import { useDialog } from '@react-aria/dialog';
|
|
||||||
import { FocusScope } from '@react-aria/focus';
|
|
||||||
import { OverlayContainer, useOverlay } from '@react-aria/overlays';
|
|
||||||
import React, { useEffect, useRef, useState } from 'react';
|
|
||||||
import CSSTransition from 'react-transition-group/CSSTransition';
|
|
||||||
|
|
||||||
import { GrafanaTheme2 } from '@grafana/data';
|
|
||||||
import { IconButton, useStyles2 } from '@grafana/ui';
|
|
||||||
|
|
||||||
import { useKeyNavigationListener } from '../hooks/useSearchKeyboardSelection';
|
|
||||||
import { SearchView } from '../page/components/SearchView';
|
|
||||||
import { getSearchStateManager } from '../state/SearchStateManager';
|
|
||||||
|
|
||||||
const ANIMATION_DURATION = 200;
|
|
||||||
|
|
||||||
export interface Props {
|
|
||||||
isOpen: boolean;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function DashboardSearchModal({ isOpen }: Props) {
|
|
||||||
const styles = useStyles2(getStyles);
|
|
||||||
const animStyles = useStyles2((theme) => getAnimStyles(theme, ANIMATION_DURATION));
|
|
||||||
const stateManager = getSearchStateManager();
|
|
||||||
const state = stateManager.useState();
|
|
||||||
const ref = useRef<HTMLDivElement>(null);
|
|
||||||
const backdropRef = useRef(null);
|
|
||||||
const [animationComplete, setAnimationComplete] = useState(false);
|
|
||||||
const { overlayProps, underlayProps } = useOverlay({ isOpen, onClose: stateManager.onCloseSearch }, ref);
|
|
||||||
const { dialogProps } = useDialog({}, ref);
|
|
||||||
const { onKeyDown, keyboardEvents } = useKeyNavigationListener();
|
|
||||||
|
|
||||||
useEffect(() => stateManager.initStateFromUrl(), [stateManager]);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<OverlayContainer>
|
|
||||||
<CSSTransition nodeRef={backdropRef} appear in timeout={ANIMATION_DURATION} classNames={animStyles.underlay}>
|
|
||||||
<div ref={backdropRef} onClick={stateManager.onCloseSearch} className={styles.underlay} {...underlayProps} />
|
|
||||||
</CSSTransition>
|
|
||||||
<CSSTransition
|
|
||||||
nodeRef={ref}
|
|
||||||
onEntered={() => setAnimationComplete(true)}
|
|
||||||
appear
|
|
||||||
in
|
|
||||||
timeout={ANIMATION_DURATION}
|
|
||||||
classNames={animStyles.overlay}
|
|
||||||
>
|
|
||||||
<div ref={ref} className={styles.overlay} {...overlayProps} {...dialogProps}>
|
|
||||||
<FocusScope contain autoFocus>
|
|
||||||
<div className={styles.searchField}>
|
|
||||||
<div>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
placeholder={
|
|
||||||
state.includePanels ? 'Search dashboards and panels by name' : 'Search dashboards by name'
|
|
||||||
}
|
|
||||||
value={state.query ?? ''}
|
|
||||||
onChange={(e) => stateManager.onQueryChange(e.currentTarget.value)}
|
|
||||||
onKeyDown={onKeyDown}
|
|
||||||
tabIndex={0}
|
|
||||||
spellCheck={false}
|
|
||||||
className={styles.input}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className={styles.closeBtn}>
|
|
||||||
<IconButton name="times" onClick={stateManager.onCloseSearch} size="xl" tooltip="Close search" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{animationComplete && (
|
|
||||||
<div className={styles.search}>
|
|
||||||
<SearchView showManage={false} keyboardEvents={keyboardEvents} />
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</FocusScope>
|
|
||||||
</div>
|
|
||||||
</CSSTransition>
|
|
||||||
</OverlayContainer>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
const getAnimStyles = (theme: GrafanaTheme2, animationDuration: number) => {
|
|
||||||
const commonTransition = {
|
|
||||||
transitionDuration: `${animationDuration}ms`,
|
|
||||||
transitionTimingFunction: theme.transitions.easing.easeInOut,
|
|
||||||
};
|
|
||||||
|
|
||||||
const underlayTransition = {
|
|
||||||
[theme.breakpoints.up('md')]: {
|
|
||||||
...commonTransition,
|
|
||||||
transitionProperty: 'opacity',
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
const underlayClosed = {
|
|
||||||
[theme.breakpoints.up('md')]: {
|
|
||||||
opacity: 0,
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
const underlayOpen = {
|
|
||||||
[theme.breakpoints.up('md')]: {
|
|
||||||
opacity: 1,
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
const overlayTransition = {
|
|
||||||
[theme.breakpoints.up('md')]: {
|
|
||||||
...commonTransition,
|
|
||||||
transitionProperty: 'height, width',
|
|
||||||
overflow: 'hidden',
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
const overlayClosed = {
|
|
||||||
height: '100%',
|
|
||||||
width: '100%',
|
|
||||||
[theme.breakpoints.up('md')]: {
|
|
||||||
height: '32px',
|
|
||||||
width: '50%',
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
const overlayOpen = {
|
|
||||||
height: '100%',
|
|
||||||
width: '100%',
|
|
||||||
[theme.breakpoints.up('md')]: {
|
|
||||||
height: '90%',
|
|
||||||
width: '75%',
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
return {
|
|
||||||
overlay: {
|
|
||||||
appear: css(overlayClosed),
|
|
||||||
appearActive: css(overlayTransition, overlayOpen),
|
|
||||||
appearDone: css(overlayOpen),
|
|
||||||
},
|
|
||||||
underlay: {
|
|
||||||
appear: css(underlayClosed),
|
|
||||||
appearActive: css(underlayTransition, underlayOpen),
|
|
||||||
appearDone: css(underlayOpen),
|
|
||||||
},
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
const getStyles = (theme: GrafanaTheme2) => {
|
|
||||||
return {
|
|
||||||
underlay: css`
|
|
||||||
background-color: ${theme.components.overlay.background};
|
|
||||||
backdrop-filter: blur(1px);
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
padding: 0;
|
|
||||||
position: fixed;
|
|
||||||
right: 0;
|
|
||||||
top: 0;
|
|
||||||
z-index: ${theme.zIndex.modalBackdrop};
|
|
||||||
`,
|
|
||||||
overlay: css`
|
|
||||||
background: ${theme.colors.background.primary};
|
|
||||||
border: 1px solid ${theme.components.panel.borderColor};
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
margin: 0 auto;
|
|
||||||
padding: ${theme.spacing(1)};
|
|
||||||
position: fixed;
|
|
||||||
height: 100%;
|
|
||||||
z-index: ${theme.zIndex.modal};
|
|
||||||
|
|
||||||
${theme.breakpoints.up('md')} {
|
|
||||||
border-radius: ${theme.shape.radius.default};
|
|
||||||
box-shadow: ${theme.shadows.z3};
|
|
||||||
left: 0;
|
|
||||||
margin: ${theme.spacing(0.5, 'auto', 0)};
|
|
||||||
padding: ${theme.spacing(1)};
|
|
||||||
right: 0;
|
|
||||||
}
|
|
||||||
`,
|
|
||||||
closeBtn: css`
|
|
||||||
right: -5px;
|
|
||||||
top: 0px;
|
|
||||||
z-index: 1;
|
|
||||||
position: absolute;
|
|
||||||
`,
|
|
||||||
searchField: css`
|
|
||||||
position: relative;
|
|
||||||
`,
|
|
||||||
search: css`
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
overflow: hidden;
|
|
||||||
height: 100%;
|
|
||||||
padding: ${theme.spacing(2, 0, 3, 0)};
|
|
||||||
`,
|
|
||||||
input: css`
|
|
||||||
box-sizing: border-box;
|
|
||||||
outline: none;
|
|
||||||
background-color: transparent;
|
|
||||||
background: transparent;
|
|
||||||
border-bottom: 1px solid ${theme.colors.border.medium};
|
|
||||||
font-size: 16px;
|
|
||||||
line-height: 30px;
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
&::placeholder {
|
|
||||||
color: ${theme.colors.text.disabled};
|
|
||||||
}
|
|
||||||
`,
|
|
||||||
};
|
|
||||||
};
|
|
||||||
@ -1,14 +0,0 @@
|
|||||||
import React, { memo } from 'react';
|
|
||||||
|
|
||||||
import { useUrlParams } from 'app/core/navigation/hooks';
|
|
||||||
|
|
||||||
import { DashboardSearchModal } from './DashboardSearchModal';
|
|
||||||
|
|
||||||
export const SearchWrapper = memo(() => {
|
|
||||||
const [params] = useUrlParams();
|
|
||||||
const isOpen = params.get('search') === 'open';
|
|
||||||
|
|
||||||
return isOpen ? <DashboardSearchModal isOpen={isOpen} /> : null;
|
|
||||||
});
|
|
||||||
|
|
||||||
SearchWrapper.displayName = 'SearchWrapper';
|
|
||||||
@ -1,2 +1 @@
|
|||||||
export { SearchItem } from './components/SearchItem';
|
export { SearchItem } from './components/SearchItem';
|
||||||
export { SearchWrapper } from './components/SearchWrapper';
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user