From c8f6c1598bd8a2fcababf8dcd36fd219146cf4d6 Mon Sep 17 00:00:00 2001
From: Neil MacDougall <nmacdougall@suse.com>
Date: Fri, 28 May 2021 16:33:15 +0100
Subject: [PATCH] Use dyanmic import for dialogs

---
 components/PromptModal.vue                          | 7 ++-----
 components/{ => dialog}/SaveAsRKETemplateDialog.vue | 0
 utils/dynamic-importer.js                           | 8 ++++++++
 3 files changed, 10 insertions(+), 5 deletions(-)
 rename components/{ => dialog}/SaveAsRKETemplateDialog.vue (100%)

diff --git a/components/PromptModal.vue b/components/PromptModal.vue
index c7c7947376..6720d2eefb 100644
--- a/components/PromptModal.vue
+++ b/components/PromptModal.vue
@@ -4,16 +4,13 @@ import { isArray } from '@/utils/array';
 import AsyncButton from '@/components/AsyncButton';
 import Card from '@/components/Card';
 import Banner from '@/components/Banner';
-import SaveAsRKETemplateDialog from '@/components/SaveAsRKETemplateDialog';
+import { importDialog } from '@/utils/dynamic-importer';
 
 export default {
   components: {
     Card,
     AsyncButton,
     Banner,
-    // Need to include all of the dialogs here
-    // Would be nice if this could be done dynamically
-    SaveAsRKETemplateDialog,
   },
 
   data() {
@@ -38,7 +35,7 @@ export default {
     },
 
     component() {
-      return this.modalData?.component;
+      return importDialog(this.modalData?.component);
     },
   },
 
diff --git a/components/SaveAsRKETemplateDialog.vue b/components/dialog/SaveAsRKETemplateDialog.vue
similarity index 100%
rename from components/SaveAsRKETemplateDialog.vue
rename to components/dialog/SaveAsRKETemplateDialog.vue
diff --git a/utils/dynamic-importer.js b/utils/dynamic-importer.js
index fa9cb28f52..e7c46a0146 100644
--- a/utils/dynamic-importer.js
+++ b/utils/dynamic-importer.js
@@ -66,3 +66,11 @@ export function loadProduct(name) {
   // Note: directly returns the import, not a function
   return import(/* webpackChunkName: "product" */ `@/config/product/${ name }`);
 }
+
+export function importDialog(name) {
+  if ( !name ) {
+    throw new Error('Name required');
+  }
+
+  return () => import(/* webpackChunkName: "dialog" */ `@/components/dialog/${name}`);
+}