fix: terraform probes incorrectly formed

src/components/TerraformConfig/TerraformConfig.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { GrafanaTheme2 } from '@grafana/data';
-import { Alert, Button, Modal, useStyles2 } from '@grafana/ui';
+import { Alert, Button, Modal, TextLink, useStyles2 } from '@grafana/ui';
 import { css } from '@emotion/css';
 
 import { FaroEvent, reportEvent } from 'faro';
@@ -47,7 +47,7 @@ export const TerraformConfig = () => {
 };
 
 const GenerateButton = () => {
-  const { config, checkCommands, error } = useTerraformConfig();
+  const { config, checkCommands, probeCommands, error } = useTerraformConfig();
   const [showModal, setShowModal] = useState(false);
   const styles = useStyles2(getStyles);
 
@@ -69,24 +69,31 @@ const GenerateButton = () => {
         contentClassName={styles.modal}
       >
         {error && <Alert title={error.message} />}
-        {config && checkCommands && (
+        {config && (checkCommands || probeCommands) && (
           <>
             <Alert title="Terraform and JSON" severity="info">
               The exported config is using{' '}
               <a href="https://www.terraform.io/docs/language/syntax/json.html">Terraform JSON syntax</a>. You can place
-              this config in a file with a <strong>tf.json</strong> extension and import as a module. See Terraform
-              providor{' '}
-              <a href="https://registry.terraform.io/providers/grafana/grafana/latest/docs">docs for more details</a>
+              this config in a file with a <strong>tf.json</strong> extension and import as a module. See the{' '}
+              <TextLink href="https://registry.terraform.io/providers/grafana/grafana/latest/docs" external={true}>
+                Terraform provider docs
+              </TextLink>{' '}
+              for more details
             </Alert>
             <h5>tf.json</h5>
             <Clipboard content={JSON.stringify(config, null, 2)} className={styles.clipboard} />
-            <h5>Import existing checks into Terraform</h5>
-            <Clipboard content={checkCommands.join(' && ')} className={styles.clipboard} truncate />
-            <h5>Import custom probes into Terraform</h5>
-            <Clipboard
-              content="terraform import grafana_synthetic_monitoring_probe.{{probe_name}} {{probe_id}}:{{probe_auth_token}}"
-              className={styles.clipboard}
-            />
+            {checkCommands && (
+              <>
+                <h5>Import existing checks into Terraform</h5>
+                <Clipboard content={checkCommands.join(' && ')} className={styles.clipboard} truncate/>
+              </>
+            )}
+            {probeCommands && (
+              <>
+                <h5>Import custom probes into Terraform</h5>
+                <Clipboard content={probeCommands.join(' && ')} className={styles.clipboard} truncate />
+              </>
+            )}
           </>
         )}
       </Modal>

src/components/TerraformConfig/terraformTypes.ts

@@ -13,6 +13,7 @@ import { MultiHttpEntry, QueryParams, RequestProps } from 'components/MultiHttp/
 export interface TFOutput {
   config: TFConfig;
   checkCommands: string[];
+  probeCommands: string[];
 }
 
 export interface TFConfig {

src/hooks/useTerraformConfig.test.tsx

@@ -1,23 +1,31 @@
 import { renderHook, waitFor } from '@testing-library/react';
 import { BASIC_PING_CHECK } from 'test/fixtures/checks';
+import { PRIVATE_PROBE, UNSELECTED_PRIVATE_PROBE } from 'test/fixtures/probes';
 import { TERRAFORM_BASIC_PING_CHECK, TERRAFORM_PRIVATE_PROBES } from 'test/fixtures/terraform';
 import { apiRoute } from 'test/handlers';
 import { createWrapper } from 'test/render';
 import { server } from 'test/server';
 
-import { Check, HttpMethod } from 'types';
+import { Check, HttpMethod, Probe } from 'types';
 import { sanitizeName } from 'components/TerraformConfig/terraformConfigUtils';
 
 import { useTerraformConfig } from './useTerraformConfig';
 
-async function renderTerraformHook(checks: Check[]) {
+async function renderTerraformHook(checks: Check[], probes: Probe[]) {
   server.use(
     apiRoute('listChecks', {
       result: () => {
         return {
           json: checks,
         };
       },
+    }),
+    apiRoute('listProbes', {
+      result: () => {
+        return {
+          json: probes,
+        };
+      },
     })
   );
 
@@ -38,8 +46,8 @@ async function renderTerraformHook(checks: Check[]) {
 }
 
 describe('terraform config generation', () => {
-  test('handles basic case', async () => {
-    const result = await renderTerraformHook([BASIC_PING_CHECK]);
+  test('handles basic check case', async () => {
+    const result = await renderTerraformHook([BASIC_PING_CHECK], [PRIVATE_PROBE, UNSELECTED_PRIVATE_PROBE]);
 
     expect(result.current.checkCommands).toEqual(
       [BASIC_PING_CHECK].map((check) => {
@@ -52,19 +60,39 @@ describe('terraform config generation', () => {
     expect(result.current.config).toEqual(TERRAFORM_BASIC_PING_CHECK);
   });
 
-  test('avoids duplicate resource names', async () => {
-    const result = await renderTerraformHook([
-      {
-        ...BASIC_PING_CHECK,
-        job: 'a really really really really really really really really really long jobname',
-        target: 'areallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallylongexample.com',
-      },
-      {
-        ...BASIC_PING_CHECK,
-        job: 'a really really really really really really really really really long jobname',
-        target: 'areallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallylongexample.com/stuff',
-      },
+  test('handles basic probe case', async () => {
+    const result = await renderTerraformHook([BASIC_PING_CHECK], [PRIVATE_PROBE]);
+
+    expect(result.current.probeCommands).toEqual([
+      `terraform import grafana_synthetic_monitoring_probe.${PRIVATE_PROBE.name} ${PRIVATE_PROBE.id}:<PROBE_AUTH_TOKEN>`,
     ]);
+  });
+
+  test('handles several probes case', async () => {
+    const result = await renderTerraformHook([BASIC_PING_CHECK], [PRIVATE_PROBE, UNSELECTED_PRIVATE_PROBE]);
+
+    expect(result.current.probeCommands).toEqual([
+      `terraform import grafana_synthetic_monitoring_probe.${PRIVATE_PROBE.name} ${PRIVATE_PROBE.id}:<PROBE_AUTH_TOKEN>`,
+      `terraform import grafana_synthetic_monitoring_probe.${UNSELECTED_PRIVATE_PROBE.name} ${UNSELECTED_PRIVATE_PROBE.id}:<PROBE_AUTH_TOKEN>`,
+    ]);
+  });
+
+  test('avoids duplicate resource names', async () => {
+    const result = await renderTerraformHook(
+      [
+        {
+          ...BASIC_PING_CHECK,
+          job: 'a really really really really really really really really really long jobname',
+          target: 'areallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallylongexample.com',
+        },
+        {
+          ...BASIC_PING_CHECK,
+          job: 'a really really really really really really really really really long jobname',
+          target: 'areallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallylongexample.com/stuff',
+        },
+      ],
+      [PRIVATE_PROBE, UNSELECTED_PRIVATE_PROBE]
+    );
 
     expect(result.current.config).toEqual({
       provider: {
@@ -123,41 +151,44 @@ describe('terraform config generation', () => {
   });
 
   test('handles multihttp checks', async () => {
-    const result = await renderTerraformHook([
-      {
-        job: 'stuff',
-        target: 'https://www.grafana-dev.com',
-        enabled: true,
-        labels: [],
-        probes: [1, 2],
-        timeout: 17000,
-        frequency: 120000,
-        alertSensitivity: 'none',
-        settings: {
-          multihttp: {
-            entries: [
-              {
-                // @ts-expect-error
-                request: { method: 'GET', url: 'https://www.grafana-dev.com', headers: [], queryFields: [{}] },
-                variables: [],
-                checks: [{ type: 0, subject: 2, condition: 2, value: '200' }],
-              },
-              {
-                request: { url: 'https://secondrequest.com', method: HttpMethod.POST, headers: [], queryFields: [] },
-                variables: [{ type: 0, name: 'avariable', expression: 'great.variable.path' }],
-                checks: [],
-              },
-              {
-                request: { url: '${avariable}', method: HttpMethod.GET, headers: [], queryFields: [] },
-                variables: [],
-                checks: [],
-              },
-            ],
+    const result = await renderTerraformHook(
+      [
+        {
+          job: 'stuff',
+          target: 'https://www.grafana-dev.com',
+          enabled: true,
+          labels: [],
+          probes: [1, 2],
+          timeout: 17000,
+          frequency: 120000,
+          alertSensitivity: 'none',
+          settings: {
+            multihttp: {
+              entries: [
+                {
+                  // @ts-expect-error
+                  request: { method: 'GET', url: 'https://www.grafana-dev.com', headers: [], queryFields: [{}] },
+                  variables: [],
+                  checks: [{ type: 0, subject: 2, condition: 2, value: '200' }],
+                },
+                {
+                  request: { url: 'https://secondrequest.com', method: HttpMethod.POST, headers: [], queryFields: [] },
+                  variables: [{ type: 0, name: 'avariable', expression: 'great.variable.path' }],
+                  checks: [],
+                },
+                {
+                  request: { url: '${avariable}', method: HttpMethod.GET, headers: [], queryFields: [] },
+                  variables: [],
+                  checks: [],
+                },
+              ],
+            },
           },
+          basicMetricsOnly: true,
         },
-        basicMetricsOnly: true,
-      },
-    ]);
+      ],
+      [PRIVATE_PROBE, UNSELECTED_PRIVATE_PROBE]
+    );
 
     expect(result.current.config).toEqual({
       provider: {

src/hooks/useTerraformConfig.ts

@@ -70,7 +70,12 @@ function generateTerraformConfig(probes: Probe[], checks: Check[], apiHost?: str
     }`;
   });
 
-  return { config, checkCommands };
+  const probeCommands = Object.keys(probesConfig).map((probeName) => {
+    const probeId = probes.find((probe) => sanitizeName(probe.name) === probeName)?.id;
+    return `terraform import grafana_synthetic_monitoring_probe.${probeName} ${probeId}:<PROBE_AUTH_TOKEN>`;
+  });
+
+  return { config, checkCommands, probeCommands };
 }
 
 export function useTerraformConfig() {