import { Meta, ArgTypes } from '@storybook/blocks';
import { DataSourceHttpSettings } from './DataSourceHttpSettings';

<Meta title="MDX|DataSourceHttpSettings" component={DataSourceHttpSettings} />

# DataSourceHttpSettings

> **Deprecated!** Use components from `@grafana/plugin-ui` instead, according to the [migration guide](https://github.com/grafana/plugin-ui/blob/main/src/components/ConfigEditor/migrating-from-datasource-http-settings.md)

Component for displaying the configuration options for a data source plugin.

### When to use

It is used in a `ConfigEditor` for data source plugins. You can find more examples in our core data source
plugins [here](https://github.com/grafana/grafana/tree/main/public/app/plugins/datasource).

### Example usage

```jsx
export const ConfigEditor = (props: Props) => {
  const { options, onOptionsChange } = props;
  return (
    <>
      <DataSourceHttpSettings
        defaultUrl="http://localhost:9090"
        dataSourceConfig={options}
        showAccessOptions={true}
        onChange={onOptionsChange}
        sigV4AuthEnabled={false}
      />

      {/* Additional configuration settings for your data source plugin.*/}
    </>
  );
};
```

<ArgTypes of={DataSourceHttpSettings} />
