From 84feb21147018aa37d2e0a6105216fd2fa11c10f Mon Sep 17 00:00:00 2001 From: Philipp Hugenroth Date: Thu, 8 Jul 2021 13:17:40 +0200 Subject: [PATCH 1/6] Wrap catalog filters in accordion for smaller screens Signed-off-by: Philipp Hugenroth --- .../CatalogFilter/CatalogFilter.tsx | 76 +++++++++++++++++++ .../src/components/CatalogFilter/index.ts | 17 +++++ .../components/CatalogPage/CatalogPage.tsx | 64 ++++++---------- 3 files changed, 117 insertions(+), 40 deletions(-) create mode 100644 plugins/catalog/src/components/CatalogFilter/CatalogFilter.tsx create mode 100644 plugins/catalog/src/components/CatalogFilter/index.ts diff --git a/plugins/catalog/src/components/CatalogFilter/CatalogFilter.tsx b/plugins/catalog/src/components/CatalogFilter/CatalogFilter.tsx new file mode 100644 index 0000000000..a8673b395a --- /dev/null +++ b/plugins/catalog/src/components/CatalogFilter/CatalogFilter.tsx @@ -0,0 +1,76 @@ +/* + * 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; +} + +const CatalogFilterWrapper = withWidth()( + ({ width, children }: PropsWithChildren<{ width: Breakpoint }>) => + isWidthDown('md', width) ? ( + + }> + Filters + + {children} + + ) : ( + {children} + ), +); + +export const CatalogFilter = ({ + initiallySelectedFilter = 'owned', +}: IProps) => ( + + + + + + + + + + + + + + +); diff --git a/plugins/catalog/src/components/CatalogFilter/index.ts b/plugins/catalog/src/components/CatalogFilter/index.ts new file mode 100644 index 0000000000..dc57ef02e2 --- /dev/null +++ b/plugins/catalog/src/components/CatalogFilter/index.ts @@ -0,0 +1,17 @@ +/* + * 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. + */ + +export { CatalogFilter } from './CatalogFilter'; diff --git a/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx b/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx index 089e61f0fb..6f8dd0dd2b 100644 --- a/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx +++ b/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx @@ -15,16 +15,10 @@ */ import React from 'react'; -import { Grid } from '@material-ui/core'; +import { Grid, withWidth } from '@material-ui/core'; import { - EntityKindPicker, - EntityLifecyclePicker, EntityListProvider, - EntityOwnerPicker, - EntityTagPicker, - EntityTypePicker, UserListFilterKind, - UserListPicker, } from '@backstage/plugin-catalog-react'; import { CatalogTable } from '../CatalogTable'; @@ -38,6 +32,7 @@ import { TableColumn, TableProps, } from '@backstage/core-components'; +import { CatalogFilter } from '../CatalogFilter'; export type CatalogPageProps = { initiallySelectedFilter?: UserListFilterKind; @@ -45,40 +40,29 @@ export type CatalogPageProps = { actions?: TableProps['actions']; }; -export const CatalogPage = ({ - initiallySelectedFilter = 'owned', - columns, - actions, -}: CatalogPageProps) => ( - - - - - All your software catalog entities - - - - - - - - - - + + + ); + }, ); From e50d7bf9ac62bbb6944ba76ab29523266eb2bc58 Mon Sep 17 00:00:00 2001 From: Philipp Hugenroth Date: Thu, 8 Jul 2021 13:37:00 +0200 Subject: [PATCH 2/6] Add changeset Signed-off-by: Philipp Hugenroth --- .changeset/fuzzy-wolves-travel.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/fuzzy-wolves-travel.md diff --git a/.changeset/fuzzy-wolves-travel.md b/.changeset/fuzzy-wolves-travel.md new file mode 100644 index 0000000000..6b51be64c0 --- /dev/null +++ b/.changeset/fuzzy-wolves-travel.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-catalog': patch +--- + +Move filter to CatalogFilter component & wrap them in an accordion on smaller screens to improve the UX From 9cf8779ddafdf465e0857c725c118f2f82941ee5 Mon Sep 17 00:00:00 2001 From: Philipp Hugenroth Date: Thu, 8 Jul 2021 13:54:27 +0200 Subject: [PATCH 3/6] Remove unused theme HOC Signed-off-by: Philipp Hugenroth --- .../components/CatalogPage/CatalogPage.tsx | 56 ++++++++++--------- 1 file changed, 29 insertions(+), 27 deletions(-) diff --git a/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx b/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx index 6f8dd0dd2b..a97116dd80 100644 --- a/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx +++ b/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx @@ -15,7 +15,7 @@ */ import React from 'react'; -import { Grid, withWidth } from '@material-ui/core'; +import { Grid } from '@material-ui/core'; import { EntityListProvider, UserListFilterKind, @@ -40,29 +40,31 @@ export type CatalogPageProps = { actions?: TableProps['actions']; }; -export const CatalogPage = withWidth()( - ({ columns, actions, initiallySelectedFilter }: CatalogPageProps) => { - return ( - - - - - All your software catalog entities - - - - - - - - - - - - - - ); - }, -); +export const CatalogPage = ({ + columns, + actions, + initiallySelectedFilter, +}: CatalogPageProps) => { + return ( + + + + + All your software catalog entities + + + + + + + + + + + + + + ); +}; From db935a4c102d1e629c98c387ca1cf9879561be7b Mon Sep 17 00:00:00 2001 From: Philipp Hugenroth Date: Fri, 9 Jul 2021 11:51:19 +0200 Subject: [PATCH 4/6] Fix tests to support window.matchMedia & add tests for responsiveness Signed-off-by: Philipp Hugenroth --- .../src/testUtils/mockBreakpoint.ts | 34 ++++++++++---- .../CatalogPage/CatalogPage.test.tsx | 9 ++++ .../components/CatalogPage/CatalogPage.tsx | 46 +++++++++---------- 3 files changed, 55 insertions(+), 34 deletions(-) diff --git a/packages/test-utils/src/testUtils/mockBreakpoint.ts b/packages/test-utils/src/testUtils/mockBreakpoint.ts index 37f0e761b6..0e04f58f70 100644 --- a/packages/test-utils/src/testUtils/mockBreakpoint.ts +++ b/packages/test-utils/src/testUtils/mockBreakpoint.ts @@ -18,6 +18,8 @@ import { act } from '@testing-library/react'; type Breakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl'; +const defaultBreakpoint: Breakpoint = 'xl'; + const queryToBreakpoint = { '(min-width:1920px)': 'xl', '(min-width:1280px)': 'lg', @@ -26,14 +28,17 @@ const queryToBreakpoint = { '(min-width:0px)': 'xs', } as Record; -function toBreakpoint(query: string) { - const breakpoint = queryToBreakpoint[query]; - if (!breakpoint) { - throw new Error( - `received unknown media query in breakpoint mock: '${query}'`, - ); - } - return breakpoint; +/** + * Converts media query string to Breakpoint. + * Chooses the default breakpoint if no breakpoint is set in the media query. + * + * @param query media query string + * @returns Breakpoint + */ +function toBreakpoint(query: string): Breakpoint { + return queryToBreakpoint[query] + ? queryToBreakpoint[query] + : defaultBreakpoint; } type Listener = (event: { matches: boolean }) => void; @@ -41,6 +46,8 @@ type Listener = (event: { matches: boolean }) => void; interface QueryList { addListener(listener: Listener): void; removeListener(listener: Listener): void; + addEventListener(listener: Listener): void; + removeEventListener(listener: Listener): void; matches: boolean; } @@ -50,12 +57,15 @@ interface Query { listeners: Set; } -export default function mockBreakpoint(initialBreakpoint: Breakpoint = 'xl') { +export default function mockBreakpoint( + initialBreakpoint: Breakpoint = defaultBreakpoint, +) { let currentBreakpoint = initialBreakpoint; const queries = Array(); const previousMatchMedia: any = (window as any).matchMedia; + // https://jestjs.io/docs/manual-mocks#mocking-methods-which-are-not-implemented-in-jsdom (window as any).matchMedia = (query: string): QueryList => { const listeners = new Set(); @@ -66,6 +76,12 @@ export default function mockBreakpoint(initialBreakpoint: Breakpoint = 'xl') { removeListener(listener) { listeners.delete(listener); }, + addEventListener(listener) { + listeners.add(listener); + }, + removeEventListener(listener) { + listeners.delete(listener); + }, matches: toBreakpoint(query) === currentBreakpoint, }; diff --git a/plugins/catalog/src/components/CatalogPage/CatalogPage.test.tsx b/plugins/catalog/src/components/CatalogPage/CatalogPage.test.tsx index 584eea0850..d5e31a16a7 100644 --- a/plugins/catalog/src/components/CatalogPage/CatalogPage.test.tsx +++ b/plugins/catalog/src/components/CatalogPage/CatalogPage.test.tsx @@ -26,6 +26,7 @@ import { MockStorageApi, renderWithEffects, wrapInTestApp, + mockBreakpoint, } from '@backstage/test-utils'; import { fireEvent, screen } from '@testing-library/react'; import React from 'react'; @@ -111,6 +112,8 @@ describe('CatalogPage', () => { getProfile: () => testProfile, }; + const { set: setBreakpoint } = mockBreakpoint(); + const renderWrapped = (children: React.ReactNode) => renderWithEffects( wrapInTestApp( @@ -244,4 +247,10 @@ describe('CatalogPage', () => { screen.findByText(/Starred \(1\)/), ).resolves.toBeInTheDocument(); }); + + it('should wrap filter in accordion on smaller screens', async () => { + setBreakpoint('sm'); + const { findByText } = await renderWrapped(); + await expect(findByText(/Filters/)).resolves.toBeInTheDocument(); + }); }); diff --git a/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx b/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx index a97116dd80..9eeb91ca3c 100644 --- a/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx +++ b/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx @@ -43,28 +43,24 @@ export type CatalogPageProps = { export const CatalogPage = ({ columns, actions, - initiallySelectedFilter, -}: CatalogPageProps) => { - return ( - - - - - All your software catalog entities - - - - - - - - - - - - - - ); -}; + initiallySelectedFilter = 'owned', +}: CatalogPageProps) => ( + + + + + All your software catalog entities + + + + + + + + + + + + + +); From 2a295bcec92f465900c48d95be06b10029570842 Mon Sep 17 00:00:00 2001 From: Philipp Hugenroth Date: Mon, 12 Jul 2021 14:41:30 +0200 Subject: [PATCH 5/6] Add TablePage components - Change CatalogPage to use generic TablePage Signed-off-by: Philipp Hugenroth --- .../src/layout/Header/Header.tsx | 2 +- .../src/layout/TablePage/Layout.tsx | 37 ++++------ .../src/layout/TablePage/TablePage.tsx | 68 +++++++++++++++++++ .../src/layout/TablePage}/index.ts | 5 +- packages/core-components/src/layout/index.ts | 1 + .../components/CatalogPage/CatalogPage.tsx | 57 ++++++++-------- .../src/components/CatalogPage/index.ts | 1 - .../CreateComponentButton.tsx | 38 ----------- 8 files changed, 115 insertions(+), 94 deletions(-) rename plugins/catalog/src/components/CatalogPage/CatalogLayout.tsx => packages/core-components/src/layout/TablePage/Layout.tsx (52%) create mode 100644 packages/core-components/src/layout/TablePage/TablePage.tsx rename {plugins/catalog/src/components/CreateComponentButton => packages/core-components/src/layout/TablePage}/index.ts (84%) delete mode 100644 plugins/catalog/src/components/CreateComponentButton/CreateComponentButton.tsx diff --git a/packages/core-components/src/layout/Header/Header.tsx b/packages/core-components/src/layout/Header/Header.tsx index 96d024f524..8c51f2f7fc 100644 --- a/packages/core-components/src/layout/Header/Header.tsx +++ b/packages/core-components/src/layout/Header/Header.tsx @@ -88,7 +88,7 @@ const useStyles = makeStyles(theme => ({ type HeaderStyles = ReturnType; -type Props = { +export type Props = { component?: ReactNode; pageTitleOverride?: string; style?: CSSProperties; diff --git a/plugins/catalog/src/components/CatalogPage/CatalogLayout.tsx b/packages/core-components/src/layout/TablePage/Layout.tsx similarity index 52% rename from plugins/catalog/src/components/CatalogPage/CatalogLayout.tsx rename to packages/core-components/src/layout/TablePage/Layout.tsx index 2471ac9df2..79ad9c24b8 100644 --- a/plugins/catalog/src/components/CatalogPage/CatalogLayout.tsx +++ b/packages/core-components/src/layout/TablePage/Layout.tsx @@ -16,27 +16,20 @@ import React from 'react'; -import { configApiRef, useApi } from '@backstage/core-plugin-api'; -import { Header, Page } from '@backstage/core-components'; +import { Header, Page } from '../../'; +import { Props as HeaderProps } from '../../layout/Header/Header'; -type Props = { - children?: React.ReactNode; -}; +export interface IProps extends HeaderProps { + themeId: string; +} -export const CatalogLayout = ({ children }: Props) => { - const orgName = - useApi(configApiRef).getOptionalString('organization.name') ?? 'Backstage'; - - return ( - -
- {children} - - ); -}; - -export default CatalogLayout; +export const Layout = ({ + themeId, + children, + ...props +}: React.PropsWithChildren) => ( + +
+ {children} + +); diff --git a/packages/core-components/src/layout/TablePage/TablePage.tsx b/packages/core-components/src/layout/TablePage/TablePage.tsx new file mode 100644 index 0000000000..f58da0b553 --- /dev/null +++ b/packages/core-components/src/layout/TablePage/TablePage.tsx @@ -0,0 +1,68 @@ +/* + * 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 React from 'react'; +import { Grid } from '@material-ui/core'; + +import { Content, ContentHeader, SupportButton, Button } from '../..'; +import { Layout, IProps as LayoutProps } from './Layout'; +import { Link as RouterLink } from 'react-router-dom'; + +interface IProps extends LayoutProps { + supportMessage: string; + filter: React.ReactNode; + header: string; + headerLink?: string; +} + +const TablePageLink = ({ link }: { link?: string }) => { + return link ? ( + + ) : null; +}; + +export const TablePage = ({ + supportMessage, + filter, + children, + header, + headerLink, + ...props +}: React.PropsWithChildren) => ( + + + + + {supportMessage} + + + + {filter} + + + {children} + + + + +); diff --git a/plugins/catalog/src/components/CreateComponentButton/index.ts b/packages/core-components/src/layout/TablePage/index.ts similarity index 84% rename from plugins/catalog/src/components/CreateComponentButton/index.ts rename to packages/core-components/src/layout/TablePage/index.ts index e525bef782..5df8aa4c40 100644 --- a/plugins/catalog/src/components/CreateComponentButton/index.ts +++ b/packages/core-components/src/layout/TablePage/index.ts @@ -1,5 +1,5 @@ /* - * Copyright 2021 The Backstage Authors + * 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. @@ -13,4 +13,5 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -export { CreateComponentButton } from './CreateComponentButton'; + +export { TablePage } from './TablePage'; diff --git a/packages/core-components/src/layout/index.ts b/packages/core-components/src/layout/index.ts index 4abde642dc..dce33c7f2a 100644 --- a/packages/core-components/src/layout/index.ts +++ b/packages/core-components/src/layout/index.ts @@ -29,3 +29,4 @@ export * from './Sidebar'; export * from './SignInPage'; export * from './TabbedCard'; export * from './Breadcrumbs'; +export * from './TablePage'; diff --git a/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx b/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx index 9eeb91ca3c..bd23e5ccdb 100644 --- a/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx +++ b/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx @@ -15,24 +15,17 @@ */ import React from 'react'; -import { Grid } from '@material-ui/core'; import { EntityListProvider, UserListFilterKind, } from '@backstage/plugin-catalog-react'; import { CatalogTable } from '../CatalogTable'; +import { configApiRef, useApi, useRouteRef } from '@backstage/core-plugin-api'; import { EntityRow } from '../CatalogTable/types'; -import CatalogLayout from './CatalogLayout'; -import { CreateComponentButton } from '../CreateComponentButton'; -import { - Content, - ContentHeader, - SupportButton, - TableColumn, - TableProps, -} from '@backstage/core-components'; +import { TableColumn, TableProps, TablePage } from '@backstage/core-components'; import { CatalogFilter } from '../CatalogFilter'; +import { createComponentRouteRef } from '../../routes'; export type CatalogPageProps = { initiallySelectedFilter?: UserListFilterKind; @@ -44,23 +37,27 @@ export const CatalogPage = ({ columns, actions, initiallySelectedFilter = 'owned', -}: CatalogPageProps) => ( - - - - - All your software catalog entities - - - - - - - - - - - - - -); +}: CatalogPageProps) => { + const orgName = + useApi(configApiRef).getOptionalString('organization.name') ?? 'Backstage'; + const createComponentLink = useRouteRef(createComponentRouteRef); + + return ( + + + } + title={`${orgName} Catalog`} + subtitle={`Catalog of software components at ${orgName}`} + themeId="home" + pageTitleOverride="Home" + headerLink={createComponentLink ? createComponentLink() : ''} + > + + + + ); +}; diff --git a/plugins/catalog/src/components/CatalogPage/index.ts b/plugins/catalog/src/components/CatalogPage/index.ts index 66c3c2f4b3..dc7ed68229 100644 --- a/plugins/catalog/src/components/CatalogPage/index.ts +++ b/plugins/catalog/src/components/CatalogPage/index.ts @@ -13,5 +13,4 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -export { CatalogLayout } from './CatalogLayout'; export { CatalogPage } from './CatalogPage'; diff --git a/plugins/catalog/src/components/CreateComponentButton/CreateComponentButton.tsx b/plugins/catalog/src/components/CreateComponentButton/CreateComponentButton.tsx deleted file mode 100644 index 482a0c0a3c..0000000000 --- a/plugins/catalog/src/components/CreateComponentButton/CreateComponentButton.tsx +++ /dev/null @@ -1,38 +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 React from 'react'; -import { Link as RouterLink } from 'react-router-dom'; -import { Button } from '@material-ui/core'; -import { createComponentRouteRef } from '../../routes'; -import { useRouteRef } from '@backstage/core-plugin-api'; - -export const CreateComponentButton = () => { - const createComponentLink = useRouteRef(createComponentRouteRef); - - if (!createComponentLink) return null; - - return ( - - ); -}; From 48ec80da3ac8caec10b8529fd579610fb3cb6880 Mon Sep 17 00:00:00 2001 From: Philipp Hugenroth Date: Mon, 12 Jul 2021 17:27:44 +0200 Subject: [PATCH 6/6] Apply generic table page to ApiExplorer Signed-off-by: Philipp Hugenroth --- .../src/layout/TablePage/TablePage.tsx | 35 ++++--- .../ApiExplorerPage/ApiExplorerLayout.tsx | 40 -------- .../ApiExplorerPage/ApiExplorerPage.tsx | 94 +++++++------------ .../CatalogFilter/CatalogFilter.tsx | 4 +- .../components/CatalogPage/CatalogPage.tsx | 13 +-- plugins/catalog/src/index.ts | 3 +- 6 files changed, 68 insertions(+), 121 deletions(-) delete mode 100644 plugins/api-docs/src/components/ApiExplorerPage/ApiExplorerLayout.tsx diff --git a/packages/core-components/src/layout/TablePage/TablePage.tsx b/packages/core-components/src/layout/TablePage/TablePage.tsx index f58da0b553..5bf69f4e64 100644 --- a/packages/core-components/src/layout/TablePage/TablePage.tsx +++ b/packages/core-components/src/layout/TablePage/TablePage.tsx @@ -21,22 +21,27 @@ import { Content, ContentHeader, SupportButton, Button } from '../..'; import { Layout, IProps as LayoutProps } from './Layout'; import { Link as RouterLink } from 'react-router-dom'; -interface IProps extends LayoutProps { - supportMessage: string; - filter: React.ReactNode; - header: string; - headerLink?: string; +interface ILinkProps { + contentLink?: string; + contentLinkText?: string; } -const TablePageLink = ({ link }: { link?: string }) => { - return link ? ( +type IProps = LayoutProps & + ILinkProps & { + contentTitle: string; + supportMessage: string; + filter: React.ReactNode; + }; + +const TablePageLink = ({ contentLink, contentLinkText }: ILinkProps) => { + return contentLink && contentLinkText ? ( ) : null; }; @@ -45,14 +50,18 @@ export const TablePage = ({ supportMessage, filter, children, - header, - headerLink, + contentTitle, + contentLink, + contentLinkText, ...props }: React.PropsWithChildren) => ( - - + + {supportMessage} diff --git a/plugins/api-docs/src/components/ApiExplorerPage/ApiExplorerLayout.tsx b/plugins/api-docs/src/components/ApiExplorerPage/ApiExplorerLayout.tsx deleted file mode 100644 index 5638c23634..0000000000 --- a/plugins/api-docs/src/components/ApiExplorerPage/ApiExplorerLayout.tsx +++ /dev/null @@ -1,40 +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 React from 'react'; - -import { Header, Page } from '@backstage/core-components'; -import { useApi, configApiRef } from '@backstage/core-plugin-api'; - -type Props = { - children?: React.ReactNode; -}; -export const ApiExplorerLayout = ({ children }: Props) => { - const configApi = useApi(configApiRef); - const generatedSubtitle = `${ - configApi.getOptionalString('organization.name') ?? 'Backstage' - } API Explorer`; - return ( - -
- {children} - - ); -}; diff --git a/plugins/api-docs/src/components/ApiExplorerPage/ApiExplorerPage.tsx b/plugins/api-docs/src/components/ApiExplorerPage/ApiExplorerPage.tsx index 9a8b725ffc..bcc18e4021 100644 --- a/plugins/api-docs/src/components/ApiExplorerPage/ApiExplorerPage.tsx +++ b/plugins/api-docs/src/components/ApiExplorerPage/ApiExplorerPage.tsx @@ -14,39 +14,19 @@ * limitations under the License. */ +import { TableColumn, TablePage } from '@backstage/core-components'; +import { configApiRef, useApi, useRouteRef } from '@backstage/core-plugin-api'; +import { + CatalogFilter, + CatalogTable, + CatalogTableRow, +} from '@backstage/plugin-catalog'; import { - EntityKindPicker, - EntityLifecyclePicker, EntityListProvider, - EntityOwnerPicker, - EntityTagPicker, - EntityTypePicker, UserListFilterKind, - UserListPicker, } from '@backstage/plugin-catalog-react'; -import { CatalogTable, CatalogTableRow } from '@backstage/plugin-catalog'; -import { Button, makeStyles } from '@material-ui/core'; import React from 'react'; -import { Link as RouterLink } from 'react-router-dom'; import { createComponentRouteRef } from '../../routes'; -import { ApiExplorerLayout } from './ApiExplorerLayout'; - -import { - Content, - ContentHeader, - SupportButton, - TableColumn, -} from '@backstage/core-components'; -import { useRouteRef } from '@backstage/core-plugin-api'; - -const useStyles = makeStyles(theme => ({ - contentWrapper: { - display: 'grid', - gridTemplateAreas: "'filters' 'table'", - gridTemplateColumns: '250px 1fr', - gridColumnGap: theme.spacing(2), - }, -})); const defaultColumns: TableColumn[] = [ CatalogTable.columns.createNameColumn({ defaultKind: 'API' }), @@ -58,8 +38,11 @@ const defaultColumns: TableColumn[] = [ CatalogTable.columns.createTagsColumn(), ]; -export type ApiExplorerPageProps = { +interface IApiExplorerePageFilterProps { initiallySelectedFilter?: UserListFilterKind; +} + +export type ApiExplorerPageProps = IApiExplorerePageFilterProps & { columns?: TableColumn[]; }; @@ -67,39 +50,32 @@ export const ApiExplorerPage = ({ initiallySelectedFilter = 'all', columns, }: ApiExplorerPageProps) => { - const styles = useStyles(); const createComponentLink = useRouteRef(createComponentRouteRef); + const configApi = useApi(configApiRef); + const generatedSubtitle = `${ + configApi.getOptionalString('organization.name') ?? 'Backstage' + } API Explorer`; return ( - - - - {createComponentLink && ( - - )} - All your APIs - -
- -
-
- - -
- - + + + } + > + + + ); }; diff --git a/plugins/catalog/src/components/CatalogFilter/CatalogFilter.tsx b/plugins/catalog/src/components/CatalogFilter/CatalogFilter.tsx index a8673b395a..6704f429ee 100644 --- a/plugins/catalog/src/components/CatalogFilter/CatalogFilter.tsx +++ b/plugins/catalog/src/components/CatalogFilter/CatalogFilter.tsx @@ -38,6 +38,7 @@ import React, { PropsWithChildren } from 'react'; interface IProps { initiallySelectedFilter?: UserListFilterKind; + initialFilter?: 'component' | 'api'; } const CatalogFilterWrapper = withWidth()( @@ -56,11 +57,12 @@ const CatalogFilterWrapper = withWidth()( 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 bd23e5ccdb..702d9f2ed3 100644 --- a/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx +++ b/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx @@ -45,16 +45,17 @@ export const CatalogPage = ({ return ( } - title={`${orgName} Catalog`} - subtitle={`Catalog of software components at ${orgName}`} - themeId="home" - pageTitleOverride="Home" - headerLink={createComponentLink ? createComponentLink() : ''} > diff --git a/plugins/catalog/src/index.ts b/plugins/catalog/src/index.ts index f2f28679a5..7c8d7ac122 100644 --- a/plugins/catalog/src/index.ts +++ b/plugins/catalog/src/index.ts @@ -15,11 +15,9 @@ */ export * from './components/AboutCard'; -export { CatalogLayout } from './components/CatalogPage'; export { CatalogResultListItem } from './components/CatalogResultListItem'; export { CatalogTable } from './components/CatalogTable'; export type { EntityRow as CatalogTableRow } from './components/CatalogTable'; -export { CreateComponentButton } from './components/CreateComponentButton'; export { EntityLayout } from './components/EntityLayout'; export * from './components/EntityOrphanWarning'; export { EntityPageLayout } from './components/EntityPageLayout'; @@ -42,3 +40,4 @@ export { EntitySystemDiagramCard, } from './plugin'; export * from './components/CatalogTable/columns'; +export * from './components/CatalogFilter';