Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix highlighting of the currently selected language #8972

Merged
merged 3 commits into from
May 3, 2023
Merged

Fix highlighting of the currently selected language #8972

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
782abed
Fix highlighting of the currently selected language
JammingBen May 3, 2023
80c7fcc
Properly fix the current selection highlight
JammingBen May 3, 2023
680f29a
Remove superfluous type
JammingBen May 3, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions changelog/unreleased/enhancement-add-notifications-setting
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
3 changes: 2 additions & 1 deletion packages/design-system/src/components/OcSelect/OcSelect.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
Expand Down
53 changes: 53 additions & 0 deletions packages/web-runtime/src/helpers/settings.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
export interface SettingValue {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
export interface SettingValue {
export interface SettingsValue {

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 {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
export interface AccountBundleSetting {
export interface Setting {

description: string
displayName: string
id: string
name: string
resource: {
type: string
}
singleChoiceValue?: {
options: Record<string, any>[]
}
boolValue?: Record<string, any>
}

export interface AccountBundle {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
export interface AccountBundle {
export interface SettingsBundle {

displayName: string
extension: string
id: string
name: string
resource: {
type: string
}
settings: AccountBundleSetting[]
type: string
}

export interface LanguageOption {
label: string
value: string
}
20 changes: 10 additions & 10 deletions packages/web-runtime/src/pages/account.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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,
Expand All @@ -152,10 +153,10 @@ 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>()
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why is the bundles list not of type ref<AccountBundle[]>? 🤔

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Because bundlesList is actually not a list of bundles but the account bundle. Let my fix that name in a follow-up, just like the new interface names :)

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

thank you 💪

const selectedLanguageValue = ref<LanguageOption>()
const disableEmailNotificationsValue = ref<boolean>()

// FIXME: Use graph capability when we have it
const isSettingsServiceSupported = useCapabilitySpacesEnabled()
Expand Down Expand Up @@ -202,7 +203,7 @@ export default defineComponent({
title: $gettext('Unable to load account data…'),
status: 'danger'
})
bundlesList.value = []
bundlesList.value = undefined
}
}).restartable()

Expand All @@ -223,8 +224,7 @@ export default defineComponent({
?.singleChoiceValue.options
return languageOptions?.map((l) => ({
label: l.displayValue,
value: l.value.stringValue,
default: l.default
value: l.value.stringValue
}))
})

Expand Down Expand Up @@ -279,7 +279,7 @@ export default defineComponent({
}
}

const updateSelectedLanguage = async (option) => {
const updateSelectedLanguage = async (option: LanguageOption) => {
try {
const value = await saveValue({
identifier: 'language',
Expand Down Expand Up @@ -309,7 +309,7 @@ export default defineComponent({
}
}

const updateDisableEmailNotifications = async (option) => {
const updateDisableEmailNotifications = async (option: boolean) => {
try {
await saveValue({
identifier: 'disable-email-notifications',
Expand Down
107 changes: 5 additions & 102 deletions packages/web-runtime/tests/unit/pages/account.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand Down Expand Up @@ -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({
Expand All @@ -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({
Expand Down