Skip to content

Commit

Permalink
feat(*): use computed
Browse files Browse the repository at this point in the history
  • Loading branch information
@mptap
mptap committed Jan 12, 2024
1 parent c3b84e1 commit 6e37c69
Show file tree
Hide file tree
Showing 26 changed files with 138 additions and 109 deletions.
1 change: 1 addition & 0 deletions packages/entities/entities-certificates/sandbox/pages/CACertificateFormPage.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@ const konnectConfig = ref<KonnectCertificateFormConfig>({
// Set the root `.env.development.local` variable to a control plane your PAT can access
controlPlaneId,
cancelRoute: { name: 'ca-certificate-list' },
jsonYamlFormsEnabled: true,
})
const kongManagerConfig = ref<KongManagerCertificateFormConfig>({
Expand Down
1 change: 1 addition & 0 deletions packages/entities/entities-certificates/sandbox/pages/CertificateFormPage.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@ const konnectConfig = ref<KonnectCertificateFormConfig>({
// Set the root `.env.development.local` variable to a control plane your PAT can access
controlPlaneId,
cancelRoute: { name: 'certificate-list' },
jsonYamlFormsEnabled: true,
})
const kongManagerConfig = ref<KongManagerCertificateFormConfig>({
Expand Down
20 changes: 11 additions & 9 deletions packages/entities/entities-certificates/src/components/CACertificateForm.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -187,28 +187,30 @@ const submitUrl = computed<string>(() => {
return url
})
const requestBody: Record<string, any> = {
cert: form.fields.cert,
cert_digest: form.fields.certDigest || null,
tags: form.fields.tags.split(',')?.map((tag: string) => String(tag || '').trim())?.filter((tag: string) => tag !== ''),
}
const requestBody = computed((): Record<string, any> => {
return {
cert: form.fields.cert,
cert_digest: form.fields.certDigest || null,
tags: form.fields.tags.split(',')?.map((tag: string) => String(tag || '').trim())?.filter((tag: string) => tag !== ''),
}
})
const saveFormData = async (): Promise<void> => {
try {
form.isReadonly = true
let response: AxiosResponse | undefined
await axiosInstance.post(validateSubmitUrl.value, requestBody)
await axiosInstance.post(validateSubmitUrl.value, requestBody.value)
if (formType.value === 'create') {
response = await axiosInstance.post(submitUrl.value, requestBody)
response = await axiosInstance.post(submitUrl.value, requestBody.value)
} else if (formType.value === 'edit') {
response = props.config?.app === 'konnect'
// Note: Konnect currently uses PUT because PATCH is not fully supported in Koko
// If this changes, the `edit` form methods should be re-evaluated/updated accordingly
? await axiosInstance.put(submitUrl.value, requestBody)
: await axiosInstance.patch(submitUrl.value, requestBody)
? await axiosInstance.put(submitUrl.value, requestBody.value)
: await axiosInstance.patch(submitUrl.value, requestBody.value)
}
form.fields.cert = response?.data?.cert || ''
Expand Down
24 changes: 13 additions & 11 deletions packages/entities/entities-certificates/src/components/CertificateForm.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -255,30 +255,32 @@ const submitUrl = computed<string>(() => {
return url
})
const requestBody: Record<string, any> = {
cert: form.fields.cert,
key: form.fields.key,
cert_alt: form.fields.certAlt || null,
key_alt: form.fields.keyAlt || null,
tags: form.fields.tags.split(',')?.map((tag: string) => String(tag || '').trim())?.filter((tag: string) => tag !== ''),
}
const requestBody = computed((): Record<string, any> => {
return {
cert: form.fields.cert,
key: form.fields.key,
cert_alt: form.fields.certAlt || null,
key_alt: form.fields.keyAlt || null,
tags: form.fields.tags.split(',')?.map((tag: string) => String(tag || '').trim())?.filter((tag: string) => tag !== ''),
}
})
const saveFormData = async (): Promise<void> => {
try {
form.isReadonly = true
let response: AxiosResponse | undefined
await axiosInstance.post(validateSubmitUrl.value, requestBody)
await axiosInstance.post(validateSubmitUrl.value, requestBody.value)
if (formType.value === 'create') {
response = await axiosInstance.post(submitUrl.value, requestBody)
response = await axiosInstance.post(submitUrl.value, requestBody.value)
} else if (formType.value === 'edit') {
response = props.config?.app === 'konnect'
// Note: Konnect currently uses PUT because PATCH is not fully supported in Koko
// If this changes, the `edit` form methods should be re-evaluated/updated accordingly
? await axiosInstance.put(submitUrl.value, requestBody)
: await axiosInstance.patch(submitUrl.value, requestBody)
? await axiosInstance.put(submitUrl.value, requestBody.value)
: await axiosInstance.patch(submitUrl.value, requestBody.value)
}
form.fields.cert = response?.data?.cert || ''
Expand Down
1 change: 1 addition & 0 deletions packages/entities/entities-consumer-groups/sandbox/pages/ConsumerGroupFormPage.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,7 @@ const konnectConfig = ref<KonnectConsumerGroupFormConfig>({
apiBaseUrl: '/us/kong-api/konnect-api',
controlPlaneId,
cancelRoute: { name: 'consumer-group-list' },
jsonYamlFormsEnabled: true,
})
const KMConfig = ref<KongManagerConsumerGroupFormConfig>({
Expand Down
18 changes: 10 additions & 8 deletions packages/entities/entities-consumer-groups/src/components/ConsumerGroupForm.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
:edit-id="consumerGroupId"
:error-message="state.errorMessage || fetchError || preValidateErrorMessage"
:fetch-url="fetchUrl"
:form-fields="getPayload()"
:form-fields="getPayload"
:is-readonly="state.readonly"
@cancel="cancelHandler"
@fetch:error="fetchErrorHandler($event)"
Expand Down Expand Up @@ -241,10 +241,12 @@ const preValidateErrorMessage = computed(() => {
return namePattern.test(state.fields.name) ? '' : t('consumer_groups.form.validation_errors.name')
})
const getPayload = (): ConsumerGroupPayload => ({
name: state.fields.name,
tags: state.fields.tags.split(',')?.map((tag: string) => String(tag || '')
.trim())?.filter((tag: string) => tag !== ''),
const getPayload = computed((): ConsumerGroupPayload => {
return {
name: state.fields.name,
tags: state.fields.tags.split(',')?.map((tag: string) => String(tag || '')
.trim())?.filter((tag: string) => tag !== ''),
}
})
const addConsumer = async (consumerId: string, groupId = ''): Promise<void> => {
Expand Down Expand Up @@ -281,7 +283,7 @@ const handleConsumers = (results: any[] | undefined, message: string, groupId =
const createGroup = async (): Promise<void> => {
let newGroupId = ''
try {
const { data } = await axiosInstance.post(getUrl('create'), getPayload())
const { data } = await axiosInstance.post(getUrl('create'), getPayload.value)
newGroupId = ('item' in data) ? data.item.id : data.id
} catch (e) {
Expand All @@ -306,9 +308,9 @@ const createGroup = async (): Promise<void> => {
const updateGroup = async (): Promise<void> => {
try {
if (props.config?.app === 'konnect') {
await axiosInstance.put(getUrl('edit'), getPayload())
await axiosInstance.put(getUrl('edit'), getPayload.value)
} else {
await axiosInstance.patch(getUrl('edit'), getPayload())
await axiosInstance.patch(getUrl('edit'), getPayload.value)
}
} catch (e) {
emitError(e as AxiosError)
Expand Down
1 change: 1 addition & 0 deletions packages/entities/entities-consumers/sandbox/pages/ConsumerFormPage.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,7 @@ const konnectConfig = ref<KonnectConsumerFormConfig>({
apiBaseUrl: '/us/kong-api/konnect-api',
controlPlaneId,
cancelRoute: { name: 'consumer-list' },
jsonYamlFormsEnabled: true,
})
const KMConfig = ref<KongManagerConsumerFormConfig>({
Expand Down
22 changes: 12 additions & 10 deletions packages/entities/entities-consumers/src/components/ConsumerForm.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -210,27 +210,29 @@ const getUrl = (action: 'validate' | 'create' | 'edit'): string => {
const isFormValid = computed((): boolean => !!state.fields.username || !!state.fields.customId)
const changesExist = computed((): boolean => JSON.stringify(state.fields) !== JSON.stringify(originalFields))
const payload: ConsumerPayload = {
username: state.fields.username || null,
custom_id: state.fields.customId || null,
tags: state.fields.tags.split(',')?.map((tag: string) => String(tag || '')
.trim())?.filter((tag: string) => tag !== ''),
}
const payload = computed((): ConsumerPayload => {
return {
username: state.fields.username || null,
custom_id: state.fields.customId || null,
tags: state.fields.tags.split(',')?.map((tag: string) => String(tag || '')
.trim())?.filter((tag: string) => tag !== ''),
}
})
const submitData = async (): Promise<void> => {
try {
state.readonly = true
let response: AxiosResponse | undefined
await axiosInstance.post(getUrl('validate'), payload)
await axiosInstance.post(getUrl('validate'), payload.value)
if (formType.value === 'create') {
response = await axiosInstance.post(getUrl('create'), payload)
response = await axiosInstance.post(getUrl('create'), payload.value)
} else if (formType.value === 'edit') {
response = props.config?.app === 'konnect'
? await axiosInstance.put(getUrl('edit'), payload)
: await axiosInstance.patch(getUrl('edit'), payload)
? await axiosInstance.put(getUrl('edit'), payload.value)
: await axiosInstance.patch(getUrl('edit'), payload.value)
}
updateFormValues(response?.data)
Expand Down
2 changes: 2 additions & 0 deletions packages/entities/entities-gateway-services/sandbox/pages/GatewayServiceFormPage.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,9 @@ const konnectConfig = ref<KonnectGatewayServiceFormConfig>({
// Set the root `.env.development.local` variable to a control plane your PAT can access
controlPlaneId,
cancelRoute: { name: 'gateway-services-list' },
jsonYamlFormsEnabled: true,
})
const kongManagerConfig = ref<KongManagerGatewayServiceFormConfig>({
app: 'kongManager',
// Uncomment to test compatibility with different Gateway editions and versions
Expand Down
8 changes: 4 additions & 4 deletions packages/entities/entities-gateway-services/src/components/GatewayServiceForm.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
:edit-id="gatewayServiceId"
:error-message="form.errorMessage"
:fetch-url="fetchUrl"
:form-fields="getProcessedPayload()"
:form-fields="getProcessedPayload"
:is-readonly="form.isReadonly"
@cancel="handleClickCancel"
@fetch:error="(err: any) => $emit('error', err)"
Expand Down Expand Up @@ -765,18 +765,18 @@ const getPayload = (): Record<string, any> => {
return requestBody
}
const getProcessedPayload = (): Record<string, any> => {
const getProcessedPayload = computed((): Record<string, any> => {
validateUrl()
const processedPayload = getPayload()
saveTlsVerify(processedPayload)
return processedPayload
}
})
const saveFormData = async (): Promise<AxiosResponse | undefined> => {
try {
form.isReadonly = true
const payload = getProcessedPayload()
const payload = getProcessedPayload.value
let response: AxiosResponse | undefined
Expand Down
1 change: 1 addition & 0 deletions packages/entities/entities-key-sets/sandbox/pages/KeySetFormPage.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@ const konnectConfig = ref<KonnectKeySetFormConfig>({
// Set the root `.env.development.local` variable to a control plane your PAT can access
controlPlaneId,
cancelRoute: { name: 'key-set-list' },
jsonYamlFormsEnabled: true,
})
const kongManagerConfig = ref<KongManagerKeySetFormConfig>({
app: 'kongManager',
Expand Down
16 changes: 9 additions & 7 deletions packages/entities/entities-key-sets/src/components/KeySetForm.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -159,10 +159,12 @@ const submitUrl = computed<string>(() => {
return url
})
const requestBody: Record<string, any> = {
name: form.fields.name,
tags: form.fields.tags?.split(',')?.map((tag: string) => String(tag || '').trim())?.filter((tag: string) => tag !== '') || '',
}
const requestBody = computed((): Record<string, any> => {
return {
name: form.fields.name,
tags: form.fields.tags?.split(',')?.map((tag: string) => String(tag || '').trim())?.filter((tag: string) => tag !== '') || '',
}
})
const saveFormData = async (): Promise<void> => {
try {
Expand All @@ -171,13 +173,13 @@ const saveFormData = async (): Promise<void> => {
let response: AxiosResponse | undefined
if (formType.value === 'create') {
response = await axiosInstance.post(submitUrl.value, requestBody)
response = await axiosInstance.post(submitUrl.value, requestBody.value)
} else if (formType.value === 'edit') {
response = props.config?.app === 'konnect'
// Note: Konnect currently uses PUT because PATCH is not fully supported in Koko
// If this changes, the `edit` form methods should be re-evaluated/updated accordingly
? await axiosInstance.put(submitUrl.value, requestBody)
: await axiosInstance.patch(submitUrl.value, requestBody)
? await axiosInstance.put(submitUrl.value, requestBody.value)
: await axiosInstance.patch(submitUrl.value, requestBody.value)
}
if (response) {
Expand Down
1 change: 1 addition & 0 deletions packages/entities/entities-keys/sandbox/pages/KeyFormPage.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,7 @@ const konnectConfig = ref<KonnectKeyFormConfig>({
// Set the root `.env.development.local` variable to a control plane your PAT can access
controlPlaneId,
cancelRoute: { name: 'key-list' },
jsonYamlFormsEnabled: true,
})
const kongManagerConfig = ref<KongManagerKeyFormConfig>({
Expand Down
24 changes: 13 additions & 11 deletions packages/entities/entities-keys/src/components/KeyForm.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -333,14 +333,16 @@ const submitUrl = computed<string>(() => {
return url
})
const requestBody: Record<string, any> = {
kid: form.fields.key_id,
name: form.fields.name || null,
tags: form.fields.tags?.split(',')?.map((tag: string) => String(tag || '').trim())?.filter((tag: string) => tag !== '') || [],
set: form.fields.key_set ? { id: form.fields.key_set } : null,
jwk: form.fields.key_format === 'jwk' ? form.fields.jwk : null,
pem: form.fields.key_format === 'pem' ? { private_key: form.fields.private_key, public_key: form.fields.public_key } : null,
}
const requestBody = computed((): Record<string, any> => {
return {
kid: form.fields.key_id,
name: form.fields.name || null,
tags: form.fields.tags?.split(',')?.map((tag: string) => String(tag || '').trim())?.filter((tag: string) => tag !== '') || [],
set: form.fields.key_set ? { id: form.fields.key_set } : null,
jwk: form.fields.key_format === 'jwk' ? form.fields.jwk : null,
pem: form.fields.key_format === 'pem' ? { private_key: form.fields.private_key, public_key: form.fields.public_key } : null,
}
})
const saveFormData = async (): Promise<void> => {
try {
Expand All @@ -349,13 +351,13 @@ const saveFormData = async (): Promise<void> => {
let response: AxiosResponse | undefined
if (formType.value === 'create') {
response = await axiosInstance.post(submitUrl.value, requestBody)
response = await axiosInstance.post(submitUrl.value, requestBody.value)
} else if (formType.value === 'edit') {
response = props.config?.app === 'konnect'
// Note: Konnect currently uses PUT because PATCH is not fully supported in Koko
// If this changes, the `edit` form methods should be re-evaluated/updated accordingly
? await axiosInstance.put(submitUrl.value, requestBody)
: await axiosInstance.patch(submitUrl.value, requestBody)
? await axiosInstance.put(submitUrl.value, requestBody.value)
: await axiosInstance.patch(submitUrl.value, requestBody.value)
}
if (response) {
Expand Down
14 changes: 7 additions & 7 deletions packages/entities/entities-plugins/src/components/PluginForm.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@
:edit-id="pluginId"
:error-message="form.errorMessage"
:fetch-url="fetchUrl"
:form-fields="getRequestBody()"
:form-fields="getRequestBody"
:is-readonly="form.isReadonly"
@cancel="handleClickCancel"
@fetch:error="(err: any) => $emit('error', err)"
Expand Down Expand Up @@ -965,7 +965,7 @@ const isCustomPlugin = computed((): boolean => {
return !Object.keys(pluginMetaData).includes(props.pluginType)
})
const getRequestBody = () => {
const getRequestBody = computed(() => {
const requestBody: Record<string, any> = submitPayload.value
// credentials incorrectly build the entity id object
if (treatAsCredential.value) {
Expand All @@ -980,7 +980,7 @@ const getRequestBody = () => {
delete requestBody.created_at
}
return requestBody
}
})
// make the actual API request to save on create/edit
const saveFormData = async (): Promise<void> => {
Expand All @@ -997,17 +997,17 @@ const saveFormData = async (): Promise<void> => {
// TODO: determine validate URL for credentials
// don't validate custom plugins
if (!treatAsCredential.value && !isCustomPlugin.value) {
await axiosInstance.post(validateSubmitUrl.value, getRequestBody())
await axiosInstance.post(validateSubmitUrl.value, getRequestBody.value)
}
if (formType.value === 'create') {
response = await axiosInstance.post(submitUrl.value, getRequestBody())
response = await axiosInstance.post(submitUrl.value, getRequestBody.value)
} else if (formType.value === 'edit') {
response = props.config.app === 'konnect'
// Note: Konnect currently uses PUT because PATCH is not fully supported in Koko
// If this changes, the `edit` form methods should be re-evaluated/updated accordingly
? await axiosInstance.put(submitUrl.value, getRequestBody())
: await axiosInstance.patch(submitUrl.value, getRequestBody())
? await axiosInstance.put(submitUrl.value, getRequestBody.value)
: await axiosInstance.patch(submitUrl.value, getRequestBody.value)
}
// Set initial state of `formFieldsOriginal` to these values in order to detect changes
Expand Down
1 change: 1 addition & 0 deletions packages/entities/entities-routes/sandbox/pages/RouteFormPage.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,7 @@ const konnectConfig = ref<KonnectRouteFormConfig>({
// Set the root `.env.development.local` variable to a control plane your PAT can access
controlPlaneId,
cancelRoute: { name: 'route-list' },
jsonYamlFormsEnabled: true,
})
const kongManagerConfig = ref<KongManagerRouteFormConfig>({
Expand Down
Loading

0 comments on commit 6e37c69

Please sign in to comment.