From bbf9c13952e95312bce3b660fd80da85b76b5a84 Mon Sep 17 00:00:00 2001 From: John Mitchell Date: Mon, 13 Jan 2020 12:10:36 -0500 Subject: [PATCH 1/5] update select-based items to utilize labels --- awx/ui_next/src/components/Search/Search.jsx | 20 ++++++++++++------- .../InventoryGroups/InventoryGroupsList.jsx | 6 +++++- awx/ui_next/src/types.js | 4 ++++ 3 files changed, 22 insertions(+), 8 deletions(-) diff --git a/awx/ui_next/src/components/Search/Search.jsx b/awx/ui_next/src/components/Search/Search.jsx index 094ee52e78..94fae17e35 100644 --- a/awx/ui_next/src/components/Search/Search.jsx +++ b/awx/ui_next/src/components/Search/Search.jsx @@ -210,7 +210,7 @@ class Search extends React.Component { {searchColumnName} )} - {columns.map(({ key, name, options, isBoolean }) => ( + {columns.map(({ key, name, options, isBoolean, booleanLabels = {} }) => ( { @@ -235,10 +235,12 @@ class Search extends React.Component { } selections={chipsByKey[key].chips} isExpanded={isFilterDropdownOpen} - placeholderText={`Filter by ${name.toLowerCase()}`} + placeholderText={`Filter By ${name}`} > - {options.map(([optionKey]) => ( - + {options.map(([optionKey, optionLabel]) => ( + + {optionLabel} + ))} @@ -252,14 +254,18 @@ class Search extends React.Component { } selections={chipsByKey[key].chips[0]} isExpanded={isFilterDropdownOpen} - placeholderText={`Filter by ${name.toLowerCase()}`} + placeholderText={`Filter By ${name}`} > {/* TODO: update value to being object { actualValue: optionKey, toString: () => label } currently a pf bug that makes the checked logic not work with object-based values */} - - + + {booleanLabels.true || i18n._(t`Yes`)} + + + {booleanLabels.false || i18n._(t`No`)} + )) || ( diff --git a/awx/ui_next/src/screens/Inventory/InventoryGroups/InventoryGroupsList.jsx b/awx/ui_next/src/screens/Inventory/InventoryGroups/InventoryGroupsList.jsx index 307138de01..cd0139ff04 100644 --- a/awx/ui_next/src/screens/Inventory/InventoryGroups/InventoryGroupsList.jsx +++ b/awx/ui_next/src/screens/Inventory/InventoryGroups/InventoryGroupsList.jsx @@ -184,9 +184,13 @@ function InventoryGroupsList({ i18n, location, match }) { isDefault: true, }, { - name: i18n._(t`Is Root Group`), + name: i18n._(t`Group Type`), key: 'parents__isnull', isBoolean: true, + booleanLabels: { + "true": i18n._(t`Show Only Root Groups`), + "false": i18n._(t`Show All Groups`) + } }, { name: i18n._(t`Created By (Username)`), diff --git a/awx/ui_next/src/types.js b/awx/ui_next/src/types.js index 0f263524cf..586ca80ca4 100644 --- a/awx/ui_next/src/types.js +++ b/awx/ui_next/src/types.js @@ -257,6 +257,10 @@ export const SearchColumns = arrayOf( key: string.isRequired, isDefault: bool, isBoolean: bool, + booleanLabels: shape({ + "true": string.isRequired, + "false": string.isRequired + }), options: arrayOf(arrayOf(string, string)), }) ); From 3684975ef924554b3e88b25678c43df97891653d Mon Sep 17 00:00:00 2001 From: John Mitchell Date: Mon, 13 Jan 2020 16:04:15 -0500 Subject: [PATCH 2/5] remove todo label-ify search dropdown note --- awx/ui_next/src/components/Search/Search.jsx | 8 -------- 1 file changed, 8 deletions(-) diff --git a/awx/ui_next/src/components/Search/Search.jsx b/awx/ui_next/src/components/Search/Search.jsx index 94fae17e35..a50a0ea083 100644 --- a/awx/ui_next/src/components/Search/Search.jsx +++ b/awx/ui_next/src/components/Search/Search.jsx @@ -222,10 +222,6 @@ class Search extends React.Component { > {(options && ( - {/* TODO: update value to being object - { actualValue: optionKey, toString: () => label } - currently a pf bug that makes the checked logic - not work with object-based values */} - this.handleFilterDropdownSelect(key, event, selection) - } - selections={chipsByKey[key].chips} - isExpanded={isFilterDropdownOpen} - placeholderText={`Filter By ${name}`} - > - {options.map(([optionKey, optionLabel]) => ( - - {optionLabel} - - ))} - - - )) || - (isBoolean && ( - - )) || ( - - {/* TODO: add support for dates: - qsConfig.dateFields.filter(field => field === key).length && "date" */} - field === searchKey - ) && - 'number') || - 'search' + {columns.map( + ({ key, name, options, isBoolean, booleanLabels = {} }) => ( + { + onRemove(chipsByKey[key].key, val); + }} + categoryName={chipsByKey[key] ? chipsByKey[key].label : key} + key={key} + showToolbarItem={searchKey === key} + > + {(options && ( + + + + )) || + (isBoolean && ( + + )) || ( + + {/* TODO: add support for dates: + qsConfig.dateFields.filter(field => field === key).length && "date" */} + field === searchKey + ) && + 'number') || + 'search' + } + aria-label={i18n._(t`Search text input`)} + value={searchValue} + onChange={this.handleSearchInputChange} + onKeyDown={this.handleTextKeyDown} + /> + + + )} + + ) + )} ); } diff --git a/awx/ui_next/src/screens/Inventory/InventoryGroups/InventoryGroupsList.jsx b/awx/ui_next/src/screens/Inventory/InventoryGroups/InventoryGroupsList.jsx index cd0139ff04..a60c16c973 100644 --- a/awx/ui_next/src/screens/Inventory/InventoryGroups/InventoryGroupsList.jsx +++ b/awx/ui_next/src/screens/Inventory/InventoryGroups/InventoryGroupsList.jsx @@ -188,9 +188,9 @@ function InventoryGroupsList({ i18n, location, match }) { key: 'parents__isnull', isBoolean: true, booleanLabels: { - "true": i18n._(t`Show Only Root Groups`), - "false": i18n._(t`Show All Groups`) - } + true: i18n._(t`Show Only Root Groups`), + false: i18n._(t`Show All Groups`), + }, }, { name: i18n._(t`Created By (Username)`), diff --git a/awx/ui_next/src/types.js b/awx/ui_next/src/types.js index 586ca80ca4..1c072c8383 100644 --- a/awx/ui_next/src/types.js +++ b/awx/ui_next/src/types.js @@ -258,8 +258,8 @@ export const SearchColumns = arrayOf( isDefault: bool, isBoolean: bool, booleanLabels: shape({ - "true": string.isRequired, - "false": string.isRequired + true: string.isRequired, + false: string.isRequired, }), options: arrayOf(arrayOf(string, string)), })