fix quotes during import and moved the upload template button to dropdown

.vscode/settings.json

@@ -8,7 +8,6 @@
   },
   "eslint.validate": ["javascript", "javascriptreact", "typescript", "vue"],
   "typescript.tsdk": "node_modules/typescript/lib",
-  "files.watcherExclude": {
   "files.watcherExclude": {
       "**/.git/objects/**": true,
       "**/.git/subtree-cache/**": true,
@@ -16,6 +15,6 @@
       "/node_modules/**": true,
       "**/env/": true,
       "/env/**": true
-    }
+  },
-  }
+  "prettier.prettierPath": "./node_modules/prettier"
 }

package-lock.json

@@ -1,14 +1,16 @@
 {
   "name": "web",
-  "version": "0.101.29",
+  "version": "0.101.31",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "web",
-      "version": "0.101.29",
+      "version": "0.101.31",
       "dependencies": {
         "@quasar/extras": "1.16.7",
+        "@vueuse/core": "^10.1.0",
+        "@vueuse/shared": "^10.1.0",
         "apexcharts": "3.41.1",
         "axios": "1.5.1",
         "dotenv": "16.3.1",
@@ -3209,18 +3211,6 @@
         "url": "https://opencollective.com/eslint"
       }
     },
-    "node_modules/eslint/node_modules/escape-string-regexp": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
-      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
-      "dev": true,
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/eslint/node_modules/glob-parent": {
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
@@ -7187,7 +7177,6 @@
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.3.2.tgz",
       "integrity": "sha512-N/lyzTPaJasoDmfV7YTrYCI0G/3ivm/9wdG0aHuheKowWQwGTsK0Eoiw6utmzAnI6pkJa0DUVygvp3spqqEKXg==",
-      "dev": true,
       "engines": {
         "node": ">= 14"
       }
@@ -7209,15 +7198,6 @@
         "url": "https://github.com/sponsors/ota-meshi"
       }
     },
-    "node_modules/yaml-eslint-parser/node_modules/yaml": {
-      "version": "1.10.2",
-      "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
-      "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
-      "dev": true,
-      "engines": {
-        "node": ">= 6"
-      }
-    },
     "node_modules/yargs": {
       "version": "17.7.2",
       "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz",
@@ -9349,12 +9329,6 @@
         "text-table": "^0.2.0"
       },
       "dependencies": {
-        "escape-string-regexp": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
-          "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
-          "dev": true
-        },
         "glob-parent": {
           "version": "6.0.2",
           "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
@@ -12260,8 +12234,7 @@
     "yaml": {
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.3.2.tgz",
-      "integrity": "sha512-N/lyzTPaJasoDmfV7YTrYCI0G/3ivm/9wdG0aHuheKowWQwGTsK0Eoiw6utmzAnI6pkJa0DUVygvp3spqqEKXg==",
+      "integrity": "sha512-N/lyzTPaJasoDmfV7YTrYCI0G/3ivm/9wdG0aHuheKowWQwGTsK0Eoiw6utmzAnI6pkJa0DUVygvp3spqqEKXg=="
-      "dev": true
     },
     "yaml-eslint-parser": {
       "version": "1.2.2",

src/ee/reporting/components/ReportTemplateForm.vue

@@ -342,7 +342,7 @@ watch(
   () => {
     edited.value = true;
   },
-  { deep: true }
+  { deep: true },
 );
 
 function openClosePrompt() {
@@ -385,7 +385,7 @@ watch(
       const removed = oldArray.filter((item) => newArray.indexOf(item) == -1);
       removed.forEach((item) => delete dependencies.value[item]);
     }
-  }
+  },
 );
 
 // initial set of depends on options
@@ -393,7 +393,7 @@ const dependsOnOptions = ["client", "site", "agent"];
 
 // will add any custom added depend_on options to the list
 state.depends_on?.forEach((item) =>
-  !dependsOnOptions.includes(item) ? dependsOnOptions.push(item) : null
+  !dependsOnOptions.includes(item) ? dependsOnOptions.push(item) : null,
 );
 
 // the filtered list that the select uses
