NavLink->Link, NavButton->Button, remove redirects for now

docs/getting-started/Plugin development.md

@@ -39,14 +39,19 @@ Each plugin is responsible for registering its components to corresponding route
 The app will call the `createPlugin` method on each plugin, passing in a `router` object with a set
 of methods on it.
 
-```typescript
-import { createPlugin } from '@backstage/core';
+```jsx
+import { createPlugin, createRouteRef } from '@backstage/core';
 import ExampleComponent from './components/ExampleComponent';
 
-export default createPlugin({
-  id: 'my-plugin',
+export const rootRouteRef = createRouteRef({
+  path: '/new-plugin',
+  title: 'New plugin',
+});
+
+export const plugin = createPlugin({
+  id: 'new-plugin',
   register({ router }) {
-    router.registerRoute('/my-plugin', ExampleComponent);
+    router.addRoute(rootRouteRef, ExampleComponent);
   },
 });
 ```
@@ -54,17 +59,18 @@ export default createPlugin({
 #### `router` API
 
 ```typescript
-type RouterHooks = {
-  registerRoute(
-    path: RoutePath,
-    Component: ComponentType<any>,
-    options?: RouteOptions,
-  ): void;
+addRoute(
+  target: RouteRef,
+  Component: ComponentType<any>,
+  options?: RouteOptions,
+): void;
 
-  registerRedirect(
-    path: RoutePath,
-    target: RoutePath,
-    options?: RouteOptions,
-  ): void;
-};
+/**
+ * @deprecated See the `addRoute` method
+ */
+registerRoute(
+  path: RoutePath,
+  Component: ComponentType<any>,
+  options?: RouteOptions,
+): void;
 ```

docs/getting-started/structure-of-a-plugin.md

@@ -47,7 +47,6 @@ import { createPlugin, createRouteRef } from '@backstage/core';
 import ExampleComponent from './components/ExampleComponent';
 
 export const rootRouteRef = createRouteRef({
-  icon: () => null,
   path: '/new-plugin',
   title: 'New plugin',
 });

docs/reference/createPlugin-router.md

@@ -10,8 +10,6 @@ addRoute(
   options?: RouteOptions,
 ): void;
 
-addRedirect(from: RouteRef, to: RouteRef, options?: RouteOptions): void;
-
 /**
  * @deprecated See the `addRoute` method
  */
@@ -20,26 +18,16 @@ registerRoute(
   Component: ComponentType<any>,
   options?: RouteOptions,
 ): void;
-
-/**
- * @deprecated See the `addRedirect` method
- */
-registerRedirect(
-  path: RoutePath,
-  target: RoutePath,
-  options?: RouteOptions,
-): void;
 ```
 
 ## RouteRef
 
-Both `addRoute` and `addRedirect` methods are using mutable RouteRefs, which can be created as following:
+`addRoute` method is using mutable RouteRefs, which can be created as following:
 
 ```ts
 import { createRouteRef } from '@backstage/core';
 
 const myPluginRouteRef = createRouteRef({
-  icon: () => null, // You can set an icon for your route
   path: '/my-plugin',
   title: 'My Plugin',
 });

packages/cli/templates/default-plugin/src/plugin.ts.hbs

@@ -1,31 +1,30 @@
 /*
- * 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.
- */
+* 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 { createPlugin, createRouteRef } from '@backstage/core';
 import ExampleComponent from './components/ExampleComponent';
 
 export const rootRouteRef = createRouteRef({
-  icon: () => null,
-  path: '/{{ id }}',
-  title: '{{ id }}',
+path: '/{{ id }}',
+title: '{{ id }}',
 });
 
 export const plugin = createPlugin({
-  id: '{{ id }}',
-  register({ router }) {
-    router.addRoute(rootRouteRef, ExampleComponent);
-  },
+id: '{{ id }}',
+register({ router }) {
+router.addRoute(rootRouteRef, ExampleComponent);
+},
 });

packages/core-api/src/plugin/Plugin.tsx

@@ -42,8 +42,6 @@ export type RouterHooks = {
     options?: RouteOptions,
   ): void;
 
-  addRedirect(from: RouteRef, to: RouteRef, options?: RouteOptions): void;
-
   /**
    * @deprecated See the `addRoute` method
    */
@@ -52,15 +50,6 @@ export type RouterHooks = {
     Component: ComponentType<any>,
     options?: RouteOptions,
   ): void;
-
-  /**
-   * @deprecated See the `addRedirect` method
-   */
-  registerRedirect(
-    path: RoutePath,
-    target: RoutePath,
-    options?: RouteOptions,
-  ): void;
 };
 
 export type FeatureFlagsHooks = {
@@ -96,25 +85,9 @@ export class PluginImpl {
             options,
           });
         },
-        addRedirect(from, to, options) {
-          outputs.push({
-            type: 'redirect-route',
-            from,
-            to,
-            options,
-          });
-        },
         registerRoute(path, component, options) {
           outputs.push({ type: 'legacy-route', path, component, options });
         },
-        registerRedirect(path, target, options) {
-          outputs.push({
-            type: 'legacy-redirect-route',
-            path,
-            target,
-            options,
-          });
-        },
       },
       featureFlags: {
         register(name) {

packages/core-api/src/routing/types.ts

@@ -18,13 +18,13 @@ import { IconComponent } from '../icons';
 
 export type RouteRef = {
   path: string;
-  icon: IconComponent;
+  icon?: IconComponent;
   title: string;
 };
 
 export type RouteRefConfig = {
   path: string;
-  icon: IconComponent;
+  icon?: IconComponent;
   title: string;
 };
 

packages/core/src/components/Button/Button.stories.tsx

@@ -14,12 +14,12 @@
  * limitations under the License.
  */
 import React, { FunctionComponentFactory } from 'react';
-import { NavButton } from './NavButton';
+import { Button } from './Button';
 import {
   MemoryRouter,
   Route,
   useLocation,
-  NavLink as RouterNavLink,
+  Link as RouterLink,
 } from 'react-router-dom';
 import { createRouteRef } from '@backstage/core-api';
 
@@ -29,8 +29,8 @@ const Location = () => {
 };
 
 export default {
-  title: 'NavButton',
-  component: NavButton,
+  title: 'Button',
+  component: Button,
   decorators: [
     (storyFn: FunctionComponentFactory<{}>) => (
       <MemoryRouter>
@@ -47,15 +47,14 @@ export default {
 
 export const Default = () => {
   const routeRef = createRouteRef({
-    icon: () => null,
     path: '/hello',
     title: 'Hi there!',
   });
 
   return (
     <>
-      <NavButton to={routeRef.path}>This button</NavButton>&nbsp;will utilise
-      the react-router MemoryRouter's navigation
+      <Button to={routeRef.path}>This button</Button>&nbsp;will utilise the
+      react-router MemoryRouter's navigation
       <Route path={routeRef.path}>
         <h1>{routeRef.title}</h1>
       </Route>
@@ -65,23 +64,22 @@ export const Default = () => {
 
 export const PassProps = () => {
   const routeRef = createRouteRef({
-    icon: () => null,
     path: '/hello',
     title: 'Hi there!',
   });
 
   return (
     <>
-      <NavButton
+      <Button
         to={routeRef.path}
         /** react-router-dom related prop */
-        component={RouterNavLink}
+        component={RouterLink}
         /** material-ui related prop */
         color="secondary"
         variant="outlined"
       >
         This link
-      </NavButton>
+      </Button>
       &nbsp;has props for both material-ui's component as well as for
       react-router-dom's
       <Route path={routeRef.path}>

packages/core/src/components/Button/Button.test.jsx

@@ -17,18 +17,18 @@
 import React from 'react';
 import { render, fireEvent } from '@testing-library/react';
 import { wrapInTestApp } from '@backstage/test-utils';
-import { NavButton } from './NavButton';
+import { Button } from './Button';
 import { MemoryRouter, Route } from 'react-router';
 import { act } from 'react-dom/test-utils';
 
-describe('<NavButton />', () => {
+describe('<Button />', () => {
   it('navigates using react-router', async () => {
     const testString = 'This is test string';
     const buttonLabel = 'Navigate!';
     const { getByText } = render(
       wrapInTestApp(
         <MemoryRouter>
-          <NavButton to="/test">{buttonLabel}</NavButton>
+          <Button to="/test">{buttonLabel}</Button>
           <Route path="/test">{testString}</Route>{' '}
         </MemoryRouter>,
       ),

packages/core/src/components/Button/Button.tsx

@@ -15,15 +15,16 @@
  */
 
 import React, { ComponentProps } from 'react';
-import { Button } from '@material-ui/core';
+import { Button as MaterialButton } from '@material-ui/core';
 import { Link as RouterLink } from 'react-router-dom';
 
-type Props = ComponentProps<typeof Button> & ComponentProps<typeof RouterLink>;
+type Props = ComponentProps<typeof MaterialButton> &
+  ComponentProps<typeof RouterLink>;
 
 /**
  * Thin wrapper on top of material-ui's Button component
  * Makes the Button to utilise react-router
  */
-export const NavButton = React.forwardRef<any, Props>((props, ref) => (
-  <Button ref={ref} component={RouterLink} {...props} />
+export const Button = React.forwardRef<any, Props>((props, ref) => (
+  <MaterialButton ref={ref} component={RouterLink} {...props} />
 ));

packages/core/src/components/Button/index.ts

@@ -14,4 +14,4 @@
  * limitations under the License.
  */
 
-export { NavLink } from './NavLink';
+export { Button } from './Button';

packages/core/src/components/Link/Link.stories.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 import React, { FunctionComponentFactory } from 'react';
-import { NavLink } from './NavLink';
+import { Link } from './Link';
 import {
   MemoryRouter,
   Route,
@@ -29,8 +29,8 @@ const Location = () => {
 };
 
 export default {
-  title: 'NavLink',
-  component: NavLink,
+  title: 'Link',
+  component: Link,
   decorators: [
     (storyFn: FunctionComponentFactory<{}>) => (
       <MemoryRouter>
@@ -47,14 +47,13 @@ export default {
 
 export const Default = () => {
   const routeRef = createRouteRef({
-    icon: () => null,
     path: '/hello',
     title: 'Hi there!',
   });
 
   return (
     <>
-      <NavLink to={routeRef.path}>This link</NavLink>&nbsp;will utilise the
+      <Link to={routeRef.path}>This link</Link>&nbsp;will utilise the
       react-router MemoryRouter's navigation
       <Route path={routeRef.path}>
         <h1>{routeRef.title}</h1>
@@ -65,14 +64,13 @@ export const Default = () => {
 
 export const PassProps = () => {
   const routeRef = createRouteRef({
-    icon: () => null,
     path: '/hello',
     title: 'Hi there!',
   });
 
   return (
     <>
-      <NavLink
+      <Link
         to={routeRef.path}
         /** react-router-dom related prop */
         component={RouterNavLink}
@@ -80,7 +78,7 @@ export const PassProps = () => {
         color="secondary"
       >
         This link
-      </NavLink>
+      </Link>
       &nbsp;has props for both material-ui's component as well as for
       react-router-dom's
       <Route path={routeRef.path}>

packages/core/src/components/Link/Link.test.jsx

@@ -17,18 +17,18 @@
 import React from 'react';
 import { render, fireEvent } from '@testing-library/react';
 import { wrapInTestApp } from '@backstage/test-utils';
-import { NavLink } from './NavLink';
+import { Link } from './Link';
 import { MemoryRouter, Route } from 'react-router';
 import { act } from 'react-dom/test-utils';
 
-describe('<NavLink />', () => {
+describe('<Link />', () => {
   it('navigates using react-router', async () => {
     const testString = 'This is test string';
     const linkText = 'Navigate!';
     const { getByText } = render(
       wrapInTestApp(
         <MemoryRouter>
-          <NavLink to="/test">{linkText}</NavLink>
+          <Link to="/test">{linkText}</Link>
           <Route path="/test">{testString}</Route>
         </MemoryRouter>,
       ),

packages/core/src/components/Link/Link.tsx

@@ -15,15 +15,16 @@
  */
 
 import React, { ComponentProps } from 'react';
-import { Link } from '@material-ui/core';
+import { Link as MaterialLink } from '@material-ui/core';
 import { Link as RouterLink } from 'react-router-dom';
 
-type Props = ComponentProps<typeof Link> & ComponentProps<typeof RouterLink>;
+type Props = ComponentProps<typeof MaterialLink> &
+  ComponentProps<typeof RouterLink>;
 
 /**
  * Thin wrapper on top of material-ui's Link component
  * Makes the Link to utilise react-router
  */
-export const NavLink = React.forwardRef<any, Props>((props, ref) => (
-  <Link ref={ref} component={RouterLink} {...props} />
+export const Link = React.forwardRef<any, Props>((props, ref) => (
+  <MaterialLink ref={ref} component={RouterLink} {...props} />
 ));

packages/core/src/components/Link/index.ts

@@ -14,4 +14,4 @@
  * limitations under the License.
  */
 
-export { NavButton } from './NavButton';
+export { Link } from './Link';

packages/core/src/index.ts

@@ -38,6 +38,6 @@ export { default as StructuredMetadataTable } from './components/StructuredMetad
 export { default as TrendLine } from './components/TrendLine';
 export { FeatureCalloutCircular } from './components/FeatureDiscovery/FeatureCalloutCircular';
 export * from './components/Status';
-export * from './components/NavButton';
-export * from './components/NavLink';
+export * from './components/Button';
+export * from './components/Link';
 export { default as WarningPanel } from './components/WarningPanel';

packages/dev-utils/src/devApp/render.tsx

@@ -33,6 +33,7 @@ import {
   OAuthRequestDialog,
 } from '@backstage/core';
 import * as defaultApiFactories from './apiFactories';
+import SentimentDissatisfiedIcon from '@material-ui/icons/SentimentDissatisfied';
 
 // TODO(rugvip): export proper plugin type from core that isn't the plugin class
 type BackstagePlugin = ReturnType<typeof createPlugin>;
@@ -148,7 +149,7 @@ class DevAppBuilder {
                 key={target.path}
                 to={target.path}
                 text={target.title}
-                icon={target.icon}
+                icon={target.icon ?? SentimentDissatisfiedIcon}
               />,
             );
             break;