From cfe99b6bcf486d1652294f3b7f397515e853d4e1 Mon Sep 17 00:00:00 2001
From: Vyacheslav Tumanov <me@slavatumanov.me>
Date: Wed, 24 Jul 2024 15:15:37 +0500
Subject: [PATCH] fix for the list (#6096)

Signed-off-by: Vyacheslav Tumanov <me@slavatumanov.me>
---
 .../PersonAccountRefPresenter.svelte          |   6 +-
 .../src/components/list/ListCategories.svelte | 242 +++++++++---------
 .../model/tracker/common-tracker-page.ts      |   9 +
 .../sanity/tests/model/tracker/issues-page.ts |  15 ++
 tests/sanity/tests/tracker/tracker.spec.ts    |  21 +-
 5 files changed, 168 insertions(+), 125 deletions(-)

diff --git a/plugins/contact-resources/src/components/PersonAccountRefPresenter.svelte b/plugins/contact-resources/src/components/PersonAccountRefPresenter.svelte
index 5e5cb0327d..b360bdcf57 100644
--- a/plugins/contact-resources/src/components/PersonAccountRefPresenter.svelte
+++ b/plugins/contact-resources/src/components/PersonAccountRefPresenter.svelte
@@ -15,8 +15,8 @@
 -->
 <script lang="ts">
   import { PersonAccount } from '@hcengineering/contact'
-  import { AggregateValue, Ref } from '@hcengineering/core'
-  import { IconSize } from '@hcengineering/ui'
+  import core, { AggregateValue, Ref } from '@hcengineering/core'
+  import { IconSize, Label } from '@hcengineering/ui'
   import { personAccountByIdStore } from '../utils'
   import PersonAccountPresenter from './PersonAccountPresenter.svelte'
   import { personStore } from '..'
@@ -48,4 +48,6 @@
     {compact}
     on:accent-color
   />
+{:else}
+  <Label label={core.string.System} />
 {/if}
diff --git a/plugins/view-resources/src/components/list/ListCategories.svelte b/plugins/view-resources/src/components/list/ListCategories.svelte
index 117cd36b69..f65971d485 100644
--- a/plugins/view-resources/src/components/list/ListCategories.svelte
+++ b/plugins/view-resources/src/components/list/ListCategories.svelte
@@ -371,127 +371,125 @@
 {#each categories as category, i (typeof category === 'object' ? category.name : category)}
   {@const items = groupByKey === noCategory ? docs : getGroupByValues(groupByDocs, category)}
   {@const categoryDocKeys = getGroupByKey(docKeys, category, resultQuery)}
-  {#if items.length !== 0}
-    <ListCategory
-      bind:this={listListCategory[i]}
-      {extraHeaders}
-      {space}
-      {selectedObjectIds}
-      {headerComponent}
-      {baseMenuClass}
-      {level}
-      {viewOptions}
-      {groupByKey}
-      {lookup}
-      {config}
-      {configurations}
-      {configurationsVersion}
-      {itemModels}
-      {_class}
-      parentCategories={categories.length}
-      groupPersistKey={`${groupPersistKey}_${level}_${typeof category === 'object' ? category.name : category}`}
-      singleCat={level === 0 && categories.length === 1}
-      oneCat={viewOptions.groupBy.length === 1}
-      lastCat={i === categories.length - 1}
-      {category}
-      itemProj={items}
-      docKeys={categoryDocKeys}
-      {newObjectProps}
-      {createItemDialog}
-      {createItemDialogProps}
-      {createItemLabel}
-      {viewOptionsConfig}
-      {compactMode}
-      {resultQuery}
-      {resultOptions}
-      {limiter}
-      {listProvider}
-      on:check
-      on:uncheckAll
-      on:row-focus
-      on:dragstart={(e) => {
-        dispatch('dragstart', {
-          target: e.detail.target,
-          index: e.detail.index + getInitIndex(categories, i)
-        })
-      }}
-      on:collapsed
-      {flatHeaders}
-      {disableHeader}
-      {props}
-      {listDiv}
-      bind:dragItem
+  <ListCategory
+    bind:this={listListCategory[i]}
+    {extraHeaders}
+    {space}
+    {selectedObjectIds}
+    {headerComponent}
+    {baseMenuClass}
+    {level}
+    {viewOptions}
+    {groupByKey}
+    {lookup}
+    {config}
+    {configurations}
+    {configurationsVersion}
+    {itemModels}
+    {_class}
+    parentCategories={categories.length}
+    groupPersistKey={`${groupPersistKey}_${level}_${typeof category === 'object' ? category.name : category}`}
+    singleCat={level === 0 && categories.length === 1}
+    oneCat={viewOptions.groupBy.length === 1}
+    lastCat={i === categories.length - 1}
+    {category}
+    itemProj={items}
+    docKeys={categoryDocKeys}
+    {newObjectProps}
+    {createItemDialog}
+    {createItemDialogProps}
+    {createItemLabel}
+    {viewOptionsConfig}
+    {compactMode}
+    {resultQuery}
+    {resultOptions}
+    {limiter}
+    {listProvider}
+    on:check
+    on:uncheckAll
+    on:row-focus
+    on:dragstart={(e) => {
+      dispatch('dragstart', {
+        target: e.detail.target,
+        index: e.detail.index + getInitIndex(categories, i)
+      })
+    }}
+    on:collapsed
+    {flatHeaders}
+    {disableHeader}
+    {props}
+    {listDiv}
+    bind:dragItem
+  >
+    <svelte:fragment
+      slot="category"
+      let:docs
+      let:_class
+      let:space
+      let:lookup
+      let:baseMenuClass
+      let:config
+      let:selectedObjectIds
+      let:createItemDialog
+      let:createItemLabel
+      let:viewOptions
+      let:newObjectProps
+      let:flatHeaders
+      let:props
+      let:level
+      let:viewOptionsConfig
+      let:listDiv
+      let:dragstart
     >
-      <svelte:fragment
-        slot="category"
-        let:docs
-        let:_class
-        let:space
-        let:lookup
-        let:baseMenuClass
-        let:config
-        let:selectedObjectIds
-        let:createItemDialog
-        let:createItemLabel
-        let:viewOptions
-        let:newObjectProps
-        let:flatHeaders
-        let:props
-        let:level
-        let:viewOptionsConfig
-        let:listDiv
-        let:dragstart
-      >
-        <svelte:self
-          {docs}
-          bind:this={listCategory[i]}
-          {_class}
-          {space}
-          {lookup}
-          {baseMenuClass}
-          {config}
-          {selectedObjectIds}
-          {createItemDialog}
-          {createItemLabel}
-          {viewOptions}
-          {newObjectProps}
-          {flatHeaders}
-          {props}
-          {level}
-          docKeys={categoryDocKeys}
-          groupPersistKey={`${groupPersistKey}_${level}_${typeof category === 'object' ? category.name : category}`}
-          {initIndex}
-          {viewOptionsConfig}
-          {listDiv}
-          {resultQuery}
-          {resultOptions}
-          {limiter}
-          {listProvider}
-          bind:dragItem
-          on:dragItem
-          on:check
-          on:uncheckAll
-          on:row-focus
-          on:dragstart={dragstart}
-          on:select={(evt) => {
-            select(0, evt.detail)
-          }}
-          on:select-next={(evt) => {
-            if (level !== 0) {
-              dispatch('select-next', evt.detail)
-            } else {
-              select(2, evt.detail)
-            }
-          }}
-          on:select-prev={(evt) => {
-            if (level !== 0) {
-              dispatch('select-prev', evt.detail)
-            } else {
-              select(-2, evt.detail)
-            }
-          }}
-        />
-      </svelte:fragment>
-    </ListCategory>
-  {/if}
+      <svelte:self
+        {docs}
+        bind:this={listCategory[i]}
+        {_class}
+        {space}
+        {lookup}
+        {baseMenuClass}
+        {config}
+        {selectedObjectIds}
+        {createItemDialog}
+        {createItemLabel}
+        {viewOptions}
+        {newObjectProps}
+        {flatHeaders}
+        {props}
+        {level}
+        docKeys={categoryDocKeys}
+        groupPersistKey={`${groupPersistKey}_${level}_${typeof category === 'object' ? category.name : category}`}
+        {initIndex}
+        {viewOptionsConfig}
+        {listDiv}
+        {resultQuery}
+        {resultOptions}
+        {limiter}
+        {listProvider}
+        bind:dragItem
+        on:dragItem
+        on:check
+        on:uncheckAll
+        on:row-focus
+        on:dragstart={dragstart}
+        on:select={(evt) => {
+          select(0, evt.detail)
+        }}
+        on:select-next={(evt) => {
+          if (level !== 0) {
+            dispatch('select-next', evt.detail)
+          } else {
+            select(2, evt.detail)
+          }
+        }}
+        on:select-prev={(evt) => {
+          if (level !== 0) {
+            dispatch('select-prev', evt.detail)
+          } else {
+            select(-2, evt.detail)
+          }
+        }}
+      />
+    </svelte:fragment>
+  </ListCategory>
 {/each}
diff --git a/tests/sanity/tests/model/tracker/common-tracker-page.ts b/tests/sanity/tests/model/tracker/common-tracker-page.ts
index 983ca45e34..b73c038e81 100644
--- a/tests/sanity/tests/model/tracker/common-tracker-page.ts
+++ b/tests/sanity/tests/model/tracker/common-tracker-page.ts
@@ -93,6 +93,9 @@ export class CommonTrackerPage extends CalendarPage {
   viewButton = (): Locator => this.page.locator('button:has-text("View")')
   firstOptionButton = (): Locator => this.page.locator('.antiCard >> button >> nth=0')
   assigneeMenuItem = (): Locator => this.page.locator('.menu-item:has-text("Assignee")')
+  shouldShowAllToggle = (): Locator =>
+    this.page.locator('.antiCard.menu .antiCard-menu__item:has-text("Show empty groups")')
+
   header = (): Locator => this.page.getByText('Issues All Active Backlog')
   filter = (): Locator => this.page.getByRole('button', { name: 'Filter' })
   view = (): Locator => this.page.getByRole('button', { name: 'View' })
@@ -122,6 +125,12 @@ export class CommonTrackerPage extends CalendarPage {
     }
   }
 
+  async openViewOptionsAndToggleShouldShowAll (): Promise<void> {
+    await this.viewButton().click()
+    await this.shouldShowAllToggle().click()
+    await this.page.keyboard.press('Escape')
+  }
+
   async verifyViewOption (panel: string, viewletSelector: string): Promise<void> {
     await this.page.click(`text="${panel}"`)
     const viewlet = this.page.locator(viewletSelector)
diff --git a/tests/sanity/tests/model/tracker/issues-page.ts b/tests/sanity/tests/model/tracker/issues-page.ts
index 576671d5bf..5bcd7fce75 100644
--- a/tests/sanity/tests/model/tracker/issues-page.ts
+++ b/tests/sanity/tests/model/tracker/issues-page.ts
@@ -100,6 +100,13 @@ export class IssuesPage extends CommonTrackerPage {
   todoHeader = (): Locator => this.page.locator('.categoryHeader :text-is("Todo")').first()
   doneHeader = (): Locator => this.page.locator('.categoryHeader :text-is("Done")').first()
   canceledHeader = (): Locator => this.page.locator('.categoryHeader :text-is("Canceled")').first()
+
+  inProgressHeaderKanban = (): Locator => this.page.locator('.header :text-is("In Progress")').first()
+  backlogHeaderKanban = (): Locator => this.page.locator('.header :text-is("Backlog")').first()
+  todoHeaderKanban = (): Locator => this.page.locator('.header :text-is("Todo")').first()
+  doneHeaderKanban = (): Locator => this.page.locator('.header :text-is("Done")').first()
+  canceledHeaderKanban = (): Locator => this.page.locator('.header :text-is("Canceled")').first()
+
   myIssuesButton = (): Locator => this.page.locator('text="My issues"')
   assignedTab = (): Locator => this.page.locator('[data-id="tab-assigned"]')
   createdTab = (): Locator => this.page.locator('[data-id="tab-created"]')
@@ -602,6 +609,14 @@ export class IssuesPage extends CommonTrackerPage {
     await expect(this.canceledHeader()).toBeVisible()
   }
 
+  async verifyCategoryHeadersVisibilityKanban (): Promise<void> {
+    await expect(this.inProgressHeaderKanban()).toBeVisible()
+    await expect(this.backlogHeaderKanban()).toBeVisible()
+    await expect(this.todoHeaderKanban()).toBeVisible()
+    await expect(this.doneHeaderKanban()).toBeVisible()
+    await expect(this.canceledHeaderKanban()).toBeVisible()
+  }
+
   async openAllCategories (): Promise<void> {
     for await (const category of iterateLocator(this.buttonCollapsedCategories())) {
       await category.click()
diff --git a/tests/sanity/tests/tracker/tracker.spec.ts b/tests/sanity/tests/tracker/tracker.spec.ts
index b414fba989..062d29c16e 100644
--- a/tests/sanity/tests/tracker/tracker.spec.ts
+++ b/tests/sanity/tests/tracker/tracker.spec.ts
@@ -2,7 +2,7 @@ import { test } from '@playwright/test'
 import { CommonTrackerPage } from '../model/tracker/common-tracker-page'
 import { IssuesDetailsPage } from '../model/tracker/issues-details-page'
 import { IssuesPage } from '../model/tracker/issues-page'
-import { PlatformSetting, fillSearch } from '../utils'
+import { PlatformSetting, PlatformURI, fillSearch } from '../utils'
 import {
   DEFAULT_STATUSES,
   ViewletSelectors,
@@ -169,6 +169,25 @@ test.describe('Tracker tests', () => {
       dueDate: '24'
     })
   })
+
+  test('check shouldShowAll option', async ({ page }) => {
+    await (
+      await page.goto(`${PlatformURI}/workbench/sanity-ws/tracker/tracker%3Aproject%3ADefaultProject/issues`)
+    )?.finished()
+    const issuesPage = new IssuesPage(page)
+    await navigate(page)
+    await issuesPage.navigateToIssues()
+    await issuesPage.searchIssueByName('!!!!')
+    await issuesPage.openViewOptionsAndToggleShouldShowAll()
+    await issuesPage.clickModelSelectorAll()
+    await issuesPage.verifyCategoryHeadersVisibility()
+    await issuesPage.openViewOptionsAndToggleShouldShowAll()
+
+    await page.click(ViewletSelectors.Board)
+    await issuesPage.openViewOptionsAndToggleShouldShowAll()
+    await issuesPage.verifyCategoryHeadersVisibilityKanban()
+    await issuesPage.openViewOptionsAndToggleShouldShowAll()
+  })
 })
 async function doSaveViewTest (
   panels: string[],