From 633a31fecfee13bc094d5912f6bfff75c9e7df4f Mon Sep 17 00:00:00 2001
From: Ioannis Georgoulas <ioannis@paddle.com>
Date: Tue, 9 Mar 2021 10:33:54 +0000
Subject: [PATCH 1/3] catalog: make initially selected filter configurable

Signed-off-by: Ioannis Georgoulas <ioannis@paddle.com>
---
 .changeset/catalog-chocolate-cake.md               | 12 ++++++++++++
 .../src/components/CatalogPage/CatalogPage.tsx     | 14 ++++++++++----
 2 files changed, 22 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/catalog-chocolate-cake.md

diff --git a/.changeset/catalog-chocolate-cake.md b/.changeset/catalog-chocolate-cake.md
new file mode 100644
index 0000000000..3e400bf5bb
--- /dev/null
+++ b/.changeset/catalog-chocolate-cake.md
@@ -0,0 +1,12 @@
+---
+'@backstage/plugin-catalog': patch
+---
+
+Add the ability to change the initially selected filter, if not set it still defaults to `owned`.
+
+```js
+<Route
+  path="/catalog"
+  element={<CatalogIndexPage initiallySelectedFilter="all" />}
+/>
+```
diff --git a/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx b/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx
index 0ec5dd31af..cf402d6225 100644
--- a/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx
+++ b/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx
@@ -59,7 +59,11 @@ const useStyles = makeStyles(theme => ({
   },
 }));
 
-const CatalogPageContents = () => {
+export type CatalogPageOpts = {
+  initiallySelectedFilter?: string;
+};
+
+const CatalogPageContents = (opt: CatalogPageOpts) => {
   const styles = useStyles();
   const {
     loading,
@@ -79,6 +83,8 @@ const CatalogPageContents = () => {
     setSelectedSidebarItem,
   ] = useState<CatalogFilterType>();
   const orgName = configApi.getOptionalString('organization.name') ?? 'Company';
+  const initiallySelectedFilter =
+    selectedSidebarItem?.id ?? opt.initiallySelectedFilter ?? 'owned';
   const createComponentLink = useRouteRef(createComponentRouteRef);
   const addMockData = useCallback(async () => {
     try {
@@ -197,7 +203,7 @@ const CatalogPageContents = () => {
               onChange={({ label, id }) =>
                 setSelectedSidebarItem({ label, id })
               }
-              initiallySelected={selectedSidebarItem?.id ?? 'owned'}
+              initiallySelected={initiallySelectedFilter}
             />
             <ResultsFilter availableTags={availableTags} />
           </div>
@@ -213,8 +219,8 @@ const CatalogPageContents = () => {
   );
 };
 
-export const CatalogPage = () => (
+export const CatalogPage = (opt: CatalogPageOpts) => (
   <EntityFilterGroupsProvider>
-    <CatalogPageContents />
+    <CatalogPageContents {...opt} />
   </EntityFilterGroupsProvider>
 );

From 2ea6751e8c55f5a7fe081a71ebfbd170dd2b718f Mon Sep 17 00:00:00 2001
From: Ioannis Georgoulas <ioannis@paddle.com>
Date: Tue, 9 Mar 2021 12:14:34 +0000
Subject: [PATCH 2/3] Rename to props

Signed-off-by: Ioannis Georgoulas <ioannis@paddle.com>
---
 .../catalog/src/components/CatalogPage/CatalogPage.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx b/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx
index cf402d6225..efab2ac7fc 100644
--- a/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx
+++ b/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx
@@ -59,11 +59,11 @@ const useStyles = makeStyles(theme => ({
   },
 }));
 
-export type CatalogPageOpts = {
+export type CatalogPageProps = {
   initiallySelectedFilter?: string;
 };
 
-const CatalogPageContents = (opt: CatalogPageOpts) => {
+const CatalogPageContents = (props: CatalogPageProps) => {
   const styles = useStyles();
   const {
     loading,
@@ -84,7 +84,7 @@ const CatalogPageContents = (opt: CatalogPageOpts) => {
   ] = useState<CatalogFilterType>();
   const orgName = configApi.getOptionalString('organization.name') ?? 'Company';
   const initiallySelectedFilter =
-    selectedSidebarItem?.id ?? opt.initiallySelectedFilter ?? 'owned';
+    selectedSidebarItem?.id ?? props.initiallySelectedFilter ?? 'owned';
   const createComponentLink = useRouteRef(createComponentRouteRef);
   const addMockData = useCallback(async () => {
     try {
@@ -219,8 +219,8 @@ const CatalogPageContents = (opt: CatalogPageOpts) => {
   );
 };
 
-export const CatalogPage = (opt: CatalogPageOpts) => (
+export const CatalogPage = (props: CatalogPageProps) => (
   <EntityFilterGroupsProvider>
-    <CatalogPageContents {...opt} />
+    <CatalogPageContents {...props} />
   </EntityFilterGroupsProvider>
 );

From 24b353dd2004620d2631457fbd064d4e0db02a5f Mon Sep 17 00:00:00 2001
From: Ioannis Georgoulas <ioannis@paddle.com>
Date: Tue, 9 Mar 2021 12:46:42 +0000
Subject: [PATCH 3/3] Add test case for  filter

Signed-off-by: Ioannis Georgoulas <ioannis@paddle.com>
---
 .../catalog/src/components/CatalogPage/CatalogPage.test.tsx | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/plugins/catalog/src/components/CatalogPage/CatalogPage.test.tsx b/plugins/catalog/src/components/CatalogPage/CatalogPage.test.tsx
index accfe6eda4..03f211a7bb 100644
--- a/plugins/catalog/src/components/CatalogPage/CatalogPage.test.tsx
+++ b/plugins/catalog/src/components/CatalogPage/CatalogPage.test.tsx
@@ -134,6 +134,12 @@ describe('CatalogPage', () => {
     fireEvent.click(getByText(/All/));
     expect(await findByText(/All \(2\)/)).toBeInTheDocument();
   });
+  it('should set initial filter correctly', async () => {
+    const { findByText } = renderWrapped(
+      <CatalogPage initiallySelectedFilter="all" />,
+    );
+    expect(await findByText(/All \(2\)/)).toBeInTheDocument();
+  });
   // this test is for fixing the bug after favoriting an entity, the matching entities defaulting
   // to "owned" filter and not based on the selected filter
   it('should render the correct entities filtered on the selectedfilter', async () => {