Move SearchBar, SearchBarBase, and SearchTracker from @backstage/plugin-search to @backstage/plugin-search-react and deprecate SearchBar and SearchbarBase in @backstage/plugin-search
Signed-off-by: Anders Näsman <andersn@spotify.com>
This commit is contained in:
Anders Näsman
committed by
Eric Peterson
Eric Peterson
parent
193ae37f15
commit
ccbabfd4bd
@@ -87,10 +87,10 @@ export type SearchAutocompleteFilterProps = SearchFilterComponentProps_2 & {
|
||||
multiple?: boolean;
|
||||
};
|
||||
|
||||
// @public
|
||||
// @public @deprecated (undocumented)
|
||||
export const SearchBar: ({ onChange, ...props }: SearchBarProps) => JSX.Element;
|
||||
|
||||
// @public
|
||||
// @public @deprecated (undocumented)
|
||||
export const SearchBarBase: ({
|
||||
onChange,
|
||||
onKeyDown,
|
||||
@@ -104,7 +104,7 @@ export const SearchBarBase: ({
|
||||
...props
|
||||
}: SearchBarBaseProps) => JSX.Element;
|
||||
|
||||
// @public
|
||||
// @public @deprecated (undocumented)
|
||||
export type SearchBarBaseProps = Omit<InputBaseProps, 'onChange'> & {
|
||||
debounceTime?: number;
|
||||
clearButton?: boolean;
|
||||
@@ -121,7 +121,7 @@ export const SearchBarNext: ({
|
||||
...props
|
||||
}: Partial<SearchBarBaseProps>) => JSX.Element;
|
||||
|
||||
// @public
|
||||
// @public @deprecated (undocumented)
|
||||
export type SearchBarProps = Partial<SearchBarBaseProps>;
|
||||
|
||||
// Warning: (ae-missing-release-tag) "SearchFilter" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
|
||||
|
||||
@@ -1,96 +0,0 @@
|
||||
/*
|
||||
* Copyright 2021 The Backstage Authors
|
||||
*
|
||||
* 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 { Grid, makeStyles, Paper } from '@material-ui/core';
|
||||
import React, { ComponentType } from 'react';
|
||||
import {
|
||||
searchApiRef,
|
||||
MockSearchApi,
|
||||
SearchContextProvider,
|
||||
} from '@backstage/plugin-search-react';
|
||||
import { TestApiProvider } from '@backstage/test-utils';
|
||||
import { SearchBar } from './SearchBar';
|
||||
|
||||
export default {
|
||||
title: 'Plugins/Search/SearchBar',
|
||||
component: SearchBar,
|
||||
decorators: [
|
||||
(Story: ComponentType<{}>) => (
|
||||
<TestApiProvider apis={[[searchApiRef, new MockSearchApi()]]}>
|
||||
<SearchContextProvider>
|
||||
<Grid container direction="row">
|
||||
<Grid item xs={12}>
|
||||
<Story />
|
||||
</Grid>
|
||||
</Grid>
|
||||
</SearchContextProvider>
|
||||
</TestApiProvider>
|
||||
),
|
||||
],
|
||||
};
|
||||
|
||||
export const Default = () => {
|
||||
return (
|
||||
<Paper style={{ padding: '8px 0' }}>
|
||||
<SearchBar />
|
||||
</Paper>
|
||||
);
|
||||
};
|
||||
|
||||
export const CustomPlaceholder = () => {
|
||||
return (
|
||||
<Paper style={{ padding: '8px 0' }}>
|
||||
<SearchBar placeholder="This is a custom placeholder" />
|
||||
</Paper>
|
||||
);
|
||||
};
|
||||
|
||||
export const Focused = () => {
|
||||
return (
|
||||
<Paper style={{ padding: '8px 0' }}>
|
||||
{/* 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 */}
|
||||
<SearchBar autoFocus />
|
||||
</Paper>
|
||||
);
|
||||
};
|
||||
|
||||
export const WithoutClearButton = () => {
|
||||
return (
|
||||
<Paper style={{ padding: '8px 0' }}>
|
||||
<SearchBar clearButton={false} />
|
||||
</Paper>
|
||||
);
|
||||
};
|
||||
|
||||
const useStyles = makeStyles({
|
||||
search: {
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
padding: '8px 0',
|
||||
borderRadius: '50px',
|
||||
margin: 'auto',
|
||||
},
|
||||
});
|
||||
|
||||
export const CustomStyles = () => {
|
||||
const classes = useStyles();
|
||||
return (
|
||||
<Paper className={classes.search}>
|
||||
<SearchBar />
|
||||
</Paper>
|
||||
);
|
||||
};
|
||||
@@ -36,10 +36,12 @@ import {
|
||||
SearchContextProvider,
|
||||
useSearch,
|
||||
useSearchContextCheck,
|
||||
TrackSearch,
|
||||
} from '@backstage/plugin-search-react';
|
||||
import { TrackSearch } from '../SearchTracker';
|
||||
|
||||
/**
|
||||
* @deprecated Moved to `@backstage/plugin-search-react`.
|
||||
*
|
||||
* Props for {@link SearchBarBase}.
|
||||
*
|
||||
* @public
|
||||
@@ -53,6 +55,8 @@ export type SearchBarBaseProps = Omit<InputBaseProps, 'onChange'> & {
|
||||
};
|
||||
|
||||
/**
|
||||
* @deprecated Moved to `@backstage/plugin-search-react`.
|
||||
*
|
||||
* All search boxes exported by the search plugin are based on the <SearchBarBase />,
|
||||
* and this one is based on the <InputBase /> component from Material UI.
|
||||
* Recommended if you don't use Search Provider or Search Context.
|
||||
@@ -149,6 +153,8 @@ export const SearchBarBase = ({
|
||||
};
|
||||
|
||||
/**
|
||||
* @deprecated Moved to `@backstage/plugin-search-react`.
|
||||
*
|
||||
* Props for {@link SearchBar}.
|
||||
*
|
||||
* @public
|
||||
@@ -156,6 +162,8 @@ export const SearchBarBase = ({
|
||||
export type SearchBarProps = Partial<SearchBarBaseProps>;
|
||||
|
||||
/**
|
||||
* @deprecated Moved to `@backstage/plugin-search-react`.
|
||||
*
|
||||
* Recommended search bar when you use the Search Provider or Search Context.
|
||||
*
|
||||
* @public
|
||||
|
||||
@@ -1,36 +0,0 @@
|
||||
/*
|
||||
* Copyright 2021 The Backstage Authors
|
||||
*
|
||||
* 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, { useEffect } from 'react';
|
||||
import { useAnalytics } from '@backstage/core-plugin-api';
|
||||
import { useSearch } from '@backstage/plugin-search-react';
|
||||
|
||||
/**
|
||||
* Capture search event on term change.
|
||||
*/
|
||||
export const TrackSearch = ({ children }: { children: React.ReactChild }) => {
|
||||
const analytics = useAnalytics();
|
||||
const { term } = useSearch();
|
||||
|
||||
useEffect(() => {
|
||||
if (term) {
|
||||
// Capture analytics search event with search term provided as value
|
||||
analytics.captureEvent('search', term);
|
||||
}
|
||||
}, [analytics, term]);
|
||||
|
||||
return <>{children}</>;
|
||||
};
|
||||
@@ -1,16 +0,0 @@
|
||||
/*
|
||||
* Copyright 2021 The Backstage Authors
|
||||
*
|
||||
* 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.
|
||||
*/
|
||||
export { TrackSearch } from './SearchTracker';
|
||||
Reference in New Issue
Block a user