Divider: Remove core component and replace with grafana/ui components (#80574)

* Divider: Remove core component and replace with grafana/ui components

* Update gap

* Bump experimental in tempo

---------

Co-authored-by: Fabrizio <fabrizio.casati@grafana.com>

public/app/core/components/Divider.tsx

@@ -1,25 +0,0 @@
-import { css } from '@emotion/css';
-import React from 'react';
-
-import { GrafanaTheme2 } from '@grafana/data';
-import { useStyles2 } from '@grafana/ui';
-
-export const Divider = ({ hideLine = false }) => {
-  const styles = useStyles2(getStyles);
-
-  if (hideLine) {
-    return <hr className={styles.dividerHideLine} />;
-  }
-
-  return <hr className={styles.divider} />;
-};
-
-const getStyles = (theme: GrafanaTheme2) => ({
-  divider: css({
-    margin: theme.spacing(4, 0),
-  }),
-  dividerHideLine: css({
-    border: 'none',
-    margin: theme.spacing(3, 0),
-  }),
-});

public/app/plugins/datasource/elasticsearch/configuration/ConfigEditor.tsx

@@ -11,8 +11,7 @@ import {
   convertLegacyAuthProps,
   DataSourceDescription,
 } from '@grafana/experimental';
-import { Alert, SecureSocksProxySettings } from '@grafana/ui';
-import { Divider } from 'app/core/components/Divider';
+import { Alert, SecureSocksProxySettings, Divider, Stack } from '@grafana/ui';
 import { config } from 'app/core/config';
 
 import { ElasticsearchOptions } from '../types';
@@ -61,9 +60,9 @@ export const ConfigEditor = (props: Props) => {
         docsLink="https://grafana.com/docs/grafana/latest/datasources/elasticsearch"
         hasRequiredFields={false}
       />
-      <Divider />
+      <Divider spacing={4} />
       <ConnectionSettings config={options} onChange={onOptionsChange} urlPlaceholder="http://localhost:9200" />
-      <Divider />
+      <Divider spacing={4} />
       <Auth
         {...authProps}
         onAuthMethodSelect={(method) => {
@@ -79,42 +78,41 @@ export const ConfigEditor = (props: Props) => {
           });
         }}
       />
-      <Divider />
+      <Divider spacing={4} />
       <ConfigSection
         title="Additional settings"
         description="Additional settings are optional settings that can be configured for more control over your data source."
         isCollapsible={true}
         isInitiallyOpen
       >
-        <AdvancedHttpSettings config={options} onChange={onOptionsChange} />
-        <Divider hideLine />
-        {config.secureSocksDSProxyEnabled && (
-          <SecureSocksProxySettings options={options} onOptionsChange={onOptionsChange} />
-        )}
-        <ElasticDetails value={options} onChange={onOptionsChange} />
-        <Divider hideLine />
-        <LogsConfig
-          value={options.jsonData}
-          onChange={(newValue) =>
-            onOptionsChange({
-              ...options,
-              jsonData: newValue,
-            })
-          }
-        />
-        <Divider hideLine />
-        <DataLinks
-          value={options.jsonData.dataLinks}
-          onChange={(newValue) => {
-            onOptionsChange({
-              ...options,
-              jsonData: {
-                ...options.jsonData,
-                dataLinks: newValue,
-              },
-            });
-          }}
-        />
+        <Stack gap={5} direction="column">
+          <AdvancedHttpSettings config={options} onChange={onOptionsChange} />
+          {config.secureSocksDSProxyEnabled && (
+            <SecureSocksProxySettings options={options} onOptionsChange={onOptionsChange} />
+          )}
+          <ElasticDetails value={options} onChange={onOptionsChange} />
+          <LogsConfig
+            value={options.jsonData}
+            onChange={(newValue) =>
+              onOptionsChange({
+                ...options,
+                jsonData: newValue,
+              })
+            }
+          />
+          <DataLinks
+            value={options.jsonData.dataLinks}
+            onChange={(newValue) => {
+              onOptionsChange({
+                ...options,
+                jsonData: {
+                  ...options.jsonData,
+                  dataLinks: newValue,
+                },
+              });
+            }}
+          />
+        </Stack>
       </ConfigSection>
     </>
   );

public/app/plugins/datasource/jaeger/configuration/ConfigEditor.tsx

