UBERF-4263: restore Back and Close button, fixed selectedAside (#3983)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>

packages/panel/src/components/Panel.svelte

@@ -35,17 +35,19 @@
   export let isUtils: boolean = true
   export let isCustomAttr: boolean = true
   export let floatAside: boolean = false
+  export let allowBack: boolean = true
   export let allowClose: boolean = true
+  export let embedded: boolean = false
   export let useMaxWidth: boolean | undefined = undefined
   export let isFullSize: boolean = false
   export let contentClasses: string | undefined = undefined
   export let content: HTMLElement | undefined | null = undefined
   export let withoutContentScroll: boolean = false
   export let customAside: ButtonItem[] | undefined = undefined
-  export let selectedAside: string | false = customAside ? customAside[0].id : false
+  export let selectedAside: string | boolean = customAside ? customAside[0].id : isAside
 
-  export function getAside (): string | false {
-    return selectedAside
+  export function getAside (): string | boolean {
+    return panel.getAside()
   }
   export function setAside (id: string | boolean): void {
     panel.setAside(id)
@@ -100,7 +102,9 @@
   bind:withoutTitle
   on:open
   on:close
+  {allowBack}
   {allowClose}
+  {embedded}
   {floatAside}
   bind:useMaxWidth
   {isFullSize}
@@ -182,7 +186,7 @@
         {#key object._id}
           <Component
             is={activity.component.Activity}
-            props={{ object, showCommenInput: !withoutInput, shouldScroll: true, focusIndex: 1000 }}
+            props={{ object, showCommenInput: !withoutInput, shouldScroll: embedded, focusIndex: 1000 }}
           />
         {/key}
       {/if}
@@ -201,7 +205,7 @@
             props={{
               object,
               showCommenInput: !withoutInput,
-              shouldScroll: true,
+              shouldScroll: embedded,
               focusIndex: 1000,
               boundary: content
             }}
@@ -227,7 +231,7 @@
               props={{
                 object,
                 showCommenInput: !withoutInput,
-                shouldScroll: true,
+                shouldScroll: embedded,
                 focusIndex: 1000,
                 boundary: content
               }}

packages/theme/styles/panel.scss

@@ -89,12 +89,13 @@
     flex-shrink: 0;
     justify-content: stretch;
     align-items: center;
-    padding: 0 1rem 0 1.25rem;
     min-width: 0;
     min-height: 3.25rem;
     background-color: var(--theme-comp-header-color);
     border-bottom: 1px solid var(--theme-divider-color);
 
+    &:not(.indent) { padding: 0 1rem 0 1.25rem; }
+    &.indent { padding: 0 1rem; }
     &__content {
       display: flex;
       align-items: center;
@@ -119,7 +120,10 @@
           &:hover, &:focus, &:active { color: var(--theme-caption-color); }
         }
         &.disabled { color: var(--theme-dark-color); }
-        &.not-active { color: var(--theme-caption-color); }
+        &.not-active {
+          color: var(--theme-caption-color);
+          user-select: text;
+        }
       }
     }
   }

packages/ui/src/components/ButtonGroup.svelte

@@ -18,7 +18,7 @@
   import Button from './Button.svelte'
 
   export let items: ButtonItem[]
-  export let selected: string | false = false
+  export let selected: string | boolean = false
   export let allowDeselected: boolean = true
   export let mode: 'filled-icon' | 'highlighted' | 'selected' = 'selected'
   export let props: any = {}

packages/ui/src/components/Panel.svelte

@@ -23,6 +23,7 @@
     ButtonGroup,
     Scroller,
     panelSeparators,
+    IconBack,
     ButtonItem
   } from '../../'
   import IconClose from './icons/Close.svelte'
@@ -39,13 +40,16 @@
   export let isFullSize: boolean = false
   export let withoutTitle: boolean = false
   export let floatAside: boolean = false
+  export let allowBack: boolean = true
   export let allowClose: boolean = true
