diff --git a/client/src/components/Form/FormDisplay.vue b/client/src/components/Form/FormDisplay.vue index bad270f506e..31d209317f4 100644 --- a/client/src/components/Form/FormDisplay.vue +++ b/client/src/components/Form/FormDisplay.vue @@ -127,8 +127,19 @@ export default { }, created() { this.onCloneInputs(); + // build flat formData that is ready to be submitted + this.formData = this.buildFormData(); + // emit back to parent, so that parent has submittable data + this.$emit("onChange", this.formData); }, methods: { + buildFormData() { + const params = {}; + Object.entries(this.formIndex).forEach(([key, input]) => { + params[key] = input.value; + }); + return params; + }, onReplaceParams() { let refreshOnChange = false; Object.entries(this.replaceParams).forEach(([key, value]) => { @@ -159,10 +170,7 @@ export default { }, onChange(refreshOnChange) { this.onCreateIndex(); - const params = {}; - Object.entries(this.formIndex).forEach(([key, input]) => { - params[key] = input.value; - }); + const params = this.buildFormData(); if (JSON.stringify(params) != JSON.stringify(this.formData)) { this.formData = params; this.resetError(); diff --git a/client/src/components/Form/FormElement.test.js b/client/src/components/Form/FormElement.test.js index 79a7770442f..1339639961c 100644 --- a/client/src/components/Form/FormElement.test.js +++ b/client/src/components/Form/FormElement.test.js @@ -49,11 +49,10 @@ describe("FormElement", () => { }); expect(wrapper.find(".ui-form-title-text").text()).toEqual("title_text"); expect(wrapper.findAll("button[title='Disable']").length).toEqual(1); - expect(wrapper.emitted().input[0][0]).toEqual("initial_value"); await wrapper.find(".ui-form-collapsible-icon").trigger("click"); - expect(wrapper.emitted().input[1][0]).toEqual("collapsible_value"); - expect(wrapper.emitted().input[1][1]).toEqual("input"); + expect(wrapper.emitted().input[0][0]).toEqual("collapsible_value"); + expect(wrapper.emitted().input[0][1]).toEqual("input"); await wrapper.setProps({ collapsedEnableText: "Enable Collapsible", @@ -63,7 +62,7 @@ describe("FormElement", () => { expect(wrapper.findAll("button[title='Disable Collapsible']").length).toEqual(0); await wrapper.find(".ui-form-collapsible-icon").trigger("click"); - expect(wrapper.emitted().input[2][0]).toEqual("default_value"); + expect(wrapper.emitted().input[1][0]).toEqual("default_value"); expect(wrapper.findAll("button[title='Disable Collapsible']").length).toEqual(1); expect(wrapper.findAll("button[title='Enable Collapsible']").length).toEqual(0); }); diff --git a/client/src/components/Form/FormElement.vue b/client/src/components/Form/FormElement.vue index ecc6fa340a7..4645ad6a5a8 100644 --- a/client/src/components/Form/FormElement.vue +++ b/client/src/components/Form/FormElement.vue @@ -82,9 +82,8 @@ const collapsed = ref(false); const collapsible = computed(() => !props.disabled && collapsibleValue.value !== undefined); const connectable = computed(() => collapsible.value && Boolean(attrs.value["connectable"])); -// Determines to wether expand or collapse the input +// Determines whether to expand or collapse the input { - setValue(props.value); const valueJson = JSON.stringify(props.value); connected.value = valueJson === JSON.stringify(connectedValue); collapsed.value = diff --git a/client/src/components/History/CurrentCollection/CollectionPanel.vue b/client/src/components/History/CurrentCollection/CollectionPanel.vue index eb69d0ee598..fcc6942e9ce 100644 --- a/client/src/components/History/CurrentCollection/CollectionPanel.vue +++ b/client/src/components/History/CurrentCollection/CollectionPanel.vue @@ -4,6 +4,7 @@ { - const webhook = model.toJSON(); + webhooks.forEach((webhook) => { if (webhook.activate) { const obj = { id: webhook.id, diff --git a/client/src/components/Tool/Buttons/ToolOptionsButton.vue b/client/src/components/Tool/Buttons/ToolOptionsButton.vue index 4e53cb317e7..ec467c63c9b 100644 --- a/client/src/components/Tool/Buttons/ToolOptionsButton.vue +++ b/client/src/components/Tool/Buttons/ToolOptionsButton.vue @@ -6,7 +6,7 @@ import Webhooks from "utils/webhooks"; import ToolSourceMenuItem from "components/Tool/ToolSourceMenuItem"; import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome"; -const { currentUser: user } = useCurrentUser(); +const { currentUser: user } = useCurrentUser(false, true); const props = defineProps({ id: { @@ -28,9 +28,7 @@ const webhookDetails = ref([]); Webhooks.load({ type: "tool-menu", callback: (webhooks) => { - webhooks.each((model) => { - const webhook = model.toJSON(); - + webhooks.forEach((webhook) => { if (webhook.activate && webhook.config.function) { webhookDetails.value.push({ icon: `fa ${webhook.config.icon}`, diff --git a/client/src/components/Tool/ToolCard.test.js b/client/src/components/Tool/ToolCard.test.js index 0ec1a66f60f..0bf54ff9bb2 100644 --- a/client/src/components/Tool/ToolCard.test.js +++ b/client/src/components/Tool/ToolCard.test.js @@ -1,5 +1,7 @@ import { mount } from "@vue/test-utils"; import { getLocalVue, mockModule } from "tests/jest/helpers"; +import MockAdapter from "axios-mock-adapter"; +import axios from "axios"; import ToolCard from "./ToolCard"; import Vuex from "vuex"; import { userStore } from "store/userStore"; @@ -18,8 +20,12 @@ const createStore = (currentUser) => { describe("ToolCard", () => { let wrapper; + let axiosMock; beforeEach(() => { + axiosMock = new MockAdapter(axios); + axiosMock.onGet(`/api/webhooks`).reply(200, []); + const store = createStore({ id: "user.id", email: "user.email", diff --git a/client/src/components/Tool/ToolCard.vue b/client/src/components/Tool/ToolCard.vue index 9e584cd06d6..dde944c1202 100644 --- a/client/src/components/Tool/ToolCard.vue +++ b/client/src/components/Tool/ToolCard.vue @@ -66,7 +66,7 @@ function onSetError(e) { errorText.value = e; } -const { currentUser: user } = useCurrentUser(); +const { currentUser: user } = useCurrentUser(false, true); const hasUser = computed(() => !user.value.isAnonymous); const versions = computed(() => props.options.versions); diff --git a/client/src/components/Tool/ToolForm.test.js b/client/src/components/Tool/ToolForm.test.js index 5f00316645d..df12b6ab34a 100644 --- a/client/src/components/Tool/ToolForm.test.js +++ b/client/src/components/Tool/ToolForm.test.js @@ -30,6 +30,7 @@ describe("ToolForm", () => { help: "help_text", }; axiosMock.onGet(`/api/tools/tool_id/build?tool_version=version`).reply(200, toolData); + axiosMock.onGet(`/api/webhooks`).reply(200, []); const citations = []; axiosMock.onGet(`/api/tools/tool_id/citations`).reply(200, citations); diff --git a/client/src/components/Tool/ToolSourceMenuItem.vue b/client/src/components/Tool/ToolSourceMenuItem.vue index d774c2c58eb..d53c332403b 100644 --- a/client/src/components/Tool/ToolSourceMenuItem.vue +++ b/client/src/components/Tool/ToolSourceMenuItem.vue @@ -4,8 +4,8 @@ import { useConfig } from "composables/config"; import { useCurrentUser } from "composables/user"; import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome"; -const { config } = useConfig(); -const { currentUser } = useCurrentUser(); +const { config } = useConfig(true); +const { currentUser } = useCurrentUser(false, true); const props = defineProps({ toolId: { diff --git a/client/src/components/Workflow/Editor/Forms/FormTool.test.js b/client/src/components/Workflow/Editor/Forms/FormTool.test.js index 01bdcfb973c..3be5542acac 100644 --- a/client/src/components/Workflow/Editor/Forms/FormTool.test.js +++ b/client/src/components/Workflow/Editor/Forms/FormTool.test.js @@ -1,5 +1,7 @@ import { mount } from "@vue/test-utils"; import { getLocalVue, mockModule } from "tests/jest/helpers"; +import axios from "axios"; +import MockAdapter from "axios-mock-adapter"; import FormTool from "./FormTool"; import MockCurrentUser from "components/providers/MockCurrentUser"; import MockConfigProvider from "components/providers/MockConfigProvider"; @@ -11,6 +13,9 @@ import { createTestingPinia } from "@pinia/testing"; const localVue = getLocalVue(); describe("FormTool", () => { + const axiosMock = new MockAdapter(axios); + axiosMock.onGet(`/api/webhooks`).reply(200, []); + function mountTarget() { const store = new Vuex.Store({ modules: { diff --git a/client/src/components/Workflow/Editor/Forms/FormTool.vue b/client/src/components/Workflow/Editor/Forms/FormTool.vue index d56446087be..71f44b9e07e 100644 --- a/client/src/components/Workflow/Editor/Forms/FormTool.vue +++ b/client/src/components/Workflow/Editor/Forms/FormTool.vue @@ -1,62 +1,58 @@