Merge pull request #18429 from dannon/more-robust-pinia-init

[24.1] Support usage of vue mounting helpers in a context without existing pinia/vue.

client/src/utils/mountVueComponent.js

@@ -4,7 +4,7 @@
 
 import BootstrapVue from "bootstrap-vue";
 import { iconPlugin, localizationPlugin, vueRxShortcutPlugin } from "components/plugins";
-import { getActivePinia, PiniaVuePlugin } from "pinia";
+import { createPinia, getActivePinia, PiniaVuePlugin } from "pinia";
 import Vue from "vue";
 
 // Load Pinia
@@ -22,17 +22,28 @@ Vue.use(vueRxShortcutPlugin);
 // font-awesome svg icon registration/loading
 Vue.use(iconPlugin);
 
+function getOrCreatePinia() {
+    // We sometimes use this utility mounting function in a context where there
+    // is no existing vue application or pinia store (e.g. individual charts
+    // displayed in an iframe).
+    // To support both use cases, we will create a new pinia store and attach it to the
+    // vue application that is created for the component.
+    let pinia = getActivePinia();
+    if (!pinia) {
+        pinia = createPinia();
+    }
+    return pinia;
+}
+
 export const mountVueComponent = (ComponentDefinition) => {
     const component = Vue.extend(ComponentDefinition);
-    const pinia = getActivePinia();
-    return (propsData, el) => new component({ propsData, el, pinia });
+    return (propsData, el) => new component({ propsData, el, pinia: getOrCreatePinia() });
 };
 
 export const replaceChildrenWithComponent = (el, ComponentDefinition, propsData = {}) => {
     const container = document.createElement("div");
     el.replaceChildren(container);
     const component = Vue.extend(ComponentDefinition);
-    const pinia = getActivePinia();
-    const mountFn = (propsData, el) => new component({ propsData, el, pinia });
+    const mountFn = (propsData, el) => new component({ propsData, el, pinia: getOrCreatePinia() });
     return mountFn(propsData, container);
 };