From b96b87e8bea06a52823f551c852580d7d8b44069 Mon Sep 17 00:00:00 2001 From: Tim Hansen Date: Wed, 26 May 2021 10:15:18 -0600 Subject: [PATCH] Set initialFilter in UserListPicker Signed-off-by: Tim Hansen --- .../UserListPicker/UserListPicker.tsx | 20 +++++++--- .../components/CatalogPage/CatalogPage.tsx | 26 ++----------- .../components/CatalogTable/CatalogTable.tsx | 2 +- .../CreateComponentButton.tsx | 38 +++++++++++++++++++ .../components/CreateComponentButton/index.ts | 16 ++++++++ 5 files changed, 74 insertions(+), 28 deletions(-) create mode 100644 plugins/catalog/src/components/CreateComponentButton/CreateComponentButton.tsx create mode 100644 plugins/catalog/src/components/CreateComponentButton/index.ts diff --git a/plugins/catalog-react/src/components/UserListPicker/UserListPicker.tsx b/plugins/catalog-react/src/components/UserListPicker/UserListPicker.tsx index 129e5e6b1a..c799a317a5 100644 --- a/plugins/catalog-react/src/components/UserListPicker/UserListPicker.tsx +++ b/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} > diff --git a/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx b/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx index 95bd857221..abaf1d6cfd 100644 --- a/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx +++ b/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 ( - {createComponentLink && ( - - )} + All your software catalog entities
- +
diff --git a/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx b/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx index 69872c3870..57b25455ba 100644 --- a/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx +++ b/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} /> diff --git a/plugins/catalog/src/components/CreateComponentButton/CreateComponentButton.tsx b/plugins/catalog/src/components/CreateComponentButton/CreateComponentButton.tsx new file mode 100644 index 0000000000..896e9bada3 --- /dev/null +++ b/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 ( + + ); +}; diff --git a/plugins/catalog/src/components/CreateComponentButton/index.ts b/plugins/catalog/src/components/CreateComponentButton/index.ts new file mode 100644 index 0000000000..d5dc578d2a --- /dev/null +++ b/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';