Move SearchResultPager from @backstage/plugin-search to @backstage/plugin-search-react and deprecate it in @backstage/plugin-search

Signed-off-by: Anders Näsman <andersn@spotify.com>

plugins/search-react/src/components/SearchResultPager/SearchResultPager.test.tsx

@@ -0,0 +1,58 @@
+/*
+ * Copyright 2022 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 from 'react';
+
+import { renderInTestApp } from '@backstage/test-utils';
+import { waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { useSearch } from '../../context';
+import { SearchResultPager } from './SearchResultPager';
+
+jest.mock('../../context', () => ({
+  ...jest.requireActual('../../context'),
+  useSearch: jest.fn().mockReturnValue({
+    result: {},
+  }),
+}));
+
+describe('SearchResultPager', () => {
+  it('renders pager buttons', async () => {
+    const fetchNextPage = jest.fn();
+    const fetchPreviousPage = jest.fn();
+    (useSearch as jest.Mock).mockReturnValueOnce({
+      result: { loading: false, value: [] },
+      fetchNextPage,
+      fetchPreviousPage,
+    });
+
+    const { getByLabelText } = await renderInTestApp(<SearchResultPager />);
+
+    await waitFor(() => {
+      expect(getByLabelText('previous page')).toBeInTheDocument();
+    });
+    await userEvent.click(getByLabelText('previous page'));
+    expect(fetchPreviousPage).toBeCalled();
+
+    await waitFor(() => {
+      expect(getByLabelText('next page')).toBeInTheDocument();
+    });
+    await userEvent.click(getByLabelText('next page'));
+
+    expect(fetchNextPage).toBeCalled();
+  });
+});

plugins/search-react/src/components/SearchResultPager/SearchResultPager.tsx

@@ -0,0 +1,66 @@
+/*
+ * Copyright 2022 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 from 'react';
+
+import { Button, makeStyles } from '@material-ui/core';
+import ArrowBackIosIcon from '@material-ui/icons/ArrowBackIos';
+import ArrowForwardIosIcon from '@material-ui/icons/ArrowForwardIos';
+
+import { useSearch } from '../../context';
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    display: 'flex',
+    justifyContent: 'space-between',
+    gap: theme.spacing(2),
+    margin: theme.spacing(2, 0),
+  },
+}));
+
+/**
+ * @public
+ */
+export const SearchResultPager = () => {
+  const { fetchNextPage, fetchPreviousPage } = useSearch();
+  const classes = useStyles();
+
+  if (!fetchNextPage && !fetchPreviousPage) {
+    return <></>;
+  }
+
+  return (
+    <nav arial-label="pagination navigation" className={classes.root}>
+      <Button
+        aria-label="previous page"
+        disabled={!fetchPreviousPage}
+        onClick={fetchPreviousPage}
+        startIcon={<ArrowBackIosIcon />}
+      >
+        Previous
+      </Button>
+
+      <Button
+        aria-label="next page"
+        disabled={!fetchNextPage}
+        onClick={fetchNextPage}
+        endIcon={<ArrowForwardIosIcon />}
+      >
+        Next
+      </Button>
+    </nav>
+  );
+};

plugins/search-react/src/components/SearchResultPager/index.ts

@@ -0,0 +1,17 @@
+/*
+ * Copyright 2022 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 { SearchResultPager } from './SearchResultPager';

plugins/search-react/src/components/index.ts

@@ -17,3 +17,4 @@
 export * from './HighlightedSearchResultText';
 export * from './SearchFilter';
 export * from './SearchResult';
+export * from './SearchResultPager';