GH-1136 - fix for when property value is an array (#1174)

* fix for when property value is an array

* remove log statement

* remove async from tests

webapp/src/components/__snapshots__/propertyValueElement.test.tsx.snap

@@ -0,0 +1,151 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`components/propertyValueElement should match snapshot, date, array value 1`] = `
+<div>
+  <div
+    class="DateRange "
+  >
+    <button
+      class="Button    "
+      type="button"
+    >
+      <span>
+        <span
+          title="Empty"
+        />
+      </span>
+    </button>
+  </div>
+</div>
+`;
+
+exports[`components/propertyValueElement should match snapshot, multi-select 1`] = `
+<div>
+  <div
+    class="octo-propertyvalue"
+    data-testid="multiselect-non-editable"
+    tabindex="0"
+  >
+    <span
+      class="Label propColorBrown "
+    >
+      value 1
+    </span>
+    <span
+      class="Label propColorBrown "
+    >
+      value 2
+    </span>
+  </div>
+</div>
+`;
+
+exports[`components/propertyValueElement should match snapshot, person, array value 1`] = `
+<div>
+  <input
+    class="Editable octo-propertyvalue"
+    placeholder=""
+    spellcheck="true"
+    title=""
+    value=""
+  />
+</div>
+`;
+
+exports[`components/propertyValueElement should match snapshot, select 1`] = `
+<div>
+  <div
+    class="octo-propertyvalue"
+    tabindex="0"
+  >
+    <span
+      class="Label propColorBrown "
+    >
+      <span
+        class="Label-text"
+      >
+        value 1
+      </span>
+      <div
+        aria-label="Clear"
+        class="Button IconButton margin-left delete-value"
+        role="button"
+        title="Clear"
+      >
+        <i
+          class="CompassIcon icon-close CloseIcon"
+        />
+      </div>
+    </span>
+  </div>
+</div>
+`;
+
+exports[`components/propertyValueElement should match snapshot, select, read-only 1`] = `
+<div>
+  <div
+    class="octo-propertyvalue"
+    tabindex="0"
+  >
+    <span
+      class="Label propColorBrown "
+    >
+      <span
+        class="Label-text"
+      >
+        value 1
+      </span>
+    </span>
+  </div>
+</div>
+`;
+
+exports[`components/propertyValueElement should match snapshot, url, array value 1`] = `
+<div>
+  <div
+    class="URLProperty property-link url"
+  >
+    <input
+      class="Editable octo-propertyvalue"
+      placeholder=""
+      title="http://localhost"
+      value="http://localhost"
+    />
+    <a
+      class="Link__button"
+      href="http://localhost"
+      rel="noreferrer"
+      target="_blank"
+    >
+      <i
+        class="CompassIcon icon-link-variant LinkIcon"
+      />
+    </a>
+  </div>
+</div>
+`;
+
+exports[`components/propertyValueElement should match snapshot, url, array value 2`] = `
+<div>
+  <div
+    class="URLProperty property-link url"
+  >
+    <input
+      class="Editable octo-propertyvalue"
+      placeholder=""
+      title="http://localhost"
+      value="http://localhost"
+    />
+    <a
+      class="Link__button"
+      href="http://localhost"
+      rel="noreferrer"
+      target="_blank"
+    >
+      <i
+        class="CompassIcon icon-link-variant LinkIcon"
+      />
+    </a>
+  </div>
+</div>
+`;

webapp/src/components/propertyValueElement.test.tsx

