From da7cd4812d9bf9baf3c4623122d827a84aff2838 Mon Sep 17 00:00:00 2001
From: Evan Sutherland <stackoverfloweth@gmail.com>
Date: Thu, 28 Oct 2021 16:01:33 -0500
Subject: [PATCH 1/5] implemented new custom inputs in automations dashboard
 and pager-duty integration

---
 src/pages/Dashboard/Automations/AddAction.vue | 21 +++++++-----------
 src/pages/Integrations/PagerDuty.vue          | 22 ++++++++++++-------
 2 files changed, 22 insertions(+), 21 deletions(-)

diff --git a/src/pages/Dashboard/Automations/AddAction.vue b/src/pages/Dashboard/Automations/AddAction.vue
index 941548d9a..fc96f4f77 100644
--- a/src/pages/Dashboard/Automations/AddAction.vue
+++ b/src/pages/Dashboard/Automations/AddAction.vue
@@ -2,8 +2,8 @@
 import { actionTypes, jsonPlacehold } from '@/utils/automations'
 import { mapGetters } from 'vuex'
 import ListInput from '@/components/CustomInputs/ListInput'
-import JsonInput from '@/components/CustomInputs/JsonInput'
-import jsBeautify from 'js-beautify'
+import JsonInput from '@/components/CustomInputs/JsonInput2'
+import { formatJson, isValidJson } from '@/utils/json'
 
 export default {
   components: {
@@ -43,7 +43,6 @@ export default {
       accountSid: '',
       apiToken: '',
       jsonPayload: null,
-      validJson: true,
       routingKey: '',
       webhookURLString: null,
       severity: '',
@@ -220,6 +219,9 @@ export default {
     },
     isMSTeams() {
       return this.actionType.type === 'MS_TEAMS'
+    },
+    validJson() {
+      return isValidJson(this.jsonPayload)
     }
     // needsNext() {
     //   if (
@@ -243,7 +245,7 @@ export default {
   methods: {
     jsonPlaceholder() {
       this.jsonPlacehold.message = this.messagePlaceholder
-      return jsBeautify(JSON.stringify(this.jsonPlacehold))
+      return formatJson(this.jsonPlacehold)
     },
     buttonColor(selectedStep) {
       return this.step.name === selectedStep ? 'codePink' : 'utilGrayDark'
@@ -262,9 +264,6 @@ export default {
         this.steps['openMessageText'].complete = true
       this.step = this.steps[selectedStep]
     },
-    handleJsonValidation(event) {
-      this.validJson = !event
-    },
     handleNext() {
       if (this.step.name === 'openMessageText') {
         this.steps['openMessageText'].complete = true
@@ -646,14 +645,10 @@ export default {
           @keydown.enter="saveMessage"
         />
 
-        <JsonInput
+        <json-input
           v-else
           v-model="jsonPayload"
-          selected-type="json"
-          skip-required
-          add-corners
-          :placeholder-text="jsonPlaceholder()"
-          @invalid-secret="handleJsonValidation"
+          :placeholder="jsonPlaceholder()"
         />
       </div>
     </v-card-text>
diff --git a/src/pages/Integrations/PagerDuty.vue b/src/pages/Integrations/PagerDuty.vue
index b6404c299..4ff56ab62 100644
--- a/src/pages/Integrations/PagerDuty.vue
+++ b/src/pages/Integrations/PagerDuty.vue
@@ -1,6 +1,7 @@
 <script>
 import { mapActions, mapGetters } from 'vuex'
-import DictInput from '@/components/CustomInputs/DictInput'
+import DictInput from '@/components/CustomInputs/DictInput2'
+import { formatJson } from '@/utils/json'
 
 export default {
   components: { DictInput },
@@ -113,6 +114,9 @@ export default {
       const input = { name: name, config }
       this.createAction(input)
     },
+    formatItemValue(item) {
+      return formatJson(item?.action_config)
+    },
     async createAction(input) {
       let success
       try {
@@ -204,10 +208,10 @@ export default {
         </div>
       </div>
       <div
-        class="text-center"
         v-else-if="
           integrationKeys && integrationKeys.length === successIds.length
         "
+        class="text-center"
       >
         <v-data-table
           fixed-header
@@ -246,17 +250,19 @@ export default {
           </template>
 
           <!-- ACTION CONFIG -->
-          <template v-slot:expanded-item="{ headers, item }">
+          <template #expanded-item="{ headers, item }">
             <td
               v-if="Object.keys(item.action_config).length"
               :colspan="headers.length"
             >
-              <DictInput
+              <dict-input
                 v-if="Object.keys(item.action_config).length"
-                :disableEdit="true"
-                disabled
-                :dict="item.action_config"
-                :rules="[1, 2]"
+                class="mt-3"
+                readonly-key
+                readonly-value
+                disable-add
+                disable-remove
+                :value="formatItemValue(item)"
               />
             </td>
             <td v-else :colspan="headers.length">

From 7395752d5b91df5bd9006ad5e90ebe1bc73a75b5 Mon Sep 17 00:00:00 2001
From: Evan Sutherland <stackoverfloweth@gmail.com>
Date: Thu, 28 Oct 2021 16:05:11 -0500
Subject: [PATCH 2/5] implemented new custom inputs in team-settings

---
 src/pages/TeamSettings/Actions.vue |  21 ++-
 src/pages/TeamSettings/KV.vue      | 278 ++++++++---------------------
 src/pages/TeamSettings/Secrets.vue | 105 ++---------
 3 files changed, 98 insertions(+), 306 deletions(-)

diff --git a/src/pages/TeamSettings/Actions.vue b/src/pages/TeamSettings/Actions.vue
index 0bc31991f..62ec32f47 100644
--- a/src/pages/TeamSettings/Actions.vue
+++ b/src/pages/TeamSettings/Actions.vue
@@ -5,7 +5,9 @@ import Alert from '@/components/Alert'
 import ConfirmDialog from '@/components/ConfirmDialog'
 import ExternalLink from '@/components/ExternalLink'
 import ManagementLayout from '@/layouts/ManagementLayout'
-import DictInput from '@/components/CustomInputs/DictInput'
+import DictInput from '@/components/CustomInputs/DictInput2'
+import { formatJson } from '@/utils/json'
+
 export default {
   components: {
     Alert,
@@ -122,7 +124,9 @@ export default {
       this.alertMessage = message
       this.alertShow = true
     },
-
+    formatItemValue(item) {
+      return formatJson(item?.action_config)
+    },
     async removeAction() {
       this.isRemovingAction = true
       try {
@@ -264,17 +268,18 @@ export default {
           </template>
 
           <!-- ACTION CONFIG -->
-          <template v-slot:expanded-item="{ headers, item }">
+          <template #expanded-item="{ headers, item }">
             <td
               v-if="Object.keys(item.action_config).length"
               :colspan="headers.length"
             >
-              <DictInput
+              <dict-input
                 v-if="Object.keys(item.action_config).length"
-                :disableEdit="true"
-                disabled
-                :dict="item.action_config"
-                :rules="[1, 2]"
+                readonly-key
+                readonly-value
+                disable-add
+                disable-remove
+                :value="formatItemValue(item)"
               />
             </td>
             <td v-else :colspan="headers.length">
diff --git a/src/pages/TeamSettings/KV.vue b/src/pages/TeamSettings/KV.vue
index 99d9080e4..406f42b34 100644
--- a/src/pages/TeamSettings/KV.vue
+++ b/src/pages/TeamSettings/KV.vue
@@ -1,16 +1,16 @@
 <script>
-import JsonInput from '@/components/CustomInputs/JsonInput'
+import CodeInput from '@/components/CustomInputs/CodeInput'
+import ResettableWrapper from '@/components/CustomInputs/ResettableWrapper'
 import ManagementLayout from '@/layouts/ManagementLayout'
 import ConfirmDialog from '@/components/ConfirmDialog'
-// import ExternalLink from '@/components/ExternalLink'
-
-import jsBeautify from 'js-beautify'
+import { isValidJson, formatJson, parseJson } from '@/utils/json'
 import { formatTime } from '@/mixins/formatTimeMixin'
 import { mapGetters, mapActions } from 'vuex'
 
 export default {
   components: {
-    JsonInput,
+    CodeInput,
+    ResettableWrapper,
     ManagementLayout,
     ConfirmDialog
   },
@@ -38,13 +38,7 @@ export default {
       invalidKV: false,
 
       // Types
-      selectedTypeIndex: 0,
-      kvTypes: [
-        { value: 'auto', text: 'Auto' },
-        { value: 'string', text: 'String' },
-        { value: 'json', text: 'JSON' }
-      ],
-
+      selectedInputMode: 'text',
       // Create/modify kv key & value input
       keyInput: null,
       KvValueInput: '',
@@ -97,46 +91,55 @@ export default {
       if (!this.KvValueInput) return false
       if (this.invalidKV) return false
       return true
+    },
+    hasEditedKvInput() {
+      return this.KvValueInput != formatJson(this.item?.value)
     }
   },
   watch: {
     tenant() {
       this.$apollo.queries.kv.refetch()
-    },
-    selectedTypeIndex() {
-      this.validKVJSON()
     }
   },
   methods: {
     ...mapActions('alert', ['addNotification']),
-    stringifyValue(value) {
-      return typeof value == 'object'
-        ? { type: 'object', value: JSON.stringify(value) }
-        : { type: 'string', value: String(value) }
+    setSelectedInputMode() {
+      this.selectedInputMode = this.getInputMode(this.KvValueInput)
     },
-    formatValue(kv) {
-      if (kv.type == 'object') {
-        return jsBeautify(kv.value, {
-          indent_size: 4,
-          space_in_empty_paren: true,
-          preserve_newlines: false
-        })
-      } else {
-        return kv.value
+    getInputMode(value) {
+      if (!isValidJson(value)) {
+        return 'text'
+      }
+
+      const parsed = parseJson(value)
+      if (typeof parsed !== 'object' || parsed == null) {
+        return 'text'
       }
+
+      return 'json'
+    },
+    getItemValue(item) {
+      return formatJson(item?.value)
     },
-    selectedType(type) {
-      return this.selectedTypeIndex > 0
-        ? this.kvTypes[this.selectedTypeIndex]?.value
-        : this.kvTypes[this.jsonEditorType(type)]?.value
+    getItemIsExpanded(item) {
+      const expandedId = this.expanded[0]?.id
+
+      return item.id == expandedId
+    },
+    resetKvValueInput() {
+      this.KvValueInput = ''
+
+      this.setSelectedInputMode()
     },
-    handleReset(item) {
-      this.KvValueInput = this.formatValue(this.stringifyValue(item?.value))
+    setKvValueInput(value) {
+      this.KvValueInput = formatJson(value)
+
+      this.setSelectedInputMode()
     },
     async copyValue(item) {
       try {
         if (typeof item?.value == 'object') {
-          await navigator.clipboard.writeText(JSON.stringify(item?.value))
+          await navigator.clipboard.writeText(this.getItemValue(item))
         } else {
           await navigator.clipboard.writeText(item?.value)
         }
@@ -148,20 +151,13 @@ export default {
         )
       }
     },
-    jsonEditorType(item) {
-      if (typeof item.value == 'object') {
-        return 2
-      } else {
-        return 1
-      }
-    },
     openKVEdit(item) {
       this.selectedKV = item
       this.isKvUpdate = true
       this.previousKVName = item?.key
       this.keyInput = item?.key
 
-      this.KvValueInput = this.formatValue(this.stringifyValue(item?.value))
+      this.setKvValueInput(item?.value)
       if (this.isEditable) {
         this.expanded = [item]
       } else {
@@ -192,8 +188,7 @@ export default {
     resetSelectedKV() {
       this.selectedKV = null
       this.keyInput = null
-      this.KvValueInput = ''
-      this.selectedTypeIndex = 0
+      this.resetKvValueInput()
       this.invalidKV = false
       this.expanded = []
       this.isEditable = false
@@ -201,12 +196,6 @@ export default {
     async setKV() {
       this.isSettingKV = true
 
-      if (this.selectedTypeIndex === 2 && !this.validKVJSON()) {
-        this.isSettingKV = false
-        this.invalidKV = true
-        return
-      }
-
       if (this.isKvUpdate) {
         const deleteKVResult = await this.deleteKV(
           { id: this.selectedKV?.id },
@@ -218,28 +207,12 @@ export default {
           return
         }
       }
-      let value = this.KvValueInput
-      if (this.selectedTypeIndex === 0) {
-        try {
-          if (value === 'null') {
-            value = JSON.stringify(JSON.parse(this.KvValueInput))
-          } else {
-            value = JSON.parse(this.KvValueInput)
-          }
-        } catch {
-          try {
-            value = String.raw`${this.KvValueInput}`
-          } catch {
-            value = JSON.stringify(this.KvValueInput)
-          }
-        }
-      }
-      if (this.selectedTypeIndex === 2) value = JSON.parse(this.KvValueInput)
+      const value = parseJson(this.KvValueInput) ?? this.KvValueInput
       const kvResult = await this.$apollo.mutate({
         mutation: require('@/graphql/KV/set-key-value.gql'),
         variables: {
           key: this.keyInput,
-          value: value
+          value
         },
         errorPolicy: 'all'
       })
@@ -273,7 +246,7 @@ export default {
 
       this.isSettingKV = false
       this.keyInput = null
-      this.KvValueInput = ''
+      this.resetKvValueInput()
     },
     async deleteKV(kv, opts = {}) {
       this.isDeletingKV = true
@@ -306,30 +279,12 @@ export default {
       this.isDeletingKV = false
       return deleteKVResult
     },
-
-    validKVJSON() {
-      this.invalidKV = false
-      if (this.selectedTypeIndex !== 2) {
-        this.$refs.kvRef.removeJsonErrors()
-        return true
-      }
-      if (!this.$refs.kvRef) {
-        this.$refs.kvRef.removeJsonErrors()
-        return true
-      }
-      // Check JSON using the JsonInput component's validation (need to check for true over truthy here because of the way the jsonInput returns for other components)
-      if (this.$refs.kvRef.validateJson() === true) return true
-      return false
-    },
-    setInvalidKV(event) {
-      this.invalidKV = event
-    },
     handleKVExpand(kv) {
       this.selectedKV = kv?.item
       this.isKvUpdate = true
       this.previousKVName = kv?.item?.key
 
-      this.KvValueInput = this.formatValue(this.stringifyValue(kv?.item?.value))
+      this.setKvValueInput(kv?.item?.value)
 
       this.keyInput = kv?.item?.key
     }
@@ -381,7 +336,7 @@ export default {
             expanded = []
             previousKVName = null
             keyInput = null
-            KvValueInput = ''
+            resetKvValueInput()
             isKvUpdate = false
             keyModifyDialog = true
           "
@@ -478,92 +433,28 @@ export default {
           <!-- ACTIONS -->
           <template #expanded-item="{ headers, item }">
             <td :colspan="headers.length">
-              <div
-                class="d-flex justify-end align-end mt-5"
-                style="width: 100%;"
-              >
-                <v-btn
-                  x-small
-                  class="text-normal mr-2"
-                  depressed
-                  color="utilGrayLight"
-                  title="Reset"
-                  :disabled="
-                    KvValueInput == formatValue(stringifyValue(item.value))
-                  "
-                  @click="handleReset(item)"
-                >
-                  Reset
-                  <v-icon small>refresh</v-icon>
-                </v-btn>
-              </div>
-
-              <JsonInput
-                ref="kvRef"
+              <resettable-wrapper
+                :key="item.id"
                 v-model="KvValueInput"
-                class="text-body-1 mt-2 mb-5"
-                prepend-icon="create"
-                :selected-type="selectedType(item)"
-                @invalid-secret="setInvalidKV"
+                class="resettable-dictionary-json"
+                @input="setSelectedInputMode"
               >
-                <v-menu top offset-y>
-                  <template #activator="{ on }">
-                    <v-btn
-                      v-if="hasPermission('create', 'key-value')"
-                      text
-                      small
-                      class="position-absolute"
-                      :style="{
-                        bottom: '25px',
-                        right: '140px',
-                        'z-index': 3
-                      }"
-                      color="accent"
-                      :loading="isSettingKV"
-                      :disabled="
-                        !KvValueInput ||
-                          KvValueInput ==
-                            formatValue(stringifyValue(item.value)) ||
-                          invalidKV
-                      "
-                      v-on="on"
-                      @click="setKV"
-                    >
-                      Save
-                    </v-btn>
-                  </template>
-                </v-menu>
-                <v-menu top offset-y>
-                  <template #activator="{ on }">
-                    <v-btn
-                      text
-                      small
-                      class="position-absolute"
-                      :style="{
-                        bottom: '25px',
-                        right: '80px',
-                        'z-index': 3
-                      }"
-                      color="accent"
-                      v-on="on"
-                      >Type</v-btn
-                    >
-                  </template>
-                  <v-list>
-                    <v-list-item-group
-                      v-model="selectedTypeIndex"
-                      color="primary"
-                    >
-                      <v-list-item
-                        v-for="(type, index) in kvTypes"
-                        :key="index"
-                      >
-                        <v-list-item-title>{{ type.text }} </v-list-item-title>
-                      </v-list-item>
-                    </v-list-item-group>
-                  </v-list>
-                </v-menu>
-              </JsonInput>
+                <code-input
+                  v-model="KvValueInput"
+                  class="text-body-1 mt-2"
+                  :mode.sync="selectedInputMode"
+                  :editors="['text', 'json']"
+                />
+                <div class="d-flex flex-grow-1 justify-end mb-5">
+                  <v-btn
+                    small
+                    color="primary"
+                    :loading="isSettingKV"
+                    @click="setKV"
+                    >Save</v-btn
+                  >
+                </div>
+              </resettable-wrapper>
             </td>
           </template>
           <template #item.value="{item}">
@@ -593,6 +484,7 @@ export default {
                   fab
                   x-small
                   color="primary"
+                  :disabled="getItemIsExpanded(item)"
                   v-on="on"
                   @click="
                     isEditable = !isEditable
@@ -620,7 +512,6 @@ export default {
               </template>
               Delete key
             </v-tooltip>
-
             <v-tooltip bottom>
               <template #activator="{ on }">
                 <v-btn
@@ -676,40 +567,13 @@ export default {
         validate-on-blur
       />
 
-      <JsonInput
-        ref="kvRef"
+      <code-input
         v-model="KvValueInput"
-        prepend-icon="create"
         class="text-body-1"
-        placeholder-text="Value"
-        :selected-type="kvTypes[selectedTypeIndex].value"
-        @invalid-secret="setInvalidKV"
-      >
-        <v-menu top offset-y>
-          <template #activator="{ on }">
-            <v-btn
-              text
-              small
-              class="position-absolute"
-              :style="{
-                bottom: '25px',
-                right: '80px',
-                'z-index': 3
-              }"
-              color="accent"
-              v-on="on"
-              >Type</v-btn
-            >
-          </template>
-          <v-list>
-            <v-list-item-group v-model="selectedTypeIndex" color="primary">
-              <v-list-item v-for="(type, index) in kvTypes" :key="index">
-                <v-list-item-title>{{ type.text }} </v-list-item-title>
-              </v-list-item>
-            </v-list-item-group>
-          </v-list>
-        </v-menu>
-      </JsonInput>
+        placeholder="Value"
+        :mode.sync="selectedInputMode"
+        :editors="['text', 'json']"
+      />
     </ConfirmDialog>
 
     <ConfirmDialog
diff --git a/src/pages/TeamSettings/Secrets.vue b/src/pages/TeamSettings/Secrets.vue
index 21ce56d87..907bb9c11 100644
--- a/src/pages/TeamSettings/Secrets.vue
+++ b/src/pages/TeamSettings/Secrets.vue
@@ -1,17 +1,17 @@
 <script>
 import { mapGetters } from 'vuex'
-import JsonInput from '@/components/CustomInputs/JsonInput'
-
-import Alert from '@/components/Alert'
-import ConfirmDialog from '@/components/ConfirmDialog'
+import CodeInput from '@/components/CustomInputs/CodeInput'
 import ManagementLayout from '@/layouts/ManagementLayout'
+import ConfirmDialog from '@/components/ConfirmDialog'
+import Alert from '@/components/Alert'
+import { parseJson } from '@/utils/json'
 
 export default {
   components: {
     Alert,
     ConfirmDialog,
     ManagementLayout,
-    JsonInput
+    CodeInput
   },
   data() {
     return {
@@ -57,18 +57,6 @@ export default {
       },
       invalidSecret: false,
 
-      //Types
-      selectedTypeIndex: 0,
-      secretTypes: [
-        { value: 'auto', text: 'Auto' },
-        { value: 'string', text: 'String' },
-        { value: 'json', text: 'JSON' }
-      ],
-
-      //jsonInput
-      placeholderText:
-        "Enter your secret value here...\n\nClick on 'Type' to select a type validation",
-
       // Dialogs
       secretModifyDialog: false,
       secretDeleteDialog: false,
@@ -114,9 +102,6 @@ export default {
   watch: {
     tenant() {
       this.$apollo.queries.secretNames.refetch()
-    },
-    selectedTypeIndex() {
-      this.validSecretJSON()
     }
   },
   methods: {
@@ -168,56 +153,23 @@ export default {
       this.selectedTypeIndex = 0
       this.invalidSecret = false
     },
-    validSecretJSON() {
-      this.invalidSecret = false
-      if (this.selectedTypeIndex !== 2) {
-        this.$refs.secretRef.removeJsonErrors()
-        return true
-      }
-      if (!this.$refs.secretRef) {
-        this.$refs.secretRef.removeJsonErrors()
-        return true
-      }
-      // Check JSON using the JsonInput component's validation (need to check for true over truthy here because of the way the jsonInput returns for other components)
-      if (this.$refs.secretRef.validateJson() === true) return true
-      return false
-    },
-    setInvalidSecret(event) {
-      this.invalidSecret = event
-    },
     async setSecret() {
       this.isSettingSecret = true
-      if (this.selectedTypeIndex === 2 && !this.validSecretJSON()) {
-        this.isSettingSecret = false
-        this.invalidSecret = true
-        return
-      }
+
       if (this.isSecretUpdate) {
         await this.deleteSecret(
           { name: this.previousSecretName },
           { isModifying: true }
         )
       }
-      let value = this.secretValueInput
-      if (this.selectedTypeIndex === 0) {
-        try {
-          value = JSON.parse(this.secretValueInput)
-        } catch {
-          try {
-            value = String.raw`${this.secretValueInput}`
-          } catch {
-            value = JSON.stringify(this.secretValueInput)
-          }
-        }
-      }
-      if (this.selectedTypeIndex === 2)
-        value = JSON.parse(this.secretValueInput)
-
+      const value =
+        parseJson(this.secretValueInput) ?? this.secretValueInput ?? []
+      console.log(value)
       const secretResult = await this.$apollo.mutate({
         mutation: require('@/graphql/Secrets/set-secret.gql'),
         variables: {
           name: this.secretNameInput,
-          value: value || []
+          value
         }
       })
 
@@ -460,42 +412,13 @@ export default {
         validate-on-blur
       />
 
-      <JsonInput
+      <code-input
         v-if="secretModifyDialog"
-        ref="secretRef"
         v-model="secretValueInput"
-        prepend-icon="lock"
         class="text-body-1"
-        :selected-type="secretTypes[selectedTypeIndex].value"
-        :placeholder-text="placeholderText"
-        @input="validSecretJSON"
-        @invalid-secret="setInvalidSecret"
-      >
-        <v-menu top offset-y>
-          <template #activator="{ on }">
-            <v-btn
-              text
-              small
-              class="position-absolute"
-              :style="{
-                bottom: '25px',
-                right: '80px',
-                'z-index': 3
-              }"
-              color="accent"
-              v-on="on"
-              >Type</v-btn
-            >
-          </template>
-          <v-list>
-            <v-list-item-group v-model="selectedTypeIndex" color="primary">
-              <v-list-item v-for="(item, index) in secretTypes" :key="index">
-                <v-list-item-title>{{ item.text }} </v-list-item-title>
-              </v-list-item>
-            </v-list-item-group>
-          </v-list>
-        </v-menu>
-      </JsonInput>
+        placeholder="Secret value"
+        :editors="['text', 'json']"
+      />
     </ConfirmDialog>
 
     <ConfirmDialog

From 15f0884a7746e2131101a613f59537c756789e4e Mon Sep 17 00:00:00 2001
From: Evan Sutherland <stackoverfloweth@gmail.com>
Date: Thu, 4 Nov 2021 08:02:30 -0500
Subject: [PATCH 3/5] code review changes

---
 src/pages/TeamSettings/Actions.vue | 1 +
 src/pages/TeamSettings/Secrets.vue | 1 -
 2 files changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/TeamSettings/Actions.vue b/src/pages/TeamSettings/Actions.vue
index 62ec32f47..f93b17da0 100644
--- a/src/pages/TeamSettings/Actions.vue
+++ b/src/pages/TeamSettings/Actions.vue
@@ -275,6 +275,7 @@ export default {
             >
               <dict-input
                 v-if="Object.keys(item.action_config).length"
+                class="mt-3"
                 readonly-key
                 readonly-value
                 disable-add
diff --git a/src/pages/TeamSettings/Secrets.vue b/src/pages/TeamSettings/Secrets.vue
index 907bb9c11..bd01f0742 100644
--- a/src/pages/TeamSettings/Secrets.vue
+++ b/src/pages/TeamSettings/Secrets.vue
@@ -164,7 +164,6 @@ export default {
       }
       const value =
         parseJson(this.secretValueInput) ?? this.secretValueInput ?? []
-      console.log(value)
       const secretResult = await this.$apollo.mutate({
         mutation: require('@/graphql/Secrets/set-secret.gql'),
         variables: {

From 87e236ab3ec95dcd66a7c6517e740280e6945b11 Mon Sep 17 00:00:00 2001
From: Evan Sutherland <stackoverfloweth@gmail.com>
Date: Tue, 16 Nov 2021 13:42:02 -0600
Subject: [PATCH 4/5] code review fixes

---
 src/pages/TeamSettings/KV.vue | 27 +++++++++++++++------------
 1 file changed, 15 insertions(+), 12 deletions(-)

diff --git a/src/pages/TeamSettings/KV.vue b/src/pages/TeamSettings/KV.vue
index 406f42b34..e3acc6f02 100644
--- a/src/pages/TeamSettings/KV.vue
+++ b/src/pages/TeamSettings/KV.vue
@@ -35,7 +35,6 @@ export default {
         required: val => !!val || 'This field is required.'
       },
       errorMessage: '',
-      invalidKV: false,
 
       // Types
       selectedInputMode: 'text',
@@ -86,12 +85,6 @@ export default {
       }
       return this.kv?.map(kv => kv.key).includes(this.keyInput)
     },
-    disableConfirm() {
-      if (!this.keyInput) return false
-      if (!this.KvValueInput) return false
-      if (this.invalidKV) return false
-      return true
-    },
     hasEditedKvInput() {
       return this.KvValueInput != formatJson(this.item?.value)
     }
@@ -189,10 +182,17 @@ export default {
       this.selectedKV = null
       this.keyInput = null
       this.resetKvValueInput()
-      this.invalidKV = false
       this.expanded = []
       this.isEditable = false
     },
+    async validateAndSetKV() {
+      if (!this.keyInput || !this.$refs.KvValueInput.validate()) {
+        this.handleAlert('error', 'Cannot save with errors in form.')
+        return
+      }
+
+      await this.setKV()
+    },
     async setKV() {
       this.isSettingKV = true
 
@@ -207,7 +207,9 @@ export default {
           return
         }
       }
-      const value = parseJson(this.KvValueInput) ?? this.KvValueInput
+      const value = isValidJson(this.KvValueInput)
+        ? parseJson(this.KvValueInput)
+        : this.KvValueInput
       const kvResult = await this.$apollo.mutate({
         mutation: require('@/graphql/KV/set-key-value.gql'),
         variables: {
@@ -440,6 +442,7 @@ export default {
                 @input="setSelectedInputMode"
               >
                 <code-input
+                  ref="KvValueInput"
                   v-model="KvValueInput"
                   class="text-body-1 mt-2"
                   :mode.sync="selectedInputMode"
@@ -450,7 +453,7 @@ export default {
                     small
                     color="primary"
                     :loading="isSettingKV"
-                    @click="setKV"
+                    @click="validateAndSetKV"
                     >Save</v-btn
                   >
                 </div>
@@ -541,11 +544,10 @@ export default {
     <ConfirmDialog
       v-model="keyModifyDialog"
       :dialog-props="{ 'max-width': '75vh' }"
-      :disabled="!disableConfirm"
       :loading="isSettingKV"
       confirm-text="Save"
       title="Create KV"
-      @confirm="setKV"
+      @confirm="validateAndSetKV"
       @cancel="resetSelectedKV"
     >
       <v-text-field
@@ -568,6 +570,7 @@ export default {
       />
 
       <code-input
+        ref="KvValueInput"
         v-model="KvValueInput"
         class="text-body-1"
         placeholder="Value"

From 27f1e61754c4726bb7a2372f589554ab2e834539 Mon Sep 17 00:00:00 2001
From: Evan Sutherland <stackoverfloweth@gmail.com>
Date: Tue, 16 Nov 2021 15:36:36 -0600
Subject: [PATCH 5/5] code review changes

---
 src/pages/TeamSettings/Secrets.vue | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/pages/TeamSettings/Secrets.vue b/src/pages/TeamSettings/Secrets.vue
index bd01f0742..849eff8c8 100644
--- a/src/pages/TeamSettings/Secrets.vue
+++ b/src/pages/TeamSettings/Secrets.vue
@@ -4,7 +4,7 @@ import CodeInput from '@/components/CustomInputs/CodeInput'
 import ManagementLayout from '@/layouts/ManagementLayout'
 import ConfirmDialog from '@/components/ConfirmDialog'
 import Alert from '@/components/Alert'
-import { parseJson } from '@/utils/json'
+import { tryParseJson } from '@/utils/json'
 
 export default {
   components: {
@@ -55,7 +55,6 @@ export default {
       rules: {
         required: val => !!val || 'This field is required.'
       },
-      invalidSecret: false,
 
       // Dialogs
       secretModifyDialog: false,
@@ -91,12 +90,6 @@ export default {
       return this.secretNames
         ?.map(secret => secret.name)
         .includes(this.secretNameInput)
-    },
-    disableConfirm() {
-      if (!this.secretNameInput) return false
-      if (!this.secretValueInput) return false
-      if (this.invalidSecret) return false
-      return true
     }
   },
   watch: {
@@ -151,7 +144,14 @@ export default {
       this.secretNameInput = null
       this.secretValueInput = null
       this.selectedTypeIndex = 0
-      this.invalidSecret = false
+    },
+    async validateAndSetSecret() {
+      if (!this.secretNameInput || !this.$refs.secretValueInput.validate()) {
+        this.handleAlert('error', 'Cannot save with errors in form.')
+        return
+      }
+
+      await this.setSecret()
     },
     async setSecret() {
       this.isSettingSecret = true
@@ -163,7 +163,7 @@ export default {
         )
       }
       const value =
-        parseJson(this.secretValueInput) ?? this.secretValueInput ?? []
+        tryParseJson(this.secretValueInput) ?? this.secretValueInput ?? []
       const secretResult = await this.$apollo.mutate({
         mutation: require('@/graphql/Secrets/set-secret.gql'),
         variables: {
@@ -381,11 +381,10 @@ export default {
     <ConfirmDialog
       v-model="secretModifyDialog"
       :dialog-props="{ 'max-width': '75vh' }"
-      :disabled="!disableConfirm"
       :loading="isSettingSecret"
       :title="isSecretUpdate ? 'Modify Secret' : 'Create New Secret'"
       @cancel="resetSelectedSecret"
-      @confirm="setSecret"
+      @confirm="validateAndSetSecret"
     >
       <span v-if="!isSecretUpdate">
         Add a secret that will allow your team to access sensitive data during
@@ -413,6 +412,7 @@ export default {
 
       <code-input
         v-if="secretModifyDialog"
+        ref="secretValueInput"
         v-model="secretValueInput"
         class="text-body-1"
         placeholder="Secret value"