From d89f4f0670693ec71dc2201765d0b38c19ed8781 Mon Sep 17 00:00:00 2001
From: Christopher Byrd <cbyrd@fargeo.com>
Date: Thu, 30 May 2024 15:30:31 -0700
Subject: [PATCH] nit #10838

---
 .../media/js/utils/create-vue-application.js  | 29 ++++++++++++++-----
 .../app/media/js/views/plugin-standalone.js   |  2 +-
 arches/app/templates/base.htm                 |  2 --
 .../app/templates/views/plugin-standalone.htm |  2 --
 package.json                                  |  2 +-
 releases/7.6.0.md                             |  2 +-
 6 files changed, 25 insertions(+), 14 deletions(-)

diff --git a/arches/app/media/js/utils/create-vue-application.js b/arches/app/media/js/utils/create-vue-application.js
index 9fbc526a43b..e00923d9554 100644
--- a/arches/app/media/js/utils/create-vue-application.js
+++ b/arches/app/media/js/utils/create-vue-application.js
@@ -6,12 +6,26 @@ import FocusTrap from 'primevue/focustrap';
 import StyleClass from 'primevue/styleclass';
 import ToastService from 'primevue/toastservice';
 import Tooltip from 'primevue/tooltip';
-import arches from 'arches';
+
+import Aura from 'primevue/themes/aura';
 
 import { createApp } from 'vue';
 import { createGettext } from "vue3-gettext";
 
-export default async function createVueApplication(vueComponent){
+import arches from 'arches';
+
+const DEFAULT_THEME = {
+    theme: {
+        preset: Aura,
+        options: {
+            prefix: 'p',
+            darkModeSelector: 'system',
+            cssLayer: false
+        }
+    }
+};
+
+export default async function createVueApplication(vueComponent, themeConfiguration) {
     /**
      * This wrapper allows us to maintain a level of control inside arches-core
      * over Vue apps. For instance this allows us to abstract i18n setup/config
@@ -19,18 +33,18 @@ export default async function createVueApplication(vueComponent){
      * we'd like to use across the Arches ecosystem will be available. This also
      * Vue apps more easily extensible if we choose to add plugins or logic in
      * the future.
-     **/ 
+    **/
 
     /**
      * TODO: cbyrd #10501 - we should add an event listener that will re-fetch i18n data
      * and rebuild the app when a specific event is fired from the LanguageSwitcher component.
-    **/ 
-    return fetch(arches.urls.api_get_frontend_i18n_data).then(resp => {
+    **/
+    return fetch(arches.urls.api_get_frontend_i18n_data).then(function(resp) {
         if (!resp.ok) {
             throw new Error(resp.statusText);
         }
         return resp.json();
-    }).then(respJSON => {
+    }).then(function(respJSON) {
         const gettext = createGettext({
             availableLanguages: respJSON['enabled_languages'],
             defaultLanguage: respJSON['language'],
@@ -38,7 +52,8 @@ export default async function createVueApplication(vueComponent){
         });
 
         const app = createApp(vueComponent);
-        app.use(PrimeVue);
+
+        app.use(PrimeVue, themeConfiguration || DEFAULT_THEME);
         app.use(gettext);
         app.use(ConfirmationService);
         app.use(DialogService);
diff --git a/arches/app/media/js/views/plugin-standalone.js b/arches/app/media/js/views/plugin-standalone.js
index f9eab8d3560..04502ea6aa5 100644
--- a/arches/app/media/js/views/plugin-standalone.js
+++ b/arches/app/media/js/views/plugin-standalone.js
@@ -1,7 +1,7 @@
 import { defineAsyncComponent } from 'vue';
 import createVueApplication from 'utils/create-vue-application';
 
-const pluginData = require('views/plugin-data');
+import pluginData from 'views/plugin-data';
 
 // workaround for webpack failures surrounding dynamic imports
 const vuePluginPath = pluginData['component'].replace('src/', '').replace('.vue', '');
diff --git a/arches/app/templates/base.htm b/arches/app/templates/base.htm
index da7e9edeb2f..6060af4393c 100644
--- a/arches/app/templates/base.htm
+++ b/arches/app/templates/base.htm
@@ -46,8 +46,6 @@
     <link rel="apple-touch-icon" sizes="180x180" href="{% webpack_static 'favicons/apple-touch-icon-180x180.png' %}" />
 
     {% block css %}
-        <!-- POC rough out of PrimeVue theme switcher -->
-        <link rel="stylesheet" href="{% webpack_static 'node_modules/primevue/resources/themes/mdc-light-indigo/theme.css' %}" />
         {% render_bundle 'css/arches' 'css' %}
         {% render_bundle 'css/core' 'css' %}
 
diff --git a/arches/app/templates/views/plugin-standalone.htm b/arches/app/templates/views/plugin-standalone.htm
index b42c016d1ed..22d7a13f605 100644
--- a/arches/app/templates/views/plugin-standalone.htm
+++ b/arches/app/templates/views/plugin-standalone.htm
@@ -43,8 +43,6 @@
         <link rel="apple-touch-icon" sizes="180x180" href="{% webpack_static 'favicons/apple-touch-icon-180x180.png' %}" />
     
         {% block css %}
-            <!-- POC rough out of PrimeVue theme switcher -->
-            <link rel="stylesheet" href="{% webpack_static 'node_modules/primevue/resources/themes/mdc-light-indigo/theme.css' %}" />
             <link rel="stylesheet" href="{% webpack_static 'node_modules/font-awesome/css/font-awesome.min.css' %}" />
         {% endblock css %}
 </head>
diff --git a/package.json b/package.json
index 3ae7a2dcda9..30629610b22 100644
--- a/package.json
+++ b/package.json
@@ -75,7 +75,7 @@
         "moment-timezone": "~0.5.43",
         "nouislider": "11.0.3",
         "numeral": "^2.0.6",
-        "primevue": "4.0.0-beta.3",
+        "primevue": "4.0.0-beta.4",
         "proj4": "^2.3.15",
         "regenerator-runtime": "^0.14.1",
         "requirejs": "~2.3.2",
diff --git a/releases/7.6.0.md b/releases/7.6.0.md
index f8478fecf84..2a18eb5d9d5 100644
--- a/releases/7.6.0.md
+++ b/releases/7.6.0.md
@@ -89,7 +89,7 @@ JavaScript:
         @typescript-eslint/eslint-plugin == 6.18.1
         @typescript-eslint/parser == 6.18.1
         eslint-plugin-vue == 9.20.0
-        primevue == 3.51.0
+        primevue == 4.0.0-beta.4
         nodemon == 3.0.2
         sass == 1.70.0
         ts-loader == 9.5.1