packages/core: rename NavTargets to RouteRefs

packages/core/src/api/app/App.tsx

@@ -86,7 +86,7 @@ class AppImpl implements BackstageApp {
     for (const plugin of this.plugins.values()) {
       for (const output of plugin.output()) {
         switch (output.type) {
-          case 'route': {
+          case 'legacy-route': {
             const { path, component, options = {} } = output;
             const { exact = true } = options;
             routes.push(
@@ -99,7 +99,7 @@ class AppImpl implements BackstageApp {
             );
             break;
           }
-          case 'nav-target-component': {
+          case 'route': {
             const { target, component, options = {} } = output;
             const { exact = true } = options;
             routes.push(

packages/core/src/api/index.ts

@@ -16,6 +16,6 @@
 
 export * from './apis';
 export * from './app';
-export * from './navTargets';
+export * from './routing';
 export * from './plugin';
 export * from './types';

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

@@ -23,7 +23,7 @@ import {
   BackstagePlugin,
 } from './types';
 import { validateBrowserCompat, validateFlagName } from '../app/FeatureFlags';
-import { NavTarget } from '../navTargets';
+import { RouteRef } from '../routing';
 
 export type PluginConfig = {
   id: string;
@@ -37,7 +37,7 @@ export type PluginHooks = {
 
 export type RouterHooks = {
   addRoute(
-    target: NavTarget,
+    target: RouteRef,
     Component: ComponentType<any>,
     options?: RouteOptions,
   ): void;
@@ -82,14 +82,14 @@ export class PluginImpl {
       router: {
         addRoute(target, component, options) {
           outputs.push({
-            type: 'nav-target-component',
+            type: 'route',
             target,
             component,
             options,
           });
         },
         registerRoute(path, component, options) {
-          outputs.push({ type: 'route', path, component, options });
+          outputs.push({ type: 'legacy-route', path, component, options });
         },
         registerRedirect(path, target, options) {
           outputs.push({ type: 'redirect-route', path, target, options });

packages/core/src/api/plugin/types.ts

@@ -15,7 +15,7 @@
  */
 
 import { ComponentType } from 'react';
-import { NavTarget } from '../navTargets';
+import { RouteRef } from '../routing';
 
 export type RouteOptions = {
   // Whether the route path must match exactly, defaults to true.
@@ -24,16 +24,17 @@ export type RouteOptions = {
 
 export type RoutePath = string;
 
-export type RouteOutput = {
-  type: 'route';
+// Replace with using RouteRefs
+export type LegacyRouteOutput = {
+  type: 'legacy-route';
   path: RoutePath;
   component: ComponentType<{}>;
   options?: RouteOptions;
 };
 
-export type RouteTargetOutput = {
-  type: 'nav-target-component';
-  target: NavTarget;
+export type RouteOutput = {
+  type: 'route';
+  target: RouteRef;
   component: ComponentType<{}>;
   options?: RouteOptions;
 };
@@ -53,8 +54,8 @@ export type FeatureFlagOutput = {
 };
 
 export type PluginOutput =
+  | LegacyRouteOutput
   | RouteOutput
-  | RouteTargetOutput
   | RedirectRouteOutput
   | FeatureFlagOutput;
 

packages/core/src/api/routing/RouteRef.ts

@@ -14,14 +14,14 @@
  * limitations under the License.
  */
 
-import type { NavTargetConfig, NavTargetOverrideConfig } from './types';
+import type { RouteRefConfig, RouteRefOverrideConfig } from './types';
 
-export class MutableNavTarget {
-  private effectiveConfig: NavTargetConfig = this.config;
+export class MutableRouteRef {
+  private effectiveConfig: RouteRefConfig = this.config;
 
-  constructor(private readonly config: NavTargetConfig) {}
+  constructor(private readonly config: RouteRefConfig) {}
 
-  override(overrideConfig: NavTargetOverrideConfig) {
+  override(overrideConfig: RouteRefOverrideConfig) {
     this.effectiveConfig = { ...this.config, ...overrideConfig };
   }
 
@@ -38,6 +38,6 @@ export class MutableNavTarget {
   }
 }
 
-export function createNavTarget(config: NavTargetConfig): MutableNavTarget {
-  return new MutableNavTarget(config);
+export function createRouteRef(config: RouteRefConfig): MutableRouteRef {
+  return new MutableRouteRef(config);
 }

packages/core/src/api/routing/index.ts

@@ -15,4 +15,4 @@
  */
 
 export * from './types';
-export { createNavTarget } from './NavTarget';
+export { createRouteRef } from './RouteRef';

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

@@ -16,19 +16,19 @@
 
 import { IconComponent } from '../../icons';
 
-export type NavTarget = {
+export type RouteRef = {
   path: string;
   icon: IconComponent;
   title: string;
 };
 
-export type NavTargetConfig = {
+export type RouteRefConfig = {
   path: string;
   icon: IconComponent;
   title: string;
 };
 
-export type NavTargetOverrideConfig = {
+export type RouteRefOverrideConfig = {
   path?: string;
   icon?: IconComponent;
   title?: string;

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

@@ -113,7 +113,7 @@ class DevAppBuilder {
     for (const plugin of plugins) {
       for (const output of plugin.output()) {
         switch (output.type) {
-          case 'route': {
+          case 'legacy-route': {
             const { path } = output;
             sidebarItems.push(
               <SidebarItem
@@ -125,7 +125,7 @@ class DevAppBuilder {
             );
             break;
           }
-          case 'nav-target-component': {
+          case 'route': {
             const { target } = output;
             sidebarItems.push(
               <SidebarItem
@@ -156,12 +156,12 @@ class DevAppBuilder {
     providedFactories: ApiFactory<any, any, any>[],
   ): ApiHolder {
     const providedApis = new Set(
-      providedFactories.map((factory) => factory.implements),
+      providedFactories.map(factory => factory.implements),
     );
 
     // Exlude any default API factory that we receive a factory for in the config
     const defaultFactories = Object.values(defaultApiFactories).filter(
-      (factory) => !providedApis.has(factory.implements),
+      factory => !providedApis.has(factory.implements),
     );
     const allFactories = [...defaultFactories, ...providedFactories];
 
@@ -180,7 +180,7 @@ class DevAppBuilder {
 
     for (const plugin of plugins) {
       for (const output of plugin.output()) {
-        if (output.type === 'route') {
+        if (output.type === 'legacy-route') {
           paths.push(output.path);
         }
       }

plugins/circleci/src/index.ts

@@ -17,5 +17,5 @@
 export { plugin } from './plugin';
 export * from './api';
 export * from './proxy';
-export * from './navTargets';
+export * from './route-refs';
 export { CircleCIWidget } from './components/App';

plugins/circleci/src/plugin.ts

@@ -15,11 +15,11 @@
  */
 import { createPlugin } from '@backstage/core';
 import { App } from './components/App';
-import { navTargetCircleCI } from './navTargets';
+import { circleCIRouteRef } from './route-refs';
 
 export const plugin = createPlugin({
   id: 'circleci',
   register({ router }) {
-    router.addRoute(navTargetCircleCI, App, { exact: false });
+    router.addRoute(circleCIRouteRef, App, { exact: false });
   },
 });

plugins/circleci/src/route-refs.tsx

@@ -15,10 +15,10 @@
  */
 
 import React, { FC } from 'react';
-import { createNavTarget } from '@backstage/core';
+import { createRouteRef } from '@backstage/core';
 import { SvgIcon, SvgIconProps } from '@material-ui/core';
 
-const CircleCIIcon: FC<SvgIconProps> = (props) => (
+const CircleCIIcon: FC<SvgIconProps> = props => (
   <SvgIcon
     {...props}
     enableBackground="new 0 0 200 200"
@@ -31,7 +31,7 @@ const CircleCIIcon: FC<SvgIconProps> = (props) => (
   </SvgIcon>
 );
 
-export const navTargetCircleCI = createNavTarget({
+export const circleCIRouteRef = createRouteRef({
   icon: CircleCIIcon,
   path: '/circleci',
   title: 'CircleCI',

plugins/graphiql/src/index.ts

@@ -16,4 +16,4 @@
 
 export { plugin } from './plugin';
 export * from './lib/api';
-export * from './navTargets';
+export * from './route-refs';

plugins/graphiql/src/plugin.ts

@@ -16,11 +16,11 @@
 
 import { createPlugin } from '@backstage/core';
 import { GraphiQLPage } from './components';
-import { navTargetGraphiQL } from './navTargets';
+import { graphiQLRouteRef } from './route-refs';
 
 export const plugin = createPlugin({
   id: 'graphiql',
   register({ router }) {
-    router.addRoute(navTargetGraphiQL, GraphiQLPage);
+    router.addRoute(graphiQLRouteRef, GraphiQLPage);
   },
 });

plugins/graphiql/src/route-refs.tsx

@@ -15,10 +15,10 @@
  */
 
 import React, { FC } from 'react';
-import { createNavTarget } from '@backstage/core';
+import { createRouteRef } from '@backstage/core';
 import { SvgIcon, SvgIconProps } from '@material-ui/core';
 
-const GraphiQLIcon: FC<SvgIconProps> = (props) => (
+const GraphiQLIcon: FC<SvgIconProps> = props => (
   <SvgIcon {...props}>
     <g id="surface1">
       <path
@@ -85,7 +85,7 @@ const GraphiQLIcon: FC<SvgIconProps> = (props) => (
   </SvgIcon>
 );
 
-export const navTargetGraphiQL = createNavTarget({
+export const graphiQLRouteRef = createRouteRef({
   icon: GraphiQLIcon,
   path: '/graphiql',
   title: 'GraphiQL',