[Gh 684] Autosize fix for multi-select columns (#882)

* temporary commit

* cleanup code

* final fixes

* remove setting perItemPadding where not necessary

* Update webapp/src/octoUtils.tsx

Co-authored-by: Hossein <hahmadia@users.noreply.github.com>

* Update webapp/src/components/table/table.tsx

Co-authored-by: Hossein <hahmadia@users.noreply.github.com>

Co-authored-by: Hossein <hahmadia@users.noreply.github.com>

webapp/src/components/properties/multiSelect.tsx

@@ -25,9 +25,7 @@ const MultiSelectProperty = (props: Props): JSX.Element => {
     const {propertyTemplate, emptyValue, propertyValue, isEditable, onChange, onChangeColor, onDeleteOption, onCreate, onDeleteValue} = props
     const [open, setOpen] = useState(false)
 
-    const values = Array.isArray(propertyValue) ?
-        propertyValue.map((v) => propertyTemplate.options.find((o) => o!.id === v)).filter((v): v is IPropertyOption => Boolean(v)) :
-        []
+    const values = Array.isArray(propertyValue) && propertyValue.length > 0 ? propertyValue.map((v) => propertyTemplate.options.find((o) => o!.id === v)).filter((v): v is IPropertyOption => Boolean(v)) : []
 
     if (!isEditable || !open) {
         return (
@@ -44,6 +42,9 @@ const MultiSelectProperty = (props: Props): JSX.Element => {
                         {v.value}
                     </Label>
                 ))}
+                {values.length === 0 && (
+                    <Label color='empty'>{''}</Label>
+                )}
             </div>
         )
     }

webapp/src/components/table/table.tsx

@@ -86,21 +86,63 @@ const Table = (props: Props): JSX.Element => {
         if (!columnRef?.current) {
             return
         }
-        const {fontDescriptor, padding} = Utils.getFontAndPaddingFromCell(columnRef.current)
 
-        cards.forEach((card) => {
-            let displayValue = card.title
+        let template: IPropertyTemplate | undefined
+        const columnFontPadding = Utils.getFontAndPaddingFromCell(columnRef.current)
+        let perItemPadding = 0
         if (columnID !== Constants.titleColumnId) {
-                const template = visibleProperties.find((t: IPropertyTemplate) => t.id === columnID)
+            template = visibleProperties.find((t: IPropertyTemplate) => t.id === columnID)
             if (!template) {
                 return
             }
-                displayValue = (OctoUtils.propertyDisplayValue(card, card.fields.properties[columnID], template, intl) || '') as string
-                if (template.type === 'select') {
-                    displayValue = displayValue.toUpperCase()
+            if (template.type === 'multiSelect') {
+                // For multiselect, the padding calculated above depends on the number selected when calculating the padding.
+                // Need to calculate it manually here.
+                // DOM Object hierarchy should be {cell -> property -> [value1, value2, etc]}
+                let valueCount = 0
+                if (columnRef?.current?.childElementCount > 0) {
+                    const propertyElement = columnRef.current.children.item(0) as Element
+                    if (propertyElement) {
+                        valueCount = propertyElement.childElementCount
+                        if (valueCount > 0) {
+                            const statusPadding = Utils.getFontAndPaddingFromChildren(propertyElement.children, 0)
+                            perItemPadding = statusPadding.padding / valueCount
                         }
                     }
-            const thisLen = Utils.getTextWidth(displayValue, fontDescriptor) + padding
+                }
+
+                // remove the "value" portion of the original calculation
+                columnFontPadding.padding -= (perItemPadding * valueCount)
+            }
+        }
+
+        cards.forEach((card) => {
+            let thisLen = 0
+            if (columnID === Constants.titleColumnId) {
+                thisLen = Utils.getTextWidth(card.title, columnFontPadding.fontDescriptor) + columnFontPadding.padding
+            } else if (template) {
+                const displayValue = (OctoUtils.propertyDisplayValue(card, card.fields.properties[columnID], template as IPropertyTemplate, intl) || '')
+                switch (template.type) {
+                case 'select': {
+                    thisLen = Utils.getTextWidth(displayValue.toString().toUpperCase(), columnFontPadding.fontDescriptor)
+                    break
+                }
+                case 'multiSelect': {
+                    if (displayValue) {
+                        const displayValues = displayValue as string[]
+                        displayValues.forEach((value) => {
+                            thisLen += Utils.getTextWidth(value.toUpperCase(), columnFontPadding.fontDescriptor) + perItemPadding
+                        })
+                    }
+                    break
+                }
+                default: {
+                    thisLen = Utils.getTextWidth(displayValue.toString(), columnFontPadding.fontDescriptor)
+                    break
+                }
+                }
+                thisLen += columnFontPadding.padding
+            }
             if (thisLen > longestSize) {
                 longestSize = thisLen
             }
@@ -286,7 +328,7 @@ const Table = (props: Props): JSX.Element => {
                 })}
             </div>
 
-            {/* Table header row */}
+            {/* Table rows */}
             <div className='table-row-container'>
                 {activeView.fields.groupById &&
                 visibleGroups.map((group) => {

webapp/src/octoUtils.tsx

@@ -30,6 +30,16 @@ class OctoUtils {
             }
             break
         }
+        case 'multiSelect': {
+            if (propertyValue?.length) {
+                const options = propertyTemplate.options.filter((o) => propertyValue.includes(o.id))
+                if (!options.length) {
+                    Utils.assertFailure(`Invalid multiSelect option IDs ${propertyValue}, block.title: ${block.title}`)
+                }
+                displayValue = options.map((o) => o.value)
+            }
+            break
+        }
         case 'createdTime': {
             displayValue = Utils.displayDateTime(new Date(block.createAt), intl)
             break