From 977164b920be70316b73e6cf51b934f04a03229d Mon Sep 17 00:00:00 2001 From: "Keith J. Grant" Date: Fri, 30 Jul 2021 11:28:14 -0700 Subject: [PATCH] cleanup tests/advanced search changes --- .../DataListToolbar/DataListToolbar.js | 4 +- .../src/components/ListHeader/ListHeader.js | 4 +- .../PaginatedTable/PaginatedTable.js | 4 +- .../src/components/Search/AdvancedSearch.js | 24 +++++------ .../components/Search/AdvancedSearch.test.js | 40 ++++++++++--------- awx/ui/src/components/Search/Search.js | 4 +- awx/ui/src/types.js | 7 ++++ .../src/components/Search/LookupTypeInput.js | 12 ++++++ 8 files changed, 61 insertions(+), 38 deletions(-) diff --git a/awx/ui/src/components/DataListToolbar/DataListToolbar.js b/awx/ui/src/components/DataListToolbar/DataListToolbar.js index e412dddadc..bd3eca8b04 100644 --- a/awx/ui/src/components/DataListToolbar/DataListToolbar.js +++ b/awx/ui/src/components/DataListToolbar/DataListToolbar.js @@ -20,7 +20,7 @@ import { AngleRightIcon, SearchIcon, } from '@patternfly/react-icons'; -import { SearchColumns, SortColumns, QSConfig } from 'types'; +import { SearchColumns, SortColumns, QSConfig, SearchableKeys } from 'types'; import { KebabifiedProvider } from 'contexts/Kebabified'; import ExpandCollapse from '../ExpandCollapse'; import Search from '../Search'; @@ -200,7 +200,7 @@ DataListToolbar.propTypes = { clearAllFilters: PropTypes.func, qsConfig: QSConfig.isRequired, searchColumns: SearchColumns.isRequired, - searchableKeys: PropTypes.arrayOf(PropTypes.string), // TODO: Update + searchableKeys: SearchableKeys, relatedSearchableKeys: PropTypes.arrayOf(PropTypes.string), sortColumns: SortColumns, isAllSelected: PropTypes.bool, diff --git a/awx/ui/src/components/ListHeader/ListHeader.js b/awx/ui/src/components/ListHeader/ListHeader.js index 965a6551ff..27055f1c45 100644 --- a/awx/ui/src/components/ListHeader/ListHeader.js +++ b/awx/ui/src/components/ListHeader/ListHeader.js @@ -10,7 +10,7 @@ import { removeParams, updateQueryString, } from 'util/qs'; -import { QSConfig, SearchColumns, SortColumns } from 'types'; +import { QSConfig, SearchColumns, SortColumns, SearchableKeys } from 'types'; import DataListToolbar from '../DataListToolbar'; const EmptyStateControlsWrapper = styled.div` @@ -146,7 +146,7 @@ ListHeader.propTypes = { itemCount: PropTypes.number.isRequired, qsConfig: QSConfig.isRequired, searchColumns: SearchColumns.isRequired, - searchableKeys: PropTypes.arrayOf(PropTypes.string), + searchableKeys: SearchableKeys, relatedSearchableKeys: PropTypes.arrayOf(PropTypes.string), sortColumns: SortColumns, renderToolbar: PropTypes.func, diff --git a/awx/ui/src/components/PaginatedTable/PaginatedTable.js b/awx/ui/src/components/PaginatedTable/PaginatedTable.js index c80b9d7ef8..37ac22c4a9 100644 --- a/awx/ui/src/components/PaginatedTable/PaginatedTable.js +++ b/awx/ui/src/components/PaginatedTable/PaginatedTable.js @@ -7,7 +7,7 @@ import { t } from '@lingui/macro'; import { useLocation, useHistory } from 'react-router-dom'; import { parseQueryString, updateQueryString } from 'util/qs'; -import { QSConfig, SearchColumns } from 'types'; +import { QSConfig, SearchColumns, SearchableKeys } from 'types'; import ListHeader from '../ListHeader'; import ContentEmpty from '../ContentEmpty'; import ContentError from '../ContentError'; @@ -184,7 +184,7 @@ PaginatedTable.propTypes = { qsConfig: QSConfig.isRequired, renderRow: PropTypes.func.isRequired, toolbarSearchColumns: SearchColumns, - toolbarSearchableKeys: PropTypes.arrayOf(PropTypes.string), + toolbarSearchableKeys: SearchableKeys, toolbarRelatedSearchableKeys: PropTypes.arrayOf(PropTypes.string), showPageSizeOptions: PropTypes.bool, renderToolbar: PropTypes.func, diff --git a/awx/ui/src/components/Search/AdvancedSearch.js b/awx/ui/src/components/Search/AdvancedSearch.js index 6f7525b644..861c0cd33a 100644 --- a/awx/ui/src/components/Search/AdvancedSearch.js +++ b/awx/ui/src/components/Search/AdvancedSearch.js @@ -1,6 +1,6 @@ import 'styled-components/macro'; import React, { useEffect, useState } from 'react'; -import PropTypes from 'prop-types'; +import { string, func, bool, arrayOf } from 'prop-types'; import { t } from '@lingui/macro'; import { Button, @@ -16,6 +16,7 @@ import { SearchIcon, QuestionCircleIcon } from '@patternfly/react-icons'; import styled from 'styled-components'; import { useConfig } from 'contexts/Config'; import getDocsBaseUrl from 'util/getDocsBaseUrl'; +import { SearchableKeys } from 'types'; import RelatedLookupTypeInput from './RelatedLookupTypeInput'; import LookupTypeInput from './LookupTypeInput'; @@ -56,18 +57,15 @@ function AdvancedSearch({ const [lookupSelection, setLookupSelection] = useState(null); const [keySelection, setKeySelection] = useState(null); const [searchValue, setSearchValue] = useState(''); - // const [relatedSearchKeySelected, setRelatedSearchKeySelected] = - // useState(false); const config = useConfig(); + const selectedKey = searchableKeys.find((k) => k.key === keySelection); const relatedSearchKeySelected = keySelection && relatedSearchableKeys.indexOf(keySelection) > -1 && - !searchableKeys.find((k) => k.key === keySelection); + !selectedKey; const lookupKeyType = - keySelection && !relatedSearchKeySelected - ? searchableKeys.find((k) => k.key === keySelection).type - : null; + keySelection && !relatedSearchKeySelected ? selectedKey?.type : null; useEffect(() => { if (relatedSearchKeySelected) { @@ -234,12 +232,12 @@ function AdvancedSearch({ } AdvancedSearch.propTypes = { - onSearch: PropTypes.func.isRequired, - searchableKeys: PropTypes.arrayOf(PropTypes.string), - relatedSearchableKeys: PropTypes.arrayOf(PropTypes.string), - maxSelectHeight: PropTypes.string, - enableNegativeFiltering: PropTypes.bool, - enableRelatedFuzzyFiltering: PropTypes.bool, + onSearch: func.isRequired, + searchableKeys: SearchableKeys, + relatedSearchableKeys: arrayOf(string), + maxSelectHeight: string, + enableNegativeFiltering: bool, + enableRelatedFuzzyFiltering: bool, }; AdvancedSearch.defaultProps = { diff --git a/awx/ui/src/components/Search/AdvancedSearch.test.js b/awx/ui/src/components/Search/AdvancedSearch.test.js index 79b63fe462..5050ff63af 100644 --- a/awx/ui/src/components/Search/AdvancedSearch.test.js +++ b/awx/ui/src/components/Search/AdvancedSearch.test.js @@ -10,22 +10,14 @@ describe('', () => { jest.clearAllMocks(); }); - test('initially renders without crashing', () => { - wrapper = mountWithContexts( - - ); - expect(wrapper.length).toBe(1); - }); - test('Remove duplicates from searchableKeys/relatedSearchableKeys list', () => { wrapper = mountWithContexts( ); @@ -42,7 +34,10 @@ describe('', () => { wrapper = mountWithContexts( ); @@ -155,7 +150,10 @@ describe('', () => { wrapper = mountWithContexts( ); @@ -239,7 +237,7 @@ describe('', () => { wrapper = mountWithContexts( ); @@ -278,7 +276,7 @@ describe('', () => { wrapper = mountWithContexts( ); @@ -375,7 +373,10 @@ describe('', () => { wrapper = mountWithContexts( @@ -399,7 +400,10 @@ describe('', () => { wrapper = mountWithContexts( diff --git a/awx/ui/src/components/Search/Search.js b/awx/ui/src/components/Search/Search.js index 3cd1fac4a4..e614314305 100644 --- a/awx/ui/src/components/Search/Search.js +++ b/awx/ui/src/components/Search/Search.js @@ -19,7 +19,7 @@ import { import { SearchIcon } from '@patternfly/react-icons'; import styled from 'styled-components'; import { parseQueryString } from 'util/qs'; -import { QSConfig, SearchColumns } from 'types'; +import { QSConfig, SearchColumns, SearchableKeys } from 'types'; import AdvancedSearch from './AdvancedSearch'; import getChipsByKey from './getChipsByKey'; @@ -276,6 +276,7 @@ Search.propTypes = { maxSelectHeight: PropTypes.string, enableNegativeFiltering: PropTypes.bool, enableRelatedFuzzyFiltering: PropTypes.bool, + searchableKeys: SearchableKeys, }; Search.defaultProps = { @@ -285,6 +286,7 @@ Search.defaultProps = { maxSelectHeight: '300px', enableNegativeFiltering: true, enableRelatedFuzzyFiltering: true, + searchableKeys: [], }; export default Search; diff --git a/awx/ui/src/types.js b/awx/ui/src/types.js index 3be7f55bc5..f0f95b1aa6 100644 --- a/awx/ui/src/types.js +++ b/awx/ui/src/types.js @@ -421,3 +421,10 @@ export const ExecutionEnvironment = shape({ description: string, pull: string, }); + +export const SearchableKeys = arrayOf( + shape({ + key: string.isRequired, + type: string.isRequired, + }) +); diff --git a/awx/ui_next/src/components/Search/LookupTypeInput.js b/awx/ui_next/src/components/Search/LookupTypeInput.js index 4bf629f0b4..b14af41703 100644 --- a/awx/ui_next/src/components/Search/LookupTypeInput.js +++ b/awx/ui_next/src/components/Search/LookupTypeInput.js @@ -1,4 +1,5 @@ import React, { useState } from 'react'; +import { string, oneOfType, arrayOf, func } from 'prop-types'; import { t } from '@lingui/macro'; import { Select, SelectOption, SelectVariant } from '@patternfly/react-core'; @@ -137,5 +138,16 @@ function LookupTypeInput({ value, type, setValue, maxSelectHeight }) { ); } +LookupTypeInput.propTypes = { + type: string, + value: oneOfType([string, arrayOf(string)]), + setValue: func.isRequired, + maxSelectHeight: string, +}; +LookupTypeInput.defaultProps = { + type: 'string', + value: '', + maxSelectHeight: '300px', +}; export default LookupTypeInput;