Tracing: Upgrade tracing data source configuration editors (#68764)

* Add tracing config sub sections

* Export common sections and update divider in additional settings section

* Max width and margin bottom

* Add feature name to config link

* Update SpanBarSettings

* remove import

public/app/features/explore/TraceView/components/settings/SpanBarSettings.tsx

@@ -8,8 +8,9 @@ import {
   toOption,
   updateDatasourcePluginJsonDataOption,
 } from '@grafana/data';
+import { ConfigSubSection } from '@grafana/experimental';
 import { InlineField, InlineFieldRow, Input, Select, useStyles2 } from '@grafana/ui';
-import { DocsLinkButton } from 'app/core/components/DocsLinkButton';
+import { ConfigDescriptionLink } from 'app/core/components/ConfigDescriptionLink';
 
 export interface SpanBarOptions {
   type?: string;
@@ -32,13 +33,6 @@ export default function SpanBarSettings({ options, onOptionsChange }: Props) {
 
   return (
     <div className={css({ width: '100%' })}>
-      <h3 className="page-heading">Span bar</h3>
-
-      <div className={styles.infoText}>
-        Add additional info next to the service and operation on a span bar row in the trace view
-        <DocsLinkButton hrefSuffix={`${options.type}/#span-bar`} />
-      </div>
-
       <InlineFieldRow className={styles.row}>
         <InlineField label="Label" labelWidth={26} tooltip="Default: duration" grow>
           <Select
@@ -84,6 +78,23 @@ export default function SpanBarSettings({ options, onOptionsChange }: Props) {
   );
 }
 
+export const SpanBarSection = ({ options, onOptionsChange }: DataSourcePluginOptionsEditorProps) => {
+  return (
+    <ConfigSubSection
+      title="Span bar"
+      description={
+        <ConfigDescriptionLink
+          description="Add additional info next to the service and operation on a span bar row in the trace view."
+          suffix={`${options.type}/#span-bar`}
+          feature="the span bar"
+        />
+      }
+    >
+      <SpanBarSettings options={options} onOptionsChange={onOptionsChange} />
+    </ConfigSubSection>
+  );
+};
+
 const getStyles = (theme: GrafanaTheme2) => ({
   infoText: css`
     label: infoText;