diff --git a/packages/components/package.json b/packages/components/package.json index 623eb64a3e..f54dd16887 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -69,6 +69,7 @@ }, "devDependencies": { "@backstage/cli": "^0.6.3", + "@backstage/core-api": "^0.2.12", "@backstage/test-utils": "^0.1.8", "@testing-library/jest-dom": "^5.10.1", "@testing-library/react": "^11.2.5", diff --git a/packages/components/src/components/AlertDisplay/AlertDisplay.test.tsx b/packages/components/src/components/AlertDisplay/AlertDisplay.test.tsx index 3f85dab9f3..e2fdc05ca8 100644 --- a/packages/components/src/components/AlertDisplay/AlertDisplay.test.tsx +++ b/packages/components/src/components/AlertDisplay/AlertDisplay.test.tsx @@ -19,9 +19,9 @@ import { AlertDisplay } from './AlertDisplay'; import { ApiProvider, ApiRegistry, - alertApiRef, AlertApiForwarder, -} from '@backstage/core-api'; +} from '@backstage/core-api'; // TODO ok-ish cause it's a test +import { alertApiRef } from '@backstage/plugin-api'; import Observable from 'zen-observable'; import { renderInTestApp } from '@backstage/test-utils'; diff --git a/packages/components/src/components/AlertDisplay/AlertDisplay.tsx b/packages/components/src/components/AlertDisplay/AlertDisplay.tsx index 6d6646fa18..2570c08fcf 100644 --- a/packages/components/src/components/AlertDisplay/AlertDisplay.tsx +++ b/packages/components/src/components/AlertDisplay/AlertDisplay.tsx @@ -18,7 +18,7 @@ import React, { useEffect, useState } from 'react'; import { Snackbar, IconButton } from '@material-ui/core'; import CloseIcon from '@material-ui/icons/Close'; import { Alert } from '@material-ui/lab'; -import { AlertMessage, useApi, alertApiRef } from '@backstage/core-api'; +import { AlertMessage, useApi, alertApiRef } from '@backstage/plugin-api'; // TODO: improve on this and promote to a shared component for use by all apps. export const AlertDisplay = () => { diff --git a/packages/components/src/components/Button/Button.stories.tsx b/packages/components/src/components/Button/Button.stories.tsx index af95e64d52..07c7e6c8b5 100644 --- a/packages/components/src/components/Button/Button.stories.tsx +++ b/packages/components/src/components/Button/Button.stories.tsx @@ -16,7 +16,6 @@ import React, { FunctionComponentFactory } from 'react'; import { Button } from './Button'; import { MemoryRouter, useLocation } from 'react-router-dom'; -import { createRouteRef } from '@backstage/core-api'; import { Divider, Link, @@ -63,11 +62,6 @@ export default { }; export const Default = () => { - const routeRef = createRouteRef({ - path: '/hello', - title: 'Hi there!', - }); - // Design Permutations: // color = default | primary | secondary // variant = contained | outlined | text @@ -81,7 +75,7 @@ export const Default = () => { 
color="primary" variant="contained"
- @@ -94,7 +88,7 @@ export const Default = () => { 
color="secondary" variant="contained"
- @@ -107,7 +101,7 @@ export const Default = () => { 
color="default" variant="outlined"
- @@ -116,11 +110,6 @@ export const Default = () => { }; export const ButtonLinks = () => { - const routeRef = createRouteRef({ - path: '/hello', - title: 'Hi there!', - }); - const handleClick = () => { return 'Your click worked!'; }; @@ -132,7 +121,7 @@ export const ButtonLinks = () => { // TODO: Refactor to use new routing mechanisms } -   has props for both Material-UI's component as well as for diff --git a/packages/components/src/components/CopyTextButton/CopyTextButton.test.tsx b/packages/components/src/components/CopyTextButton/CopyTextButton.test.tsx index 07bce97d74..a8a30c2588 100644 --- a/packages/components/src/components/CopyTextButton/CopyTextButton.test.tsx +++ b/packages/components/src/components/CopyTextButton/CopyTextButton.test.tsx @@ -19,12 +19,8 @@ import { fireEvent } from '@testing-library/react'; import { act } from 'react-dom/test-utils'; import { renderInTestApp } from '@backstage/test-utils'; import { CopyTextButton } from './CopyTextButton'; -import { - ApiRegistry, - errorApiRef, - ApiProvider, - ErrorApi, -} from '@backstage/core-api'; +import { ApiRegistry, ApiProvider } from '@backstage/core-api'; +import { errorApiRef, ErrorApi } from '@backstage/plugin-api'; jest.mock('popper.js', () => { const PopperJS = jest.requireActual('popper.js'); diff --git a/packages/components/src/components/CopyTextButton/CopyTextButton.tsx b/packages/components/src/components/CopyTextButton/CopyTextButton.tsx index 9f6cdd7e7c..3a008d4838 100644 --- a/packages/components/src/components/CopyTextButton/CopyTextButton.tsx +++ b/packages/components/src/components/CopyTextButton/CopyTextButton.tsx @@ -19,7 +19,7 @@ import { IconButton, makeStyles, Tooltip } from '@material-ui/core'; import PropTypes from 'prop-types'; import CopyIcon from '@material-ui/icons/FileCopy'; import { BackstageTheme } from '@backstage/theme'; -import { errorApiRef, useApi } from '@backstage/core-api'; +import { errorApiRef, useApi } from '@backstage/plugin-api'; const useStyles = makeStyles(theme => ({ button: { diff --git a/packages/components/src/components/DismissableBanner/DismissableBanner.stories.tsx b/packages/components/src/components/DismissableBanner/DismissableBanner.stories.tsx index d77a713b34..6fdc662cdb 100644 --- a/packages/components/src/components/DismissableBanner/DismissableBanner.stories.tsx +++ b/packages/components/src/components/DismissableBanner/DismissableBanner.stories.tsx @@ -21,11 +21,9 @@ import { ApiProvider, ApiRegistry, CreateStorageApiOptions, - ErrorApi, - storageApiRef, - StorageApi, WebStorage, } from '@backstage/core-api'; +import { ErrorApi, storageApiRef, StorageApi } from '@backstage/plugin-api'; export default { title: 'Feedback/DismissableBanner', diff --git a/packages/components/src/components/DismissableBanner/DismissableBanner.test.tsx b/packages/components/src/components/DismissableBanner/DismissableBanner.test.tsx index b1fd32bc0a..92c3cd34e1 100644 --- a/packages/components/src/components/DismissableBanner/DismissableBanner.test.tsx +++ b/packages/components/src/components/DismissableBanner/DismissableBanner.test.tsx @@ -21,11 +21,10 @@ import { DismissableBanner } from './DismissableBanner'; import { ApiRegistry, ApiProvider, - storageApiRef, CreateStorageApiOptions, - StorageApi, WebStorage, } from '@backstage/core-api'; +import { storageApiRef, StorageApi } from '@backstage/plugin-api'; describe('', () => { let apis: ApiRegistry; diff --git a/packages/components/src/components/DismissableBanner/DismissableBanner.tsx b/packages/components/src/components/DismissableBanner/DismissableBanner.tsx index 568ab6306b..63198f3473 100644 --- a/packages/components/src/components/DismissableBanner/DismissableBanner.tsx +++ b/packages/components/src/components/DismissableBanner/DismissableBanner.tsx @@ -15,7 +15,7 @@ */ import React, { ReactNode, useState, useEffect } from 'react'; -import { useApi, storageApiRef } from '@backstage/core-api'; +import { useApi, storageApiRef } from '@backstage/plugin-api'; import { useObservable } from 'react-use'; import classNames from 'classnames'; import { makeStyles } from '@material-ui/core'; diff --git a/packages/components/src/components/Link/Link.stories.tsx b/packages/components/src/components/Link/Link.stories.tsx index 852d51970f..b282a0799c 100644 --- a/packages/components/src/components/Link/Link.stories.tsx +++ b/packages/components/src/components/Link/Link.stories.tsx @@ -21,7 +21,6 @@ import { useLocation, NavLink as RouterNavLink, } from 'react-router-dom'; -import { createRouteRef } from '@backstage/core-api'; const Location = () => { const location = useLocation(); @@ -46,32 +45,22 @@ export default { }; export const Default = () => { - const routeRef = createRouteRef({ - path: '/hello', - title: 'Hi there!', - }); - return ( <> - This link will utilise the - react-router MemoryRouter's navigation - -

{routeRef.title}

+ This link will utilise the react-router + MemoryRouter's navigation + +

Hi there!

 ); }; export const PassProps = () => { - const routeRef = createRouteRef({ - path: '/hello', - title: 'Hi there!', - }); - return ( <> {  has props for both material-ui's component as well as for react-router-dom's - -

{routeRef.title}

+ +

Hi there!

 ); diff --git a/packages/components/src/components/OAuthRequestDialog/LoginRequestListItem.tsx b/packages/components/src/components/OAuthRequestDialog/LoginRequestListItem.tsx index cc1df3b529..5be431bbfb 100644 --- a/packages/components/src/components/OAuthRequestDialog/LoginRequestListItem.tsx +++ b/packages/components/src/components/OAuthRequestDialog/LoginRequestListItem.tsx @@ -23,7 +23,7 @@ import { Theme, } from '@material-ui/core'; import React, { useState } from 'react'; -import { PendingAuthRequest } from '@backstage/core-api'; +import { PendingAuthRequest } from '@backstage/plugin-api'; const useItemStyles = makeStyles(theme => ({ root: { diff --git a/packages/components/src/components/OAuthRequestDialog/OAuthRequestDialog.tsx b/packages/components/src/components/OAuthRequestDialog/OAuthRequestDialog.tsx index 06b53332dc..cc77d3ce79 100644 --- a/packages/components/src/components/OAuthRequestDialog/OAuthRequestDialog.tsx +++ b/packages/components/src/components/OAuthRequestDialog/OAuthRequestDialog.tsx @@ -27,7 +27,7 @@ import { import React, { useMemo, useState } from 'react'; import { useObservable } from 'react-use'; import LoginRequestListItem from './LoginRequestListItem'; -import { useApi, oauthRequestApiRef } from '@backstage/core-api'; +import { useApi, oauthRequestApiRef } from '@backstage/plugin-api'; const useStyles = makeStyles(theme => ({ dialog: { diff --git a/packages/components/src/components/SupportButton/SupportButton.tsx b/packages/components/src/components/SupportButton/SupportButton.tsx index eea2b000ca..152c55e92b 100644 --- a/packages/components/src/components/SupportButton/SupportButton.tsx +++ b/packages/components/src/components/SupportButton/SupportButton.tsx @@ -14,8 +14,10 @@ * limitations under the License. */ -import { HelpIcon, useApp } from '@backstage/core-api'; +import { HelpIcon } from '../../icons'; +import { useApp } from '@backstage/plugin-api'; import { + Box, Button, List, ListItem, @@ -35,15 +37,12 @@ import { Link } from '../Link'; type Props = {}; -const useStyles = makeStyles(theme => ({ - leftIcon: { - marginRight: theme.spacing(1), - }, +const useStyles = makeStyles({ popoverList: { minWidth: 260, maxWidth: 400, }, -})); +}); const SupportIcon = ({ icon }: { icon: string | undefined }) => { const app = useApp(); @@ -101,7 +100,9 @@ export const SupportButton = ({ children }: PropsWithChildren) => { color="primary" onClick={onClickHandler} > - + + + Support { + const Component: IconComponent = props => { + const app = useApp(); + const Icon = app.getSystemIcon(key); + return Icon ? : ; + }; + return Component; +}; + +// Should match the list of overridable system icon keys in @backstage/app-api +export const BrokenImageIcon = overridableSystemIcon('brokenImage'); +export const ChatIcon = overridableSystemIcon('chat'); +export const DashboardIcon = overridableSystemIcon('dashboard'); +export const EmailIcon = overridableSystemIcon('email'); +export const GitHubIcon = overridableSystemIcon('github'); +export const GroupIcon = overridableSystemIcon('group'); +export const HelpIcon = overridableSystemIcon('help'); +export const UserIcon = overridableSystemIcon('user'); +export const WarningIcon = overridableSystemIcon('warning'); diff --git a/packages/components/src/icons/index.ts b/packages/components/src/icons/index.ts new file mode 100644 index 0000000000..ae2b076176 --- /dev/null +++ b/packages/components/src/icons/index.ts @@ -0,0 +1,17 @@ +/* + * Copyright 2020 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 * from './icons'; diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts index a966ff0d6c..a41bd26c8f 100644 --- a/packages/components/src/index.ts +++ b/packages/components/src/index.ts @@ -15,5 +15,6 @@ */ export * from './components'; -export * from './layout'; export * from './hooks'; +export * from './icons'; +export * from './layout'; diff --git a/packages/components/src/layout/HomepageTimer/HomepageTimer.test.tsx b/packages/components/src/layout/HomepageTimer/HomepageTimer.test.tsx index 40b0c266e0..7bf0d82722 100644 --- a/packages/components/src/layout/HomepageTimer/HomepageTimer.test.tsx +++ b/packages/components/src/layout/HomepageTimer/HomepageTimer.test.tsx @@ -19,14 +19,8 @@ import { HomepageTimer } from './HomepageTimer'; import React from 'react'; import { lightTheme } from '@backstage/theme'; import { ThemeProvider } from '@material-ui/core'; - -import { - ApiProvider, - ApiRegistry, - ConfigReader, - ConfigApi, - configApiRef, -} from '@backstage/core-api'; +import { ConfigReader, ApiProvider, ApiRegistry } from '@backstage/core-api'; +import { ConfigApi, configApiRef } from '@backstage/plugin-api'; it('changes default timezone to GMT', async () => { const configApi: ConfigApi = new ConfigReader({ diff --git a/packages/components/src/layout/HomepageTimer/HomepageTimer.tsx b/packages/components/src/layout/HomepageTimer/HomepageTimer.tsx index 2adbf8fbd5..38e55a49f6 100644 --- a/packages/components/src/layout/HomepageTimer/HomepageTimer.tsx +++ b/packages/components/src/layout/HomepageTimer/HomepageTimer.tsx @@ -16,7 +16,7 @@ import React from 'react'; import { HeaderLabel } from '../HeaderLabel'; -import { ConfigApi, useApi, configApiRef } from '@backstage/core-api'; +import { ConfigApi, useApi, configApiRef } from '@backstage/plugin-api'; const timeFormat = { hour: '2-digit', minute: '2-digit' }; diff --git a/packages/components/src/layout/Sidebar/Items.tsx b/packages/components/src/layout/Sidebar/Items.tsx index e41a45a225..f6f86fd521 100644 --- a/packages/components/src/layout/Sidebar/Items.tsx +++ b/packages/components/src/layout/Sidebar/Items.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import { IconComponent } from '@backstage/core-api'; +import { IconComponent } from '@backstage/plugin-api'; import { BackstageTheme } from '@backstage/theme'; import { Badge, @@ -170,7 +170,7 @@ export const SidebarItem = forwardRef((props, ref) => { overlap="circle" invisible={!hasNotifications} > - + ); diff --git a/packages/components/src/layout/SignInPage/SignInPage.tsx b/packages/components/src/layout/SignInPage/SignInPage.tsx index c3e5b75bb7..7ab04eb04e 100644 --- a/packages/components/src/layout/SignInPage/SignInPage.tsx +++ b/packages/components/src/layout/SignInPage/SignInPage.tsx @@ -20,7 +20,7 @@ import { Header } from '../Header'; import { Content } from '../Content/Content'; import { ContentHeader } from '../ContentHeader/ContentHeader'; import { Grid, Button, Typography } from '@material-ui/core'; -import { SignInPageProps, useApi, configApiRef } from '@backstage/core-api'; +import { SignInPageProps, useApi, configApiRef } from '@backstage/plugin-api'; import { useSignInProviders, getSignInProviders } from './providers'; import { IdentityProviders, SignInConfig } from './types'; import { Progress } from '../../components/Progress'; diff --git a/packages/components/src/layout/SignInPage/auth0Provider.tsx b/packages/components/src/layout/SignInPage/auth0Provider.tsx index 423b28ea8d..33c833b151 100644 --- a/packages/components/src/layout/SignInPage/auth0Provider.tsx +++ b/packages/components/src/layout/SignInPage/auth0Provider.tsx @@ -18,7 +18,7 @@ import React from 'react'; import { Grid, Typography, Button } from '@material-ui/core'; import { InfoCard } from '../InfoCard/InfoCard'; import { ProviderComponent, ProviderLoader, SignInProvider } from './types'; -import { useApi, auth0AuthApiRef, errorApiRef } from '@backstage/core-api'; +import { useApi, auth0AuthApiRef, errorApiRef } from '@backstage/plugin-api'; const Component: ProviderComponent = ({ onResult }) => { const auth0AuthApi = useApi(auth0AuthApiRef); diff --git a/packages/components/src/layout/SignInPage/commonProvider.tsx b/packages/components/src/layout/SignInPage/commonProvider.tsx index b7480afa49..6ebd08566d 100644 --- a/packages/components/src/layout/SignInPage/commonProvider.tsx +++ b/packages/components/src/layout/SignInPage/commonProvider.tsx @@ -23,7 +23,7 @@ import { SignInProvider, SignInConfig, } from './types'; -import { useApi, errorApiRef } from '@backstage/core-api'; +import { useApi, errorApiRef } from '@backstage/plugin-api'; import { GridItem } from './styles'; const Component: ProviderComponent = ({ config, onResult }) => { diff --git a/packages/components/src/layout/SignInPage/providers.tsx b/packages/components/src/layout/SignInPage/providers.tsx index e2c17ab80d..b82b3f4f90 100644 --- a/packages/components/src/layout/SignInPage/providers.tsx +++ b/packages/components/src/layout/SignInPage/providers.tsx @@ -21,7 +21,7 @@ import { useApi, useApiHolder, errorApiRef, -} from '@backstage/core-api'; +} from '@backstage/plugin-api'; import { SignInConfig, IdentityProviders, SignInProvider } from './types'; import { commonProvider } from './commonProvider'; import { guestProvider } from './guestProvider'; diff --git a/packages/components/src/layout/SignInPage/types.ts b/packages/components/src/layout/SignInPage/types.ts index 48945e6988..5ab9986366 100644 --- a/packages/components/src/layout/SignInPage/types.ts +++ b/packages/components/src/layout/SignInPage/types.ts @@ -23,7 +23,7 @@ import { ProfileInfoApi, BackstageIdentityApi, SessionApi, -} from '@backstage/core-api'; +} from '@backstage/plugin-api'; export type SignInConfig = { id: string;