Refactor view API to use shared fetch helper and add URL encoding

Author: adityathebe

src/api/services/views.ts

@@ -69,16 +69,16 @@ export const getAllViews = (
 /**
  * Get the data for a view by its id.
  */
-export const getViewDataById = async (
-  viewId: string,
+const fetchViewData = async (
+  path: string,
   variables?: Record<string, string>,
   headers?: Record<string, string>
 ): Promise<ViewResult> => {
   const body: { variables?: Record<string, string> } = {
-    variables: variables
+    variables
   };
 
-  const response = await fetch(`/api/view/${viewId}`, {
+  const response = await fetch(path, {
     method: "POST",
     credentials: "include",
     headers: {
@@ -98,34 +98,29 @@ export const getViewDataById = async (
   return response.json();
 };
 
+export const getViewDataById = async (
+  viewId: string,
+  variables?: Record<string, string>,
+  headers?: Record<string, string>
+): Promise<ViewResult> => {
+  return fetchViewData(
+    `/api/view/${encodeURIComponent(viewId)}`,
+    variables,
+    headers
+  );
+};
+
 export const getViewDataByNamespace = async (
   namespace: string,
   name: string,
   variables?: Record<string, string>,
   headers?: Record<string, string>
 ): Promise<ViewResult> => {
-  const body: { variables?: Record<string, string> } = {
-    variables: variables
-  };
-
-  const response = await fetch(`/api/view/${namespace}/${name}`, {
-    method: "POST",
-    credentials: "include",
-    headers: {
-      "Content-Type": "application/json",
-      ...headers
-    },
-    body: JSON.stringify(body)
-  });
-
-  if (!response.ok) {
-    const errorData = await response.json();
-    throw new Error(
-      errorData.error || `HTTP ${response.status}: ${response.statusText}`
-    );
-  }
-
-  return response.json();
+  return fetchViewData(
+    `/api/view/${encodeURIComponent(namespace)}/${encodeURIComponent(name)}`,
+    variables,
+    headers
+  );
 };
 
 /**

src/pages/views/components/SingleView.tsx

@@ -9,6 +9,7 @@ import { useAggregatedViewVariables } from "../hooks/useAggregatedViewVariables"
 import GlobalFiltersForm from "../../audit-report/components/View/GlobalFiltersForm";
 import GlobalFilters from "../../audit-report/components/View/GlobalFilters";
 import { VIEW_VAR_PREFIX } from "../constants";
+import type { ViewRef } from "../../audit-report/types";
 
 interface SingleViewProps {
   id: string;
@@ -41,13 +42,11 @@ const SingleView: React.FC<SingleViewProps> = ({ id }) => {
 
   // Collect all section refs (main view + additional sections)
   // Must be called before early returns to satisfy React hooks rules
-  const allSectionRefs = useMemo(() => {
+  const allSectionRefs = useMemo<ViewRef[]>(() => {
     if (!viewResult?.namespace || !viewResult?.name) {
       return [];
     }
-    const refs = [
-      { namespace: viewResult.namespace || "", name: viewResult.name }
-    ];
+    const refs = [{ namespace: viewResult.namespace, name: viewResult.name }];
     if (viewResult?.sections) {
       viewResult.sections.forEach((section) => {
         refs.push({
@@ -91,27 +90,17 @@ const SingleView: React.FC<SingleViewProps> = ({ id }) => {
     await queryClient.invalidateQueries({ queryKey: ["view-result", id] });
 
     await Promise.all(
-      sectionsToRefresh.map((section) =>
+      sectionsToRefresh.flatMap((section) => [
         queryClient.invalidateQueries({
           queryKey: ["view-result", section.namespace, section.name]
-        })
-      )
-    );
-
-    await Promise.all(
-      sectionsToRefresh.map((section) =>
+        }),
         queryClient.invalidateQueries({
           queryKey: ["view-table", section.namespace, section.name]
-        })
-      )
-    );
-
-    await Promise.all(
-      sectionsToRefresh.map((section) =>
+        }),
         queryClient.invalidateQueries({
           queryKey: ["view-variables", section.namespace, section.name]
         })
-      )
+      ])
     );
   };
 
@@ -171,12 +160,12 @@ const SingleView: React.FC<SingleViewProps> = ({ id }) => {
 
   const { icon, title, namespace, name } = viewResult;
 
-  // Render the main view as a section as well.
-  // Doing this due to some CSS issues that I couldn't solve.
+  // Render the main view through ViewSection to reuse its spacing/scroll styling;
+  // rendering the raw View here caused padding/overflow glitches alongside sections.
   const mySection = {
     title: "",
     viewRef: {
-      namespace: namespace || "",
+      namespace: namespace!,
       name: name
     }
   };

src/pages/views/hooks/useAggregatedViewVariables.ts

@@ -4,11 +4,7 @@ import { getViewDataByNamespace } from "../../../api/services/views";
 import { aggregateVariables } from "../utils/aggregateVariables";
 import { usePrefixedSearchParams } from "../../../hooks/usePrefixedSearchParams";
 import { VIEW_VAR_PREFIX } from "../constants";
-
-interface ViewRef {
-  namespace: string;
-  name: string;
-}
+import type { ViewRef } from "../../audit-report/types";
 
 export function useAggregatedViewVariables(sections: ViewRef[]) {
   const [viewVarParams] = usePrefixedSearchParams(VIEW_VAR_PREFIX, false);

src/pages/views/utils/aggregateVariables.ts

@@ -2,7 +2,8 @@ import { ViewVariable } from "../../audit-report/types";
 
 /**
  * Aggregates variables from multiple views, deduplicating by key.
- * When same key appears multiple times, merges options arrays (union).
+ * When same key appears multiple times, merges options arrays (union) and keeps
+ * the first definition for other fields to avoid silently overriding labels or defaults.
  */
 export function aggregateVariables(
   variableArrays: (ViewVariable[] | undefined)[]