UBER-365 List view configuration issues (#3346)

models/lead/src/index.ts

@@ -290,13 +290,8 @@ export function createModel (builder: Builder): void {
       attachTo: lead.class.Lead,
       descriptor: view.viewlet.List,
       configOptions: {
-        hiddenKeys: ['title'],
+        strict: true,
-        sortable: true,
+        hiddenKeys: ['title']
-        extraProps: {
-          displayProps: {
-            optional: true
-          }
-        }
       },
       config: [
         { key: '', displayProps: { fixed: 'left', key: 'lead' } },
@@ -324,10 +319,11 @@ export function createModel (builder: Builder): void {
           key: '',
           presenter: tracker.component.RelatedIssueSelector,
           label: tracker.string.Relations,
-          displayProps: { fixed: 'left', key: 'issues' }
+          displayProps: { fixed: 'left', key: 'issues', optional: true }
         },
-        { key: 'attachments', displayProps: { fixed: 'left', key: 'attachments' } },
+        { key: 'attachments', displayProps: { key: 'attachments', optional: true } },
-        { key: 'comments', displayProps: { fixed: 'left', key: 'comments' } },
+        { key: 'comments', displayProps: { key: 'comments', optional: true } },
+        { key: '', displayProps: { grow: true } },
         {
           key: '$lookup.attachedTo.$lookup.channels',
           label: contact.string.ContactInfo,

models/recruit/src/index.ts

@@ -704,6 +704,7 @@ export function createModel (builder: Builder): void {
           label: tracker.string.Issues,
           displayProps: { fixed: 'left', key: 'issues' }
         },
+        { key: '', displayProps: { grow: true } },
         { key: 'attachments', displayProps: { fixed: 'left', key: 'attachments' } },
         { key: 'comments', displayProps: { fixed: 'left', key: 'comments' } },
         {
@@ -732,13 +733,8 @@ export function createModel (builder: Builder): void {
         }
       },
       configOptions: {
-        hiddenKeys: ['name', 'attachedTo'],
+        strict: true,
-        sortable: true,
+        hiddenKeys: ['name', 'attachedTo']
-        extraProps: {
-          displayProps: {
-            optional: true
-          }
-        }
       },
       baseQuery: {
         doneState: null,

models/tracker/src/index.ts

@@ -488,6 +488,7 @@ export function createModel (builder: Builder): void {
       descriptor: view.viewlet.List,
       viewOptions: issuesOptions(false),
       configOptions: {
+        strict: true,
         hiddenKeys: [
           'title',
           'blockedBy',
@@ -503,14 +504,10 @@ export function createModel (builder: Builder): void {
           'estimation',
           'status',
           'dueDate',
-          'attachedTo'
+          'attachedTo',
-        ],
+          'createdBy',
-        sortable: true,
+          'modifiedBy'
-        extraProps: {
+        ]
-          displayProps: {
-            optional: true
-          }
-        }
       },
       config: [
         {
@@ -549,6 +546,8 @@ export function createModel (builder: Builder): void {
           displayProps: { optional: true, compression: true },
           props: { kind: 'list', full: false }
         },
+        { key: 'attachments', displayProps: { key: 'attachments', optional: true } },
+        { key: 'comments', displayProps: { key: 'comments', optional: true } },
         {
           key: '',
           label: tracker.string.DueDate,
@@ -590,6 +589,7 @@ export function createModel (builder: Builder): void {
             optional: true
           }
         },
+        { key: '', displayProps: { grow: true } },
         {
           key: '',
           label: tracker.string.Estimation,
@@ -641,13 +641,18 @@ export function createModel (builder: Builder): void {
       viewOptions: subIssuesOptions,
       variant: 'subissue',
       configOptions: {
-        sortable: true,
+        strict: true,
-        hiddenKeys: ['priority', 'number', 'status', 'title', 'dueDate', 'milestone', 'estimation'],
+        hiddenKeys: [
-        extraProps: {
+          'priority',
-          displayProps: {
+          'number',
-            optional: true
+          'status',
-          }
+          'title',
-        }
+          'dueDate',
+          'milestone',
+          'estimation',
+          'createdBy',
+          'modifiedBy'
+        ]
       },
       config: [
         {
@@ -704,6 +709,7 @@ export function createModel (builder: Builder): void {
           props: { kind: 'list', size: 'small' },
           displayProps: { optional: true }
         },
+        { key: '', displayProps: { grow: true } },
         {
           key: 'modifiedOn',
           presenter: tracker.component.ModificationDatePresenter,
@@ -736,9 +742,8 @@ export function createModel (builder: Builder): void {
         other: [showColorsViewOption]
       },
       configOptions: {
-        hiddenKeys: ['milestone', 'estimation', 'component', 'title', 'description'],
+        strict: true,
-        extraProps: { displayProps: { optional: true } },
+        hiddenKeys: ['milestone', 'estimation', 'component', 'title', 'description', 'createdBy', 'modifiedBy']
-        sortable: true
       },
       config: [
         // { key: '', presenter: tracker.component.PriorityEditor, props: { kind: 'list', size: 'small' } },
@@ -780,6 +785,7 @@ export function createModel (builder: Builder): void {
           },
           displayProps: { key: 'estimation', optional: true, compression: true }
         },
+        { key: '', displayProps: { grow: true } },
         {
           key: 'modifiedOn',
           presenter: tracker.component.ModificationDatePresenter,
@@ -1885,9 +1891,8 @@ export function createModel (builder: Builder): void {
       descriptor: view.viewlet.List,
       viewOptions: milestoneOptions,
       configOptions: {
-        hiddenKeys: ['targetDate', 'label', 'description'],
+        strict: true,
-        extraProps: { displayProps: { optional: true } },
+        hiddenKeys: ['targetDate', 'label', 'description']
-        sortable: true
       },
       config: [
         {
@@ -1895,6 +1900,7 @@ export function createModel (builder: Builder): void {
           props: { width: '1rem', kind: 'list', size: 'small', justify: 'center' }
         },
         { key: '', presenter: tracker.component.MilestonePresenter, props: { shouldUseMargin: true } },
+        { key: '', displayProps: { grow: true } },
         {
           key: '',
           label: tracker.string.TargetDate,
@@ -1966,9 +1972,8 @@ export function createModel (builder: Builder): void {
       descriptor: view.viewlet.List,
       viewOptions: componentListViewOptions,
       configOptions: {
-        hiddenKeys: ['label', 'description'],
+        strict: true,
-        extraProps: { displayProps: { optional: true } },
+        hiddenKeys: ['label', 'description']
-        sortable: true
       },
       config: [
         {
@@ -1976,6 +1981,7 @@ export function createModel (builder: Builder): void {
           presenter: tracker.component.ComponentPresenter,
           props: { kind: 'list' }
         },
+        { key: '', displayProps: { grow: true } },
         {
           key: '$lookup.lead',
           presenter: tracker.component.LeadPresenter,

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

@@ -26,7 +26,7 @@
   export let withInput: boolean = true
 </script>
 
-{#if value && value > 0}
+{#if (value && value > 0) || withInput}
   <!-- svelte-ignore a11y-click-events-have-key-events -->
   <DocNavLink {object} inline noUnderline={true}>
     <div

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

@@ -47,13 +47,18 @@
 
   const client = getClient()
   const hierarchy = client.getHierarchy()
-  let items: AttributeConfig[] = []
+  let items: (Config | AttributeConfig)[] = []
   let loading = true
 
-  interface AttributeConfig {
+  interface Config {
+    value: string | BuildModelKey | undefined
+    type: 'divider' | 'attribute'
+  }
+
+  interface AttributeConfig extends Config {
+    type: 'attribute'
     enabled: boolean
     label: IntlString
-    value: string | BuildModelKey
     _class: Ref<Class<Doc>>
     icon: Asset | undefined
     order?: number
@@ -62,6 +67,7 @@
   function getObjectConfig (_class: Ref<Class<Doc>>, param: string): AttributeConfig {
     const clazz = hierarchy.getClass(_class)
     return {
+      type: 'attribute',
       value: param,
       label: clazz.label,
       enabled: true,
@@ -70,10 +76,11 @@
     }
   }
 
-  function getBaseConfig (viewlet: Viewlet): AttributeConfig[] {
+  function getBaseConfig (viewlet: Viewlet): Config[] {
     const lookup = buildConfigLookup(hierarchy, viewlet.attachTo, viewlet.config, viewlet.options?.lookup)
-    const result: AttributeConfig[] = []
+    const result: Config[] = []
     const clazz = hierarchy.getClass(viewlet.attachTo)
+    let wasOptional = false
     for (const param of viewlet.config) {
       if (typeof param === 'string') {
         if (viewlet.configOptions?.hiddenKeys?.includes(param)) continue
@@ -81,22 +88,38 @@
           result.push(getObjectConfig(viewlet.attachTo, param))
         } else {
           result.push({
+            type: 'attribute',
             value: param,
             enabled: true,
             label: getKeyLabel(client, viewlet.attachTo, param, lookup),
             _class: viewlet.attachTo,
             icon: clazz.icon
-          })
+          } as AttributeConfig)
         }
       } else {
         if (viewlet.configOptions?.hiddenKeys?.includes(param.key)) continue
+        if (param.displayProps?.grow === true) {
           result.push({
+            type: 'divider',
+            value: param
+          })
+        } else {
+          if (param.displayProps?.optional === true && !wasOptional) {
+            wasOptional = true
+            result.push({
+              type: 'divider',
+              value: ''
+            })
+          }
+          result.push({
+            type: 'attribute',
             value: param,
             label: param.label ?? getKeyLabel(client, viewlet.attachTo, param.key, lookup),
             enabled: true,
             _class: viewlet.attachTo,
             icon: clazz.icon
-        })
+          } as AttributeConfig)
+        }
       }
     }
     return result
@@ -112,13 +135,14 @@
     return name
   }
 
-  function processAttribute (attribute: AnyAttribute, result: AttributeConfig[], useMixinProxy = false): void {
+  function processAttribute (attribute: AnyAttribute, result: Config[], useMixinProxy = false): void {
     if (attribute.hidden === true || attribute.label === undefined) return
     if (viewlet.configOptions?.hiddenKeys?.includes(attribute.name)) return
     if (hierarchy.isDerived(attribute.type._class, core.class.Collection)) return
     const value = getValue(attribute.name, attribute.type)
     for (const res of result) {
-      const key = typeof res.value === 'string' ? res.value : res.value.key
+      const key = typeof res.value === 'string' ? res.value : res.value?.key
+      if (key === undefined) return
       if (key === attribute.name) return
       if (key === value) return
     }
@@ -134,7 +158,8 @@
     const clazz = hierarchy.getClass(attribute.attributeOf)
     const extraProps = viewlet.configOptions?.extraProps
     if (useMixinProxy) {
-      const newValue = {
+      const newValue: AttributeConfig = {
+        type: 'attribute',
         value: attribute.attributeOf + '.' + attribute.name,
         label: attribute.label,
         enabled: false,
@@ -145,7 +170,8 @@
         result.push(newValue)
       }
     } else {
-      const newValue = {
+      const newValue: AttributeConfig = {
+        type: 'attribute',
         value: extraProps ? { ...extraProps, key: value } : value,
         label: attribute.label,
         enabled: false,
@@ -158,8 +184,14 @@
     }
   }
 
-  function isExist (result: AttributeConfig[], newValue: AttributeConfig): boolean {
+  function isAttribute (val: Config): val is AttributeConfig {
+    return val.type === 'attribute'
+  }
+
+  function isExist (result: Config[], newValue: Config): boolean {
     for (const res of result) {
+      if (!isAttribute(res)) continue
+      if (!isAttribute(newValue)) continue
       if (res._class !== newValue._class) continue
       if (typeof res.value === 'string') {
         if (res.value === newValue.value) return true
@@ -168,7 +200,7 @@
     return false
   }
 
-  function getConfig (viewlet: Viewlet, preference: ViewletPreference | undefined): AttributeConfig[] {
+  function getConfig (viewlet: Viewlet, preference: ViewletPreference | undefined): Config[] {
     const result = getBaseConfig(viewlet)
 
     if (viewlet.configOptions?.strict !== true) {
@@ -201,7 +233,12 @@
   }
 
   async function save (): Promise<void> {
-    const config = items.filter((p) => p.enabled).map((p) => p.value)
+    const config = items
+      .filter(
+        (p) =>
+          p.value !== undefined && (p.type === 'divider' || (p.type === 'attribute' && (p as AttributeConfig).enabled))
+      )
+      .map((p) => p.value as string | BuildModelKey)
     if (preference !== undefined) {
       await client.update(preference, {
         config
@@ -214,23 +251,28 @@
     }
   }
 
-  function restoreDefault (): void {
+  async function restoreDefault (): Promise<void> {
-    items = getConfig(viewlet, undefined)
+    if (preference !== undefined) {
-    save()
+      await client.remove(preference)
+    }
   }
 
-  function setStatus (result: AttributeConfig[], preference: ViewletPreference): AttributeConfig[] {
+  function setStatus (result: Config[], preference: ViewletPreference): Config[] {
     for (const key of result) {
+      if (!isAttribute(key)) continue
       const index = preference.config.findIndex((p) => deepEqual(p, key.value))
       key.enabled = index !== -1
       key.order = index !== -1 ? index : undefined
     }
+    if (viewlet.configOptions?.sortable) {
       result.sort((a, b) => {
+        if (!isAttribute(a) || !isAttribute(b)) return 0
         if (a.order === undefined && b.order === undefined) return 0
         if (a.order === undefined) return 1
         if (b.order === undefined) return -1
         return a.order - b.order
       })
+    }
     return result
   }
 
@@ -240,6 +282,8 @@
   }
 
   function dragOver (e: DragEvent, i: number) {
+    e.preventDefault()
+    e.stopPropagation()
     const s = selected as number
     if (dragswap(e, i, s)) {
       ;[items[i], items[s]] = [items[s], items[i]]
@@ -258,6 +302,13 @@
     return false
   }
 
+  function change (item: Config, value: boolean): void {
+    if (isAttribute(item)) {
+      item.enabled = value
+      save()
+    }
+  }
+
   let selected: number | undefined
 </script>
 
@@ -270,11 +321,18 @@
         <Button on:click={restoreDefault} label={view.string.RestoreDefaults} size={'x-small'} kind={'link'} noFocus />
       </div>
       {#each items as item, i}
+        {#if isAttribute(item)}
           <div
             class="item"
             bind:this={elements[i]}
-          draggable={viewlet.configOptions?.sortable}
+            draggable={viewlet.configOptions?.sortable && item.enabled}
-          on:dragstart={() => {
+            on:dragstart={(ev) => {
+              if (ev.dataTransfer) {
+                ev.dataTransfer.effectAllowed = 'move'
+                ev.dataTransfer.dropEffect = 'move'
+              }
+              // ev.preventDefault()
+              ev.stopPropagation()
               selected = i
             }}
             on:dragover|preventDefault={(e) => dragOver(e, i)}
@@ -284,11 +342,13 @@
               on={item.enabled}
               label={item.label}
               on:change={(e) => {
-              item.enabled = e.detail
+                change(item, e.detail)
-              save()
               }}
             />
           </div>
+        {:else}
+          <div class="antiDivider" />
+        {/if}
       {/each}
     {/if}
   </div>

plugins/view-resources/src/components/list/ListItem.svelte

@@ -83,8 +83,6 @@
   onMount(() => {
     dispatch('on-mount')
   })
-
-  $: growBefore = Math.ceil(model.filter((p) => p.displayProps?.optional !== true).length / 2)
 </script>
 
 <div
@@ -135,7 +133,7 @@
     {@const displayProps = attributeModel.displayProps}
     {#if !groupByKey || displayProps?.excludeByKey !== groupByKey}
       {#if !(compactMode && displayProps?.compression)}
-        {#if i === growBefore}
+        {#if displayProps?.grow}
           <GrowPresenter />
           {#each model.filter((p) => p.displayProps?.optional) as attributeModel, i}
             {@const dp = attributeModel.displayProps}
@@ -163,7 +161,7 @@
               />
             {/if}
           {/each}
-        {/if}
+        {:else}
           {#if i !== 0 && displayProps?.dividerBefore === true}
             <DividerPresenter />
           {/if}
@@ -189,6 +187,7 @@
           {/if}
         {/if}
       {/if}
+    {/if}
   {/each}
   {#if compactMode}
     <div class="panel-trigger" tabindex="-1">

plugins/view/src/index.ts

@@ -475,6 +475,7 @@ export interface DisplayProps {
   fixed?: 'left' | 'right' // using for align items in row
   optional?: boolean
   compression?: boolean
+  grow?: boolean
   dividerBefore?: boolean // should show divider before
 }