Extracting filterValue from filterComponent in the viewHeader

webapp/src/components/viewHeader/filterComponent.tsx

@@ -3,7 +3,6 @@
 import React from 'react'
 import {FormattedMessage, injectIntl, IntlShape} from 'react-intl'
 
-import {IPropertyTemplate} from '../../blocks/board'
 import {FilterClause, FilterCondition} from '../../blocks/filterClause'
 import {FilterGroup} from '../../blocks/filterGroup'
 import mutator from '../../mutator'
@@ -16,6 +15,8 @@ import MenuWrapper from '../../widgets/menuWrapper'
 
 import Modal from '../modal'
 
+import FilterValue from './filterValue'
+
 import './filterComponent.scss'
 
 type Props = {
@@ -117,9 +118,12 @@ class FilterComponent extends React.Component<Props> {
                                         />
                                     </Menu>
                                 </MenuWrapper>
-                                {
+                                {template &&
-                                    template && this.filterValue(filter, template)
+                                    <FilterValue
-                                }
+                                        filter={filter}
+                                        template={template}
+                                        view={activeView}
+                                    />}
                                 <div className='octo-spacer'/>
                                 <Button onClick={() => this.deleteClicked(filter)}>
                                     <FormattedMessage
@@ -143,56 +147,6 @@ class FilterComponent extends React.Component<Props> {
         )
     }
 
-    private filterValue(filter: FilterClause, template: IPropertyTemplate): JSX.Element | undefined {
-        const {boardTree} = this.props
-        const {activeView: view} = boardTree
-
-        if (filter.condition === 'includes' || filter.condition === 'notIncludes') {
-            let displayValue: string
-            if (filter.values.length > 0) {
-                displayValue = filter.values.map((id) => {
-                    const option = template.options.find((o) => o.id === id)
-                    return option?.value || '(Unknown)'
-                }).join(', ')
-            } else {
-                displayValue = '(empty)'
-            }
-
-            return (
-                <MenuWrapper>
-                    <Button>{displayValue}</Button>
-                    <Menu>
-                        {template.options.map((o) => (
-                            <Menu.Switch
-                                key={o.id}
-                                id={o.id}
-                                name={o.value}
-                                isOn={filter.values.includes(o.id)}
-                                onClick={(optionId) => {
-                                    const filterIndex = view.filter.filters.indexOf(filter)
-                                    Utils.assert(filterIndex >= 0, "Can't find filter")
-
-                                    const filterGroup = new FilterGroup(view.filter)
-                                    const newFilter = filterGroup.filters[filterIndex] as FilterClause
-                                    Utils.assert(newFilter, `No filter at index ${filterIndex}`)
-                                    if (filter.values.includes(o.id)) {
-                                        newFilter.values = newFilter.values.filter((id) => id !== optionId)
-                                        mutator.changeViewFilter(view, filterGroup)
-                                    } else {
-                                        newFilter.values.push(optionId)
-                                        mutator.changeViewFilter(view, filterGroup)
-                                    }
-                                }}
-                            />
-                        ))}
-                    </Menu>
-                </MenuWrapper>
-            )
-        }
-
-        return undefined
-    }
-
     private deleteClicked(filter: FilterClause) {
         const {boardTree} = this.props
         const {activeView: view} = boardTree

webapp/src/components/viewHeader/filterValue.scss

@@ -0,0 +1,2 @@
+.FilterValue {
+}

webapp/src/components/viewHeader/filterValue.tsx

@@ -0,0 +1,71 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+import React from 'react'
+
+import {IPropertyTemplate} from '../../blocks/board'
+import {FilterClause} from '../../blocks/filterClause'
+import {FilterGroup} from '../../blocks/filterGroup'
+import {BoardView} from '../../blocks/boardView'
+import mutator from '../../mutator'
+import {Utils} from '../../utils'
+import Button from '../../widgets/buttons/button'
+import Menu from '../../widgets/menu'
+import MenuWrapper from '../../widgets/menuWrapper'
+
+import './filterValue.scss'
+
+type Props = {
+    view: BoardView
+    filter: FilterClause
+    template: IPropertyTemplate
+}
+
+const filterValue = (props: Props): JSX.Element|null => {
+    const {filter, template, view} = props
+    if (filter.condition !== 'includes' && filter.condition !== 'notIncludes') {
+        return null
+    }
+
+    let displayValue: string
+    if (filter.values.length > 0) {
+        displayValue = filter.values.map((id) => {
+            const option = template.options.find((o) => o.id === id)
+            return option?.value || '(Unknown)'
+        }).join(', ')
+    } else {
+        displayValue = '(empty)'
+    }
+
+    return (
+        <MenuWrapper>
+            <Button>{displayValue}</Button>
+            <Menu>
+                {template.options.map((o) => (
+                    <Menu.Switch
+                        key={o.id}
+                        id={o.id}
+                        name={o.value}
+                        isOn={filter.values.includes(o.id)}
+                        onClick={(optionId) => {
+                            const filterIndex = view.filter.filters.indexOf(filter)
+                            Utils.assert(filterIndex >= 0, "Can't find filter")
+
+                            const filterGroup = new FilterGroup(view.filter)
+                            const newFilter = filterGroup.filters[filterIndex] as FilterClause
+                            Utils.assert(newFilter, `No filter at index ${filterIndex}`)
+                            if (filter.values.includes(o.id)) {
+                                newFilter.values = newFilter.values.filter((id) => id !== optionId)
+                                mutator.changeViewFilter(view, filterGroup)
+                            } else {
+                                newFilter.values.push(optionId)
+                                mutator.changeViewFilter(view, filterGroup)
+                            }
+                        }}
+                    />
+                ))}
+            </Menu>
+        </MenuWrapper>
+    )
+}
+
+export default filterValue