@@ -4,8 +4,7 @@ import React from 'react';
 import { DataSourcePluginOptionsEditorProps, GrafanaTheme2 } from '@grafana/data';
 import { ConfigSection, DataSourceDescription } from '@grafana/experimental';
 import { config } from '@grafana/runtime';
-import { DataSourceHttpSettings, useStyles2 } from '@grafana/ui';
-import { Divider } from 'app/core/components/Divider';
+import { DataSourceHttpSettings, useStyles2, Divider, Stack } from '@grafana/ui';
 import { NodeGraphSection } from 'app/core/components/NodeGraphSettings';
 import { TraceToLogsSection } from 'app/core/components/TraceToLogs/TraceToLogsSettings';
 import { TraceToMetricsSection } from 'app/core/components/TraceToMetrics/TraceToMetricsSettings';
@@ -26,7 +25,7 @@ export const ConfigEditor = ({ options, onOptionsChange }: Props) => {
         hasRequiredFields={false}
       />
 
-      <Divider />
+      <Divider spacing={4} />
 
       <DataSourceHttpSettings
         defaultUrl="http://localhost:16686"
@@ -38,12 +37,12 @@ export const ConfigEditor = ({ options, onOptionsChange }: Props) => {
 
       <TraceToLogsSection options={options} onOptionsChange={onOptionsChange} />
 
-      <Divider />
+      <Divider spacing={4} />
 
       {config.featureToggles.traceToMetrics ? (
         <>
           <TraceToMetricsSection options={options} onOptionsChange={onOptionsChange} />
-          <Divider />
+          <Divider spacing={4} />
         </>
       ) : null}
 
@@ -53,11 +52,11 @@ export const ConfigEditor = ({ options, onOptionsChange }: Props) => {
         isCollapsible={true}
         isInitiallyOpen={false}
       >
-        <NodeGraphSection options={options} onOptionsChange={onOptionsChange} />
-        <Divider hideLine={true} />
-        <SpanBarSection options={options} onOptionsChange={onOptionsChange} />
-        <Divider hideLine={true} />
-        <TraceIdTimeParams options={options} onOptionsChange={onOptionsChange} />
+        <Stack gap={5} direction="column">
+          <NodeGraphSection options={options} onOptionsChange={onOptionsChange} />
+          <SpanBarSection options={options} onOptionsChange={onOptionsChange} />
+          <TraceIdTimeParams options={options} onOptionsChange={onOptionsChange} />
+        </Stack>
       </ConfigSection>
     </div>
   );

public/app/plugins/datasource/loki/configuration/ConfigEditor.tsx

@@ -10,8 +10,7 @@ import {
   AdvancedHttpSettings,
 } from '@grafana/experimental';
 import { config, reportInteraction } from '@grafana/runtime';
-import { SecureSocksProxySettings } from '@grafana/ui';
-import { Divider } from 'app/core/components/Divider';
+import { Divider, SecureSocksProxySettings, Stack } from '@grafana/ui';
 
 import { LokiOptions } from '../types';
 
@@ -55,40 +54,39 @@ export const ConfigEditor = (props: Props) => {
         docsLink="https://grafana.com/docs/grafana/latest/datasources/loki/configure-loki-data-source/"
         hasRequiredFields={false}
       />
-      <Divider />
+      <Divider spacing={4} />
       <ConnectionSettings config={options} onChange={onOptionsChange} urlPlaceholder="http://localhost:3100" />
-      <Divider />
+      <Divider spacing={4} />
       <Auth
         {...convertLegacyAuthProps({
           config: options,
           onChange: onOptionsChange,
         })}
       />
-      <Divider />
+      <Divider spacing={4} />
       <ConfigSection
         title="Additional settings"
         description="Additional settings are optional settings that can be configured for more control over your data source."
         isCollapsible={true}
         isInitiallyOpen
       >
-        <AdvancedHttpSettings config={options} onChange={onOptionsChange} />
-        <Divider hideLine />
-        {config.secureSocksDSProxyEnabled && (
-          <SecureSocksProxySettings options={options} onOptionsChange={onOptionsChange} />
-        )}
-        <AlertingSettings options={options} onOptionsChange={onOptionsChange} />
-        <Divider hideLine />
-        <QuerySettings
-          maxLines={options.jsonData.maxLines || ''}
-          onMaxLinedChange={(value) => onOptionsChange(setMaxLines(options, value))}
-          predefinedOperations={options.jsonData.predefinedOperations || ''}
-          onPredefinedOperationsChange={updatePredefinedOperations}
-        />
-        <Divider hideLine />
-        <DerivedFields
-          fields={options.jsonData.derivedFields}
-          onChange={(value) => onOptionsChange(setDerivedFields(options, value))}
-        />
+        <Stack gap={5} direction="column">
+          <AdvancedHttpSettings config={options} onChange={onOptionsChange} />
+          {config.secureSocksDSProxyEnabled && (
+            <SecureSocksProxySettings options={options} onOptionsChange={onOptionsChange} />
+          )}
+          <AlertingSettings options={options} onOptionsChange={onOptionsChange} />
+          <QuerySettings
+            maxLines={options.jsonData.maxLines || ''}
+            onMaxLinedChange={(value) => onOptionsChange(setMaxLines(options, value))}
+            predefinedOperations={options.jsonData.predefinedOperations || ''}
+            onPredefinedOperationsChange={updatePredefinedOperations}
+          />
+          <DerivedFields
+            fields={options.jsonData.derivedFields}
+            onChange={(value) => onOptionsChange(setDerivedFields(options, value))}
+          />
+        </Stack>
       </ConfigSection>
     </>
   );

public/app/plugins/datasource/tempo/configuration/ConfigEditor.tsx

@@ -6,16 +6,15 @@ import {
   AdvancedHttpSettings,
   Auth,
   ConfigSection,
+  ConfigDescriptionLink,
   ConfigSubSection,
   ConnectionSettings,
   convertLegacyAuthProps,
   DataSourceDescription,
 } from '@grafana/experimental';
 import { config } from '@grafana/runtime';
-import { SecureSocksProxySettings, useStyles2 } from '@grafana/ui';
+import { SecureSocksProxySettings, useStyles2, Divider, Stack } from '@grafana/ui';
 
-import { ConfigDescriptionLink } from '../_importedDependencies/components/ConfigDescriptionLink';
-import { Divider } from '../_importedDependencies/components/Divider';
 import { NodeGraphSection } from '../_importedDependencies/components/NodeGraphSettings';
 import { SpanBarSection } from '../_importedDependencies/components/TraceView/SpanBarSettings';
 import {
@@ -42,10 +41,10 @@ export const ConfigEditor = ({ options, onOptionsChange }: Props) => {
         hasRequiredFields={false}
       />
 
-      <Divider />
+      <Divider spacing={4} />
       <ConnectionSettings config={options} onChange={onOptionsChange} urlPlaceholder="http://localhost:3200" />
 
-      <Divider />
+      <Divider spacing={4} />
       <Auth
         {...convertLegacyAuthProps({
           config: options,
@@ -53,100 +52,94 @@ export const ConfigEditor = ({ options, onOptionsChange }: Props) => {
         })}
       />
 
-      <Divider />
+      <Divider spacing={4} />
       <TraceToLogsSection options={options} onOptionsChange={onOptionsChange} />
 
-      <Divider />
+      <Divider spacing={4} />
       {config.featureToggles.traceToMetrics ? (
         <>
           <TraceToMetricsSection options={options} onOptionsChange={onOptionsChange} />
-          <Divider />
+          <Divider spacing={4} />
         </>
       ) : null}
 
       {config.featureToggles.traceToProfiles && (
         <>
           <TraceToProfilesSection options={options} onOptionsChange={onOptionsChange} />
-          <Divider />
+          <Divider spacing={4} />
         </>
       )}
-
       <ConfigSection
         title="Additional settings"
         description="Additional settings are optional settings that can be configured for more control over your data source."
         isCollapsible={true}
         isInitiallyOpen={false}
       >
-        <AdvancedHttpSettings config={options} onChange={onOptionsChange} />
+        <Stack gap={5} direction="column">
+          <AdvancedHttpSettings config={options} onChange={onOptionsChange} />
 
-        {config.secureSocksDSProxyEnabled && (
-          <>
-            <Divider hideLine />
-            <SecureSocksProxySettings options={options} onOptionsChange={onOptionsChange} />
-          </>
-        )}
+          {config.secureSocksDSProxyEnabled && (
+            <>
+              <SecureSocksProxySettings options={options} onOptionsChange={onOptionsChange} />
+            </>
+          )}
 
-        <Divider hideLine />
-        <ConfigSubSection
-          title="Service graph"
-          description={
-            <ConfigDescriptionLink
-              description="Select a Prometheus data source that contains the service graph data."
-              suffix="tempo/configure-tempo-data-source/#service-graph"
-              feature="the service graph"
-            />
-          }
-        >
-          <ServiceGraphSettings options={options} onOptionsChange={onOptionsChange} />
-        </ConfigSubSection>
+          <ConfigSubSection
+            title="Service graph"
+            description={
+              <ConfigDescriptionLink
+                description="Select a Prometheus data source that contains the service graph data."
+                suffix="tempo/configure-tempo-data-source/#service-graph"
+                feature="the service graph"
+              />
+            }
+          >
+            <ServiceGraphSettings options={options} onOptionsChange={onOptionsChange} />
+          </ConfigSubSection>
 
-        <Divider hideLine />
-        <NodeGraphSection options={options} onOptionsChange={onOptionsChange} />
+          <NodeGraphSection options={options} onOptionsChange={onOptionsChange} />
 
-        <Divider hideLine />
-        <ConfigSubSection
-          title="Tempo search"
-          description={
-            <ConfigDescriptionLink
-              description="Modify how traces are searched."
-              suffix="tempo/configure-tempo-data-source/#tempo-search"
-              feature="Tempo search"
-            />
-          }
-        >
-          <TraceQLSearchSettings options={options} onOptionsChange={onOptionsChange} />
-        </ConfigSubSection>
+          <ConfigSubSection
+            title="Tempo search"
+            description={
+              <ConfigDescriptionLink
+                description="Modify how traces are searched."
+                suffix="tempo/configure-tempo-data-source/#tempo-search"
+                feature="Tempo search"
+              />
+            }
+          >
+            <TraceQLSearchSettings options={options} onOptionsChange={onOptionsChange} />
+          </ConfigSubSection>
 
-        <Divider hideLine />
-        <ConfigSubSection
-          title="Loki search"
-          description={
-            <ConfigDescriptionLink
-              description="Select a Loki data source to search for traces. Derived fields must be configured in the Loki data source."
-              suffix="tempo/configure-tempo-data-source/#loki-search"
-              feature="Loki search"
-            />
-          }
-        >
-          <LokiSearchSettings options={options} onOptionsChange={onOptionsChange} />
-        </ConfigSubSection>
+          <ConfigSubSection
+            title="Loki search"
+            description={
+              <ConfigDescriptionLink
+                description="Select a Loki data source to search for traces. Derived fields must be configured in the Loki data source."
+                suffix="tempo/configure-tempo-data-source/#loki-search"
+                feature="Loki search"
+              />
+            }
+          >
+            <LokiSearchSettings options={options} onOptionsChange={onOptionsChange} />
+          </ConfigSubSection>
 
-        <Divider hideLine />
-        <ConfigSubSection
-          title="TraceID query"
-          description={
-            <ConfigDescriptionLink
-              description="Modify how TraceID queries are run."
-              suffix="tempo/configure-tempo-data-source/#traceid-query"
-              feature="the TraceID query"
-            />
-          }
-        >
-          <QuerySettings options={options} onOptionsChange={onOptionsChange} />
-        </ConfigSubSection>
+          <ConfigSubSection
+            title="TraceID query"
+            description={
+              <ConfigDescriptionLink
+                description="Modify how TraceID queries are run."
+                suffix="tempo/configure-tempo-data-source/#traceid-query"
+                feature="the TraceID query"
+              />
+            }
+          >
+            <QuerySettings options={options} onOptionsChange={onOptionsChange} />
+          </ConfigSubSection>
 
-        <Divider hideLine />
-        <SpanBarSection options={options} onOptionsChange={onOptionsChange} />
+          <SpanBarSection options={options} onOptionsChange={onOptionsChange} />
+        </Stack>
       </ConfigSection>
     </div>
   );

public/app/plugins/datasource/tempo/package.json

@@ -7,7 +7,7 @@
     "@emotion/css": "11.11.2",
     "@grafana/data": "workspace:*",
     "@grafana/e2e-selectors": "workspace:*",
-    "@grafana/experimental": "1.7.4",
+    "@grafana/experimental": "1.7.5",
     "@grafana/lezer-logql": "0.2.1",
     "@grafana/lezer-traceql": "0.0.12",
     "@grafana/monaco-logql": "^0.0.7",

public/app/plugins/datasource/zipkin/ConfigEditor.tsx

@@ -4,8 +4,7 @@ import React from 'react';
 import { DataSourcePluginOptionsEditorProps, GrafanaTheme2 } from '@grafana/data';
 import { ConfigSection, DataSourceDescription } from '@grafana/experimental';
 import { config } from '@grafana/runtime';
-import { DataSourceHttpSettings, useStyles2 } from '@grafana/ui';
-import { Divider } from 'app/core/components/Divider';
+import { DataSourceHttpSettings, useStyles2, Divider, Stack } from '@grafana/ui';
 import { NodeGraphSection } from 'app/core/components/NodeGraphSettings';
 import { TraceToLogsSection } from 'app/core/components/TraceToLogs/TraceToLogsSettings';
 import { TraceToMetricsSection } from 'app/core/components/TraceToMetrics/TraceToMetricsSettings';
@@ -24,7 +23,7 @@ export const ConfigEditor = ({ options, onOptionsChange }: Props) => {
         hasRequiredFields={false}
       />
 
-      <Divider />
+      <Divider spacing={4} />
 
       <DataSourceHttpSettings
         defaultUrl="http://localhost:9411"
@@ -36,12 +35,12 @@ export const ConfigEditor = ({ options, onOptionsChange }: Props) => {
 
       <TraceToLogsSection options={options} onOptionsChange={onOptionsChange} />
 
-      <Divider />
+      <Divider spacing={4} />
 
       {config.featureToggles.traceToMetrics ? (
         <>
           <TraceToMetricsSection options={options} onOptionsChange={onOptionsChange} />
-          <Divider />
+          <Divider spacing={4} />
         </>
       ) : null}
 
@@ -51,9 +50,10 @@ export const ConfigEditor = ({ options, onOptionsChange }: Props) => {
         isCollapsible={true}
         isInitiallyOpen={false}
       >
-        <NodeGraphSection options={options} onOptionsChange={onOptionsChange} />
-        <Divider hideLine={true} />
-        <SpanBarSection options={options} onOptionsChange={onOptionsChange} />
+        <Stack gap={5} direction="column">
+          <NodeGraphSection options={options} onOptionsChange={onOptionsChange} />
+          <SpanBarSection options={options} onOptionsChange={onOptionsChange} />
+        </Stack>
       </ConfigSection>
     </div>
   );

yarn.lock

@@ -3060,7 +3060,7 @@ __metadata:
     "@emotion/css": "npm:11.11.2"
     "@grafana/data": "workspace:*"
     "@grafana/e2e-selectors": "workspace:*"
-    "@grafana/experimental": "npm:1.7.4"
+    "@grafana/experimental": "npm:1.7.5"
     "@grafana/lezer-logql": "npm:0.2.1"
     "@grafana/lezer-traceql": "npm:0.0.12"
     "@grafana/monaco-logql": "npm:^0.0.7"
@@ -3329,26 +3329,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@grafana/experimental@npm:1.7.4":
-  version: 1.7.4
-  resolution: "@grafana/experimental@npm:1.7.4"
-  dependencies:
-    "@types/uuid": "npm:^8.3.3"
-    semver: "npm:^7.5.4"
-    uuid: "npm:^8.3.2"
-  peerDependencies:
-    "@emotion/css": 11.1.3
-    "@grafana/data": ^10.0.0
-    "@grafana/runtime": ^10.0.0
-    "@grafana/ui": ^10.0.0
-    react: 17.0.2
-    react-dom: 17.0.2
-    react-select: ^5.2.1
-    rxjs: 7.8.0
-  checksum: e62e6382396d282281e31011c936fe9164650ea8caea7a09c4ef8615a66bb0ab0f74c4946354276457a2f5d1276016fc4225a08b8afb043c81e11b010f52b26d
-  languageName: node
-  linkType: hard
-
 "@grafana/experimental@npm:1.7.5":
   version: 1.7.5
   resolution: "@grafana/experimental@npm:1.7.5"