diff --git a/packages/backend/package.json b/packages/backend/package.json index a832402e..1866f054 100644 --- a/packages/backend/package.json +++ b/packages/backend/package.json @@ -69,6 +69,7 @@ "prettier": "^2.5.1", "raw-body": "^2.5.2", "showdown": "^2.1.0", + "slugify": "^1.6.6", "uuid": "^9.0.1", "winston": "^3.7.1", "xmlrpc": "^1.3.2" diff --git a/packages/backend/src/apps/forms/assets/favicon.svg b/packages/backend/src/apps/forms/assets/favicon.svg new file mode 100644 index 00000000..c47f1b48 --- /dev/null +++ b/packages/backend/src/apps/forms/assets/favicon.svg @@ -0,0 +1 @@ + diff --git a/packages/backend/src/apps/forms/index.ee.js b/packages/backend/src/apps/forms/index.ee.js new file mode 100644 index 00000000..3fec2f4d --- /dev/null +++ b/packages/backend/src/apps/forms/index.ee.js @@ -0,0 +1,15 @@ +import defineApp from '../../helpers/define-app.js'; +import triggers from './triggers/index.ee.js'; + +export default defineApp({ + name: 'Forms', + key: 'forms', + iconUrl: '{BASE_URL}/apps/forms/assets/favicon.svg', + authDocUrl: '{DOCS_URL}/apps/forms/connection', + supportsConnections: false, + enterprise: true, + baseUrl: '', + apiBaseUrl: '', + primaryColor: '#0059F7', + triggers, +}); diff --git a/packages/backend/src/apps/forms/triggers/form-submission/index.ee.js b/packages/backend/src/apps/forms/triggers/form-submission/index.ee.js new file mode 100644 index 00000000..be495fb1 --- /dev/null +++ b/packages/backend/src/apps/forms/triggers/form-submission/index.ee.js @@ -0,0 +1,64 @@ +import Crypto from 'crypto'; +import isEmpty from 'lodash/isEmpty.js'; +import defineTrigger from '../../../../helpers/define-trigger.js'; + +export default defineTrigger({ + name: 'New form submission', + key: 'newFormSubmission', + pollInterval: 15, + type: 'webhook', + description: 'Triggers when a new form is submitted.', + arguments: [ + { + label: 'Fields', + key: 'fields', + type: 'dynamic', + required: false, + description: 'Add or remove fields as needed', + value: [], + fields: [ + { + label: 'Field name', + key: 'fieldName', + type: 'string', + required: true, + description: 'Displayed name to the user', + variables: true, + }, + { + label: 'Type', + key: 'fieldType', + type: 'dropdown', + required: true, + description: 'Field type', + variables: true, + options: [{ label: 'String', value: 'string' }], + }, + ], + }, + ], + + async run($) { + const dataItem = { + raw: $.request.body, + meta: { + internalId: Crypto.randomUUID(), + }, + }; + + $.pushTriggerItem(dataItem); + }, + + async testRun($) { + const lastExecutionStep = await $.getLastExecutionStep(); + + if (!isEmpty(lastExecutionStep?.dataOut)) { + $.pushTriggerItem({ + raw: lastExecutionStep.dataOut, + meta: { + internalId: '', + }, + }); + } + }, +}); diff --git a/packages/backend/src/apps/forms/triggers/index.ee.js b/packages/backend/src/apps/forms/triggers/index.ee.js new file mode 100644 index 00000000..683a92d5 --- /dev/null +++ b/packages/backend/src/apps/forms/triggers/index.ee.js @@ -0,0 +1,3 @@ +import formSubmittion from './form-submission/index.ee.js'; + +export default [formSubmittion]; diff --git a/packages/backend/src/controllers/internal/api/v1/forms/create-form-submission.ee.js b/packages/backend/src/controllers/internal/api/v1/forms/create-form-submission.ee.js new file mode 100644 index 00000000..d306f3d0 --- /dev/null +++ b/packages/backend/src/controllers/internal/api/v1/forms/create-form-submission.ee.js @@ -0,0 +1,21 @@ +import Flow from '../../../../../models/flow.js'; +import logger from '../../../../../helpers/logger.js'; +import handler from '../../../../../helpers/form-handler.ee.js'; +import { renderError } from '../../../../../helpers/renderer.js'; + +export default async (request, response) => { + logger.debug(`Handling incoming form submission at ${request.originalUrl}.`); + logger.debug(JSON.stringify(request.body, null, 2)); + + const formId = request.params.formId; + const flow = await Flow.query().findById(formId).throwIfNotFound(); + const triggerStep = await flow.getTriggerStep(); + + if (triggerStep.appKey !== 'forms') { + return renderError(response, [{ general: ['Invalid trigger step'] }], 400); + } + + await handler(formId, request, response); + + response.sendStatus(204); +}; diff --git a/packages/backend/src/controllers/internal/api/v1/forms/create-form-submission.ee.test.js b/packages/backend/src/controllers/internal/api/v1/forms/create-form-submission.ee.test.js new file mode 100644 index 00000000..d30e5b9f --- /dev/null +++ b/packages/backend/src/controllers/internal/api/v1/forms/create-form-submission.ee.test.js @@ -0,0 +1,88 @@ +import { vi, describe, it, expect, beforeEach } from 'vitest'; +import request from 'supertest'; +import Crypto from 'crypto'; +import app from '../../../../../app.js'; +import { createUser } from '../../../../../../test/factories/user.js'; +import { createFlow } from '../../../../../../test/factories/flow.js'; +import { createStep } from '../../../../../../test/factories/step.js'; +import * as license from '../../../../../helpers/license.ee.js'; +import * as formHandler from '../../../../../helpers/form-handler.ee.js'; + +describe('POST /internal/api/v1/forms/:formId', () => { + let currentUser, flow, formStep; + + beforeEach(async () => { + vi.spyOn(license, 'hasValidLicense').mockResolvedValue(true); + vi.spyOn(formHandler, 'default').mockResolvedValue(undefined); + + currentUser = await createUser(); + flow = await createFlow({ userId: currentUser.id }); + + formStep = await createStep({ + flowId: flow.id, + appKey: 'forms', + key: 'form', + type: 'trigger', + parameters: { + fields: [ + { + fieldName: 'email', + fieldKey: 'email', + fieldType: 'string', + required: true, + }, + { + fieldName: 'name', + fieldKey: 'name', + fieldType: 'string', + required: true, + }, + ], + }, + }); + }); + + it('should process form submission successfully', async () => { + const formData = { + name: 'John Doe', + email: 'john@example.com', + }; + + await request(app) + .post(`/internal/api/v1/forms/${flow.id}`) + .send(formData) + .expect(204); + }); + + it('should return 400 for invalid trigger step', async () => { + await formStep.$query().patch({ appKey: 'github' }); + + const formData = { + name: 'John Doe', + email: 'john@example.com', + }; + + const response = await request(app) + .post(`/internal/api/v1/forms/${flow.id}`) + .send(formData) + .expect(400); + + expect(response.body.errors).toStrictEqual({ + general: ['Invalid trigger step'], + }); + }); + + it('should return 404 for non-existent form', async () => { + const nonExistentFormId = Crypto.randomUUID(); + + const formData = { + name: 'John Doe', + email: 'john@example.com', + }; + + await request(app) + .post(`/internal/api/v1/forms/${nonExistentFormId}`) + .send(formData) + .expect(404); + }); +}); diff --git a/packages/backend/src/controllers/internal/api/v1/forms/get-form.ee.js b/packages/backend/src/controllers/internal/api/v1/forms/get-form.ee.js new file mode 100644 index 00000000..75b92f33 --- /dev/null +++ b/packages/backend/src/controllers/internal/api/v1/forms/get-form.ee.js @@ -0,0 +1,18 @@ +import { renderObject, renderError } from '../../../../../helpers/renderer.js'; +import Flow from '../../../../../models/flow.js'; + +export default async (request, response) => { + const form = await Flow.query() + .withGraphJoined({ steps: true }) + .orderBy('steps.position', 'asc') + .findById(request.params.formId) + .throwIfNotFound(); + + const triggerStep = await form.getTriggerStep(); + + if (triggerStep.appKey !== 'forms') { + return renderError(response, [{ general: ['Invalid trigger step'] }], 400); + } + + renderObject(response, form, { serializer: 'Form' }); +}; diff --git a/packages/backend/src/controllers/internal/api/v1/forms/get-form.ee.test.js b/packages/backend/src/controllers/internal/api/v1/forms/get-form.ee.test.js new file mode 100644 index 00000000..47504478 --- /dev/null +++ b/packages/backend/src/controllers/internal/api/v1/forms/get-form.ee.test.js @@ -0,0 +1,73 @@ +import { vi, describe, it, expect, beforeEach } from 'vitest'; +import request from 'supertest'; +import Crypto from 'crypto'; +import app from '../../../../../app.js'; +import { createUser } from '../../../../../../test/factories/user.js'; +import { createFlow } from '../../../../../../test/factories/flow.js'; +import { createStep } from '../../../../../../test/factories/step.js'; +import * as license from '../../../../../helpers/license.ee.js'; +import getFormMock from '../../../../../../test/mocks/rest/internal/api/v1/forms/get-form.ee.js'; + +describe('GET /internal/api/v1/forms/:formId', () => { + let currentUser, flow, formStep; + + beforeEach(async () => { + vi.spyOn(license, 'hasValidLicense').mockResolvedValue(true); + + currentUser = await createUser(); + flow = await createFlow({ userId: currentUser.id }); + + formStep = await createStep({ + flowId: flow.id, + appKey: 'forms', + key: 'form', + type: 'trigger', + parameters: { + fields: [ + { + fieldKey: 'email', + fieldName: 'email', + fieldType: 'string', + required: true, + }, + { + fieldKey: 'name', + fieldName: 'name', + fieldType: 'string', + required: true, + }, + ], + }, + }); + }); + + it('should return form data when trigger step is forms', async () => { + const response = await request(app) + .get(`/internal/api/v1/forms/${flow.id}`) + .expect(200); + + const expectedPayload = getFormMock(flow, formStep); + + expect(response.body).toStrictEqual(expectedPayload); + }); + + it('should return 400 for invalid trigger step', async () => { + await formStep.$query().patch({ appKey: 'github' }); + + const response = await request(app) + .get(`/internal/api/v1/forms/${flow.id}`) + .expect(400); + + expect(response.body.errors).toStrictEqual({ + general: ['Invalid trigger step'], + }); + }); + + it('should return 404 for non-existent form', async () => { + const nonExistentFormId = Crypto.randomUUID(); + + await request(app) + .get(`/internal/api/v1/forms/${nonExistentFormId}`) + .expect(404); + }); +}); diff --git a/packages/backend/src/helpers/form-handler.ee.js b/packages/backend/src/helpers/form-handler.ee.js new file mode 100644 index 00000000..1835ef07 --- /dev/null +++ b/packages/backend/src/helpers/form-handler.ee.js @@ -0,0 +1,71 @@ +import isEmpty from 'lodash/isEmpty.js'; + +import Flow from '../models/flow.js'; +import { processTrigger } from '../services/trigger.js'; +import triggerQueue from '../queues/trigger.js'; +import globalVariable from './global-variable.js'; +import QuotaExceededError from '../errors/quote-exceeded.js'; +import { + REMOVE_AFTER_30_DAYS_OR_150_JOBS, + REMOVE_AFTER_7_DAYS_OR_50_JOBS, +} from './remove-job-configuration.js'; + +export default async (flowId, request, response) => { + const flow = await Flow.query().findById(flowId).throwIfNotFound(); + const user = await flow.$relatedQuery('user'); + + const testRun = !flow.active; + const quotaExceeded = !testRun && !(await user.isAllowedToRunFlows()); + + if (quotaExceeded) { + throw new QuotaExceededError(); + } + + const triggerStep = await flow.getTriggerStep(); + const app = await triggerStep.getApp(); + + const $ = await globalVariable({ + flow, + app, + step: triggerStep, + testRun, + request, + }); + + const triggerCommand = await triggerStep.getTriggerCommand(); + await triggerCommand.run($); + + const triggerItem = $.triggerOutput.data?.[0]; + + if (isEmpty(triggerItem)) { + return response.status(204); + } + + if (testRun) { + await processTrigger({ + flowId, + stepId: triggerStep.id, + triggerItem, + testRun, + }); + + return response.status(204); + } + + const jobName = `${triggerStep.id}-${triggerItem.meta.internalId}`; + + const jobOptions = { + removeOnComplete: REMOVE_AFTER_7_DAYS_OR_50_JOBS, + removeOnFail: REMOVE_AFTER_30_DAYS_OR_150_JOBS, + }; + + const jobPayload = { + flowId, + stepId: triggerStep.id, + triggerItem, + }; + + await triggerQueue.add(jobName, jobPayload, jobOptions); + + return response.status(204); +}; diff --git a/packages/backend/src/helpers/get-app.js b/packages/backend/src/helpers/get-app.js index 5e23fb18..3bd3024a 100644 --- a/packages/backend/src/helpers/get-app.js +++ b/packages/backend/src/helpers/get-app.js @@ -13,9 +13,14 @@ const apps = fs .reduce((apps, dirent) => { if (!dirent.isDirectory()) return apps; - apps[dirent.name] = import( - pathToFileURL(join(__dirname, '../apps', dirent.name, 'index.js')) - ); + const indexPath = join(__dirname, '../apps', dirent.name, 'index.js'); + const indexEePath = join(__dirname, '../apps', dirent.name, 'index.ee.js'); + + if (fs.existsSync(indexEePath)) { + apps[dirent.name] = import(pathToFileURL(indexEePath)); + } else { + apps[dirent.name] = import(pathToFileURL(indexPath)); + } return apps; }, {}); @@ -85,10 +90,8 @@ const addStaticSubsteps = (stepType, appData, step) => { arguments: step.arguments, }); } - computedStep.substeps.push(testStep(stepType)); return computedStep; }; - export default getApp; diff --git a/packages/backend/src/helpers/global-variable.js b/packages/backend/src/helpers/global-variable.js index 843499fc..85d2f64a 100644 --- a/packages/backend/src/helpers/global-variable.js +++ b/packages/backend/src/helpers/global-variable.js @@ -80,8 +80,9 @@ const globalVariable = async (options) => { $.triggerOutput.data.push(triggerItem); const isWebhookApp = app.key === 'webhook'; + const isFormsApp = app.key === 'forms'; - if ($.execution.testRun && !isWebhookApp) { + if ($.execution.testRun && !isWebhookApp && !isFormsApp) { // early exit after receiving one item as it is enough for test execution throw new EarlyExitError(); } diff --git a/packages/backend/src/models/__snapshots__/app.test.js.snap b/packages/backend/src/models/__snapshots__/app.test.js.snap index bec4c65a..c6b27e75 100644 --- a/packages/backend/src/models/__snapshots__/app.test.js.snap +++ b/packages/backend/src/models/__snapshots__/app.test.js.snap @@ -1,5 +1,172 @@ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html +exports[`App model > list > should exclude enterprise apps when license is not valid 1`] = ` +[ + "airtable", + "anthropic", + "appwrite", + "azure-openai", + "brave-search", + "carbone", + "clickup", + "code", + "cryptography", + "datastore", + "deepl", + "delay", + "discord", + "disqus", + "dropbox", + "filter", + "flickr", + "flowers-software", + "formatter", + "freescout", + "ghost", + "gitea", + "github", + "gitlab", + "gmail", + "google-calendar", + "google-drive", + "google-forms", + "google-sheets", + "google-tasks", + "helix", + "http-request", + "hubspot", + "invoice-ninja", + "jotform", + "mailchimp", + "mailerlite", + "mattermost", + "miro", + "mistral-ai", + "monday", + "notion", + "ntfy", + "odoo", + "openai", + "openrouter", + "perplexity", + "pipedrive", + "placetel", + "postgresql", + "pushover", + "reddit", + "removebg", + "rss", + "salesforce", + "scheduler", + "self-hosted-llm", + "signalwire", + "slack", + "smtp", + "spotify", + "strava", + "stripe", + "telegram-bot", + "todoist", + "together-ai", + "trello", + "twilio", + "twitter", + "typeform", + "virtualq", + "vtiger-crm", + "webhook", + "wordpress", + "xero", + "you-need-a-budget", + "youtube", + "zendesk", +] +`; + +exports[`App model > list > should list all applications including enterprise ones when license is valid 1`] = ` +[ + "airtable", + "anthropic", + "appwrite", + "azure-openai", + "brave-search", + "carbone", + "clickup", + "code", + "cryptography", + "datastore", + "deepl", + "delay", + "discord", + "disqus", + "dropbox", + "filter", + "flickr", + "flowers-software", + "formatter", + "forms", + "freescout", + "ghost", + "gitea", + "github", + "gitlab", + "gmail", + "google-calendar", + "google-drive", + "google-forms", + "google-sheets", + "google-tasks", + "helix", + "http-request", + "hubspot", + "invoice-ninja", + "jotform", + "mailchimp", + "mailerlite", + "mattermost", + "miro", + "mistral-ai", + "monday", + "notion", + "ntfy", + "odoo", + "openai", + "openrouter", + "perplexity", + "pipedrive", + "placetel", + "postgresql", + "pushover", + "reddit", + "removebg", + "rss", + "salesforce", + "scheduler", + "self-hosted-llm", + "signalwire", + "slack", + "smtp", + "spotify", + "strava", + "stripe", + "telegram-bot", + "todoist", + "together-ai", + "trello", + "twilio", + "twitter", + "typeform", + "virtualq", + "vtiger-crm", + "webhook", + "wordpress", + "xero", + "you-need-a-budget", + "youtube", + "zendesk", +] +`; + exports[`App model > list should have list of applications keys 1`] = ` [ "airtable", diff --git a/packages/backend/src/models/app.js b/packages/backend/src/models/app.js index 6decb5ba..3c3630d7 100644 --- a/packages/backend/src/models/app.js +++ b/packages/backend/src/models/app.js @@ -3,26 +3,46 @@ import path, { join } from 'path'; import { fileURLToPath } from 'url'; import appInfoConverter from '../helpers/app-info-converter.js'; import getApp from '../helpers/get-app.js'; +import { hasValidLicense } from '../helpers/license.ee.js'; const __dirname = path.dirname(fileURLToPath(import.meta.url)); class App { static folderPath = join(__dirname, '../apps'); - static list = fs - .readdirSync(this.folderPath) - .filter((file) => fs.statSync(join(this.folderPath, file)).isDirectory()); + static async list() { + const directories = fs + .readdirSync(this.folderPath) + .filter((file) => fs.statSync(join(this.folderPath, file)).isDirectory()); + + if (!(await hasValidLicense())) { + // Filter out enterprise apps if no valid license + const nonEnterpriseApps = []; + + for (const dir of directories) { + const appData = await getApp(dir, true); + + if (!appData.enterprise) { + nonEnterpriseApps.push(dir); + } + } + + return nonEnterpriseApps; + } + + return directories; + } static async findAll(name, stripFuncs = true) { + const appList = await this.list(); + if (!name) return Promise.all( - this.list.map( - async (name) => await this.findOneByName(name, stripFuncs) - ) + appList.map(async (name) => await this.findOneByName(name, stripFuncs)) ); return Promise.all( - this.list + appList .filter((app) => app.includes(name.toLowerCase())) .map((name) => this.findOneByName(name, stripFuncs)) ); diff --git a/packages/backend/src/models/app.test.js b/packages/backend/src/models/app.test.js index 656834c9..f19a013a 100644 --- a/packages/backend/src/models/app.test.js +++ b/packages/backend/src/models/app.test.js @@ -1,23 +1,38 @@ import { describe, it, expect, vi } from 'vitest'; - import App from './app.js'; import * as getAppModule from '../helpers/get-app.js'; import * as appInfoConverterModule from '../helpers/app-info-converter.js'; +import * as licenseModule from '../helpers/license.ee.js'; describe('App model', () => { it('folderPath should return correct path', () => { expect(App.folderPath.endsWith('/packages/backend/src/apps')).toBe(true); }); - it('list should have list of applications keys', () => { - expect(App.list).toMatchSnapshot(); + describe('list', () => { + it('should list all applications including enterprise ones when license is valid', async () => { + vi.spyOn(licenseModule, 'hasValidLicense').mockResolvedValue(true); + const appList = await App.list(); + + expect(appList).toMatchSnapshot(); + expect(appList).toContain('forms'); + }); + + it('should exclude enterprise apps when license is not valid', async () => { + vi.spyOn(licenseModule, 'hasValidLicense').mockResolvedValue(false); + const appList = await App.list(); + + expect(appList).toMatchSnapshot(); + expect(appList).not.toContain('forms'); + }); }); describe('findAll', () => { it('should return all applications', async () => { const apps = await App.findAll(); + const appList = await App.list(); - expect(apps.length).toBe(App.list.length); + expect(apps.length).toBe(appList.length); }); it('should return matching applications when name argument is given', async () => { diff --git a/packages/backend/src/routes/internal/api/index.js b/packages/backend/src/routes/internal/api/index.js index 14794960..e0c67016 100644 --- a/packages/backend/src/routes/internal/api/index.js +++ b/packages/backend/src/routes/internal/api/index.js @@ -21,6 +21,7 @@ import permissionsRouter from './v1/admin/permissions.ee.js'; import adminUsersRouter from './v1/admin/users.ee.js'; import installationUsersRouter from './v1/installation/users.js'; import foldersRouter from './v1/folders.js'; +import formsRouter from './v1/forms.ee.js'; const router = Router(); @@ -45,5 +46,6 @@ router.use('/v1/admin/api-tokens', adminApiTokensRouter); router.use('/v1/templates', templatesRouter); router.use('/v1/installation/users', installationUsersRouter); router.use('/v1/folders', foldersRouter); +router.use('/v1/forms', formsRouter); export default router; diff --git a/packages/backend/src/routes/internal/api/v1/forms.ee.js b/packages/backend/src/routes/internal/api/v1/forms.ee.js new file mode 100644 index 00000000..838478c2 --- /dev/null +++ b/packages/backend/src/routes/internal/api/v1/forms.ee.js @@ -0,0 +1,10 @@ +import { Router } from 'express'; +import getFormAction from '../../../../controllers/internal/api/v1/forms/get-form.ee.js'; +import useCreateFormSubmission from '../../../../controllers/internal/api/v1/forms/create-form-submission.ee.js'; + +const router = Router(); + +router.get('/:formId', getFormAction); +router.post('/:formId', useCreateFormSubmission); + +export default router; diff --git a/packages/backend/src/serializers/form.ee.js b/packages/backend/src/serializers/form.ee.js new file mode 100644 index 00000000..47c1cc7d --- /dev/null +++ b/packages/backend/src/serializers/form.ee.js @@ -0,0 +1,21 @@ +import slugify from 'slugify'; + +const formSerializer = (form) => { + const formData = { + id: form.id, + name: form.name, + fields: form?.steps[0]?.parameters?.fields?.map((parameter) => ({ + fieldKey: slugify(parameter.fieldName, { + lower: true, + strict: true, + replacement: '-', + }), + fieldName: parameter.fieldName, + fieldType: parameter.fieldType, + })), + }; + + return formData; +}; + +export default formSerializer; diff --git a/packages/backend/src/serializers/index.js b/packages/backend/src/serializers/index.js index 2966ff3f..524c82a5 100644 --- a/packages/backend/src/serializers/index.js +++ b/packages/backend/src/serializers/index.js @@ -26,6 +26,7 @@ import templateSerializer from './template.ee.js'; import triggerSerializer from './trigger.js'; import userAppSerializer from './user-app.js'; import userSerializer from './user.js'; +import formSerializer from './form.ee.js'; const serializers = { Action: actionSerializer, @@ -34,6 +35,7 @@ const serializers = { AdminSamlAuthProvider: adminSamlAuthProviderSerializer, AdminTemplate: adminTemplateSerializer, AdminUser: adminUserSerializer, + Form: formSerializer, App: appSerializer, AppConfig: appConfigSerializer, Auth: authSerializer, diff --git a/packages/backend/test/mocks/rest/internal/api/v1/forms/get-form.ee.js b/packages/backend/test/mocks/rest/internal/api/v1/forms/get-form.ee.js new file mode 100644 index 00000000..eb9f9f5c --- /dev/null +++ b/packages/backend/test/mocks/rest/internal/api/v1/forms/get-form.ee.js @@ -0,0 +1,24 @@ +const getFormMock = (flow, formStep) => { + const data = { + id: flow.id, + name: flow.name, + fields: formStep?.parameters?.fields?.map((field) => ({ + fieldKey: field.fieldKey, + fieldName: field.fieldName, + fieldType: field.fieldType, + })), + }; + + return { + data, + meta: { + count: 1, + currentPage: null, + isArray: false, + totalPages: null, + type: 'Flow', + }, + }; +}; + +export default getFormMock; diff --git a/packages/backend/yarn.lock b/packages/backend/yarn.lock index 718eff58..2adf2930 100644 --- a/packages/backend/yarn.lock +++ b/packages/backend/yarn.lock @@ -4177,6 +4177,11 @@ simple-update-notifier@^1.0.7: dependencies: semver "~7.0.0" +slugify@^1.6.6: + version "1.6.6" + resolved "https://registry.yarnpkg.com/slugify/-/slugify-1.6.6.tgz#2d4ac0eacb47add6af9e04d3be79319cbcc7924b" + integrity sha512-h+z7HKHYXj6wJU+AnS/+IH8Uh9fdcX1Lrhg1/VMdf9PwoBQXFcXiAdsy2tSK0P6gKwJLXp02r90ahUCqHk9rrw== + smart-buffer@^4.2.0: version "4.2.0" resolved "https://registry.yarnpkg.com/smart-buffer/-/smart-buffer-4.2.0.tgz#6e1d71fa4f18c05f7d0ff216dd16a481d0e8d9ae" @@ -4261,7 +4266,16 @@ streamsearch@^1.1.0: resolved "https://registry.yarnpkg.com/streamsearch/-/streamsearch-1.1.0.tgz#404dd1e2247ca94af554e841a8ef0eaa238da764" integrity sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg== -"string-width-cjs@npm:string-width@^4.2.0", "string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.3: +"string-width-cjs@npm:string-width@^4.2.0": + version "4.2.3" + resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010" + integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g== + dependencies: + emoji-regex "^8.0.0" + is-fullwidth-code-point "^3.0.0" + strip-ansi "^6.0.1" + +"string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.3: version "4.2.3" resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010" integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g== @@ -4293,7 +4307,14 @@ string_decoder@~1.1.1: dependencies: safe-buffer "~5.1.0" -"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1: +"strip-ansi-cjs@npm:strip-ansi@^6.0.1": + version "6.0.1" + resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9" + integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A== + dependencies: + ansi-regex "^5.0.1" + +strip-ansi@^6.0.0, strip-ansi@^6.0.1: version "6.0.1" resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9" integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A== diff --git a/packages/web/package.json b/packages/web/package.json index 057cb981..3a809006 100644 --- a/packages/web/package.json +++ b/packages/web/package.json @@ -12,6 +12,7 @@ "@hookform/resolvers": "^2.8.8", "@monaco-editor/react": "^4.6.0", "@mui/icons-material": "^5.11.9", + "@mui/joy": "^5.0.0-beta.52", "@mui/lab": "^5.0.0-alpha.120", "@mui/material": "^5.11.10", "@mui/x-date-pickers": "^7.28.0", diff --git a/packages/web/src/components/FlowStep/index.jsx b/packages/web/src/components/FlowStep/index.jsx index 50ea3a19..136474f3 100644 --- a/packages/web/src/components/FlowStep/index.jsx +++ b/packages/web/src/components/FlowStep/index.jsx @@ -369,6 +369,7 @@ function FlowStep(props) { onSubmit={expandNextStep} onChange={handleChange} step={step} + flowId={flowId} /> )} diff --git a/packages/web/src/components/FlowSubstep/index.jsx b/packages/web/src/components/FlowSubstep/index.jsx index 96ecfe13..4d52f901 100644 --- a/packages/web/src/components/FlowSubstep/index.jsx +++ b/packages/web/src/components/FlowSubstep/index.jsx @@ -4,6 +4,7 @@ import { useFormContext } from 'react-hook-form'; import Collapse from '@mui/material/Collapse'; import ListItem from '@mui/material/ListItem'; import Button from '@mui/material/Button'; +import Alert from '@mui/material/Alert'; import Stack from '@mui/material/Stack'; import { EditorContext } from 'contexts/Editor'; import FlowSubstepTitle from 'components/FlowSubstepTitle'; @@ -22,6 +23,7 @@ function FlowSubstep(props) { onCollapse, onSubmit, step, + flowId, } = props; const { name, arguments: args } = substep; const editorContext = React.useContext(EditorContext); @@ -51,6 +53,19 @@ function FlowSubstep(props) { position: 'relative', }} > + {step.appKey === 'forms' && ( + + You may preview the form at{' '} + + {new URL(`/forms/${flowId}`, window.location.href).href} + + . + + )} {!!args?.length && ( {args.map((argument) => ( @@ -92,6 +107,7 @@ FlowSubstep.propTypes = { onCollapse: PropTypes.func.isRequired, onSubmit: PropTypes.func.isRequired, step: StepPropType.isRequired, + flowId: PropTypes.string.isRequired, }; export default FlowSubstep; diff --git a/packages/web/src/config/urls.js b/packages/web/src/config/urls.js index c27c7a93..bb953d16 100644 --- a/packages/web/src/config/urls.js +++ b/packages/web/src/config/urls.js @@ -15,6 +15,7 @@ export const APP = (appKey) => `/app/${appKey}`; export const APP_PATTERN = '/app/:appKey'; export const APP_CONNECTIONS = (appKey) => `/app/${appKey}/connections`; export const APP_CONNECTIONS_PATTERN = '/app/:appKey/connections'; +export const FORM_FLOW_PATTERN = '/forms/:flowId'; export const APP_ADD_CONNECTION = (appKey, shared = false) => `/app/${appKey}/connections/add?shared=${shared}`; diff --git a/packages/web/src/hooks/useCreateFormSubmission.ee.js b/packages/web/src/hooks/useCreateFormSubmission.ee.js new file mode 100644 index 00000000..e2ca708a --- /dev/null +++ b/packages/web/src/hooks/useCreateFormSubmission.ee.js @@ -0,0 +1,15 @@ +import { useMutation } from '@tanstack/react-query'; + +import api from 'helpers/api'; + +export default function useCreateFormSubmission(formId) { + const mutation = useMutation({ + mutationFn: async (payload) => { + const { data } = await api.post(`/v1/forms/${formId}`, payload); + + return data; + }, + }); + + return mutation; +} diff --git a/packages/web/src/hooks/useForm.ee.js b/packages/web/src/hooks/useForm.ee.js new file mode 100644 index 00000000..448f9c0c --- /dev/null +++ b/packages/web/src/hooks/useForm.ee.js @@ -0,0 +1,19 @@ +import { useQuery } from '@tanstack/react-query'; + +import api from 'helpers/api'; + +export default function useForm(formId) { + const query = useQuery({ + queryKey: ['forms', formId], + queryFn: async ({ signal }) => { + const { data } = await api.get(`/v1/forms/${formId}`, { + signal, + }); + + return data; + }, + enabled: !!formId, + }); + + return query; +} diff --git a/packages/web/src/pages/FormFlow/index.jsx b/packages/web/src/pages/FormFlow/index.jsx new file mode 100644 index 00000000..44717ca6 --- /dev/null +++ b/packages/web/src/pages/FormFlow/index.jsx @@ -0,0 +1,74 @@ +import Box from '@mui/joy/Box'; +import Alert from '@mui/joy/Alert'; +import Button from '@mui/joy/Button'; +import FormControl from '@mui/joy/FormControl'; +import FormLabel from '@mui/joy/FormLabel'; +import Input from '@mui/joy/Input'; +import Stack from '@mui/joy/Stack'; +import { CssVarsProvider } from '@mui/joy/styles'; +import Typography from '@mui/joy/Typography'; +import Container from 'components/Container'; +import * as React from 'react'; +import { useParams } from 'react-router-dom'; + +import useForm from 'hooks/useForm.ee'; +import useCreateFormSubmission from 'hooks/useCreateFormSubmission.ee'; + +export default function FormFlow() { + const { flowId } = useParams(); + const { data: flow, isLoading } = useForm(flowId); + const { mutate: createFormSubmission, isSuccess } = + useCreateFormSubmission(flowId); + + if (isLoading) return 'loading...'; + + const formFields = flow.data.fields; + + const handleSubmit = (event) => { + event.preventDefault(); + + console.log(event.target); + const formData = new FormData(event.target); + + const data = Object.fromEntries(formData.entries()); + + console.log('data', data); + createFormSubmission(data); + }; + + return ( + + + + + {flow.data.name} + + + + {formFields.map(({ fieldName, fieldKey, fieldType }, index) => ( + <> + {fieldType === 'string' && ( + + {fieldName} + + + )} + + ))} + + + + {isSuccess && Form submitted successfully!} + + + + + ); +} diff --git a/packages/web/src/routes.jsx b/packages/web/src/routes.jsx index 241bf53d..1eb0897b 100644 --- a/packages/web/src/routes.jsx +++ b/packages/web/src/routes.jsx @@ -11,6 +11,7 @@ import NoResultFound from 'components/NotFound'; import PublicLayout from 'components/PublicLayout'; import AdminSettingsLayout from 'components/AdminSettingsLayout'; import Applications from 'pages/Applications'; +import FormFlow from 'pages/FormFlow'; import Application from 'pages/Application'; import Executions from 'pages/Executions'; import Execution from 'pages/Execution'; @@ -175,6 +176,8 @@ function Routes() { {settingsRoutes} + } /> + }> {adminSettingsRoutes} diff --git a/packages/web/yarn.lock b/packages/web/yarn.lock index 1dbeabdb..12c937ad 100644 --- a/packages/web/yarn.lock +++ b/packages/web/yarn.lock @@ -1592,6 +1592,20 @@ dependencies: "@babel/runtime" "^7.23.9" +"@mui/joy@^5.0.0-beta.52": + version "5.0.0-beta.52" + resolved "https://registry.yarnpkg.com/@mui/joy/-/joy-5.0.0-beta.52.tgz#9c7cd9629603089c80e8f8f7b78a41534ef06e91" + integrity sha512-e8jQanA5M1f/X52mJrw0UIW8Er7EAHuLuigmGFw7yIsAgIluhIP4rZ7JcbVrUi6z5Gk0weC9QWUUtjLejAbO8g== + dependencies: + "@babel/runtime" "^7.23.9" + "@mui/base" "5.0.0-beta.40-1" + "@mui/core-downloads-tracker" "^5.17.1" + "@mui/system" "^5.17.1" + "@mui/types" "~7.2.15" + "@mui/utils" "^5.17.1" + clsx "^2.1.0" + prop-types "^15.8.1" + "@mui/lab@^5.0.0-alpha.120": version "5.0.0-alpha.176" resolved "https://registry.yarnpkg.com/@mui/lab/-/lab-5.0.0-alpha.176.tgz#4e6101c8224d896d66588b08b9b7883408a0ecc3"