From b044fa6f7cc9a1690b8554528706e7f3c08c53c3 Mon Sep 17 00:00:00 2001 From: Philipp Hugenroth Date: Fri, 16 Jul 2021 13:19:27 +0200 Subject: [PATCH] Clean up code according to review Signed-off-by: Philipp Hugenroth --- .changeset/green-lies-hammer.md | 4 +- .../software-catalog/catalog-customization.md | 42 +++++----- .../SupportButton/SupportButton.tsx | 5 +- .../layout/ContentHeader/ContentHeader.tsx | 6 +- .../src/layout/Page/PageWithHeader.tsx | 10 +-- .../ApiExplorerPage/ApiExplorerPage.tsx | 17 ++-- .../src/hooks/useEntityListProvider.tsx | 7 -- .../catalog-react/src/testUtils/providers.tsx | 3 - .../CatalogFilter/CatalogFilter.tsx | 78 ------------------- .../components/CatalogPage/CatalogPage.tsx | 14 ++-- .../CreateComponentButton.tsx | 4 +- .../{indext.ts => index.ts} | 0 .../EntityListContainer.tsx} | 4 +- .../FilteredEntityLayout/FilterContainer.tsx | 68 ++++++++++++++++ .../FilteredEntityLayout.tsx} | 11 ++- .../index.ts | 4 +- .../FilteredTableLayout/FilterContainer.tsx | 51 ------------ .../FilteredTableLayout.tsx | 52 ------------- plugins/catalog/src/index.ts | 3 +- 19 files changed, 136 insertions(+), 247 deletions(-) delete mode 100644 plugins/catalog/src/components/CatalogFilter/CatalogFilter.tsx rename plugins/catalog/src/components/CreateComponentButton/{indext.ts => index.ts} (100%) rename plugins/catalog/src/components/{FilteredTableLayout/TableContainer.tsx => FilteredEntityLayout/EntityListContainer.tsx} (84%) create mode 100644 plugins/catalog/src/components/FilteredEntityLayout/FilterContainer.tsx rename plugins/catalog/src/components/{CatalogFilter/index.ts => FilteredEntityLayout/FilteredEntityLayout.tsx} (65%) rename plugins/catalog/src/components/{FilteredTableLayout => FilteredEntityLayout}/index.ts (84%) delete mode 100644 plugins/catalog/src/components/FilteredTableLayout/FilterContainer.tsx delete mode 100644 plugins/catalog/src/components/FilteredTableLayout/FilteredTableLayout.tsx diff --git a/.changeset/green-lies-hammer.md b/.changeset/green-lies-hammer.md index bf0a9a3995..fc7f6e301d 100644 --- a/.changeset/green-lies-hammer.md +++ b/.changeset/green-lies-hammer.md @@ -5,4 +5,6 @@ '@backstage/plugin-catalog': patch --- -Build a general TablePage component to enforce a more responsive layout for the Catalog & API page. Filters are now wrapped in an accordion on smaller screens, enabling the user to see & interact better with the table. Additionally, a test was added, to check that the responsive wrapping is working for the Catalog page. +Changing the layout of the Catalog & API page to use responsive wrappers for table & filters. The goal is to enforce a responsive layout & that the Catalog & API page are better useable on smaller screens by showing more of the main content. To apply this changes to your custom catalog page, you can add the wrappers following the updated documentation on catalog customization. + +Additionally, the tests for Material UI breakpoints were adjusted & used to test the responsive wrappers. diff --git a/docs/features/software-catalog/catalog-customization.md b/docs/features/software-catalog/catalog-customization.md index e0228bf7d0..4049b005f1 100644 --- a/docs/features/software-catalog/catalog-customization.md +++ b/docs/features/software-catalog/catalog-customization.md @@ -29,25 +29,27 @@ default catalog page and create a component in a // https://github.com/backstage/backstage/blob/master/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx export const CustomCatalogPage = () => { return ( - + All your software catalog entities -
- -
+ + +
- - -
+ + + + + + - + ); }; ``` @@ -141,14 +143,18 @@ export const CustomCatalogPage = () => { return ( ... -
-
- + + + ... }; diff --git a/packages/core-components/src/components/SupportButton/SupportButton.tsx b/packages/core-components/src/components/SupportButton/SupportButton.tsx index 53c9b20273..45012e50a4 100644 --- a/packages/core-components/src/components/SupportButton/SupportButton.tsx +++ b/packages/core-components/src/components/SupportButton/SupportButton.tsx @@ -100,8 +100,9 @@ export const SupportButton = ({ title, children }: SupportButtonProps) => { color="primary" onClick={onClickHandler} > - - + + + Support }, })); -type DefaultTitleProps = { +type ContentHeaderTitleProps = { title?: string; className?: string; }; @@ -65,7 +65,7 @@ type DefaultTitleProps = { const ContentHeaderTitle = ({ title = 'Unknown page', className, -}: DefaultTitleProps) => ( +}: ContentHeaderTitleProps) => ( { +type ThemedHeaderProps = ComponentProps & { themeId: string; -} +}; export const PageWithHeader = ({ themeId, children, ...props -}: React.PropsWithChildren) => ( +}: React.PropsWithChildren) => (
{children} diff --git a/plugins/api-docs/src/components/ApiExplorerPage/ApiExplorerPage.tsx b/plugins/api-docs/src/components/ApiExplorerPage/ApiExplorerPage.tsx index bf62d06b44..361ce7b55b 100644 --- a/plugins/api-docs/src/components/ApiExplorerPage/ApiExplorerPage.tsx +++ b/plugins/api-docs/src/components/ApiExplorerPage/ApiExplorerPage.tsx @@ -25,8 +25,8 @@ import { configApiRef, useApi, useRouteRef } from '@backstage/core-plugin-api'; import { CatalogTable, CatalogTableRow, - FilteredTableLayout, - TableContainer, + FilteredEntityLayout, + EntityListContainer, FilterContainer, } from '@backstage/plugin-catalog'; import { @@ -54,11 +54,8 @@ const defaultColumns: TableColumn[] = [ CatalogTable.columns.createTagsColumn(), ]; -interface IApiExplorerePageFilterProps { +type ApiExplorerPageProps = { initiallySelectedFilter?: UserListFilterKind; -} - -export type ApiExplorerPageProps = IApiExplorerePageFilterProps & { columns?: TableColumn[]; }; @@ -94,7 +91,7 @@ export const ApiExplorerPage = ({ All your APIs - + - + - - + + diff --git a/plugins/catalog-react/src/hooks/useEntityListProvider.tsx b/plugins/catalog-react/src/hooks/useEntityListProvider.tsx index 7db2205deb..8ca3efd243 100644 --- a/plugins/catalog-react/src/hooks/useEntityListProvider.tsx +++ b/plugins/catalog-react/src/hooks/useEntityListProvider.tsx @@ -84,9 +84,6 @@ export type EntityListContextProps< */ queryParameters: Partial>; - showFiltersDrawer: boolean; - toggleFiltersDrawer: (showFiltersDrawer: boolean) => void; - loading: boolean; error?: Error; }; @@ -111,8 +108,6 @@ export const EntityListProvider = ({ const [requestedFilters, setRequestedFilters] = useState( {} as EntityFilters, ); - // Show - const [showFiltersDrawer, toggleFiltersDrawer] = useState(false); const [outputState, setOutputState] = useState>({ appliedFilters: {} as EntityFilters, entities: [], @@ -208,8 +203,6 @@ export const EntityListProvider = ({ updateFilters, queryParameters: outputState.queryParameters, loading, - showFiltersDrawer, - toggleFiltersDrawer, error, }} > diff --git a/plugins/catalog-react/src/testUtils/providers.tsx b/plugins/catalog-react/src/testUtils/providers.tsx index b8fdd3d8fe..1f9e4f40d6 100644 --- a/plugins/catalog-react/src/testUtils/providers.tsx +++ b/plugins/catalog-react/src/testUtils/providers.tsx @@ -32,7 +32,6 @@ export const MockEntityListContextProvider = ({ const [filters, setFilters] = useState( value.filters ?? {}, ); - const [showFiltersDrawer, toggleFiltersDrawer] = useState(false); const updateFilters = useCallback( ( update: @@ -57,8 +56,6 @@ export const MockEntityListContextProvider = ({ filters, loading: false, queryParameters: {}, - showFiltersDrawer, - toggleFiltersDrawer, }; // Extract value.filters to avoid overwriting it; some tests exercise filter updates. The value diff --git a/plugins/catalog/src/components/CatalogFilter/CatalogFilter.tsx b/plugins/catalog/src/components/CatalogFilter/CatalogFilter.tsx deleted file mode 100644 index 6704f429ee..0000000000 --- a/plugins/catalog/src/components/CatalogFilter/CatalogFilter.tsx +++ /dev/null @@ -1,78 +0,0 @@ -/* - * Copyright 2020 The Backstage Authors - * - * 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 { - EntityKindPicker, - EntityLifecyclePicker, - EntityOwnerPicker, - EntityTagPicker, - EntityTypePicker, - UserListFilterKind, - UserListPicker, -} from '@backstage/plugin-catalog-react'; -import { - Accordion, - AccordionDetails, - AccordionSummary, - Grid, - isWidthDown, - Typography, - withWidth, -} from '@material-ui/core'; -import { Breakpoint } from '@material-ui/core/styles/createBreakpoints'; -import ExpandMore from '@material-ui/icons/ExpandMore'; -import React, { PropsWithChildren } from 'react'; - -interface IProps { - initiallySelectedFilter?: UserListFilterKind; - initialFilter?: 'component' | 'api'; -} - -const CatalogFilterWrapper = withWidth()( - ({ width, children }: PropsWithChildren<{ width: Breakpoint }>) => - isWidthDown('md', width) ? ( - - }> - Filters - - {children} - - ) : ( - {children} - ), -); - -export const CatalogFilter = ({ - initiallySelectedFilter = 'owned', - initialFilter = 'component', -}: IProps) => ( - - - - - - - - - - - - - - -); diff --git a/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx b/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx index 5da46eec97..0fe3504c6d 100644 --- a/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx +++ b/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx @@ -38,10 +38,10 @@ import { CatalogTable } from '../CatalogTable'; import { EntityRow } from '../CatalogTable/types'; import { CreateComponentButton } from '../CreateComponentButton/CreateComponentButton'; import { - FilteredTableLayout, - TableContainer, + FilteredEntityLayout, + EntityListContainer, FilterContainer, -} from '../FilteredTableLayout'; +} from '../FilteredEntityLayout'; export type CatalogPageProps = { initiallySelectedFilter?: UserListFilterKind; @@ -65,7 +65,7 @@ export const CatalogPage = ({ All your software catalog entities - + - + - - + + diff --git a/plugins/catalog/src/components/CreateComponentButton/CreateComponentButton.tsx b/plugins/catalog/src/components/CreateComponentButton/CreateComponentButton.tsx index 4be93c1aa0..ae2fc4b718 100644 --- a/plugins/catalog/src/components/CreateComponentButton/CreateComponentButton.tsx +++ b/plugins/catalog/src/components/CreateComponentButton/CreateComponentButton.tsx @@ -23,7 +23,7 @@ import { useRouteRef } from '@backstage/core-plugin-api'; export const CreateComponentButton = () => { const createComponentLink = useRouteRef(createComponentRouteRef); - return !createComponentLink ? null : ( + return createComponentLink ? ( - ); + ) : null; }; diff --git a/plugins/catalog/src/components/CreateComponentButton/indext.ts b/plugins/catalog/src/components/CreateComponentButton/index.ts similarity index 100% rename from plugins/catalog/src/components/CreateComponentButton/indext.ts rename to plugins/catalog/src/components/CreateComponentButton/index.ts diff --git a/plugins/catalog/src/components/FilteredTableLayout/TableContainer.tsx b/plugins/catalog/src/components/FilteredEntityLayout/EntityListContainer.tsx similarity index 84% rename from plugins/catalog/src/components/FilteredTableLayout/TableContainer.tsx rename to plugins/catalog/src/components/FilteredEntityLayout/EntityListContainer.tsx index f5f5ae0de6..a39ef76b87 100644 --- a/plugins/catalog/src/components/FilteredTableLayout/TableContainer.tsx +++ b/plugins/catalog/src/components/FilteredEntityLayout/EntityListContainer.tsx @@ -15,9 +15,9 @@ */ import { Grid } from '@material-ui/core'; -import React from 'react'; +import React, { PropsWithChildren } from 'react'; -export const TableContainer = ({ children }: React.PropsWithChildren<{}>) => ( +export const EntityListContainer = ({ children }: PropsWithChildren<{}>) => ( {children} diff --git a/plugins/catalog/src/components/FilteredEntityLayout/FilterContainer.tsx b/plugins/catalog/src/components/FilteredEntityLayout/FilterContainer.tsx new file mode 100644 index 0000000000..6502811332 --- /dev/null +++ b/plugins/catalog/src/components/FilteredEntityLayout/FilterContainer.tsx @@ -0,0 +1,68 @@ +/* + * Copyright 2021 The Backstage Authors + * + * 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 { BackstageTheme } from '@backstage/theme'; +import { + Box, + Button, + Drawer, + Grid, + useMediaQuery, + useTheme, +} from '@material-ui/core'; +import FilterListIcon from '@material-ui/icons/FilterList'; +import React, { useState } from 'react'; + +export const FilterContainer = ({ children }: React.PropsWithChildren<{}>) => { + const isMidSizeScreen = useMediaQuery(theme => + theme.breakpoints.down('md'), + ); + const theme = useTheme(); + const [showFiltersDrawer, toggleFiltersDrawer] = useState(false); + + return isMidSizeScreen ? ( + <> + + { + toggleFiltersDrawer(false); + }} + elevation={0} + anchor="left" + disableAutoFocus + keepMounted + variant="temporary" + > + {children} + + + ) : ( + + {children} + + ); +}; diff --git a/plugins/catalog/src/components/CatalogFilter/index.ts b/plugins/catalog/src/components/FilteredEntityLayout/FilteredEntityLayout.tsx similarity index 65% rename from plugins/catalog/src/components/CatalogFilter/index.ts rename to plugins/catalog/src/components/FilteredEntityLayout/FilteredEntityLayout.tsx index dc57ef02e2..628ad9fee6 100644 --- a/plugins/catalog/src/components/CatalogFilter/index.ts +++ b/plugins/catalog/src/components/FilteredEntityLayout/FilteredEntityLayout.tsx @@ -1,5 +1,5 @@ /* - * Copyright 2020 The Backstage Authors + * Copyright 2021 The Backstage Authors * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. @@ -14,4 +14,11 @@ * limitations under the License. */ -export { CatalogFilter } from './CatalogFilter'; +import { Grid } from '@material-ui/core'; +import React, { PropsWithChildren } from 'react'; + +export const FilteredEntityLayout = ({ children }: PropsWithChildren<{}>) => ( + + {children} + +); diff --git a/plugins/catalog/src/components/FilteredTableLayout/index.ts b/plugins/catalog/src/components/FilteredEntityLayout/index.ts similarity index 84% rename from plugins/catalog/src/components/FilteredTableLayout/index.ts rename to plugins/catalog/src/components/FilteredEntityLayout/index.ts index 9fa89259ab..ded61a4edc 100644 --- a/plugins/catalog/src/components/FilteredTableLayout/index.ts +++ b/plugins/catalog/src/components/FilteredEntityLayout/index.ts @@ -14,6 +14,6 @@ * limitations under the License. */ -export { FilteredTableLayout } from './FilteredTableLayout'; +export { FilteredEntityLayout } from './FilteredEntityLayout'; export { FilterContainer } from './FilterContainer'; -export { TableContainer } from './TableContainer'; +export { EntityListContainer } from './EntityListContainer'; diff --git a/plugins/catalog/src/components/FilteredTableLayout/FilterContainer.tsx b/plugins/catalog/src/components/FilteredTableLayout/FilterContainer.tsx deleted file mode 100644 index 0fa26f6c66..0000000000 --- a/plugins/catalog/src/components/FilteredTableLayout/FilterContainer.tsx +++ /dev/null @@ -1,51 +0,0 @@ -/* - * Copyright 2021 The Backstage Authors - * - * 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 { Box, Drawer, Grid, useMediaQuery } from '@material-ui/core'; -import { useEntityListProvider } from '@backstage/plugin-catalog-react'; -import { BackstageTheme } from '@backstage/theme'; -import React from 'react'; - -export const FilterContainer = ({ children }: React.PropsWithChildren<{}>) => { - const isMidSizeScreen = useMediaQuery(theme => - theme.breakpoints.down('md'), - ); - const { showFiltersDrawer, toggleFiltersDrawer } = useEntityListProvider(); - - return isMidSizeScreen ? ( - { - toggleFiltersDrawer(false); - }} - PaperProps={{ - style: { width: '300px' }, - }} - elevation={0} - anchor="left" - disableAutoFocus - keepMounted - variant="temporary" - > - {children} - - ) : ( - - {children} - - ); -}; diff --git a/plugins/catalog/src/components/FilteredTableLayout/FilteredTableLayout.tsx b/plugins/catalog/src/components/FilteredTableLayout/FilteredTableLayout.tsx deleted file mode 100644 index 0820a4d865..0000000000 --- a/plugins/catalog/src/components/FilteredTableLayout/FilteredTableLayout.tsx +++ /dev/null @@ -1,52 +0,0 @@ -/* - * Copyright 2021 The Backstage Authors - * - * 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 { useEntityListProvider } from '@backstage/plugin-catalog-react'; -import { BackstageTheme } from '@backstage/theme'; -import { Box, Button, Grid, useMediaQuery, useTheme } from '@material-ui/core'; -import FilterListIcon from '@material-ui/icons/FilterList'; -import React, { Fragment } from 'react'; - -interface IProps {} - -export const FilteredTableLayout = ({ - children, -}: React.PropsWithChildren) => { - const isMidSizeScreen = useMediaQuery(theme => - theme.breakpoints.down('md'), - ); - const { showFiltersDrawer, toggleFiltersDrawer } = useEntityListProvider(); - const theme = useTheme(); - - return ( - - {isMidSizeScreen && ( - - )} - - {children} - - - ); -}; diff --git a/plugins/catalog/src/index.ts b/plugins/catalog/src/index.ts index 8585177cd9..4b348580f7 100644 --- a/plugins/catalog/src/index.ts +++ b/plugins/catalog/src/index.ts @@ -40,5 +40,4 @@ export { EntitySystemDiagramCard, } from './plugin'; export * from './components/CatalogTable/columns'; -export * from './components/CatalogFilter'; -export * from './components/FilteredTableLayout'; +export * from './components/FilteredEntityLayout';