From 6eda2a6d06ab82d067a9bb6e08c62c17ebc25a86 Mon Sep 17 00:00:00 2001
From: sadnub <josh@torchlake.com>
Date: Sun, 14 Apr 2024 19:02:03 -0400
Subject: [PATCH] Split up global settings rest/web actions in th eUI

---
 quasar.extensions.json                        |  7 ----
 src/api/core.ts                               |  2 +-
 .../modals/coresettings/EditCoreSettings.vue  | 14 ++++++-
 .../modals/coresettings/URLActionsForm.vue    | 35 +++++++---------
 .../modals/coresettings/URLActionsTable.vue   | 40 ++++++++++---------
 src/types/core/urlactions.ts                  |  4 +-
 vitest.config.mts                             | 27 -------------
 7 files changed, 51 insertions(+), 78 deletions(-)
 delete mode 100644 quasar.extensions.json
 delete mode 100644 vitest.config.mts

diff --git a/quasar.extensions.json b/quasar.extensions.json
deleted file mode 100644
index 64019344..00000000
--- a/quasar.extensions.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "@quasar/testing-unit-vitest": {
-    "options": [
-      "ui"
-    ]
-  }
-}
\ No newline at end of file
diff --git a/src/api/core.ts b/src/api/core.ts
index 316b5114..45916d91 100644
--- a/src/api/core.ts
+++ b/src/api/core.ts
@@ -21,7 +21,7 @@ export async function fetchCustomFields(params = {}) {
   }
 }
 
