Merge pull request #18430 from dannon/fix-chargs-24.0

[24.0] Fix mounting utility usage of pinia (fixes charts form components)

client/src/utils/mountVueComponent.js

@@ -4,8 +4,12 @@
 
 import BootstrapVue from "bootstrap-vue";
 import { iconPlugin, localizationPlugin, vueRxShortcutPlugin } from "components/plugins";
+import { createPinia, getActivePinia, PiniaVuePlugin } from "pinia";
 import Vue from "vue";
 
+// Load Pinia
+Vue.use(PiniaVuePlugin);
+
 // Bootstrap components
 Vue.use(BootstrapVue);
 
@@ -18,15 +22,25 @@ Vue.use(vueRxShortcutPlugin);
 // font-awesome svg icon registration/loading
 Vue.use(iconPlugin);
 
-export const mountVueComponent = (ComponentDefinition) => {
+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 if missing.
+    return getActivePinia() || createPinia();
+}
+
+export function mountVueComponent(ComponentDefinition) {
     const component = Vue.extend(ComponentDefinition);
-    return (propsData, el) => new component({ propsData, el });
-};
+    return function (propsData, el) {
+        return new component({ propsData, el, pinia: getOrCreatePinia() });
+    };
+}
 
-export const replaceChildrenWithComponent = (el, ComponentDefinition, propsData = {}) => {
+export function replaceChildrenWithComponent(el, ComponentDefinition, propsData = {}) {
     const container = document.createElement("div");
     el.replaceChildren(container);
-    const component = Vue.extend(ComponentDefinition);
-    const mountFn = (propsData, el) => new component({ propsData, el });
+    const mountFn = mountVueComponent(ComponentDefinition);
     return mountFn(propsData, container);
-};
+}