fix: Use fall back alert type for data source healthcheck alert when status is not recognised (#68650)

public/app/features/datasources/components/DataSourceTestingStatus.test.tsx

@@ -0,0 +1,93 @@
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+
+import { getMockDataSource } from '../__mocks__';
+
+import { DataSourceTestingStatus, Props } from './DataSourceTestingStatus';
+
+const getProps = (partialProps?: Partial<Props>): Props => ({
+  testingStatus: {
+    status: 'success',
+    message: 'Test message',
+  },
+  exploreUrl: 'http://explore',
+  dataSource: getMockDataSource(),
+  ...partialProps,
+});
+
+describe('<DataSourceTestingStatus />', () => {
+  it('should render', () => {
+    render(<DataSourceTestingStatus {...getProps()} />);
+  });
+
+  it('should render successful message when testing status is a success', () => {
+    const props = getProps({
+      testingStatus: {
+        status: 'success',
+        message: 'Data source is definitely working',
+      },
+    });
+    render(<DataSourceTestingStatus {...props} />);
+
+    expect(screen.getByText('Data source is definitely working')).toBeInTheDocument();
+    expect(screen.getByTestId('data-testid Alert success')).toBeInTheDocument();
+    expect(() => screen.getByTestId('data-testid Alert error')).toThrow();
+  });
+
+  it('should render successful message when testing status is uppercase "OK"', () => {
+    const props = getProps({
+      testingStatus: {
+        status: 'OK',
+        message: 'Data source is definitely working',
+      },
+    });
+    render(<DataSourceTestingStatus {...props} />);
+
+    expect(screen.getByText('Data source is definitely working')).toBeInTheDocument();
+    expect(screen.getByTestId('data-testid Alert success')).toBeInTheDocument();
+    expect(() => screen.getByTestId('data-testid Alert error')).toThrow();
+  });
+
+  it('should render successful message when testing status is lowercase "ok"', () => {
+    const props = getProps({
+      testingStatus: {
+        status: 'ok',
+        message: 'Data source is definitely working',
+      },
+    });
+    render(<DataSourceTestingStatus {...props} />);
+
+    expect(screen.getByText('Data source is definitely working')).toBeInTheDocument();
+    expect(screen.getByTestId('data-testid Alert success')).toBeInTheDocument();
+    expect(() => screen.getByTestId('data-testid Alert error')).toThrow();
+  });
+
+  it('should render error message when testing status is "error"', () => {
+    const props = getProps({
+      testingStatus: {
+        status: 'error',
+        message: 'Data source is definitely NOT working',
+      },
+    });
+    render(<DataSourceTestingStatus {...props} />);
+
+    expect(screen.getByText('Data source is definitely NOT working')).toBeInTheDocument();
+    expect(screen.getByTestId('data-testid Alert error')).toBeInTheDocument();
+    expect(() => screen.getByTestId('data-testid Alert success')).toThrow();
+  });
+
+  it('should render info message when testing status is unknown', () => {
+    const props = getProps({
+      testingStatus: {
+        status: 'something_weird',
+        message: 'Data source is working',
+      },
+    });
+    render(<DataSourceTestingStatus {...props} />);
+
+    expect(screen.getByText('Data source is working')).toBeInTheDocument();
+    expect(screen.getByTestId('data-testid Alert info')).toBeInTheDocument();
+    expect(() => screen.getByTestId('data-testid Alert success')).toThrow();
+    expect(() => screen.getByTestId('data-testid Alert error')).toThrow();
+  });
+});

public/app/features/datasources/components/DataSourceTestingStatus.tsx

@@ -74,8 +74,17 @@ const AlertSuccessMessage = ({ title, exploreUrl, dataSourceId, onDashboardLinkC
 
 AlertSuccessMessage.displayName = 'AlertSuccessMessage';
 
+const alertVariants = new Set<AlertVariant>(['success', 'info', 'warning', 'error']);
+const isAlertVariant = (str: string): str is AlertVariant => alertVariants.has(str as AlertVariant);
+const getAlertVariant = (status: string): AlertVariant => {
+  if (status.toLowerCase() === 'ok') {
+    return 'success';
+  }
+  return isAlertVariant(status) ? status : 'info';
+};
+
 export function DataSourceTestingStatus({ testingStatus, exploreUrl, dataSource }: Props) {
-  const severity = testingStatus?.status ? (testingStatus?.status as AlertVariant) : 'error';
+  const severity = getAlertVariant(testingStatus?.status ?? 'error');
   const message = testingStatus?.message;
   const detailsMessage = testingStatus?.details?.message;
   const detailsVerboseMessage = testingStatus?.details?.verboseMessage;