From c25ea17d10033fa54dac4d4571cc0b9503c619b7 Mon Sep 17 00:00:00 2001
From: Gareth Dawson <email@garethdawson.xyz>
Date: Wed, 25 Oct 2023 11:38:16 +0100
Subject: [PATCH] SQL: Fix config page backwards compatibility (#76951)

fix
---
 .../sql/components/configuration/Divider.tsx  | 21 +++++++++++++++++++
 .../configuration/ConfigurationEditor.tsx     |  2 +-
 .../configuration/ConfigurationEditor.tsx     |  2 +-
 3 files changed, 23 insertions(+), 2 deletions(-)
 create mode 100644 public/app/features/plugins/sql/components/configuration/Divider.tsx

diff --git a/public/app/features/plugins/sql/components/configuration/Divider.tsx b/public/app/features/plugins/sql/components/configuration/Divider.tsx
new file mode 100644
index 00000000000..c6582eb725f
--- /dev/null
+++ b/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%',
+    }),
+  };
+};
diff --git a/public/app/plugins/datasource/mysql/configuration/ConfigurationEditor.tsx b/public/app/plugins/datasource/mysql/configuration/ConfigurationEditor.tsx
index 7f40650211a..055dc88e276 100644
--- a/public/app/plugins/datasource/mysql/configuration/ConfigurationEditor.tsx
+++ b/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';
 
diff --git a/public/app/plugins/datasource/postgres/configuration/ConfigurationEditor.tsx b/public/app/plugins/datasource/postgres/configuration/ConfigurationEditor.tsx
index 559d0b63338..3c1ea733a2f 100644
--- a/public/app/plugins/datasource/postgres/configuration/ConfigurationEditor.tsx
+++ b/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';