From 782abed7c11820705d706b2d2943f60271d421c8 Mon Sep 17 00:00:00 2001
From: Jannik Stehle <jannik.stehle@gmail.com>
Date: Wed, 3 May 2023 10:39:33 +0200
Subject: [PATCH 1/3] Fix highlighting of the currently selected language

---
 .../enhancement-add-notifications-setting     |   1 +
 packages/web-runtime/src/helpers/settings.ts  |  53 +++++++++
 packages/web-runtime/src/pages/account.vue    |  35 +++---
 .../tests/unit/pages/account.spec.ts          | 107 +-----------------
 4 files changed, 76 insertions(+), 120 deletions(-)
 create mode 100644 packages/web-runtime/src/helpers/settings.ts

diff --git a/changelog/unreleased/enhancement-add-notifications-setting b/changelog/unreleased/enhancement-add-notifications-setting
index 9facef34ac7..146f6d680b6 100644
--- a/changelog/unreleased/enhancement-add-notifications-setting
+++ b/changelog/unreleased/enhancement-add-notifications-setting
@@ -4,4 +4,5 @@ We've added notification setting to the account page,
 where the user can turn on or off receiving emails for notifications.
 
 https://github.com/owncloud/web/pull/8911
+https://github.com/owncloud/web/pull/8972
 https://github.com/owncloud/web/issues/8904
diff --git a/packages/web-runtime/src/helpers/settings.ts b/packages/web-runtime/src/helpers/settings.ts
new file mode 100644
index 00000000000..3f9a8e78018
--- /dev/null
+++ b/packages/web-runtime/src/helpers/settings.ts
@@ -0,0 +1,53 @@
+export interface SettingValue {
+  identifier: {
+    bundle: string
+    extension: string
+    setting: string
+  }
+  value: {
+    accountUuid: string
+    bundleId: string
+    id: string
+    resource: {
+      type: string
+    }
+    settingId: string
+    boolValue?: boolean
+    listValue?: {
+      values: {
+        stringValue: string
+      }[]
+    }
+  }
+}
+
+export interface AccountBundleSetting {
+  description: string
+  displayName: string
+  id: string
+  name: string
+  resource: {
+    type: string
+  }
+  singleChoiceValue?: {
+    options: Record<string, any>[]
+  }
+  boolValue?: Record<string, any>
+}
+
+export interface AccountBundle {
+  displayName: string
+  extension: string
+  id: string
+  name: string
+  resource: {
+    type: string
+  }
+  settings: AccountBundleSetting[]
+  type: string
+}
+
+export interface LanguageOption {
+  label: string
+  value: string
+}
diff --git a/packages/web-runtime/src/pages/account.vue b/packages/web-runtime/src/pages/account.vue
index 20e836eea2d..414e0b1a2db 100644
--- a/packages/web-runtime/src/pages/account.vue
+++ b/packages/web-runtime/src/pages/account.vue
@@ -124,6 +124,7 @@
 <script lang="ts">
 import { mapActions } from 'vuex'
 import EditPasswordModal from '../components/EditPasswordModal.vue'
