diff --git a/src/components/DeploymentScheduleMenu.vue b/src/components/DeploymentScheduleMenu.vue index 337897c6b..0df944db7 100644 --- a/src/components/DeploymentScheduleMenu.vue +++ b/src/components/DeploymentScheduleMenu.vue @@ -8,9 +8,9 @@ @@ -52,8 +52,6 @@ const scheduleFormModalRef = ref(null) - const parameters = computed(() => props.schedule.parameters ?? {}) - const openEditModal = (): void => { scheduleFormModalRef.value?.publicOpen?.() } diff --git a/src/components/DeploymentSchedulesFieldset.vue b/src/components/DeploymentSchedulesFieldset.vue index b2379a2c7..3f08bce67 100644 --- a/src/components/DeploymentSchedulesFieldset.vue +++ b/src/components/DeploymentSchedulesFieldset.vue @@ -9,7 +9,8 @@ :active="null" :schedule="null" :job-variables="{}" - :parameters="{}" + :deployment-parameters="deployment.parameters" + :schedule-parameters="{}" :parameter-open-api-schema="deployment.parameterOpenApiSchema" @submit="createSchedule" > diff --git a/src/components/ScheduleFieldset.vue b/src/components/ScheduleFieldset.vue index fc09520a1..00378df52 100644 --- a/src/components/ScheduleFieldset.vue +++ b/src/components/ScheduleFieldset.vue @@ -10,7 +10,8 @@ :active="null" :schedule="internalValue" :job-variables="{}" - :parameters="{}" + :deployment-parameters="{}" + :schedule-parameters="{}" :parameter-open-api-schema="{}" @submit="updateSchedule" > diff --git a/src/components/ScheduleFormModal.vue b/src/components/ScheduleFormModal.vue index 946c3ef94..88b73839c 100644 --- a/src/components/ScheduleFormModal.vue +++ b/src/components/ScheduleFormModal.vue @@ -40,7 +40,7 @@ - + @@ -59,15 +59,23 @@ import IntervalScheduleForm from '@/components/IntervalScheduleForm.vue' import { useCan, useShowModal } from '@/compositions' import { localization } from '@/localization' - import { CronSchedule, DeploymentScheduleCompatible, IntervalSchedule, Schedule, ScheduleType, getScheduleType, isCronSchedule, isIntervalSchedule } from '@/models' + import { + CronSchedule, + DeploymentScheduleCompatible, + IntervalSchedule, + Schedule, + ScheduleType, + getScheduleType, + isCronSchedule, + isIntervalSchedule + } from '@/models' import { SchemaInputV2, SchemaV2, SchemaValuesV2 } from '@/schemas' import { useSchemaValidation } from '@/schemas/compositions/useSchemaValidation' import { isEmptyObject, omit, stringify } from '@/utilities' import { ButtonGroupOption } from '@prefecthq/prefect-design' import { useValidationObserver } from '@prefecthq/vue-compositions' import merge from 'lodash.merge' - import { computed, ref, watch } from 'vue' - + import { computed, reactive, ref, watch } from 'vue' defineOptions({ inheritAttrs: false, @@ -85,7 +93,8 @@ active: boolean | null, schedule: Schedule | null, jobVariables: Record | undefined, - parameters: SchemaValuesV2, + deploymentParameters: SchemaValuesV2, + scheduleParameters?: SchemaValuesV2 | null, parameterOpenApiSchema: SchemaV2, }>() @@ -94,41 +103,59 @@ const internalActive = ref(props.active ?? true) const { validate } = useValidationObserver() - const internalJobVariables = ref(props.jobVariables ? stringify(props.jobVariables) : undefined) + const internalJobVariables = ref( + props.jobVariables ? stringify(props.jobVariables) : undefined, + ) const emit = defineEmits<{ (event: 'submit', value: DeploymentScheduleCompatible): void, }>() // Parameters-related refs and compositions - const selectedProperties = ref(Object.keys(props.parameters)) - const properties = computed(() => props.parameterOpenApiSchema.properties ?? {}) + const internalParameters = ref(props.scheduleParameters ?? { }) + const selectedProperties = ref(Object.keys(internalParameters.value)) + const properties = computed( + () => props.parameterOpenApiSchema.properties ?? {}, + ) const propertyNames = computed(() => Object.keys(properties.value)) - const propertiesToOmit = computed(() => propertyNames.value.filter(name => !selectedProperties.value.includes(name))) + const propertiesToOmit = computed(() => propertyNames.value.filter( + (name) => !selectedProperties.value.includes(name), + ), + ) const internalSchema = computed(() => { - return { ...props.parameterOpenApiSchema, required: [], properties: omit(properties.value, propertiesToOmit.value) } + return { + ...props.parameterOpenApiSchema, + required: [], + properties: omit(properties.value, propertiesToOmit.value), + } }) - const internalParameters = ref() // Reset values to the initial values when the modal is opened watch(showModal, () => { if (showModal.value) { - internalParameters.value = {} - selectedProperties.value = [] + internalParameters.value = props.scheduleParameters ?? { } + selectedProperties.value = Object.keys(internalParameters.value) } }) // When the properties to omit change, we need add/remove properties to stay in sync watch(propertiesToOmit, () => { const newParameters = omit(internalParameters.value, propertiesToOmit.value) - const partialDefaultParameters = omit(props.parameters, propertiesToOmit.value) + const partialDefaultParameters = omit( + props.deploymentParameters, + propertiesToOmit.value, + ) internalParameters.value = merge(partialDefaultParameters, newParameters) }) - const schemaHasParameters = computed(() => !isEmptyObject(props.parameterOpenApiSchema.properties)) - - const { errors, validate: validateParameters } = useSchemaValidation(internalSchema, internalParameters) + const schemaHasParameters = computed( + () => !isEmptyObject(props.parameterOpenApiSchema.properties), + ) + const { errors, validate: validateParameters } = useSchemaValidation( + internalSchema, + internalParameters, + ) async function submit(schedule: Schedule | null): Promise { const valid = await validate() @@ -147,10 +174,14 @@ if (!can.access.deploymentScheduleFlowRunInfraOverrides) { jobVariables = undefined } else { - jobVariables = internalJobVariables.value ? JSON.parse(internalJobVariables.value) : undefined + jobVariables = internalJobVariables.value + ? JSON.parse(internalJobVariables.value) + : undefined } - const parameters = isEmptyObject(internalParameters.value) ? undefined : internalParameters.value + const parameters = isEmptyObject(internalParameters.value) + ? undefined + : internalParameters.value const deploymentSchedule: DeploymentScheduleCompatible = { active: internalActive.value, @@ -166,9 +197,11 @@ const cronDisabled = ref(false) const intervalDisabled = ref(false) const disabled = computed(() => { - return scheduleForm.value === 'rrule' || + return ( + scheduleForm.value === 'rrule' || scheduleForm.value === 'cron' && cronDisabled.value || scheduleForm.value === 'interval' && intervalDisabled.value + ) }) const submitCurrentForm = async (): Promise => { @@ -187,16 +220,32 @@ await submit(schedule) } - const cronSchedule = ref(isCronSchedule(props.schedule) ? props.schedule : undefined) - const intervalSchedule = ref(isIntervalSchedule(props.schedule) ? props.schedule : undefined) - const scheduleForm = ref(getScheduleType(props.schedule) ?? 'interval') - const scheduleFormOptions: ButtonGroupOption[] = [{ label: 'Interval', value: 'interval' }, { label: 'Cron', value: 'cron' }, { label: 'RRule', value: 'rrule' }] + const cronSchedule = ref( + isCronSchedule(props.schedule) ? props.schedule : undefined, + ) + const intervalSchedule = ref( + isIntervalSchedule(props.schedule) ? props.schedule : undefined, + ) + const scheduleForm = ref( + getScheduleType(props.schedule) ?? 'interval', + ) + const scheduleFormOptions: ButtonGroupOption[] = [ + { label: 'Interval', value: 'interval' }, + { label: 'Cron', value: 'cron' }, + { label: 'RRule', value: 'rrule' }, + ] const updateInternalState = (): void => { - cronSchedule.value = isCronSchedule(props.schedule) ? props.schedule : undefined - intervalSchedule.value = isIntervalSchedule(props.schedule) ? props.schedule : undefined + cronSchedule.value = isCronSchedule(props.schedule) + ? props.schedule + : undefined + intervalSchedule.value = isIntervalSchedule(props.schedule) + ? props.schedule + : undefined internalActive.value = props.active ?? true - internalJobVariables.value = props.jobVariables ? stringify(props.jobVariables) : undefined + internalJobVariables.value = props.jobVariables + ? stringify(props.jobVariables) + : undefined } watch(() => props.schedule, updateInternalState)