fix(*): apply pr feedback

Kong · Jan 2, 2024 · 4a30308 · 4a30308
1 parent 1e9b622
commit 4a30308
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 13 deletions.
diff --git a/packages/entities/entities-plugins/src/components/PluginForm.vue b/packages/entities/entities-plugins/src/components/PluginForm.vue
@@ -57,6 +57,49 @@
         -->
         <div v-if="isWizardStep" />
         <div v-else>
+          <KToggle
+            v-if="config.jsonYamlMilestone2Enabled"
+            v-slot="{ isToggled, toggle }"
+          >
+            <div>
+              <KButton
+                appearance="tertiary"
+                data-testid="form-view-configuration"
+                @click.prevent="toggle"
+              >
+                {{ t('actions.view_configuration') }}
+              </KButton>
+              <KSlideout
+                close-button-alignment="end"
+                data-testid="form-view-configuration-slideout"
+                :has-overlay="false"
+                :is-visible="isToggled.value"
+                prevent-close-on-blur
+                :title="t('view_configuration.title')"
+                @close="toggle"
+              >
+                <div>
+                  {{ t('view_configuration.message') }}
+                </div>
+                <KTabs
+                  data-testid="form-view-configuration-slideout-tabs"
+                  :tabs="tabs"
+                >
+                  <template #json>
+                    <JsonCodeBlock
+                      :config="config"
+                      :fetcher-url="submitUrl"
+                      :json-record="form.fields"
+                      :request-method="props.pluginId ? 'put' : 'post'"
+                    />
+                  </template>
+                  <template #yaml>
+                    <YamlCodeBlock :yaml-record="form.fields" />
+                  </template>
+                </KTabs>
+              </KSlideout>
+            </div>
+          </KToggle>
           <KButton
             appearance="secondary"
             data-testid="form-cancel"
@@ -113,6 +156,7 @@ import endpoints from '../plugins-endpoints'
 import composables from '../composables'
 import { ArrayStringFieldSchema } from '../composables/plugin-schemas/ArrayStringFieldSchema'
 import PluginEntityForm from './PluginEntityForm.vue'
+import type { Tab } from '@kong/kongponents'
 
 const emit = defineEmits<{
   (e: 'error:fetch-schema', error: AxiosError): void,
@@ -223,6 +267,17 @@ const form = reactive<PluginFormState>({
   errorMessage: '',
 })
 
+const tabs = ref<Tab[]>([
+  {
+    title: t('view_configuration.yaml'),
+    hash: '#yaml',
+  },
+  {
+    title: t('view_configuration.json'),
+    hash: '#json',
+  },
+])
+
 const fetchUrl = computed((): string => {
   if (treatAsCredential.value) { // credential
     let submitEndpoint = endpoints.form[props.config.app].credential[formType.value]

diff --git a/packages/entities/entities-plugins/src/locales/en.json b/packages/entities/entities-plugins/src/locales/en.json
@@ -2,6 +2,7 @@
   "actions": {
     "back": "Back",
     "cancel": "Cancel",
+    "view_configuration": "View Configuration",
     "create": "New Plugin",
     "create_custom": "Create",
     "copy_id": "Copy ID",
@@ -16,6 +17,12 @@
     "go_to_plugins": "Go to Plugins",
     "save": "Save"
   },
+  "view_configuration": {
+    "title": "Configuration",
+    "message": "Configuring your API has never been easier. Use YAML for human-friendly simplicity or JSON for machine-readability. Streamline your settings effortlessly.",
+    "yaml": "YAML",
+    "json": "JSON"
+  },
   "delete": {
     "title": "Delete a Plugin",
     "custom_title": "Delete {name}",

diff --git a/packages/entities/entities-shared/src/components/entity-base-form/EntityBaseForm.vue b/packages/entities/entities-shared/src/components/entity-base-form/EntityBaseForm.vue
@@ -61,6 +61,7 @@
                 :is-visible="isToggled.value"
                 prevent-close-on-blur
                 :title="t('baseForm.configuration.title')"
+                type="button"
                 @close="toggle"
               >
                 <div>
@@ -74,12 +75,12 @@
                     <JsonCodeBlock
                       :config="config"
                       :fetcher-url="fetcherUrl"
-                      :json-record="jsonOrYamlRecord"
+                      :json-record="props.formFields"
                       :request-method="props.editId ? 'put' : 'post'"
                     />
                   </template>
                   <template #yaml>
-                    <YamlCodeBlock :yaml-record="jsonOrYamlRecord" />
+                    <YamlCodeBlock :yaml-record="props.formFields" />
                   </template>
                 </KTabs>
               </KSlideout>
@@ -196,17 +197,6 @@ const fetchDetailsError = ref(false)
 const fetchErrorMessage = ref('')
 const disableSave = computed((): boolean => props.canSubmit === false || props.isReadonly)
 
-const jsonOrYamlRecord = computed((): PropType<Record<string, any>> => {
-  if (!props.formFields) {
-    return props.formFields
-  }
-  const processedRecord = JSON.parse(JSON.stringify(props.formFields))
-  // api requires default value for tags to be empty array
-  if (processedRecord.tags === '') {
-    processedRecord.tags = []
-  }
-  return processedRecord
-})
 /**
  * Build the fetcher URL
  */