Add divider from grafana 10 (#70)

Author: idastambuk

package.json

@@ -31,10 +31,10 @@
     "@grafana/experimental": "1.7.0"
   },
   "devDependencies": {
-    "@grafana/data": "9.4.14",
+    "@grafana/data": "10.2.0",
     "@grafana/eslint-config": "^6.0.1",
-    "@grafana/runtime": "9.4.14",
-    "@grafana/ui": "9.4.14",
+    "@grafana/runtime": "10.2.0",
+    "@grafana/ui": "10.2.0",
     "@rollup/plugin-node-resolve": "^15.0.1",
     "@swc/core": "^1.3.93",
     "@swc/jest": "^0.2.29",

src/components/Divider.tsx

@@ -1,9 +1,14 @@
 // copied from Azure Data Explorer plugin since there is not Divider component in G<10.1
 import React from 'react';
-import { useTheme2 } from '@grafana/ui';
+import { Divider as GrafanaDivider, useTheme2 } from '@grafana/ui';
+import { config } from '@grafana/runtime';
+import { isVersionGtOrEq } from './utils/version';
 
 export function Divider() {
   const theme = useTheme2();
+  if (isVersionGtOrEq(config.buildInfo.version, '10.1.0')) {
+    return <GrafanaDivider />;
+  }
   return (
     <div
       style={{ borderTop: `1px solid ${theme.colors.border.weak}`, margin: theme.spacing(2, 0), width: '100%' }}

src/components/utils/version.ts

@@ -0,0 +1,53 @@
+// copied from Azure Data Explorer plugin
+import { isNumber } from 'lodash';
+
+const versionPattern = /^(\d+)(?:\.(\d+))?(?:\.(\d+))?(?:-([0-9A-Za-z\.]+))?/;
+
+export class SemVersion {
+  major: number;
+  minor: number;
+  patch: number;
+  meta: string;
+
+  constructor(version: string) {
+    this.major = 0;
+    this.minor = 0;
+    this.patch = 0;
+    this.meta = '';
+
+    const match = versionPattern.exec(version);
+    if (match) {
+      this.major = Number(match[1]);
+      this.minor = Number(match[2] || 0);
+      this.patch = Number(match[3] || 0);
+      this.meta = match[4];
+    }
+  }
+
+  isGtOrEq(version: string): boolean {
+    const compared = new SemVersion(version);
+
+    for (let i = 0; i < this.comparable.length; ++i) {
+      if (this.comparable[i] > compared.comparable[i]) {
+        return true;
+      }
+      if (this.comparable[i] < compared.comparable[i]) {
+        return false;
+      }
+    }
+    return true;
+  }
+
+  isValid(): boolean {
+    return isNumber(this.major);
+  }
+
+  get comparable() {
+    return [this.major, this.minor, this.patch];
+  }
+}
+
+export function isVersionGtOrEq(a: string, b: string): boolean {
+  const aSemver = new SemVersion(a);
+  return aSemver.isGtOrEq(b);
+}