Minor tweaks to spacing and wording

Adds EntityOwnerPicker and EntityLifecyclePicker to CatalogPage

Co-authored-by: Phil Kuang <pkuang@factset.com>
Signed-off-by: Tim Hansen <timbonicus@gmail.com>

.changeset/chilly-ants-taste.md

@@ -2,4 +2,4 @@
 '@backstage/plugin-catalog-react': patch
 ---
 
-Implement a `EntityLifecyclePicker` and `EntityOwnerPicker`
+Add `EntityLifecyclePicker` and `EntityOwnerPicker` UI components to allow filtering by `spec.lifecycle` and `spec.owner` on catalog-related pages.

.changeset/wild-ghosts-deny.md

@@ -2,4 +2,4 @@
 '@backstage/plugin-catalog': patch
 ---
 
-Export `EntityRow` type and `CreateComponentButton` component
+Export `EntityRow` type and `CreateComponentButton` components

plugins/api-docs/src/components/ApiExplorerPage/ApiExplorerPage.tsx

@@ -55,7 +55,7 @@ export type ApiExplorerPageProps = {
 };
 
 export const ApiExplorerPage = ({
-  initiallySelectedFilter = 'owned',
+  initiallySelectedFilter = 'all',
   columns,
 }: ApiExplorerPageProps) => {
   const styles = useStyles();
@@ -64,15 +64,15 @@ export const ApiExplorerPage = ({
     <ApiExplorerLayout>
       <Content>
         <ContentHeader title="">
-          <CreateComponentButton buttonLabel="Register Existing API" />
+          <CreateComponentButton label="Register Existing API" />
           <SupportButton>All your APIs</SupportButton>
         </ContentHeader>
         <div className={styles.contentWrapper}>
           <EntityListProvider>
             <div>
               <EntityKindPicker initialFilter="api" hidden />
-              <EntityTypePicker />
               <UserListPicker initialFilter={initiallySelectedFilter} />
+              <EntityTypePicker />
               <EntityOwnerPicker />
               <EntityLifecyclePicker />
               <EntityTagPicker />

plugins/catalog-react/src/components/EntityLifecyclePicker/EntityLifecyclePicker.tsx

@@ -16,6 +16,7 @@
 
 import { Entity } from '@backstage/catalog-model';
 import {
+  Box,
   Checkbox,
   FormControlLabel,
   TextField,
@@ -57,7 +58,7 @@ export const EntityLifecyclePicker = () => {
   };
 
   return (
-    <>
+    <Box pb={1} pt={1}>
       <Typography variant="button">Lifecycle</Typography>
       <Autocomplete<string>
         multiple
@@ -80,6 +81,6 @@ export const EntityLifecyclePicker = () => {
         popupIcon={<ExpandMoreIcon data-testid="lifecycle-picker-expand" />}
         renderInput={params => <TextField {...params} variant="outlined" />}
       />
-    </>
+    </Box>
   );
 };

plugins/catalog-react/src/components/EntityOwnerPicker/EntityOwnerPicker.tsx

@@ -16,6 +16,7 @@
 
 import { Entity } from '@backstage/catalog-model';
 import {
+  Box,
   Checkbox,
   FormControlLabel,
   TextField,
@@ -55,7 +56,7 @@ export const EntityOwnerPicker = () => {
   };
 
   return (
-    <>
+    <Box pb={1} pt={1}>
       <Typography variant="button">Owner</Typography>
       <Autocomplete<string>
         multiple
@@ -78,6 +79,6 @@ export const EntityOwnerPicker = () => {
         popupIcon={<ExpandMoreIcon data-testid="owner-picker-expand" />}
         renderInput={params => <TextField {...params} variant="outlined" />}
       />
-    </>
+    </Box>
   );
 };

plugins/catalog-react/src/components/EntityTagPicker/EntityTagPicker.tsx

@@ -16,6 +16,7 @@
 
 import { Entity } from '@backstage/catalog-model';
 import {
+  Box,
   Checkbox,
   FormControlLabel,
   TextField,
@@ -55,7 +56,7 @@ export const EntityTagPicker = () => {
   };
 
   return (
-    <>
+    <Box pb={1} pt={1}>
       <Typography variant="button">Tags</Typography>
       <Autocomplete<string>
         multiple
@@ -78,6 +79,6 @@ export const EntityTagPicker = () => {
         popupIcon={<ExpandMoreIcon data-testid="tag-picker-expand" />}
         renderInput={params => <TextField {...params} variant="outlined" />}
       />
-    </>
+    </Box>
   );
 };

plugins/catalog/src/components/CatalogPage/CatalogPage.tsx

@@ -24,7 +24,9 @@ import {
 } from '@backstage/core';
 import {
   EntityKindPicker,
+  EntityLifecyclePicker,
   EntityListProvider,
+  EntityOwnerPicker,
   EntityTagPicker,
   EntityTypePicker,
   UserListFilterKind,
@@ -72,6 +74,8 @@ export const CatalogPage = ({
               <EntityKindPicker initialFilter="component" hidden />
               <EntityTypePicker />
               <UserListPicker initialFilter={initiallySelectedFilter} />
+              <EntityOwnerPicker />
+              <EntityLifecyclePicker />
               <EntityTagPicker />
             </div>
             <CatalogTable columns={columns} />

plugins/catalog/src/components/CreateComponentButton/CreateComponentButton.tsx

@@ -21,10 +21,10 @@ import { useRouteRef } from '@backstage/core';
 import { createComponentRouteRef } from '../../routes';
 
 type CreateComponentButtonProps = {
-  buttonLabel?: string;
+  label?: string;
 };
 export const CreateComponentButton = ({
-  buttonLabel,
+  label,
 }: CreateComponentButtonProps) => {
   const createComponentLink = useRouteRef(createComponentRouteRef);
 
@@ -37,7 +37,7 @@ export const CreateComponentButton = ({
       color="primary"
       to={createComponentLink()}
     >
-      {buttonLabel ?? 'Create Component'}
+      {label ?? 'Create Component'}
     </Button>
   );
 };