IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2024-11-24 09:50:29 -06:00
Code Issues Packages Projects Releases Wiki Activity

LibraryPanels: Add search input back to add panel widget (#32719)

Browse Source
This commit is contained in:
kay delaney 2021-04-07 10:27:45 +01:00 committed by GitHub
parent 0f7d8ae6d2
commit 71e8a03c46
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 18 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
public/app/features/dashboard/components/AddPanelWidget/AddPanelWidget.tsx
View File

@ -10,6 +10,7 @@ import { GrafanaTheme } from '@grafana/data';
import config from 'app/core/config';
import store from 'app/core/store';
import { FilterInput } from 'app/core/components/FilterInput/FilterInput';
import { addPanel } from 'app/features/dashboard/state/reducers';
import { DashboardModel, PanelModel } from '../../state';
import { LibraryPanelsView } from '../../../library-panels/components/LibraryPanelsView/LibraryPanelsView';
@ -55,6 +56,7 @@ const getCopiedPanelPlugins = () => {
export const AddPanelWidgetUnconnected: React.FC<Props> = ({ panel, dashboard }) => {
const [addPanelView, setAddPanelView] = useState(false);
const [searchQuery, setSearchQuery] = useState('');
const onCancelAddPanel = (evt: React.MouseEvent<HTMLButtonElement>) => {
evt.preventDefault();
@ -138,12 +140,17 @@ export const AddPanelWidgetUnconnected: React.FC<Props> = ({ panel, dashboard })
{addPanelView ? 'Add panel from panel library' : 'Add panel'}
</AddPanelWidgetHandle>
{addPanelView ? (
<>
<div className={styles.panelSearchInput}>
<FilterInput width={0} value={searchQuery} onChange={setSearchQuery} placeholder={'Search global panels'} />
</div>
<LibraryPanelsView
className={styles.libraryPanelsWrapper}
onClickCard={(panel) => onAddLibraryPanel(panel)}
showSecondaryActions={false}
searchString={''}
searchString={searchQuery}
/>
</>
) : (
<div className={styles.actionsWrapper}>
<div className={styles.actionsRow}>
@ -219,6 +226,10 @@ const getStyles = (theme: GrafanaTheme) => {
`;
return {
panelSearchInput: css`
padding-left: ${theme.spacing.sm};
padding-right: ${theme.spacing.sm};
`,
wrapper: css`
overflow: hidden;
outline: 2px dotted transparent;

1
public/app/features/dashboard/components/AddPanelWidget/__snapshots__/AddPanelWidget.test.tsx.snap
View File

@ -14,6 +14,7 @@ exports[`Render should render component 1`] = `
"headerRow": "css-1ka09x",
"libraryPanelsWrapper": "css-18m13of",
"noMargin": "css-u023fv",
"panelSearchInput": "css-2ug8g3",
"wrapper": "css-1sl7nld",
}
}