UN-4187 [MISC] Standardise optional plugin loading with a single loadPlugin helper

frontend/src/App.jsx

@@ -13,6 +13,7 @@ import { NotificationClearAll } from "./components/notification/NotificationClea
 import { NotificationIdLine } from "./components/notification/NotificationIdLine.jsx";
 import { PageTitle } from "./components/widgets/page-title/PageTitle.jsx";
 import { THEME } from "./helpers/GetStaticData.js";
+import { loadPlugin } from "./helpers/pluginLoader.js";
 import { attachRequestIdInterceptor } from "./helpers/requestId.js";
 import PostHogPageviewTracker from "./PostHogPageviewTracker.js";
 import { Router } from "./routes/Router.jsx";
@@ -26,15 +27,11 @@ if (!axios[GLOBAL_INTERCEPTOR_FLAG]) {
   axios[GLOBAL_INTERCEPTOR_FLAG] = true;
 }
 
-let GoogleTagManagerHelper;
-try {
-  const mod = await import(
-    "./plugins/google-tag-manager-helper/GoogleTagManagerHelper.js"
-  );
-  GoogleTagManagerHelper = mod.GoogleTagManagerHelper;
-} catch {
-  // The component will remain null of it is not available
-}
+const GoogleTagManagerHelper = await loadPlugin(() =>
+  import("./plugins/google-tag-manager-helper/GoogleTagManagerHelper.js").then(
+    (m) => m.GoogleTagManagerHelper,
+  ),
+);
 
 function App() {
   const { sessionDetails, isLogoutLoading } = useSessionStore();

frontend/src/components/agency/configure-connector-modal/ConfigureConnectorModal.jsx

@@ -11,6 +11,7 @@ import { Tabs } from "@/components/ui/shims/antd-structure";
 import { Typography } from "@/components/ui/shims/antd-typography";
 
 import { fetchAllPages } from "../../../helpers/pagination";
+import { loadPlugin } from "../../../helpers/pluginLoader.js";
 import { useAxiosPrivate } from "../../../hooks/useAxiosPrivate";
 import { useExceptionHandler } from "../../../hooks/useExceptionHandler";
 import usePostHogEvents from "../../../hooks/usePostHogEvents";
@@ -24,18 +25,10 @@ import { ReadOnlyNotice } from "../../widgets/read-only-notice/ReadOnlyNotice";
 import { ConfigureFormsLayout } from "../configure-forms-layout/ConfigureFormsLayout";
 import "./ConfigureConnectorModal.css";
 
-let RuleEngine;
-let ruleEngineTabs;
-
-try {
-  const ruleEnginePlugin = await import(
-    "../../../plugins/manual-review/rule-engine"
-  );
-  RuleEngine = ruleEnginePlugin.RuleEngine;
-  ruleEngineTabs = ruleEnginePlugin.ruleEngineTabs;
-} catch {
-  // Plugin not available
-}
+const { RuleEngine, ruleEngineTabs } = await loadPlugin(
+  () => import("../../../plugins/manual-review/rule-engine"),
+  {},
+);
 
 function ConfigureConnectorModal({
   open,

frontend/src/components/agency/ds-settings-card/DsSettingsCard.jsx

@@ -7,6 +7,7 @@ import { Image } from "@/components/ui/shims/antd-leaves";
 import { Tooltip } from "@/components/ui/shims/antd-overlays";
 import { Typography } from "@/components/ui/shims/antd-typography";
 
+import { loadPlugin } from "../../../helpers/pluginLoader.js";
 import { useAxiosPrivate } from "../../../hooks/useAxiosPrivate";
 import { useExceptionHandler } from "../../../hooks/useExceptionHandler";
 import useRequestUrl from "../../../hooks/useRequestUrl";
@@ -67,19 +68,15 @@ function DsSettingsCard({ connType, endpointDetails, message }) {
   };
 
   useEffect(() => {
-    const loadPlugin = async () => {
-      try {
-        const mod = await import(
-          "../../../plugins/dscard-input-options/AppDeploymentCardInputOptions"
-        );
-        if (flags.app_deployment && mod.appDeploymentInputOption) {
-          setUpdatedInputoptions(mod.appDeploymentInputOption);
-        }
-      } catch {
-        // The component will remain null of it is not available
+    loadPlugin(() =>
+      import(
+        "../../../plugins/dscard-input-options/AppDeploymentCardInputOptions"
+      ).then((m) => m.appDeploymentInputOption),
+    ).then((appDeploymentInputOption) => {
+      if (flags.app_deployment && appDeploymentInputOption) {
+        setUpdatedInputoptions(appDeploymentInputOption);
       }
-    };
-    loadPlugin();
+    });
   }, []);
 
   useEffect(() => {

frontend/src/components/custom-tools/combined-output/CombinedOutput.jsx

@@ -11,6 +11,7 @@ import {
   displayPromptResult,
   promptType,
 } from "../../../helpers/GetStaticData";
+import { loadPlugin } from "../../../helpers/pluginLoader.js";
 import { useAxiosPrivate } from "../../../hooks/useAxiosPrivate";
 import { useAlertStore } from "../../../store/alert-store";
 import { useCustomToolStore } from "../../../store/custom-tool-store";
@@ -19,41 +20,34 @@ import "./CombinedOutput.css";
 import { useExceptionHandler } from "../../../hooks/useExceptionHandler";
 import { JsonView } from "./JsonView";
 
-let TableView;
-let promptOutputApiSps;
-try {
-  const tvMod = await import("../../../plugins/simple-prompt-studio/TableView");
-  TableView = tvMod.TableView;
-  const helperMod = await import(
-    "../../../plugins/simple-prompt-studio/helper"
-  );
-  promptOutputApiSps = helperMod.promptOutputApiSps;
-} catch {
-  // The component will remain null if it is not available
-}
+const TableView = await loadPlugin(() =>
+  import("../../../plugins/simple-prompt-studio/TableView").then(
+    (m) => m.TableView,
+  ),
+);
+const promptOutputApiSps = await loadPlugin(() =>
+  import("../../../plugins/simple-prompt-studio/helper").then(
+    (m) => m.promptOutputApiSps,
+  ),
+);
 
-let publicOutputsApi;
-let publicDefaultOutputApi;
-try {
-  const mod = await import(
-    "../../../plugins/prompt-studio-public-share/helpers/PublicShareAPIs"
-  );
-  publicOutputsApi = mod.publicOutputsApi;
-  publicDefaultOutputApi = mod.publicDefaultOutputApi;
-} catch {
-  // The component will remain null if it is not available
-}
+const { publicOutputsApi, publicDefaultOutputApi } = await loadPlugin(
+  () =>
+    import(
+      "../../../plugins/prompt-studio-public-share/helpers/PublicShareAPIs"
+    ),
+  {},
+);
 
 // OSS falls back to passthrough helpers — no enrichment.
-let splitCombinedData = (data) => ({ combined: data, bundle: null });
-let buildEnrichedFromBundle = (_output, _bundle, _formatter) => ({});
-let getEnrichmentFromItem = (_item) => null;
-try {
-  const mod = await import("../../../plugins/lookup-enriched-toggle/helpers");
-  splitCombinedData = mod.splitCombinedData;
-  buildEnrichedFromBundle = mod.buildEnrichedFromBundle;
-  getEnrichmentFromItem = mod.getEnrichmentFromItem;
-} catch {}
+const {
+  splitCombinedData = (data) => ({ combined: data, bundle: null }),
+  buildEnrichedFromBundle = (_output, _bundle, _formatter) => ({}),
+  getEnrichmentFromItem = (_item) => null,
+} = await loadPlugin(
+  () => import("../../../plugins/lookup-enriched-toggle/helpers"),
+  {},
+);
 
 const buildDefaultProfileOutputs = (data) => {
   const { combined: payload, bundle } = splitCombinedData(data);

frontend/src/components/custom-tools/combined-output/JsonView.jsx

@@ -4,18 +4,15 @@ import { useEffect, useRef, useState } from "react";
 import { Tooltip } from "@/components/ui/shims/antd-overlays";
 import { Tabs } from "@/components/ui/shims/antd-structure";
 
+import { loadPlugin } from "../../../helpers/pluginLoader.js";
 import { useCustomToolStore } from "../../../store/custom-tool-store";
 import { JsonViewBody } from "./JsonViewBody";
 
-let EnrichedOutputToggle;
-try {
-  const mod = await import(
-    "../../../plugins/lookup-enriched-toggle/EnrichedOutputToggle"
-  );
-  EnrichedOutputToggle = mod.EnrichedOutputToggle;
-} catch {
-  // The component will remain undefined if it is not available
-}
+const EnrichedOutputToggle = await loadPlugin(() =>
+  import("../../../plugins/lookup-enriched-toggle/EnrichedOutputToggle").then(
+    (m) => m.EnrichedOutputToggle,
+  ),
+);
 
 function JsonView({
   combinedOutput,

frontend/src/components/custom-tools/document-manager/DocumentManager.jsx

@@ -17,6 +17,7 @@ import {
   base64toBlobWithMime,
   docIndexStatus,
 } from "../../../helpers/GetStaticData";
+import { loadPlugin } from "../../../helpers/pluginLoader.js";
 import { useAxiosPrivate } from "../../../hooks/useAxiosPrivate";
 import usePostHogEvents from "../../../hooks/usePostHogEvents";
 import { useCustomToolStore } from "../../../store/custom-tool-store";
@@ -44,41 +45,34 @@ const viewTypes = {
 };
 
 // Import components for the summarize feature
-let SummarizeView = null;
-try {
-  const svMod = await import("../../../plugins/summarize-view/SummarizeView");
-  SummarizeView = svMod.SummarizeView;
-  const stMod = await import("../../../plugins/summarize-tab/SummarizeTab");
-  const tabLabel = stMod.tabLabel;
-  if (tabLabel) {
-    items.push({
-      key: "3",
-      label: tabLabel,
-    });
-  }
-} catch {
-  // The component will remain null of it is not available
+const SummarizeView = await loadPlugin(() =>
+  import("../../../plugins/summarize-view/SummarizeView").then(
+    (m) => m.SummarizeView,
+  ),
+);
+const summarizeTabLabel = await loadPlugin(() =>
+  import("../../../plugins/summarize-tab/SummarizeTab").then((m) => m.tabLabel),
+);
+// The tab is only useful when the view it opens is available too.
+if (SummarizeView && summarizeTabLabel) {
+  items.push({
+    key: "3",
+    label: summarizeTabLabel,
+  });
 }
 
 // Import component for the simple prompt studio feature
-let getDocumentsSps;
-try {
-  const mod = await import(
+const getDocumentsSps = await loadPlugin(() =>
+  import(
     "../../../plugins/simple-prompt-studio/simple-prompt-studio-api-service"
-  );
-  getDocumentsSps = mod.getDocumentsSps;
-} catch {
-  // The component will remain null of it is not available
-}
-let publicDocumentApi;
-try {
-  const mod = await import(
+  ).then((m) => m.getDocumentsSps),
+);
+const publicDocumentApi = await loadPlugin(() =>
+  import(
     "../../../plugins/prompt-studio-public-share/helpers/PublicShareAPIs"
-  );
-  publicDocumentApi = mod.publicDocumentApi;
-} catch {
-  // The component will remain null of it is not available
-}
+  ).then((m) => m.publicDocumentApi),
+);
+
 function DocumentManager({ generateIndex, handleUpdateTool, handleDocChange }) {
   const [openManageDocsModal, setOpenManageDocsModal] = useState(false);
   const [page, setPage] = useState(1);

frontend/src/components/custom-tools/document-parser/DocumentParser.jsx

@@ -4,6 +4,7 @@ import { useSearchParams } from "react-router-dom";
 
 import "./DocumentParser.css";
 import { promptType } from "../../../helpers/GetStaticData";
+import { loadPlugin } from "../../../helpers/pluginLoader.js";
 import { useAxiosPrivate } from "../../../hooks/useAxiosPrivate";
 import { useExceptionHandler } from "../../../hooks/useExceptionHandler";
 import { useAlertStore } from "../../../store/alert-store";
@@ -13,25 +14,21 @@ import { useSessionStore } from "../../../store/session-store";
 import { EmptyState } from "../../widgets/empty-state/EmptyState";
 import { PromptCardWrapper } from "../prompt-card/PromptCardWrapper";
 
-let promptCardService;
-let promptPatchApiSps;
-let SpsPromptsEmptyState;
-try {
-  const pcMod = await import(
-    "../../../plugins/prompt-card/prompt-card-service"
-  );
-  promptCardService = pcMod.promptCardService;
-  const helperMod = await import(
-    "../../../plugins/simple-prompt-studio/helper"
-  );
-  promptPatchApiSps = helperMod.promptPatchApiSps;
-  const spsMod = await import(
-    "../../../plugins/simple-prompt-studio/SpsPromptsEmptyState"
-  );
-  SpsPromptsEmptyState = spsMod.SpsPromptsEmptyState;
-} catch {
-  // The component will remain null of it is not available
-}
+const promptCardService = await loadPlugin(() =>
+  import("../../../plugins/prompt-card/prompt-card-service").then(
+    (m) => m.promptCardService,
+  ),
+);
+const promptPatchApiSps = await loadPlugin(() =>
+  import("../../../plugins/simple-prompt-studio/helper").then(
+    (m) => m.promptPatchApiSps,
+  ),
+);
+const SpsPromptsEmptyState = await loadPlugin(() =>
+  import("../../../plugins/simple-prompt-studio/SpsPromptsEmptyState").then(
+    (m) => m.SpsPromptsEmptyState,
+  ),
+);
 
 // Module-scoped to avoid per-render recompilation.
 const UUID_RE =

frontend/src/components/custom-tools/header/Header.jsx

@@ -6,6 +6,7 @@ import { Form } from "@/components/ui/shims/antd-form";
 import { Input } from "@/components/ui/shims/antd-inputs";
 import { Dropdown, Modal, Tooltip } from "@/components/ui/shims/antd-overlays";
 import { ExportToolIcon } from "../../../assets";
+import { loadPlugin } from "../../../helpers/pluginLoader.js";
 import { useAxiosPrivate } from "../../../hooks/useAxiosPrivate";
 import { useExceptionHandler } from "../../../hooks/useExceptionHandler";
 import usePostHogEvents from "../../../hooks/usePostHogEvents";
@@ -19,27 +20,21 @@ import { CustomButton } from "../../widgets/custom-button/CustomButton";
 import { ExportTool } from "../export-tool/ExportTool";
 import "./Header.css";
 
-let SinglePassToggleSwitch;
-let CloneButton;
-let PromptShareButton;
-try {
-  const mod = await import(
+const SinglePassToggleSwitch = await loadPlugin(() =>
+  import(
     "../../../plugins/single-pass-toggle-switch/SinglePassToggleSwitch"
-  );
-  SinglePassToggleSwitch = mod.SinglePassToggleSwitch;
-} catch {}
-try {
-  const mod = await import(
+  ).then((m) => m.SinglePassToggleSwitch),
+);
+const PromptShareButton = await loadPlugin(() =>
+  import(
     "../../../plugins/prompt-studio-public-share/public-share-btn/PromptShareButton.jsx"
-  );
-  PromptShareButton = mod.PromptShareButton;
-} catch {}
-try {
-  const mod = await import(
-    "../../../plugins/prompt-studio-clone/clone-btn/CloneButton.jsx"
-  );
-  CloneButton = mod.CloneButton;
-} catch {}
+  ).then((m) => m.PromptShareButton),
+);
+const CloneButton = await loadPlugin(() =>
+  import("../../../plugins/prompt-studio-clone/clone-btn/CloneButton.jsx").then(
+    (m) => m.CloneButton,
+  ),
+);
 
 const noopCheckLookups = () => Promise.resolve(true);