From 0ad390f2292622a5a23641305a99b54734c803da Mon Sep 17 00:00:00 2001 From: ronronscelestes Date: Thu, 4 Nov 2021 11:30:32 +0100 Subject: [PATCH 01/11] init search url query component --- .../content-manager/pages/ListView/index.js | 12 +- .../src/components/Search/Search.stories.mdx | 2 +- .../SearchURLQuery/Search.stories.mdx | 54 ++++++++ .../src/components/SearchURLQuery/index.js | 115 ++++++++++++++++++ packages/core/helper-plugin/lib/src/index.js | 1 + 5 files changed, 181 insertions(+), 3 deletions(-) create mode 100644 packages/core/helper-plugin/lib/src/components/SearchURLQuery/Search.stories.mdx create mode 100644 packages/core/helper-plugin/lib/src/components/SearchURLQuery/index.js diff --git a/packages/core/admin/admin/src/content-manager/pages/ListView/index.js b/packages/core/admin/admin/src/content-manager/pages/ListView/index.js index c94da96f89..2a328dd2bb 100644 --- a/packages/core/admin/admin/src/content-manager/pages/ListView/index.js +++ b/packages/core/admin/admin/src/content-manager/pages/ListView/index.js @@ -12,7 +12,8 @@ import { stringify } from 'qs'; import { NoPermissions, CheckPermissions, - Search, + // Search, + SearchURLQuery, useFocusWhenNavigate, useQueryParams, useNotification, @@ -296,7 +297,14 @@ function ListView({ startActions={ <> {isSearchable && ( - + { const { formatMessage } = useIntl(); const _q = query?._q || '' const items = [{name: 'Paul', instrument: 'bass'}, {name: 'George', instrument: 'guitar'}] - + const sortedList = matchSorter(items, _q, {keys: ['name', 'instrument']}) const itemsList = sortedList?.length ? sortedList : items diff --git a/packages/core/helper-plugin/lib/src/components/SearchURLQuery/Search.stories.mdx b/packages/core/helper-plugin/lib/src/components/SearchURLQuery/Search.stories.mdx new file mode 100644 index 0000000000..ca83d748f0 --- /dev/null +++ b/packages/core/helper-plugin/lib/src/components/SearchURLQuery/Search.stories.mdx @@ -0,0 +1,54 @@ + + +import { ArgsTable, Meta } from '@storybook/addon-docs'; +import SearchURLQuery from './index'; + + + +# SearchURLQuery + +This component provides and input to search an array + +## Imports + +```js +import { SearchURLQuery } from '@strapi/helper-plugin'; +import { useIntl } from 'react-intl'; +``` + +## Usage + +```jsx +import { SearchURLQuery, useQueryParams } from '@strapi/helper-plugin'; +import matchSorter from 'match-sorter'; + +const HomePage = () => { + const [{ query }] = useQueryParams() + const { formatMessage } = useIntl(); + const _q = query?._q || '' + const items = [{name: 'Paul', instrument: 'bass'}, {name: 'George', instrument: 'guitar'}] + + const sortedList = matchSorter(items, _q, {keys: ['name', 'instrument']}) + const itemsList = sortedList?.length ? sortedList : items + + return ( + + {itemsList.map(item => ( +
+

{item.name}

+

{item.instrument}

+
+ ))} + ) +}; +``` + + diff --git a/packages/core/helper-plugin/lib/src/components/SearchURLQuery/index.js b/packages/core/helper-plugin/lib/src/components/SearchURLQuery/index.js new file mode 100644 index 0000000000..ecc4b31939 --- /dev/null +++ b/packages/core/helper-plugin/lib/src/components/SearchURLQuery/index.js @@ -0,0 +1,115 @@ +import React, { useEffect, useState, useRef } from 'react'; +import PropTypes from 'prop-types'; +import { useIntl } from 'react-intl'; +import SearchIcon from '@strapi/icons/Search'; +import { Searchbar, SearchForm } from '@strapi/design-system/Searchbar'; +import { IconButton } from '@strapi/design-system/IconButton'; +import useQueryParams from '../../hooks/useQueryParams'; +import useTracking from '../../hooks/useTracking'; + +const SearchURLQuery = ({ label, trackedEvent }) => { + const wrapperRef = useRef(null); + const iconButtonRef = useRef(null); + const isMountedRef = useRef(false); + const [didSearch, setDidSearch] = useState(false); + + const [isOpen, setIsOpen] = useState(false); + const [{ query }, setQuery] = useQueryParams(); + const [value, setValue] = useState(query?._q || ''); + const { formatMessage } = useIntl(); + const { trackUsage } = useTracking(); + + const handleToggle = () => setIsOpen(prev => !prev); + + // useEffect(() => { + // if (isMountedRef.current) { + // if (isOpen) { + // wrapperRef.current.querySelector('input').focus(); + // } else { + // iconButtonRef.current.focus(); + // } + // } + + // isMountedRef.current = true; + // }, [isOpen]); + + // useEffect(() => { + // if (didSearch && trackedEvent) { + // trackUsage(trackedEvent); + // } + // }, [didSearch, trackedEvent, trackUsage]); + + // useEffect(() => { + // const handler = setTimeout(() => { + // if (!didSearch) { + // return; + // } + + // if (value) { + // setQuery({ _q: value, page: 1 }); + // } else { + // setDidSearch(false); + // setQuery({ _q: '' }, 'remove'); + // } + // }, 300); + + // return () => clearTimeout(handler); + // }, [value]); + + const handleSubmit = (e) => { + e.preventDefault(); + console.log('submit'); + } + + if (isOpen) { + return ( + + { + setDidSearch(true); + setValue(value); + }} + value={value} + clearLabel={formatMessage({ id: 'clearLabel', defaultMessage: 'Clear' })} + onClear={() => {}} + > + {label} + + + //
+ // { + // setDidSearch(true); + // setValue(value); + // }} + // value={value} + // clearLabel={formatMessage({ id: 'clearLabel', defaultMessage: 'Clear' })} + // onClear={() => { + // setValue(''); + // setIsOpen(false); + // setDidSearch(false); + // }} + // > + // {label} + // + //
+ ); + } + + return ( + } label="Search" onClick={handleToggle} /> + ); +}; + +SearchURLQuery.defaultProps = { + trackedEvent: null, +}; + +SearchURLQuery.propTypes = { + label: PropTypes.string.isRequired, + trackedEvent: PropTypes.string, +}; + +export default SearchURLQuery; diff --git a/packages/core/helper-plugin/lib/src/index.js b/packages/core/helper-plugin/lib/src/index.js index 2d2b28ac98..50ce0c5cd4 100644 --- a/packages/core/helper-plugin/lib/src/index.js +++ b/packages/core/helper-plugin/lib/src/index.js @@ -182,6 +182,7 @@ export { default as LoadingIndicatorPage } from './components/LoadingIndicatorPa export { default as NotAllowedInput } from './components/NotAllowedInput'; export { default as SettingsPageTitle } from './components/SettingsPageTitle'; export { default as Search } from './components/Search'; +export { default as SearchURLQuery } from './components/SearchURLQuery'; export { default as Status } from './components/Status'; export { default as FilterListURLQuery } from './components/FilterListURLQuery'; export { default as FilterPopoverURLQuery } from './components/FilterPopoverURLQuery'; From d4d462eefcbc823bef85468fa4fd736cf6f031c1 Mon Sep 17 00:00:00 2001 From: ronronscelestes Date: Thu, 4 Nov 2021 11:50:50 +0100 Subject: [PATCH 02/11] search url query submit and clear --- .../src/components/SearchURLQuery/index.js | 92 +++++++++---------- 1 file changed, 44 insertions(+), 48 deletions(-) diff --git a/packages/core/helper-plugin/lib/src/components/SearchURLQuery/index.js b/packages/core/helper-plugin/lib/src/components/SearchURLQuery/index.js index ecc4b31939..de68271496 100644 --- a/packages/core/helper-plugin/lib/src/components/SearchURLQuery/index.js +++ b/packages/core/helper-plugin/lib/src/components/SearchURLQuery/index.js @@ -21,62 +21,58 @@ const SearchURLQuery = ({ label, trackedEvent }) => { const handleToggle = () => setIsOpen(prev => !prev); - // useEffect(() => { - // if (isMountedRef.current) { - // if (isOpen) { - // wrapperRef.current.querySelector('input').focus(); - // } else { - // iconButtonRef.current.focus(); - // } - // } + useEffect(() => { + if (isMountedRef.current) { + if (isOpen) { + wrapperRef.current.querySelector('input').focus(); + } + } - // isMountedRef.current = true; - // }, [isOpen]); + isMountedRef.current = true; + }, [isOpen]); - // useEffect(() => { - // if (didSearch && trackedEvent) { - // trackUsage(trackedEvent); - // } - // }, [didSearch, trackedEvent, trackUsage]); + useEffect(() => { + if (value && !isOpen) { + handleToggle(); + } + }, [value, isOpen]); - // useEffect(() => { - // const handler = setTimeout(() => { - // if (!didSearch) { - // return; - // } + const handleClear = () => { + setValue(''); + setQuery({ _q: '' }, 'remove'); + }; - // if (value) { - // setQuery({ _q: value, page: 1 }); - // } else { - // setDidSearch(false); - // setQuery({ _q: '' }, 'remove'); - // } - // }, 300); - - // return () => clearTimeout(handler); - // }, [value]); - - const handleSubmit = (e) => { + const handleSubmit = e => { e.preventDefault(); - console.log('submit'); - } + + setQuery({ _q: value, page: 1 }); + }; + + useEffect(() => { + if (didSearch && trackedEvent) { + trackUsage(trackedEvent); + } + }, [didSearch, trackedEvent, trackUsage]); if (isOpen) { return ( - - { - setDidSearch(true); - setValue(value); - }} - value={value} - clearLabel={formatMessage({ id: 'clearLabel', defaultMessage: 'Clear' })} - onClear={() => {}} - > - {label} - - +
+ + { + setDidSearch(true); + setValue(value); + }} + value={value} + clearLabel={formatMessage({ id: 'clearLabel', defaultMessage: 'Clear' })} + onClear={handleClear} + size="S" + > + {label} + + +
//
// Date: Thu, 4 Nov 2021 14:37:11 +0100 Subject: [PATCH 03/11] added tests --- .../SearchURLQuery/Search.stories.mdx | 30 +- .../src/components/SearchURLQuery/index.js | 19 +- .../SearchURLQuery/tests/index.test.js | 460 ++++++++++++++++++ 3 files changed, 490 insertions(+), 19 deletions(-) create mode 100644 packages/core/helper-plugin/lib/src/components/SearchURLQuery/tests/index.test.js diff --git a/packages/core/helper-plugin/lib/src/components/SearchURLQuery/Search.stories.mdx b/packages/core/helper-plugin/lib/src/components/SearchURLQuery/Search.stories.mdx index ca83d748f0..8c689995f6 100644 --- a/packages/core/helper-plugin/lib/src/components/SearchURLQuery/Search.stories.mdx +++ b/packages/core/helper-plugin/lib/src/components/SearchURLQuery/Search.stories.mdx @@ -1,6 +1,9 @@ -import { ArgsTable, Meta } from '@storybook/addon-docs'; +import { ArgsTable, Meta, Canvas, Story } from '@storybook/addon-docs'; +import { Stack } from '@strapi/design-system/Stack'; +import matchSorter from 'match-sorter'; +import useQueryParams from '../../hooks/useQueryParams'; import SearchURLQuery from './index'; @@ -51,4 +54,29 @@ const HomePage = () => { }; ``` +## Base + + + + {() => { + const [{ query }] = useQueryParams() + const _q = query?._q || '' + const items = [{name: 'Paul', instrument: 'bass'}, {name: 'George', instrument: 'guitar'}] + const sortedList = matchSorter(items, _q, {keys: ['name', 'instrument']}) + const itemsList = sortedList?.length ? sortedList : items; + return ( + + + {itemsList.map((item, i) => ( +
+

