Panels: Make getting started panel use app platform API (#112166)

packages/grafana-test-utils/src/handlers/all-handlers.ts

@@ -1,6 +1,7 @@
 import { HttpHandler } from 'msw';
 
 import folderHandlers from './api/folders/handlers';
+import pluginsHandlers from './api/plugins/handlers';
 import searchHandlers from './api/search/handlers';
 import teamsHandlers from './api/teams/handlers';
 import userHandlers from './api/user/handlers';
@@ -13,6 +14,7 @@ const allHandlers: HttpHandler[] = [
   ...teamsHandlers,
   ...folderHandlers,
   ...searchHandlers,
+  ...pluginsHandlers,
   ...userHandlers,
 
   // App platform handlers

packages/grafana-test-utils/src/handlers/api/plugins/handlers.ts

@@ -0,0 +1,6 @@
+import { HttpResponse, http } from 'msw';
+
+// TODO: Add more realistic mock plugins data
+const getPluginsHandler = () => http.get('/api/plugins', () => HttpResponse.json([]));
+
+export default [getPluginsHandler()];

public/app/plugins/panel/gettingstarted/GettingStarted.test.tsx

@@ -0,0 +1,58 @@
+import { render, screen } from 'test/test-utils';
+
+import { setBackendSrv } from '@grafana/runtime';
+import { setupMockServer } from '@grafana/test-utils/server';
+import { backendSrv } from 'app/core/services/backend_srv';
+import { mockDataSource } from 'app/features/alerting/unified/mocks';
+import { testWithFeatureToggles } from 'app/features/alerting/unified/test/test-utils';
+import { setupDataSources } from 'app/features/alerting/unified/testSetup/datasources';
+
+import { getPanelProps } from '../test-utils';
+
+import { GettingStarted } from './GettingStarted';
+
+const mockMetricsDataSource = mockDataSource(undefined, { metrics: true });
+
+setBackendSrv(backendSrv);
+setupDataSources(mockMetricsDataSource);
+setupMockServer();
+
+describe.each([
+  // App platform APIs
+  true,
+  // Legacy APIs
+  false,
+])('GettingStarted - app platform APIs: %s', (featureTogglesEnabled) => {
+  testWithFeatureToggles(featureTogglesEnabled ? ['unifiedStorageSearchUI'] : []);
+
+  it('renders getting started steps', async () => {
+    const props = getPanelProps({});
+    render(<GettingStarted {...props} />);
+
+    const headings = (await screen.findAllByRole('heading')).map((heading) => heading.textContent);
+    expect(headings).toEqual([
+      'Basic',
+      'Grafana fundamentals',
+      'Add your first data source',
+      'Create your first dashboard',
+    ]);
+    const dataSourceStepLink = await screen.findByRole('link', { name: /add your first data source/i });
+    expect(dataSourceStepLink).toHaveTextContent(/complete/i);
+
+    const dashboardStepLink = await screen.findByRole('link', { name: /create your first dashboard/i });
+    expect(dashboardStepLink).toHaveTextContent(/complete/i);
+  });
+
+  it('allows navigating between steps', async () => {
+    const props = getPanelProps({});
+    const { user } = render(<GettingStarted {...props} />);
+
+    await user.click(await screen.findByRole('button', { name: /to advanced tutorials/i }));
+    const [firstAdvHeading] = await screen.findAllByRole('heading');
+    expect(firstAdvHeading).toHaveTextContent(/advanced/i);
+
+    await user.click(await screen.findByRole('button', { name: /to basic tutorials/i }));
+    const [firstBasicHeading] = await screen.findAllByRole('heading');
+    expect(firstBasicHeading).toHaveTextContent(/basic/i);
+  });
+});

public/app/plugins/panel/gettingstarted/steps.ts

@@ -1,6 +1,7 @@
 import { getBackendSrv } from 'app/core/services/backend_srv';
 import store from 'app/core/store';
 import { getDatasourceSrv } from 'app/features/plugins/datasource_srv';
+import { getGrafanaSearcher } from 'app/features/search/service/searcher';
 
 import { SetupStep } from './types';
 
@@ -57,8 +58,8 @@ export const getSteps = (): SetupStep[] => [
         href: 'dashboard/new',
         learnHref: 'https://grafana.com/docs/grafana/latest/guides/getting_started/#create-a-dashboard',
         check: async () => {
-          const result = await getBackendSrv().search({ limit: 1 });
-          return result.length > 0;
+          const result = await getGrafanaSearcher().search({ limit: 1, kind: ['dashboard'] });
+          return result.totalRows > 0;
         },
         done: false,
       },