core-plugin-api: make route ref icon field backwards compatible

Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>

.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.

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;
 };