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.

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

Custom component extension type & extension preferences #10443

Merged
merged 12 commits into from
Apr 3, 2024
Prev Previous commit
Next Next commit
feat: hide extension preferences if only 1 extension available
  • Loading branch information
kulmann committed Apr 2, 2024
commit 6b72b843d81d8f6838b10ef0c304544891c0068a
Original file line number Diff line number Diff line change
@@ -21,7 +21,8 @@ exports[`Epub reader app > renders correctly 1`] = `
<!--v-if-->
<!-- @slot Content of the button --> <span class="oc-icon oc-icon-s oc-icon-passive"><!----></span> <span class="oc-icon oc-icon-xs oc-icon-passive"><!----></span>
</button></div>
<div class="epub-reader-controls-chapters-select oc-width-1-1 oc-px-s oc-hidden@l" modelvalue="[object Object]" options="[object Object],[object Object]"><label for="oc-select-1" class="oc-label"></label>
<div class="epub-reader-controls-chapters-select oc-width-1-1 oc-px-s oc-hidden@l" modelvalue="[object Object]" options="[object Object],[object Object]">
<!--v-if-->
<!--v-if-->
<div dir="auto" class="v-select vs--single vs--unsearchable oc-select epub-reader-controls-chapters-select oc-width-1-1 oc-px-s oc-hidden@l" style="background: transparent;">
<div id="vs1__combobox" class="vs__dropdown-toggle" role="combobox" aria-expanded="false" aria-owns="vs1__listbox" aria-label="Search for option">
61 changes: 43 additions & 18 deletions packages/web-runtime/src/pages/account.vue
Original file line number Diff line number Diff line change
@@ -18,26 +18,26 @@
</oc-button>
</div>
<dl class="account-page-info oc-flex oc-flex-wrap">
<div class="account-page-info-username oc-mb oc-width-1-2@s">
<div class="account-page-info-username oc-mb oc-width-1-2@m oc-width-1-1@s">
<dt class="oc-text-normal oc-text-muted" v-text="$gettext('Username')" />
<dd>
{{ user.onPremisesSamAccountName }}
</dd>
</div>
<div class="account-page-info-displayname oc-mb oc-width-1-2@s">
<div class="account-page-info-displayname oc-mb oc-width-1-2@m oc-width-1-1@s">
<dt class="oc-text-normal oc-text-muted" v-text="$gettext('First and last name')" />
<dd>
{{ user.displayName }}
</dd>
</div>
<div class="account-page-info-email oc-mb oc-width-1-2@s">
<div class="account-page-info-email oc-mb oc-width-1-2@m oc-width-1-1@s">
<dt class="oc-text-normal oc-text-muted" v-text="$gettext('Email')" />
<dd>
<template v-if="user.mail">{{ user.mail }}</template>
<span v-else v-text="$gettext('No email has been set up')" />
</dd>
</div>
<div class="account-page-info-groups oc-mb oc-width-1-2@s">
<div class="account-page-info-groups oc-mb oc-width-1-2@m oc-width-1-1@s">
<dt class="oc-text-normal oc-text-muted" v-text="$gettext('Group memberships')" />
<dd data-testid="group-names">
<span v-if="groupNames">{{ groupNames }}</span>
@@ -48,7 +48,10 @@
/>
</dd>
</div>
<div v-if="showLogout" class="account-page-logout-all-devices oc-mb oc-width-1-2@s">
<div
v-if="showLogout"
class="account-page-logout-all-devices oc-mb oc-width-1-2@m oc-width-1-1@s"
>
<dt
class="oc-text-normal oc-text-muted"
v-text="$gettext('Logout from active devices')"
@@ -65,7 +68,10 @@
</oc-button>
</dd>
</div>
<div v-if="showChangePassword" class="account-page-password oc-mb oc-width-1-2@s">
<div
v-if="showChangePassword"
class="account-page-password oc-mb oc-width-1-2@m oc-width-1-1@s"
>
<dt class="oc-text-normal oc-text-muted" v-text="$gettext('Password')" />
<dd data-testid="password">
<oc-button
@@ -85,9 +91,9 @@
<h2 class="oc-text-bold" v-text="$gettext('Preferences')" />
</div>
<dl class="account-page-preferences oc-flex oc-flex-wrap">
<div class="account-page-info-language oc-mb oc-width-1-2@s">
<div class="account-page-info-language oc-mb oc-width-1-2@m oc-width-1-1@s">
<dt class="oc-text-normal oc-text-muted" v-text="$gettext('Language')" />
<dd data-testid="language" class="oc-width-1-3">
<dd data-testid="language" class="oc-width-1-3@l oc-width-1-2@m oc-width-1-1@s">
<oc-select
v-if="languageOptions"
:placeholder="$gettext('Please choose...')"
@@ -98,13 +104,16 @@
/>
</dd>
</div>
<div class="account-page-info-theme oc-mb oc-width-1-2@s">
<div class="account-page-info-theme oc-mb oc-width-1-2@m oc-width-1-1@s">
<dt class="oc-text-normal oc-text-muted" v-text="$gettext('Theme')" />
<dd data-testid="theme" class="oc-width-1-3">
<dd data-testid="theme" class="oc-width-1-3@l oc-width-1-2@m oc-width-1-1@s">
<theme-switcher />
</dd>
</div>
<div v-if="showNotifications" class="account-page-notification oc-mb oc-width-1-2@s">
<div
v-if="showNotifications"
class="account-page-notification oc-mb oc-width-1-2@m oc-width-1-1@s"
>
<dt class="oc-text-normal oc-text-muted" v-text="$gettext('Notifications')" />
<dd data-testid="notification-mails">
<oc-checkbox
@@ -116,7 +125,10 @@
/>
</dd>
</div>
<div v-if="showWebDavDetails" class="account-page-view-options oc-mb oc-width-1-2@s">
<div
v-if="showWebDavDetails"
class="account-page-view-options oc-mb oc-width-1-2@m oc-width-1-1@s"
>
<dt class="oc-text-normal oc-text-muted" v-text="$gettext('View options')" />
<dd data-testid="view-options">
<oc-checkbox
@@ -141,20 +153,27 @@
<div
v-for="extensionPoint in extensionPointsWithUserPreferences"
:key="`extension-point-preference-${extensionPoint.id}`"
class="oc-mb oc-width-1-1"
>
<dt class="oc-text-normal oc-text-muted" v-text="extensionPoint.userPreference.label" />
<dd>
<dd class="oc-width-1-6@l oc-width-1-3@m oc-width-1-1@s">
<extension-preference :extension-point="extensionPoint" />
</dd>
</div>
</dl>
</div>
<div v-if="showGdprExport" class="account-page-gdpr-export oc-width-1-1">
<h2 class="oc-text-bold oc-mb" v-text="$gettext('GDPR')" />
<dt class="oc-text-normal oc-text-muted" v-text="$gettext('GDPR export')" />
<dd data-testid="gdpr-export">
<gdpr-export />
</dd>
<div class="oc-flex oc-width-1-1">
<h2 class="oc-text-bold oc-mb" v-text="$gettext('GDPR')" />
</div>
<dl class="account-page-gdpr-export">
<div class="oc-mb">
<dt class="oc-text-normal oc-text-muted" v-text="$gettext('GDPR export')" />
<dd data-testid="gdpr-export">
<gdpr-export />
</dd>
</div>
</dl>
</div>
</main>
</template>
@@ -434,6 +453,12 @@ export default defineComponent({
return extensionRegistry
.getExtensionPoints<ExtensionPoint>()
.filter((extensionPoint: ExtensionPoint) => extensionPoint.userPreference)
.filter((extensionPoint: ExtensionPoint) => {
const extensions = extensionRegistry.requestExtensions(extensionPoint.type, {
extensionPointIds: [extensionPoint.id]
})
return !!extensions.length
})
})

onMounted(async () => {
Original file line number Diff line number Diff line change
@@ -2,23 +2,23 @@

exports[`account page > account information section > displays basic user information 1`] = `
"<dl data-v-f2ac0579="" class="account-page-info oc-flex oc-flex-wrap">
<div data-v-f2ac0579="" class="account-page-info-username oc-mb oc-width-1-2@s">
<div data-v-f2ac0579="" class="account-page-info-username oc-mb oc-width-1-2@m oc-width-1-1@s">
<dt data-v-f2ac0579="" class="oc-text-normal oc-text-muted">Username</dt>
<dd data-v-f2ac0579="">some-username</dd>
</div>
<div data-v-f2ac0579="" class="account-page-info-displayname oc-mb oc-width-1-2@s">
<div data-v-f2ac0579="" class="account-page-info-displayname oc-mb oc-width-1-2@m oc-width-1-1@s">
<dt data-v-f2ac0579="" class="oc-text-normal oc-text-muted">First and last name</dt>
<dd data-v-f2ac0579="">some-displayname</dd>
</div>
<div data-v-f2ac0579="" class="account-page-info-email oc-mb oc-width-1-2@s">
<div data-v-f2ac0579="" class="account-page-info-email oc-mb oc-width-1-2@m oc-width-1-1@s">
<dt data-v-f2ac0579="" class="oc-text-normal oc-text-muted">Email</dt>
<dd data-v-f2ac0579="">some-email</dd>
</div>
<div data-v-f2ac0579="" class="account-page-info-groups oc-mb oc-width-1-2@s">
<div data-v-f2ac0579="" class="account-page-info-groups oc-mb oc-width-1-2@m oc-width-1-1@s">
<dt data-v-f2ac0579="" class="oc-text-normal oc-text-muted">Group memberships</dt>
<dd data-v-f2ac0579="" data-testid="group-names"><span data-v-f2ac0579="" data-testid="group-names-empty">You are not part of any group</span></dd>
</div>
<div data-v-f2ac0579="" class="account-page-logout-all-devices oc-mb oc-width-1-2@s">
<div data-v-f2ac0579="" class="account-page-logout-all-devices oc-mb oc-width-1-2@m oc-width-1-1@s">
<dt data-v-f2ac0579="" class="oc-text-normal oc-text-muted">Logout from active devices</dt>
<dd data-v-f2ac0579="" data-testid="logout">
<oc-button-stub data-v-f2ac0579="" appearance="raw" type="a" href="https://account-manager/logout" target="_blank" data-testid="account-page-logout-url-btn"></oc-button-stub>
@@ -41,15 +41,15 @@ exports[`account page > public link context > should render a limited view 1`] =
<h2 data-v-f2ac0579="" class="oc-text-bold">Preferences</h2>
</div>
<dl data-v-f2ac0579="" class="account-page-preferences oc-flex oc-flex-wrap">
<div data-v-f2ac0579="" class="account-page-info-language oc-mb oc-width-1-2@s">
<div data-v-f2ac0579="" class="account-page-info-language oc-mb oc-width-1-2@m oc-width-1-1@s">
<dt data-v-f2ac0579="" class="oc-text-normal oc-text-muted">Language</dt>
<dd data-v-f2ac0579="" data-testid="language" class="oc-width-1-3">
<dd data-v-f2ac0579="" data-testid="language" class="oc-width-1-3@l oc-width-1-2@m oc-width-1-1@s">
<oc-select-stub data-v-f2ac0579="" id="oc-select-1" filter="[Function]" disabled="false" optionlabel="label" getoptionlabel="[Function]" searchable="true" clearable="false" loading="false" fixmessageline="false" multiple="false" readonly="false" placeholder="Please choose..." options="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]" model-value="[object Object]"></oc-select-stub>
</dd>
</div>
<div data-v-f2ac0579="" class="account-page-info-theme oc-mb oc-width-1-2@s">
<div data-v-f2ac0579="" class="account-page-info-theme oc-mb oc-width-1-2@m oc-width-1-1@s">
<dt data-v-f2ac0579="" class="oc-text-normal oc-text-muted">Theme</dt>
<dd data-v-f2ac0579="" data-testid="theme" class="oc-width-1-3">
<dd data-v-f2ac0579="" data-testid="theme" class="oc-width-1-3@l oc-width-1-2@m oc-width-1-1@s">
<theme-switcher-stub data-v-f2ac0579=""></theme-switcher-stub>
</dd>
</div>
32 changes: 31 additions & 1 deletion packages/web-runtime/tests/unit/pages/account.spec.ts
Original file line number Diff line number Diff line change
@@ -10,6 +10,7 @@ import {
import { mock } from 'vitest-mock-extended'
import { AxiosResponse } from 'axios'
import {
Extension,
ExtensionPoint,
useExtensionRegistry,
useMessages,
@@ -230,7 +231,7 @@ describe('account page', () => {
expect(wrapper.find(selectors.extensionsSection).exists()).toBeFalsy()
})

it('should be visible if any extension points offer preferences', async () => {
it('should be hidden if an extension point only has 1 or less extensions', async () => {
const extensionPointMock = mock<ExtensionPoint>({
userPreference: {
label: 'example-extension-point'
@@ -241,6 +242,35 @@ describe('account page', () => {
})
await blockLoadingState(wrapper)

expect(wrapper.find(selectors.extensionsSection).exists()).toBeFalsy()
})

it('should be visible if an extension point has at least 2 extensions', async () => {
const extensionPoint = mock<ExtensionPoint>({
id: 'test-extension-point',
multiple: false,
defaultExtensionId: 'foo-2'
})
const extensions = [
mock<Extension>({
id: 'foo-1',
userPreference: {
optionLabel: 'Foo 1'
}
}),
mock<Extension>({
id: 'foo-2',
userPreference: {
optionLabel: 'Foo 2'
}
})
]
const { wrapper } = getWrapper({
extensionPoints: [extensionPoint],
extensions
})
await blockLoadingState(wrapper)

expect(wrapper.find(selectors.extensionsSection).exists()).toBeTruthy()
})
})