Skip to content

Commit

Permalink
fix(entities-consumers): group form fields [KHCP-11029] (#1300)
Browse files Browse the repository at this point in the history 
* chore(deps): bump kongponents

* fix(entities-consumers): group form fields [KHCP-11029]

* fix: stylelint:fix
  • Loading branch information
@portikM
portikM authored Mar 28, 2024
1 parent 360ce2d commit c9375c0
Show file tree
Hide file tree
Showing 28 changed files with 528 additions and 275 deletions.
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@
"@digitalroute/cz-conventional-changelog-for-jira": "^8.0.1",
"@evilmartians/lefthook": "^1.6.7",
"@kong/design-tokens": "1.12.10",
"@kong/kongponents": "9.0.0-alpha.123",
"@kong/kongponents": "9.0.0-alpha.124",
"@rushstack/eslint-patch": "^1.7.2",
"@types/flat": "^5.0.5",
"@types/js-yaml": "^4.0.9",
Expand Down
4 changes: 2 additions & 2 deletions packages/analytics/analytics-chart/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,14 +22,14 @@
},
"peerDependencies": {
"@kong-ui-public/i18n": "workspace:^",
"@kong/kongponents": "9.0.0-alpha.123",
"@kong/kongponents": "9.0.0-alpha.124",
"vue": ">= 3.3.13 < 4"
},
"devDependencies": {
"@kong-ui-public/i18n": "workspace:^",
"@kong-ui-public/sandbox-layout": "workspace:^",
"@kong/design-tokens": "1.12.10",
"@kong/kongponents": "9.0.0-alpha.123",
"@kong/kongponents": "9.0.0-alpha.124",
"@types/uuid": "^9.0.8",
"file-saver": "^2.0.5",
"lodash.mapkeys": "^4.6.0",
Expand Down
2 changes: 1 addition & 1 deletion packages/analytics/analytics-metric-provider/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@
"@kong-ui-public/analytics-config-store": "workspace:^",
"@kong-ui-public/analytics-utilities": "workspace:^",
"@kong-ui-public/i18n": "workspace:^",
"@kong/kongponents": "9.0.0-alpha.123",
"@kong/kongponents": "9.0.0-alpha.124",
"pinia": ">= 2.1.7 < 3"
}
}
4 changes: 2 additions & 2 deletions packages/analytics/dashboard-renderer/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@
"@kong-ui-public/i18n": "workspace:^",
"@kong-ui-public/sandbox-layout": "workspace:^",
"@kong/design-tokens": "1.12.10",
"@kong/kongponents": "9.0.0-alpha.123",
"@kong/kongponents": "9.0.0-alpha.124",
"json-schema-to-ts": "^3.0.1",
"pinia": ">= 2.1.7 < 3",
"swrv": "^1.0.4",
Expand Down Expand Up @@ -73,7 +73,7 @@
"@kong-ui-public/analytics-metric-provider": "workspace:^",
"@kong-ui-public/analytics-utilities": "workspace:^",
"@kong-ui-public/i18n": "workspace:^",
"@kong/kongponents": "9.0.0-alpha.123",
"@kong/kongponents": "9.0.0-alpha.124",
"swrv": "^1.0.4",
"vue": ">= 3.3.13 < 4"
},
Expand Down
4 changes: 2 additions & 2 deletions packages/analytics/metric-cards/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,12 +39,12 @@
"test:unit:open": "cross-env FORCE_COLOR=1 vitest --ui"
},
"peerDependencies": {
"@kong/kongponents": "9.0.0-alpha.123",
"@kong/kongponents": "9.0.0-alpha.124",
"vue": ">= 3.3.13 < 4"
},
"devDependencies": {
"@kong/design-tokens": "1.12.10",
"@kong/kongponents": "9.0.0-alpha.123",
"@kong/kongponents": "9.0.0-alpha.124",
"vue": "^3.4.21"
},
"dependencies": {
Expand Down
4 changes: 2 additions & 2 deletions packages/core/app-layout/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@
"test:unit:open": "cross-env FORCE_COLOR=1 vitest --ui"
},
"peerDependencies": {
"@kong/kongponents": "9.0.0-alpha.123",
"@kong/kongponents": "9.0.0-alpha.124",
"vue": ">= 3.3.13 < 4",
"vue-router": "^4.3.0"
},
Expand All @@ -51,7 +51,7 @@
},
"devDependencies": {
"@kong/design-tokens": "1.12.10",
"@kong/kongponents": "9.0.0-alpha.123",
"@kong/kongponents": "9.0.0-alpha.124",
"@types/lodash.clonedeep": "^4.5.9",
"vue": "^3.4.21",
"vue-router": "^4.3.0"
Expand Down
4 changes: 2 additions & 2 deletions packages/core/documentation/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@
"devDependencies": {
"@kong-ui-public/i18n": "workspace:^",
"@kong/design-tokens": "1.12.10",
"@kong/kongponents": "9.0.0-alpha.123",
"@kong/kongponents": "9.0.0-alpha.124",
"axios": "^1.6.8",
"vue": ">= 3.3.13 < 4"
},
Expand All @@ -65,7 +65,7 @@
},
"peerDependencies": {
"@kong-ui-public/i18n": "workspace:^",
"@kong/kongponents": "9.0.0-alpha.123",
"@kong/kongponents": "9.0.0-alpha.124",
"vue": "^3.4.21"
},
"dependencies": {
Expand Down
2 changes: 1 addition & 1 deletion packages/core/expressions/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@
"devDependencies": {
"@kong/atc-router": "1.6.0-rc.1",
"@kong/design-tokens": "1.12.10",
"@kong/kongponents": "9.0.0-alpha.123",
"@kong/kongponents": "9.0.0-alpha.124",
"monaco-editor": "0.47.0",
"vite-plugin-monaco-editor": "^1.1.0",
"vite-plugin-top-level-await": "^1.4.1",
Expand Down
4 changes: 2 additions & 2 deletions packages/core/forms/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,13 +56,13 @@
},
"peerDependencies": {
"@kong-ui-public/i18n": "workspace:^",
"@kong/kongponents": "9.0.0-alpha.123",
"@kong/kongponents": "9.0.0-alpha.124",
"vue": "^3.4.21"
},
"devDependencies": {
"@kong-ui-public/i18n": "workspace:^",
"@kong/design-tokens": "1.12.10",
"@kong/kongponents": "9.0.0-alpha.123",
"@kong/kongponents": "9.0.0-alpha.124",
"@types/lodash": "^4.14.202",
"pug": "^3.0.2"
},
Expand Down
4 changes: 2 additions & 2 deletions packages/core/misc-widgets/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,12 +40,12 @@
},
"peerDependencies": {
"@kong-ui-public/i18n": "workspace:^",
"@kong/kongponents": "9.0.0-alpha.123",
"@kong/kongponents": "9.0.0-alpha.124",
"vue": ">= 3.3.13 < 4"
},
"devDependencies": {
"@kong-ui-public/i18n": "workspace:^",
"@kong/kongponents": "9.0.0-alpha.123",
"@kong/kongponents": "9.0.0-alpha.124",
"vue": "^3.4.21"
},
"repository": {
Expand Down
4 changes: 2 additions & 2 deletions packages/core/sandbox-layout/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@
},
"devDependencies": {
"@kong/design-tokens": "1.12.10",
"@kong/kongponents": "9.0.0-alpha.123",
"@kong/kongponents": "9.0.0-alpha.124",
"vue": "^3.4.21",
"vue-router": "^4.3.0"
},
Expand All @@ -62,7 +62,7 @@
"errorLimit": "200KB"
},
"peerDependencies": {
"@kong/kongponents": "9.0.0-alpha.123",
"@kong/kongponents": "9.0.0-alpha.124",
"vue": ">= 3.3.13 < 4"
},
"dependencies": {
Expand Down
4 changes: 2 additions & 2 deletions packages/entities/entities-certificates/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,15 +22,15 @@
},
"peerDependencies": {
"@kong-ui-public/i18n": "workspace:^",
"@kong/kongponents": "9.0.0-alpha.123",
"@kong/kongponents": "9.0.0-alpha.124",
"axios": "^1.6.8",
"vue": ">= 3.3.13 < 4",
"vue-router": "^4.3.0"
},
"devDependencies": {
"@kong-ui-public/i18n": "workspace:^",
"@kong/design-tokens": "1.12.10",
"@kong/kongponents": "9.0.0-alpha.123",
"@kong/kongponents": "9.0.0-alpha.124",
"axios": "^1.6.8",
"vue": "^3.4.21",
"vue-router": "^4.3.0"
Expand Down
4 changes: 2 additions & 2 deletions packages/entities/entities-consumer-credentials/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,15 +22,15 @@
},
"peerDependencies": {
"@kong-ui-public/i18n": "workspace:^",
"@kong/kongponents": "9.0.0-alpha.123",
"@kong/kongponents": "9.0.0-alpha.124",
"axios": "^1.6.8",
"vue": ">= 3.3.13 < 4",
"vue-router": "^4.3.0"
},
"devDependencies": {
"@kong-ui-public/i18n": "workspace:^",
"@kong/design-tokens": "1.12.10",
"@kong/kongponents": "9.0.0-alpha.123",
"@kong/kongponents": "9.0.0-alpha.124",
"axios": "^1.6.8",
"vue": "^3.4.21",
"vue-router": "^4.3.0"
Expand Down
4 changes: 2 additions & 2 deletions packages/entities/entities-consumer-groups/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,15 +22,15 @@
},
"peerDependencies": {
"@kong-ui-public/i18n": "workspace:^",
"@kong/kongponents": "9.0.0-alpha.123",
"@kong/kongponents": "9.0.0-alpha.124",
"axios": "^1.6.8",
"vue": ">= 3.3.13 < 4",
"vue-router": "^4.3.0"
},
"devDependencies": {
"@kong-ui-public/i18n": "workspace:^",
"@kong/design-tokens": "1.12.10",
"@kong/kongponents": "9.0.0-alpha.123",
"@kong/kongponents": "9.0.0-alpha.124",
"axios": "^1.6.8",
"vue": "^3.4.21",
"vue-router": "^4.3.0"
Expand Down
4 changes: 2 additions & 2 deletions packages/entities/entities-consumers/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,15 +22,15 @@
},
"peerDependencies": {
"@kong-ui-public/i18n": "workspace:^",
"@kong/kongponents": "9.0.0-alpha.123",
"@kong/kongponents": "9.0.0-alpha.124",
"axios": "^1.6.8",
"vue": ">= 3.3.13 < 4",
"vue-router": "^4.3.0"
},
"devDependencies": {
"@kong-ui-public/i18n": "workspace:^",
"@kong/design-tokens": "1.12.10",
"@kong/kongponents": "9.0.0-alpha.123",
"@kong/kongponents": "9.0.0-alpha.124",
"axios": "^1.6.8",
"vue": "^3.4.21",
"vue-router": "^4.3.0"
Expand Down
110 changes: 62 additions & 48 deletions packages/entities/entities-consumers/src/components/ConsumerForm.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,10 @@
:title="t('consumers.form.info.title')"
>
<div>
<h3 class="fields-group-title">
<h3
:id="`fields-group-title-${uuid}`"
class="fields-group-title"
>
{{ t('consumers.form.consumer_identification.title') }}*
</h3>
<p class="fields-group-text">
Expand All @@ -30,53 +33,55 @@
</div>

<KCard>
<KInput
v-model.trim="state.fields.username"
autocomplete="off"
class="username-field"
data-testid="consumer-form-username"
:label="t('consumers.fields.username.label')"
:label-attributes="{
tooltipAttributes: { maxWidth: '250' }
}"
:placeholder="t('consumers.fields.username.placeholder')"
:readonly="state.readonly"
type="text"
>
<template #label-tooltip>
<i18nT
keypath="consumers.fields.username.tooltip"
scope="global"
>
<template #custom_id>
<code>{{ t('consumers.fields.username.custom_id') }}</code>
</template>
</i18nT>
</template>
</KInput>

