Merge pull request #5894 from backstage/rugvip/core-compat

core-api,core-plugin-api: make RouteRef* types forwards and backwards compatible

.changeset/little-eggs-change.md

@@ -0,0 +1,5 @@
+---
+'@backstage/core-plugin-api': patch
+---
+
+Made the deprecated `icon` fields compatible with the `IconComponent` type from `@backstage/core` in order to smooth out the migration.

.changeset/unlucky-lemons-sip.md

@@ -0,0 +1,5 @@
+---
+'@backstage/core-api': patch
+---
+
+Made the `RouteRef*` types compatible with the ones exported from `@backstage/core-plugin-api`.

packages/core-api/package.json

@@ -30,6 +30,7 @@
   },
   "dependencies": {
     "@backstage/config": "^0.1.4",
+    "@backstage/core-plugin-api": "^0.1.0",
     "@backstage/theme": "^0.2.6",
     "@material-ui/core": "^4.11.0",
     "@material-ui/icons": "^4.9.1",

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

@@ -16,6 +16,7 @@
 
 import { IconComponent } from '../icons/types';
 import { getOrCreateGlobalSingleton } from '../lib/globalObject';
+import { RouteRef as NewRouteRef } from '@backstage/core-plugin-api';
 
 export type AnyParams = { [param in string]: string } | undefined;
 export type ParamKeys<Params extends AnyParams> = keyof Params extends never
@@ -34,7 +35,11 @@ export type RouteFunc<Params extends AnyParams> = (
   ...[params]: Params extends undefined ? readonly [] : readonly [Params]
 ) => string;
 
-export const routeRefType: unique symbol = getOrCreateGlobalSingleton<any>(
+type RouteRefType = Exclude<
+  keyof NewRouteRef,
+  'params' | 'path' | 'title' | 'icon'
+>;
+export const routeRefType: RouteRefType = getOrCreateGlobalSingleton<any>(
   'route-ref-type',
   () => Symbol('route-ref-type'),
 );

packages/core-plugin-api/api-report.md

@@ -9,6 +9,7 @@ import { ComponentType } from 'react';
 import { Config } from '@backstage/config';
 import { default as React_2 } from 'react';
 import { ReactNode } from 'react';
+import { SvgIconProps } from '@material-ui/core';
 
 // @public
 export type AlertApi = {
@@ -206,7 +207,7 @@ export function createRouteRef<Params extends {
     id?: string;
     params?: ParamKey[];
     path?: string;
-    icon?: IconComponent;
+    icon?: OldIconComponent;
     title?: string;
 }): RouteRef<OptionalParams<Params>>;
 
@@ -424,7 +425,7 @@ export type RouteRef<Params extends AnyParams = any> = {
     readonly [routeRefType]: 'absolute';
     params: ParamKeys<Params>;
     path: string;
-    icon?: IconComponent;
+    icon?: OldIconComponent;
     title?: string;
 };
 

packages/core-plugin-api/package.json

@@ -31,6 +31,7 @@
   "dependencies": {
     "@backstage/config": "^0.1.3",
     "@backstage/theme": "^0.2.3",
+    "@material-ui/core": "^4.11.0",
     "@types/react": "^16.9",
     "history": "^5.0.0",
     "prop-types": "^15.7.2",

packages/core-plugin-api/src/icons/index.ts

@@ -14,4 +14,4 @@
  * limitations under the License.
  */
 
-export * from './types';
+export type { IconComponent } from './types';

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

@@ -15,6 +15,7 @@
  */
 
 import { ComponentType } from 'react';
+import { SvgIconProps } from '@material-ui/core';
 
 /**
  * IconComponent is the common icon type used throughout Backstage when
@@ -31,3 +32,10 @@ import { ComponentType } from 'react';
 export type IconComponent = ComponentType<{
   fontSize?: 'default' | 'small' | 'large';
 }>;
+
+/**
+ * This exists for backwards compatibility with the old core package.
+ * It's used in some parts of this package in order to smooth out the
+ * migration, but it is not exported.
+ */
+export type OldIconComponent = ComponentType<SvgIconProps>;

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

@@ -21,13 +21,13 @@ import {
   ParamKeys,
   OptionalParams,
 } from './types';
-import { IconComponent } from '../icons/types';
+import { OldIconComponent } from '../icons/types';
 
 // TODO(Rugvip): Remove this in the next breaking release, it's exported but unused
 export type RouteRefConfig<Params extends AnyParams> = {
   params?: ParamKeys<Params>;
   path?: string;
-  icon?: IconComponent;
+  icon?: OldIconComponent;
   title: string;
 };
 
@@ -40,7 +40,7 @@ export class RouteRefImpl<Params extends AnyParams>
     readonly params: ParamKeys<Params>,
     private readonly config: {
       path?: string;
-      icon?: IconComponent;
+      icon?: OldIconComponent;
       title?: string;
     },
   ) {}
@@ -79,7 +79,7 @@ export function createRouteRef<
   /** @deprecated Route refs no longer decide their own path */
   path?: string;
   /** @deprecated Route refs no longer decide their own icon */
-  icon?: IconComponent;
+  icon?: OldIconComponent;
   /** @deprecated Route refs no longer decide their own title */
   title?: string;
 }): RouteRef<OptionalParams<Params>> {

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

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { IconComponent } from '../icons/types';
+import { OldIconComponent } from '../icons/types';
 import { getOrCreateGlobalSingleton } from '../lib/globalObject';
 
 export type AnyParams = { [param in string]: string } | undefined;
@@ -48,7 +48,7 @@ export type RouteRef<Params extends AnyParams = any> = {
   /** @deprecated paths are no longer accessed directly from RouteRefs, use useRouteRef instead */
   path: string;
   /** @deprecated icons are no longer accessed via RouteRefs */
-  icon?: IconComponent;
+  icon?: OldIconComponent;
   /** @deprecated titles are no longer accessed via RouteRefs */
   title?: string;
 };