diff --git a/.changeset/quick-coats-peel.md b/.changeset/quick-coats-peel.md new file mode 100644 index 0000000000..12e567aa24 --- /dev/null +++ b/.changeset/quick-coats-peel.md @@ -0,0 +1,8 @@ +--- +'@backstage/core-components': patch +'@backstage/plugin-api-docs': patch +'@backstage/plugin-catalog': patch +'@backstage/plugin-scaffolder': patch +--- + +Move the `CreateComponentButton` from the catalog plugin to the `core-components` & rename it to `CreateButton` to be reused inside the api-docs plugin & scaffolder plugin, but also future plugins. Additionally, improve responsiveness of `CreateButton` & `SupportButton` by shrinking them to `IconButtons` on smaller screens. diff --git a/docs/features/software-catalog/catalog-customization.md b/docs/features/software-catalog/catalog-customization.md index 0c11d8f476..8d209cc8f0 100644 --- a/docs/features/software-catalog/catalog-customization.md +++ b/docs/features/software-catalog/catalog-customization.md @@ -36,7 +36,7 @@ export const CustomCatalogPage = ({ - + All your software catalog entities diff --git a/packages/core-components/api-report.md b/packages/core-components/api-report.md index 5ce289d8d8..42404fb0c0 100644 --- a/packages/core-components/api-report.md +++ b/packages/core-components/api-report.md @@ -467,6 +467,15 @@ export const CopyTextButton: { }; }; +// Warning: (ae-forgotten-export) The symbol "CreateButtonProps" needs to be exported by the entry point index.d.ts +// Warning: (ae-missing-release-tag) "CreateButton" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) +// +// @public (undocumented) +export const CreateButton: ({ + title, + to, +}: CreateButtonProps) => JSX.Element | null; + // Warning: (ae-missing-release-tag) "DashboardIcon" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) // // @public (undocumented) diff --git a/packages/core-components/src/components/CreateButton/CreateButton.tsx b/packages/core-components/src/components/CreateButton/CreateButton.tsx new file mode 100644 index 0000000000..021e1b002d --- /dev/null +++ b/packages/core-components/src/components/CreateButton/CreateButton.tsx @@ -0,0 +1,51 @@ +/* + * 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 { Button, IconButton, useMediaQuery } from '@material-ui/core'; +import React from 'react'; +import { Link as RouterLink, LinkProps } from 'react-router-dom'; +import AddCircleOutline from '@material-ui/icons/AddCircleOutline'; + +type CreateButtonProps = { + title: string; +} & Partial>; + +export const CreateButton = ({ title, to }: CreateButtonProps) => { + const isXSScreen = useMediaQuery(theme => + theme.breakpoints.down('xs'), + ); + + if (!to) { + return null; + } + + return isXSScreen ? ( + + + + ) : ( + + ); +}; diff --git a/plugins/catalog/src/components/CreateComponentButton/index.ts b/packages/core-components/src/components/CreateButton/index.ts similarity index 90% rename from plugins/catalog/src/components/CreateComponentButton/index.ts rename to packages/core-components/src/components/CreateButton/index.ts index edf59d18a6..f0e4cbe646 100644 --- a/plugins/catalog/src/components/CreateComponentButton/index.ts +++ b/packages/core-components/src/components/CreateButton/index.ts @@ -14,4 +14,4 @@ * limitations under the License. */ -export { CreateComponentButton } from './CreateComponentButton'; +export { CreateButton } from './CreateButton'; diff --git a/packages/core-components/src/components/SupportButton/SupportButton.tsx b/packages/core-components/src/components/SupportButton/SupportButton.tsx index 3e719acb95..22ec5cf47e 100644 --- a/packages/core-components/src/components/SupportButton/SupportButton.tsx +++ b/packages/core-components/src/components/SupportButton/SupportButton.tsx @@ -15,21 +15,24 @@ */ import { useApp } from '@backstage/core-plugin-api'; -import { HelpIcon } from '../../icons'; +import { BackstageTheme } from '@backstage/theme'; import { Box, Button, DialogActions, + IconButton, List, ListItem, ListItemIcon, ListItemText, - Typography, makeStyles, Popover, + Typography, + useMediaQuery, } from '@material-ui/core'; import React, { MouseEventHandler, useState } from 'react'; import { SupportItem, SupportItemLink, useSupportConfig } from '../../hooks'; +import { HelpIcon } from '../../icons'; import { Link } from '../Link'; type SupportButtonProps = { @@ -83,6 +86,9 @@ export const SupportButton = ({ title, children }: SupportButtonProps) => { const [popoverOpen, setPopoverOpen] = useState(false); const [anchorEl, setAnchorEl] = useState(null); const classes = useStyles(); + const isSmallScreen = useMediaQuery(theme => + theme.breakpoints.down('sm'), + ); const onClickHandler: MouseEventHandler = event => { setAnchorEl(event.currentTarget); @@ -95,15 +101,26 @@ export const SupportButton = ({ title, children }: SupportButtonProps) => { return ( <> - - + + {isSmallScreen ? ( + + + + ) : ( + + )} flexWrap: 'wrap', justifyContent: 'flex-end', alignItems: 'center', - marginBottom: theme.spacing(1), + marginBottom: theme.spacing(2), textAlign: props.textAlign, }, leftItemsBox: { flex: '1 1 auto', - marginBottom: theme.spacing(1), minWidth: 0, overflow: 'visible', }, @@ -47,13 +46,13 @@ const useStyles = (props: ContentHeaderProps) => flexWrap: 'wrap', alignItems: 'center', marginLeft: theme.spacing(1), - marginBottom: theme.spacing(1), minWidth: 0, overflow: 'visible', }, description: {}, title: { display: 'inline-flex', + marginBottom: 0, }, })); diff --git a/plugins/api-docs/src/components/ApiExplorerPage/ApiExplorerPage.tsx b/plugins/api-docs/src/components/ApiExplorerPage/ApiExplorerPage.tsx index 361ce7b55b..2f74aaa166 100644 --- a/plugins/api-docs/src/components/ApiExplorerPage/ApiExplorerPage.tsx +++ b/plugins/api-docs/src/components/ApiExplorerPage/ApiExplorerPage.tsx @@ -17,6 +17,7 @@ import { Content, ContentHeader, + CreateButton, PageWithHeader, SupportButton, TableColumn, @@ -39,9 +40,7 @@ import { UserListFilterKind, UserListPicker, } from '@backstage/plugin-catalog-react'; -import { Button } from '@material-ui/core'; import React from 'react'; -import { Link as RouterLink } from 'react-router-dom'; import { createComponentRouteRef } from '../../routes'; const defaultColumns: TableColumn[] = [ @@ -63,11 +62,11 @@ export const ApiExplorerPage = ({ initiallySelectedFilter = 'all', columns, }: ApiExplorerPageProps) => { - const createComponentLink = useRouteRef(createComponentRouteRef); const configApi = useApi(configApiRef); const generatedSubtitle = `${ configApi.getOptionalString('organization.name') ?? 'Backstage' } API Explorer`; + const createComponentLink = useRouteRef(createComponentRouteRef); return ( - {createComponentLink && ( - - )} + All your APIs diff --git a/plugins/catalog/api-report.md b/plugins/catalog/api-report.md index c030882bca..63ff79ea0f 100644 --- a/plugins/catalog/api-report.md +++ b/plugins/catalog/api-report.md @@ -160,11 +160,6 @@ export type CatalogTableRow = { }; }; -// Warning: (ae-missing-release-tag) "CreateComponentButton" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) -// -// @public (undocumented) -export const CreateComponentButton: () => JSX.Element | null; - // Warning: (ae-missing-release-tag) "createMetadataDescriptionColumn" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) // // @public (undocumented) diff --git a/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx b/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx index 963e04e5e2..a4f6c01bc8 100644 --- a/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx +++ b/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx @@ -17,12 +17,13 @@ import { Content, ContentHeader, + CreateButton, PageWithHeader, SupportButton, TableColumn, TableProps, } from '@backstage/core-components'; -import { configApiRef, useApi } from '@backstage/core-plugin-api'; +import { configApiRef, useApi, useRouteRef } from '@backstage/core-plugin-api'; import { EntityKindPicker, EntityLifecyclePicker, @@ -34,9 +35,9 @@ import { UserListPicker, } from '@backstage/plugin-catalog-react'; import React from 'react'; +import { createComponentRouteRef } from '../../routes'; import { CatalogTable } from '../CatalogTable'; import { EntityRow } from '../CatalogTable/types'; -import { CreateComponentButton } from '../CreateComponentButton'; import { FilteredEntityLayout, EntityListContainer, @@ -56,12 +57,16 @@ export const CatalogPage = ({ }: CatalogPageProps) => { const orgName = useApi(configApiRef).getOptionalString('organization.name') ?? 'Backstage'; + const createComponentLink = useRouteRef(createComponentRouteRef); return ( - + All your software catalog entities diff --git a/plugins/catalog/src/components/CreateComponentButton/CreateComponentButton.tsx b/plugins/catalog/src/components/CreateComponentButton/CreateComponentButton.tsx deleted file mode 100644 index ae2fc4b718..0000000000 --- a/plugins/catalog/src/components/CreateComponentButton/CreateComponentButton.tsx +++ /dev/null @@ -1,36 +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); - - return createComponentLink ? ( - - ) : null; -}; diff --git a/plugins/catalog/src/index.ts b/plugins/catalog/src/index.ts index fd542fafa3..c5cc69f609 100644 --- a/plugins/catalog/src/index.ts +++ b/plugins/catalog/src/index.ts @@ -20,7 +20,6 @@ export * from './components/CatalogResultListItem'; export { CatalogTable } from './components/CatalogTable'; export type { EntityRow as CatalogTableRow } from './components/CatalogTable'; export * from './components/CatalogTable/columns'; -export * from './components/CreateComponentButton'; export * from './components/EntityLayout'; export * from './components/EntityOrphanWarning'; export * from './components/EntityProcessingErrorsPanel'; diff --git a/plugins/scaffolder/src/components/ScaffolderPage/ScaffolderPage.tsx b/plugins/scaffolder/src/components/ScaffolderPage/ScaffolderPage.tsx index e82a2640d6..859e5bba93 100644 --- a/plugins/scaffolder/src/components/ScaffolderPage/ScaffolderPage.tsx +++ b/plugins/scaffolder/src/components/ScaffolderPage/ScaffolderPage.tsx @@ -17,6 +17,7 @@ import { Content, ContentHeader, + CreateButton, Header, Lifecycle, Page, @@ -30,9 +31,8 @@ import { EntityTagPicker, UserListPicker, } from '@backstage/plugin-catalog-react'; -import { Button, makeStyles } from '@material-ui/core'; +import { makeStyles } from '@material-ui/core'; import React from 'react'; -import { Link as RouterLink } from 'react-router-dom'; import { registerComponentRouteRef } from '../../routes'; import { TemplateList } from '../TemplateList'; import { TemplateTypePicker } from '../TemplateTypePicker'; @@ -64,16 +64,10 @@ export const ScaffolderPageContents = () => { /> - {registerComponentLink && ( - - )} + Create new software components using standard templates. Different templates create different kinds of components (services, websites,