From dcb4c2c477c3b3bf5444cf459bff417633a83223 Mon Sep 17 00:00:00 2001 From: Lucas ONeil Date: Wed, 15 Nov 2023 17:31:59 -0800 Subject: [PATCH] Extract config item component Signed-off-by: Lucas ONeil --- .../src/components/common/ConfigItem.vue | 32 ++++ .../innkeeper/config/ServerConfig.vue | 162 +++++++++--------- .../frontend/src/plugins/i18n/locales/en.json | 35 ++-- .../frontend/src/plugins/i18n/locales/fr.json | 1 + .../frontend/src/plugins/i18n/locales/ja.json | 3 +- .../test/components/common/ConfigItem.test.ts | 49 ++++++ 6 files changed, 179 insertions(+), 103 deletions(-) create mode 100644 services/tenant-ui/frontend/src/components/common/ConfigItem.vue create mode 100644 services/tenant-ui/frontend/test/components/common/ConfigItem.test.ts diff --git a/services/tenant-ui/frontend/src/components/common/ConfigItem.vue b/services/tenant-ui/frontend/src/components/common/ConfigItem.vue new file mode 100644 index 000000000..6aedfe6e8 --- /dev/null +++ b/services/tenant-ui/frontend/src/components/common/ConfigItem.vue @@ -0,0 +1,32 @@ + + + diff --git a/services/tenant-ui/frontend/src/components/innkeeper/config/ServerConfig.vue b/services/tenant-ui/frontend/src/components/innkeeper/config/ServerConfig.vue index e266e8466..938edd60c 100644 --- a/services/tenant-ui/frontend/src/components/innkeeper/config/ServerConfig.vue +++ b/services/tenant-ui/frontend/src/components/innkeeper/config/ServerConfig.vue @@ -6,17 +6,19 @@
-

- {{ $t('serverConfig.acapyVersion') }} - {{ serverConfig?.config?.version }} -

-

- {{ $t('serverConfig.tractionProxy') }} - {{ config.frontend.tenantProxyPath }} - - - -

+ + + + +
@@ -25,22 +27,22 @@ :legend="$t('serverConfig.ledger.ledgerDetails')" :toggleable="true" > -

+

{{ $t('serverConfig.ledger.ledgerList') }}

- - - + + + -

- {{ $t('serverConfig.ledger.quickConnect') }} - {{ config.frontend.quickConnectEndorserName }} -

-

- {{ $t('serverConfig.ledger.default') }} - {{ serverConfig?.config?.['ledger.write_ledger'] }} -

+ + @@ -49,22 +51,18 @@ :legend="$t('serverConfig.storage.title')" :toggleable="true" > -

- {{ - $t('serverConfig.storage.walletStorageConfig') - }} - {{ serverConfig?.config?.['wallet.storage_config'] }} -

-

- {{ - $t('serverConfig.storage.walletStorageType') - }} - {{ serverConfig?.config?.['wallet.storage_type'] }} -

-

- {{ $t('serverConfig.storage.walletType') }} - {{ serverConfig?.config?.['wallet.type'] }} -

+ + + @@ -87,49 +85,42 @@ :legend="$t('serverConfig.tenants.title')" :toggleable="true" > -

