From 110166bc8a33607833ad0ebbff12e6a1465e04cc Mon Sep 17 00:00:00 2001 From: Emma Indal Date: Thu, 11 Nov 2021 10:39:53 +0100 Subject: [PATCH 01/10] focus search input field on mount Signed-off-by: Emma Indal --- plugins/search/src/components/SearchBar/SearchBar.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/plugins/search/src/components/SearchBar/SearchBar.tsx b/plugins/search/src/components/SearchBar/SearchBar.tsx index 53802899eb..8d493df5f8 100644 --- a/plugins/search/src/components/SearchBar/SearchBar.tsx +++ b/plugins/search/src/components/SearchBar/SearchBar.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { useEffect, KeyboardEvent, useState } from 'react'; +import React, { useEffect, KeyboardEvent, useState, useRef } from 'react'; import { configApiRef, useApi } from '@backstage/core-plugin-api'; import { useDebounce } from 'react-use'; import { InputBase, InputAdornment, IconButton } from '@material-ui/core'; @@ -40,6 +40,11 @@ export const SearchBarBase = ({ placeholder: overridePlaceholder, }: PresenterProps) => { const configApi = useApi(configApiRef); + const inputRef = useRef(); + + useEffect(() => { + inputRef?.current?.focus(); + }, []); const onKeyDown = React.useCallback( (e: KeyboardEvent) => { @@ -60,6 +65,7 @@ export const SearchBarBase = ({ return ( Date: Thu, 11 Nov 2021 10:41:58 +0100 Subject: [PATCH 02/10] decrease debounce time Signed-off-by: Emma Indal --- plugins/search/src/components/SearchModal/SearchModal.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/plugins/search/src/components/SearchModal/SearchModal.tsx b/plugins/search/src/components/SearchModal/SearchModal.tsx index feabbc55af..37cb93b6d3 100644 --- a/plugins/search/src/components/SearchModal/SearchModal.tsx +++ b/plugins/search/src/components/SearchModal/SearchModal.tsx @@ -68,7 +68,7 @@ export const Modal = ({ open = true, toggleModal }: SearchModalProps) => { setValue(prevValue => (prevValue !== term ? term : prevValue)); }, [term]); - useDebounce(() => setTerm(value), 1000, [value]); + useDebounce(() => setTerm(value), 500, [value]); const handleQuery = (newValue: string) => { setValue(newValue); From e44d62dfe76a4ed7da742d803eccfa87668bb290 Mon Sep 17 00:00:00 2001 From: Emma Indal Date: Thu, 11 Nov 2021 10:43:05 +0100 Subject: [PATCH 03/10] close modal on view all results Signed-off-by: Emma Indal --- plugins/search/src/components/SearchModal/SearchModal.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/plugins/search/src/components/SearchModal/SearchModal.tsx b/plugins/search/src/components/SearchModal/SearchModal.tsx index 37cb93b6d3..75d4b07a3c 100644 --- a/plugins/search/src/components/SearchModal/SearchModal.tsx +++ b/plugins/search/src/components/SearchModal/SearchModal.tsx @@ -114,7 +114,10 @@ export const Modal = ({ open = true, toggleModal }: SearchModalProps) => { alignItems="center" > - + View Full Results From b0efce13becbb8e46115c4bc02b8a00124dcb066 Mon Sep 17 00:00:00 2001 From: Emma Indal Date: Thu, 11 Nov 2021 10:44:11 +0100 Subject: [PATCH 04/10] update terminology of pager buttons, update size and margin Signed-off-by: Emma Indal --- .../src/components/SearchResultPager/SearchResultPager.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/plugins/search/src/components/SearchResultPager/SearchResultPager.tsx b/plugins/search/src/components/SearchResultPager/SearchResultPager.tsx index f1850772bb..12f07530ef 100644 --- a/plugins/search/src/components/SearchResultPager/SearchResultPager.tsx +++ b/plugins/search/src/components/SearchResultPager/SearchResultPager.tsx @@ -25,7 +25,7 @@ const useStyles = makeStyles(theme => ({ display: 'flex', justifyContent: 'space-between', gap: theme.spacing(2), - margin: theme.spacing(4), + margin: theme.spacing(2, 0), }, })); @@ -44,9 +44,8 @@ export const SearchResultPager = () => { disabled={!fetchPreviousPage} onClick={fetchPreviousPage} startIcon={} - size="small" > - Back + Previous From abe2cc4b00f00c441e677e04692c743709432b8b Mon Sep 17 00:00:00 2001 From: Emma Indal Date: Thu, 11 Nov 2021 11:34:32 +0100 Subject: [PATCH 05/10] add search modal to storybook Signed-off-by: Emma Indal --- .../SearchModal/SearchModal.stories.tsx | 85 +++++++++++++++++++ 1 file changed, 85 insertions(+) create mode 100644 plugins/search/src/components/SearchModal/SearchModal.stories.tsx diff --git a/plugins/search/src/components/SearchModal/SearchModal.stories.tsx b/plugins/search/src/components/SearchModal/SearchModal.stories.tsx new file mode 100644 index 0000000000..5eefad8e0d --- /dev/null +++ b/plugins/search/src/components/SearchModal/SearchModal.stories.tsx @@ -0,0 +1,85 @@ +/* + * Copyright 2021 Spotify AB + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import React, { useState, ComponentType } from 'react'; +import { Button } from '@material-ui/core'; +import { ApiProvider, ApiRegistry } from '@backstage/core-app-api'; +import { wrapInTestApp } from '@backstage/test-utils'; +import { SearchModal } from '../index'; +import { searchApiRef } from '../../apis'; +import { rootRouteRef } from '../../plugin'; + +export default { + title: 'Plugins/Search/SearchModal', + component: SearchModal, + decorators: [ + (Story: ComponentType<{}>) => + wrapInTestApp( + <> + + , + { mountedRoutes: { '/search': rootRouteRef } }, + ), + ], +}; + +const mockSearchApi = { + query: () => + Promise.resolve({ + results: [ + { + type: 'custom-result-item', + document: { + location: 'search/search-result-1', + title: 'Search Result 1', + text: 'some text from the search result', + }, + }, + { + type: 'no-custom-result-item', + document: { + location: 'search/search-result-2', + title: 'Search Result 2', + text: 'some text from the search result', + }, + }, + { + type: 'no-custom-result-item', + document: { + location: 'search/search-result-3', + title: 'Search Result 3', + text: 'some text from the search result', + }, + }, + ], + }), +}; + +const apiRegistry = () => ApiRegistry.from([[searchApiRef, mockSearchApi]]); + +export const Default = () => { + const [open, setOpen] = useState(false); + const toggleModal = (): void => setOpen(prevState => !prevState); + + return ( + + + + + ); +}; From 704b267e1c794e81bb5eed09dd24301b920c6928 Mon Sep 17 00:00:00 2001 From: Emma Indal Date: Thu, 11 Nov 2021 11:43:25 +0100 Subject: [PATCH 06/10] add changeset Signed-off-by: Emma Indal --- .changeset/search-serious-hornets-design.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/search-serious-hornets-design.md diff --git a/.changeset/search-serious-hornets-design.md b/.changeset/search-serious-hornets-design.md new file mode 100644 index 0000000000..5fc47f00aa --- /dev/null +++ b/.changeset/search-serious-hornets-design.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-search': patch +--- + +Smaller UX improvements such as focused input field, decreased debounce value, closing modal on link click, terminology updates. From 45f3a67c4c174fa9cf7f65038ac7f374cccb5c6a Mon Sep 17 00:00:00 2001 From: Emma Indal Date: Fri, 12 Nov 2021 12:39:31 +0100 Subject: [PATCH 07/10] add focused prop to both SearchBar and SearchBarBase components + storybook example Signed-off-by: Emma Indal --- .../components/SearchBar/SearchBar.stories.tsx | 17 +++++++++++++++++ .../src/components/SearchBar/SearchBar.tsx | 11 +++++++++-- .../src/components/SearchModal/SearchModal.tsx | 1 + 3 files changed, 27 insertions(+), 2 deletions(-) diff --git a/plugins/search/src/components/SearchBar/SearchBar.stories.tsx b/plugins/search/src/components/SearchBar/SearchBar.stories.tsx index 2c990e512c..27a739006a 100644 --- a/plugins/search/src/components/SearchBar/SearchBar.stories.tsx +++ b/plugins/search/src/components/SearchBar/SearchBar.stories.tsx @@ -62,3 +62,20 @@ export const CustomPlaceholder = () => { ); }; + +export const Focused = () => { + return ( + + {/* @ts-ignore (defaultValue requires more than what is used here) */} + + + + + + + + + + + ); +}; diff --git a/plugins/search/src/components/SearchBar/SearchBar.tsx b/plugins/search/src/components/SearchBar/SearchBar.tsx index 8d493df5f8..5d503c5c44 100644 --- a/plugins/search/src/components/SearchBar/SearchBar.tsx +++ b/plugins/search/src/components/SearchBar/SearchBar.tsx @@ -30,9 +30,11 @@ type PresenterProps = { onSubmit?: () => void; className?: string; placeholder?: string; + focused?: boolean; }; export const SearchBarBase = ({ + focused, value, onChange, onSubmit, @@ -43,8 +45,10 @@ export const SearchBarBase = ({ const inputRef = useRef(); useEffect(() => { - inputRef?.current?.focus(); - }, []); + if (focused) { + inputRef?.current?.focus(); + } + }, [focused]); const onKeyDown = React.useCallback( (e: KeyboardEvent) => { @@ -93,12 +97,14 @@ export const SearchBarBase = ({ }; type Props = { + focused?: boolean; className?: string; debounceTime?: number; placeholder?: string; }; export const SearchBar = ({ + focused, className, debounceTime = 0, placeholder, @@ -120,6 +126,7 @@ export const SearchBar = ({ return ( { Date: Fri, 12 Nov 2021 12:43:03 +0100 Subject: [PATCH 08/10] update changeset Signed-off-by: Emma Indal --- .changeset/search-serious-hornets-design.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/search-serious-hornets-design.md b/.changeset/search-serious-hornets-design.md index 5fc47f00aa..e1c8656295 100644 --- a/.changeset/search-serious-hornets-design.md +++ b/.changeset/search-serious-hornets-design.md @@ -2,4 +2,4 @@ '@backstage/plugin-search': patch --- -Smaller UX improvements such as focused input field, decreased debounce value, closing modal on link click, terminology updates. +Smaller UX improvements to search components such as focused prop to SearchBar components, decreased debounce value and closing modal on link click of SearchModal, terminology updates of SearchResultPager. From b02a6989471a018f41d2a5a4059d9fc23238e74f Mon Sep 17 00:00:00 2001 From: Emma Indal Date: Wed, 17 Nov 2021 17:16:40 +0100 Subject: [PATCH 09/10] use material-uis autoFocus prop as an option, not default Signed-off-by: Emma Indal --- .../SearchBar/SearchBar.stories.tsx | 4 +++- .../src/components/SearchBar/SearchBar.tsx | 23 ++++++++----------- .../components/SearchModal/SearchModal.tsx | 1 - 3 files changed, 13 insertions(+), 15 deletions(-) diff --git a/plugins/search/src/components/SearchBar/SearchBar.stories.tsx b/plugins/search/src/components/SearchBar/SearchBar.stories.tsx index 27a739006a..72b8429026 100644 --- a/plugins/search/src/components/SearchBar/SearchBar.stories.tsx +++ b/plugins/search/src/components/SearchBar/SearchBar.stories.tsx @@ -71,7 +71,9 @@ export const Focused = () => { - + {/* decision up to adopter, read https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-autofocus.md#no-autofocus */} + {/* eslint-disable-next-line jsx-a11y/no-autofocus */} + diff --git a/plugins/search/src/components/SearchBar/SearchBar.tsx b/plugins/search/src/components/SearchBar/SearchBar.tsx index 5d503c5c44..c1730bfcff 100644 --- a/plugins/search/src/components/SearchBar/SearchBar.tsx +++ b/plugins/search/src/components/SearchBar/SearchBar.tsx @@ -30,11 +30,11 @@ type PresenterProps = { onSubmit?: () => void; className?: string; placeholder?: string; - focused?: boolean; + autoFocus?: boolean; }; export const SearchBarBase = ({ - focused, + autoFocus, value, onChange, onSubmit, @@ -42,13 +42,6 @@ export const SearchBarBase = ({ placeholder: overridePlaceholder, }: PresenterProps) => { const configApi = useApi(configApiRef); - const inputRef = useRef(); - - useEffect(() => { - if (focused) { - inputRef?.current?.focus(); - } - }, [focused]); const onKeyDown = React.useCallback( (e: KeyboardEvent) => { @@ -69,7 +62,9 @@ export const SearchBarBase = ({ return ( { Date: Wed, 17 Nov 2021 17:43:18 +0100 Subject: [PATCH 10/10] api reports and changeset update Signed-off-by: Emma Indal --- .changeset/search-serious-hornets-design.md | 2 +- plugins/search/api-report.md | 3 +++ plugins/search/src/components/SearchBar/SearchBar.tsx | 2 +- 3 files changed, 5 insertions(+), 2 deletions(-) diff --git a/.changeset/search-serious-hornets-design.md b/.changeset/search-serious-hornets-design.md index e1c8656295..638f8ae73b 100644 --- a/.changeset/search-serious-hornets-design.md +++ b/.changeset/search-serious-hornets-design.md @@ -2,4 +2,4 @@ '@backstage/plugin-search': patch --- -Smaller UX improvements to search components such as focused prop to SearchBar components, decreased debounce value and closing modal on link click of SearchModal, terminology updates of SearchResultPager. +Smaller UX improvements to search components such as optional autoFocus prop to SearchBar components, decreased debounce value and closing modal on link click of SearchModal, terminology updates of SearchResultPager. diff --git a/plugins/search/api-report.md b/plugins/search/api-report.md index 0e0ad01fca..c211c48e53 100644 --- a/plugins/search/api-report.md +++ b/plugins/search/api-report.md @@ -80,6 +80,7 @@ export const searchApiRef: ApiRef; // // @public (undocumented) export const SearchBar: ({ + autoFocus, className, debounceTime, placeholder, @@ -89,10 +90,12 @@ export const SearchBar: ({ // // @public @deprecated (undocumented) export const SearchBarNext: ({ + autoFocus, className, debounceTime, placeholder, }: { + autoFocus?: boolean | undefined; className?: string | undefined; debounceTime?: number | undefined; placeholder?: string | undefined; diff --git a/plugins/search/src/components/SearchBar/SearchBar.tsx b/plugins/search/src/components/SearchBar/SearchBar.tsx index c1730bfcff..4ab680d8fa 100644 --- a/plugins/search/src/components/SearchBar/SearchBar.tsx +++ b/plugins/search/src/components/SearchBar/SearchBar.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { useEffect, KeyboardEvent, useState, useRef } from 'react'; +import React, { useEffect, KeyboardEvent, useState } from 'react'; import { configApiRef, useApi } from '@backstage/core-plugin-api'; import { useDebounce } from 'react-use'; import { InputBase, InputAdornment, IconButton } from '@material-ui/core';