{item.name}

+

{item.instrument}

+
+ ))} + + ); + }} + + + diff --git a/packages/core/helper-plugin/lib/src/components/SearchURLQuery/index.js b/packages/core/helper-plugin/lib/src/components/SearchURLQuery/index.js index de68271496..5240938c99 100644 --- a/packages/core/helper-plugin/lib/src/components/SearchURLQuery/index.js +++ b/packages/core/helper-plugin/lib/src/components/SearchURLQuery/index.js @@ -38,6 +38,7 @@ const SearchURLQuery = ({ label, trackedEvent }) => { }, [value, isOpen]); const handleClear = () => { + setDidSearch(false); setValue(''); setQuery({ _q: '' }, 'remove'); }; @@ -73,24 +74,6 @@ const SearchURLQuery = ({ label, trackedEvent }) => {
- //
- // { - // setDidSearch(true); - // setValue(value); - // }} - // value={value} - // clearLabel={formatMessage({ id: 'clearLabel', defaultMessage: 'Clear' })} - // onClear={() => { - // setValue(''); - // setIsOpen(false); - // setDidSearch(false); - // }} - // > - // {label} - // - //
); } diff --git a/packages/core/helper-plugin/lib/src/components/SearchURLQuery/tests/index.test.js b/packages/core/helper-plugin/lib/src/components/SearchURLQuery/tests/index.test.js new file mode 100644 index 0000000000..e8b4309641 --- /dev/null +++ b/packages/core/helper-plugin/lib/src/components/SearchURLQuery/tests/index.test.js @@ -0,0 +1,460 @@ +/** + * + * Tests for SearchURLQuery + * + */ + +import React from 'react'; +import { render, fireEvent } from '@testing-library/react'; +import { IntlProvider } from 'react-intl'; +import { Router } from 'react-router-dom'; +import { createMemoryHistory } from 'history'; +import { ThemeProvider, lightTheme } from '@strapi/design-system'; +import SearchURLQuery from '../index'; + +jest.mock('../../../hooks/useTracking', () => () => ({ + trackUsage: jest.fn(), +})); + +const makeApp = history => ( + + + + + + + +); + +describe('', () => { + it('renders and matches the snapshot', () => { + const history = createMemoryHistory(); + const { container } = render(makeApp(history)); + + expect(container).toMatchInlineSnapshot(` + .c2 { + border: 0; + -webkit-clip: rect(0 0 0 0); + clip: rect(0 0 0 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; + } + + .c0 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + cursor: pointer; + padding: 8px; + border-radius: 4px; + background: #ffffff; + border: 1px solid #dcdce4; + position: relative; + outline: none; + } + + .c0 svg { + height: 12px; + width: 12px; + } + + .c0 svg > g, + .c0 svg path { + fill: #ffffff; + } + + .c0[aria-disabled='true'] { + pointer-events: none; + } + + .c0:after { + -webkit-transition-property: all; + transition-property: all; + -webkit-transition-duration: 0.2s; + transition-duration: 0.2s; + border-radius: 8px; + content: ''; + position: absolute; + top: -4px; + bottom: -4px; + left: -4px; + right: -4px; + border: 2px solid transparent; + } + + .c0:focus-visible { + outline: none; + } + + .c0:focus-visible:after { + border-radius: 8px; + content: ''; + position: absolute; + top: -5px; + bottom: -5px; + left: -5px; + right: -5px; + border: 2px solid #4945ff; + } + + .c1 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + height: 2rem; + width: 2rem; + } + + .c1 svg > g, + .c1 svg path { + fill: #8e8ea9; + } + + .c1:hover svg > g, + .c1:hover svg path { + fill: #666687; + } + + .c1:active svg > g, + .c1:active svg path { + fill: #a5a5ba; + } + + .c1[aria-disabled='true'] { + background-color: #eaeaef; + } + + .c1[aria-disabled='true'] svg path { + fill: #666687; + } + +
+ + + +
+

+

+

+
+ `); + }); + + it('should toggle searchbar form and searchbar', async () => { + const history = createMemoryHistory(); + const { container } = render(makeApp(history)); + + fireEvent.click(container.querySelector('button[type="button"]')); + + expect(container).toMatchInlineSnapshot(` + .c11 { + border: 0; + -webkit-clip: rect(0 0 0 0); + clip: rect(0 0 0 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; + } + + .c2 { + font-weight: 500; + font-size: 0.75rem; + line-height: 1.33; + color: #32324d; + } + + .c6 { + padding-right: 8px; + padding-left: 12px; + } + + .c4 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + } + + .c8 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + } + + .c10 { + border: none; + border-radius: 4px; + padding-left: 0; + padding-right: 16px; + color: #32324d; + font-weight: 400; + font-size: 0.875rem; + display: block; + width: 100%; + } + + .c10::-webkit-input-placeholder { + color: #8e8ea9; + opacity: 1; + } + + .c10::-moz-placeholder { + color: #8e8ea9; + opacity: 1; + } + + .c10:-ms-input-placeholder { + color: #8e8ea9; + opacity: 1; + } + + .c10::placeholder { + color: #8e8ea9; + opacity: 1; + } + + .c10[aria-disabled='true'] { + background: inherit; + color: inherit; + } + + .c10:focus { + outline: none; + box-shadow: none; + } + + .c5 { + border: 1px solid #dcdce4; + border-radius: 4px; + background: #ffffff; + height: 2rem; + outline: none; + box-shadow: 0; + -webkit-transition-property: border-color,box-shadow,fill; + transition-property: border-color,box-shadow,fill; + -webkit-transition-duration: 0.2s; + transition-duration: 0.2s; + } + + .c5:focus-within { + border: 1px solid #4945ff; + box-shadow: #4945ff 0px 0px 0px 2px; + } + + .c1 { + border: 0; + -webkit-clip: rect(0 0 0 0); + clip: rect(0 0 0 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; + } + + .c9 { + font-size: 0.8rem; + } + + .c9 svg path { + fill: #32324d; + } + + .c0 { + border-radius: 4px; + box-shadow: 0px 1px 4px rgba(33,33,52,0.1); + outline: none; + box-shadow: 0; + -webkit-transition-property: border-color,box-shadow,fill; + transition-property: border-color,box-shadow,fill; + -webkit-transition-duration: 0.2s; + transition-duration: 0.2s; + } + + .c0:focus-within .c7 svg path { + fill: #4945ff; + } + + .c0 .c3 { + border: 1px solid transparent; + } + + .c0 .c3:focus-within { + border: 1px solid #4945ff; + box-shadow: #4945ff 0px 0px 0px 2px; + } + +
+
+
+
+
+
+ +
+
+
+
+ +
+
+ +
+
+
+
+
+
+

+

+

+
+ `); + }); + + it('should push value to query params', async () => { + const history = createMemoryHistory(); + const { container } = render(makeApp(history)); + + fireEvent.click(container.querySelector('button[type="button"]')); + + const input = container.querySelector('input[name="search"]'); + fireEvent.change(input, { target: { value: 'michka' } }); + fireEvent.submit(input); + + const urlSearchQuery = history.location.search; + expect(urlSearchQuery).toEqual('?_q=michka&page=1'); + }); +}); From 345b8ac1589788b6eae837a719bc9abb2857701f Mon Sep 17 00:00:00 2001 From: ronronscelestes Date: Thu, 4 Nov 2021 14:54:56 +0100 Subject: [PATCH 04/11] fixed story name --- .../{Search.stories.mdx => SearchURLQuery.stories.mdx} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename packages/core/helper-plugin/lib/src/components/SearchURLQuery/{Search.stories.mdx => SearchURLQuery.stories.mdx} (100%) diff --git a/packages/core/helper-plugin/lib/src/components/SearchURLQuery/Search.stories.mdx b/packages/core/helper-plugin/lib/src/components/SearchURLQuery/SearchURLQuery.stories.mdx similarity index 100% rename from packages/core/helper-plugin/lib/src/components/SearchURLQuery/Search.stories.mdx rename to packages/core/helper-plugin/lib/src/components/SearchURLQuery/SearchURLQuery.stories.mdx From aebb87b5e55ab06c05a6b8aa71d3c75d61d74819 Mon Sep 17 00:00:00 2001 From: ronronscelestes Date: Thu, 4 Nov 2021 15:41:47 +0100 Subject: [PATCH 05/11] component feedback --- .../content-manager/pages/ListView/index.js | 7 --- .../src/components/SearchURLQuery/index.js | 44 +++++++------------ 2 files changed, 16 insertions(+), 35 deletions(-) diff --git a/packages/core/admin/admin/src/content-manager/pages/ListView/index.js b/packages/core/admin/admin/src/content-manager/pages/ListView/index.js index 2a328dd2bb..62c94e7932 100644 --- a/packages/core/admin/admin/src/content-manager/pages/ListView/index.js +++ b/packages/core/admin/admin/src/content-manager/pages/ListView/index.js @@ -297,13 +297,6 @@ function ListView({ startActions={ <> {isSearchable && ( - // { const wrapperRef = useRef(null); const iconButtonRef = useRef(null); - const isMountedRef = useRef(false); - const [didSearch, setDidSearch] = useState(false); - const [isOpen, setIsOpen] = useState(false); const [{ query }, setQuery] = useQueryParams(); const [value, setValue] = useState(query?._q || ''); + const [isOpen, setIsOpen] = useState(!!value); const { formatMessage } = useIntl(); const { trackUsage } = useTracking(); const handleToggle = () => setIsOpen(prev => !prev); - useEffect(() => { - if (isMountedRef.current) { - if (isOpen) { + useLayoutEffect(() => { + if (isOpen) { + setTimeout(() => { wrapperRef.current.querySelector('input').focus(); - } + }, 0); } - - isMountedRef.current = true; }, [isOpen]); - useEffect(() => { - if (value && !isOpen) { - handleToggle(); - } - }, [value, isOpen]); - const handleClear = () => { - setDidSearch(false); setValue(''); setQuery({ _q: '' }, 'remove'); }; @@ -46,14 +35,16 @@ const SearchURLQuery = ({ label, trackedEvent }) => { const handleSubmit = e => { e.preventDefault(); - setQuery({ _q: value, page: 1 }); - }; - - useEffect(() => { - if (didSearch && trackedEvent) { - trackUsage(trackedEvent); + if (value) { + if (trackedEvent) { + trackUsage(trackedEvent); + } + setQuery({ _q: value, page: 1 }); + } else { + handleToggle(); + setQuery({ _q: '' }, 'remove'); } - }, [didSearch, trackedEvent, trackUsage]); + }; if (isOpen) { return ( @@ -61,10 +52,7 @@ const SearchURLQuery = ({ label, trackedEvent }) => { { - setDidSearch(true); - setValue(value); - }} + onChange={({ target: { value } }) => setValue(value)} value={value} clearLabel={formatMessage({ id: 'clearLabel', defaultMessage: 'Clear' })} onClear={handleClear} From 02898a396f0c87f700d23cf03e9613edeafe9556 Mon Sep 17 00:00:00 2001 From: ronronscelestes Date: Thu, 4 Nov 2021 16:08:23 +0100 Subject: [PATCH 06/11] feedback tests --- .../SearchURLQuery/tests/index.test.js | 41 +++++++++++++++++-- 1 file changed, 38 insertions(+), 3 deletions(-) diff --git a/packages/core/helper-plugin/lib/src/components/SearchURLQuery/tests/index.test.js b/packages/core/helper-plugin/lib/src/components/SearchURLQuery/tests/index.test.js index e8b4309641..5fb2396748 100644 --- a/packages/core/helper-plugin/lib/src/components/SearchURLQuery/tests/index.test.js +++ b/packages/core/helper-plugin/lib/src/components/SearchURLQuery/tests/index.test.js @@ -12,15 +12,16 @@ import { createMemoryHistory } from 'history'; import { ThemeProvider, lightTheme } from '@strapi/design-system'; import SearchURLQuery from '../index'; +const trackUsage = jest.fn(); jest.mock('../../../hooks/useTracking', () => () => ({ - trackUsage: jest.fn(), + trackUsage, })); -const makeApp = history => ( +const makeApp = (history, trackedEvent) => ( - + @@ -457,4 +458,38 @@ describe('', () => { const urlSearchQuery = history.location.search; expect(urlSearchQuery).toEqual('?_q=michka&page=1'); }); + + it('should clear value and update query params', async () => { + const history = createMemoryHistory(); + const { container } = render(makeApp(history)); + + fireEvent.click(container.querySelector('button[type="button"]')); + + const input = container.querySelector('input[name="search"]'); + fireEvent.change(input, { target: { value: 'michka' } }); + fireEvent.submit(input); + + const urlSearchQuery = history.location.search; + expect(urlSearchQuery).toEqual('?_q=michka&page=1'); + + fireEvent.click(container.querySelector('button[aria-label="Clear"]')); + + expect(input.value).toEqual(''); + + const clearedUrlSearchQuery = history.location.search; + expect(clearedUrlSearchQuery).toEqual('?page=1'); + }); + + it.only('should call trackUsage with trackedEvent props when submit', async () => { + const history = createMemoryHistory(); + const { container } = render(makeApp(history, 'thisEvent')); + + fireEvent.click(container.querySelector('button[type="button"]')); + + const input = container.querySelector('input[name="search"]'); + fireEvent.change(input, { target: { value: 'michka' } }); + fireEvent.submit(input); + + expect(trackUsage.mock.calls.length).toBe(1); + }); }); From 63fa310c67921baa19b505ec20f95fe0a79ae73e Mon Sep 17 00:00:00 2001 From: ronronscelestes Date: Thu, 4 Nov 2021 16:11:26 +0100 Subject: [PATCH 07/11] removed unnecessary comment --- .../core/admin/admin/src/content-manager/pages/ListView/index.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/core/admin/admin/src/content-manager/pages/ListView/index.js b/packages/core/admin/admin/src/content-manager/pages/ListView/index.js index 62c94e7932..10d445ba60 100644 --- a/packages/core/admin/admin/src/content-manager/pages/ListView/index.js +++ b/packages/core/admin/admin/src/content-manager/pages/ListView/index.js @@ -12,7 +12,6 @@ import { stringify } from 'qs'; import { NoPermissions, CheckPermissions, - // Search, SearchURLQuery, useFocusWhenNavigate, useQueryParams, From 42162ff2cd4b3b05f15dcdf48ad499b4ebd7c7d7 Mon Sep 17 00:00:00 2001 From: ronronscelestes Date: Thu, 4 Nov 2021 16:30:22 +0100 Subject: [PATCH 08/11] updated search component in user permission roles --- .../admin/src/pages/Roles/ListPage/index.js | 6 +- .../pages/Roles/ListPage/tests/index.test.js | 111 +++++++++--------- 2 files changed, 61 insertions(+), 56 deletions(-) diff --git a/packages/plugins/users-permissions/admin/src/pages/Roles/ListPage/index.js b/packages/plugins/users-permissions/admin/src/pages/Roles/ListPage/index.js index 1d979d2131..09158d59e7 100644 --- a/packages/plugins/users-permissions/admin/src/pages/Roles/ListPage/index.js +++ b/packages/plugins/users-permissions/admin/src/pages/Roles/ListPage/index.js @@ -23,7 +23,7 @@ import { useRBAC, NoPermissions, LoadingIndicatorPage, - Search, + SearchURLQuery, useQueryParams, EmptyStateLayout, ConfirmDialog, @@ -137,7 +137,7 @@ const RoleListPage = () => { })} primaryAction={ -

List of roles

{ role="alert" >
Loading content.

You don't have any roles yet.

From c83441f39c832e0328a0e043036fe8113a4dd394 Mon Sep 17 00:00:00 2001 From: ronronscelestes Date: Thu, 4 Nov 2021 16:38:39 +0100 Subject: [PATCH 09/11] replaced search component in settings users --- .../src/pages/SettingsPage/pages/Users/ListPage/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/Users/ListPage/index.js b/packages/core/admin/admin/src/pages/SettingsPage/pages/Users/ListPage/index.js index d4870b990d..3afd081129 100644 --- a/packages/core/admin/admin/src/pages/SettingsPage/pages/Users/ListPage/index.js +++ b/packages/core/admin/admin/src/pages/SettingsPage/pages/Users/ListPage/index.js @@ -1,7 +1,7 @@ import React, { useState } from 'react'; import { DynamicTable, - Search, + SearchURLQuery, SettingsPageTitle, useRBAC, useNotification, @@ -129,7 +129,7 @@ const ListPage = () => { - Date: Thu, 4 Nov 2021 16:49:58 +0100 Subject: [PATCH 10/11] replaced Search component in ee settings roles LV --- .../ee/admin/pages/SettingsPage/pages/Roles/ListPage/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/core/admin/ee/admin/pages/SettingsPage/pages/Roles/ListPage/index.js b/packages/core/admin/ee/admin/pages/SettingsPage/pages/Roles/ListPage/index.js index 282e01ba0f..9034722ed4 100644 --- a/packages/core/admin/ee/admin/pages/SettingsPage/pages/Roles/ListPage/index.js +++ b/packages/core/admin/ee/admin/pages/SettingsPage/pages/Roles/ListPage/index.js @@ -2,7 +2,7 @@ import React, { useCallback, useEffect, useReducer, useState } from 'react'; import { ConfirmDialog, LoadingIndicatorPage, - Search, + SearchURLQuery, SettingsPageTitle, useNotification, useQueryParams, @@ -277,7 +277,7 @@ const RoleListPage = () => { {canRead && ( Date: Thu, 4 Nov 2021 17:02:34 +0100 Subject: [PATCH 11/11] replaced search component in ML --- packages/core/upload/admin/src/pages/App/MediaLibrary.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/core/upload/admin/src/pages/App/MediaLibrary.js b/packages/core/upload/admin/src/pages/App/MediaLibrary.js index 96b0f27bdc..ffc30089a0 100644 --- a/packages/core/upload/admin/src/pages/App/MediaLibrary.js +++ b/packages/core/upload/admin/src/pages/App/MediaLibrary.js @@ -7,7 +7,7 @@ import { NoPermissions, NoMedia, AnErrorOccurred, - Search, + SearchURLQuery, } from '@strapi/helper-plugin'; import { Layout, HeaderLayout, ContentLayout, ActionLayout } from '@strapi/design-system/Layout'; import { Main } from '@strapi/design-system/Main'; @@ -138,7 +138,7 @@ export const MediaLibrary = () => { } endActions={ -