<KInput
v-model.trim="state.fields.customId"
autocomplete="off"
data-testid="consumer-form-custom-id"
:label="t('consumers.fields.custom_id.label')"
:label-attributes="{
tooltipAttributes: { maxWidth: '250' } }"
:placeholder="t('consumers.fields.custom_id.placeholder')"
:readonly="state.readonly"
type="text"
>
<template #label-tooltip>
<i18nT
keypath="consumers.fields.custom_id.tooltip"
scope="global"
>
<template #username>
<code>{{ t('consumers.fields.custom_id.username') }}</code>
</template>
</i18nT>
</template>
</KInput>
<fieldset :aria-labelledby="`fields-group-title-${uuid}`">
<KInput
v-model.trim="state.fields.username"
autocomplete="off"
class="username-field"
data-testid="consumer-form-username"
:label="t('consumers.fields.username.label')"
:label-attributes="{
tooltipAttributes: { maxWidth: '250' }
}"
:placeholder="t('consumers.fields.username.placeholder')"
:readonly="state.readonly"
type="text"
>
<template #label-tooltip>
<i18nT
keypath="consumers.fields.username.tooltip"
scope="global"
>
<template #custom_id>
<code>{{ t('consumers.fields.username.custom_id') }}</code>
</template>
</i18nT>
</template>
</KInput>