+  export let embedded: boolean = false
   export let useMaxWidth: boolean | undefined = undefined
   export let customAside: ButtonItem[] | undefined = undefined
-  export let selectedAside: string | false = customAside ? customAside[0].id : false
+  export let selectedAside: string | boolean = customAside ? customAside[0].id : isAside
 
-  export function getAside (): string | false {
-    return selectedAside
+  export function getAside (): string | boolean {
+    if (customAside) return selectedAside
+    return asideShown
   }
   export function setAside (id: string | boolean): void {
     if (typeof id === 'string' && customAside) {
@@ -53,7 +57,7 @@
       if (i === -1) return
       handleSelectAside({ detail: id } as CustomEvent<any>)
     } else {
-      asideShown = id as boolean
+      asideShown = id !== false
       hideAside = !asideShown
       if (id === false) selectedAside = false
     }
@@ -62,11 +66,12 @@
   const dispatch = createEventDispatcher()
 
   let asideFloat: boolean = false
-  let asideShown: boolean = true
-  let hideAside: boolean = false
+  let asideShown: boolean = selectedAside !== false
+  let hideAside: boolean = !asideShown
   let fullSize: boolean = false
-  let oldAside: string | false = selectedAside
+  let oldAside: string | boolean = selectedAside
   $: if (typeof selectedAside === 'string' && oldAside !== selectedAside) oldAside = selectedAside
+  $: setAside(selectedAside)
 
   let oldWidth = ''
   let hideTimer: any | undefined
@@ -122,12 +127,39 @@
 
 <div
   class="popupPanel panel"
+  class:embedded
   use:resizeObserver={(element) => {
     panelWidth = element.clientWidth
     checkPanel()
   }}
 >
-  <div class="popupPanel-title">
+  <div class="popupPanel-title" class:indent={allowClose || allowClose}>
+    {#if allowBack}
+      <Button
+        id={'btnPBack'}
+        focusIndex={10000}
+        icon={IconBack}
+        iconProps={{ size: 'medium' }}
+        kind={'icon'}
+        on:click={() => {
+          dispatch('close')
+        }}
+      />
+      <div class="antiHSpacer" class:x2={!allowClose} />
+    {/if}
+    {#if allowClose}
+      <Button
+        id={'btnPClose'}
+        focusIndex={10001}
+        icon={IconClose}
+        iconProps={{ size: 'medium' }}
+        kind={'icon'}
+        on:click={() => {
+          history.back()
+        }}
+      />
+      <div class="antiHSpacer x2" />
+    {/if}
     <div class="popupPanel-title__content">
       {#if !withoutTitle}<slot name="title" />{/if}
     </div>
@@ -144,6 +176,7 @@
           />
         {:else}
           <Button
+            id={'btnPAside'}
             focusIndex={10008}
             icon={IconDetails}
             iconProps={{ size: 'medium', filled: asideShown }}
@@ -179,17 +212,6 @@
           }}
         />
       {/if}
-      {#if allowClose}
-        <Button
-          focusIndex={10001}
-          icon={IconClose}
-          iconProps={{ size: 'medium' }}
-          kind={'icon'}
-          on:click={() => {
-            dispatch('close')
-          }}
-        />
-      {/if}
     </div>
   </div>
   <div class="popupPanel-body {$deviceInfo.isMobile ? 'mobile' : 'main'}" class:asideShown>

plugins/chunter-resources/src/components/CommentPanel.svelte

@@ -21,6 +21,7 @@
   import { Class, Doc, Ref, getCurrentAccount } from '@hcengineering/core'
 
   export let _id: Ref<Comment> | undefined
+  export let embedded: boolean = true
 
   const client = getClient()
   const hierarchy = client.getHierarchy()
@@ -90,5 +91,5 @@
 {#if loading}
   <Loading />
 {:else if component && attachedDocId && attachedDocClass}
-  <Component is={component} props={{ _id: attachedDocId, _class: attachedDocClass }} on:close />
+  <Component is={component} props={{ _id: attachedDocId, _class: attachedDocClass, embedded }} on:close />
 {/if}

plugins/contact-resources/src/components/ChannelPanel.svelte

@@ -21,6 +21,7 @@
 
   export let _id: Ref<Channel>
   export let _class: Ref<Class<Channel>>
+  export let embedded: boolean = false
 
   const client = getClient()
 
@@ -42,6 +43,9 @@
 
 {#await getPresenter(channel) then presenter}
   {#if presenter}
-    <Component is={presenter} props={{ _id: channel?.attachedTo, _class: channel?.attachedToClass, channel }} />
+    <Component
+      is={presenter}
+      props={{ embedded, _id: channel?.attachedTo, _class: channel?.attachedToClass, channel }}
+    />
   {/if}
 {/await}

plugins/notification-resources/src/components/Inbox.svelte

@@ -187,7 +187,7 @@
         }}
       />
     {:else if component && _id && _class}
-      <Component is={component} props={{ _id, _class }} on:close={() => select(undefined)} />
+      <Component is={component} props={{ _id, _class, embedded: true }} on:close={() => select(undefined)} />
     {/if}
   </div>
 </div>

plugins/recruit-resources/src/components/EditVacancy.svelte

@@ -23,22 +23,14 @@
   import { Vacancy } from '@hcengineering/recruit'
   import tracker from '@hcengineering/tracker'
   import view from '@hcengineering/view'
-  import {
-    Button,
-    Component,
-    EditBox,
-    IconMixin,
-    IconMoreH,
-    Label,
-    showPopup,
-    deviceOptionsStore as deviceInfo
-  } from '@hcengineering/ui'
+  import { Button, Component, EditBox, IconMixin, IconMoreH, Label, showPopup } from '@hcengineering/ui'
   import { ContextMenu, DocAttributeBar, DocNavLink } from '@hcengineering/view-resources'
   import { createEventDispatcher, onDestroy } from 'svelte'
   import recruit from '../plugin'
   import VacancyApplications from './VacancyApplications.svelte'
 
   export let _id: Ref<Vacancy>
+  export let embedded: boolean = false
 
   let object: Required<Vacancy>
   let rawName: string = ''
@@ -136,6 +128,7 @@
     isHeader={false}
     isSub={false}
     isAside={true}
+    {embedded}
     {object}
     on:open
     on:close={() => {
@@ -160,7 +153,7 @@
         placeholder={recruit.string.VacancyPlaceholder}
         kind={'large-style'}
         focusable
-        autoFocus={!$deviceInfo.isMobile}
+        autoFocus={!embedded}
         on:blur={save}
       />
     </span>

plugins/setting-resources/src/components/IntegrationPanel.svelte

@@ -24,6 +24,7 @@
 
   export let _id: Ref<Integration>
   export let _class: Ref<Class<Integration>>
+  export let embedded: boolean = false
 
   let integration: Integration | undefined = undefined
   const query = createQuery()
@@ -53,7 +54,7 @@
 </script>
 
 {#if integration}
-  <Panel {title} object={integration} isHeader={false} isAside={false} withoutActivity withoutInput>
+  <Panel {title} object={integration} isHeader={false} isAside={false} {embedded} withoutActivity withoutInput>
     <div class="max-w-80 min-w-80">
       {#if type}
         <PluginCard {integration} integrationType={type} />

plugins/tracker-resources/src/components/issues/edit/EditIssue.svelte

@@ -55,6 +55,7 @@
 
   export let _id: Ref<Issue>
   export let _class: Ref<Class<Issue>>
+  export let embedded: boolean = false
 
   let lastId: Ref<Doc> = _id
   const queryClient = createQuery()
@@ -164,12 +165,14 @@
   let content: HTMLElement
 </script>
 
-<FocusHandler {manager} isEnabled={isContextEnabled} />
-<ActionContext
-  context={{
-    mode: 'editor'
-  }}
-/>
+{#if !embedded}
+  <FocusHandler {manager} isEnabled={isContextEnabled} />
+  <ActionContext
+    context={{
+      mode: 'editor'
+    }}
+  />
+{/if}
 
 {#if issue !== undefined}
   <Panel
@@ -177,6 +180,7 @@
     isHeader={false}
     isAside={true}
     isSub={false}
+    {embedded}
     withoutActivity={false}
     bind:content
     bind:innerWidth
@@ -185,12 +189,12 @@
     on:select
   >
     <svelte:fragment slot="title">
-      <ParentsNavigator element={issue} />
-      {#if issueId}
+      {#if !embedded}<ParentsNavigator element={issue} />{/if}
+      {#if embedded && issueId}
         <DocNavLink noUnderline object={issue}>
           <div class="title">{issueId}</div>
         </DocNavLink>
-      {/if}
+      {:else if issueId}<div class="title not-active">{issueId}</div>{/if}
     </svelte:fragment>
     <svelte:fragment slot="pre-utils">
       <ComponentExtensions

plugins/tracker-resources/src/components/templates/EditIssueTemplate.svelte

@@ -33,6 +33,7 @@
 
   export let _id: Ref<IssueTemplate>
   export let _class: Ref<Class<IssueTemplate>>
+  export let embedded: boolean = false
 
   let lastId: Ref<Doc> = _id
   const query = createQuery()
@@ -142,6 +143,7 @@
     isHeader={false}
     isAside={true}
     isSub={false}
+    {embedded}
     withoutActivity={false}
     bind:innerWidth
     on:open

plugins/view-resources/src/components/EditDoc.svelte

@@ -39,6 +39,7 @@
 
   export let _id: Ref<Doc>
   export let _class: Ref<Class<Doc>>
+  export let embedded: boolean = false
 
   let realObjectClass: Ref<Class<Doc>> = _class
   let lastId: Ref<Doc> = _id
@@ -265,17 +266,20 @@
   let content: HTMLElement
 </script>
 
-<ActionContext
-  context={{
-    mode: 'editor'
-  }}
-/>
+{#if !embedded}
+  <ActionContext
+    context={{
+      mode: 'editor'
+    }}
+  />
+{/if}
 
 {#if object !== undefined && finalTitle !== undefined}
   <Panel
     {object}
     isHeader={mainEditor?.pinned ?? false}
     isAside={true}
+    {embedded}
     bind:content
     bind:panelWidth
     bind:innerWidth
@@ -288,10 +292,12 @@
     withoutInput={!activityOptions.showInput}
   >
     <svelte:fragment slot="title">
-      <ParentsNavigator element={object} />
-      <DocNavLink noUnderline {object}>
-        <div class="title">{finalTitle}</div>
-      </DocNavLink>
+      {#if !embedded}<ParentsNavigator element={object} />{/if}
+      {#if embedded && object}
+        <DocNavLink noUnderline {object}>
+          <div class="title">{finalTitle}</div>
+        </DocNavLink>
+      {:else}<div class="title not-active">{finalTitle}</div>{/if}
     </svelte:fragment>
 
     <svelte:fragment slot="utils">
@@ -312,7 +318,7 @@
         {#if headerEditor !== undefined}
           <Component
             is={headerEditor}
-            props={{ object, keys, mixins, ignoreKeys, vertical: dir === 'column', allowedCollections }}
+            props={{ object, keys, mixins, ignoreKeys, vertical: dir === 'column', allowedCollections, embedded }}
             on:update={updateKeys}
           />
         {:else if dir === 'column'}

tests/sanity/tests/model/recruiting/applications-details-page.ts

@@ -9,7 +9,7 @@ export class ApplicationsDetailsPage extends CommonRecruitingPage {
   constructor (page: Page) {
     super(page)
     this.page = page
-    this.textApplicationId = page.locator('div.popupPanel-title a.noUnderline > div.title')
+    this.textApplicationId = page.locator('div.popupPanel-title div.title.not-active')
     this.buttonState = page
       .locator('div[class*="collapsed-container"]')
       .nth(0)