when creating/editing schedule, make action button available across tabs

Changelog.md

@@ -4,6 +4,7 @@
 
 ### Features and Improvements
 
+- When creating/editing schedule, make action button available across tabs - [#1096](https://github.com/PrefectHQ/ui/pull/1096)
 - Add warning that users will be locked out if not part of a team - [#1078](https://github.com/PrefectHQ/ui/pull/1078)
 - Update the PagerDuty logo to match new branding - [#1073](https://github.com/PrefectHQ/ui/pull/1073)
 

src/pages/Flow/Settings/ClockForm.vue

@@ -4,6 +4,8 @@
 import CronForm from '@/pages/Flow/Settings/ClockForms/Cron'
 import IntervalForm from '@/pages/Flow/Settings/ClockForms/Interval'
 import SimpleForm from '@/pages/Flow/Settings/ClockForms/Simple'
+import DictInput from '@/components/CustomInputs/DictInput'
+
 import moment from 'moment-timezone'
 
 const timezones = [...moment.tz.names()].map(tz => {
@@ -14,9 +16,20 @@ export default {
   components: {
     CronForm,
     IntervalForm,
-    SimpleForm
+    SimpleForm,
+    DictInput
   },
   props: {
+    defaultParameters: {
+      type: Array,
+      required: false,
+      default: () => {}
+    },
+    selectedTab: {
+      type: [Number, String],
+      required: true,
+      default: () => 0
+    },
     clock: {
       type: Object,
       required: false,
@@ -45,7 +58,7 @@ export default {
       default: () => null
     },
     param: {
-      type: Object,
+      type: [Object, Array],
       required: false,
       default: () => null
     },
@@ -73,10 +86,20 @@ export default {
       cronModel: this.cron,
       intervalModel: this.interval,
       simpleModel: this.clock.cron || this.clock.interval || '0 * * * *',
-      valid: true
+      valid: true,
+      parameter: {}
     }
   },
   computed: {
+    allDefaultParameters() {
+      if (!this.defaultParameters) return {}
+
+      const paramObj = this.defaultParameters.reduce(
+        (obj, item) => ((obj[item.name] = item.default), obj),
+        {}
+      )
+      return this.paramVal(paramObj)
+    },
     clockToAdd() {
       return this.advanced ? `${this.advancedType}Model` : 'simpleModel'
     },
@@ -87,6 +110,33 @@ export default {
     }
   },
   methods: {
+    paramVal(clock) {
+      if (!clock) {
+        return
+      }
+      let parameters = []
+
+      for (const [key, value] of Object.entries(clock)) {
+        parameters.push({ key: key, value: value, disabled: true })
+      }
+      return parameters
+    },
+    checkDefaultParameters(parameterObj) {
+      return Object.values(parameterObj).length > 0
+    },
+    removeDoubleParam(clock) {
+      if (clock && this.allDefaultParameters.length !== 0) {
+        return Object.values(
+          [...this.allDefaultParameters, ...this.paramVal(clock)]
+            .reverse()
+            .reduce((r, c) => ((r[c.key] = r[c.key] || c), r), {})
+        )
+      }
+
+      if (this.allDefaultParameters.length !== 0) {
+        return this.allDefaultParameters
+      }
+    },
     cancel() {
       this.$emit('cancel')
     },
@@ -109,7 +159,7 @@ export default {
         [clockType == 'IntervalClock' ? 'interval' : 'cron']: this[
           this.clockToAdd
         ],
-        parameter_defaults: this.param ? parseObject(this.param) : {},
+        parameter_defaults: this.parameter ? parseObject(this.parameter) : {},
         timezone: this.advanced
           ? this.selectedTimezone
           : this.simpleSelectedTimezone
@@ -121,120 +171,151 @@ export default {
 </script>
 
 <template>
-  <v-container
-    class="d-flex flex-column align-start justify-start"
-    style="height: 100%;
-    width: 100%;"
-  >
-    <div class="d-flex justify-end mb-1" style="width: 100%;">
-      <v-switch
-        v-model="advanced"
-        inset
-        label="Advanced"
-        class="mt-0"
-        hide-details
-      ></v-switch>
-    </div>
-    <v-card-text
-      style="max-height: fill;
-      overflow: auto;"
+  <div>
+    <div
+      class="d-flex flex-column align-start justify-start"
+      style="height: 100%;width: 100%;"
     >
-      <v-fade-transition mode="out-in">
-        <div
-          v-if="advanced"
-          key="1"
-          class="mt-4 d-block"
-          style="max-width: 100%;"
-        >
-          <v-chip-group v-model="advancedType" column mandatory>
-            <v-chip
-              v-for="type in advancedTypes"
-              :key="type"
-              active-class="primary"
-              class="px-6 text-capitalize"
-              label
-              :value="type"
-            >
-              {{ type }}
-            </v-chip>
-          </v-chip-group>
-
-          <v-fade-transition mode="out-in">
-            <div v-if="advancedType == 'cron'" key="Cron">
-              <CronForm v-model="cronModel" :valid.sync="valid" class="mt-2" />
-              <v-autocomplete
-                v-model="selectedTimezone"
-                :items="tzs"
-                outlined
-                label="Time Zone"
-                style="margin-top: 110px;"
-                prepend-inner-icon="access_time"
-                :menu-props="{ contentClass: 'tz' }"
-              />
+      <div class="d-flex justify-end mt-2" style="width: 100%;">
+        <v-switch
+          v-show="selectedTab === 0"
+          v-model="advanced"
+          inset
+          label="Advanced"
+          class="mt-0"
+          hide-details
+        ></v-switch>
+      </div>
 
-              <v-alert
-                v-if="flowGroupClocks.length > 0"
-                border="left"
-                colored-border
-                elevation="0"
-                type="warning"
-                dense
-                icon="warning"
+      <v-card-text
+        v-show="selectedTab === 0"
+        style="max-height: fill;
+      overflow: auto;"
+      >
+        <v-fade-transition mode="out-in">
+          <div
+            v-if="advanced"
+            key="1"
+            class="mt-4 d-block"
+            style="max-width: 100%;"
+          >
+            <v-chip-group v-model="advancedType" column mandatory>
+              <v-chip
+                v-for="type in advancedTypes"
+                :key="type"
+                active-class="primary"
+                class="px-6 text-capitalize"
+                label
+                :value="type"
               >
-                <span class="text-body-2 ma-0">
-                  Setting the timezone here will take precedence over existing
-                  flow group schedule timezones
-                </span>
-              </v-alert>
-            </div>
-            <div v-else-if="advancedType == 'interval'" key="Interval">
-              <IntervalForm v-model="intervalModel" class="mt-4" />
-            </div>
-          </v-fade-transition>
-        </div>
-        <div v-else key="2" class="mt-4 d-block" style="max-width: 100%;">
-          <SimpleForm v-model="simpleModel" />
+                {{ type }}
+              </v-chip>
+            </v-chip-group>
+            <v-fade-transition mode="out-in">
+              <div v-if="advancedType == 'cron'" key="Cron">
+                <CronForm
+                  v-model="cronModel"
+                  :valid.sync="valid"
+                  class="mt-2"
+                />
+                <v-autocomplete
+                  v-model="selectedTimezone"
+                  :items="tzs"
+                  outlined
+                  label="Time Zone"
+                  style="margin-top: 110px;"
+                  prepend-inner-icon="access_time"
+                  :menu-props="{ contentClass: 'tz' }"
+                />
+                <v-alert
+                  v-if="flowGroupClocks.length > 0"
+                  border="left"
+                  colored-border
+                  elevation="0"
+                  type="warning"
+                  dense
+                  icon="warning"
+                >
+                  <span class="text-body-2 ma-0">
+                    Setting the timezone here will take precedence over existing
+                    flow group schedule timezones
+                  </span>
+                </v-alert>
+              </div>
+              <div v-else-if="advancedType == 'interval'" key="Interval">
+                <IntervalForm v-model="intervalModel" class="mt-4" />
+              </div>
+            </v-fade-transition>
+          </div>
+          <div v-else key="2" class="mt-4 d-block" style="max-width: 100%;">
+            <SimpleForm v-model="simpleModel" />
+            <v-autocomplete
+              v-if="typeof simpleModel !== 'number'"
+              v-model="simpleSelectedTimezone"
+              :items="tzs"
+              outlined
+              label="Time Zone"
+              prepend-inner-icon="access_time"
+              :menu-props="{ contentClass: 'tz' }"
+            />
+            <v-alert
+              v-if="flowGroupClocks.length > 0"
+              border="left"
+              colored-border
+              elevation="0"
+              type="warning"
+              dense
+              icon="warning"
+            >
+              <span class="text-body-2 ma-0">
+                Setting the timezone here will take precedence over existing
+                flow group schedule timezones
+              </span>
+            </v-alert>
+          </div>
+        </v-fade-transition>
+      </v-card-text>
+    </div>
+
+    <div v-show="selectedTab === 1">
+      <div
+        v-if="!checkDefaultParameters(allDefaultParameters)"
+        class="mt-8 text-body-1"
+      >
+        This flow has no default parameters.
+      </div>
 
-          <v-autocomplete
-            v-if="typeof simpleModel !== 'number'"
-            v-model="simpleSelectedTimezone"
-            :items="tzs"
-            outlined
-            label="Time Zone"
-            prepend-inner-icon="access_time"
-            :menu-props="{ contentClass: 'tz' }"
-          />
+      <div v-else>
+        <p class="mt-8 text-body-1">
+          Checked parameters will override their corresponding defaults for runs
+          generated from this schedule.
+        </p>
 
-          <v-alert
-            v-if="flowGroupClocks.length > 0"
-            border="left"
-            colored-border
-            elevation="0"
-            type="warning"
-            dense
-            icon="warning"
-          >
-            <span class="text-body-2 ma-0">
-              Setting the timezone here will take precedence over existing flow
-              group schedule timezones
-            </span>
-          </v-alert>
-        </div>
-      </v-fade-transition>
-    </v-card-text>
+        <DictInput
+          v-model="parameter"
+          style="padding: 20px;"
+          :dict="removeDoubleParam(param)"
+          :default-checked-keys="
+            Object.keys(param ? param : allDefaultParameters)
+          "
+          include-checkbox
+          disable-edit
+          allow-reset
+        />
+      </div>
+    </div>
 
     <div
       style="
       bottom: 0;
-      padding: 20px;
+      padding: 15px;
       position: absolute;
       right: 0;
       "
     >
       <v-btn depressed class="mx-1" @click.stop="cancel">
         Cancel
       </v-btn>
-
       <v-btn
         depressed
         class="mx-1"
@@ -245,7 +326,7 @@ export default {
         {{ createOrSave }}
       </v-btn>
     </div>
-  </v-container>
+  </div>
 </template>
 
 <style>