From d1ef98cf873ee40e684359146192f8e539b3a8e5 Mon Sep 17 00:00:00 2001
From: Alexander Platov <alexander.platov@hardcoreeng.com>
Date: Mon, 29 Jul 2024 08:24:41 +0300
Subject: [PATCH] Fixed Scrollbar in Filters, presenters and adjusted tests
 (#6160)

Signed-off-by: Alexander Platov <alexander.platov@hardcoreeng.com>
---
 packages/theme/styles/popups.scss             |  1 -
 packages/ui/src/components/Button.svelte      |  2 ++
 .../src/components/NotificationToast.svelte   |  6 ++--
 .../components/ActivityMessageAction.svelte   |  6 ++--
 .../components/ActivityMessageActions.svelte  | 12 ++++---
 .../components/state/StatePresenter.svelte    |  4 +--
 .../components/state/StateRefPresenter.svelte |  2 +-
 .../src/components/Templates.svelte           |  3 +-
 .../src/components/TextActionButton.svelte    |  1 +
 .../src/components/DueDateEditor.svelte       |  1 +
 .../src/components/ObjectPresenter.svelte     |  4 +--
 .../custom-atributes/class-properties-page.ts |  2 +-
 tests/sanity/tests/model/channel-page.ts      | 32 ++++++++++++++-----
 .../model/documents/document-content-page.ts  |  2 +-
 .../tests/model/planning/planning-page.ts     |  8 ++---
 .../sanity/tests/model/tracker/issues-page.ts | 11 +++++--
 16 files changed, 61 insertions(+), 36 deletions(-)

diff --git a/packages/theme/styles/popups.scss b/packages/theme/styles/popups.scss
index 31e5ae1f23..aab96f82ca 100644
--- a/packages/theme/styles/popups.scss
+++ b/packages/theme/styles/popups.scss
@@ -194,7 +194,6 @@
     height: max-content;
     overflow-x: hidden;
     overflow-y: auto;
-    scrollbar-width: thin;
 
     &::-webkit-scrollbar { width: 0; }
     .box {
diff --git a/packages/ui/src/components/Button.svelte b/packages/ui/src/components/Button.svelte
index 5812b007b7..9c44f0692d 100644
--- a/packages/ui/src/components/Button.svelte
+++ b/packages/ui/src/components/Button.svelte
@@ -57,6 +57,7 @@
   export let title: string | undefined = undefined
   export let borderStyle: 'solid' | 'dashed' | 'none' = 'solid'
   export let id: string | undefined = undefined
+  export let dataId: string | undefined = undefined
   export let input: HTMLButtonElement | undefined = undefined
   export let showTooltip: LabelAndProps | undefined = undefined
   export let short: boolean = false
@@ -154,6 +155,7 @@
   on:mousemove
   on:mouseleave
   {id}
+  data-id={dataId}
 >
   {#if icon && !loading}
     <div class="btn-icon pointer-events-none" class:resetIconSize={resetIconSize === 'icon'}>
diff --git a/packages/ui/src/components/NotificationToast.svelte b/packages/ui/src/components/NotificationToast.svelte
index aba306a501..0a6b7a3777 100644
--- a/packages/ui/src/components/NotificationToast.svelte
+++ b/packages/ui/src/components/NotificationToast.svelte
@@ -43,7 +43,7 @@
   $: icon = getIcon()
 </script>
 
-<div class="root" in:fade out:fade>
+<div class="notifyPopup" in:fade out:fade>
   <div class="flex-between">
     <div class="flex-row-center">
       {#if icon}
@@ -60,7 +60,7 @@
       <span class="overflow-label fs-bold text-base caption-color">{title}</span>
     </div>
     {#if onClose !== undefined}
-      <Button icon={Close} kind="ghost" size="small" on:click={onClose} />
+      <Button icon={Close} kind="ghost" size="small" dataId={'btnNotifyClose'} on:click={onClose} />
     {/if}
   </div>
 
@@ -76,7 +76,7 @@
 </div>
 
 <style lang="scss">
-  .root {
+  .notifyPopup {
     overflow: hidden;
     display: flex;
     flex-direction: column;
diff --git a/plugins/activity-resources/src/components/ActivityMessageAction.svelte b/plugins/activity-resources/src/components/ActivityMessageAction.svelte
index 52e687427c..5ca696292a 100644
--- a/plugins/activity-resources/src/components/ActivityMessageAction.svelte
+++ b/plugins/activity-resources/src/components/ActivityMessageAction.svelte
@@ -22,7 +22,8 @@
   export let iconProps: any | undefined = undefined
   export let size: IconSize = 'small'
   export let action: (ev: MouseEvent) => Promise<void> | void = async () => {}
-  export let opened = false
+  export let opened: boolean = false
+  export let dataId: string | undefined = undefined
 
   function onClick (ev: MouseEvent): void {
     ev.stopPropagation()
@@ -38,6 +39,7 @@
   size="small"
   kind="tertiary"
   pressed={opened}
-  on:click={onClick}
+  {dataId}
   tooltip={{ label }}
+  on:click={onClick}
 />
diff --git a/plugins/activity-resources/src/components/ActivityMessageActions.svelte b/plugins/activity-resources/src/components/ActivityMessageActions.svelte
index d64271c98b..a0e941d563 100644
--- a/plugins/activity-resources/src/components/ActivityMessageActions.svelte
+++ b/plugins/activity-resources/src/components/ActivityMessageActions.svelte
@@ -79,7 +79,7 @@
 </script>
 
 {#if message}
-  <div class="root">
+  <div class="activityMessage-actionPopup">
     {#each inlineActions as inline}
       {#if inline.icon}
         {#await getResource(inline.action) then action}
@@ -88,6 +88,7 @@
             size={inline.actionProps?.size ?? 'small'}
             icon={inline.icon}
             iconProps={inline.actionProps?.iconProps}
+            dataId={inline._id}
             action={(ev) => action(message, ev, { onOpen, onClose })}
           />
         {/await}
@@ -96,18 +97,19 @@
 
     {#if withActionMenu}
       <ActivityMessageAction
-        size="small"
         icon={IconMoreV}
-        opened={isActionMenuOpened}
-        action={showMenu}
         label={view.string.MoreActions}
+        size={'small'}
+        opened={isActionMenuOpened}
+        dataId={'btnMoreActions'}
+        action={showMenu}
       />
     {/if}
   </div>
 {/if}
 
 <style lang="scss">
-  .root {
+  .activityMessage-actionPopup {
     display: flex;
     align-items: center;
     border-radius: 0.375rem;
diff --git a/plugins/task-resources/src/components/state/StatePresenter.svelte b/plugins/task-resources/src/components/state/StatePresenter.svelte
index bb2ac2acda..2c146f0938 100644
--- a/plugins/task-resources/src/components/state/StatePresenter.svelte
+++ b/plugins/task-resources/src/components/state/StatePresenter.svelte
@@ -41,12 +41,12 @@
   export let shouldShowAvatar = true
   export let inline: boolean = false
   export let disabled: boolean = false
-  export let oneLine: boolean = false
+  export let oneLine: boolean = true
   export let shouldShowName: boolean = true
   export let shouldShowTooltip: boolean = false
   export let noUnderline: boolean = false
   export let accent: boolean = false
-  export let shrink: number = 0
+  export let shrink: number = 1
   export let space: Ref<Project> | undefined = undefined
   export let projectType: Ref<ProjectType> | undefined = $selectedTypeStore
   export let taskType: Ref<TaskType> | undefined = undefined
diff --git a/plugins/task-resources/src/components/state/StateRefPresenter.svelte b/plugins/task-resources/src/components/state/StateRefPresenter.svelte
index 2cff463dc6..e256c95e5b 100644
--- a/plugins/task-resources/src/components/state/StateRefPresenter.svelte
+++ b/plugins/task-resources/src/components/state/StateRefPresenter.svelte
@@ -27,7 +27,7 @@
   export let kind: ButtonKind = 'link'
   export let size: ButtonSize = 'medium'
   export let shouldShowName: boolean = true
-  export let shrink: number = 0
+  export let shrink: number = 1
   export let disabled: boolean = false
 
   import { selectedTaskTypeStore, selectedTypeStore } from '../../index'
diff --git a/plugins/templates-resources/src/components/Templates.svelte b/plugins/templates-resources/src/components/Templates.svelte
index 634e83fefd..7605a9d882 100644
--- a/plugins/templates-resources/src/components/Templates.svelte
+++ b/plugins/templates-resources/src/components/Templates.svelte
@@ -162,7 +162,7 @@
 
   <div class="hulyComponent-content__container columns">
     <div class="hulyComponent-content__column">
-      <div id="create-template" class="flex-between trans-title m-3">
+      <div id="create-template" class="flex-between trans-title flex-no-shrink bottom-divider p-3">
         <Button
           icon={templatesPlugin.icon.Template}
           label={templatesPlugin.string.CreateTemplate}
@@ -179,6 +179,7 @@
             label={getEmbeddedLabel(space.name)}
             actions={async () => await getSpaceActions(space)}
             isFold
+            noDivider
             empty={getTemps.length === 0}
           >
             {#each getTemps as t (t._id)}
diff --git a/plugins/text-editor-resources/src/components/TextActionButton.svelte b/plugins/text-editor-resources/src/components/TextActionButton.svelte
index 543888d752..f49c779d10 100644
--- a/plugins/text-editor-resources/src/components/TextActionButton.svelte
+++ b/plugins/text-editor-resources/src/components/TextActionButton.svelte
@@ -66,6 +66,7 @@
   class:selected
   use:tooltip={{ label: action.label }}
   tabindex="0"
+  data-id={'btn' + action.label.split(':').pop()}
   on:click|preventDefault|stopPropagation={handleClick}
 >
   <Icon icon={action.icon} {size} />
diff --git a/plugins/time-resources/src/components/DueDateEditor.svelte b/plugins/time-resources/src/components/DueDateEditor.svelte
index 7451920805..0dbe5e3bb0 100644
--- a/plugins/time-resources/src/components/DueDateEditor.svelte
+++ b/plugins/time-resources/src/components/DueDateEditor.svelte
@@ -55,6 +55,7 @@
   type="type-button"
   icon={time.icon.Calendar}
   iconSize="small"
+  id={'dueDateButton'}
   title={buttonTitle}
   label={buttonLabel}
   pressed={opened}
diff --git a/plugins/view-resources/src/components/ObjectPresenter.svelte b/plugins/view-resources/src/components/ObjectPresenter.svelte
index f560fa591d..f42c78bf80 100644
--- a/plugins/view-resources/src/components/ObjectPresenter.svelte
+++ b/plugins/view-resources/src/components/ObjectPresenter.svelte
@@ -27,10 +27,10 @@
   export let accent: boolean = false
   export let colorInherit: boolean = false
   export let shouldShowAvatar: boolean = true
-  export let noUnderline: boolean = false
+  export let noUnderline: boolean = true
   export let disabled: boolean = false
   export let shouldShowName: boolean = true
-  export let shrink: number = 0
+  export let shrink: number = 1
   export let exact = false
 
   const client = getClient()
diff --git a/tests/sanity/tests/custom-atributes/class-properties-page.ts b/tests/sanity/tests/custom-atributes/class-properties-page.ts
index 8275ec1704..741010b2e1 100644
--- a/tests/sanity/tests/custom-atributes/class-properties-page.ts
+++ b/tests/sanity/tests/custom-atributes/class-properties-page.ts
@@ -31,7 +31,7 @@ export class ClassProperties {
   inputName = (): Locator => this.page.getByPlaceholder('Name')
   createButton = (): Locator => this.page.getByRole('button', { name: 'Create' })
   enterTextString = (): Locator => this.page.getByPlaceholder('Type text...')
-  confirmChange = (): Locator => this.page.locator('.ml-2 > .antiButton')
+  confirmChange = (): Locator => this.page.locator('.selectPopup button')
 
   async selectDataType (dataType: DataType): Promise<void> {
     switch (dataType) {
diff --git a/tests/sanity/tests/model/channel-page.ts b/tests/sanity/tests/model/channel-page.ts
index 442a772b38..7226e1c78a 100644
--- a/tests/sanity/tests/model/channel-page.ts
+++ b/tests/sanity/tests/model/channel-page.ts
@@ -14,17 +14,33 @@ export class ChannelPage {
   readonly channelTab = (): Locator => this.page.getByRole('link', { name: 'Channels' }).getByRole('button')
   readonly channelTable = (): Locator => this.page.getByRole('table')
   readonly channel = (channel: string): Locator => this.page.getByRole('button', { name: channel })
+  readonly channelNameOnDetail = (channel: string): Locator =>
+    this.page
+      .locator('span.labelOnPanel', { hasText: 'Name' })
+      .locator('xpath=following-sibling::div[1]')
+      .locator('button', { hasText: channel })
+
   readonly chooseChannel = (channel: string): Locator => this.page.getByRole('button', { name: channel })
-  readonly closePopupWindow = (): Locator => this.page.locator('.root > div > .antiButton').first()
+  readonly closePopupWindow = (): Locator => this.page.locator('.notifyPopup button[data-id="btnNotifyClose"]')
   readonly openAddMemberToChannel = (userName: string): Locator => this.page.getByRole('button', { name: userName })
   readonly addMemberToChannelButton = (userName: string): Locator => this.page.getByText(userName)
   readonly joinChannelButton = (): Locator => this.page.getByRole('button', { name: 'Join' })
-  readonly addEmojiButton = (): Locator => this.page.locator('.root > button').first()
+  readonly addEmojiButton = (): Locator =>
+    this.page.locator('.activityMessage-actionPopup > button[data-id$="AddReactionAction"]')
+
   readonly selectEmoji = (emoji: string): Locator => this.page.getByText(emoji)
-  readonly saveMessageButton = (): Locator => this.page.locator('.root > button:nth-child(2)')
-  readonly pinMessageButton = (): Locator => this.page.locator('.root > button:nth-child(3)')
-  readonly replyButton = (): Locator => this.page.locator('.root > button:nth-child(4)')
-  readonly openMoreButton = (): Locator => this.page.locator('.root > button:nth-child(5)')
+  readonly saveMessageButton = (): Locator =>
+    this.page.locator('.activityMessage-actionPopup > button[data-id$="SaveForLaterAction"]')
+
+  readonly pinMessageButton = (): Locator =>
+    this.page.locator('.activityMessage-actionPopup > button[data-id$="PinMessageAction"]')
+
+  readonly replyButton = (): Locator =>
+    this.page.locator('.activityMessage-actionPopup > button[data-id$="ReplyToThreadAction"]')
+
+  readonly openMoreButton = (): Locator =>
+    this.page.locator('.activityMessage-actionPopup > button[data-id="btnMoreActions"]')
+
   readonly messageSaveMarker = (): Locator => this.page.locator('.saveMarker')
   readonly saveMessageTab = (): Locator => this.page.getByRole('button', { name: 'Saved' })
   readonly pinnedMessageButton = (): Locator => this.page.getByRole('button', { name: 'pinned' })
@@ -36,7 +52,7 @@ export class ChannelPage {
   readonly deleteMessageButton = (): Locator => this.page.getByRole('button', { name: 'Delete' })
   readonly updateButton = (): Locator => this.page.getByRole('button', { name: 'Update' })
   readonly openChannelDetails = (): Locator => this.page.locator('.hulyHeader-buttonsGroup > .antiButton')
-  readonly changeChannelNameConfirm = (): Locator => this.page.locator('.ml-2 > .antiButton')
+  readonly changeChannelNameConfirm = (): Locator => this.page.locator('.selectPopup button')
   readonly privateOrPublicChangeButton = (change: string, autoJoin: boolean): Locator =>
     this.page
       .locator('span.labelOnPanel', { hasText: autoJoin ? 'Auto join' : 'Private' })
@@ -64,7 +80,7 @@ export class ChannelPage {
   }
 
   async changeChannelName (channel: string): Promise<void> {
-    await this.channel(channel).nth(2).click()
+    await this.channelNameOnDetail(channel).click()
     await this.page.keyboard.type('New Channel Name')
     await this.changeChannelNameConfirm().click()
   }
diff --git a/tests/sanity/tests/model/documents/document-content-page.ts b/tests/sanity/tests/model/documents/document-content-page.ts
index 363eca9346..5d6de50ea6 100644
--- a/tests/sanity/tests/model/documents/document-content-page.ts
+++ b/tests/sanity/tests/model/documents/document-content-page.ts
@@ -11,7 +11,7 @@ export class DocumentContentPage extends CommonPage {
 
   readonly buttonDocumentTitle = (): Locator => this.page.locator('div[class*="main-content"] div.title input')
   readonly inputContent = (): Locator => this.page.locator('div.textInput div.tiptap')
-  readonly buttonToolbarLink = (): Locator => this.page.locator('div.text-editor-toolbar button:nth-child(10)')
+  readonly buttonToolbarLink = (): Locator => this.page.locator('div.text-editor-toolbar button[data-id="btnLink"]')
   readonly inputFormLink = (): Locator => this.page.locator('form[id="text-editor:string:Link"] input')
   readonly buttonFormLinkSave = (): Locator =>
     this.page.locator('form[id="text-editor:string:Link"] button[type="submit"]')
diff --git a/tests/sanity/tests/model/planning/planning-page.ts b/tests/sanity/tests/model/planning/planning-page.ts
index f5b1f14947..7f7e36406f 100644
--- a/tests/sanity/tests/model/planning/planning-page.ts
+++ b/tests/sanity/tests/model/planning/planning-page.ts
@@ -21,12 +21,8 @@ export class PlanningPage extends CalendarPage {
   readonly inputPopupCreateTitle = (): Locator => this.popup().locator('input[type="text"]')
   readonly inputPopupCreateDescription = (): Locator => this.popup().locator('div.tiptap')
   readonly inputPanelCreateDescription = (): Locator => this.panel().locator('div.tiptap')
-  readonly buttonPopupCreateDueDate = (): Locator =>
-    this.popup().locator('div.block:first-child div.flex-row-center button:nth-child(3)')
-
-  readonly buttonPanelCreateDueDate = (): Locator =>
-    this.panel().locator('div.slots-content div.flex-row-top.justify-between div.flex-row-center button:first-child')
-
+  readonly buttonPopupCreateDueDate = (): Locator => this.popup().locator('button#dueDateButton')
+  readonly buttonPanelCreateDueDate = (): Locator => this.panel().locator('button#dueDateButton')
   readonly buttonPopupCreatePriority = (): Locator => this.popup().locator('button#priorityButton')
   readonly buttonPanelCreatePriority = (): Locator => this.panel().locator('button#priorityButton')
   readonly buttonPopupCreateVisible = (): Locator => this.popup().locator('button#visibleButton')
diff --git a/tests/sanity/tests/model/tracker/issues-page.ts b/tests/sanity/tests/model/tracker/issues-page.ts
index 5a589f495c..f1004db822 100644
--- a/tests/sanity/tests/model/tracker/issues-page.ts
+++ b/tests/sanity/tests/model/tracker/issues-page.ts
@@ -113,7 +113,12 @@ export class IssuesPage extends CommonTrackerPage {
   createdTab = (): Locator => this.page.locator('[data-id="tab-created"]')
   subscribedTab = (): Locator => this.page.locator('[data-id="tab-subscribed"]')
   issueListPanel = (): Locator => this.page.locator('.hulyComponent')
-  notTrackButton = (): Locator => this.page.locator('button:has-text("Appleseed John") >> nth=1')
+  notTrackButton = (): Locator =>
+    this.page
+      .locator('span.labelOnPanel', { hasText: 'Collaborators' })
+      .locator('xpath=following-sibling::div[1]')
+      .locator('button')
+
   selectPopup = (): Locator => this.page.locator('.selectPopup >> button:has-text("Appleseed John")')
   notificationTimeoutSetting = (timeout: string): Promise<void> => {
     return this.page.evaluate((timeout) => {
@@ -136,7 +141,7 @@ export class IssuesPage extends CommonTrackerPage {
   issueName = (name: string): Locator => this.page.locator(`text="${name}"`)
   issuesButton = (): Locator => this.page.locator('text="Issues"')
   viewButton = (): Locator => this.page.locator('button[data-id="btn-viewOptions"]')
-  orderingButton = (): Locator => this.page.locator('.ordering >> nth=0')
+  orderingButton = (): Locator => this.page.locator('.ordering button')
   modifiedDateMenuItem = (): Locator => this.page.locator('button.menu-item', { hasText: 'Modified date' })
   estimationContainer = (): Locator => this.page.locator('.estimation-container').first()
   addTimeReportButton = (): Locator => this.page.locator('button:has-text("Add time report")')
@@ -158,7 +163,7 @@ export class IssuesPage extends CommonTrackerPage {
   dueDateButton = (): Locator => this.page.locator('button:has-text("Due date")')
   specificDay = (day: string): Locator => this.page.locator(`.date-popup-container div.day >> text=${day}`).first()
   inputTextPlaceholder = (): Locator => this.page.getByPlaceholder('Type text...')
-  confirmInput = (): Locator => this.page.locator('.ml-2 > .antiButton')
+  confirmInput = (): Locator => this.page.locator('.selectPopup button')
 
   async navigateToIssues (): Promise<void> {
     await this.page.click('text="Issues"')