@@ -0,0 +1,200 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React from 'react'
+import {render} from '@testing-library/react'
+import '@testing-library/jest-dom'
+import {IntlProvider} from 'react-intl'
+
+import 'isomorphic-fetch'
+import {DndProvider} from 'react-dnd'
+import {HTML5Backend} from 'react-dnd-html5-backend'
+
+import {IPropertyTemplate, IPropertyOption} from '../blocks/board'
+
+import {TestBlockFactory} from '../test/testBlockFactory'
+
+import PropertyValueElement from './propertyValueElement'
+
+const wrapProviders = (children: any) => {
+    return (
+        <DndProvider backend={HTML5Backend}>
+            <IntlProvider locale='en'>{children}</IntlProvider>
+        </DndProvider>
+    )
+}
+
+describe('components/propertyValueElement', () => {
+    const board = TestBlockFactory.createBoard()
+    const card = TestBlockFactory.createCard(board)
+    const comments = TestBlockFactory.createComment(card)
+
+    test('should match snapshot, select', async () => {
+        const propertyTemplate = board.fields.cardProperties.find((p) => p.id === 'property1')
+        const component = wrapProviders(
+            <PropertyValueElement
+                board={board}
+                readOnly={false}
+                card={card}
+                contents={[]}
+                comments={[comments]}
+                propertyTemplate={propertyTemplate || board.fields.cardProperties[0]}
+                emptyDisplayValue={'empty'}
+            />,
+        )
+
+        const {container} = render(component)
+        expect(container).toMatchSnapshot()
+    })
+
+    test('should match snapshot, select, read-only', async () => {
+        const propertyTemplate = board.fields.cardProperties.find((p) => p.id === 'property1')
+        const component = wrapProviders(
+            <PropertyValueElement
+                board={board}
+                readOnly={true}
+                card={card}
+                contents={[]}
+                comments={[comments]}
+                propertyTemplate={propertyTemplate || board.fields.cardProperties[0]}
+                emptyDisplayValue={'empty'}
+            />,
+        )
+
+        const {container} = render(component)
+        expect(container).toMatchSnapshot()
+    })
+
+    test('should match snapshot, multi-select', () => {
+        const options: IPropertyOption[] = []
+        for (let i = 0; i < 3; i++) {
+            const propertyOption: IPropertyOption = {
+                id: `ms${i}`,
+                value: `value ${i}`,
+                color: 'propColorBrown',
+            }
+            options.push(propertyOption)
+        }
+
+        const propertyTemplate: IPropertyTemplate = {
+            id: 'multiSelect',
+            name: 'MultiSelect',
+            type: 'multiSelect',
+            options,
+        }
+        card.fields.properties.multiSelect = ['ms1', 'ms2']
+        const component = wrapProviders(
+            <PropertyValueElement
+                board={board}
+                readOnly={false}
+                card={card}
+                contents={[]}
+                comments={[comments]}
+                propertyTemplate={propertyTemplate}
+                emptyDisplayValue={'empty'}
+            />,
+        )
+
+        const {container} = render(component)
+        expect(container).toMatchSnapshot()
+    })
+
+    test('should match snapshot, url, array value', () => {
+        const propertyTemplate: IPropertyTemplate = {
+            id: 'property_url',
+            name: 'Property URL',
+            type: 'url',
+            options: [],
+        }
+        card.fields.properties.property_url = ['http://localhost']
+
+        const component = wrapProviders(
+            <PropertyValueElement
+                board={board}
+                readOnly={false}
+                card={card}
+                contents={[]}
+                comments={[comments]}
+                propertyTemplate={propertyTemplate}
+                emptyDisplayValue={'empty'}
+            />,
+        )
+
+        const {container} = render(component)
+        expect(container).toMatchSnapshot()
+    })
+
+    test('should match snapshot, url, array value', () => {
+        const propertyTemplate: IPropertyTemplate = {
+            id: 'property_url',
+            name: 'Property URL',
+            type: 'url',
+            options: [],
+        }
+        card.fields.properties.property_url = ['http://localhost']
+
+        const component = wrapProviders(
+            <PropertyValueElement
+                board={board}
+                readOnly={false}
+                card={card}
+                contents={[]}
+                comments={[comments]}
+                propertyTemplate={propertyTemplate}
+                emptyDisplayValue={'empty'}
+            />,
+        )
+
+        const {container} = render(component)
+        expect(container).toMatchSnapshot()
+    })
+
+    test('should match snapshot, person, array value', () => {
+        const propertyTemplate: IPropertyTemplate = {
+            id: 'text',
+            name: 'Generic Text',
+            type: 'text',
+            options: [],
+        }
+        card.fields.properties.person = ['value1', 'value2']
+
+        const component = wrapProviders(
+            <PropertyValueElement
+                board={board}
+                readOnly={false}
+                card={card}
+                contents={[]}
+                comments={[comments]}
+                propertyTemplate={propertyTemplate}
+                emptyDisplayValue={'empty'}
+            />,
+        )
+
+        const {container} = render(component)
+        expect(container).toMatchSnapshot()
+    })
+
+    test('should match snapshot, date, array value', () => {
+        const propertyTemplate: IPropertyTemplate = {
+            id: 'date',
+            name: 'Date',
+            type: 'date',
+            options: [],
+        }
+        card.fields.properties.date = ['invalid date']
+
+        const component = wrapProviders(
+            <PropertyValueElement
+                board={board}
+                readOnly={false}
+                card={card}
+                contents={[]}
+                comments={[comments]}
+                propertyTemplate={propertyTemplate}
+                emptyDisplayValue={'empty'}
+            />,
+        )
+        const {container} = render(component)
+        expect(container).toMatchSnapshot()
+    })
+})

webapp/src/components/propertyValueElement.tsx

@@ -188,7 +188,7 @@ const PropertyValueElement = (props:Props): JSX.Element => {
     } else if (propertyTemplate.type === 'person') {
         return (
             <UserProperty
-                value={propertyValue as string}
+                value={propertyValue.toString()}
                 readonly={readOnly}
                 onChange={(newValue) => mutator.changePropertyValue(card, propertyTemplate.id, newValue)}
             />
@@ -200,14 +200,14 @@ const PropertyValueElement = (props:Props): JSX.Element => {
         return (
             <DateRange
                 className='octo-propertyvalue'
-                value={value as string}
+                value={value.toString()}
                 onChange={(newValue) => mutator.changePropertyValue(card, propertyTemplate.id, newValue)}
             />
         )
     } else if (propertyTemplate.type === 'url') {
         return (
             <URLProperty
-                value={value as string}
+                value={value.toString()}
                 readonly={readOnly}
                 onChange={setValue}
                 onSave={saveTextProperty}
@@ -261,7 +261,7 @@ const PropertyValueElement = (props:Props): JSX.Element => {
                 <Editable
                     className='octo-propertyvalue'
                     placeholderText=''
-                    value={value as string}
+                    value={value.toString()}
                     onChange={setValue}
                     onSave={saveTextProperty}
                     onCancel={() => setValue(propertyValue)}