<KInput
v-model.trim="state.fields.customId"
autocomplete="off"
data-testid="consumer-form-custom-id"
:label="t('consumers.fields.custom_id.label')"
:label-attributes="{
tooltipAttributes: { maxWidth: '250' } }"
:placeholder="t('consumers.fields.custom_id.placeholder')"
:readonly="state.readonly"
type="text"
>
<template #label-tooltip>
<i18nT
keypath="consumers.fields.custom_id.tooltip"
scope="global"
>
<template #username>
<code>{{ t('consumers.fields.custom_id.username') }}</code>
</template>
</i18nT>
</template>
</KInput>
</fieldset>
</KCard>

<KInput
Expand Down Expand Up @@ -114,6 +119,7 @@ import type {
import { useRouter } from 'vue-router'
import type { AxiosError, AxiosResponse } from 'axios'
import endpoints from '../consumers-endpoints'
import { v4 as uuidv4 } from 'uuid'
const props = defineProps({
/** The base konnect or kongManger config. Pass additional config props in the shared entity component as needed. */
Expand Down Expand Up @@ -148,6 +154,7 @@ const { axiosInstance } = useAxios({
headers: props.config?.requestHeaders,
})
const { getMessageFromError } = useErrors()
const uuid = uuidv4()
const state = reactive<ConsumerState>({
fields: {
Expand Down Expand Up @@ -256,7 +263,14 @@ const submitData = async (): Promise<void> => {
column-gap: $kui-space-130;
}
}
fieldset {
border: none;
margin: 0;
padding: 0;
}
}
.fields-group {
&-title {
color: $kui-color-text-neutral-strongest;
Expand Down
4 changes: 2 additions & 2 deletions packages/entities/entities-gateway-services/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,15 +22,15 @@
},
"peerDependencies": {
"@kong-ui-public/i18n": "workspace:^",
"@kong/kongponents": "9.0.0-alpha.123",
"@kong/kongponents": "9.0.0-alpha.124",
"axios": "^1.6.8",
"vue": ">= 3.3.13 < 4",
"vue-router": "^4.3.0"
},
"devDependencies": {
"@kong-ui-public/i18n": "workspace:^",
"@kong/design-tokens": "1.12.10",
"@kong/kongponents": "9.0.0-alpha.123",
"@kong/kongponents": "9.0.0-alpha.124",
"axios": "^1.6.8",
"vue": "^3.4.21",
"vue-router": "^4.3.0"
Expand Down
Loading

0 comments on commit c9375c0

Please sign in to comment.