-export async function fetchURLActions(params = {}) {
+export async function fetchURLActions(params = {}): Promise<URLAction[]> {
   const { data } = await axios.get(`${baseUrl}/urlaction/`, {
     params: params,
   });
diff --git a/src/components/modals/coresettings/EditCoreSettings.vue b/src/components/modals/coresettings/EditCoreSettings.vue
index 6531140b..7626eba5 100644
--- a/src/components/modals/coresettings/EditCoreSettings.vue
+++ b/src/components/modals/coresettings/EditCoreSettings.vue
@@ -10,6 +10,7 @@
           <q-tab name="customfields" label="Custom Fields" />
           <q-tab name="keystore" label="Key Store" />
           <q-tab name="urlactions" label="URL Actions" />
+          <q-tab name="webhooks" label="Web Hooks" />
           <q-tab name="retention" label="Retention" />
           <q-tab name="apikeys" label="API Keys" />
           <q-tab name="tasks" label="Server Tasks" />
@@ -489,17 +490,28 @@
                   </q-input>
                 </q-card-section>
               </q-tab-panel>
+
+              <!-- custom fields -->
               <q-tab-panel name="customfields">
                 <CustomFields />
               </q-tab-panel>
 
+              <!-- key store -->
               <q-tab-panel name="keystore">
                 <KeyStoreTable />
               </q-tab-panel>
 
+              <!-- url actions -->
               <q-tab-panel name="urlactions">
-                <URLActionsTable />
+                <URLActionsTable type="web" />
+              </q-tab-panel>
+
+              <!-- web hooks -->
+              <q-tab-panel name="webhooks">
+                <URLActionsTable type="rest" />
               </q-tab-panel>
+
+              <!-- retention -->
               <q-tab-panel name="retention">
                 <q-card-section class="row">
                   <div class="col-4">Check History (days):</div>
diff --git a/src/components/modals/coresettings/URLActionsForm.vue b/src/components/modals/coresettings/URLActionsForm.vue
index 2a21c29d..abfe7b45 100644
--- a/src/components/modals/coresettings/URLActionsForm.vue
+++ b/src/components/modals/coresettings/URLActionsForm.vue
@@ -7,7 +7,15 @@
   >
     <q-card class="q-dialog-plugin" style="width: 60vw">
       <q-bar>
-        {{ props.action ? "Edit URL Action" : "Add URL Action" }}
+        {{
+          props.action
+            ? props.type === "web"
+              ? "Edit URL Action"
+              : "Edit Web Hook"
+            : props.type === "web"
+              ? "Add URL Action"
+              : "Add Web Hook"
+        }}
         <q-space />
         <q-btn dense flat icon="close" v-close-popup>
           <q-tooltip class="bg-white text-primary">Close</q-tooltip>
@@ -36,16 +44,6 @@
           />
         </q-card-section>
 
-        <!-- url action type -->
-        <q-card-section>
-          <q-option-group
-            v-model="localAction.action_type"
-            :options="URLActionOptions"
-            color="primary"
-            inline
-          />
-        </q-card-section>
-
         <!-- pattern -->
         <q-card-section>
           <q-input
@@ -57,7 +55,7 @@
           />
         </q-card-section>
 
-        <q-card-section v-if="localAction.action_type === 'rest'">
+        <q-card-section v-if="type === 'rest'">
           <q-select
             v-model="localAction.rest_method"
             label="Method"
@@ -69,7 +67,7 @@
           />
         </q-card-section>
 
-        <q-card-section v-show="localAction.action_type === 'rest'">
+        <q-card-section v-show="type === 'rest'">
           <q-toolbar>
             <q-space />
             <q-tabs v-model="tab" dense shrink>
@@ -100,7 +98,7 @@ import { ref, computed, reactive, watch } from "vue";
 import { useDialogPluginComponent, useQuasar, extend } from "quasar";
 import { editURLAction, saveURLAction } from "@/api/core";
 import { notifySuccess } from "@/utils/notify";
-import { URLAction } from "@/types/core/urlactions";
+import { URLAction, URLActionType } from "@/types/core/urlactions";
 
 import * as monaco from "monaco-editor";
 
@@ -108,18 +106,13 @@ import * as monaco from "monaco-editor";
 defineEmits([...useDialogPluginComponent.emits]);
 
 // define props
-const props = defineProps<{ action?: URLAction }>();
+const props = defineProps<{ type: URLActionType; action?: URLAction }>();
 
 // setup quasar
 const $q = useQuasar();
 const { dialogRef, onDialogHide, onDialogOK } = useDialogPluginComponent();
 
 // static data
-const URLActionOptions = [
-  { value: "web", label: "Web" },
-  { value: "rest", label: "REST" },
-];
-
 const URLActionMethods = [
   { value: "get", label: "GET" },
   { value: "post", label: "POST" },
@@ -134,7 +127,7 @@ const localAction: URLAction = props.action
       name: "",
       desc: "",
       pattern: "",
-      action_type: "web",
+      action_type: props.type,
       rest_body: "{\n    \n}",
       rest_method: "get",
       rest_headers: "{\n    \n}",
diff --git a/src/components/modals/coresettings/URLActionsTable.vue b/src/components/modals/coresettings/URLActionsTable.vue
index 0fe36184..0fcc04ec 100644
--- a/src/components/modals/coresettings/URLActionsTable.vue
+++ b/src/components/modals/coresettings/URLActionsTable.vue
@@ -1,7 +1,9 @@
 <template>
   <div>
     <div class="row">
-      <div class="text-subtitle2">URL Actions</div>
+      <div class="text-subtitle2">
+        {{ props.type === "web" ? "URL Actions" : "Web Hooks" }}
+      </div>
       <q-space />
       <q-btn
         size="sm"
@@ -24,6 +26,7 @@
       virtual-scroll
       :rows-per-page-options="[0]"
       no-data-label="No URL Actions added yet"
+      :loading="loading"
     >
       <!-- body slots -->
       <template v-slot:body="props">
@@ -67,10 +70,6 @@
           <q-td>
             {{ props.row.desc }}
           </q-td>
-          <!-- action type -->
-          <q-td>
-            {{ props.row.action_type }}
-          </q-td>
           <!-- pattern -->
           <q-td>
             {{ props.row.pattern }}
@@ -92,12 +91,17 @@ import { notifySuccess } from "@/utils/notify";
 import URLActionsForm from "@/components/modals/coresettings/URLActionsForm.vue";
 
 // types
-import { type URLAction } from "@/types/core/urlactions";
+import { type URLActionType, type URLAction } from "@/types/core/urlactions";
+
+// define props
+const props = defineProps<{ type: URLActionType }>();
 
 // setup quasar
 const $q = useQuasar();
 
-const actions = ref([]);
+const loading = ref(false);
+
+const actions = ref([] as URLAction[]);
 
 const columns: QTableColumn[] = [
   {
@@ -107,13 +111,6 @@ const columns: QTableColumn[] = [
     align: "left",
     sortable: true,
   },
-  {
-    name: "action_type",
-    label: "Type",
-    field: "action_type",
-    align: "left",
-    sortable: true,
-  },
   {
     name: "desc",
     label: "Description",
@@ -134,7 +131,9 @@ async function getURLActions() {
   $q.loading.show();
   try {
     const result = await fetchURLActions();
-    actions.value = result;
+    actions.value = result.filter(
+      (action) => action.action_type === props.type,
+    );
   } catch (e) {
     console.error(e);
   }
@@ -145,6 +144,9 @@ async function getURLActions() {
 function addURLAction() {
   $q.dialog({
     component: URLActionsForm,
+    componentProps: {
+      type: props.type,
+    },
   }).onOk(getURLActions);
 }
 
@@ -152,18 +154,19 @@ function editURLAction(action: URLAction) {
   $q.dialog({
     component: URLActionsForm,
     componentProps: {
+      type: props.type,
       action: action,
     },
   }).onOk(getURLActions);
 }
+
 function deleteURLAction(action: URLAction) {
   $q.dialog({
     title: `Delete URL Action: ${action.name}?`,
     cancel: true,
     ok: { label: "Delete", color: "negative" },
   }).onOk(async () => {
-    $q.loading.show();
-
+    loading.value = true;
     try {
       await removeURLAction(action.id);
       await getURLActions();
@@ -171,8 +174,7 @@ function deleteURLAction(action: URLAction) {
     } catch (e) {
       console.error(e);
     }
-
-    $q.loading.hide();
+    loading.value = false;
   });
 }
 onMounted(getURLActions);
diff --git a/src/types/core/urlactions.ts b/src/types/core/urlactions.ts
index 5e326616..a992ff43 100644
--- a/src/types/core/urlactions.ts
+++ b/src/types/core/urlactions.ts
@@ -1,10 +1,10 @@
-export type ActionType = "web" | "rest";
+export type URLActionType = "web" | "rest";
 
 export interface URLAction {
   id: number;
   name: string;
   desc?: string;
-  action_type: ActionType;
+  action_type: URLActionType;
   pattern: string;
   rest_method: string;
   rest_body: string;
diff --git a/vitest.config.mts b/vitest.config.mts
deleted file mode 100644
index 6e3d0a2d..00000000
--- a/vitest.config.mts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { defineConfig } from 'vitest/config';
-import vue from '@vitejs/plugin-vue';
-import { quasar, transformAssetUrls } from '@quasar/vite-plugin';
-import tsconfigPaths from 'vite-tsconfig-paths';
-
-// https://vitejs.dev/config/
-export default defineConfig({
-  test: {
-    environment: 'happy-dom',
-    setupFiles: 'test/vitest/setup-file.ts',
-    include: [
-      // Matches vitest tests in any subfolder of 'src' or into 'test/vitest/__tests__'
-      // Matches all files with extension 'js', 'jsx', 'ts' and 'tsx'
-      'src/**/*.vitest.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}',
-      'test/vitest/__tests__/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}',
-    ],
-  },
-  plugins: [
-    vue({
-      template: { transformAssetUrls },
-    }),
-    quasar({
-      sassVariables: 'src/quasar-variables.scss',
-    }),
-    tsconfigPaths(),
-  ],
-});