in-=progress add new option

webapp/src/components/shareBoard/shareBoardButton.tsx

@@ -127,6 +127,7 @@ const ShareBoardButton = (props: Props) => {
                     <EditStatusPropertyDialog
                         valueCategories={valueCategories}
                         onClose={() => setShowShareDialog(false)}
+                        onUpdate={(updatedValue) => console.log(updatedValue)}
                     />
             }
         </div>

webapp/src/components/standardProperties/statusProperty/editStatusDialog.scss

@@ -41,9 +41,17 @@
                 text-transform: uppercase;
             }
 
-            .PlusIcon {
+            .addBtnWrapper {
                 margin-left: auto;
                 cursor: pointer;
+                border-radius: 4px;
+                width: 24px;
+                height: 24px;
+                text-align: center;
+                
+                &:hover {
+                    background: rgba(var(--center-channel-color-rgb), 0.1);
+                }
             }
         }
 
@@ -65,8 +73,8 @@
             .Label {
                 width: max-content;
                 margin-top: 0;
-                margin-right: auto;
                 max-width: 150px;
+                margin-right: auto;
 
                 span {
                     overflow: hidden;

webapp/src/components/standardProperties/statusProperty/editStatusDialog.tsx

@@ -1,7 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import React from 'react'
+import React, {useEffect, useState} from 'react'
 import {FormattedMessage} from 'react-intl'
 
 import {useCallback} from 'preact/hooks'
@@ -19,25 +19,39 @@ import {IPropertyOption} from '../../../blocks/board'
 import DragHandle from '../../../widgets/icons/dragHandle'
 import EditIcon from '../../../widgets/icons/edit'
 
+import EditableLabel from './editableLabel/editableLabel'
+
 export type StatusCategoryEmptyState = {
     icon: JSX.Element
     color: string
     text: JSX.Element
 }
 
+export type EditablePropertyOption = IPropertyOption & {
+    editing?: boolean
+}
+
 export type StatusCategory = {
     id: string
     title: string
-    options: IPropertyOption[]
+    options: EditablePropertyOption[]
     emptyState: StatusCategoryEmptyState
 }
 
 type Props = {
     valueCategories: StatusCategory[]
     onClose: () => void
+    onUpdate: (updatedValueCategories: StatusCategory[]) => void
 }
 
 const EditStatusPropertyDialog = (props: Props): JSX.Element => {
+    const [valueCategories, setValueCategories] = useState<StatusCategory[]>([])
+
+    useEffect(() => {
+        console.log('setting: ' + props.valueCategories.length)
+        setValueCategories(props.valueCategories)
+    }, [props.valueCategories])
+
     const title = (
         <FormattedMessage
             id='statusProperty.configDialog.title'
@@ -45,7 +59,7 @@ const EditStatusPropertyDialog = (props: Props): JSX.Element => {
         />
     )
 
-    const generateValueRow = (option: IPropertyOption, index: number): JSX.Element => {
+    const generateValueRow = (option: EditablePropertyOption, index: number): JSX.Element => {
         return (
             <Draggable
                 draggableId={option.id}
@@ -64,13 +78,10 @@ const EditStatusPropertyDialog = (props: Props): JSX.Element => {
                         >
                             <DragHandle/>
                         </div>
-                        <Label
+                        <EditableLabel
-                            key={option.id}
+                            option={option}
-                            color={option.color}
+                            editing={option.editing}
-                            title={option.value}
+                        />
-                        >
-                            <span>{option.value}</span>
-                        </Label>
                         <div className={`colorEditor ${option.color} withBorder`}/>
                         <EditIcon/>
                     </div>
@@ -98,8 +109,29 @@ const EditStatusPropertyDialog = (props: Props): JSX.Element => {
         )
     }
 
+    const handleAddCategoryValue = (categoryID: string) => {
+        console.log('asdasd')
+        const categoryIndex = valueCategories.findIndex((valueCategory) => valueCategory.id === categoryID)
+        if (categoryIndex < 0) {
+            return
+        }
+
+        const newOption: EditablePropertyOption = {
+            id: '',
+            value: '',
+            color: 'propColorOrange',
+            editing: true,
+        }
+
+        const updatedValueCategories = [...valueCategories]
+        updatedValueCategories[categoryIndex].options.unshift(newOption)
+        setValueCategories(updatedValueCategories)
+    }
+
     const onDragEndHandler = () => {}
 
+    console.log(valueCategories)
+
     return (
         <ActionDialog
             onClose={props.onClose}
@@ -115,7 +147,7 @@ const EditStatusPropertyDialog = (props: Props): JSX.Element => {
             </div>
             <div className='categorySwimlanes'>
                 <DragDropContext onDragEnd={onDragEndHandler}>
-                    {props.valueCategories.map((valueCategory) => {
+                    {valueCategories.map((valueCategory) => {
                         return (
                             <div
                                 key={valueCategory.id}
@@ -126,7 +158,12 @@ const EditStatusPropertyDialog = (props: Props): JSX.Element => {
                                         {valueCategory.title}
                                     </div>
                                     <InfoIcon/>
-                                    <PlusIcon/>
+                                    <div
+                                        className='addBtnWrapper'
+                                        onClick={() => handleAddCategoryValue(valueCategory.id)}
+                                    >
+                                        <PlusIcon/>
+                                    </div>
                                 </div>
                                 <Droppable droppableId={`categorySwimlane_${valueCategory.id}`}>
                                     {(provided) => (

webapp/src/widgets/label.tsx

@@ -11,6 +11,7 @@ type Props = {
     title?: string
     children: React.ReactNode
     className?: string
+    editing?: boolean
 }
 
 function Label(props: Props): JSX.Element {
@@ -18,6 +19,7 @@ function Label(props: Props): JSX.Element {
     if (props.color && props.color in Constants.menuColors) {
         color = props.color
     }
+
     return (
         <span
             className={`Label ${color} ${props.className ? props.className : ''}`}