From 6b72b843d81d8f6838b10ef0c304544891c0068a Mon Sep 17 00:00:00 2001
From: Benedikt Kulmann <benedikt@kulmann.biz>
Date: Tue, 2 Apr 2024 16:18:02 +0200
Subject: [PATCH] feat: hide extension preferences if only 1 extension
 available

---
 .../tests/unit/__snapshots__/app.spec.ts.snap |  3 +-
 packages/web-runtime/src/pages/account.vue    | 61 +++++++++++++------
 .../pages/__snapshots__/account.spec.ts.snap  | 18 +++---
 .../tests/unit/pages/account.spec.ts          | 32 +++++++++-
 4 files changed, 85 insertions(+), 29 deletions(-)

diff --git a/packages/web-app-epub-reader/tests/unit/__snapshots__/app.spec.ts.snap b/packages/web-app-epub-reader/tests/unit/__snapshots__/app.spec.ts.snap
index 126e28926b5..fcaaa683a8c 100644
--- a/packages/web-app-epub-reader/tests/unit/__snapshots__/app.spec.ts.snap
+++ b/packages/web-app-epub-reader/tests/unit/__snapshots__/app.spec.ts.snap
@@ -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">
diff --git a/packages/web-runtime/src/pages/account.vue b/packages/web-runtime/src/pages/account.vue
index 804b88a69cd..8cf2fde45a6 100644
--- a/packages/web-runtime/src/pages/account.vue
+++ b/packages/web-runtime/src/pages/account.vue
@@ -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 () => {
diff --git a/packages/web-runtime/tests/unit/pages/__snapshots__/account.spec.ts.snap b/packages/web-runtime/tests/unit/pages/__snapshots__/account.spec.ts.snap
index f04767d15b4..37e351dee91 100644
--- a/packages/web-runtime/tests/unit/pages/__snapshots__/account.spec.ts.snap
+++ b/packages/web-runtime/tests/unit/pages/__snapshots__/account.spec.ts.snap
@@ -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>
diff --git a/packages/web-runtime/tests/unit/pages/account.spec.ts b/packages/web-runtime/tests/unit/pages/account.spec.ts
index 4dd4ba6c92c..08cd96bb1ca 100644
--- a/packages/web-runtime/tests/unit/pages/account.spec.ts
+++ b/packages/web-runtime/tests/unit/pages/account.spec.ts
@@ -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()
     })
   })