Merge branch 'main' of github.com:mattermost/mattermost-octo-tasks into main

webapp/src/components/cardDetail.tsx

@@ -155,19 +155,8 @@ class CardDetail extends React.Component<Props, State> {
                         value={this.state.title}
                         placeholderText='Untitled'
                         onChange={(title: string) => this.setState({title})}
-                        onBlur={() => mutator.changeTitle(card, this.state.title)}
+                        onSave={() => mutator.changeTitle(card, this.state.title)}
-                        onFocus={() => this.titleRef.current.focus()}
+                        onCancel={() => this.setState({title: this.state.cardTree.card.title})}
-                        onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>): void => {
-                            if (e.keyCode === 27 && !(e.metaKey || e.ctrlKey) && !e.shiftKey && !e.altKey) { // ESC
-                                e.stopPropagation()
-                                this.setState({title: this.state.cardTree.card.title})
-                                setTimeout(() => this.titleRef.current.blur(), 0)
-                            } else if (e.keyCode === 13 && !(e.metaKey || e.ctrlKey) && !e.shiftKey && !e.altKey) { // Return
-                                e.stopPropagation()
-                                mutator.changeTitle(card, this.state.title)
-                                this.titleRef.current.blur()
-                            }
-                        }}
                     />
 
                     {/* Property list */}

webapp/src/components/commentsList.scss

@@ -20,6 +20,14 @@
         color: rgba(55, 53, 47, 0.8);
         flex-grow: 1;
         margin-left: 5px;
+        .octo-button {
+            display: none;
+        }
+        &:focus {
+            .octo-button {
+                display: block;
+            }
+        }
     }
 }
 

webapp/src/components/commentsList.tsx

