From 5e1115c1f27644491db12de0c03b07c94be39cb3 Mon Sep 17 00:00:00 2001
From: Andrey Eremchenko <eremchenko@gmail.com>
Date: Thu, 26 Aug 2021 19:54:09 +0700
Subject: [PATCH 1/4] Show placeholders with 'Empty' text for empty fields in
 the card dialog.

---
 .../src/components/cardDetail/cardDetailProperties.tsx |  2 +-
 webapp/src/components/gallery/galleryCard.tsx          |  2 +-
 webapp/src/components/kanban/kanbanCard.tsx            |  2 +-
 .../src/components/properties/dateRange/dateRange.tsx  | 10 ++++++++--
 webapp/src/components/properties/link/link.tsx         |  3 ++-
 webapp/src/components/properties/multiSelect.tsx       |  2 +-
 webapp/src/components/propertyValueElement.tsx         |  9 ++++++---
 webapp/src/components/table/tableRow.tsx               |  2 +-
 8 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/webapp/src/components/cardDetail/cardDetailProperties.tsx b/webapp/src/components/cardDetail/cardDetailProperties.tsx
index be728bf8b..ebabdd7e2 100644
--- a/webapp/src/components/cardDetail/cardDetailProperties.tsx
+++ b/webapp/src/components/cardDetail/cardDetailProperties.tsx
@@ -58,7 +58,7 @@ const CardDetailProperties = React.memo((props: Props) => {
                             contents={contents}
                             comments={comments}
                             propertyTemplate={propertyTemplate}
-                            emptyDisplayValue='Empty'
+                            showEmptyPlaceholder={true}
                         />
                     </div>
                 )
diff --git a/webapp/src/components/gallery/galleryCard.tsx b/webapp/src/components/gallery/galleryCard.tsx
index 4bec4af1f..0c1407fa0 100644
--- a/webapp/src/components/gallery/galleryCard.tsx
+++ b/webapp/src/components/gallery/galleryCard.tsx
@@ -149,7 +149,7 @@ const GalleryCard = React.memo((props: Props) => {
                                 readOnly={true}
                                 card={card}
                                 propertyTemplate={template}
-                                emptyDisplayValue=''
+                                showEmptyPlaceholder={false}
                             />
                         </Tooltip>
                     ))}
diff --git a/webapp/src/components/kanban/kanbanCard.tsx b/webapp/src/components/kanban/kanbanCard.tsx
index 916af303e..5d1e8cf05 100644
--- a/webapp/src/components/kanban/kanbanCard.tsx
+++ b/webapp/src/components/kanban/kanbanCard.tsx
@@ -105,7 +105,7 @@ const KanbanCard = React.memo((props: Props) => {
                         contents={contents}
                         comments={comments}
                         propertyTemplate={template}
-                        emptyDisplayValue=''
+                        showEmptyPlaceholder={false}
                     />
                 </Tooltip>
             ))}
diff --git a/webapp/src/components/properties/dateRange/dateRange.tsx b/webapp/src/components/properties/dateRange/dateRange.tsx
index 50048a0c2..a8f07d1cc 100644
--- a/webapp/src/components/properties/dateRange/dateRange.tsx
+++ b/webapp/src/components/properties/dateRange/dateRange.tsx
@@ -22,6 +22,7 @@ import {Utils} from '../../../utils'
 type Props = {
     className: string
     value: string
+    showEmptyPlaceholder?: boolean
     onChange: (value: string) => void
 }
 
