Production deploy

api.planx.uk/modules/analytics/metabase/shared/client.test.ts

@@ -1 +1,115 @@
-test.todo("should test configuration and errors");
+import axios from "axios";
+import {
+  validateConfig,
+  createMetabaseClient,
+  MetabaseError,
+} from "./client.js";
+import nock from "nock";
+
+const axiosCreateSpy = vi.spyOn(axios, "create");
+
+describe("Metabase client", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    vi.resetModules();
+  });
+
+  afterEach(() => {
+    vi.unstubAllEnvs();
+  });
+
+  test("returns configured client", async () => {
+    const client = createMetabaseClient();
+    expect(client.defaults.baseURL).toBe(process.env.METABASE_URL_EXT);
+    expect(client.defaults.headers["X-API-Key"]).toBe(
+      process.env.METABASE_API_KEY,
+    );
+    expect(client.defaults.headers["Content-Type"]).toBe("application/json");
+    expect(client.defaults.timeout).toBe(30_000);
+  });
+
+  describe("validates configuration", () => {
+    test("throws error when URL_EXT is missing", () => {
+      vi.stubEnv("METABASE_URL_EXT", undefined);
+      expect(() => validateConfig()).toThrow(
+        "Missing environment variable 'METABASE_URL_EXT'",
+      );
+    });
+
+    test("throws error when API_KEY is missing", () => {
+      vi.stubEnv("METABASE_API_KEY", undefined);
+      expect(() => validateConfig()).toThrow(
+        "Missing environment variable 'METABASE_API_KEY'",
+      );
+    });
+
+    test("returns valid config object", () => {
+      const config = validateConfig();
+      expect(config).toMatchObject({
+        baseURL: process.env.METABASE_URL_EXT,
+        apiKey: process.env.METABASE_API_KEY,
+        timeout: 30_000,
+        retries: 3,
+      });
+    });
+  });
+
+  describe("Error handling", () => {
+    test("retries then succeeds on 5xx errors", async () => {
+      const metabaseScope = nock(process.env.METABASE_URL_EXT!);
+
+      metabaseScope
+        .get("/test")
+        .reply(500, { message: "Internal Server Error" })
+        .get("/test")
+        .reply(200, { data: "success" });
+
+      const client = createMetabaseClient();
+      const response = await client.get("/test");
+
+      expect(response.data).toEqual({ data: "success" });
+      expect(metabaseScope.isDone()).toBe(true);
+    });
+
+    test("throws an error if all requests fail", async () => {
+      const metabaseScope = nock(process.env.METABASE_URL_EXT!);
+
+      metabaseScope
+        .get("/test")
+        .times(4)
+        .reply(500, { message: "Internal Server Error" });
+
+      const client = createMetabaseClient();
+
+      try {
+        await client.get("/test");
+        expect.fail("Should have thrown an error");
+      } catch (error) {
+        expect(error).toBeInstanceOf(MetabaseError);
+        expect((error as MetabaseError).statusCode).toBe(500);
+        expect(metabaseScope.isDone()).toBe(true);
+      }
+    });
+
+    test("does not retry on non-5xx errors", async () => {
+      const metabaseScope = nock(process.env.METABASE_URL_EXT!);
+
+      metabaseScope.get("/test").once().reply(200, { data: "success" });
+
+      const client = createMetabaseClient();
+      const response = await client.get("/test");
+
+      expect(response.data).toEqual({ data: "success" });
+
+      // All expected requests were made
+      expect(metabaseScope.isDone()).toBe(true);
+
+      // No pending mocks left
+      expect(metabaseScope.pendingMocks()).toHaveLength(0);
+
+      // Double check that no other requests were intercepted
+      const requestCount = metabaseScope.activeMocks().length;
+      expect(requestCount).toBe(0);
+    });
+  });
+});

api.planx.uk/modules/analytics/metabase/shared/client.ts

