Fix array query params serializing (#1450)

Author: kshmidt-digma

.github/workflows/build.yml

@@ -29,7 +29,7 @@ jobs:
       - run: npm ci
 
       - env:
-          GITHUB_TOKEN: ${{ secrets.CONTENTS_WRITE_PAT }}
+          GITHUB_TOKEN: ${{ secrets.CONTENTS_WRITE_PAT }} # TODO: fix
         run: npm run build:prod:${{ inputs.platform }}
 
       - name: Get artifact name

src/components/Agentic/IncidentTemplate/MCPServerDialog/index.tsx

@@ -166,7 +166,9 @@ export const MCPServerDialog = ({
     onClose();
   };
 
-  const title = serverData?.uid ? "Set MCP Server" : "Add MCP Server";
+  const title = serverData?.uid
+    ? `Edit ${serverData.name} MCP Server`
+    : "Add MCP Server";
 
   return (
     <Dialog title={title} onClose={handleDialogClose}>

src/components/Agentic/IncidentTemplate/index.tsx

@@ -170,6 +170,10 @@ export const IncidentTemplate = () => {
     }
   }, [mcpServers]);
 
+  const mcpServerToDelete = mcpServers?.mcps.find(
+    (x) => x.uid === mcpServerIdToDelete
+  );
+
   return (
     <s.Container>
       <s.Header>
@@ -211,7 +215,7 @@ export const IncidentTemplate = () => {
       {mcpServerIdToDelete && (
         <s.StyledOverlay>
           <CancelConfirmation
-            header={"Delete MCP server"}
+            header={`Delete ${mcpServerToDelete?.name ?? " "}MCP server`}
             description={"Are you sure you want to delete this MCP server?"}
             onClose={handleDeleteMCPServerDialogClose}
             onConfirm={handleDeleteMCPServerDialogConfirm}

src/redux/services/auth.ts

@@ -1,8 +1,13 @@
 import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
+import { serializeParams } from "./serializeParams";
 
 export const authApi = createApi({
   reducerPath: "authApi",
-  baseQuery: fetchBaseQuery({ baseUrl: "/auth/", credentials: "same-origin" }),
+  baseQuery: fetchBaseQuery({
+    baseUrl: "/auth/",
+    credentials: "same-origin",
+    paramsSerializer: serializeParams
+  }),
   endpoints: (builder) => ({
     logout: builder.mutation<void, void>({
       query: () => ({

src/redux/services/digma.ts

@@ -1,5 +1,6 @@
 import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
 import { isString } from "../../typeGuards/isString";
+import { serializeParams } from "./serializeParams";
 import type {
   AddMCPServerPayload,
   AgenticInvestigatePayload,
@@ -137,7 +138,8 @@ export const digmaApi = createApi({
     baseUrl: isString(window.digmaApiProxyPrefix)
       ? window.digmaApiProxyPrefix
       : "/api/",
-    credentials: "same-origin"
+    credentials: "same-origin",
+    paramsSerializer: serializeParams
   }),
   endpoints: (builder) => ({
     getAbout: builder.query<GetAboutResponse, void>({

src/redux/services/digmaEmpty.ts

@@ -1,13 +1,15 @@
 import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
 import { isString } from "../../typeGuards/isString";
+import { serializeParams } from "./serializeParams";
 
 export const digmaEmptyApi = createApi({
   reducerPath: "digmaApi",
   baseQuery: fetchBaseQuery({
     baseUrl: isString(window.digmaApiProxyPrefix)
       ? window.digmaApiProxyPrefix
       : "/api/",
-    credentials: "same-origin"
+    credentials: "same-origin",
+    paramsSerializer: serializeParams
   }),
   endpoints: () => ({})
 });

src/redux/services/plugin.ts

@@ -1,10 +1,12 @@
 import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
+import { serializeParams } from "./serializeParams";
 
 export const pluginApi = createApi({
   reducerPath: "pluginApi",
   baseQuery: fetchBaseQuery({
     baseUrl: "/plugin-api",
-    credentials: "same-origin"
+    credentials: "same-origin",
+    paramsSerializer: serializeParams
   }),
   endpoints: () => ({})
 });

src/redux/services/serializeParams.ts

@@ -0,0 +1,22 @@
+// Serialize array params as duplicated params
+export const serializeParams = (
+  params: Record<string, string | number | boolean | null | undefined>
+) => {
+  const searchParams = new URLSearchParams();
+
+  Object.entries(params).forEach(([key, value]) => {
+    if (value === undefined || value === null) {
+      return;
+    }
+
+    if (Array.isArray(value)) {
+      value.forEach((item) => {
+        searchParams.append(key, String(item));
+      });
+    } else {
+      searchParams.append(key, String(value));
+    }
+  });
+
+  return searchParams.toString();
+};