diff --git a/packages/grafana-e2e-selectors/src/selectors/pages.ts b/packages/grafana-e2e-selectors/src/selectors/pages.ts index d6326eb1efc..7baff5ebf5c 100644 --- a/packages/grafana-e2e-selectors/src/selectors/pages.ts +++ b/packages/grafana-e2e-selectors/src/selectors/pages.ts @@ -18,7 +18,6 @@ export const Pages = { }, DataSource: { name: 'data-testid Data source settings page name input field', - nameEditIcon: 'data-testid Data source settings page name edit icon button', delete: 'Data source settings page Delete button', readOnly: 'Data source settings page read only message', saveAndTest: 'data-testid Data source settings page Save and Test button', diff --git a/packages/grafana-e2e/src/flows/addDataSource.ts b/packages/grafana-e2e/src/flows/addDataSource.ts index 93e18c69694..38779572bd4 100644 --- a/packages/grafana-e2e/src/flows/addDataSource.ts +++ b/packages/grafana-e2e/src/flows/addDataSource.ts @@ -57,7 +57,6 @@ export const addDataSource = (config?: Partial) => { .should('be.visible') // prevents flakiness .click(); - e2e.pages.DataSource.nameEditIcon().click(); e2e.pages.DataSource.name().clear(); e2e.pages.DataSource.name().type(name); diff --git a/public/app/core/components/Page/types.ts b/public/app/core/components/Page/types.ts index 223f3836db6..6b9264324e6 100644 --- a/public/app/core/components/Page/types.ts +++ b/public/app/core/components/Page/types.ts @@ -26,7 +26,7 @@ export interface PageProps extends HTMLAttributes { } export interface PageInfoItem { - label: string | React.ReactNode; + label: string; value: React.ReactNode; } diff --git a/public/app/features/datasources/components/DataSourceDefaultSwitch.tsx b/public/app/features/datasources/components/DataSourceDefaultSwitch.tsx deleted file mode 100644 index 39026bfd1be..00000000000 --- a/public/app/features/datasources/components/DataSourceDefaultSwitch.tsx +++ /dev/null @@ -1,75 +0,0 @@ -import { css } from '@emotion/css'; -import React, { useEffect, useState } from 'react'; - -import { DataSourceSettings, GrafanaTheme2 } from '@grafana/data'; -import { InlineSwitch, Tooltip, useStyles2 } from '@grafana/ui'; - -interface Props { - dataSource: DataSourceSettings; - isDefault: boolean; - readOnly: boolean; - onUpdate: (dataSource: DataSourceSettings) => Promise; -} - -export function DataSourceDefaultSwitch({ dataSource, isDefault, readOnly, onUpdate }: Props) { - const [initialDataSource, setInitialDataSource] = useState(dataSource); - const styles = useStyles2(getStyles); - - const handleDefaultDataSourceChange = async (checked: boolean) => { - try { - await onUpdate({ ...initialDataSource, isDefault: checked }); - } catch (err) { - return; - } - }; - - // update this to read only initial dataSource load - // currently it picks up dataSource updates from form - useEffect(() => { - setInitialDataSource(dataSource); - }, [dataSource]); - - if (readOnly) { - return ( - -
- -
-
- ); - } - - return ( - ) => handleDefaultDataSourceChange(evt.currentTarget.checked)} - className={styles.switch} - disabled={readOnly} - /> - ); -} - -const getStyles = (theme: GrafanaTheme2) => { - return { - div: css({ - div: { - backgroundColor: 'transparent', - }, - }), - switch: css({ - padding: '0', - }), - }; -}; diff --git a/public/app/features/datasources/components/DataSourceTabPage.tsx b/public/app/features/datasources/components/DataSourceTabPage.tsx index 5b7d27ee5f4..964a7c77d94 100644 --- a/public/app/features/datasources/components/DataSourceTabPage.tsx +++ b/public/app/features/datasources/components/DataSourceTabPage.tsx @@ -18,26 +18,15 @@ export function DataSourceTabPage({ uid, pageId, navId }: Props) { const nav = useDataSourceSettingsNav(uid, pageId); const info = useDataSourceInfo({ - dataSource: nav.dataSource, dataSourcePluginName: nav.main.dataSourcePluginName, - isDefault: nav.dataSource.isDefault, - isReadOnly: nav.dataSource.readOnly, alertingSupported: nav.dataSourceHeader.alertingSupported, - onUpdate: nav.dataSourceHeader.onUpdate, }); return ( ( - - )} + renderTitle={(title) => } info={info} actions={} > diff --git a/public/app/features/datasources/components/EditDataSource.tsx b/public/app/features/datasources/components/EditDataSource.tsx index 4a46f3d6b7a..460fd603244 100644 --- a/public/app/features/datasources/components/EditDataSource.tsx +++ b/public/app/features/datasources/components/EditDataSource.tsx @@ -6,7 +6,7 @@ import { DataSourcePluginMeta, DataSourceSettings as DataSourceSettingsType, } from '@grafana/data'; -import { getDataSourceSrv, config } from '@grafana/runtime'; +import { getDataSourceSrv } from '@grafana/runtime'; import PageLoader from 'app/core/components/PageLoader/PageLoader'; import { DataSourceSettingsState, useDispatch } from 'app/types'; @@ -116,7 +116,6 @@ export function EditDataSourceView({ const hasAlertingEnabled = Boolean(dsi?.meta?.alerting ?? false); const isAlertManagerDatasource = dsi?.type === 'alertmanager'; const alertingSupported = hasAlertingEnabled || isAlertManagerDatasource; - const dataSourcePageHeader = config.featureToggles.dataSourcePageHeader; const onSubmit = async (e: React.MouseEvent | React.FormEvent) => { e.preventDefault(); @@ -158,16 +157,14 @@ export function EditDataSourceView({ - {!dataSourcePageHeader && ( - - )} + {plugin && ( diff --git a/public/app/features/datasources/components/EditDataSourceTitle.test.tsx b/public/app/features/datasources/components/EditDataSourceTitle.test.tsx deleted file mode 100644 index 4a2828aee45..00000000000 --- a/public/app/features/datasources/components/EditDataSourceTitle.test.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import { screen, render } from '@testing-library/react'; -import userEvent from '@testing-library/user-event'; -import React from 'react'; - -import { selectors } from '@grafana/e2e-selectors'; -import { getMockDataSource } from 'app/features/datasources/__mocks__'; - -import { EditDataSourceTitle } from './EditDataSourceTitle'; - -const setup = () => { - const props = { - dataSource: getMockDataSource(), - title: 'My Datasource', - readOnly: false, - onUpdate: jest.fn(), - onNameChange: jest.fn(), - }; - - return render(); -}; - -describe('', () => { - it('should render component', () => { - setup(); - const editButton = screen.queryByTestId(selectors.pages.DataSource.nameEditIcon); - const nameInput = screen.queryByTestId(selectors.pages.DataSource.name); - expect(editButton).toBeInTheDocument(); - expect(nameInput).not.toBeInTheDocument(); - }); - - it('should render nameInput by clicking edit icon button', async () => { - setup(); - const editButton = screen.getByTestId(selectors.pages.DataSource.nameEditIcon); - await userEvent.click(editButton); - const nameInput = screen.getByRole('textbox'); - - expect(nameInput).toBeInTheDocument(); - expect(editButton).not.toBeInTheDocument(); - }); -}); diff --git a/public/app/features/datasources/components/EditDataSourceTitle.tsx b/public/app/features/datasources/components/EditDataSourceTitle.tsx index ef9e368c965..ef180f64a0b 100644 --- a/public/app/features/datasources/components/EditDataSourceTitle.tsx +++ b/public/app/features/datasources/components/EditDataSourceTitle.tsx @@ -1,87 +1,19 @@ import { css } from '@emotion/css'; -import React, { useEffect, useState } from 'react'; +import React from 'react'; -import { DataSourceSettings, GrafanaTheme2 } from '@grafana/data'; -import { selectors } from '@grafana/e2e-selectors'; -import { IconButton, useStyles2, Input, Tooltip, Field } from '@grafana/ui'; +import { GrafanaTheme2 } from '@grafana/data'; +import { useStyles2 } from '@grafana/ui'; interface Props { - dataSource: DataSourceSettings; title: string; - readOnly: boolean; - onUpdate: (dataSource: DataSourceSettings) => Promise; } -export function EditDataSourceTitle({ dataSource, title, readOnly, onUpdate }: Props) { - const [isNameEditable, setIsNameEditable] = useState(false); - const [name, setName] = useState(title); - const [initialDataSource, setInitialDataSource] = useState(dataSource); +export function EditDataSourceTitle({ title }: Props) { const styles = useStyles2(getStyles); - const toggleEditMode = () => { - setIsNameEditable(!isNameEditable); - }; - - const handleNameChange = async (name: string) => { - toggleEditMode(); - if (name === '') { - setName(title); - return; - } - if (name !== title) { - try { - await onUpdate({ ...initialDataSource, name }); - } catch (err) { - return; - } - } - }; - - useEffect(() => { - setName(title); - }, [title]); - - // update this to read only initial dataSource load - // currently it picks up dataSource updates from form - useEffect(() => { - setInitialDataSource(dataSource); - }, [dataSource]); - return (
- {!isNameEditable ? ( -
-

{name}

- {!readOnly && ( - - - - )} -
- ) : ( -
- - ) => setName(evt.currentTarget.value)} - onBlur={(evt: React.FormEvent) => handleNameChange(evt.currentTarget.value)} - required - data-testid={selectors.pages.DataSource.name} - autoFocus={isNameEditable} - /> - -
- )} +

{title}

); } @@ -90,33 +22,17 @@ const getStyles = (theme: GrafanaTheme2) => { return { container: css({ marginBottom: theme.spacing(2), - }), - titleContainer: css({ - display: 'flex', - flexDirection: 'row', - alignItems: 'center', h1: { display: 'inline-block', }, }), title: css({ + display: 'inline-block', margin: '0 0 0 0', maxWidth: '40vw', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', }), - datasourceNameInput: css({ - input: { - fontSize: theme.typography.h1.fontSize, - width: '40vw', - padding: '6px 8px', - height: '40px', - }, - }), - editIcon: css({ - marginLeft: theme.spacing(1), - color: theme.colors.text.secondary, - }), }; }; diff --git a/public/app/features/datasources/components/useDataSourceInfo.tsx b/public/app/features/datasources/components/useDataSourceInfo.tsx index c3c45a29964..3efc61ac0b6 100644 --- a/public/app/features/datasources/components/useDataSourceInfo.tsx +++ b/public/app/features/datasources/components/useDataSourceInfo.tsx @@ -1,64 +1,25 @@ -import { css } from '@emotion/css'; import React from 'react'; -import { GrafanaTheme2 } from '@grafana/data'; -import { Badge, Icon, Tooltip, useStyles2 } from '@grafana/ui'; +import { Badge } from '@grafana/ui'; import { PageInfoItem } from 'app/core/components/Page/types'; import { DataSourceInfo } from '../types'; -import { DataSourceDefaultSwitch } from './DataSourceDefaultSwitch'; - export const useDataSourceInfo = (dataSourceInfo: DataSourceInfo): PageInfoItem[] => { const info: PageInfoItem[] = []; const alertingEnabled = dataSourceInfo.alertingSupported; - const styles = useStyles2(getStyles); info.push({ label: 'Type', - value: {dataSourceInfo.dataSourcePluginName}, - }); - - info.push({ - label: ( - -
- Default - -
-
- ), - value: ( - - ), + value: dataSourceInfo.dataSourcePluginName, }); info.push({ label: 'Alerting', value: ( -
- -
+ ), }); return info; }; - -const getStyles = (theme: GrafanaTheme2) => { - return { - tooltip: css({ - marginLeft: '4px', - }), - pageInfoValue: css({ - flexGrow: 1, - display: 'flex', - alignItems: 'center', - }), - }; -}; diff --git a/public/app/features/datasources/state/hooks.ts b/public/app/features/datasources/state/hooks.ts index 727da6cb05f..1f7cd778095 100644 --- a/public/app/features/datasources/state/hooks.ts +++ b/public/app/features/datasources/state/hooks.ts @@ -181,10 +181,8 @@ export const useDataSourceSettingsNav = (dataSourceId: string, pageId: string | dataSourcePluginName: datasourcePlugin?.name || '', active: true, }, - dataSource: dataSource, dataSourceHeader: { alertingSupported, - onUpdate: useUpdateDatasource(), }, }; }; diff --git a/public/app/features/datasources/types.ts b/public/app/features/datasources/types.ts index bab09f553cc..ecc8d8bf1ff 100644 --- a/public/app/features/datasources/types.ts +++ b/public/app/features/datasources/types.ts @@ -1,4 +1,4 @@ -import { DataQuery, DataSourceApi, DataSourceJsonData, DataSourcePlugin, DataSourceSettings } from '@grafana/data'; +import { DataQuery, DataSourceApi, DataSourceJsonData, DataSourcePlugin } from '@grafana/data'; export type GenericDataSourcePlugin = DataSourcePlugin>; @@ -18,10 +18,6 @@ export type DataSourcesRoutes = { export type DataSourceTestStatus = 'success' | 'warning' | 'error'; export type DataSourceInfo = { - dataSource: DataSourceSettings; dataSourcePluginName: string; - isDefault: boolean; - isReadOnly: boolean; alertingSupported: boolean; - onUpdate: (dataSource: DataSourceSettings) => Promise; };