components: migrated to use plugin-api + add icon components

Co-authored-by: Juan Lulkin <jmaiz@spotify.com> Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>
2021-03-10 15:46:44 +01:00
parent 2ee6296a52
commit 329318847f
26 changed files with 101 additions and 77 deletions
@@ -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",
@@ -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';

@@ -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 = () => {
@@ -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 = () => {
          <pre>color="primary" variant="contained"</pre>
        </ListItemText>

-        <Button to={routeRef.path} color="primary" variant="contained">
+        <Button to="/hello" color="primary" variant="contained">
          Register Component
        </Button>
      </ListItem>
@@ -94,7 +88,7 @@ export const Default = () => {
          <pre>color="secondary" variant="contained"</pre>
        </ListItemText>

-        <Button to={routeRef.path} color="secondary" variant="contained">
+        <Button to="/hello" color="secondary" variant="contained">
          Cancel
        </Button>
      </ListItem>
@@ -107,7 +101,7 @@ export const Default = () => {
          <pre>color="default" variant="outlined"</pre>
        </ListItemText>

-        <Button to={routeRef.path} color="default" variant="outlined">
+        <Button to="/hello" color="default" variant="outlined">
          View Details
        </Button>
      </ListItem>
@@ -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
        }
        <ListItem>
-          <Button to={routeRef.path} color="default" variant="outlined">
+          <Button to="/hello" color="default" variant="outlined">
            Route Ref
          </Button>
          &nbsp; has props for both Material-UI's component as well as for
@@ -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');
@@ -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<BackstageTheme>(theme => ({
  button: {
@@ -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',
@@ -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('<DismissableBanner />', () => {
  let apis: ApiRegistry;
@@ -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';
@@ -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 (
    <>
-      <Link to={routeRef.path}>This link</Link>&nbsp;will utilise the
-      react-router MemoryRouter's navigation
-      <Route path={routeRef.path}>
-        <h1>{routeRef.title}</h1>
+      <Link to="/hello">This link</Link>&nbsp;will utilise the react-router
+      MemoryRouter's navigation
+      <Route path="/hello">
+        <h1>Hi there!</h1>
      </Route>
    </>
  );
 };

 export const PassProps = () => {
-  const routeRef = createRouteRef({
-    path: '/hello',
-    title: 'Hi there!',
-  });
-
  return (
    <>
      <Link
-        to={routeRef.path}
+        to="/hello"
        /** react-router-dom related prop */
        component={RouterNavLink}
        /** material-ui related prop */
@@ -81,8 +70,8 @@ export const PassProps = () => {
      </Link>
      &nbsp;has props for both material-ui's component as well as for
      react-router-dom's
-      <Route path={routeRef.path}>
-        <h1>{routeRef.title}</h1>
+      <Route path="/hello">
+        <h1>Hi there!</h1>
      </Route>
    </>
  );
@@ -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>(theme => ({
  root: {
@@ -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>(theme => ({
  dialog: {
@@ -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<Props>) => {
        color="primary"
        onClick={onClickHandler}
      >
-        <HelpIcon className={classes.leftIcon} />
+        <Box marginRight={1} display="flex">
+          <HelpIcon />
+        </Box>
        Support
      </Button>
      <Popover
@@ -14,7 +14,7 @@
 * limitations under the License.
 */

-import { attachComponentData } from '@backstage/core-api';
+import { attachComponentData } from '@backstage/plugin-api';
 import React, {
  Children,
  Fragment,
@@ -14,7 +14,7 @@
 * limitations under the License.
 */

-import { useApi, configApiRef } from '@backstage/core-api';
+import { useApi, configApiRef } from '@backstage/plugin-api';

 export type SupportItemLink = {
  url: string;
@@ -0,0 +1,39 @@
+/*
+ * 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.
+ */
+
+import MuiBrokenImageIcon from '@material-ui/icons/BrokenImage';
+import React from 'react';
+import { useApp, IconComponent } from '@backstage/plugin-api';
+
+const overridableSystemIcon = (key: string): IconComponent => {
+  const Component: IconComponent = props => {
+    const app = useApp();
+    const Icon = app.getSystemIcon(key);
+    return Icon ? <Icon {...props} /> : <MuiBrokenImageIcon {...props} />;
+  };
+  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');
@@ -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';
@@ -15,5 +15,6 @@
 */

 export * from './components';
-export * from './layout';
 export * from './hooks';
+export * from './icons';
+export * from './layout';
@@ -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({
@@ -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' };

@@ -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<any, SidebarItemProps>((props, ref) => {
      overlap="circle"
      invisible={!hasNotifications}
    >
-      <Icon fontSize="small" className={classes.icon} />
+      <Icon />
    </Badge>
  );

@@ -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';
@@ -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);
@@ -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 }) => {
@@ -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';
@@ -23,7 +23,7 @@ import {
  ProfileInfoApi,
  BackstageIdentityApi,
  SessionApi,
-} from '@backstage/core-api';
+} from '@backstage/plugin-api';

 export type SignInConfig = {
  id: string;