Move CategoryPicker to scaffolder-react

Signed-off-by: Min Kim <minkimcello@gmail.com>

plugins/scaffolder-react/alpha-api-report.md

@@ -190,6 +190,9 @@ export interface TemplateCardProps {
   template: TemplateEntityV1beta3;
 }
 
+// @alpha
+export const TemplateCategoryPicker: () => JSX.Element | null;
+
 // @alpha
 export const TemplateGroup: (props: TemplateGroupProps) => JSX.Element;
 

plugins/scaffolder-react/src/next/components/TemplateCategoryPicker/TemplateCategoryPicker.test.tsx

@@ -16,7 +16,7 @@
 
 import React from 'react';
 import { useEntityTypeFilter } from '@backstage/plugin-catalog-react';
-import { CategoryPicker } from './CategoryPicker';
+import { TemplateCategoryPicker } from './TemplateCategoryPicker';
 import { renderInTestApp, TestApiProvider } from '@backstage/test-utils';
 import { alertApiRef } from '@backstage/core-plugin-api';
 import { fireEvent } from '@testing-library/react';
@@ -25,7 +25,7 @@ jest.mock('@backstage/plugin-catalog-react', () => ({
   useEntityTypeFilter: jest.fn(),
 }));
 
-describe('CategoryPicker', () => {
+describe('TemplateCategoryPicker', () => {
   const mockAlertApi = { post: jest.fn() };
 
   beforeEach(() => {
@@ -39,7 +39,7 @@ describe('CategoryPicker', () => {
 
     await renderInTestApp(
       <TestApiProvider apis={[[alertApiRef, mockAlertApi]]}>
-        <CategoryPicker />
+        <TemplateCategoryPicker />
       </TestApiProvider>,
     );
 
@@ -56,7 +56,7 @@ describe('CategoryPicker', () => {
 
     const { findByTestId } = await renderInTestApp(
       <TestApiProvider apis={[[alertApiRef, mockAlertApi]]}>
-        <CategoryPicker />
+        <TemplateCategoryPicker />
       </TestApiProvider>,
     );
 
@@ -70,7 +70,7 @@ describe('CategoryPicker', () => {
 
     const { queryByText } = await renderInTestApp(
       <TestApiProvider apis={[[alertApiRef, mockAlertApi]]}>
-        <CategoryPicker />
+        <TemplateCategoryPicker />
       </TestApiProvider>,
     );
 
@@ -86,7 +86,7 @@ describe('CategoryPicker', () => {
 
     const { getByRole } = await renderInTestApp(
       <TestApiProvider apis={[[alertApiRef, mockAlertApi]]}>
-        <CategoryPicker />
+        <TemplateCategoryPicker />
       </TestApiProvider>,
     );
 
@@ -108,7 +108,7 @@ describe('CategoryPicker', () => {
 
     const { getByRole } = await renderInTestApp(
       <TestApiProvider apis={[[alertApiRef, mockAlertApi]]}>
-        <CategoryPicker />
+        <TemplateCategoryPicker />
       </TestApiProvider>,
     );
 
@@ -139,7 +139,7 @@ describe('CategoryPicker', () => {
 
     const { getByRole } = await renderInTestApp(
       <TestApiProvider apis={[[alertApiRef, mockAlertApi]]}>
-        <CategoryPicker />
+        <TemplateCategoryPicker />
       </TestApiProvider>,
     );
 

plugins/scaffolder-react/src/next/components/TemplateCategoryPicker/TemplateCategoryPicker.tsx

@@ -37,8 +37,10 @@ const checkedIcon = <CheckBoxIcon fontSize="small" />;
 /**
  * The Category Picker that is rendered on the left side for picking
  * categories and filtering the template list.
+ *
+ * @alpha
  */
-export const CategoryPicker = () => {
+export const TemplateCategoryPicker = () => {
   const alertApi = useApi(alertApiRef);
   const { error, loading, availableTypes, selectedTypes, setSelectedTypes } =
     useEntityTypeFilter();

plugins/scaffolder-react/src/next/components/TemplateCategoryPicker/index.ts

@@ -0,0 +1,16 @@
+/*
+ * Copyright 2023 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 { TemplateCategoryPicker } from './TemplateCategoryPicker';

plugins/scaffolder-react/src/next/components/index.ts

@@ -22,3 +22,4 @@ export * from './TemplateOutputs';
 export * from './Form';
 export * from './TaskSteps';
 export * from './TaskLogStream';
+export * from './TemplateCategoryPicker';

plugins/scaffolder/src/next/TemplateListPage/TemplateListPage.tsx

@@ -32,7 +32,8 @@ import {
   CatalogFilterLayout,
   UserListPicker,
 } from '@backstage/plugin-catalog-react';
-import { CategoryPicker } from './CategoryPicker';
+import { TemplateCategoryPicker } from '@backstage/plugin-scaffolder-react/alpha';
+
 import { RegisterExistingButton } from './RegisterExistingButton';
 import { useRouteRef } from '@backstage/core-plugin-api';
 import { TemplateGroupFilter, TemplateGroups } from './TemplateGroups';
@@ -110,7 +111,7 @@ export const TemplateListPage = (props: TemplateListPageProps) => {
                 initialFilter="all"
                 availableFilters={['all', 'starred']}
               />
-              <CategoryPicker />
+              <TemplateCategoryPicker />
               <EntityTagPicker />
             </CatalogFilterLayout.Filters>
             <CatalogFilterLayout.Content>