fix: Regression in client plugins not loading (#12291)

app/utils/PluginManager.test.ts

@@ -0,0 +1,46 @@
+import { createLazyComponent } from "~/components/LazyLoad";
+import { Hook, PluginManager } from "./PluginManager";
+
+const SettingsComponent = () => null;
+const Icon = () => null;
+const component = createLazyComponent(async () => ({
+  default: SettingsComponent,
+}));
+
+describe("PluginManager", () => {
+  it("returns registered hooks from observable plugin arrays", () => {
+    PluginManager.add([
+      {
+        id: "test-settings-plugin-low",
+        name: "Low priority plugin",
+        type: Hook.Settings,
+        priority: 20,
+        value: {
+          group: "Integrations",
+          icon: Icon,
+          component,
+        },
+      },
+      {
+        id: "test-settings-plugin-high",
+        name: "High priority plugin",
+        type: Hook.Settings,
+        priority: 10,
+        value: {
+          group: "Integrations",
+          icon: Icon,
+          component,
+        },
+      },
+    ]);
+
+    const hooks = PluginManager.getHooks(Hook.Settings).filter((plugin) =>
+      plugin.id.startsWith("test-settings-plugin")
+    );
+
+    expect(hooks.map((plugin) => plugin.id)).toEqual([
+      "test-settings-plugin-high",
+      "test-settings-plugin-low",
+    ]);
+  });
+});

app/utils/PluginManager.ts

@@ -1,5 +1,6 @@
 import { isArray, sortBy } from "es-toolkit/compat";
 import { action, observable } from "mobx";
+import type { IObservableArray } from "mobx";
 import type Team from "~/models/Team";
 import type User from "~/models/User";
 import type { LazyComponent } from "~/components/LazyLoad";
@@ -116,7 +117,8 @@ export class PluginManager {
    * @returns A list of plugins
    */
   public static getHooks<T extends Hook>(type: T) {
-    return sortBy(this.plugins.get(type) || [], "priority") as Plugin<T>[];
+    const plugins = this.plugins.get(type) ?? [];
+    return sortBy([...plugins], "priority") as Plugin<T>[];
   }
 
   /**
@@ -152,7 +154,10 @@ export class PluginManager {
     return this.loaded;
   }
 
-  private static plugins = observable.map<Hook, Plugin<Hook>[]>();
+  private static plugins = observable.map<
+    Hook,
+    IObservableArray<Plugin<Hook>>
+  >();
 
   @observable
   private static loaded = false;