@@ -402,7 +402,7 @@ const dependsOnFilterOptions = ref(dependsOnOptions);
 function createValue(
   val: string,
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  done: (val: any, mode: "add-unique" | "add" | "toggle" | undefined) => void
+  done: (val: any, mode: "add-unique" | "add" | "toggle" | undefined) => void,
 ) {
   if (val.length > 0) {
     if (!dependsOnOptions.includes(val)) {
@@ -419,7 +419,7 @@ function filterFn(val: string, update: (callback: () => void) => void) {
     } else {
       const needle = val.toLowerCase();
       dependsOnFilterOptions.value = dependsOnOptions.filter(
-        (v) => v.toLowerCase().indexOf(needle) > -1
+        (v) => v.toLowerCase().indexOf(needle) > -1,
       );
     }
   });
@@ -457,7 +457,7 @@ const HTMLTemplateOptions = computed<QSelectOption<number>[]>(() =>
   reportHTMLTemplates.value.map((template) => ({
     label: template.name,
     value: template.id,
-  }))
+  })),
 );
 
 const debug = ref(false);
@@ -559,7 +559,7 @@ function initializeEditor() {
   templateModel = monaco.editor.createModel(
     state.template_md,
     props.templateType,
-    templateUri
+    templateUri,
   );
   cssModel = monaco.editor.createModel(state.template_css, "css", cssUri);
 
@@ -590,7 +590,7 @@ function initializeEditor() {
   variablesModel = monaco.editor.createModel(
     state.template_variables,
     "yaml",
-    variablesUri
+    variablesUri,
   );
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   variablesEditor.value = monaco.editor.create(variablesDiv.value!, {
@@ -612,8 +612,8 @@ function initializeEditor() {
 
 // make sure to put quotes around any variable values that have { or }
 function wrapDoubleQuotes() {
-  const matchJsonCharacters = /(\b.*: *?[^\n\r])([^"].*[{}]+.*[^"])\r?$/gm;
+  const matchJsonCharacters = /(\b.*: *?[^\n\r])([^'].*[{}]+.*[^'])\r?$/gm;
-  const putDoubleQuotes = '$1"$2"';
+  const putDoubleQuotes = "$1'$2'";
 
   if (matchJsonCharacters.test(state.template_variables)) {
     const newText = variablesEditor.value

src/ee/reporting/components/ReportTemplateImport.vue

@@ -20,7 +20,9 @@ For details, see: https://license.tacticalrmm.com/ee
           dense
           filled
           label="Import File"
-          style="width: 250px"
+          style="width: 400px"
+          accept=".json"
+          hint="Only accepts exported report template json files"
         />
       </q-card-section>
 

src/ee/reporting/components/ReportsManager.vue

@@ -68,6 +68,12 @@ For details, see: https://license.tacticalrmm.com/ee
                   <q-item-label>Html Template</q-item-label>
                 </q-item-section>
               </q-item>
+
+              <q-item clickable v-close-popup @click="importReportTemplate">
+                <q-item-section>
+                  <q-item-label>Import Report Template</q-item-label>
+                </q-item-section>
+              </q-item>
             </q-list>
           </q-btn-dropdown>
           <q-btn
@@ -108,18 +114,6 @@ For details, see: https://license.tacticalrmm.com/ee
               <q-icon name="search" color="primary" />
             </template>
           </q-input>
-
-          <q-btn icon="menu" dropdown-icon="none" dense>
-            <q-menu>
-              <q-list dense>
-                <q-item clickable v-close-popup @click="importReportTemplate">
-                  <q-item-section>
-                    <q-item-label>Import Report Template</q-item-label>
-                  </q-item-section>
-                </q-item>
-              </q-list>
-            </q-menu>
-          </q-btn>
         </template>
 
         <template #body="props">