cleanup dependencies

package.json

@@ -67,14 +67,14 @@
   "dependencies": {
     "@emotion/css": "^11.1.3",
     "@grafana/data": "9.4.3",
-    "@grafana/experimental": "^1.7.0",
     "@grafana/runtime": "9.4.3",
     "@grafana/ui": "10.1.0",
     "js-sql-parser": "^1.6.0",
     "pgsql-ast-parser": "^12.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^5.2.0",
+    "semver": "7.6.2",
     "tslib": "^2.5.3"
   },
   "packageManager": "[email protected]"

src/components/configEditor/AliasTableConfig.tsx

@@ -1,5 +1,5 @@
 import React, {ChangeEvent, useState} from 'react';
-import {ConfigSection} from '@grafana/experimental';
+import {ConfigSection} from 'components/experimental/ConfigSection';
 import {Input, Field, HorizontalGroup, Button} from '@grafana/ui';
 import {AliasTableEntry} from 'types/config';
 import allLabels from 'labels';

src/components/configEditor/DefaultDatabaseTableConfig.tsx

@@ -1,5 +1,5 @@
 import React, { SyntheticEvent } from 'react';
-import { ConfigSection } from '@grafana/experimental';
+import { ConfigSection } from 'components/experimental/ConfigSection';
 import { Input, Field } from '@grafana/ui';
 import allLabels from 'labels';
 

src/components/configEditor/HttpHeadersConfig.tsx

@@ -1,5 +1,5 @@
 import React, { ChangeEvent, useMemo, useState } from 'react';
-import { ConfigSection } from '@grafana/experimental';
+import { ConfigSection } from 'components/experimental/ConfigSection';
 import { Input, Field, HorizontalGroup, Switch, SecretInput, Button } from '@grafana/ui';
 import { CHHttpHeader } from 'types/config';
 import allLabels from 'labels';

src/components/configEditor/LogsConfig.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ConfigSection, ConfigSubSection } from '@grafana/experimental';
+import { ConfigSection, ConfigSubSection } from 'components/experimental/ConfigSection';
 import { Input, Field } from '@grafana/ui';
 import { OtelVersionSelect } from 'components/queryBuilder/OtelVersionSelect';
 import { ColumnHint } from 'types/queryBuilder';

src/components/configEditor/QuerySettingsConfig.tsx

@@ -1,6 +1,6 @@
 import React, { FormEvent } from 'react';
 import { Switch, Input, Field } from '@grafana/ui';