@@ -0,0 +1,129 @@
+import axios from "axios";
+import type {
+  AxiosInstance,
+  AxiosError,
+  InternalAxiosRequestConfig,
+} from "axios";
+
+// Custom error class for Metabase-specific errors
+export class MetabaseError extends Error {
+  constructor(
+    message: string,
+    public statusCode?: number,
+    public response?: unknown,
+  ) {
+    super(message);
+    this.name = "MetabaseError";
+  }
+}
+
+interface MetabaseConfig {
+  baseURL: string;
+  apiKey: string;
+  timeout?: number;
+  retries?: number;
+}
+
+// Validate environment variables
+export const validateConfig = (): MetabaseConfig => {
+  const baseURL = process.env.METABASE_URL_EXT;
+  const apiKey = process.env.METABASE_API_KEY;
+
+  const METABASE_TIMEOUT = 30_000;
+  const METABASE_MAX_RETRIES = 3;
+
+  assert(baseURL, "Missing environment variable 'METABASE_URL_EXT'");
+  assert(apiKey, "Missing environment variable 'METABASE_API_KEY'");
+
+  return {
+    baseURL,
+    apiKey,
+    timeout: METABASE_TIMEOUT,
+    retries: METABASE_MAX_RETRIES,
+  };
+};
+
+// Extended request config to include retry count
+interface ExtendedAxiosRequestConfig extends InternalAxiosRequestConfig {
+  retryCount?: number;
+}
+
+// Create and configure Axios instance
+export const createMetabaseClient = (): AxiosInstance => {
+  const config = validateConfig();
+
+  const client = axios.create({
+    baseURL: config.baseURL,
+    headers: {
+      "X-API-Key": config.apiKey,
+      "Content-Type": "application/json",
+    },
+    timeout: config.timeout,
+  });
+
+  client.interceptors.response.use(
+    (response) => {
+      return response;
+    },
+    async (error: AxiosError) => {
+      const originalRequest = error.config as ExtendedAxiosRequestConfig;
+
+      if (!originalRequest) {
+        throw new MetabaseError("No request config available");
+      }
+
+      // Initialise retry count if not present
+      if (typeof originalRequest.retryCount === "undefined") {
+        originalRequest.retryCount = 0;
+      }
+
+      // Handle retry logic
+      if (error.response) {
+        // Retry on 5xx errors
+        if (
+          error.response.status >= 500 &&
+          originalRequest.retryCount < (config.retries ?? 3)
+        ) {
+          originalRequest.retryCount++;
+          return client.request(originalRequest);
+        }
+
+        // Transform error response
+        const errorMessage =
+          typeof error.response.data === "object" &&
+          error.response.data !== null &&
+          "message" in error.response.data
+            ? String(error.response.data.message)
+            : "Metabase request failed";
+
+        throw new MetabaseError(
+          errorMessage,
+          error.response.status,
+          error.response.data,
+        );
+      }
+
+      // Handle network errors
+      if (error.request) {
+        throw new MetabaseError(
+          "Network error occurred",
+          undefined,
+          error.request,
+        );
+      }
+
+      // Handle other errors
+      throw new MetabaseError(error.message);
+    },
+  );
+
+  return client;
+};
+
+// // Export both client and instance with delayed instantiation for test purposes
+// export let metabaseClient: AxiosInstance;
+
+// export const initializeMetabaseClient = () => {
+//   metabaseClient = createMetabaseClient();
+//   return metabaseClient;
+// };

api.planx.uk/modules/flows/validate/helpers.ts

