Merge pull request #2558 from PrefectHQ/remove-validation-checkboxes

Disable validation checkboxes from parameter forms when `enforce_parameter_schema` is enabled
PrefectHQ · Jun 27, 2024 · 99f04c3 · 99f04c3
2 parents f276d01 + dd6469d
commit 99f04c3
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 10 deletions.
diff --git a/src/components/DeploymentFormV2.vue b/src/components/DeploymentFormV2.vue
@@ -47,8 +47,6 @@
           </div>
         </template>
       </SchemaInputV2>
-
-      <p-checkbox v-model="shouldValidateParameters" label="Validate parameters before saving" />
     </template>
 
     <p-label label="Enforce Parameter Schema">
@@ -99,7 +97,6 @@
   const tags = ref(props.deployment.tags)
   const jobVariables = ref(stringify(props.deployment.jobVariables))
   const enforceParameterSchema = ref(props.deployment.enforceParameterSchema)
-  const shouldValidateParameters = ref(true)
 
   const schema = computed(() => {
     return { ...props.deployment.parameterOpenApiSchema, required: [] }
@@ -123,7 +120,7 @@
       return
     }
 
-    if (shouldValidateParameters.value) {
+    if (enforceParameterSchema.value) {
       try {
         const valid = await validateParameters()
 

diff --git a/src/components/FlowRunCreateFormV2.vue b/src/components/FlowRunCreateFormV2.vue
@@ -21,7 +21,20 @@
             </template>
           </SchemaInputV2>
 
-          <p-checkbox v-model="shouldValidate" label="Validate parameters before submitting" />
+          <template v-if="disableValidationCheckbox">
+            <p-tooltip>
+              <template #content>
+                <p>Parameters are always validated for deployments with parameter enforcement enabled.</p>
+                <p>You can disable this setting on <span><p-link :to="routes.deploymentEdit(deployment.id)">the deployment</p-link></span></p>
+              </template>
+              <div class="w-fit">
+                <p-checkbox v-model="shouldValidate" disabled label="Validate parameters before submitting" />
+              </div>
+            </p-tooltip>
+          </template>
+          <template v-else>
+            <p-checkbox v-model="shouldValidate" label="Validate parameters before submitting" />
+          </template>
         </p-content>
       </template>
 
@@ -85,6 +98,7 @@
   import FlowRunJobVariableOverridesLabeledInput from '@/components/FlowRunJobVariableOverridesLabeledInput.vue'
   import FlowRunNameInput from '@/components/FlowRunNameInput.vue'
   import ToastParameterValidationError from '@/components/ToastParameterValidationError.vue'
+  import { useWorkspaceRoutes } from '@/compositions/useWorkspaceRoutes'
   import { localization } from '@/localization'
   import { Deployment } from '@/models/Deployment'
   import { DeploymentFlowRunCreateV2 } from '@/models/DeploymentFlowRunCreate'
@@ -106,6 +120,8 @@
     (event: 'cancel'): void,
   }>()
 
+  const routes = useWorkspaceRoutes()
+  const disableValidationCheckbox = props.deployment.enforceParameterSchema
   const shouldValidate = ref(true)
   const schema = computed(() => props.deployment.parameterOpenApiSchema)
   const hasParameters = computed(() => !isEmptyObject(props.deployment.parameterOpenApiSchema.properties ?? {}))

diff --git a/src/components/QuickRunParametersModal.vue b/src/components/QuickRunParametersModal.vue
@@ -1,6 +1,13 @@
 <template>
   <p-modal v-model:showModal="internalShowModal" class="quick-run-parameters-modal-v2" title="Run Deployment">
-    <SchemaFormV2 :id="formId" v-model:values="parameters" :schema="deployment.parameterOpenApiSchema" :kinds="['json', 'workspace_variable']" @submit="submit">
+    <SchemaFormV2
+      :id="formId"
+      v-model:values="parameters"
+      :schema="deployment.parameterOpenApiSchema"
+      :validate
+      :kinds="['json', 'workspace_variable']"
+      @submit="submit"
+    >
       <template #default="{ kind, setKind }">
         <div class="quick-run-parameters-modal-v2__header">
           <h3>{{ localization.info.parameters }}</h3>
@@ -10,6 +17,23 @@
           </p-icon-button-menu>
         </div>
       </template>
+
+      <template #after-content>
+        <template v-if="disableValidationCheckbox">
+          <p-tooltip>
+            <template #content>
+              <p>Parameters are always validated for deployments with parameter enforcement enabled.</p>
+              <p>You can disable this setting on <span><p-link :to="routes.deploymentEdit(deployment.id)">the deployment</p-link></span></p>
+            </template>
+            <div class="w-fit">
+              <p-checkbox v-model="validate" disabled label="Validate parameters before submitting" />
+            </div>
+          </p-tooltip>
+        </template>
+        <template v-else>
+          <p-checkbox v-model="validate" label="Validate parameters before submitting" />
+        </template>
+      </template>
     </SchemaFormV2>
 
     <template #actions>
@@ -47,6 +71,8 @@
     (event: 'update:showModal', value: boolean): void,
   }>()
 
+  const disableValidationCheckbox = props.deployment.enforceParameterSchema
+  const validate = ref(true)
   const parameters = ref<SchemaValuesV2>({ ...props.deployment.parameters })
 
   const internalShowModal = computed({

diff --git a/src/schemas/components/SchemaForm.vue b/src/schemas/components/SchemaForm.vue
@@ -9,7 +9,7 @@
         </SchemaInput>
       </template>
 
-      <p-checkbox v-model="shouldValidate" label="Validate parameters before submitting" />
+      <slot name="after-content" />
     </p-content>
   </p-form>
 </template>
@@ -28,6 +28,7 @@
     values: SchemaValues,
     kinds: PrefectKind[],
     loading?: boolean | null,
+    validate?: boolean,
   }>(), {
     loading: null,
   })
@@ -40,10 +41,9 @@
 
   defineSlots<{
     default: (props: { kind: PrefectKind, setKind: (to: PrefectKind) => void }) => VNode,
+    'after-content': (props: {}) => VNode,
   }>()
 
-  const shouldValidate = ref(true)
-
   const values = computed({
     get() {
       return props.values
@@ -70,7 +70,7 @@
     loading.value = true
 
     try {
-      if (shouldValidate.value) {
+      if (props.validate) {
 
         const valid = await validate()