Move UI changes to main (#6161)

Signed-off-by: Alexander Platov <alexander.platov@hardcoreeng.com>

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 {

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'}>

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;

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}
 />

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;

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

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'

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)}

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} />

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}

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()

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

@@ -10,9 +10,13 @@
   import ServerManagerGeneral from './ServerManagerGeneral.svelte'
 
   import { getEmbeddedLabel } from '@hcengineering/platform'
-  import { Panel, TabItem, TabList } from '@hcengineering/ui'
+  import { createEventDispatcher } from 'svelte'
+  import presentation from '@hcengineering/presentation'
+  import { Header, TabItem, Switcher, Breadcrumb, IconSettings, ButtonIcon, IconClose } from '@hcengineering/ui'
   import ServerManagerAccountStatistics from './ServerManagerAccountStatistics.svelte'
 
+  const dispatch = createEventDispatcher()
+
   const tabs: TabItem[] = [
     {
       id: 'general',
@@ -42,35 +46,46 @@
   let selectedTab: string | number = tabs[0].id
 </script>
 
-<Panel on:close isFullSize useMaxWidth={true}>
+<div class="hulyComponent">
-  <svelte:fragment slot="title">
+  <Header type={'type-panel'} freezeBefore>
-    <span class="p-3"> Server manager </span>
+    <svelte:fragment slot="beforeTitle">
-    <TabList
+      <ButtonIcon
-      items={tabs}
+        icon={IconClose}
-      bind:selected={selectedTab}
+        kind={'secondary'}
-      kind={'separated'}
+        size={'small'}
-      on:select={(result) => {
+        tooltip={{ label: presentation.string.Close }}
-        selectedTab = result.detail.id
+        on:click={() => dispatch('close')}
-      }}
+      />
-    />
+    </svelte:fragment>
-  </svelte:fragment>
-  {#if selectedTab === 'general'}
-    <ServerManagerGeneral />
-  {:else if selectedTab === 'users'}
-    <ServerManagerUsers />
-  {:else if selectedTab === 'statistics'}
-    <ServerManagerServerStatistics />
-  {:else if selectedTab === 'statistics-front'}
-    <ServerManagerFrontStatistics />
-  {:else if selectedTab === 'statistics-collab'}
-    <ServerManagerCollaboratorStatistics />
-  {:else if selectedTab === 'account'}
-    <ServerManagerAccountStatistics />
-  {/if}
-</Panel>
 
-<style lang="scss">
+    <Breadcrumb icon={IconSettings} title={'Server manager'} size={'large'} isCurrent />
-  .greyed {
+
-    color: rgba(black, 0.5);
+    <svelte:fragment slot="actions">
-  }
+      <Switcher
-</style>
+        name={'swManagerMode'}
+        items={tabs}
+        bind:selected={selectedTab}
+        kind={'subtle'}
+        on:select={(result) => {
+          selectedTab = result.detail.id
+        }}
+      />
+    </svelte:fragment>
+  </Header>
+
+  <div class="hulyComponent-content__column content">
+    {#if selectedTab === 'general'}
+      <ServerManagerGeneral />
+    {:else if selectedTab === 'users'}
+      <ServerManagerUsers />
+    {:else if selectedTab === 'statistics'}
+      <ServerManagerServerStatistics />
+    {:else if selectedTab === 'statistics-front'}
+      <ServerManagerFrontStatistics />
+    {:else if selectedTab === 'statistics-collab'}
+      <ServerManagerCollaboratorStatistics />
+    {:else if selectedTab === 'account'}
+      <ServerManagerAccountStatistics />
+    {/if}
+  </div>
+</div>

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) {

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 saveMessageButton = (): Locator =>
-  readonly pinMessageButton = (): Locator => this.page.locator('.root > button:nth-child(3)')
+    this.page.locator('.activityMessage-actionPopup > button[data-id$="SaveForLaterAction"]')
-  readonly replyButton = (): Locator => this.page.locator('.root > button:nth-child(4)')
+
-  readonly openMoreButton = (): Locator => this.page.locator('.root > button:nth-child(5)')
+  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()
   }

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"]')

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 =>
+  readonly buttonPopupCreateDueDate = (): Locator => this.popup().locator('button#dueDateButton')
-    this.popup().locator('div.block:first-child div.flex-row-center button:nth-child(3)')
+  readonly buttonPanelCreateDueDate = (): Locator => this.panel().locator('button#dueDateButton')
-
-  readonly buttonPanelCreateDueDate = (): Locator =>
-    this.panel().locator('div.slots-content div.flex-row-top.justify-between div.flex-row-center button:first-child')
-
   readonly buttonPopupCreatePriority = (): Locator => this.popup().locator('button#priorityButton')
   readonly buttonPanelCreatePriority = (): Locator => this.panel().locator('button#priorityButton')
   readonly buttonPopupCreateVisible = (): Locator => this.popup().locator('button#visibleButton')

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"')