@@ -22,14 +22,12 @@ export const hasComponentType = (
   const nodeIds = Object.entries(flowGraph).filter(
     (entry): entry is [string, Node] => isComponentType(entry, type),
   );
+
   if (fn) {
-    nodeIds
-      ?.filter(([_nodeId, nodeData]) => nodeData?.data?.fn === fn)
-      ?.map(([nodeId, _nodeData]) => nodeId);
-  } else {
-    nodeIds?.map(([nodeId, _nodeData]) => nodeId);
+    return nodeIds.some(([, nodeData]) => nodeData?.data?.fn === fn);
   }
-  return Boolean(nodeIds?.length);
+
+  return Boolean(nodeIds.length);
 };
 
 export const numberOfComponentType = (

api.planx.uk/modules/flows/validate/validate.test.ts

@@ -419,15 +419,9 @@ describe("invite to pay validation on diff", () => {
   });
 
   it("does not update if invite to pay is enabled, but there is not a Checklist that sets `proposal.projectType`", async () => {
-    const {
-      Checklist: _Checklist,
-      ChecklistOptionOne: _ChecklistOptionOne,
-      ChecklistOptionTwo: _ChecklistOptionTwo,
-      ...invalidatedFlow
-    } = flowWithInviteToPay;
-    invalidatedFlow["_root"].edges?.splice(
-      invalidatedFlow["_root"].edges?.indexOf("Checklist"),
-    );
+    const invalidatedFlow = flowWithInviteToPay;
+    // Remove proposal.projectType, set incorrect variable
+    invalidatedFlow!.Checklist!.data!.fn = "some.other.variable";
 
     queryMock.mockQuery({
       name: "GetFlowData",

doc/how-to/how-to-add-fields-to-search.md

@@ -0,0 +1,90 @@
+# How to add fields to the Editor search index
+
+## Overview
+
+This guide outlines the process of adding new searchable fields to the PlanX Editors' frontend search functionality, which uses Fuse.js for indexing and searching. This is a required step with adding a new component to PlanX, or adding new fields to an existing component.
+
+## Background
+
+- Search is currently implemented in the frontend using Fuse.js
+- Only certain fields are searchable:
+  - Text fields (simple text)
+  - Rich text fields (HTML)
+  - Data values (e.g. `data.fn`)
+
+## Process
+
+### 1. Update facets configuration
+
+Location: `src/pages/FlowEditor/components/Sidebar/Search/facets.ts`
+
+#### Guidelines:
+- Use key paths to the new fields (e.g. `data.myNewField`)
+- Wrap rich text fields with `richTextField()` helper - this strips HTML tags
+- Add data fields to `DATA_FACETS`
+- Add text fields to `ALL_FACETS`
+- Avoid adding duplicate values already held in `ALL_FACETS` (e.g., `data.title`, `data.description`)
+
+#### Example:
+
+```ts
+// facets.ts
+
+const myNewComponent: SearchFacets = [
+  richTextField("data.myRichTextField"),
+  "data.myPlainTextField"
+];
+
+export const ALL_FACETS: SearchFacets = [
+  ...otherComponents,
+  ...myNewComponent,
+  ...DATA_FACETS,
+];
+```
+
+### 2. Assign display values
+
+Location: `src/pages/FlowEditor/components/Sidebar/Search/SearchResultCard/getDisplayDetailsForResult.tsx`
+
+#### Add key formatters:
+
+```ts
+// getDisplayDetailsForResult.tsx
+
+const keyFormatters: KeyMap = {
+  ...existingFormatters,
+  "data.myNewField": {
+    getDisplayKey: () => "My New Field",
+  },
+};
+```
+
+### 3. Update tests
+
+Locations: 
+- `src/pages/FlowEditor/components/Sidebar/Search/SearchResultCard/allFacets.test.ts`
+- `src/pages/FlowEditor/components/Sidebar/Search/SearchResultCard/dataFacets.test.ts`
+
+#### Test steps:
+1. Add new component to `mockFlow`
+2. Create mock search result 
+   - Example: `mockMyComponentResult: SearchResult<IndexedNode>`
+
+### Debugging tip
+
+A search result can be easily logged to the console from `SearchResultCard`. Simply search for one of your new fields, and click on the card.
+
+```ts
+// SearchResultCard/index.tsx
+
+const handleClick = () => {
+  const url = getURLForNode(result.item.id);
+  // Temporarily disable navigation
+  // navigate(url);
+
+  // Log the full search result to console
+  console.log({ result });
+};
+```
+
+For reference, [please see this PR](https://github.com/theopensystemslab/planx-new/pull/4015) which added the text fields for the `Feedback` component to the search index.