Feature: Enhancements to run page run-config inputs with new dict, json, yaml inputs

Changelog.md

@@ -4,9 +4,12 @@
 
 ### Features and Improvements
 
+- Rebuilt various inputs responsible for code input (Dict, Json, Yaml) - [#1095](https://github.com/PrefectHQ/ui/pull/1095)
+- Allow users to specify type explicitly for env variables - [#1095](https://github.com/PrefectHQ/ui/pull/1095)
 - When creating/editing schedule, make action button available across tabs - [#1096](https://github.com/PrefectHQ/ui/pull/1096)
 
 ### Bugfixes
+- Rebuilt Run-Config editor to preserve original run_config values, allows resetting fields - [#1095](https://github.com/PrefectHQ/ui/pull/1095)
 - Removed unused locale files from moment dependency - [#1109](https://github.com/PrefectHQ/ui/pull/1109)
 - Moved away from discouraged per-method-packaging of lodash - [#1107](https://github.com/PrefectHQ/ui/pull/1107)
 - Removed unnecessary dependency preventing us from tree shaking highlightjs - [#1108](https://github.com/PrefectHQ/ui/pull/1108) 

package.json

@@ -25,6 +25,7 @@
     "d3-zoom": "^2.0.0",
     "graphiql": "^1.4.1",
     "graphql": "^15.5.0",
+    "highlight.js": "^10.7.2",
     "js-beautify": "^1.13.5",
     "jwt-decode": "^3.1.2",
     "lodash": "^4.17.21",
@@ -44,7 +45,6 @@
     "velocity-animate": ">=1.5.2",
     "vue": "^2.6.12",
     "vue-apollo": "^3.0.7",
-    "vue-code-highlight": "^0.7.6",
     "vue-codemirror": ">=4.0.6",
     "vue-meta": "^2.4.0",
     "vue-router": "^3.5.1",

src/app.js

@@ -37,6 +37,8 @@ import TransitionHeight from '@/components/Functional/Transition-Height'
 import TruncatedSpan from '@/components/Functional/TruncatedSpan'
 import GetCloud from '@/components/GetCloud'
 
+import '@/styles/atelier-sulphurpool-light.scss'
+
 // Prefect icon font
 import '@/assets/fonts/prefect-icons/style.scss'
 
@@ -72,8 +74,7 @@ Vue.prototype.$globalApolloQueries = {}
 
 // Vue Global Error Handler
 Vue.config.errorHandler = function(error, vm, trace) {
-  if (error?.message?.includes("Cannot read property '_observe' of null"))
-    return
+  if (error?.message?.includes("'_observe'")) return
   if (process.env.NODE_ENV === 'development')
     // eslint-disable-next-line no-console
     console.log('Vue Global Error Handler', { error, vm, trace })
@@ -82,8 +83,7 @@ Vue.config.errorHandler = function(error, vm, trace) {
 }
 
 Vue.config.warnHandler = function(error, vm, trace) {
-  if (error?.message?.includes("Cannot read property '_observe' of null"))
-    return
+  if (error?.message?.includes("'_observe'")) return
   if (process.env.NODE_ENV === 'development')
     // eslint-disable-next-line no-console
     console.log('Vue Global Warn Handler', { error, vm, trace })

src/components/CustomInputs/BaseCodeTextarea.vue

@@ -0,0 +1,173 @@
+<template>
+  <div class="base-code-textarea">
+    <v-textarea
+      v-model="internalValue"
+      class="base-code-textarea__textarea"
+      spellcheck="false"
+      :error-messages="errors"
+      :disabled="readonly"
+      :placeholder="placeholder"
+      auto-grow
+      outlined
+      @input="validate"
+      @blur="handleBlur"
+    >
+      <template #append>
+        <highlight
+          :language="language"
+          :code="internalValue"
+          class="base-code-textarea__preview"
+        />
+        <span
+          class="base-code-textarea__language"
+          :class="`base-code-textarea__language-${language}`"
+          >{{ language }}</span
+        >
+      </template>
+      <template #message="{message}">
+        <p style="white-space: pre-line">
+          {{ message }}
+        </p>
+      </template>
+    </v-textarea>
+  </div>
+</template>
+
+<script>
+import Highlight from '@/components/CustomInputs/Highlight'
+
+export default {
+  name: 'BaseCodeTextarea',
+  components: {
+    Highlight
+  },
+  props: {
+    value: {
+      type: String,
+      required: false,
+      default: null
+    },
+    readonly: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    language: {
+      type: String,
+      required: true,
+      validator: value => ['json', 'yaml'].includes(value)
+    },
+    placeholder: {
+      type: String,
+      required: false,
+      default: null
+    },
+    getErrors: {
+      type: Function,
+      required: true
+    },
+    parse: {
+      type: Function,
+      required: true
+    },
+    format: {
+      type: Function,
+      required: true
+    }
+  },
+  data() {
+    return {
+      errors: []
+    }
+  },
+  computed: {
+    internalValue: {
+      get() {
+        return this.value
+      },
+      set(value) {
+        this.$emit('input', value)
+      }
+    }
+  },
+  created() {
+    if (this.internalValue) {
+      this.validate(this.internalValue)
+    }
+  },
+  methods: {
+    handleBlur() {
+      const objectValue = this.parse(this.internalValue)
+      const formatted = this.format(objectValue)
+
+      if (formatted != null) {
+        this.internalValue = formatted
+      }
+    },
+    validate(value) {
+      this.errors = this.getErrors(value)
+
+      return this.errors.length === 0
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.base-code-textarea {
+  .v-input__append-inner {
+    position: absolute;
+    margin: 0;
+    padding: 0;
+    width: 50%;
+    right: 2px;
+    top: 2px;
+    bottom: 2px;
+  }
+
+  .v-input__control {
+    padding: 0;
+  }
+
+  .base-code-textarea__textarea .v-text-field__slot {
+    width: 50%;
+    margin-bottom: 4px;
+    flex-grow: 0 !important;
+  }
+
+  .base-code-textarea__preview {
+    color: #666666;
+    width: 100%;
+    word-wrap: break-word;
+    white-space: pre-wrap;
+
+    code {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      padding-top: 10px;
+      padding-bottom: 8px;
+      font-family: monospace, monospace;
+      font-size: 13px;
+      line-height: 13px;
+    }
+  }
+
+  .base-code-textarea__language {
+    position: absolute;
+    bottom: 5px;
+    right: 5px;
+    text-transform: uppercase;
+  }
+
+  .base-code-textarea__language-json {
+    color: rgba(76, 175, 80, 0.35);
+  }
+
+  .base-code-textarea__language-yaml {
+    color: rgba(255, 152, 0, 0.35);
+  }
+}
+</style>

src/components/CustomInputs/BaseDictInput.vue

@@ -0,0 +1,132 @@
+<template>
+  <div class="base-dict-input">
+    <div
+      v-for="(entry, index) in entries"
+      :key="index"
+      class="base-dict-input__row"
+    >
+      <slot name="before-existing" :entry="entry" />
+      <key-value-input
+        ref="existingPropertyForms"
+        :value="entry"
+        :readonly-key="readonlyKey"
+        :readonly-type="readonlyType"
+        :readonly-value="readonlyValue"
+        :show-types="showTypes"
+        :types="types"
+        @input="$emit('update', [$event, entry])"
+      />
+      <slot name="after-existing" :entry="entry" />
+      <v-btn
+        v-if="!disableRemove"
+        class="base-dict-input__action"
+        icon
+        @click="$emit('remove', entry)"
+      >
+        <v-icon color="red">remove_circle</v-icon>
+      </v-btn>
+    </div>
+    <div
+      v-if="!disableAdd"
+      ref="newPropertyContainer"
+      class="base-dict-input__row base-dict-input__row-last"
+    >
+      <slot name="before-new" :entry="newProperty" />
+      <key-value-input
+        ref="newPropertyForm"
+        v-model="newProperty"
+        :show-types="showTypes"
+        :types="types"
+        @focusout.native="handleFocusout"
+      />
+      <slot name="after-new" :entry="newProperty">
+        <v-btn class="base-dict-input__action" icon @click="tryAddNewProperty">
+          <v-icon color="green">add_circle</v-icon>
+        </v-btn>
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script>
+import KeyValueInput from '@/components/CustomInputs/KeyValueInput'
+import readonlyProps from '@/components/CustomInputs/readonlyProps'
+import { types, isValidType } from '@/utils/types'
+
+export default {
+  name: 'BaseDictInput',
+  components: {
+    KeyValueInput
+  },
+  props: {
+    entries: {
+      type: Array,
+      required: false,
+      default: null
+    },
+    showTypes: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    types: {
+      type: Array,
+      required: false,
+      default: () => types,
+      validator: value => value.every(isValidType)
+    },
+    ...readonlyProps
+  },
+  data() {
+    return {
+      newProperty: { key: null, value: null }
+    }
+  },
+  methods: {
+    handleFocusout(event) {
+      const target = event.relatedTarget
+
+      if (
+        !this.$refs.newPropertyContainer.contains(target) &&
+        this.newProperty.key != null
+      ) {
+        this.tryAddNewProperty()
+      }
+    },
+    tryAddNewProperty() {
+      if (!this.$refs.newPropertyForm.validate()) {
+        return false
+      }
+
+      this.$emit('add', this.newProperty)
+      this.$refs.newPropertyForm.reset()
+      return true
+    },
+    validate() {
+      if (!this.$refs.existingPropertyForms) {
+        return true
+      }
+
+      return this.$refs.existingPropertyForms.every(form => form.validate())
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.base-dict-input__row {
+  display: flex;
+}
+
+.base-dict-input__row-last:not(:focus-within) {
+  opacity: 0.5;
+}
+
+.key-value-input {
+  flex-grow: 1;
+}
+
+.base-dict-input__action {
+  flex-grow: 0;
+}
+</style>