From 6f34c1beafe31d852c4c47c7ec01931cc46fd382 Mon Sep 17 00:00:00 2001 From: Antonio Sonis Date: Thu, 30 Nov 2023 09:53:26 +0100 Subject: [PATCH 1/5] fix: console.error instead of log Signed-off-by: Antonio Sonis --- src/renderer/src/components/steps/PrepareFolder.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/renderer/src/components/steps/PrepareFolder.jsx b/src/renderer/src/components/steps/PrepareFolder.jsx index 528d9885..6e0e22c9 100644 --- a/src/renderer/src/components/steps/PrepareFolder.jsx +++ b/src/renderer/src/components/steps/PrepareFolder.jsx @@ -33,7 +33,7 @@ const PrepareFolder = React.forwardRef(({ onNext }, ref) => { }) setFolderPrepared(true) } catch (error) { - console.log(`Error on prepareFolder ${error}`) + console.error(`Error on prepareFolder ${error}`) } } prepareFolder() From 2a17be70a7e6a3f1bd5388f6b18b2266e4611856 Mon Sep 17 00:00:00 2001 From: Antonio Sonis Date: Thu, 30 Nov 2023 13:16:06 +0100 Subject: [PATCH 2/5] feat: moving all the form stuff on parent Signed-off-by: Antonio Sonis --- .../steps/GeneratingApplication.jsx | 6 +- .../ConfigureEnvVarsTemplateAndPlugins.jsx | 115 +++++++++++++++-- .../configure-services/ConfigureServices.jsx | 116 +++++++++++++++++- .../TemplateAndPluginTreeSelector.jsx | 2 +- .../templates/TemplateEnvVarsForm.jsx | 98 ++++++--------- 5 files changed, 258 insertions(+), 79 deletions(-) diff --git a/src/renderer/src/components/steps/GeneratingApplication.jsx b/src/renderer/src/components/steps/GeneratingApplication.jsx index fa2bc64f..12091e4b 100644 --- a/src/renderer/src/components/steps/GeneratingApplication.jsx +++ b/src/renderer/src/components/steps/GeneratingApplication.jsx @@ -130,14 +130,12 @@ function StepCreation ({ step, index, concludedStep, /* startTime = 0, endTime = const GeneratingApplication = React.forwardRef(({ onClickComplete }, ref) => { const globalState = useStackablesStore() - const { formData, services } = globalState + const { formData } = globalState useEffect(() => { async function generateApplication () { try { - console.log('let\'scall createApp') - const obj = { projectName: formData.createApplication.application, services, ...formData.configureApplication } - console.log(`prjectDir: ${formData.createApplication.path}`) + const obj = { projectName: formData.createApplication.application, services: formData.configuredServices.services, ...formData.configureApplication } console.log(obj) } catch (error) { console.log(`Error on prepareFolder ${error}`) diff --git a/src/renderer/src/components/steps/configure-services/ConfigureEnvVarsTemplateAndPlugins.jsx b/src/renderer/src/components/steps/configure-services/ConfigureEnvVarsTemplateAndPlugins.jsx index 4f748262..4099563e 100644 --- a/src/renderer/src/components/steps/configure-services/ConfigureEnvVarsTemplateAndPlugins.jsx +++ b/src/renderer/src/components/steps/configure-services/ConfigureEnvVarsTemplateAndPlugins.jsx @@ -1,28 +1,46 @@ 'use strict' import React, { useEffect, useState } from 'react' +import PropTypes from 'prop-types' import styles from './ConfigureEnvVarsTemplateAndPlugins.module.css' import commonStyles from '~/styles/CommonStyles.module.css' import TemplateAndPluginTreeSelector from '~/components/template-and-plugins/TemplateAndPluginTreeSelector' import { CSSTransition } from 'react-transition-group' import TemplateEnvVarsForm from '~/components/templates/TemplateEnvVarsForm' import PluginEnvVarsForm from '~/components/plugins/PluginEnvVarsForm' -import useStackablesStore from '~/useStackablesStore' import '~/components/component.animation.css' -function ConfigureEnvVarsTemplateAndPlugins () { - const globalState = useStackablesStore() - const { services } = globalState - - const [serviceSelected, setServiceSelected] = useState(services[0]) +function ConfigureEnvVarsTemplateAndPlugins ({ + configuredServices, + handleChangeTemplateForm +}) { + const [serviceSelected, setServiceSelected] = useState(null) const [pluginSelected, setPluginSelected] = useState(null) const [currentComponent, setCurrentComponent] = useState(<>) + useEffect(() => { + console.log('useEffect configuredServices', configuredServices) + if (configuredServices !== null) { + setServiceSelected(configuredServices[0]) + } + }, [configuredServices]) + + function handleChangeTemplateEnvVars (event) { + return handleChangeTemplateForm(event, serviceSelected.template, serviceSelected.name) + } + useEffect(() => { if (serviceSelected) { if (pluginSelected) { setCurrentComponent() } else { - setCurrentComponent() + setCurrentComponent( + ) } } }, [serviceSelected, pluginSelected]) @@ -37,6 +55,72 @@ function ConfigureEnvVarsTemplateAndPlugins () { setPluginSelected(plugin) } + /* function handleChange (event) { + const value = event.target.value + validateField(event.target.name, value, setAllServices(allServices.map(service => { + if (service.name === serviceSelected.name) { + const { form, ...rest } = service + const { _value, ...restForm } = form[event.target.name] + const newForm = {} + newForm[event.target.name] = { + ...restForm, + value + } + return { + form: { ...newForm }, + ...rest + } + } else { + return service + } + })) + ) + } + + function validateField (fieldName, fieldValue, callback = () => {}) { + const validations = allServices.find(service => service.name === serviceSelected.name).validations + let tmpValid = validations[`${fieldName}Valid`] + const formErrors = { ...validations.formErrors } + switch (fieldName) { + default: + tmpValid = fieldValue.length > 0 && /^\S+$/g.test(fieldValue) + formErrors[fieldName] = fieldValue.length > 0 ? (tmpValid ? '' : 'The field is not valid, make sure you are using regular characters') : '' + break + } + const nextValidation = { ...validations, formErrors } + nextValidation[`${fieldName}Valid`] = tmpValid + setAllServices(allServices.map(service => { + if (service.name === serviceSelected.name) { + const { validations, ...rest } = service + return { + validations: nextValidation, + ...rest + } + } else { + return service + } + })) + validateForm(nextValidation, callback()) + } + + function validateForm (validations, callback = () => {}) { + // eslint-disable-next-line no-unused-vars + const { _formErrors, ...restValidations } = validations + const valid = Object.keys(restValidations).findIndex(element => restValidations[element] === false) === -1 + setAllServices(allServices.map(service => { + if (service.name === serviceSelected.name) { + const { validForm, ...rest } = service + return { + validations: valid, + ...rest + } + } else { + return service + } + })) + return callback + } */ + return (
{} +} + export default ConfigureEnvVarsTemplateAndPlugins diff --git a/src/renderer/src/components/steps/configure-services/ConfigureServices.jsx b/src/renderer/src/components/steps/configure-services/ConfigureServices.jsx index 20b8890d..73b67e13 100644 --- a/src/renderer/src/components/steps/configure-services/ConfigureServices.jsx +++ b/src/renderer/src/components/steps/configure-services/ConfigureServices.jsx @@ -1,5 +1,5 @@ 'use strict' -import React from 'react' +import React, { useEffect, useState } from 'react' import PropTypes from 'prop-types' import styles from './ConfigureServices.module.css' import commonStyles from '~/styles/CommonStyles.module.css' @@ -13,9 +13,75 @@ import ConfigureEnvVarsTemplateAndPlugins from './ConfigureEnvVarsTemplateAndPlu const ConfigureServices = React.forwardRef(({ onNext }, ref) => { const globalState = useStackablesStore() - const { formData, addFormData } = globalState + const { formData, addFormData, services } = globalState + const [disabled, setDisabled] = useState(true) + const [configuredServices, setConfiguredServices] = useState([]) + + useEffect(() => { + if (services.length > 0) { + let tmpTemplateForms = {} + let tmpTemplateValidations = {} + let tmpTemplateValidForm = {} + let tmpObj = {} + services.forEach(service => { + tmpTemplateForms = {} + tmpTemplateValidations = {} + tmpTemplateValidForm = {} + tmpObj = {} + + tmpObj.name = service.name + tmpObj.template = service.template.name + let form + let validations + let formErrors + + if (service.template.envVars.length > 0) { + form = {} + validations = {} + formErrors = {} + service.template.envVars.forEach(envVar => { + const { var: envName, configValue, type, default: envDefault, label } = envVar + form[envName] = { + label, + var: envName, + value: envDefault || '', + configValue, + type + } + validations[`${envName}Valid`] = envDefault !== '' + formErrors[envName] = '' + }) + tmpTemplateForms = { ...form } + tmpTemplateValidations = { ...validations, formErrors } + tmpTemplateValidForm = Object.keys(validations).findIndex(element => validations[element] === false) === -1 + } + tmpObj.form = { ...tmpTemplateForms } + tmpObj.validations = { ...tmpTemplateValidations } + tmpObj.validForm = tmpTemplateValidForm + tmpObj.updatedAt = new Date().toISOString() + }) + setConfiguredServices([...configuredServices, tmpObj]) + } + }, [services]) + + useEffect(() => { + if (configuredServices) { + setDisabled(configuredServices.find(configuredService => configuredService.validForm === false) !== undefined) + } + }, [configuredServices]) function onClickConfigureApplication () { + const services = configuredServices.map(({ name, template, form }) => ({ + name, + template, + fields: Object.keys(form).map(k => { + const { label, ...rest } = form[k] + return { ...rest } + }) + })) + addFormData({ + configuredServices: { services } + }) onNext() } @@ -29,6 +95,45 @@ const ConfigureServices = React.forwardRef(({ onNext }, ref) => { }) } + function handleChangeTemplateForm (event, templateName, serviceName) { + const fieldName = event.target.name + const fieldValue = event.target.value + const { form: newForm, validations: newValidations } = configuredServices.find(configuredService => configuredService.name === serviceName && configuredService.template === templateName) + + newForm[fieldName].value = fieldValue + + let tmpValid = newValidations[`${fieldName}Valid`] + const formErrors = { ...newValidations.formErrors } + switch (fieldName) { + default: + tmpValid = fieldValue.length > 0 && /^\S+$/g.test(fieldValue) + formErrors[fieldName] = fieldValue.length > 0 ? (tmpValid ? '' : 'The field is not valid, make sure you are using regular characters') : '' + break + } + const nextValidation = { ...newValidations, formErrors } + nextValidation[`${fieldName}Valid`] = tmpValid + + const newFormValid = Object.keys(nextValidation).findIndex(element => nextValidation[element] === false) === -1 + + setConfiguredServices(configuredServices => { + return [...configuredServices.map(configuredService => { + if (configuredService.name === serviceName && configuredService.template === templateName) { + const { form, validations, validForm, ...rest } = configuredService + const newObject = { + form: newForm, + updatedAt: new Date().toISOString(), + validations: nextValidation, + validForm: newFormValid, + ...rest + } + return newObject + } else { + return configuredService + } + })] + }) + } + return (
@@ -43,12 +148,15 @@ const ConfigureServices = React.forwardRef(({ onNext }, ref) => {

Select a template and plugins for your service from our Stackables Marketplace. Once you have chosen a template you can add another Service.

- +