SQL: Fix config page backwards compatibility (#76951)

fix

public/app/features/plugins/sql/components/configuration/Divider.tsx

@@ -0,0 +1,21 @@
+import { css } from '@emotion/css';
+import React from 'react';
+
+import { GrafanaTheme2 } from '@grafana/data';
+import { useStyles2 } from '@grafana/ui';
+
+// this custom component is necessary because the Grafana UI <Divider /> component is not backwards compatible with Grafana < 10.1.0
+export const Divider = () => {
+  const styles = useStyles2(getStyles);
+  return <hr className={styles.horizontalDivider} />;
+};
+
+const getStyles = (theme: GrafanaTheme2) => {
+  return {
+    horizontalDivider: css({
+      borderTop: `1px solid ${theme.colors.border.weak}`,
+      margin: theme.spacing(2, 0),
+      width: '100%',
+    }),
+  };
+};

public/app/plugins/datasource/mysql/configuration/ConfigurationEditor.tsx

@@ -11,7 +11,6 @@ import { ConfigSection, ConfigSubSection, DataSourceDescription, Stack } from '@
 import { config } from '@grafana/runtime';
 import {
   Collapse,
-  Divider,
   Field,
   Icon,
   Input,
@@ -22,6 +21,7 @@ import {
   Tooltip,
 } from '@grafana/ui';
 import { ConnectionLimits } from 'app/features/plugins/sql/components/configuration/ConnectionLimits';
+import { Divider } from 'app/features/plugins/sql/components/configuration/Divider';
 import { TLSSecretsConfig } from 'app/features/plugins/sql/components/configuration/TLSSecretsConfig';
 import { useMigrateDatabaseFields } from 'app/features/plugins/sql/components/configuration/useMigrateDatabaseFields';
 

public/app/plugins/datasource/postgres/configuration/ConfigurationEditor.tsx

@@ -11,7 +11,6 @@ import {
 import { ConfigSection, ConfigSubSection, DataSourceDescription, Stack } from '@grafana/experimental';
 import { config } from '@grafana/runtime';
 import {
-  Divider,
   Input,
   Select,
   SecretInput,
@@ -24,6 +23,7 @@ import {
   Collapse,
 } from '@grafana/ui';
 import { ConnectionLimits } from 'app/features/plugins/sql/components/configuration/ConnectionLimits';
+import { Divider } from 'app/features/plugins/sql/components/configuration/Divider';
 import { TLSSecretsConfig } from 'app/features/plugins/sql/components/configuration/TLSSecretsConfig';
 import { useMigrateDatabaseFields } from 'app/features/plugins/sql/components/configuration/useMigrateDatabaseFields';