UBER-963: Related issues

models/lead/src/index.ts

@@ -213,6 +213,9 @@ export function createModel (builder: Builder): void {
         {
           key: '',
           presenter: tracker.component.RelatedIssueSelector,
+          props: {
+            kind: 'link'
+          },
           label: tracker.string.Relations
         },
         'comments',
@@ -252,6 +255,9 @@ export function createModel (builder: Builder): void {
         {
           key: '',
           presenter: tracker.component.RelatedIssueSelector,
+          props: {
+            kind: 'link'
+          },
           label: tracker.string.Issues
         },
         'status',
@@ -551,6 +557,20 @@ export function createModel (builder: Builder): void {
     filters: ['_class']
   })
 
+  builder.mixin(lead.mixin.Customer, core.class.Class, view.mixin.ObjectEditorFooter, {
+    editor: tracker.component.RelatedIssuesSection,
+    props: {
+      label: tracker.string.RelatedIssues
+    }
+  })
+
+  builder.mixin(lead.class.Lead, core.class.Class, view.mixin.ObjectEditorFooter, {
+    editor: tracker.component.RelatedIssuesSection,
+    props: {
+      label: tracker.string.RelatedIssues
+    }
+  })
+
   createAction(builder, {
     action: workbench.actionImpl.Navigate,
     actionProps: {

models/recruit/src/index.ts

@@ -407,6 +407,9 @@ export function createModel (builder: Builder): void {
         {
           key: '',
           presenter: tracker.component.RelatedIssueSelector,
+          props: {
+            kind: 'link'
+          },
           label: tracker.string.Relations
         },
         'comments',
@@ -487,6 +490,14 @@ export function createModel (builder: Builder): void {
           label: recruit.string.Applications
         },
         'comments',
+        {
+          key: '',
+          presenter: tracker.component.RelatedIssueSelector,
+          props: {
+            kind: 'link'
+          },
+          label: tracker.string.Issues
+        },
         '$lookup.company',
         '$lookup.company.$lookup.channels',
         'location',
@@ -523,6 +534,12 @@ export function createModel (builder: Builder): void {
           label: recruit.string.Applications
         },
         'comments',
+        {
+          key: '',
+          presenter: tracker.component.RelatedIssueSelector,
+          label: tracker.string.Issues,
+          props: { size: 'small', kind: 'link' }
+        },
         '$lookup.channels',
         {
           key: '@applications.modifiedOn',
@@ -558,6 +575,9 @@ export function createModel (builder: Builder): void {
         {
           key: '',
           presenter: tracker.component.RelatedIssueSelector,
+          props: {
+            kind: 'link'
+          },
           label: tracker.string.Issues
         },
         'status',
@@ -606,6 +626,9 @@ export function createModel (builder: Builder): void {
         {
           key: '',
           presenter: tracker.component.RelatedIssueSelector,
+          props: {
+            kind: 'link'
+          },
           label: tracker.string.Issues
         },
         'status',
@@ -864,6 +887,12 @@ export function createModel (builder: Builder): void {
           props: { kind: 'list', size: 'small', shouldShowName: false }
         },
         { key: 'comments', displayProps: { key: 'comments', suffix: true } },
+        {
+          key: '',
+          presenter: tracker.component.RelatedIssueSelector,
+          label: tracker.string.Issues,
+          props: { size: 'small' }
+        },
         {
           key: '$lookup.channels',
           label: contact.string.ContactInfo,
@@ -914,6 +943,11 @@ export function createModel (builder: Builder): void {
         },
         'description',
         { key: 'comments', displayProps: { key: 'comments', suffix: true } },
+        {
+          key: '',
+          presenter: tracker.component.RelatedIssueSelector,
+          label: tracker.string.Issues
+        },
         { key: '', displayProps: { grow: true } },
         {
           key: '$lookup.company',
@@ -1601,19 +1635,19 @@ export function createModel (builder: Builder): void {
   builder.mixin(recruit.mixin.Candidate, core.class.Class, view.mixin.ObjectEditorFooter, {
     editor: tracker.component.RelatedIssuesSection,
     props: {
-      label: recruit.string.RelatedIssues
+      label: tracker.string.RelatedIssues
     }
   })
   builder.mixin(recruit.class.Vacancy, core.class.Class, view.mixin.ObjectEditorFooter, {
     editor: tracker.component.RelatedIssuesSection,
     props: {
-      label: recruit.string.RelatedIssues
+      label: tracker.string.RelatedIssues
     }
   })
   builder.mixin(recruit.class.Applicant, core.class.Class, view.mixin.ObjectEditorFooter, {
     editor: tracker.component.RelatedIssuesSection,
     props: {
-      label: recruit.string.RelatedIssues
+      label: tracker.string.RelatedIssues
     }
   })
 

packages/kanban/src/components/KanbanRow.svelte

@@ -61,14 +61,14 @@
 
   function update (stateObjects: Item[], limit: number | undefined, index: number): void {
     clearTimeout(loadingTimeout)
-    if (limitedObjects.length > 0 || index * 2 === 0) {
+    if (limitedObjects.length > 0 || index === 0) {
       limitedObjects = stateObjects.slice(0, limit)
     } else {
       loading = true
       loadingTimeout = setTimeout(() => {
         limitedObjects = stateObjects.slice(0, limit)
         loading = false
-      }, index * 2)
+      }, index)
     }
   }
 

packages/theme/styles/popups.scss

@@ -22,11 +22,18 @@
   min-width: 12.5rem;
   max-width: 17rem;
   max-height: 22rem;
+
   background: var(--theme-popup-color);
   border: 1px solid var(--theme-popup-divider);
   border-radius: .5rem;
   box-shadow: var(--theme-popup-shadow);
 
+  &.noShadow {
+    background: none;
+    border: none;
+    box-shadow: none;
+  }
+
   &.full-width {
     flex-grow: 1;
     background: none;

packages/ui/src/components/Lazy.svelte

@@ -2,27 +2,28 @@
   import { createEventDispatcher } from 'svelte'
   const dispatch = createEventDispatcher()
 
-  import { lazyObserver } from '../lazy'
+  import { lazyObserver, isLazyEnabled } from '../lazy'
 
-  let visible = false
+  let visible = !isLazyEnabled()
 </script>
 
-<div
-  use:lazyObserver={(val) => {
-    if (val) {
-      visible = true
-      dispatch('visible')
-    }
-  }}
->
-  {#if visible}
-    <slot />
-  {:else}
+{#if !visible}
+  <div
+    use:lazyObserver={(val, unsubscribe) => {
+      if (val) {
+        visible = true
+        dispatch('visible')
+        unsubscribe?.()
+      }
+    }}
+  >
     <!-- Zero-width space character -->
     {#if $$slots.loading}
       <slot name="loading" />
     {:else}
       &#8203;
     {/if}
-  {/if}
-</div>
+  </div>
+{:else}
+  <slot />
+{/if}

packages/ui/src/components/Scroller.svelte

@@ -22,6 +22,7 @@
   import IconUpOutline from './icons/UpOutline.svelte'
   import IconDownOutline from './icons/DownOutline.svelte'
   import HalfUpDown from './icons/HalfUpDown.svelte'
+  import { DelayedCaller } from '../utils'
 
   export let padding: string | undefined = undefined
   export let autoscroll: boolean = false
@@ -249,20 +250,16 @@
     }
   }
 
-  let checkBarTimeout: any | undefined = undefined
-  let checkHBarTimeout: any | undefined = undefined
+  const delayedCaller = new DelayedCaller(25)
 
-  const delayCall = (op: () => void, h?: boolean) => {
-    if (h) {
-      clearTimeout(checkHBarTimeout)
-      checkHBarTimeout = setTimeout(op, 5)
-    } else {
-      clearTimeout(checkBarTimeout)
-      checkBarTimeout = setTimeout(op, 5)
-    }
+  const delayCall = (op: () => void) => {
+    delayedCaller.call(op)
   }
 
   const checkFade = (): void => {
+    delayCall(_checkFade)
+  }
+  const _checkFade = (): void => {
     if (divScroll) {
       beforeContent = divScroll.scrollTop
       belowContent = divScroll.scrollHeight - divScroll.clientHeight - beforeContent
@@ -279,11 +276,18 @@
         else if (rightContent > 2) maskH = 'left'
         else maskH = 'none'
       }
-      if (inter.size) checkIntersectionFade()
+      if (inter.size) {
+        checkIntersectionFade()
+      }
       renderFade()
     }
-    if (!isScrolling) delayCall(checkBar)
-    if (!isScrolling && horizontal) delayCall(checkBarH, true)
+
+    if (!isScrolling) {
+      checkBar()
+    }
+    if (!isScrolling && horizontal) {
+      checkBarH()
+    }
   }
 
   function checkAutoScroll () {
@@ -383,8 +387,12 @@
     if (divScroll && divBox) {
       divScroll.addEventListener('wheel', wheelEvent)
       divScroll.addEventListener('scroll', checkFade)
-      delayCall(checkBar)
-      if (horizontal) delayCall(checkBarH, true)
+      delayCall(() => {
+        checkBar()
+        if (horizontal) {
+          checkBarH()
+        }
+      })
     }
   })
   onDestroy(() => {

packages/ui/src/components/SelectPopup.svelte

@@ -50,6 +50,8 @@
   export let value: Array<ValueType>
   export let width: 'medium' | 'large' | 'full' = 'medium'
   export let size: 'small' | 'medium' | 'large' = 'small'
+  export let onSelect: ((value: ValueType['id']) => void) | undefined = undefined
+  export let showShadow: boolean = true
 
   let search: string = ''
 
@@ -60,6 +62,14 @@
   let selection = 0
   let list: ListView
 
+  function sendSelect (id: ValueType['id']): void {
+    if (onSelect) {
+      onSelect(id)
+    } else {
+      dispatch('close', id)
+    }
+  }
+
   function onKeydown (key: KeyboardEvent): void {
     if (key.code === 'ArrowUp') {
       key.stopPropagation()
@@ -74,7 +84,7 @@
     if (key.code === 'Enter') {
       key.preventDefault()
       key.stopPropagation()
-      dispatch('close', value[selection].id)
+      sendSelect(value[selection].id)
     }
   }
   const manager = createFocusManager()
@@ -88,6 +98,7 @@
 
 <div
   class="selectPopup"
+  class:noShadow={showShadow === false}
   class:full-width={width === 'full'}
   class:max-width-40={width === 'large'}
   use:resizeObserver={() => {
@@ -121,7 +132,7 @@
       >
         <svelte:fragment slot="item" let:item={itemId}>
           {@const item = filteredObjects[itemId]}
-          <button class="menu-item withList w-full" on:click={() => dispatch('close', item.id)}>
+          <button class="menu-item withList w-full" on:click={() => sendSelect(item.id)}>
             <div class="flex-row-center flex-grow pointer-events-none">
               {#if item.component}
                 <div class="flex-grow clear-mins"><svelte:component this={item.component} {...item.props} /></div>