feat(serverless): hybrid flow modals [khcp-11822] (#1421)

Updates to support display in a fullscreen modal instead of a full page form. Part of [KHCP-11822](https://konghq.atlassian.net/browse/KHCP-11822). Adoption PR: Kong/konnect-ui-apps#3269
Kong · May 23, 2024 · a5d6f33 · a5d6f33
1 parent 8dc2538
commit a5d6f33
Show file tree

Hide file tree

Showing 2 changed files with 79 additions and 45 deletions.
diff --git a/packages/entities/entities-plugins/docs/plugin-form.md b/packages/entities/entities-plugins/docs/plugin-form.md
@@ -155,8 +155,20 @@ Will hide the form buttons if you only want to render the form and want to contr
 
 Support instance names for plugins. This can be removed when KHCP-5872-custom-names-for-plugins is removed. Enabled by default for KM.
 
+#### `actionsTeleportTarget`
+
+- type: `String`
+- required: `false`
+- default: `''`
+
+Allow teleporting the action buttons to the specified target element.
+
 ### Events
 
+#### cancel
+
+A `@cancel` event is emitted when the Cancel button is clicked and no `config.cancelRoute` has been provided.
+
 #### error
 
 An `@error` event is emitted when form validation fails. The event payload is the response error.

diff --git a/packages/entities/entities-plugins/src/components/PluginForm.vue b/packages/entities/entities-plugins/src/components/PluginForm.vue
@@ -51,52 +51,55 @@
       />
 
       <template #form-actions>
-        <!--
-          Force the render of this slot
-             - if isWizardStep is true we don't want any buttons displayed (default EntityBaseForm buttons included)
-        -->
-        <div v-if="isWizardStep" />
         <div
-          v-else
-          class="plugin-form-actions"
+          :id="`plugin-form-default-actions-container-${(config as KongManagerPluginFormConfig).workspace || (config as KonnectPluginFormConfig).controlPlaneId}`"
+          ref="actionsDivRef"
+        />
+
+        <!-- if isWizardStep is true we don't want any buttons displayed (default EntityBaseForm buttons included) -->
+        <Teleport
+          v-if="!isWizardStep && mounted"
+          :to="actionsTeleportTarget ? actionsTeleportTarget : `#plugin-form-default-actions-container-${(config as KongManagerPluginFormConfig).workspace || (config as KonnectPluginFormConfig).controlPlaneId}`"
         >
-          <KButton
-            appearance="tertiary"
-            data-testid="form-view-configuration"
-            @click="toggle()"
-          >
-            {{ t('actions.view_configuration') }}
-          </KButton>
-          <KButton
-            appearance="secondary"
-            class="form-action-button"
-            data-testid="form-cancel"
-            :disabled="form.isReadonly"
-            type="reset"
-            @click="handleClickCancel"
-          >
-            {{ t('actions.cancel') }}
-          </KButton>
-          <KButton
-            v-if="formType === EntityBaseFormType.Create && config.backRoute"
-            appearance="secondary"
-            class="form-action-button"
-            data-testid="form-back"
-            :disabled="form.isReadonly"
-            @click="handleClickBack"
-          >
-            {{ t('actions.back') }}
-          </KButton>
-          <KButton
-            appearance="primary"
-            data-testid="form-submit"
-            :disabled="!canSubmit || form.isReadonly"
-            type="submit"
-            @click="saveFormData"
-          >
-            {{ t('actions.save') }}
-          </KButton>
-        </div>
+          <div class="plugin-form-actions">
+            <KButton
+              appearance="tertiary"
+              data-testid="form-view-configuration"
+              @click="toggle()"
+            >
+              {{ t('actions.view_configuration') }}
+            </KButton>
+            <KButton
+              appearance="secondary"
+              class="form-action-button"
+              data-testid="form-cancel"
+              :disabled="form.isReadonly"
+              type="reset"
+              @click="handleClickCancel"
+            >
+              {{ t('actions.cancel') }}
+            </KButton>
+            <KButton
+              v-if="formType === EntityBaseFormType.Create && config.backRoute"
+              appearance="secondary"
+              class="form-action-button"
+              data-testid="form-back"
+              :disabled="form.isReadonly"
+              @click="handleClickBack"
+            >
+              {{ t('actions.back') }}
+            </KButton>
+            <KButton
+              appearance="primary"
+              data-testid="form-submit"
+              :disabled="!canSubmit || form.isReadonly"
+              type="submit"
+              @click="saveFormData"
+            >
+              {{ t('actions.save') }}
+            </KButton>
+          </div>
+        </Teleport>
       </template>
     </EntityBaseForm>
     <KSlideout
@@ -167,6 +170,7 @@ import {
 import PluginEntityForm from './PluginEntityForm.vue'
 
 const emit = defineEmits<{
+  (e: 'cancel'): void,
   (e: 'error:fetch-schema', error: AxiosError): void,
   (e: 'error', error: AxiosError): void,
   (e: 'loading', isLoading: boolean): void,
@@ -190,7 +194,6 @@ const props = defineProps({
       if (!config || !['konnect', 'kongManager'].includes(config?.app)) return false
       if (config.app === 'konnect' && !config.controlPlaneId) return false
       if (config.app === 'kongManager' && typeof config.workspace !== 'string') return false
-      if (!config.cancelRoute) return false
       return true
     },
   },
@@ -239,6 +242,14 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+
+  /**
+   * Allow teleporting the action buttons to the specified div.
+   */
+  actionsTeleportTarget: {
+    type: String,
+    default: '',
+  },
 })
 
 const router = useRouter()
@@ -258,6 +269,7 @@ const treatAsCredential = computed((): boolean => !!(props.credential && props.c
 const record = ref<Record<string, any> | null>(null)
 const configResponse = ref<Record<string, any>>({})
 const formLoading = ref(false)
+const actionsDivRef = ref<HTMLDivElement | null>(null)
 const formFieldsOriginal = reactive<PluginFormFields>({
   enabled: true,
   protocols: [],
@@ -940,6 +952,8 @@ watch([entityMap, initialized], (newData, oldData) => {
 const handleClickCancel = (): void => {
   if (props.config.cancelRoute) {
     router.push(props.config.cancelRoute)
+  } else {
+    emit('cancel')
   }
 }
 
@@ -1086,6 +1100,14 @@ const schemaUrl = computed((): string => {
   return url
 })
 
+// track when the actions div is mounted for Teleport
+const mounted = ref(false)
+watch(actionsDivRef, (newVal) => {
+  if (newVal) {
+    mounted.value = true
+  }
+})
+
 const schemaLoading = ref(false)
 const fetchSchemaError = ref('')
 onBeforeMount(async () => {