Merge pull request #36 from mckn/mckn/compatability-update

Bugfix: keeping backwards compatability when using new Stack component.

src/components/Center.tsx

@@ -0,0 +1,22 @@
+import React, { PropsWithChildren } from 'react';
+import { Stack, HorizontalGroup } from '@grafana/ui';
+
+// This component is used to keep backwards compatability
+// for older Grafana versions that doesn't have the Stack
+// component.
+export function Center({ children }: PropsWithChildren) {
+  if (typeof Stack !== 'undefined') {
+    return (
+      <Stack justifyContent="center" alignItems="center">
+        {children}
+      </Stack>
+    );
+  }
+
+  return (
+    // eslint-disable-next-line deprecation/deprecation
+    <HorizontalGroup justify="center" align="center">
+      {children}
+    </HorizontalGroup>
+  );
+}

src/components/Nodata.tsx

@@ -1,15 +1,16 @@
 import { css } from '@emotion/css';
 import { type GrafanaTheme2 } from '@grafana/data';
-import { Stack, useStyles2 } from '@grafana/ui';
+import { useStyles2 } from '@grafana/ui';
 import React, { type ReactElement } from 'react';
+import { Center } from './Center';
 
 export function Nodata(): ReactElement {
   const styles = useStyles2(getStyles);
 
   return (
-    <Stack justifyContent="center" alignItems="center">
+    <Center>
       <p className={styles.text}>No data</p>
-    </Stack>
+    </Center>
   );
 }
 

src/components/Unsupported.tsx

@@ -1,18 +1,19 @@
 import { css } from '@emotion/css';
-import { Alert, Stack, useStyles2 } from '@grafana/ui';
+import { Alert, useStyles2 } from '@grafana/ui';
 import React, { type ReactElement } from 'react';
+import { Center } from './Center';
 
 export function Unsupported(): ReactElement {
   const styles = useStyles2(getStyles);
 
   return (
     <div className={styles.container}>
-      <Stack justifyContent="center" alignItems="center">
+      <Center>
         <Alert severity="info" title="Unsupported data">
           The data you have provided is not supported by this panel. Every data frame provided to the panel needs to
           contain at least one numeric field which will be used to visualize each step in the funnel.
         </Alert>
-      </Stack>
+      </Center>
     </div>
   );
 }