From de13f9ac007b312f3ecbef3a303c2a10e48e796f Mon Sep 17 00:00:00 2001 From: Philipp Hugenroth Date: Wed, 28 Jul 2021 13:48:56 +0200 Subject: [PATCH] Generalize ContentHeader Button - Create CreateButton component & remove CreateComponentButton Signed-off-by: Philipp Hugenroth --- .../components/CreateButton/CreateButton.tsx | 51 +++++++++++++++++++ .../src/components/CreateButton}/index.ts | 2 +- .../SupportButton/SupportButton.tsx | 39 ++++++++++---- .../core-components/src/components/index.ts | 1 + .../ApiExplorerPage/ApiExplorerPage.tsx | 19 +++---- .../components/CatalogPage/CatalogPage.tsx | 11 ++-- .../CreateComponentButton.tsx | 36 ------------- plugins/catalog/src/index.ts | 1 - .../ScaffolderPage/ScaffolderPage.tsx | 18 +++---- 9 files changed, 101 insertions(+), 77 deletions(-) create mode 100644 packages/core-components/src/components/CreateButton/CreateButton.tsx rename {plugins/catalog/src/components/CreateComponentButton => packages/core-components/src/components/CreateButton}/index.ts (90%) delete mode 100644 plugins/catalog/src/components/CreateComponentButton/CreateComponentButton.tsx 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 ? ( + + + + ) : ( + + )} [] = [ @@ -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/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 215a18f661..4c0d5ade7e 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/EntityPageLayout'; 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,