-import { ConfigSection } from '@grafana/experimental';
+import { ConfigSection } from 'components/experimental/ConfigSection';
 import allLabels from 'labels';
 
 interface QuerySettingsConfigProps {

src/components/configEditor/TracesConfig.tsx

@@ -1,6 +1,6 @@
 
 import React from 'react';
-import { ConfigSection, ConfigSubSection } from '@grafana/experimental';
+import { ConfigSection, ConfigSubSection } from 'components/experimental/ConfigSection';
 import { Input, Field } from '@grafana/ui';
 import { OtelVersionSelect } from 'components/queryBuilder/OtelVersionSelect';
 import { ColumnHint, TimeUnit } from 'types/queryBuilder';

src/components/experimental/ConfigSection/ConfigSection.test.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { screen, render } from '@testing-library/react';
+import { ConfigSection } from './ConfigSection';
+
+describe('<ConfigSection />', () => {
+  it('should render title as <h3>', () => {
+    render(
+      <ConfigSection title="Test title">
+        <div>Content</div>
+      </ConfigSection>
+    );
+
+    expect(screen.getByText('Test title').tagName).toBe('H3');
+  });
+});

src/components/experimental/ConfigSection/ConfigSection.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { GenericConfigSection, Props as GenericConfigSectionProps } from './GenericConfigSection';
+
+type Props = Omit<GenericConfigSectionProps, 'kind'>;
+
+export const ConfigSection = ({ children, ...props }: Props) => {
+  return (
+    <GenericConfigSection {...props} kind="section">
+      {children}
+    </GenericConfigSection>
+  );
+};

src/components/experimental/ConfigSection/ConfigSubSection.test.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { screen, render } from '@testing-library/react';
+import { ConfigSubSection } from './ConfigSubSection';
+
+describe('<ConfigSubSection />', () => {
+  it('should render title as <h3>', () => {
+    render(
+      <ConfigSubSection title="Test title">
+        <div>Content</div>
+      </ConfigSubSection>
+    );
+
+    expect(screen.getByText('Test title').tagName).toBe('H6');
+  });
+});

src/components/experimental/ConfigSection/ConfigSubSection.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { GenericConfigSection, Props as GenericConfigSectionProps } from './GenericConfigSection';
+
+type Props = Omit<GenericConfigSectionProps, 'kind'>;
+
+export const ConfigSubSection = ({ children, ...props }: Props) => {
+  return (
+    <GenericConfigSection {...props} kind="sub-section">
+      {children}
+    </GenericConfigSection>
+  );
+};

src/components/experimental/ConfigSection/DataSourceDescription.test.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import { DataSourceDescription } from './DataSourceDescription';
+import { render } from '@testing-library/react';
+
+describe('<DataSourceDescription />', () => {
+  it('should render data source name', () => {
+    const dataSourceName = 'Test data source name';
+    const { getByText } = render(
+      <DataSourceDescription dataSourceName={dataSourceName} docsLink="https://grafana.com/test-datasource-docs" />
+    );
+
+    expect(getByText(dataSourceName, { exact: false })).toBeInTheDocument();
+  });
+
+  it('should render docs link', () => {
+    const docsLink = 'https://grafana.com/test-datasource-docs';
+    const { getByText } = render(
+      <DataSourceDescription dataSourceName={'Test data source name'} docsLink={docsLink} />
+    );
+
+    const docsLinkEl = getByText('view the documentation');
+
+    expect(docsLinkEl.getAttribute('href')).toBe(docsLink);
+  });
+
+  it('should render text about required fields by default', () => {
+    const { getByText } = render(
+      <DataSourceDescription
+        dataSourceName={'Test data source name'}
+        docsLink={'https://grafana.com/test-datasource-docs'}
+      />
+    );
+
+    expect(getByText('Fields marked with', { exact: false })).toBeInTheDocument();
+  });
+
+  it('should not render text about required fields when `hasRequiredFields` props is `false`', () => {
+    const { getByText } = render(
+      <DataSourceDescription
+        dataSourceName={'Test data source name'}
+        docsLink={'https://grafana.com/test-datasource-docs'}
+        hasRequiredFields={false}
+      />
+    );
+
+    expect(() => getByText('Fields marked with', { exact: false })).toThrow();
+  });
+
+  it('should render passed `className`', () => {
+    const { container } = render(
+      <DataSourceDescription
+        dataSourceName={'Test data source name'}
+        docsLink={'https://grafana.com/test-datasource-docs'}
+        className="test-class-name"
+      />
+    );
+
+    expect(container.firstChild).toHaveClass('test-class-name');
+  });
+});

src/components/experimental/ConfigSection/DataSourceDescription.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { cx, css } from '@emotion/css';
+import { useTheme2 } from '@grafana/ui';
+
+type Props = {
+  dataSourceName: string;
+  docsLink: string;
+  hasRequiredFields?: boolean;
+  className?: string;
+};
+
+export const DataSourceDescription = ({ dataSourceName, docsLink, hasRequiredFields = true, className }: Props) => {
+  const theme = useTheme2();
+
+  const styles = {
+    container: css({
+      p: {
+        margin: 0,
+      },
+      'p + p': {
+        marginTop: theme.spacing(2),
+      },
+    }),
+    text: css({
+      ...theme.typography.body,
+      color: theme.colors.text.secondary,
+      a: css({
+        color: theme.colors.text.link,
+        textDecoration: 'underline',
+        '&:hover': {
+          textDecoration: 'none',
+        },
+      }),
+    }),
+  };
+
+  return (
+    <div className={cx(styles.container, className)}>
+      <p className={styles.text}>
+        Before you can use the {dataSourceName} data source, you must configure it below or in the config file. For
+        detailed instructions,{' '}
+        <a href={docsLink} target="_blank" rel="noreferrer">
+          view the documentation
+        </a>
+        .
+      </p>
+      {hasRequiredFields && (
+        <p className={styles.text}>
+          <i>Fields marked with * are required</i>
+        </p>
+      )}
+    </div>
+  );
+};

src/components/experimental/ConfigSection/GenericConfigSection.test.tsx

@@ -0,0 +1,126 @@
+import React from 'react';
+import { screen, render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { GenericConfigSection } from './GenericConfigSection';
+
+let user = userEvent.setup();
+
+describe('<GenericConfigSection />', () => {
+  beforeEach(() => {
+    userEvent.setup();
+  });
+
+  it('should render title', () => {
+    render(
+      <GenericConfigSection title="Test title">
+        <div>Content</div>
+      </GenericConfigSection>
+    );
+
+    expect(screen.getByText('Test title')).toBeInTheDocument();
+  });
+
+  it('should render title as <h3> by default', () => {
+    render(
+      <GenericConfigSection title="Test title">
+        <div>Content</div>
+      </GenericConfigSection>
+    );
+
+    expect(screen.getByText('Test title').tagName).toBe('H3');
+  });
+
+  it('should render title as <h3> when `kind` is `section`', () => {
+    render(
+      <GenericConfigSection title="Test title" kind="section">
+        <div>Content</div>
+      </GenericConfigSection>
+    );
+
+    expect(screen.getByText('Test title').tagName).toBe('H3');
+  });
+
+  it('should render title as <h6> when `kind` is `sub-section`', () => {
+    render(
+      <GenericConfigSection title="Test title" kind="sub-section">
+        <div>Content</div>
+      </GenericConfigSection>
+    );
+
+    expect(screen.getByText('Test title').tagName).toBe('H6');
+  });
+
+  it('should render description', () => {
+    render(
+      <GenericConfigSection title="Test title" description="Test description">
+        <div>Content</div>
+      </GenericConfigSection>
+    );
+
+    expect(screen.getByText('Test description')).toBeInTheDocument();
+  });
+
+  it('should not be collapsible by default', () => {
+    render(
+      <GenericConfigSection title="Test title">
+        <div>Test content</div>
+      </GenericConfigSection>
+    );
+
+    expect(screen.getByText('Test content')).toBeInTheDocument();
+    expect(() => screen.getByLabelText('Expand section Test title')).toThrow();
+    expect(() => screen.getByLabelText('Collapse section Test title')).toThrow();
+  });
+
+  it('should be collapsible with content visible when `isCollapsible` is `true` and `isInitiallyOpen` is not passed', async () => {
+    render(
+      <GenericConfigSection title="Test title" isCollapsible>
+        <div>Test content</div>
+      </GenericConfigSection>
+    );
+
+    expect(screen.getByText('Test content')).toBeInTheDocument();
+
+    await user.click(screen.getByLabelText('Collapse section Test title'));
+
+    expect(() => screen.getByText('Test content')).toThrow();
+  });
+
+  it('should be collapsible with content visible when `isCollapsible` is `true` and `isInitiallyOpen` is `true`', async () => {
+    render(
+      <GenericConfigSection title="Test title" isCollapsible isInitiallyOpen={true}>
+        <div>Test content</div>
+      </GenericConfigSection>
+    );
+
+    expect(screen.getByText('Test content')).toBeInTheDocument();
+
+    await user.click(screen.getByLabelText('Collapse section Test title'));
+
+    expect(() => screen.getByText('Test content')).toThrow();
+  });
+
+  it('should be collapsible with content hidden when `isCollapsible` is `true` and `isInitiallyOpen` is `false`', async () => {
+    render(
+      <GenericConfigSection title="Test title" isCollapsible isInitiallyOpen={false}>
+        <div>Test content</div>
+      </GenericConfigSection>
+    );
+
+    expect(() => screen.getByText('Test content')).toThrow();
+
+    await user.click(screen.getByLabelText('Expand section Test title'));
+
+    expect(screen.getByText('Test content')).toBeInTheDocument();
+  });
+
+  it('should have passed `className`', () => {
+    const { container } = render(
+      <GenericConfigSection title="Test title" className="test-class">
+        <div>Test content</div>
+      </GenericConfigSection>
+    );
+
+    expect(container.firstChild).toHaveClass('test-class');
+  });
+});