+import { AccountBundle, LanguageOption, SettingValue } from '../helpers/settings'
 import { computed, defineComponent, onMounted, unref, ref } from 'vue'
 import {
   useCapabilityGraphPersonalDataExport,
@@ -140,7 +141,7 @@ import { isPersonalSpaceResource } from 'web-client/src/helpers'
 import AppLoadingSpinner from 'web-pkg/src/components/AppLoadingSpinner.vue'
 
 export default defineComponent({
-  name: 'Personal',
+  name: 'AccountPage',
   components: {
     AppLoadingSpinner,
     EditPasswordModal,
@@ -152,10 +153,11 @@ export default defineComponent({
     const { $gettext } = language
     const clientService = useClientService()
     const configurationManager = useConfigurationManager()
-    const valuesList = ref()
-    const bundlesList = ref()
-    const selectedLanguageValue = ref()
-    const disableEmailNotificationsValue = ref()
+    const valuesList = ref<SettingValue[]>()
+    const bundlesList = ref<AccountBundle>()
+    const languageOptions = ref<LanguageOption[]>()
+    const selectedLanguageValue = ref<LanguageOption>()
+    const disableEmailNotificationsValue = ref<boolean>()
 
     // FIXME: Use graph capability when we have it
     const isSettingsServiceSupported = useCapabilitySpacesEnabled()
@@ -202,7 +204,7 @@ export default defineComponent({
           title: $gettext('Unable to load account data…'),
           status: 'danger'
         })
-        bundlesList.value = []
+        bundlesList.value = undefined
       }
     }).restartable()
 
@@ -218,16 +220,6 @@ export default defineComponent({
       )
     })
 
-    const languageOptions = computed(() => {
-      const languageOptions = unref(bundlesList)?.settings?.find((s) => s.name === 'language')
-        ?.singleChoiceValue.options
-      return languageOptions?.map((l) => ({
-        label: l.displayValue,
-        value: l.value.stringValue,
-        default: l.default
-      }))
-    })
-
     const groupNames = computed(() => {
       if (unref(useCapabilitySpacesEnabled())) {
         return unref(user)
@@ -279,7 +271,7 @@ export default defineComponent({
       }
     }
 
-    const updateSelectedLanguage = async (option) => {
+    const updateSelectedLanguage = async (option: LanguageOption) => {
       try {
         const value = await saveValue({
           identifier: 'language',
@@ -309,7 +301,7 @@ export default defineComponent({
       }
     }
 
-    const updateDisableEmailNotifications = async (option) => {
+    const updateDisableEmailNotifications = async (option: boolean) => {
       try {
         await saveValue({
           identifier: 'disable-email-notifications',
@@ -333,6 +325,13 @@ export default defineComponent({
         await loadBundlesListTask.perform()
         await loadValuesListTask.perform()
 
+        const options = unref(bundlesList)?.settings?.find((s) => s.name === 'language')
+          ?.singleChoiceValue.options
+        languageOptions.value = options?.map(({ displayValue, value }) => ({
+          label: displayValue,
+          value: value.stringValue
+        }))
+
         const languageConfiguration = unref(valuesList)?.find(
           (cV) => cV.identifier.setting === 'language'
         )
diff --git a/packages/web-runtime/tests/unit/pages/account.spec.ts b/packages/web-runtime/tests/unit/pages/account.spec.ts
index 7324ed6eb09..907cc848c94 100644
--- a/packages/web-runtime/tests/unit/pages/account.spec.ts
+++ b/packages/web-runtime/tests/unit/pages/account.spec.ts
@@ -12,6 +12,7 @@ import { mock, mockDeep } from 'jest-mock-extended'
 import { SpaceResource } from 'web-client/src/helpers'
 import { AxiosResponse } from 'axios'
 import { ClientService } from 'web-pkg'
+import { AccountBundle, SettingValue } from 'web-runtime/src/helpers/settings'
 
 const $route = {
   meta: {
@@ -172,59 +173,10 @@ describe('account page', () => {
     it('should show a message on success', async () => {
       const clientServiceMock = mockDeep<ClientService>()
       clientServiceMock.httpAuthenticated.post.mockResolvedValueOnce(
-        mock<AxiosResponse>({
-          data: {
-            bundles: [
-              {
-                id: '2a506de7-99bd-4f0d-994e-c38e72c28fd9',
-                extension: 'ocis-accounts',
-                settings: [
-                  {
-                    id: 'aa8cfbe5-95d4-4f7e-a032-c3c01f5f062f',
-                    name: 'language',
-                    singleChoiceValue: {
-                      options: [
-                        { value: { stringValue: 'de' }, displayValue: 'Deutsch' },
-                        { value: { stringValue: 'en' }, default: true, displayValue: 'English' }
-                      ]
-                    }
-                  },
-                  {
-                    id: '33ffb5d6-cd07-4dc0-afb0-84f7559ae438',
-                    name: 'disable-email-notifications',
-                    boolValue: { label: 'disable notifications' }
-                  }
-                ]
-              }
-            ]
-          }
-        })
+        mock<AxiosResponse>({ data: { bundles: [mock<AccountBundle>()] } })
       )
       clientServiceMock.httpAuthenticated.post.mockResolvedValueOnce(
-        mock<AxiosResponse>({
-          data: {
-            values: [
-              {
-                identifier: { extension: 'ocis-accounts', bundle: 'profile', setting: 'language' },
-                value: {
-                  id: '2f411ff3-0040-4358-a537-1a3ceea228d8',
-                  listValue: { values: [{ stringValue: 'de' }] }
-                }
-              },
-              {
-                identifier: {
-                  extension: 'ocis-accounts',
-                  bundle: 'profile',
-                  setting: 'disable-email-notifications'
-                },
-                value: {
-                  id: '204d0e71-403c-42c5-b343-52a4021b32be',
-                  boolValue: false
-                }
-              }
-            ]
-          }
-        })
+        mock<AxiosResponse>({ data: { values: [mock<SettingValue>()] } })
       )
 
       const { wrapper, mocks, storeOptions } = getWrapper({
@@ -247,59 +199,10 @@ describe('account page', () => {
 
       const clientServiceMock = mockDeep<ClientService>()
       clientServiceMock.httpAuthenticated.post.mockResolvedValueOnce(
-        mock<AxiosResponse>({
-          data: {
-            bundles: [
-              {
-                id: '2a506de7-99bd-4f0d-994e-c38e72c28fd9',
-                extension: 'ocis-accounts',
-                settings: [
-                  {
-                    id: 'aa8cfbe5-95d4-4f7e-a032-c3c01f5f062f',
-                    name: 'language',
-                    singleChoiceValue: {
-                      options: [
-                        { value: { stringValue: 'de' }, displayValue: 'Deutsch' },
-                        { value: { stringValue: 'en' }, default: true, displayValue: 'English' }
-                      ]
-                    }
-                  },
-                  {
-                    id: '33ffb5d6-cd07-4dc0-afb0-84f7559ae438',
-                    name: 'disable-email-notifications',
-                    boolValue: { label: 'disable notifications' }
-                  }
-                ]
-              }
-            ]
-          }
-        })
+        mock<AxiosResponse>({ data: { bundles: [mock<AccountBundle>()] } })
       )
       clientServiceMock.httpAuthenticated.post.mockResolvedValueOnce(
-        mock<AxiosResponse>({
-          data: {
-            values: [
-              {
-                identifier: { extension: 'ocis-accounts', bundle: 'profile', setting: 'language' },
-                value: {
-                  id: '2f411ff3-0040-4358-a537-1a3ceea228d8',
-                  listValue: { values: [{ stringValue: 'de' }] }
-                }
-              },
-              {
-                identifier: {
-                  extension: 'ocis-accounts',
-                  bundle: 'profile',
-                  setting: 'disable-email-notifications'
-                },
-                value: {
-                  id: '204d0e71-403c-42c5-b343-52a4021b32be',
-                  boolValue: false
-                }
-              }
-            ]
-          }
-        })
+        mock<AxiosResponse>({ data: { values: [mock<SettingValue>()] } })
       )
 
       const { wrapper, mocks, storeOptions } = getWrapper({

From 80c7fcc37f59c57679929e6cb753af5530a73283 Mon Sep 17 00:00:00 2001
From: Jannik Stehle <jannik.stehle@gmail.com>
Date: Wed, 3 May 2023 12:37:24 +0200
Subject: [PATCH 2/3] Properly fix the current selection highlight

---
 .../src/components/OcSelect/OcSelect.vue       |  3 ++-
 packages/web-runtime/src/pages/account.vue     | 18 ++++++++++--------
 2 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/packages/design-system/src/components/OcSelect/OcSelect.vue b/packages/design-system/src/components/OcSelect/OcSelect.vue
index 618a8a9be4e..8164508747d 100644
--- a/packages/design-system/src/components/OcSelect/OcSelect.vue
+++ b/packages/design-system/src/components/OcSelect/OcSelect.vue
@@ -387,7 +387,8 @@ export default defineComponent({
       border-radius: 5px;
       line-height: var(--vs-line-height);
 
-      &--highlight {
+      &--highlight,
+      &--selected {
         background-color: var(--oc-color-background-hover);
         color: var(--oc-color-swatch-brand-hover);
       }
diff --git a/packages/web-runtime/src/pages/account.vue b/packages/web-runtime/src/pages/account.vue
index 414e0b1a2db..574c376332b 100644
--- a/packages/web-runtime/src/pages/account.vue
+++ b/packages/web-runtime/src/pages/account.vue
@@ -155,7 +155,6 @@ export default defineComponent({
     const configurationManager = useConfigurationManager()
     const valuesList = ref<SettingValue[]>()
     const bundlesList = ref<AccountBundle>()
-    const languageOptions = ref<LanguageOption[]>()
     const selectedLanguageValue = ref<LanguageOption>()
     const disableEmailNotificationsValue = ref<boolean>()
 
@@ -220,6 +219,16 @@ export default defineComponent({
       )
     })
 
+    const languageOptions = computed<LanguageOption[]>(() => {
+      const languageOptions = unref(bundlesList)?.settings?.find((s) => s.name === 'language')
+        ?.singleChoiceValue.options
+      return languageOptions?.map((l) => ({
+        label: l.displayValue,
+        value: l.value.stringValue,
+        default: l.default
+      }))
+    })
+
     const groupNames = computed(() => {
       if (unref(useCapabilitySpacesEnabled())) {
         return unref(user)
@@ -325,13 +334,6 @@ export default defineComponent({
         await loadBundlesListTask.perform()
         await loadValuesListTask.perform()
 
-        const options = unref(bundlesList)?.settings?.find((s) => s.name === 'language')
-          ?.singleChoiceValue.options
-        languageOptions.value = options?.map(({ displayValue, value }) => ({
-          label: displayValue,
-          value: value.stringValue
-        }))
-
         const languageConfiguration = unref(valuesList)?.find(
           (cV) => cV.identifier.setting === 'language'
         )

From 680f29af1261b64f3faea4459220452dc8e4ff39 Mon Sep 17 00:00:00 2001
From: Jannik Stehle <jannik.stehle@gmail.com>
Date: Wed, 3 May 2023 12:38:50 +0200
Subject: [PATCH 3/3] Remove superfluous type

---
 packages/web-runtime/src/pages/account.vue | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/packages/web-runtime/src/pages/account.vue b/packages/web-runtime/src/pages/account.vue
index 574c376332b..b79bf750a07 100644
--- a/packages/web-runtime/src/pages/account.vue
+++ b/packages/web-runtime/src/pages/account.vue
@@ -219,13 +219,12 @@ export default defineComponent({
       )
     })
 
-    const languageOptions = computed<LanguageOption[]>(() => {
+    const languageOptions = computed(() => {
       const languageOptions = unref(bundlesList)?.settings?.find((s) => s.name === 'language')
         ?.singleChoiceValue.options
       return languageOptions?.map((l) => ({
         label: l.displayValue,
-        value: l.value.stringValue,
-        default: l.default
+        value: l.value.stringValue
       }))
     })