@@ -35,7 +36,7 @@ type DateProperty = {
 const loadedLocales: Record<string, any> = {}
 
 function DateRange(props: Props): JSX.Element {
-    const {className, value, onChange} = props
+    const {className, value, showEmptyPlaceholder, onChange} = props
     const intl = useIntl()
     const timeZoneOffset = new Date().getTimezoneOffset() * 60 * 1000
 
@@ -151,12 +152,17 @@ function DateRange(props: Props): JSX.Element {
         setShowDialog(false)
     }
 
+    let buttonText = displayValue
+    if (!buttonText && showEmptyPlaceholder) {
+        buttonText = intl.formatMessage({id: 'DateRange.empty', defaultMessage: 'Empty'})
+    }
+
     return (
         <div className={'DateRange '}>
             <Button
                 onClick={() => setShowDialog(true)}
             >
-                {displayValue || <span title={intl.formatMessage({id: 'DateRange.empty', defaultMessage: 'Empty'})}/>}
+                {buttonText}
             </Button>
 
             {showDialog &&
diff --git a/webapp/src/components/properties/link/link.tsx b/webapp/src/components/properties/link/link.tsx
index ac3a01477..f1e24b983 100644
--- a/webapp/src/components/properties/link/link.tsx
+++ b/webapp/src/components/properties/link/link.tsx
@@ -12,6 +12,7 @@ import LinkIcon from '../../../widgets/icons/Link'
 type Props = {
     value: string
     readonly?: boolean
+    placeholder?: string
     onChange: (value: string) => void
     onSave: () => void
     onCancel: () => void
@@ -38,7 +39,7 @@ const URLProperty = (props: Props): JSX.Element => {
         <div className='URLProperty property-link url'>
             <Editable
                 className='octo-propertyvalue'
-                placeholderText=''
+                placeholderText={props.placeholder}
                 value={props.value}
                 readonly={props.readonly}
                 onChange={props.onChange}
diff --git a/webapp/src/components/properties/multiSelect.tsx b/webapp/src/components/properties/multiSelect.tsx
index 5579014f7..d7762b427 100644
--- a/webapp/src/components/properties/multiSelect.tsx
+++ b/webapp/src/components/properties/multiSelect.tsx
@@ -44,7 +44,7 @@ const MultiSelectProperty = (props: Props): JSX.Element => {
                     </Label>
                 ))}
                 {values.length === 0 && (
-                    <Label color='empty'>{''}</Label>
+                    <Label color='empty'>{emptyValue}</Label>
                 )}
             </div>
         )
diff --git a/webapp/src/components/propertyValueElement.tsx b/webapp/src/components/propertyValueElement.tsx
index 48929d161..e9e74a980 100644
--- a/webapp/src/components/propertyValueElement.tsx
+++ b/webapp/src/components/propertyValueElement.tsx
@@ -36,17 +36,18 @@ type Props = {
     contents: Array<ContentBlock|ContentBlock[]>
     comments: CommentBlock[]
     propertyTemplate: IPropertyTemplate
-    emptyDisplayValue: string
+    showEmptyPlaceholder: boolean
 }
 
 const PropertyValueElement = (props:Props): JSX.Element => {
     const [value, setValue] = useState(props.card.fields.properties[props.propertyTemplate.id] || '')
     const [serverValue, setServerValue] = useState(props.card.fields.properties[props.propertyTemplate.id] || '')
 
-    const {card, propertyTemplate, readOnly, emptyDisplayValue, board, contents, comments} = props
+    const {card, propertyTemplate, readOnly, showEmptyPlaceholder, board, contents, comments} = props
     const intl = useIntl()
     const propertyValue = card.fields.properties[propertyTemplate.id]
     const displayValue = OctoUtils.propertyDisplayValue(card, propertyValue, propertyTemplate, intl)
+    const emptyDisplayValue = showEmptyPlaceholder ? intl.formatMessage({id: 'PropertyValueElement.empty', defaultMessage: 'Empty'}) : ''
     const finalDisplayValue = displayValue || emptyDisplayValue
     const [open, setOpen] = useState(false)
 
@@ -201,6 +202,7 @@ const PropertyValueElement = (props:Props): JSX.Element => {
             <DateRange
                 className='octo-propertyvalue'
                 value={value as string}
+                showEmptyPlaceholder={showEmptyPlaceholder}
                 onChange={(newValue) => mutator.changePropertyValue(card, propertyTemplate.id, newValue)}
             />
         )
@@ -209,6 +211,7 @@ const PropertyValueElement = (props:Props): JSX.Element => {
             <URLProperty
                 value={value as string}
                 readonly={readOnly}
+                placeholder={emptyDisplayValue}
                 onChange={setValue}
                 onSave={saveTextProperty}
                 onCancel={() => setValue(propertyValue)}
@@ -260,7 +263,7 @@ const PropertyValueElement = (props:Props): JSX.Element => {
             return (
                 <Editable
                     className='octo-propertyvalue'
-                    placeholderText=''
+                    placeholderText={emptyDisplayValue}
                     value={value as string}
                     onChange={setValue}
                     onSave={saveTextProperty}
diff --git a/webapp/src/components/table/tableRow.tsx b/webapp/src/components/table/tableRow.tsx
index 249c57225..f09a7db3a 100644
--- a/webapp/src/components/table/tableRow.tsx
+++ b/webapp/src/components/table/tableRow.tsx
@@ -140,7 +140,7 @@ const TableRow = React.memo((props: Props) => {
                             contents={contents}
                             comments={comments}
                             propertyTemplate={template}
-                            emptyDisplayValue=''
+                            showEmptyPlaceholder={false}
                         />
                     </div>)
             })}

From e299940cadd5428eeb9776308d42d0a12534066b Mon Sep 17 00:00:00 2001
From: Andrey Eremchenko <eremchenko@gmail.com>
Date: Thu, 26 Aug 2021 23:04:01 +0700
Subject: [PATCH 2/4] Unit test for `DateRange` fixed. Snapshots updated.

---
 .../dateRange/__snapshots__/dateRange.test.tsx.snap         | 6 +-----
 .../src/components/properties/dateRange/dateRange.test.tsx  | 6 ++++--
 .../properties/link/__snapshots__/link.test.tsx.snap        | 1 -
 3 files changed, 5 insertions(+), 8 deletions(-)

diff --git a/webapp/src/components/properties/dateRange/__snapshots__/dateRange.test.tsx.snap b/webapp/src/components/properties/dateRange/__snapshots__/dateRange.test.tsx.snap
index 2a92f7502..ad99753d8 100644
--- a/webapp/src/components/properties/dateRange/__snapshots__/dateRange.test.tsx.snap
+++ b/webapp/src/components/properties/dateRange/__snapshots__/dateRange.test.tsx.snap
@@ -43,11 +43,7 @@ exports[`components/properties/dateRange returns default correctly 1`] = `
       class="Button    "
       type="button"
     >
-      <span>
-        <span
-          title="Empty"
-        />
-      </span>
+      <span />
     </button>
   </div>
 </div>
diff --git a/webapp/src/components/properties/dateRange/dateRange.test.tsx b/webapp/src/components/properties/dateRange/dateRange.test.tsx
index 0e14fb845..b511a06cf 100644
--- a/webapp/src/components/properties/dateRange/dateRange.test.tsx
+++ b/webapp/src/components/properties/dateRange/dateRange.test.tsx
@@ -60,6 +60,7 @@ describe('components/properties/dateRange', () => {
             <DateRange
                 className='octo-propertyvalue'
                 value={''}
+                showEmptyPlaceholder={true}
                 onChange={callback}
             />,
         )
@@ -68,7 +69,7 @@ describe('components/properties/dateRange', () => {
         const fifteenth = Date.UTC(date.getFullYear(), date.getMonth(), 15, 12)
 
         const {getByText, getByTitle} = render(component)
-        const dayDisplay = getByTitle('Empty')
+        const dayDisplay = getByText('Empty')
         userEvent.click(dayDisplay)
 
         const day = getByText('15')
@@ -86,13 +87,14 @@ describe('components/properties/dateRange', () => {
             <DateRange
                 className='octo-propertyvalue'
                 value={''}
+                showEmptyPlaceholder={true}
                 onChange={callback}
             />,
         )
 
         // open modal
         const {getByText, getByTitle} = render(component)
-        const dayDisplay = getByTitle('Empty')
+        const dayDisplay = getByText('Empty')
         userEvent.click(dayDisplay)
 
         // select start date
diff --git a/webapp/src/components/properties/link/__snapshots__/link.test.tsx.snap b/webapp/src/components/properties/link/__snapshots__/link.test.tsx.snap
index 00dddfb53..cdc7abf9d 100644
--- a/webapp/src/components/properties/link/__snapshots__/link.test.tsx.snap
+++ b/webapp/src/components/properties/link/__snapshots__/link.test.tsx.snap
@@ -7,7 +7,6 @@ exports[`components/properties/link returns link properties correctly 1`] = `
   >
     <input
       class="Editable octo-propertyvalue"
-      placeholder=""
       title="https://github.com/mattermost/focalboard"
       value="https://github.com/mattermost/focalboard"
     />

From 13bc220e52a3aec33c37ea5d5f8d920c27e36218 Mon Sep 17 00:00:00 2001
From: Andrey Eremchenko <eremchenko@gmail.com>
Date: Mon, 6 Sep 2021 22:19:55 +0700
Subject: [PATCH 3/4] More consistent styles for empty placeholders.

---
 .../dateRange/__snapshots__/dateRange.test.tsx.snap  |  2 +-
 .../components/properties/dateRange/dateRange.scss   |  9 +++++----
 .../components/properties/dateRange/dateRange.tsx    |  2 +-
 .../properties/user/__snapshots__/user.test.tsx.snap |  4 ++--
 webapp/src/components/properties/user/user.tsx       | 12 +++++++++++-
 webapp/src/widgets/label.scss                        |  7 +++++++
 webapp/src/widgets/valueSelector.tsx                 |  4 ++++
 7 files changed, 31 insertions(+), 9 deletions(-)

diff --git a/webapp/src/components/properties/dateRange/__snapshots__/dateRange.test.tsx.snap b/webapp/src/components/properties/dateRange/__snapshots__/dateRange.test.tsx.snap
index ad99753d8..16275b6d0 100644
--- a/webapp/src/components/properties/dateRange/__snapshots__/dateRange.test.tsx.snap
+++ b/webapp/src/components/properties/dateRange/__snapshots__/dateRange.test.tsx.snap
@@ -37,7 +37,7 @@ exports[`components/properties/dateRange handle clear 1`] = `
 exports[`components/properties/dateRange returns default correctly 1`] = `
 <div>
   <div
-    class="DateRange "
+    class="DateRange empty"
   >
     <button
       class="Button    "
diff --git a/webapp/src/components/properties/dateRange/dateRange.scss b/webapp/src/components/properties/dateRange/dateRange.scss
index 065f9ee0e..ffc0253f6 100644
--- a/webapp/src/components/properties/dateRange/dateRange.scss
+++ b/webapp/src/components/properties/dateRange/dateRange.scss
@@ -1,10 +1,6 @@
 .DateRange {
     width: 100%;
 
-    .octo-propertyvalue {
-        white-space: none;
-    }
-
     .inputContainer {
         display: flex;
 
@@ -43,6 +39,11 @@
         margin-bottom: 100px;
     }
 
+    &.empty .Button {
+        color: rgba(var(--center-channel-color-rgb), 0.4);
+        padding: 0 3px;
+    }
+
     .Button {
         width: 100%;
         height: 100%;
diff --git a/webapp/src/components/properties/dateRange/dateRange.tsx b/webapp/src/components/properties/dateRange/dateRange.tsx
index a8f07d1cc..7e16b4ed4 100644
--- a/webapp/src/components/properties/dateRange/dateRange.tsx
+++ b/webapp/src/components/properties/dateRange/dateRange.tsx
@@ -158,7 +158,7 @@ function DateRange(props: Props): JSX.Element {
     }
 
     return (
-        <div className={'DateRange '}>
+        <div className={`DateRange ${displayValue ? '' : 'empty'}`}>
             <Button
                 onClick={() => setShowDialog(true)}
             >
diff --git a/webapp/src/components/properties/user/__snapshots__/user.test.tsx.snap b/webapp/src/components/properties/user/__snapshots__/user.test.tsx.snap
index aea9d2135..2fe4e6f72 100644
--- a/webapp/src/components/properties/user/__snapshots__/user.test.tsx.snap
+++ b/webapp/src/components/properties/user/__snapshots__/user.test.tsx.snap
@@ -111,9 +111,9 @@ exports[`components/properties/user not readonly not existing user 1`] = `
         class=" css-kpfmlq-ValueContainer"
       >
         <div
-          class=" css-1wa3eu0-placeholder"
+          class=" css-1oswhd8-placeholder"
         >
-          Select...
+          Empty
         </div>
         <div
           class="css-1shkodo-Input"
diff --git a/webapp/src/components/properties/user/user.tsx b/webapp/src/components/properties/user/user.tsx
index 99b87857a..b44654537 100644
--- a/webapp/src/components/properties/user/user.tsx
+++ b/webapp/src/components/properties/user/user.tsx
@@ -3,6 +3,7 @@
 
 import React from 'react'
 import Select from 'react-select'
+import {CSSObject} from '@emotion/serialize'
 
 import {IUser} from '../../../user'
 import {getWorkspaceUsersList, getWorkspaceUsers} from '../../../store/users'
@@ -17,6 +18,14 @@ type Props = {
     onChange: (value: string) => void,
 }
 
+const selectStyles = {
+    ...getSelectBaseStyle(),
+    placeholder: (provided: CSSObject): CSSObject => ({
+        ...provided,
+        color: 'rgba(var(--center-channel-color-rgb), 0.4)',
+    }),
+}
+
 const UserProperty = (props: Props): JSX.Element => {
     const workspaceUsers = useAppSelector<IUser[]>(getWorkspaceUsersList)
     const workspaceUsersById = useAppSelector<{[key:string]: IUser}>(getWorkspaceUsers)
@@ -32,7 +41,8 @@ const UserProperty = (props: Props): JSX.Element => {
             isClearable={true}
             backspaceRemovesValue={true}
             className={'UserProperty'}
-            styles={getSelectBaseStyle()}
+            styles={selectStyles}
+            placeholder={'Empty'}
             getOptionLabel={(o: IUser) => o.username}
             getOptionValue={(a: IUser) => a.id}
             value={workspaceUsersById[props.value] || null}
diff --git a/webapp/src/widgets/label.scss b/webapp/src/widgets/label.scss
index 604f02f6d..6436fff08 100644
--- a/webapp/src/widgets/label.scss
+++ b/webapp/src/widgets/label.scss
@@ -12,6 +12,13 @@
     margin-right: 5px;
     margin-bottom: 5px;
 
+    &.empty {
+        color: rgba(var(--center-channel-color-rgb), 0.4);
+        padding: 3px;
+        text-transform: none;
+        font-weight: normal;
+    }
+
     input {
         line-height: 20px;
         color: rgba(var(--center-channel-color-rgb), 0.8);
diff --git a/webapp/src/widgets/valueSelector.tsx b/webapp/src/widgets/valueSelector.tsx
index 7ffdc16be..9ce6ed533 100644
--- a/webapp/src/widgets/valueSelector.tsx
+++ b/webapp/src/widgets/valueSelector.tsx
@@ -114,6 +114,10 @@ const valueSelectorStyle = {
         padding: '0 8px',
         overflow: 'unset',
     }),
+    placeholder: (provided: CSSObject): CSSObject => ({
+        ...provided,
+        color: 'rgba(var(--center-channel-color-rgb), 0.4)',
+    }),
     multiValue: (provided: CSSObject): CSSObject => ({
         ...provided,
         margin: 0,

From c2ca0a9e8a58a3417a5d77ee920c5f915ca25dc4 Mon Sep 17 00:00:00 2001
From: Andrey Eremchenko <eremchenko@gmail.com>
Date: Sun, 12 Sep 2021 21:00:43 +0700
Subject: [PATCH 4/4] Fix unit tests.

---
 .../propertyValueElement.test.tsx.snap             | 12 +++++-------
 .../properties/dateRange/dateRange.test.tsx        |  3 ++-
 .../src/components/propertyValueElement.test.tsx   | 14 +++++++-------
 3 files changed, 14 insertions(+), 15 deletions(-)

diff --git a/webapp/src/components/__snapshots__/propertyValueElement.test.tsx.snap b/webapp/src/components/__snapshots__/propertyValueElement.test.tsx.snap
index 5861999df..a2cf8c25a 100644
--- a/webapp/src/components/__snapshots__/propertyValueElement.test.tsx.snap
+++ b/webapp/src/components/__snapshots__/propertyValueElement.test.tsx.snap
@@ -3,16 +3,14 @@
 exports[`components/propertyValueElement should match snapshot, date, array value 1`] = `
 <div>
   <div
-    class="DateRange "
+    class="DateRange empty"
   >
     <button
       class="Button    "
       type="button"
     >
       <span>
-        <span
-          title="Empty"
-        />
+        Empty
       </span>
     </button>
   </div>
@@ -44,7 +42,7 @@ exports[`components/propertyValueElement should match snapshot, person, array va
 <div>
   <input
     class="Editable octo-propertyvalue"
-    placeholder=""
+    placeholder="Empty"
     spellcheck="true"
     title=""
     value=""
@@ -107,7 +105,7 @@ exports[`components/propertyValueElement should match snapshot, url, array value
   >
     <input
       class="Editable octo-propertyvalue"
-      placeholder=""
+      placeholder="Empty"
       title="http://localhost"
       value="http://localhost"
     />
@@ -132,7 +130,7 @@ exports[`components/propertyValueElement should match snapshot, url, array value
   >
     <input
       class="Editable octo-propertyvalue"
-      placeholder=""
+      placeholder="Empty"
       title="http://localhost"
       value="http://localhost"
     />
diff --git a/webapp/src/components/properties/dateRange/dateRange.test.tsx b/webapp/src/components/properties/dateRange/dateRange.test.tsx
index c9e1ec393..87986518b 100644
--- a/webapp/src/components/properties/dateRange/dateRange.test.tsx
+++ b/webapp/src/components/properties/dateRange/dateRange.test.tsx
@@ -251,6 +251,7 @@ describe('components/properties/dateRange', () => {
             <DateRange
                 className='octo-propertyvalue'
                 value={''}
+                showEmptyPlaceholder={true}
                 onChange={callback}
             />,
         )
@@ -263,7 +264,7 @@ describe('components/properties/dateRange', () => {
         const today = Date.UTC(date.getFullYear(), date.getMonth(), date.getDate())
 
         const {getByText, getByTitle} = render(component)
-        const dayDisplay = getByTitle('Empty')
+        const dayDisplay = getByText('Empty')
         userEvent.click(dayDisplay)
 
         const day = getByText('Today')
diff --git a/webapp/src/components/propertyValueElement.test.tsx b/webapp/src/components/propertyValueElement.test.tsx
index 7ed877c2a..0e71e69e4 100644
--- a/webapp/src/components/propertyValueElement.test.tsx
+++ b/webapp/src/components/propertyValueElement.test.tsx
@@ -39,7 +39,7 @@ describe('components/propertyValueElement', () => {
                 contents={[]}
                 comments={[comments]}
                 propertyTemplate={propertyTemplate || board.fields.cardProperties[0]}
-                emptyDisplayValue={'empty'}
+                showEmptyPlaceholder={true}
             />,
         )
 
@@ -57,7 +57,7 @@ describe('components/propertyValueElement', () => {
                 contents={[]}
                 comments={[comments]}
                 propertyTemplate={propertyTemplate || board.fields.cardProperties[0]}
-                emptyDisplayValue={'empty'}
+                showEmptyPlaceholder={true}
             />,
         )
 
@@ -91,7 +91,7 @@ describe('components/propertyValueElement', () => {
                 contents={[]}
                 comments={[comments]}
                 propertyTemplate={propertyTemplate}
-                emptyDisplayValue={'empty'}
+                showEmptyPlaceholder={true}
             />,
         )
 
@@ -116,7 +116,7 @@ describe('components/propertyValueElement', () => {
                 contents={[]}
                 comments={[comments]}
                 propertyTemplate={propertyTemplate}
-                emptyDisplayValue={'empty'}
+                showEmptyPlaceholder={true}
             />,
         )
 
@@ -141,7 +141,7 @@ describe('components/propertyValueElement', () => {
                 contents={[]}
                 comments={[comments]}
                 propertyTemplate={propertyTemplate}
-                emptyDisplayValue={'empty'}
+                showEmptyPlaceholder={true}
             />,
         )
 
@@ -166,7 +166,7 @@ describe('components/propertyValueElement', () => {
                 contents={[]}
                 comments={[comments]}
                 propertyTemplate={propertyTemplate}
-                emptyDisplayValue={'empty'}
+                showEmptyPlaceholder={true}
             />,
         )
 
@@ -191,7 +191,7 @@ describe('components/propertyValueElement', () => {
                 contents={[]}
                 comments={[comments]}
                 propertyTemplate={propertyTemplate}
-                emptyDisplayValue={'empty'}
+                showEmptyPlaceholder={true}
             />,
         )
         const {container} = render(component)