From 7ae8dc8bab6bf7d6baed69552d0dfe9e01158340 Mon Sep 17 00:00:00 2001
From: Tim Hansen <timbonicus@gmail.com>
Date: Thu, 10 Jun 2021 21:02:28 -0600
Subject: [PATCH] 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 +-
 .changeset/wild-ghosts-deny.md                              | 2 +-
 .../src/components/ApiExplorerPage/ApiExplorerPage.tsx      | 6 +++---
 .../EntityLifecyclePicker/EntityLifecyclePicker.tsx         | 5 +++--
 .../src/components/EntityOwnerPicker/EntityOwnerPicker.tsx  | 5 +++--
 .../src/components/EntityTagPicker/EntityTagPicker.tsx      | 5 +++--
 plugins/catalog/src/components/CatalogPage/CatalogPage.tsx  | 4 ++++
 .../CreateComponentButton/CreateComponentButton.tsx         | 6 +++---
 8 files changed, 21 insertions(+), 14 deletions(-)

diff --git a/.changeset/chilly-ants-taste.md b/.changeset/chilly-ants-taste.md
index 2c68e374f8..e9422e0317 100644
--- a/.changeset/chilly-ants-taste.md
+++ b/.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.
diff --git a/.changeset/wild-ghosts-deny.md b/.changeset/wild-ghosts-deny.md
index 2ad99bfdd2..09be2d580c 100644
--- a/.changeset/wild-ghosts-deny.md
+++ b/.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
diff --git a/plugins/api-docs/src/components/ApiExplorerPage/ApiExplorerPage.tsx b/plugins/api-docs/src/components/ApiExplorerPage/ApiExplorerPage.tsx
index e5dffa7e73..163aad4cab 100644
--- a/plugins/api-docs/src/components/ApiExplorerPage/ApiExplorerPage.tsx
+++ b/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 />
diff --git a/plugins/catalog-react/src/components/EntityLifecyclePicker/EntityLifecyclePicker.tsx b/plugins/catalog-react/src/components/EntityLifecyclePicker/EntityLifecyclePicker.tsx
index eed0218784..b36e332b5d 100644
--- a/plugins/catalog-react/src/components/EntityLifecyclePicker/EntityLifecyclePicker.tsx
+++ b/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>
   );
 };
diff --git a/plugins/catalog-react/src/components/EntityOwnerPicker/EntityOwnerPicker.tsx b/plugins/catalog-react/src/components/EntityOwnerPicker/EntityOwnerPicker.tsx
index 96e955969f..c46affe86b 100644
--- a/plugins/catalog-react/src/components/EntityOwnerPicker/EntityOwnerPicker.tsx
+++ b/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>
   );
 };
diff --git a/plugins/catalog-react/src/components/EntityTagPicker/EntityTagPicker.tsx b/plugins/catalog-react/src/components/EntityTagPicker/EntityTagPicker.tsx
index e610fb9d2f..18ef8a26a3 100644
--- a/plugins/catalog-react/src/components/EntityTagPicker/EntityTagPicker.tsx
+++ b/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>
   );
 };
diff --git a/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx b/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx
index 80569f4de6..d3ade03fe4 100644
--- a/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx
+++ b/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} />
diff --git a/plugins/catalog/src/components/CreateComponentButton/CreateComponentButton.tsx b/plugins/catalog/src/components/CreateComponentButton/CreateComponentButton.tsx
index 8c30c9f9be..23f28f50d1 100644
--- a/plugins/catalog/src/components/CreateComponentButton/CreateComponentButton.tsx
+++ b/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>
   );
 };