grafana/ui: Documenting DataSourceHttpSettings (#27547)

* documenting component

* Update packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.mdx

Co-authored-by: Alex Khomenko <Clarity-89@users.noreply.github.com>

* text updates

Co-authored-by: Alex Khomenko <Clarity-89@users.noreply.github.com>

packages/grafana-ui/src/components/DataSourceSettings/CustomHeaderSettings.story.tsx

-import React from 'react';
-import { withCenteredStory, withHorizontallyCenteredStory } from '../../utils/storybook/withCenteredStory';
-import { CustomHeadersSettings } from './CustomHeadersSettings';
-import { DataSourceSettings } from '@grafana/data';
-
-export default {
-  title: 'Data Source/CustomHeadersSettings',
-  component: CustomHeadersSettings,
-  decorators: [withCenteredStory, withHorizontallyCenteredStory],
-};
-
-export const simple = () => {
-  const dataSourceConfig: DataSourceSettings<any, any> = {
-    id: 4,
-    orgId: 1,
-    name: 'gdev-influxdb',
-    type: 'influxdb',
-    typeLogoUrl: '',
-    access: 'direct',
-    url: 'http://localhost:8086',
-    password: '',
-    user: 'grafana',
-    database: 'site',
-    basicAuth: false,
-    basicAuthUser: '',
-    basicAuthPassword: '',
-    withCredentials: false,
-    isDefault: false,
-    jsonData: {
-      timeInterval: '15s',
-      httpMode: 'GET',
-      keepCookies: ['cookie1', 'cookie2'],
-      httpHeaderName1: 'X-Custom-Header',
-    },
-    secureJsonData: {
-      password: true,
-      httpHeaderValue1: 'X-Custom-Header',
-    },
-    secureJsonFields: {
-      httpHeaderValue1: true,
-    },
-    readOnly: true,
-  };
-
-  return <CustomHeadersSettings dataSourceConfig={dataSourceConfig} onChange={() => {}} />;
-};

packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.mdx

+import { Meta, Props } from '@storybook/addon-docs/blocks';
+import { DataSourceHttpSettings } from './DataSourceHttpSettings';
+
+<Meta title="MDX|DataSourceHttpSettings" component={DataSourceHttpSettings} />
+
+# DataSourceHttpSettings
+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/master/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}
+      />
+
+      {/* Additional configuration settings for your data source plugin.*/}
+    </>
+  );
+};
+```
+
+<Props of={DataSourceHttpSettings} />

packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.story.tsx

 import React from 'react';
+import { DataSourceSettings } from '@grafana/data';
 
 import { DataSourceHttpSettings } from './DataSourceHttpSettings';
-import { DataSourceSettings } from '@grafana/data';
 import { UseState } from '../../utils/storybook/UseState';
+import mdx from './DataSourceHttpSettings.mdx';
 
 const settingsMock: DataSourceSettings<any, any> = {
   id: 4,
@@ -35,6 +36,11 @@ const settingsMock: DataSourceSettings<any, any> = {
 export default {
   title: 'Data Source/DataSourceHttpSettings',
   component: DataSourceHttpSettings,
+  parameters: {
+    docs: {
+      page: mdx,
+    },
+  },
 };
 
 export const basic = () => {

packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.tsx

 import React, { useState, useCallback } from 'react';
-import { SelectableValue } from '@grafana/data';
 import { css, cx } from 'emotion';
-import { useTheme } from '../../themes';
+import { DataSourceSettings, SelectableValue } from '@grafana/data';
 import { BasicAuthSettings } from './BasicAuthSettings';
 import { HttpProxySettings } from './HttpProxySettings';
 import { TLSAuthSettings } from './TLSAuthSettings';
-import { DataSourceSettings } from '@grafana/data';
-import { HttpSettingsProps } from './types';
 import { CustomHeadersSettings } from './CustomHeadersSettings';
 import { Select } from '../Forms/Legacy/Select/Select';
 import { Input } from '../Forms/Legacy/Input/Input';
+import { Switch } from '../Forms/Legacy/Switch/Switch';
 import { Icon } from '../Icon/Icon';
 import { FormField } from '../FormField/FormField';
 import { FormLabel } from '../FormLabel/FormLabel';
-import { Switch } from '../Forms/Legacy/Switch/Switch';
 import { TagsInput } from '../TagsInput/TagsInput';
+import { useTheme } from '../../themes';
+import { HttpSettingsProps } from './types';
 
 const ACCESS_OPTIONS: Array<SelectableValue<string>> = [
   {

packages/grafana-ui/src/components/DataSourceSettings/types.ts

 import { DataSourceSettings } from '@grafana/data';
 
 export interface HttpSettingsBaseProps {
+  /** The configuration object of the data source */
   dataSourceConfig: DataSourceSettings<any, any>;
+  /** Callback for handling changes to the configuration object */
   onChange: (config: DataSourceSettings) => void;
 }
 
 export interface HttpSettingsProps extends HttpSettingsBaseProps {
+  /** The default url for the data source */
   defaultUrl: string;
+  /** Show the http access help box */
   showAccessOptions?: boolean;
 }