- {{ $t('serverConfig.tenants.token') }} - {{ +

{{ $t('serverConfig.tenants.reservation') }}

-

- {{ - $t('serverConfig.tenants.reservationExpiry') - }} - {{ + + + - {{ $t('serverConfig.tenants.reservationOidc') }} - {{ config.frontend.showOIDCReservationLogin }} -

+ " + /> +
@@ -152,23 +143,23 @@ :legend="$t('serverConfig.tenantUi.tenantUi')" :toggleable="true" > -

- {{ $t('serverConfig.tenantUi.showWrite') }} - {{ config.frontend.showWritableComponents }} -

-

- {{ $t('serverConfig.tenantUi.sessionExpiry') }} - {{ + + + @@ -201,6 +192,7 @@ import VueJsonPretty from 'vue-json-pretty'; import { useToast } from 'vue-toastification'; // Components import { useConfigStore, useInnkeeperTenantsStore } from '@/store'; +import ConfigItem from '@/components/common/ConfigItem.vue'; import MainCardContent from '../../layout/mainCard/MainCardContent.vue'; import PluginList from '@/components/about/PluginList.vue'; diff --git a/services/tenant-ui/frontend/src/plugins/i18n/locales/en.json b/services/tenant-ui/frontend/src/plugins/i18n/locales/en.json index e8724a06b..218ea8a25 100644 --- a/services/tenant-ui/frontend/src/plugins/i18n/locales/en.json +++ b/services/tenant-ui/frontend/src/plugins/i18n/locales/en.json @@ -50,6 +50,7 @@ "alias": "Alias", "apiKey": "API Key", "byName": "Search By Name", + "configDelim": ": ", "confirmation": "Confirmation", "connectionName": "Connection Name", "contactName": "Contact Name", @@ -416,42 +417,42 @@ "phone": "Phone / Mobile" }, "serverConfig": { - "acapyVersion": "ACA-Py Version:", + "acapyVersion": "ACA-Py Version", "expand": "Show full ACA-Py server config", "ledger": { - "default": "Default base ledger:", + "default": "Default base ledger", "ledgerDetails": "Ledger Details", "ledgerList": "Ledger List", - "quickConnect": "Tenant UI quick-connect endorser:" + "quickConnect": "Tenant UI quick-connect endorser" }, "serverConfig": "Server Configuration", "storage": { - "multitenantWalletName": "Multitenant Wallet Name:", - "multitenantWalletType": "Multitenant Wallet Type:", + "multitenantWalletName": "Multitenant Wallet Name", + "multitenantWalletType": "Multitenant Wallet Type", "title": "Storage", - "walletStorageConfig": "Wallet Storage Config:", - "walletStorageType": "Wallet Storage Type:", - "walletType": "Wallet Type:" + "walletStorageConfig": "Wallet Storage Config", + "walletStorageType": "Wallet Storage Type", + "walletType": "Wallet Type" }, "tenants": { "reservation": "Reservation", - "reservationAutoApprove": "Auto approve reservations:", - "reservationAutoIssuer": "Auto issuance approval:", - "reservationExpiry": "Reservation expiry (minutes):", + "reservationAutoApprove": "Auto approve reservations", + "reservationAutoIssuer": "Auto issuance approval", + "reservationExpiry": "Reservation expiry (minutes)", "reservationForm": "Reservation Form", - "reservationOidc": "OIDC login requried for reservation:", + "reservationOidc": "OIDC login requried for reservation", "title": "Tenants/Reservations", - "token": "Token Expiry:" + "token": "Token Expiry" }, "tenantUi": { "expand": "Show Full Tenant UI Frontend Config", - "oidc": "OIDC Endpoint:", - "sessionExpiry": "Frontend session expiry:", + "oidc": "OIDC Endpoint", + "sessionExpiry": "Frontend session expiry", "sessionExpiryVal": "{0} seconds (Countdown: {1} seconds)", - "showWrite": "Show 'Write' Components:", + "showWrite": "Show 'Write' Components", "tenantUi": "Tenant UI" }, - "tractionProxy": "Traction Proxy URL:" + "tractionProxy": "Traction Proxy URL" }, "session": { "countdown": "You are going to be logged out in { seconds } seconds...", diff --git a/services/tenant-ui/frontend/src/plugins/i18n/locales/fr.json b/services/tenant-ui/frontend/src/plugins/i18n/locales/fr.json index b8de21e0e..5308346c7 100644 --- a/services/tenant-ui/frontend/src/plugins/i18n/locales/fr.json +++ b/services/tenant-ui/frontend/src/plugins/i18n/locales/fr.json @@ -50,6 +50,7 @@ "alias": "Alias ", "apiKey": "API Key ", "byName": "Search By Name ", + "configDelim": ": ", "confirmation": "Confirmation ", "connectionName": "Connection Name ", "contactName": "Contact Name ", diff --git a/services/tenant-ui/frontend/src/plugins/i18n/locales/ja.json b/services/tenant-ui/frontend/src/plugins/i18n/locales/ja.json index 15be8b2e3..b371c462a 100644 --- a/services/tenant-ui/frontend/src/plugins/i18n/locales/ja.json +++ b/services/tenant-ui/frontend/src/plugins/i18n/locales/ja.json @@ -50,6 +50,7 @@ "alias": "Alias ", "apiKey": "API Key ", "byName": "Search By Name ", + "configDelim": ": ", "confirmation": "Confirmation ", "connectionName": "Connection Name ", "contactName": "Contact Name ", @@ -554,4 +555,4 @@ }, "tractionProxy": "Traction Proxy URL: " } -} \ No newline at end of file +} diff --git a/services/tenant-ui/frontend/test/components/common/ConfigItem.test.ts b/services/tenant-ui/frontend/test/components/common/ConfigItem.test.ts new file mode 100644 index 000000000..5b8f0dfc9 --- /dev/null +++ b/services/tenant-ui/frontend/test/components/common/ConfigItem.test.ts @@ -0,0 +1,49 @@ +import { mount, shallowMount } from '@vue/test-utils'; +import PrimeVue from 'primevue/config'; +import { describe, expect, test } from 'vitest'; + +import ConfigItem from '@/components/common/ConfigItem.vue'; + +const mountConfigItem = () => + mount(ConfigItem, { + props: { + title: 'the_header', + content: 'the_content', + }, + global: { + plugins: [PrimeVue], + }, + }); + +const mountConfigItemSlot = () => + mount(ConfigItem, { + slots: { + title: 'the_header', + content: '

test
', + }, + global: { + plugins: [PrimeVue], + }, + }); + +describe('ConfigItem', () => { + test('mount renders with props', async () => { + const wrapper = mountConfigItem(); + + const strongTitle = wrapper.find('strong'); + const spanContent = wrapper.find('span'); + expect(strongTitle.html()).toContain('the_header'); + expect(strongTitle.html()).toContain('configDelim'); + expect(spanContent.html()).toContain('the_content'); + }); + + test('mount renders with slots', async () => { + const wrapper = mountConfigItemSlot(); + + const strongTitle = wrapper.find('strong'); + const spanContent = wrapper.find('div'); + expect(strongTitle.html()).toContain('the_header'); + expect(strongTitle.html()).toContain('configDelim'); + expect(spanContent.html()).toContain('test'); + }); +});