Fix apps customization (#10755)

Signed-off-by: Artem Savchenko <armisav@gmail.com>

plugins/workbench-resources/src/components/AppItem.svelte

@@ -25,6 +25,7 @@
   export let loading: boolean = false
   export let notify: boolean = false
   export let navigator: boolean = false
+  export let dataId: string | undefined = undefined
 </script>
 
 <button
@@ -33,6 +34,7 @@
   class:selected
   class:navigator
   id={'app-' + label}
+  data-id={dataId}
   disabled={loading}
   use:tooltip={{ label }}
   on:click

plugins/workbench-resources/src/components/AppSwitcher.svelte

@@ -99,6 +99,7 @@
             bind:this={btns[i]}
             class="ap-menuItem withIcon flex-row-center flex-grow"
             class:hover={btns[i] === activeElement}
+            data-id={`app-switcher-row-${app.alias}`}
             on:click={() => {
               if (hiddenAppsIds.includes(app._id)) showApplication(app)
               else hideApplication(app)

plugins/workbench-resources/src/components/Applications.svelte

@@ -110,21 +110,28 @@
 
   updateExcludedApps()
 
-  function isAppVisibleInSwitcher (app: Application, disabledModules: Set<Ref<Application>>): boolean {
-    return !hiddenAppsIds.includes(app._id) && !excludedApps.includes(app.alias) && !disabledModules.has(app._id)
+  let topApps: Application[] = []
+  let midApps: Application[] = []
+  let bottomApps: Application[] = []
+
+  // Single reactive block so reads of hiddenAppsIds / excludedApps / disabledApplications
+  $: {
+    const hidden = hiddenAppsIds
+    const excluded = excludedApps
+    const disabled = disabledApplications
+
+    const isApplicationVisibleInSidebar = (app: Application): boolean =>
+      !hidden.includes(app._id) && !excluded.includes(app.alias) && !disabled.has(app._id)
+
+    topApps = apps
+      .filter((it) => it.position === 'top' && isApplicationVisibleInSidebar(it))
+      .sort((a, b) => (a.order ?? Infinity) - (b.order ?? Infinity))
+    midApps = apps
+      .filter((it) => it.position !== 'top' && it.position !== 'bottom' && isApplicationVisibleInSidebar(it))
+      .sort((a, b) => (a.order ?? Infinity) - (b.order ?? Infinity))
+    bottomApps = apps.filter((it) => it.position === 'bottom' && isApplicationVisibleInSidebar(it))
   }
 
-  $: topApps = apps
-    .filter((it) => it.position === 'top' && isAppVisibleInSwitcher(it, disabledApplications))
-    .sort((a, b) => (a.order ?? Infinity) - (b.order ?? Infinity))
-  $: midApps = apps
-    .filter(
-      (it) => it.position !== 'top' && it.position !== 'bottom' && isAppVisibleInSwitcher(it, disabledApplications)
-    )
-    .sort((a, b) => (a.order ?? Infinity) - (b.order ?? Infinity))
-
-  $: bottomApps = apps.filter((it) => it.position === 'bottom' && isAppVisibleInSwitcher(it, disabledApplications))
-
   const inboxClient = InboxNotificationsClientImpl.getClient()
   const inboxNotificationsByContextStore = inboxClient.inboxNotificationsByContext
 
@@ -177,6 +184,7 @@
             navigator={app._id === active && $deviceInfo.navigator.visible}
             notify={showNotify(app.alias, hasInboxNotifications, hasNewInboxNotifications, hasNewMessagesNotification)}
             {...customProps}
+            dataId={`app-sidebar-${app.alias}`}
             on:click={getClickHandler(app, customProps)}
           />
         </NavLink>
@@ -193,6 +201,7 @@
             label={app.label}
             navigator={app._id === active && $deviceInfo.navigator.visible}
             {...customProps}
+            dataId={`app-sidebar-${app.alias}`}
             on:click={getClickHandler(app, customProps)}
           />
         </NavLink>
@@ -209,6 +218,7 @@
               navigator={app._id === active && $deviceInfo.navigator.visible}
               notify={app.alias === chatId && hasNewInboxNotifications}
               {...customProps}
+              dataId={`app-sidebar-${app.alias}`}
               on:click={getClickHandler(app, customProps)}
             />
           </NavLink>

plugins/workbench-resources/src/components/Workbench.svelte

@@ -926,6 +926,7 @@
         <AppItem
           icon={IconSettings}
           label={setting.string.Customize}
+          dataId="workbench-app-customize"
           size={appsMini ? 'small' : 'large'}
           on:click={() => showPopup(AppSwitcher, { apps }, popupPosition)}
         />

tests/sanity/tests/workbench/customize-sidebar-apps.spec.ts

@@ -0,0 +1,34 @@
+import { expect, test } from '@playwright/test'
+import { PlatformSetting, PlatformURI } from '../utils'
+
+test.use({
+  storageState: PlatformSetting
+})
+
+test.describe('Customize sidebar applications', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto(`${PlatformURI}/workbench/sanity-ws/recruit`)
+  })
+
+  test('sidebar apps match Customize visibility toggles', async ({ page }) => {
+    const recruitSidebar = page.getByTestId('app-sidebar-recruit')
+    const customize = page.getByTestId('workbench-app-customize')
+    const recruitRow = page.getByTestId('app-switcher-row-recruit')
+
+    await expect(recruitSidebar).toBeVisible()
+
+    await customize.click()
+    await expect(recruitRow).toBeVisible()
+    await recruitRow.click()
+    await page.keyboard.press('Escape')
+
+    await expect(recruitSidebar).toHaveCount(0)
+
+    await customize.click()
+    await expect(recruitRow).toBeVisible()
+    await recruitRow.click()
+    await page.keyboard.press('Escape')
+
+    await expect(recruitSidebar).toBeVisible()
+  })
+})