fix: use AddNewCheckButton for check list empty state (#1485)

* fix: use addnewcheck button for check list empty state

* fix: empty state test

Author: ckbedwell

docs/analytics/analytics-events.md

@@ -14,9 +14,9 @@ Tracks when the "Add New Check" button is clicked.
 
 ##### Properties
 
-| name   | type                         | description                                |
-| ------ | ---------------------------- | ------------------------------------------ |
-| source | `"check-list" \| "homepage"` | What location the button was clicked from. |
+| name   | type                                                     | description                                |
+| ------ | -------------------------------------------------------- | ------------------------------------------ |
+| source | `"check-list-empty-state" \| "check-list" \| "homepage"` | What location the button was clicked from. |
 
 #### synthetic-monitoring_check_creation_add_check_type_group_button_clicked
 

scripts/terraform-validation/generate-test-configs.ts

@@ -2,16 +2,23 @@
 
 import fs from 'fs';
 import path from 'path';
-import type { TFCheckConfig, TFProbeConfig, TFCheckAlertsConfig, TFConfig } from '../../src/components/TerraformConfig/terraformTypes';
+import type {
+  TFCheckConfig,
+  TFProbeConfig,
+  TFCheckAlertsConfig,
+  TFConfig,
+} from '../../src/components/TerraformConfig/terraformTypes';
 
 async function generateConfigs() {
   try {
     console.log('Loading test fixtures...');
     const fixtures = await import('../../src/test/fixtures/checks');
     const probeFixtures = await import('../../src/test/fixtures/probes');
-    
+
     console.log('Loading REAL production terraform utilities...');
-    const { checkToTF, probeToTF, sanitizeName } = await import('../../src/components/TerraformConfig/terraformConfigUtils');
+    const { checkToTF, probeToTF, sanitizeName } = await import(
+      '../../src/components/TerraformConfig/terraformConfigUtils'
+    );
 
     // Comprehensive test cases covering all check types and probe types
     const testCases = [
@@ -50,18 +57,18 @@ async function generateConfigs() {
         check: fixtures.BASIC_MULTIHTTP_CHECK,
         probe: probeFixtures.ONLINE_PROBE,
       },
-    // Scripted Check
-    {
-      name: 'basic-scripted',
-      check: fixtures.BASIC_SCRIPTED_CHECK,
-      probe: probeFixtures.SCRIPTED_DISABLED_PROBE,
-    },
-    // Browser Check with template literals
-    {
-      name: 'complex-browser',
-      check: fixtures.COMPLEX_BROWSER_CHECK,
-      probe: probeFixtures.PRIVATE_PROBE,
-    },
+      // Scripted Check
+      {
+        name: 'basic-scripted',
+        check: fixtures.BASIC_SCRIPTED_CHECK,
+        probe: probeFixtures.SCRIPTED_DISABLED_PROBE,
+      },
+      // Browser Check with template literals
+      {
+        name: 'complex-browser',
+        check: fixtures.COMPLEX_BROWSER_CHECK,
+        probe: probeFixtures.PRIVATE_PROBE,
+      },
       // Traceroute Check
       {
         name: 'basic-traceroute',
@@ -71,7 +78,7 @@ async function generateConfigs() {
     ];
 
     const outputDir = 'artifacts/terraform-validation';
-    
+
     // Ensure output directory exists
     if (!fs.existsSync(outputDir)) {
       fs.mkdirSync(outputDir, { recursive: true });
@@ -81,13 +88,13 @@ async function generateConfigs() {
     const allChecks: TFCheckConfig = {};
     const allProbes: TFProbeConfig = {};
     const allCheckAlerts: TFCheckAlertsConfig = {};
-    
+
     for (const testCase of testCases) {
       console.log(`Transforming ${testCase.name} using REAL production checkToTF and probeToTF...`);
-      
+
       const checkTF = checkToTF(testCase.check);
       const probeTF = probeToTF(testCase.probe);
-      
+
       // Add to comprehensive config
       allChecks[testCase.name.replace('-', '_')] = checkTF;
       allProbes[`${testCase.name.replace('-', '_')}_probe`] = probeTF;
@@ -101,7 +108,7 @@ async function generateConfigs() {
             name: alert.name,
             threshold: alert.threshold,
             period: alert.period,
-            runbook_url: alert.runbookUrl || "",
+            runbook_url: alert.runbookUrl || '',
           })),
         };
         console.log(`  → Added alerts for ${testCase.name}: ${testCase.check.alerts.length} alert(s)`);
@@ -113,15 +120,15 @@ async function generateConfigs() {
       terraform: {
         required_providers: {
           grafana: {
-            source: "grafana/grafana",
-            version: ">= 4.3.0"
-          }
-        }
+            source: 'grafana/grafana',
+            version: '>= 4.3.0',
+          },
+        },
       },
       resource: {
         grafana_synthetic_monitoring_check: allChecks,
-        grafana_synthetic_monitoring_probe: allProbes
-      }
+        grafana_synthetic_monitoring_probe: allProbes,
+      },
     };
 
     // Add alerts resource if any checks have alerts
@@ -152,11 +159,10 @@ async function generateConfigs() {
     console.log('\n🧪 To validate:');
     console.log('   cd artifacts/terraform-validation');
     console.log('   terraform validate');
-    
   } catch (error) {
     console.error('❌ Error generating configurations:', error);
     process.exit(1);
   }
 }
 
-generateConfigs(); 
+generateConfigs();

src/components/AddNewCheckButton/AddNewCheckButton.tsx

@@ -8,7 +8,7 @@ import { generateRoutePath } from 'routing/utils';
 import { getUserPermissions } from 'data/permissions';
 
 interface AddNewCheckButtonProps {
-  source: 'check-list' | 'homepage';
+  source: 'check-list-empty-state' | 'check-list' | 'homepage';
 }
 
 export function AddNewCheckButton({ source }: AddNewCheckButtonProps) {

src/components/ChecksEmptyState.test.tsx

@@ -15,26 +15,23 @@ async function renderComponent() {
 describe('ChecksEmptyState', () => {
   it('should render all components correctly', async () => {
     const { container } = await renderComponent();
-    
+
     // Verify container renders
     expect(container).toBeInTheDocument();
-    
+
     // Verify correct message
     expect(await screen.findByText("You haven't created any checks yet")).toBeInTheDocument();
-    
+
     // Verify correct button
-    expect(await screen.findByText('Create check')).toBeInTheDocument();
-    
+    expect(await screen.findByText('Add new check')).toBeInTheDocument();
+
     // Verify correct link text
     const docsLink = await screen.findByText('Synthetic Monitoring docs');
     expect(docsLink).toBeInTheDocument();
-    
+
     // Verify link href
-    expect(docsLink).toHaveAttribute(
-      'href',
-      'https://grafana.com/docs/grafana-cloud/synthetic-monitoring/'
-    );
-    
+    expect(docsLink).toHaveAttribute('href', 'https://grafana.com/docs/grafana-cloud/synthetic-monitoring/');
+
     // Verify link target
     expect(docsLink).toHaveAttribute('target', '_blank');
   });

src/components/ChecksEmptyState.tsx

@@ -1,28 +1,20 @@
 import React from 'react';
-import { Button, EmptyState, TextLink } from '@grafana/ui';
+import { EmptyState, TextLink } from '@grafana/ui';
 import { DataTestIds } from 'test/dataTestIds';
 
-import { AppRoutes } from 'routing/types';
-import { useNavigation } from 'hooks/useNavigation';
+import { AddNewCheckButton } from 'components/AddNewCheckButton';
 
 interface ChecksEmptyStatePageProps {
   className?: string;
 }
 
 export function ChecksEmptyState({ className }: ChecksEmptyStatePageProps) {
-  const navigate = useNavigation();
-  const handleCallToAction = () => navigate(AppRoutes.ChooseCheckGroup);
-
   return (
     <div className={className} data-testid={DataTestIds.CHECKS_EMPTY_STATE}>
       <EmptyState
         variant="call-to-action"
         message="You haven't created any checks yet"
-        button={
-          <Button onClick={handleCallToAction} icon="plus">
-            Create check
-          </Button>
-        }
+        button={<AddNewCheckButton source="check-list-empty-state" />}
       >
         <p>
           Create a check to start monitoring your services with Grafana Cloud, or check out the{' '}

src/features/tracking/checkCreationEvents.ts

@@ -6,7 +6,7 @@ const checkCreationEvents = createSMEventFactory('check_creation');
 
 interface AddNewCheckButtonClicked extends TrackingEventProps {
   /** What location the button was clicked from. */
-  source: 'check-list' | 'homepage';
+  source: 'check-list-empty-state' | 'check-list' | 'homepage';
 }
 
 /** Tracks when the "Add New Check" button is clicked. */