-
-
{primaryText}
+
+
+
{primaryText}
{secondaryText}
);
@@ -312,31 +302,33 @@ function getStyles(theme: GrafanaTheme2, isDragActive?: boolean) {
display: flex;
flex-direction: column;
width: 100%;
+ padding: ${theme.spacing(2)};
+ border-radius: 2px;
+ border: 1px dashed ${theme.colors.border.strong};
+ background-color: ${isDragActive ? theme.colors.background.secondary : theme.colors.background.primary};
+ cursor: pointer;
+ align-items: center;
+ justify-content: center;
`,
dropzone: css`
display: flex;
- flex: 1;
flex-direction: column;
- align-items: center;
- padding: ${theme.spacing(6)};
- border-radius: 2px;
- border: 2px dashed ${theme.colors.border.medium};
- background-color: ${isDragActive ? theme.colors.background.secondary : theme.colors.background.primary};
- cursor: pointer;
`,
- iconWrapper: css`
- display: flex;
- flex-direction: column;
- align-items: center;
+ defaultDropZone: css`
+ text-align: center;
+ `,
+ icon: css`
+ margin-bottom: ${theme.spacing(1)};
+ `,
+ primaryText: css`
+ margin-bottom: ${theme.spacing(1)};
`,
acceptContainer: css`
- display: flex;
+ text-align: center;
+ margin: 0;
`,
- acceptedFiles: css`
- flex-grow: 1;
- `,
- acceptMargin: css`
- margin: ${theme.spacing(2, 0, 1)};
+ acceptSeparator: css`
+ margin: 0 ${theme.spacing(1)};
`,
small: css`
color: ${theme.colors.text.secondary};
diff --git a/public/app/features/datasource-drawer/DataSourceDrawer.test.ts b/public/app/features/datasource-drawer/DataSourceDrawer.test.ts
deleted file mode 100644
index 918ea38ac8e..00000000000
--- a/public/app/features/datasource-drawer/DataSourceDrawer.test.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import { DataSourceInstanceSettings } from '@grafana/data';
-import { DataSourceJsonData, DataSourceRef } from '@grafana/schema';
-
-import { isDataSourceMatch } from './DataSourceDrawer';
-
-describe('DataSourceDrawer', () => {
- describe('isDataSourceMatch', () => {
- const dataSourceInstanceSettings = { uid: 'a' } as DataSourceInstanceSettings
;
-
- it('matches a string with the uid', () => {
- expect(isDataSourceMatch(dataSourceInstanceSettings, 'a')).toBeTruthy();
- });
- it('matches a datasource with a datasource by the uid', () => {
- expect(
- isDataSourceMatch(dataSourceInstanceSettings, { uid: 'a' } as DataSourceInstanceSettings)
- ).toBeTruthy();
- });
- it('matches a datasource ref with a datasource by the uid', () => {
- expect(isDataSourceMatch(dataSourceInstanceSettings, { uid: 'a' } as DataSourceRef)).toBeTruthy();
- });
-
- it('doesnt match with null', () => {
- expect(isDataSourceMatch(dataSourceInstanceSettings, null)).toBeFalsy();
- });
- it('doesnt match a datasource to a non matching string', () => {
- expect(isDataSourceMatch(dataSourceInstanceSettings, 'b')).toBeFalsy();
- });
- it('doesnt match a datasource with a different datasource uid', () => {
- expect(
- isDataSourceMatch(dataSourceInstanceSettings, { uid: 'b' } as DataSourceInstanceSettings)
- ).toBeFalsy();
- });
- it('doesnt match a datasource with a datasource ref with a different uid', () => {
- expect(isDataSourceMatch(dataSourceInstanceSettings, { uid: 'b' } as DataSourceRef)).toBeFalsy();
- });
- });
-});
diff --git a/public/app/features/datasource-drawer/DataSourceDrawer.tsx b/public/app/features/datasource-drawer/DataSourceDrawer.tsx
deleted file mode 100644
index 4e7936bce86..00000000000
--- a/public/app/features/datasource-drawer/DataSourceDrawer.tsx
+++ /dev/null
@@ -1,161 +0,0 @@
-import { css } from '@emotion/css';
-import React, { useCallback, useState } from 'react';
-
-import { DataSourceInstanceSettings, DataSourceJsonData, DataSourceRef, GrafanaTheme2 } from '@grafana/data';
-import {
- Button,
- CustomScrollbar,
- Drawer,
- FileDropzone,
- FileDropzoneDefaultChildren,
- Input,
- ModalsController,
- useStyles2,
-} from '@grafana/ui';
-
-import { DataSourceCard } from './components/DataSourceCard';
-import { DataSourceDisplay } from './components/DataSourceDisplay';
-import { PickerContentProps, DataSourceDrawerProps } from './types';
-
-export function DataSourceDrawer(props: DataSourceDrawerProps) {
- const { current, onChange } = props;
- const styles = useStyles2(getStyles);
-
- return (
-
- {({ showModal, hideModal }) => (
-
- )}
-
- );
-}
-
-function PickerContent(props: PickerContentProps) {
- const { datasources, enableFileUpload, recentlyUsed = [], onChange, fileUploadOptions, onDismiss, current } = props;
- const changeCallback = useCallback(
- (ds: string) => {
- onChange(ds);
- },
- [onChange]
- );
-
- const [filterTerm, onFilterChange] = useState('');
- const styles = useStyles2(getStyles);
-
- const filteredDataSources = datasources.filter((ds) => {
- return ds?.name.toLocaleLowerCase().indexOf(filterTerm.toLocaleLowerCase()) !== -1;
- });
-
- return (
-
-
-
- {
- onFilterChange(e.currentTarget.value);
- }}
- value={filterTerm}
- >
-
-
-
- {recentlyUsed
- .map((uid) => filteredDataSources.find((ds) => ds.uid === uid))
- .map((ds) => {
- if (!ds) {
- return null;
- }
- return (
-
- );
- })}
- {recentlyUsed && recentlyUsed.length > 0 &&
}
- {filteredDataSources.map((ds) => (
-
- ))}
-
-
- {enableFileUpload && (
-
- undefined}
- options={{
- ...fileUploadOptions,
- onDrop: (...args) => {
- onDismiss();
- fileUploadOptions?.onDrop?.(...args);
- },
- }}
- >
-
-
-
- )}
-
-
-
- {[ds.meta.name, ds.url, ds.isDefault && ]}
-
-
-
-
- {ds.name}
-
- );
-}
-
-function getStyles(theme: GrafanaTheme2) {
- return {
- selectedDataSource: css`
- background-color: ${theme.colors.emphasize(theme.colors.background.secondary, 0.1)};
- `,
- };
-}
diff --git a/public/app/features/datasources/components/picker/DataSourceCard.tsx b/public/app/features/datasources/components/picker/DataSourceCard.tsx
new file mode 100644
index 00000000000..fd9c65234c2
--- /dev/null
+++ b/public/app/features/datasources/components/picker/DataSourceCard.tsx
@@ -0,0 +1,54 @@
+import { css, cx } from '@emotion/css';
+import React from 'react';
+
+import { DataSourceInstanceSettings, GrafanaTheme2 } from '@grafana/data';
+import { Card, TagList, useStyles2 } from '@grafana/ui';
+
+interface DataSourceCardProps {
+ ds: DataSourceInstanceSettings;
+ onClick: () => void;
+ selected: boolean;
+}
+
+export function DataSourceCard({ ds, onClick, selected }: DataSourceCardProps) {
+ const styles = useStyles2(getStyles);
+
+ return (
+
+ {ds.name}
+
+ {ds.meta.name}
+ {ds.meta.info.description}
+
+
+ 
+
+ {ds.isDefault ? : null}
+
+ );
+}
+
+// Get styles for the component
+function getStyles(theme: GrafanaTheme2) {
+ return {
+ card: css`
+ cursor: pointer;
+ background-color: ${theme.colors.background.primary};
+ border-bottom: 1px solid ${theme.colors.border.weak};
+ // Move to list component
+ margin-bottom: 0;
+ border-radius: 0;
+ `,
+ selected: css`
+ background-color: ${theme.colors.background.secondary};
+ `,
+ meta: css`
+ display: block;
+ overflow-wrap: unset;
+ white-space: nowrap;
+ width: 100%;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ `,
+ };
+}
diff --git a/public/app/features/datasources/components/picker/DataSourceDropdown.tsx b/public/app/features/datasources/components/picker/DataSourceDropdown.tsx
new file mode 100644
index 00000000000..8c563e11e00
--- /dev/null
+++ b/public/app/features/datasources/components/picker/DataSourceDropdown.tsx
@@ -0,0 +1,223 @@
+import { css } from '@emotion/css';
+import { useDialog } from '@react-aria/dialog';
+import { FocusScope } from '@react-aria/focus';
+import { useOverlay } from '@react-aria/overlays';
+import React, { useCallback, useRef, useState } from 'react';
+import { usePopper } from 'react-popper';
+
+import { DataSourceInstanceSettings, GrafanaTheme2 } from '@grafana/data';
+import { DataSourceJsonData } from '@grafana/schema';
+import { Button, CustomScrollbar, Icon, Input, ModalsController, Portal, useStyles2 } from '@grafana/ui';
+
+import { DataSourceList } from './DataSourceList';
+import { DataSourceLogo, DataSourceLogoPlaceHolder } from './DataSourceLogo';
+import { DataSourceModal } from './DataSourceModal';
+import { PickerContentProps, DataSourceDrawerProps } from './types';
+import { dataSourceName as dataSourceLabel } from './utils';
+
+export function DataSourceDropdown(props: DataSourceDrawerProps) {
+ const { current, onChange, ...restProps } = props;
+
+ const [isOpen, setOpen] = useState(false);
+ const [markerElement, setMarkerElement] = useState();
+ const [selectorElement, setSelectorElement] = useState();
+ const [filterTerm, setFilterTerm] = useState();
+
+ const popper = usePopper(markerElement, selectorElement, {
+ placement: 'bottom-start',
+ });
+
+ const ref = useRef(null);
+ const { overlayProps, underlayProps } = useOverlay(
+ {
+ onClose: () => {
+ setFilterTerm(undefined);
+ setOpen(false);
+ },
+ isDismissable: true,
+ isOpen,
+ shouldCloseOnInteractOutside: (element) => {
+ return markerElement ? !markerElement.isSameNode(element) : false;
+ },
+ },
+ ref
+ );
+ const { dialogProps } = useDialog({}, ref);
+
+ const styles = useStyles2(getStylesDropdown);
+
+ return (
+
+ {isOpen ? (
+
+ : }
+ suffix={}
+ placeholder={dataSourceLabel(current)}
+ className={styles.input}
+ onChange={(e) => {
+ setFilterTerm(e.currentTarget.value);
+ }}
+ ref={setMarkerElement}
+ >
+
+
+
+
) => {
+ setFilterTerm(undefined);
+ setOpen(false);
+ onChange(ds);
+ }}
+ onClose={() => {
+ setOpen(false);
+ }}
+ current={current}
+ style={popper.styles.popper}
+ ref={setSelectorElement}
+ {...restProps}
+ onDismiss={() => {}}
+ >
+
+ ) : (
+
{
+ setOpen(true);
+ }}
+ >
+ }
+ suffix={}
+ value={dataSourceLabel(current)}
+ onFocus={() => {
+ setOpen(true);
+ }}
+ />
+
+ )}
+
+
+
+ !ds.meta.builtIn && ds.name.includes(filterTerm ?? '')}
+ >
+
+
+
+
+ {onClickAddCSV && (
+
+ )}
+
+ {({ showModal, hideModal }) => (
+
+ )}
+
+
+
+ {options.map((ds) => (
+
+ ))}
+
+ );
+ }
+}
diff --git a/public/app/features/datasource-drawer/components/DataSourceDisplay.tsx b/public/app/features/datasources/components/picker/DataSourceLogo.tsx
similarity index 57%
rename from public/app/features/datasource-drawer/components/DataSourceDisplay.tsx
rename to public/app/features/datasources/components/picker/DataSourceLogo.tsx
index 45e46c6414a..cb05adb3c37 100644
--- a/public/app/features/datasource-drawer/components/DataSourceDisplay.tsx
+++ b/public/app/features/datasources/components/picker/DataSourceLogo.tsx
@@ -5,36 +5,38 @@ import { DataSourceInstanceSettings, DataSourceJsonData, GrafanaTheme2 } from '@
import { DataSourceRef } from '@grafana/schema';
import { useStyles2 } from '@grafana/ui';
-export interface DataSourceDisplayProps {
+export interface DataSourceLogoProps {
dataSource: DataSourceInstanceSettings | string | DataSourceRef | null | undefined;
}
-export function DataSourceDisplay(props: DataSourceDisplayProps) {
+export function DataSourceLogo(props: DataSourceLogoProps) {
const { dataSource } = props;
const styles = useStyles2(getStyles);
if (!dataSource) {
- return Unknown;
+ return null;
}
if (typeof dataSource === 'string') {
- return ${dataSource} - not found;
+ return null;
}
if ('name' in dataSource) {
return (
- <>
- 
- {dataSource.name}
-
+
);
}
- return {dataSource.uid} - not found;
+ return null;
+}
+
+export function DataSourceLogoPlaceHolder() {
+ const styles = useStyles2(getStyles);
+ return ;
}
function getStyles(theme: GrafanaTheme2) {
@@ -42,7 +44,6 @@ function getStyles(theme: GrafanaTheme2) {
pickerDSLogo: css`
height: 20px;
width: 20px;
- margin-right: ${theme.spacing(1)};
`,
};
}
diff --git a/public/app/features/datasources/components/picker/DataSourceModal.tsx b/public/app/features/datasources/components/picker/DataSourceModal.tsx
new file mode 100644
index 00000000000..99f86a0e7b4
--- /dev/null
+++ b/public/app/features/datasources/components/picker/DataSourceModal.tsx
@@ -0,0 +1,160 @@
+import { css } from '@emotion/css';
+import React, { useState } from 'react';
+import { DropzoneOptions } from 'react-dropzone';
+
+import { DataSourceInstanceSettings, DataSourceRef, GrafanaTheme2 } from '@grafana/data';
+import {
+ Modal,
+ FileDropzone,
+ FileDropzoneDefaultChildren,
+ CustomScrollbar,
+ LinkButton,
+ useStyles2,
+ Input,
+ Icon,
+} from '@grafana/ui';
+import * as DFImport from 'app/features/dataframe-import';
+
+import { DataSourceList } from './DataSourceList';
+
+interface DataSourceModalProps {
+ onChange: (ds: DataSourceInstanceSettings) => void;
+ current: DataSourceRef | string | null | undefined;
+ onDismiss: () => void;
+ datasources: DataSourceInstanceSettings[];
+ recentlyUsed?: string[];
+ enableFileUpload?: boolean;
+ fileUploadOptions?: DropzoneOptions;
+}
+
+export function DataSourceModal({
+ enableFileUpload,
+ fileUploadOptions,
+ onChange,
+ current,
+ onDismiss,
+}: DataSourceModalProps) {
+ const styles = useStyles2(getDataSourceModalStyles);
+ const [search, setSearch] = useState('');
+
+ return (
+
+
+
+ }
+ placeholder="Search data source"
+ onChange={(e) => setSearch(e.currentTarget.value)}
+ />
+
+ ds.name.includes(search) && ds.name !== '-- Grafana --'}
+ onChange={onChange}
+ current={current}
+ />
+
+
+
+
+ !!ds.meta.builtIn}
+ dashboard
+ mixed
+ onChange={onChange}
+ current={current}
+ />
+ {enableFileUpload && (
+ undefined}
+ options={{
+ maxSize: DFImport.maxFileSize,
+ multiple: false,
+ accept: DFImport.acceptedFiles,
+ ...fileUploadOptions,
+ onDrop: (...args) => {
+ fileUploadOptions?.onDrop?.(...args);
+ onDismiss();
+ },
+ }}
+ >
+
+
+ )}
+
+
+
+ Configure a new data source
+
+
+
+