Set initialFilter in UserListPicker

Signed-off-by: Tim Hansen <timbonicus@gmail.com>

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

@@ -100,7 +100,11 @@ function getFilterGroups(orgName: string | undefined): ButtonGroup[] {
   ];
 }
 
-export const UserListPicker = () => {
+type UserListPickerProps = {
+  initialFilter?: UserListFilterKind;
+};
+
+export const UserListPicker = ({ initialFilter }: UserListPickerProps) => {
   const classes = useStyles();
   const configApi = useApi(configApiRef);
   const orgName = configApi.getOptionalString('organization.name') ?? 'Company';
@@ -108,6 +112,7 @@ export const UserListPicker = () => {
 
   const { value: user } = useOwnUser();
   const { isStarredEntity } = useStarredEntities();
+  const [selectedUserFilter, setSelectedUserFilter] = useState(initialFilter);
 
   // Static filters; used for generating counts of potentially unselected kinds
   const ownedFilter = useMemo(
@@ -121,6 +126,14 @@ export const UserListPicker = () => {
 
   const { filters, updateFilters, backendEntities } = useEntityListProvider();
 
+  useEffect(() => {
+    updateFilters({
+      user: selectedUserFilter
+        ? new UserListFilter(selectedUserFilter, user, isStarredEntity)
+        : undefined,
+    });
+  }, [selectedUserFilter, user, isStarredEntity, updateFilters]);
+
   // To show proper counts for each section, apply all other frontend filters _except_ the user
   // filter that's controlled by this picker.
   const [entitiesWithoutUserFilter, setEntitiesWithoutUserFilter] = useState(
@@ -132,9 +145,6 @@ export const UserListPicker = () => {
     );
     setEntitiesWithoutUserFilter(backendEntities.filter(filterFn));
   }, [filters, backendEntities]);
-  function setSelectedFilter({ id }: { id: UserListFilterKind }) {
-    updateFilters({ user: new UserListFilter(id, user, isStarredEntity) });
-  }
 
   function getFilterCount(id: UserListFilterKind) {
     switch (id) {
@@ -165,7 +175,7 @@ export const UserListPicker = () => {
                   key={item.id}
                   button
                   divider
-                  onClick={() => setSelectedFilter(item)}
+                  onClick={() => setSelectedUserFilter(item.id)}
                   selected={item.id === filters.user?.value}
                   className={classes.menuItem}
                 >

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

@@ -15,31 +15,26 @@
  */
 
 import React from 'react';
-import { Link as RouterLink } from 'react-router-dom';
-import { Button, makeStyles } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core';
 import {
   Content,
   ContentHeader,
   SupportButton,
   TableColumn,
-  useRouteRef,
 } from '@backstage/core';
 import {
   EntityKindFilter,
   EntityListProvider,
   EntityTagPicker,
   EntityTypePicker,
-  useOwnUser,
-  UserListFilter,
   UserListFilterKind,
   UserListPicker,
-  useStarredEntities,
 } from '@backstage/plugin-catalog-react';
 
-import { createComponentRouteRef } from '../../routes';
 import { CatalogTable } from '../CatalogTable';
 import { EntityRow } from '../CatalogTable/types';
 import CatalogLayout from './CatalogLayout';
+import { CreateComponentButton } from '../CreateComponentButton';
 
 const useStyles = makeStyles(theme => ({
   contentWrapper: {
@@ -63,35 +58,22 @@ export const CatalogPage = ({
   columns,
 }: CatalogPageProps) => {
   const styles = useStyles();
-  const createComponentLink = useRouteRef(createComponentRouteRef);
-  const { value: user } = useOwnUser();
-  const { isStarredEntity } = useStarredEntities();
   const initialFilters = {
     kind: new EntityKindFilter('component'),
-    user: new UserListFilter(initiallySelectedFilter, user, isStarredEntity),
   };
 
   return (
     <CatalogLayout>
       <Content>
         <ContentHeader title="Components">
-          {createComponentLink && (
-            <Button
-              component={RouterLink}
-              variant="contained"
-              color="primary"
-              to={createComponentLink()}
-            >
-              Create Component
-            </Button>
-          )}
+          <CreateComponentButton />
           <SupportButton>All your software catalog entities</SupportButton>
         </ContentHeader>
         <div className={styles.contentWrapper}>
           <EntityListProvider initialFilters={initialFilters}>
             <div>
               <EntityTypePicker />
-              <UserListPicker />
+              <UserListPicker initialFilter={initiallySelectedFilter} />
               <EntityTagPicker />
             </div>
             <CatalogTable columns={columns} />

plugins/catalog/src/components/CatalogTable/CatalogTable.tsx

@@ -159,7 +159,7 @@ export const CatalogTable = ({ columns }: CatalogTableProps) => {
         padding: 'dense',
         pageSizeOptions: [20, 50, 100],
       }}
-      title={`${titlePreamble} (${(entities && entities.length) || 0})`}
+      title={`${titlePreamble} (${entities.length})`}
       data={rows}
       actions={actions}
     />

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

@@ -0,0 +1,38 @@
+/*
+ * Copyright 2021 Spotify AB
+ *
+ * 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 { Link as RouterLink } from 'react-router-dom';
+import { Button } from '@material-ui/core';
+import { useRouteRef } from '@backstage/core';
+import { createComponentRouteRef } from '../../routes';
+
+export const CreateComponentButton = () => {
+  const createComponentLink = useRouteRef(createComponentRouteRef);
+
+  if (!createComponentLink) return null;
+
+  return (
+    <Button
+      component={RouterLink}
+      variant="contained"
+      color="primary"
+      to={createComponentLink()}
+    >
+      Create Component
+    </Button>
+  );
+};

plugins/catalog/src/components/CreateComponentButton/index.ts

@@ -0,0 +1,16 @@
+/*
+ * Copyright 2021 Spotify AB
+ *
+ * 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 { CreateComponentButton } from './CreateComponentButton';