@@ -78,16 +78,12 @@ class CommentsList extends React.Component<Props, State> {
                         placeholderText={intl.formatMessage({id: 'CardDetail.new-comment-placeholder', defaultMessage: 'Add a comment...'})}
                         onChange={(value: string) => this.setState({newComment: value})}
                         value={this.state.newComment}
-                        onFocus={() => this.setState({inputFocused: true})}
+                        onSave={() => {
-                        onBlur={() => this.setState({inputFocused: false})}
+                            this.sendComment()
-                        onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) => {
-                            if (e.keyCode === 13 && !(e.metaKey || e.ctrlKey) && !e.shiftKey && !e.altKey) {
-                                this.sendComment()
-                            }
                         }}
                     />
 
-                    {this.state.newComment && this.state.inputFocused &&
+                    {this.state.newComment &&
                         <div
                             className='octo-button filled'
                             onClick={() => {

webapp/src/components/propertyValueElement.tsx

@@ -24,7 +24,6 @@ type State = {
 }
 
 export default class PropertyValueElement extends React.Component<Props, State> {
-    private valueEditor = React.createRef<Editable>()
 
     constructor(props: Props) {
         super(props)
@@ -89,24 +88,12 @@ export default class PropertyValueElement extends React.Component<Props, State>
             if (!readOnly) {
                 return (
                     <Editable
-                        ref={this.valueEditor}
                         className='octo-propertyvalue'
                         placeholderText='Empty'
                         value={this.state.value}
                         onChange={(value) => this.setState({value})}
-                        onBlur={() => mutator.changePropertyValue(card, propertyTemplate.id, this.state.value)}
+                        onSave={() => mutator.changePropertyValue(card, propertyTemplate.id, this.state.value)}
-                        onFocus={() => this.valueEditor.current.focus()}
+                        onCancel={() => this.setState({value: propertyValue})}
-                        onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>): void => {
-                            if (e.keyCode === 27 && !(e.metaKey || e.ctrlKey) && !e.shiftKey && !e.altKey) { // ESC
-                                e.stopPropagation()
-                                this.setState({value: propertyValue})
-                                setTimeout(() => this.valueEditor.current.blur(), 0)
-                            } else if (e.keyCode === 13 && !(e.metaKey || e.ctrlKey) && !e.shiftKey && !e.altKey) { // Return
-                                e.stopPropagation()
-                                mutator.changePropertyValue(card, propertyTemplate.id, this.state.value)
-                                this.valueEditor.current.blur()
-                            }
-                        }}
                     />
                 )
             }

webapp/src/components/tableComponent.tsx

@@ -174,13 +174,12 @@ class TableComponent extends React.Component<Props, State> {
                                     boardTree={boardTree}
                                     card={card}
                                     focusOnMount={focusOnMount}
-                                    onKeyDown={(e) => {
+                                    onSaveWithEnter={() => {
-                                        if (e.keyCode === 13) {
+                                        console.log("WORKING")
-                                            // Enter: Insert new card if on last row
+                                        if (cards.length > 0 && cards[cards.length - 1] === card) {
-                                            if (cards.length > 0 && cards[cards.length - 1] === card) {
+                                            this.addCard(false)
-                                                this.addCard(false)
-                                            }
                                         }
+                                        console.log("STILL WORKING")
                                     }}
                                 />)
 

webapp/src/components/tableRow.tsx

@@ -16,12 +16,12 @@ type Props = {
     boardTree: BoardTree
     card: Card
     focusOnMount: boolean
-    onKeyDown: (e: React.KeyboardEvent) => void
+    onSaveWithEnter: () => void
 }
 
 type State = {
     showCard: boolean
-    title: string 
+    title: string
 }
 
 class TableRow extends React.Component<Props, State> {
@@ -40,12 +40,12 @@ class TableRow extends React.Component<Props, State> {
 
     componentDidMount(): void {
         if (this.props.focusOnMount) {
-            this.titleRef.current.focus()
+            setTimeout(() => this.titleRef.current.focus(), 10)
         }
     }
 
     render(): JSX.Element {
-        const {boardTree, card, onKeyDown} = this.props
+        const {boardTree, card, onSaveWithEnter} = this.props
         const {board, activeView} = boardTree
 
         const openButonRef = React.createRef<HTMLDivElement>()
@@ -75,20 +75,13 @@ class TableRow extends React.Component<Props, State> {
                             value={this.state.title}
                             placeholderText='Untitled'
                             onChange={(title: string) => this.setState({title})}
-                            onBlur={() => mutator.changeTitle(card, this.state.title)}
+                            onSave={(saveType) => {
-                            onFocus={() => this.titleRef.current.focus()}
+                                mutator.changeTitle(card, this.state.title)
-                            onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>): void => {
+                                if (saveType === 'onEnter') {
-                                if (e.keyCode === 27 && !(e.metaKey || e.ctrlKey) && !e.shiftKey && !e.altKey) { // ESC
+                                    onSaveWithEnter()
-                                    e.stopPropagation()
-                                    this.setState({title: card.title})
-                                    setTimeout(() => this.titleRef.current.blur(), 0)
-                                } else if (e.keyCode === 13 && !(e.metaKey || e.ctrlKey) && !e.shiftKey && !e.altKey) { // Return
-                                    e.stopPropagation()
-                                    mutator.changeTitle(card, this.state.title)
-                                    this.titleRef.current.blur()
                                 }
-                                onKeyDown(e)
                             }}
+                            onCancel={() => this.setState({title: card.title})}
                         />
                     </div>
 

webapp/src/components/viewHeader.tsx

@@ -65,7 +65,7 @@ class ViewHeader extends React.Component<Props, State> {
     private onSearchKeyDown = (e: React.KeyboardEvent) => {
         if (e.keyCode === 27) { // ESC: Clear search
             this.searchFieldRef.current.text = ''
-            this.setState({...this.state, isSearching: false})
+            this.setState({isSearching: false})
             this.props.setSearchText(undefined)
             e.preventDefault()
         }
@@ -280,7 +280,7 @@ class ViewHeader extends React.Component<Props, State> {
                     <div
                         className='octo-button'
                         onClick={() => {
-                            this.setState({...this.state, isSearching: true})
+                            this.setState({isSearching: true})
                         }}
                     >
                         <FormattedMessage

webapp/src/components/viewTitle.tsx

@@ -84,19 +84,8 @@ class ViewTitle extends React.Component<Props, State> {
                         value={this.state.title}
                         placeholderText={intl.formatMessage({id: 'ViewTitle.untitled-board', defaultMessage: 'Untitled Board'})}
                         onChange={(title) => this.setState({title})}
-                        onBlur={() => mutator.changeTitle(board, this.state.title)}
+                        onSave={() => mutator.changeTitle(board, this.state.title)}
-                        onFocus={() => this.titleEditor.current.focus()}
+                        onCancel={() => this.setState({title: this.props.board.title})}
-                        onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>): void => {
-                            if (e.keyCode === 27 && !(e.metaKey || e.ctrlKey) && !e.shiftKey && !e.altKey) { // ESC
-                                e.stopPropagation()
-                                this.setState({title: this.props.board.title})
-                                setTimeout(() => this.titleEditor.current.blur(), 0)
-                            } else if (e.keyCode === 13 && !(e.metaKey || e.ctrlKey) && !e.shiftKey && !e.altKey) { // Return
-                                e.stopPropagation()
-                                mutator.changeTitle(board, this.state.title)
-                                this.titleEditor.current.blur()
-                            }
-                        }}
                     />
                 </div>
             </>

webapp/src/pages/boardPage.tsx

@@ -168,7 +168,6 @@ export default class BoardPage extends React.Component<Props, State> {
 
             // TODO: Handle error (viewId not found)
             this.setState({
-                ...this.state,
                 boardTree,
                 boardId,
                 viewId: boardTree.activeView.id,

webapp/src/widgets/editable.tsx

@@ -10,13 +10,13 @@ type Props = {
     placeholderText?: string
     className?: string
 
-    onFocus?: () => void
+    onCancel?: () => void
-    onBlur?: () => void
+    onSave?: (saveType: 'onEnter'|'onBlur') => void
-    onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void
 }
 
 export default class Editable extends React.Component<Props> {
     private elementRef = React.createRef<HTMLInputElement>()
+    private saveOnBlur = true
 
     shouldComponentUpdate(): boolean {
         return true
@@ -26,16 +26,18 @@ export default class Editable extends React.Component<Props> {
         this.elementRef.current.focus()
 
         // Put cursor at end
-        // document.execCommand('selectAll', false, null)
+        document.execCommand('selectAll', false, null)
-        // document.getSelection().collapseToEnd()
+        document.getSelection().collapseToEnd()
     }
 
-    public blur(): void {
+    public blur = (): void => {
+        this.saveOnBlur = false
         this.elementRef.current.blur()
+        this.saveOnBlur = true
     }
 
     public render(): JSX.Element {
-        const {value, onChange, className, placeholderText, onFocus, onBlur, onKeyDown} = this.props
+        const {value, onChange, className, placeholderText} = this.props
 
         return (
             <input
@@ -46,9 +48,22 @@ export default class Editable extends React.Component<Props> {
                     onChange(e.target.value)
                 }}
                 value={value}
-                onFocus={onFocus}
+                onBlur={() => this.saveOnBlur && this.props.onSave && this.props.onSave('onBlur')}
-                onBlur={onBlur}
+                onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>): void => {
-                onKeyDown={onKeyDown}
+                    if (e.keyCode === 27 && !(e.metaKey || e.ctrlKey) && !e.shiftKey && !e.altKey) { // ESC
+                        e.stopPropagation()
+                        if (this.props.onCancel) {
+                            this.props.onCancel()
+                        }
+                        this.blur()
+                    } else if (e.keyCode === 13 && !(e.metaKey || e.ctrlKey) && !e.shiftKey && !e.altKey) { // Return
+                        e.stopPropagation()
+                        if (this.props.onSave) {
+                            this.props.onSave('onEnter')
+                        }
+                        this.blur()
+                    }
+                }}
             />
         )
     }